/* The landing: tokens (D-16, variant B), then the story (Task 7), the drill (Task 8), and the screens after it
   (score, model, morph). Everything, the tokens included, is scoped under .imbse-landing, so nothing leaks into a host page.
   Rule: no light-blue text on a light background; --hit is for dark backgrounds only. Text on --paper is --ink,
   --accent or --muted. */
.imbse-landing {
  --paper: #eeeeea;
  --ink: #14171f;
  --accent: #1d3f8f;
  --rule: #cdd0d4;
  --muted: #5d6270;
  --card: #fafaf8;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* The drill's desktop (Task 8) and the score. */
  --desk-a: #2b4f9e;
  --desk-b: #274892;
  --win: #e9e8e2;
  --win-border: #14275a;
  --bar-a: #2f5bc0;
  --bar-b: #1d3f8f;
  --black: #0b0d12;
  --on-black: #f2f2ee;
  --hit: #8fb0ff;
}

/* ---- The story ---- */
.imbse-landing { background: var(--paper); color: var(--ink); font-family: var(--serif); }
.imbse-landing .story { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); }
.imbse-landing a { color: var(--accent); }
.imbse-landing .eyebrow { font: 600 12px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0; }
.imbse-landing .eyebrow .num { font-family: var(--mono); letter-spacing: 0.04em; margin-right: 0.7em; }
.imbse-landing [data-fact] { font-family: var(--sans); font-weight: 700; color: var(--accent); white-space: nowrap; }
.imbse-landing .fact-missing { font-weight: 400; font-style: italic; color: var(--muted); }

.imbse-landing .hero { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; padding: 72px 0 56px; max-width: 780px; }
.imbse-landing .hero h1, .imbse-landing .hero .ho-name {
  font: 700 clamp(60px, 11vw, 132px)/0.92 var(--sans); letter-spacing: -0.035em; margin: 18px 0 10px; outline: none;
}
.imbse-landing .expansion { font: 500 15px/1.3 var(--sans); color: var(--muted); margin: 0 0 28px; }
.imbse-landing .statement { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.45; margin: 0 0 22px; max-width: 32em; }
.imbse-landing .example { font: 14px/1.45 var(--sans); color: var(--muted); margin: 0; max-width: 40em; }
.imbse-landing .cue { font: 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 44px 0 0; }
.imbse-landing .cue-arrow { display: inline-block; margin: 0 0.5em; }

