/* Shared cinematic interlude for the twelve featured writings. */

/*
  Scene palette.

  Every colour the scene draws with resolves through one of these tokens, so the
  interlude re-themes as a unit instead of one hardcoded hex at a time. The tiers
  run faint to strong in both directions: ink darkens as the number rises, lines
  gain weight as the number rises. In light mode the ink and line ramps invert
  while the tier ordering stays the same, so a stroke that read as structural in
  dark still reads as structural in light.

  Declared on the root element, not on .em-story, because the per-page callout
  rules further down style elements that sit beside the scene rather than inside
  it. A token scoped to .em-story would not reach them.
*/
html[data-motion-scene]{
  --em-bg:#070b12;         /* the scene band itself */
  --em-panel:#0d141e;      /* raised fills: cards, screens, node shapes */
  --em-ink-hi:#fff;        /* the one step brighter than body ink */
  --em-ink:#f4f5f7;        /* headings, node labels, active steps */
  --em-ink-2:#d5dae1;      /* secondary label text inside diagrams */
  --em-ink-soft:#98a3b2;   /* body copy, kickers */
  --em-ink-dim:#7f8b9b;    /* captions, inactive steps, small caps */
  --em-ink-faint:#556171;  /* deliberately receded text */
  --em-hair:#25303e;       /* grid, step rules, orbits */
  --em-line:#344151;       /* room outlines, note rules */
  --em-line-2:#4b5869;     /* rain, roads, thought lines */
  --em-line-3:#59687a;     /* screens, clocks, plates */
  --em-line-4:#748195;     /* drawers, mirrors, roofs */
  --em-warm:#d6a24b;       /* the figure: people, doors, results */
  --em-helper:#7cb9c1;     /* the second figure, when someone helps */
  --em-accent:#66b8c4;     /* fallback only; every real scene overrides it below */
}

/*
  Light mode. Same scene, lit rather than inverted: a tinted paper band that sits
  a shade below the page so the interlude still reads as a separate surface, with
  white panels raised on top of it.

  These are not hand-picked. Each value was solved to land on the same contrast
  ratio against --em-bg that its dark counterpart has, holding hue and saturation
  constant, so a stroke keeps its weight in the drawing rather than washing out.
  Two deliberate departures: --em-ink stops at 15:1 because matching dark's 18:1
  would require pure black, and --em-warm targets 5:1 because the exact match is a
  brown dark enough to stop reading as gold.
*/
html[data-theme="light"][data-motion-scene]{
  --em-bg:#e8edf4;
  --em-panel:#fff;
  --em-ink-hi:#000;
  --em-ink:#0f1721;
  --em-ink-2:#1b2430;
  --em-ink-soft:#3d4a58;
  --em-ink-dim:#505d6e;
  --em-ink-faint:#788799;
  --em-hair:#b8c6d7;
  --em-line:#9eafc5;
  --em-line-2:#7e92a9;
  --em-line-3:#6b8098;
  --em-line-4:#576678;
  --em-warm:#865809;
  --em-helper:#1e7482;
}

/*
  No --em-accent here. Declaring it on .em-story shadowed the per-scene value the
  root sets, so every scene drew in the site accent and the twelve read as one
  colour inside the band while their page callouts below were correctly themed.
  The fallback lives with the other tokens at the top of this file instead.
*/
.em-story{--em-p:0;--em-gutter:0px;position:relative;width:100vw;height:460vh;margin:clamp(3rem,8vw,7rem) 0 clamp(3rem,8vw,7rem) calc(-1 * var(--em-gutter));color:var(--em-ink);background:var(--em-bg);isolation:isolate}
.em-pin{position:sticky;top:0;display:grid;grid-template-columns:minmax(17rem,.72fr) minmax(0,1.28fr);grid-template-rows:1fr auto;gap:clamp(1.5rem,5vw,5rem);align-items:center;height:100vh;min-height:42rem;padding:clamp(5rem,9vh,8rem) max(1.25rem,calc(50vw - 38rem)) 2.5rem;overflow:hidden}
.em-pin:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--em-x,20%) 50%,color-mix(in srgb,var(--em-accent) 16%,transparent),transparent 36%);pointer-events:none}
.em-copy,.em-canvas,.em-track{position:relative;z-index:1}.em-kicker{display:flex;align-items:center;gap:.65rem;color:var(--em-ink-soft);font:600 clamp(.94rem,1.2vw,1.08rem)/1.35 "Manrope",sans-serif;letter-spacing:-.018em;text-transform:none}.em-kicker:before{content:"";flex:0 0 auto;width:.42rem;height:.42rem;border-radius:50%;background:var(--em-accent);box-shadow:0 0 1.4rem color-mix(in srgb,var(--em-accent) 55%,transparent)}.em-copy h2{max-width:10ch;margin:.9rem 0 1.2rem;color:var(--em-ink);font:650 clamp(2.4rem,5.7vw,5.6rem)/.9 "Space Grotesk",sans-serif;letter-spacing:-.065em}.em-copy p{max-width:34rem;margin:0;color:var(--em-ink-soft);font:450 clamp(.95rem,1.5vw,1.1rem)/1.7 "Manrope",sans-serif}
/*
  One beat handing over to the next. Both the copy and the frames below are faded
  by the script from the scroll position itself, not by a transition or a keyframe,
  so the handover runs at the speed of the reader's scroll and reverses cleanly when
  they scrub back. Anything declared here that also animates opacity or transform on
  these elements will fight those inline values every frame.
*/
.em-copy{will-change:opacity,transform}

