/* ===========================================================
   Entropy Box — design system
   Scientific intelligence infrastructure: single accent, hairline
   rules, banded light/dark rhythm. No particles, no aurora, no
   multi-hue gradients.
   =========================================================== */

/* ---------- global tokens ---------- */
:root{
  --shell:#05070D;          /* page shell */
  --deep:#0B1F33;           /* supporting deep blue */
  --cyan:#00D4FF;           /* the one accent */
  --cyan-ink:#0A6E8C;       /* same hue, darkened for light bands */

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter","Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,
         Arial,"PingFang SC","Microsoft YaHei",sans-serif;

  --maxw:1120px;
  --pad:26px;
}

*{box-sizing:border-box}
html{background:var(--shell);scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--shell);font-family:var(--sans);
  font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* ===========================================================
   BANDS — every section declares its own surface + ink scale.
   Components below read only from these variables.
   =========================================================== */
.band{position:relative;padding:96px 0;background:var(--surface);color:var(--ink)}
.band + .band{border-top:1px solid var(--rule)}

.band.dark{
  --surface:#05070D;
  --ink:#F8FAFC; --ink-2:#94A3B8; --ink-3:#64748B;
  --rule:rgba(148,163,184,.14); --rule-2:rgba(148,163,184,.28);
  --card:#0A0F1A; --card-2:#080C15;
  --accent:var(--cyan); --accent-soft:rgba(0,212,255,.10);
  --accent-line:rgba(0,212,255,.34);
}
.band.deep{
  --surface:#070C16;
  --ink:#F8FAFC; --ink-2:#94A3B8; --ink-3:#64748B;
  --rule:rgba(148,163,184,.14); --rule-2:rgba(148,163,184,.28);
  --card:#0B1220; --card-2:#090E19;
  --accent:var(--cyan); --accent-soft:rgba(0,212,255,.10);
  --accent-line:rgba(0,212,255,.34);
}
.band.light{
  --surface:#FFFFFF;
  --ink:#0B1220; --ink-2:#475569; --ink-3:#7C8CA3;
  --rule:#E2E8F0; --rule-2:#CBD5E1;
  --card:#FFFFFF; --card-2:#F8FAFC;
  --accent:var(--cyan-ink); --accent-soft:rgba(10,110,140,.07);
  --accent-line:rgba(10,110,140,.28);
}
.band.tint{
  --surface:#F1F5F9;
  --ink:#0B1220; --ink-2:#475569; --ink-3:#7C8CA3;
  --rule:#DCE3EC; --rule-2:#C3CDDA;
  --card:#FFFFFF; --card-2:#F8FAFC;
  --accent:var(--cyan-ink); --accent-soft:rgba(10,110,140,.07);
  --accent-line:rgba(10,110,140,.28);
}

/* the faint knowledge-graph lattice, dark bands only */
.band.dark::before,.band.deep::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.055;
  background-image:
    linear-gradient(rgba(148,163,184,.9) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.9) 1px,transparent 1px);
  background-size:64px 64px}
.band > .wrap{position:relative;z-index:1}

/* ===========================================================
   TYPE
   =========================================================== */
h1,h2,h3,h4,h5{margin:0;font-weight:600;letter-spacing:-.022em;color:var(--ink)}
p{margin:0 0 15px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:var(--mono);font-size:.87em}
em{font-style:italic}

.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--accent);opacity:.55}

.display{font-size:clamp(36px,5.6vw,60px);line-height:1.05;font-weight:600;
  letter-spacing:-.032em}
.title{font-size:clamp(25px,3.4vw,36px);line-height:1.18;font-weight:600;
  letter-spacing:-.026em;max-width:23ch;margin:0 0 18px}
.subtitle{font-size:clamp(20px,2.6vw,26px);line-height:1.28;font-weight:500;
  letter-spacing:-.02em;margin:0 0 14px}
.lede{font-size:18px;line-height:1.62;color:var(--ink-2);max-width:600px}
.lede strong{color:var(--ink);font-weight:500}
.note{font-size:13px;line-height:1.62;color:var(--ink-3);max-width:78ch}
.note a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.note a:hover{color:var(--accent)}

