/* ============================================================
   PlantShade project page — botanical dark theme
   Self-contained: system fonts, no external assets.
   ============================================================ */
:root{
  --bg:#0b1410;
  --bg-alt:#0f1b15;
  --panel:#132018;
  --panel-2:#18271d;
  --line:#26382c;
  --text:#e7f0e9;
  --muted:#9fb4a6;
  --accent:#4ade80;      /* leaf green */
  --accent-2:#a3e635;    /* lime */
  --sun:#fbbf24;         /* supplementary light */
  --danger:#f87171;
  --radius:16px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
sup{font-size:.62em}
code{font-family:var(--mono)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,20,16,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1120px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.brand-accent{color:var(--accent)}
.logo-dot{width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--accent-2),var(--accent) 70%);
  box-shadow:0 0 14px var(--accent)}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{color:var(--muted);font-size:.92rem;font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-cta{background:var(--accent);color:#05130a !important;padding:8px 15px;
  border-radius:999px;font-weight:700}
.nav-cta:hover{background:var(--accent-2)}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:1.4rem;cursor:pointer}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:96px 0 72px;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(600px 380px at 78% 8%,rgba(251,191,36,.16),transparent 60%),
    radial-gradient(720px 460px at 12% 30%,rgba(74,222,128,.14),transparent 62%),
    linear-gradient(180deg,#0d1712,#0b1410)}
.hero-inner{position:relative;z-index:1}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.badge{font-size:.76rem;font-weight:600;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:var(--panel)}
.badge-venue{background:var(--accent);color:#05130a;border-color:transparent}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.05;margin:.1em 0 .3em;
  font-weight:800;letter-spacing:-.03em}
.grad{background:linear-gradient(90deg,var(--accent-2),var(--accent) 60%,var(--sun));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:1.15rem;color:var(--text);max-width:720px}
.authors{margin:22px 0 6px;color:var(--muted);font-size:.95rem}
.authors .aff{display:block;font-size:.82rem;margin-top:4px;opacity:.8}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 40px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;
  font-weight:700;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:all .2s}
.btn-primary{background:var(--accent);color:#05130a}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-small{padding:8px 15px;font-size:.86rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:34px}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-size:1.9rem;font-weight:800;color:var(--accent-2);font-variant-numeric:tabular-nums}
.hero-stats span{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ---------- PIPELINE STRIP ---------- */
.pipeline-strip{background:var(--panel);border-bottom:1px solid var(--line)}
.pipe-inner{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:18px 24px;flex-wrap:wrap}
.pipe-step{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 16px;border-radius:12px;transition:background .2s;min-width:104px}
.pipe-step:hover{background:var(--panel-2)}
.pipe-step span:nth-child(2){font-weight:700;font-size:.95rem}
.pipe-step small{color:var(--muted);font-size:.72rem}
.pipe-num{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#05130a;
  display:grid;place-items:center;font-weight:800;font-size:.8rem;margin-bottom:2px}
.pipe-arrow{color:var(--accent);font-size:1.2rem;opacity:.6}

/* ---------- SECTIONS ---------- */
.section{padding:76px 0}
.section-alt{background:var(--bg-alt)}
.section-head{max-width:760px;margin-bottom:38px}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:0 0 12px;font-weight:800;letter-spacing:-.02em}
.section-head p{color:var(--muted);font-size:1.05rem;margin:0}
.caption{color:var(--muted);font-size:.9rem;margin-top:16px;text-align:center}

/* ---------- SPLIT / PANELS ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.spec-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.spec-panel h3{margin:0 0 14px;font-size:1.05rem}
.spec-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:18px}
.spec-table td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table td:first-child{color:var(--muted);width:42%}
.spec-table td:last-child{font-weight:600}

/* figure placeholders */
.fig-placeholder{margin:0;border:2px dashed var(--line);border-radius:var(--radius);
  background:
    repeating-linear-gradient(45deg,rgba(74,222,128,.04) 0 12px,transparent 12px 24px),
    var(--panel);
  display:grid;place-items:center;text-align:center;color:var(--muted);
  padding:24px;font-size:.9rem;position:relative}
.fig-placeholder::before{content:"figure placeholder";position:absolute;top:12px;left:14px;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);opacity:.7}
.fig-placeholder::after{content:attr(data-fig);max-width:80%}