.em-canvas{width:100%;min-height:28rem}.em-canvas svg{display:block;width:100%;height:auto;overflow:visible}.em-grid line{stroke:var(--em-hair);stroke-width:1}.em-edge{fill:none;stroke:var(--em-accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}.em-node{transform-box:fill-box;transform-origin:center;opacity:.12;transform:scale(.72);will-change:opacity,transform}.em-node-shape{fill:var(--em-panel);stroke:var(--em-accent);stroke-width:2}.em-node text{fill:var(--em-ink);font:650 13px "Space Grotesk",sans-serif;text-anchor:middle}.em-node small{color:var(--em-ink-hi)}.em-orbit{fill:none;stroke:var(--em-hair);stroke-width:1;stroke-dasharray:4 8;transform-box:fill-box;transform-origin:center}.em-pulse{fill:var(--em-accent);opacity:.18;transform-box:fill-box;transform-origin:center}
.em-narrative-canvas{min-height:0}.em-narrative-canvas svg{overflow:visible}.em-story-frame{opacity:0;will-change:opacity}.em-story-frame.is-active{opacity:1}.em-story-frame path,.em-story-frame rect,.em-story-frame circle{vector-effect:non-scaling-stroke}.em-story-frame text{fill:var(--em-ink-soft);font:500 14px "Manrope",sans-serif;text-anchor:middle;opacity:var(--em-cap,1)}.em-room,.em-office{fill:none;stroke:var(--em-line);stroke-width:1.5}.em-rain{fill:none;stroke:var(--em-line-2);stroke-width:1;stroke-linecap:round}.em-head{fill:var(--em-panel);stroke:var(--em-warm);stroke-width:2}.em-person{fill:none;stroke:var(--em-warm);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.em-drawer{fill:var(--em-panel);stroke:var(--em-line-4);stroke-width:1.5}.em-drawer-stuck{fill:none;stroke:var(--em-warm);stroke-width:2}.em-load rect{fill:var(--em-panel);stroke:var(--em-line-3);stroke-width:1.5}.em-load text{fill:var(--em-ink-2);font:650 13px "Space Grotesk",sans-serif}.em-pull{fill:none;stroke:var(--em-line-3);stroke-width:1.4;stroke-dasharray:4 6}.em-screen{fill:var(--em-panel);stroke:var(--em-line-3);stroke-width:1.5}.em-screen-label{fill:var(--em-ink-dim)!important;font:650 11px "Space Grotesk",sans-serif!important;letter-spacing:.14em}.em-screen-value{fill:var(--em-warm)!important;font:650 34px "Space Grotesk",sans-serif!important}.em-clock{fill:none;stroke:var(--em-line-3);stroke-width:1.5;stroke-linecap:round}.em-page{fill:var(--em-panel);stroke:var(--em-line-3);stroke-width:1.5}.em-page-dot{fill:var(--em-line-2)}.em-page-label{fill:var(--em-ink)!important;font:600 18px "Space Grotesk",sans-serif!important;text-anchor:start!important;letter-spacing:.05em}.em-cursor{fill:var(--em-warm)}.em-door{fill:none;stroke:var(--em-warm);stroke-width:2}.em-knob{fill:var(--em-warm)}.em-story-choice.is-active .em-cursor{animation:em-blink .8s steps(1) infinite}@keyframes em-blink{50%{opacity:0}}
.em-story-frame[class*="em-deep-"].is-active .em-head{animation:em-deep-breathe 3.8s ease-in-out infinite}.em-story-frame[class*="em-deep-"].is-active .em-result-mark{animation:em-deep-glow 2.8s ease-in-out infinite}.em-story-frame[class*="em-deep-"].is-active .em-thought-line,.em-story-frame[class*="em-deep-"].is-active .em-pull{animation:em-deep-drift 4s ease-in-out infinite}@keyframes em-deep-breathe{50%{transform:translateY(-2px)}}@keyframes em-deep-glow{50%{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--em-accent) 45%,transparent))}}@keyframes em-deep-drift{50%{stroke-dashoffset:12}}
/*
  Body language, per beat.

  The copy on these scenes stays level on purpose, so the feeling has to arrive
  through the figures instead. Each one is wrapped in a <g class="em-fig"> in the
  JS, with the reaching arm split into its own path, so head, torso and arm can
  move independently. Figures transform about the view box rather than their own
  bounds, which is what lets an arm pivot at the shoulder instead of at the middle
  of its own stroke; every transform-origin below is that figure's shoulder or
  seat in user units.

  Two house rules for anything added here. Cancel the shared .em-head bob inside a
  grouped figure, as the rule below does: left on, it composes with the group's own
  breath and reads as a tremble in the skull. And prefer a one-shot animation with
  `both` over an infinite loop for anything that happens once in the story (a hand
  arriving, a body dropping), sequencing the resting loop after it with a delay.
  Frames re-run their animations every time the beat is scrolled back into view.
*/
html[data-motion-scene] .em-fig{transform-box:view-box}
html[data-motion-scene] .em-story-frame.is-active .em-fig .em-head{animation:none}
html[data-motion-scene="control"] .em-story-frame.is-active .em-fig-pace{animation:em-ctl-pace 7.2s cubic-bezier(.45,0,.55,1) infinite}
html[data-motion-scene="control"] .em-story-frame.is-active .em-fig-pace .em-head{animation:em-ctl-shallow 1.55s ease-in-out infinite}
html[data-motion-scene="control"] .em-story-frame.is-active .em-fig-stand{animation:em-ctl-catch 5.4s ease-in-out infinite}
html[data-motion-scene="control"] .em-story-frame.is-active .em-fig-stand .em-arm{transform-box:view-box;transform-origin:275px 210px;animation:em-ctl-tremor .36s ease-in-out infinite}
html[data-motion-scene="control"] .em-story-frame.is-active .em-fig-son{animation:em-ctl-close 1.9s cubic-bezier(.24,.68,.3,1) both,em-ctl-together 7.6s ease-in-out 1.9s infinite}
html[data-motion-scene="control"] .em-story-frame.is-active .em-fig-father{animation:em-ctl-together 7.6s ease-in-out 1.9s infinite}
@keyframes em-ctl-pace{0%{transform:translateX(0)}29%{transform:translateX(232px)}37%{transform:translateX(232px)}41%{transform:translateX(222px)}45%{transform:translateX(232px)}74%{transform:translateX(6px)}83%{transform:translateX(0)}88%{transform:translateX(11px)}100%{transform:translateX(0)}}
@keyframes em-ctl-shallow{0%,100%{transform:translateY(0)}45%{transform:translateY(-1.7px)}}
@keyframes em-ctl-catch{0%{transform:translate(0,0)}21%{transform:translate(0,-2.8px)}29%{transform:translate(.5px,-2.1px)}39%{transform:translate(0,-3.2px)}72%{transform:translate(0,.5px)}100%{transform:translate(0,0)}}
@keyframes em-ctl-tremor{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes em-ctl-close{from{transform:translateX(-18px)}to{transform:translateX(0)}}
@keyframes em-ctl-together{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.6px)}}

/* Dashes marching along a line that is pulling on someone. Shared by repair and consent. */
@keyframes em-pull-draw{to{stroke-dashoffset:-10}}

/*
  The three method scenes draw a diagram rather than a person, so there is no body
  to carry a beat and adding one would change what the scene depicts. Their centre
  keeps time instead. Both elements were already named for motion they never had,
  and both already carry the transform-origin it needs. Only the non-narrative
  scenes build an orbit or a pulse, so these selectors reach nothing else.
*/
html[data-motion-scene] .em-orbit{animation:em-orbit-turn 38s linear infinite}
html[data-motion-scene] .em-pulse{animation:em-pulse-breathe 5.6s ease-in-out infinite}
@keyframes em-orbit-turn{to{transform:rotate(360deg)}}
@keyframes em-pulse-breathe{0%,100%{transform:scale(1);opacity:.14}50%{transform:scale(1.085);opacity:.24}}

