/* =================================================================
   linjm.cc — Jiamao Lin (林佳茂)
   Bright "academic paper" theme: warm paper-white surface, near-black
   high-contrast text, one deep-ochre accent. Interactive figures sit on
   dark "plates" (light page, dark figure — the journal-figure look).
   Newsreader (serif) + Hanken Grotesk (sans) + IBM Plex Mono.
   ================================================================= */

:root{
  /* bright paper surface system */
  --bg:#f6f4ef;
  --bg-2:#efece3;
  --surface:#ffffff;
  --surface-2:#f3f1ea;
  --surface-3:#e9e5da;
  --line:#e1dccf;
  --line-strong:#ccc6b5;
  /* high-contrast warm-neutral ink */
  --ink:#211d15;
  --ink-soft:#4f4a3e;
  --ink-dim:#756e5d;
  --ink-strong:#16130c;          /* headings */
  /* one deep accent — readable on white */
  --accent:#a85518;
  --accent-soft:#c2722a;
  --accent-deep:#823f10;
  /* dark wells for the interactive figures + log panels */
  --well:#0e0c08;
  --well-line:#2b2418;
  /* on-dark text (used over wells / dark log panels) */
  --ink-od:#ece5d6;
  --ink-od-soft:#bcb39c;
  --ink-od-dim:#8c8470;
  /* Wong colour-blind-safe palette — DATA legends/keys only */
  --cyan:#2c83c4; --teal:#1f9bb0; --green:#1f9e78; --amber:#c5851f;
  --vermillion:#cf5a2c; --purple:#a4548a; --blue:#3a63b8; --yellow:#caa92a;
  --radius:6px;
  --maxw:1180px;
  --serif:"Newsreader",Georgia,"Songti SC","SimSun",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",
         "PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  background-image:radial-gradient(1100px 620px at 82% -10%, rgba(168,85,24,.05), transparent 60%);
  background-attachment:fixed;
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;counter-reset:section;
}
a{color:var(--accent);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--accent-deep)}
main p a,main li a,.pub-venue a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(168,85,24,.45);transition:text-decoration-color .18s}
main p a:hover,main li a:hover{text-decoration-color:var(--accent)}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.12;margin:0 0 .4em;
  font-weight:560;letter-spacing:-.012em;color:var(--ink-strong)}
em{font-style:italic;color:inherit}
strong{color:var(--ink-strong);font-weight:600}
::selection{background:rgba(168,85,24,.22);color:var(--ink-strong)}

#starfield{display:none!important}

/* scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent-soft));
  transition:width .1s linear;pointer-events:none}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}

/* ============================ NAV ============================ */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.95rem clamp(1rem,4vw,2.5rem);
  background:rgba(246,244,239,.78);backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(246,244,239,.93)}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:600;color:var(--ink-strong)}
.brand-mark{width:14px;height:14px;border-radius:50%;background:var(--accent);
  position:relative;flex:none;box-shadow:0 0 0 4px rgba(168,85,24,.12)}
.brand-mark::before,.brand-mark::after{
  content:"";position:absolute;top:50%;width:8px;height:1.5px;background:var(--ink-dim);
  transform:translateY(-50%);opacity:.6}
.brand-mark::before{left:-5px}.brand-mark::after{right:-5px}
.brand-name{font-family:var(--serif);font-size:1.06rem;font-weight:560;letter-spacing:-.01em}
.brand-cn{color:var(--ink-soft);font-weight:500;font-family:var(--sans);font-size:.9em}
.nav-links{display:flex;gap:1.4rem;align-items:center}
.nav-links a{color:var(--ink-soft);font-size:.78rem;font-weight:500;position:relative;
  font-family:var(--mono);letter-spacing:.02em;padding:.15rem 0;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink-strong)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--accent);transform:scaleX(0);transition:transform .28s var(--ease);transform-origin:left}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.nav-cta{font-family:var(--sans);color:var(--accent);font-weight:600}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* ============================ HERO ============================ */
