/* ═══════════════════════════════════════════════════════════════════
   THE WALKTHROUGH — trailer.css · a room, shown a little at a time

   The room above, as big as the screen lets it be; under it the line,
   its name over it, and the buttons, back and next. On a phone the room
   runs edge to edge, as an app's would (Jae, 2026-10-23: "make the thing
   full screen... rather than like on the edges"), and the buttons are as
   wide as the line (trailer.js). Where the doors are, they go under the
   line, as there are three. Playing on, the room's own controls are in
   and the bar under it is only its doors, a line of them
   ═══════════════════════════════════════════════════════════════════ */

html,body{height:100%}
body{margin:0;background:var(--room);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.tr{box-sizing:border-box;display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:1120px;margin:0 auto;
  padding:0 20px max(14px, env(safe-area-inset-bottom))}
.tr-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px}
.tr-mark{font-family:var(--serif);font-size:18px;color:var(--ink);text-decoration:none}
.tr-skip{font-size:14px;color:var(--muted);text-decoration:none}
.tr-skip:hover,.tr-skip:focus-visible{color:var(--ink)}
.tr-stage{flex:1;min-height:0;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.tr-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.tr-say{flex:none;display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 28px;min-height:118px;padding:18px 4px 4px;box-sizing:border-box}
.tr-step{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8A6E12}
.tr-line{margin:0;font-family:var(--serif);font-size:23px;line-height:1.35;color:var(--ink);text-wrap:balance}
.tr-eq{white-space:nowrap}
.tr-hint{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--muted)}
.tr-go{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.tr-btn{appearance:none;display:inline-block;box-sizing:border-box;border:1px solid var(--ink);border-radius:99px;background:var(--ink);color:var(--surface);
  font:600 16px/1.2 var(--sans);padding:13px 24px;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:opacity .35s ease, transform .35s ease, background .2s ease}
.tr-btn:focus-visible,.tr-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tr-btn.tr-quiet{background:transparent;color:var(--ink);border-color:var(--faint)}
.tr-btn.tr-quiet:hover{border-color:var(--ink)}
.tr-btn.tr-wait{opacity:0;transform:translateY(5px);pointer-events:none;visibility:hidden}
.tr-say:has(.tr-door){grid-template-columns:1fr}
.tr-say:has(.tr-door) .tr-go{justify-content:flex-start}
.tr-more{grid-column:1 / -1;margin:2px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.tr-more a{color:var(--ink)}
.tr-small{white-space:nowrap}
.tr-link{appearance:none;border:0;background:none;padding:0;margin-left:14px;font:inherit;color:var(--muted);text-decoration:underline;cursor:pointer}
.tr-playing .tr-skip{visibility:hidden}
.tr-playing .tr-say{grid-template-columns:1fr;min-height:0;padding-top:12px}
.tr-playing .tr-say > div:first-child,.tr-playing .tr-go{display:none}
.tr-playing .tr-more{margin:0}
@media (max-width:640px){
  .tr{padding:0 0 max(10px, env(safe-area-inset-bottom))}
  .tr-bar{height:44px;padding:0 14px}
  .tr-stage{border-width:1px 0;border-radius:0}
  .tr-say{grid-template-columns:1fr;gap:12px;min-height:0;padding:14px 14px 2px}
  .tr-line{font-size:20px}
  .tr-go{justify-content:stretch;flex-wrap:nowrap}
  .tr-go .tr-btn{flex:1 1 auto}
  .tr-go .tr-btn.tr-back{flex:0 0 auto;padding-left:20px;padding-right:20px}
  .tr-go .tr-door{flex-basis:100%}
  .tr-go:has(.tr-door){flex-wrap:wrap}
  .tr-small{display:block;margin-top:6px}
  .tr-small .tr-link:first-child{margin-left:0}
}
@media (prefers-reduced-motion:reduce){ .tr-btn{transition:none} }

/* ── 2026-10-23 (Jae: "the instructions need to be on the canvas"; "that
   show me should not be on the right, it should be on the bottom of" the
   line; "a timer that's going around the button... so that we know that
   button exists") ── */
/* a button that's coming is there, quiet (trailer.js waiting): filling
   faintly from the left over its seconds where it has them, then dark; no
   ring going round it since 2026-10-24 (Jae: "a little bit more subtle...
   there's just a lot of moving everywhere"); the Next after things to touch
   still waits out of sight, on them */
.tr-btn{position:relative}
.tr-btn.tr-wait{opacity:1;transform:none;visibility:visible;pointer-events:none;background:var(--surface);color:var(--muted);border-color:var(--line)}
.tr-btn.tr-wait.tr-later{opacity:0;visibility:hidden}
/* (the fill a layer of its own under the word, so the button's own coming-in isn't taken from it and played
   again when the wait ends: it only turns dark, where it is, and can be pressed; Jae, 2026-10-24: "once the
   timer finishes instead of just pulling up a new button as the animation, the button just becomes black and
   touchable") */
.tr-btn.tr-wait.tr-filling{overflow:hidden;isolation:isolate}
.tr-btn.tr-wait.tr-filling::before{content:'';position:absolute;left:0;top:0;bottom:0;width:calc(var(--p, 0) * 100%);z-index:-1;
  background:rgba(38,38,43,.07);pointer-events:none}
/* (every button that waits fills so, Next as Show me, over its line's own seconds at one pace; full, the
   button darkens from its fill, word and edge with it, and is then pressable: trailer.js finish) */
.tr-btn.tr-wait.tr-filled::before{width:100%;transition:width .2s ease-out}
.tr-btn.tr-wait.tr-lit{background:var(--ink);color:var(--surface);border-color:var(--ink);transition:background .45s ease,color .45s ease,border-color .45s ease}
.tr-btn.tr-wait.tr-filling.tr-lit::before{background:var(--ink);transition:width .2s ease-out,background .45s ease}
/* (the Next after things to touch rising in as the tour's buttons do) */
.tr-btn.tr-rise{animation:tr-up .5s cubic-bezier(.2,.8,.2,1) both}
/* on a laptop: the room and its line on one white canvas, the buttons
   under the line, at its left */
@media (min-width:641px){
  .tr{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .tr-stage{border:0;border-radius:0;background:transparent}
  .tr-say{grid-template-columns:1fr;align-items:start;gap:0;min-height:0;padding:18px 30px 24px;border-top:1px solid var(--line)}
  .tr-go{justify-content:flex-start;margin-top:16px}
  .tr-more{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){ .tr-btn.tr-wait.tr-filling::before{display:none} }

/* ── 2026-10-24 (Jae: "have socrato like our little guy there as if he is
   the one talking"; "nice animations everywhere"; the first line
   "highlighted or growing"; "the little guy takes the stage"; keep
   playing's links as buttons and its tour) ── */
.tr{position:relative}
.tr-say{position:relative}
/* Socrato beside the line, his face changing with the moment */
.tr-say,.tr-say:has(.tr-door){grid-template-columns:64px minmax(0,1fr);column-gap:18px}
.tr-say > *{grid-column:2}
.tr-say > .tr-who{grid-column:1;grid-row:1 / span 3;align-self:start;margin-top:2px}
.tr-who{display:block;width:64px;height:64px;object-fit:contain;transition:opacity .16s ease, transform .16s ease}
.tr-who.tr-who-swap{opacity:0;transform:scale(.9)}
/* everything coming in, one after another */
@keyframes tr-up{from{opacity:0;transform:translateY(10px)}}
@keyframes tr-grow{from{opacity:0;transform:scale(.94)}}
.tr-enter .tr-who{animation:tr-grow .5s cubic-bezier(.2,.8,.2,1) both}
.tr-enter .tr-step{animation:tr-up .45s cubic-bezier(.2,.8,.2,1) .04s both}
.tr-enter .tr-line{animation:tr-up .55s cubic-bezier(.2,.8,.2,1) .1s both}
.tr-enter .tr-hint{animation:tr-up .55s cubic-bezier(.2,.8,.2,1) .18s both}
.tr-enter .tr-go > *{animation:tr-up .5s cubic-bezier(.2,.8,.2,1) .26s both}
.tr-enter .tr-go > :nth-child(2){animation-delay:.32s}
.tr-enter .tr-go > :nth-child(3){animation-delay:.38s}
.tr-enter .tr-more{animation:tr-up .5s ease .42s both}
/* (while playing, the bar under the room comes in with his line, not after it: Jae, 2026-10-24, "it has a bit of a delay") */
.tr-playing.tr-enter .tr-more,.tr-playing .tr-enter .tr-more{animation-delay:.1s}
.tr-line.tr-re,.tr-hint.tr-re{animation:tr-up .5s cubic-bezier(.2,.8,.2,1) both}
.tr-say.tr-leave > *{opacity:0;transition:opacity .2s ease}
#tr-room{transition:opacity .24s ease}
#tr-room.tr-dim{opacity:0}
/* (the room unseen until it has been told to be bare and has answered, then coming in: it loads with
   its own tools all round it, and they showed for a moment at every refresh; Jae, 2026-10-25: "everytime
   i refresh, i can see the tools for the tutorial for a split second") */
#tr-room:not(.tr-in){opacity:0}
/* the first line glows on the paper until it's answered, the line growing in */
@keyframes tr-glow{0%,100%{background-color:rgba(243,235,210,0)}50%{background-color:rgba(243,235,210,.9)}}
.tr-say.tr-glow{animation:tr-glow 2.6s ease-in-out 1s infinite}
.tr-enter.tr-glow .tr-line{transform-origin:0 50%;animation:tr-grow .9s cubic-bezier(.2,.8,.2,1) .1s both}
/* Socrato takes the stage: the room steps back, he says it in the middle */
.tr-stage{transition:opacity .6s ease, filter .6s ease}
.tr-staged .tr-stage{opacity:.16;filter:blur(1.5px)}
.tr-staged .tr-say{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;
  border-top:0;background:rgba(255,255,255,.66);padding:32px 40px}
.tr-staged .tr-who{width:150px;height:150px;margin:0}
.tr-staged .tr-line{font-size:clamp(22px,2.3vw,30px);max-width:32ch;text-wrap:balance}
.tr-staged .tr-go{justify-content:center;margin-top:8px}
.tr-staged .tr-more{text-align:center}
/* keep playing: its bar's doors as buttons; Socrato's stops while he shows them round */
.tr-doors{display:inline-flex;flex-wrap:wrap;gap:10px}
.tr-more .tr-btn{padding:10px 18px;font-size:15px}
.tr-playing:not(.tr-touring) .tr-who{display:none}
.tr-playing:not(.tr-touring) .tr-say{grid-template-columns:minmax(0,1fr)}
.tr-playing:not(.tr-touring) .tr-say > *{grid-column:1}
.tr-playing.tr-touring .tr-say > div:first-of-type{display:block}
.tr-playing.tr-touring .tr-go{display:flex}
.tr-playing.tr-touring .tr-say{min-height:0;padding-top:16px}
#tr-point{position:fixed;left:0;top:0;z-index:40;color:var(--gold);pointer-events:none;line-height:0}
#tr-point svg{display:block;width:44px;height:44px;filter:drop-shadow(0 1px 1.5px rgba(38,38,43,.3))}
#tr-point[data-way="right"] svg{transform:rotate(180deg)}
#tr-point[data-way="up"] svg{transform:rotate(90deg)}
#tr-point[data-way="down"] svg{transform:rotate(-90deg)}
@keyframes tr-point-in{from{opacity:0}}
@keyframes tr-nudge{0%,100%{translate:0 0}50%{translate:var(--nx,0) var(--ny,0)}}
#tr-point.tr-point-in{animation:tr-point-in .4s ease both}
#tr-point i{display:block;animation:tr-nudge 1.1s ease-in-out .4s infinite}
#tr-point[data-way="left"] i{--nx:-6px}
#tr-point[data-way="right"] i{--nx:6px}
#tr-point[data-way="up"] i{--ny:-6px}
#tr-point[data-way="down"] i{--ny:6px}
/* "Keep reading": once the first part is done, the page goes on below */
.tr-read{display:none;align-items:center;gap:8px;position:absolute;right:26px;bottom:22px;z-index:6;border:0;background:none;padding:6px 4px;
  font:600 15px/1 var(--sans);color:var(--ink);cursor:pointer}
.tr-read.tr-shown{display:inline-flex;animation:tr-up .5s ease .5s both}
.tr-read svg{width:18px;height:18px;animation:tr-nudge 1.2s ease-in-out infinite;--ny:4px}
@media (max-width:640px){
  .tr-say,.tr-say:has(.tr-door){grid-template-columns:40px minmax(0,1fr);column-gap:12px}
  .tr-who{width:40px;height:40px}
  .tr-staged .tr-who{width:110px;height:110px}
  .tr-staged .tr-say{padding:24px 18px}
  .tr-read{position:static;grid-column:2;justify-self:start;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .tr-enter *,.tr-re,.tr-say.tr-glow,.tr-read svg,#tr-point i{animation:none!important}
}
.tr-more .tr-deeper{color:var(--ink);text-decoration:underline;text-underline-offset:3px;margin-right:4px}
/* (while he shows them round, Socrato beside his line, as everywhere else;
   on the stage, he stands in the middle, the room well back) */
.tr-playing.tr-touring .tr-say{grid-template-columns:64px minmax(0,1fr);align-items:start}
.tr-playing.tr-touring .tr-go{justify-content:flex-start}
.tr-staged .tr-say > .tr-who{align-self:center}
.tr-staged .tr-stage{opacity:.1}
.tr-staged .tr-say{background:rgba(255,255,255,.8)}
@media (max-width:640px){ .tr-playing.tr-touring .tr-say{grid-template-columns:40px minmax(0,1fr)} }

/* ── 2026-10-24, round two (Jae: "when i press next and back the animation
   for the text and the little guy it should be nice"; Back and Start over
   as buttons; the tour boxed, not pointed at; the close in two sizes; the
   representations as cards, all pointing to the math) ── */
/* Socrato hops as each line comes in, tilting the other way each time; his face fades between */
@keyframes tr-hop{0%{opacity:0;transform:translateY(8px) rotate(0)}45%{opacity:1;transform:translateY(-6px) rotate(var(--tilt,4deg))}100%{opacity:1;transform:translateY(0) rotate(0)}}
.tr-enter .tr-who{animation:tr-hop .55s cubic-bezier(.3,1.2,.5,1) both}
.tr-who.tr-who-swap{opacity:0;transform:none}
/* going back, a line comes in from above; the one leaving goes the other way */
@keyframes tr-down{from{opacity:0;transform:translateY(-10px)}}
.tr-backward.tr-enter .tr-step,.tr-backward.tr-enter .tr-line,.tr-backward.tr-enter .tr-hint{animation-name:tr-down}
.tr-enter .tr-step{animation-delay:.1s}
.tr-enter .tr-line{animation-delay:.16s}
.tr-enter .tr-hint{animation-delay:.24s}
.tr-ghost{position:absolute;margin:0;pointer-events:none;z-index:2}
@keyframes tr-out-up{to{opacity:0;transform:translateY(-12px)}}
@keyframes tr-out-down{to{opacity:0;transform:translateY(12px)}}
.tr-ghost-up{animation:tr-out-up .3s ease forwards}
.tr-ghost-down{animation:tr-out-down .3s ease forwards}
/* Back and Start over: small quiet buttons, under the main ones */
.tr-small{display:inline-flex;gap:8px;flex-wrap:wrap;white-space:normal}
.tr-btn.tr-mini{padding:7px 14px;font-size:13px;border-color:var(--line);color:var(--muted)}
.tr-btn.tr-mini:hover{border-color:var(--ink);color:var(--ink)}
/* the part Socrato is talking about, boxed in gold */
#tr-box{position:fixed;z-index:40;pointer-events:none;border:2.5px solid var(--gold);border-radius:14px;box-shadow:0 0 0 6px rgba(201,162,39,.16)}
@keyframes tr-box-in{from{opacity:0;transform:scale(1.06)}}
#tr-box.tr-box-in{animation:tr-box-in .4s cubic-bezier(.2,.8,.2,1) both}
/* the stage, soft: the room only half back, since what he says is about it */
.tr-soft .tr-stage{opacity:.42;filter:none}
.tr-soft .tr-say{background:rgba(255,255,255,.55)}
/* the close in two sizes: the setup quiet, the call large */
.tr-staged .tr-line{font-size:clamp(18px,1.7vw,22px);max-width:40ch}
.tr-line .tr-big{display:block;margin-top:.7em;font-size:1.5em;line-height:1.25;color:var(--ink);text-wrap:balance}
/* the representations as cards, a line from each into the math */
#tr-math{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:var(--surface);padding:18px}
#tr-math[hidden]{display:none}
#tr-math svg{width:100%;height:100%;max-height:100%}
.tm-card{fill:var(--surface);stroke:var(--line);stroke-width:1.5;filter:drop-shadow(0 2px 6px rgba(38,38,43,.08))}
.tm-nm{font:600 26px var(--serif);fill:var(--ink)}
.tm-br{fill:none;stroke:var(--machine-soft);stroke-width:2.5;stroke-linejoin:round}
.tm-rep{font:italic 500 40px var(--serif);fill:var(--machine-soft)}
.tm-ln{stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.tm-node{fill:#F3EBD2;stroke:var(--gold);stroke-width:3}
.tm-math{font:italic 600 42px var(--serif);fill:#A8861C}
.tm-floor{stroke:var(--faint);stroke-width:1.6}
.tm-one{fill:var(--block);stroke:var(--block-deep);stroke-width:1.2}
.tm-x{fill:var(--field);stroke:var(--field-deep);stroke-width:1.2}
.tm-say{font:400 22px var(--serif);fill:var(--ink)}
.tm-th{font:600 13px var(--sans);letter-spacing:.06em;fill:var(--muted)}
.tm-td{font:500 20px var(--serif);fill:var(--ink)}
.tm-rule{stroke:var(--line);stroke-width:1.5}
.tm-ax{stroke:var(--machine);stroke-width:1.8}
.tm-pt{fill:var(--ink)}
.tm-eq{font:500 36px var(--serif);fill:var(--ink)}
.tm-pill{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.tm-word{font:400 16px var(--serif);fill:var(--ink)}
@keyframes tm-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes tm-fade{from{opacity:0}}
@keyframes tm-pop{from{opacity:0;transform:scale(.6)}}
@keyframes tm-draw{from{stroke-dashoffset:1}}
.tm-rise{animation:tm-rise .65s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.tm-fade{animation:tm-fade .7s ease var(--d,0s) both}
.tm-pop{transform-box:fill-box;transform-origin:50% 50%;animation:tm-pop .55s cubic-bezier(.2,.9,.3,1.25) var(--d,0s) both}
.tm-draw{stroke-dasharray:1;animation:tm-draw .9s ease-in-out var(--d,0s) both}
@media (prefers-reduced-motion:reduce){ .tr-enter .tr-who,.tr-ghost,#tr-box,.tm-rise,.tm-fade,.tm-pop,.tm-draw{animation:none!important} .tr-ghost{display:none} }
/* (the soft stage a little calmer, so his words read over it) */
.tr-soft .tr-stage{opacity:.3}
.tr-soft .tr-say{background:rgba(255,255,255,.7)}
/* (a door recommended: a small gold tag on its top edge; Jae, 2026-10-24: "for why it works put... recommended") */
.tr-btn .tr-tag{position:absolute;top:-10px;right:12px;padding:3px 8px;border-radius:99px;background:var(--gold);color:#fff;font:700 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 1px 3px rgba(38,38,43,.18)}
/* (the bar while playing: its doors, then the small ones under them; its own class, not the header's tr-bar, whose height it took on a phone) */
.tr-more .tr-doors{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.tr-more .tr-doors + .tr-small{display:flex;margin-top:10px}
/* (its one dark door keeps its light words: .tr-more a would make them ink on ink) */
.tr-more a.tr-btn:not(.tr-quiet){color:var(--surface)}
/* (Keep reading in the bar while playing, its arrow beside it, as at the end screens) */
.tr-doors .tr-btn svg{display:inline-block;width:15px;height:15px;margin-left:4px;vertical-align:-2px}
/* (a short box, a phone's on the page before it fills the screen, or a small phone: Socrato's stage
   closer together and smaller, the doors side by side, so all of it fits and nothing is cut; Jae,
   2026-10-24: "everything should fit into that little box... as long as it won't look that janky") */
@media (max-height:620px){
  .tr-staged .tr-say{gap:8px;padding:12px 16px}
  .tr-staged .tr-who{width:64px;height:64px}
  .tr-staged .tr-line{font-size:17px}
  .tr-staged .tr-line .tr-big{font-size:1.3em;margin-top:.5em}
  .tr-staged .tr-hint{margin-top:0}
  .tr-staged .tr-go,.tr-staged .tr-say:has(.tr-door) .tr-go{margin-top:2px;gap:8px;justify-content:center}
  .tr-staged .tr-go .tr-door{flex:0 1 auto;padding:10px 16px;font-size:15px}
  .tr-staged .tr-more{margin-top:2px}
  .tr-staged .tr-read{margin-top:0}
}
/* (playing on a phone: the bar one row under the room, its buttons a little smaller, and no Keep
   reading, the × being there; Jae, 2026-10-24: "the formatting just looks crazy... horizontal?") */
@media (max-width:640px){
  .tr-playing:not(.tr-touring) .tr-say{padding-top:10px;padding-bottom:4px}
  .tr-playing .tr-more .tr-doors{flex-wrap:wrap;gap:12px 16px}
  .tr-playing .tr-more .tr-btn{padding:9px 14px;font-size:14px}
  .tr-playing .tr-more .tr-btn.tr-mini{padding:8px 12px;font-size:13px}
  .tr-playing .tr-read{display:none!important}
}
/* (kept one height through a part, trailer.js steady: the line under the room, the buttons at the foot) */
.tr-say.tr-steady{align-content:space-between}
/* (the gold box breathing, its glow swelling and fading, so the eye finds it; Jae, 2026-10-24: "make the boxing pulse") */
@keyframes tr-box-pulse{0%,100%{box-shadow:0 0 0 3px rgba(201,162,39,.24)}50%{box-shadow:0 0 0 8px rgba(201,162,39,.08)}}
#tr-box{animation:tr-box-pulse 1.8s ease-in-out infinite}
#tr-box.tr-box-in{animation:tr-box-in .4s cubic-bezier(.2,.8,.2,1) both, tr-box-pulse 1.8s ease-in-out .4s infinite}
@media (prefers-reduced-motion:reduce){ #tr-box,#tr-box.tr-box-in{animation:none} }
/* filling a phone's screen (the front page says so: { someta:'walk', full }): the stage's white runs to
   the top of the screen, its thin line along the top as along its foot ("for the top part too"), and the
   room starts under the page's leave-full-screen button, which floats over its corner; the paper under
   the line (Jae, 2026-10-24: "making the white part go all the way to the top of the phone... the x
   button will just be on top of the white part"; "maybe that's what it is on the top right corner like
   minimize screen") */
body.tr-full{background:var(--room)}
.tr-full .tr-stage iframe{top:52px;height:calc(100% - 52px)}
.tr-full #tr-math{top:52px}
/* (inside why it works, where they are in it, quieter than its name: trailer.js; Jae, 2026-10-24) */
.tr-step .tr-count{color:var(--muted);font-weight:500}
/* (Let's connect at the close, the one gold door, popping a little: Jae, 2026-10-24, "maybe the let's connect button pop a little bit more") */
.tr-btn.tr-pop{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 0 0 5px rgba(201,162,39,.18),0 8px 20px rgba(201,162,39,.3)}
.tr-btn.tr-pop:hover{background:#B8921F;border-color:#B8921F}
@media (prefers-reduced-motion:reduce){ .tr-btn.tr-rise{animation:none} }
/* (on the stage, the line in the middle whatever is under it, and a long note under it kept to a
   reading width: The mind's eye's student who is blind) */
.tr-staged .tr-line{margin-left:auto;margin-right:auto}
.tr-staged .tr-hint{max-width:56ch;margin-left:auto;margin-right:auto}

/* ── 2026-10-24, slides (Jae: "kinda like the stuff you made for the slides... sometimes it animates
   too"): over the room, as in his talks, big words and drawings, each piece coming in after its delay
   (--d), the talks' own five ways in; sized to the room's place (container units), so a phone's is the
   same slide, smaller and stacked where it must be (trailer.js slide) ── */
#tr-slide{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  padding:16px 4%;background:var(--surface);container-type:size;overflow:hidden;animation:sl-in .35s ease both}
#tr-slide[hidden]{display:none}
.tr-full #tr-slide{top:52px}
@keyframes sl-in{from{opacity:0}}
.sl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqmin;width:100%;max-height:100%;text-align:center}
.sl p{margin:0}
.sl-big{font-family:var(--serif);font-weight:500;font-size:clamp(26px,9cqmin,76px);line-height:1.14;color:var(--ink);text-wrap:balance}
.sl-lede{font-family:var(--serif);font-size:clamp(17px,5cqmin,40px);line-height:1.28;color:var(--ink);text-wrap:balance}
.sl-note{font-family:var(--sans);font-size:clamp(12px,2.6cqmin,19px);line-height:1.45;color:var(--muted)}
.sl-gold{color:#9A7812}
.sl-faint{color:var(--faint)}
/* (a student's own words, in a hand, as in the talks) */
.sl-voice{font-family:"Bradley Hand","Segoe Print","Chalkboard SE","Comic Sans MS",cursive;font-weight:400;font-size:clamp(32px,13cqmin,110px);line-height:1.2;color:#4A4850}
.sl svg{display:block;max-width:100%;height:auto;overflow:visible}
/* (the talks' ways in) */
.sl .a-rise{animation:sl-rise .65s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.sl .a-fade{animation:sl-fade .7s ease var(--d,0s) both}
.sl .a-pop{animation:sl-pop .55s cubic-bezier(.2,.9,.3,1.25) var(--d,0s) both}
.sl .a-drop{animation:sl-drop .45s cubic-bezier(.3,.8,.3,1.1) var(--d,0s) both}
.sl .a-draw{stroke-dasharray:1;animation:sl-draw var(--dur,.9s) ease-in-out var(--d,0s) both}
.sl .a-wipe{animation:sl-wipe 1.3s ease-out var(--d,0s) both}
.sl .a-pop,.sl .a-drop{transform-box:fill-box;transform-origin:50% 50%}
@keyframes sl-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes sl-fade{from{opacity:0}}
@keyframes sl-pop{from{opacity:0;transform:scale(.55)}}
@keyframes sl-drop{from{opacity:0;transform:translateY(-36px)}}
@keyframes sl-draw{from{stroke-dashoffset:1}}
@keyframes sl-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* (cards side by side, as the talks' thinkers; stacked where the room's place is narrow) */
.sl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6cqmin;width:min(100%,172cqmin)}
.sl-card{display:grid;align-content:start;gap:1.8cqmin;padding:4.2cqmin 3cqmin;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);
  text-align:center;transition:border-color .4s ease,box-shadow .4s ease,opacity .4s ease}
.sl-name{font-family:var(--sans);font-size:clamp(11px,2.8cqmin,18px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .4s ease}
.sl-q{font-family:var(--serif);font-size:clamp(16px,5cqmin,34px);line-height:1.25;color:var(--ink);text-wrap:balance;transition:opacity .45s ease,transform .45s ease}
@container (max-width:520px){
  .sl-cards{grid-template-columns:1fr;width:100%;gap:2cqmin}
  .sl-card{padding:2.6cqmin 4cqmin}
}
@media (prefers-reduced-motion:reduce){ #tr-slide,.sl .a-rise,.sl .a-fade,.sl .a-pop,.sl .a-drop,.sl .a-draw,.sl .a-wipe{animation:none!important} }

/* ── a door drawn as a card (trailer.js's doors, card): a post's Up next on its close, on a row of its own over the
   other doors, its drawing on the Philosophy card's panel and a small word over its title (up-next.js; Jae,
   2026-10-27: "every philosophy post... has a link to the next one... so they can keep watching if they want to";
   first of them: "let's actually put up next then see it for yourself then back to philosophy") ── */
/* (the doors as wide as the card, so the card fills a row of its own and the two doors go under it, side by side) */
.tr-go:has(> .tr-card){max-width:420px;margin-left:auto;margin-right:auto}
.tr-go .tr-btn.tr-card{display:flex;align-items:center;gap:14px;flex:0 0 100%;margin:0 0 4px;padding:8px 18px 8px 8px;
  border-radius:16px;border-color:var(--line);background:var(--surface);color:var(--ink);text-align:left;white-space:normal;font-size:16px}
.tr-go .tr-btn.tr-card:hover{border-color:var(--ink)}
.tr-card-art{flex:0 0 auto;width:96px;aspect-ratio:200/92;border-radius:10px;background:#F4F2EE;overflow:hidden}
.tr-card-art svg{display:block;width:100%;height:100%}
.tr-card-text{display:grid;gap:3px;min-width:0}
.tr-card-text small{font:700 10.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tr-card-text b{font:600 17px/1.25 var(--serif);color:var(--ink)}