/* Warm launch-film direction. Deliberately distinct from the cool editorial deck. */
:root{
  --paper:#F3EDE3;
  --paper-2:#E9DFD1;
  --panel:#FFFCF7;
  --ink:#182B3A;
  --muted:#3E4F5D;
  --soft:#657078;
  --rule:#D2C3B1;
  --brick:#9B3D2C;
  --brick-soft:#F1E2DA;
  --copper:#A3732D;
  --copper-soft:#F4E9D7;
  --steel:#315F7C;
  --navy:#162A3B;
}

html,body{background:#D8CDBD;color:var(--ink)}
#stage{
  background:
    radial-gradient(ellipse at 44% 37%,rgba(255,253,247,.96) 0,rgba(247,241,231,.54) 46%,transparent 73%),
    linear-gradient(135deg,#F6F0E6 0%,#F1E9DE 54%,#E5D8C7 100%);
}
#stage:before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(103,79,52,.042) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,79,52,.042) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.58),transparent 82%);
}
.scene{
  grid-template-rows:154px 1fr 90px;
  padding:44px 64px 36px;
  background:transparent;
}
.scene.on{animation:scene-in .12s cubic-bezier(.22,.8,.28,1) both}
.head{padding:8px 0 20px;border-color:var(--rule)}
.head-copy{max-width:1540px}
.eyebrow{font-size:14.5px;font-weight:800;letter-spacing:.17em;color:var(--brick)}
.title{font-size:54px;line-height:1.16;margin:12px 0 8px;color:var(--ink);max-width:1500px}
.sub{font-size:20px;line-height:1.46;color:var(--muted);max-width:1480px}
.counter{font-size:14px;color:#6A6258;letter-spacing:.12em;padding-top:4px}
.composition{
  grid-template-columns:190px minmax(0,1364px) 190px;
  gap:16px;padding:18px 0;
}
.side{
  max-width:190px;padding:14px 14px 14px 15px;
  border-left:2px solid var(--brick);
  background:linear-gradient(90deg,rgba(255,252,247,.82),rgba(255,252,247,.3));
}
.side.right{
  padding:14px 15px 14px 14px;
  border-right:2px solid var(--brick);border-left:0;
  background:linear-gradient(270deg,rgba(255,252,247,.82),rgba(255,252,247,.3));
}
.side b{font-size:19px;line-height:1.38;color:var(--ink);margin-bottom:7px;letter-spacing:.01em}
.side p{font-size:14.6px;line-height:1.62;color:#3E4F5C}
.scene:nth-of-type(4n+2) .side{border-color:var(--copper)}
.scene:nth-of-type(4n+2) .side.right{border-color:var(--copper)}
.scene:nth-of-type(4n+3) .side{border-color:var(--steel)}
.scene:nth-of-type(4n+3) .side.right{border-color:var(--steel)}
.media{
  width:1364px;height:672px;
  background:var(--panel);
  border:1px solid #CBBBA7;
  border-radius:10px;
  box-shadow:0 34px 72px -42px rgba(40,30,20,.55),0 5px 16px -12px rgba(40,30,20,.24);
  position:relative;
}
.media:before{
  content:'';position:absolute;left:18px;right:18px;top:0;height:4px;
  background:linear-gradient(90deg,var(--brick) 0 23%,var(--copper) 23% 52%,var(--steel) 52% 100%);
  border-radius:0 0 3px 3px;z-index:3;
}
.media img{width:100%;height:100%;object-fit:contain;object-position:center;background:#F7F3EB}
.visual-photo .media{border-radius:8px}
.visual-photo .media:after{
  content:'REAL PRODUCT INTERFACE';
  position:absolute;left:17px;bottom:16px;z-index:4;
  padding:6px 9px 5px;border-radius:2px;
  background:rgba(25,38,49,.88);color:#FFF9F0;
  font:700 9.5px/1 var(--sans);letter-spacing:.14em;
}
.foot{font-size:13px;color:#655E54;border-color:var(--rule);padding-top:15px}
.tag{font-size:12.5px;color:#4B5B65;border-color:#CDBEAE;background:rgba(255,252,247,.82);padding:6px 10px}
.beatbar{height:4px;background:#D8CAB8}
.beatbar b{background:linear-gradient(90deg,var(--brick),var(--copper))}
#hud{font-size:11px;color:#71685E;letter-spacing:.1em}
#toggle{border-color:#CDBEAE;background:rgba(255,252,247,.9);color:#4E5B64}

/* Diagram language: warm ivory cards with crisp copper, brick and steel rules. */
.diagram{background:transparent}
.diagram h2{font-size:31px;color:var(--ink)}
.diagram>p{font-size:17px;color:var(--muted)}
.layers{gap:15px}
.layers:before{border-color:#C6B49F}
.layers .layer{
  border:1px solid #D0C0AE;border-top:5px solid var(--layer-tone);
  border-radius:6px;background:linear-gradient(158deg,#FFFDF9,#F5ECDF);
  box-shadow:0 20px 40px -32px rgba(54,39,24,.55);
}
.layers .layer:nth-child(1){--layer-tone:#315F7C;transform:translateY(-7px)}
.layers .layer:nth-child(2){--layer-tone:#A3732D;transform:none}
.layers .layer:nth-child(3){--layer-tone:#7B536A;transform:translateY(-7px)}
.layers .layer:nth-child(4){--layer-tone:#9B3D2C;transform:none}
.layers .layer em{background:var(--layer-tone);color:#FFFDF9;box-shadow:0 8px 16px -10px var(--layer-tone)}
.layers .layer b{color:var(--ink);font-size:20px}
.layers .layer span{color:var(--muted);font-size:14.5px}
.caption{color:#6A6258;font-size:13px}

/* Cover: warm architecture sculpture, no unrelated imagery. */
.cover .composition{grid-template-columns:1fr;max-width:1530px;height:100%;padding:14px 0 18px}
.cover .head{padding-bottom:18px}
.cover .title{font-size:74px;max-width:1420px}
.cover .sub{font-size:25px;max-width:1220px}
.cover .media{background:transparent;border:0;box-shadow:none;height:650px;overflow:visible}
.cover .media:before,.cover .media:after{display:none}
.cover .diagram{padding:0;background:transparent;height:100%}
.hero-stack-visual{
  border:1px solid rgba(146,112,73,.24);border-radius:18px;
  background:
    radial-gradient(ellipse at 47% 44%,rgba(204,161,101,.18),transparent 45%),
    linear-gradient(145deg,rgba(255,252,247,.86),rgba(233,221,205,.72));
  box-shadow:0 30px 68px -44px rgba(54,39,24,.55);
}
.hero-stack-visual:before{
  background-image:
    linear-gradient(rgba(114,86,54,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(114,86,54,.08) 1px,transparent 1px);
}
.hero-stack-rig{left:7%;top:10%;width:58%;height:73%}
.hero-stack-plane{
  border:2px solid color-mix(in srgb,var(--tone) 62%,#FFF8EE);
  background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 23%,#FFFDF9),color-mix(in srgb,var(--tone) 10%,#EFE4D5));
  box-shadow:0 24px 46px -24px color-mix(in srgb,var(--tone) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.88);
}
.hero-stack-plane:nth-child(1){--tone:#9B3D2C}
.hero-stack-plane:nth-child(2){--tone:#A3732D}
.hero-stack-plane:nth-child(3){--tone:#7B536A}
.hero-stack-plane:nth-child(4){--tone:#315F7C}
.hero-stack-labels{right:4%;width:48%}
.hero-stack-label{
  border-left:4px solid var(--tone);
  background:rgba(255,252,247,.96);
  box-shadow:0 12px 26px -21px rgba(54,39,24,.58);
}
.hero-stack-label b{font-size:17px}
.hero-stack-label strong{font-size:21px;color:var(--ink)}
.hero-stack-label small{font-size:14.5px;color:var(--muted)}
.hero-stack-label:nth-child(1){--tone:#315F7C}
.hero-stack-label:nth-child(2){--tone:#A3732D}
.hero-stack-label:nth-child(3){--tone:#7B536A}
.hero-stack-label:nth-child(4){--tone:#9B3D2C}
.hero-stack-dust i{background:rgba(155,61,44,.72);box-shadow:0 0 20px 5px rgba(155,61,44,.16)}

/* Closing spread. */
.closing{
  background:
    radial-gradient(ellipse at 76% 44%,rgba(163,115,45,.2),transparent 33%),
    linear-gradient(132deg,#162A3B 0%,#22384A 60%,#2F414D 100%);
}
.closing .head,.closing .foot{border-color:rgba(255,248,238,.23);color:#E9DDCE}
.closing .eyebrow{color:#F0AE8E}
.closing .counter{color:#EDE4DA}
.closing .title,.closing .diagram h2{color:#FFFDF9}
.closing .sub,.closing .diagram>p{color:#EEE4D9}
.closing .tag{color:#FFF8EF;border-color:rgba(255,248,238,.32);background:rgba(255,248,238,.08)}
.closing .diagram h2{font-size:56px;white-space:normal}
.closing .diagram .closing-orbit{border-color:rgba(240,174,142,.30)}
.closing .diagram .closing-orbit:before{border-color:rgba(163,115,45,.32)}
.closing .diagram .closing-orbit:after{border-color:rgba(111,151,174,.30)}

/* Subtle staged reveal: the frame changes every beat, details settle around it. */
.scene.on .head{animation:motion-head-in .16s ease-out both}
.scene.on .media{animation:motion-media-in .18s cubic-bezier(.2,.8,.26,1) both}
.scene.on .side:first-child{animation:motion-side-left-in .16s ease-out both}
.scene.on .side.right{animation:motion-side-right-in .16s ease-out both}
@keyframes scene-in{from{opacity:0}to{opacity:1}}
@keyframes motion-head-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes motion-media-in{from{opacity:0;transform:translateY(4px) scale(.998)}to{opacity:1;transform:none}}
@keyframes motion-side-left-in{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
@keyframes motion-side-right-in{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .scene.on,.scene.on .head,.scene.on .media,.scene.on .side{animation:none!important}
}

/* ===== Evidence-first algorithm shots =====================================
   The three micro-lesson beats use plot-only captures taken 30+ seconds into
   the real run. The vote count / convergence sentence is a separate HTML band,
   so it can never be cropped out and never sits on top of the chart. */
.scene.on .head,
.scene.on .media,
.scene.on .side{animation:none!important}
.visual-algo .composition{
  grid-template-columns:230px minmax(0,1180px) 230px;
  gap:20px;
  padding:8px 0;
}
.visual-algo .side{
  max-width:230px;
  padding:18px 16px;
  background:linear-gradient(90deg,rgba(255,252,247,.9),rgba(255,252,247,.38));
}
.visual-algo .side.right{background:linear-gradient(270deg,rgba(255,252,247,.9),rgba(255,252,247,.38))}
.visual-algo .side b{font-size:19px;margin-bottom:8px}
.visual-algo .side p{font-size:15px;line-height:1.6;color:#354956}
.visual-algo .media{
  display:block;
  width:1180px;
  height:736px;
  max-height:100%;
  padding:0;
  overflow:hidden;
  border:1px solid #C6B298;
  border-radius:8px;
  background:#F4EFE3;
  box-shadow:0 32px 72px -42px rgba(47,34,19,.58),0 0 0 6px rgba(255,252,247,.62);
}
.visual-algo .media:before{
  left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#9B3D2C 0 31%,#A3732D 31% 63%,#315F7C 63% 100%);
  border-radius:0;
}
.visual-algo .media:after{display:none}

/* The real interface capture already carries its own product chrome. */
.visual-photo .media:after,
.visual-photo .media:before{display:none}
.algo-stage{
  width:100%;height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) 80px;
  min-height:0;
  overflow:hidden;
  background:#F4EFE3;
}
.algo-canvas{
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#F4EFE3;
}
.algo-canvas img{
  display:block;
  width:100%;height:100%;
  max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
  background:#F4EFE3;
  transform:scale(calc(1 + var(--p,0) * .012));
  transform-origin:center;
  will-change:transform;
}
.algo-result{
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 28px;
  background:#13283B;
  border-top:1px solid rgba(255,248,238,.16);
}
.algo-result b{
  flex:none;
  font:800 11.5px/1.2 var(--sans);
  letter-spacing:.14em;
  color:#F0B394;
  white-space:nowrap;
}
.algo-result span{
  font:650 19.5px/1.32 var(--sans);
  color:#FFF8EE;
  letter-spacing:.01em;
}

/* Final film pass: real full-interface captures, generous breathing room, and
   a separate result band below the image. No overlay ever covers the lesson. */
.visual-algo .composition{
  grid-template-columns:230px minmax(0,1180px) 230px;
  gap:24px;
  padding:4px 0;
}
.visual-algo .media{
  width:1180px;
  height:680px;
  background:#14293A;
  border:1px solid #AE9A82;
  border-radius:10px;
  box-shadow:
    0 0 0 5px rgba(255,252,247,.6),
    0 34px 76px -44px rgba(43,30,17,.7);
}
.visual-algo .media:before{
  left:0;
  right:0;
  top:0;
  height:4px;
  border-radius:0;
  background:linear-gradient(90deg,#9B3D2C 0 20%,#A3732D 20% 48%,#315F7C 48% 100%);
}
.algo-stage{
  grid-template-rows:minmax(0,1fr) 74px;
  background:#14293A;
}
.algo-canvas{
  background:#F6F2E9;
  padding:8px 10px 0;
}
.algo-canvas img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#F6F2E9;
  border:1px solid rgba(118,91,61,.16);
  border-bottom:0;
  border-radius:4px 4px 0 0;
  transform:none;
}
.algo-result{
  gap:16px;
  padding:0 22px;
  background:linear-gradient(90deg,#102538 0%,#173247 100%);
  border-top:3px solid #A3732D;
}
.algo-result b{
  padding:6px 8px 5px;
  border:1px solid rgba(239,183,148,.38);
  border-radius:2px;
  color:#FFC09C;
  font-size:10.5px;
  letter-spacing:.1em;
}
.algo-result span{
  font-size:18.5px;
  line-height:1.4;
  color:#FFF9F1;
}
.visual-algo .side{
  align-self:center;
  padding:19px 17px;
  border-left-width:3px;
  background:linear-gradient(90deg,rgba(255,252,247,.94),rgba(255,252,247,.48));
}
.visual-algo .side.right{background:linear-gradient(270deg,rgba(255,252,247,.94),rgba(255,252,247,.48))}
.visual-algo .side b{font-size:18.5px;line-height:1.36;margin-bottom:8px;color:#172A39}
.visual-algo .side p{font-size:14.6px;line-height:1.62;color:#354A58}

/* ===== Final film cut =====================================================
   Tighter editorial rhythm and a larger evidence canvas. The complete
   micro-lesson screenshot is the centre of gravity; annotation stays outside
   the image, and the result band is a separate strip below it. */

.scene{
  transition:none!important;
  grid-template-rows:152px 1fr 92px;
  padding:44px 72px 38px;
}
.head{padding:7px 0 16px}
.eyebrow{font-size:14px}
.title{font-size:46px;line-height:1.16;margin:10px 0 6px}
.sub{font-size:18.5px;line-height:1.42;max-width:1400px}
.counter{font-size:14px;padding-top:3px}
.composition{
  grid-template-columns:206px minmax(0,1328px) 206px;
  gap:18px;
  padding:0;
}
.side{max-width:206px;padding:16px 14px}
.side b{font-size:19px;line-height:1.36;margin-bottom:7px}
.side p{font-size:15px;line-height:1.58}
.media{width:1328px;height:730px}
.foot{font-size:13px;padding-top:15px}
.tag{font-size:13px;padding:6px 11px}

.visual-algo .composition{
  grid-template-columns:206px minmax(0,1328px) 206px;
  gap:18px;
  padding:0;
}
.visual-algo .side{max-width:206px;padding:18px 15px}
.visual-algo .side b{font-size:18.5px;margin-bottom:7px}
.visual-algo .side p{font-size:15.2px;line-height:1.58;color:#304654}
.visual-algo .media{width:1328px;height:730px}
.algo-stage{grid-template-rows:minmax(0,1fr) 68px}
.algo-canvas{padding:4px 6px 0}
.algo-canvas img{border-radius:3px 3px 0 0}
.algo-result{gap:15px;padding:0 20px}
.algo-result b{font-size:10.3px;padding:5px 7px 4px}
.algo-result span{font-size:17.6px;line-height:1.34}

@media(prefers-reduced-motion:reduce){
  .scene{transition:none!important}
}

/* Final legibility pass for projection: annotation is outside the evidence
   image, so it can grow without ever covering the lesson interface. */
.side b{font-size:20px;line-height:1.34}
.side p{font-size:16.2px;line-height:1.58}
.visual-algo .side b{font-size:20px;line-height:1.34}
.visual-algo .side p{font-size:16.4px;line-height:1.58;color:#2F4655}
.algo-result b{font-size:11px}
.algo-result span{font-size:19px;line-height:1.34}

/* One title baseline across the film, with serif emphasis inside body copy. */
.scene:not(.cover):not(.closing) .title{
  max-width:none;
  font-size:46px;
  line-height:1.16;
  white-space:nowrap;
  text-wrap:nowrap;
}
.head-copy{padding-right:88px}
.copy-accent{
  display:inline;
  padding:0 .06em;
  color:#183E5D;
  font-family:var(--serif);
  font-weight:700;
  background:linear-gradient(180deg,transparent 68%,rgba(155,61,44,.16) 68%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.sub .copy-accent{font-size:1.04em;color:#173A57}
.side .copy-accent{color:#173E5B;font-size:1.04em;background:none}
.algo-result .copy-accent{color:#FFD0AE;background:none;font-size:1.04em}

/* The remaining path beat gets its own visual grammar so it no longer repeats
   the four-layer architecture that introduces the overall solution. */
.scene.diagram{
  width:auto;
  height:auto;
  padding:44px 72px 38px;
  display:grid;
  flex-direction:initial;
  justify-content:initial;
  background:transparent;
}
.path-board{
  width:100%;
  height:100%;
  padding:62px 56px 52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    linear-gradient(115deg,rgba(255,252,247,.94),rgba(244,234,219,.88)),
    repeating-linear-gradient(90deg,transparent 0 84px,rgba(112,84,50,.05) 84px 85px);
}
.path-board-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding-bottom:22px;
  border-bottom:1px solid #D0C0AE;
}
.path-board-head span{
  color:var(--brick);
  font-size:14px;
  font-weight:800;
  letter-spacing:.18em;
}
.path-board-head b{
  color:var(--ink);
  font:600 31px/1.2 var(--serif);
}
.path-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin-top:54px;
}
.path-track:before{
  content:'';
  position:absolute;
  left:8%;
  right:8%;
  top:27px;
  height:2px;
  background:linear-gradient(90deg,var(--steel),var(--copper) 58%,var(--brick));
}
.path-step{
  position:relative;
  z-index:1;
  min-height:196px;
  padding:24px 22px 20px;
  border:1px solid #D2C1AE;
  border-top:4px solid var(--steel);
  background:rgba(255,252,247,.94);
  box-shadow:0 20px 36px -30px rgba(54,39,24,.58);
}
.path-step:nth-child(2){border-top-color:#7B536A}
.path-step:nth-child(3){border-top-color:var(--copper)}
.path-step:nth-child(4){border-top-color:var(--brick)}
.path-step em{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--ink);
  color:#FFF9F0;
  font:700 15px/1 ui-monospace,monospace;
  font-style:normal;
  box-shadow:0 0 0 8px #F6EFE4;
}
.path-step strong{
  display:block;
  margin-top:36px;
  color:var(--ink);
  font:600 24px/1.35 var(--serif);
}
.path-step span{
  display:block;
  margin-top:10px;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}
.path-note{
  margin:38px 0 0;
  padding:13px 18px;
  border-left:4px solid var(--brick);
  background:rgba(255,252,247,.7);
  color:#43525C;
  font-size:15px;
}

#toggle:focus-visible{
  outline:3px solid #F0B394;
  outline-offset:3px;
}
#toggle:active{transform:translateY(1px)}