body,html{margin:0;padding:0;box-sizing:border-box;background:#fff;width:100vw;height:100vh;overflow:hidden}.app{display:flex;height:100vh}.main-content{flex:1;margin-left:220px;margin-right:220px;padding:15px}.sidebar{width:200px;padding:12px 0;border-right:1px solid #eee;background:#fafbfc;height:100vh;display:flex;flex-direction:column;align-items:center;box-sizing:border-box}.sidebar-item{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;gap:4px;cursor:grab;background:none;padding:8px 0;border:none;border-radius:0;width:50%;min-width:64px;max-width:64px;box-sizing:border-box;position:relative;transition:box-shadow .2s;min-height:92px}.sidebar-component-box{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#fff;border:none;border-radius:4px;box-sizing:border-box;position:relative;transition:box-shadow .2s,border .2s,background .2s}.sidebar-component-box:hover,.sidebar-component-box:focus{border:1.5px solid #b3b3b3;box-shadow:0 0 8px 2px #0000001a;background:#f3f6fa}.sidebar-item span{display:none;position:absolute;left:50%;top:72px;transform:translate(-50%);background:#222;color:#fff;padding:5px 12px;border-radius:4px;font-size:13px;white-space:pre;text-align:center;margin-top:2px;z-index:20;min-width:64px;max-width:32ch;overflow-x:auto;box-shadow:0 2px 8px #0000001a}.sidebar-item:hover span,.sidebar-item:focus-within span{display:block}.sidebar-item>div:hover .sidebar-tooltip,.sidebar-item>div:focus .sidebar-tooltip{visibility:hidden;opacity:0}.horizontal-bar{height:28px;border-left:1px solid #bbb;margin:0 16px;flex:0 0 1px;width:1px}