.hero{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(3rem,8vw,6rem) clamp(1rem,4vw,2.5rem) clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
.eyebrow{font-family:var(--mono);color:var(--accent);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;font-size:.72rem;margin:0 0 1.2rem}
.hero h1{font-size:clamp(2.9rem,7vw,5rem);margin-bottom:.14em;font-weight:560;
  letter-spacing:-.025em;line-height:1.02;color:var(--ink-strong)}
.hero h1 .cn{display:inline-block;margin-left:.45em;font-size:.34em;color:var(--ink-soft);
  vertical-align:middle;font-weight:500;letter-spacing:.04em;font-family:var(--sans)}
.lede{font-family:var(--serif);font-size:clamp(1.16rem,2vw,1.45rem);color:var(--ink);
  font-weight:400;line-height:1.5;max-width:40ch;margin:0 0 1.1rem}
.lede strong{font-weight:600;color:var(--ink-strong)}
.hero-sub{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;max-width:46ch;margin:0 0 1.8rem}
.hero-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:.4rem;padding:.62rem 1.05rem;border-radius:var(--radius);
  border:1px solid var(--line-strong);color:var(--ink);background:var(--surface);font-family:var(--sans);
  font-weight:500;font-size:.9rem;cursor:pointer;
  transition:background .2s var(--ease),color .2s,border-color .2s,transform .2s var(--ease);
}
.btn:hover{border-color:var(--accent);color:var(--accent-deep);background:#fff;transform:translateY(-2px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn-sm{padding:.42rem .8rem;font-size:.82rem}
/* identity links row (Email / ORCID / GitHub) — quiet, set apart from CTAs */
.hero-id{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin:0 0 1.9rem;padding:0;list-style:none;
  font-family:var(--mono);font-size:.82rem}
.hero-id li{display:flex;gap:.5rem;align-items:baseline}
.hero-id .k{color:var(--ink-dim);text-transform:uppercase;font-size:.66rem;letter-spacing:.08em}
.hero-id a,.hero-id span.v{color:var(--ink-soft)}
.hero-id a:hover{color:var(--accent)}
.hero-facts{list-style:none;margin:0;padding:1.3rem 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1.1rem 2.4rem}
.hero-facts li{display:flex;flex-direction:column}
.hero-facts .num{font-family:var(--serif);font-size:1.7rem;font-weight:560;color:var(--ink-strong);
  line-height:1;font-variant-numeric:tabular-nums}
.hero-facts .lab{font-family:var(--mono);font-size:.67rem;color:var(--ink-dim);margin-top:.45rem;
  max-width:15ch;letter-spacing:.02em;line-height:1.45}

/* hero portrait + figure */
.hero-figure{position:relative;width:100%;max-width:430px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.hero-portrait{display:flex;align-items:center;gap:1rem}
.hero-portrait .pinfo{font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.hero-portrait .pinfo b{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--ink-strong);font-weight:560}
.hero-fig-plate{position:relative;aspect-ratio:1.3;width:100%;
  background:radial-gradient(125% 125% at 50% 30%,#1a160e,#0b0a06);
  border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 24px 60px -38px rgba(0,0,0,.5)}
.hero-fig-plate::after{content:"Fig. — magnetic white dwarf";position:absolute;left:.9rem;bottom:.7rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--ink-od-dim);text-transform:uppercase}
#heroOrbit{width:100%;height:100%;display:block}

/* ========================= SECTIONS ========================= */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,2.5rem)}
.section+.section{border-top:1px solid var(--line)}
.section-head{max-width:64ch;margin-bottom:2.4rem}
.section-head h2{font-size:clamp(1.9rem,3.8vw,2.6rem);color:var(--ink-strong)}
.section-head h2::before{
  counter-increment:section;content:"§ " counter(section,decimal-leading-zero);
  display:block;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.12em;
  color:var(--accent);margin-bottom:.7rem;
}
.section-head p{color:var(--ink-soft);font-size:1.06rem;margin:0;line-height:1.6}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.card:hover{border-color:var(--line-strong);box-shadow:0 14px 34px -22px rgba(40,30,10,.3);transform:translateY(-2px)}
.card:hover::before{transform:scaleY(1)}
.card-ico{width:30px;height:30px;display:block;margin-bottom:1rem;padding:0;border:0;background:none;
  color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.card:hover .card-ico{transform:translateY(-2px)}
.card-ico [data-dot]{fill:var(--accent);stroke:none}
.card-ico [data-glow]{stroke:var(--accent-soft);opacity:.85}
.card h3{font-size:1.18rem;margin-bottom:.5rem;color:var(--ink-strong)}
.card p{color:var(--ink-soft);font-size:.95rem;margin:0;line-height:1.55}

/* ===================== INTERACTIVE FIGURE PLATES ===================== */
.cyc-stage,.spec-stage{display:grid;gap:1.2rem;align-items:stretch;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:clamp(1rem,2vw,1.4rem);box-shadow:0 14px 40px -30px rgba(40,30,10,.3)}
.cyc-stage{grid-template-columns:1.5fr 1fr}
.spec-stage{grid-template-columns:1.6fr 1fr}
.cyc-stage>*,.spec-stage>*{min-width:0}
.cyc-controls .btn-sm{white-space:normal;text-align:left}
.morph-presets{display:flex;flex-direction:column;gap:.55rem}
.ctl-label{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}
.toggle-row{display:flex;gap:.5rem;flex-wrap:wrap}
.toggle-row .btn-sm{flex:1 1 auto}
.cyc-canvas-wrap{background:var(--well);border:1px solid var(--well-line);border-radius:var(--radius);
  overflow:hidden;position:relative;min-height:420px}
/* absolute-fill so the canvas size never feeds back into the wrap height
   (the wrap's min-height / grid-stretch defines the box; the canvas fills it) */
#cycCanvas,#diskCanvas,#ceCanvas,#agentCanvas,#cnnCanvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#kgCanvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:pointer}
.cyc-legend{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:.35rem 1.05rem;
  margin:0;padding:.55rem .9rem;list-style:none;font-family:var(--mono);font-size:.67rem;
  letter-spacing:.01em;color:var(--ink-od-soft);
  background:linear-gradient(transparent,rgba(24,20,14,.92) 55%)}
.cyc-legend span,.cyc-legend li{display:inline-flex;align-items:center;gap:.4rem}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot-wd{background:#dde9f2}.dot-donor{background:#e89e68}
.dot-stream{background:#e0a45c}.dot-field{background:#8ba9cf}
.dot-cyc{background:#f0bd86}
.cyc-side{display:flex;flex-direction:column;gap:.85rem}
.readout,.spec-readout{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
.readout-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.34rem 0;
  font-size:.86rem;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.readout-row:last-child{border-bottom:0}
.readout-row span{min-width:0}
.readout-row b{color:var(--ink-strong);font-family:var(--mono);font-weight:500;
  font-variant-numeric:tabular-nums;font-size:.9rem;text-align:right;flex:none}
.lc-wrap{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
.lc-wrap h4{font-family:var(--mono);font-size:.7rem;color:var(--ink-dim);text-transform:uppercase;
  letter-spacing:.1em;margin:0 0 .65rem;font-weight:500}
#lcCanvas,#diskLc{display:block;width:100%;height:158px;background:var(--well);border-radius:4px}
#ceTrack{display:block;width:100%;height:200px;background:var(--well);border-radius:4px}
.cyc-controls,.spec-controls{display:flex;flex-direction:column;gap:.85rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
.cyc-controls label,.spec-controls label{display:flex;flex-direction:column;gap:.45rem;
  font-size:.78rem;color:var(--ink-soft)}
.cap{font-size:.82rem;color:var(--ink-dim);margin:.7rem 0 0;line-height:1.55}
.cap-wide{text-align:center;max-width:72ch;margin:1.3rem auto 0}
.cap-wide strong,.cap-wide em{color:var(--ink-soft)}

/* range inputs */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  background:var(--line-strong);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);cursor:pointer;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;
  border:2px solid var(--accent);cursor:pointer}

/* spectrum plate */
.spec-canvas-wrap{background:var(--well);border:1px solid var(--well-line);border-radius:var(--radius);
  padding:1rem;min-height:430px;position:relative}
#specCanvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.spec-side{display:flex;flex-direction:column;gap:.85rem}
.spec-presets{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
.spec-presets p{margin:0 0 .7rem;font-size:.78rem;color:var(--ink-soft)}
.preset-row{display:flex;flex-wrap:wrap;gap:.45rem}

/* chips */
.chip{padding:.4rem .75rem;border-radius:var(--radius);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:.76rem;
  font-weight:500;cursor:pointer;transition:.18s var(--ease);font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.chip.active{border-color:var(--accent);color:var(--accent-deep);background:rgba(168,85,24,.1)}

/* control buttons */
.btn-sm{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  border-radius:var(--radius);font-family:var(--sans);font-weight:500;transition:.18s var(--ease)}
.btn-sm:hover{border-color:var(--accent);color:var(--accent-deep);transform:none}
.btn-sm[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-deep);background:rgba(168,85,24,.1)}

/* ===================== PUBLICATIONS ===================== */
.pub-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pub{display:grid;grid-template-columns:88px 1fr;gap:1.6rem;padding:1.7rem 0;border-bottom:1px solid var(--line);
  transition:background .25s var(--ease)}
.pub:first-child{padding-top:0}
.pub:hover{background:linear-gradient(90deg,rgba(168,85,24,.05),transparent 70%)}
.pub-year{font-family:var(--serif);font-size:1.5rem;font-weight:560;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pub-body h3{font-size:1.22rem;margin-bottom:.4rem;line-height:1.25;color:var(--ink-strong)}
.pub-authors{margin:0;color:var(--ink-soft);font-size:.92rem}
.pub-venue{margin:.25rem 0 .6rem;color:var(--accent-deep);font-size:.86rem;font-style:italic;font-family:var(--serif)}
.pub-abs{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.55;max-width:74ch}
.pub-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.pub-tags span{font-family:var(--mono);font-size:.68rem;padding:.2rem .55rem;border-radius:var(--radius);
  background:transparent;color:var(--ink-dim);border:1px solid var(--line-strong)}
.pub-placeholder{opacity:.9}
.pub-placeholder .pub-year{color:var(--ink-dim)}
.pub-note{color:var(--ink-dim);font-size:.92rem;margin:0;line-height:1.55}

.pub-role{display:inline-block;font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:.2rem .55rem;border-radius:var(--radius);margin-bottom:.6rem;border:1px solid var(--line-strong)}
.role-first{color:var(--accent-deep);border-color:rgba(168,85,24,.4);background:rgba(168,85,24,.08)}
.role-co{color:var(--ink-dim)}

/* ===================== ABOUT ===================== */
.section-about{padding-bottom:4rem}
.about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,5vw,4rem)}
.about-grid h2{font-size:clamp(1.9rem,3.8vw,2.6rem);color:var(--ink-strong)}
.about-grid p{color:var(--ink-soft);line-height:1.65}
.about-contact{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;
  box-shadow:0 14px 34px -26px rgba(40,30,10,.3)}
.about-contact h3{font-size:1.2rem;color:var(--ink-strong)}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;justify-content:space-between;gap:1rem;padding:.64rem 0;
  border-bottom:1px solid var(--line);font-size:.9rem}
.contact-list li:last-child{border-bottom:0}
.contact-list span:first-child{color:var(--ink-dim);font-family:var(--mono);font-size:.76rem;
  text-transform:uppercase;letter-spacing:.04em}

.about-highlights{margin:1.4rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.6rem}
.about-highlights li{position:relative;padding-left:1.3rem;color:var(--ink-soft);font-size:.96rem;line-height:1.55}
.about-highlights li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}

.cv-block{margin-top:2.8rem}
.cv-h{font-family:var(--serif);font-size:1.35rem;color:var(--ink-strong);display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem;font-weight:560}
.cv-h::after{content:"";flex:1;height:1px;background:var(--line)}
.timeline{display:flex;flex-direction:column;border-left:1px solid var(--line-strong);margin-left:.4rem}
.tl-item{position:relative;padding:0 0 1.8rem 1.8rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-5px;top:.42rem;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--ink-dim);transition:border-color .25s,background .25s}
.tl-item:hover::before{border-color:var(--accent)}
.tl-ai::before{border-color:var(--accent);background:var(--accent)}
.tl-date{font-family:var(--mono);font-size:.74rem;color:var(--ink-dim);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tl-ai .tl-date{color:var(--accent)}
.tl-item h4{font-family:var(--serif);font-size:1.08rem;margin:.3rem 0 .45rem;color:var(--ink-strong);line-height:1.3;font-weight:560}
.tl-item p{color:var(--ink-soft);font-size:.93rem;margin:0;line-height:1.55}
.tl-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent-deep);border:1px solid rgba(168,85,24,.4);background:rgba(168,85,24,.08);
  padding:.12rem .45rem;border-radius:var(--radius);margin-left:.45rem;vertical-align:middle}

.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.skill{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
.skill:hover{box-shadow:0 14px 34px -26px rgba(40,30,10,.3);border-color:var(--line-strong)}
.skill h4{font-family:var(--serif);font-size:1.05rem;color:var(--accent-deep);margin-bottom:.55rem;font-weight:560}
.skill p{color:var(--ink-soft);font-size:.92rem;margin:0;line-height:1.55}

/* ---- knowledge-graph + RAG block ---- */
.kg-block{margin-top:2.8rem}
.kg-canvas-wrap{background:var(--well)!important;border:1px solid var(--well-line)}
.kg-tip{position:absolute;z-index:6;pointer-events:none;max-width:200px;
  background:rgba(18,15,9,.97);border:1px solid var(--well-line);border-radius:var(--radius);
  box-shadow:0 8px 22px rgba(0,0,0,.5);padding:.5rem .6rem;font-size:.74rem;color:var(--ink-od-soft)}
.kg-tip b{display:block;color:var(--ink-od);font-size:.8rem;margin-bottom:.15rem;font-family:var(--sans)}
.kg-tip span{color:var(--ink-od-dim)}
.kg-head{margin-bottom:1.5rem}
.kg-head h3{font-size:1.45rem;color:var(--ink-strong)}
.kg-head p{color:var(--ink-soft);font-size:1.02rem;line-height:1.6}
.kg-ctx{height:152px}
.kg-ctx-head{color:var(--ink-od-soft);margin-bottom:.45rem;font-family:var(--sans);white-space:normal;font-size:.78rem}
.kg-ctx-head b{color:var(--ink-od)}
.kg-type{display:inline-block;font-family:var(--mono);font-size:.62rem;color:var(--accent-soft);border:1px solid var(--well-line);
  border-radius:4px;padding:0 .35rem;margin-left:.3rem}
.kg-ctx-row{display:flex;gap:.4rem;align-items:baseline;padding:.13rem 0;white-space:normal;font-family:var(--sans);font-size:.76rem}
.kg-s{color:var(--ink-od);flex:0 0 auto;max-width:9em;overflow:hidden;text-overflow:ellipsis}
.kg-r{color:var(--accent-soft);font-style:italic;flex:0 0 auto}
.kg-o{color:var(--ink-od-soft);flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.kg-ctx-hint{color:var(--ink-od-dim);white-space:normal;line-height:1.5;font-family:var(--sans);font-size:.8rem}
.kg-ctx-step{opacity:0;transform:translateX(-6px);transition:opacity .34s var(--ease),transform .34s var(--ease)}
.kg-ctx-step.is-in{opacity:1;transform:none}
#kgChips .chip{font-weight:500}
#kgChips .kg-clear{border-style:dashed;color:var(--ink-soft)}

/* inline code */
code{font-family:var(--mono);font-size:.84em;background:var(--surface-2);
  border:1px solid var(--line);border-radius:4px;padding:.05em .4em;color:var(--accent-deep)}

/* ---- Astro Agent run log (dark terminal plate) ---- */
.ag-log{height:154px;overflow-y:auto;font-family:var(--mono);font-size:.72rem;line-height:1.55;
  border:1px solid var(--well-line);border-radius:var(--radius);background:var(--well);color:var(--ink-od-soft);
  padding:.55rem .65rem;display:flex;flex-direction:column;gap:.18rem}
.ag-log-row{display:flex;gap:.5rem;align-items:baseline;white-space:nowrap;overflow:hidden}
.ag-num{color:var(--ink-od-dim);flex:none}
.ag-name{color:var(--accent-soft);flex:none;min-width:6em;font-weight:500}
.ag-det{color:var(--ink-od-soft);overflow:hidden;text-overflow:ellipsis}
.ag-log-replan .ag-name,.ag-log-reflexion .ag-name{color:#e6a23c}
.ag-log-blocked .ag-name{color:#e07145}
.ag-log-done .ag-name{color:#27c499}
.ag-log::-webkit-scrollbar{width:8px}
.ag-log::-webkit-scrollbar-thumb{background:var(--well-line);border-radius:8px}

.ag-status{font-family:var(--mono);font-variant-numeric:tabular-nums;padding:.06rem .5rem;border-radius:999px;
  font-size:.76rem;border:1px solid transparent;white-space:nowrap}
.ag-run{color:#0e7d90;border-color:rgba(31,155,176,.4);background:rgba(31,155,176,.1)}
.ag-loop{color:var(--accent-deep);border-color:rgba(197,133,31,.4);background:rgba(197,133,31,.1)}
.ag-ok{color:#157f5f;border-color:rgba(31,158,120,.45);background:rgba(31,158,120,.12)}
.ag-halt{color:#b9491f;border-color:rgba(207,90,44,.45);background:rgba(207,90,44,.12)}
.ag-cards{margin-top:1.8rem}

/* confusion-matrix mini heatmap (ZTF CNN) */
.cm{display:grid;grid-template-columns:2.7em repeat(3,1fr);gap:3px;margin-top:.3rem;
  font-family:var(--mono);font-size:.64rem}
.cm-cnr,.cm-ch,.cm-rh{display:flex;align-items:center;justify-content:center;padding:.34rem 0;
  color:var(--ink-dim);letter-spacing:.02em}
.cm-rh{justify-content:flex-end;padding-right:.55em}
.cm-cell{display:flex;align-items:center;justify-content:center;padding:.34rem 0;border-radius:3px;
  color:#fff;font-variant-numeric:tabular-nums;border:1px solid transparent;transition:border-color .2s}
.cm-row-on .cm-cell{border-color:var(--accent)}

/* in-card link to the live demo */
.card-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-family:var(--mono);
  font-size:.74rem;color:var(--accent);font-weight:500;transition:color .18s var(--ease)}
.card-link:hover{color:var(--accent-deep)}
.cnn-cards{margin-top:1.8rem}
.cnn-stage{align-items:stretch}
.cnn-stage .cyc-side{gap:.7rem}
.cnn-stage .readout,.cnn-stage .lc-wrap,.cnn-stage .cyc-controls{padding:.85rem .95rem}
.cnn-stage .readout-row{padding:.27rem 0}
.cnn-stage .cyc-controls{gap:.7rem}

/* ===================== COLLAPSIBLE (progressive disclosure) ===================== */
details.disclose{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  margin:0 0 1rem;overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
details.disclose[open]{border-color:var(--line-strong);box-shadow:0 14px 40px -30px rgba(40,30,10,.3)}
details.disclose>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:.9rem;
  padding:1.2rem 1.4rem;transition:background .18s var(--ease)}
details.disclose>summary::-webkit-details-marker{display:none}
details.disclose>summary:hover{background:var(--surface-2)}
.disclose-no{font-family:var(--mono);font-size:.8rem;color:var(--accent);font-weight:500;flex:none}
.disclose-tt{flex:1;min-width:0}
.disclose-tt h3{font-size:1.18rem;margin:0 0 .2rem;color:var(--ink-strong)}
.disclose-tt p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.disclose-mark{flex:none;width:22px;height:22px;border:1px solid var(--line-strong);border-radius:50%;
  position:relative;transition:transform .25s var(--ease),border-color .2s;align-self:center}
.disclose-mark::before,.disclose-mark::after{content:"";position:absolute;background:var(--accent);
  left:50%;top:50%;transform:translate(-50%,-50%)}
.disclose-mark::before{width:9px;height:1.5px}.disclose-mark::after{width:1.5px;height:9px;transition:transform .25s var(--ease)}
details[open] .disclose-mark{border-color:var(--accent)}
details[open] .disclose-mark::after{transform:translate(-50%,-50%) scaleY(0)}
.disclose-body{padding:0 1.4rem 1.4rem}

/* ===================== FOOTER ===================== */
.footer{border-top:1px solid var(--line);text-align:center;padding:2.6rem 1rem;color:var(--ink-soft);
  font-size:.86rem;font-family:var(--mono)}
.footer a{color:var(--accent)}
.footer-note{color:var(--ink-dim);font-size:.76rem;margin:.5rem 0 0}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;text-align:left}
  .hero-figure{order:-1;max-width:330px}
  .cyc-stage,.spec-stage,.about-grid{grid-template-columns:1fr}
  .nav-links{position:fixed;inset:54px 0 auto 0;flex-direction:column;gap:0;align-items:stretch;
    background:rgba(246,244,239,.98);border-bottom:1px solid var(--line);padding:.5rem 1.5rem;
    transform:translateY(-130%);transition:transform .3s var(--ease);backdrop-filter:blur(12px)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
  .nav-links a::after{display:none}
  .nav-toggle{display:flex}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .pub{grid-template-columns:1fr;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  *{scroll-behavior:auto !important}
}

/* ============================================================= *
 *  HUB LANDING (index.html)                                     *
 * ============================================================= */
.hub-body{background-image:
  radial-gradient(1100px 620px at 82% -10%, rgba(168,85,24,.06), transparent 60%),
  radial-gradient(900px 560px at 8% 8%, rgba(44,131,196,.05), transparent 60%);}
.hub-hero{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,8vw,6rem) clamp(1rem,4vw,2.5rem) clamp(1.5rem,3vw,2.5rem)}
.hub-hero-inner{max-width:60ch}
.hub-name{font-family:var(--serif);font-size:clamp(2.9rem,7vw,5.2rem);margin:0 0 .28em;font-weight:560;
  letter-spacing:-.025em;line-height:1.02;color:var(--ink-strong)}
.hub-name .cn{display:inline-block;margin-left:.45em;font-size:.32em;color:var(--ink-soft);
  vertical-align:middle;font-weight:500;letter-spacing:.04em;font-family:var(--sans)}
.hub-lede{font-family:var(--serif);font-size:clamp(1.14rem,2vw,1.42rem);color:var(--ink);
  font-weight:400;line-height:1.5;max-width:54ch;margin:0 0 1.4rem}
.hub-lede strong{font-weight:600;color:var(--ink-strong)}
.hub-id{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;
  font-family:var(--mono);font-size:.82rem;color:var(--ink-soft)}
.hub-id .k{color:var(--ink-dim);text-transform:uppercase;font-size:.66rem;letter-spacing:.08em;margin-right:.5rem}

/* two doorways */
.hub-doors{max-width:var(--maxw);margin:0 auto;padding:1rem clamp(1rem,4vw,2.5rem) clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.1rem,2.5vw,1.8rem)}
.door{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);position:relative;
  box-shadow:0 18px 46px -34px rgba(40,30,10,.4);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.door::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.door-research::after{background:linear-gradient(90deg,#2c83c4,#4fd0e3)}
.door-ai::after{background:linear-gradient(90deg,var(--accent-deep),#e69f00)}
.door:hover{transform:translateY(-5px);box-shadow:0 30px 64px -34px rgba(40,30,10,.5);border-color:var(--accent)}
.door:hover::after{transform:scaleX(1)}
.door-plate{position:relative;aspect-ratio:2.1;
  background:radial-gradient(125% 125% at 50% 25%,#17130b,#090805);border-bottom:1px solid var(--well-line)}
.door-plate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.door-fig-tag{position:absolute;left:.9rem;bottom:.7rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.05em;color:var(--ink-od-dim);text-transform:uppercase}
.door-body{padding:clamp(1.3rem,2.4vw,1.9rem)}
.door-kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.door-ai .door-kicker{color:var(--accent)}
.door-research .door-kicker{color:#1f6ea8}
.door-body h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:.5rem 0 .1rem;color:var(--ink-strong)}
.door-cn{font-family:var(--sans);color:var(--ink-dim);font-size:.9rem;margin:0 0 .9rem;letter-spacing:.02em}
.door-desc{color:var(--ink-soft);font-size:.98rem;line-height:1.6;margin:0 0 1.1rem;max-width:46ch}
.door-desc strong{color:var(--ink-strong);font-weight:600}
.door-tags{list-style:none;margin:0 0 1.3rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.door-tags li{font-family:var(--mono);font-size:.68rem;padding:.22rem .6rem;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--ink-dim);background:var(--surface-2)}
.door-go{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;
  font-size:.95rem;color:var(--accent-deep)}
.door-research .door-go{color:#1f6ea8}
.door-go .arr{transition:transform .3s var(--ease)}
.door:hover .door-go .arr{transform:translateX(5px)}

.hub-glance{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem) clamp(3rem,6vw,4.5rem)}
.hub-facts{list-style:none;margin:0 0 1.4rem;padding:1.6rem 0 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.4rem 2rem}
.hub-facts li{display:flex;flex-direction:column}
.hub-facts .num{font-family:var(--serif);font-size:2rem;font-weight:560;color:var(--ink-strong);line-height:1;
  font-variant-numeric:tabular-nums}
.hub-facts .lab{font-family:var(--mono);font-size:.68rem;color:var(--ink-dim);margin-top:.5rem;
  max-width:24ch;letter-spacing:.02em;line-height:1.5}
.hub-glance-note{color:var(--ink-soft);font-size:.95rem;line-height:1.6;max-width:70ch;margin:0}
@media (max-width:820px){.hub-doors{grid-template-columns:1fr}}

/* ===================== APPEARANCE TWEAK PANEL ===================== */
.tweak-launch{position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:.5rem;
  padding:.58rem .9rem;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font-family:var(--mono);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 12px 34px -16px rgba(40,30,10,.4);transition:border-color .2s var(--ease),transform .2s var(--ease),color .2s}
.tweak-launch:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-2px)}
.tweak-launch svg{width:16px;height:16px;display:block;color:var(--accent)}
.tweak-panel{position:fixed;right:18px;bottom:70px;z-index:81;width:290px;max-width:calc(100vw - 36px);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 26px 64px -26px rgba(40,30,10,.45);padding:1.05rem 1.1rem 1.15rem;font-family:var(--sans);
  transform-origin:bottom right;animation:tw-pop .22s var(--ease)}
.tweak-panel[hidden]{display:none}
@keyframes tw-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.tweak-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}
.tweak-head h4{font-family:var(--serif);font-size:1.08rem;margin:0;color:var(--ink-strong);font-weight:560}
.tweak-head .tw-sub{font-family:var(--mono);font-size:.62rem;color:var(--ink-dim);letter-spacing:.04em}
.tweak-close{position:absolute;top:.7rem;right:.8rem;background:none;border:0;color:var(--ink-dim);
  font-size:1.2rem;line-height:1;cursor:pointer;padding:2px 5px;border-radius:5px;transition:.18s}
.tweak-close:hover{color:var(--ink);background:var(--surface-3)}
.tweak-group{margin-bottom:1rem}
.tweak-lab{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:.5rem}
.tweak-seg{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.tweak-seg button{flex:1;border:0;background:none;color:var(--ink-soft);font-family:var(--sans);font-weight:500;
  font-size:.76rem;padding:.46rem .3rem;border-radius:6px;cursor:pointer;transition:.16s var(--ease)}
.tweak-seg button:hover{color:var(--ink)}
.tweak-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink-strong);
  box-shadow:inset 0 0 0 1px var(--line-strong)}
.tweak-sws{display:flex;gap:.55rem}
.tweak-sw{width:30px;height:30px;border-radius:50%;border:0;padding:0;cursor:pointer;position:relative;
  background:currentColor;transition:transform .15s var(--ease)}
.tweak-sw::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.tweak-sw:hover{transform:scale(1.14)}
.tweak-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px currentColor}
.tweak-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.85rem;
  padding-top:.7rem;border-top:1px solid var(--line)}
.tweak-foot .tw-state{font-family:var(--mono);font-size:.62rem;color:var(--ink-dim);letter-spacing:.03em}
.tweak-reset{background:none;border:0;color:var(--ink-soft);font-family:var(--mono);font-size:.68rem;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .18s}
.tweak-reset:hover{color:var(--accent-deep)}
@media (max-width:560px){.tweak-launch .tw-txt{display:none}.tweak-launch{padding:.6rem;gap:0}}

/* ============================================================= *
 *  AI / AGENTS PAGE (ai.html)                                   *
 * ============================================================= */
.ai-body{background-image:
  radial-gradient(1100px 620px at 84% -12%, rgba(168,85,24,.06), transparent 60%),
  radial-gradient(900px 560px at 4% 4%, rgba(44,131,196,.06), transparent 60%);}

/* ---- AI hero ---- */
.ai-hero{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem) clamp(1.5rem,3vw,2.5rem)}
.ai-hero-text{max-width:64ch}
.ai-hero h1{font-size:clamp(2.4rem,5.4vw,4rem);letter-spacing:-.025em;line-height:1.04;margin:0 0 .5em}
.ai-hero h1 .accenty{color:var(--accent);font-style:italic}
.ai-lede{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.38rem);color:var(--ink);line-height:1.5;max-width:56ch;margin:0 0 1.8rem}
.ai-lede strong{font-weight:600;color:var(--ink-strong)}
.ai-hero-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem}
.ai-hchip{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1rem;border-radius:var(--radius);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);position:relative;overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.ai-hchip b{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.06em}
.ai-hchip span{font-family:var(--mono);font-size:.68rem;color:var(--ink-dim)}
.ai-hchip{font-family:var(--serif);font-size:1.02rem;font-weight:560;color:var(--ink-strong)}
.ai-hchip:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 28px -20px rgba(40,30,10,.4);color:var(--ink-strong)}

/* ---- research-page cross-link callout ---- */
.ai-crosslink{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 18px 46px -34px rgba(40,30,10,.4)}
.ai-crosslink h2{font-size:clamp(1.5rem,3vw,2rem);margin:.3rem 0 .5rem}
.ai-crosslink h2::before{content:none}
.ai-crosslink p{color:var(--ink-soft);max-width:60ch;margin:0}
.ai-crosslink .door-kicker{color:var(--accent)}

/* ---- four-layer stack overview ---- */
.stack-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:.6rem;align-items:stretch;margin-bottom:2.6rem}
.stack-layer{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.stack-layer:hover{border-color:var(--line-strong);box-shadow:0 12px 30px -24px rgba(40,30,10,.35);transform:translateY(-2px)}
.stack-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent-deep);background:rgba(168,85,24,.08);border:1px solid rgba(168,85,24,.28);
  padding:.14rem .5rem;border-radius:999px;margin-bottom:.6rem}
.stack-layer h4{font-family:var(--serif);font-size:1.06rem;margin:0 0 .35rem;color:var(--ink-strong);font-weight:560}
.stack-layer p{font-size:.86rem;color:var(--ink-soft);margin:0 0 .45rem;line-height:1.45}
.stack-layer ul{margin:0;padding-left:0;list-style:none}
.stack-layer li{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim)}
.stack-layer li b{color:var(--accent-deep)}
.stack-arrow{align-self:center;color:var(--line-strong);font-size:1.3rem;font-weight:700}

