/* ---------- tokens ---------- */
:root{
  --bg:#F2F0EA; --bg2:#E9E6DE; --ink:#141720; --ink2:#3A3E4C; --muted:#6B6F7E;
  --line:rgba(20,23,32,.14); --line2:rgba(20,23,32,.28); --card:#FBFAF7;
  --brand:#1F6FD6;
  --c-wa:#0F8F63; --c-fanta:#B8385E; --c-cash:#B23A22; --c-trade:#8A5A12; --c-eco:#5140C9; --c-ronda:#5B7A0C; --c-recap:#0B7F8C;
  --acc:var(--brand);
  --ok:#0F8F63; --warn:#B8730F;
  --shadow:0 20px 60px -30px rgba(20,23,32,.45);
  --serif:"Newsreader",Georgia,"Times New Roman",serif; /* dal 25/10/2026 due soli font: Syne e Newsreader */
  --testo:"Newsreader",Georgia,"Times New Roman",serif; /* descrizioni e paragrafi, dal 25/10/2026 */
  --disp:"Syne","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace; /* il carattere a macchina del telefono: niente da scaricare */
  --tint:12%;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C0E14; --bg2:#12151E; --ink:#EDEBE4; --ink2:#C9C7BF; --muted:#8F93A2;
    --line:rgba(237,235,228,.13); --line2:rgba(237,235,228,.3); --card:#141824;
    --brand:#7CC4FF;
    --c-wa:#3BD39B; --c-fanta:#F3A6BC; --c-cash:#F0684E; --c-trade:#E8A544; --c-eco:#A99CFF; --c-ronda:#C6F432; --c-recap:#4FD1D9;
    --ok:#3BD39B; --warn:#E8A544;
    --shadow:0 30px 80px -30px rgba(0,0,0,.8);
    --tint:9%;
  }
}
:root[data-theme="dark"]{
  --bg:#0C0E14; --bg2:#12151E; --ink:#EDEBE4; --ink2:#C9C7BF; --muted:#8F93A2;
  --line:rgba(237,235,228,.13); --line2:rgba(237,235,228,.3); --card:#141824;
  --brand:#7CC4FF;
  --c-wa:#3BD39B; --c-fanta:#F3A6BC; --c-cash:#F0684E; --c-trade:#E8A544; --c-eco:#A99CFF; --c-ronda:#C6F432; --c-recap:#4FD1D9;
  --ok:#3BD39B; --warn:#E8A544;
  --shadow:0 30px 80px -30px rgba(0,0,0,.8);
  --tint:9%;
}

/* chapter accents: the whole page follows the chapter in view */
body[data-chapter="wa"]{--acc:var(--c-wa)}
body[data-chapter="fanta"]{--acc:var(--c-fanta)}
body[data-chapter="cash"]{--acc:var(--c-cash)}
body[data-chapter="trade"]{--acc:var(--c-trade)}
body[data-chapter="eco"]{--acc:var(--c-eco)}
.chapter[data-acc="wa"]{--acc:var(--c-wa)}
.chapter[data-acc="fanta"]{--acc:var(--c-fanta)}
.chapter[data-acc="cash"]{--acc:var(--c-cash)}
.chapter[data-acc="trade"]{--acc:var(--c-trade)}
.chapter[data-acc="eco"]{--acc:var(--c-eco)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font-family:var(--testo); font-size:17px; line-height:1.65;
  background:color-mix(in oklab, var(--bg) calc(100% - var(--tint)), var(--acc));
  transition:background-color .9s ease;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--acc); color:var(--bg)}
a{color:inherit}
h1,h2,h3{font-family:var(--disp); letter-spacing:-.02em; line-height:1.02; margin:0; text-wrap:balance}
p{margin:0}
.mono{font-family:var(--mono); font-size:.8rem; letter-spacing:.02em}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.wrap{width:min(1180px, calc(100% - 48px)); margin-inline:auto}
@media (max-width:640px){.wrap{width:calc(100% - 32px)}}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:4px}

/* grain */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before{mix-blend-mode:screen; opacity:.05}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen; opacity:.05}}

/* ---------- cursor ---------- */
@media (pointer:fine){
  .cur{position:fixed; left:0; top:0; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--acc);
    pointer-events:none; z-index:80; transform:translate(-50%,-50%); transition:width .25s,height .25s,background-color .25s,opacity .3s; opacity:0; mix-blend-mode:difference}
  .cur.on{opacity:1}
  .cur.big{width:44px; height:44px; background:color-mix(in oklab,var(--acc) 25%,transparent)}
}
@media (pointer:coarse){.cur{display:none}}

/* ---------- top bar ---------- */
.top{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; mix-blend-mode:difference; color:#fff; pointer-events:none; transition:transform .4s ease, opacity .4s ease}
.top.hide{transform:translateY(-110%); opacity:0}
/* In cima la barra si fonde col fondo scuro della hero. Appena si scorre quella fusione
   la rende illeggibile sopra il testo: da lì in poi diventa una barra vera, con sfondo. */
.top.solid{mix-blend-mode:normal; color:var(--ink); background:color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.top.solid .wordmark{color:var(--ink)}
.top.solid nav a{color:var(--muted)}
.top.solid nav a:hover{color:var(--ink)}
.top a{pointer-events:auto; text-decoration:none}
.wordmark{font-family:var(--disp); font-weight:800; font-size:1rem; letter-spacing:-.02em}
.wordmark i{font-family:var(--serif); font-style:italic; font-weight:400; margin:0 .1em}
.wordmark b{font-family:var(--mono); font-weight:400}
.top nav{display:flex; gap:22px; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.top nav a{opacity:.75} .top nav a:hover{opacity:1}
@media (max-width:640px){.top{padding:14px 16px; flex-wrap:wrap; gap:6px 12px}.top nav{width:100%; gap:14px; font-size:.58rem; letter-spacing:.06em; flex-wrap:wrap}}

/* ---------- side rail ---------- */
.rail{position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:45; display:flex; flex-direction:column; gap:14px}
.rail a{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--muted); font-family:var(--mono); font-size:.65rem}
.rail a span{width:6px; height:6px; border-radius:50%; background:currentColor; transition:transform .3s, background-color .3s}
.rail a em{font-style:normal; opacity:0; transform:translateX(6px); transition:.3s}
.rail a:hover em, .rail a.on em{opacity:1; transform:none}
.rail a.on{color:var(--acc)} .rail a.on span{transform:scale(1.8)}
@media (max-width:1380px){.rail{display:none}}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; padding:0; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-items:start; overflow:hidden; isolation:isolate;
  --hbg:#0A0D13; --ink:#EDEBE4; --ink2:#C9C7BF; --muted:#8F93A2; color:var(--ink); background:var(--hbg)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-1; display:block}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,13,19,.82) 0%, rgba(10,13,19,.45) 45%, rgba(10,13,19,0) 75%), linear-gradient(180deg, rgba(10,13,19,.35) 0%, rgba(10,13,19,0) 30%, rgba(10,13,19,0) 70%, var(--hbg) 100%)}
.hero .in{position:relative; z-index:1; min-width:0}
@media (max-width:640px){.name{font-size:min(3.6rem,15vw)}.name .w1{flex-basis:100%}.hero .meta{gap:22px 18px}.hero .meta div{flex:1 1 40%; min-width:0}.hero .in{padding:108px 0 104px}}
.hero .name .w3{color:var(--brand-hero,#7CC4FF)}
.hero .caret{background:var(--brand-hero,#7CC4FF)}
.hero .scrollhint::after{background:linear-gradient(var(--brand-hero,#7CC4FF),transparent)}
.hero .in{text-align:left; padding:112px 0 96px; width:min(1180px, calc(100% - 48px))}
.hero .eyebrow{display:flex; gap:14px; align-items:center; margin-bottom:26px}
.hero .eyebrow::before{content:""; width:38px; height:1px; background:var(--muted)}
.name{font-size:clamp(3.4rem, 12vw, 11rem); line-height:.9; letter-spacing:-.045em; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .12em; min-height:1em}
.name .w1{font-family:var(--disp); font-weight:800}
.name .w2{font-family:var(--serif); font-style:italic; font-weight:400; font-size:.62em; color:var(--ink2); letter-spacing:-.02em}
.name .w3{font-family:var(--mono); color:var(--acc); font-size:.78em; letter-spacing:-.04em}
.caret{display:inline-block; width:.06em; height:.85em; background:var(--acc); vertical-align:-.08em; margin-left:.06em; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.lede{max-width:38ch; margin-top:38px; font-size:clamp(1.05rem, 1.6vw, 1.35rem); line-height:1.45; color:var(--ink2); opacity:0; transform:translateY(12px); transition:.8s ease}
.lede.on{opacity:1; transform:none}
.lede strong{color:var(--ink); font-weight:500}
.hero .meta{margin-top:40px; display:flex; gap:34px; flex-wrap:wrap; opacity:0; transition:.8s ease .25s}
.hero .meta.on{opacity:1}
.hero .meta div{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted)}
.hero .meta div b{display:block; color:var(--ink); font-size:1.4rem; font-family:var(--disp); font-weight:700; letter-spacing:-.02em; margin-bottom:2px}
.scrollhint{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:8px}
.scrollhint::after{content:""; width:1px; height:34px; background:linear-gradient(var(--acc),transparent); animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease}
.rv.on{opacity:1; transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}

/* ---------- section basics ---------- */
section{padding:120px 0}
@media (max-width:640px){section{padding:80px 0}}
.sec-head{display:grid; grid-template-columns:1fr 2fr; gap:28px; align-items:end; margin-bottom:54px}
.sec-head>*{min-width:0}
.sec-head h2{font-size:clamp(2rem, 4.6vw, 3.6rem); font-weight:800}
.sec-head p{color:var(--ink2); max-width:52ch}
@media (max-width:760px){.sec-head{grid-template-columns:1fr}}

/* ---------- who ---------- */
.who{border-top:1px solid var(--line)}
.who .grid{display:grid; grid-template-columns:1fr; gap:60px; align-items:start}
.who .grid>*{min-width:0}
.who h2{font-size:clamp(1.9rem,4vw,3.2rem); font-weight:700; margin-bottom:26px}
.who h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--acc)}
.who p{font-size:1.08rem; color:var(--ink2); max-width:60ch}
.who p + p{margin-top:18px}
.who p strong{color:var(--ink); font-weight:500}
.note{border-left:2px solid var(--acc); padding:6px 0 6px 22px; margin-top:18px}
.note .mono{color:var(--muted); display:block; margin-bottom:8px}
.note p{font-size:1rem; color:var(--ink2)}
.tools{display:grid; gap:10px; margin-top:8px}
.tool{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line)}
.tool .mono{color:var(--acc)}
.tool b{font-family:var(--disp); font-weight:700; letter-spacing:-.01em; display:block}
.tool span{color:var(--muted); font-size:.92rem}
@media (max-width:860px){.who .grid{grid-template-columns:1fr; gap:40px}}

/* ---------- index ---------- */
.index{border-top:1px solid var(--line)}
.entries{border-top:1px solid var(--line2)}
.entry{display:grid; grid-template-columns:70px 150px 1fr auto; gap:24px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); text-decoration:none; position:relative; isolation:isolate; --e:var(--acc)}
.entry[data-acc="wa"]{--e:var(--c-wa)}.entry[data-acc="fanta"]{--e:var(--c-fanta)}.entry[data-acc="cash"]{--e:var(--c-cash)}.entry[data-acc="trade"]{--e:var(--c-trade)}.entry[data-acc="eco"]{--e:var(--c-eco)}
.entry[data-acc="ronda"]{--e:var(--c-ronda)}
.entry[data-acc="recap"]{--e:var(--c-recap)}
.entry::before{content:""; position:absolute; inset:0 -24px; background:color-mix(in oklab,var(--e) 12%,transparent); z-index:-1; transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.8,.2,1); border-radius:6px}
.entry:hover::before{transform:scaleX(1)}
.entry .n{font-family:var(--mono); font-size:.75rem; color:var(--muted)}
.entry .d{font-family:var(--mono); font-size:.75rem; color:var(--muted)}
.entry h3{font-size:clamp(1.3rem,2.6vw,2.1rem); font-weight:700; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.entry:hover h3{transform:translateX(10px)}
.entry .tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--e); border:1px solid color-mix(in oklab,var(--e) 50%,transparent); padding:5px 10px; border-radius:99px; white-space:nowrap}
.entry .sw{position:absolute; right:-10px; top:50%; width:8px; height:40%; border-radius:4px; background:var(--e); transform:translateY(-50%) scaleY(0); transition:transform .4s}
.entry:hover .sw{transform:translateY(-50%) scaleY(1)}
.entry.soon{opacity:.55} .entry.soon h3{font-weight:500}
@media (max-width:760px){.entry{grid-template-columns:44px 1fr; gap:8px 16px}.entry .d{grid-column:2; order:3}.entry .tag{grid-column:2; order:4; justify-self:start}.entry .sw{display:none}}

/* ---------- chapters ---------- */
.chapter{border-top:1px solid var(--line); padding:130px 0}
.chapter .grid{display:grid; grid-template-columns:270px minmax(0,1fr); gap:70px}
.chapter .grid>*{min-width:0}
.chapter .side{position:sticky; top:110px; align-self:start}
.chapter .side .no{font-family:var(--disp); font-weight:800; font-size:5rem; line-height:.8; letter-spacing:-.05em; color:var(--acc)}
.chapter .side .date{font-family:var(--mono); font-size:.75rem; color:var(--muted); margin-top:18px; display:block}
.chapter .side .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px}
.chapter .side .tags span{font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line2); border-radius:99px; padding:4px 9px; color:var(--ink2)}
.chapter .side .swatch{margin-top:26px; height:6px; border-radius:3px; background:linear-gradient(90deg,var(--acc),transparent)}
.chapter .side .link{display:inline-block; margin-top:26px; font-family:var(--mono); font-size:.72rem; color:var(--ink2); text-decoration:none; border-bottom:1px solid var(--line2); padding-bottom:2px}
.chapter .side .link:hover{color:var(--acc); border-color:var(--acc)}
.chapter h2{font-size:clamp(2rem,4.6vw,3.6rem); font-weight:800; margin-bottom:30px}
.chapter h2 em{font-style:italic; font-family:var(--serif); font-weight:400; color:var(--acc)}
.story{max-width:62ch; font-size:1.12rem; color:var(--ink2)}
.story p + p{margin-top:20px}
.story p:first-of-type::first-letter{font-family:var(--disp); font-weight:800; font-size:3.4em; line-height:.8; float:left; margin:.08em .12em 0 0; color:var(--acc)}
.story strong{color:var(--ink); font-weight:500}
.story .ai{font-family:var(--mono); font-size:.86rem; color:var(--ink); background:var(--card); border:1px solid var(--line); padding:14px 18px; border-radius:6px; margin-top:22px; box-shadow:var(--shadow)}
.story .ai::before{content:"AI  ›  "; color:var(--acc)}
.toy{margin:54px 0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.toy::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--acc)}
.toy .cap{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.toy .cap .mono{color:var(--muted)}
.toy .cap b{font-family:var(--disp); font-weight:700; font-size:.95rem}
.nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:44px 0}
.num{background:var(--card); padding:22px 20px}
.num b{font-family:var(--disp); font-weight:800; font-size:clamp(1.35rem,5vw,1.7rem); white-space:nowrap; letter-spacing:-.03em; display:block; color:var(--acc); font-variant-numeric:tabular-nums}
.num span{font-size:.86rem; color:var(--muted); display:block; margin-top:6px; line-height:1.35}
.takeaway{margin-top:44px; border-top:1px solid var(--line2); padding-top:22px; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start}
.takeaway .mono{color:var(--acc); padding-top:6px}
.takeaway p{font-family:var(--serif); font-style:italic; font-size:1.35rem; line-height:1.35; color:var(--ink); max-width:40ch}
@media (max-width:900px){.chapter .grid{grid-template-columns:minmax(0,1fr); gap:36px}.chapter .side{position:static; display:grid; grid-template-columns:auto 1fr; gap:6px 22px; align-items:center}.chapter .side .no{grid-row:1/4; font-size:3.6rem}.chapter .side .swatch{display:none}.chapter .side .date{margin:0}.chapter .side .tags{margin:0}.chapter .side .link{margin:0; grid-column:2}}

