/* ══════════════════════════════════════════════════════════
   COLOR SYSTEM
   Each color is used for exactly one semantic purpose.
   ─────────────────────────────────────────────────────────
   --accent          → UI chrome only (buttons, links, focus)
   --why-c           → Why? section identity ONLY
   --what-c          → What? section identity ONLY
   --ann-*           → One unique color per annotation type
   Category colors   → reserved for tag pills in taxonomy
══════════════════════════════════════════════════════════ */
:root {
  /* Page base */
  --bg:         #f4f6fb;
  --surface:    rgba(255,255,255,0.95);
  --surface2:   rgba(0,0,0,0.055);
  --text:       #0f172a;
  --muted:      #374151;
  --muted2:     #52606d;
  --border:     rgba(15,23,42,0.13);
  --border2:    rgba(15,23,42,0.22);
  --shadow:     0 20px 56px rgba(16,24,56,0.13);
  --radius:     14px;
  --radius2:    20px;
  --focus:      0 0 0 3px rgba(37,99,235,0.22);

  /* UI accent — used ONLY for buttons, links, focus rings */
  --accent:     #2563eb;
  --accent-s:   rgba(37,99,235,0.10);

  /* Shimmer */
  --shimmer: linear-gradient(90deg,transparent 0%,rgba(37,99,235,0.45) 30%,rgba(124,58,237,0.38) 70%,transparent 100%);

  /* ── Why? section identity (burnt orange — matches figure orange cells) ── */
  --why-c:      #c2410c;
  --why-bg:     rgba(194,65,12,0.08);
  --why-border: rgba(194,65,12,0.28);

  /* ── How? section identity (deep navy blue — matches figure blue cells) ── */
  --how-c:      #1e40af;
  --how-bg:     rgba(30,64,175,0.08);
  --how-border: rgba(30,64,175,0.28);

  /* ── What? section identity (dark gold — clearly distinct from orange) ── */
  --what-c:     #856100;
  --what-bg:    rgba(133,97,0,0.09);
  --what-border:rgba(133,97,0,0.28);

  /* ── 7 annotation type colors — each distinct from Why/How/What and from each other ── */
  --enc-c:  #0f766e; --enc-bg:  rgba(15,118,110,0.08);  --enc-br: rgba(15,118,110,0.30);  /* Enclosure  – teal          */
  --con-c:  #475569; --con-bg:  rgba(71,85,105,0.08);   --con-br: rgba(71,85,105,0.30);   /* Connector  – slate         */
  --txt-c:  #047857; --txt-bg:  rgba(4,120,87,0.08);    --txt-br: rgba(4,120,87,0.30);    /* Text       – emerald       */
  --gly-c:  #be185d; --gly-bg:  rgba(190,24,93,0.08);   --gly-br: rgba(190,24,93,0.30);   /* Glyph      – rose          */
  --col-c:  #7e22ce; --col-bg:  rgba(126,34,206,0.08);  --col-br: rgba(126,34,206,0.30);  /* Color      – purple        */
  --ind-c:  #0369a1; --ind-bg:  rgba(3,105,161,0.08);   --ind-br: rgba(3,105,161,0.30);   /* Indicator  – sky blue      */
  --geo-c:  #b91c1c; --geo-bg:  rgba(185,28,28,0.08);   --geo-br: rgba(185,28,28,0.30);   /* Geometric  – crimson       */
}

