/* Shell: the site is a Claude Code session.
   Masthead on top, stage in the middle, prompt bar + statusline at the bottom.
   Clay belongs to Claude things (the prompt caret, Clawd, the scene command).
   Gold belongs to Limon and to the presenter's own emphasis (progress, focus,
   selection). The two never share an element.
   No text-transform anywhere: Turkish locale breaks English terms. */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body { height: 100%; margin: 0; }

html { background: var(--bg-deep); }

body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background 380ms var(--ease-out), color 380ms var(--ease-out);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

button { font: inherit; color: inherit; }

/* ---------- ambient field ---------- */

.bg-field,
.bg-vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bg-field {
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px calc(var(--px) * 7)),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(var(--px) * 7));
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 10%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 10%, transparent 78%);
}
.bg-vignette {
  background-image:
    radial-gradient(90% 62% at 12% -8%, color-mix(in srgb, var(--clay) 13%, transparent), transparent 66%),
    radial-gradient(78% 60% at 96% 108%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 64%);
  transition: background-image 380ms var(--ease-out);
}

.masthead,
.stage,
.dock { position: relative; z-index: 1; }

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 120;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--gold);
  color: #1b1712;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}
.skip:focus-visible { transform: translateY(0); }

.live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 22px);
  padding: clamp(11px, 0.95vw, 18px) var(--gutter) clamp(9px, 0.8vw, 15px);
}
.masthead::after {
  content: '';
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 var(--px), transparent var(--px) calc(var(--px) * 2));
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(19px, 1.35vw, 27px);
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--fg);
}
.brand-dot {
  width: calc(var(--px) * 1.4);
  height: calc(var(--px) * 1.4);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 calc(var(--px) * 0.7) var(--gold-glow);
}

.rule-v {
  width: 1px;
  height: 1.35em;
  background: repeating-linear-gradient(180deg, var(--line-strong) 0 var(--px), transparent var(--px) calc(var(--px) * 2));
}

.series {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--fg-mute);
}

.masthead-end { margin-left: auto; }
.disclaimer {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--fg-mute);
  opacity: 0.8;
}

/* ---------- stage ---------- */

.stage {
  min-height: 0;
  padding: clamp(14px, 1.5vw, 30px) var(--gutter) clamp(8px, 0.8vw, 14px);
}

.stage-grid {
  position: relative;
  display: grid;
  gap: clamp(18px, 1.7vw, 36px) clamp(20px, 2.2vw, 46px);
  height: 100%;
  min-height: 0;
  grid-template-areas: 'head' 'sim';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.head { grid-area: head; min-width: 0; position: relative; z-index: 1; }
.film { grid-area: film; min-width: 0; min-height: 0; margin: 0; }
.sim-area { grid-area: sim; min-width: 0; min-height: 0; position: relative; z-index: 1; }

/* editorial head */

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(10px, 0.9vw, 18px);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--gold);
}
.kicker-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.kicker-dot {
  width: var(--px);
  height: var(--px);
  background: currentColor;
}
.kicker-text { color: var(--fg-mute); letter-spacing: 0.08em; }

.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--title-size, var(--step-3));
  line-height: 0.98;
  letter-spacing: -0.042em;
  text-wrap: balance;
  color: var(--fg);
  max-width: var(--title-max, 18ch);
}

.lede {
  margin: clamp(10px, 1vw, 20px) 0 0;
  max-width: var(--lede-max, 44ch);
  font-size: var(--lede-size, var(--step-0));
  line-height: 1.5;
  color: var(--fg-soft);
  text-wrap: pretty;
}

/* sim area: a framed well with pixel corner ticks */

.sim-area {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fg) 4%, transparent), transparent 22%),
    color-mix(in srgb, var(--bg-deep) 74%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
  overflow: hidden;
}
.sim-area::before,
.sim-area::after {
  content: '';
  position: absolute;
  width: calc(var(--px) * 1.5);
  height: calc(var(--px) * 1.5);
  background: var(--gold);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}
.sim-area::before { top: calc(var(--px) * 1.2); left: calc(var(--px) * 1.2); }
.sim-area::after { bottom: calc(var(--px) * 1.2); right: calc(var(--px) * 1.2); }

/* Sized by fitSim() in app.js: explicit logical width/height, scaled from the
   top-left corner when the area is smaller than the sim's design minimum.
   sim.css gives .sim-root 100% x 100%; the inline size must win over that. */
