:root {
  --void: #ced2e8;   /* periwinkle - dogparts.BG_MUTED, the field a dog stands on */
  --night: #dfe3ef;   /* one step up from the ground */
  --panel: #eceef6;   /* cards */
  --panel-2: #f5f7fb;   /* raised surface */
  --line: rgba(28, 26, 32, .16);   /* hairline, ink-based now */
  --text: #1c1a20;   /* dp.EYEDK - the engine's own dark */
  --muted: #565269;
  --orange: #f7931a;   /* unchanged: money only */
  --gold: #9a6b00;   /* DARKENED - #ffd369 is invisible on a light ground */
  --violet: #6d4bc4;
  --blue: #2b6ce0;   /* cobalt - BG_BOLD, used for proof/verification */
  /* Added 2026-08-17: these were pasted inline 33 times between them, which
     is what stopped the site being re-skinnable. Surfaces especially --
     a dark literal left inline survives any palette change. */
  --on-accent: #231202;   /* ink on an orange button */
  --deep: #c2c8de;   /* recessed surface */
  --danger: #b5303a;
  --warm: #c4472f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0 !important;
  background:
    radial-gradient(rgba(28,26,32,.05) 1px, transparent 1.4px) 0 0 / 28px 28px,
    radial-gradient(circle at 82% 9%, rgba(111, 61, 213, .22), transparent 30rem),
    radial-gradient(circle at 8% 36%, rgba(247, 147, 26, .08), transparent 28rem),
    var(--void) !important;
  color: var(--text) !important;
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  overflow-x: hidden;
}
x-dc { display: block; width: 100%; max-width: 100vw; overflow-x: hidden; }
a { color: var(--muted); text-decoration: none; }
a:hover { color: var(--text); }
img { max-width: 100%; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.topnav {
  position: sticky !important;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px;
  background: rgba(206,210,232,.86) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(18px) saturate(140%);
}
.navlinks { display: flex; align-items: center; gap: 18px; white-space: nowrap;
  min-width: 0; overflow-x: auto; scrollbar-width: none; }
.navlinks::-webkit-scrollbar { display: none; }
.navlinks .mint-link, .brand-lockup { flex-shrink: 0; }   /* the pill and the
  logo may never crush or ride over each other — overflow scrolls instead */
.navlinks a { color: var(--muted) !important; }
.navlinks a:hover { color: var(--text) !important; }
.navlinks .mint-link { color: var(--on-accent) !important; }

.navlinks a[aria-current="page"] { color: var(--text) !important; }

.shell { width: min(1220px, calc(100% - 40px)); margin: 0 auto; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font: 700 11px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--orange); }
.display {
  margin: 0;
  font-size: clamp(3.4rem, 8.4vw, 7.6rem);
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 700;
  text-wrap: balance;
}
.display .warm { color: var(--orange); }
.lede { margin: 0; color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.22rem); line-height: 1.7; max-width: 58ch; }
.lede strong { color: var(--text); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(154,107,0,.45); }
.btn-primary { background: var(--orange); color: var(--on-accent); border-color: var(--orange); }
.btn-primary:hover { color: var(--on-accent); background: var(--orange); }
.btn-ghost { background: rgba(28,26,32,.05); }

