:root{color-scheme:light;--bg:#fafafa;--surface:#fff;--text:#111;--muted:#6b6b6b;--border:#e5e5e5;--strong:#cfcfcf}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}.page{max-width:1120px;margin:auto;padding:32px 24px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}h1{font-size:1.6rem;line-height:1.12;letter-spacing:-.03em;margin:0}h2{font-size:1.05rem;letter-spacing:-.01em;margin:0 0 24px}button,input{font:inherit;border-radius:0}button{min-height:44px;padding:10px 22px;cursor:pointer;font-weight:650}button:hover{opacity:.72}button:disabled{opacity:.4;cursor:not-allowed}.secondary{background:white;border:1px solid var(--strong)}.primary{background:#111;color:white;border:1px solid #111;width:100%;min-height:52px}button:focus-visible,input:focus-visible{outline:2px solid #111;outline-offset:3px}.workspace{display:grid;grid-template-columns:292px minmax(0,1fr);gap:16px}form,.stage,.history{background:white;border:1px solid var(--border)}form{padding:24px}label{display:block;font-size:.88rem;font-weight:650;margin-bottom:20px}input:not([type=checkbox]){display:block;width:100%;min-height:44px;margin-top:8px;padding:9px 12px;border:1px solid var(--strong);background:#fff;color:#111}.range{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:8px;font-weight:400}.check input{width:18px;height:18px;accent-color:#111;margin:0}.stage{display:flex;flex-direction:column;min-height:460px;padding:24px}.stage-top,.stage-bottom{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:.88rem}.stage-top{padding-bottom:20px;border-bottom:1px solid var(--border)}.stage-bottom{padding-top:20px;border-top:1px solid var(--border)}#result{flex:1;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:12px;padding:32px 0;font-size:clamp(6rem,14vw,11rem);font-weight:650;line-height:1.1;letter-spacing:-.055em;font-variant-numeric:tabular-nums}.empty{color:#cfcfcf}#result.multiple{font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.04em}#result.multiple span{min-width:90px;text-align:center;padding:8px;background:#f5f5f5}#error{color:#b42318;font-size:.88rem;margin:0 0 12px}#error:empty{display:none}.history{margin-top:16px;padding:24px}.history h2{margin-bottom:16px}ol{list-style:none;padding:0;margin:0}li{display:flex;gap:24px;padding:12px 0;border-top:1px solid var(--border)}li .round-label{color:var(--muted);font-size:.88rem;min-width:64px}li .numbers{font-variant-numeric:tabular-nums;word-spacing:10px;overflow-wrap:anywhere}.no-history{color:var(--muted)}@media(max-width:760px){.page{padding:20px 14px}.workspace{grid-template-columns:1fr}.stage{grid-row:1;min-height:290px;padding:18px}#result{font-size:6rem;padding:26px 0}form{padding:18px;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}form h2,.range,.check,#error,.primary{grid-column:1/-1}form h2{margin-bottom:16px}label{margin-bottom:12px}.history{padding:18px}header{margin-bottom:20px}}@media(prefers-reduced-motion:no-preference){#result.reveal{animation:reveal .18s ease-out}@keyframes reveal{from{opacity:.2}to{opacity:1}}}
[hidden]{display:none!important}.modes{display:flex;margin:18px 0 0}.modes button{flex:1;padding:8px;min-height:44px;background:white;border:1px solid var(--strong);font-size:.88rem}.modes button+button{border-left:0}.modes button[aria-pressed=true]{background:#111;color:#fff}#animation{display:flex;align-items:center;justify-content:center;flex:1;min-height:260px}#canvas{display:block;width:min(100%,400px);height:auto;max-height:340px;object-fit:contain}#result:empty{display:none}#result.compact{flex:0;padding:12px 0;font-size:3rem}#result.compact.multiple{font-size:2rem}#result.compact.multiple span{min-width:60px}.stage[aria-busy=true] #animation{min-height:300px}@media(max-width:760px){#canvas{max-height:260px}.stage[aria-busy=true] #animation{min-height:260px}}

#draw-surface{flex:1;display:flex;flex-direction:column;min-width:0;cursor:pointer}#draw-surface:focus-visible{outline:2px solid #111;outline-offset:3px}#draw-surface[aria-disabled=true]{cursor:not-allowed}