.sim-host {
  position: absolute;
  top: clamp(10px, 0.9vw, 18px);
  left: clamp(10px, 0.9vw, 18px);
  transform-origin: 0 0;
}
.sim-area[data-empty='true'] .sim-host { display: none; }

.sim-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.1vw, 20px);
  text-align: center;
}
.sim-empty[hidden] { display: none; }
.sim-empty-grid {
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 9);
  background:
    repeating-linear-gradient(90deg, var(--clay) 0 var(--px), transparent var(--px) calc(var(--px) * 2)),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--clay) 45%, transparent) 0 var(--px), transparent var(--px) calc(var(--px) * 2));
  opacity: 0.55;
  animation: empty-pulse 2.6s var(--ease-in-out) infinite;
}
@keyframes empty-pulse { 50% { opacity: 0.2; } }
.sim-empty-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.035em;
  color: var(--fg);
}
.sim-empty-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--fg-mute);
}

/* ---------- film window ---------- */

.film {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.stage[data-film='off'] .film { display: none; }

.film-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-well);
  box-shadow: 0 46px 90px -44px rgba(0, 0, 0, 0.72);
  transform: rotate(var(--film-tilt, 0deg)) translateY(var(--film-shift, 0px));
  transition: transform 420ms var(--ease-out);
}
.film-frame > video,
.film-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--film-pos, 50% 50%);
  border-radius: inherit;
}
.film-frame::before {
  content: '';
  position: absolute;
  inset: calc(var(--px) * -2.2);
  background-image:
    repeating-linear-gradient(90deg, var(--line-strong) 0 var(--px), transparent var(--px) calc(var(--px) * 2)),
    repeating-linear-gradient(90deg, var(--line-strong) 0 var(--px), transparent var(--px) calc(var(--px) * 2)),
    repeating-linear-gradient(180deg, var(--line-strong) 0 var(--px), transparent var(--px) calc(var(--px) * 2)),
    repeating-linear-gradient(180deg, var(--line-strong) 0 var(--px), transparent var(--px) calc(var(--px) * 2));
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
  pointer-events: none;
}
.film-frame::after {
  content: '';
  position: absolute;
  top: calc(var(--px) * -2.2);
  left: calc(var(--px) * -2.2);
  width: calc(var(--px) * 2.5);
  height: calc(var(--px) * 2.5);
  background: var(--gold);
  pointer-events: none;
}

/* ---------- layout variants ---------- */

/* hero: oversized editorial title, the still bleeding off the right edge.
   The art has its dark negative space on the left, so the crop is right aligned
   and the headline takes the empty column the composition already leaves. */
