/* Design system Fasteer: monocromo, filetti al posto dei riquadri, mono per la strumentazione.
   positive = ciò che resta in casa · negative = ciò che esce e costa. */
:root{
  --page:#ffffff; --subtle:#fafafa; --inv:#0a0a0a;
  --ink:#0a0a0a; --ink2:#565656; --mute:#767676;
  --oninv:#ffffff; --oninv2:#9a9a9a;
  --rule:#e4e4e4; --border:#c8c8c8; --strong:#0a0a0a;
  --pos:#067a55; --neg:#a8380b; --pos-soft:#ecf6f1; --neg-soft:#fbf1eb;
  --focus:#6d28d9;
  --sans:"Geist","Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono","Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0a0a0a; --subtle:#121212; --inv:#ffffff;
    --ink:#ffffff; --ink2:#b4b4b4; --mute:#9a9a9a;
    --oninv:#0a0a0a; --oninv2:#565656;
    --rule:#2a2a2a; --border:#3a3a3a; --strong:#ffffff;
    --pos:#34d399; --neg:#fb923c; --pos-soft:#0c261c; --neg-soft:#2a180b;
    --focus:#a78bfa; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page:#0a0a0a; --subtle:#121212; --inv:#ffffff;
  --ink:#ffffff; --ink2:#b4b4b4; --mute:#9a9a9a;
  --oninv:#0a0a0a; --oninv2:#565656;
  --rule:#2a2a2a; --border:#3a3a3a; --strong:#ffffff;
  --pos:#34d399; --neg:#fb923c; --pos-soft:#0c261c; --neg-soft:#2a180b;
  --focus:#a78bfa; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow:hidden}
#app{position:relative;height:100%;display:flex;flex-direction:column;
  padding-inline:clamp(16px,3vw,56px)}

/* testata */
.top{flex:0 0 auto;display:flex;align-items:center;gap:clamp(12px,1.6vw,28px);
  padding-block:clamp(12px,1.8vh,24px) 0}
.wm{font:600 clamp(17px,1.4vw,22px)/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.chap{font:500 clamp(10px,.78vw,12px)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.prog{margin-left:auto;display:flex;gap:4px;align-items:center}
.prog button{appearance:none;border:0;background:none;padding:8px 0;cursor:pointer;line-height:0}
.prog i{display:block;width:clamp(12px,1.9vw,34px);height:2px;background:var(--rule);transition:background .18s}
.prog button:hover i{background:var(--border)}
.prog button[aria-current="true"] i{background:var(--strong);height:3px}
.prog button.done i{background:var(--ink2)}

/* scena */
.scene{display:none;flex:1 1 auto;min-height:0;flex-direction:column;border-top:1px solid var(--rule);margin-top:clamp(10px,1.4vh,18px)}
.scene.on{display:flex}
.eyebrow{font:500 clamp(10px,.8vw,12.5px)/1.35 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);padding-top:clamp(12px,1.8vh,24px)}
.eyebrow b{color:var(--ink);font-weight:600}
h1{font:600 clamp(26px,3.5vw,58px)/1.02 var(--sans);letter-spacing:-.04em;margin:clamp(8px,1.1vh,14px) 0 0;
  text-wrap:balance;max-width:26ch}
.keys{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:clamp(10px,1.4vh,18px) 0 0;padding:0}
.keys li{font:500 clamp(10px,.8vw,12.5px)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2);padding:.7em .9em;border:1px solid var(--border)}
.keys li.in{color:var(--pos);border-color:var(--pos)}
.keys li.out{color:var(--neg);border-color:var(--neg)}
.stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(6px,1.2vh,16px) 0;overflow:hidden}
svg.sc{width:100%;height:100%;max-height:100%;display:block;font-variant-numeric:tabular-nums}
svg.sc .hit{cursor:pointer}
.cap{flex:0 0 auto;display:flex;align-items:baseline;gap:clamp(12px,1.2vw,20px);
  border-top:1px solid var(--rule);padding-block:clamp(10px,1.5vh,18px);min-height:3.4em}
.cap .n{font:500 clamp(10px,.84vw,13px)/1.4 var(--mono);letter-spacing:.14em;color:var(--mute);flex:0 0 auto;white-space:nowrap;text-transform:uppercase}
.cap .tx{font:400 clamp(14px,1.25vw,21px)/1.5 var(--sans);color:var(--ink2);max-width:80ch}
.cap .tx b{color:var(--ink);font-weight:600}
.pin{margin-left:auto;flex:0 0 auto;align-self:center;white-space:nowrap;
  font:500 clamp(10px,.78vw,12px)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--strong);padding:.6em .8em}

