:root{color-scheme:light;--paper:#f7f6ef;--ink:#26382e;--lime:#d8f36a;--line:#daded1;--muted:#707d6f;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#e7ebdf}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overscroll-behavior:none}body{display:grid;place-items:center;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app{position:relative;background:var(--paper);width:min(100vw,460px);height:min(100dvh,960px);min-height:400px;overflow:hidden;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}canvas:focus-visible{outline:3px solid var(--ink);outline-offset:-4px}
.button{position:absolute;margin:0;display:flex;align-items:center;justify-content:center;font:600 16px/1.2 system-ui,sans-serif;cursor:pointer;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);padding:0 8px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:filter .15s,transform .15s}
.button.primary{background:var(--lime);border-color:var(--lime)}.button:hover{filter:brightness(.97)}.button:active{transform:translateY(2px)}.button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.button:disabled{cursor:wait;opacity:.7}[hidden]{display:none!important}
.button.mode{font-size:13px;font-weight:750;border-radius:13px}.button.mode[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{border:1px solid var(--line);border-radius:28px;background:var(--paper);color:var(--ink);width:min(360px,calc(100vw - 32px));max-height:85dvh;padding:28px;box-shadow:0 20px 80px #26382e33}dialog::backdrop{background:#26382e99}dialog h2{font-size:32px;line-height:1.1;margin:12px 0 24px;font-weight:850;letter-spacing:-1px}.dialog-label{display:inline-block;background:var(--lime);padding:7px 12px;border-radius:20px;font-size:10px;font-weight:700}.toggle{display:flex;justify-content:space-between;align-items:center;min-height:50px;border-bottom:1px solid var(--line);font-size:16px}.toggle input{accent-color:var(--ink);width:22px;height:22px}dialog p{font-size:12px;line-height:1.6;color:var(--muted)}dialog a{color:var(--ink);font-size:12px}summary{font-size:13px;cursor:pointer;padding:12px 0}.done{position:relative;width:100%;height:50px;margin-top:18px}
@media(min-width:650px){body{padding:24px}#app{height:min(900px,calc(100dvh - 48px));border:1px solid #d3dbc9;border-radius:30px;box-shadow:0 24px 80px #26382e12}}
@media(prefers-reduced-motion:reduce){.button{transition:none}}