:root{color-scheme:dark;--bg:#080e20;--panel:#101a30;--text:#f1f4fc;--muted:#b7c5de;--line:#536780;--accent:#9ee9ee}*{box-sizing:border-box}html[data-theme=light]{color-scheme:light;--bg:#f0f3f8;--panel:#fff;--text:#101d34;--muted:#364967;--line:#718098;--accent:#15565e}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,sans-serif}header,footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4vw}a{color:var(--text);text-underline-offset:4px}header>a{font-family:monospace;text-decoration:none;letter-spacing:.12em}nav{display:flex;align-items:center;gap:18px}button{cursor:pointer}button,input{font:inherit}button{min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text)}button:hover,button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.intro{padding:8px 4vw 20px;display:flex;align-items:end;justify-content:space-between;gap:24px}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(44px,6.5vw,90px);letter-spacing:-.055em;line-height:1.04;margin:8px 0 15px}.intro p{max-width:420px;color:var(--muted);margin:0}.tag{font:12px monospace;letter-spacing:.15em;color:var(--accent)}#stage{height:55vh;min-height:330px;max-height:650px;position:relative;touch-action:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);cursor:crosshair;overflow:hidden}canvas{display:block}.overlay{position:absolute;pointer-events:none;left:4vw;top:20px;color:var(--muted);font:12px monospace;z-index:1;background:var(--bg);padding:6px 10px;border-radius:4px}.controls{padding:20px 4vw;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.presets{display:flex;gap:8px;flex-wrap:wrap}label{display:flex;gap:12px;align-items:center;margin-left:auto}input{accent-color:var(--accent);width:130px;min-height:44px}#status{color:var(--muted);margin:0;padding:0 4vw 16px;min-height:38px}.note{border-top:1px solid var(--line);padding:24px 4vw;display:grid;grid-template-columns:1fr 2fr;gap:24px}.note h2{font:26px Georgia,serif;margin:0}.note p{margin:0;max-width:740px;color:var(--muted)}footer{font-size:12px;color:var(--muted)}@media(max-width:600px){header{padding-top:12px}header>a{font-size:11px}nav{gap:12px}.intro{display:block}.intro p{font-size:14px}.tag{font-size:10px}#stage{height:44vh;min-height:310px}.controls{gap:10px}label{margin:0;width:100%;justify-content:space-between}.note{grid-template-columns:1fr;gap:12px}footer{align-items:start}#theme{font-size:12px;padding:6px 10px}}