body.dark {
  --bg:      #0e1016; --surface: rgba(255,255,255,0.07); --surface2: rgba(255,255,255,0.10);
  --text:    #f0f2fa; --muted: #c4d0e3; --muted2: #9aafc0;
  --border:  rgba(255,255,255,0.14); --border2: rgba(255,255,255,0.24);
  --shadow:  0 16px 44px rgba(0,0,0,0.55);
  --focus:   0 0 0 3px rgba(120,148,255,0.32);
  --accent:  #7b94ff; --accent-s: rgba(123,148,255,0.13);
  --shimmer: linear-gradient(90deg,transparent 0%,rgba(120,148,255,0.55) 30%,rgba(180,120,255,0.45) 70%,transparent 100%);
  --why-c:   #f97316; --why-bg: rgba(249,115,22,0.13); --why-border: rgba(249,115,22,0.32);
  --how-c:   #6085ff; --how-bg: rgba(96,133,255,0.13); --how-border: rgba(96,133,255,0.32);
  --what-c:  #eab308; --what-bg: rgba(234,179,8,0.12); --what-border: rgba(234,179,8,0.30);
  --enc-c:#2dd4bf;--enc-bg:rgba(45,212,191,0.10); --enc-br:rgba(45,212,191,0.30);
  --con-c:#94a3b8;--con-bg:rgba(148,163,184,0.10);--con-br:rgba(148,163,184,0.30);
  --txt-c:#34d399;--txt-bg:rgba(52,211,153,0.10); --txt-br:rgba(52,211,153,0.30);
  --gly-c:#f472b6;--gly-bg:rgba(244,114,182,0.10);--gly-br:rgba(244,114,182,0.30);
  --col-c:#a78bfa;--col-bg:rgba(167,139,250,0.10);--col-br:rgba(167,139,250,0.30);
  --ind-c:#38bdf8;--ind-bg:rgba(56,189,248,0.10); --ind-br:rgba(56,189,248,0.30);
  --geo-c:#f87171;--geo-bg:rgba(248,113,113,0.10);--geo-br:rgba(248,113,113,0.30);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:"IBM Plex Sans","Avenir Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15.5px;line-height:1.6;color:var(--text);
  background:
    radial-gradient(900px 600px at 15% 0%,rgba(37,99,235,0.09),transparent 60%),
    radial-gradient(800px 520px at 90% 10%,rgba(124,58,237,0.07),transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  transition:background-color 0.3s,color 0.3s;
}
body.dark{
  background:
    radial-gradient(900px 600px at 15% 0%,rgba(120,148,255,0.13),transparent 60%),
    radial-gradient(800px 520px at 90% 10%,rgba(180,120,255,0.09),transparent 60%),
    var(--bg);
}
button,input{font:inherit;color:inherit;} button{cursor:pointer;} a{color:inherit;text-decoration:none;}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(120,130,160,0.22);border-radius:999px;}

/* ── Header ── */
.top{
  position:sticky;top:0;z-index:500;
  border-bottom:1px solid var(--border);
  background:rgba(244,246,251,0.85);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 4px 28px rgba(20,30,60,0.09);
}
body.dark .top{background:rgba(10,11,16,0.88);border-bottom-color:rgba(255,255,255,0.07);}
.top::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--shimmer);pointer-events:none;}
.top__inner{max-width:1200px;margin:0 auto;padding:12px 24px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px 20px;}
.top__title h1{
  font-size:21px;font-weight:800;letter-spacing:-0.022em;line-height:1.14;
  background:linear-gradient(115deg,#151923 0%,#2563eb 55%,#7c3aed 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:2px;
}
body.dark .top__title h1{background:linear-gradient(115deg,#f0f2fa 0%,rgba(167,187,255,0.95) 55%,rgba(200,150,255,0.82) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.top__sub{font-size:13px;color:var(--muted);}
.top__authors{font-size:12px;color:var(--muted);margin-top:1px;}
.top__authors em{color:var(--accent);font-style:normal;font-weight:700;}
.top__actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.top__nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px;}
.top__nav a{font-size:12px;font-weight:700;color:var(--muted);padding:4px 11px;border-radius:999px;border:1px solid var(--border2);background:var(--surface2);transition:all 0.16s ease;box-shadow:0 1px 3px rgba(16,24,56,0.05);line-height:1.5;}
.top__nav a:hover{color:var(--accent);border-color:rgba(37,99,235,0.35);background:var(--accent-s);box-shadow:0 2px 8px rgba(37,99,235,0.10);transform:translateY(-1px);}
.top__nav a.active{color:var(--accent);border-color:rgba(37,99,235,0.35);background:var(--accent-s);}

.btn{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:5px 12px;border-radius:8px;border:1.5px solid var(--border2);background:var(--surface2);color:var(--muted);cursor:pointer;transition:all 0.17s;white-space:nowrap;}
.btn:hover{background:var(--accent-s);border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.btn--paper{background:var(--accent-s);border-color:rgba(37,99,235,0.32);color:var(--accent);}
.btn--paper:hover{border-color:var(--accent);}

.toggle-sw{position:relative;}
.toggle-sw input{position:absolute;opacity:0;width:0;height:0;}
.toggle-lbl{display:flex;align-items:center;width:48px;height:24px;background:var(--surface2);border:1.5px solid var(--border2);border-radius:999px;cursor:pointer;position:relative;padding:2px;transition:all 0.25s;}
.toggle-inner{width:18px;height:18px;border-radius:50%;background:var(--accent);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,0.18);}
.toggle-sw input:checked + .toggle-lbl .toggle-inner{transform:translateX(22px);}
.ti{position:absolute;font-size:10px;pointer-events:none;} .sun{left:4px;} .moon{right:4px;}

/* ── Layout ── */
.page{max-width:1200px;margin:0 auto;padding:32px 24px 64px;}
.section{margin-bottom:56px;scroll-margin-top:72px;}
.section + .section{padding-top:4px;border-top:1px solid var(--border);}
.sec-head{margin-bottom:18px;}
.sec-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-s);border:1px solid rgba(37,99,235,0.22);padding:3px 10px;border-radius:999px;margin-bottom:7px;}
.sec-title{font-size:26px;font-weight:900;letter-spacing:-0.022em;line-height:1.16;color:var(--text);}
.sec-desc{margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.64;max-width:800px;}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:24px;}
.stat{background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--accent);border-radius:10px;padding:12px 10px 11px;text-align:center;box-shadow:0 1px 6px rgba(16,24,56,0.05);backdrop-filter:blur(8px);transition:transform 0.18s,box-shadow 0.18s;}
.stat:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,24,56,0.10);}
.stat-n{font-size:28px;font-weight:900;letter-spacing:-0.03em;line-height:1;color:var(--accent);}
.stat-l{font-size:11.5px;color:var(--muted2);margin-top:4px;line-height:1.4;}

/* ── Overview Hero ── */
.overview-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;margin-bottom:16px;}
.ov-fig{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px;box-shadow:0 1px 6px rgba(16,24,56,0.05);}
.ov-fig img{display:block;width:100%;height:auto;border-radius:7px;border:1px solid var(--border);}
.ov-fig figcaption{margin-top:7px;font-size:11.5px;color:var(--muted2);line-height:1.55;}
.ov-fig--method{
  border-color:var(--border2);
  background:
    radial-gradient(140% 120% at 10% 0%, rgba(37,99,235,0.10), transparent 58%),
    radial-gradient(140% 120% at 100% 100%, rgba(194,65,12,0.10), transparent 62%),
    var(--surface);
  box-shadow:0 8px 26px rgba(16,24,56,0.12);
}
.method-fig-stage{
  border-radius:8px;
  border:1px solid var(--border);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(246,248,254,0.75));
  padding:8px;
}
.method-fig-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
  border:none !important;
  background:transparent;
  filter:drop-shadow(0 6px 18px rgba(16,24,56,0.20));
}
body.dark .method-fig-stage{
  border-color:rgba(255,255,255,0.30);
  background:
    linear-gradient(145deg, rgba(250,252,255,0.95), rgba(241,246,255,0.90));
  box-shadow:
    inset 0 0 0 1px rgba(120,148,255,0.22),
    0 10px 24px rgba(0,0,0,0.35);
}
body.dark .method-fig-img{
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.28)) contrast(1.05) brightness(1.03);
}
.ov-hero-copy{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 16px;box-shadow:0 1px 6px rgba(16,24,56,0.05);}
.ov-hero-copy h3{font-size:10px;font-weight:800;letter-spacing:0.10em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px;}
.ov-hero-copy p{font-size:13.5px;color:var(--muted);line-height:1.64;margin-bottom:10px;}
.ov-pill-grid{display:grid;grid-template-columns:1fr;gap:6px;}
.ov-pill{font-size:13px;color:var(--muted);line-height:1.58;padding:8px 12px 8px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;border-left:3px solid var(--border2);}
.ov-pill strong{color:var(--text);font-weight:700;}
/* Color-coded left borders: Design Space guide pills ONLY.
   Why/How/What colors are used here because each pill explicitly
   describes one dimension — the color is semantically meaningful.
   All other pill groups use the neutral default (--border2). */
