@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root{
  --notte:#08110E; --campo:#0D1F19; --pannello:#102A21; --pannello2:#143327;
  --bordo:#1D4536; --bordo2:#17392C; --gesso:#EEF3EE; --fumo:#93AAA0;
  --giallo:#F0C63C; --rosso:#E23A50; --ambra:#FFAE1A; --azzurro:#59BEEB; --verde:#58D69B;
  --max:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--gesso); line-height:1.6;
  background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.08),transparent 60%),var(--notte);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ambra);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ambra);outline-offset:2px;border-radius:4px}
img,svg{max-width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
header.site{position:sticky;top:0;z-index:50;background:rgba(8,17,14,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--bordo2)}
.bar{display:flex;align-items:center;gap:16px;padding:12px 0;flex-wrap:wrap}
.brand{font-family:'Anton',sans-serif;font-size:21px;letter-spacing:.1em;text-transform:uppercase;color:var(--gesso)}
.brand:hover{text-decoration:none}
.brand b{color:var(--ambra);font-weight:400}
nav.main{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.main a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fumo);padding:7px 12px;border-radius:999px;border:1px solid transparent}
nav.main a:hover{color:var(--gesso);text-decoration:none}
nav.main a[aria-current="page"]{background:var(--gesso);color:var(--notte);font-weight:700}

.hero{padding:52px 0 34px}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--fumo)}
h1{font-family:'Anton',sans-serif;font-size:clamp(32px,7vw,60px);line-height:.94;text-transform:uppercase;margin:8px 0 0;letter-spacing:.01em}
h2{font-family:'Anton',sans-serif;font-size:clamp(21px,3.4vw,28px);line-height:1.1;text-transform:uppercase;letter-spacing:.04em;margin:34px 0 12px}
h3{font-size:17px;margin:26px 0 8px;font-weight:700}
.lead{font-size:18px;color:#CFDCD5;max-width:62ch;margin-top:16px}
p{max-width:70ch}

.card{background:var(--pannello);border:1px solid var(--bordo2);border-radius:4px;padding:20px}
.grid{display:grid;gap:14px}
@media(min-width:720px){.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}}

a.porta{display:block;background:linear-gradient(160deg,var(--pannello2),var(--pannello));
  border:1px solid var(--bordo2);border-radius:4px;padding:22px;color:var(--gesso);transition:.18s}
a.porta:hover{transform:translateY(-2px);border-color:var(--ambra);text-decoration:none}
a.porta .num{font-family:'Anton',sans-serif;font-size:38px;color:var(--ambra);line-height:.85}
a.porta h3{margin:12px 0 6px;font-size:18px}
a.porta p{font-size:14px;color:#BACCC3;margin:0}

.lista{list-style:none;padding:0;margin:0}
.lista li{border-top:1px solid var(--bordo2)}
.lista li:first-child{border-top:0}
.lista a{display:block;padding:15px 0;color:var(--gesso)}
.lista a:hover{text-decoration:none;color:var(--ambra)}
.lista .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;color:var(--fumo);text-transform:uppercase}
.lista .t{font-weight:700;font-size:16px;margin:3px 0 4px}
.lista .d{font-size:14px;color:#B6C8BF;max-width:68ch}

article.guida{max-width:74ch}
article.guida p{margin:14px 0}
article.guida ul,article.guida ol{max-width:70ch;padding-left:22px}
article.guida li{margin:7px 0}
blockquote{border-left:2px solid var(--ambra);margin:20px 0;padding:2px 0 2px 14px;color:#D8E4DD}
.nota{border-left:2px solid var(--azzurro);padding:2px 0 2px 14px;font-size:14.5px;color:#C6D6CE;margin:20px 0}
.meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.11em;color:var(--fumo);text-transform:uppercase}

.pub{margin:30px 0;padding:10px;border:1px dashed var(--bordo);border-radius:4px;text-align:center;min-height:110px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.pub .lab{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;color:#4E6A5E;text-transform:uppercase}

.btn{display:inline-block;background:var(--gesso);color:var(--notte);border:0;border-radius:3px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 17px;transition:.15s}
.btn:hover{background:var(--ambra);text-decoration:none;color:var(--notte)}
.btn.ghost{background:transparent;color:var(--fumo);border:1px solid var(--bordo)}
.btn.ghost:hover{color:var(--gesso);border-color:var(--gesso);background:transparent}

footer.site{margin-top:60px;border-top:1px solid var(--bordo2);padding:28px 0 60px;font-size:13.5px;color:var(--fumo)}
footer.site a{color:var(--fumo)}
footer.site .fgrid{display:grid;gap:18px}
@media(min-width:720px){footer.site .fgrid{grid-template-columns:2fr 1fr 1fr}}

.pitch{width:100%;max-height:56vh;display:block;background:linear-gradient(170deg,#123B2C,#0C2419);border-radius:3px}
.ctrl{display:flex;align-items:center;gap:10px;padding:12px 0;flex-wrap:wrap}
input[type=range]{flex:1 1 140px;accent-color:var(--ambra);min-width:120px}
.step{border-top:1px solid var(--bordo2);padding-top:12px;min-height:70px}
.step .n{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--ambra)}
.opt{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:3px;cursor:pointer;margin-top:8px;
  background:var(--pannello2);border:1px solid var(--bordo2);color:var(--gesso);font:inherit;font-size:14.5px}
.opt:hover:not(:disabled){border-color:var(--fumo)}
.opt[data-s=ok]{border-color:var(--verde);background:rgba(88,214,155,.11)}
.opt[data-s=no]{border-color:var(--rosso);background:rgba(226,58,80,.1)}
.opt b{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fumo);margin-right:9px}
.tabs{display:flex;gap:5px;flex-wrap:wrap;margin:16px 0}
.tabs button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  background:transparent;border:1px solid var(--bordo);color:var(--fumo);padding:8px 13px;border-radius:999px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--gesso);color:var(--notte);font-weight:700;border-color:var(--gesso)}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}