@font-face { font-family:Bricolage; src:url('./assets/bricolage-grotesque-800.ttf') format('truetype'); font-style:normal; font-weight:800; font-display:swap; }
:root { color-scheme:dark; --paper:#101112; --ink:#eae7e0; --muted:#93938d; --accent:#ee8065; --rule:#343636; font-family:Arial,Helvetica,sans-serif; background:var(--paper); color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:var(--paper); color:var(--ink); }
body[data-theme=light] { color-scheme:light; --paper:#efede6; --ink:#222421; --muted:#666962; --accent:#bd4933; --rule:#d0d0c7; }
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; touch-action:manipulation; }
button:disabled { cursor:wait; opacity:.35; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
a { color:inherit; text-decoration:none; }
header, footer { position:fixed; z-index:2; left:42px; right:42px; display:flex; align-items:center; justify-content:space-between; }
header { top:28px; }
.brand { font-family:Bricolage,Arial,sans-serif; font-size:24px; font-weight:800; letter-spacing:-1.5px; }
.brand span, h2 span { color:var(--accent); }
.tools { display:flex; gap:8px; }
.icon-button { width:36px; height:36px; display:grid; place-items:center; color:var(--muted); }
.icon-button:hover { color:var(--ink); }
.icon-button svg { width:17px; height:17px; fill:var(--paper); stroke:currentColor; stroke-width:1.25; }
main { position:relative; isolation:isolate; }
#number-face { position:absolute; z-index:1; display:block; transform:translateX(-50%); padding:0 .08em; min-width:.7em; text-align:center; font-family:Bricolage,Arial,sans-serif; font-weight:800; line-height:1; letter-spacing:-.045em; color:var(--accent); background:var(--paper); opacity:1; pointer-events:none; white-space:nowrap; }
#number-face[hidden] { display:none; }
#scene { width:100%; height:100svh; display:block; }
footer { bottom:28px; }
.quiet, .footer-space { width:36px; }
.quiet { height:36px; color:var(--muted); font-family:Georgia,serif; font-size:16px; }
.again { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; letter-spacing:.5px; padding:12px 20px; }
.again span { font-size:19px; }
.again:hover, .quiet:hover { color:var(--ink); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
dialog { width:min(520px,calc(100% - 32px)); max-height:calc(100svh - 32px); overflow:auto; background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:3px; padding:25px 30px 28px; }
dialog::backdrop { background:#08090acc; backdrop-filter:blur(12px); }
.dialog-top { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.micro { font:9px/1.6 'Courier New',monospace; letter-spacing:.9px; color:var(--muted); }
.close { width:32px; height:32px; font-size:25px; color:var(--muted); }
h2 { font-family:Bricolage,Arial,sans-serif; font-size:36px; letter-spacing:-1.6px; font-weight:800; margin:18px 0 26px; }
fieldset { padding:0; margin:0 0 27px; border:0; }
legend { font-size:12px; margin-bottom:13px; color:var(--muted); }
.directions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.directions button { display:flex; flex-direction:column; align-items:start; text-align:left; padding:13px 10px; border:1px solid var(--rule); min-width:0; }
.directions button[aria-pressed=true] { border-color:var(--accent); }
.directions span { font:9px monospace; color:var(--accent); }
.directions strong { font-size:22px; margin:16px 0 7px; font-weight:normal; }
.directions small { font-size:9px; color:var(--muted); line-height:1.5; }
.number-concepts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.number-concepts button { display:flex; flex-direction:column; gap:9px; text-align:left; border:1px solid var(--rule); padding:12px 9px; min-width:0; }
.number-concepts button[aria-pressed=true] { border-color:var(--accent); }
.number-concepts strong { font-size:13px; font-weight:normal; }
.number-concepts small { font-size:9px; line-height:1.5; color:var(--muted); }
.concept-field { margin-bottom:22px; }
#concept-note { font-size:11px; margin:12px 0 0; }
.setting, #duration-form { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:14px 0; }
label { font-size:12px; color:var(--muted); }
select, input { background:var(--paper); border:1px solid var(--rule); padding:9px; font-size:12px; }
select { max-width:170px; }
.duration-row { display:flex; gap:8px; }
.duration-row input { width:62px; }
.duration-row button { padding:8px 12px; background:var(--ink); color:var(--paper); font-size:12px; }
.note { color:var(--muted); font-size:12px; line-height:1.7; }
.studio-actions { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--rule); margin-top:24px; padding-top:17px; }
.studio-actions button { font-size:11px; padding:6px 0; }
#placeholder-note { margin:24px 0 0; }
#about p:not(.micro) { font-size:15px; line-height:1.8; }
#error, .no-script { position:absolute; top:40%; left:10%; right:10%; text-align:center; line-height:1.7; }
.no-script { font-family:Bricolage,Arial,sans-serif; font-size:60px; }
.no-script small { font:14px Arial,sans-serif; }
@media(max-width:600px) {
  header, footer { left:20px; right:20px; }
  header { top:20px; }
  footer { bottom:20px; }
  .brand { font-size:22px; }
  dialog { padding:20px; }
  h2 { font-size:32px; }
  .directions small { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }