:root{
  --void:#02040b;--glass:rgba(7,15,32,.62);--solid:#08111f;--line:rgba(130,205,255,.16);--line2:rgba(130,205,255,.36);
  --ice:#7fe3ff;--amber:#ffb454;--text:#dbeaf7;--muted:#7f97ad;
  --brand:'Michroma','Eurostile',system-ui,sans-serif;--display:'Geologica',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Martian Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
html,body{height:100%;margin:0}
body{background:var(--void);color:var(--text);font-family:var(--display);font-variation-settings:'SHRP' 60;overflow:hidden;-webkit-font-smoothing:antialiased}
#app{position:absolute;inset:0;overflow:hidden}
canvas#gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
canvas#gl.drag{cursor:grabbing}canvas#gl.pick{cursor:pointer}
.mono{font-family:var(--mono);font-stretch:87.5%}

.brand{position:absolute;top:20px;left:24px;display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;z-index:3}
.brand .mark{width:30px;height:30px;border:1.5px solid var(--ice);border-radius:50%;position:relative;flex:none}
.brand .mark::after{content:"";position:absolute;inset:6px;border:1.5px solid var(--amber);border-radius:50%;box-shadow:0 0 12px var(--amber)}
.brand b{display:block;font-family:var(--brand);font-weight:400;font-size:18px;letter-spacing:.3em;text-transform:uppercase}
.brand small{display:block;font-family:var(--mono);font-stretch:87.5%;font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:4px}
.back{position:absolute;top:24px;right:24px;font-family:var(--mono);font-stretch:87.5%;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);text-decoration:none;border:1px solid var(--line2);padding:8px 12px;background:var(--glass);z-index:3}
.back:hover{background:rgba(127,227,255,.1)}

