*,:before,:after{box-sizing:border-box}html,body,#root{background:#0a0a0f;width:100%;height:100%;min-height:100dvh;margin:0;padding:0;overflow:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{--bg:#0a0a0f;--muted:#7070aa;--text:#aab;--accent:#c0aaff;--bh:#a040ff;--sun:#ffaa30;--bolt:#4df;--tor:#8f8;--wave:#38bdf8;--auto:#5ff;--rot:#f8a;--danger:#f66;box-sizing:border-box;background:var(--bg);width:100%;height:100%;min-height:100dvh;color:var(--text);flex-direction:column;align-items:stretch;font-family:Segoe UI,system-ui,sans-serif;display:flex;overflow:hidden}.hd{text-align:center;flex:none;max-width:960px;margin:0 auto;padding:6px 12px 4px}.hd h1{color:var(--accent);letter-spacing:.02em;margin:0 0 2px;font-size:clamp(13px,1.6vw,16px)}.hd p{color:var(--muted);margin:0;font-size:clamp(9px,1.1vw,11px);line-height:1.35}.c-bh{color:var(--bh)}.c-sun{color:var(--sun)}.c-bolt{color:var(--bolt)}.c-tor{color:var(--tor)}.c-wave{color:var(--wave)}.c-auto{color:var(--auto)}.c-rot{color:var(--rot)}.stage{flex:auto;justify-content:stretch;align-items:stretch;width:100%;min-height:0;padding:0;display:flex}#cv{cursor:crosshair;width:100%;height:100%;box-shadow:none;border-radius:0;display:block}.row{flex-wrap:wrap;flex:none;justify-content:center;align-items:center;gap:8px;width:100%;max-width:1200px;margin:0 auto;padding:10px 12px 14px;display:flex}.lb{color:var(--muted);margin-right:2px;font-size:12px;font-weight:700}.sp{background:#333;width:1px;height:28px;margin:0 4px}button{color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:2px solid #555;border-radius:12px;padding:8px 14px;font-size:14px;line-height:1.2}button:hover{opacity:.85}button.on{font-weight:700}.hint{opacity:.5;font-size:11px}.tool-bh{color:var(--bh);border-color:var(--bh)}.tool-bh.on{background:var(--bh);color:#fff}.tool-sun{color:var(--sun);border-color:var(--sun)}.tool-sun.on{background:var(--sun);color:#1a0800}.tool-bolt{color:var(--bolt);border-color:var(--bolt)}.tool-bolt.on{background:var(--bolt);color:#0a0a0f}.tool-tor{color:var(--tor);border-color:var(--tor)}.tool-tor.on{background:var(--tor);color:#0a0a0f}.tool-wave{color:var(--wave);border-color:var(--wave)}.tool-wave.on{background:var(--wave);color:#0a0a0f}.tool-auto{color:var(--auto);border-color:var(--auto)}.tool-auto.on{background:var(--auto);color:#0a0a0f}.gb{min-width:40px;padding:8px 12px;font-size:16px}.gb.on{background:var(--accent);color:#0a0a0f;border-color:var(--accent)}.gr{color:var(--rot);border-color:var(--rot)}.re{color:var(--danger);border-color:var(--danger)}.sl-wrap{align-items:center;gap:8px;display:flex}.sl-wrap input[type=range]{appearance:none;background:linear-gradient(to right, var(--bh) var(--pct,50%), #333 var(--pct,50%));cursor:pointer;border-radius:3px;outline:none;width:120px;height:5px}.sl-wrap input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid var(--bh);cursor:pointer;border-radius:50%;width:16px;height:16px}.sl-wrap input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid var(--bh);cursor:pointer;border-radius:50%;width:16px;height:16px}.sl-val{color:var(--accent);text-align:left;min-width:36px;font-size:13px}@media (width<=640px){.hd p{display:none}}