.stage[data-layout='hero'] .stage-grid {
  --title-size: clamp(40px, 4.1vw, 78px);
  --title-max: 15ch;
  --lede-size: var(--step-0);
  --lede-max: 34ch;
  grid-template-areas: 'head film' 'sim film';
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.stage[data-layout='hero'] .film {
  margin-right: calc(var(--gutter) * -1);
  margin-block: calc(clamp(14px, 1.5vw, 30px) * -1) calc(clamp(8px, 0.8vw, 14px) * -1);
}
.stage[data-layout='hero'] .film-frame {
  --film-pos: 100% 50%;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: none;
}
.stage[data-layout='hero'] .film-frame::before {
  inset: 0 0 0 calc(var(--px) * -2.2);
  background-size: 100% 1px, 100% 1px, 1px 100%, 0 0;
}
.stage[data-layout='hero'] .film-frame::after { top: 0; left: calc(var(--px) * -2.2); }
.stage[data-layout='hero'] .head { align-self: end; }
.stage[data-layout='hero'] .title { line-height: 0.94; }
.stage[data-layout='hero'] .kicker { margin-bottom: clamp(6px, 0.6vw, 12px); }
.stage[data-layout='hero'] .lede { margin-top: clamp(8px, 0.72vw, 15px); }
.stage[data-layout='hero'][data-film='off'] .stage-grid {
  grid-template-areas: 'head' 'sim';
  grid-template-columns: minmax(0, 1fr);
}
.stage[data-layout='hero'][data-film='off'] .stage-grid { --title-max: 20ch; --lede-max: 52ch; }

/* split-left: simulation owns the left two thirds, rail on the right */
.stage[data-layout='split-left'] .stage-grid {
  --title-size: clamp(27px, 2.35vw, 45px);
  --title-max: 17ch;
  --lede-max: 32ch;
  grid-template-areas: 'sim head' 'sim film';
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 0.58fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.stage[data-layout='split-left'] .film-frame { --film-tilt: 1.15deg; }
.stage[data-layout='split-left'][data-film='off'] .stage-grid {
  grid-template-areas: 'sim head';
  grid-template-rows: minmax(0, 1fr);
}
.stage[data-layout='split-left'][data-film='off'] .head { align-self: center; }

/* split-right: mirrored */
.stage[data-layout='split-right'] .stage-grid {
  --title-size: clamp(27px, 2.35vw, 45px);
  --title-max: 17ch;
  --lede-max: 32ch;
  grid-template-areas: 'head sim' 'film sim';
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.62fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.stage[data-layout='split-right'] .film-frame { --film-tilt: -1.15deg; }
.stage[data-layout='split-right'][data-film='off'] .stage-grid {
  grid-template-areas: 'head sim';
  grid-template-rows: minmax(0, 1fr);
}
.stage[data-layout='split-right'][data-film='off'] .head { align-self: center; }

/* full: compact head strip, simulation edge to edge */
.stage[data-layout='full'] .stage-grid {
  --title-size: clamp(23px, 1.82vw, 35px);
  --title-max: 24ch;
  --lede-max: 40ch;
  grid-template-areas: 'head film' 'sim sim';
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(14px, 1.3vw, 26px) clamp(20px, 2.2vw, 46px);
}
.stage[data-layout='full'] .head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(20px, 2.4vw, 48px);
  padding-bottom: clamp(10px, 0.9vw, 18px);
  border-bottom: 1px solid var(--line);
}
.stage[data-layout='full'] .kicker { grid-column: 1; margin-bottom: 8px; }
.stage[data-layout='full'] .title { grid-column: 1; }
.stage[data-layout='full'] .lede {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin: 0;
  padding-left: clamp(18px, 1.8vw, 36px);
  border-left: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--fg-mute);
}
.stage[data-layout='full'] .film { align-self: end; }
.stage[data-layout='full'] .film-frame {
  width: clamp(178px, 15.2vw, 292px);
  aspect-ratio: 16 / 9;
  height: auto;
}

/* stack: the still becomes a large backdrop for the whole stage, the headline
   is centred on top of it and the simulation floats over it as a solid panel */
.stage[data-layout='stack'] .stage-grid {
  --title-size: clamp(29px, 2.65vw, 51px);
  --title-max: 26ch;
  --lede-max: 58ch;
  grid-template-areas: 'head' 'sim';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(12px, 1.15vw, 22px);
}
.stage[data-layout='stack'] .head { text-align: center; }
.stage[data-layout='stack'] .kicker { justify-content: center; }
.stage[data-layout='stack'] .title { margin-inline: auto; }
.stage[data-layout='stack'] .lede { margin-inline: auto; }
.stage[data-layout='stack'] .film {
  position: absolute;
  inset: calc(clamp(14px, 1.5vw, 30px) * -1) calc(var(--gutter) * -1) calc(clamp(8px, 0.8vw, 14px) * -1);
  z-index: 0;
  pointer-events: none;
}
.stage[data-layout='stack'] .film-frame {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.26;
  -webkit-mask-image: radial-gradient(120% 96% at 50% 34%, #000 18%, transparent 74%);
  mask-image: radial-gradient(120% 96% at 50% 34%, #000 18%, transparent 74%);
}
/* scrim so the headline never fights the illustration behind it */
.stage[data-layout='stack'] .film::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 52% at 50% 16%,
    var(--bg) 22%,
    color-mix(in srgb, var(--bg) 62%, transparent) 58%,
    transparent 84%);
  pointer-events: none;
}
.stage[data-layout='stack'] .film-frame::before,
.stage[data-layout='stack'] .film-frame::after { display: none; }
.stage[data-layout='stack'] .sim-area {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fg) 4%, transparent), transparent 22%),
    color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
}

/* ---------- dock: prompt bar and statusline ---------- */

.dock {
  position: relative;
  padding: clamp(8px, 0.8vw, 14px) var(--gutter) clamp(10px, 0.9vw, 16px);
}

/* The palette and the toast hang off the top edge of the prompt bar, so they
   can never slide under it no matter how tall the statusline gets. */
.dock-stack { position: relative; }

.prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--bar);
  padding: 0 clamp(14px, 1.2vw, 22px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-well) 88%, transparent);
  transition: border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}
.prompt:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px var(--gold-glow);
}
.prompt-caret {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1;
  color: var(--clay);
}
.prompt-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.01em;
}
.prompt-input:focus { outline: none; }
.prompt-input::placeholder { color: var(--fg-mute); opacity: 1; }
.prompt-keys {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-mute);
  white-space: nowrap;
}