.panel{position:absolute;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);padding:16px;z-index:2}
.panel h2{margin:0 0 10px;font-family:var(--brand);font-weight:400;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ice)}
.panel .h2b{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.info{top:84px;left:24px;width:318px;max-height:calc(100% - 180px);overflow:auto}
.info::-webkit-scrollbar{width:0}
.info .kind{font-family:var(--mono);font-stretch:87.5%;font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.info h1{margin:4px 0 12px;font-family:var(--brand);font-weight:400;font-size:26px;letter-spacing:.08em;color:var(--c,var(--text));text-shadow:0 0 22px color-mix(in srgb,var(--c,#fff) 40%,transparent)}
.info dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 12px}
.info dl div{background:var(--solid);padding:8px 10px;min-width:0}
.info dt{font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.info dd{margin:3px 0 0;font-family:var(--mono);font-stretch:87.5%;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info dd small{font-size:10px;color:var(--muted);margin-left:3px}
.info .live{grid-column:1/-1}
.info .live dd{font-size:15px}
.info p{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:#b8c7d6}
.info .fact{border-left:2px solid var(--c,var(--amber));padding-left:10px}
.info .go{display:inline-block;margin-top:4px;font-family:var(--mono);font-stretch:87.5%;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);border:1px solid var(--line2);padding:7px 10px;text-decoration:none}
.info .src{font-size:10px;color:var(--muted);font-family:var(--mono);font-stretch:87.5%;letter-spacing:.06em}

.side{top:84px;right:24px;width:236px;max-height:calc(100% - 180px);overflow:auto}
.side::-webkit-scrollbar{width:0}
.body{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;background:none;border:1px solid transparent;border-bottom-color:var(--line);color:inherit;font:inherit;text-align:left;padding:7px 6px;cursor:pointer}
.body:hover{background:rgba(127,227,255,.06)}
.body.on{border-color:var(--line2);background:rgba(127,227,255,.1)}
.body i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.body b{font-weight:500;font-size:14px}
.body small{font-family:var(--mono);font-stretch:87.5%;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.body kbd{font-family:var(--mono);font-size:9px;color:var(--muted);border:1px solid var(--line);padding:0 4px}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{text-align:left;background:none;border:1px solid var(--line);color:var(--muted);padding:8px 10px;cursor:pointer;font:inherit}
.opt b{display:block;font-size:13px;font-weight:500;color:var(--text)}
.opt small{font-family:var(--mono);font-stretch:87.5%;font-size:9.5px;letter-spacing:.06em}
.opt[aria-pressed="true"]{border-color:var(--ice);background:rgba(127,227,255,.1)}
.opt[aria-pressed="true"] b::before{content:"● ";color:var(--ice)}
.opt[aria-pressed="false"] b::before{content:"○ ";color:var(--muted)}
.opt#oScale[aria-pressed="true"]{border-color:var(--amber);background:rgba(255,180,84,.1)}
.opt#oScale[aria-pressed="true"] b::before{color:var(--amber)}

.timebar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:max-content;display:flex;align-items:center;gap:12px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line2);padding:8px 10px;z-index:3;max-width:calc(100% - 32px);flex-wrap:wrap;justify-content:center}
.date{min-width:190px;text-align:center}
.date .tzb{display:block;font-family:var(--mono);font-stretch:87.5%;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.date .tzb abbr{text-decoration:none;font-size:.75em;color:var(--muted)}
.date .tzs{display:block;font-family:var(--mono);font-stretch:87.5%;font-size:9.5px;letter-spacing:.06em;color:var(--muted)}
.tplay{width:38px;height:38px;border-radius:50%;border:1px solid var(--amber);background:rgba(255,180,84,.12);color:var(--amber);display:grid;place-items:center;cursor:pointer}
.tplay svg{width:14px;height:14px;fill:currentColor}
.speeds{display:flex}
.speeds button,.tnow{font-family:var(--mono);font-stretch:87.5%;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:none;border:1px solid var(--line2);border-right-width:0;color:var(--muted);padding:8px 10px;cursor:pointer;white-space:nowrap}
.speeds button:last-child{border-right-width:1px}
.speeds button.on{background:var(--ice);color:#04101d;border-color:var(--ice);font-weight:700}
.tnow{border-right-width:1px;color:var(--ice)}
button:focus-visible,a:focus-visible{outline:1px solid var(--ice);outline-offset:2px}

.note{position:absolute;left:24px;bottom:26px;font-family:var(--mono);font-stretch:87.5%;font-size:9.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;max-width:260px;line-height:1.6;z-index:2}
.tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ptag{position:absolute;left:0;top:0;font-family:var(--mono);font-stretch:87.5%;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c);white-space:nowrap;will-change:transform;text-shadow:0 0 8px var(--void),0 0 3px var(--void);transform:translate(-9999px,0);pointer-events:auto;cursor:pointer;padding:2px 4px}
.ptag small{display:block;font-size:9px;color:var(--muted);letter-spacing:.1em}
.ptag.sel{font-weight:700}
.toast{position:absolute;left:50%;top:22px;transform:translate(-50%,-8px);background:rgba(255,180,84,.14);border:1px solid rgba(255,180,84,.6);color:#ffd9a3;font-family:var(--mono);font-stretch:87.5%;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:5;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.boot{position:absolute;inset:0;background:var(--void);display:flex;align-items:center;justify-content:center;z-index:10;transition:opacity .9s}
.boot.gone{opacity:0;pointer-events:none}
.boot div{display:flex;flex-direction:column;align-items:center;gap:14px}
.boot i{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--amber);box-shadow:0 0 20px rgba(255,180,84,.5);animation:pulse 1.6s ease-in-out infinite}
.boot b{font-family:var(--brand);font-weight:400;letter-spacing:.36em;text-transform:uppercase;font-size:16px}
.boot span{font-family:var(--mono);font-stretch:87.5%;font-size:10px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
@keyframes pulse{50%{transform:scale(.85);opacity:.6}}
@media (prefers-reduced-motion:reduce){.boot i{animation:none}}

@media (max-width:900px){
  .side{top:auto;bottom:128px;right:12px;left:12px;width:auto;max-height:none;padding:10px}
  .side h2,.side .h2b,.opts{display:none}
  #bodies{display:flex;gap:4px;overflow-x:auto}
  .body{grid-template-columns:auto auto;border:1px solid var(--line);white-space:nowrap}
  .body small,.body kbd{display:none}
  .info{top:74px;left:12px;right:12px;width:auto;max-height:34%;padding:12px}
  .info h1{font-size:20px;margin-bottom:8px}
  .note,.back{display:none}
  .brand{left:16px;top:16px}
  .timebar{left:12px;right:12px;bottom:12px;transform:none;width:auto;max-width:none;gap:6px 8px;padding:6px 8px;justify-content:flex-start}
  .date{flex:1;min-width:0;text-align:left}
  .date .tzb{font-size:13px}
  .tplay{width:34px;height:34px}
  .speeds{order:3;flex-basis:100%;min-width:0;overflow-x:auto}
  .timebar>*{min-width:0}
  .speeds button{padding:7px 8px;font-size:9.5px}
  .tnow{order:2}
  .side{bottom:104px}
  .info{max-height:30%}
  .info dd{white-space:normal}
}
.h2s{font-family:var(--mono);font-stretch:87.5%;font-size:9px;letter-spacing:.1em;color:var(--muted);margin-left:6px}
#probeList .body b{font-size:13px}
.ptag.probe{font-size:10px;letter-spacing:.14em}
@media (max-width:900px){#probeList{display:none}}
#neoList .body b{font-size:13px}
@media (max-width:900px){#neoList{display:none}}

/* ---------- telefono: scheda informazioni compatta, elenco completo in un foglio ---------- */
.mexp{display:none}
@supports (height:100dvh){html,body{height:100dvh}}
@media (max-width:900px){
  .brand{top:calc(14px + env(safe-area-inset-top,0px))}
  .mexp{display:block;position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:12px;z-index:4;appearance:none;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line2);color:var(--ice);
    font-family:var(--mono);font-stretch:87.5%;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:9px 11px;cursor:pointer}
  .mexp[aria-expanded="true"]{background:var(--ice);color:#04101d;border-color:var(--ice)}
  .info{top:calc(66px + env(safe-area-inset-top,0px));max-height:calc(100% - 300px);cursor:pointer;padding:10px 40px 10px 12px}
  .info::after{content:"";position:absolute;right:14px;top:22px;width:8px;height:8px;border-right:1.5px solid var(--ice);border-bottom:1.5px solid var(--ice);transform:rotate(45deg);transition:transform .2s}
  body:not(.iopen) .info>*:not(.kind):not(h1){display:none}
  body:not(.iopen) .info h1{margin:2px 0 0;font-size:18px}
  body.iopen .info{padding-right:12px}
  body.iopen .info::after{transform:rotate(225deg);top:26px}
  .timebar{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .side{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  body.sopen .info{display:none}
  body.sopen .side{top:calc(66px + env(safe-area-inset-top,0px));overflow:auto;overscroll-behavior:contain;padding:6px 12px 12px;background:rgba(5,10,22,.94);animation:sheetUp .25s ease}
  @keyframes sheetUp{from{transform:translateY(40px);opacity:0}}
  body.sopen .side h2,body.sopen .side .h2b{display:flex}
  body.sopen .opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  body.sopen #bodies{display:block}
  body.sopen #probeList,body.sopen #neoList{display:block}
  body.sopen .body{grid-template-columns:auto 1fr auto;border:1px solid transparent;border-bottom-color:var(--line);padding:11px 6px;white-space:normal}
  body.sopen .body small{display:block}
}