.ds-overview-copy .ov-pill:nth-child(1){border-left-color:var(--why-c);}
.ds-overview-copy .ov-pill:nth-child(2){border-left-color:var(--how-c);}
.ds-overview-copy .ov-pill:nth-child(3){border-left-color:var(--what-c);}
.overview-abstract{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;box-shadow:0 1px 6px rgba(16,24,56,0.05);margin-bottom:12px;}
.overview-abstract h3{font-size:10px;font-weight:800;letter-spacing:0.10em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px;}
.overview-abstract p{font-size:14px;color:var(--muted);line-height:1.64;margin-bottom:10px;}

/* ── Top Design Space Figure ── */
.ds-overview{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:start;}
.ds-overview-fig{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px;box-shadow:0 1px 6px rgba(16,24,56,0.05);}
.design-space-cap{margin-top:8px;font-size:11.5px;color:var(--muted2);line-height:1.55;}
.ds-overview-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;}
.ds-overview-row--what{margin-top:10px;grid-template-columns:1fr;justify-items:center;}
.ds-node{background:var(--surface2);border:1.5px solid var(--border);border-radius:12px;padding:12px 12px;min-height:92px;display:flex;flex-direction:column;justify-content:center;}
.ds-node h3{font-size:16px;font-weight:900;line-height:1;margin-bottom:6px;}
.ds-node p{font-size:11.5px;line-height:1.55;color:var(--muted);}
.ds-node--why{border-color:var(--why-border);background:var(--why-bg);}
.ds-node--why h3{color:var(--why-c);}
.ds-node--how h3{color:var(--text);}
.ds-node--what{border-color:var(--what-border);background:var(--what-bg);max-width:80%;}
.ds-node--what h3{color:var(--what-c);}
.ds-arrow-h{font-size:22px;font-weight:800;color:var(--muted2);padding:0 3px;}
.ds-arrow-v{font-size:20px;font-weight:800;color:var(--muted2);line-height:1;}
.ds-overview-copy{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 1px 6px rgba(16,24,56,0.05);display:flex;flex-direction:column;}
.ds-overview-copy h3{font-size:10px;font-weight:800;letter-spacing:0.10em;text-transform:uppercase;color:var(--muted2);margin-bottom:10px;}
.design-space-figure{display:block;min-height:420px;}
.design-space-img{display:block;width:100%;height:auto;border-radius:7px;border:1px solid var(--border);}
.dsf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dsf-panel{border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--surface2);}
.dsf-panel--why{background:var(--why-bg);border-color:var(--why-border);}
.dsf-panel--how{background:var(--how-bg);border-color:var(--how-border);}
.dsf-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;}
.dsf-head h4{font-size:22px;font-weight:900;line-height:1;}
.dsf-panel--why .dsf-head h4{color:var(--why-c);}
.dsf-panel--how .dsf-head h4{color:var(--how-c);}
.dsf-head p{font-size:10.5px;color:var(--muted2);}
.dsf-why-head{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 6px 128px;}
.dsf-why-head span{font-size:9.5px;color:var(--muted2);transform:rotate(-35deg);transform-origin:left bottom;white-space:nowrap;}
.dsf-row{display:grid;grid-template-columns:118px 118px 1fr;gap:8px;align-items:center;padding:5px 0;border-top:1px dashed rgba(0,0,0,0.08);}
.dsf-row:first-of-type{border-top:none;}
.dsf-row--how{grid-template-columns:118px 150px 1fr;}
.dsf-type{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--text);}
.ann-svg{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;}
.ann-svg svg{width:20px;height:20px;display:block;stroke-linecap:round;stroke-linejoin:round;}
.dsf-why-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.dsf-cell{height:18px;border-radius:3px;background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.08);}
.dsf-cell.on{background:#e47d2d;border-color:#e47d2d;}
.dsf-usage{margin:0;padding-left:14px;}
.dsf-usage li{font-size:10px;color:var(--text);line-height:1.4;}
.dsf-how-head{display:grid;grid-template-columns:118px 150px 1fr;gap:8px;font-size:9.5px;font-weight:700;color:var(--muted2);margin-bottom:6px;padding-left:0;}
.dsf-how-cells{display:grid;grid-template-columns:repeat(10,1fr) auto;gap:3px;align-items:center;}
.dsf-hcell{height:16px;border-radius:3px;background:rgba(0,0,0,0.05);}
.dsf-hcell.on{background:#8aa6d8;}
.dsf-pct{font-size:10px;font-weight:800;color:#365ea5;padding-left:5px;}
.dsf-ens{font-size:10px;color:var(--text);line-height:1.45;}
.dsf-what{grid-column:1 / -1;border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--surface);}
.dsf-what-title{font-size:22px;font-weight:900;color:var(--what-c);line-height:1;margin-bottom:7px;}
.dsf-what-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.dsf-what-cards article{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 9px;}
.dsf-what-cards h5{font-size:11px;font-weight:800;color:var(--text);margin-bottom:3px;display:flex;align-items:center;justify-content:space-between;gap:6px;}
.dsf-what-cards h5 span{font-size:10px;color:var(--muted2);font-weight:700;}
.dsf-what-cards p{font-size:10.5px;color:var(--muted);line-height:1.5;}
.dsf-key{margin-top:8px;font-size:10px;color:var(--muted2);display:flex;align-items:center;gap:6px;}
.key-dot{width:10px;height:10px;border-radius:2px;background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.08);}
.key-dot.on{background:#e47d2d;border-color:#e47d2d;}
body.dark .dsf-panel--why{background:var(--why-bg);border-color:var(--why-border);}
body.dark .dsf-panel--how{background:var(--how-bg);border-color:var(--how-border);}
body.dark .dsf-cell{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12);}
body.dark .dsf-cell.on{background:#f49a45;border-color:#f49a45;}
body.dark .dsf-hcell{background:rgba(255,255,255,0.08);}
body.dark .dsf-hcell.on{background:#8fb3ff;}
body.dark .dsf-pct{color:#a9c4ff;}
body.dark .dsf-row{border-top-color:rgba(255,255,255,0.12);}
body.dark .cs-table tr.cs-row-hit td{background:rgba(123,148,255,0.18);}

/* ── Abstract ── */
.abstract{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 22px;box-shadow:0 1px 6px rgba(16,24,56,0.05);backdrop-filter:blur(8px);}
.abstract h3{font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px;}
.abstract p{color:var(--muted);font-size:14px;line-height:1.68;}
.abstract strong{color:var(--text);font-weight:700;}
.ov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;}
.ov-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;padding:11px 13px;box-shadow:0 1px 4px rgba(16,24,56,0.04);}
.ov-k{font-size:10.5px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;}
.ov-v{font-size:13px;line-height:1.6;color:var(--muted);}
.ov-v strong{color:var(--text);}

/* ══════════════════════════════════════════
   DESIGN SPACE
══════════════════════════════════════════ */
.ds-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px 22px;box-shadow:0 2px 12px rgba(16,24,56,0.08);backdrop-filter:blur(10px);}
.ds-hint{font-size:11px;color:var(--muted2);text-align:center;margin-bottom:18px;padding:5px 12px;background:var(--surface2);border-radius:7px;border:1px dashed var(--border2);}

/* Why → How row */
.ds-top{display:grid;grid-template-columns:220px 32px 1fr;gap:0;align-items:start;}
.ds-col-head{text-align:center;padding-bottom:14px;}
.ds-col-head-label{font-size:18px;font-weight:900;letter-spacing:-0.01em;}
.ds-col-head-sub{font-size:9.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted2);margin-top:1px;}
.why-head .ds-col-head-label{color:var(--why-c);}
.how-head .ds-col-head-label{color:var(--how-c);}