/* ---------- toy: chat (mockup WhatsApp) ---------- */
.phone{max-width:390px; margin:0 auto; border:1px solid var(--line2); border-radius:28px; overflow:hidden; background:var(--bg2); box-shadow:var(--shadow)}
.phone-bar{display:flex; align-items:center; gap:11px; padding:12px 14px; background:color-mix(in oklab,var(--acc) 82%,var(--ink)); color:#fff}
.phone-bar .avatar{width:34px; height:34px; border-radius:50%; background:#fff; color:var(--c-wa); display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:.72rem; flex:none}
.phone-bar .who{font-family:var(--disp); font-weight:700; font-size:.95rem; line-height:1.15}
.phone-bar .aitag{font-family:var(--mono); font-weight:400; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(255,255,255,.55); border-radius:99px; padding:1px 6px; margin-left:6px; vertical-align:2px}
.phone-bar .status{font-family:var(--mono); font-size:.66rem; opacity:.85}
.phone-bar .pb-ic{margin-left:auto; display:flex; flex-direction:column; gap:3px; padding-right:4px}
.phone-bar .pb-ic i{width:4px; height:4px; border-radius:50%; background:#fff; opacity:.85}
.phone-in{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--card); border-top:1px solid var(--line); font-family:var(--serif); font-size:.85rem; color:var(--muted)}
.phone-in span{flex:1; background:var(--bg2); border-radius:20px; padding:8px 14px}
.phone-in b{width:34px; height:34px; border-radius:50%; background:var(--acc); flex:none; position:relative}
.phone-in b::after{content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; border-radius:2px; background:var(--bg)}
.langs{display:flex; gap:6px; flex-wrap:wrap}
.langs button{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; background:transparent; color:var(--ink2); border:1px solid var(--line2); border-radius:99px; padding:6px 11px; cursor:pointer; transition:.2s}
.langs button:hover{border-color:var(--acc); color:var(--acc)}
.langs button.on{background:var(--acc); color:var(--bg); border-color:var(--acc)}
.chat{display:flex; flex-direction:column; gap:8px; min-height:260px; padding:16px 12px; background:color-mix(in oklab,var(--acc) 7%,var(--bg))}
.msg{max-width:82%; padding:8px 12px 6px; border-radius:12px; font-size:.92rem; line-height:1.4; animation:pop .35s cubic-bezier(.2,.9,.3,1.3); box-shadow:0 1px 1px rgba(0,0,0,.08); position:relative}
.msg.u{align-self:flex-start; background:var(--card); border-top-left-radius:3px}
.msg.a{align-self:flex-end; background:color-mix(in oklab,var(--acc) 26%,var(--card)); border-top-right-radius:3px}
.msg::after{content:attr(data-t); display:block; text-align:right; font-family:var(--mono); font-size:.58rem; color:var(--muted); margin-top:3px; letter-spacing:.02em}
.msg.a::after{content:attr(data-t) "  ✓✓"; color:color-mix(in oklab,var(--acc) 70%,var(--ink))}
.typing{align-self:flex-end; display:flex; gap:4px; padding:12px 14px; background:color-mix(in oklab,var(--acc) 26%,var(--card)); border-radius:12px; border-top-right-radius:3px}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:bounce 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{50%{transform:translateY(-4px); opacity:.5}}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.96)}}
.chat-foot{font-family:var(--mono); font-size:.68rem; color:var(--muted); margin-top:10px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ---------- toy: auction ---------- */
.auction{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px}
@media (max-width:640px){.auction{grid-template-columns:1fr}}
.mic{display:flex; flex-direction:column; gap:10px}
.mic button{display:flex; align-items:center; gap:12px; text-align:left; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--ink); font-family:var(--serif); font-size:1rem; cursor:pointer; transition:.2s}
.mic button:hover:not(:disabled){border-color:var(--acc); transform:translateY(-1px)}
.mic button:disabled{opacity:.45; cursor:default}
.mic .mic-real{border-color:var(--acc); background:color-mix(in oklab,var(--acc) 12%,var(--bg2))}
.mic .mic-real[aria-pressed="true"]{background:var(--acc); color:var(--bg)} .mic .mic-real[aria-pressed="true"] svg{color:var(--bg)}
.mic .mic-real b{font-family:var(--disp); font-weight:700}
.mic .ex-btn{padding:9px 14px; font-size:.95rem}
.mic .ex{color:var(--muted); margin-top:6px}
.cmdrow{display:flex; gap:8px} .cmdrow input{flex:1; min-width:0; background:var(--card); border:1px solid var(--line2); border-radius:8px; padding:10px 12px; font-family:var(--serif); font-size:.95rem; color:var(--ink)}
.cmdrow input:focus{outline:2px solid var(--acc); outline-offset:1px}
.vmsg{color:var(--warn); min-height:1.2em; font-size:.7rem}
.mic button svg{width:18px; height:18px; flex:none; color:var(--acc)}
.mic button i{font-style:italic; color:var(--ink2)}
.wave{display:flex; align-items:center; gap:3px; height:26px; min-height:26px; font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.wave.on b{width:3px; background:var(--acc); border-radius:2px; animation:wv .5s ease-in-out infinite alternate}
.wave b{height:4px; width:3px; background:var(--line2); border-radius:2px; transition:.3s}
.wave b:nth-child(2n){animation-delay:.1s}.wave b:nth-child(3n){animation-delay:.2s}
@keyframes wv{from{height:4px}to{height:22px}}
.heard{font-family:var(--mono); font-size:.8rem; color:var(--acc); min-height:1.4em}
.board{background:var(--bg2); border-radius:10px; padding:16px; font-family:var(--mono); font-size:.78rem}
.board .row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line)}
.board .row:last-child{border:0}
.board .big{font-family:var(--disp); font-weight:800; font-size:1.6rem; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums}
.board .ok{color:var(--ok)} .board .gone{text-decoration:line-through; color:var(--muted)}
.board .new{animation:pop .4s cubic-bezier(.2,.9,.3,1.3)}
.board .hint{color:var(--muted); font-size:.7rem; padding-top:10px}

