:root{
  --claude:#D97757; --vercel:#5EEAD4; --codex:#87A0FF; --insight:#C792EA;
  --gold:#C9A227; --slate:#7C8694;
  --radius:18px; --maxw:1080px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="dark"]{
  --bg:#0E0E0F; --bg2:#0a0a0b; --panel:#161617; --panel-2:#1b1b1d;
  --line:#28282b; --text:#E5DFD3; --muted:#938d82; --faint:#605b53;
  --hero:#ffffff; --shadow:0 1px 0 rgba(255,255,255,.03), 0 24px 60px -30px rgba(0,0,0,.8);
  --glow:radial-gradient(72% 86% at 50% -12%, rgba(217,119,87,.26), transparent 72%);
  --gh0:#1c1c1e; --gh1:#0e4429; --gh2:#006d32; --gh3:#26a641; --gh4:#39d353;
  --fe-ink:#5EEAD4; --be-ink:#D97757; --tok-ink:#87A0FF;
}
:root[data-theme="light"]{
  --bg:#FBF8F2; --bg2:#F4EFE6; --panel:#FFFFFF; --panel-2:#FBF8F2;
  --line:#E7DFD1; --text:#26221C; --muted:#73695b; --faint:#a89e8d;
  --hero:#1a1713; --shadow:0 1px 0 rgba(255,255,255,.6), 0 18px 44px -28px rgba(120,90,50,.45);
  --faint:#6f6757;
  --glow:radial-gradient(72% 86% at 50% -12%, rgba(217,119,87,.17), transparent 72%);
  --gh0:#ebedf0; --gh1:#9be9a8; --gh2:#40c463; --gh3:#30a14e; --gh4:#216e39;
  --fe-ink:#0d9488; --be-ink:#c2410c; --tok-ink:#4338ca;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  background-image:var(--glow); background-repeat:no-repeat;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
main{max-width:var(--maxw); margin:0 auto; padding:clamp(20px,5vw,40px)}

/* top bar */
.bar{max-width:var(--maxw); margin:0 auto; padding:20px clamp(20px,5vw,40px) 0;
  display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px; letter-spacing:.2px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--claude);box-shadow:0 0 14px var(--claude)}
.bar-right{display:flex;align-items:center;gap:12px}
.badge{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  font-family:'JetBrains Mono',monospace}
.badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--vercel);
  box-shadow:0 0 0 0 rgba(94,234,212,.6); animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,234,212,.5)}70%{box-shadow:0 0 0 7px rgba(94,234,212,0)}100%{box-shadow:0 0 0 0 rgba(94,234,212,0)}}
.theme{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel);cursor:pointer;display:grid;place-items:center;transition:.25s var(--ease)}
.theme:hover{border-color:var(--muted)}
.pill{height:38px;padding:0 15px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);cursor:pointer;letter-spacing:.3px;
  font:600 12.5px/1 'Inter',sans-serif;transition:.25s var(--ease)}
.pill:hover{border-color:var(--muted);color:var(--text)}
.pill[aria-pressed="true"]{color:var(--text);
  border-color:color-mix(in srgb,var(--text) 30%,var(--line));
  background:color-mix(in srgb,var(--text) 6%,var(--panel))}
.theme-ico{width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 32% 32%, var(--text) 48%, transparent 50%);
  box-shadow:inset -5px -3px 0 -2px var(--panel)}
:root[data-theme="light"] .theme-ico{box-shadow:none;background:var(--gold);
  border-radius:50%;position:relative}

/* hero */
.hero{padding:clamp(40px,9vw,86px) 0 clamp(28px,5vw,44px); text-align:center}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:1px;
  color:var(--muted);text-transform:uppercase}
.hero h1{font-family:'Manrope',sans-serif;font-weight:700;color:var(--muted);
  font-size:clamp(18px,3vw,24px);margin-top:18px;letter-spacing:-.2px}
.counter{font-family:'Manrope',sans-serif;font-weight:800;color:var(--hero);
  font-size:clamp(64px,15vw,148px);line-height:.92;letter-spacing:-.05em;margin:6px 0;
  font-variant-numeric:tabular-nums}
.hero-unit{font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(20px,4vw,30px);
  color:var(--text);letter-spacing:-.3px}
