/* ============================================================================
   Custom Models 2.0 — Ideogram brand-moment deck
   Faithful implementation of the "Letterpress" design handoff.
   Design system + per-slide themes + entrance motion + interactions.
   ========================================================================== */

:root{
  /* fixed brand swatches — used by demo tiles & specimens (never themed) */
  --ink:#101012; --paper:#F8F8F6; --newsprint:#F4F3EF; --press:#232425;
  --accent:#8864E4; --proof:#AB97EE; --muted:#606066;

  /* themable tokens (default = White / Paper) */
  --bg:#FFF9F4;
  --fg:#232425;
  --fg-muted:#6B6760;
  --accent-th:#8864E4;
  --hairline:rgba(35,36,37,0.12);

  --font-serif:"Gilda Display", Georgia, "Times New Roman", serif;
  --font-sans:"Geist", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;

  --type-display:132px; --type-title:76px; --type-subtitle:44px; --type-body:32px; --type-small:26px; --type-eyebrow:24px;
  --pad-x:120px; --pad-top:92px; --pad-bottom:88px; --gap-title:40px; --gap-item:26px;
}

/* ===== THEME ENGINE — each slide carries its own data-theme ===== */
section[data-theme="paper"]{    --bg:#FFF9F4; --fg:#232425; --fg-muted:#6B6760; --accent-th:#8864E4; --hairline:rgba(35,36,37,0.12); }
section[data-theme="ink"]{      --bg:#232425; --fg:#FFF9F4; --fg-muted:rgba(255,249,244,0.62); --accent-th:#BD9FFF; --hairline:rgba(255,255,255,0.16); }
section[data-theme="gradient"]{ --bg:linear-gradient(to bottom,#F8F0E8 60%,#F2DECB 70%,#BD9EFF 90%); --fg:#232425; --fg-muted:#574F5C; --accent-th:#6A45D9; --hairline:rgba(35,36,37,0.16); }
section[data-theme="purple"]{   --bg:#BD9FFF; --fg:#221A33; --fg-muted:rgba(34,26,51,0.66); --accent-th:#2E1A66; --hairline:rgba(34,26,51,0.22); }

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; background:#111;}
body{font-family:var(--font-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow:hidden;}

section{ --bg:#FFF9F4; --fg:#232425; --fg-muted:#6B6760; --accent-th:#8864E4; --hairline:rgba(35,36,37,0.12); background:var(--bg); color:var(--fg); overflow:hidden; }
.inner{ position:absolute; inset:0; padding:var(--pad-top) var(--pad-x) var(--pad-bottom); display:flex; flex-direction:column; }

/* slide backgrounds — all unified to the active theme */
.bg-paper,.bg-news,.bg-ink,.bg-press{ background:var(--bg); color:var(--fg); }

.eyebrow{ font-family:var(--font-mono); font-size:18px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); display:flex; align-items:center; gap:14px; }
.eyebrow .num{ color:var(--accent-th); }

h1,h2,h3{ font-weight:400; }
.title{ font-family:var(--font-serif); font-size:var(--type-title); line-height:1.04; letter-spacing:-0.02em; color:inherit; text-wrap:balance; }
.display{ font-family:var(--font-serif); font-size:var(--type-display); line-height:0.98; letter-spacing:-0.028em; }
.lead{ font-family:var(--font-serif); font-size:var(--type-subtitle); line-height:1.22; letter-spacing:-0.012em; color:inherit; max-width:23ch; text-wrap:pretty; }
.body{ font-family:var(--font-sans); font-size:var(--type-body); line-height:1.42; font-weight:400; color:var(--fg-muted); max-width:40ch; text-wrap:pretty; }
.small{ font-size:var(--type-small); }
.spacer{ flex:1 1 auto; }

.metarow{ display:flex; gap:64px; }
.metacol{ display:flex; flex-direction:column; gap:10px; }
.metacol .k{ font-family:var(--font-mono); font-size:var(--type-eyebrow); letter-spacing:0.16em; text-transform:uppercase; color:var(--fg); }
.metacol .v{ font-family:var(--font-sans); font-size:var(--type-small); color:var(--fg-muted); max-width:18ch; line-height:1.34; }

.footline{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:18px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); }
.brandmark{ display:flex; align-items:center; gap:24px; }
.brandmark svg{ width:26px; height:28px; display:block; }
.brandmark .nm{ font-family:var(--font-sans); font-weight:600; letter-spacing:-0.01em; text-transform:none; font-size:var(--type-small); color:inherit; }

.logo-lockup{ display:block; width:213px; height:43px; background-color:currentColor; -webkit-mask:url(assets/logo-ideogram-lockup.svg) no-repeat left center / contain; mask:url(assets/logo-ideogram-lockup.svg) no-repeat left center / contain; }

.cobrand{ display:flex; align-items:center; gap:28px; }
.cobrand-div{ width:1px; background:currentColor; opacity:0.24; align-self:center; }
.partner-mark{ display:block; aspect-ratio:34/33; background-color:currentColor; -webkit-mask:url(assets/logo-partner.svg) no-repeat center / contain; mask:url(assets/logo-partner.svg) no-repeat center / contain; }
.cover-mark .cobrand-div{ height:40px; } .cover-mark .partner-mark{ height:40px; }
.brandmark .cobrand-div{ height:34px; } .brandmark .partner-mark{ height:34px; }
.divider .cobrand-div{ height:26px; } .divider .partner-mark{ height:26px; }

.sym-mark{ display:block; aspect-ratio:380/347; background-color:currentColor; -webkit-mask:url(assets/logo-ideogram-symbol.svg) no-repeat center / contain; mask:url(assets/logo-ideogram-symbol.svg) no-repeat center / contain; }
.corner-mark{ position:absolute; top:var(--pad-top); right:var(--pad-x); display:flex; align-items:center; gap:28px; z-index:6; pointer-events:none; color:inherit; }
.corner-mark .sym-mark{ height:30px; } .corner-mark .cobrand-div{ height:26px; } .corner-mark .partner-mark{ height:26px; }

/* contents / agenda */
.agenda{ list-style:none; display:flex; flex-direction:column; }
.agenda li{ display:grid; grid-template-columns:130px minmax(0,0.85fr) minmax(0,1.25fr) 56px; align-items:baseline; gap:44px; padding:32px 20px 32px 4px; border-top:1px solid var(--hairline); position:relative; cursor:pointer; transition:padding .22s cubic-bezier(.2,.7,.2,1), background-color .16s ease-out; outline:none; }
.agenda li:last-child{ border-bottom:1px solid var(--hairline); }
.agenda li::before{ content:""; position:absolute; inset:1px -16px 0; border-radius:10px; background:rgba(136,100,228,0); transition:background-color .16s ease-out; z-index:0; }
.agenda li > *{ position:relative; z-index:1; }
.agenda li:hover, .agenda li:focus-visible{ padding-left:24px; }
.agenda li:hover::before, .agenda li:focus-visible::before{ background:rgba(136,100,228,0.10); }
.agenda li:focus-visible::before{ box-shadow:inset 0 0 0 1.5px rgba(136,100,228,0.45); }
.agenda .ag-n{ font-family:var(--font-mono); font-size:28px; color:var(--accent-th); letter-spacing:0.04em; transition:color .16s ease-out; }
.agenda .ag-t{ font-family:var(--font-serif); font-size:52px; letter-spacing:-0.02em; color:var(--fg); line-height:1; transition:color .16s ease-out; }
.agenda .ag-d{ font-family:var(--font-sans); font-size:25px; color:var(--fg-muted); line-height:1.36; }
.agenda li:hover .ag-t, .agenda li:focus-visible .ag-t{ color:var(--accent-th); }
.agenda .ag-go{ justify-self:end; align-self:center; width:34px; height:34px; color:var(--accent-th); opacity:0; transform:translateX(-10px); transition:opacity .2s ease-out, transform .2s ease-out; }
.agenda .ag-go svg{ width:100%; height:100%; display:block; }
.agenda li:hover .ag-go, .agenda li:focus-visible .ag-go{ opacity:1; transform:none; }
.agenda li.is-current::before{ background:rgba(136,100,228,0.08); }
.agenda li.is-current .ag-t{ color:var(--accent-th); }
.agenda li.is-current .ag-go{ opacity:0.55; transform:none; }

/* introduction */
.intro .inner{ justify-content:flex-start; }
.intro-body{ display:flex; flex-direction:row; align-items:stretch; gap:72px; }
.intro-text{ display:flex; flex-direction:column; align-items:flex-start; gap:40px; flex:0 1 auto; }
.intro-figure{ flex:0 0 auto; width:520px; height:auto !important; align-self:stretch; min-height:440px; margin-left:auto; border-radius:10px; object-fit:cover; object-position:center; display:block; }
.intro-lead{ font-family:var(--font-serif); font-size:58px; line-height:1.26; letter-spacing:-0.014em; color:var(--fg); max-width:27ch; text-wrap:pretty; }
.intro-sign{ display:flex; flex-direction:column; align-items:flex-start; }
.intro-rule{ width:96px; height:1px; background:var(--fg); opacity:0.32; }
.sig-mark{ display:block; width:268px; aspect-ratio:147/34; background-color:var(--fg); -webkit-mask:url(assets/signature.svg) no-repeat left center / contain; mask:url(assets/signature.svg) no-repeat left center / contain; }
.intro-name{ font-family:var(--font-mono); font-size:var(--type-eyebrow); letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); }

/* section dividers */
.divider .inner{ padding-top:72px; padding-bottom:72px; justify-content:space-between; }
.divider .div-top{ display:flex; align-items:center; justify-content:space-between; }
.divider .div-idx{ font-family:var(--font-mono); font-size:18px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-th); }
.divider .div-logo{ width:33px; height:30px; color:var(--fg); background-color:currentColor; -webkit-mask:url(assets/logo-ideogram-symbol.svg) no-repeat center / contain; mask:url(assets/logo-ideogram-symbol.svg) no-repeat center / contain; }
.divider .div-head{ display:flex; flex-direction:column; gap:60px; }
.divider .div-main{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; }
.divider .div-title{ font-family:var(--font-serif); font-size:236px; line-height:0.9; letter-spacing:-0.04em; color:var(--fg); margin-left:-0.018em; text-wrap:balance; }
.divider .div-desc{ font-family:var(--font-sans); font-size:30px; color:var(--fg-muted); max-width:46ch; line-height:1.4; }

/* logo slide — chips are fixed demos */
.logoslide .logo-hero{ display:flex; justify-content:center; }
.logoslide .logo-big{ width:560px; height:113px; color:var(--fg); }
.logoslide .logo-pair{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.logoslide .logo-chip{ border-radius:12px; border:1px solid var(--hairline); height:208px; display:flex; align-items:center; justify-content:center; }
.logoslide .logo-chip.light{ background:#F8F8F6; }
.logoslide .logo-chip.light .logo-lockup{ color:#101012; }
.logoslide .logo-chip.dark{ background:#101012; border-color:transparent; }
.logoslide .logo-chip.dark .logo-lockup{ color:#F4F3EF; }
.logoslide .logo-chip .logo-lockup{ width:248px; height:50px; }
.logoslide .logo-cap{ font-family:var(--font-sans); font-size:24px; color:var(--fg-muted); text-align:center; line-height:1.4; }

/* cover */
.cover .inner{ justify-content:space-between; }
.cover-bottom{ display:flex; flex-direction:column; gap:60px; }
.cover-mark{ display:flex; align-items:center; gap:28px; color:var(--fg); }
.cover-mark svg{ width:30px; height:32px; }
.cover-mark .nm{ font-family:var(--font-sans); font-weight:600; font-size:var(--type-small); letter-spacing:-0.01em; color:var(--fg); }
.cover-center{ display:flex; flex-direction:column; gap:44px; }
.cover-eyebrow{ font-family:var(--font-mono); font-size:var(--type-eyebrow); letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-th); }
.cover-title{ font-family:var(--font-serif); font-size:236px; line-height:0.9; letter-spacing:-0.04em; color:var(--fg); margin:0; padding:0; text-indent:0; margin-left:-0.018em; }

/* split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:80px; flex:1 1 auto; align-items:center; }
.split.tight{ grid-template-columns:1.1fr 0.9fr; }
.stack{ display:flex; flex-direction:column; }
.head-block{ display:flex; flex-direction:column; gap:var(--gap-title); }

/* type contrast */
.contrast{ display:flex; flex-direction:column; gap:18px; margin-top:8px; }
.contrast .row{ display:flex; align-items:baseline; gap:28px; }
.contrast .tag{ font-family:var(--font-mono); font-size:var(--type-eyebrow); letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); width:150px; flex:0 0 auto; }
.word-bad{ font-family:var(--font-sans); font-weight:700; font-size:104px; letter-spacing:0.06em; color:var(--fg-muted); }
.word-bad span{ display:inline-block; }
.word-good{ font-family:var(--font-serif); font-weight:400; font-size:104px; letter-spacing:-0.02em; color:var(--accent-th); }

/* proof grid */
.proofgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; flex:1 1 auto; align-content:center; }
.proofgrid figure{ display:flex; flex-direction:column; gap:14px; }
.proofgrid .ph{ width:100%; aspect-ratio:3/4; border-radius:4px; overflow:hidden; background:#F4F3EF; border:1px solid var(--hairline); }
.proofgrid img{ width:100%; height:100%; object-fit:cover; display:block; }
.proofgrid figcaption{ font-family:var(--font-mono); font-size:24px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-muted); }

/* manifesto */
.manifesto{ display:flex; flex-direction:column; gap:0.3em; margin-top:60px; }
.manifesto p{ font-family:var(--font-serif); font-size:44px; line-height:1.18; letter-spacing:-0.014em; color:var(--fg); max-width:1520px; }
.manifesto p .accent{ color:var(--accent-th); font-style:italic; }
.manifesto p.final{ font-size:56px; color:var(--accent-th); margin-top:0.3em; }

/* palette */
.swatches{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; flex:1 1 auto; align-content:center; }
.swatch{ display:flex; flex-direction:column; gap:18px; text-align:left; background:none; border:0; padding:0; cursor:pointer; font:inherit; outline:none; }
.swatch .chip{ position:relative; width:100%; aspect-ratio:1/1.15; border-radius:8px; border:1px solid var(--hairline); transition:transform .2s ease-out, box-shadow .2s ease-out; overflow:hidden; }
.swatch:hover .chip{ transform:translateY(-3px); box-shadow:0 18px 36px -22px rgba(16,16,18,0.5); }
.swatch:focus-visible .chip{ box-shadow:0 0 0 3px var(--accent-th); }
.swatch.is-copied .chip{ box-shadow:0 0 0 3px var(--accent-th); }
.swatch .chip .copytag{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:22px; letter-spacing:0.14em; text-transform:uppercase; background:rgba(16,16,18,0.42); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity .18s ease-out; pointer-events:none; }
.swatch.is-copied .chip .copytag{ opacity:1; }
.swatch .nm{ font-family:var(--font-serif); font-size:30px; letter-spacing:-0.01em; color:var(--fg); }
.swatch .hex{ font-family:var(--font-mono); font-size:24px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-muted); display:flex; align-items:center; gap:9px; transition:color .16s ease-out; }
.swatch:hover .hex{ color:var(--accent-th); }
.swatch .hex .copyicon{ width:18px; height:18px; opacity:0; transform:translateX(-4px); transition:opacity .16s ease-out, transform .16s ease-out; }
.swatch:hover .hex .copyicon, .swatch:focus-visible .hex .copyicon{ opacity:0.85; transform:none; }
.swatch .role{ font-family:var(--font-sans); font-size:24px; color:var(--fg-muted); line-height:1.3; }

/* typography */
.typespec{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px; flex:1 1 auto; align-content:center; }
.typespec .glyph{ font-size:200px; line-height:0.9; letter-spacing:-0.03em; color:var(--fg); }
.typespec .col .nm{ font-family:var(--font-mono); font-size:24px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-muted); margin:26px 0 14px; }
.typespec .col .role{ font-family:var(--font-sans); font-size:24px; color:var(--fg); line-height:1.34; max-width:22ch; }
.typespec .col.serif .glyph{ font-family:var(--font-serif); }
.typespec .col.sans .glyph{ font-family:var(--font-sans); font-weight:600; }
.typespec .col.mono .glyph{ font-family:var(--font-mono); font-size:150px; }

/* voice */
.voicelist{ display:flex; flex-direction:column; gap:22px; }
.voicelist .item{ display:flex; gap:20px; align-items:baseline; }
.voicelist .item .b{ font-family:var(--font-mono); font-size:24px; color:var(--accent-th); flex:0 0 auto; width:40px; }
.voicelist .item .t{ font-family:var(--font-sans); font-size:28px; color:var(--fg); line-height:1.34; }
.voicelist .item .t b{ font-weight:600; }
.saidlines{ display:flex; flex-direction:column; gap:26px; border-left:1px solid var(--hairline); padding-left:48px; }
.saidlines .say{ font-family:var(--font-serif); font-size:42px; line-height:1.16; letter-spacing:-0.012em; color:var(--fg); }
.saidlines .say.muted{ color:var(--fg-muted); }

/* audience */
.audreasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.audreasons .r .n{ font-family:var(--font-serif); font-size:64px; color:var(--accent-th); line-height:1; }
.audreasons .r .h{ font-family:var(--font-sans); font-weight:600; font-size:26px; color:var(--fg); margin:18px 0 12px; }
.audreasons .r .d{ font-family:var(--font-sans); font-size:24px; color:var(--fg-muted); line-height:1.38; }

/* model / numbered steps grid (with image per step) */
.stepgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; flex:0 0 auto; margin-top:52px; border:1px solid rgba(35,36,37,0.25); background:#FFFFFF; }
.stepgrid .step{ background:#FFFFFF; border-left:1px solid rgba(35,36,37,0.25); padding:32px 28px; display:flex; flex-direction:column; gap:28px; }
.stepgrid .step:first-child{ border-left:0; }
.stepgrid .step-img{ width:100% !important; aspect-ratio:16/9 !important; height:auto !important; object-fit:cover; display:block; }
.stepgrid .step-head{ display:flex; flex-direction:column; gap:16px; }
.stepgrid .step-n{ font-family:var(--font-mono); font-size:18px; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-muted); }
.stepgrid .step-t{ font-family:var(--font-sans); font-weight:600; font-size:22px; line-height:1.32; letter-spacing:-0.01em; color:var(--fg); }
.stepgrid .step-d{ font-family:var(--font-sans); font-size:22px; line-height:1.44; color:var(--fg-muted); }

/* tech-stack 8-up grid (4 columns × 2 rows) */
.stepgrid.ts8{ grid-template-columns:repeat(4,1fr); margin-top:40px; }
.stepgrid.ts8 .step{ border-left:1px solid rgba(35,36,37,0.25); padding:26px 24px; gap:16px; }
.stepgrid.ts8 .step:nth-child(4n+1){ border-left:0; }
.stepgrid.ts8 .step:nth-child(n+5){ border-top:1px solid rgba(35,36,37,0.25); }
.stepgrid.ts8 .step-head{ gap:9px; }
.stepgrid.ts8 .step-d{ font-size:19px; line-height:1.4; }
.ts-logo{ height:50px; margin-bottom:4px; }
.ts-logo .ts-slot{ display:block; width:50px; height:50px; object-fit:contain; object-position:left center; }

/* interactive story reveal */
.stepgrid .step{ position:relative; }
.step-skel{ position:absolute; inset:0; padding:32px 28px; display:none; flex-direction:column; gap:28px; pointer-events:none; }
.stepgrid .step.is-skel .step-skel{ display:flex; }
.stepgrid .step.is-skel > .step-img, .stepgrid .step.is-skel > .step-head, .stepgrid .step.is-skel > .step-d{ opacity:0; }
.sk{ background:rgba(35,36,37,0.09); border-radius:3px; }
.sk-img{ width:100%; aspect-ratio:16/9; }
.sk-head{ display:flex; flex-direction:column; gap:16px; }
.sk-n{ width:34px; height:14px; }
.sk-t{ width:62%; height:20px; }
.sk-lines{ display:flex; flex-direction:column; gap:13px; }
.sk-l{ width:100%; height:14px; }
.sk-l.s2{ width:92%; } .sk-l.s3{ width:74%; }
@media (prefers-reduced-motion: no-preference){ .step.is-skel .sk{ animation:skpulse 1.5s ease-in-out infinite; } }
@keyframes skpulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }

/* story stage nav */
.story-nav{ display:flex; align-items:center; gap:20px; }
.story-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:48px; margin-bottom:44px; }
.story-header .title{ margin:0; line-height:0.9; white-space:nowrap; flex:0 0 auto; }
.story-titlewrap{ display:flex; align-items:baseline; gap:34px; }
.story-sub{ font-family:var(--font-mono); font-size:18px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); padding-bottom:0; white-space:nowrap; }