/* /story/ — the boy works at the drawer, is yanked from four sides, then runs out. */
html[data-motion-scene="repair"] .em-story-night.is-active .em-rain{stroke-dasharray:13 31;animation:em-rp-rain 1.15s linear infinite}
html[data-motion-scene="repair"] .em-story-night.is-active .em-fig-boy{animation:em-rp-lean 2.3s cubic-bezier(.35,0,.4,1) infinite}
html[data-motion-scene="repair"] .em-story-night.is-active .em-fig-boy .em-arm{transform-origin:405px 220px;animation:em-rp-tug 2.3s cubic-bezier(.35,0,.4,1) infinite}
html[data-motion-scene="repair"] .em-story-night.is-active :is(.em-drawer,.em-drawer-stuck){animation:em-rp-give 2.3s cubic-bezier(.35,0,.4,1) infinite}
html[data-motion-scene="repair"] .em-story-needed.is-active .em-fig-pulled{animation:em-rp-yank 5.6s ease-in-out infinite}
html[data-motion-scene="repair"] .em-story-needed.is-active .em-arm-l{transform-origin:375px 184px;animation:em-rp-yank-l 5.6s ease-in-out infinite}
html[data-motion-scene="repair"] .em-story-needed.is-active .em-arm-r{transform-origin:375px 184px;animation:em-rp-yank-r 5.6s ease-in-out infinite}
html[data-motion-scene="repair"] .em-story-needed.is-active .em-pull{animation:em-pull-draw 1.9s linear infinite}
html[data-motion-scene="repair"] .em-story-trapped.is-active .em-fig-spent{animation:em-rp-sag 8.2s ease-in-out infinite}
@keyframes em-rp-rain{to{stroke-dashoffset:-44}}
@keyframes em-rp-lean{0%{transform:translateX(0)}30%{transform:translateX(-3.2px)}52%{transform:translateX(-1px)}100%{transform:translateX(0)}}
@keyframes em-rp-tug{0%{transform:rotate(0)}30%{transform:rotate(7deg)}52%{transform:rotate(1.5deg)}100%{transform:rotate(0)}}
@keyframes em-rp-give{0%{transform:translateX(0)}30%{transform:translateX(-2.6px)}52%{transform:translateX(-.6px)}100%{transform:translateX(0)}}
@keyframes em-rp-yank{0%{transform:translate(0,0)}12%{transform:translate(-5px,-2px)}30%{transform:translate(5px,-2.4px)}55%{transform:translate(-4px,2px)}78%{transform:translate(4.5px,1.6px)}100%{transform:translate(0,0)}}
@keyframes em-rp-yank-l{0%{transform:rotate(0)}12%{transform:rotate(-6.5deg)}30%{transform:rotate(2deg)}55%{transform:rotate(-4.5deg)}78%{transform:rotate(1.5deg)}100%{transform:rotate(0)}}
@keyframes em-rp-yank-r{0%{transform:rotate(0)}12%{transform:rotate(-1.5deg)}30%{transform:rotate(6.5deg)}55%{transform:rotate(-2deg)}78%{transform:rotate(4.5deg)}100%{transform:rotate(0)}}
@keyframes em-rp-sag{0%{transform:translateY(0)}45%{transform:translateY(2.7px)}100%{transform:translateY(0)}}

/* /high-agency/ — the hand goes to the laptop and comes back, until the night it does not. */
html[data-motion-scene="agency"] .em-deep-agency-0.is-active .em-fig-hesitate{animation:em-ag-lean 4.6s ease-in-out infinite}
html[data-motion-scene="agency"] .em-deep-agency-0.is-active .em-fig-hesitate .em-arm{transform-origin:92px 269px;animation:em-ag-reach 4.6s ease-in-out infinite}
html[data-motion-scene="agency"] .em-deep-agency-1.is-active .em-arrow{transform-box:view-box;animation:em-ag-send 4.8s cubic-bezier(.3,0,.2,1) infinite}
@keyframes em-ag-lean{0%{transform:translateX(0)}22%{transform:translateX(3px)}44%{transform:translateX(2.6px)}62%,100%{transform:translateX(0)}}
@keyframes em-ag-reach{0%{transform:rotate(0)}22%{transform:rotate(-19deg)}44%{transform:rotate(-17deg)}62%,100%{transform:rotate(0)}}
@keyframes em-ag-send{0%{transform:translate(0,0);opacity:1}8%{transform:translate(-2.2px,1.2px)}16%{transform:translate(2.2px,-1.2px)}24%{transform:translate(-2px,1px)}32%{transform:translate(2px,-1px)}40%{transform:translate(0,0);opacity:1}58%{transform:translate(56px,-30px);opacity:0}59%,84%{transform:translate(0,0);opacity:0}100%{transform:translate(0,0);opacity:1}}

/* /principles/ — the room goes quiet and he holds his breath through it. */
html[data-motion-scene="decision"] .em-deep-decision-0.is-active .em-fig-held{animation:em-dc-hold 6.4s cubic-bezier(.4,0,.5,1) infinite}
@keyframes em-dc-hold{0%{transform:translateY(0)}14%{transform:translateY(-3.4px)}62%{transform:translateY(-3.2px)}76%{transform:translateY(.7px)}100%{transform:translateY(0)}}

/* /success-failure/ — the stomach drops, then the thoughts arrive one at a time. */
html[data-motion-scene="feedback"] .em-feedback-result.is-active .em-fig-drop{animation:em-fb-drop .58s cubic-bezier(.5,0,.9,.6) both,em-fb-winded 2.6s ease-in-out .58s infinite}
html[data-motion-scene="feedback"] .em-feedback-feeling.is-active .em-fig-curl{transform-origin:375px 252px;animation:em-fb-curl 5.6s ease-in-out infinite}
html[data-motion-scene="feedback"] .em-feedback-feeling.is-active .em-thought-line{animation:em-fb-spread 1.7s linear infinite}
html[data-motion-scene="feedback"] .em-feedback-feeling.is-active .em-thoughts text{animation:em-fb-intrude 4.4s ease-in-out infinite}
html[data-motion-scene="feedback"] .em-feedback-feeling.is-active .em-thoughts text:nth-child(2){animation-delay:.55s}
html[data-motion-scene="feedback"] .em-feedback-feeling.is-active .em-thoughts text:nth-child(3){animation-delay:1.1s}
html[data-motion-scene="feedback"] .em-feedback-feeling.is-active .em-thoughts text:nth-child(4){animation-delay:1.65s}
@keyframes em-fb-drop{from{transform:translateY(-10px)}to{transform:translateY(0)}}
@keyframes em-fb-winded{0%,100%{transform:translateY(0)}40%{transform:translateY(-1.4px)}}
@keyframes em-fb-curl{0%,100%{transform:scale(1)}50%{transform:scale(.955)}}
@keyframes em-fb-spread{to{stroke-dashoffset:-9}}
@keyframes em-fb-intrude{0%,100%{opacity:.34}22%{opacity:1}}

