:root{color-scheme:dark;--bg: #07111f;--panel: rgba(5, 11, 22, .72);--panel-border: rgba(130, 204, 255, .2);--cyan: #86f7ff;--sea: #52cbe8;--steel: #9caec7;--copper: #ffb47a;--ember: #ff7f66;--ink: #d6f2ff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,rgba(60,130,255,.18),transparent 34%),radial-gradient(circle at bottom left,rgba(255,157,94,.14),transparent 28%),linear-gradient(180deg,#081222,#04070d);color:var(--ink);font-family:Segoe UI,Trebuchet MS,system-ui,sans-serif}body{overflow:hidden}#app{min-height:100vh}.shell{position:relative;min-height:100vh}.frame{position:fixed;inset:16px;border:1px solid rgba(124,185,255,.14);border-radius:28px;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff08,0 24px 80px #0000008c}.hud{position:fixed;inset:0;pointer-events:none}.brand{position:fixed;top:28px;left:32px;display:flex;flex-direction:column;gap:4px;max-width:420px}.brand small,.brand strong{display:block}.brand small{letter-spacing:.28em;text-transform:uppercase;color:#d6f2ff99;font-size:11px}.brand strong{font-size:clamp(22px,3vw,38px);font-weight:700}.brand span{color:#d6f2ffc2;font-size:14px;line-height:1.45}.dock{position:fixed;right:28px;top:28px;display:grid;gap:10px;width:min(300px,calc(100vw - 56px))}.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;padding:14px 16px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 16px 40px #00000047;pointer-events:auto}.card h2,.card h3,.card p{margin:0}.card h2,.card h3{font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:#d6f2ffa8;margin-bottom:10px}.card p{font-size:14px;line-height:1.45}.guide-card{display:grid;gap:10px}.guide-list{margin:0;padding-left:18px;display:grid;gap:8px;font-size:13px;color:#d6f2ffd1}.guide-list li strong{color:#fff}.start-button{appearance:none;border:1px solid rgba(134,247,255,.28);background:linear-gradient(180deg,#86f7ff2e,#5ab4ff1a);color:var(--ink);border-radius:999px;padding:10px 14px;font:inherit;font-size:13px;letter-spacing:.04em;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.start-button:hover{transform:translateY(-1px);border-color:#86f7ff80;box-shadow:0 10px 24px #86f7ff1f}.start-button:active{transform:translateY(0)}.start-button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.meter-grid{display:grid;gap:8px}.meter-row{display:grid;grid-template-columns:74px 1fr 46px;align-items:center;gap:10px;font-size:12px}.meter-bar{height:8px;border-radius:999px;background:#ffffff14;overflow:hidden}.meter-fill{height:100%;border-radius:inherit;box-shadow:0 0 16px currentColor}.footer-note{position:fixed;left:32px;bottom:28px;width:min(480px,calc(100vw - 64px))}.footer-note p{margin:0;font-size:13px;color:#d6f2ffb8}.canvas-wrap{position:fixed;inset:0;display:grid;place-items:center}canvas{width:min(100vw - 80px,1480px);height:min(100vh - 96px,860px);border-radius:24px;background:#0000001f;box-shadow:inset 0 0 0 1px #ffffff0f,0 18px 80px #0000005c}@media(max-width:980px){.canvas-wrap{place-items:start center;padding-top:112px}.dock{width:auto;inset:auto 16px 16px;grid-template-columns:1fr 1fr}.brand{top:18px;left:18px;right:18px;max-width:none}.footer-note{display:none}canvas{width:calc(100vw - 24px);height:auto;aspect-ratio:16 / 10;max-height:42vh;border-radius:20px}}