.mission-nav { padding: 14px 22px !important; }
.brand-lockup { display: flex; align-items: center; gap: 11px; color: var(--text); }
.brand-mark { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy b { font-size: 13px; letter-spacing: .08em; }
.brand-copy small { color: var(--muted); font: 600 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .18em; }

.hero { min-height: calc(100vh - 66px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(30px, 6vw, 80px); padding: 68px 0 76px; }
.hero-copy { display: grid; gap: 28px; position: relative; z-index: 2; min-width: 0; }
.hero-copy .lede { max-width: 100%; overflow-wrap: break-word; }
.hero-art { position: relative; min-height: 670px; isolation: isolate; min-width: 0; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 9% 2% 8% 8%;
  border-radius: 48% 52% 42% 58%;
  background: radial-gradient(circle at 45% 38%, rgba(151, 91, 255, .55), rgba(76, 29, 149, .18) 48%, transparent 72%);
  filter: blur(12px);
  z-index: -1;
}
.hero-card { position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(28,26,32,.16); box-shadow: 0 35px 90px rgba(0,0,0,.42); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-card-main { inset: 2% 7% 0 13%; border-radius: 38px; transform: rotate(1.5deg); }
.hero-card-back { width: 34%; height: 42%; right: 0; bottom: 5%; border-radius: 24px; transform: rotate(7deg); }
.hero-card-small { width: 29%; height: 35%; left: 0; top: 10%; border-radius: 22px; transform: rotate(-8deg); }
.hero-note { position: absolute; z-index: 5; right: 3%; top: -30px; padding: 10px 13px; border-radius: 999px; background: rgba(9,6,17,.9); border: 1px solid var(--line); color: var(--gold); font: 700 10px/1 "IBM Plex Mono",monospace; letter-spacing: .1em; }
.proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }
.proof { background: rgba(17,10,29,.92); padding: 17px 18px; }
.proof b { display: block; color: var(--text); font-size: 1.12rem; }
.proof span { color: var(--muted); font: 500 10px/1.5 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }

.section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.section-head { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: start; margin-bottom: 52px; }
.section-head h2 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.section-head p { margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.75; max-width: 62ch; }
.manifesto { border-block: 1px solid var(--line); background: linear-gradient(120deg, rgba(247,147,26,.06), rgba(139,92,246,.08)); }
.manifesto-quote { margin: 0; max-width: 1000px; font-size: clamp(2.3rem, 6vw, 6.2rem); line-height: 1; letter-spacing: -.06em; text-wrap: balance; }
.manifesto-quote em { color: var(--gold); font-style: normal; }
.manifesto-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 60px; }
.principle { padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: rgba(9,6,17,.5); }
.principle code { color: var(--orange); font: 700 11px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; }
.principle h3 { margin: 18px 0 9px; font-size: 1.28rem; }
.principle p { margin: 0; color: var(--muted); line-height: 1.65; }

.art-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.art-card { position: relative; min-height: 580px; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.art-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.art-card:hover img { transform: scale(1.025); }
.art-caption { position: absolute; inset: auto 14px 14px; padding: 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(9,6,17,.78); backdrop-filter: blur(12px); }
.art-caption b { display: block; font-size: .95rem; }
.art-caption span { display: block; margin-top: 5px; color: var(--muted); font: 500 10px/1.5 "IBM Plex Mono",monospace; letter-spacing: .06em; text-transform: uppercase; }

.pipeline { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; align-items: stretch; }
.pipe-node { position: relative; min-height: 150px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, var(--panel-2), var(--panel)); }
.pipe-node:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translate(50%,-50%); color: var(--gold); z-index: 2; font: 700 18px/1 monospace; }
.pipe-node small { color: var(--orange); font: 700 10px/1 "IBM Plex Mono",monospace; letter-spacing: .1em; }
.pipe-node b { display: block; margin-top: 35px; font-size: 1.05rem; }
.pipe-node span { display: block; color: var(--muted); margin-top: 6px; font-size: .82rem; line-height: 1.45; }

.viewer-block { display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px; align-items: center; padding: 32px; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(135deg, rgba(33,22,56,.88), rgba(14,9,25,.92)); }
.viewer-copy { padding: clamp(10px,4vw,40px); display: grid; gap: 20px; }
.viewer-copy h2 { margin: 0; font-size: clamp(2.3rem,5vw,4.6rem); line-height: .95; letter-spacing: -.055em; }
.viewer-copy p { margin: 0; color: var(--muted); line-height: 1.72; }
.viewer-frame { min-height: 610px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--violet); }
.viewer-frame iframe { width: 100%; height: 610px; border: 0; display: block; }