/* ---- feature sub-heads ---- */
.feature-head{max-width:70ch;margin:3rem 0 1.6rem}
.feature-head.compact{margin:2.4rem 0 1.2rem}
.feature-kicker{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:.5rem}
.feature-head h3{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--ink-strong);margin:0 0 .5rem}
.feature-head p{color:var(--ink-soft);font-size:1rem;line-height:1.6;margin:0}
.feature-head p strong{color:var(--ink-strong)}

/* ---- AttnRes stage ---- */
.attn-stage{grid-template-columns:1.55fr 1fr}
.attn-stage .cyc-canvas-wrap,.a2a-stage .cyc-canvas-wrap{position:relative}
#attnresCanvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#attnHeat{display:block;width:100%;height:150px;background:var(--well);border-radius:4px}
.ai-detail-cards{margin-top:1.8rem}
.ai-detail-cards .card .stack-tag{margin-bottom:.7rem}

/* ---- eval bars + table ---- */
.eval-block{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:clamp(1.1rem,2vw,1.6rem);box-shadow:0 14px 40px -30px rgba(40,30,10,.3)}
.eval-switch{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.3rem}
.eval-bars{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.6rem}
.eb-row{display:grid;grid-template-columns:130px 1fr 56px;align-items:center;gap:.9rem}
.eb-name{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);text-align:right}
.eb-name.eb-me{color:var(--accent-deep);font-weight:600}
.eb-track{height:22px;background:var(--surface-2);border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.eb-fill{height:100%;border-radius:5px 0 0 5px;width:0;transition:width .7s var(--ease);
  background:linear-gradient(90deg,var(--cyan),var(--teal))}
.eb-fill.eb-fill-me{background:linear-gradient(90deg,var(--accent-deep),var(--accent-soft))}
.eb-val{font-family:var(--mono);font-size:.82rem;color:var(--ink-strong);font-variant-numeric:tabular-nums}
.eval-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.86rem;margin-top:.4rem}
.eval-table th,.eval-table td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.eval-table th{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);font-weight:500}
.eval-table td:first-child{font-weight:500;color:var(--ink-strong)}
.eval-table .eval-me td{background:rgba(168,85,24,.06)}
.eval-badge{font-family:var(--mono);font-size:.6rem;color:var(--accent-deep);border:1px solid rgba(168,85,24,.35);
  background:rgba(168,85,24,.1);border-radius:999px;padding:.05rem .4rem;margin-left:.4rem;letter-spacing:.04em}