.kbd {
  display: inline-block;
  min-width: 1.75em;
  padding: 0.1em 0.42em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  font-family: var(--font-mono);
  font-size: 0.86em;
  text-align: center;
  color: var(--fg-soft);
}

/* ---------- command palette ---------- */

.palette {
  position: absolute;
  z-index: 46;
  left: 0;
  right: 0;
  bottom: calc(100% + clamp(8px, 0.72vw, 14px));
  max-height: min(66vh, 740px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-raise) 96%, transparent);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(18px);
  transform-origin: bottom center;
  animation: palette-in 200ms var(--ease-out);
}
.palette[hidden] { display: none; }
@keyframes palette-in {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: none; }
}

.palette-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(10px, 0.9vw, 16px) clamp(14px, 1.3vw, 24px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-mute);
}
.palette-title { color: var(--fg-soft); letter-spacing: 0.08em; }
.palette-count { color: var(--gold); font-variant-numeric: tabular-nums; }
.palette-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

.palette-list {
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
}
.palette-row {
  display: grid;
  grid-template-columns: auto minmax(7ch, 0.16fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.1vw, 22px);
  padding: clamp(5px, 0.45vw, 9px) clamp(10px, 1vw, 18px);
  border-radius: var(--radius);
  border-left: calc(var(--px) * 0.6) solid transparent;
  cursor: pointer;
  color: var(--fg-soft);
}
.palette-row[aria-selected='true'] {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border-left-color: var(--gold);
  color: var(--fg);
}
.palette-row:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.p-num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--fg-mute);
}
.palette-row[aria-selected='true'] .p-num { color: var(--gold); }
.p-name {
  font-weight: 700;
  font-size: var(--step-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-title {
  font-size: var(--step--1);
  color: var(--fg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-cmd {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--clay);
  white-space: nowrap;
}
/* a chapter with no command shows a single quadrant pixel, never a dash */
.p-cmd:empty::after {
  content: '';
  display: inline-block;
  width: var(--px);
  height: var(--px);
  background: var(--line-strong);
  vertical-align: middle;
}
.palette-empty {
  padding: clamp(16px, 1.6vw, 28px);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-mute);
  text-align: center;
}

/* ---------- statusline ---------- */

.statusline {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.72vw, 14px);
  margin-top: clamp(7px, 0.7vw, 13px);
  padding: 0 clamp(6px, 0.5vw, 10px);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--fg-mute);
  white-space: nowrap;
}
.sl-clawd {
  display: inline-flex;
  align-items: center;
  width: calc(var(--px) * 8.4);
  animation: clawd-bob 3.4s var(--ease-in-out) infinite;
}
.sl-clawd .clawd { width: 100%; height: auto; display: block; }
@keyframes clawd-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--px) * -0.4)); }
}
.sl-num {
  color: var(--gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sl-name { color: var(--fg); font-weight: 700; }
.sl-cmd { color: var(--clay); }
.sl-cmd:empty { display: none; }
.sl-cmd:empty + .sl-sep { display: none; }
.sl-sep {
  width: var(--px);
  height: var(--px);
  background: var(--line-strong);
  flex: none;
}
.sl-prog {
  display: inline-flex;
  align-items: flex-end;
  gap: calc(var(--px) * 0.5);
  height: calc(var(--px) * 3);
}
.sl-tick {
  width: calc(var(--px) * 1.4);
  height: calc(var(--px) * 1.2);
  background: var(--line-strong);
  transition: height 260ms var(--ease-out), background 260ms var(--ease-out);
}
.sl-tick[data-state='done'] { background: color-mix(in srgb, var(--gold) 62%, transparent); }
.sl-tick[data-state='now'] { height: calc(var(--px) * 3); background: var(--gold); }
.sl-count { color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.sl-gap { flex: 1; }
.sl-state {
  padding: 0.18em 0.6em;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 999px;
  color: var(--gold);
}
.sl-state[hidden] { display: none; }
.sl-keys {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-mute);
}
.sl-keys .kbd { margin-left: 6px; }
.sl-keys .kbd:first-child { margin-left: 0; }

/* ---------- toast ---------- */

.toast {
  position: absolute;
  left: 0;
  bottom: calc(100% + clamp(10px, 0.9vw, 18px));
  z-index: 48;
  padding: 0.42em 0.9em;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-raise) 94%, transparent);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--gold);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.toast[data-show='true'] { opacity: 1; transform: none; }