.mint-band { text-align: center; }
.mint-band h2 { margin: 0 auto; max-width: 950px; font-size: clamp(3rem,7vw,6.8rem); line-height: .94; letter-spacing: -.065em; text-wrap: balance; }
.mint-band .lede { margin: 26px auto; }
.mint-band .btn-row { justify-content: center; }
.supply { width: min(540px,100%); margin: 32px auto 0; text-align: left; }
.supply-label { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font: 500 10px/1.5 "IBM Plex Mono",monospace; }
.supply-track { height: 7px; margin-top: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.supply-fill { height: 100%; background: linear-gradient(90deg,var(--orange),var(--gold)); border-radius: inherit; }

.mission-footer { border-top: 1px solid var(--line); padding: 34px 0 50px; }
.footer-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.footer-statement { max-width: 520px; font-size: 1.25rem; line-height: 1.4; letter-spacing: -.02em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: .88rem; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 54px; }
  .hero-art { min-height: 590px; }
  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .art-grid { grid-template-columns: 1fr; }
  .art-card { min-height: min(690px, 120vw); }
  .pipeline { grid-template-columns: 1fr 1fr; }
  .pipe-node:not(:last-child)::after { display: none; }
  .viewer-block { grid-template-columns: 1fr; padding: 18px; }
  .viewer-frame, .viewer-frame iframe { min-height: 540px; height: 540px; }
}
@media (max-width: 780px) {
  /* collapse to logo + mint pill well before the row gets tight — at
     680-780 real device fonts could push the full link row into the logo */
  .mission-nav .navlinks a:not(.mint-link) { display: none; }
  .mission-nav .navlinks { gap: 12px !important; }
}
@media (max-width: 680px) {
  .shell { width: min(calc(100% - 24px), 1220px); }
  .mission-nav { padding: 10px 12px !important; }
  .brand-copy small { display: none; }
  .navlinks { max-width: 58vw !important; gap: 12px !important; }
  .navlinks a:not(.mint-link) { display: none; }
  .hero { min-height: auto; padding: 46px 0 68px; }
  .display { font-size: clamp(3.2rem, 18vw, 5.1rem); }
  .hero-art { min-height: 500px; }
  .hero-card-main { inset: 2% 3% 0 8%; }
  .hero-card-small { width: 34%; }
  .hero-card-back { width: 38%; }
  .proof-strip { grid-template-columns: 1fr; }
  .manifesto-grid { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr; }
  .viewer-block { margin-inline: -2px; }
  .viewer-frame, .viewer-frame iframe { min-height: 500px; height: 500px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Landing: an unruly digital toy box, not a brochure. */
.toy-home { overflow: clip; }
.toy-home h1,.toy-home h2 { letter-spacing: -.065em; text-wrap: balance; }
.toy-home p { text-wrap: pretty; }
.toy-hero { min-height: calc(100svh - 66px); display: grid; grid-template-columns: minmax(0,.88fr) minmax(420px,1.12fr); align-items: center; gap: clamp(20px,5vw,78px); padding-block: clamp(50px,8vw,110px); }
.toy-hero-copy { position: relative; z-index: 3; display: grid; gap: 25px; }
.toy-hero-copy h1 { margin: 0; font-size: clamp(4rem,8.1vw,8.6rem); line-height: .82; font-weight: 700; }
.toy-hero-copy h1 span { color: var(--orange); }
.toy-lede { margin: 0; max-width: 58ch; color: var(--muted); font-size: clamp(1.05rem,1.55vw,1.24rem); line-height: 1.65; }
.toy-whisper { margin: -7px 0 0; color: var(--gold); font: 600 10px/1.5 "IBM Plex Mono",monospace; letter-spacing: .08em; text-transform: uppercase; }
.toy-stage { --mx: 0; --my: 0; position: relative; min-height: min(760px,78svh); display: grid; place-items: center; isolation: isolate; }
.toy-stage::before { content: ""; position: absolute; inset: 5% 1% 8%; z-index: -2; border: 1px solid rgba(255,255,255,.13); border-radius: 49% 51% 43% 57% / 54% 41% 59% 46%; background: radial-gradient(circle at 46% 40%,rgba(166,105,255,.86),rgba(78,35,143,.66) 44%,rgba(20,11,36,.3) 71%),var(--panel); box-shadow: inset 0 0 100px rgba(5,2,12,.34),0 55px 120px rgba(0,0,0,.34); transform: rotate(-2deg) translate(calc(var(--mx) * -7px),calc(var(--my) * -7px)); transition: transform .25s ease-out; }
.toy-stage::after { content: ""; position: absolute; left: 18%; right: 12%; bottom: 10%; height: 10%; z-index: -1; background: rgba(4,2,9,.48); filter: blur(28px); border-radius: 50%; }
.toy-dog-frame { width: min(92%,690px); height: min(720px,73svh); margin: 0; transform: translate(calc(var(--mx) * 12px),calc(var(--my) * 10px)) rotate(1.2deg); transition: transform .2s ease-out; }
/* contain for the same reason as .pack-card img: the hero pool is ar~.50 and
   this frame is far wider, so cover took ~36% off the top and bottom of the
   dog on mobile. Alpha PNGs, so nothing shows behind it. */
.toy-dog-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; border-radius: 35px; }
.toy-sticker { position: absolute; z-index: 4; padding: 12px 15px; border: 2px solid var(--on-accent); color: var(--on-accent); background: var(--gold); font: 800 10px/1 "IBM Plex Mono",monospace; letter-spacing: .09em; box-shadow: 5px 6px 0 var(--on-accent); }
.sticker-top { top: 4%; right: 2%; transform: rotate(6deg); }
.sticker-side { left: 0; top: 24%; padding: 9px 12px; background: var(--orange); transform: rotate(-9deg); }
.toy-dog-controls { position: absolute; z-index: 5; left: 5%; right: 2%; bottom: 2%; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.19); border-radius: 18px; background: rgba(9,6,17,.84); backdrop-filter: blur(15px); }
.toy-dog-controls p { margin: 0; color: var(--text); font-size: .9rem; }
.toy-next { flex: 0 0 auto; border: 0; padding: 0; color: var(--gold); background: transparent; font: 700 11px/1.2 "IBM Plex Mono",monospace; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.toy-next span { display: inline-block; margin-left: 5px; font-size: 17px; transition: transform .3s; }
.toy-next:hover span { transform: rotate(150deg); }
.dog-pop { animation: dog-pop .46s cubic-bezier(.2,.9,.3,1); }
@keyframes dog-pop { 0% { opacity:.25; transform:scale(.93) rotate(-2deg); } 70% { transform:scale(1.018) rotate(1deg); } 100% { opacity:1; transform:scale(1); } }
.dog-ticker { width: 100%; overflow: hidden; border-block: 1px solid var(--line); background: var(--orange); color: var(--on-accent); transform: rotate(-1deg) scale(1.02); }
.dog-ticker-track { width: max-content; display: flex; align-items: center; gap: 25px; padding: 14px 0; font: 800 12px/1 "IBM Plex Mono",monospace; letter-spacing: .08em; animation: ticker-run 28s linear infinite; }
.dog-ticker-track i { font-style: normal; font-size: 8px; }
@keyframes ticker-run { to { transform: translateX(-50%); } }
.pack-section { padding-block: clamp(105px,13vw,180px); }
.pack-head { display: grid; grid-template-columns: .7fr 1.15fr; gap: 18px clamp(30px,7vw,100px); align-items: end; }
.pack-head .eyebrow { grid-column: 1/-1; }
.pack-head h2 { margin: 0; max-width: 800px; font-size: clamp(3.2rem,7vw,7rem); line-height: .9; }
.pack-head p { margin: 0 0 7px; color: var(--muted); font-size: 1.12rem; line-height: 1.75; }
.pack-rack { display: grid; grid-template-columns: repeat(4,minmax(230px,1fr)); gap: 18px; margin-top: 80px; padding: 18px 8px 30px; overflow-x: auto; overflow-y: visible; scrollbar-width: thin; }
.pack-card { min-width: 230px; overflow: hidden; border: 1px solid rgba(28,26,32,.16); border-radius: 8px; background: #f3e8ce; color: var(--text); box-shadow: 12px 18px 45px rgba(0,0,0,.28); transition: transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s; }
.pack-card:nth-child(odd) { transform: rotate(-2.5deg) translateY(8px); }
.pack-card:nth-child(even) { transform: rotate(2.5deg) translateY(-8px); }
.pack-card:hover { transform: rotate(0) translateY(-14px) scale(1.025); box-shadow: 16px 28px 60px rgba(0,0,0,.42); }
/* contain, NOT cover: the renders are ar~.50 and this box is wider, so cover
   scaled to fill the width and cropped ~37% off the dog -- head and legs both.
   Every pack PNG carries alpha, so the cream card shows through cleanly.
   Planted bottom so the dog stands on the divider rather than floating. */
.pack-card img { display: block; width: 100%; aspect-ratio: .68; object-fit: contain; object-position: center bottom; padding: 12px 12px 0; box-sizing: border-box; }
.pack-card div { min-height: 94px; padding: 16px 17px 18px; border-top: 3px solid var(--text); }
.pack-card b { display: block; font: 800 11px/1.35 "IBM Plex Mono",monospace; letter-spacing: .06em; }
.pack-card span { display: block; margin-top: 7px; color: #5f5268; font-size: .88rem; }
.scribble-link { display: inline-block; margin-top: 38px; color: var(--gold); font: 700 12px/1.4 "IBM Plex Mono",monospace; text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid var(--orange); transform: rotate(-1deg); }
.identity-lab { padding-block: clamp(80px,10vw,140px); border-block: 1px solid var(--line); background: linear-gradient(128deg,#160d27,#0c0815 62%); }
/* INK FOR THE SECTIONS THAT STAYED DARK THROUGH THE LIGHT RE-SKIN.
   The palette is light (--text #1c1a20), but these two keep hard-coded dark
   backgrounds, so their headings inherited near-black onto near-black: 1.09:1
   and 1.19:1, i.e. invisible, and their body copy sat at 2.5:1.
   Redefining the two tokens LOCALLY flips every descendant that already asks
   for them -- h2 by inheritance, .identity-copy>p, .maybe-copy>p and the tier
   buttons by name -- instead of a parallel set of rules to keep in sync.
   .identity-machine is nested inside .identity-lab and is covered by it.
   .viewer-ticket greps as dark but is #f1dfbd with dark ink: correct, untouched.
   Ink values only -- no surface here, which is the mistake that made the pack
   captions invisible. */
.identity-lab, .maybe-section { --text: #f2f0f7; --muted: #b6b1c6; color: var(--text); }
.identity-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(45px,8vw,120px); align-items: center; }
.identity-copy { display: grid; gap: 25px; }
.identity-copy h2 { margin: 0; font-size: clamp(3.3rem,6.5vw,6.8rem); line-height: .86; }
.identity-copy>p { margin: 0; color: var(--muted); line-height: 1.72; font-size: 1.08rem; }
.tier-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.tier-tabs button { padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 700; }
.tier-tabs button.active { border-color: var(--orange); color: var(--on-accent); background: var(--orange); }
.identity-copy .tier-line { min-height: 3.4em; color: var(--gold); font: 600 11px/1.55 "IBM Plex Mono",monospace; letter-spacing: .05em; }
.identity-machine { position: relative; min-height: 680px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 44px 10px 44px 10px; background: radial-gradient(circle at 50% 42%,#9b67ef,var(--violet) 49%,#1a102b 80%); box-shadow: inset 0 0 90px rgba(7,3,13,.34); }
.identity-machine::before { content:""; position:absolute; inset:20px; border:1px dashed rgba(28,26,32,.16); border-radius:28px 6px 28px 6px; pointer-events:none; }
.identity-machine img { width: min(88%,630px); height: 620px; object-fit: contain; }
.machine-label,.machine-flow { position:absolute; z-index:2; padding:8px 10px; color:var(--gold); background:rgba(9,6,17,.8); font:700 9px/1 "IBM Plex Mono",monospace; letter-spacing:.09em; }
.machine-label { top:31px; left:31px; }.machine-flow { right:31px; bottom:31px; }
.trick-section { padding-block: clamp(110px,14vw,190px); }
.trick-title-wrap { max-width: 920px; }
.trick-title-wrap h2 { margin:24px 0 20px; font-size:clamp(4rem,9vw,9rem); line-height:.84; }
.trick-title-wrap>p { max-width:680px; margin:0; color:var(--muted); font-size:1.18rem; line-height:1.72; }
.trick-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:75px; }
.trick-notes article { position:relative; min-height:250px; padding:29px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,var(--panel-2),var(--panel)); }
.trick-notes article:nth-child(2) { transform:translateY(25px) rotate(1deg); }.trick-notes article:nth-child(3) { transform:translateY(-12px) rotate(-1deg); }
.trick-notes span { position:absolute; right:13px; top:-12px; color:rgba(255,255,255,.055); font-size:8rem; font-weight:700; letter-spacing:-.1em; }
.trick-notes b { position:relative; display:block; margin-top:58px; font-size:1.3rem; }.trick-notes p { position:relative; margin:11px 0 0; color:var(--muted); line-height:1.65; }
.maybe-section { position:relative; min-height:92svh; display:grid; place-items:center; overflow:hidden; border-block:1px solid var(--line); background:#05030a; }
.maybe-section::before { content:"?"; position:absolute; right:-3vw; bottom:-13vw; color:rgba(139,92,246,.10); font-size:min(85vw,980px); font-weight:700; line-height:.8; }
.maybe-copy { position:relative; z-index:2; padding-block:120px; }.maybe-copy h2 { max-width:1040px; margin:30px 0; font-size:clamp(4rem,9vw,9.3rem); line-height:.86; }
.maybe-copy>p { max-width:720px; margin:0; color:var(--muted); font-size:1.2rem; line-height:1.72; }.maybe-copy .maybe-answer { margin-top:29px; color:var(--gold); font:700 12px/1.5 "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.11em; }
.maybe-orbit { position:absolute; border:1px solid rgba(247,147,26,.25); border-radius:50%; animation:slow-turn 18s linear infinite; }.orbit-one { width:48vw; height:48vw; right:-15vw; top:-23vw; }.orbit-two { width:22vw; height:22vw; right:9vw; top:4vw; animation-direction:reverse; animation-duration:11s; }
.maybe-orbit::after { content:""; position:absolute; left:50%; top:-5px; width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 22px var(--orange); } @keyframes slow-turn { to { transform:rotate(360deg); } }
.viewer-playground { display:grid; grid-template-columns:.72fr 1.28fr; gap:18px; padding-block:clamp(100px,12vw,170px); }
.viewer-ticket { position:relative; z-index:2; align-self:center; margin-right:-65px; padding:clamp(28px,4vw,58px); border:1px solid rgba(28,26,32,.16); border-radius:12px; color:#1a1025; background:#f1dfbd; box-shadow:15px 24px 60px rgba(0,0,0,.4); transform:rotate(-2deg); }
.viewer-ticket::before,.viewer-ticket::after { content:""; position:absolute; right:-12px; width:24px; height:24px; border-radius:50%; background:var(--void); }.viewer-ticket::before { top:18%; }.viewer-ticket::after { bottom:18%; }
.viewer-ticket>span { font:800 10px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; }.viewer-ticket h2 { margin:24px 0 17px; font-size:clamp(3rem,5vw,5.5rem); line-height:.9; }.viewer-ticket p { margin:0 0 25px; color:#594d61; line-height:1.65; }
.viewer-window { min-height:700px; overflow:hidden; border:1px solid var(--line); border-radius:32px; background:#8e60e8; }.viewer-window img { width:100%; height:700px; display:block; object-fit:cover; }
.last-call { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(35px,8vw,120px); align-items:end; padding-block:clamp(110px,14vw,200px); }.last-call h2 { max-width:820px; margin:25px 0 20px; font-size:clamp(3.8rem,7vw,7.5rem); line-height:.87; }.last-call p { margin:0; color:var(--muted); font-size:1.1rem; }
.last-call-action { display:grid; justify-items:start; gap:20px; padding-bottom:10px; }.last-call-action>a:not(.btn) { color:var(--gold); border-bottom:1px solid currentColor; }.last-call-action .supply { width:100%; margin:6px 0 0; }
@media (max-width:980px) {
  .toy-hero { grid-template-columns:1fr; }.toy-hero-copy { padding-top:25px; }.toy-stage { min-height:650px; }.pack-head { grid-template-columns:1fr; }.identity-grid { grid-template-columns:1fr; }.identity-machine { min-height:610px; }.trick-notes { grid-template-columns:1fr; }.trick-notes article:nth-child(n) { min-height:210px; transform:none; }.viewer-playground { grid-template-columns:1fr; }.viewer-ticket { margin:0 18px -70px; transform:rotate(-1deg); }.viewer-window { padding-top:55px; }.last-call { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .toy-hero { padding-top:45px; }.toy-hero-copy h1 { font-size:clamp(3.7rem,18vw,5.7rem); }.toy-stage { min-height:520px; margin-inline:-8px; }.toy-dog-frame { height:520px; width:100%; }.toy-sticker { font-size:8px; }.sticker-top { right:1%; top:1%; }.sticker-side { left:-2%; top:19%; }.toy-dog-controls { left:2%; right:2%; display:grid; }.toy-dog-controls p { font-size:.82rem; }.pack-head h2 { font-size:clamp(3.3rem,15vw,5rem); }.pack-rack { grid-template-columns:repeat(4,74vw); margin-inline:-12px; padding-inline:12px; }.identity-copy h2 { font-size:clamp(3.5rem,16vw,5.2rem); }.identity-machine { min-height:500px; border-radius:26px 7px; }.identity-machine img { height:460px; width:100%; }.machine-label { top:19px; left:19px; }.machine-flow { right:19px; bottom:19px; }.trick-title-wrap h2 { font-size:clamp(4.4rem,20vw,6.4rem); }.maybe-section { min-height:760px; }.maybe-copy h2 { font-size:clamp(4rem,18vw,6rem); }.viewer-ticket { margin-inline:6px; padding:28px; }.viewer-window,.viewer-window iframe { min-height:570px; height:570px; }.last-call h2 { font-size:clamp(3.7rem,16vw,5.5rem); }.supply-label { display:grid; }
}
@media (max-width:680px) { .viewer-window img { min-height:570px; height:570px; } }
@media (prefers-reduced-motion:reduce) { .dog-ticker-track,.maybe-orbit { animation:none!important; }.toy-stage::before,.toy-dog-frame { transform:none!important; } }


/* --- FX: motion & future-tech layer (fx.js adds .fx-ready + .fx-in) ---- */
.fx-ready [data-fx] { opacity: 0; translate: 0 26px; transition: opacity .65s ease, translate .65s cubic-bezier(.2,.8,.2,1), transform .3s ease, border-color .3s ease, box-shadow .35s ease; }
.fx-ready [data-fx].fx-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { [data-fx] { opacity: 1 !important; translate: none !important; } }
.eyebrow::after { content: "▮"; margin-left: 2px; color: var(--orange); font-size: .85em; animation: caret-blink 1.15s steps(2, start) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.display .warm, .toy-hero-copy h1 span { display: inline-block; animation: warm-glitch 7.5s infinite; }
@keyframes warm-glitch {
  0%, 91.5%, 100% { text-shadow: none; transform: none; }
  92% { text-shadow: -4px 0 var(--blue), 4px 0 #ff3d68; transform: translateX(2px); }
  93% { text-shadow: 4px 0 var(--blue), -4px 0 #ff3d68; transform: translateX(-2px) skewX(-2deg); }
  94.5% { text-shadow: -2px 0 var(--blue), 2px 0 #ff3d68; transform: none; }
  95% { text-shadow: none; }
}
.viewer-window, .fx-scan { position: relative; overflow: hidden; }
.identity-machine::after, .viewer-window::after, .fx-scan::after {
  content: ""; position: absolute; left: 0; right: 0; top: -28%; height: 24%; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent, rgba(77, 184, 255, .13) 45%, rgba(247, 147, 26, .16) 55%, transparent);
  animation: scan-sweep 6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes scan-sweep { 0%, 12% { top: -28%; } 62%, 100% { top: 112%; } }
.supply-fill { position: relative; overflow: hidden; }
.supply-fill::after { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .5) 50%, transparent 75%); animation: bar-shine 3s ease-in-out infinite; }
@keyframes bar-shine { 55%, 100% { transform: translateX(110%); } }
.btn-primary:hover { box-shadow: 0 10px 34px rgba(247, 147, 26, .35); }
.mint-link:hover { box-shadow: 0 6px 22px rgba(247, 147, 26, .4); }
.fx-flow { background: linear-gradient(180deg, var(--orange) 0 55%, rgba(247, 147, 26, .2) 55% 100%) 0 0 / 100% 12px repeat-y; animation: flow-down 1s linear infinite; }
@keyframes flow-down { to { background-position: 0 12px; } }


/* ---- The Wizard, site presenter (2026-07-25) ---- */
.wizard-presenter { display:flex; align-items:flex-end; gap:20px; margin:34px 0; }
.wizard-presenter img { width:clamp(110px,16vw,180px); height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.wizard-say { background:rgba(255,255,255,.04);
  border:1px solid rgba(247,147,26,.35); border-radius:16px;
  padding:16px 20px; color:var(--muted); font-size:.98rem; line-height:1.65;
  max-width:40ch; }
.wizard-say b { color:var(--orange); }
.wizard-say small { display:block; margin-top:8px; color:var(--orange);
  font-family:ui-monospace,Menlo,monospace; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:640px){ .wizard-presenter { flex-direction:column; align-items:flex-start; } }