/* TaniFon Sapere Informatico v1.1 */
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500 700;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-800-normal.woff2) format("woff2")}
body.tfs-page{overflow-x:hidden}
/* protezione dagli stili del tema */
.si,.si *{font-family:var(--mono);letter-spacing:normal;text-transform:none}
.si button{box-shadow:none;min-height:0;line-height:1.3;text-shadow:none}
.si h2,.si h3,.si h4,.si p,.si ul,.si pre{font-family:var(--mono)}
.si a{text-decoration:none}
.si-static{list-style:none;margin:0;padding:0 8px}.si-static a{display:block;padding:5px 0;color:#9fb5d3;font-size:12.5px}

:root{
  --bg:#03060d; --panel:#060c18; --line:rgba(0,140,255,.18);
  --blue:#008cff; --cyan:#00e5ff; --txt:#cfe3ff; --dim:#6f86a6; --ok:#3dff9a; --warn:#ff4d6d;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.si *{box-sizing:border-box}
/* l'app occupa esattamente lo schermo sotto gli eventuali menu fissi del tema (--tfs-top calcolato dallo script) */
.si{--ac:#00e5ff;--pw:480px;position:relative;height:calc(100vh - var(--tfs-top,0px));height:calc(100dvh - var(--tfs-top,0px));min-height:560px;
  width:100vw;margin-left:calc(50% - 50vw);color:var(--txt);font-family:var(--mono);line-height:1.4;text-align:left;
  display:grid;grid-template-columns:300px 1fr;grid-template-rows:64px 1fr;overflow:hidden;
  background:radial-gradient(1100px 700px at 58% 50%,#08203d 0%,#040a16 45%,var(--bg) 75%)}
.si:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(circle at 58% 50%,#000 0%,transparent 72%);-webkit-mask-image:radial-gradient(circle at 58% 50%,#000 0%,transparent 72%)}

/* ── barra superiore ── */
.si-top{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:0 18px;border-bottom:1px solid var(--line);
  background:rgba(3,6,13,.8);backdrop-filter:blur(8px);z-index:9}
.si-logo{font-weight:800;font-size:17px;letter-spacing:.04em;white-space:nowrap;color:#fff}
.si-logo b{color:var(--cyan);text-shadow:0 0 12px rgba(0,229,255,.7)}
.si-logo i{display:inline-block;width:9px;height:17px;background:var(--cyan);vertical-align:-3px;margin-left:4px;animation:blink 1s steps(1) infinite}
.si-search{position:relative;flex:1;max-width:620px;margin:0 auto}
.si-search input{width:100%;height:40px;border-radius:10px;border:1px solid rgba(0,229,255,.35);background:#050b16;color:#fff;
  font:500 14px var(--mono);padding:0 44px 0 40px;outline:none;transition:border-color .2s,box-shadow .2s}
.si .si-search input[type=search]{padding-left:40px!important;padding-right:44px!important;text-indent:0!important;box-sizing:border-box}
.si-search input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.15),0 0 24px rgba(0,229,255,.25)}
.si-search:before{content:"$";position:absolute;left:14px;top:20px;transform:translateY(-50%);z-index:1;pointer-events:none;color:var(--ok);font:700 14px/1 var(--mono)}
.si-search kbd{position:absolute;right:10px;top:9px;font:600 11px var(--mono);color:var(--dim);border:1px solid #1d2c46;border-radius:5px;padding:2px 6px}
.si-results{position:absolute;top:46px;left:0;right:0;background:rgba(6,12,24,.98);border:1px solid rgba(0,229,255,.3);border-radius:12px;
  max-height:60vh;overflow:auto;display:none;box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 30px rgba(0,140,255,.15)}
.si-results.on{display:block;animation:pop .18s ease-out}
.si-res{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;cursor:pointer;border-bottom:1px solid #0d1a30}
.si-res:last-child{border-bottom:0}
.si-res.sel,.si-res:hover{background:#0b1a33}
.si-res .d{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none;box-shadow:0 0 10px currentColor}
.si-res b{display:block;font-size:13.5px;color:#fff}
.si-res span{display:block;font-size:12px;color:var(--dim);margin-top:3px;line-height:1.45}
.si-res mark{background:none;color:var(--cyan)}
.si-stats{font-size:12px;color:var(--dim);white-space:nowrap}
.si-stats b{color:var(--cyan)}
.si-btn{font:600 12px var(--mono);color:var(--cyan);background:rgba(3,8,18,.6);border:1px solid rgba(0,229,255,.4);border-radius:8px;
  padding:9px 12px;cursor:pointer;white-space:nowrap;transition:background .2s,box-shadow .2s}
.si-btn:hover{background:rgba(0,229,255,.1);box-shadow:0 0 18px rgba(0,229,255,.3)}

/* ── colonna sinistra stile docs ── */
.si-side{border-right:1px solid var(--line);overflow:auto;overscroll-behavior:contain;padding:14px 10px 30px;background:rgba(4,8,17,.75);z-index:4;scrollbar-width:thin;scrollbar-color:#14304f transparent}
.si-side h4{font-size:11px;color:var(--dim);font-weight:600;margin:4px 8px 10px;letter-spacing:.08em}
.si-area{margin-bottom:2px}
.si-area>button{all:unset;display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;padding:8px 9px;border-radius:8px;cursor:pointer;
  font-size:13px;font-weight:600;color:#dbe9ff;transition:background .15s}
.si-area>button:hover,.si-area.open>button{background:#0b1830}
.si-area>button .d{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.si-area>button .n{margin-left:auto;font-size:11px;color:var(--dim)}
.si-area>button .c{transition:transform .2s;color:var(--dim);font-size:10px}
.si-area.open>button .c{transform:rotate(90deg)}
.si-area ul{list-style:none;margin:2px 0 8px 17px;padding:0 0 0 10px;border-left:1px solid #12233f;display:none}
.si-area.open ul{display:block;animation:pop .2s ease-out}
.si-area li a{display:block;padding:6px 8px;font-size:12.5px;color:#9fb5d3;text-decoration:none;border-radius:6px;cursor:pointer}
.si-area li a:hover{color:#fff;background:#0b1830}
.si-area li a.on{color:var(--cyan);background:#0a2140;box-shadow:inset 2px 0 0 var(--cyan)}
.si-area li a small{color:var(--dim);margin-left:6px}

/* ── cervello ── */
.si-stage{position:relative;min-width:0;overflow:hidden}
.si-stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.si-stage canvas:active{cursor:grabbing}
.si-labels{position:absolute;inset:0;pointer-events:none}
.si-lab{position:absolute;transform:translate(-50%,-50%);font-size:11px;font-weight:700;letter-spacing:.06em;white-space:nowrap;
  padding:4px 9px;border-radius:999px;background:rgba(3,8,18,.78);border:1px solid currentColor;pointer-events:auto;cursor:pointer;
  transition:opacity .3s,transform .2s;text-shadow:0 0 8px currentColor;backdrop-filter:blur(3px)}
.si-lab:hover{transform:translate(-50%,-50%) scale(1.08)}
.si-lab.hide{opacity:0;pointer-events:none}
.si-tip{position:absolute;pointer-events:none;font-size:12px;font-weight:700;color:#fff;padding:7px 11px;border-radius:8px;z-index:5;
  background:rgba(3,8,18,.92);border:1px solid var(--tc,var(--cyan));box-shadow:0 0 18px rgba(0,229,255,.3);transform:translate(16px,-50%);opacity:0;transition:opacity .15s}
.si-tip small{display:block;font-weight:500;color:var(--dim);font-size:11px;margin-top:2px}
.si-hint{position:absolute;left:18px;bottom:16px;font-size:11.5px;color:var(--dim);line-height:1.7;pointer-events:none}
.si-hint b{color:var(--txt)}
.si.reading .si-hint{opacity:0}
.si-hint{transition:opacity .3s}
.si-zoom{position:absolute;right:18px;bottom:16px;display:flex;gap:6px;z-index:3;transition:right .45s cubic-bezier(.2,.9,.2,1)}
.si-zoom .si-btn{min-width:38px;text-align:center;font-size:13px}
#zIn,#zOut{font-size:17px;line-height:1;padding:7px 12px}
.si.reading .si-zoom{right:calc(var(--pw) + 18px)}

/* ── scheda a destra ── */
.si-panel{position:absolute;top:64px;right:0;bottom:0;width:min(480px,46%);z-index:8;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#07101f 0%,#040913 100%);
  border-left:1px solid color-mix(in srgb,var(--ac) 50%,transparent);
  box-shadow:-30px 0 80px rgba(0,0,0,.55),-1px 0 34px color-mix(in srgb,var(--ac) 22%,transparent);
  transform:translateX(104%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.9,.2,1),visibility 0s linear .45s}
.si.reading .si-panel{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.9,.2,1),visibility 0s}
.si-pbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(3,8,18,.6)}
.si-ppath{flex:1;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-ppath b{color:var(--ac);font-weight:600}
.si-pbtn{all:unset;cursor:pointer;font-size:11.5px;font-weight:600;color:#cfe3ff;padding:6px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.1);transition:all .2s}
.si-pbtn:hover{border-color:var(--ac);color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--ac) 35%,transparent)}
.si-pbtn[disabled]{opacity:.3;pointer-events:none}
.si-prog{height:2px;background:rgba(255,255,255,.04)}
.si-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),#00e5ff);transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px var(--ac)}
.si-pscroll{flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#1a3150 transparent}

.si-hero{position:relative;padding:28px 28px 22px;border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden;
  background:radial-gradient(520px 220px at 0% 0%,color-mix(in srgb,var(--ac) 30%,transparent),transparent 70%),
             radial-gradient(300px 160px at 100% 100%,rgba(0,140,255,.12),transparent 70%)}
.si-hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:22px 22px;
  mask-image:linear-gradient(120deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(120deg,#000,transparent 70%)}
.si-kicker{position:relative;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase!important;color:var(--ac)}
.si-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac);animation:pulse 2s ease-in-out infinite}
.si-kicker .sep{color:var(--dim)}
.si-kicker em{font-style:normal;color:var(--dim)}
.si .si-title{position:relative;font-size:30px;line-height:1.12;font-weight:800;color:#fff;margin:12px 0 16px;padding:0 0 14px;border:0;
  text-shadow:0 0 26px color-mix(in srgb,var(--ac) 45%,transparent);word-break:break-word}
.si-title:after{content:"";position:absolute;left:0;bottom:0;width:72px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--ac),#00e5ff);box-shadow:0 0 12px var(--ac)}
.si-chips{position:relative;display:flex;flex-wrap:wrap;gap:7px}
.si-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;color:#d6e6ff;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.si-chip .bars{display:inline-flex;gap:2px;align-items:flex-end}
.si-chip .bars b{width:4px;border-radius:1px;background:rgba(255,255,255,.18)}
.si-chip .bars b:nth-child(1){height:6px}.si-chip .bars b:nth-child(2){height:9px}.si-chip .bars b:nth-child(3){height:12px}
.si-chip.lv1{color:#3dff9a}.si-chip.lv2{color:#ffb020}.si-chip.lv3{color:#ff6bd6}
.si-chip.lv1 .bars b:nth-child(-n+1),.si-chip.lv2 .bars b:nth-child(-n+2),.si-chip.lv3 .bars b{background:currentColor;box-shadow:0 0 6px currentColor}

.si-content{padding:22px 28px 34px}
.si .si-lead{font-size:15px;line-height:1.65;color:#eaf5ff;margin:0 0 22px;padding:14px 16px;border-left:3px solid var(--ac);border-radius:0 10px 10px 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 12%,transparent),transparent)}
.si-text{font-size:14px;line-height:1.85;color:#bdd0ea}
.si .si-text p{margin:0 0 14px}
.si-text strong{color:#fff;font-weight:800;background:linear-gradient(transparent 64%,color-mix(in srgb,var(--ac) 38%,transparent) 0);padding:0 2px}
.si-text u{text-decoration:none;color:#fff;background:linear-gradient(90deg,var(--ac),#00e5ff) 0 100%/100% 2px no-repeat;padding-bottom:2px}
.si-text mark{background:rgba(255,77,109,.14);color:#ffd2da;padding:1px 4px;border-radius:4px;box-shadow:inset 0 -2px 0 rgba(255,77,109,.6)}
.si-text code{font:600 12.5px var(--mono);color:var(--ok);background:#071a14;border:1px solid #0f3a28;padding:1px 6px;border-radius:5px}
.si-text pre,.si-ascii{font:500 12px/1.5 var(--mono);background:#020610;border:1px solid #12284a;border-radius:10px;padding:12px 14px;overflow:auto;margin:0 0 16px}
.si-text pre code{background:none;border:0;padding:0;color:#9fe8c4}
.si-text ul{margin:0 0 14px;padding-left:18px}
.si-text li{margin:4px 0}
.si-text li::marker{color:var(--ac)}
.si .si-h3{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase!important;color:var(--ac);margin:28px 0 12px;padding:0;border:0}
.si-h3:before{content:"▸";font-size:13px;text-shadow:0 0 10px var(--ac)}
.si-h3:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 60%,transparent),transparent)}
.si-h3 strong{background:none;color:inherit;padding:0}
.si-ascii{color:var(--cyan);text-shadow:0 0 8px rgba(0,229,255,.45);background-image:repeating-linear-gradient(0deg,rgba(0,229,255,.05) 0 1px,transparent 1px 3px)}
.si-block{margin-top:26px}
.si-sec{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--dim);letter-spacing:.14em;margin:0 0 10px}
.si-sec span{color:var(--ac)}
.si-tags{display:flex;flex-wrap:wrap;gap:7px}
.si-tags button{all:unset;cursor:pointer;font-size:12px;color:color-mix(in srgb,var(--ac) 75%,#fff);padding:5px 10px;border-radius:7px;
  border:1px dashed color-mix(in srgb,var(--ac) 45%,transparent);transition:all .2s}
.si-tags button:hover{background:color-mix(in srgb,var(--ac) 14%,transparent);border-style:solid;color:#fff}
.si-relgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.si-relgrid button{all:unset;cursor:pointer;position:relative;display:block;padding:10px 30px 10px 12px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--rc);transition:all .2s}
.si-relgrid button b{display:block;font-size:12.5px;color:#eaf4ff;font-weight:700;line-height:1.3}
.si-relgrid button small{display:block;font-size:10.5px;color:var(--rc);margin-top:3px;opacity:.85}
.si-relgrid button i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--dim);transition:all .2s}
.si-relgrid button:hover{background:rgba(255,255,255,.06);border-color:var(--rc);box-shadow:0 0 18px color-mix(in srgb,var(--rc) 25%,transparent)}
.si-relgrid button:hover i{color:#fff;right:8px}
.si-credit{margin-top:28px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.1);font-size:11.5px;color:var(--dim);line-height:1.6}
.si-credit a{color:var(--ac);background:linear-gradient(90deg,var(--ac),var(--ac)) 0 100%/100% 1px no-repeat}
.si-content>*{opacity:0;transform:translateY(10px);animation:rise .5s cubic-bezier(.2,.8,.2,1) forwards}
.si-hero>*{opacity:0;transform:translateY(8px);animation:rise .45s cubic-bezier(.2,.8,.2,1) forwards}
.si-hero>:nth-child(2){animation-delay:.06s}.si-hero>:nth-child(3){animation-delay:.12s}
/* caricamento */
.si-skel{display:block;height:12px;border-radius:6px;margin:0 0 12px;background:linear-gradient(90deg,#0b1628 0%,#14284a 50%,#0b1628 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}

/* ── avvio ── */
.si-boot{position:absolute;inset:0;z-index:20;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s}
.si-boot pre{font:500 13px/1.7 var(--mono);color:var(--ok);margin:0;min-width:min(520px,90%);background:none;border:0}
.si-boot pre b{color:var(--cyan)}
.si-boot.done{opacity:0;pointer-events:none}

@keyframes blink{50%{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.45;transform:scale(.8)}}
@keyframes shimmer{to{background-position:-200% 0}}

@media (max-width:900px){
  .si{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .si-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:10px 12px;gap:10px}
  .si-logo{font-size:15px}
  .si-search{grid-column:1/-1;width:100%;max-width:none}
  .si-stats{display:none}
  .si-side{position:absolute;top:0;bottom:0;left:0;width:84%;max-width:320px;transform:translateX(-100%);transition:transform .3s;background:#040811}
  .si.menu .si-side{transform:none}
  .si-panel{top:auto;left:0;right:0;width:auto;height:84%;border-left:0;border-top:1px solid color-mix(in srgb,var(--ac) 50%,transparent);border-radius:18px 18px 0 0;transform:translateY(104%)}
  .si-hero{padding:22px 20px 18px}.si-content{padding:18px 20px 28px}
  .si .si-title{font-size:24px}
  .si-relgrid{grid-template-columns:1fr}
  .si.reading .si-zoom{right:12px}
  .si-zoom{right:12px;bottom:12px}
  .si-hint{display:none}
  #randBtn{font-size:0;padding:9px 11px}#randBtn:before{content:"⚡";font-size:14px}
}
@media (min-width:901px){.si-menu{display:none}}
@media (prefers-reduced-motion:reduce){.si *{animation:none!important;transition:none!important}.si-content>*,.si-hero>*{opacity:1;transform:none}}