/* ─────────────────────────────────────────────────────────────
   tech.css — strato "tech" per fabionline.net
   Non modifica la timeline (#experience, #skills): li esclude
   da reveal e da qualsiasi regola di layout.
   ───────────────────────────────────────────────────────────── */
:root{
  --accent:#0ea5e9;
  --accent-2:#8b5cf6;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html{ scroll-padding-top:72px; }

/* ── Scroll progress ─────────────────────────────────────── */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:70;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}

/* ── Header / nav ────────────────────────────────────────── */
header.sticky{ transition:box-shadow .3s ease, background-color .3s ease; }
header.sticky.is-scrolled{ box-shadow:0 8px 30px -18px rgba(2,132,199,.55); }
header nav a{ position:relative; transition:opacity .2s, color .2s; }
header nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .3s ease;
}
header nav a:hover::after, header nav a.is-active::after{ transform:scaleX(1); }
header nav a.is-active{ opacity:1; color:var(--accent); }

.nav-btn{
  font-family:var(--mono); font-size:.75rem; line-height:1;
  border:1px solid rgba(148,163,184,.35); border-radius:.75rem;
  padding:.4rem .7rem; background:transparent; color:inherit; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.nav-btn:hover{ background:rgba(14,165,233,.1); border-color:var(--accent); color:var(--accent); }
.nav-burger{ display:none; }
@media (max-width:767px){
  .nav-term{ margin-left:auto; }
  .nav-burger{ display:inline-block; }
}
.mnav{
  position:absolute; left:0; right:0; top:100%;
  display:none; flex-direction:column; padding:.5rem 1rem 1rem;
  background:rgba(255,255,255,.96); border-bottom:1px solid rgba(148,163,184,.3);
  backdrop-filter:blur(14px);
}
.dark .mnav{ background:rgba(2,6,23,.96); }
.mnav.open{ display:flex; }
.mnav a{ padding:.75rem .25rem; border-bottom:1px solid rgba(148,163,184,.15); font-weight:500; }
.mnav a.is-active{ color:var(--accent); }
@media (min-width:768px){ .mnav{ display:none !important; } }

/* ── Hero ────────────────────────────────────────────────── */
#top::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 55% at 85% 0%, rgba(14,165,233,.16), transparent 70%),
    radial-gradient(45% 50% at 5% 100%, rgba(139,92,246,.13), transparent 70%);
}
#top::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero-inner{ position:relative; z-index:1; }

.hero-prompt{
  font-family:var(--mono); font-size:.85rem; margin-bottom:1rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.15rem;
  color:rgb(71 85 105);
}
.dark .hero-prompt{ color:rgb(148 163 184); }
.hero-prompt .p-user{ color:#16a34a; font-weight:600; }
.dark .hero-prompt .p-user{ color:#4ade80; }
.hero-prompt .p-path{ color:var(--accent); font-weight:600; }
.hero-prompt .p-dollar{ margin:0 .4rem 0 .2rem; }
.hero-prompt #typed{ color:inherit; }
.caret{
  display:inline-block; width:.55em; height:1.05em; margin-left:2px;
  background:var(--accent); vertical-align:-.15em; animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* avatar con bordo animato */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.avatar{
  width:220px; max-width:100%; padding:2px; border-radius:1.6rem;
  background:conic-gradient(from var(--ang), var(--accent), var(--accent-2), transparent 40%, var(--accent));
  animation:spin 6s linear infinite;
  box-shadow:0 20px 50px -20px rgba(14,165,233,.55);
}
.avatar img{ display:block; width:100%; height:auto; border-radius:calc(1.6rem - 2px); }
@keyframes spin{ to{ --ang:360deg; } }

.btn-term{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--mono); font-size:.9rem; font-weight:500;
  border:1px dashed rgba(14,165,233,.7); color:var(--accent);
  border-radius:1rem; padding:.5rem 1rem; background:rgba(14,165,233,.06);
  transition:background .2s, transform .2s;
}
.btn-term:hover{ background:rgba(14,165,233,.15); transform:translateY(-1px); }
.btn-term kbd{ font-family:var(--mono); font-size:.7rem; opacity:.7; border:1px solid currentColor; border-radius:.35rem; padding:0 .3rem; }

/* ── Stats strip ─────────────────────────────────────────── */
.stats{
  display:grid; gap:.75rem; grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:640px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat{
  position:relative; overflow:hidden;
  border:1px solid rgba(148,163,184,.25); border-radius:1rem; padding:.9rem 1rem;
  background:rgba(248,250,252,.6); backdrop-filter:blur(6px);
}
.dark .stat{ background:rgba(15,23,42,.55); border-color:rgba(148,163,184,.14); }
.stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--accent),var(--accent-2));
}
.stat-v{ font-family:var(--mono); font-weight:700; font-size:1.35rem; line-height:1.2; font-variant-numeric:tabular-nums; }
.stat-v small{ font-size:.7rem; font-weight:500; opacity:.6; }
.stat-l{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; opacity:.6; margin-top:.15rem; }
.stat[hidden]{ display:none; }