/* hairline section rule, "Research Dataset" style */
.rule-label{display:flex;align-items:center;gap:16px;margin:0 0 26px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.rule-label::before,.rule-label::after{content:'';height:1px;background:var(--rule)}
.rule-label::before{width:26px;flex:none}
.rule-label::after{flex:1}

/* ===========================================================
   NAV
   =========================================================== */
.nav{position:sticky;top:0;z-index:60;background:rgba(5,7,13,.86);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(148,163,184,.13)}
.nav .wrap{display:flex;align-items:center;gap:34px;height:58px}
.mark{display:flex;align-items:center;gap:10px;color:#F8FAFC;font-weight:600;
  font-size:15px;letter-spacing:-.015em;flex:none}
.mark:hover{text-decoration:none}
.mark svg{width:22px;height:22px;flex:none}
.mark .zh{color:#64748B;font-weight:400;font-size:13px}
.navlinks{display:flex;gap:26px;margin-left:auto;font-size:13.5px}
.navlinks a{color:#94A3B8;font-weight:400}
.navlinks a:hover{color:#F8FAFC;text-decoration:none}
.navlinks a.on{color:#F8FAFC}
.navpaper{font-size:13.5px;color:#94A3B8;flex:none;
  padding-left:26px;border-left:1px solid rgba(148,163,184,.18)}
.navpaper:hover{color:var(--cyan);text-decoration:none}
@media(max-width:1000px){.navlinks{display:none}
  .navpaper{margin-left:auto;padding-left:0;border-left:none}}

/* ===========================================================
   BUTTONS — Apple register
   =========================================================== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;
  border-radius:8px;font-size:14.5px;font-weight:500;line-height:1;
  border:1px solid transparent;transition:.18s ease;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn .ar{transition:transform .18s ease}
.btn:hover .ar{transform:translateX(3px)}

.dark .btn-primary,.deep .btn-primary,.nav .btn-primary{
  background:#FFFFFF;color:#05070D;border-color:#FFFFFF}
.dark .btn-primary:hover,.deep .btn-primary:hover{background:#E2E8F0;border-color:#E2E8F0}
.light .btn-primary,.tint .btn-primary{
  background:#0B1220;color:#FFFFFF;border-color:#0B1220}
.light .btn-primary:hover,.tint .btn-primary:hover{background:#1E293B;border-color:#1E293B}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--ink-2)}
.btn-text{padding:12px 4px;background:none;border:none;color:var(--ink-2)}
.btn-text:hover{color:var(--accent)}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:34px}

/* ===========================================================
   CARDS
   =========================================================== */
.grid{display:grid;gap:1px;background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.grid > *{background:var(--surface)}

.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.card{background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:22px 23px;display:block;color:inherit;transition:.18s ease;position:relative}
a.card:hover{border-color:var(--rule-2);text-decoration:none;
  transform:translateY(-2px)}
.light a.card:hover,.tint a.card:hover{box-shadow:0 12px 30px -18px rgba(11,18,32,.35)}
.dark a.card:hover,.deep a.card:hover{background:var(--card-2)}
.card .ct{font-size:16px;font-weight:500;letter-spacing:-.014em;margin:0 0 7px;
  color:var(--ink)}
.card .cd{font-size:13.5px;line-height:1.58;color:var(--ink-2);margin:0}
.card .cm{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.card .arrow{position:absolute;top:20px;right:21px;color:var(--ink-3);font-size:14px;
  opacity:0;transition:.18s ease}
a.card:hover .arrow{opacity:1;transform:translateX(3px);color:var(--accent)}
.card.accent{border-left:2px solid var(--accent);border-radius:0 10px 10px 0}

.tag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:3px;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent-line);margin-left:8px;vertical-align:middle}
.tag.warn{background:rgba(217,119,6,.10);color:#B45309;border-color:rgba(217,119,6,.30)}
.dark .tag.warn,.deep .tag.warn{color:#FBBF24;border-color:rgba(251,191,36,.30)}
.tag.neg{background:rgba(220,38,38,.09);color:#B91C1C;border-color:rgba(220,38,38,.28)}
.dark .tag.neg,.deep .tag.neg{color:#F87171;border-color:rgba(248,113,113,.30)}
.tag.mute{background:transparent;color:var(--ink-3);border-color:var(--rule-2)}

/* ===========================================================
   METRICS — research dataset, not SaaS dashboard
   =========================================================== */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule)}
.metric{padding:26px 24px 24px;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.metric:nth-child(4n){border-right:none}
.metric .mv{font-size:clamp(27px,3.2vw,36px);font-weight:500;line-height:1;
  letter-spacing:-.035em;color:var(--ink);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.metric .mk{margin-top:10px;font-size:12.5px;color:var(--ink-2);letter-spacing:-.005em}
.metric .mn{margin-top:5px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  letter-spacing:.04em}
@media(max-width:860px){.metrics{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(4n){border-right:1px solid var(--rule)}
  .metric:nth-child(2n){border-right:none}}

/* ===========================================================
   LAYOUT HELPERS
   =========================================================== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;
  align-items:center}
.split.lead-left{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.split.top{align-items:start}
@media(max-width:940px){.split,.split.lead-left{grid-template-columns:1fr;gap:38px}}

.list{margin:0;padding:0;list-style:none}
.list li{padding:15px 0;border-bottom:1px solid var(--rule);font-size:14.5px;
  line-height:1.62;color:var(--ink-2)}
.list li:first-child{border-top:1px solid var(--rule)}
.list li b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px;
  font-size:15px}
.list li strong{color:var(--ink);font-weight:500}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule)}
th{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
td{color:var(--ink-2)}
td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ink)}

pre{background:var(--card-2);border:1px solid var(--rule);border-radius:8px;
  padding:18px 20px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;
  line-height:1.7;color:var(--ink-2);margin:0}
pre .k{color:var(--accent)}

video{width:100%;border:1px solid var(--rule);border-radius:10px;background:#000}

.chip{display:inline-flex;align-items:center;font-size:12.5px;padding:7px 14px;
  border-radius:100px;border:1px solid var(--rule);background:var(--card);
  color:var(--ink-2)}
.chip b{color:var(--ink);font-weight:500}
.chiprow{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}

/* ===========================================================
   CHARTS — colours resolve per band
   =========================================================== */
.chartbox{border:1px solid var(--rule);border-radius:10px;background:var(--card);
  padding:22px 20px 16px}
.chartbox svg{width:100%;height:auto}
.chart-cap{margin:12px 4px 0;font-size:12px;line-height:1.55;color:var(--ink-3)}
.g-axis{stroke:var(--rule-2);stroke-width:1;fill:none}
.g-grid{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 4;fill:none}
.g-lbl{fill:var(--ink-3);font-family:var(--mono);font-size:10px}
.g-key{font-family:var(--sans);font-size:11.5px;font-weight:500}
.l-accent{stroke:var(--accent);stroke-width:2;fill:none;
  stroke-linejoin:round;stroke-linecap:round}
.l-neg{stroke:#DC2626;stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.dark .l-neg,.deep .l-neg{stroke:#F87171}
.f-accent{fill:var(--accent);opacity:.10}
.k-accent{fill:var(--accent)}
.k-neg{fill:#DC2626}
.dark .k-neg,.deep .k-neg{fill:#F87171}
.dot-accent{fill:var(--accent)}

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{background:#05070D;color:#94A3B8;padding:64px 0 88px;font-size:13.5px;
  border-top:1px solid rgba(148,163,184,.14)}
.foot a{color:#CBD5E1}
.foot a:hover{color:var(--cyan)}
.footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;
  padding-bottom:38px}
@media(max-width:800px){.footgrid{grid-template-columns:1fr;gap:30px}}
.footgrid h5{font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:#64748B;margin:0 0 14px}
.footgrid ul{margin:0;padding:0;list-style:none}
.footgrid li{margin:8px 0}
.footnote{border-top:1px solid rgba(148,163,184,.14);padding-top:26px;
  font-size:12.5px;line-height:1.75;color:#64748B;max-width:88ch}
.footnote strong{color:#94A3B8;font-weight:500}

/* ===========================================================
   MOTION — restrained
   =========================================================== */
[data-rv]{opacity:0;transform:translateY(14px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),
             transform .65s cubic-bezier(.22,.61,.36,1)}
[data-rv].in{opacity:1;transform:none}
.chartbox svg polyline[data-draw]{
  transition:stroke-dashoffset 1.4s cubic-bezier(.33,.9,.36,1)}

@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1;transform:none;transition:none}
  .chartbox svg polyline[data-draw]{transition:none}
  .btn,.card,a.card:hover{transition:none;transform:none}
}
@media(max-width:700px){
  .band{padding:64px 0}
  :root{--pad:20px}
}