/* ---- Jindu: the lab-agent product window ----
   Not a browser: a product. The macOS traffic lights were the tell —
   they say "screenshot of something else". A mark, a name, the mode
   tabs the real app has, and the dataset it is bound to. */
.app-mock{border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;background:var(--surface);
  box-shadow:0 30px 70px -44px rgba(40,30,10,.5);margin-bottom:1rem}
.app-chrome{display:flex;align-items:center;gap:.75rem;padding:.62rem .95rem;
  background:linear-gradient(180deg,var(--surface-2),var(--surface-3));border-bottom:1px solid var(--line-strong)}
.app-mark{width:16px;height:16px;border-radius:5px;flex:none;
  background:conic-gradient(from 210deg,var(--accent),#c2722a,#8ba9cf,var(--accent));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.app-name{font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--ink-strong);
  display:inline-flex;align-items:baseline;gap:.45rem;white-space:nowrap}
.app-name em{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--ink-dim);letter-spacing:.03em}
.app-tabs{display:inline-flex;gap:.2rem;margin-left:.4rem;background:var(--bg-2);
  border:1px solid var(--line);border-radius:7px;padding:2px}
.app-tabs span{font-family:var(--sans);font-size:.7rem;color:var(--ink-dim);padding:.2rem .55rem;border-radius:5px}
.app-tabs .is-on{background:var(--surface);color:var(--ink-strong);font-weight:600;
  box-shadow:0 1px 2px rgba(40,30,10,.12)}
