:root{--bg-0:#05070d;--bg-1:#0a0e18;--panel:#ffffff09;--panel-border:#ffffff17;--ink-0:#eef1f8;--ink-1:#a9b2c6;--ink-2:#6b7488;--cf-orange:#f6821f;--font-head:"Century Gothic", "Segoe UI Semibold", "Segoe UI", -apple-system, system-ui, sans-serif;--font-body:"Segoe UI", -apple-system, system-ui, sans-serif;--font-mono:ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:auto}body{background:radial-gradient(1200px 700px at 15% -10%, #3b82f61a, transparent 60%), radial-gradient(1000px 600px at 100% 0%, #f6821f14, transparent 55%), radial-gradient(1400px 900px at 50% 120%, #a855f712, transparent 60%), var(--bg-0);color:var(--ink-0);font-family:var(--font-body)}#app{flex-direction:column;height:100vh;display:flex}.topbar{border-bottom:1px solid var(--panel-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:20;background:linear-gradient(#ffffff0a,#ffffff04);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:14px 22px;display:flex}.brand{align-items:center;gap:14px;display:flex}.brand-mark{background:linear-gradient(135deg, var(--cf-orange), #ffb35a);border-radius:12px;flex:none;justify-content:center;align-items:center;width:42px;height:42px;display:flex;box-shadow:0 6px 20px #f6821f59}.brand-mark svg{width:24px;height:24px}.brand-text h1{font-family:var(--font-head);letter-spacing:.4px;color:var(--ink-0);margin:0;font-size:16.5px;font-weight:700}.brand-text .sub{color:var(--ink-1);letter-spacing:1.6px;text-transform:uppercase;font-size:11.5px;font-family:var(--font-mono);margin-top:2px}.brand-text .sub em{color:var(--cf-orange);font-style:normal}.toolbar-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.toolbar-actions .divider{background:var(--panel-border);width:1px;height:22px;margin:0 4px}button.tool-btn{background:var(--panel);border:1px solid var(--panel-border);color:var(--ink-0);font-size:12.5px;font-family:var(--font-body);cursor:pointer;white-space:nowrap;border-radius:10px;align-items:center;gap:7px;padding:8px 12px;transition:all .18s;display:flex}button.tool-btn:hover{background:#ffffff17;border-color:#ffffff38;transform:translateY(-1px)}button.tool-btn:active{transform:translateY(0)}button.tool-btn svg{flex:none;width:14px;height:14px}#zoomLabel{text-align:center;min-width:52px;font-family:var(--font-mono);color:var(--ink-1);font-size:12px}#canvas-wrap{cursor:grab;background:linear-gradient(#ffffff06 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, #ffffff06 1px, transparent 1px) 0 0 / 34px 34px, var(--bg-1);flex:1;position:relative;overflow:hidden}#canvas-wrap.panning{cursor:grabbing}#diagram{width:100%;height:100%;display:block}#legend{border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:15;background:#0a0e18b8;border-radius:14px;width:230px;padding:14px 16px;position:absolute;bottom:20px;right:20px;box-shadow:0 12px 34px #00000073}#legend h3{letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-1);font-size:10.5px;font-family:var(--font-mono);margin:0 0 10px;font-weight:600}#legend .row{color:var(--ink-0);align-items:center;gap:9px;padding:3.5px 0;font-size:12px;display:flex}#legend .dot{border-radius:4px;flex:none;width:11px;height:11px;box-shadow:0 0 8px}#legend .toggle{background:var(--bg-1);border:1px solid var(--panel-border);width:26px;height:26px;color:var(--ink-1);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:13px;display:flex;position:absolute;top:-13px;right:-13px}#legend.collapsed .row,#legend.collapsed h3{display:none}#legend.collapsed{width:auto;padding:10px 14px}#hint{border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink-2);font-size:11px;font-family:var(--font-mono);z-index:15;pointer-events:none;background:#0a0e1899;border-radius:10px;padding:8px 12px;position:absolute;bottom:20px;left:20px}svg text{-webkit-user-select:none;user-select:none}.sidenav{z-index:100;-webkit-backdrop-filter:blur(18px);border:1px solid var(--panel-border);background:#0a0e18b3;border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;display:flex;position:fixed;top:50%;left:16px;transform:translateY(-50%);box-shadow:0 12px 40px #00000080}.sidenav-inner{flex-direction:column;align-items:center;gap:4px;display:flex}.sidenav-item{color:var(--ink-1);cursor:pointer;white-space:nowrap;border-radius:10px;align-items:center;gap:10px;width:44px;padding:8px 10px;text-decoration:none;transition:all .18s;display:flex;position:relative;overflow:hidden}.sidenav-item:hover{color:var(--ink-0);background:#ffffff12;width:auto}.sidenav-item.active{color:var(--cf-orange)}.sidenav-item.active:before{content:"";background:var(--cf-orange);border-radius:0 3px 3px 0;width:3px;height:20px;position:absolute;top:50%;left:-8px;transform:translateY(-50%)}.sidenav-icon{flex:none;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.sidenav-icon svg{width:22px;height:22px}.sidenav-label{font-family:var(--font-body);opacity:0;pointer-events:none;font-size:12.5px;font-weight:500;transition:opacity .15s}.sidenav-item:hover .sidenav-label{opacity:1;pointer-events:auto}@media print{.sidenav{display:none!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media print{header.topbar,#legend,#hint{display:none!important}#canvas-wrap{height:auto!important;overflow:visible!important}body{background:#05070d}#app{height:auto}}