/* real paper figures (white-bg) on a light card */
.figure{margin:0}
.figure img{width:100%;display:block;border-radius:var(--radius);border:1px solid var(--line);
  background:#fff;padding:10px}
.figure figcaption{margin-top:12px;color:var(--muted);font-size:.86rem;text-align:center}
.figure figcaption b{color:var(--text)}
.figure-narrow{max-width:900px;margin:0 auto}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.overview-band{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:40px 0}
.overview-band .figure img{max-width:1000px;margin:0 auto}

/* species strip */
.species-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.species-strip figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--panel);
  border:1px solid var(--line)}
.species-strip img{width:100%;height:150px;object-fit:cover;display:block}
.species-strip figcaption{padding:12px 14px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.species-strip figcaption span{font-size:.76rem;color:var(--sun);font-weight:600}

/* ---------- CODE ---------- */
.code-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.code-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.code-title{padding:13px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:.92rem;background:var(--panel-2)}
.code-card pre{margin:0;padding:18px;overflow-x:auto}
.code-card code{font-family:var(--mono);font-size:.82rem;color:var(--text);line-height:1.7;white-space:pre}
.code-card .code-title code{background:rgba(74,222,128,.14);padding:2px 6px;border-radius:6px;color:var(--accent-2)}

.mini-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.mini-card b{display:block;color:var(--accent);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.mini-card span{font-size:.95rem}

/* ---------- DEMO ---------- */
.demo-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;max-width:960px;margin:0 auto}
.demo-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.demo-title{font-weight:700}
.time-readout{text-align:right}
.time-value{font-weight:800;font-size:1.1rem}
.time-value span{color:var(--accent-2)}
.sun-meta{font-size:.82rem;color:var(--muted)}
.demo-body{display:grid;grid-template-columns:1fr 220px;gap:22px;align-items:center}
.demo-stage{border-radius:12px;overflow:hidden;background:#0a120d;aspect-ratio:16/9;
  display:grid;place-items:center}
.demo-stage img{width:100%;height:100%;object-fit:contain;display:block}
/* orbit visual */
.orbit{position:relative;width:200px;height:200px;margin:0 auto}
.orbit-ring{position:absolute;inset:14px;border:2px dashed var(--line);border-radius:50%}
.orbit-plant{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.8rem}
.orbit-light{position:absolute;top:50%;left:50%;font-size:1.5rem;
  filter:drop-shadow(0 0 8px var(--sun));transition:transform .12s linear}
.demo-controls{display:flex;align-items:center;gap:16px;margin-top:20px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--sun));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;
  border:3px solid var(--accent);cursor:pointer}

/* inference prediction grid (pred | GT compare images) */
.pred-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.pred-grid figure{margin:0}
.pred-grid img{width:100%;border-radius:12px;border:1px solid var(--line);display:block;background:#0a120d}
.pred-grid figcaption{margin-top:8px;text-align:center;font-size:.86rem;color:var(--muted)}
.pred-grid figcaption b{color:var(--text)}
.pred-note{text-align:center;color:var(--muted);font-size:.86rem;margin-top:14px}
.pred-tabs{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap;justify-content:center}

/* demo 2x2 species grid */
.layout-tabs{display:flex;gap:8px;margin-bottom:16px;justify-content:center;flex-wrap:wrap}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.demo-grid figure{margin:0}
.demo-grid img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#0a120d;
  border-radius:12px;display:block;border:1px solid var(--line)}
.demo-grid figcaption{margin-top:8px;text-align:center;font-weight:700;font-size:.88rem;color:var(--muted)}
.demo-grid figcaption .na{color:var(--danger);font-weight:600;font-size:.78rem}

/* ---------- COMPARE ---------- */
.compare-card{max-width:820px;margin:0 auto}
.compare-stage{position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/9;user-select:none;background:#0a120d}
.compare-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.compare-clip{clip-path:inset(0 0 0 50%)}
.compare-divider{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--accent);
  transform:translateX(-50%);cursor:ew-resize}
.compare-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:var(--accent);color:#05130a;
  display:grid;place-items:center;font-weight:800;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.compare-label{position:absolute;bottom:14px;font-size:.78rem;font-weight:700;padding:4px 10px;
  border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.compare-label.left{left:14px}
.compare-label.right{right:14px}

/* ---------- MODALITY ---------- */
.modality-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.modality-grid figure{margin:0}
.modality-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);background:#0a120d}
.modality-grid figcaption{margin-top:10px;font-size:.82rem;color:var(--muted);text-align:center}
.modality-grid figcaption b{color:var(--text)}