.app-ds{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--ink-dim);
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.app-ds i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 3px rgba(31,158,120,.14)}
.app-body{display:grid;grid-template-columns:.92fr 1.35fr 1.02fr;gap:0}
.app-col{padding:1.1rem 1.15rem;min-width:0}
.app-left{border-right:1px solid var(--line)}
.app-center{border-right:1px solid var(--line);background:var(--bg-2)}
.app-lab{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-dim);margin:0 0 .55rem;display:flex;justify-content:space-between;gap:.6rem}
.app-lab em{font-style:normal;text-transform:none;letter-spacing:.02em;color:var(--line-strong)}
.app-goal{font-family:var(--serif);font-size:.98rem;color:var(--ink-strong);line-height:1.45;
  background:var(--surface-2);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:4px;padding:.7rem .8rem;margin-bottom:1.1rem}
.lab-steps{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.lab-steps li{display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;gap:0 .6rem;align-items:center;
  padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  transition:border-color .25s,background .25s,box-shadow .25s;position:relative}
.lab-steps li .ls-ico{grid-row:1/3;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink-dim);font-size:.9rem;
  transition:background .25s,border-color .25s,color .25s}
.lab-steps li b{font-size:.88rem;color:var(--ink-strong)}
.lab-steps li i{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--ink-dim)}
.lab-steps li.is-active{border-color:var(--accent);background:rgba(168,85,24,.06);box-shadow:0 8px 20px -16px rgba(168,85,24,.5)}
.lab-steps li.is-active .ls-ico{background:var(--accent);border-color:var(--accent);color:#fff}
.lab-steps li.is-done .ls-ico{background:var(--green);border-color:var(--green);color:#fff}
#jinduKG{display:block;width:100%;aspect-ratio:1.16;min-height:300px;background:var(--well);
  border:1px solid var(--well-line);border-radius:var(--radius);cursor:crosshair}
.kg-mini-legend{display:flex;flex-wrap:wrap;gap:.35rem .85rem;margin-top:.6rem;font-family:var(--mono);font-size:.65rem;color:var(--ink-soft)}
.kg-mini-legend span{display:inline-flex;align-items:center;gap:.35rem}
.kg-mini-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}

