:root{
  --deep:#070E17; --night:#0B1826; --panel:#101F30; --panel-2:#16293E;
  --rime:#2E5273; --ice:#7FB8D8; --frost:#D9E9F5; --frost-dim:#8FACC4;
  --ember:#FF7A3D; --ember-hi:#FFA06B; --amber:#F2B33D; --jade:#4FCB9B;
  --violet:#A18FD8; --crit:#E05C5C;
  --accent:var(--ember); --accent-hi:var(--ember-hi);
  --accent-ghost:rgba(255,122,61,.09);
  --glow:0 0 22px rgba(255,122,61,.28);
}
body[data-accent="violet"]{--accent:#A18FD8;--accent-hi:#C0B1EC;
  --accent-ghost:rgba(161,143,216,.10);--glow:0 0 22px rgba(161,143,216,.30);}
body[data-accent="ice"]{--accent:#59A8D4;--accent-hi:#8CC7E8;
  --accent-ghost:rgba(89,168,212,.10);--glow:0 0 22px rgba(89,168,212,.30);}
body[data-accent="jade"]{--accent:#4FCB9B;--accent-hi:#7BDEB8;
  --accent-ghost:rgba(79,203,155,.10);--glow:0 0 22px rgba(79,203,155,.28);}
body[data-accent="amber"]{--accent:#F2B33D;--accent-hi:#FFCB6B;
  --accent-ghost:rgba(242,179,61,.10);--glow:0 0 22px rgba(242,179,61,.28);}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--deep);
  background-image:
    radial-gradient(1100px 520px at 85% -80px, rgba(38,110,132,.32), transparent 65%),
    radial-gradient(900px 480px at -10% 4%, rgba(150,64,28,.20), transparent 60%),
    radial-gradient(1400px 900px at 50% 110%, rgba(17,42,66,.55), transparent 70%),
    linear-gradient(180deg,#070E17 0%,#0A1622 48%,#070E17 100%);
  background-attachment:fixed;
  color:var(--frost);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.62;-webkit-text-size-adjust:100%;padding-bottom:64px;
  position:relative;overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.wrap{max-width:860px;margin:0 auto;padding:0 18px;position:relative;z-index:1;}

/* ---------- nav ---------- */
.topnav{padding:16px 0 0;}
.topnav a{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--frost-dim);
  text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;
}
.topnav a:hover{color:var(--accent-hi);border-color:var(--accent);}

/* ---------- header + ghost numeral ---------- */
header{padding:34px 0 24px;position:relative;margin-bottom:8px;}
header::before{
  content:attr(data-n);position:absolute;right:-8px;top:-34px;z-index:-1;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;
  font-size:clamp(140px,24vw,210px);line-height:1;color:var(--accent-ghost);
  pointer-events:none;letter-spacing:-.02em;
}
header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(255,255,255,.12) 30%,var(--rime) 60%,transparent 100%);
}
.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ice);margin:0 0 10px;
}
.eyebrow::before{content:'◆ ';color:var(--accent);font-size:8px;vertical-align:2px;}
h1{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;
  font-size:54px;line-height:.92;text-transform:uppercase;margin:0 0 13px;
  letter-spacing:-.008em;
  text-shadow:0 2px 24px rgba(127,184,216,.16);
}
h1 em{
  font-style:normal;color:var(--accent);
  text-shadow:0 0 28px var(--accent-ghost),0 0 14px var(--accent-ghost);
}
.sub{color:var(--frost-dim);font-size:14.5px;margin:0;max-width:56ch;}

