:root{--accent: #4a9c8a;--bg: #0a0d10;--panel: #141a21;--ink: #e6edf3;--muted: #8b97a3}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,sans-serif}.wrap{max-width:560px;margin:0 auto;padding:16px 14px 40px}header h1{margin:4px 0 2px;font-size:26px;letter-spacing:.5px;color:var(--accent)}.sub{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.4}.bar{display:flex;align-items:center;gap:8px;margin:8px 0}.spacer{flex:1}.seg{display:inline-flex;background:var(--panel);border-radius:8px;overflow:hidden}.seg button{background:transparent;color:var(--muted);border:none;padding:7px 14px;cursor:pointer;font-size:14px}.seg button.on{background:var(--accent);color:#05110d;font-weight:600}.btn{background:var(--panel);color:var(--ink);border:1px solid #243038;border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13px}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#05110d;border-color:var(--accent);font-weight:600}.hud{display:flex;gap:14px;font-size:13px;color:var(--muted);margin:6px 2px}.hud .over{color:#ff6b6b;font-weight:700}canvas{width:100%;max-width:500px;display:block;border-radius:10px;border:1px solid #243038;touch-action:none;cursor:crosshair}.status{margin-top:10px;font-size:13px;color:var(--muted);min-height:18px}.result{margin-top:12px;background:var(--panel);border:1px solid #243038;border-radius:10px;padding:14px}.result.hidden{display:none}.result h3{margin:0 0 8px;color:var(--accent)}.grades{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink);margin-bottom:10px}