/* Arrow column */
.ds-arrow{display:flex;align-items:center;justify-content:center;padding-top:46px;color:var(--border2);font-size:18px;font-weight:300;}

/* Why cards */
.why-items{display:flex;flex-direction:column;gap:5px;}
.why-card{
  padding:9px 12px;border-radius:8px;
  border:1.5px solid var(--why-border);
  background:var(--surface2);cursor:pointer;
  transition:all 0.22s cubic-bezier(0.2,0.9,0.2,1);user-select:none;
}
.why-card:hover,.why-card.active{background:var(--why-bg);border-color:var(--why-c);box-shadow:0 0 0 3px rgba(194,65,12,0.09),3px 5px 16px rgba(194,65,12,0.14);transform:translateX(3px);}
.why-card.dim{opacity:0.22;transform:none!important;box-shadow:none!important;}
.why-name{font-size:12.5px;font-weight:800;color:var(--why-c);}
.why-desc{font-size:11px;color:var(--muted2);margin-top:1px;line-height:1.4;}

/* Annotation type cards (How) */
.ann-items{display:flex;flex-direction:column;gap:4px;}
.ann-card{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:8px;
  border:1.5px solid var(--border);
  background:var(--surface2);cursor:pointer;
  transition:all 0.22s cubic-bezier(0.2,0.9,0.2,1);user-select:none;
}
.ann-card:hover{transform:scale(1.015);}
.ann-card.active{transform:scale(1.018);}
.ann-card.dim{opacity:0.20;transform:none!important;box-shadow:none!important;}