.imbse-landing .chapter { border-top: 1px solid var(--rule); padding: clamp(48px, 8vw, 96px) 0; display: grid; gap: 36px; }
.imbse-landing .chapter h2 {
  font: 700 clamp(27px, 3.2vw, 40px)/1.1 var(--sans); letter-spacing: -0.02em; margin: 14px 0 18px; max-width: 18em;
}
.imbse-landing .copy p { font-size: 18px; line-height: 1.55; margin: 0 0 14px; max-width: 34em; }
.imbse-landing .more { margin-top: 18px; font-size: 15px; }
.imbse-landing .more summary {
  font: 600 13px var(--sans); color: var(--ink); cursor: pointer; display: inline-block; border-bottom: 1px dotted var(--ink); padding-bottom: 2px;
}
.imbse-landing .more summary::marker { color: var(--accent); }
.imbse-landing .more[open] summary { margin-bottom: 12px; }
.imbse-landing .more p { font-size: 15px; line-height: 1.5; }
.imbse-landing .sources { font: 13px/1.45 var(--sans); color: var(--muted); padding-left: 18px; margin: 10px 0 0; }
.imbse-landing .sources li { margin-bottom: 6px; }
.imbse-landing .scene { margin: 0; min-width: 0; }
@media (min-width: 900px) {
  .imbse-landing .chapter { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
  /* Chapter 3's live diagram needs the room to stay legible. */
  .imbse-landing .chapter[data-chapter="era"] { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* Stages: the scenes' drawing surface. Positions are percent of the stage so a scene scales with its column. */
.imbse-landing .board { position: relative; background: var(--card); border: 1px solid var(--rule); overflow: hidden; }
.imbse-landing .pile, .imbse-landing .drift { aspect-ratio: 16 / 11; }
.imbse-landing .board .card {
  position: absolute; width: 18%; height: 20%; box-sizing: border-box; background: #fff; border: 1px solid var(--muted);
  box-shadow: 2px 2px 0 var(--rule); padding: 6px; font-family: var(--sans); color: var(--ink);
}
.imbse-landing .board .card b { display: block; font-weight: 600; font-size: clamp(9px, 1.05vw, 12px); line-height: 1.15; margin-bottom: 4px; }
.imbse-landing .board .card i { display: block; height: 3px; background: var(--rule); margin: 4px 0; }
.imbse-landing .board .model {
  position: absolute; left: 50%; top: 50%; width: 17%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: var(--ink); color: var(--paper); font: 700 clamp(9px, 1.1vw, 12px) var(--sans); letter-spacing: 0.08em;
  display: grid; place-items: center;
}
.imbse-landing .wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.imbse-landing .wires line { stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.imbse-landing .drift .wires line { opacity: 0.25; stroke-dasharray: 4 5; }
.imbse-landing .drift .card { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
.imbse-landing .stamp {
  position: absolute; left: 50%; top: 13%; translate: -50% 0; rotate: -7deg; border: 2px solid var(--accent);
  color: var(--accent); background: var(--card); font: 700 clamp(11px, 1.3vw, 15px) var(--sans); letter-spacing: 0.12em; padding: 4px 10px;
}

/* Chapter 3: the text and the diagram drawn from it. */
.imbse-landing .board.text { padding: 16px; }
.imbse-landing .typed {
  font: 13px/1.55 var(--mono); color: var(--ink); background: #fff; border: 1px solid var(--rule); padding: 12px 14px;
  margin: 0; overflow-x: auto;
}
.imbse-landing .typed .ln { display: inline-block; white-space: pre; overflow: hidden; vertical-align: top; max-width: calc((var(--n) + 1) * 1ch); }
.imbse-landing .typed .kw { color: var(--accent); font-weight: 600; }
@media (max-width: 520px) { .imbse-landing .typed { font-size: 11px; padding: 10px; } }
.imbse-landing .drawn { margin-top: 12px; overflow-x: auto; min-height: 120px; }
.imbse-landing .drawn svg { width: 100%; height: auto; min-width: 560px; box-sizing: border-box; }
.imbse-landing .drawn-wait { font: 14px var(--sans); color: var(--muted); margin: 0; padding: 40px 12px; text-align: center; }
.imbse-landing .caption { font: 13px var(--sans); color: var(--muted); margin: 10px 0 0; }

/* Chapter 4: the laptop line. */
.imbse-landing .boundary { aspect-ratio: 16 / 10; }
.imbse-landing .laptop { position: absolute; left: 5%; top: 9%; width: 64%; height: 80%; }
.imbse-landing .laptop .screen { position: absolute; inset: 0 4% 12% 4%; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }
.imbse-landing .laptop .line { position: absolute; inset: 8%; border: 2px dashed var(--accent); border-radius: 4px; }
.imbse-landing .laptop .base { position: absolute; left: 0; right: 0; bottom: 4%; height: 7%; background: var(--ink); border-radius: 2px 2px 10px 10px; }
.imbse-landing .tag {
  position: absolute; left: 8px; top: -0.8em; background: #fff; padding: 0 6px; font: 600 11px var(--mono); color: var(--accent);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.imbse-landing .inside { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-evenly; }
.imbse-landing .board .card.mini { position: static; width: 22%; height: auto; aspect-ratio: 4 / 5; }
.imbse-landing .board .card.ai { border-color: var(--accent); }
.imbse-landing .board .model.small { position: static; translate: none; width: 24%; }
.imbse-landing .cloud {
  position: absolute; right: 4%; top: 32%; width: 22%; aspect-ratio: 3 / 2; border: 1.5px dashed var(--muted); border-radius: 999px;
  display: grid; place-items: center; text-align: center; font: 12px/1.2 var(--sans); color: var(--muted);
}
.imbse-landing .cloud::before {
  content: ""; position: absolute; left: -30%; top: 50%; width: 26%; border-top: 2px solid var(--muted);
}
.imbse-landing .cloud::after {
  content: "×"; position: absolute; left: -22%; top: 50%; translate: 0 -55%; font: 700 18px var(--sans); color: var(--ink);
  background: var(--card); padding: 0 2px;
}

/* Chapter 5: two gates and the editor. */
.imbse-landing .board.gates { padding: 18px; }
.imbse-landing .proposals { display: grid; gap: 8px; }
.imbse-landing .prop {
  display: block; font: 13px/1.45 var(--mono); background: #fff; border: 1px solid var(--rule); padding: 8px 10px; overflow-wrap: anywhere;
}
.imbse-landing .prop [data-fact] { font-family: var(--mono); }
.imbse-landing .tok, .imbse-landing .runner {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 12px var(--sans);
  background: var(--ink); color: var(--paper); margin-right: 6px; vertical-align: middle;
}
.imbse-landing .bad .tok, .imbse-landing .runner.bad { background: var(--accent); }
.imbse-landing .track { margin-top: 16px; }
.imbse-landing .stations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.imbse-landing .station { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 10px; font-family: var(--sans); }
.imbse-landing .station b { display: block; font-size: 14px; }
.imbse-landing .station span { display: block; font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 3px; }
.imbse-landing .station.you { border-top-color: var(--accent); }
.imbse-landing .lanes { position: relative; height: 66px; border-bottom: 1px dotted var(--rule); }
.imbse-landing .runner { position: absolute; margin: 0; translate: -50% 0; }
.imbse-landing .runner.ok { top: 8px; left: 83.3%; }
.imbse-landing .runner.bad { top: 38px; left: 50%; }
.imbse-landing .stopped {
  position: absolute; top: 38px; left: calc(50% + 18px); border: 2px solid var(--accent); color: var(--accent);
  font: 700 11px/18px var(--sans); letter-spacing: 0.1em; padding: 0 6px; rotate: -4deg; background: var(--card);
}
.imbse-landing .gloss { font: 13px/1.45 var(--sans); color: var(--muted); margin: 12px 0 0; }
.imbse-landing .finding { font: 13px/1.45 var(--sans); color: var(--ink); margin: 4px 0 0; }
.imbse-landing .finding b { color: var(--accent); margin-right: 6px; }
.imbse-landing .finding [data-fact] { font: 400 12.5px var(--mono); color: var(--ink); white-space: normal; }

/* Chapter 6: the model preview and the way in. */
.imbse-landing .board.lab { padding: 20px; }
.imbse-landing .preview { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.imbse-landing .preview path { fill: none; stroke: var(--muted); stroke-width: 0.4; }
.imbse-landing .pnode rect { fill: #fff; stroke: var(--muted); stroke-width: 0.4; }
.imbse-landing .pnode.root rect { stroke: var(--accent); stroke-width: 0.8; }
.imbse-landing .pnode text { font: 600 4px var(--sans); fill: var(--ink); text-anchor: middle; }
.imbse-landing .counts { font: 15px/1.4 var(--sans); color: var(--ink); margin: 12px 0 4px; }
.imbse-landing .drill { font: 14px/1.4 var(--sans); color: var(--muted); margin: 0 0 16px; }
.imbse-landing .drill b { color: var(--ink); }
.imbse-landing .enter {
  display: inline-block; background: var(--accent); color: var(--paper); text-decoration: none; font: 700 17px var(--sans);
  padding: 13px 22px; border-radius: 2px;
}
.imbse-landing .enter:hover, .imbse-landing .enter:focus-visible { background: var(--ink); }

/* Motion: scenes run from their opening picture to the drawn end state, only in view and only with motion allowed.
   Out of view the keyframes wait, paused at their start (the pause rule closes this block: every animation shorthand
   resets the play state, so it must come after them and win). */
@media (prefers-reduced-motion: no-preference) {
  .imbse-landing .cue-arrow { animation: llambda-cue 1.8s ease-in-out infinite; }

  .imbse-landing .pile .card { animation: llambda-pile 1.1s cubic-bezier(.2, .7, .2, 1) calc(0.4s + var(--d)) both; }
  .imbse-landing .pile .model { animation: llambda-pop 0.5s ease-out 1.6s both; }
  .imbse-landing .pile .wires { animation: llambda-show 0.7s ease-out 2s both; }

  .imbse-landing .drift .card { animation: llambda-drift 1.8s ease-in-out calc(0.8s + var(--d)) both; }
  .imbse-landing .drift .card.lit { animation-name: llambda-drift-lit; }
  .imbse-landing .drift .wires line { animation: llambda-unwire 1.6s ease-in 1s both; }
  .imbse-landing .drift .stamp { animation: llambda-stamp 0.35s ease-out 2.9s both; }

  .imbse-landing .typed .ln { animation: llambda-type calc(var(--n) * 28ms) steps(var(--n)) calc(0.3s + var(--i) * 0.42s) both; }

  .imbse-landing .boundary .bounce { animation: llambda-bounce 2.2s ease-in-out 0.6s 2; }

  .imbse-landing .runner.ok { animation: llambda-run-ok 3.6s ease-in-out 0.4s both; }
  .imbse-landing .runner.bad { animation: llambda-run-bad 3.6s ease-in-out 1s both; }
  .imbse-landing .stopped { animation: llambda-stamp 0.35s ease-out 3.4s both; }
  .imbse-landing .gloss, .imbse-landing .finding { animation: llambda-show 0.5s ease-out 3.7s both; }

  .imbse-landing .lab .pnode { animation: llambda-show 0.5s ease-out both; }
  .imbse-landing .lab .pnode:nth-of-type(n + 2) { animation-delay: 0.5s; }

  .imbse-landing .chapter:not(.in-view) .scene * { animation-play-state: paused !important; }
}
@media (prefers-reduced-motion: reduce) {
  .imbse-landing .scene *, .imbse-landing .cue-arrow { animation: none !important; }
}
@keyframes llambda-cue { 50% { transform: translateY(4px); } }
@keyframes llambda-show { from { opacity: 0; } }
@keyframes llambda-pop { from { opacity: 0; scale: 0.5; } }
@keyframes llambda-pile { from { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } to { transform: none; } }
@keyframes llambda-drift { from { transform: none; } }
/* The hand-off left the drill's hits lit; they go dark as the documents drift. */
@keyframes llambda-drift-lit { from { transform: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } }
@keyframes llambda-unwire { from { opacity: 1; stroke-dasharray: none; } }
@keyframes llambda-stamp { from { opacity: 0; scale: 1.6; } }
@keyframes llambda-type { from { max-width: 0; } }
@keyframes llambda-bounce { 0%, 100% { translate: 0 0; } 45% { translate: 34% 0; } 55% { translate: 26% 0; } }
@keyframes llambda-run-ok { from { left: 2%; } 30%, 40% { left: 16.7%; } 60%, 70% { left: 50%; } to { left: 83.3%; } }
@keyframes llambda-run-bad { from { left: 2%; } 40%, 55% { left: 16.7%; } 85% { left: 50%; } 90% { left: 46%; } to { left: 50%; } }

/* ---- The drill (Task 8): a change notice and a countdown over a period desktop of the program's documents. ----
   Chrome in a Tahoma stack; text on --win, white and --paper is --ink, --accent or --muted; --hit only on --black.
   At 900 px and up the windows sit in nine fixed slots (percent of the desk) and the open one comes forward, wide
   enough to show every passage. Below 900 px they are a list and the open one expands in place. */
.imbse-landing .drill-screen {
  --chrome: Tahoma, Verdana, "Segoe UI", sans-serif;
  position: relative; display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box;
  background: repeating-linear-gradient(45deg, var(--desk-a) 0 18px, var(--desk-b) 18px 36px);
  font-family: var(--chrome); color: var(--ink); overflow: hidden;
}
/* The task card (D-25, mockup docs/show/v2-4-task/final.html): who you are, what happened, what is at stake, how long.
   Before Start it sits centred over blurred, inert documents and pulses (2 s); at Start the pulse stops and it
   shrinks to a reminder at the top. */
.imbse-landing .drill-task {
  position: relative; z-index: 200; box-sizing: border-box; width: min(680px, calc(100% - 24px)); margin: 14px auto 0;
  background: var(--card); color: var(--ink); border: 3px solid var(--win-border); box-shadow: 5px 5px 0 var(--win-border);
  padding: 14px 20px 14px; text-align: center;
}
.imbse-landing .drill-task p { margin: 0 0 8px; max-width: none; }
.imbse-landing .task-role { font: 700 13px/1.3 ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #a3261b; }
.imbse-landing .task-situation { font: 700 clamp(19px, 2.4vw, 24px)/1.25 var(--serif); }
.imbse-landing .task-stake { font: 600 16px/1.45 var(--sans); }
.imbse-landing .task-stake em { font-style: normal; color: #a3261b; }
.imbse-landing .task-time { font: 15px/1.45 var(--sans); color: #2a2f3a; }
.imbse-landing .task-start {
  font: 600 16px/1 var(--sans); padding: 12px 28px; border-radius: 4px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; margin: 4px 0 8px;
}
.imbse-landing .task-start:hover:not(:disabled), .imbse-landing .task-start:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.imbse-landing .task-start:disabled { background: #6c738a; cursor: progress; }
.imbse-landing .drill-task .example { font: 13px/1.4 var(--sans); color: var(--muted); margin: 0; }
/* Before Start the documents sit dimmed and out of reach behind the card. */
.imbse-landing .win.blurred { filter: blur(3px) brightness(0.65); pointer-events: none; user-select: none; }
.imbse-landing .drill-screen[data-state="running"] .task-time,
.imbse-landing .drill-screen[data-state="running"] .example { display: none; }
.imbse-landing .drill-screen[data-state="running"] .drill-task { padding: 8px 14px; box-shadow: 3px 3px 0 var(--win-border); }
.imbse-landing .drill-screen[data-state="running"] .drill-task p { margin: 0 0 3px; }
.imbse-landing .drill-screen[data-state="running"] .task-situation { font-size: 16px; }
.imbse-landing .drill-screen[data-state="running"] .task-stake { font-size: 14px; }
.imbse-landing .drill-done {
  font: 600 13px/1 var(--sans); color: var(--on-black); background: var(--black); border: 2px solid var(--hit); padding: 8px 12px;
  cursor: pointer;
}
.imbse-landing .drill-done:hover, .imbse-landing .drill-done:focus-visible { outline: 2px solid var(--on-black); }
.imbse-landing .drill-done[hidden] { display: none; }
.imbse-landing .drill-screen .score, .imbse-landing .drill-screen .countdown {
  position: absolute; z-index: 201; top: 14px; margin: 0; background: var(--black); color: var(--hit);
  border: 2px solid var(--hit); font: 700 15px/1 "Courier New", var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.imbse-landing .drill-screen .score { left: 14px; padding: 9px 12px; }
.imbse-landing .drill-done { position: absolute; z-index: 201; top: 66px; right: 14px; }
.imbse-landing .drill-screen .countdown { right: 14px; padding: 6px 14px; font-size: 38px; min-width: 3ch; text-align: center; }
/* Read by screen readers only: the countdown's ten-second warning and its end. */
.imbse-landing .drill-announce { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.imbse-landing .drill-screen .countdown[data-urgent] { background: var(--accent); color: var(--on-black); border-color: var(--on-black); }

.imbse-landing .drill-desk { position: relative; flex: 1; margin: 0; padding: 0; isolation: isolate; }
.imbse-landing .win {
  box-sizing: border-box; background: var(--win); border: 2px solid var(--win-border); box-shadow: 3px 3px 0 rgba(11, 13, 18, 0.45);
  display: flex; flex-direction: column; cursor: default;
}
.imbse-landing .win.found { outline: 3px solid var(--hit); }
.imbse-landing .drill-bar {
  display: flex; align-items: center; gap: 6px; padding: 3px 3px 3px 6px; background: linear-gradient(var(--bar-a), var(--bar-b));
  color: #fff; font: 700 13px/1.2 var(--chrome);
}
.imbse-landing .drill-icon {
  flex: none; width: 15px; height: 15px; display: grid; place-items: center; font: 700 10px var(--chrome); color: var(--ink); background: var(--win);
  border: 1px solid var(--win-border);
}
.imbse-landing .drill-title {
  flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 2px 0; color: #fff; font: inherit; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imbse-landing .drill-close {
  flex: none; width: 20px; height: 18px; padding: 0; background: var(--win); color: var(--ink); border: 1px solid var(--win-border);
  font: 700 11px/1 var(--chrome); cursor: pointer; display: none;
}
.imbse-landing .win.open .drill-close { display: block; }
.imbse-landing .drill-body { list-style: none; margin: 2px; padding: 4px 0; background: #fff; flex: 1; overflow: hidden; }
.imbse-landing .drill-p {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; margin: 0; padding: 4px 9px;
  font: 14px/1.45 var(--serif); color: var(--ink); cursor: pointer;
}
.imbse-landing .drill-p:hover, .imbse-landing .drill-p:focus-visible { background: #eef0f4; outline: 1px dotted var(--ink); outline-offset: -1px; }
.imbse-landing .drill-id { font: 600 12px var(--mono); color: var(--muted); }
.imbse-landing .drill-p.found { background: #dbe4f7; color: var(--accent); font-weight: 700; }
.imbse-landing .drill-p.found .drill-id { color: var(--accent); }
.imbse-landing .drill-p.miss { background: #ececea; }
/* The spreadsheet: row number, label, value, in ruled cells. The inbox: one message per row, sender first. */
.imbse-landing [data-kind="sheet"] .drill-body { padding: 0; }
.imbse-landing [data-kind="sheet"] .drill-p {
  display: grid; grid-template-columns: 3.6em minmax(7em, 38%) 1fr; padding: 0; font: 13px/1.4 var(--chrome);
}
.imbse-landing [data-kind="sheet"] .drill-p > span { border-right: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8; padding: 3px 6px; }
.imbse-landing [data-kind="sheet"] .drill-id { background: var(--win); color: var(--muted); text-align: center; font-size: 11px; }
.imbse-landing [data-kind="sheet"] .span2 { grid-column: 2 / 4; }
.imbse-landing [data-kind="mail"] .drill-p { font: 13px/1.45 var(--chrome); border-bottom: 1px solid #dcdcd6; padding: 6px 9px; }
.imbse-landing .drill-from { display: block; color: var(--ink); }
.imbse-landing .drill-p.found .drill-from { color: var(--accent); }

.imbse-landing .drill-taskbar {
  position: relative; z-index: 202; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px;
  background: linear-gradient(var(--bar-a), var(--bar-b)); color: #fff; font: 13px var(--chrome); border-top: 1px solid var(--hit);
}
.imbse-landing .drill-start {
  background: linear-gradient(var(--win-border), var(--black)); color: #fff; padding: 5px 14px 5px 10px; border-radius: 0 12px 12px 0;
  font-weight: 700; font-style: italic; margin-left: -6px;
}
.imbse-landing .drill-tabs { display: flex; gap: 5px; min-width: 0; overflow: hidden; flex: 1; }
.imbse-landing .drill-tab { background: #3a64c8; border: 1px solid var(--win-border); padding: 3px 9px; white-space: nowrap; }
.imbse-landing .drill-screen .skip {
  flex: none; background: var(--black); color: var(--on-black); border: 1px solid var(--hit); padding: 5px 12px; font: 700 13px var(--chrome);
  cursor: pointer;
}
.imbse-landing .drill-screen .skip:hover, .imbse-landing .drill-screen .skip:focus-visible { color: var(--hit); outline: 2px solid var(--on-black); }

/* A closed window fades out at its foot rather than cutting a line in half; open, every passage shows in full. */
.imbse-landing .win:not(.open) .drill-body { mask-image: linear-gradient(#000 70%, transparent); }
@media (min-width: 900px) {
  /* The taskbar, and the skip on it, stay on screen however short the window (clip, unlike hidden, keeps the
     viewport as the sticky container). */
  .imbse-landing .drill-screen { overflow: clip; }
  .imbse-landing .drill-taskbar { position: sticky; bottom: 0; }
  .imbse-landing .drill-desk { min-height: 680px; }
  .imbse-landing .drill-screen[data-state="waiting"] .drill-task {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; z-index: 300;
  }
  .imbse-landing .win { position: absolute; width: 23%; height: 160px; left: var(--x); top: var(--y); }
  .imbse-landing .win:nth-child(1) { --x: 2%; --y: 4%; }
  .imbse-landing .win:nth-child(2) { --x: 22%; --y: 13%; }
  .imbse-landing .win:nth-child(3) { --x: 52%; --y: 3%; }
  .imbse-landing .win:nth-child(4) { --x: 75%; --y: 10%; }
  .imbse-landing .win:nth-child(5) { --x: 5%; --y: 50%; }
  .imbse-landing .win:nth-child(6) { --x: 29%; --y: 66%; }
  .imbse-landing .win:nth-child(7) { --x: 53%; --y: 47%; }
  .imbse-landing .win:nth-child(8) { --x: 74%; --y: 63%; }
  .imbse-landing .win:nth-child(9) { --x: 40%; --y: 30%; }
  /* The open window comes forward wide and tall enough to read every passage; it scrolls only on a short screen. */
  .imbse-landing .win.open {
    left: min(var(--x), 54%); top: 1%; width: 44%; height: auto; max-height: 98%;
  }
  /* Fallback on a very short screen only: the body scrolls rather than run off the desk. */
  .imbse-landing .win.open .drill-body { overflow-y: auto; }
}
@media (max-width: 899.98px) {
  .imbse-landing .drill-screen { overflow: visible; }
  /* A sticky dark strip carries the score and the clock while the visitor scrolls the documents. */
  .imbse-landing .drill-hud {
    order: -1; position: sticky; top: 0; z-index: 203; display: flex; justify-content: space-between; align-items: center;
    background: var(--black); padding: 6px 10px; border-bottom: 2px solid var(--hit);
  }
  .imbse-landing .drill-screen .score, .imbse-landing .drill-screen .countdown { position: static; }
  .imbse-landing .drill-screen .countdown { font-size: 26px; padding: 3px 10px; }
  .imbse-landing .drill-task { margin-top: 12px; }
  .imbse-landing .drill-done { position: static; margin-left: 8px; }
  .imbse-landing .drill-desk { display: grid; gap: 10px; padding: 14px 10px 20px; align-content: start; }
  .imbse-landing .win:not(.open) .drill-body { max-height: 6.5em; }
  .imbse-landing .drill-taskbar { position: sticky; bottom: 0; }
  .imbse-landing .drill-tabs { display: none; }
  .imbse-landing .drill-screen .skip { margin-left: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The pulse: a soft glow and slight scale on a 2 s cycle, until Start. */
  .imbse-landing .drill-screen[data-state="waiting"] .drill-task { animation: llambda-pulse 2s ease-in-out infinite; }
  .imbse-landing .drill-screen[data-state="waiting"] .task-start:not(:disabled) { animation: llambda-glow 2s ease-in-out infinite; }
  .imbse-landing .drill-p.miss { animation: llambda-shake 0.4s ease-in-out; }
  .imbse-landing .countdown[data-urgent] { animation: llambda-blink 1s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .imbse-landing .drill-screen * { animation: none !important; }
  /* A steady highlight stands in for the pulse. */
  .imbse-landing .drill-screen[data-state="waiting"] .drill-task { box-shadow: 0 0 0 8px rgba(143, 176, 255, 0.55), 5px 5px 0 var(--win-border); }
}
@keyframes llambda-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 176, 255, 0.67), 5px 5px 0 var(--win-border); scale: 1; }
  50% { box-shadow: 0 0 0 14px rgba(143, 176, 255, 0), 5px 5px 0 var(--win-border); scale: 1.02; }
}
@keyframes llambda-glow { 50% { box-shadow: 0 0 0 6px rgba(29, 63, 143, 0.28); } }
@keyframes llambda-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
@keyframes llambda-blink { 50% { opacity: 0.88; } }

/* ---- After the drill: the score, the model at the centre, and the morph into LLaMBDA (Plan v2-4) ----
   To the approved mockup docs/show/v2-4-handoff/handoff.html. The score is --black with --on-black text and --hit
   numbers. The model screen and the morph are one picture on --paper (reveal.js), data-step="model" then "morph";
   every beat is a CSS animation with the mockup's delays. Each element's resting style is its end state on the model
   screen (the ring, the circle, the lines, the lit cards), and the animations run from the drill's desktop to it, so
   reduced motion (data-motion="reduced" on the root) plays the same screens as short fades: no spin, pulse or bob.
   Text on --paper is --ink or --accent; --hit appears only on --black, or as a glow. */
.imbse-landing .landing-wait { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px;
  font: 15px var(--sans); color: var(--muted); }
.imbse-landing .landing-wait p { margin: 0; }
.imbse-landing .landing-wait .skip { font: 600 14px var(--sans); color: var(--accent); background: none; border: 1px solid var(--rule);
  border-radius: 4px; padding: 8px 14px; cursor: pointer; }
.imbse-landing .landing-wait .skip:hover { border-color: var(--accent); }
.imbse-landing .landing-wait .skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.imbse-landing .landing-notice {
  margin: 0; padding: 10px clamp(18px, 4vw, 48px); background: var(--card); border-bottom: 2px solid var(--accent);
  font: 14px/1.4 var(--sans); color: var(--ink);
}
.imbse-landing .reveal, .imbse-landing .handoff {
  position: relative; min-height: 100vh; min-height: 100svh; box-sizing: border-box; overflow: hidden;
}
.imbse-landing .reveal {
  display: grid; place-items: center; padding: 48px 20px 88px; background: var(--black); color: var(--on-black); text-align: center;
}
.imbse-landing .reveal p { margin: 0; }
.imbse-landing .reveal-time { font: 600 13px var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--hit); }
.imbse-landing .reveal-head {
  font: 700 clamp(40px, 7vw, 92px)/1.02 var(--sans); letter-spacing: -0.03em; margin: 16px 0 20px; color: var(--on-black); outline: none;
}
.imbse-landing .reveal-head [data-live] { color: var(--hit); }
.imbse-landing .reveal-with { font: 400 clamp(20px, 2.5vw, 30px)/1.35 var(--serif); color: #a9aebb; }
.imbse-landing .reveal-with b { color: var(--hit); font-weight: 600; white-space: nowrap; }
.imbse-landing .reveal-with [data-live] { color: var(--hit); }
.imbse-landing .reveal-note { font: 13px/1.4 var(--mono); letter-spacing: 0.04em; color: #a9aebb; margin-top: 28px !important; }
.imbse-landing .reveal .next { margin-top: 34px; min-height: 44px; }
.imbse-landing .reveal .skip, .imbse-landing .handoff .skip {
  position: absolute; z-index: 5; right: 16px; bottom: 16px; background: var(--black); color: var(--on-black);
  border: 1px solid var(--hit); padding: 6px 12px; font: 700 13px var(--sans); cursor: pointer;
}
.imbse-landing .reveal .skip:hover, .imbse-landing .reveal .skip:focus-visible { outline: 2px solid var(--hit); outline-offset: -4px; }


/* Continue: hidden until the controller shows it (1.5 s into the score, 4.2 s into the model screen). */
.imbse-landing .continue {
  font: 600 15px/1 var(--sans); padding: 12px 24px; border-radius: 4px; border: 1px solid var(--accent); background: var(--accent);
  color: #fff; cursor: pointer; animation: llambda-in 0.5s ease-out both;
}
.imbse-landing .continue:hover { background: var(--bar-b); }
.imbse-landing .continue:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.imbse-landing .reveal .continue { border-color: var(--hit); }
.imbse-landing .reveal .continue:focus-visible { outline-color: var(--hit); }

/* The model at the centre. The stage keeps the mockup's 16:10 on wide screens and turns smaller and taller on a phone
   (Q22); the documents start where the drill's windows were and settle into a ring around the circle at 50% 42%. */
.imbse-landing .handoff { background: var(--paper); animation: llambda-dawn 0.5s ease-out both; }
.imbse-landing .handoff:focus { outline: none; }
.imbse-landing .hf-stage {
  --rw: 13%; --rh: 12%; --sw: 20%; --sh: 24%; --core: 19%;
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(94vw, 1100px, calc((100vh - 110px) * 1.6)); aspect-ratio: 16 / 10;
}
.imbse-landing .hf-picture { position: absolute; inset: 0; }
.imbse-landing .handoff .wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.imbse-landing .handoff .wires line { stroke: var(--muted); stroke-width: 0.15; vector-effect: none; }
.imbse-landing .handoff .wires line.lit { stroke: var(--accent); stroke-width: 0.3; }
.imbse-landing .handoff .card {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--rw); height: var(--rh); translate: -50% -50%; box-sizing: border-box;
  padding: 4px 6px; background: var(--win); border: 2px solid var(--win-border); border-top: 16px solid var(--bar-a);
  box-shadow: 3px 3px 0 rgba(11, 13, 18, 0.25);
}
.imbse-landing .handoff .card.lit { box-shadow: 0 0 0 3px var(--hit), 0 0 18px var(--hit); }
.imbse-landing .handoff .card b {
  position: absolute; top: -15px; left: 5px; right: 5px; color: #fff; font: 700 11px/14px Tahoma, Verdana, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imbse-landing .handoff .card .short { display: none; }
.imbse-landing .handoff .card i { display: block; height: 4px; margin: 6px 0; background: var(--rule); }
.imbse-landing .handoff .core { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: var(--core); aspect-ratio: 1; perspective: 700px; }
.imbse-landing .handoff .coin { position: absolute; inset: 0; transform-style: preserve-3d; }
.imbse-landing .handoff .face {
  position: absolute; inset: 0; border-radius: 50%; background: var(--ink); color: var(--on-black); display: grid; place-items: center;
  backface-visibility: hidden; box-shadow: inset 0 0 0 3px var(--bar-a), 0 6px 18px rgba(11, 13, 18, 0.25);
}
.imbse-landing .handoff .front { font: 700 clamp(12px, 1.3vw, 17px) var(--mono); letter-spacing: 0.12em; }
.imbse-landing .handoff .back { transform: rotateY(180deg); font: 700 20px/1 var(--sans); letter-spacing: -0.035em; white-space: nowrap; }
.imbse-landing .handoff .cap {
  position: absolute; left: 0; right: 0; bottom: 60px; margin: 0; padding: 0 12px; text-align: center;
  font: clamp(17px, 1.8vw, 22px)/1.35 var(--serif); color: var(--ink);
}
.imbse-landing .handoff .cap b { color: var(--accent); }
.imbse-landing .handoff .next { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; }
.imbse-landing .handoff .skip {
  position: absolute; z-index: 5; right: 16px; bottom: 16px; background: none; color: var(--accent);
  border: 1px solid var(--rule); border-radius: 4px; padding: 6px 12px; font: 600 13px var(--sans); cursor: pointer;
}
.imbse-landing .handoff .skip:hover { border-color: var(--accent); }
.imbse-landing .handoff .skip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The story's opening screen, laid over the picture exactly where the story lays it out; its parts fade in as the name
   rises into place. Before the rise the name is invisible; the coin's back face says LLaMBDA until then. */
.imbse-landing .morph-hero { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.imbse-landing .morph-hero .ho-name { opacity: 0; width: fit-content; transform-origin: 50% 50%; }
.imbse-landing .morph-hero .hero > :not(.ho-name) { opacity: 0; }
.imbse-landing .handoff[data-step="morph"] .next, .imbse-landing .handoff[data-step="morph"] > .skip { pointer-events: none; }

@media (max-width: 599.98px) {
  /* The picture keeps the full width (so the cards keep their names) and gets shorter on a short screen, leaving about
     170 px under it for the caption, Continue and Skip (field check 2026-11-08: a phone's browser bars leave far less
     than 844 px, and Continue met Skip). */
  .imbse-landing .hf-stage {
    --rw: 27%; --rh: max(10%, 40px); --sw: 30%; --sh: 15%; --core: 27%; aspect-ratio: auto;
    width: 94vw; height: min(calc(94vw * 4 / 3), calc(100svh - 200px)); top: calc(50% - 82px);
  }
  .imbse-landing .handoff .card .full { display: none; }
  .imbse-landing .handoff .card .short { display: block; }
  .imbse-landing .handoff .card b { font-size: 10px; }
  .imbse-landing .handoff .card i { margin: 4px 0; }
  .imbse-landing .handoff .cap {
    top: calc(100% + 6px); bottom: auto; left: 50%; right: auto; width: 94vw; translate: -50% 0; box-sizing: border-box; font-size: 17px;
  }
  .imbse-landing .handoff .next { top: calc(100% + 64px); bottom: auto; }
  .imbse-landing .handoff .skip { right: 50%; translate: 50% 0; bottom: 14px; }
}

/* Full motion: the mockup's beats. Model screen: the documents fold into a ring (0-1.9 s), the circle arrives
   (2.0-2.6 s), the lines draw out (2.7-3.5 s), the answer's documents light (3.5 s), the caption (3.7 s). */
.imbse-landing[data-motion="full"] .reveal-body > * { animation: llambda-in 0.3s ease-out both; }
.imbse-landing[data-motion="full"] .reveal-head { animation-delay: 0.1s; }
.imbse-landing[data-motion="full"] .reveal-with { animation-delay: 0.3s; }
.imbse-landing[data-motion="full"] .reveal-note { animation-delay: 0.5s; }
.imbse-landing[data-motion="full"] [data-step="model"] .card { animation: llambda-fold 1.4s cubic-bezier(.6, 0, .2, 1) var(--d) both; }
.imbse-landing[data-motion="full"] [data-step="model"] .card.lit {
  animation: llambda-fold 1.4s cubic-bezier(.6, 0, .2, 1) var(--d) both, llambda-unlit 0.5s ease 3.5s both;
}
.imbse-landing[data-motion="full"] [data-step="model"] .core { animation: llambda-arrive 0.6s cubic-bezier(.3, 1.4, .5, 1) 2s both; }
.imbse-landing[data-motion="full"] [data-step="model"] .wires line { animation: llambda-draw 0.8s ease-out 2.7s both; }
.imbse-landing[data-motion="full"] [data-step="model"] .cap { animation: llambda-in 0.6s ease-out 3.7s both; }
/* The morph, automatic: absorb (0-1 s), spin like a coin and land on LLaMBDA (1-2.9 s), the circle opens out as the
   name rises into the hero (3.2-4.2 s), the hero's lines fade in (4.1-5 s); the story replaces it at 5 s. */
.imbse-landing[data-motion="full"] [data-step="morph"] .card { animation: llambda-absorb 0.9s cubic-bezier(.5, 0, .8, .4) var(--d) both; }
.imbse-landing[data-motion="full"] [data-step="morph"] .wires { animation: llambda-out 0.5s both; }
.imbse-landing[data-motion="full"] [data-step="morph"] .cap,
.imbse-landing[data-motion="full"] [data-step="morph"] .next,
.imbse-landing[data-motion="full"] [data-step="morph"] > .skip { animation: llambda-out 0.4s both; }
.imbse-landing[data-motion="full"] [data-step="morph"] .coin { animation: llambda-spin 1.9s cubic-bezier(.25, .6, .3, 1) 1s both; }
.imbse-landing[data-motion="full"] [data-step="morph"] .back { animation: llambda-hush 0.15s 3.2s forwards; }
.imbse-landing[data-motion="full"] [data-step="morph"] .core { animation: llambda-open 0.7s 3.2s both; }
.imbse-landing[data-motion="full"] .morph-hero .ho-name { animation: llambda-rise 1s cubic-bezier(.5, 0, .2, 1) 3.2s forwards; }
.imbse-landing[data-motion="full"] .morph-hero .eyebrow { animation: llambda-in 0.6s ease-out 4.1s both; }
.imbse-landing[data-motion="full"] .morph-hero .expansion { animation: llambda-in 0.5s ease-out 4.25s both; }
.imbse-landing[data-motion="full"] .morph-hero .statement { animation: llambda-in 0.5s ease-out 4.4s both; }
.imbse-landing[data-motion="full"] .morph-hero .example { animation: llambda-in 0.4s ease-out 4.55s both; }
.imbse-landing[data-motion="full"] .morph-hero .cue { animation: llambda-in 0.3s ease-out 4.7s both; }
/* The Scroll arrow bobs during the morph too (the story's own bob, llambda-cue 1.8 s), started 0.4 s early so it is at
   the top of its cycle at 5 s, when the story's arrow starts its first: the swap does not jump. */
.imbse-landing[data-motion="full"] .morph-hero .cue-arrow { animation-delay: -0.4s; }

/* Reduced motion: the same beats as short fades, in place; the coin's faces cross-fade instead of spinning. */
.imbse-landing[data-motion="reduced"] .reveal *, .imbse-landing[data-motion="reduced"] .continue { animation: llambda-in 0.3s ease-out both; }
.imbse-landing[data-motion="reduced"] [data-step="model"] .card { animation: llambda-in 0.4s ease-out both; }
.imbse-landing[data-motion="reduced"] [data-step="model"] .core { animation: llambda-in 0.4s ease-out 0.8s both; }
.imbse-landing[data-motion="reduced"] [data-step="model"] .wires line { animation: llambda-in 0.4s ease-out 1.4s both; }
.imbse-landing[data-motion="reduced"] [data-step="model"] .card.lit { animation: llambda-in 0.4s ease-out both, llambda-unlit 0.4s ease 2s both; }
.imbse-landing[data-motion="reduced"] [data-step="model"] .cap { animation: llambda-in 0.4s ease-out 2.4s both; }
.imbse-landing[data-motion="reduced"] [data-step="morph"] .card,
.imbse-landing[data-motion="reduced"] [data-step="morph"] .wires,
.imbse-landing[data-motion="reduced"] [data-step="morph"] .cap,
.imbse-landing[data-motion="reduced"] [data-step="morph"] .next,
.imbse-landing[data-motion="reduced"] [data-step="morph"] > .skip { animation: llambda-gone 0.4s ease-out both; }
.imbse-landing[data-motion="reduced"] [data-step="morph"] .front { animation: llambda-gone 0.4s ease-out 0.8s both; }
.imbse-landing[data-motion="reduced"] [data-step="morph"] .back { transform: none; animation: llambda-in 0.4s ease-out 0.8s both; }
.imbse-landing[data-motion="reduced"] [data-step="morph"] .core { animation: llambda-gone 0.5s ease-out 2.2s both; }
.imbse-landing[data-motion="reduced"] .morph-hero .ho-name { animation: llambda-in 0.5s ease-out 2.2s both; }
.imbse-landing[data-motion="reduced"] .morph-hero .eyebrow { animation: llambda-in 0.4s ease-out 2.8s both; }
.imbse-landing[data-motion="reduced"] .morph-hero .expansion { animation: llambda-in 0.4s ease-out 3.1s both; }
.imbse-landing[data-motion="reduced"] .morph-hero .statement { animation: llambda-in 0.4s ease-out 3.4s both; }
.imbse-landing[data-motion="reduced"] .morph-hero .example { animation: llambda-in 0.4s ease-out 3.7s both; }
.imbse-landing[data-motion="reduced"] .morph-hero .cue { animation: llambda-in 0.4s ease-out 4s both; }
.imbse-landing[data-motion="reduced"] .morph-hero .cue-arrow { animation: none; }

@keyframes llambda-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes llambda-gone { from { opacity: 1; } to { opacity: 0; } }
@keyframes llambda-dawn { from { background-color: var(--black); } }
@keyframes llambda-fold { from { left: var(--x); top: var(--y); width: var(--sw); height: var(--sh); translate: 0 0; } }
@keyframes llambda-unlit { from { box-shadow: 3px 3px 0 rgba(11, 13, 18, 0.25); } }
@keyframes llambda-arrive { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
@keyframes llambda-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes llambda-absorb { to { left: 50%; top: 42%; width: 4%; height: 4%; opacity: 0; } }
@keyframes llambda-out { to { opacity: 0; scale: 0.92; } }
@keyframes llambda-spin { from { transform: rotateY(0); } to { transform: rotateY(1980deg); } }
@keyframes llambda-hush { to { color: transparent; } }
@keyframes llambda-open { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 3.2; } }
@keyframes llambda-rise {
  from { opacity: 1; translate: var(--rise-x, 0) var(--rise-y, 0); scale: var(--rise-s, 0.4); color: var(--on-black); }
  to { opacity: 1; translate: 0 0; scale: 1; color: var(--ink); }
}