/* /uncertainty-and-emotions/ — the checking hand, the tabs, the doubt that follows her in. */
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-0.is-active .em-fig-check{animation:em-uc-shallow 1.8s ease-in-out infinite}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-0.is-active .em-fig-check .em-arm{transform-origin:152px 266px;animation:em-uc-reach 2.7s ease-in-out infinite}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-0.is-active .em-message-line{animation:em-uc-same 2.7s steps(1) infinite}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-1.is-active .em-fig-swamped{animation:em-uc-shallow 1.35s ease-in-out infinite}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-1.is-active .em-requests rect{animation:em-uc-tab 3.6s ease-in-out infinite}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-1.is-active .em-requests rect:nth-child(2){animation-delay:.3s}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-1.is-active .em-requests rect:nth-child(3){animation-delay:.6s}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-1.is-active .em-requests rect:nth-child(4){animation-delay:.9s}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-1.is-active .em-requests rect:nth-child(5){animation-delay:1.2s}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-1.is-active .em-requests rect:nth-child(6){animation-delay:1.5s}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-2.is-active .em-fig-restless{animation:em-uc-turn 7.4s ease-in-out infinite}
html[data-motion-scene="uncertainty"] .em-deep-uncertainty-2.is-active .em-thought-line{animation:em-uc-follow 2.4s linear infinite}
@keyframes em-uc-shallow{0%,100%{transform:translateY(0)}45%{transform:translateY(-1.6px)}}
@keyframes em-uc-reach{0%{transform:rotate(0)}14%{transform:rotate(-5.5deg)}26%{transform:rotate(-1deg)}38%{transform:rotate(-5deg)}54%,100%{transform:rotate(0)}}
@keyframes em-uc-same{0%,12%{opacity:1}14%{opacity:.14}18%{opacity:1}38%{opacity:1}40%{opacity:.14}44%,100%{opacity:1}}
@keyframes em-uc-tab{0%,100%{opacity:.3}18%{opacity:1}55%{opacity:.62}}
@keyframes em-uc-turn{0%{transform:translateX(0)}26%{transform:translateX(-4.5px)}58%{transform:translateX(3.5px)}100%{transform:translateX(0)}}
@keyframes em-uc-follow{to{stroke-dashoffset:-9}}

/* /self-love/ — carrying it, seeing it in the mirror, standing back up. */
html[data-motion-scene="consent"] .em-consent-carry.is-active .em-fig-laden{animation:em-cs-sag 7.8s ease-in-out infinite}
html[data-motion-scene="consent"] .em-consent-carry.is-active .em-arm-l{transform-origin:375px 176px;animation:em-cs-droop-l 7.8s ease-in-out infinite}
html[data-motion-scene="consent"] .em-consent-carry.is-active .em-arm-r{transform-origin:375px 176px;animation:em-cs-droop-r 7.8s ease-in-out infinite}
html[data-motion-scene="consent"] .em-consent-carry.is-active .em-pull{animation:em-pull-draw 2.4s linear infinite}
html[data-motion-scene="consent"] .em-consent-ask.is-active .em-fig-mirror{animation:em-cs-still 8.6s ease-in-out infinite}
html[data-motion-scene="consent"] .em-consent-ask.is-active .em-mirror{transform-box:view-box;transform-origin:375px 173px;animation:em-cs-recognise 8.6s ease-in-out infinite}
html[data-motion-scene="consent"] .em-consent-return.is-active .em-fig-upright{animation:em-cs-rise 1.7s cubic-bezier(.2,.7,.3,1) both,em-cs-still 8.6s ease-in-out 1.7s infinite}
html[data-motion-scene="consent"] .em-consent-return.is-active .em-care circle{animation:em-cs-cared 4.6s ease-in-out infinite}
html[data-motion-scene="consent"] .em-consent-return.is-active .em-care circle:nth-child(2){animation-delay:.5s}
html[data-motion-scene="consent"] .em-consent-return.is-active .em-care circle:nth-child(3){animation-delay:1s}
html[data-motion-scene="consent"] .em-consent-return.is-active .em-boundary{animation:em-cs-line 3.4s linear infinite}
@keyframes em-cs-sag{0%{transform:translateY(0)}62%{transform:translateY(3.4px)}100%{transform:translateY(0)}}
@keyframes em-cs-droop-l{0%,100%{transform:rotate(0)}62%{transform:rotate(4.5deg)}}
@keyframes em-cs-droop-r{0%,100%{transform:rotate(0)}62%{transform:rotate(-4.5deg)}}
@keyframes em-cs-still{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
@keyframes em-cs-recognise{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}}
@keyframes em-cs-rise{from{transform:translateY(6px)}to{transform:translateY(0)}}
@keyframes em-cs-cared{0%,100%{opacity:.55}45%{opacity:1}}
@keyframes em-cs-line{to{stroke-dashoffset:-12}}