.ann-icon{width:24px;height:24px;flex-shrink:0;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;border:1.5px solid;}
.ann-body{flex:1;min-width:0;}
.ann-name{font-size:11.5px;font-weight:800;}
.ann-bar-row{display:flex;align-items:center;gap:6px;margin-top:2px;}
.ann-bar{flex:1;height:3px;background:var(--border2);border-radius:2px;overflow:hidden;}
.ann-fill{height:100%;border-radius:2px;width:0;transition:width 0.9s cubic-bezier(0.2,0.9,0.2,1);}
.ann-pct{font-size:9.5px;color:var(--muted2);white-space:nowrap;}

/* ── What? section (INDEPENDENT — below Why/How) ── */
.ds-divider{
  display:flex;align-items:center;gap:12px;margin:20px 0 14px;
}
.ds-divider-line{flex:1;height:1px;background:var(--border2);}
.ds-divider-label{
  font-size:11px;font-weight:700;color:var(--what-c);
  background:var(--what-bg);border:1px solid var(--what-border);
  padding:4px 14px;border-radius:999px;white-space:nowrap;
  letter-spacing:0.02em;
}
.ds-divider-note{font-size:10.5px;color:var(--muted2);font-style:italic;}

.what-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.what-card{
  padding:13px 14px;border-radius:10px;
  border:1.5px solid var(--what-border);
  background:var(--surface2);cursor:pointer;
  transition:all 0.22s cubic-bezier(0.2,0.9,0.2,1);user-select:none;
}
.what-card:hover,.what-card.active{background:var(--what-bg);border-color:var(--what-c);box-shadow:0 0 0 3px rgba(133,97,0,0.10),2px 5px 18px rgba(133,97,0,0.15);}
.what-card.dim{opacity:0.22;transform:none!important;box-shadow:none!important;}
.what-name{font-size:13px;font-weight:800;color:var(--what-c);}
.what-pct{font-size:10px;font-weight:700;color:var(--muted2);margin-top:2px;}
.what-desc{font-size:11px;color:var(--muted2);margin-top:5px;line-height:1.45;}

/* Info panel */
.ds-info{margin-top:16px;padding:13px 16px;border-radius:9px;background:var(--surface2);border:1px solid var(--border2);animation:fadeUp 0.24s ease both;}
.ds-info h4{font-size:13px;font-weight:800;margin-bottom:5px;}
.ds-info p{font-size:12.5px;color:var(--muted);line-height:1.62;}
.ds-ens-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;align-items:center;}
.ds-ens-lbl{font-size:10px;font-weight:700;color:var(--muted2);}
.ds-ens-tag{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface2);border:1px solid var(--border2);color:var(--muted);}
.ds-what-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;align-items:center;}
.ds-what-lbl{font-size:10px;font-weight:700;color:var(--muted2);}
.ds-what-tag{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--what-bg);border:1px solid var(--what-border);color:var(--what-c);}