/* ---------- section heads ---------- */
h2{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:600;
  font-size:28px;text-transform:uppercase;letter-spacing:.02em;
  margin:42px 0 6px;padding-bottom:9px;position:relative;
}
h2::before{content:'// ';color:var(--accent);font-size:18px;vertical-align:3px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:400;}
h2::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--accent) 0%,var(--rime) 45%,transparent 95%);
}
h3{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:600;
  font-size:19px;text-transform:uppercase;letter-spacing:.05em;
  margin:26px 0 7px;color:var(--accent-hi);
}
p{margin:0 0 12px;}
.lede{color:var(--frost-dim);font-size:13.5px;margin:12px 0 16px;max-width:60ch;}
b,strong{color:#fff;font-weight:600;}

ul,ol{margin:0 0 14px;padding-left:4px;list-style:none;counter-reset:oli;}
ul li,ol li{margin-bottom:8px;padding-left:22px;position:relative;}
ul li::before{
  content:'◆';position:absolute;left:2px;top:1px;
  color:var(--accent);font-size:9px;
}
ol li{counter-increment:oli;padding-left:30px;}
ol li::before{
  content:counter(oli,decimal-leading-zero);
  position:absolute;left:0;top:2px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;color:var(--accent);
}

/* ---------- callouts w/ corner ticks ---------- */
.key{
  --tick:var(--ember);
  border:1px solid rgba(255,122,61,.32);border-left:3px solid var(--ember);
  background:linear-gradient(135deg,rgba(255,122,61,.10),rgba(16,31,48,.9) 42%);
  padding:15px 17px;margin:18px 0;border-radius:2px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.key::before,.key::after{content:'';position:absolute;width:11px;height:11px;pointer-events:none;}
.key::before{top:-1px;right:-1px;border-top:2px solid var(--tick);border-right:2px solid var(--tick);}
.key::after{bottom:-1px;left:-1px;border-bottom:2px solid var(--tick);border-left:2px solid var(--tick);}
.key .lbl{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ember-hi);
  font-weight:600;display:block;margin-bottom:6px;
}
.key.warn{
  --tick:var(--crit);
  border-color:rgba(224,92,92,.4);border-left-color:var(--crit);
  background:linear-gradient(135deg,rgba(224,92,92,.10),rgba(16,31,48,.9) 42%);
}
.key.warn .lbl{color:var(--crit);}
.key.good{
  --tick:var(--jade);
  border-color:rgba(79,203,155,.35);border-left-color:var(--jade);
  background:linear-gradient(135deg,rgba(79,203,155,.09),rgba(16,31,48,.9) 42%);
}
.key.good .lbl{color:var(--jade);}

/* ---------- tables ---------- */
table{
  width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:13.5px;
  background:rgba(16,31,48,.55);border:1px solid rgba(46,82,115,.55);
}
th{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ice);
  text-align:left;padding:10px 12px;font-weight:500;
  background:rgba(22,41,62,.85);
  border-bottom:1px solid var(--rime);
}
td{
  padding:10px 12px;border-bottom:1px solid rgba(46,82,115,.28);vertical-align:top;
}
tr:last-child td{border-bottom:none;}
tr:nth-child(even) td{background:rgba(127,184,216,.03);}
table tr:hover td{background:rgba(127,184,216,.07);}
td.n{white-space:nowrap;}
td.hi{color:var(--accent-hi);font-weight:600;}

.tag{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;
  border:1px solid currentColor;border-radius:2px;white-space:nowrap;
  background:rgba(7,14,23,.5);
}
.t-inf{color:var(--ember);} .t-lan{color:var(--jade);} .t-mar{color:var(--violet);}
.t-grow{color:var(--amber);} .t-keep{color:var(--jade);} .t-drop{color:var(--frost-dim);}

/* ---------- dropdowns ---------- */
details{
  background:linear-gradient(180deg,rgba(22,41,62,.5),rgba(16,31,48,.85));
  border:1px solid rgba(46,82,115,.5);border-left:3px solid var(--rime);
  margin-bottom:5px;border-radius:2px;
  transition:border-color .2s, box-shadow .2s;
}
details[open]{
  border-left-color:var(--accent);border-color:rgba(255,255,255,.14);
  box-shadow:var(--glow);
}
summary{cursor:pointer;list-style:none;padding:14px 16px;display:flex;align-items:center;gap:12px;}
summary::-webkit-details-marker{display:none;}
summary::after{
  content:'›';margin-left:auto;color:var(--frost-dim);
  font-size:20px;flex:none;line-height:1;
  transform:rotate(0deg);transition:transform .2s,color .2s;
}
details[open] summary::after{transform:rotate(90deg);color:var(--accent);}
summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
summary:hover .st{color:var(--accent-hi);}
.st{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:600;
  font-size:20px;line-height:1.05;transition:color .15s;
}
.sd{
  display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--frost-dim);margin-top:3px;
}
.ratio{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;font-weight:600;
  color:var(--ember);flex:none;text-shadow:0 0 14px rgba(255,122,61,.4);
}
.body{padding:2px 16px 17px;font-size:14.5px;}
.body p:last-child{margin-bottom:0;}
.why{
  border-left:2px solid rgba(242,179,61,.5);padding:9px 0 9px 13px;margin:12px 0 0;
  color:var(--frost-dim);font-size:13.5px;background:rgba(242,179,61,.04);
}
.why strong{
  color:var(--amber);font-weight:500;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:3px;
}

/* ---------- index cards ---------- */
.cards{display:grid;gap:9px;margin:26px 0 0;}
@media(min-width:680px){
  .cards{grid-template-columns:1fr 1fr;}
  .cards a.card:first-child{grid-column:1 / -1;}
}
a.card{
  display:block;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(22,41,62,.75),rgba(13,25,40,.92));
  border:1px solid rgba(46,82,115,.55);border-left:3px solid var(--rime);
  padding:20px 20px 18px;border-radius:3px;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