/* ---------- toy: ledger ---------- */
.ledger{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.76rem; font-variant-numeric:tabular-nums}
.ledger th{text-align:left; font-weight:400; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line2); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase}
.ledger td{padding:11px 10px; border-bottom:1px solid var(--line); color:var(--muted); white-space:nowrap}
.ledger td.w{color:#2E6DD9; font-weight:500}
:root[data-theme="dark"] .ledger td.w{color:#8FC2FF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ledger td.w{color:#8FC2FF}}
.ledger td.f{color:var(--ink2); font-style:italic}
.ledger td.fill{animation:cell .35s ease}
@keyframes cell{from{background:color-mix(in oklab,var(--acc) 35%,transparent)}}
.ledger tr.tot td{border-top:1px solid var(--line2); color:var(--ink); font-weight:500}
.ledwrap{overflow-x:auto}
.run{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.prompt{display:flex; align-items:center; gap:10px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:10px 14px; font-family:var(--mono); font-size:.82rem; flex:1; min-width:240px}
.prompt span{color:var(--acc)} .prompt i{font-style:normal; color:var(--ink)}
.btn{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; background:var(--acc); color:var(--bg); border:0; border-radius:8px; padding:11px 16px; cursor:pointer; transition:.2s}
.btn:hover:not(:disabled){filter:brightness(1.08); transform:translateY(-1px)} .btn:disabled{opacity:.45; cursor:default}
.checks{margin-top:16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px}
.check{font-family:var(--mono); font-size:.7rem; color:var(--muted); display:flex; gap:8px; align-items:center; opacity:.35; transition:.4s}
.check.on{opacity:1; color:var(--ink2)} .check.on b{color:var(--ok)}
.check b{width:16px; height:16px; border-radius:50%; border:1px solid currentColor; display:grid; place-items:center; font-size:.6rem; flex:none}
.bugline{margin-top:14px; font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.bugline s{color:var(--c-cash)}

/* ---------- toy: gates ---------- */
.gates{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:640px){.gates{grid-template-columns:1fr}}
.gate{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:16px; cursor:pointer; text-align:left; color:var(--ink); font-family:var(--serif); transition:.25s; display:grid; gap:8px}
.gate:hover{border-color:var(--acc); transform:translateY(-2px)}
.gate .lamp{width:12px; height:12px; border-radius:50%; background:var(--warn); box-shadow:0 0 0 4px color-mix(in oklab,var(--warn) 25%,transparent); transition:.3s}
.gate[aria-checked="true"] .lamp{background:var(--ok); box-shadow:0 0 0 4px color-mix(in oklab,var(--ok) 25%,transparent), 0 0 18px var(--ok)}
.gate b{font-family:var(--disp); font-weight:700; font-size:.95rem}
.gate span{font-size:.86rem; color:var(--muted); line-height:1.35}
.gate .st{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--warn)}
.gate[aria-checked="true"] .st{color:var(--ok)}
.verdict{margin-top:16px; font-family:var(--mono); font-size:.82rem; padding:14px 16px; border-radius:8px; background:var(--bg2); border-left:3px solid var(--warn); transition:.3s}
.verdict.go{border-color:var(--ok)}
.verdict b{color:var(--ink)}
.days{display:grid; grid-template-columns:repeat(28,1fr); gap:4px; margin-top:22px}
.days i{aspect-ratio:1; border-radius:2px; background:var(--line); opacity:0; transform:scale(.4); transition:.25s}
.days.on i{opacity:1; transform:none}
.days i.v{background:var(--warn)} .days i.b{background:var(--ok)} .days i.o{background:color-mix(in oklab,var(--ok) 45%,transparent)}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-family:var(--mono); font-size:.66rem; color:var(--muted)}
.legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:-1px; background:var(--line)}
.legend i.v{background:var(--warn)}.legend i.b{background:var(--ok)}.legend i.o{background:color-mix(in oklab,var(--ok) 45%,transparent)}

/* ---------- toy: portafoglio (cifre oscurate) ---------- */
.side .nolink{cursor:default; border-bottom:0; color:var(--muted); line-height:1.5; max-width:24ch}
.rd{color:transparent!important; user-select:none; -webkit-user-select:none; position:relative; border-radius:3px;
  background:repeating-linear-gradient(90deg, color-mix(in oklab,var(--ink) 22%,transparent) 0 6px, color-mix(in oklab,var(--ink) 10%,transparent) 6px 9px); filter:blur(.6px)}
.rd::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, transparent, color-mix(in oklab,var(--card) 35%,transparent), transparent)}
.eco{background:var(--bg2); border-radius:10px; padding:14px; font-family:var(--mono); font-size:.76rem}
.eco-bar{display:flex; gap:18px; flex-wrap:wrap; padding:6px 4px 12px; color:var(--muted); border-bottom:1px solid var(--line)}
.eco-bar b{color:var(--ink); font-weight:500} .eco-snap b{color:var(--acc)}
.eco-panel{display:none; padding-top:14px} .eco-panel.on{display:block}
.eco-kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.eco-kpi div{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; display:grid; gap:6px}
.eco-kpi span{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.eco-kpi b.big{font-family:var(--disp); font-weight:700; font-size:1.25rem; letter-spacing:-.02em; display:inline-block}
.eco-kpi i{font-style:normal; color:var(--muted); font-size:.7rem}
.eco-two{display:grid; grid-template-columns:1fr 1.4fr; gap:10px; margin-top:10px}
@media (max-width:640px){.eco-two{grid-template-columns:1fr}}
.eco-card{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; display:grid; gap:10px; align-content:start}
.eco-card .mono{color:var(--muted); font-size:.66rem}
.donut{width:120px; height:120px; justify-self:center}
.donut .d1,.donut .d2{transition:stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1)}
.spark{width:100%; height:110px; display:block}
.spark .area{fill:color-mix(in oklab,var(--acc) 18%,transparent)} .spark .line{fill:none; stroke:var(--acc); stroke-width:2; stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 1.8s ease}
.toy.on .spark .line{stroke-dashoffset:0}
.eco-leg{display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; color:var(--muted); font-size:.68rem}
.eco-leg i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:-1px}
.eco-t{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.eco-t th{text-align:left; font-weight:400; color:var(--muted); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; padding:6px 8px; border-bottom:1px solid var(--line2)}
.eco-t td{padding:9px 8px; border-bottom:1px solid var(--line); color:var(--ink2); white-space:nowrap}
.eco-t td.rd{color:transparent!important}
.eco-t td.more{color:var(--muted); font-style:italic; white-space:normal}
.eco-t tr:last-child td{border-bottom:0}
.pill{display:inline-block; margin-left:6px; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid color-mix(in oklab,var(--acc) 50%,transparent); color:var(--acc); border-radius:99px; padding:2px 7px; vertical-align:1px}
.pill.warn{border-color:color-mix(in oklab,var(--warn) 60%,transparent); color:var(--warn)}
.eco-foot{margin-top:12px; color:var(--muted); font-size:.68rem; line-height:1.6}
.eco-run{margin-top:14px; border-top:1px solid var(--line); padding-top:14px; display:grid; gap:12px}
.eco-log{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.72rem}
.eco-log li{display:flex; gap:10px; align-items:flex-start; color:var(--ink2); animation:pop .35s ease}
.eco-log li b{flex:none; width:16px; height:16px; border-radius:50%; border:1px solid var(--ok); color:var(--ok); display:grid; place-items:center; font-size:.6rem; margin-top:1px}
.eco-log li.warn b{border-color:var(--warn); color:var(--warn)} .eco-log li.warn{color:var(--ink)}
.eco-log li.wait b{border-color:var(--muted); color:transparent; border-top-color:var(--acc); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.caveat{margin-top:26px; color:var(--muted); font-size:.68rem; line-height:1.6}
.ledwrap, .eco{overflow-x:auto}

/* ---------- boot terminal ---------- */
body.booting{overflow:hidden}
#boot{position:fixed; inset:0; z-index:200; background:#07090D; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; padding:20px; transition:opacity .6s ease, transform .6s ease}
#boot.out{opacity:0; transform:translateY(-4%); pointer-events:none}
/* pioggia di cifre dietro la finestra (22/10/2026); l'alone al centro tiene il terminale leggibile */
#pioggia{position:absolute; inset:0; width:100%; height:100%; display:block}
#boot::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 60% 55% at 50% 50%, #07090Dcc 0%, #07090D66 45%, transparent 75%)}
.boot-win{position:relative; z-index:1; width:min(880px,100%); background:#0C1016f2; border:1px solid rgba(255,255,255,.1); border-radius:12px; box-shadow:0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px #3BD39B14, 0 0 80px -20px #3BD39B33; overflow:hidden; font-family:var(--mono); color:#D7DBE3; font-size:1rem}
.boot-bar{display:flex; align-items:center; gap:7px; padding:11px 16px; background:#141A22; border-bottom:1px solid rgba(255,255,255,.08); font-size:.78rem; color:#8F93A2}
.boot-bar i{width:10px; height:10px; border-radius:50%; background:#3A4150} .boot-bar i:first-child{background:#E8645A} .boot-bar i:nth-child(2){background:#E8B84A} .boot-bar i:nth-child(3){background:#5BC26A}
.boot-bar span{margin-left:8px}
.boot-out{margin:0; padding:22px 22px 0; min-height:0; white-space:pre-wrap; line-height:1.7; color:#9AA3B2}
.boot-out b{color:#7CC4FF; font-weight:400} .boot-out i{font-style:normal; color:#3BD39B} .boot-out em{font-style:normal; color:#E8A544}
.boot-line{padding:10px 22px 4px; line-height:1.7; overflow-wrap:anywhere}
.boot-ps{color:#3BD39B} #boot-cmd{color:#EDEBE4}
.boot-caret{display:inline-block; width:.55em; height:1.05em; background:#7CC4FF; vertical-align:-.15em; margin-left:2px; animation:blink 1s steps(2) infinite}
.boot-hint{padding:12px 22px 22px; font-size:.82rem; color:#8F93A2}
.boot-hint kbd{border:1px solid rgba(255,255,255,.2); border-radius:4px; padding:1px 6px; color:#EDEBE4}
.boot-hint button{background:#7CC4FF; color:#07090D; border:0; border-radius:6px; padding:6px 14px; font-family:var(--mono); font-size:.82rem; cursor:pointer}
.boot-hint .boot-skip{background:transparent; color:#8F93A2; text-decoration:underline; text-underline-offset:3px; padding:5px 4px}
.boot-sep{margin:0 6px}
@media (max-width:640px){.boot-hint kbd,.boot-hint .boot-sep:first-of-type{display:none} .boot-win{font-size:.86rem}
  /* sul telefono il comando va a capo mentre si scrive: le due righe sono pronte da subito, così la finestra non salta (25/10/2026) */
  .boot-line{min-height:calc(3.4em + 14px)}}

/* ---------- hero variants ---------- */
.hero-layer{position:absolute; inset:0; z-index:-1}
/* ---------- costellazione 3D (22/10/2026) ----------
   Una tela fissa dietro tutta la pagina: nella hero è la scena, scendendo la camera vola verso la stella
   del capitolo in lettura. Parte solo se WebGL c'è e il file /js/costellazione.min.js arriva; altrimenti
   resta la costellazione 2D. Tema scuro: tela trasparente su tutta la pagina (si vede la tinta del capitolo).
   Tema chiaro: la tela è scura e si vede solo dentro la hero (ritaglio aggiornato allo scroll). */
#field3d{position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block; pointer-events:none; opacity:0; transition:opacity .9s ease}
.has3d #field3d{opacity:.6} /* più trasparente: dalla hero in giù la galassia sta dietro al testo */
.chiaro3d #field3d{transition:none; opacity:1} /* tema chiaro: niente dissolvenza, altrimenti per un attimo la hero si schiarisce */
.has3d .hero{background:transparent}
.has3d body[data-chapter]:not([data-chapter=""]) #field3d{opacity:.5} /* nei capitoli il cielo si abbassa: si legge il racconto */
@media (max-width:900px){.has3d body[data-chapter]:not([data-chapter=""]) #field3d{opacity:.28}} /* colonna unica: la stella sta dietro al testo */
#stelle-tag{position:fixed; inset:0; z-index:5; pointer-events:none; display:none}
.has3d:not(.chiaro3d) #stelle-tag{display:block}
#stelle-tag span{position:absolute; left:0; top:0; white-space:nowrap; text-decoration:none; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:#EDEBE4; padding:6px 9px 6px 16px; margin-top:-12px; transition:opacity .4s, color .4s; will-change:transform; text-shadow:0 0 10px #0A0D13, 0 0 3px #0A0D13}
#stelle-tag span::before{content:attr(data-n) " · "; color:var(--c)}
#stelle-tag span.su{color:var(--c)}
#stelle-tag span.su{margin-left:clamp(40px,5vw,72px)}
/* la costellazione resta "muta" (decisione del 07/09): nella hero le etichette coprirebbero il testo,
   si vede solo quella del progetto in lettura, accanto alla sua stella (soloAttiva nel motore). Sono testo,
   non link: i capitoli si raggiungono dall'indice */
@media (max-width:900px){#stelle-tag{display:none!important}} /* capitoli a colonna unica: l'etichetta finirebbe sul testo */
#field2d{width:100%; height:100%; display:block}
/* room */
.mon{position:relative; aspect-ratio:16/10; background:#0B0F15; border:2px solid #1B2330; border-radius:8px; box-shadow:0 0 0 1px #05070A, 0 20px 40px -20px rgba(0,0,0,.9), inset 0 0 40px rgba(0,0,0,.6); overflow:hidden; opacity:.9}
.mon::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); pointer-events:none; mix-blend-mode:screen}
.mon::before{content:attr(data-cap); position:absolute; left:8px; bottom:6px; z-index:2; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,235,228,.45)}
.mon .mini{position:absolute; inset:0; transform:scale(.92); transform-origin:50% 45%}
.mon.flick{animation:flick 6s steps(1) infinite}
@keyframes flick{0%,96%,100%{filter:none}97%{filter:brightness(1.5)}98%{filter:brightness(.7)}}

/* ---------- minis (previews + room) ---------- */
.mini{--mc:#7CC4FF; font-family:var(--mono); font-size:.66rem; color:#C9C7BF; padding:14px; box-sizing:border-box; display:grid; align-content:center; gap:6px; background:#0E1218; border-radius:8px; position:relative; overflow:hidden; min-height:150px}
.mini .lab{font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mc); margin-bottom:2px}
/* wa */
.mini-wa .b{max-width:80%; padding:6px 9px; border-radius:10px; background:#1A212B; opacity:0; animation:mb 7s ease infinite}
.mini-wa .b.a{background:color-mix(in oklab,#3BD39B 35%,#1A212B); align-self:end; justify-self:end}
.mini-wa .b:nth-child(2){animation-delay:.3s}.mini-wa .b:nth-child(3){animation-delay:1.6s}.mini-wa .b:nth-child(4){animation-delay:3s}.mini-wa .b:nth-child(5){animation-delay:4.2s}
@keyframes mb{0%,4%{opacity:0; transform:translateY(6px)}10%,85%{opacity:1; transform:none}95%,100%{opacity:0}}
/* fanta */
.mini-fanta .row{display:flex; justify-content:space-between; border-bottom:1px solid #1E2733; padding:4px 0}
.mini-fanta .big{font-family:var(--disp); font-weight:800; font-size:1.2rem; color:#EDEBE4}
.mini-fanta .mic{width:22px; height:22px; border-radius:50%; border:1px solid #F3A6BC; position:absolute; right:14px; top:14px; animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(243,166,188,.6)}100%{box-shadow:0 0 0 18px rgba(243,166,188,0)}}
.mini-fanta .in{opacity:0; animation:mb 6s ease infinite 1.2s}
/* cash */
.mini-cash .g{display:grid; grid-template-columns:repeat(5,1fr); gap:4px}
.mini-cash .g i{height:12px; border-radius:2px; background:#1A212B; animation:cellfill 5s ease infinite}
.mini-cash .g i.f{background:#141A22}
@keyframes cellfill{0%,10%{background:#1A212B}25%,80%{background:#3A78E8}95%,100%{background:#1A212B}}
.mini-cash .ok{color:#3BD39B; opacity:0; animation:mb 5s ease infinite 2.8s}
/* trade */
.mini-trade .l{display:flex; gap:10px; align-items:center}
.mini-trade .l i{width:12px; height:12px; border-radius:50%; background:#E8A544; box-shadow:0 0 0 3px rgba(232,165,68,.25)}
.mini-trade .l i.g{background:#3BD39B; box-shadow:0 0 0 3px rgba(59,211,155,.25)}
.mini-trade .l i.p{animation:lamp 5s steps(1) infinite}
@keyframes lamp{0%,55%{background:#E8A544; box-shadow:0 0 0 3px rgba(232,165,68,.25)}60%,100%{background:#3BD39B; box-shadow:0 0 0 3px rgba(59,211,155,.25), 0 0 14px #3BC39B}}
.mini-trade .v{position:relative; height:1.4em} .mini-trade .v span{position:absolute; left:0; animation:swap 5s steps(1) infinite} .mini-trade .v span:last-child{animation-delay:2.5s}
@keyframes swap{0%,59%{opacity:1}60%,100%{opacity:0}}
.mini-trade .v span:last-child{animation-name:swap2} @keyframes swap2{0%,59%{opacity:0}60%,100%{opacity:1}}
.mini-trade .days{display:grid; grid-template-columns:repeat(28,1fr); gap:2px; margin-top:4px} .mini-trade .days i{aspect-ratio:1; background:#1E2733; border-radius:1px} .mini-trade .days i.b{background:#3BD39B} .mini-trade .days i.v{background:#E8A544}
/* eco */
.mini-eco .k{display:grid; grid-template-columns:1fr 1fr; gap:6px} .mini-eco .k div{background:#141A22; border-radius:4px; padding:6px}
.mini-eco .rd{display:block; height:10px; border-radius:2px; background:repeating-linear-gradient(90deg,#3A4150 0 5px,#2A3140 5px 8px); margin-top:4px}
.mini-eco svg{width:100%; height:44px; display:block} .mini-eco path{fill:none; stroke:#A99CFF; stroke-width:2; stroke-dasharray:400; stroke-dashoffset:400; animation:draw 6s ease infinite}
@keyframes draw{0%{stroke-dashoffset:400}50%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0; opacity:0}}
/* log + clock */
.mini-log{overflow:hidden} .mini-log .lines{display:grid; gap:4px; animation:scrollup 12s linear infinite} .mini-log .lines span{white-space:nowrap; color:#8F93A2} .mini-log .lines span b{color:#3BD39B; font-weight:400}
@keyframes scrollup{to{transform:translateY(-50%)}}
.mini-clock .t{font-family:var(--disp); font-weight:800; font-size:2rem; color:#EDEBE4; letter-spacing:-.03em}

/* ---------- peek (index hover preview) ---------- */
.peek{position:fixed; z-index:70; width:240px; pointer-events:none; opacity:0; transform:translate(-50%,-8px) scale(.96); transition:opacity .2s ease, transform .2s ease; filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
.peek.on{opacity:1; transform:translate(-50%,0) scale(1)}
.peek .mini{min-height:150px; border:1px solid rgba(255,255,255,.08)}
.peek-cap{margin-top:6px; text-align:center; color:var(--muted); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase}
@media (pointer:coarse){.peek{display:none}}
@media (prefers-reduced-motion: reduce){.mini *{animation:none!important} .mon.flick{animation:none}}

/* ---------- scrivigli tu ---------- */
.phone-in{cursor:text} .phone-in input{flex:1; min-width:0; background:var(--bg2); border:0; border-radius:20px; padding:8px 14px; font-family:var(--serif); font-size:.9rem; color:var(--ink)} .phone-in input:focus{outline:2px solid var(--acc)}
.phone-in button{width:34px; height:34px; border-radius:50%; background:var(--acc); border:0; flex:none; position:relative; cursor:pointer} .phone-in button b{position:absolute; inset:0; margin:auto; width:0; height:0; border-left:10px solid var(--bg); border-top:6px solid transparent; border-bottom:6px solid transparent; transform:translateX(2px)}
.phone-in span{display:none}
.chat-foot .live{color:var(--acc)}
.msg.thinking{opacity:.7}

/* ---------- sfida il banditore ---------- */
.duel-btn{background:transparent!important; border:1px dashed var(--line2)!important; color:var(--ink2)!important} .duel-btn i{font-style:normal; color:var(--muted); font-size:.85rem}
.duel{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:grid; gap:8px}
.duel-round{color:var(--muted); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase}
.duel-call{font-size:1rem} .duel-call b{font-family:var(--disp); font-weight:700} .duel-call .mono{color:var(--muted); margin-left:6px}
.duel-bar{height:4px; background:var(--line); border-radius:2px; overflow:hidden} .duel-bar b{display:block; height:100%; width:100%; background:var(--acc); transform-origin:left; transition:transform .25s linear}
.duel-hint{color:var(--muted); font-size:.68rem} .duel-score{color:var(--ink2); font-size:.72rem; min-height:1.2em}
.duel.done .duel-call{color:var(--muted)}

/* ---------- rivivi i 56 giorni ---------- */
.replay{margin-top:18px; border-top:1px solid var(--line); padding-top:14px; display:grid; gap:8px}
.replay label{color:var(--muted); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase} .replay label span{color:var(--acc)}
.replay input[type=range]{width:100%; accent-color:var(--acc)}
.day-log{font-family:var(--mono); font-size:.76rem; line-height:1.6; color:var(--ink2); background:var(--bg2); border-radius:8px; padding:12px 14px; min-height:3.4em}
.day-log b{color:var(--ink); font-weight:500} .day-log .h{color:var(--warn)} .day-log .g{color:var(--ok)} .day-log .human{display:block; margin-top:6px; color:var(--muted); font-style:italic}
.days i.cur{outline:2px solid var(--ink); outline-offset:1px}

/* ---------- la firma che si scrive ---------- */
.sign{position:relative; display:inline-block; margin-top:34px; line-height:1}
.sign-txt{font-family:var(--testo); font-style:italic; font-weight:500; font-size:clamp(2.6rem,6vw,4.2rem); color:var(--acc); clip-path:inset(0 100% 0 -10px); display:inline-block; padding-right:.2em; transform:rotate(-3deg)}
.sign.on .sign-txt{animation:write 1.9s cubic-bezier(.4,0,.3,1) forwards}
@keyframes write{to{clip-path:inset(0 -10px 0 -10px)}}
.sign .pen{position:absolute; left:0; bottom:.35em; width:7px; height:7px; border-radius:50%; background:var(--ink); opacity:0; box-shadow:0 0 12px var(--acc)}
.sign.on .pen{animation:penmove 1.9s cubic-bezier(.4,0,.3,1) forwards}
@keyframes penmove{0%{left:0; opacity:1}92%{opacity:1}100%{left:100%; opacity:0}}
.sign-cap{display:block; margin-top:8px; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
#mail{font-variant-numeric:tabular-nums; min-width:12ch; display:inline-block}
#mail.typing::after{content:"▍"; color:var(--acc)}
@media (prefers-reduced-motion: reduce){.sign .sign-txt{clip-path:none; animation:none} .sign .pen{display:none}}

/* ---------- console: tabs, lists, pitch, control board ---------- */
.fanta-tabs{margin-left:auto}
.fpanel{display:none} .fpanel.on{display:block}
.frow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.langs.sub button{font-size:.66rem}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chips button{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; background:transparent; color:var(--ink2); border:1px solid var(--line2); border-radius:99px; padding:4px 9px; cursor:pointer}
.chips button.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.fsearch{flex:1; min-width:160px; background:var(--card); border:1px solid var(--line2); border-radius:8px; padding:8px 12px; font-family:var(--serif); font-size:.92rem; color:var(--ink)}
.fsearch:focus{outline:2px solid var(--acc); outline-offset:1px}
.fselect{background:var(--card); color:var(--ink); border:1px solid var(--line2); border-radius:8px; padding:8px 10px; font-family:var(--mono); font-size:.76rem}
.chk{display:flex; gap:6px; align-items:center; color:var(--ink2); font-size:.7rem} .chk input{accent-color:var(--acc)}
.flist{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; max-height:420px; overflow-y:auto}
.flist .r{display:grid; grid-template-columns:auto 1fr auto; gap:6px 12px; align-items:baseline; padding:9px 12px; background:var(--card); font-family:var(--mono); font-size:.74rem; color:var(--ink2)}
.flist .r b{font-family:var(--serif); font-weight:500; font-size:.98rem; color:var(--ink)}
.flist .r .t{color:var(--muted); font-size:.66rem}
.flist .r .tetto{font-family:var(--disp); font-weight:800; font-size:1.05rem; color:var(--acc); text-align:right}
.flist .r .nt{grid-column:1/4; color:var(--muted); font-family:var(--serif); font-size:.86rem; font-style:italic}
.flist .r .fl{display:inline-block; font-size:.58rem; letter-spacing:.06em; border:1px solid var(--line2); border-radius:99px; padding:1px 6px; margin-left:4px; vertical-align:2px; color:var(--muted)}
.flist .r .fl.w{border-color:color-mix(in oklab,var(--warn) 60%,transparent); color:var(--warn)}
.flist .r .fl.g{border-color:color-mix(in oklab,var(--ok) 60%,transparent); color:var(--ok)}
.flist .more{background:var(--card); padding:10px; text-align:center; font-family:var(--mono); font-size:.68rem; color:var(--acc); cursor:pointer; border:0; width:100%}
.flist .empty{background:var(--card); padding:14px; font-family:var(--mono); font-size:.7rem; color:var(--muted)}
.fnote{margin-top:12px; color:var(--muted); font-size:.68rem; line-height:1.6}
/* plancia rows */
.flist.plancia .r{grid-template-columns:auto 1fr auto auto}
.st{font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; border-radius:99px; padding:2px 8px; border:1px solid var(--line2); color:var(--muted)}
.st.me{border-color:var(--ok); color:var(--ok)} .st.gone{border-color:var(--line2); color:var(--muted); text-decoration:none}
.r.gone b{text-decoration:line-through; color:var(--muted)} .r.me b{color:var(--ok)}
.stats{gap:14px} .stats div{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-family:var(--mono); font-size:.68rem; color:var(--muted)} .stats div b{display:block; font-family:var(--disp); font-weight:800; font-size:1.3rem; color:var(--ink); letter-spacing:-.02em} .stats div.me b{color:var(--ok)}
/* pitch */
.pitch{position:relative; background:linear-gradient(180deg,#123f2c 0%,#175a3d 100%); border:2px solid rgba(255,255,255,.25); border-radius:12px; padding:18px 12px; display:grid; gap:18px; min-height:300px; overflow:hidden}
.pitch::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:0; border-left:1px solid rgba(255,255,255,.18)}
.pitch::after{content:""; position:absolute; left:50%; top:50%; width:90px; height:90px; border:1px solid rgba(255,255,255,.18); border-radius:50%; transform:translate(-50%,-50%)}
.pline{display:flex; justify-content:space-evenly; gap:6px; flex-wrap:wrap; position:relative; z-index:1}
.pl{background:rgba(255,255,255,.92); color:#101418; border-radius:99px; padding:5px 11px; font-family:var(--mono); font-size:.68rem; box-shadow:0 2px 6px rgba(0,0,0,.35); white-space:nowrap}
.pl.me{background:#3BD39B} .pl.gone{background:rgba(255,255,255,.4); text-decoration:line-through; color:#233}
.pl.rig::after{content:" ●"; color:#B8385E}
.bench{color:var(--muted); font-size:.68rem; margin-top:10px} .bench b{color:var(--ink2); font-weight:500}
@media (max-width:640px){.flist{max-height:340px} .pl{font-size:.62rem; padding:4px 8px}}

/* ---------- embedded app (chapter 05) ---------- */
.toy-app{padding:18px}
.caplink{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line2)} .caplink:hover{color:var(--acc); border-color:var(--acc)}
.appwrap{position:relative; max-width:880px; margin:0 auto; height:640px; border:1px solid var(--line2); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow); display:flex; flex-direction:column; transform:perspective(1400px) rotateX(var(--tilt,0deg)); transform-origin:50% 0; transition:transform .25s ease-out}
.appbar{flex:none; display:flex; align-items:center; gap:7px; padding:9px 14px; background:var(--bg2); border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.68rem; color:var(--muted)}
.appbar i{width:10px; height:10px; border-radius:50%; background:var(--line2)} .appbar i:first-child{background:#E8645A} .appbar i:nth-child(2){background:#E8B84A} .appbar i:nth-child(3){background:#5BC26A}
.appbar span{margin-left:8px; color:var(--ink2)} .appbar em{margin-left:auto; font-style:normal; transition:opacity .4s}
.appbar em.off{opacity:0}
.appwrap iframe{display:block; flex:1; width:100%; min-height:0; border:0; background:#fff}
@media (max-width:640px){.appwrap{height:520px} .appbar em{display:none}}
@media (prefers-reduced-motion: reduce){.appwrap{transform:none}}
.appfall{position:absolute; inset:0; display:grid; place-content:center; gap:14px; text-align:center; background:var(--card); color:var(--ink2); padding:24px}
.appfall .btn{text-decoration:none; display:inline-block}

/* ---------- marquee + lessons ---------- */
.band{border-block:1px solid var(--line2); padding:22px 0; overflow:hidden; white-space:nowrap}
.band .track{display:inline-flex; gap:0; animation:mq 46s linear infinite; will-change:transform}
.band span{font-family:var(--disp); font-weight:700; font-size:clamp(1.4rem,3vw,2.4rem); letter-spacing:-.02em; padding:0 .8em; display:inline-flex; align-items:center; gap:.8em}
.band span::after{content:""; width:.35em; height:.35em; border-radius:50%; background:var(--acc); display:inline-block}
@keyframes mq{to{transform:translateX(-50%)}}
.lessons{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (max-width:760px){.lessons{grid-template-columns:1fr}}
.lesson{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; display:grid; gap:12px; --e:var(--acc); position:relative; overflow:hidden; transition:transform .3s, border-color .3s}
.lesson:hover{transform:translateY(-3px); border-color:var(--e)}
.lesson[data-acc="wa"]{--e:var(--c-wa)}.lesson[data-acc="fanta"]{--e:var(--c-fanta)}.lesson[data-acc="cash"]{--e:var(--c-cash)}.lesson[data-acc="trade"]{--e:var(--c-trade)}
.lesson .mono{color:var(--e)}
.lesson h3{font-size:1.4rem; font-weight:700}
.lesson p{color:var(--ink2); font-size:1rem}

/* ---------- footer ---------- */
footer{padding:120px 0 60px; border-top:1px solid var(--line)}
footer .big{font-family:var(--disp); font-weight:800; font-size:clamp(1.9rem,5.4vw,4.2rem); letter-spacing:-.04em; line-height:.95; max-width:14ch}
footer .big em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--acc)}
footer .cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; margin-top:54px; align-items:end}
@media (max-width:760px){footer .cols{grid-template-columns:1fr}}
footer p{color:var(--ink2); max-width:48ch}
.contacts{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.contacts a{font-family:var(--mono); font-size:.85rem; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line2); padding-bottom:2px; transition:.2s}
.contacts a:hover{color:var(--acc); border-color:var(--acc)}
.colophon{margin-top:60px; font-family:var(--mono); font-size:.68rem; color:var(--muted); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
  .lede,.hero .meta{opacity:1; transform:none; transition:none}
  .band .track{animation:none}
  .scrollhint::after,.caret{animation:none}
  .days i{opacity:1; transform:none; transition:none}
  body{transition:none}
}
[hidden]{display:none!important}
/* Le parole lunghe devono poter andare a capo: "Quarantaquattro" nel titolo del capitolo 04
   sfondava il bordo destro su telefono e rendeva la pagina scorrevole di lato. */
h1,h2,h3,h4{overflow-wrap:break-word}
.chapter h2,.who h2,.entry h3,.takeaway p,.lede{hyphens:auto}
/* nodi cliccabili della costellazione */
/* Su telefono il testo riempie la hero: per cinque etichette non c'è posto che non
   copra una parola, e un bersaglio invisibile sotto al racconto aprirebbe un capitolo
   a un tocco sbagliato. Là la costellazione resta solo scenografia: i cinque progetti
   sono nell'indice subito sotto, con righe grandi e la loro riga di prova. */
/* la prova nell'indice */
.entry .proof{grid-column:1/-1; font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; color:var(--e); opacity:.9; margin-top:-6px}
.entry.soon .proof{color:var(--muted)}
@media (max-width:860px){.entry .proof{margin-top:2px}}
@media (max-width:360px){.entry .tag{white-space:normal}} /* su schermi molto stretti l'etichetta va a capo invece di sfondare */
/* margine di prova sotto i numeri */
.evidence{margin-top:16px; padding:2px 0 2px 14px; border-left:2px solid color-mix(in oklab,var(--acc) 55%,transparent); font-family:var(--mono); font-size:.68rem; line-height:1.65; letter-spacing:.02em; color:var(--muted)}
.evidence b{font-weight:400; color:var(--acc)}
/* ricevuta della decisione */
.receipt{display:block; margin-top:14px; padding:10px 13px; border:1px dashed color-mix(in oklab,var(--acc) 42%,transparent); border-radius:9px; background:color-mix(in oklab,var(--acc) 7%,transparent); font-family:var(--mono); font-size:.67rem; line-height:1.6; color:var(--ink); opacity:0; transform:translateY(5px); transition:opacity .35s ease, transform .35s ease}
.receipt.on{opacity:1; transform:none}
.receipt i{font-style:normal; color:var(--muted)}
.receipt b{font-weight:400; color:var(--acc)}
/* apri la console completa */
.moretabs{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; background:transparent; color:var(--acc); border:1px solid color-mix(in oklab,var(--acc) 45%,transparent); border-radius:99px; padding:5px 12px; cursor:pointer}
.moretabs:hover{background:color-mix(in oklab,var(--acc) 14%,transparent)}
/* senza JavaScript */
.nojs{max-width:620px; margin:18px auto 0; padding:12px 16px; border:1px solid var(--line); border-radius:10px; font-family:var(--mono); font-size:.72rem; line-height:1.6; color:var(--muted); text-align:center}
@media (prefers-reduced-motion: reduce){.receipt{transition:none}}


/* =====================================================================================
   PORTFOLIO (24/10/2026): da diario a catalogo dei lavori.
   Nuove parti: schede a scorrimento in home, pagina per lavoro, sezione «Come lavoro».
   Il resto del foglio (sopra) è quello del diario, lasciato com'era: i giocattoli lo usano.
   ===================================================================================== */

/* l'ottava stella: il bollettino della notte */
:root{--c-boll:#2B55D6; --c-crea:#A0329F; --c-brain:#8A6A00}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-boll:#5E8CFF; --c-crea:#E36BFF; --c-brain:#F7D262}}
:root[data-theme="dark"]{--c-boll:#5E8CFF; --c-crea:#E36BFF; --c-brain:#F7D262}
body[data-chapter="ronda"]{--acc:var(--c-ronda)} body[data-chapter="recap"]{--acc:var(--c-recap)} body[data-chapter="boll"]{--acc:var(--c-boll)} body[data-chapter="crea"]{--acc:var(--c-crea)} body[data-chapter="brain"]{--acc:var(--c-brain)}
.chapter[data-acc="ronda"]{--acc:var(--c-ronda)} .chapter[data-acc="recap"]{--acc:var(--c-recap)} .chapter[data-acc="boll"]{--acc:var(--c-boll)} .chapter[data-acc="crea"]{--acc:var(--c-crea)} .chapter[data-acc="brain"]{--acc:var(--c-brain)}

/* ---------- barra in alto: sulle pagine dei lavori non c'è la hero scura, la barra nasce già solida ---------- */
.top .back,.top .pos{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.top .back{opacity:.75} .top .back:hover{opacity:1}
.top .pos{opacity:.55; pointer-events:none}
/* lo switch di lingua (26/10/2026): un link alla pagina gemella, scritto in testata di ogni pagina */
.top .lang{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; line-height:1; padding:6px 9px; border:1px solid currentColor; border-radius:999px; opacity:.7; flex:none; text-decoration:none}
.top .lang:hover,.top .lang:focus-visible{opacity:1}
@media (max-width:640px){.top nav{order:3} .pagina-lavoro .top .pos{display:none}}
@media (max-width:420px){.pagina-lavoro .top{gap:6px 8px} .pagina-lavoro .top .back{font-size:.62rem; letter-spacing:.06em}}
.pagina-lavoro .top{mix-blend-mode:normal; color:var(--ink); background:color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.pagina-lavoro .top .wordmark{color:var(--ink)} .pagina-lavoro .top nav a{color:var(--muted)} .pagina-lavoro .top nav a:hover{color:var(--ink)}

/* ---------- le schede dei lavori (home) ---------- */
.lavori{border-top:1px solid var(--line); overflow:hidden}
.gruppi{display:flex; gap:8px; flex-wrap:wrap; margin-top:30px}
.gruppi button{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; background:transparent; color:var(--muted); border:1px solid var(--line2); border-radius:99px; padding:9px 14px; min-height:40px; cursor:pointer; transition:color .25s, background-color .25s, border-color .25s}
.gruppi button:hover{color:var(--ink)}
.gruppi button.on{color:var(--bg); background:var(--ink); border-color:var(--ink)}
.strip-wrap{position:relative; margin-top:30px}
.strip{display:flex; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:14px max(24px, calc((100% - 1180px)/2)) 30px; scroll-padding-inline:max(24px, calc((100% - 1180px)/2)); scrollbar-width:none; -webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip:focus-visible{outline-offset:-3px}
.card{flex:0 0 clamp(272px, 23vw, 324px); scroll-snap-align:start; display:flex; flex-direction:column; gap:14px; padding:18px 18px 16px; background:color-mix(in oklab, var(--card) 74%, transparent); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); border:1px solid var(--line); border-radius:16px; text-decoration:none; color:var(--ink); --e:var(--acc); position:relative; overflow:hidden; box-shadow:var(--shadow); transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--e); opacity:.85}
.card:hover,.card.on{transform:translateY(-4px); border-color:color-mix(in oklab,var(--e) 55%,transparent)}
.card[data-acc="wa"]{--e:var(--c-wa)} .card[data-acc="brain"]{--e:var(--c-brain)} .card[data-acc="cash"]{--e:var(--c-cash)} .card[data-acc="trade"]{--e:var(--c-trade)} .card[data-acc="eco"]{--e:var(--c-eco)} .card[data-acc="ronda"]{--e:var(--c-ronda)} .card[data-acc="recap"]{--e:var(--c-recap)} .card[data-acc="boll"]{--e:var(--c-boll)} .card[data-acc="crea"]{--e:var(--c-crea)}
.card-n{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between; gap:10px}
.card-n b{color:var(--e); font-weight:400}
.card-pre{aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:#0E1218; border:1px solid rgba(255,255,255,.06); display:grid}
.card-pre .mini{min-height:0; height:100%; border-radius:0}
.card-pre:empty::after{content:attr(data-cap); font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#8F93A2; place-self:center; padding:12px; text-align:center}
.card h3{font-size:1.22rem; font-weight:700; line-height:1.15; letter-spacing:-.02em; margin:2px 0 0; hyphens:auto}
.card-key{margin-top:auto}
.card-key b{display:block; font-family:var(--disp); font-weight:800; font-size:1.55rem; letter-spacing:-.03em; color:var(--e); font-variant-numeric:tabular-nums; white-space:nowrap}
.card-key span{display:block; margin-top:5px; font-family:var(--mono); font-size:.63rem; letter-spacing:.02em; color:var(--muted); line-height:1.5}
.card-go{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:12px}
.card-go i{font-style:normal; transition:transform .3s} .card:hover .card-go i{transform:translateX(6px)}
.card[hidden]{display:none}
.strip-btn{position:absolute; top:42%; z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid var(--line2); background:color-mix(in oklab,var(--bg) 82%,transparent); color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:opacity .3s; display:grid; place-items:center; padding:0 0 3px}
.strip-btn.prev{left:10px} .strip-btn.next{right:10px}
.strip-btn:disabled{opacity:.2; cursor:default}
.dots{display:flex; gap:7px; justify-content:center; flex-wrap:wrap; min-height:8px}
.dots i{width:6px; height:6px; border-radius:50%; background:var(--line2); transition:background-color .3s, transform .3s}
.dots i.on{background:var(--acc); transform:scale(1.5)}
.lavori .nota{margin-top:26px; font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; color:var(--muted); text-align:center}
@media (max-width:760px){.strip-btn{display:none} .card{flex-basis:min(82vw,340px)} .strip{padding-inline:16px; scroll-padding-inline:16px}}

/* ---------- anteprime nuove (stesso linguaggio delle minis del diario) ---------- */
.mini-ronda .g{display:grid; grid-template-columns:repeat(6,1fr); gap:3px}
.mini-ronda .g i{aspect-ratio:1.7; border-radius:2px; background:#1A212B; animation:cella 7s steps(1) infinite}
.mini-ronda .g i.k{--on:#2E4A3A} .mini-ronda .g i.w{--on:#F5C542} .mini-ronda .g i.c{--on:#FF5A4E}
@keyframes cella{0%,18%{background:#1A212B}30%,88%{background:var(--on,#2A3340)}100%{background:#1A212B}}
.mini-ronda .ok{color:#C6F432; opacity:0; animation:mb 7s ease infinite 3.2s}
.mini-recap .fr{font-family:var(--serif); font-style:italic; font-size:.82rem; color:#EDEBE4; line-height:1.3}
.mini-recap .fr{line-height:1.45} .mini-recap .fr mark{background:linear-gradient(transparent 68%,rgba(232,165,68,.5) 68%); color:inherit}
.mini-recap .k{display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
.mini-recap .k div{background:#141A22; border-radius:4px; padding:5px 6px; font-size:.56rem}
.mini-recap .k b{display:block; font-family:var(--disp); font-weight:800; font-size:.95rem; color:#4FD1D9}
.mini-boll .r{display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; border-bottom:1px solid #1E2733; padding:4px 0}
.mini-boll .r i{display:inline-block; width:7px; height:7px; border-radius:50%; background:#3BD39B; margin-right:6px; vertical-align:middle}
.mini-boll .r i.c{background:#F0684E; animation:lamp2 3s steps(1) infinite}
.mini-boll .r b{font-family:var(--disp); font-weight:700; color:#EDEBE4; font-size:.7rem}
.mini-boll .bar{height:4px; border-radius:3px; background:#1E2733; overflow:hidden; position:relative; margin-top:2px}
.mini-boll .bar i{position:absolute; inset:0; width:var(--w); border-radius:0; margin:0; background:#5E8CFF; transform-origin:left; animation:fill 6s ease infinite}
@keyframes fill{0%{transform:scaleX(0)}30%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes lamp2{0%,49%{opacity:1}50%,100%{opacity:.35}}

/* ---------- pagina del lavoro ---------- */
.pagina-lavoro .chapter{border-top:0; padding-top:150px}
.chapter h1{font-size:clamp(min(2rem,7.2vw),4.6vw,3.6rem); /* su telefono scende sotto i 2rem: «Abbigliamento» intero sta in riga */ font-weight:800; margin-bottom:30px; line-height:1.02; letter-spacing:-.04em; hyphens:auto}
.chapter h1 em{font-style:italic; font-family:var(--serif); font-weight:400; color:var(--acc)}
.chapter .side .grp{display:block; margin-top:12px; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--acc)}
.num .fonte{display:block; margin-top:12px; padding-top:8px; border-top:1px dashed var(--line2); font-family:var(--mono); font-size:.62rem; letter-spacing:.02em; color:var(--muted); font-style:normal; line-height:1.5}
.appwrap.demo{transform:none; height:680px; background:#0C0E14}
.appwrap.demo iframe{background:#0C0E14}
@media (max-width:640px){.appwrap.demo{height:560px}}
.lavoro-nav{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:54px; border-top:1px solid var(--line2); padding-top:26px}
.lavoro-nav a{text-decoration:none; color:var(--ink); display:grid; gap:6px; align-content:start; --e:var(--acc); min-width:0}
.lavoro-nav a .mono{color:var(--muted); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase}
.lavoro-nav a b{font-family:var(--disp); font-weight:700; font-size:1.05rem; letter-spacing:-.02em; transition:color .25s; overflow-wrap:break-word}
.lavoro-nav a:hover b{color:var(--e)}
.lavoro-nav a.next{text-align:right}
.lavoro-nav a[data-acc="wa"]{--e:var(--c-wa)} .lavoro-nav a[data-acc="brain"]{--e:var(--c-brain)} .lavoro-nav a[data-acc="cash"]{--e:var(--c-cash)} .lavoro-nav a[data-acc="trade"]{--e:var(--c-trade)} .lavoro-nav a[data-acc="eco"]{--e:var(--c-eco)} .lavoro-nav a[data-acc="ronda"]{--e:var(--c-ronda)} .lavoro-nav a[data-acc="recap"]{--e:var(--c-recap)} .lavoro-nav a[data-acc="boll"]{--e:var(--c-boll)} .lavoro-nav a[data-acc="crea"]{--e:var(--c-crea)}
@media (max-width:640px){.lavoro-nav{grid-template-columns:1fr} .lavoro-nav a.next{text-align:left}}

/* ---------- Come lavoro ---------- */
.metodo{border-top:1px solid var(--line)}
.metodo-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:18px}
@media (max-width:860px){.metodo-grid{grid-template-columns:1fr}}
.met{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; position:relative; overflow:hidden}
.met::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--acc)}
.met > .mono{color:var(--acc); display:block; margin-bottom:14px}
.met p{font-size:1.05rem; color:var(--ink2); max-width:50ch} .met p + p{margin-top:12px}
.met p strong{color:var(--ink); font-weight:500}
.met dl{display:grid; grid-template-columns:auto 1fr; gap:12px 20px; margin:0}
.met dt{font-family:var(--disp); font-weight:800; font-size:1.05rem; letter-spacing:-.02em; color:var(--ink)}
.met dd{margin:0; color:var(--ink2); font-size:1rem; align-self:center}
.met .small{font-family:var(--mono); font-size:.68rem; letter-spacing:.02em; color:var(--muted); margin-top:20px; line-height:1.6; max-width:none}
.lente{margin-top:18px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px 28px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 32px; align-items:start}
@media (max-width:860px){.lente{grid-template-columns:1fr}}
.lente > div > .mono{color:var(--acc)}
.lente p.testo{font-family:var(--serif); font-size:1.12rem; line-height:1.65; color:var(--ink2); margin-top:12px; max-width:64ch}
.lente p.testo span{transition:box-shadow .4s, color .4s; border-radius:2px; padding:0 .08em}
.lente.on [data-f="codice"]{box-shadow:inset 0 -.55em color-mix(in oklab,var(--brand) 38%,transparent); color:var(--ink)}
.lente.on [data-f="modello"]{box-shadow:inset 0 -.55em color-mix(in oklab,var(--c-trade) 45%,transparent); color:var(--ink)}
.lente-ctl{display:grid; gap:14px; justify-items:start}
.lente-ctl button{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; background:transparent; color:var(--ink); border:1px solid var(--line2); border-radius:99px; padding:10px 16px; min-height:44px; cursor:pointer; transition:background-color .25s, color .25s}
.lente-ctl button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.lente-leg{display:grid; gap:6px; font-family:var(--mono); font-size:.64rem; color:var(--muted)}
.lente-leg i{display:inline-block; width:14px; height:8px; border-radius:2px; margin-right:8px; vertical-align:middle}
.lente-leg .cod{background:color-mix(in oklab,var(--brand) 55%,transparent)} .lente-leg .mod{background:color-mix(in oklab,var(--c-trade) 60%,transparent)}
.principi{margin-top:54px; display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (max-width:760px){.principi{grid-template-columns:1fr}}
.principio{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; display:grid; gap:12px; --e:var(--acc); text-decoration:none; color:inherit; transition:transform .3s, border-color .3s; position:relative; align-content:start}
.principio:hover{transform:translateY(-3px); border-color:var(--e)}
.principio[data-acc="wa"]{--e:var(--c-wa)} .principio[data-acc="fanta"]{--e:var(--c-fanta)} .principio[data-acc="cash"]{--e:var(--c-cash)} .principio[data-acc="trade"]{--e:var(--c-trade)}
.principio > .mono{color:var(--e)}
.principio h3{font-size:1.4rem; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.principio p{color:var(--ink2); font-size:1rem}
.principio .va{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; transition:color .25s}
.principio:hover .va{color:var(--e)}
.nonqui{margin-top:44px; display:grid; grid-template-columns:auto 1fr; gap:14px 24px; align-items:baseline; border-top:1px solid var(--line2); padding-top:22px}
.nonqui .mono{color:var(--acc)}
.nonqui p{font-family:var(--serif); font-style:italic; font-size:1.25rem; line-height:1.4; color:var(--ink); max-width:60ch}
@media (max-width:640px){.nonqui{grid-template-columns:1fr}}

@media (prefers-reduced-motion: reduce){
  .card,.principio,.lavoro-nav a b,.card-go i{transition:none}
  .strip{scroll-behavior:auto}
}

/* ---------- etichette della costellazione: nella home sono link alle pagine dei lavori ---------- */
#stelle-tag a{position:absolute; left:0; top:0; white-space:nowrap; text-decoration:none; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:#EDEBE4; padding:6px 9px 6px 16px; margin-top:-12px; transition:opacity .4s, color .4s; will-change:transform; text-shadow:0 0 10px #0A0D13, 0 0 3px #0A0D13; pointer-events:none}
#stelle-tag a::before{content:attr(data-n) " · "; color:var(--c)}
#stelle-tag a:hover,#stelle-tag a.su{color:var(--c)}
#stelle-tag a.su{margin-left:clamp(40px,5vw,72px)}

/* ---------- schede: puntini cliccabili, gruppi accessibili ---------- */
.dots i{cursor:pointer}
.lavori{--acc:var(--brand)}
.card:focus-visible{outline:2px solid var(--e); outline-offset:3px}

/* ---------- demo intere nelle pagine della ronda, di Fine giornata e del bollettino ---------- */
.toy-demo .appbar em{font-style:normal}

/* hero: il testo resta sopra le etichette delle stelle; la console è in sordina anche nell'etichetta */
.hero .in{position:relative; z-index:6; pointer-events:none} .hero .in a,.hero .in button{pointer-events:auto}
#stelle-tag [data-nodo="fanta"]:not(.su){filter:opacity(.6)}
/* telefono e tablet: dietro le schede il cielo si abbassa, come nei capitoli */
@media (max-width:900px){.has3d.in-lavori #field3d{opacity:.35}}
/* sulle schede dei lavori l'etichetta della costellazione (fissa, z-index 5) non deve restare davanti: sfuma via */
#stelle-tag{transition:opacity .4s}
.in-lavori #stelle-tag{opacity:0!important; visibility:hidden}

/* ---- schede lavoro, struttura del 25/10/2026: problema → come si usa → come è costruito → risultati ---- */
.chapter h1 + .lead{margin-top:-12px}
.lead{max-width:56ch; font-size:clamp(1.12rem,2.1vw,1.32rem); line-height:1.45; color:var(--ink); margin:0 0 28px}
.scheda{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin:0 0 52px; border-top:1px solid var(--line2); border-bottom:1px solid var(--line)}
.scheda > div{padding:14px 18px 16px 0; border-right:1px solid var(--line)}
.scheda > div + div{padding-left:18px}
.scheda > div:last-child{border-right:0}
.scheda dt{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acc)}
.scheda dd{margin:6px 0 0; font-size:.92rem; line-height:1.4; color:var(--ink2)}
.story .sez{display:flex; align-items:baseline; gap:14px; font-size:clamp(1.25rem,2.4vw,1.55rem); font-weight:700; color:var(--ink); margin:56px 0 18px; padding-top:18px; border-top:1px solid var(--line)}
.story .sez:first-child{margin-top:0}
.story .sez span{font-family:var(--mono); font-weight:400; font-size:.7rem; letter-spacing:.1em; color:var(--acc)}
.story .passi{list-style:none; counter-reset:passo; margin:0; padding:0}
.story .passi li{counter-increment:passo; position:relative; padding:0 0 22px 52px}
.story .passi li::before{content:counter(passo,decimal-leading-zero); position:absolute; left:0; top:.1em; width:34px; height:34px; display:grid; place-items:center; font-family:var(--mono); font-size:.72rem; color:var(--acc); border:1px solid var(--line2); border-radius:50%; background:var(--bg)}
.story .passi li:not(:last-child)::after{content:""; position:absolute; left:17px; top:calc(.1em + 34px); bottom:0; border-left:1px dashed var(--line2)}
.story .passi b, .story .catena b{color:var(--ink); font-weight:600}
.story .catena{list-style:none; margin:0 0 26px; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden}
.story .catena li{display:grid; grid-template-columns:112px 1fr; gap:18px; padding:15px 20px; font-size:.98rem; line-height:1.45}
.story .catena li + li{border-top:1px solid var(--line)}
.story .catena b{font-family:var(--mono); font-weight:400; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); padding-top:.3em}
.story .catena b::after{content:" →"; color:var(--muted)}
.story .catena li:last-child b::after{content:""}
@media (max-width:560px){
  .scheda > div, .scheda > div + div{padding:12px 0; border-right:0; border-bottom:1px solid var(--line)}
  .scheda > div:last-child{border-bottom:0}
  .story .catena li{grid-template-columns:1fr; gap:4px}
}

/* ---- le creative (dal 25/10/2026): demo a passi, bozzetti a matita su carta ---- */
.crea-steps{list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; counter-reset:none}
.crea-steps button{width:100%; display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:transparent; border:0; border-top:2px solid var(--line2); padding:10px 2px 4px; cursor:pointer; text-align:left}
.crea-steps i{font-style:normal; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line2); font-size:.6rem; flex:none}
.crea-steps button.done{color:var(--ink2); border-top-color:color-mix(in oklab,var(--acc) 55%,transparent)}
.crea-steps button[aria-selected="true"]{color:var(--ink); border-top-color:var(--acc)}
.crea-steps button[aria-selected="true"] i, .crea-steps button.done i{background:var(--acc); border-color:var(--acc); color:var(--bg)}
.crea-panel{animation:creaIn .35s ease both}
@keyframes creaIn{from{opacity:0; transform:translateY(6px)}}
.crea-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px dashed var(--line2)}
.crea-nav .mono{font-size:.66rem; color:var(--muted)}
.btn.ghost{background:transparent; color:var(--ink2); border:1px solid var(--line2)}
.brief{border:1px solid var(--line); border-radius:10px; overflow:hidden}
.brief-h{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line); background:color-mix(in oklab,var(--acc) 8%,transparent)}
.brief-h .mono{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acc)}
.brief-h b{font-family:var(--disp); font-size:1.3rem}
.brief-h span:last-child{font-size:.82rem; color:var(--muted)}
.brief dl{margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.brief dl div{padding:12px 18px; border-bottom:1px solid var(--line)}
.brief dt{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.brief dd{margin:4px 0 0; font-size:.92rem; color:var(--ink)}
.concepts{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.concept{display:flex; flex-direction:column; gap:8px; text-align:left; background:var(--bg); color:var(--ink2); border:1px solid var(--line); border-radius:10px; padding:16px; cursor:pointer; font:inherit; font-size:.86rem; line-height:1.4; transition:border-color .2s, transform .2s}
.concept:hover{transform:translateY(-2px)}
.concept .mono{font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.concept b{font-family:var(--disp); font-size:1.08rem; line-height:1.15; color:var(--ink)}
.concept em{margin-top:auto; font-style:normal; font-family:var(--mono); font-size:.66rem; align-self:flex-start; border:1px solid var(--line2); border-radius:20px; padding:4px 10px}
.concept[aria-checked="true"]{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset}
.concept[aria-checked="true"] .mono, .concept[aria-checked="true"] em{color:var(--acc); border-color:var(--acc)}
.sketch-row, .ad-row{display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:26px; align-items:start}
.sketch-notes .mono{font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--acc)}
.sketch-notes ul{margin:10px 0 14px; padding-left:18px; font-size:.92rem; line-height:1.55; color:var(--ink2)}
.sketch-notes .small{font-size:.66rem; color:var(--muted); line-height:1.6}
/* il foglio: carta chiara, tratto a matita, guide tratteggiate */
.sketch{--pap:#F3EEE4; --pen:#2A2622; margin:0; aspect-ratio:4/5; background:var(--pap); border-radius:6px; position:relative; overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.2), 0 18px 40px -22px rgba(0,0,0,.6);
  background-image:linear-gradient(rgba(42,38,34,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(42,38,34,.05) 1px,transparent 1px); background-size:20px 20px}
.sk{position:absolute; inset:8%; color:var(--pen); font-family:var(--mono)}
.sk::before{content:""; position:absolute; inset:-4%; border:1px dashed rgba(42,38,34,.35); border-radius:4px}
.sk-hl{position:absolute; left:0; right:0; font-family:var(--disp); font-weight:800; font-size:clamp(.9rem,3.6vw,1.25rem); line-height:1.05; letter-spacing:-.02em}
.sk-cta{position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; border:1.5px solid var(--pen); border-radius:30px; padding:7px 0}
.sk-n{position:absolute; right:-2%; font-style:normal; font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; color:#B2402F; transform:rotate(-4deg)}
.sk-n::before{content:"↙ "}
.sketch.clean .sk-n{display:none}
.loaf{position:relative; display:block; aspect-ratio:1.55; border:2px solid var(--pen); border-radius:50% 50% 46% 46%/58% 58% 42% 42%;
  background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(42,38,34,.14) 5px 6px)}
.loaf i{position:absolute; top:28%; width:22%; height:2px; background:var(--pen); border-radius:2px; transform:rotate(-28deg)}
.loaf i:nth-child(1){left:20%} .loaf i:nth-child(2){left:40%; top:36%} .loaf i:nth-child(3){left:60%; top:28%}
.sk0 .sk-hl{top:0}
.sk0 .loaf.big{position:absolute; left:12%; right:12%; top:34%}
.sk0 .sk-badge{position:absolute; right:2%; top:24%; width:58px; height:58px; border:1.5px solid var(--pen); border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:700; transform:rotate(8deg); background:var(--pap)}
.sk0 .n1{top:18%} .sk0 .n2{top:66%} .sk0 .n3{bottom:12%}
.sk1 .sk-grid{position:absolute; inset:2% 0 40% 0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,minmax(0,1fr)); gap:5% 8%}
.sk1 .cell{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:0}
.sk1 .cell .loaf{height:58%; width:auto; border-width:1.5px}
.sk1 .cell u{text-decoration:none; font-size:.48rem; border:1px solid var(--pen); padding:1px 5px; border-radius:3px; background:var(--pap); min-width:22px; min-height:9px; text-align:center}
.sk1 .cell.tu .loaf{border-style:dashed}
.sk1 .cell.tu u{background:var(--pen); color:var(--pap)}
.sk1 .sk-hl{bottom:15%}
.sk1 .n2{top:-3%} .sk1 .n3{bottom:12%}
.sk2 .sk-hl{top:0}
.sk2 .sk-ing{position:absolute; left:0; right:0; top:26%; display:grid; grid-template-columns:repeat(3,1fr); gap:6%}
.sk2 .sk-ing span{aspect-ratio:1; border:1.5px solid var(--pen); border-radius:50%; display:grid; place-items:center; font-size:.52rem; text-transform:uppercase; letter-spacing:.08em; background:repeating-radial-gradient(circle,transparent 0 4px,rgba(42,38,34,.1) 4px 5px)}
.sk2 .sk-big{position:absolute; left:0; right:0; top:52%; text-align:center; font-family:var(--disp); font-weight:800; font-size:clamp(2.6rem,11vw,4rem); letter-spacing:-.05em; -webkit-text-stroke:1.5px var(--pen); color:transparent}
.sk2 .n1{top:16%} .sk2 .n2{top:56%}
.checklist{display:grid; gap:8px}
.checklist div{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; color:var(--muted); transition:color .3s, border-color .3s}
.checklist i{width:18px; height:18px; border-radius:50%; border:1px solid var(--line2); flex:none; display:grid; place-items:center; font-style:normal; font-size:.7rem}
.checklist div.ok{color:var(--ink); border-color:color-mix(in oklab,var(--acc) 45%,transparent)}
.checklist div.ok i{background:var(--acc); border-color:var(--acc); color:var(--bg)}
.checklist div.ok i::before{content:"✓"}
.ad{background:#fff; color:#1c1e21; border-radius:10px; overflow:hidden; border:1px solid #dadde1; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ad-top{display:flex; gap:9px; align-items:center; padding:10px 12px}
.ad-top i{width:32px; height:32px; border-radius:50%; background:#2A2622; color:#F3EEE4; display:grid; place-items:center; font-style:normal; font-weight:700}
.ad-top b{display:block; font-size:.82rem} .ad-top span{font-size:.7rem; color:#65676b}
.ad-copy{font-size:.8rem; line-height:1.4; padding:0 12px 10px; margin:0}
.ad .sketch{border-radius:0; box-shadow:none}
.ad-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; background:#f0f2f5}
.ad-foot .mono{font-size:.6rem; color:#65676b; text-transform:uppercase} .ad-foot b{display:block; font-size:.8rem; line-height:1.25}
.ad-foot em{font-style:normal; font-size:.74rem; font-weight:600; background:#e4e6eb; border-radius:6px; padding:7px 10px; white-space:nowrap}
.manifesto .mono{font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--acc)}
.manifesto dl{margin:10px 0 16px; border-top:1px solid var(--line)}
.manifesto dl div{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.88rem}
.manifesto dt{font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding-top:.2em}
.manifesto dd{margin:0; color:var(--ink)}
.paused{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.7rem; border:1px solid var(--line2); border-radius:20px; padding:6px 12px; color:var(--ink2)}
.paused i{width:8px; height:8px; border-radius:2px; background:#F5C542; box-shadow:4px 0 0 -1px transparent}
@media (max-width:640px){
  .crea-steps{grid-template-columns:repeat(5,minmax(0,1fr))} .crea-steps button{flex-direction:column; align-items:flex-start; font-size:.56rem}
  .sketch-row, .ad-row{grid-template-columns:1fr}
  .sketch-row .sketch, .ad-row .ad{max-width:320px}
}
@media (prefers-reduced-motion:reduce){ .crea-panel{animation:none} .concept:hover{transform:none} }
/* anteprima in home */
.mini-crea .f{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.mini-crea .f span{display:grid; gap:4px; background:#F3EEE4; border-radius:3px; padding:6px; aspect-ratio:4/5; align-content:start; opacity:.35; animation:creaMini 6s ease infinite}
.mini-crea .f span:nth-child(1){animation-name:creaMiniSel}
.mini-crea .f i{height:5px; background:#2A2622; border-radius:2px; width:85%}
.mini-crea .f b{flex:1; min-height:22px; border:1.5px solid #2A2622; border-radius:50%/60%; margin-top:6px}
.mini-crea .f u{text-decoration:none; font-size:.5rem; color:#2A2622; text-align:center; margin-top:auto}
.mini-crea .st{color:var(--mc); animation:mbw 6s ease infinite 2.6s}
@keyframes mbw{0%,4%{clip-path:inset(0 100% 0 0)}10%,85%{clip-path:inset(0)}95%,100%{clip-path:inset(0 100% 0 0)}} /* a scomparsa col ritaglio, non con l'opacità: così il contrasto del testo resta misurabile (Lighthouse, 25/10/2026) */
@keyframes creaMini{0%,30%{opacity:.9} 45%,100%{opacity:.3}}
@keyframes creaMiniSel{0%,30%{opacity:.9} 45%,100%{opacity:1; box-shadow:0 0 0 2px var(--mc)}}

/* testo per chi legge senza vedere l'animazione (lettori di schermo, motori di ricerca, AI) */
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.agg{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--muted); margin-top:28px}
a.piu{color:var(--acc); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px}
.faq dt{font-family:var(--disp); font-weight:700; font-size:1.05rem; margin-top:26px}
.faq dd{margin:8px 0 0; color:var(--ink2); line-height:1.65}
.faq dd ul{margin:8px 0 0; padding-left:1.1em}


/* ---- il marketing (dal 25/10/2026, casi e temi dal 26/10): seconda striscia in home, pagine sotto /marketing/ ----
   i colori dei temi li scrive assembla.py da marketing.json, in fondo a sito.css */
/* anteprima della scheda di un caso: le barre prima → dopo, in HTML dal generatore (si vedono anche senza JavaScript) */
.mini-mkt{display:grid; grid-template-rows:auto 62px auto; align-content:center; gap:8px; height:100%; box-sizing:border-box; padding:11px 13px 10px; background:#0E1218; color:#EDEBE4}
.mini-mkt .lab{font-family:var(--mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:#8F93A2}
.mini-mkt .bars{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; align-items:end; height:62px}
.mini-mkt .bars i{display:block; height:calc(var(--h) * 62px); background:var(--mc); opacity:.42; border-radius:3px 3px 0 0; transform-origin:bottom; animation:mktCresce 1.1s cubic-bezier(.2,.8,.2,1) both}
.mini-mkt .bars i:last-child{opacity:1}
.mini-mkt .vals{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px}
.mini-mkt .vals b{font-family:var(--disp); font-weight:700; font-size:.66rem; letter-spacing:-.01em; color:#C9C7BF; font-variant-numeric:tabular-nums; white-space:nowrap}
.mini-mkt .vals b:last-child{color:var(--mc)}
.mini-mkt .vals u{display:block; text-decoration:none; font-family:var(--mono); font-weight:400; font-size:.5rem; letter-spacing:.04em; color:#8F93A2; margin-top:2px}
@keyframes mktCresce{from{transform:scaleY(0)}}
@media (prefers-reduced-motion: reduce){.mini-mkt .bars i{animation:none}}
/* anteprima della scheda di un tema: la frase da ricordare */
.mini-tema{display:flex; align-items:center; height:100%; box-sizing:border-box; padding:18px 20px; background:#0E1218; color:#EDEBE4; position:relative; overflow:hidden}
.mini-tema::before{content:"\201C"; position:absolute; right:12px; top:-.18em; font-family:var(--disp); font-weight:800; font-size:7.5rem; line-height:1; color:var(--mc); opacity:.2; pointer-events:none}
.mini-tema q{quotes:none; position:relative; font-family:var(--disp); font-weight:700; font-size:.98rem; line-height:1.28; letter-spacing:-.01em; border-left:3px solid var(--mc); padding-left:13px}
/* pagina del caso: il confronto prima → dopo, a barre */
.confronto{margin:48px 0 0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px 26px 20px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.confronto::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--acc)}
.confronto .cap{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.confronto .cap b{font-family:var(--disp); font-weight:700; font-size:.95rem}
.confronto .cap .mono{color:var(--muted)}
.confronto .bars{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:clamp(12px,4vw,36px); align-items:end; padding:0 clamp(0px,4vw,40px)}
.confronto .bar{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:10px; min-width:0; text-align:center}
.confronto .bar b{font-family:var(--disp); font-weight:800; font-size:clamp(1.05rem,2.6vw,1.5rem); letter-spacing:-.03em; color:var(--ink2); font-variant-numeric:tabular-nums; white-space:nowrap}
.confronto .bar i{display:block; width:100%; max-width:120px; height:calc(var(--h) * 150px); min-height:4px; background:color-mix(in oklab,var(--acc) 40%,transparent); border-radius:5px 5px 0 0; transform-origin:bottom; transform:scaleY(0); transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.confronto.on .bar i{transform:scaleY(1)}
.confronto .bar:last-child b{color:var(--acc)} .confronto .bar:last-child i{background:var(--acc)}
.confronto .bar span{font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; color:var(--muted); line-height:1.4}
.confronto .unita{margin-top:16px; padding-top:12px; border-top:1px dashed var(--line2); font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; color:var(--muted); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
@media (prefers-reduced-motion: reduce){.confronto .bar i{transform:none; transition:none}}
/* cosa ha funzionato, e cosa no */
.story .esiti{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 8px}
.story .esiti ul{list-style:none; margin:0; padding:18px 20px 20px; border:1px solid var(--line); border-radius:10px; background:var(--card); font-size:.96rem; line-height:1.45}
.story .esiti ul::before{display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px}
.story .esiti .si::before{content:"ha funzionato"; color:var(--acc)}
.story .esiti .no::before{content:"non ha funzionato"; color:var(--muted)}
.story .esiti li{position:relative; padding-left:18px}
.story .esiti li + li{margin-top:12px}
.story .esiti li::before{content:""; position:absolute; left:0; top:.52em; width:7px; height:7px; border-radius:50%; background:var(--acc)}
.story .esiti .no li::before{background:transparent; border:1px solid var(--muted); box-sizing:border-box}
@media (max-width:640px){.story .esiti{grid-template-columns:1fr}}
/* il numero che manca: dichiarato, non nascosto */
.manca{margin:34px 0 0; padding:16px 20px; border-left:3px solid var(--acc); background:color-mix(in oklab,var(--card) 70%,transparent); font-size:.98rem; line-height:1.5; color:var(--ink2); max-width:62ch}
.manca b{color:var(--ink); font-weight:600}
/* pagina del tema: gli episodi, uno sotto l'altro, e in fondo la frase da ricordare */
.story.episodi{display:grid; gap:44px}
.episodio .ep-h{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; font-family:var(--disp); font-weight:700; font-size:clamp(1.2rem,2.4vw,1.5rem); letter-spacing:-.02em; color:var(--ink); padding-top:18px; margin:0 0 16px; border-top:1px solid var(--line)}
.episodio .ep-h span{font-family:var(--mono); font-weight:400; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--acc)}
.episodio b{color:var(--ink); font-weight:600}
.episodio + .episodio p:first-of-type::first-letter{all:unset}   /* il capolettera solo sul primo episodio */
.massima{margin:64px 0 0; padding:26px 0 0; border-top:3px solid var(--acc); max-width:62ch}
.massima .mono{display:block; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-bottom:16px}
.massima p{margin:0; font-family:var(--disp); font-weight:800; font-size:clamp(1.6rem,4.2vw,2.6rem); line-height:1.1; letter-spacing:-.03em; color:var(--ink); text-wrap:balance; max-width:22ch}
.story .passi a.piu{color:var(--acc)}
/* titoli delle sezioni della home: sotto i 1000px la colonna del titolo si stringe e «marketing» andrebbe a capo a metà parola */
.sec-head h2{overflow-wrap:normal; hyphens:manual}
@media (max-width:1000px){.sec-head{grid-template-columns:1fr; gap:18px}}

/* ---------- rifinitura Emil Kowalski + Impeccable (prova del 27/10/2026, ramo prova-emil-impeccable) ----------
   Non cambia il disegno: solo come si muovono le cose e le parti del browser rimaste di serie. */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
/* «transition:.2s» anima ogni proprietà, anche quelle che non devono muoversi: qui solo quelle che cambiano davvero */
.rail a em{transition:opacity .3s var(--ease-out), transform .3s var(--ease-out)}
.langs button{transition:color .2s, border-color .2s}
.mic button{transition:border-color .2s, transform .16s var(--ease-out)}
.wave b{transition:background-color .3s}
.btn{transition:filter .2s, transform .16s var(--ease-out), opacity .2s}
.check{transition:opacity .4s, color .4s}
.gate{transition:border-color .25s, transform .2s var(--ease-out)}
.gate .lamp{transition:background-color .3s, box-shadow .3s}
.verdict{transition:border-color .3s}
.days i{transition:opacity .25s var(--ease-out), transform .25s var(--ease-out)}
.gruppi button,.lente-ctl button{transition:color .25s, background-color .25s, border-color .25s, transform .16s var(--ease-out)}
.strip-btn{transition:opacity .3s, transform .16s var(--ease-out)}
.concept{transition:border-color .2s, transform .2s var(--ease-out)}
/* le comparse partono veloci e si posano piano (curva forte al posto di «ease»), con 60 ms tra un elemento e l'altro invece di 100 */
.lede{transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.hero .meta{transition:opacity .8s var(--ease-out) .25s}
.rv{transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}.rv.d3{transition-delay:.18s}.rv.d4{transition-delay:.24s}
.top{transition:transform .4s var(--ease-out), opacity .4s var(--ease-out)}
/* l'onda del vocale muove la scala, non l'altezza: niente ricalcolo della pagina a ogni fotogramma */
.wave.on b{height:22px; animation-name:wvScala}
@keyframes wvScala{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
/* il pulsante risponde al tocco: si schiaccia appena */
.btn:active:not(:disabled),.gruppi button:active,.lente-ctl button:active,.strip-btn:active,.gate:active,.mic button:active:not(:disabled),.concept:active{transform:scale(.97)}
/* sul telefono il «passaggio del mouse» scatta al tocco e resta lì: i sollevamenti solo con un mouse vero */
@media (hover:none){
  .card:hover:not(.on),.principio:hover,.entry:hover h3,.mic button:hover,.btn:hover,.gate:hover,.concept:hover{transform:none}
  .card:hover .card-go i{transform:none}
}
/* chi chiede meno movimento: le cose compaiono in dissolvenza, senza spostarsi */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv,.lede{transform:none; transition:opacity .3s}
  .hero .meta{transition:opacity .3s}
  .scrollhint::after{animation:none}
  .entry::before,.entry h3,.entry .sw,.days i{transition:none}
  .days i{transform:none}
}
/* le parti del browser che di solito restano di serie: barra di scorrimento, cursore di testo, sottolineature */
html{scrollbar-color:var(--line2) var(--bg)}
input,textarea{caret-color:var(--acc)}
a{text-underline-offset:.18em; text-decoration-thickness:from-font}

/* ---------- anteprima del secondo cervello (28/10/2026): un pezzo di grafo colorato e la plancia che spunta.
   Un solo ciclo di 7 s: al 45% la prima voce si spunta e la sua stella gialla batte ---------- */
.mini-brain{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:12px; align-items:center}
.mini-brain .lab{grid-column:1/-1}
.mini-brain svg{width:100%; height:86px; overflow:visible; align-self:center}
.mini-brain svg line{stroke:rgba(237,235,228,.16); stroke-width:1}
.mini-brain svg circle{transform-box:fill-box; transform-origin:center; animation:respiro 6s ease-in-out infinite}
.mini-brain svg circle:nth-child(odd){animation-delay:-3s}
.mini-brain svg circle.p{animation:battito 7s ease infinite}
.mini-brain .plan{display:grid; gap:5px; align-content:center; font-size:.58rem; line-height:1.3; color:#C9C7BF}
.mini-brain .plan span{display:grid; grid-template-columns:11px 1fr; gap:6px; align-items:start}
.mini-brain .plan i{width:10px; height:10px; border:1px solid #4B5060; border-radius:3px; margin-top:1px; position:relative}
.mini-brain .plan u{text-decoration:none}
.mini-brain .plan span.ok u{animation:sbarra 7s steps(1) infinite}
.mini-brain .plan span.ok i::after{content:""; position:absolute; left:2px; top:0; width:3px; height:6px; border:solid #F7D262; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); opacity:0; animation:spunta 7s steps(1) infinite}
@keyframes respiro{0%,100%{transform:translate(0,0)}50%{transform:translate(1.5px,-1.5px)}}
@keyframes battito{0%,44%{transform:scale(1); opacity:1}47%{transform:scale(1.9); opacity:.55}54%,100%{transform:scale(1); opacity:1}}
@keyframes spunta{0%,44%{opacity:0}45%,100%{opacity:1}}
@keyframes sbarra{0%,44%{text-decoration:none; color:#C9C7BF}45%,100%{text-decoration:line-through #F7D262; color:#8F93A2}}
@media (prefers-reduced-motion: reduce){.mini-brain svg circle,.mini-brain .plan span.ok u,.mini-brain .plan span.ok i::after{animation:none} .mini-brain .plan span.ok i::after{opacity:1} .mini-brain .plan span.ok u{text-decoration:line-through #F7D262; color:#8F93A2}}

/* ---- colori dei temi di marketing, generati da marketing.json ---- */
:root{--c-moda:#B0306A} :root[data-theme="dark"]{--c-moda:#F28AB8} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-moda:#F28AB8}}
.chapter[data-acc="moda"]{--acc:var(--c-moda)} .card[data-acc="moda"],.lavoro-nav a[data-acc="moda"]{--e:var(--c-moda)}
:root{--c-form:#0E7FB5} :root[data-theme="dark"]{--c-form:#5BC8F2} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-form:#5BC8F2}}
.chapter[data-acc="form"]{--acc:var(--c-form)} .card[data-acc="form"],.lavoro-nav a[data-acc="form"]{--e:var(--c-form)}
:root{--c-deta:#9A7A0A} :root[data-theme="dark"]{--c-deta:#F2C94C} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-deta:#F2C94C}}
.chapter[data-acc="deta"]{--acc:var(--c-deta)} .card[data-acc="deta"],.lavoro-nav a[data-acc="deta"]{--e:var(--c-deta)}
:root{--c-zero:#6A4FC0} :root[data-theme="dark"]{--c-zero:#B9A2FF} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-zero:#B9A2FF}}
.chapter[data-acc="zero"]{--acc:var(--c-zero)} .card[data-acc="zero"],.lavoro-nav a[data-acc="zero"]{--e:var(--c-zero)}
:root{--c-paga:#2F8A4E} :root[data-theme="dark"]{--c-paga:#6FD49A} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-paga:#6FD49A}}
.chapter[data-acc="paga"]{--acc:var(--c-paga)} .card[data-acc="paga"],.lavoro-nav a[data-acc="paga"]{--e:var(--c-paga)}