/* feature presentation — centered eyebrow/title + browser window image bleeding to bottom */
.featpres .inner{ align-items:center; text-align:center; padding-bottom:0; }
.featpres .eyebrow{ justify-content:center; }
.featpres .fp-title{ font-family:var(--font-serif); font-size:var(--type-title); line-height:1.04; letter-spacing:-0.02em; color:var(--fg); margin-top:24px; white-space:nowrap; text-wrap:balance; }
.fp-browser{ margin-top:60px; width:100%; max-width:1760px; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:#FFFFFF; border:1px solid rgba(35,36,37,0.25); border-bottom:0; }
.fp-bar{ flex:0 0 auto; height:58px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 24px; background:#FFFFFF; border-bottom:1px solid rgba(35,36,37,0.25); }
.fp-dots{ justify-self:start; display:flex; gap:9px; }
.fp-dot{ width:13px; height:13px; border-radius:50%; background:rgba(35,36,37,0.16); }
.fp-addr{ justify-self:center; width:480px; max-width:46vw; height:32px; border-radius:8px; background:rgba(35,36,37,0.05); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:14px; letter-spacing:0.04em; color:var(--fg-muted); }
.fp-screen{ flex:1 1 auto; position:relative; min-height:0; background:#FFFFFF; overflow:hidden; }
.fp-screen .fp-shot{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover; object-position:top center; display:block; }

/* full artifact — embedded tool, container fills to bottom edge */
.fullart .inner{ padding-bottom:0; }
.fa-frame{ margin-top:60px; width:100%; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:#FFFFFF; border:1px solid rgba(35,36,37,0.25); border-bottom:0; overflow:hidden; }
.fa-frame iframe{ flex:1 1 auto; width:100%; height:100%; min-height:0; border:0; display:block; background:#FFFFFF; }

/* bento moodboard — full-bleed grid */
.bento .inner{ padding:0; }
.bentogrid{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); gap:12px; padding:12px; }
.bentogrid > *{ overflow:hidden; min-width:0; min-height:0; }
.bento-slot{ width:100% !important; height:100% !important; object-fit:cover; display:block; }
.bento-text{ display:flex; flex-direction:column; justify-content:space-between; padding:34px; background:var(--bg); }
.bento-text .be-eyebrow{ font-family:var(--font-mono); font-size:18px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); display:flex; align-items:center; gap:14px; }
.bento-text .be-eyebrow .num{ color:var(--accent-th); }
.bento-text .be-word{ font-family:var(--font-serif); font-size:54px; line-height:1.0; letter-spacing:-0.02em; color:var(--fg); }
.bento-slot{ cursor:zoom-in; }
/* bento tile hover — zoom + blur overlay + zoom icon */
.bento-cell{ position:relative; min-width:0; min-height:0; }
.bento-cell .bento-slot{ display:block; width:100% !important; height:100% !important; transition:transform .6s cubic-bezier(.22,.61,.36,1); transform-origin:center; }
.bento-cell .be-zoom{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; background:rgba(18,16,14,0.34); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; transition:opacity .45s ease; pointer-events:none; }
.bento-cell .be-zoom .be-ic{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(20,18,16,0.34); border:1.5px solid rgba(255,255,255,0.55); box-shadow:0 8px 28px -8px rgba(0,0,0,0.55); transform:scale(.82); transition:transform .45s cubic-bezier(.22,.61,.36,1); }
.bento-cell .be-zoom svg{ width:28px; height:28px; display:block; }
.bento-cell:hover .bento-slot{ transform:scale(1.07); }
.bento-cell:hover .be-zoom{ opacity:1; }
.bento-cell:hover .be-zoom .be-ic{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){ .bento-cell .bento-slot, .bento-cell .be-zoom, .bento-cell .be-zoom .be-ic{ transition:none; } }

#mb-modal{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; background:rgba(20,18,16,0.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:64px; cursor:zoom-out; }
#mb-modal.on{ display:flex; animation:mbfade .28s ease-out both; }
#mb-modal img{ max-width:92vw; max-height:92vh; object-fit:contain; border-radius:6px; box-shadow:0 40px 120px -30px rgba(0,0,0,0.7); animation:mbpop .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mbfade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mbpop{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
.mb-close{ position:fixed; top:28px; right:28px; z-index:100000; width:52px; height:52px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.45); background:rgba(30,28,26,0.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .18s ease, border-color .18s ease, transform .18s ease; }
.mb-close:hover{ background:rgba(60,56,52,0.65); border-color:rgba(255,255,255,0.85); transform:scale(1.06); }
.mb-close svg{ width:24px; height:24px; display:block; }
@media (prefers-reduced-motion: reduce){ #mb-modal.on, #mb-modal img{ animation:none; } }
.story-nav .sn-count{ font-family:var(--font-mono); font-size:18px; letter-spacing:0.16em; color:var(--fg-muted); min-width:84px; text-align:right; }
.story-nav button{ width:54px; height:54px; border-radius:50%; border:1px solid rgba(35,36,37,0.25); background:transparent; color:var(--fg); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out, opacity .16s ease-out; }
.story-nav button:hover:not(:disabled){ border-color:var(--accent-th); color:var(--accent-th); background:rgba(136,100,228,0.08); }
.story-nav button:disabled{ opacity:0.28; cursor:default; }
.story-nav svg{ width:22px; height:22px; display:block; }

/* key visuals — fixed demo tiles */
.triptych{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; flex:1 1 auto; align-content:center; }
.kv{ aspect-ratio:3/4; border-radius:6px; border:1px solid var(--hairline); position:relative; display:flex; align-items:center; justify-content:center; padding:48px; overflow:hidden; }
.kv .kvlabel{ position:absolute; bottom:22px; left:24px; font-family:var(--font-mono); font-size:24px; letter-spacing:0.14em; text-transform:uppercase; }
.kv .kvno{ position:absolute; top:22px; right:24px; font-family:var(--font-mono); font-size:24px; letter-spacing:0.1em; }
.kv-ed{ background:#F8F8F6; }
.kv-ed .kvt{ font-family:var(--font-serif); font-size:52px; line-height:1.06; letter-spacing:-0.02em; color:#101012; text-align:center; }
.kv-ed .kvlabel,.kv-ed .kvno{ color:#606066; }
.kv-mod{ background:#101012; }
.kv-mod .kvt{ font-family:var(--font-sans); font-weight:600; font-size:50px; line-height:1.0; letter-spacing:-0.04em; color:#F4F3EF; text-transform:lowercase; text-align:left; align-self:center; width:100%; }
.kv-mod .kvlabel,.kv-mod .kvno{ color:#AB97EE; }
.kv-bru{ background:#232425; }
.kv-bru .kvt{ font-family:var(--font-sans); font-weight:900; font-size:60px; line-height:0.9; letter-spacing:-0.03em; color:#AB97EE; text-transform:uppercase; text-align:center; }
.kv-bru .kvlabel,.kv-bru .kvno{ color:rgba(244,243,239,0.6); }

/* featured gallery */
.gallery{ display:grid; grid-template-columns:430px auto; gap:56px; flex:1 1 auto; align-items:center; }
.gallery-feature{ display:flex; flex-direction:column; gap:18px; width:430px; }
.gph-slot{ width:430px !important; height:556px !important; border:1px solid var(--hairline); border-radius:6px; object-fit:cover; display:block; }
.gallery-feature figcaption{ font-family:var(--font-mono); font-size:24px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-muted); }
.gallery-thumbs{ display:grid; grid-template-columns:repeat(2,234px); gap:20px; align-content:center; }
.gthumb-slot{ width:234px !important; height:300px !important; border:1px solid var(--hairline); border-radius:6px; transition:transform .2s ease-out, box-shadow .2s ease-out; object-fit:cover; display:block; }
.gthumb-slot:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(16,16,18,0.4); }

/* live embed */
.live .inner{ padding:64px var(--pad-x) 64px; }
.liveframe{ flex:1 1 auto; border:1px solid var(--hairline); border-radius:12px; overflow:hidden; box-shadow:0 30px 80px -40px rgba(16,16,18,0.32); background:#F8F8F6; }
.liveframe iframe{ width:100%; height:100%; border:0; display:block; }
.livebar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.livebar .lab{ font-family:var(--font-mono); font-size:var(--type-eyebrow); letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-muted); display:flex; align-items:center; gap:14px; }
.livedot{ width:11px; height:11px; border-radius:50%; background:var(--accent-th); display:inline-block; }

/* ai */
.aicols{ display:grid; grid-template-columns:1fr 1fr; gap:80px; flex:1 1 auto; align-content:center; }
.aicol h3{ font-family:var(--font-serif); font-size:40px; color:var(--fg); letter-spacing:-0.01em; margin-bottom:8px; }
.aicol .sub{ font-family:var(--font-mono); font-size:24px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:30px; }
.ailist{ display:flex; flex-direction:column; gap:22px; }
.ailist .li{ font-family:var(--font-sans); font-size:25px; line-height:1.4; color:var(--fg); padding-left:26px; position:relative; }
.ailist .li::before{ content:"—"; position:absolute; left:0; color:var(--accent-th); }
.aicol.cant .ailist .li::before{ color:var(--fg-muted); }
.aicol.cant .ailist .li{ color:var(--fg-muted); }

/* close */
.close .inner{ justify-content:space-between; }
.close-center{ display:flex; flex-direction:column; gap:30px; }
.close-line{ font-family:var(--font-mono); font-size:var(--type-small); text-transform:uppercase; letter-spacing:0.18em; color:var(--accent-th); }
.close-tag{ font-family:var(--font-serif); font-style:italic; font-size:168px; line-height:0.96; letter-spacing:-0.03em; color:var(--fg); }
.close .body{ color:var(--fg-muted); max-width:34ch; }

/* ---------- feature grid (Ideogram 4.0) ---------- */
.featslide .inner{ justify-content:flex-start; }
.feat-head{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; margin-top:60px; }
.feat-title{ font-family:var(--font-serif); font-size:66px; line-height:1.0; letter-spacing:-0.03em; color:var(--fg); max-width:26ch; margin-left:-0.018em; text-wrap:balance; }
.feat-desc{ font-family:var(--font-sans); font-size:24px; line-height:1.4; color:var(--fg-muted); max-width:80ch; }
.feat-btn{ display:inline-flex; align-items:center; white-space:nowrap; font-family:var(--font-sans); font-weight:600; font-size:22px; letter-spacing:-0.01em; color:var(--fg); background:transparent; border:1px solid var(--hairline); border-radius:9999px; padding:15px 32px; cursor:pointer; transition:background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out; }
.feat-btn:hover{ background:rgba(136,100,228,0.10); border-color:var(--accent-th); color:var(--accent-th); }
.feat-grid{ display:grid; grid-template-columns:1fr 1.6fr 1fr; grid-template-rows:1fr 1fr; gap:16px; flex:1 1 auto; margin-top:40px; min-height:0; }
.feat-img{ grid-column:2; grid-row:1 / span 2; position:relative; overflow:hidden; background:#1a1b1c; }
.feat-slot{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover; display:block; opacity:0; transition:opacity .35s ease-out; pointer-events:none; }
.feat-slot.is-active{ opacity:1; pointer-events:auto; }
.feat-card{ border:0; border-radius:0; padding:18px; display:flex; flex-direction:column; justify-content:space-between; gap:14px; cursor:pointer; background:#1a1b1c; text-align:left; font:inherit; color:inherit; transition:background-color .16s ease-out; outline:none; overflow:hidden; }
.feat-card.c1{ grid-column:1; grid-row:1; } .feat-card.c2{ grid-column:1; grid-row:2; }
.feat-card.c3{ grid-column:3; grid-row:1; } .feat-card.c4{ grid-column:3; grid-row:2; }
.feat-card .ctop{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.feat-card .cn{ font-family:var(--font-mono); font-size:18px; letter-spacing:0.1em; color:rgba(244,243,239,0.45); }
.feat-card .ct{ font-family:var(--font-sans); font-weight:600; font-size:22px; letter-spacing:-0.01em; color:#F4F3EF; text-align:right; }
.feat-card .cd{ font-family:var(--font-sans); font-size:22px; line-height:1.3; color:rgba(244,243,239,0.6); max-width:25ch; }
.feat-card:hover{ background:#202224; }
.feat-card:focus-visible{ background:#202224; }
.feat-card.is-active{ background:#FFF9F4; }
.feat-card.is-active .ct{ color:#232425; }
.feat-card.is-active .cn{ color:rgba(35,36,37,0.5); }
.feat-card.is-active .cd{ color:rgba(35,36,37,0.62); }

/* ===== entrance motion ===== */
@media (prefers-reduced-motion:no-preference){
  section[data-deck-active] .anim{ animation:rise .62s cubic-bezier(.2,.7,.2,1) both; }
  section[data-deck-active] .anim2{ animation:rise .62s cubic-bezier(.2,.7,.2,1) .09s both; }
  section[data-deck-active] .anim3{ animation:rise .62s cubic-bezier(.2,.7,.2,1) .18s both; }
  @keyframes rise{ from{transform:translateY(18px);} to{transform:none;} }
}

/* feature presentation — impactful milestone entrance */
@media (prefers-reduced-motion:no-preference){
  section.featpres[data-deck-active] .eyebrow{ animation:fpRiseSm .66s cubic-bezier(.2,.7,.2,1) .06s both; }
  section.featpres[data-deck-active] .fp-title{ animation:fpRise .78s cubic-bezier(.19,.78,.22,1) .16s both; }
  section.featpres[data-deck-active] .fp-browser{ animation:fpUp .92s cubic-bezier(.16,.84,.3,1) .3s both; }
  @keyframes fpRiseSm{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }
  @keyframes fpRise{ from{opacity:0; transform:translateY(54px) scale(.985);} to{opacity:1; transform:none;} }
  @keyframes fpUp{ from{transform:translateY(100%);} to{transform:none;} }
}

/* ============================================================================
   DECK ENGINE — scale-to-fit stage, slide stacking, navigation chrome
   ========================================================================== */
#deck{ position:fixed; inset:0; background:#111; }
#stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#canvas{ position:relative; width:1920px; height:1080px; transform-origin:center center; flex-shrink:0; background:#fff; will-change:transform; }
#canvas > section{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  box-sizing:border-box !important; overflow:hidden;
  opacity:0; pointer-events:none; visibility:hidden;
}
#canvas > section[data-deck-active]{ opacity:1; pointer-events:auto; visibility:visible; }

/* nav overlay pill (bottom-center) */
.overlay{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,6px) scale(0.92);
  filter:blur(6px); display:flex; align-items:center; gap:4px; padding:4px;
  background:#000; color:#fff; border-radius:999px; font-size:12px;
  font-feature-settings:"tnum" 1; letter-spacing:0.01em; opacity:0; pointer-events:none;
  transition:opacity 260ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), filter 260ms ease;
  transform-origin:center bottom; z-index:2147483000; user-select:none;
  font-family:var(--font-sans);
}
.overlay[data-visible]{ opacity:1; pointer-events:auto; transform:translate(-50%,0) scale(1); filter:blur(0); }
.overlay .obtn{
  appearance:none; background:transparent; border:0; margin:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; height:28px; min-width:28px;
  border-radius:999px; color:rgba(255,255,255,0.72); transition:background 140ms ease, color 140ms ease;
  -webkit-tap-highlight-color:transparent;
}
.overlay .obtn:hover{ background:rgba(255,255,255,0.12); color:#fff; }
.overlay .obtn:active{ background:rgba(255,255,255,0.18); }
.overlay .obtn:focus{ outline:none; }
.overlay .obtn svg{ width:14px; height:14px; display:block; }
.overlay .count{ font-variant-numeric:tabular-nums; color:#fff; font-weight:500; padding:0 8px; min-width:42px; text-align:center; font-size:12px; }
.overlay .count .sep{ color:rgba(255,255,255,0.45); margin:0 3px; font-weight:400; }
.overlay .count .total{ color:rgba(255,255,255,0.55); }
.overlay .o-div{ width:1px; height:14px; background:rgba(255,255,255,0.18); margin:0 2px; }

/* overview grid */
#overview{ position:fixed; inset:0; z-index:2147483600; background:#121212; display:none; padding:48px 56px; overflow-y:auto; }
#overview.on{ display:block; animation:ovfade .2s ease-out both; }
@keyframes ovfade{ from{opacity:0;} to{opacity:1;} }
#overview .ov-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:30px; }
#overview .ov-title{ font-family:var(--font-serif); font-size:34px; color:#fff; letter-spacing:-0.01em; }
#overview .ov-hint{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.ov-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.ov-tile{ position:relative; text-align:left; border:0; padding:0; cursor:pointer; font:inherit; background:transparent; display:flex; flex-direction:column; gap:10px; }
.ov-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.12); background:#fff; }
.ov-frame .ov-mini{ position:absolute; top:0; left:0; width:1920px; height:1080px; transform-origin:top left; pointer-events:none; }
.ov-tile.is-current .ov-frame{ box-shadow:0 0 0 2px var(--accent); border-color:transparent; }
.ov-tile:hover .ov-frame{ border-color:rgba(255,255,255,0.4); }
.ov-meta{ display:flex; align-items:baseline; gap:10px; }
.ov-num{ font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,0.5); font-variant-numeric:tabular-nums; }
.ov-label{ font-family:var(--font-sans); font-size:14px; color:rgba(255,255,255,0.85); }

@media (prefers-reduced-motion: reduce){
  section[data-deck-active] .anim,
  section[data-deck-active] .anim2,
  section[data-deck-active] .anim3,
  section.featpres[data-deck-active] .eyebrow,
  section.featpres[data-deck-active] .fp-title,
  section.featpres[data-deck-active] .fp-browser{ animation:none !important; }
}