a.card::before{
  content:attr(data-n);position:absolute;right:4px;top:-24px;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;
  font-size:118px;line-height:1;color:rgba(127,184,216,.07);pointer-events:none;
  transition:color .18s;
}
a.card:hover,a.card:focus-visible{
  transform:translateY(-3px);
  border-left-color:var(--ember);border-color:rgba(255,122,61,.4);
  box-shadow:0 6px 26px rgba(0,0,0,.4), 0 0 22px rgba(255,122,61,.18);outline:none;
}
a.card:hover::before{color:rgba(255,122,61,.12);}
a.card h2{font-size:26px;margin:0 0 5px;padding:0;}
a.card h2::before{display:none;}
a.card h2::after{display:none;}
a.card:hover h2,a.card:focus-visible h2{color:var(--ember-hi);}
a.card p{margin:0;color:var(--frost-dim);font-size:13.5px;max-width:58ch;}
.num{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--ember);
  letter-spacing:.2em;display:block;margin-bottom:6px;
}
.num::after{content:' ━━';color:rgba(255,122,61,.35);}

/* ---------- triangle ---------- */
.tri{
  background:
    radial-gradient(340px 130px at 50% 0%, rgba(127,184,216,.09), transparent 70%),
    rgba(16,31,48,.8);
  border:1px solid rgba(46,82,115,.6);padding:18px 15px;margin:16px 0;
  text-align:center;border-radius:3px;position:relative;
}
.tri::before,.tri::after{content:'';position:absolute;width:11px;height:11px;}
.tri::before{top:-1px;left:-1px;border-top:2px solid var(--ice);border-left:2px solid var(--ice);}
.tri::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--ice);border-right:2px solid var(--ice);}
.tri div{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:20px;
  font-weight:600;text-transform:uppercase;margin:7px 0;letter-spacing:.04em;
}
.tri .t-inf{text-shadow:0 0 16px rgba(255,122,61,.5);}
.tri .t-lan{text-shadow:0 0 16px rgba(79,203,155,.45);}
.tri .t-mar{text-shadow:0 0 16px rgba(161,143,216,.5);}
.arw{
  color:var(--frost-dim);font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;padding:0 9px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
}
.tri p{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--frost-dim);margin:13px 0 0;
}

footer{
  margin-top:46px;padding-top:18px;font-size:12px;color:var(--frost-dim);
  position:relative;
}
footer::before{
  content:'';position:absolute;left:0;right:40%;top:0;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
footer a{color:var(--ice);text-decoration:none;}
footer a:hover{color:var(--accent-hi);}

::selection{background:rgba(255,122,61,.35);color:#fff;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;transform:none!important;}}
@media (max-width:430px){
  h1{font-size:40px;}
  header::before{font-size:120px;top:-20px;}
  table{font-size:12.5px;}
  th,td{padding:8px 9px;}
  a.card::before{font-size:88px;}
}

/* ---------- mobile table scrolling ---------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 18px;
  border-radius:2px;}
.tscroll table{margin:0;min-width:540px;}
.tscroll::-webkit-scrollbar{height:6px;}
.tscroll::-webkit-scrollbar-thumb{background:var(--rime);border-radius:3px;}

/* ---------- hero avatars & cards ---------- */
.av{display:inline-flex;width:34px;height:34px;border-radius:50%;
  align-items:center;justify-content:center;flex:none;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:14px;
  color:#fff;letter-spacing:.02em;margin-right:9px;vertical-align:middle;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.16), rgba(7,14,23,.9) 68%);
  border:2px solid var(--rime);position:relative;top:-1px;}
.av-inf{border-color:var(--ember);box-shadow:0 0 10px rgba(255,122,61,.35);}
.av-lan{border-color:var(--jade);box-shadow:0 0 10px rgba(79,203,155,.3);}
.av-mar{border-color:var(--violet);box-shadow:0 0 10px rgba(161,143,216,.35);}
.av-grow{border-color:var(--amber);box-shadow:0 0 10px rgba(242,179,61,.3);}
.av-rare{border-color:var(--frost-dim);}
.herogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:8px;margin:14px 0 20px;}
.hcard{background:linear-gradient(150deg,rgba(22,41,62,.7),rgba(13,25,40,.92));
  border:1px solid rgba(46,82,115,.55);border-left:3px solid var(--rime);
  padding:14px 15px;border-radius:3px;position:relative;overflow:hidden;}
.hcard.c-inf{border-left-color:var(--ember);} .hcard.c-lan{border-left-color:var(--jade);}
.hcard.c-mar{border-left-color:var(--violet);} .hcard.c-grow{border-left-color:var(--amber);}
.hcard.c-rare{border-left-color:var(--frost-dim);}
.hcard .hhead{display:flex;align-items:center;margin-bottom:8px;}
.hcard .av{width:44px;height:44px;font-size:17px;margin-right:11px;}
.hcard .hname{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:600;
  font-size:21px;line-height:1;display:block;}
.hcard .hclass{display:block;margin-top:4px;}
.hcard p{margin:0;font-size:13px;color:var(--frost-dim);}
.hcard p b{color:var(--frost);}
.hcard .stop{margin-top:9px;padding-top:8px;border-top:1px dashed rgba(46,82,115,.6);
  font-size:12px;}
.hcard .stop em{font-style:normal;color:var(--amber);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5px;
  letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:3px;}