/* ══════════════════════════════════════════
   TAXONOMY
══════════════════════════════════════════ */
.tax-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.tax-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.tax-filter{padding:5px 12px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface2);font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:all 0.16s;}
.tax-filter:hover{border-color:var(--accent);color:var(--accent);}
.tax-filter.active{background:var(--accent-s);border-color:var(--accent);color:var(--accent);}
.tax-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;box-shadow:0 1px 6px rgba(16,24,56,0.05);backdrop-filter:blur(8px);transition:transform 0.18s,box-shadow 0.18s,border-color 0.18s;display:flex;flex-direction:column;gap:9px;cursor:pointer;position:relative;}
.tax-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(16,24,56,0.12);}
.tax-card.active{box-shadow:0 0 0 3px var(--accent-s),0 8px 28px rgba(16,24,56,0.12);}
.tax-card::after{content:"expand";position:absolute;bottom:10px;right:12px;font-size:9px;font-weight:800;letter-spacing:0.10em;text-transform:uppercase;color:var(--border2);opacity:0;transition:opacity 0.18s;}
.tax-card:hover::after{opacity:1;}
.tax-card.active::after{content:"selected";color:var(--accent);opacity:1;}
.tax-top{display:flex;align-items:center;gap:10px;}
.tax-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;flex-shrink:0;border:1.5px solid;}
.tax-icon .ann-svg{width:22px;height:22px;}
.tax-icon .ann-svg svg{width:22px;height:22px;}
.tax-name{font-size:16px;font-weight:800;}
.tax-count{font-size:11.5px;color:var(--muted2);}
.tax-bar-row{display:flex;align-items:center;gap:7px;}
.tax-bar{flex:1;height:3px;background:var(--surface2);border-radius:2px;overflow:hidden;}
.tax-fill{height:100%;border-radius:2px;width:0;transition:width 1s cubic-bezier(0.2,0.9,0.2,1);}
.tax-pct{font-size:11.5px;font-weight:800;white-space:nowrap;}
.tax-desc{font-size:13px;color:var(--muted);line-height:1.6;}
.tax-tasks{display:flex;flex-wrap:wrap;gap:4px;}
.task-pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--why-bg);border:1px solid var(--why-border);color:var(--why-c);}
.tax-detail{margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;box-shadow:0 2px 10px rgba(16,24,56,0.06);display:grid;grid-template-columns:1.1fr 1fr;gap:12px;}
.tax-detail h4{font-size:16px;font-weight:800;margin-bottom:6px;}
.tax-detail p{font-size:13.5px;color:var(--muted);line-height:1.62;}
.tax-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;align-items:center;}
.tax-lbl{font-size:10.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted2);}
.tax-chip{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--border2);background:var(--surface2);color:var(--muted);}
.tax-chip--why{background:var(--why-bg);border-color:var(--why-border);color:var(--why-c);}
.tax-chip--what{background:var(--what-bg);border-color:var(--what-border);color:var(--what-c);}
.tax-mini-list{margin:7px 0 0 15px;padding:0;}
.tax-mini-list li{font-size:12.5px;color:var(--muted);line-height:1.62;margin-bottom:5px;}
.tax-mini-list li:last-child{margin-bottom:0;}

/* ══════════════════════════════════════════
   CASE STUDIES
══════════════════════════════════════════ */
.cs-tabs{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap;}
.cs-tab{padding:6px 15px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface2);font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all 0.2s;}
.cs-tab.active{background:var(--accent-s);border-color:var(--accent);color:var(--accent);}
.cs-tab:hover:not(.active){background:var(--surface);border-color:var(--border2);}
.cs-panel{display:none;}
.cs-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cs-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;box-shadow:0 1px 6px rgba(16,24,56,0.05);backdrop-filter:blur(8px);}
.cs-header-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;align-items:center;}
.cs-badge{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid;display:inline-flex;align-items:center;}
.cs-card h4{font-size:17px;font-weight:800;margin-bottom:7px;}
.cs-card p{font-size:14px;color:var(--muted);line-height:1.62;margin-bottom:10px;}
.cs-fig{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:4px;overflow:hidden;}
.cs-fig svg{width:100%;height:auto;display:block;}
.cs-fig img{width:100%;height:auto;display:block;border-radius:8px;}
.cs-figure-note{margin-top:8px;margin-bottom:0;font-size:12px;color:var(--muted2);font-style:italic;}