.hero-sub{max-width:560px;margin:18px auto 0;color:var(--muted);font-size:clamp(14px,2.4vw,17px)}
.hero-sub b{color:var(--text);font-weight:600}
.hero-tokens{margin-top:26px;font-size:clamp(14px,2.5vw,18px);letter-spacing:.1px;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.hero-tokens .htok{font-family:'Manrope',sans-serif;font-weight:800;
  font-size:clamp(34px,7vw,56px);line-height:1;color:var(--tok-ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;text-shadow:0 0 34px color-mix(in srgb,var(--tok-ink) 38%,transparent)}
.hero-tokens .htok-label{font-size:clamp(12.5px,2.3vw,15px);color:var(--muted);font-weight:500}

/* stat cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(182px,1fr));gap:clamp(10px,1.6vw,16px);margin-top:8px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(16px,2.4vw,22px);display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.stat.accent{background:linear-gradient(165deg,color-mix(in srgb,var(--claude) 12%,var(--panel)),var(--panel) 60%);
  border-color:color-mix(in srgb,var(--claude) 35%,var(--line))}
.stat .k{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:600;
  line-height:1.35;min-height:2.7em}
.stat .v{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(20px,3.3vw,34px);
  letter-spacing:-.04em;color:var(--hero);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .v.pos{color:var(--fe-ink)} .stat .v.fe{color:var(--fe-ink)} .stat .v.be{color:var(--be-ink)}
.stat .s{font-size:12.5px;color:var(--muted);line-height:1.45;display:none}
.stat .s b{color:var(--text);font-weight:600}
.show-detail .stat .s{display:block}
.stat.accent .s{display:block}  /* the clarifier on the headline card always shows */

/* panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,2.6vw,26px);margin-top:clamp(14px,2vw,18px);box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:20px;gap:12px;flex-wrap:wrap}
.panel-head h2{font-size:13px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text);font-weight:600}
.panel-head span{font-size:12px;color:var(--faint);font-family:'JetBrains Mono',monospace}
.track{display:flex;height:14px;border-radius:8px;overflow:hidden;background:var(--bg2);margin-bottom:22px}
.track > i{height:100%;width:0;transition:width 1.1s var(--ease)}
.legend{list-style:none;display:flex;flex-direction:column;gap:14px}
.legend li{display:grid;grid-template-columns:12px 84px 1fr auto;align-items:center;gap:13px}
.legend .sw{width:11px;height:11px;border-radius:3px}
.legend .nm{font-size:13.5px}
.legend .ln{height:7px;border-radius:5px;background:var(--bg2);overflow:hidden}
.legend .ln > i{display:block;height:100%;width:0;border-radius:5px;transition:width 1s var(--ease)}
.legend .vl{font-size:13px;color:var(--muted);text-align:right;min-width:128px}
.legend .vl b{color:var(--text);font-weight:600}

.bars{list-style:none;display:flex;flex-direction:column;gap:13px}
.bars li{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:14px}
.bars .pn{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars .pb{height:9px;border-radius:6px;background:var(--bg2);overflow:hidden}
.bars .pb > i{display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--claude),var(--insight));transition:width 1.1s var(--ease)}
.bars .pv{font-size:13px;color:var(--muted);text-align:right;min-width:70px;font-variant-numeric:tabular-nums}

/* tokens — big total then breakdown */
.tok-hero{display:flex;flex-direction:column;margin-bottom:24px}
.tok-hero .tv{font-family:'Manrope',sans-serif;font-weight:800;
  font-size:clamp(46px,9vw,86px);line-height:.95;letter-spacing:-.04em;color:var(--hero)}
.tok-hero .tu{color:var(--muted);font-size:clamp(13px,2.4vw,15.5px);margin-top:10px}

/* cta + foot */
.cta{text-align:center;padding:clamp(40px,7vw,72px) 16px clamp(20px,4vw,32px)}
.cta h2{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(24px,4.5vw,36px);
  color:var(--hero);letter-spacing:-.4px}
.cta p{max-width:480px;margin:14px auto 22px;color:var(--muted);font-size:clamp(14px,2.4vw,16px)}
.cmd{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:clamp(11px,2.2vw,13.5px);
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  padding:13px 18px;border-radius:12px;box-shadow:var(--shadow);max-width:100%;overflow-x:auto;white-space:nowrap}
.foot{max-width:var(--maxw);margin:0 auto;padding:24px clamp(20px,5vw,40px) 40px;
  display:flex;justify-content:space-between;color:var(--faint);font-size:12.5px;
  border-top:1px solid var(--line);margin-top:20px;flex-wrap:wrap;gap:8px}
.foot b{color:var(--muted)}

/* tick highlight when a live update bumps a number */
.bumped{animation:bump .9s var(--ease)}
@keyframes bump{0%{color:var(--vercel)}100%{}}

/* --- Tier 1 polish: scroll-reveal · hover · hero glow · tokens accent --- */
.anim .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.anim .reveal.in{opacity:1;transform:none}

.stat:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--text) 24%,var(--line))}
.legend li,.bars li{margin:0 -10px;padding:5px 10px;border-radius:10px;
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.legend li:hover,.bars li:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.legend li:hover .vl b,.bars li:hover .pv{color:var(--hero)}

@keyframes heroGlow{0%{text-shadow:0 0 0 transparent}
  35%{text-shadow:0 0 48px rgba(217,119,87,.45)}100%{text-shadow:0 0 0 transparent}}
.anim .counter.lit{animation:heroGlow 2.4s var(--ease) 1}

.panel.tokens{background:linear-gradient(165deg,
  color-mix(in srgb,var(--codex) 11%,var(--panel)),var(--panel) 58%);
  border-color:color-mix(in srgb,var(--codex) 26%,var(--line))}
@keyframes tokGlow{0%{text-shadow:0 0 0 transparent}
  35%{text-shadow:0 0 42px rgba(135,160,255,.5)}100%{text-shadow:0 0 0 transparent}}
.anim .tokens.in .tv{animation:tokGlow 2.4s var(--ease) 1}

/* GitHub activity: real contribution heatmap + activity split */
.heatmap{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,11px);
  grid-auto-columns:11px;gap:3px;margin-bottom:24px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.heatmap i{width:11px;height:11px;border-radius:2px;background:var(--gh0)}
.heatmap i.l1{background:var(--gh1)}.heatmap i.l2{background:var(--gh2)}
.heatmap i.l3{background:var(--gh3)}.heatmap i.l4{background:var(--gh4)}
.heatmap i.pad{background:transparent}
.github.no-heatmap .heatmap{display:none}
/* squares light up column-by-column when the section scrolls into view */
@keyframes light{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
.anim .github .heatmap i{opacity:0}
.anim .github.in .heatmap i{animation:light .5s var(--ease) both}
.gh-legend{list-style:none;display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:15px;
  font-size:13px;color:var(--muted)}
.gh-legend li{display:flex;align-items:center;gap:7px}
.gh-legend .sw{width:10px;height:10px;border-radius:3px}
.gh-stats{margin:-6px 0 22px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.gh-stats b{color:var(--text);font-weight:600}
.gh-stats:empty{display:none}

/* Tier 2: info tooltips + CTA link */
.info{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  margin-left:5px;border:1px solid var(--faint);border-radius:50%;color:var(--faint);
  font:600 9px/1 'Inter',sans-serif;font-style:normal;cursor:help;vertical-align:1px}
.info:hover{color:var(--text);border-color:var(--muted)}
.cta-link{display:inline-block;margin-top:22px;font-size:14.5px;color:var(--text);
  text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--text) 32%,transparent);
  padding-bottom:3px;transition:border-color .2s var(--ease)}
.cta-link:hover{border-color:var(--text)}

@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats .stat:last-child:nth-child(odd){grid-column:1/-1}
  .legend li{grid-template-columns:12px 1fr auto;gap:10px}
  .legend .nm{display:none}
  .bars li{grid-template-columns:96px 1fr auto;gap:10px}
  .foot{justify-content:center;text-align:center}
  .cmd{white-space:normal;word-break:break-word;text-align:left;line-height:1.7}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr 1fr;gap:9px}
  .legend .vl{min-width:96px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* deterministic still mode (?still) — final values, no motion (also for screenshots) */
.still *{animation:none!important;transition:none!important}