/* ---------- RESULTS TABLE ---------- */
.result-tabs,.compare-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.tab{background:var(--panel);border:1px solid var(--line);color:var(--muted);
  padding:9px 18px;border-radius:999px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s}
.tab:hover{color:var(--text)}
.tab.active{background:var(--accent);color:#05130a;border-color:transparent}
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line)}
.results-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.results-table th,.results-table td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line)}
.results-table th{background:var(--panel-2);font-weight:700;position:sticky;top:0}
.results-table td:first-child,.results-table th:first-child{text-align:left}
.results-table tr:last-child td{border-bottom:0}
.results-table .method-ours{color:var(--accent-2);font-weight:700}
.results-table .win{color:var(--accent);font-weight:700}
.ood-chip{display:inline-block;background:rgba(167,139,250,.18);color:#c4b5fd;
  font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:6px}
.results-table th .ood-chip{margin-left:4px}

/* ---------- PHOTOSYNTHESIS ---------- */
.photo-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.photo-species{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  padding:7px 14px;border-radius:999px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s}
.chip.active{background:var(--sun);color:#1a1206;border-color:transparent}
#nrhCanvas{width:100%;height:auto;background:#0a120d;border-radius:12px;border:1px solid var(--line)}
.nrh-eq{margin-top:14px;font-family:var(--mono);font-size:.8rem;color:var(--muted);text-align:center;overflow-x:auto}
.photo-readout{display:flex;flex-direction:column;gap:12px}
.param-row{display:flex;align-items:baseline;gap:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.param-row span{color:var(--muted);font-size:.9rem;flex:1}
.param-row b{font-size:1.4rem;color:var(--accent-2);font-variant-numeric:tabular-nums}
.param-row small{color:var(--muted);font-size:.72rem;width:110px;text-align:right}
.gain-note{background:linear-gradient(180deg,rgba(74,222,128,.1),transparent);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:.92rem;color:var(--text)}
.gain-note b{color:var(--accent-2)}

/* ---------- APPLICATIONS ---------- */
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.app-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.app-ico{font-size:1.8rem;margin-bottom:10px}
.app-card h3{margin:0 0 8px;font-size:1.02rem}
.app-card p{margin:0;color:var(--muted);font-size:.9rem}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line);background:var(--panel);padding:34px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.footer-brand{font-weight:800;font-size:1.1rem}
.footer-sub{color:var(--muted);font-size:.86rem}
.footer-links{display:flex;gap:20px}
.footer-links a{color:var(--muted);font-size:.9rem}
.footer-links a:hover{color:var(--accent)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .split{grid-template-columns:1fr}
  .demo-body{grid-template-columns:1fr}
  .orbit{order:-1}
  .modality-grid{grid-template-columns:repeat(2,1fr)}
  .species-strip{grid-template-columns:repeat(2,1fr)}
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--bg);border-bottom:1px solid var(--line);padding:16px 24px;gap:14px;
    display:none}
  .nav-links.open{display:flex}
  .hero-stats{gap:22px}
  .hero-stats b{font-size:1.5rem}
}

/* ---------- LIGHT MODE ---------- */
@media(prefers-color-scheme:light){
  :root{
    --bg:#f6faf6;--bg-alt:#eef4ee;--panel:#ffffff;--panel-2:#f0f5f0;
    --line:#d8e4da;--text:#12241a;--muted:#5a7062;--accent:#16a34a;--accent-2:#65a30d;
  }
  .hero-bg{background:
    radial-gradient(600px 380px at 78% 8%,rgba(251,191,36,.18),transparent 60%),
    radial-gradient(720px 460px at 12% 30%,rgba(22,163,74,.12),transparent 62%),
    linear-gradient(180deg,#f0f7f0,#f6faf6)}
  .btn-primary,.nav-cta,.pipe-num,.tab.active{color:#fff !important}
  .badge-venue{color:#fff}
  .demo-stage,.compare-stage,.modality-grid img,#nrhCanvas{background:#eef4ee}
}
:root[data-theme="dark"]{
  --bg:#0b1410;--bg-alt:#0f1b15;--panel:#132018;--panel-2:#18271d;--line:#26382c;
  --text:#e7f0e9;--muted:#9fb4a6;--accent:#4ade80;--accent-2:#a3e635;
}
:root[data-theme="light"]{
  --bg:#f6faf6;--bg-alt:#eef4ee;--panel:#ffffff;--panel-2:#f0f5f0;
  --line:#d8e4da;--text:#12241a;--muted:#5a7062;--accent:#16a34a;--accent-2:#65a30d;
}