/* ---- the generated protocol: an ELN page, not a bullet list ---- */
.proto{min-height:300px;max-height:520px;overflow-y:auto;font-size:.84rem;scrollbar-width:thin}
.proto::-webkit-scrollbar{width:6px}
.proto::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px}
.pr-idle .pr-slot{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px dashed var(--line)}
.pr-idle .pr-slot span{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--line-strong)}
.pr-idle .pr-slot i{flex:1;height:6px;border-radius:3px;background:var(--surface-3)}
.pr-hint{margin:.9rem 0 0;font-size:.78rem;color:var(--ink-dim);line-height:1.55}
.pr-block,.pr-step,.pr-gate,.pr-retr,.pr-verdict{opacity:0;transform:translateY(5px);
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.pr-block.is-in,.pr-step.is-in,.pr-gate.is-in,.pr-retr.is-in,.pr-verdict.is-in{opacity:1;transform:none}
.pr-lab{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:.9rem 0 .4rem}
.pr-block:first-child .pr-lab{margin-top:0}
.pr-block p{margin:0;color:var(--ink-soft);line-height:1.55;font-size:.85rem}
.pr-obj p{font-family:var(--serif);font-size:.94rem;color:var(--ink-strong);line-height:1.45}
.pr-table{width:100%;border-collapse:collapse;font-size:.76rem;margin-top:.15rem}
.pr-table td{padding:.34rem .4rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.4}
.pr-table td:first-child{font-family:var(--mono);font-size:.7rem;color:var(--ink-strong);white-space:nowrap;width:4.6em}
.pr-table td:last-child{font-family:var(--mono);font-size:.62rem;color:var(--ink-dim);text-align:right;white-space:nowrap}
.pr-table .pr-control td:first-child{color:var(--ink-dim)}
.pr-table .pr-variable td:first-child{color:var(--accent-deep)}
.pr-retr{font-family:var(--mono);font-size:.68rem;color:var(--ink-dim);
  background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:.4rem .55rem;margin-top:.5rem}
.pr-retr b{color:var(--ink-strong)}
.pr-step{display:grid;grid-template-columns:20px 1fr;gap:.5rem;padding:.42rem 0;border-bottom:1px solid var(--line)}
.pr-n{font-family:var(--mono);font-size:.7rem;color:var(--accent);text-align:right;padding-top:.05rem}
.pr-t{color:var(--ink-soft);line-height:1.45;font-size:.82rem}
/* the provenance chip — the whole point of the system, so it is a
   chip you can see rather than a grey line of small print */
.pr-ev{display:inline-block;margin-top:.3rem;font-family:var(--mono);font-size:.63rem;line-height:1.3;
  padding:.14rem .42rem;border-radius:4px;border:1px solid var(--line-strong);color:var(--ink-dim);background:var(--surface-2)}
.pr-ev-graph{border-color:rgba(44,131,196,.4);color:#1f6ea8;background:rgba(44,131,196,.07)}
.pr-ev-literature{border-color:rgba(164,84,138,.38);color:#8a4573;background:rgba(164,84,138,.06)}
.pr-ev-protocol{border-color:rgba(197,133,31,.4);color:var(--accent-deep);background:rgba(197,133,31,.07)}
.pr-end p{font-family:var(--serif);font-size:.9rem;color:var(--ink-strong)}
.pr-gate{display:flex;gap:.5rem;align-items:flex-start;padding:.3rem 0;font-size:.79rem;color:var(--ink-soft);line-height:1.45}
.pr-gate i{font-style:normal;font-family:var(--mono);flex:none;width:1.1em;text-align:center}
.pr-gate.is-ok i{color:var(--green)}
.pr-gate.is-bad i{color:var(--vermillion)}
.pr-verdict{margin-top:.8rem;font-family:var(--mono);font-size:.72rem;color:var(--green);line-height:1.5;
  border-top:1px solid var(--line);padding-top:.6rem}
.pr-verdict b{color:var(--ink-strong)}
.pipe-node.is-past{border-color:rgba(31,158,120,.35)}
.pipe-node.is-past .pipe-no{color:var(--green)}

/* ---- extraction pipeline flow ---- */
.pipe-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:0 0 .8rem;position:relative}
.pipe-flow-2{margin-top:.2rem}
.pipe-node{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;position:relative;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.pipe-node::after{content:"→";position:absolute;right:-.62rem;top:50%;transform:translateY(-50%);color:var(--line-strong);
  font-weight:700;z-index:2}
.pipe-flow .pipe-node:last-child::after{content:none}
.pipe-node.is-lit{border-color:var(--accent);box-shadow:0 10px 26px -18px rgba(168,85,24,.5);transform:translateY(-2px)}
.pipe-no{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.pipe-node h5{font-family:var(--serif);font-size:1rem;margin:.3rem 0 .3rem;color:var(--ink-strong);font-weight:560}
.pipe-node p{font-size:.8rem;color:var(--ink-soft);margin:0;line-height:1.45}
.pipe-node p b{color:var(--accent-deep)}
.pipe-gate{border-color:rgba(31,158,120,.4);background:linear-gradient(180deg,rgba(31,158,120,.05),transparent)}
.pipe-out{border-color:rgba(44,131,196,.4);background:linear-gradient(180deg,rgba(44,131,196,.05),transparent)}

/* ---- A2A ---- */
.a2a-stage{grid-template-columns:1.5fr 1fr}
#a2aCanvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#a2aMsg .ag-name{color:#56b4e9}

/* ---- tech toolbox ---- */
.toolbox{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:clamp(1.1rem,2vw,1.5rem);
  box-shadow:0 14px 40px -30px rgba(40,30,10,.3)}
.tb-group{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem}
.tb-glab{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-dim);display:block;margin-bottom:.6rem}
.tb-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.tb-chip{font-family:var(--mono);font-size:.74rem;padding:.36rem .68rem;border-radius:var(--radius);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:.18s var(--ease)}
.tb-chip:hover,.tb-chip.is-active{border-color:var(--accent);color:var(--accent-deep);background:rgba(168,85,24,.08);transform:translateY(-1px)}
.tb-detail{grid-column:1/-1;background:var(--well);border:1px solid var(--well-line);border-radius:var(--radius);padding:1rem 1.2rem;min-height:74px}
.tb-detail-lab{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-od-dim);display:block;margin-bottom:.4rem}
.tb-detail p{margin:0;color:var(--ink-od-soft);font-size:.92rem;line-height:1.5}
.tb-detail p b{color:var(--ink-od)}

/* ---- AI page responsive ---- */
@media (max-width:900px){
  .stack-grid{grid-template-columns:1fr;gap:.5rem}
  .stack-arrow{transform:rotate(90deg);justify-self:center}
  .app-body{grid-template-columns:1fr}
  .app-left,.app-center{border-right:0;border-bottom:1px solid var(--line)}
  .pipe-flow{grid-template-columns:1fr 1fr}
  .pipe-node::after{content:none}
  .toolbox{grid-template-columns:1fr}
  .attn-stage,.a2a-stage{grid-template-columns:1fr}
  .eb-row{grid-template-columns:96px 1fr 48px;gap:.5rem}
}
@media (max-width:640px){
  .eval-table{font-size:.72rem}
  .eval-table th,.eval-table td{padding:.45rem .28rem}
  .eval-table th{font-size:.55rem;letter-spacing:.02em}
  .eval-badge{display:block;width:max-content;margin:.2rem 0 0;font-size:.52rem}
}

/* ============================================================= *
 *  AI PAGE v17 — publications, formulas+figures, ZTE, frontends *
 *  Colors come from CSS variables (cosmic-theme overrides them) *
 * ============================================================= */

/* ---- results-first band ---- */
.results-band{padding-top:clamp(2rem,4vw,3rem)}
.results-head{max-width:70ch;margin-bottom:1.8rem}
.results-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.results-head h2::before{content:none}
.results-head p{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;margin:.4rem 0 0}
.results-stats{list-style:none;margin:0 0 2rem;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.results-stats li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.4rem}
.results-stats .num{font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--ink-strong);font-weight:600;font-variant-numeric:tabular-nums}
.results-stats .num .u{font-size:.6em;color:var(--accent)}
.results-stats .lab{font-family:var(--mono);font-size:.68rem;color:var(--ink-dim);line-height:1.5}
.results-pubs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.rp{display:grid;grid-template-columns:52px 1fr;gap:.9rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.15rem;transition:border-color .2s,transform .2s,box-shadow .2s}
.rp:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 16px 40px -30px rgba(0,0,0,.5)}
.rp-year{font-family:var(--serif);font-size:1.15rem;color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.rp-body h4{font-family:var(--serif);font-size:1rem;line-height:1.28;margin:.35rem 0 .35rem;color:var(--ink-strong);font-weight:560}
.rp-venue{margin:0;font-size:.82rem;color:var(--ink-soft);font-family:var(--serif);font-style:italic}
.rp-venue strong{font-style:normal}
@media (max-width:760px){.results-pubs{grid-template-columns:1fr}}

/* ---- figure + math ---- */
.fig-math{display:grid;grid-template-columns:1.15fr 1fr;gap:1.4rem;align-items:center;margin:1.4rem 0 0}
.fig-math-rev{grid-template-columns:1fr 1.1fr;margin-top:1.8rem}
.paper-fig{margin:0;background:#f5f7f9;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:1rem 1rem .8rem;box-shadow:0 20px 54px -34px rgba(0,0,0,.6)}
.paper-fig img{display:block;width:100%;height:auto;border-radius:4px}
.paper-fig figcaption{margin-top:.7rem;font-size:.8rem;color:#465569;line-height:1.5;font-family:var(--sans)}
.paper-fig figcaption b{color:#1c2733}
.paper-fig figcaption em{color:#2b3a49;font-style:italic}
.math-col{display:flex;flex-direction:column;gap:.8rem}
.eqn-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
.eqn-hi{border-color:rgba(103,232,249,.4);box-shadow:inset 0 0 0 1px rgba(103,232,249,.08)}
.eqn-lab{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);display:block;margin-bottom:.6rem}
.eqn{font-family:var(--serif);font-size:1.12rem;color:var(--ink-strong);line-height:1.7;letter-spacing:.01em}
.eqn em{font-style:italic;font-family:"Newsreader",Georgia,serif}
.eqn sub,.eqn sup{font-size:.66em}
.eqn .frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 .15em}
.eqn .fnum{border-bottom:1.4px solid currentColor;padding:0 .35em .05em}
.eqn .fden{padding:.05em .35em 0}
.eqn .rad{border-top:1.4px solid currentColor;padding:0 .15em}
.eqn .sum{display:inline-flex;flex-direction:column;align-items:center;font-size:1.35em;line-height:.8;vertical-align:middle;margin-right:.1em}
.eqn .sum-sub{font-size:.4em;font-family:var(--mono)}
.eqn .paren{font-size:1.5em;vertical-align:middle;color:var(--ink-dim)}
.eqn-note{margin:.6rem 0 0;font-size:.86rem;color:var(--ink-soft);line-height:1.55}
.fig-note-col{display:flex;flex-direction:column;gap:.5rem}
.fig-note-col h4{font-family:var(--serif);font-size:1.15rem;color:var(--ink-strong);margin:0;font-weight:560}
.fig-note-col p{color:var(--ink-soft);font-size:.95rem;line-height:1.6;margin:0}
.fig-bullets{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem;font-family:var(--mono);font-size:.8rem}
.fig-bullets li{color:var(--ink-soft);padding:.3rem .6rem;border:1px solid var(--line);border-radius:6px;background:var(--surface-2)}
.fig-bullets li b{color:var(--ink-strong)}
.fig-bullets .fb-pick{border-color:rgba(103,232,249,.45);color:var(--ink-strong)}
.fig-bullets .fb-pick span{color:var(--accent)}
@media (max-width:820px){.fig-math,.fig-math-rev{grid-template-columns:1fr}}

/* ---- training recipe + rag chain ---- */
.recipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.8rem}
.recipe-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem}
.recipe-steps,.rag-chain{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.recipe-steps li{font-size:.9rem;color:var(--ink-soft);line-height:1.5;padding-left:.2rem}
.recipe-steps li b{display:block;color:var(--ink-strong);font-family:var(--serif);font-size:1rem;margin-bottom:.1rem}
.rc-meta{display:block;font-family:var(--mono);font-size:.68rem;color:var(--accent);margin:.1rem 0 .2rem}
.rc-foot{margin:1rem 0 0;font-size:.82rem;color:var(--ink-dim);line-height:1.5}
.rag-chain{counter-reset:none}
.rag-chain li{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--ink-soft);
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem}
.rag-chain li b{color:var(--ink-strong)}
.rag-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#04121a;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.76rem;font-weight:600}
@media (max-width:820px){.recipe-grid{grid-template-columns:1fr}}

/* ---- Jindu: the two frontends ---- */
.frontends{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.4rem}
.frontend-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.frontend-card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 18px 44px -30px rgba(0,0,0,.5)}
.frontend-tag{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.fe-mono{color:var(--ink-dim);text-transform:none}
.frontend-card h4{font-family:var(--serif);font-size:1.18rem;color:var(--ink-strong);margin:.5rem 0 .15rem;font-weight:560}
.fe-sub{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);margin:0 0 .9rem}
.fe-modes{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.fe-mode{font-family:var(--mono);font-size:.72rem;padding:.28rem .6rem;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-dim)}
.fe-mode.is-on{border-color:var(--accent);color:var(--accent);background:rgba(103,232,249,.08)}
.fe-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.fe-feats li{position:relative;padding-left:1.1rem;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.fe-feats li::before{content:"›";position:absolute;left:0;color:var(--accent);font-weight:700}
.fe-feats li b{color:var(--ink-strong)}
@media (max-width:820px){.frontends{grid-template-columns:1fr}}

/* ---- ZTE: planner ↔ worker A2A split ---- */
.a2a-split{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;margin-bottom:1.6rem}
.a2a-agent{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem;position:relative;overflow:hidden}
.a2a-agent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.a2a-planner::before{background:var(--accent-soft)}
.a2a-worker::before{background:var(--accent)}
.a2a-role{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}
.a2a-agent h4{font-family:var(--serif);font-size:1.25rem;color:var(--ink-strong);margin:.4rem 0 .6rem;font-weight:560}
.a2a-tag{font-family:var(--mono);font-size:.58rem;color:var(--accent);border:1px solid rgba(103,232,249,.4);
  border-radius:999px;padding:.1rem .45rem;vertical-align:middle;letter-spacing:.04em}
.a2a-agent>p{color:var(--ink-soft);font-size:.92rem;line-height:1.55;margin:0 0 .8rem}
.a2a-caps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.a2a-caps li{position:relative;padding-left:1.1rem;font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);line-height:1.45}
.a2a-caps li::before{content:"▪";position:absolute;left:0;color:var(--accent)}
.a2a-bridge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-width:120px;padding:0 .3rem}
.a2a-bridge-lab{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
  writing-mode:horizontal-tb;text-align:center;border:1px dashed var(--line-strong);border-radius:999px;padding:.25rem .6rem}