/* copertina e chiusura */
.cover{justify-content:center;gap:clamp(18px,3vh,40px)}
.hero{font:600 clamp(40px,6.4vw,112px)/.92 var(--sans);letter-spacing:-.06em;margin:0;max-width:14ch;text-wrap:balance}
.lead{font:400 clamp(15px,1.35vw,22px)/1.6 var(--sans);color:var(--ink2);max-width:62ch;margin:0}
.index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  border-top:1px solid var(--strong)}
.index li{border-bottom:1px solid var(--rule);padding:12px 16px 12px 0;display:flex;gap:14px;align-items:baseline}
.index button{appearance:none;background:none;border:0;padding:0;cursor:pointer;text-align:left;color:inherit;display:flex;gap:14px;align-items:baseline;font:inherit}
.index .k{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--mute)}
.index .t{font:500 clamp(14px,1.1vw,18px)/1.3 var(--sans)}
.index .v{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.index button:hover .t{text-decoration:underline;text-underline-offset:4px}
.slab{background:var(--inv);color:var(--oninv);padding:clamp(20px,3.2vw,52px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(18px,2.4vw,38px)}
.slab .lab{font:500 11px/1.35 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--oninv2)}
.slab h3{font:600 clamp(18px,1.5vw,24px)/1.25 var(--sans);letter-spacing:-.02em;margin:10px 0 8px}
.slab p{margin:0;font:400 clamp(14px,1.05vw,17px)/1.6 var(--sans);color:var(--oninv2)}
.closing-note{font:400 clamp(11px,.85vw,13px)/1.55 var(--mono);color:var(--mute);margin:0;letter-spacing:.02em}
.closing-note b{color:var(--ink);font-weight:500}

/* barra comandi */
.bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-block:clamp(10px,1.4vh,16px) calc(clamp(10px,1.4vh,16px) + env(safe-area-inset-bottom,0px))}
.bar button{appearance:none;font:500 clamp(11px,.85vw,13px)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--page);border:1px solid var(--border);padding:.85em 1.1em;cursor:pointer;
  transition:border-color .15s,background .15s}
.bar button:hover{border-color:var(--strong)}
.bar button:disabled{opacity:.35;cursor:default}
.bar button.pri{background:var(--inv);color:var(--oninv);border-color:var(--inv)}
.bar button.pri:hover{opacity:.88}
.bar button[aria-pressed="true"]{border-color:var(--strong);background:var(--subtle)}
.bar .hint{font:400 11px/1 var(--mono);color:var(--mute);letter-spacing:.04em}
.bar .foot{margin-left:auto;display:flex;gap:18px;align-items:baseline}
.bar .sig{font:600 12px/1 var(--mono);color:var(--ink)}
.bar .sig span{font-weight:400;color:var(--mute)}
.bar .pos{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* note per chi presenta */
#notes{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--subtle);
  border-left:1px solid var(--rule);z-index:4;padding:calc(24px + env(safe-area-inset-top,0px)) 28px 24px;overflow:auto}
#notes h2{font:500 11px/1.35 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
#notes h3{font:600 20px/1.25 var(--sans);letter-spacing:-.02em;margin:0 0 16px}
#notes ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:12px}
#notes li{font:400 15px/1.55 var(--sans);color:var(--ink2)}
#notes .x{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;appearance:none;background:none;border:1px solid var(--border);
  color:var(--ink);font:500 11px/1 var(--mono);letter-spacing:.1em;padding:.6em .8em;cursor:pointer}

#help{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--page) 88%,transparent)}
#help .card{background:var(--page);border:1px solid var(--strong);padding:clamp(22px,3vw,38px);max-width:560px;width:calc(100% - 32px)}
#help h2{margin:0 0 18px;font:600 26px/1.1 var(--sans);letter-spacing:-.03em}
#help dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-items:baseline}
#help dt{font:500 12px var(--mono);letter-spacing:.08em;color:var(--ink);white-space:nowrap}
#help dd{margin:0;font:400 15px/1.4 var(--sans);color:var(--ink2)}
#help p{margin:18px 0 0;font:400 12px var(--mono);color:var(--mute)}

@keyframes rise{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
.scene.in>.eyebrow,.scene.in>h1,.scene.in>.keys,.scene.in>.cap{animation:rise .32s both cubic-bezier(.22,1,.36,1)}
.scene.in>h1{animation-delay:.04s}.scene.in>.keys{animation-delay:.08s}.scene.in>.cap{animation-delay:.14s}
@media (prefers-reduced-motion:reduce){.scene.in>*{animation:none!important}}
@media (max-width:900px){.bar .hint,.bar .sig{display:none}.pin{display:none}.cap{min-height:0}h1{max-width:100%}}
@media (max-width:560px){.chap{display:none}.bar .pos{display:none}}