/* base.css — bundle of the shared sheets, in load order: phylum.css → illustrations.css → living.css → world.css → vanta.css → journal.css → motion.css → theme.css.
   Edit the source files and re-run node _tools/rebundle.js. cinema.css and page sheets still load after this. */

/* ===================== phylum.css ===================== */
/* ============================================================
   PHYLUM DIGITAL — SHARED DESIGN SYSTEM
   Concept: memes and slang explained simply, every meme as an animal.
   Stage: the animal kingdom at night. Dark jungle, fireflies, moonlight.
   ------------------------------------------------------------
   Palette (night jungle):
     Deep Void    #060810  canvas
     Deep Leaf    #0C1120  panel
     Bone White   #EEF3E9  primary text (warm-cool off-white)
     Firefly Lime #8DF250  brand accent
     Alien Violet #B14DFF  the alien
     Moon Cyan    #39E6FF  links / moonlight
   SHARED energy accent across all worlds:
     Hyper Orange #FF5C1A  action / CTA
     Gold         #D8B36A  the Ask pill
   ============================================================ */

/* ---------- MOTION TOKENS — the single source of every easing on the site ---------- */
:root{--ease-cine:cubic-bezier(.16,1,.3,1);--ease-heavy:cubic-bezier(.22,1,.36,1);--ease-snap:cubic-bezier(.68,-.55,.27,1.55);--ease-standard:cubic-bezier(.5,0,.2,1);--dur-fast:.22s;--dur-base:.5s;--dur-slow:.8s}
:root{
  --void:#060810;
  --jar:#0C1120;
  --jar-2:#111a30;
  --ink:#EEF3E9;
  --ink-dim:#8A93A6;
  --lime:#8DF250;
  --plasma:#B14DFF;
  --cyan:#39E6FF;
  --orange:#FF5C1A;
  --gold:#D8B36A;
  --font-display:'Bricolage Grotesque','Space Grotesk',sans-serif;
  --font-body:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --nav-h:60px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font-family:var(--font-body);line-height:1.6;overflow-x:hidden}
::selection{background:var(--lime);color:var(--void)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--lime),var(--plasma));border-radius:8px;border:2px solid var(--void)}
a{color:var(--cyan);text-underline-offset:3px;transition:color .25s var(--ease-heavy)}
a:hover{color:var(--lime)}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
img{max-width:100%;display:block}
button{font-family:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- SITE NAV (shared, sticky, glass) ---------- */
/* reserve the menu height until nav.js draws it, so the page does not jump down when it appears */
#nav-root:empty{min-height:var(--nav-h)}
.pnav{position:sticky;top:0;z-index:80;height:var(--nav-h);display:flex;align-items:center;gap:1.4rem;padding:0 clamp(1rem,4vw,2.4rem);
  background:rgba(6,8,16,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(141,242,80,.16);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.pnav .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.pnav .brand .glyph{width:28px;height:28px;flex:none}
.pnav .brand b{color:var(--lime)}
.pnav .links{display:flex;align-items:center;gap:.3rem;margin-left:auto;flex-wrap:nowrap}
.pnav .links a,.pnav .dd>button{background:none;border:none;cursor:pointer;color:var(--ink-dim);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:.5rem .7rem;border-radius:8px;transition:color .2s,background .2s;white-space:nowrap}
.pnav .links a:hover,.pnav .dd>button:hover{color:var(--lime);background:rgba(141,242,80,.08)}
.pnav .links a.active{color:var(--lime)}
.pnav .dd{position:relative}
.pnav .dd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:rgba(12,17,32,.97);backdrop-filter:blur(16px);border:1px solid rgba(141,242,80,.22);border-radius:14px;padding:.5rem;display:none;flex-direction:column;gap:.15rem;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.pnav .dd.open .dd-menu{display:flex}
.pnav .dd-menu a{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.6rem .7rem;border-radius:9px;font-size:.7rem}
.pnav .dd-menu a .tag{font-size:.69rem;letter-spacing:.14em;padding:.15rem .45rem;border-radius:99px;border:1px solid currentColor}
.pnav .dd-menu a .tag.live{color:var(--lime)}
.pnav .dd-menu a .tag.field{color:var(--plasma)}
.pnav .menu-btn{display:none;margin-left:auto;background:none;border:1px solid rgba(238,243,233,.25);color:var(--ink);border-radius:9px;padding:.4rem .6rem;cursor:pointer;font-size:1rem}
@media (max-width:860px){
  .pnav .links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:.2rem;background:rgba(6,8,16,.98);padding:1rem;border-bottom:1px solid rgba(141,242,80,.2);margin-left:0;display:none}
  .pnav .links.open{display:flex}
  .pnav .menu-btn{display:block}
  .pnav .dd-menu{position:static;display:flex;border:none;background:rgba(141,242,80,.05);margin-top:.2rem}
}

/* ---------- shared layout primitives ---------- */
section{position:relative;padding:clamp(4rem,9vw,7.5rem) clamp(1.2rem,6vw,5rem)}
.wrap{max-width:1180px;margin:0 auto}
.eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--lime)}
h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:1.4rem}
h3{font-family:var(--font-body);font-weight:700;font-size:1.15rem;margin-bottom:.5rem}
p{max-width:66ch}
.lead{font-size:clamp(1.02rem,1.5vw,1.28rem)}
.dim{color:var(--ink-dim)}
kbd{border:1px solid var(--ink-dim);border-bottom-width:3px;border-radius:6px;padding:.1em .45em;font-family:var(--font-mono);font-size:.85em;color:var(--ink)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease-heavy),transform .8s var(--ease-heavy)}
.reveal.in{opacity:1;transform:none}

.btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-family:var(--font-mono);font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:none;padding:.95rem 2rem;border-radius:99px;transition:transform .22s var(--ease-snap),box-shadow .3s}
.btn-lime{color:var(--void);background:var(--lime);box-shadow:0 0 0 1px rgba(141,242,80,.4),0 10px 36px rgba(141,242,80,.3),inset 0 2px 0 rgba(255,255,255,.4)}
.btn-orange{color:var(--void);background:var(--orange);box-shadow:0 0 0 1px rgba(255,92,26,.4),0 10px 36px rgba(255,92,26,.32),inset 0 2px 0 rgba(255,255,255,.4)}
.btn-ghost{color:var(--ink);background:rgba(238,243,233,.05);border:1px solid rgba(238,243,233,.2)}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn:active{transform:scale(.97)}

/* glass card */
.glass{background:rgba(238,243,233,.045);border:1px solid rgba(238,243,233,.12);border-radius:22px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(238,243,233,.1)}

/* void bg canvas */
#voidCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}
main{position:relative;z-index:2}

/* toasts */
#toasts{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;width:min(92vw,460px)}
.toast{background:rgba(12,17,32,.9);backdrop-filter:blur(10px);border:1px solid var(--lime);border-radius:12px;color:var(--ink);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;padding:.6rem 1.1rem;box-shadow:0 0 24px rgba(141,242,80,.22);text-align:center;animation:tIn .4s var(--ease-snap),tOut .4s var(--ease-heavy) 2.6s forwards}
@keyframes tIn{from{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateY(10px)}}