/* ── Section headings ────────────────────────────────────── */
section[id] h2.font-bold::before{
  content:"// "; font-family:var(--mono); font-weight:500; color:var(--accent); opacity:.85;
}

/* ── Reveal on scroll (mai su #experience / #skills) ─────── */
.rv-ready .rv{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms);
}
.rv-ready .rv.in{ opacity:1; transform:none; }

/* ── Spotlight sulle card ────────────────────────────────── */
.spot{ position:relative; transition:transform .25s ease, border-color .25s ease; }
.spot:hover{ transform:translateY(-3px); border-color:rgba(14,165,233,.5); }
.spot::before, .extra-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(14,165,233,.16), transparent 65%);
  opacity:0; transition:opacity .25s ease;
}
.spot:hover::before, .extra-card:hover::before{ opacity:1; }

/* ── Terminale ───────────────────────────────────────────── */
.term-overlay{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:1rem;
  background:rgba(2,6,23,.65); backdrop-filter:blur(6px);
}
.term-overlay.open{ display:flex; animation:termIn .18s ease-out; }
@keyframes termIn{ from{ opacity:0; transform:scale(.98); } }
.term{
  width:min(820px,100%); height:min(560px,80vh); display:flex; flex-direction:column;
  background:#0b1220; color:#cbd5e1; border:1px solid rgba(56,189,248,.35);
  border-radius:14px; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(14,165,233,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
  font-family:var(--mono); font-size:.82rem; line-height:1.5;
}
.term-bar{
  display:flex; align-items:center; gap:.45rem; padding:.55rem .8rem;
  background:#0f172a; border-bottom:1px solid rgba(148,163,184,.15); font-size:.75rem; color:#94a3b8;
}
.term-dot{ width:11px; height:11px; border-radius:50%; border:0; padding:0; cursor:pointer; }
.term-dot.r{ background:#ef4444; } .term-dot.y{ background:#eab308; } .term-dot.g{ background:#22c55e; }
.term-title{ margin-left:.5rem; flex:1; text-align:center; margin-right:3rem; }
.term-body{ flex:1; overflow-y:auto; padding:.8rem 1rem; scrollbar-width:thin; scrollbar-color:#334155 transparent; }
.term-line{ white-space:pre-wrap; word-break:break-word; margin:0; min-height:1.5em; }
.term-line.pre{ white-space:pre; word-break:normal; overflow-x:auto; }
.term-line .c-user{ color:#4ade80; } .term-line .c-path{ color:#38bdf8; }
.term-line .c-dim{ color:#64748b; } .term-line .c-ok{ color:#4ade80; } .term-line .c-err{ color:#f87171; }
.term-line .c-hl{ color:#fbbf24; } .term-line .c-acc{ color:#38bdf8; } .term-line .c-vio{ color:#a78bfa; }
.term-line a{ color:#38bdf8; text-decoration:underline; text-underline-offset:2px; }
.t-cmd{
  font:inherit; color:#fbbf24; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline dotted; text-underline-offset:3px;
}
.t-cmd:hover{ color:#fde68a; }
.term-input-row{ display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-top:1px solid rgba(148,163,184,.15); background:#0a1020; }
.term-input-row .ps{ white-space:nowrap; }
.term-input{
  flex:1; min-width:0; background:transparent; border:0; outline:0; color:#f1f5f9; font:inherit; caret-color:var(--accent);
}
@media (max-width:480px){ .term-input-row .ps .host{ display:none; } .term{ font-size:.78rem; } }

/* ── Riduzione animazioni ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .rv-ready .rv{ opacity:1; transform:none; transition:none; }
  .caret, .avatar{ animation:none; }
  .spot:hover, .btn-term:hover{ transform:none; }
}

/* ── Ritocchi ────────────────────────────────────────────── */
#stats{ margin-top:1.25rem; }
#st-uptime{ font-size:1.05rem; white-space:nowrap; padding-top:.2rem; }
@media (hover:none){ .btn-term kbd{ display:none; } }

/* ── Pagina Projects (master / detail) ───────────────────── */
body[data-page="projects"] #top .hero-inner{ padding-top:4rem; padding-bottom:1rem; }
.pfilters{ display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; margin-top:1.75rem; border-bottom:1px solid rgba(148,163,184,.25); }
.pchip{
  font-family:var(--mono); font-size:.8rem; padding:.55rem 0; background:none; border:0; color:inherit; cursor:pointer;
  opacity:.55; position:relative; transition:opacity .2s, color .2s;
}
.pchip small{ font-size:.68rem; opacity:.7; margin-left:.25rem; }
.pchip:hover{ opacity:1; }
.pchip[aria-pressed="true"]{ opacity:1; color:var(--accent); }
.pchip[aria-pressed="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); }

.pwrap{ display:grid; gap:2rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .pwrap{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:2.5rem; } }
.plist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.plist li[hidden]{ display:none; }
.prow{
  width:100%; display:flex; align-items:center; gap:.9rem; text-align:left; cursor:pointer; color:inherit;
  padding:.8rem 1rem; border-radius:.9rem; border:1px solid transparent; background:transparent;
  transition:background .2s, border-color .2s, transform .2s;
}
.prow:hover{ background:rgba(148,163,184,.1); }
.prow[aria-current="true"]{
  background:color-mix(in srgb,var(--pc) 10%,transparent);
  border-color:color-mix(in srgb,var(--pc) 45%,transparent);
}
.prow .pe{ width:40px; height:40px; border-radius:.7rem; display:grid; place-items:center; font-size:1.25rem; flex-shrink:0;
  background:color-mix(in srgb,var(--pc) 16%,transparent); }
.prow .pt{ flex:1; min-width:0; }
.prow .pn{ display:block; font-weight:600; font-size:1rem; line-height:1.25; }
.prow .pl{ display:block; font-size:.82rem; opacity:.6; margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prow .pd{ width:8px; height:8px; border-radius:50%; background:var(--pc); flex-shrink:0; opacity:.55; }
.prow[aria-current="true"] .pd{ opacity:1; box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 25%,transparent); }
.prow:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.pdetail{
  --pc:var(--accent);
  border:1px solid color-mix(in srgb,var(--pc) 35%,rgba(148,163,184,.25)); border-radius:1.25rem;
  padding:1.75rem; background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 8%,transparent),transparent 60%);
  animation:pin .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes pin{ from{ opacity:0; transform:translateY(8px); } }
@media (min-width:900px){ .pdetail{ position:sticky; top:84px; } }
@media (max-width:899px){ .pdetail{ margin:.35rem 0 .6rem; padding:1.25rem; } }
.pdetail .dh{ display:flex; align-items:center; gap:1rem; }
.pdetail .de{ width:56px; height:56px; border-radius:1rem; display:grid; place-items:center; font-size:1.8rem;
  background:color-mix(in srgb,var(--pc) 18%,transparent); flex-shrink:0; }
.pdetail h2{ font-size:1.5rem; font-weight:800; line-height:1.15; }
.pdetail .dmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.4rem; font-size:.72rem; }
.pdetail .dstatus{ font-family:var(--mono); color:var(--pc); }
.pdetail .dstatus::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--pc); margin-right:.4rem; }
.pdetail .dtag{ text-transform:uppercase; letter-spacing:.06em; font-weight:600; opacity:.55; }
.pdetail .dtag::before{ content:"·"; margin-right:.5rem; }
.pdetail .dlead{ margin-top:1.25rem; font-size:1.02rem; line-height:1.6; opacity:.85; }
.pdetail .dsec{ margin-top:1.5rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.5; }
.pdetail ul.dhl{ list-style:none; margin:.6rem 0 0; padding:0; }
.pdetail ul.dhl li{ position:relative; padding-left:1.2rem; margin-top:.5rem; font-size:.93rem; line-height:1.5; opacity:.9; }
.pdetail ul.dhl li::before{ content:"›"; position:absolute; left:0; color:var(--pc); font-family:var(--mono); font-weight:700; }
.pdetail .dstack{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.pdetail .dstack span{ font-family:var(--mono); font-size:.74rem; padding:.2rem .6rem; border-radius:.45rem; background:rgba(148,163,184,.15); }
.pdetail .dlinks{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.pdetail .dcta{ display:inline-flex; padding:.55rem 1.2rem; border-radius:9999px; font-weight:600; font-size:.9rem;
  color:#fff; background:var(--pc); transition:filter .2s, transform .2s; }
.pdetail .dcta:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.phint{ margin-top:1.25rem; font-family:var(--mono); font-size:.72rem; opacity:.45; }
@media (hover:none){ .phint{ display:none; } }
@media (prefers-reduced-motion:reduce){ .pdetail{ animation:none; } .prow{ transition:none; } }

/* ── Projects in home + Extras con meno card ─────────────── */
.see-all{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.9rem; color:var(--accent); transition:gap .2s; }
.see-all:hover{ gap:.7rem; }
.feat-stack{ display:flex; gap:.35rem; flex-wrap:wrap; }
.feat-stack span{ font-family:var(--mono); font-size:.68rem; padding:.1rem .45rem; border-radius:.4rem; background:rgba(148,163,184,.15); }
#extrasList{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
#featuredProjects, #extrasList{ gap:1.25rem; }
#featuredProjects{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.pdetail .dcta.alt{ background:transparent; color:var(--pc); border:1px solid color-mix(in srgb,var(--pc) 55%,transparent); }
.pdetail .dcta.alt:hover{ background:color-mix(in srgb,var(--pc) 12%,transparent); filter:none; }


/* ── Stampa pulita (Ctrl+P): sfondo bianco, niente elementi interattivi ── */
@media print{
  @page{ margin:14mm; }
  html, html.dark, body{ background:#fff !important; color:#111 !important; }
  header.sticky, .scroll-progress, .hero-canvas, #top::before, #top::after, #stats, .caret, .hero-prompt,
  .btn-term, .nav-btn, .mnav, .term-overlay, #extras, .see-all, .phint, #certsToggleBtn, #lb { display:none !important; }
  .rv, .rv-ready .rv{ opacity:1 !important; transform:none !important; }
  section{ border-top:1px solid #ddd !important; break-inside:auto; }
  #experience li, .stat, .spot, .extra-card{ break-inside:avoid; }
  section:not(#skills) *{ color:#111 !important; background:transparent !important; box-shadow:none !important; animation:none !important; }
  section:not(#skills) a{ text-decoration:underline; }
  .avatar{ background:none !important; box-shadow:none !important; animation:none !important; padding:0; }
  #certsCollapsible{ max-height:none !important; opacity:1 !important; }
  #skills, #skills *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #skills h2, #skills h3, #skills p, #skills .text-sm, #skills div[class*="text-"]{ color:#111 !important; }
  section[id] h2.font-bold::before{ color:#666 !important; }
}
@media print{
  #certsBlock, #top .mt-6.flex{ display:none !important; }
  /* timeline: solo in stampa, binari chiari anche se il tema è scuro (colori delle barre invariati) */
  #timeline > div > div:nth-child(2){ background:#e2e8f0 !important; }
}

/* ── Modulo contatti ─────────────────────────────────────── */
.cdlg{
  width:min(480px,calc(100vw - 2rem)); max-height:calc(100vh - 2rem); overflow:auto; padding:0; margin:auto;
  border:1px solid rgba(148,163,184,.35); border-radius:1.1rem; background:#fff; color:#0f172a;
  box-shadow:0 30px 80px -20px rgba(2,132,199,.45);
}
.dark .cdlg{ background:#0b1220; color:#e2e8f0; border-color:rgba(56,189,248,.3); }
.cdlg::backdrop{ background:rgba(2,6,23,.65); backdrop-filter:blur(6px); }
.cdlg[open]{ animation:termIn .18s ease-out; }
.cd-form, .cd-done{ padding:1.4rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:.9rem; }
.cd-form[hidden], .cd-done[hidden]{ display:none; }
.cd-head{ display:flex; align-items:center; justify-content:space-between; }
.cd-head h2, .cd-done h2{ font-size:1.25rem; font-weight:800; }
.cd-head h2::before{ content:"// "; font-family:var(--mono); font-weight:500; color:var(--accent); }
.cd-x{ background:none; border:0; color:inherit; opacity:.6; cursor:pointer; font-size:1.1rem; padding:.2rem .4rem; border-radius:.4rem; }
.cd-x:hover{ opacity:1; background:rgba(148,163,184,.15); }
.cd-sub{ font-size:.82rem; opacity:.65; margin-top:-.4rem; }
.cd-l{ display:flex; flex-direction:column; gap:.3rem; font-size:.78rem; font-weight:600; letter-spacing:.02em; }
.cd-i{
  font:inherit; font-size:.95rem; font-weight:400; color:inherit; padding:.55rem .75rem; border-radius:.65rem;
  background:rgba(148,163,184,.1); border:1px solid rgba(148,163,184,.35); outline:0; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.cd-i:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,165,233,.25); }
textarea.cd-i{ resize:vertical; min-height:7rem; }
select.cd-i option{ color:#0f172a; }
.cd-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cd-actions{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.cd-send{
  font:inherit; font-weight:600; font-size:.92rem; color:#fff; background:var(--accent); border:0; cursor:pointer;
  padding:.6rem 1.3rem; border-radius:9999px; transition:filter .2s, transform .2s;
}
.cd-send:hover:not(:disabled){ filter:brightness(1.1); transform:translateY(-1px); }
.cd-send:disabled{ opacity:.6; cursor:progress; }
.cd-status{ font-size:.82rem; opacity:.8; }
.cd-status.err{ color:#dc2626; opacity:1; }
.dark .cd-status.err{ color:#f87171; }
.cd-done{ align-items:center; text-align:center; padding:2.2rem 1.5rem; }
.cd-ok{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:1.6rem; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.cd-donep{ opacity:.75; font-size:.95rem; }
@media print{ .cdlg{ display:none !important; } }

/* ───────── Timeline interattiva ───────── */
#timelineBox{position:relative}
.tl-row{border-radius:.5rem;transition:opacity .18s ease;outline:none}
.tl-row.tl-dim{opacity:.38}
.tl-row:focus-visible{box-shadow:0 0 0 2px #38bdf8;}
.tl-seg{transform-origin:left center;transition:transform .7s cubic-bezier(.2,.7,.2,1) var(--r,0ms),opacity .2s ease}
.tl-anim:not(.tl-in) .tl-seg{transform:scaleX(0)}
.tl-hide-work .tl-w,.tl-hide-personal .tl-p{opacity:0}
.tl-cursor{position:absolute;pointer-events:none;z-index:2;background:rgba(56,189,248,.10);border-left:1px solid rgba(56,189,248,.55);border-right:1px solid rgba(56,189,248,.55)}
.tl-cursor[hidden]{display:none}
.tl-cursor-tag{position:absolute;top:-2px;left:50%;transform:translate(-50%,-100%);background:#0ea5e9;color:#fff;font-size:.7rem;line-height:1;padding:.2rem .4rem;border-radius:.4rem;font-variant-numeric:tabular-nums}
#timelineYears{font-variant-numeric:tabular-nums}
.tl-tip{position:fixed;z-index:60;max-width:18rem;pointer-events:none;padding:.6rem .75rem;border-radius:.75rem;font-size:.8rem;line-height:1.35;
  background:rgba(15,23,42,.96);color:#e2e8f0;border:1px solid rgba(148,163,184,.25);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tl-tip[hidden]{display:none}
.tl-tip-h{font-weight:600;display:flex;align-items:center;gap:.45rem;color:#fff}
.tl-tip-dot{width:.6rem;height:.6rem;border-radius:9999px;flex:none}
.tl-tip-n{margin-top:.25rem;opacity:.8}
.tl-tip-l{margin-top:.2rem;font-variant-numeric:tabular-nums}
.tl-tip-l b{display:inline-block;min-width:4.3rem;font-weight:500;opacity:.6}
.tl-leg{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .6rem;border-radius:9999px;border:1px solid rgba(148,163,184,.35);background:transparent;color:inherit;cursor:pointer;transition:opacity .15s,border-color .15s}
.tl-leg:hover{border-color:#38bdf8}
.tl-leg[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.tl-sw{width:.75rem;height:.75rem;border-radius:.2rem;display:inline-block}
@media (max-width:639px){
  #timeline > .tl-row{grid-template-columns:1fr;gap:.2rem}
  #timelineBox > .tl-axisrow{grid-template-columns:1fr}
  #timelineBox > .tl-axisrow > div:first-child{display:none}
}
@media (prefers-reduced-motion:reduce){.tl-seg,.tl-row{transition:none}}