/* Home 3D mockups: tokens and components from Design/imports/Home 3D-html.zip, plus stacked chapters. */
:root{--bg:#0b0a09;--panel:#13110e;--panel-raised:#1a1713;--line:#2a2620;--line-strong:#3a352d;--text:#ebe6dc;--text-soft:#b3ad9f;--muted:#8a8477;--accent:#c2a46d;--accent-hover:#d2b680;--accent-soft:#2a2418;--accent-ink:#c2a46d;--on-accent:#14110c;--atlas:#8aa596;--signal:#d4b866;--serif:"Bellefair",Georgia,"Times New Roman",serif;--sans:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;--ease:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.45,0,.55,1);--void:color-mix(in srgb,var(--bg) 70%,#000);color-scheme:dark}
:root[data-theme="light"]{--bg:#f3efe6;--panel:#ebe5d8;--panel-raised:#fbf8f0;--line:#d9d0bf;--line-strong:#c4b9a4;--text:#24211b;--text-soft:#4d483f;--muted:#625c51;--accent:#8a6a2c;--accent-hover:#765a22;--accent-soft:#e8dcc0;--accent-ink:#6f5421;--on-accent:#f8f4ea;--atlas:#4f6e5f;--signal:#8f7220;--void:var(--panel);color-scheme:light}

*{box-sizing:border-box}
html{background:var(--void)}
body{margin:0;background:var(--void);color:var(--text);font:400 17px/28px var(--sans);-webkit-font-smoothing:antialiased;font-kerning:normal;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
button{font:inherit}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Type (zip values) */
.t-hero{margin:0;font:400 clamp(48px,7vw,104px)/1 var(--serif);letter-spacing:-.015em}
.t-h2{margin:0;font:400 clamp(40px,5.6vw,80px)/1.02 var(--serif);letter-spacing:-.02em}
.t-h3{margin:0;font:400 clamp(34px,4.4vw,56px)/1.05 var(--serif)}
.t-lede{margin:0;font-size:20px;line-height:32px;color:var(--text-soft)}
.t-label{font:500 14px/1.4 var(--sans);color:var(--muted)}
.soft{color:var(--text-soft)}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border:0;border-radius:6px;background:var(--accent);color:var(--on-accent);font:600 14px/1.4 var(--sans);cursor:pointer;transition:background .15s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--accent-hover)}
.btn-quiet{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border:0;border-radius:6px;background:color-mix(in srgb,var(--bg) 70%,transparent);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font:500 14px/1.4 var(--sans);cursor:pointer;transition:box-shadow .15s var(--ease),color .15s var(--ease)}
.btn-quiet:hover,.btn-quiet:focus-visible{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.tlink{color:var(--text);font-size:14px;text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .15s var(--ease)}
.tlink:hover,.tlink:focus-visible{text-decoration-color:var(--accent)}
.arw,.arw-d{display:inline-block;transition:transform .25s var(--ease)}
a:hover .arw,a:focus-visible .arw,button:hover .arw,button:focus-visible .arw{transform:translateX(4px)}
a:hover .arw-d,a:focus-visible .arw-d,button:hover .arw-d{transform:translateY(3px)}
.status{display:inline-flex;align-items:center;gap:8px;font:500 14px/1 var(--sans);color:var(--muted)}
.status i{width:8px;height:8px;background:var(--muted)}
.status.on{color:var(--accent-ink)}
.status.on i{background:var(--accent)}

/* Header */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:72px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.hdr.scrolled{background:color-mix(in srgb,var(--bg) 86%,transparent);box-shadow:inset 0 -1px 0 var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;padding:0 max(32px,calc((100% - 1160px) / 2 + 32px))}
.brand{display:inline-flex;align-items:center;gap:12px;font:400 22px/1 var(--serif)}
.brand svg{width:24px;height:17.2px;fill:var(--accent)}
.nav{display:flex;align-items:center;gap:32px;font-size:14px;color:var(--muted)}
.navlink{transition:color .15s var(--ease)}
.navlink:hover,.navlink:focus-visible{color:var(--text)}
.nav .btn{padding:8px 16px}
.ctls{display:flex;align-items:center;gap:12px}
.lang{display:flex;padding:2px;border:1px solid var(--line);border-radius:6px}
.lang button{min-width:34px;padding:4px 8px;border:0;border-radius:4px;background:transparent;color:var(--muted);font:500 12px/1.4 var(--sans);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.ctl{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease)}
.ctl:hover,.ctl:focus-visible{color:var(--accent);border-color:var(--accent)}
.ctl svg{width:16px;height:16px}
:root[data-theme="light"] .i-moon,:root:not([data-theme="light"]) .i-sun{display:none}
.prog{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(var(--progress,0));transform-origin:left}

/* Stacked chapters. chapters.js sets --stick, --enter, --leave and z-index. */
.ch{position:relative;min-height:100vh;background:var(--bg);overflow:clip}
.js .ch{position:sticky;top:var(--stick,0px);transform-origin:50% calc(100% - 50vh);transform:perspective(1800px) translateY(calc(var(--leave,0) * -3vh)) rotateX(calc(var(--leave,0) * 4deg)) scale(calc(1 - var(--leave,0) * .08));border-radius:12px 12px 0 0}
.js .ch:first-child{border-radius:0}
/* Edge shadow and hairline of an arriving chapter: only opacity changes per frame, so nothing repaints. */
.js .ch::before{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;box-shadow:0 -1px 0 var(--line-strong);opacity:calc(min(var(--enter,1), 1 - var(--enter,1)) * 2)}
.js .ch::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;background:var(--bg);opacity:calc(var(--leave,0) * .72);}
.js .ch.covered{visibility:hidden}
.ch-pad{padding-block:160px}

/* Reveals: timed, started per element when it scrolls into view (view() timelines freeze in sticky chapters). */
.js .rv{opacity:0;transform:perspective(900px) translateY(40px) rotateX(36deg);transform-origin:50% 100%;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.in{opacity:1;transform:none}

/* Tool cards (zip) */
.tool-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding:56px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.tilt{transform-style:preserve-3d;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),border-color .25s var(--ease)}
.tilt:hover{border-color:var(--line-strong)}
.tl{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pv{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:240px;padding:32px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.pv-text{font:400 22px/1.5 var(--sans);color:var(--muted)}
.pv-text s{text-decoration-color:var(--accent);opacity:.5}
.pv-text b{font-weight:400;color:var(--text)}
.cursor{display:inline-block;width:2px;height:24px;margin-left:2px;vertical-align:-4px;background:var(--accent);animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
.atl{display:block;width:100%;height:160px}
.atl line{stroke:var(--atlas);stroke-width:2px}
.atl rect{fill:var(--panel-raised);stroke:var(--muted);stroke-width:1.5px}
.atl text{fill:var(--text-soft);font:500 12px var(--sans)}
.bars{display:flex;align-items:flex-end;gap:8px;height:160px}
.bars span{flex:1;border-radius:4px 4px 0 0;background:var(--signal);opacity:.5}
.bars span.peak{opacity:1}

/* Deck (zip) */
.deck-head{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:640px;margin:0 auto 64px;text-align:center}
.deck-shell{padding:48px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.deck-win{overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.deck-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.deck-bar .mark{display:inline-flex;align-items:center;gap:8px;font:400 17px/1 var(--serif)}
.deck-bar .mark svg{width:17px;height:12px;fill:var(--accent)}
.deck-search{flex:0 1 240px;padding:4px 12px;border:1px solid var(--line);border-radius:4px;font:400 12px/1.4 var(--sans);color:var(--muted)}
.deck-body{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:360px}
.deck-side{margin:0;padding:16px 12px;list-style:none;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line)}
.deck-side li{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:4px;color:var(--muted);font:500 14px/1.4 var(--sans)}
.deck-side li.cur{background:var(--panel-raised);color:var(--text)}
.deck-side i{flex:none;width:8px;height:8px}
.deck-main{display:flex;flex-direction:column;gap:16px;padding:32px}
.deck-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.deck-tile{display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:140px;padding:20px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.deck-tile .n{font:400 24px/1.3 var(--serif)}
.deck-tile .k{font:400 12px/1.4 var(--sans);color:var(--muted)}
.deck-tile .status{font-size:12px}
.deck-tile .status i{width:6px;height:6px}

/* Footer (zip) */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:24px 32px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.4}
.foot .brand{font-size:17px;color:var(--text)}
.foot .brand svg{width:20.4px;height:14.6px}
.foot nav{display:flex;flex-wrap:wrap;gap:24px}
.site-foot{position:relative;z-index:60;background:var(--bg)}

/* Hero ridgelines (SVG backdrop and no-WebGL fallback) */
.ridges{position:absolute;inset:0;width:100%;height:100%;display:block}
.ridges path{fill:var(--bg);stroke:var(--accent);stroke-width:1px}
.cue{display:flex;flex-direction:column;align-items:center;gap:12px;font:500 12px/1.4 var(--sans);color:var(--muted)}
.cue-line{position:relative;display:block;width:1px;height:56px;overflow:hidden;background:var(--line)}
.cue-line i{position:absolute;inset:0;background:var(--accent);animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:860px){
  .ch-pad{padding-block:104px}
  .tool-card{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px}
  .deck-shell{padding:24px}
  .cue{display:none}
}
@media (max-width:560px){
  .wrap{padding-inline:24px}
  .navlink{display:none}
  .hdr-in{padding-inline:16px}
  .nav{gap:12px}
  .ctls{gap:8px}
  .nav .btn{padding:8px 12px;white-space:nowrap}
  .deck-body{grid-template-columns:minmax(0,1fr)}
  .deck-side{display:none}
  .deck-tiles{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
  .js .ch{position:relative;top:auto;transform:none;border-radius:0;box-shadow:none}
  .js .ch::after{display:none}
  .js .ch.covered{visibility:visible}
  .js .rv{opacity:1;transform:none}
}