/* ---------- drawer: notes, source, help ---------- */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: clamp(340px, 30vw, 520px);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-raise) 97%, transparent);
  box-shadow: -40px 0 90px -40px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  animation: drawer-in 280ms var(--ease-out);
}
.drawer[hidden] { display: none; }
@keyframes drawer-in {
  from { transform: translateX(22px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.drawer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: clamp(20px, 1.9vw, 34px) clamp(20px, 1.9vw, 34px) clamp(14px, 1.3vw, 22px);
  border-bottom: 1px solid var(--line);
}
.drawer-eyebrow {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--gold);
}
.drawer-title {
  grid-column: 1;
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--fg);
}
.drawer-close {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  padding: 0.28em 0.7em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-soft);
  cursor: pointer;
}
.drawer-close:hover { color: var(--fg); border-color: var(--fg-soft); }

.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(18px, 1.7vw, 30px) clamp(20px, 1.9vw, 34px) clamp(28px, 2.6vw, 48px);
  scrollbar-width: thin;
}
.drawer-body:focus { outline: none; }

.nails { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(12px, 1.1vw, 20px); }
.nails li {
  position: relative;
  padding-left: calc(var(--px) * 3.6);
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--fg);
}
.nails li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.54em;
  width: calc(var(--px) * 1.4);
  height: calc(var(--px) * 1.4);
  background: var(--gold);
}

.sheet-body {
  margin: 0 0 clamp(18px, 1.7vw, 30px);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--fg-soft);
}
.sheet-block {
  padding-top: clamp(14px, 1.3vw, 22px);
  margin-top: clamp(14px, 1.3vw, 22px);
  border-top: 1px solid var(--line);
}
.sheet-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}
.sheet-block p { margin: 0; color: var(--fg); line-height: 1.5; }
.sheet-block .ref { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-soft); overflow-wrap: anywhere; }

.help-list { margin: 0; display: grid; gap: clamp(9px, 0.82vw, 15px); }
.help-row {
  display: grid;
  grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(10px, 1vw, 20px);
}
.help-row dt { display: flex; flex-wrap: wrap; gap: 4px; }
.help-row dd { margin: 0; color: var(--fg-soft); font-size: var(--step--1); }

/* ---------- transition wipe ---------- */

.wipe {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
}
.wipe[data-active='true'] { opacity: 1; }

/* ---------- paused ---------- */

html[data-paused='true'] .sl-clawd,
html[data-paused='true'] .sim-empty-grid,
html[data-paused='true'] .film-frame video { animation-play-state: paused; }

/* ---------- laptop safety ---------- */

@media (max-height: 940px) {
  .stage[data-layout='hero'] .stage-grid { --title-size: clamp(40px, 3.9vw, 68px); }
  .stage[data-layout='stack'] .stage-grid { --title-size: clamp(30px, 2.7vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ---------- root integration pass: give the simulations the screen ----------
   The chrome was spending about 40 percent of a 1080p frame. These overrides
   keep the editorial voice but hand the height back to the sims. */
.masthead { padding-block: clamp(8px, 0.62vw, 12px) clamp(6px, 0.5vw, 10px); }
.stage { padding-top: clamp(8px, 0.8vw, 16px); padding-bottom: clamp(6px, 0.5vw, 10px); }
.dock { padding-block: clamp(6px, 0.5vw, 10px) clamp(8px, 0.6vw, 12px); }
.prompt { height: clamp(40px, 2.7vw, 52px); }
.statusline { margin-top: clamp(5px, 0.45vw, 9px); }

.stage[data-layout='full'] .stage-grid { row-gap: clamp(10px, 0.8vw, 16px); }
.stage[data-layout='full'] .head { padding-bottom: clamp(6px, 0.55vw, 11px); }
.stage[data-layout='full'] .film-frame { width: clamp(128px, 9.4vw, 180px); }

.stage[data-layout='stack'] .stage-grid {
  --title-size: clamp(25px, 2.15vw, 41px);
  --title-max: none;
  row-gap: clamp(10px, 0.85vw, 16px);
}
.stage[data-layout='stack'] .title br { display: none; }
.stage[data-layout='stack'] .kicker { margin-bottom: clamp(5px, 0.45vw, 9px); }
.stage[data-layout='stack'] .lede { margin-top: clamp(5px, 0.5vw, 10px); font-size: var(--step--1); }

.stage[data-layout='hero'] .stage-grid {
  --title-size: clamp(36px, 3.45vw, 66px);
  row-gap: clamp(12px, 1.1vw, 22px);
}