.a2a-arrow{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft)}
.a2a-arrow-down{color:var(--accent-soft)}.a2a-arrow-up{color:var(--accent)}
@media (max-width:820px){.a2a-split{grid-template-columns:1fr}.a2a-bridge{flex-direction:row;gap:1rem;padding:.4rem 0}}

/* ---- ZTE: phone demo ---- */
.zte-stage{display:grid;grid-template-columns:minmax(230px,.85fr) 1.15fr;gap:1.2rem;align-items:stretch;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:clamp(1rem,2vw,1.4rem);box-shadow:0 14px 40px -30px rgba(0,0,0,.5)}
.zte-stage>*{min-width:0}
.phone-wrap{display:flex;flex-direction:column;align-items:center;gap:.9rem}
/* The device: a titanium rail, a black bezel, and a screen that is
   inset from it — three surfaces, which is what stops a phone mock
   reading as a rounded rectangle with a picture in it. */
.phone-frame{position:relative;width:100%;max-width:292px;aspect-ratio:.492;
  background:#0a0906;border-radius:46px;overflow:hidden;isolation:isolate;
  padding:4px;
  box-shadow:
    0 0 0 1.5px #2a251c,
    0 0 0 4px #16130e,
    0 0 0 5px rgba(224,164,92,.16),
    0 42px 84px -40px rgba(20,14,6,.85),
    0 8px 24px -14px rgba(20,14,6,.5)}
.phone-frame::before{content:"";position:absolute;inset:0;border-radius:46px;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 0 1px rgba(246,241,230,.10)}
/* a single soft specular sweep, the only "glass" cue that survives at
   this size — anything more and it reads as a stock 3-D mockup */
.phone-glare{position:absolute;inset:0;border-radius:46px;pointer-events:none;z-index:5;
  background:linear-gradient(128deg,rgba(255,255,255,.10) 0 16%,rgba(255,255,255,0) 42%);
  mix-blend-mode:screen}
#zteScreen{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);
  display:block;border-radius:42px;z-index:2}