/* /life-challenges/ — rocking through it, the body softening, the ground built back. */
html[data-motion-scene="conversion"] .em-life-hurt.is-active .em-fig-rock{transform-origin:375px 262px;animation:em-cv-rock 3.4s ease-in-out infinite}
html[data-motion-scene="conversion"] .em-life-shelter.is-active .em-fig-soften{animation:em-cv-soften 1.6s cubic-bezier(.3,.7,.3,1) both,em-cv-breathe 7.4s ease-in-out 1.6s infinite}
html[data-motion-scene="conversion"] .em-life-shelter.is-active .em-fig-nearby{animation:em-cv-breathe 7.4s ease-in-out 1.6s infinite}
html[data-motion-scene="conversion"] .em-life-shelter.is-active .em-fig-nearby .em-arm{transform-origin:445px 225px;animation:em-cv-rest 1.6s cubic-bezier(.3,.7,.3,1) both}
html[data-motion-scene="conversion"] .em-life-build.is-active :is(.em-fig-builder,.em-fig-crosser){animation:em-cv-breathe 7.4s ease-in-out 1.5s infinite}
html[data-motion-scene="conversion"] .em-life-build.is-active .em-plank{animation:em-cv-plank 1.5s cubic-bezier(.2,.75,.3,1) both}
html[data-motion-scene="conversion"] .em-life-build.is-active .em-plank:nth-child(2){animation-delay:.17s}
html[data-motion-scene="conversion"] .em-life-build.is-active .em-plank:nth-child(3){animation-delay:.34s}
html[data-motion-scene="conversion"] .em-life-build.is-active .em-plank:nth-child(4){animation-delay:.51s}
@keyframes em-cv-rock{0%,100%{transform:rotate(-1.7deg)}50%{transform:rotate(1.7deg)}}
@keyframes em-cv-soften{from{transform:translateY(-5px)}to{transform:translateY(0)}}
@keyframes em-cv-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
@keyframes em-cv-rest{from{transform:rotate(-7deg)}to{transform:rotate(0)}}
@keyframes em-cv-plank{from{transform:translateY(9px);opacity:0}to{transform:translateY(0);opacity:1}}
/* /small-talk/ — hanging back, opening anyway, leaning in, leaving early. */
html[data-motion-scene="rapport"] .em-deep-rapport-0.is-active .em-fig-edge{animation:em-rp2-hover 6.2s ease-in-out infinite}
html[data-motion-scene="rapport"] .em-deep-rapport-0.is-active .em-fig-edge .em-arm{transform-origin:150px 236px;animation:em-rp2-fidget 2.4s ease-in-out infinite}
html[data-motion-scene="rapport"] .em-deep-rapport-0.is-active .em-clusters circle{animation:em-rp2-chatter 3.6s ease-in-out infinite}
html[data-motion-scene="rapport"] .em-deep-rapport-0.is-active .em-clusters circle:nth-child(2n){animation-delay:.5s}
html[data-motion-scene="rapport"] .em-deep-rapport-0.is-active .em-clusters circle:nth-child(3n){animation-delay:1s}
html[data-motion-scene="rapport"] .em-deep-rapport-1.is-active .em-fig-say{animation:em-rp2-step 1.5s cubic-bezier(.22,.7,.3,1) both,em-rp2-breathe 6.4s ease-in-out 1.5s infinite}
html[data-motion-scene="rapport"] .em-deep-rapport-1.is-active .em-fig-hear{animation:em-rp2-breathe 6.4s ease-in-out 1.5s infinite}
html[data-motion-scene="rapport"] .em-deep-rapport-1.is-active .em-message{transform-box:view-box;transform-origin:375px 98px;animation:em-rp2-said 1.3s cubic-bezier(.2,.75,.3,1) both}
html[data-motion-scene="rapport"] .em-deep-rapport-2.is-active .em-fig-lean{animation:em-rp2-lean-l 1.7s cubic-bezier(.24,.68,.3,1) both,em-rp2-breathe 7s ease-in-out 1.7s infinite}
html[data-motion-scene="rapport"] .em-deep-rapport-2.is-active .em-fig-lean2{animation:em-rp2-lean-r 1.7s cubic-bezier(.24,.68,.3,1) both,em-rp2-breathe 7s ease-in-out 1.7s infinite}
html[data-motion-scene="rapport"] .em-deep-rapport-2.is-active .em-shared{transform-box:view-box;transform-origin:376px 238px;animation:em-rp2-spark 3.2s ease-in-out infinite}
html[data-motion-scene="rapport"] .em-deep-rapport-3.is-active .em-fig-away{animation:em-rp2-leave 2.2s cubic-bezier(.3,.6,.35,1) both}
html[data-motion-scene="rapport"] .em-deep-rapport-3.is-active .em-fig-kept{animation:em-rp2-breathe 7s ease-in-out infinite}
html[data-motion-scene="rapport"] .em-deep-rapport-3.is-active .em-keep{animation:em-rp2-thread 3s linear infinite}
@keyframes em-rp2-hover{0%,100%{transform:translateX(0)}30%{transform:translateX(9px)}46%{transform:translateX(4px)}70%{transform:translateX(-3px)}}
@keyframes em-rp2-fidget{0%,100%{transform:rotate(0)}35%{transform:rotate(6deg)}62%{transform:rotate(-2deg)}}
@keyframes em-rp2-chatter{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes em-rp2-step{from{transform:translateX(-26px)}to{transform:translateX(0)}}
@keyframes em-rp2-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes em-rp2-said{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes em-rp2-lean-l{from{transform:translateX(-16px)}to{transform:translateX(0)}}
@keyframes em-rp2-lean-r{from{transform:translateX(16px)}to{transform:translateX(0)}}
@keyframes em-rp2-spark{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.22);opacity:1}}
@keyframes em-rp2-leave{from{transform:translateX(-40px)}to{transform:translateX(0)}}
@keyframes em-rp2-thread{to{stroke-dashoffset:-12}}