/* Breakdown table */
.cs-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px;}
.cs-table th{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted2);text-align:left;padding:7px 9px;border-bottom:1px solid var(--border);}
.cs-table td{padding:8px 9px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--muted);line-height:1.58;font-size:13px;}
.cs-table tr:last-child td{border-bottom:none;}
.cs-table tr:hover td{background:var(--surface2);}
.cs-table tr.cs-row-hit td{background:rgba(37,99,235,0.08);}
.td-why{color:var(--why-c);font-weight:700;}
.td-what{color:var(--what-c);font-weight:700;}
.cs-row-tag{display:inline-flex;margin-top:5px;padding:2px 8px;border-radius:999px;background:var(--accent-s);border:1px solid rgba(37,99,235,0.24);font-size:10.5px;font-weight:700;color:var(--accent);}
.cs-insights{margin-top:10px;padding:10px 13px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;}
.cs-insights h5{font-size:10.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted2);margin-bottom:7px;}
.cs-insights ul{margin:0 0 0 15px;padding:0;}
.cs-insights li{font-size:13px;color:var(--muted);line-height:1.62;margin-bottom:6px;}
.cs-insights li:last-child{margin-bottom:0;}

/* ── Citation ── */
.cite-wrap{position:relative;}
.cite-block{background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:18px 20px;font-family:"Courier New",Courier,monospace;font-size:13.5px;line-height:1.72;color:var(--muted);overflow-x:auto;white-space:pre;}
.cite-copy{position:absolute;top:10px;right:12px;padding:4px 12px;border-radius:7px;border:1px solid var(--border2);background:var(--surface);font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:all 0.18s;font-family:system-ui,sans-serif;}
.cite-copy:hover{background:var(--accent-s);color:var(--accent);border-color:var(--accent);}

/* ── Nav dots ── */
.nav-dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:400;}
.nav-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);cursor:pointer;transition:all 0.22s;border:none;padding:0;}
.nav-dot.active,.nav-dot:hover{background:var(--accent);transform:scale(1.5);}

/* ── Footer ── */
.footer{border-top:1px solid var(--border);padding:18px 24px;text-align:center;color:var(--muted2);font-size:13px;line-height:1.8;}
.footer a{color:var(--accent);text-decoration:none;}
.footer a:hover{text-decoration:underline;}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.fu{opacity:0;animation:fadeUp 0.48s cubic-bezier(0.2,0.9,0.2,1) forwards;}
.d1{animation-delay:0.06s;} .d2{animation-delay:0.13s;} .d3{animation-delay:0.20s;} .d4{animation-delay:0.27s;}

/* ── Responsive ── */
@media(max-width:960px){
  .ds-overview{grid-template-columns:1fr;}
  .dsf-grid{grid-template-columns:1fr;}
  .dsf-row,.dsf-row--how,.dsf-how-head{grid-template-columns:1fr;}
  .dsf-why-head{margin-left:0;transform:none;}
  .dsf-what-cards{grid-template-columns:1fr;}
  .ds-overview-row{grid-template-columns:1fr;}
  .ds-arrow-h{display:none;}
  .ds-node--what{max-width:100%;}
  .overview-hero{grid-template-columns:1fr;}
  .ds-top{grid-template-columns:1fr;gap:16px;}
  .ds-arrow{display:none;}
  .cs-panel.active{grid-template-columns:1fr;}
  .nav-dots{display:none;}
  .what-grid{grid-template-columns:1fr;}
  .tax-detail{grid-template-columns:1fr;}
  .ov-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .tax-grid{grid-template-columns:1fr 1fr;}
  .top__inner{display:flex;flex-direction:column;align-items:flex-start;}
  .top__actions{justify-content:flex-start;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;}}