.phone-cap{font-size:.8rem;color:var(--ink-dim);text-align:center;max-width:34ch;margin:0;line-height:1.55}
.phone-cap b{color:var(--ink-soft);font-weight:600}
.zte-p .ag-name{color:#5c7ba4}
.zte-w .ag-name{color:var(--accent)}
.zte-h .ag-name{color:#b9491f}
@media (max-width:820px){.zte-stage{grid-template-columns:1fr}.phone-frame{max-width:268px}}

/* cnnCanvas: absolute-fill to stop the dpr height-feedback collapse; ztfcnn re-resizes on visible */
.ai-body #cnnCanvas{position:absolute;inset:0;width:100%;height:100%}

/* ---- home page: publications & experience ---- */
.hub-cv{max-width:var(--maxw);margin:0 auto}
.hub-cv .results-head{max-width:70ch;margin-bottom:2rem}
.cv-two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.cv-col .cv-h{font-family:var(--serif);font-size:1.25rem;color:var(--ink-strong);display:flex;align-items:center;gap:.9rem;
  margin:0 0 1.3rem;font-weight:560}
.cv-col .cv-h::after{content:"";flex:1;height:1px;background:var(--line)}
.cv-pubs{grid-template-columns:1fr;gap:.7rem}
@media (max-width:860px){.cv-two{grid-template-columns:1fr;gap:2.2rem}}

/* ============================================================= *
 *  v30 — FIGURE PLATES, INSTRUMENT RAILS AND CONTROLS           *
 *  The three research figures are presented the way a journal    *
 *  presents a plate: a numbered header, the figure, the notes     *
 *  that explain the model, and a caption that states the limits.  *
 * ============================================================= */

.fig{background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;
  box-shadow:0 20px 48px -36px rgba(40,30,10,.45);margin:0;overflow:hidden}
.fig-head{display:flex;align-items:baseline;gap:.9rem;padding:.8rem clamp(.9rem,1.8vw,1.3rem);
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.fig-no{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:500;flex:none}
.fig-title{font-family:var(--serif);font-size:1.02rem;font-weight:560;color:var(--ink-strong);
  flex:1 1 auto;min-width:0;line-height:1.3}
.fig-meta{font-family:var(--mono);font-size:.63rem;letter-spacing:.05em;color:var(--ink-dim);
  flex:none;white-space:nowrap}
.fig-body{display:grid;gap:1.1rem;padding:clamp(.9rem,1.8vw,1.3rem)}
.fig-split{grid-template-columns:1.52fr 1fr;align-items:stretch}
.fig-split-wide{grid-template-columns:1.68fr 1fr}
.fig-split>*{min-width:0}
.fig-foot{padding:0 clamp(.9rem,1.8vw,1.3rem) 1.15rem;font-size:.82rem;color:var(--ink-dim);
  line-height:1.66}
.fig-foot strong{color:var(--ink-soft);font-weight:550}

/* the side rail reads as one instrument panel, not three stacked cards */
.fig-split .cyc-side,.fig-split .spec-side{gap:0;background:var(--surface-2);
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
.fig-split .cyc-side>*,.fig-split .spec-side>*{background:none;border:0;border-radius:0;
  border-bottom:1px solid var(--line);padding:.95rem 1.05rem}
.fig-split .cyc-side>*:last-child,.fig-split .spec-side>*:last-child{border-bottom:0}
.cyc-canvas-wrap{cursor:grab}
.cyc-canvas-wrap:active{cursor:grabbing}

/* --- the notes strip: the model, stated --- */
.fig-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:.75rem;
  padding:0 clamp(.9rem,1.8vw,1.3rem) 1.05rem}
.note{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:.9rem 1rem}
.note-lab{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.55rem}
.note .eqn{font-family:var(--serif);font-size:1rem;line-height:1.5;color:var(--ink-strong);
  margin:0 0 .55rem;padding:.45rem .65rem;background:var(--surface);
  border-left:2px solid rgba(168,85,24,.5);border-radius:0 3px 3px 0;overflow-wrap:anywhere}
.note .eqn b{font-weight:600}
.note .eqn .vis{font-family:var(--sans);font-size:.82em;color:var(--ink-soft)}
.note-p{margin:0;font-size:.855rem;color:var(--ink-soft);line-height:1.6}
.note-p b{color:var(--ink-strong);font-weight:600}
.note-p em{font-style:italic}

/* --- labelled controls with a live value --- */
.ctl{display:flex;flex-direction:column;gap:.22rem}
.ctl-row{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  font-size:.78rem;color:var(--ink-soft);line-height:1.35}
.ctl-row output{font-family:var(--mono);font-size:.76rem;color:var(--ink-strong);
  font-variant-numeric:tabular-nums;flex:none}
.ctl-row i{font-style:italic;font-family:var(--serif);font-size:1.05em}
.ctl-label{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-dim);display:block}
.seg{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.45rem}
.seg-group,.comp-row{display:block}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap}
.btn-row .btn-sm{flex:1 1 auto;justify-content:center;text-align:center}

/* sliders: a filled track, a quiet thumb, a real focus ring */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;
  background:none;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent) 0 var(--p,50%),var(--line-strong) var(--p,50%) 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  margin-top:-5.5px;border-radius:50%;background:var(--surface);border:1.5px solid var(--accent);
  box-shadow:0 1px 3px rgba(40,30,10,.3);transition:transform .14s var(--ease),box-shadow .14s}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)}
input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(168,85,24,.16)}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--line-strong)}
input[type=range]::-moz-range-progress{height:3px;border-radius:2px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--accent)}

/* component toggles read as on/off, not as another button */
.chip.is-on{border-color:var(--accent);color:var(--accent-deep);background:rgba(168,85,24,.09)}
.chip.is-off{opacity:.48;border-style:dashed}
.chip.active{position:relative}
.chip.active::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:2px;height:1.5px;
  background:var(--accent);border-radius:2px}

/* --- hero figure caption + plate --- */
#heroOrbit{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-fig-plate::after{content:none}
.hero-fig-cap{margin:.75rem 0 0;font-size:.84rem;color:var(--ink-dim);line-height:1.6}
.hero-fig-cap b{color:var(--ink-strong);font-weight:600}
.hero-figure{max-width:460px}

/* --- publication → figure cross-references --- */
.pub-jump{display:inline-flex;align-items:center;gap:.3rem;margin-top:.8rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.03em;color:var(--accent);transition:color .18s var(--ease)}
.pub-jump:hover{color:var(--accent-deep)}
.k-g{color:#1f9e78;font-weight:600}
.k-r{color:#cf5a2c;font-weight:600}

@media (max-width:900px){
  .fig-split,.fig-split-wide{grid-template-columns:1fr}
  .fig-head{flex-wrap:wrap;gap:.3rem .8rem}
  .fig-meta{width:100%}
}

/* the left column of a figure: scene above, light curve directly beneath it,
   so the phase cursor and the scene sit on the same visual axis */
.fig-main{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.fig-main .cyc-canvas-wrap{aspect-ratio:1.52;min-height:320px}
.fig-main .spec-canvas-wrap{aspect-ratio:1.6;min-height:360px}
.fig-main .lc-wrap{background:var(--surface-2);border:1px solid var(--line);
  border-radius:6px;padding:.9rem 1rem}
.lc-wrap h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 .6rem;font-weight:500}
@media (max-width:900px){.fig-main .cyc-canvas-wrap{aspect-ratio:1.25;min-height:300px}}

/* a spectrum is inherently wide: give it the full width and lay the
   instrument panel out horizontally underneath it */
.fig-stack{grid-template-columns:1fr}
.fig-stack .spec-canvas-wrap{aspect-ratio:2.25;min-height:380px}
.spec-rail{display:grid!important;grid-template-columns:1fr 1.15fr .85fr;gap:0;
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.spec-rail>*{background:none;border:0;border-radius:0;border-right:1px solid var(--line);
  padding:.95rem 1.05rem}
.spec-rail>*:last-child{border-right:0}
.spec-rail .readout-row{padding:.28rem 0}
.spec-rail .spec-controls{display:flex;flex-direction:column;gap:.7rem}
@media (max-width:900px){
  .spec-rail{grid-template-columns:1fr}
  .spec-rail>*{border-right:0;border-bottom:1px solid var(--line)}
  .spec-rail>*:last-child{border-bottom:0}
  .fig-stack .spec-canvas-wrap{aspect-ratio:1.35;min-height:340px}
}