/* ---------- HERO ---------- */
#phero{min-height:calc(100svh - var(--nav-h));display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:2rem;padding-top:clamp(2rem,5vw,4rem)}
@media (max-width:900px){#phero{grid-template-columns:1fr;text-align:center}}
.phero-copy .kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--plasma);margin-bottom:1.1rem}
.phero-copy h1{font-family:var(--font-display);font-size:clamp(3rem,9vw,6.4rem);line-height:.9;text-transform:uppercase;letter-spacing:.01em;margin-bottom:1.2rem}
.phero-copy h1 .l{color:var(--lime)}
.phero-copy h1 .p{color:var(--plasma)}
.phero-copy .sub{font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink-dim);max-width:52ch;margin-bottom:2rem}
@media (max-width:900px){.phero-copy .sub{margin-inline:auto}}
.phero-actions{display:flex;gap:.9rem;flex-wrap:wrap}
@media (max-width:900px){.phero-actions{justify-content:center}}
.phero-stage{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.specimen-ring{position:absolute;inset:6%;border-radius:50%;border:1px dashed rgba(141,242,80,.3);animation:spin 40s linear infinite}
.specimen-ring.two{inset:16%;border-color:rgba(177,77,255,.3);animation-direction:reverse;animation-duration:28s}
.specimen-ring.three{inset:26%;border-color:rgba(57,230,255,.25);animation-duration:20s}
@keyframes spin{to{transform:rotate(360deg)}}
.phero-stage .crew-svg{width:64%;filter:drop-shadow(0 20px 50px rgba(141,242,80,.25))}
@media (prefers-reduced-motion:reduce){.specimen-ring{animation:none}}

/* ---------- WORLDS PORTAL ---------- */
.worlds{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem;margin-top:2.4rem}
.world-card{position:relative;border-radius:20px;overflow:hidden;padding:1.8rem;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid rgba(238,243,233,.14);background:var(--jar);box-shadow:0 20px 60px rgba(0,0,0,.5);
  transition:transform .5s var(--ease-heavy),box-shadow .5s,border-color .5s;text-decoration:none;color:var(--ink)}
.world-card::before{content:"";position:absolute;inset:0;opacity:.9;transition:opacity .5s;z-index:0}
.world-card.w67::before{background:radial-gradient(120% 90% at 80% 10%,rgba(255,92,26,.35),transparent 60%),radial-gradient(90% 80% at 10% 90%,rgba(57,230,255,.25),transparent 60%)}
.world-card.wgyatt::before{background:radial-gradient(120% 90% at 80% 10%,rgba(177,77,255,.32),transparent 60%),radial-gradient(90% 80% at 10% 90%,rgba(255,92,26,.2),transparent 60%)}
.world-card.wrizz::before{background:radial-gradient(120% 90% at 80% 10%,rgba(57,230,255,.3),transparent 60%),radial-gradient(90% 80% at 10% 90%,rgba(141,242,80,.22),transparent 60%)}
.world-card>*{position:relative;z-index:1}
.world-card:hover{transform:translateY(-8px);border-color:rgba(141,242,80,.5);box-shadow:0 34px 80px rgba(0,0,0,.65),0 0 40px rgba(141,242,80,.12)}
.world-card .specimen-no{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.28em;color:var(--gold);position:absolute;top:1.4rem;left:1.4rem}
.world-card .status{position:absolute;top:1.3rem;right:1.4rem;font-family:var(--font-mono);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;padding:.25rem .6rem;border-radius:99px;border:1px solid currentColor}
.world-card .status.live{color:var(--lime)}
.world-card .status.field{color:var(--plasma)}
.world-card .giant{font-family:var(--font-display);font-size:clamp(3rem,7vw,5rem);line-height:.85;text-transform:uppercase;margin-bottom:.3rem}
.world-card h3{font-family:var(--font-body);font-weight:700;font-size:1.15rem;margin-bottom:.4rem}
.world-card p{font-size:.86rem;color:var(--ink-dim);margin-bottom:.8rem}
.world-card .go{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}

/* ---------- CREW ---------- */
.crew-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2.4rem}
.crew-card{background:var(--jar);border:1px solid rgba(238,243,233,.12);border-radius:20px;padding:1.6rem;text-align:center;transition:transform .5s var(--ease-heavy),border-color .5s,box-shadow .5s}
.crew-card:hover{transform:translateY(-6px);border-color:rgba(141,242,80,.4);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 34px rgba(141,242,80,.1)}
.crew-card .portrait{width:118px;height:118px;margin:0 auto .9rem;position:relative}
.crew-card .portrait svg{width:100%;height:100%;filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
.crew-card .role{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.24em;text-transform:uppercase;color:var(--plasma);margin-bottom:.3rem}
.crew-card .cname{font-family:var(--font-display);font-weight:400;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.5rem}
.crew-card .bio{font-size:.82rem;color:var(--ink-dim)}
.crew-card .handle{display:inline-block;margin-top:.7rem;font-family:var(--font-mono);font-size:.69rem;letter-spacing:.12em;color:var(--cyan)}

/* ---------- LAB TEASER ---------- */
.lab-teaser{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;background:linear-gradient(130deg,rgba(141,242,80,.1),rgba(177,77,255,.08));border:1px solid rgba(141,242,80,.28);border-radius:24px;padding:clamp(1.6rem,4vw,3rem);box-shadow:0 26px 70px rgba(0,0,0,.5)}
@media (max-width:820px){.lab-teaser{grid-template-columns:1fr;text-align:center}}
.lab-teaser .feat{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
@media (max-width:820px){.lab-teaser .feat{justify-content:center}}
.lab-teaser .chip{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:rgba(6,8,16,.5);border:1px solid rgba(238,243,233,.16);border-radius:99px;padding:.4rem .8rem}
.lab-visual{position:relative;aspect-ratio:4/3;border-radius:16px;background:#05070C;border:1px solid rgba(57,230,255,.25);overflow:hidden;display:flex;align-items:center;justify-content:center}
.lab-visual .mock{font-family:var(--font-display);color:#fff;text-align:center;line-height:1;text-transform:uppercase;-webkit-text-stroke:2px #000;text-shadow:0 3px 0 #000}
.lab-visual .mock .top{font-size:clamp(1.4rem,4vw,2.2rem)}
.lab-visual .mock .bot{font-size:clamp(1.4rem,4vw,2.2rem)}
.lab-visual .apemini{position:absolute;bottom:8px;right:10px;width:70px;transform:rotate(-8deg)}

/* ---------- FEED ---------- */
.feed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:2.2rem}
.post{aspect-ratio:1;border-radius:16px;background:var(--jar);border:1px solid rgba(238,243,233,.12);padding:1.1rem;display:flex;flex-direction:column;justify-content:space-between;transition:transform .4s var(--ease-heavy),border-color .4s;overflow:hidden;position:relative}
.post:hover{transform:translateY(-5px) rotate(-.5deg);border-color:rgba(177,77,255,.5)}
.post .kind{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plasma)}
.post .cap{font-family:var(--font-display);font-size:1.3rem;line-height:1;text-transform:uppercase;color:var(--ink)}
.post .meta{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.1em;color:var(--ink-dim)}
.feed-note{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.1em;color:var(--ink-dim);margin-top:1.2rem;text-align:center}

/* ---------- FAQ ---------- */
.faq details{border:1px solid rgba(238,243,233,.14);border-radius:14px;margin-bottom:.8rem;background:rgba(238,243,233,.03);overflow:hidden;transition:border-color .3s}
.faq details[open]{border-color:rgba(141,242,80,.5)}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 1.3rem;font-weight:700;font-size:1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:1.3rem;color:var(--lime);transition:transform .3s var(--ease-snap)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.3rem 1.1rem;color:var(--ink-dim);font-size:.92rem}

/* ---------- FOOTER ---------- */
.pfoot{position:relative;z-index:2;padding:3.5rem clamp(1.2rem,6vw,5rem) 3rem;border-top:1px solid rgba(238,243,233,.1);background:rgba(4,5,11,.92)}
.pfoot .wrap{display:grid;gap:1.4rem}
.pfoot .fbrand{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,3rem);text-transform:uppercase}
.pfoot .fbrand b{color:var(--lime)}
.pfoot .socials{display:flex;gap:.7rem;flex-wrap:wrap}
.pfoot .socials a{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);border:1px solid rgba(238,243,233,.2);border-radius:99px;padding:.5rem 1rem;text-decoration:none;transition:all .25s}
.pfoot .socials a:hover{color:var(--lime);border-color:var(--lime)}
.legal{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.1em;color:var(--ink-dim);opacity:.8;max-width:80ch;line-height:1.9}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important}
  .reveal{opacity:1;transform:none}
  #voidCanvas{display:none}
  body{background:radial-gradient(1200px 700px at 50% 0%,#0B1A15,var(--void))}
}

/* active lab dropdown parent */
.pnav .dd.hot>button{color:var(--lime)}

/* hero specimen organism art */
.phero-organism{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(70%,340px);opacity:.5;z-index:0;pointer-events:none}
.phero-organism svg{width:100%;height:100%;overflow:visible}
.phero-stage .crew-svg,.phero-stage .specimen-ring{position:relative;z-index:1}

/* image drop-in slots */
.phero-image{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;z-index:0;border-radius:24px}
.has-hero-image .phero-organism{opacity:.28}

/* ============ AUDIT: accessibility + responsive ============ */
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--lime);color:#08130a;padding:.6rem 1rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.obs-node:focus-visible .obs-dot{transform:scale(1.9);box-shadow:0 0 22px var(--nc,#8DF250)}
.obs-node:focus-visible{outline:none}
/* responsive tables */
table.cmp td,table.cmp th{word-break:break-word}
@media (max-width:560px){
  .world-telemetry{display:none}
  table.cmp{font-size:.82rem}
}
/* honor reduced-motion globally for any stray animations */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ============ CALM MODE (user-toggled motion pause) ============ */
.calm-btn{background:none;border:1px solid rgba(238,243,233,.2);border-radius:20px;color:var(--ink-dim);font-family:var(--font-mono);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;cursor:pointer;margin-left:.3rem}
.calm-btn:hover{color:var(--cyan);border-color:var(--cyan)}
html.calm-mode *,html.calm-mode *::before,html.calm-mode *::after{animation:none!important;transition:none!important}
html.calm-mode .living-bg,html.calm-mode .world-fog,html.calm-mode .fg-shard,html.calm-mode .torch,html.calm-mode .reticle,html.calm-mode .breach,html.calm-mode .spore-divider{display:none!important}
html.calm-mode .jar-card:hover,html.calm-mode .fs-tile:hover{transform:none!important}