.em-message,.em-note{fill:var(--em-panel);stroke:var(--em-line-3);stroke-width:1.5}.em-message-small,.em-note-title{fill:var(--em-ink-dim)!important;font:650 11px "Space Grotesk",sans-serif!important;text-anchor:start!important;letter-spacing:.14em}.em-message-line,.em-note-rule{fill:none;stroke:var(--em-line);stroke-width:1.5}.em-result-mark{fill:color-mix(in srgb,var(--em-accent) 15%,var(--em-panel));stroke:var(--em-accent);stroke-width:1.5}.em-result-word{fill:var(--em-ink)!important;font:650 11px "Space Grotesk",sans-serif!important;letter-spacing:.08em}.em-thoughts text{fill:var(--em-ink-2);font:550 16px "Manrope",sans-serif}.em-thought-line{fill:none;stroke:var(--em-line-2);stroke-width:1.25;stroke-dasharray:3 6}.em-note-key{fill:var(--em-ink-2)!important;font:550 15px "Manrope",sans-serif!important;text-anchor:start!important}.em-note-value{fill:var(--em-accent)!important;font:650 13px "Space Grotesk",sans-serif!important;text-anchor:end!important;text-transform:uppercase}.em-road{fill:none;stroke:var(--em-line-2);stroke-width:2}.em-attempt-old{fill:var(--em-panel);stroke:var(--em-line-4);stroke-width:1.5}.em-attempt-next{fill:var(--em-panel);stroke:var(--em-accent);stroke-width:2}.em-attempt-label{fill:var(--em-ink-dim)!important;font-size:12px!important}.em-arrow{fill:none;stroke:var(--em-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.em-carry rect{fill:var(--em-panel);stroke:var(--em-accent);stroke-width:1.5}.em-carry text{fill:var(--em-ink-dim);font:650 10px "Space Grotesk",sans-serif;letter-spacing:.12em}.em-carry .em-carry-word{fill:var(--em-ink);font-size:13px;letter-spacing:0}
html[data-motion-scene="feedback"] .em-head,html[data-motion-scene="feedback"] .em-person{stroke:var(--em-accent)}
.em-requests rect{fill:var(--em-panel);stroke:var(--em-line-3);stroke-width:1.4}.em-requests text{fill:var(--em-ink-2);font:550 13px "Manrope",sans-serif}.em-calendar{fill:none;stroke:var(--em-line-3);stroke-width:1.5}.em-days rect{fill:var(--em-panel);stroke:var(--em-line);stroke-width:1}.em-calendar-word{fill:var(--em-ink-2)!important;font:550 13px "Manrope",sans-serif!important}.em-calendar-word.em-faded{fill:var(--em-ink-faint)!important}.em-mirror{fill:var(--em-panel);stroke:var(--em-line-4);stroke-width:1.5}.em-mirror-question{fill:var(--em-ink)!important;font:550 18px Georgia,serif!important}.em-boundary{fill:none;stroke:var(--em-accent);stroke-width:2;stroke-dasharray:5 7}.em-care circle{fill:var(--em-panel);stroke:var(--em-line-3);stroke-width:1.5}.em-open-gate{fill:none;stroke:var(--em-accent);stroke-width:2}.em-boundary-word{fill:var(--em-accent)!important;font:650 11px "Space Grotesk",sans-serif!important;letter-spacing:.12em}.em-consent-disappear.is-active .em-faded{animation:em-fade-self 1.5s ease-in-out infinite alternate}@keyframes em-fade-self{to{opacity:.18}}
.em-clusters circle{fill:none;stroke:var(--em-line-3);stroke-width:1.5}.em-shared{fill:color-mix(in srgb,var(--em-accent) 30%,transparent);stroke:var(--em-accent);stroke-width:2}.em-keep{fill:none;stroke:var(--em-accent);stroke-width:2;stroke-dasharray:5 7}
.em-storm{fill:none;stroke:var(--em-line-2);stroke-width:1.4;stroke-linecap:round}.em-ground{fill:none;stroke:var(--em-line-2);stroke-width:1.5}.em-roof{fill:none;stroke:var(--em-line-4);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.em-helper{stroke:var(--em-helper)!important}.em-cup{fill:var(--em-panel);stroke:var(--em-warm);stroke-width:1.5}.em-broken{fill:none;stroke:var(--em-warm);stroke-width:2;stroke-linejoin:round}.em-tags rect{fill:var(--em-panel);stroke:var(--em-line-3);stroke-width:1.2}.em-tags text{fill:var(--em-ink-2);font:550 12px "Manrope",sans-serif}.em-ravine{fill:none;stroke:var(--em-line-2);stroke-width:2}.em-bridge rect{fill:var(--em-panel);stroke:var(--em-warm);stroke-width:1.5}.em-bridge-word{fill:var(--em-ink)!important;font:650 10px "Space Grotesk",sans-serif!important}.em-life-hurt.is-active .em-storm{animation:em-rain-shift 1.2s linear infinite}@keyframes em-rain-shift{to{transform:translate(-18px,20px)}}
html[data-motion-scene="consent"] .em-head,html[data-motion-scene="consent"] .em-person{stroke:var(--em-accent)}html[data-motion-scene="conversion"] .em-head,html[data-motion-scene="conversion"] .em-person{stroke:var(--em-accent)}
/*
  Position, not contents. This replaced a four-up rail that printed every beat's
  label the moment the scene pinned, so the reader knew the shape of the story
  before the story got there. Width tracks --em-p, which the script already sets
  from the eased scroll position, so the fill scrubs as smoothly as the scene does.
*/
.em-track{grid-column:1/-1;position:relative;height:1px;background:var(--em-hair)}
.em-track i{position:absolute;left:0;top:0;height:1px;width:calc(var(--em-p,0) * 100%);background:var(--em-accent);box-shadow:0 0 .6rem color-mix(in srgb,var(--em-accent) 55%,transparent)}.em-skip{position:absolute;right:max(1.25rem,calc(50vw - 38rem));top:1.4rem;z-index:3;border:0;background:none;color:var(--em-ink-dim);font:600 .66rem "Space Grotesk",sans-serif;cursor:pointer}.em-skip:hover{color:var(--em-ink-hi)}
/*
  Per-scene accent. Hoisted from .em-story to the root element so it also reaches
  the page callouts below, which sit beside the scene rather than inside it.
  Light values are darkened rather than re-hued: same colour identity per scene,
  enough contrast to stay legible as text and as a hairline on a light surface.
*/
html[data-motion-scene="repair"]{--em-accent:#d6a24b}html[data-motion-scene="abstain"]{--em-accent:#69b9c4}html[data-motion-scene="agency"]{--em-accent:#e5a957}html[data-motion-scene="decision"]{--em-accent:#8ab1c8}html[data-motion-scene="control"]{--em-accent:#c9a96b}html[data-motion-scene="strategy"]{--em-accent:#8fc5ae}html[data-motion-scene="feedback"]{--em-accent:#df806c}html[data-motion-scene="uncertainty"]{--em-accent:#a99bd7}html[data-motion-scene="signal"]{--em-accent:#64bec8}html[data-motion-scene="consent"]{--em-accent:#db9bb5}html[data-motion-scene="conversion"]{--em-accent:#d8a147}html[data-motion-scene="rapport"]{--em-accent:#a8bd7f}
html[data-theme="light"][data-motion-scene="repair"]{--em-accent:#8e6111}html[data-theme="light"][data-motion-scene="abstain"]{--em-accent:#12707e}html[data-theme="light"][data-motion-scene="agency"]{--em-accent:#8e610f}html[data-theme="light"][data-motion-scene="decision"]{--em-accent:#356585}html[data-theme="light"][data-motion-scene="control"]{--em-accent:#7d6224}html[data-theme="light"][data-motion-scene="strategy"]{--em-accent:#237257}html[data-theme="light"][data-motion-scene="feedback"]{--em-accent:#a8422c}html[data-theme="light"][data-motion-scene="uncertainty"]{--em-accent:#564699}html[data-theme="light"][data-motion-scene="signal"]{--em-accent:#106f7c}html[data-theme="light"][data-motion-scene="consent"]{--em-accent:#9a4665}html[data-theme="light"][data-motion-scene="conversion"]{--em-accent:#8e610e}html[data-theme="light"][data-motion-scene="rapport"]{--em-accent:#4f6b1f}
@media(max-width:1100px){.em-story{height:420vh}.em-pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:.8rem;height:100svh;min-height:0;padding:4.75rem clamp(1.25rem,5vw,3rem) 1rem}.em-copy h2{max-width:15ch;margin:.55rem 0 .7rem;font-size:clamp(2rem,5.8vw,3.5rem);line-height:.94}.em-copy p{max-width:42rem;font-size:.9rem;line-height:1.5}.em-canvas{display:grid;place-items:center;min-height:0}.em-canvas svg{width:min(100%,48rem);max-height:38vh}.em-skip{top:1rem}}
@media(max-width:560px){.em-story{height:340vh}.em-pin{padding-inline:1.25rem}.em-copy h2{max-width:12ch;font-size:clamp(2rem,10vw,3.25rem)}.em-copy p{font-size:.86rem}.em-canvas svg{max-height:38vh}}
@media(max-width:560px){.em-skip{top:.9rem;right:1.25rem;font-size:.6rem}}
@media(orientation:landscape) and (max-height:600px) and (min-width:600px){.em-story{height:400vh}.em-pin{grid-template-columns:minmax(16rem,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:clamp(1.25rem,4vw,3rem);row-gap:.35rem;align-items:center;padding:4.25rem clamp(2rem,5vw,4rem) .65rem}.em-copy{align-self:center;min-width:0}.em-kicker{font-size:.76rem}.em-copy h2{max-width:13ch;margin:.4rem 0 .55rem;font-size:clamp(1.8rem,4.4vw,2.65rem);line-height:.92;letter-spacing:-.05em}.em-copy p{max-width:38rem;font-size:.76rem;line-height:1.35}.em-canvas{min-height:0}.em-canvas svg{width:100%;max-height:45vh}.em-skip{font-size:.6rem}}
@media(max-height:620px) and (min-width:1101px){.em-pin{min-height:0;padding-top:3.5rem}.em-copy h2{font-size:clamp(2rem,4.6vw,4rem)}.em-canvas{min-height:0}.em-canvas svg{max-height:55vh}}
/*
  Every animation inside a frame is an unattended loop, so all of them go, not only
  the figures added above. That includes the blinking cursor, the drifting rain and
  the fading calendar entry, which predate the figure work and were never covered.
*/
@media(prefers-reduced-motion:reduce){html[data-motion-scene] .em-story-frame,html[data-motion-scene] .em-story-frame *{animation:none!important}}
@media(prefers-reduced-motion:reduce){.em-track{display:none}.em-story{height:auto}.em-pin{position:relative;height:auto;min-height:0}.em-story{--em-p:1!important}.em-skip{display:none}}

/* Shared editorial eyebrow across the twelve featured writings. */
html[data-motion-scene] .page-content :is(.ms-kicker,.ms-act-head>span,.ce-kicker,.ha-story-kicker,.ha-coda-kicker,.st-kicker,.gt-kicker,.sf-kicker,.ue-kicker,.cm-kicker,.cm-manual-head>span,.sl-kicker,.sl-section-head>span,.lc-kicker,.lc-section-head>span){display:flex!important;align-items:center;gap:.65rem;color:var(--em-ink-soft)!important;font:600 clamp(.94rem,1.2vw,1.08rem)/1.35 "Manrope",sans-serif!important;letter-spacing:-.018em!important;text-transform:none!important}
html[data-motion-scene] .page-content :is(.ms-kicker,.ms-act-head>span,.ce-kicker,.ha-story-kicker,.ha-coda-kicker,.st-kicker,.gt-kicker,.sf-kicker,.ue-kicker,.cm-kicker,.cm-manual-head>span,.sl-kicker,.sl-section-head>span,.lc-kicker,.lc-section-head>span):before{content:"";flex:0 0 auto;width:.42rem;height:.42rem;border-radius:50%;background:var(--em-accent);box-shadow:0 0 1.4rem color-mix(in srgb,var(--em-accent) 50%,transparent)}

/* Page-specific callouts. No repeated left-stripe template. */
html[data-motion-scene] .page-content :is(blockquote,.ce-force,.ce-split button,.ha-quote,.ha-trapcard,.ha-trap,.sounds,.ha-mafia-read,.ha-lib-read,.ha-ws-step,.pr-card,.st-quote,.st-card,.st-day-read,.st-verdict-read,.gt-eq,.gt-domain,.gt-law,.gt-loop,.sf-explore-read,.sf-rule,.sf-domain-body .sig,.sf-review-read,.sf-explore-item,.ue-note,.ue-loop-read,.ue-direct-read,.ue-primer,.ue-primer-note,.ue-oern-read,.ue-band-read,.ue-warning,.ue-budget-read,.ue-rung,.ue-plan-out,.ue-compassion,.cm-objective-out,.cm-support-out,.cm-script-row article,.cm-doors p,.cm-tradeoffs article,.cm-resets article,.cf-verdict,.sl-control-outcomes div,.sl-strength-result,.sl-compass-answer,.lc-hero-rule,.lc-quote){box-sizing:border-box;border-left:0!important}

/* Story: a quotation belongs to the voice, not a decorated box. */
html[data-motion-scene="repair"] .page-content blockquote{position:relative;padding:1.25rem 0 1.25rem clamp(2.6rem,5vw,4.5rem)!important;border:0!important;background:transparent!important;font-family:Georgia,serif}
html[data-motion-scene="repair"] .page-content blockquote:before{content:"“";position:absolute;left:0;top:.55rem;color:var(--em-accent);font:400 clamp(3.5rem,7vw,6rem)/1 Georgia,serif;opacity:.72}

/* Knowing: evidence cards use a horizon line and a clear choice state. */
html[data-motion-scene="abstain"] .page-content :is(.ce-force,.ce-split button){position:relative;border:1px solid color-mix(in srgb,var(--em-accent) 28%,transparent)!important;border-radius:1rem!important;background:linear-gradient(180deg,color-mix(in srgb,var(--em-accent) 8%,transparent),transparent 45%)!important;overflow:hidden}
html[data-motion-scene="abstain"] .page-content :is(.ce-force,.ce-split button):before{content:"";position:absolute;inset:0 18% auto;height:2px;background:var(--em-accent);opacity:.7}

/* High agency: open quotes, notches, and quiet instrument readouts. */
html[data-motion-scene="agency"] .page-content .ha-quote{position:relative;padding:1.4rem 0 1.4rem 3.25rem!important;border:0!important;background:transparent!important}
html[data-motion-scene="agency"] .page-content .ha-quote:before{content:"“";position:absolute;left:0;top:.65rem;color:var(--em-accent);font:400 4rem/1 Georgia,serif}
html[data-motion-scene="agency"] .page-content :is(.ha-trapcard,.ha-trap){position:relative;border:1px solid color-mix(in srgb,currentColor 16%,transparent)!important;border-radius:.85rem!important;overflow:hidden}
html[data-motion-scene="agency"] .page-content :is(.ha-trapcard,.ha-trap):after{content:"";position:absolute;right:.8rem;top:.8rem;width:.55rem;height:.55rem;border-top:2px solid var(--em-accent);border-right:2px solid var(--em-accent)}
html[data-motion-scene="agency"] .page-content :is(.sounds,.ha-mafia-read,.ha-lib-read,.ha-ws-step){border:0!important;border-radius:999px!important;background:color-mix(in srgb,var(--em-accent) 9%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--em-accent) 22%,transparent)}

/* Principles: one calm card edge, marked at the corner. */
html[data-motion-scene="decision"] .page-content .pr-card{position:relative;border:1px solid color-mix(in srgb,var(--em-accent) 24%,transparent)!important;border-radius:.35rem!important}
html[data-motion-scene="decision"] .page-content .pr-card:after{content:"";position:absolute;right:0;top:0;width:1.15rem;height:1.15rem;background:linear-gradient(225deg,var(--em-accent) 0 48%,transparent 50%);opacity:.55}

/* Stoic: marginal marks and unboxed quotations. */
html[data-motion-scene="control"] .page-content .st-quote{position:relative;padding:1.3rem 0 1.3rem 3.4rem!important;border:0!important;background:transparent!important;font-family:Georgia,serif}
html[data-motion-scene="control"] .page-content .st-quote:before{content:"§";position:absolute;left:.2rem;top:1.25rem;color:var(--em-accent);font:400 1.45rem Georgia,serif}
html[data-motion-scene="control"] .page-content .st-card{position:relative;border:1px solid color-mix(in srgb,currentColor 15%,transparent)!important;border-radius:.6rem!important;box-shadow:inset 0 3px 0 color-mix(in srgb,var(--em-accent) 65%,transparent)}
html[data-motion-scene="control"] .page-content :is(.st-day-read,.st-verdict-read){border:0!important;border-radius:.7rem!important;background:color-mix(in srgb,var(--em-accent) 8%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--em-accent) 22%,transparent)}

/* Game theory: bracketed analysis plates and corner coordinates. */
html[data-motion-scene="strategy"] .page-content :is(.gt-eq,.gt-domain,.gt-law,.gt-loop){position:relative;border:1px solid color-mix(in srgb,var(--em-accent) 24%,transparent)!important;border-radius:.25rem!important;background-image:linear-gradient(90deg,var(--em-accent) 9px,transparent 9px),linear-gradient(180deg,var(--em-accent) 9px,transparent 9px)!important;background-size:1px 9px,9px 1px!important;background-repeat:no-repeat!important;background-position:right .7rem top .7rem!important}
html[data-motion-scene="strategy"] .page-content :is(.gt-eq,.gt-domain,.gt-law,.gt-loop):after{content:"";position:absolute;right:.7rem;bottom:.7rem;width:9px;height:9px;border-right:1px solid var(--em-accent);border-bottom:1px solid var(--em-accent);opacity:.7}
html[data-motion-scene="strategy"] .page-content li.is-on{border-left-width:1px!important;box-shadow:inset 0 2px 0 var(--em-accent)}
html[data-motion-scene="strategy"] .page-content .gv-split li{position:relative;border-left-width:1px!important;background-image:linear-gradient(90deg,var(--em-accent) 7px,transparent 7px),linear-gradient(180deg,var(--em-accent) 7px,transparent 7px)!important;background-size:1px 7px,7px 1px!important;background-repeat:no-repeat!important;background-position:right .55rem top .55rem!important}

/* Success and failure: status lights instead of verdict stripes. */
html[data-motion-scene="feedback"] .page-content :is(.sf-explore-read,.sf-rule,.sf-domain-body .sig,.sf-review-read){position:relative;border:0!important;border-radius:999px!important;background:color-mix(in srgb,var(--em-accent) 9%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--em-accent) 22%,transparent)}
html[data-motion-scene="feedback"] .page-content :is(.sf-explore-read,.sf-rule,.sf-domain-body .sig,.sf-review-read):before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:.7rem;border-radius:50%;background:var(--em-accent)}
html[data-motion-scene="feedback"] .page-content .sf-explore-item{border:1px solid color-mix(in srgb,currentColor 15%,transparent)!important;border-radius:1rem!important;box-shadow:inset 0 3px 0 color-mix(in srgb,var(--em-accent) 65%,transparent)}

/* Uncertainty: soft fields with no hard directional edge. */
html[data-motion-scene="uncertainty"] .page-content :is(.ue-note,.ue-loop-read,.ue-direct-read,.ue-primer,.ue-primer-note,.ue-oern-read,.ue-band-read,.ue-warning,.ue-budget-read,.ue-rung,.ue-plan-out,.ue-compassion,.closed,.open){border:1px solid color-mix(in srgb,var(--em-accent) 20%,transparent)!important;border-radius:1.15rem!important;background-image:radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--em-accent) 13%,transparent),transparent 36%)!important;box-shadow:0 12px 35px color-mix(in srgb,var(--em-accent) 5%,transparent)}
html[data-motion-scene="uncertainty"] .page-content :is(#ue-support-read,.ue-stopgrid span){border:1px solid color-mix(in srgb,var(--em-accent) 20%,transparent)!important;border-radius:1.15rem!important;background:radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--em-accent) 13%,transparent),transparent 40%)!important;box-shadow:0 12px 35px color-mix(in srgb,var(--em-accent) 5%,transparent)}

/* Communication: statements become speech, with a small folded tail. */
html[data-motion-scene="signal"] .page-content :is(blockquote,.cm-objective-out,.cm-support-out,.cm-script-row article,.cm-doors p,.cm-tradeoffs article,.cm-resets article,.cf-verdict){position:relative;border:1px solid color-mix(in srgb,var(--em-accent) 22%,transparent)!important;border-radius:1rem 1rem 1rem .25rem!important;background:color-mix(in srgb,var(--em-accent) 6%,transparent)!important}
html[data-motion-scene="signal"] .page-content :is(blockquote,.cm-objective-out,.cm-support-out,.cm-script-row article,.cm-doors p,.cm-tradeoffs article,.cm-resets article,.cf-verdict):after{content:"";position:absolute;left:.8rem;bottom:-.42rem;width:.72rem;height:.72rem;border-left:1px solid color-mix(in srgb,var(--em-accent) 22%,transparent);border-bottom:1px solid color-mix(in srgb,var(--em-accent) 22%,transparent);background:inherit;transform:skewY(-35deg)}

/* Self-love: safe and shadow states fill the whole surface. */
html[data-motion-scene="consent"] .page-content :is(.sl-control-outcomes div,.sl-strength-result,.sl-compass-answer){position:relative;border:1px solid color-mix(in srgb,var(--em-accent) 22%,transparent)!important;border-radius:1.25rem!important;background:linear-gradient(145deg,color-mix(in srgb,var(--em-accent) 12%,transparent),transparent 64%)!important;box-shadow:0 16px 44px color-mix(in srgb,var(--em-accent) 6%,transparent)}
html[data-motion-scene="consent"] .page-content :is(.sl-control-outcomes div,.sl-strength-result):after{content:"";position:absolute;right:1rem;top:1rem;width:.62rem;height:.62rem;border-radius:50%;background:var(--em-accent);opacity:.7}

/* Life challenges: the statement stands alone; the quote reads like a pause. */
html[data-motion-scene="conversion"] .page-content .lc-hero-rule{max-width:38rem;margin-inline:auto!important;padding:1.4rem 0!important;border:0!important;background:transparent!important;text-align:center;box-shadow:inset 0 1px color-mix(in srgb,var(--em-accent) 30%,transparent),inset 0 -1px color-mix(in srgb,var(--em-accent) 30%,transparent)}
html[data-motion-scene="conversion"] .page-content .lc-quote{max-width:44rem;margin-inline:auto!important;padding:1.4rem 0!important;border:0!important;background:transparent!important;text-align:center;font-family:Georgia,serif}

@media(max-width:560px){html[data-motion-scene="repair"] .page-content blockquote,html[data-motion-scene="agency"] .page-content .ha-quote,html[data-motion-scene="control"] .page-content .st-quote{padding-left:2.6rem!important}html[data-motion-scene="signal"] .page-content :is(blockquote,.cm-objective-out,.cm-support-out,.cm-script-row article,.cm-doors p,.cm-tradeoffs article,.cm-resets article,.cf-verdict){border-radius:.8rem .8rem .8rem .2rem!important}}