:root{color-scheme:dark;--ink:#eee7d9;--muted:#a29f91;--accent:#e6b775;--line:#373b34}*{box-sizing:border-box}body{margin:0;background:#121b19;color:var(--ink);font:15px/1.5 system-ui,sans-serif}main{max-width:1240px;margin:auto;padding:36px 36px 20px}header{margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--accent);margin:0 0 10px}h1{font:normal 48px/1.1 Georgia,serif;margin:0}h1 span{font-size:27px;color:var(--muted)}header>p:last-child{color:var(--muted);margin:12px 0 0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px}.stage{align-self:start;border:1px solid var(--line);background:#07100f}.stagebar,.stagefoot{display:flex;justify-content:space-between;gap:10px;padding:12px 15px;font-size:11px;color:var(--muted)}.stagebar{border-bottom:1px solid var(--line)}#mode{color:var(--accent)}.stagefoot{font-size:9px;letter-spacing:.11em;border-top:1px solid var(--line)}canvas{display:block;width:100%;aspect-ratio:4/3;touch-action:none;outline-offset:3px}aside{display:flex;flex-direction:column;gap:17px}.number{font:italic 21px Georgia;color:var(--accent);display:flex;align-items:center;gap:12px}.number span{font:9px system-ui;letter-spacing:.1em;color:var(--muted)}button,select{font:inherit;background:#1b2823;color:var(--ink);border:1px solid #475147;border-radius:5px;min-height:44px;padding:9px 10px;cursor:pointer}button:hover{background:#2d3d32}button[aria-pressed=true]{background:#e6b775;color:#1b221c;border-color:#e6b775}.presets{display:flex;gap:6px}.presets button{flex:1;padding:8px 6px;font-size:12px}label{display:block;color:var(--muted);font-size:12px}output{float:right;color:var(--ink)}input{display:block;width:100%;margin:8px 0 0;accent-color:var(--accent);min-height:24px}select{display:block;width:100%;margin-top:6px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.hint{font:italic 15px/1.6 Georgia;color:#b5baa5;margin:0}#guide{background:transparent;text-align:left}#notes{margin:24px 0;padding:24px;border:1px solid var(--line);max-width:850px;color:#b5baa5}#notes h2{color:var(--ink);font:normal 26px Georgia;margin:0}a{color:var(--accent)}footer{display:flex;justify-content:space-between;gap:15px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:9px;color:var(--muted);letter-spacing:.12em}#error{padding:15px;color:#ffb6a0}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #f6d095;outline-offset:3px}@media(max-width:850px){main{padding:24px 16px}.workspace{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}.number,.presets,.hint,#guide{grid-column:1/-1}h1{font-size:39px}h1 span{font-size:23px}.actions{grid-column:1/-1}footer{font-size:8px}header{margin-bottom:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}