:root{
  --bg:#0f1115; --card:#181b22; --card2:#1e222b; --text:#e8eaf0; --muted:#9aa3b2;
  --accent:#5eead4; --accent2:#818cf8; --gold:#fbbf24; --red:#f87171; --green:#4ade80;
  --border:#2a2f3a; --radius:14px;
}
@media (prefers-color-scheme: light){
  :root{--bg:#f4f6fa; --card:#ffffff; --card2:#eef1f6; --text:#1a2030; --muted:#5b6472;
  --accent:#0d9488; --accent2:#4f46e5; --gold:#b45309; --red:#dc2626; --green:#15803d; --border:#dde3ec;}
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55; font-size:16px;
}
.wrap{max-width:860px; margin:0 auto; padding:0 16px 80px}
header.hero{padding:38px 16px 20px; text-align:center}
header.hero h1{font-size:clamp(22px,5vw,34px); line-height:1.2; margin-bottom:10px}
header.hero h1 .em{color:var(--accent)}
header.hero p.sub{color:var(--muted); font-size:15px; max-width:640px; margin:0 auto}
.badges{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.badge{background:var(--card2); border:1px solid var(--border); border-radius:99px; padding:4px 12px; font-size:13px; color:var(--muted)}
.badge b{color:var(--text)}

nav.tabs{
  position:sticky; top:0; z-index:50; background:var(--bg);
  display:flex; gap:6px; overflow-x:auto; padding:10px 12px; border-bottom:1px solid var(--border);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{
  flex:0 0 auto; background:var(--card); color:var(--muted); border:1px solid var(--border);
  border-radius:99px; padding:8px 16px; font-size:14px; cursor:pointer; white-space:nowrap;
}
nav.tabs button.active{background:var(--accent); color:#08131a; border-color:var(--accent); font-weight:600}
section.tab{display:none; padding-top:22px}
section.tab.active{display:block}

h2{font-size:21px; margin:26px 0 12px}
h3{font-size:17px; margin:20px 0 8px}
p{margin:8px 0}
.muted{color:var(--muted)}
.small{font-size:13px}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin:12px 0}
.card h3{margin-top:0}
.card .tagrow{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px}
.tag{font-size:12px; padding:2px 10px; border-radius:99px; border:1px solid var(--border); color:var(--muted)}
.tag.green{color:var(--green); border-color:var(--green)}
.tag.red{color:var(--red); border-color:var(--red)}
.tag.gold{color:var(--gold); border-color:var(--gold)}
.tag.violet{color:var(--accent2); border-color:var(--accent2)}
.tag.teal{color:var(--accent); border-color:var(--accent)}

.top3{border-left:4px solid var(--accent)}
.num{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:50%; background:var(--accent); color:#08131a; font-weight:700; font-size:15px; margin-right:10px; flex:0 0 auto}
.rowtitle{display:flex; align-items:center}

details{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin:10px 0; overflow:hidden}
details summary{
  cursor:pointer; padding:14px 16px; font-weight:600; list-style:none; display:flex; align-items:center; gap:10px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"▾"; margin-left:auto; color:var(--muted); transition:transform .2s}
details[open] summary::after{transform:rotate(180deg)}
details .body{padding:0 16px 14px}
details .body p{margin:6px 0}
.idea{border-top:1px dashed var(--border); padding:10px 0}
.idea:first-child{border-top:none}
.idea b.t{display:block; margin-bottom:2px}
.who{font-size:12px; color:var(--accent2)}

table{width:100%; border-collapse:collapse; margin:10px 0; font-size:14px}
th,td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top}
th{color:var(--muted); font-weight:600; font-size:13px}
.tablewrap{overflow-x:auto}

.verdict{font-weight:700}
.verdict.dead{color:var(--red)}
.verdict.hurt{color:var(--gold)}
.verdict.alive{color:var(--green)}

.week{display:flex; gap:14px; margin:14px 0}
.week .wnum{flex:0 0 auto; width:44px; text-align:center; font-weight:700; color:var(--accent);
  border-right:2px solid var(--border); padding-right:12px}
.week .wbody{flex:1}

.callout{background:linear-gradient(135deg, rgba(94,234,212,.08), rgba(129,140,248,.08));
  border:1px solid var(--accent); border-radius:var(--radius); padding:16px 18px; margin:16px 0}
.callout.warn{border-color:var(--gold); background:rgba(251,191,36,.06)}
.callout.danger{border-color:var(--red); background:rgba(248,113,113,.06)}

nav.subtabs{display:flex; gap:6px; overflow-x:auto; padding:4px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
nav.subtabs::-webkit-scrollbar{display:none}
nav.subtabs button{
  flex:0 0 auto; background:var(--card2); color:var(--muted); border:1px solid var(--border);
  border-radius:99px; padding:6px 13px; font-size:13px; cursor:pointer; white-space:nowrap;
}
nav.subtabs button.active{background:var(--accent2); color:#fff; border-color:var(--accent2); font-weight:600}
.sub{display:none}
.sub.active{display:block}

footer{margin-top:44px; text-align:center; color:var(--muted); font-size:13px; padding:20px}
.kbd{background:var(--card2); border:1px solid var(--border); border-radius:6px; padding:1px 7px; font-size:13px}