:root{--fader:#4a4a4a;--panel-bg:#0a0a0a;--chrome:#161616}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:#fff;font-family:Helvetica Neue,Arial,sans-serif;color:#111;overflow:hidden}.layout{display:flex;height:100vh;padding:22px;gap:24px}.sidebar{flex:0 0 340px;display:flex;flex-direction:column;justify-content:center;overflow-y:auto}h1{font-style:italic;font-weight:800;margin:0 0 10px;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em;line-height:1.15}h1 span{display:block;font-style:normal;font-weight:600;opacity:.6;font-size:clamp(14px,.55em,18px);margin-top:4px}p.sub{margin:0 0 18px;font-size:13px;line-height:1.6;opacity:.85}.flowline{font-size:11.5px;opacity:.75;margin:0 0 8px;letter-spacing:.03em;line-height:1.7}.flowline b{opacity:1;font-weight:600}footer{font-size:10px;opacity:.55;margin-top:18px;line-height:1.5}.lab{margin-top:6px;padding:14px 14px 8px;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:#00000008}.lab-title{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.05em;opacity:.7;margin-bottom:10px}.lab-title button{font-size:10px;letter-spacing:.02em;text-transform:none;font-weight:600;background:none;border:1px solid rgba(0,0,0,.25);border-radius:5px;padding:3px 8px;color:inherit;cursor:pointer;opacity:.8}.lab-title button:hover{opacity:1;background:#0000000f}.lab-row{display:flex;flex-direction:column;gap:3px;margin-bottom:12px;font-size:11px}.lab-row span{opacity:.75}.lab-row input[type=range]{width:100%;accent-color:var(--fader)}.lab-row output{font-size:10px;opacity:.55;align-self:flex-end;font-variant-numeric:tabular-nums}.panels-area{flex:1;min-width:0;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:14px}.col{width:var(--col-width, 320px);flex:none;display:flex;flex-direction:column;gap:14px;min-width:0}.panel{background:var(--panel-bg);border-radius:8px;overflow:hidden;box-shadow:0 12px 30px #00000059;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;min-height:0;min-width:0;width:100%}.panel.top-view{aspect-ratio:1 / 2;flex:none}.panel.front-view{aspect-ratio:800 / 380;flex:none}.panel.topology-view{flex:1;min-width:220px;height:100%}.titlebar{display:flex;align-items:center;gap:8px;background:var(--chrome);padding:7px 12px;font-size:12px;letter-spacing:.02em;color:#d8d8d8;border-bottom:1px solid rgba(255,255,255,.06);flex:0 0 auto}.titlebar .step{margin-left:auto;font-size:10px;opacity:.5;letter-spacing:.05em}.titlebar svg{width:14px;height:14px;opacity:.8;flex-shrink:0}.panel-body{position:relative;flex:1;min-height:0;min-width:0}canvas,.stage3d{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#tdStage{cursor:none}.topo-label{position:absolute;top:0;left:0;font-size:10px;color:#eee;text-shadow:0 0 3px #000,0 0 4px #000;pointer-events:none;font-family:inherit;font-weight:600}.hint{position:absolute;bottom:8px;left:10px;right:10px;color:#eee;font-size:10px;opacity:.45;letter-spacing:.03em;pointer-events:none}@media (max-width: 1100px),(max-height: 680px){html,body{overflow:auto;height:auto;min-height:100%}.layout{flex-direction:column;height:auto;padding:20px}.sidebar{flex:none;overflow:visible}.panels-area{flex-direction:column;height:auto;align-items:stretch}.col{width:100%!important}.panel.top-view{aspect-ratio:auto;height:55vh}.panel.front-view{aspect-ratio:auto;height:35vh}.panel.topology-view{flex:none;height:60vh;width:100%}}