/* ============ READABILITY PASS (headers + small text) ============ */
/* 1. Brighter secondary text across the whole site (was #8A93A6 ~4.1:1 → now ~7:1) */
:root{ --ink-dim:#AEB7C4; }

/* 2. Header text always sits ABOVE decorative art, with a soft scrim behind it */
.meme-hero, .pillar-wrap > header, .dex-head, .eco-head, .tx-head,
.fr-wrap > header, .dec-wrap > header, .dict-wrap > header, .or-wrap > header,
.rv-wrap > header, .sp-wrap > header, .quiz-wrap > header, .vt-wrap > header{
  position:relative; z-index:2;
}
/* No scrim rectangle — legibility comes from the text shadow itself, so the
   ambient field stays continuous behind the header instead of showing a dark box. */
.meme-hero h1, .pillar-wrap h1, .rv-wrap h1, .sp-wrap h1, .quiz-wrap h1, .vt-wrap h1{
  position:relative; z-index:2;
  color:var(--ink);
  text-shadow:0 0 30px rgba(6,8,16,.98), 0 0 14px rgba(6,8,16,.95), 0 2px 4px rgba(6,8,16,.9);
}
.meme-hero .specimen-tag, .pillar-wrap .specimen-tag{ position:relative; z-index:2; }

/* 3. Kicker/eyebrow labels: bigger, brighter, less extreme tracking */
.specimen-tag{
  font-size:.74rem !important;
  letter-spacing:.18em !important;
  color:#EBCE8B !important;
  opacity:1 !important;
  text-shadow:0 1px 10px rgba(6,8,16,.9);
}

/* 4. Decorative header organism: pushed back, softened, out of the text's way */
.page-hero-art{ opacity:.14 !important; filter:blur(.5px); right:-2% !important; }
@media (max-width:900px){ .page-hero-art{ display:none !important; } }

/* 5. Nav links: raise contrast */
.pnav .links a, .pnav .dd > button{ color:#C3CAD5; }
.pnav .links a:hover, .pnav .dd > button:hover{ color:var(--lime); }

/* 6. Lead paragraphs read as primary text, not muted */
.pillar-lead, .meme-answer{ color:var(--ink) !important; }
.meme-answer{ background:rgba(6,8,16,.72); }

/* 7. Section headings get separation from the living background */
.meme-body h2, .pillar-wrap h2, .vt-wrap h2{ text-shadow:0 2px 16px rgba(6,8,16,.9); }

/* 8. Keep the ambient field from washing out the top of the page */
.living-bg{ opacity:.62; }  /* uniformly calmer field — no banding, headers stay readable */

/* ============ TYPE & SPACING SYSTEM (Bricolage display + vertical rhythm) ============ */
:root{
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.25rem; --s-5:3.5rem; --s-6:5rem; --s-7:7rem;
}
/* Display font tuning: Bricolage needs weight + slightly open tracking, NOT Anton's crush */
h1,h2,h3,.phero-copy h1,.meme-hero h1,.pillar-wrap h1,.sp-name,.quiz-name,.jr-title,.rv-t,.fbrand{
  font-weight:800;
  letter-spacing:-.015em;
  text-transform:none;         /* Bricolage reads far better in sentence case than shouting caps */
}
h1,.meme-hero h1,.pillar-wrap h1,.phero-copy h1{ line-height:1.02; }
h2{ line-height:1.1; }
/* keep the mono/lab labels shouting — that's the lab voice */
.specimen-tag,.fs-k,.world-telemetry,.hero-wordmark,.jr-sub,.sv-vt,.legal,.calm-btn,.jr-chip,.pnav .links a,.pnav .dd>button{
  text-transform:uppercase;
}
.fbrand{ letter-spacing:.02em; }

/* Section rhythm: generous, consistent, never cramped */



.meme-hero, .pillar-wrap > header{ padding-bottom:var(--s-2); }
.meme-hero h1, .pillar-wrap h1{ margin-bottom:var(--s-3); }
.meme-answer, .pillar-lead{ margin-bottom:var(--s-4); }


.pillar-card, .em-row{ margin:var(--s-2) 0; }
.pillar-faq{ margin-top:var(--s-5); }
.pillar-faq details{ padding:var(--s-2) 0; }
.spore-divider{ margin:var(--s-4) 0; }
.sources-list{ margin-top:var(--s-1); }
section, .wrap > section{ margin-bottom:var(--s-6); }

/* breathing room under the sticky nav on every page */

@media (max-width:640px){
  :root{ --s-5:2.5rem; --s-6:3.5rem; --s-7:4.5rem; }
  .meme-hero{ padding-top:var(--s-4); }
}

/* ============ SPECIMEN OF THE DAY ============ */
.sotd{max-width:1160px;margin:0 auto var(--s-5);padding:0 clamp(1.2rem,5vw,3rem)}
.sotd-card{display:flex;gap:1.4rem;align-items:center;background:linear-gradient(120deg,rgba(12,17,32,.95),rgba(6,8,16,.9));border:1px solid rgba(238,243,233,.12);border-left:5px solid var(--c,#8DF250);border-radius:22px;padding:1.4rem 1.6rem;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;transition:transform .45s var(--ease-cine),box-shadow .45s}
.sotd-card::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 100% at 8% 50%, color-mix(in srgb, var(--c,#8DF250) 14%, transparent), transparent 70%);pointer-events:none}
.sotd-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 40px color-mix(in srgb, var(--c,#8DF250) 22%, transparent)}
.sotd-art{flex:0 0 120px;width:120px;height:120px;filter:drop-shadow(0 0 22px var(--c,#8DF250))}
.sotd-art svg{width:100%;height:100%;overflow:visible}
.sotd-b{display:flex;flex-direction:column;gap:.3rem}
.sotd-k{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c,#8DF250)}
.sotd-n{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,5vw,2.6rem);line-height:1;letter-spacing:-.02em}
.sotd-d{color:var(--ink-dim);font-size:.92rem;line-height:1.6;max-width:52ch}
.sotd-go{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-top:.3rem}
@media (max-width:640px){.sotd-card{flex-direction:column;text-align:center}.sotd-d{max-width:none}}

/* ============ TIME MACHINE (timeline slider) ============ */
.tt-wrap{max-width:900px;margin:0 auto var(--s-3);padding:0 clamp(1.2rem,5vw,3rem)}
.tt-bar{display:flex;align-items:center;gap:1rem;background:var(--jar);border:1px solid rgba(238,243,233,.14);border-radius:16px;padding:1rem 1.2rem;flex-wrap:wrap}
.tt-lab{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.tt-slider{flex:1;min-width:180px;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:linear-gradient(90deg,#3a4152,var(--lime));outline:none}
.tt-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--lime);cursor:pointer;box-shadow:0 0 16px rgba(141,242,80,.7);border:2px solid #06080f}
.tt-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--lime);cursor:pointer;border:2px solid #06080f}
.tt-out{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--lime);min-width:70px;text-align:right}
.tt-future{opacity:.16;filter:grayscale(1) blur(.6px);transition:opacity .4s,filter .4s}
.tt-fresh{box-shadow:0 0 0 1px var(--lime),0 0 26px rgba(141,242,80,.35);border-radius:14px;transition:box-shadow .4s}

/* ============ TILE ORNAMENT ART ============ */
.fs-tile{position:relative;overflow:hidden}
.tile-art{position:absolute;right:-6px;bottom:-8px;width:74px;opacity:.16;pointer-events:none;transition:opacity .5s var(--ease-cine),transform .5s var(--ease-cine)}
.tile-art svg{width:100%;height:auto;overflow:visible}
.fs-tile:hover .tile-art{opacity:.42;transform:translateY(-6px) rotate(-5deg) scale(1.08)}
.fs-tile.big .tile-art{width:104px;right:-4px;bottom:-10px}
@media (prefers-reduced-motion:reduce){.fs-tile:hover .tile-art{transform:none}}
html.calm-mode .tile-art{opacity:.12!important;transform:none!important}

/* ---------- nav v2: five tracks + Ask pill ---------- */
.pnav .links a.ask-pill{color:#060810;background:var(--gold,#D8B36A);border-radius:99px;padding:.5rem .95rem;font-weight:600;margin-left:.4rem;box-shadow:0 0 0 1px rgba(216,179,106,.35),0 6px 22px rgba(216,179,106,.22)}
.pnav .links a.ask-pill:hover,.pnav .links a.ask-pill.active{color:#060810;background:#E8C87E}
.pnav .dd-menu a.dd-landing{color:var(--ink);border-bottom:1px solid rgba(238,243,233,.1);border-radius:9px 9px 0 0;margin-bottom:.2rem}
.pnav .dd-menu a .tag.go{color:var(--lime)}
.pnav .dd-menu a .tag.key{color:var(--cyan)}
@media (max-width:860px){ .pnav .links a.ask-pill{margin:.4rem 0 0;text-align:center;justify-content:center} }

/* ---------- nav v2: phone fit (brand + menu + calm + journal chip must share 375px) ---------- */
@media (max-width:860px){
  .pnav{gap:.5rem}
  .pnav .brand{font-size:.82rem;letter-spacing:.03em;gap:.4rem;min-width:0}
  .pnav .brand .glyph{width:22px;height:22px}
  .pnav .menu-btn{padding:.3rem .5rem;font-size:.9rem}
  .calm-btn,.jr-chip{padding:.25rem .45rem !important;font-size:.69rem !important;letter-spacing:.06em !important}
}
@media (max-width:420px){
  .pnav{padding-left:.7rem;padding-right:.7rem}
  .pnav .brand{font-size:.74rem;letter-spacing:.02em}
}

/* ---------- Specimens: view switcher (grid · tree · web · map) ---------- */
.dex-views{position:relative;z-index:6;display:flex;gap:.3rem;align-items:center;flex-wrap:wrap;width:var(--wide,92vw);margin:.9rem auto 0;padding:0 clamp(1rem,4vw,2.4rem)}
.dex-views .k{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-right:.4rem}
.dex-views a{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;border:1px solid rgba(238,243,233,.16);border-radius:99px;padding:.35rem .8rem}
.dex-views a:hover{color:var(--lime);border-color:var(--lime)}
.dex-views a.active{color:var(--void);background:var(--lime);border-color:var(--lime)}
body[data-page="observatory"] .dex-views{position:fixed;top:calc(var(--nav-h) + .6rem);left:.8rem;width:auto;margin:0;padding:.35rem .5rem;background:rgba(6,8,16,.85);border:1px solid rgba(238,243,233,.12);border-radius:99px;z-index:7}

/* ---------- cookie consent bar (z 95: above toasts, below the journal drawer) ---------- */
.consent-bar{position:fixed;left:50%;bottom:1rem;transform:translate(-50%,120%);z-index:95;width:min(92vw,720px);display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  padding:1rem 1.2rem;background:rgba(12,17,32,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(216,179,106,.45);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:transform .5s var(--ease-cine),opacity .4s;opacity:0}
.consent-bar.in{transform:translate(-50%,0);opacity:1}
.consent-txt{flex:1 1 320px;color:var(--ink);font-size:.9rem;line-height:1.55}
.consent-txt b{color:var(--gold,#D8B36A)}
.consent-txt a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted rgba(57,230,255,.5);white-space:nowrap}
.consent-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.consent-btns button{cursor:pointer;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.6rem 1rem;border-radius:99px;border:1px solid rgba(238,243,233,.25);background:none;color:var(--ink)}
.consent-btns .consent-accept{background:var(--gold,#D8B36A);border-color:var(--gold,#D8B36A);color:#060810;font-weight:600}
.consent-btns button:hover{border-color:var(--lime);color:var(--lime)}
.consent-btns .consent-accept:hover{color:#060810;background:#E8C87E;border-color:#E8C87E}
@media (prefers-reduced-motion:reduce){.consent-bar{transition:none}}
body[data-page="home"] .consent-bar{bottom:5.8rem} /* clear the specimen-of-the-day bar */

/* ---------- footer legal links (every page) ---------- */
.pfoot-links,.foot2 .legal-links{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:.2rem 0 .9rem}
.pfoot-links a,.foot2 .legal-links a{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;display:inline-block;padding:.45rem .15rem}
.pfoot-links a:hover,.foot2 .legal-links a:hover{color:var(--lime)}

/* ---------- legal / trust pages ---------- */
.legal-wrap{max-width:820px;margin:0 auto;padding:1rem clamp(1.2rem,5vw,3rem) 4rem}
.legal-wrap h2{font-family:var(--font-display);font-weight:800;text-transform:none;letter-spacing:-.02em;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2.2rem 0 .6rem;scroll-margin-top:calc(var(--nav-h) + 1rem)}
.legal-wrap h3{font-family:var(--font-display);font-weight:800;text-transform:none;font-size:1.1rem;margin:1.4rem 0 .4rem}
.legal-wrap p,.legal-wrap li{line-height:1.75;color:var(--ink);max-width:none}
.legal-wrap ul{padding-left:1.2rem;margin:.4rem 0 1rem}
.legal-wrap li{margin-bottom:.35rem}
.legal-wrap .lead{color:var(--ink-dim);font-size:1.05rem;margin-bottom:1.2rem}
.legal-wrap .stamp{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:1.6rem}
.legal-wrap .box{background:var(--jar);border:1px solid rgba(238,243,233,.12);border-left:3px solid var(--gold,#D8B36A);border-radius:14px;padding:1rem 1.2rem;margin:1.2rem 0}
.legal-wrap table{width:100%;border-collapse:collapse;font-size:.92rem;margin:.6rem 0 1.2rem}
.legal-wrap th,.legal-wrap td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid rgba(238,243,233,.1);vertical-align:top}
.legal-wrap th{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.legal-wrap a{color:var(--cyan)}
.legal-wrap .contact-card{display:flex;flex-direction:column;gap:.4rem;background:var(--jar);border:1px solid rgba(216,179,106,.35);border-radius:18px;padding:1.4rem;margin:1.2rem 0}
.legal-wrap .contact-card a.big{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,3vw,1.8rem);color:var(--ink);text-decoration:none;word-break:break-all}
.legal-wrap .contact-card a.big:hover{color:var(--lime)}
/* crew cards reused on the About page (mirrors hub.css) */
.legal-wrap .crew2{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.legal-wrap .crew2>div{display:flex;gap:1rem;align-items:center;padding:1rem 1.2rem;border-radius:18px;border:1px solid rgba(238,243,233,.08);background:rgba(12,17,32,.6)}
.legal-wrap .crew2 [data-mascot]{width:64px;height:64px;flex:none}
.legal-wrap .crew2 [data-mascot] svg{width:100%;height:100%}
.legal-wrap .crew2 b{font-family:var(--font-display);font-weight:800;display:block}
.legal-wrap .crew2 span{color:var(--ink-dim);font-size:.85rem;line-height:1.45}
@media(max-width:900px){.legal-wrap .crew2{grid-template-columns:1fr}}

/* phone tap targets: a text link needs a bigger hit area than its line box */
@media (max-width:600px){.pnav .links a,.pnav .dd>button{padding:.72rem .7rem}.pnav .dd-menu a{padding:.72rem .7rem}.pfoot-links,.foot2 .legal-links{gap:.2rem .8rem}}


/* ===================== illustrations.css ===================== */
/* ============ ILLUSTRATION LAYER ============ */
.illo{width:100%;height:auto;display:block;overflow:visible}
.illo-fig{margin:var(--s-3) 0;background:linear-gradient(140deg,rgba(12,17,32,.9),rgba(6,8,16,.7));border:1px solid rgba(238,243,233,.1);border-radius:20px;padding:1.4rem;position:relative;overflow:hidden;transition:transform .5s var(--ease-cine),border-color .4s,box-shadow .5s}
.illo-fig::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--ic,#8DF250) 10%, transparent), transparent 70%)}
.illo-fig:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--ic,#8DF250) 45%, transparent);box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 40px color-mix(in srgb, var(--ic,#8DF250) 14%, transparent)}
.illo-fig figcaption{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ic,#8DF250);text-align:center;margin-top:.9rem;opacity:.85}

/* diagram inside a pillar card */
.pillar-card .illo{max-width:300px;margin:1rem auto .2rem}
.pillar-card{position:relative}

/* era emblem: floats beside the card heading */
.era-emblem{position:absolute;top:1.1rem;right:1.1rem;width:104px;opacity:.9;pointer-events:none}
.era-emblem .illo{filter:drop-shadow(0 0 18px color-mix(in srgb, var(--ac,#8DF250) 40%, transparent))}
@media (max-width:760px){.era-emblem{position:static;width:120px;margin:0 auto 1rem}}

/* death icon row */
.death-ic{float:left;width:78px;margin:0 1.1rem .6rem 0}
.death-ic .illo{filter:drop-shadow(0 0 16px color-mix(in srgb, var(--ac,#FF5C1A) 45%, transparent))}
@media (max-width:560px){.death-ic{float:none;margin:0 auto .8rem;width:92px}}

/* the world map */
.illo-map{max-width:620px;margin:0 auto}
.illo-map text{font-weight:600}

/* radar */
.illo-radar{max-width:320px;margin:0 auto}

/* spot ornaments — small floating lab objects */
.illo-spot{width:100%;height:auto}
.spot-rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1.6rem;z-index:3;pointer-events:none;opacity:.4}
.spot-rail > div{width:44px;animation:spotFloat 7s ease-in-out infinite}
.spot-rail > div:nth-child(2){animation-delay:-2.3s}
.spot-rail > div:nth-child(3){animation-delay:-4.6s}
@keyframes spotFloat{50%{transform:translateY(-12px)}}
@media (max-width:1180px){.spot-rail{display:none}}

/* section ornament — centred divider illustration */
.illo-divider{display:flex;align-items:center;gap:1.2rem;margin:var(--s-5) 0}
.illo-divider::before,.illo-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(238,243,233,.22),transparent)}
.illo-divider > div{width:56px;flex:0 0 56px;opacity:.75}

/* lifecycle chart block */
.illo-chart{background:var(--jar);border:1px solid rgba(238,243,233,.12);border-radius:20px;padding:1.4rem 1rem 1rem;margin:var(--s-3) 0}
.illo-chart figcaption{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);text-align:center;margin-top:.6rem}

@media (prefers-reduced-motion:reduce){
  .spot-rail > div{animation:none}
  .illo animate{display:none}
}
html.calm-mode .spot-rail{display:none}


/* ===================== living.css ===================== */
/* ============ LIVING WORLD LAYER — ambient depth + 3D ============ */
/* base cosmos sits on <html>; body goes transparent so the canvas shows through */
html{background:radial-gradient(130% 90% at 50% -10%, #0c1226 0%, #070a15 55%, #05060d 100%) fixed}
body{background:transparent !important}

.living-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}

/* cards become 3D-ready surfaces */
.world-card,.dex-card,.grave,.radar-col,.sv-card,.st-card,.lab-card,.dict-compare,.fs-tile{
  transform-style:preserve-3d;
  transition:transform .35s var(--ease-cine), box-shadow .35s var(--ease-cine);
  will-change:transform;
}
.living-tilt{box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(141,242,80,.12) !important}

/* gentle idle life on glyph badges + crew art */
@media (prefers-reduced-motion:no-preference){
  .sv-badge{animation:livingBreath 5.5s ease-in-out infinite}
  .living-float{animation:livingFloat 7s ease-in-out infinite}
}
@keyframes livingBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes livingFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}

@media (prefers-reduced-motion:reduce){
  .living-bg{opacity:.6}
  .world-card,.dex-card,.grave,.radar-col,.sv-card,.st-card,.lab-card,.dict-compare,.fs-tile{transition:none}
}

/* readability: breathing room for condensed display headings at small sizes */
.fs-tile h3,.fr-card h3,.dict-term h2,.grave .gname,.radar-col h3,.st-card .nm,.meme-related .btn{letter-spacing:.03em}
.sv-glyph,.fs-glyph,.dex-glyph{letter-spacing:.04em}
.fr-card h3{font-family:var(--font-display);font-size:1.35rem;letter-spacing:.05em;line-height:1.05}

/* decorative header art */
.page-hero-art{position:absolute;top:-10px;right:-6px;width:clamp(130px,24vw,240px);opacity:.32;pointer-events:none;z-index:-1}
.page-hero-art svg{width:100%;height:100%;overflow:visible}
.tl-line .page-hero-art{top:-30px}


/* ===================== world.css ===================== */
/* ============ THE DEPTH ENGINE — 4D world layer ============ */

/* --- HUD world-chrome --- */
.world-hud{position:fixed;inset:0;pointer-events:none;z-index:6}
.world-hud .cnr{position:absolute;width:34px;height:34px;opacity:.5}
.world-hud .cnr.tl{top:10px;left:10px;border-top:1.5px solid var(--lime);border-left:1.5px solid var(--lime)}
.world-hud .cnr.tr{top:10px;right:10px;border-top:1.5px solid var(--lime);border-right:1.5px solid var(--lime)}
.world-hud .cnr.bl{bottom:10px;left:10px;border-bottom:1.5px solid var(--lime);border-left:1.5px solid var(--lime)}
.world-hud .cnr.br{bottom:10px;right:10px;border-bottom:1.5px solid var(--lime);border-right:1.5px solid var(--lime)}
.world-telemetry{position:fixed;right:16px;bottom:14px;font-family:var(--font-mono);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(238,243,233,.45);z-index:6;pointer-events:none;text-align:right;line-height:1.7}
.world-telemetry b{color:var(--lime)}
@media (max-width:600px){.world-hud .cnr{width:22px;height:22px}.world-telemetry{font-size:.69rem}}

/* --- foreground occlusion layer (things pass IN FRONT of content) --- */
.world-fg{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.world-fg .shard{position:absolute;opacity:.22;will-change:transform;filter:blur(.4px)}
.world-fg .shard svg{display:block}

/* --- cursor torch (reveals surfaces) --- */
.world-torch{position:fixed;top:0;left:0;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(141,242,80,.10),rgba(57,230,255,.05) 42%,transparent 62%);mix-blend-mode:screen;will-change:transform;opacity:0;transition:opacity .6s}
.world-torch.on{opacity:1}

/* --- living reticle ring (native cursor stays) --- */
.world-reticle{position:fixed;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;pointer-events:none;z-index:9998;border:1px solid rgba(141,242,80,.55);border-radius:50%;opacity:0;transition:width .22s var(--ease-cine),height .22s var(--ease-cine),margin .22s,border-color .22s,opacity .4s,border-radius .22s}
.world-reticle.on{opacity:.85}
.world-reticle.hot{width:46px;height:46px;margin:-23px 0 0 -23px;border-color:var(--cyan);border-width:1.5px}
.world-reticle.hot.sq{border-radius:12px}

/* --- ambient comet --- */
.world-comet{position:fixed;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(141,242,80,.9),0 0 3px 1px #fff;z-index:3;pointer-events:none}

/* --- containment-jar shimmer on specimen cards --- */
.dex-card{position:relative;overflow:hidden}
.dex-card::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.09) 50%,transparent 58%);opacity:0;transform:translateX(-30%);transition:opacity .5s;pointer-events:none}
.dex-card:hover::after{opacity:1;animation:jarSheen 1.1s ease-out}
@keyframes jarSheen{0%{transform:translateX(-40%)}100%{transform:translateX(40%)}}

/* --- scroll-depth fog progression --- */
.world-fog{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(130% 90% at 50% 108%, rgba(141,242,80,.06), transparent 58%);opacity:calc(.35 + .65*var(--scroll-depth,0));transition:opacity .5s}

@media (prefers-reduced-motion:reduce){
  .world-fg,.world-torch,.world-reticle,.world-comet{display:none!important}
  .dex-card:hover::after{animation:none}
}

/* warp transition flash */
.warp-flash{position:fixed;inset:0;z-index:9999;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(141,242,80,.18), rgba(6,8,16,.0) 45%);opacity:0}
.warp-flash.in{opacity:1;transition:opacity .55s ease-out}
.warp-flash.in{animation:warpIn .55s ease-out}
@keyframes warpIn{0%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1)}}
.warp-flash.out{background:radial-gradient(circle at 50% 50%, rgba(57,230,255,.0), rgba(6,8,16,.85) 60%);opacity:0}
.warp-flash.out.go{opacity:1;transition:opacity .3s ease-in}
@media (prefers-reduced-motion:reduce){.warp-flash{display:none}}

/* spore section dividers */
.spore-divider{height:20px;margin:1.8rem 0;background-image:radial-gradient(circle, rgba(141,242,80,.5) 1px, transparent 1.6px);background-size:22px 20px;background-position:center;opacity:.45;-webkit-mask-image:linear-gradient(90deg,transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(90deg,transparent,#000 32%,#000 68%,transparent)}
/* guaranteed hero wordmark */
.hero-wordmark{position:absolute;bottom:6px;right:10px;font-family:var(--font-mono);font-size:.69rem;letter-spacing:.18em;color:rgba(141,242,80,.65);z-index:2;pointer-events:none}
@media (prefers-reduced-motion:reduce){.spore-divider{opacity:.35}}

/* station time (day/night) */
html[data-shift="night"] .living-bg{filter:hue-rotate(-18deg) saturate(.85) brightness(.8)}
html[data-shift="night"] .world-fog{background:radial-gradient(130% 90% at 50% 108%, rgba(57,230,255,.07), transparent 58%)}
html[data-shift="dusk"] .living-bg{filter:hue-rotate(18deg) saturate(1.1)}
html[data-shift="dusk"] .world-fog{background:radial-gradient(130% 90% at 50% 108%, rgba(216,179,106,.07), transparent 58%)}
html[data-shift="dawn"] .living-bg{filter:hue-rotate(8deg) brightness(1.05)}
/* live vitals sparkline */
.sv-vitals{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem;padding-top:.8rem;border-top:1px solid rgba(238,243,233,.1)}
.sv-vt{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
@media (max-width:560px){.sv-vitals{flex-direction:column;align-items:flex-start;gap:.4rem}}


/* ===================== vanta.css ===================== */
/* ============ DOC VANTA FIELD-NOTE BUBBLE ============ */
.vanta{position:fixed;left:16px;bottom:16px;z-index:70;max-width:min(88vw,340px);display:flex;gap:.7rem;align-items:flex-end;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s var(--ease-cine);pointer-events:none}
.vanta.in{opacity:1;transform:translateY(0);pointer-events:auto}
.vanta-av{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2a1650,#0c0820);border:1px solid rgba(177,77,255,.5);overflow:hidden;box-shadow:0 0 18px rgba(177,77,255,.35)}
.vanta-av svg{width:100%;height:100%}
.vanta-bubble{position:relative;background:rgba(12,8,24,.92);border:1px solid rgba(177,77,255,.4);border-radius:14px;border-bottom-left-radius:4px;padding:.7rem .9rem;backdrop-filter:blur(8px)}
.vanta-name{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--plasma);margin-bottom:.25rem}
.vanta-text{font-size:.84rem;line-height:1.5;color:var(--ink)}
.vanta-x{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--ink-dim);font-size:1rem;cursor:pointer;line-height:1}
.vanta-x:hover{color:var(--plasma)}
@media (max-width:600px){.vanta{left:10px;right:10px;bottom:10px;max-width:none}}
@media (prefers-reduced-motion:reduce){.vanta{transition:opacity .2s}}
/* guided tour controls */
.vanta-next{display:flex;gap:.4rem;margin-top:.7rem}
.vanta-next button{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;border-radius:8px;padding:.4rem .7rem;cursor:pointer;border:1px solid rgba(177,77,255,.5);background:rgba(177,77,255,.15);color:var(--ink)}
.vanta-next button:hover{background:rgba(177,77,255,.3)}
.vanta-next .vt-no{border-color:rgba(238,243,233,.2);background:none;color:var(--ink-dim)}


/* ===================== journal.css ===================== */
/* ============ THE FIELD JOURNAL ============ */
.jr-chip{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);background:rgba(141,242,80,.1);border:1px solid rgba(141,242,80,.35);border-radius:20px;padding:.25rem .6rem;cursor:pointer;transition:all .2s}
.jr-chip:hover{background:rgba(141,242,80,.2)}
.jr-drawer{position:fixed;top:0;right:0;bottom:0;width:min(92vw,380px);background:rgba(8,11,22,.97);border-left:1px solid rgba(141,242,80,.3);backdrop-filter:blur(14px);z-index:100;transform:translateX(100%);transition:transform .45s var(--ease-cine);overflow-y:auto;padding:1.4rem 1.3rem 3rem}
.jr-drawer.open{transform:none}
.jr-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--ink-dim);font-size:1.4rem;cursor:pointer}
.jr-close:hover{color:var(--lime)}
.jr-title{font-family:var(--font-display);font-size:1.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin-bottom:.2rem}
.jr-sub{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:1.1rem}
.jr-bar{height:8px;border-radius:6px;background:rgba(238,243,233,.1);overflow:hidden;margin-bottom:1.4rem}
.jr-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--lime),var(--cyan));transition:width .9s var(--ease-cine)}
.jr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.6rem}
.jr-cell{aspect-ratio:1;border-radius:12px;background:rgba(238,243,233,.04);border:1px solid rgba(238,243,233,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.3rem;text-decoration:none;overflow:hidden}
.jr-cell.found{border-color:rgba(141,242,80,.4);background:rgba(141,242,80,.06)}
.jr-cell svg{width:100%;height:auto}
.jr-cell .nm{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);text-align:center;margin-top:.15rem;line-height:1.2}
.jr-cell.found .nm{color:var(--lime)}
.jr-lock{font-size:1.2rem;color:rgba(238,243,233,.2)}
.jr-reset{margin-top:1.6rem;font-family:var(--font-mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);background:none;border:1px solid rgba(238,243,233,.2);border-radius:8px;padding:.5rem .8rem;cursor:pointer;width:100%}
.jr-reset:hover{color:#F87171;border-color:#F87171}
.jr-note{font-size:.76rem;color:var(--ink-dim);line-height:1.5;margin-top:1rem}
.jr-vault{display:block;margin-top:1.2rem;text-align:center;font-family:var(--font-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:#08130a;background:linear-gradient(135deg,var(--gold),#f0d090);border-radius:10px;padding:.7rem;text-decoration:none;font-weight:700}
/* toast for new discovery */
.jr-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);z-index:95;background:rgba(8,11,22,.95);border:1px solid var(--lime);border-radius:14px;padding:.7rem 1.1rem;display:flex;align-items:center;gap:.7rem;opacity:0;transition:opacity .4s,transform .4s var(--ease-cine);backdrop-filter:blur(8px);pointer-events:none}
.jr-toast.in{opacity:1;transform:translateX(-50%)}
.jr-toast svg{width:38px;height:38px}
.jr-toast .t{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.jr-toast .n{font-weight:700;color:var(--ink);font-size:.9rem}
/* containment breach critter */
.breach{position:fixed;z-index:5;width:54px;height:54px;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 0 14px rgba(255,92,26,.6))}
.breach svg{width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.jr-drawer{transition:none}.breach{display:none}}


/* ===================== motion.css ===================== */
/* ============ MOTION — the cheap premium layer (bundled into base.css, last) ============
   Pairs with motion.js. Everything here is progressive: browsers that lack a feature
   simply show the page as it was. Reduced motion turns all of it off at the bottom. */

/* ---------- tilt + sheen ---------- */
.tilt-on{transition:transform .09s ease-out !important;will-change:transform;z-index:6}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.22),rgba(255,255,255,.06) 28%,transparent 55%)}
.plate.tilt-on::after{opacity:1}
.plate.tilt-on .cap{translate:calc((var(--mx,50%) - 50%) * -.06) calc((var(--my,50%) - 50%) * -.05);transition:translate .12s ease-out}
.g-tile.tilt-on,.door.tilt-on,.new > a.tilt-on{box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px var(--ac,rgba(141,242,80,.4))}

/* ---------- kinetic headings: each word resolves out of a blur ---------- */
.kw{display:inline-block;animation:kw .72s var(--ease-cine) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes kw{from{opacity:0;translate:0 .32em;filter:blur(7px)}to{opacity:1;translate:0 0;filter:blur(0)}}

/* ---------- scroll-driven reveals: no JS, the browser drives it from scroll position ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hsec,.plate-card,.g-tile,.door,.new > a,.occ-card,.occ-more,.faq details,.sp-section,.md-clue{
      animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
    .plate-card{animation-range:entry 0% entry 45%}
  }
}
@keyframes rise{from{opacity:.001;translate:0 26px}to{opacity:1;translate:0 0}}

/* ---------- page morphs: the plate you tapped becomes the hero of its page ---------- */
@view-transition{navigation:auto}
.meme-plate-wrap .plate,.mp-plate .plate{view-transition-name:hero-plate}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
::view-transition-group(hero-plate){animation-duration:.5s;animation-timing-function:var(--ease-cine,cubic-bezier(.2,.8,.2,1))}
::view-transition-old(hero-plate),::view-transition-new(hero-plate){animation:none;mix-blend-mode:normal;height:100%;object-fit:cover}

/* ---------- the maker aura: a slow light that runs round the picture you are editing ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.qpreview,.lab-stage{position:relative}
.qpreview::before,.lab-stage::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:4;
  background:conic-gradient(from var(--ang),var(--gc,#8DF250),transparent 28%,rgba(57,230,255,.9) 52%,transparent 74%,var(--gc,#8DF250));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:aura-spin 7s linear infinite;opacity:.9}
.qpreview{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 70px -18px var(--gc,#8DF250)}
@keyframes aura-spin{to{--ang:360deg}}

/* ---------- firefly cursor ---------- */
#cursorFx{position:fixed;inset:0;width:100%;height:100%;z-index:9998;pointer-events:none}
html.calm-mode #cursorFx{display:none}

/* ---------- 3D jungle canvas: sits behind everything, fades in once it is ready ---------- */
.jungle3d{position:fixed;inset:0;z-index:-1;display:block;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.jungle3d.on{opacity:1}
html.j3d .living-bg{display:none}
html.calm-mode .jungle3d{display:none}
.j-scene .jungle3d{position:absolute;z-index:0;pointer-events:auto;opacity:1;transition:none}
.j-scene.j3d-on .j-world{display:none}

/* ---------- reduced motion: everything above goes still ---------- */
@media (prefers-reduced-motion: reduce){
  .kw{animation:none}
  .plate::after{display:none}
  .qpreview::before,.lab-stage::before{animation:none;opacity:.5}
  .jungle3d{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}


/* ===================== theme.css ===================== */
/* ============ THEME — light by default, dark on request ============
   Bundled into base.css LAST. One layout, two palettes.
   Part 1 gives both themes the same shapes: pill buttons, rounder cards, softer shadows.
   Part 2 sets the light palette as the default and restores the night palette under
   html[data-theme="dark"]. Part 3 recolours the pieces whose sheets hard-code dark paint.
   The toggle lives in nav.js and saves to localStorage phylum_theme. */

/* ---------- 1. shapes shared by both themes ---------- */
:root{--r-card:24px;--r-pill:99px;--shadow-card:0 1px 1px rgba(20,30,20,.04),0 6px 18px -8px rgba(20,30,20,.14),0 24px 48px -24px rgba(20,30,20,.18)}
.btn,.g-btn,.lt-pill,.calm-btn,.pnav .links a,.pnav .dd>button,.occ-links a,.plate-btns a,.plate-btns button,.ty-btn,.farm-buy,.md-form .g-btn{border-radius:var(--r-pill)}
.plate-card,.g-tile,.door,.new>a,.occ-card,.g-card,.cn-solved,.md-clue,.md-guess,.hl-card,.farm-buy,.lt-card,.faq details,.parents-card,.crew2>div,.motd-row,.sitesearch,.sr-out,.occ-more,.g-end,.j-pop,.ty-result,.dex-card,.ask-card,.ask-result,.sp-card,.sp-section,.lab-tools,.lab-stage,.pk-item{border-radius:var(--r-card)}
.pnav .links a,.pnav .dd>button{padding:.5rem .9rem}
h1{font-weight:600}

/* ---------- 2. palettes ---------- */
:root:not([data-theme="dark"]){
  --void:#F5F4EF; --jar:#FFFFFF; --jar-2:#EEEDE6;
  --ink:#1B231E; --ink-dim:#5C655F;
  --lime:#286B25; --cyan:#0B6A84; --plasma:#7A3FD6; --orange:#D64A12; --gold:#9A7420;
  --paper:#F5F4EF; --card:#FFFFFF; --line:#E6E5DE; --ink-2:#3A443E; --green-soft:#E3F2D9; --green-ink:#1F5A1E;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --void:#060810; --jar:#0C1120; --jar-2:#111a30;
  --ink:#EEF3E9; --ink-dim:#8A93A6;
  --lime:#8DF250; --cyan:#39E6FF; --plasma:#B14DFF; --orange:#FF5C1A; --gold:#D8B36A;
  --paper:#060810; --card:#0C1120; --line:rgba(238,243,233,.14); --ink-2:#C3CAD5; --green-soft:rgba(141,242,80,.12); --green-ink:#8DF250;
  --shadow-card:0 18px 50px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* the page ground lives on html on most pages (body is transparent so the fixed canvases show through) */
html:not([data-theme="dark"]){background:#F5F4EF}
html[data-theme="dark"]{background:#060810}

/* ---------- 3. the light theme, where sheets hard-coded the night ---------- */
html:not([data-theme="dark"]){
  body{background:var(--paper);background-image:none}
  ::selection{background:var(--lime);color:#fff}
  ::-webkit-scrollbar-track{background:var(--paper)}
  ::-webkit-scrollbar-thumb{background:#C9CFC6;border-color:var(--paper)}
  a{color:var(--cyan)}
  a:hover{color:var(--lime)}

  /* the Ask box: ask.css paints it near-black for the night theme, which left dark text on dark */
  #askIn{background:var(--card);border-color:var(--line)}
  #askIn::placeholder{color:var(--ink-dim);opacity:1}

  /* page titles: phylum.css gives them a near-black glow for the night theme;
     on paper that glow smudged dark text into an unreadable blur */
  .meme-hero h1, .pillar-wrap h1, .rv-wrap h1, .sp-wrap h1, .quiz-wrap h1, .vt-wrap h1{text-shadow:none}

  /* nav */
  .pnav{background:rgba(245,244,239,.86);border-bottom:1px solid var(--line);box-shadow:0 8px 30px -18px rgba(20,30,20,.25)}
  .pnav .brand{color:var(--ink)}
  .pnav .links a,.pnav .dd>button{color:var(--ink-2);background:var(--card);border:1px solid var(--line)}
  .pnav .links a:hover,.pnav .dd>button:hover,.pnav .links a.active{color:var(--green-ink);background:var(--green-soft);border-color:transparent}
  .pnav .dd-menu{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-card)}
  .pnav .dd-menu a{color:var(--ink-2)}
  .pnav .dd-menu a:hover{background:var(--green-soft);color:var(--green-ink)}
  .pnav .dd-menu a .tag.live{color:var(--lime)}
  .pnav .menu-btn{border-color:var(--line);color:var(--ink);background:var(--card)}
  .pnav .theme-btn{border-color:var(--line);color:var(--ink);background:var(--card)}
  @media (max-width:860px){ .pnav .links{background:rgba(245,244,239,.98);border-bottom:1px solid var(--line)} .pnav .dd-menu{background:var(--green-soft)} }

  /* cards and panels */
  .plate-card,.g-tile,.door,.new>a,.occ-card,.g-card,.cn-tile,.cn-solved,.md-clue,.md-guess,.hl-card,.farm-buy,.faq details,.parents-card,.crew2>div,.motd-row,.sitesearch,.sr-out,.occ-more,.g-end,.j-pop,.ty-result,.dex-card,.ask-card,.ask-result,.sp-card,.sp-section,.lab-tools,.lab-stage,.pk-item,.toast,.g-pause,.copyBox,.g-copybox{
    background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-card)}
  .cn-tile{box-shadow:none;border:1px solid var(--line)}
  .cn-tile.on{background:var(--lime);color:#fff;border-color:var(--lime)}
  .md-clue.locked{opacity:.55}
  .hsec.parents-card{background:linear-gradient(135deg,#FFF6EC,#EAF6E6)}
  .g-stage{border:1px solid var(--line);box-shadow:var(--shadow-card)}
  .g-progress{background:var(--jar-2)}
  .g-progress i{background:var(--lime)}
  .g-bar,.g-kind,.g-best,.g-keys,.dim,.sub,.g-hint,.specimen-tag,.eyebrow,.k{color:var(--ink-dim)}
  .specimen-tag,.eyebrow,.k,.g-head .specimen-tag,.sp-hero .specimen-tag{color:var(--green-ink) !important}
  .g-score{color:var(--lime)}
  .g-rank{color:var(--ink-2)}

  /* buttons and inputs */
  .btn-ghost,.g-btn,.plate-btns a,.plate-btns button,.occ-links a,.calm-btn{background:var(--card);border:1px solid var(--line);color:var(--ink)}
  .btn-ghost:hover,.g-btn:hover,.plate-btns a:hover,.occ-links a:hover{border-color:var(--lime);color:var(--green-ink);background:var(--green-soft)}
  .btn-lime,.g-btn.yes,.ty-btn.yay{background:var(--lime);color:#fff;border-color:var(--lime)}
  .btn-lime:hover,.g-btn.yes:hover{background:var(--green-ink)}
  .ty-btn.nay{background:var(--card);color:var(--orange);border-color:var(--orange)}
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),textarea,select,.md-form input,.sitesearch input{background:var(--card);color:var(--ink);border:1px solid var(--line)}
  input::placeholder,textarea::placeholder{color:var(--ink-dim)}
  .g-btn:disabled,.btn:disabled{opacity:.45}

  /* overlays that should still be dark: the start screen sits on the game, the plate stays a photo */
  .g-overlay,.g-count,.j-scene,.qpreview,.plate{color-scheme:dark}
  .g-overlay{background:rgba(245,244,239,.86);color:var(--ink)}
  .g-overlay h2,.g-overlay p{color:var(--ink)}

  /* footer */
  .pfoot,.foot2{background:transparent;border-top:1px solid var(--line);color:var(--ink-dim)}
  .pfoot .fbrand,.foot2 .fbrand{color:var(--ink)}
  .pfoot a,.foot2 a{color:var(--ink-dim)}
  .pfoot a:hover,.foot2 a:hover{color:var(--lime)}

  /* consent banner + toasts */
  .consent,.consent-banner,#consentBanner{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-card)}
  .consent-bar{background:var(--card);border:1px solid var(--line);box-shadow:0 20px 50px -12px rgba(20,30,20,.28)}
  .consent-txt b,.consent-txt a{color:var(--green-ink)}
  .consent-txt a{border-bottom-color:currentColor}
  .consent-btns button{border-color:var(--ink-dim);color:var(--ink)}
  .consent-btns button:hover{border-color:var(--green-ink);color:var(--green-ink)}
  .toast{color:var(--ink)}

  /* motion layer bits that assumed a dark ground */
  .plate::after{mix-blend-mode:normal;background:radial-gradient(circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.18),transparent 55%)}
  .g-tile.tilt-on,.door.tilt-on,.new > a.tilt-on{box-shadow:0 26px 60px -22px rgba(20,30,20,.35)}
  #cursorFx{mix-blend-mode:multiply;opacity:.55}
  .qpreview::before,.lab-stage::before{opacity:.7}
  .living-bg{opacity:1}
}

/* ---------- 4. the dark theme: same shapes, night paint, the flashlight montage behind ---------- */
html[data-theme="dark"]{
  .pnav .links a,.pnav .dd>button{background:rgba(238,243,233,.05);border:1px solid rgba(238,243,233,.1)}
  .pnav .theme-btn{border:1px solid rgba(238,243,233,.25);color:var(--ink);background:none}
  .plate-card,.g-tile,.door,.new>a,.occ-card{box-shadow:var(--shadow-card)}
  .flash-bg{position:fixed;inset:0;z-index:-1;display:block;pointer-events:none}
  .living-bg{display:none}
}

/* ---------- 5. the theme button, both themes ---------- */
.pnav .theme-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;margin-left:.4rem;flex:none}
.pnav .theme-btn:hover{color:var(--lime)}
@media (max-width:860px){.pnav .theme-btn{margin-left:auto;order:5}}