:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#071018;color:#e9f2f4}*{box-sizing:border-box}body{margin:0;overflow:hidden}main{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) 330px}#viewport{position:relative;min-width:0;background:radial-gradient(circle at 45% 40%,#172f39,#071018 70%)}#canvasHost,canvas{width:100%;height:100%;display:block;touch-action:none}.brand{position:absolute;z-index:2;top:20px;left:22px;display:grid;gap:3px;pointer-events:none}.brand strong{font-size:18px;letter-spacing:.02em}.brand span,.gesture{color:#91aab1;font-size:12px}.gesture{position:absolute;left:22px;bottom:18px;pointer-events:none}aside{overflow:auto;padding:18px;background:#0d1d27;border-left:1px solid #27404b}.toolbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}button,.toggle{min-height:42px;border:1px solid #365867;border-radius:8px;background:#183746;color:#f3fbfc;padding:10px 12px;font-weight:650;cursor:pointer}button.active{background:#32b7ad;color:#041615;border-color:#6be4d9}.toggle{display:flex;align-items:center;gap:7px}.controls{border-top:1px solid #29404a;margin-top:14px;padding-top:4px}.control{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin:13px 0}.control output{color:#68dfd4;font-variant-numeric:tabular-nums}.control input{grid-column:1/3;width:100%;accent-color:#46c9bf}.metrics{margin-top:18px;border-top:1px solid #29404a}.metrics h2{font-size:14px;margin:15px 0 8px}.metrics dl{display:grid;grid-template-columns:1fr auto;margin:0;font-size:13px}.metrics dt,.metrics dd{padding:5px 0;border-bottom:1px solid #1c323d}.metrics dd{margin:0;font-variant-numeric:tabular-nums;color:#bdeae5}details{font-size:12px;margin-top:14px;color:#a8bac0}.legend{display:grid;gap:7px;margin-top:9px}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:10px;height:10px;border-radius:50%}.fixed{background:#ff6b67}.weak{background:#ffc35c}.free{background:#53d5cb}@media(max-width:760px){body{overflow:auto}main{height:auto;min-height:100dvh;grid-template-columns:1fr;grid-template-rows:58dvh auto}aside{border-left:0;border-top:1px solid #27404b;padding:14px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.brand{top:14px;left:15px}.gesture{left:15px;right:15px;bottom:10px}.control{margin:8px 0}button,.toggle{min-height:44px}}