/* Landing "Walk" — interactive side-scroll band (prefix lpw-).
   Grammar from the video template: flat tints, stepped motion, pixel dialect.
   Palette mirrors video/template-sidescroll (amber #fff1cf/#efd39a · green
   #e9f7ea/#bfe4c3) with the app's ink tokens for lines and text. */

.lpw-stage {
  position: relative; overflow: hidden; height: 430px;
  border: var(--border) solid var(--line); border-radius: var(--radius);
  background: #fff1cf; outline-offset: 2px; touch-action: pan-y;
  transition: opacity 0.5s ease;
}
.lpw-stage--reset { opacity: 0; }
.lpw-scale { position: absolute; inset: 0; transform-origin: top left; }
.lpw-world { position: absolute; top: 0; bottom: 0; left: 0; will-change: transform; }

/* environments — terrain changes first, sky follows (staggered, stepped edge) */
.lpw-sky-green { position: absolute; top: 0; bottom: 0; background: #e9f7ea;
  clip-path: polygon(72px 0, 72px 128px, 40px 128px, 40px 256px, 0 256px, 0 100%, 100% 100%, 100% 0); }
.lpw-terrain { position: absolute; left: 0; right: 0; bottom: 0; background: #efd39a; border-top: 6px solid var(--ink, #111); }
.lpw-terrain--green { right: auto; background: #bfe4c3; border-top-color: var(--ink, #111); }

/* far parallax layer — sparse, slower feel comes from being behind everything */
.lpw-far__col, .lpw-far__post { position: absolute; bottom: 96px; width: 150px;
  border: 1px solid rgba(17, 17, 17, 0.35); background: rgba(255, 255, 255, 0.42); }
.lpw-far__post { width: 110px; }

/* hint signs — the reserved lane (video rule: nothing else at this altitude) */
.lpw-sign { position: absolute; top: 34px; padding: 10px 12px; background: var(--ink, #111);
  color: var(--paper, #fff); letter-spacing: 0.1em; white-space: nowrap; }

/* Ato */
.lpw-actor { position: absolute; left: 0; top: 0; width: 96px; height: 72px; z-index: 6; }
.lpw-actor__sprite { position: absolute; inset: 0; background: center / contain no-repeat; image-rendering: pixelated; }

/* stations (activate with .is-on) */
.lpw-station { position: absolute; bottom: 96px; z-index: 3; }

.lpw-cap { display: flex; gap: 8px; align-items: center; padding: 8px 10px; margin: 8px 0;
  border: 2px solid var(--ink, #111); background: rgba(255, 255, 255, 0.9);
  font-size: 13px; white-space: nowrap; width: max-content;
  opacity: 0; transform: translateY(-140px); }
.is-on .lpw-cap { opacity: 1; transform: translateY(0); transition: transform 0.35s steps(5), opacity 0.1s linear; }
.is-on .lpw-cap--2 { transition-delay: 0.18s; }
.is-on .lpw-cap--3 { transition-delay: 0.36s; }

.lpw-shelf { border: 3px solid var(--ink, #111); background: rgba(255, 255, 255, 0.92); width: 380px; }
.lpw-shelf__label { display: block; padding: 6px 10px; background: var(--ink, #111); color: var(--paper, #fff); letter-spacing: 0.12em; }
.lpw-shelf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.lpw-slot { min-height: 44px; border: 2px dashed color-mix(in srgb, var(--ink, #111) 45%, transparent); display: flex; align-items: center; }
.lpw-slot__card { display: block; width: 100%; margin: 4px; padding: 7px 8px; border: 2px solid var(--ink, #111);
  background: var(--paper, #fff); font-size: 12.5px; line-height: 1.25;
  opacity: 0; transform: translateX(-90px); }
.is-on .lpw-slot__card { opacity: 1; transform: translateX(0); transition: transform 0.3s steps(4), opacity 0.1s linear; }
.is-on .lpw-slot[data-slot="2"] .lpw-slot__card { transition-delay: 0.22s; }
.is-on .lpw-slot[data-slot="3"] .lpw-slot__card { transition-delay: 0.44s; }
.lpw-filing__by { display: flex; gap: 8px; align-items: center; margin-top: 10px; opacity: 0; }
.is-on .lpw-filing__by { opacity: 1; transition: opacity 0.3s linear 0.7s; }

.lpw-chip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px;
  background: var(--ink, #111); color: var(--paper, #fff);
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.12em; }

.lpw-door { width: 300px; }
.lpw-door__frame { position: relative; width: 148px; height: 190px; border: 6px solid var(--ink, #111); border-bottom: none; background: rgba(255, 255, 255, 0.65); }
.lpw-door__lintel { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); padding: 4px 10px;
  background: var(--ink, #111); color: var(--paper, #fff); letter-spacing: 0.16em; }
.lpw-key { position: absolute; left: 178px; bottom: 84px; display: flex; align-items: center; gap: 6px;
  opacity: 0; transform: translateX(70px); }
.lpw-key__blade { width: 34px; height: 12px; background: var(--ink, #111); box-shadow: 10px 12px 0 -4px var(--ink, #111); }
.is-on .lpw-key { opacity: 1; transform: translateX(0); transition: transform 0.35s steps(5), opacity 0.1s linear; }
.lpw-door__visitor { position: absolute; left: 46px; bottom: 30px; opacity: 0; transform: translateX(-60px); }
.is-on .lpw-door__visitor { opacity: 1; transform: translateX(0); transition: transform 0.4s steps(6) 0.45s, opacity 0.1s linear 0.45s; }
.lpw-door__note { position: absolute; left: 180px; bottom: 34px; margin: 0; white-space: nowrap; color: #4b4b45; }

.lpw-panel { position: relative; width: 400px; padding: 18px; border: 3px solid var(--ink, #111); background: var(--paper, #fff);
  opacity: 0; transform: translateX(120px); }
.is-on .lpw-panel { opacity: 1; transform: translateX(0); transition: transform 0.4s steps(6), opacity 0.12s linear; }
.lpw-panel__kicker { display: flex; align-items: center; gap: 6px; }
.lpw-panel__title { margin: 10px 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.lpw-panel__line { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft, #444); }
.lpw-panel--cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; width: 340px; }

/* corner focus brackets — rule 11: full dwell, slow blink */
.lpw-focus { position: absolute; inset: -13px; opacity: 0; pointer-events: none; }
.lpw-focus i { position: absolute; width: 26px; height: 26px; border: 0 solid var(--ink, #111); }
.lpw-focus i:nth-child(1) { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px; }
.lpw-focus i:nth-child(2) { right: 0; top: 0; border-right-width: 3px; border-top-width: 3px; }
.lpw-focus i:nth-child(3) { left: 0; bottom: 0; border-left-width: 3px; border-bottom-width: 3px; }
.lpw-focus i:nth-child(4) { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; }
.is-on .lpw-focus { animation: lpw-blink 2s steps(1) infinite 0.5s; }
@keyframes lpw-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* controls */
.lpw-hint { position: absolute; right: 12px; top: 12px; z-index: 8; padding: 7px 10px;
  background: rgba(255, 255, 255, 0.88); border: 1px solid var(--line); border-radius: var(--radius); }
.lpw-touch { position: absolute; bottom: 14px; z-index: 8; width: 48px; height: 48px; display: none;
  align-items: center; justify-content: center; font-size: 18px; line-height: 1;
  border: 2px solid var(--ink, #111); border-radius: var(--radius); background: rgba(255, 255, 255, 0.92); color: var(--ink, #111); }
.lpw-touch--left { left: 14px; }
.lpw-touch--right { left: 72px; }
@media (pointer: coarse) { .lpw-touch { display: flex; } .lpw-hint { display: none; } }

.lpw-caption { max-width: 640px; margin: 14px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-soft, #444); }
.lpw-textline { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; margin: 10px 0 0; padding: 0;
  list-style: none; color: var(--muted, #777); }
.lpw-textline li { white-space: nowrap; }
@media (max-width: 680px) { .lpw-textline { display: none; } }

/* reduced motion: everything already activated by JS; kill transitions/blink */
@media (prefers-reduced-motion: reduce) {
  .lpw-stage, .is-on .lpw-cap, .is-on .lpw-slot__card, .is-on .lpw-key,
  .is-on .lpw-door__visitor, .is-on .lpw-panel, .is-on .lpw-filing__by { transition: none; }
  .is-on .lpw-focus { animation: none; opacity: 1; }
}

/* landing v2 additions that ride along with the walk band (hero beta line, Learn) */
.lp-hero__beta-link { display: inline-block; margin-top: 10px; text-decoration: none; }
.lp-hero__beta { color: var(--muted, #777); letter-spacing: 0.08em; }
.lp-hero__beta:empty { display: none; }
.lp-hero__beta-link:hover .lp-hero__beta { color: var(--ink, #111); }

.lp-learn { display: flex; flex-wrap: wrap; gap: var(--space-4, 20px); justify-content: center; align-items: center; }
.lp-learn__card { display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 280px;
  padding: var(--space-4, 20px); border: var(--border, 1px) solid var(--line, #ddd); border-radius: var(--radius, 6px);
  text-decoration: none; color: inherit; }
.lp-learn__card:hover { border-color: var(--ink, #111); }
.lp-learn__title { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.lp-learn__mark { position: absolute; top: 12px; right: 14px; color: var(--muted, #777); }
.lp-learn__social { display: flex; gap: 12px; align-items: baseline; }
.lp-learn__link { color: inherit; text-underline-offset: 3px; }

/* Direction A (2026-07-16): monochrome world — the video's tints stay in the
   videos; ink-on-paper here, messy→ordered carries the transition. The one
   colour allowed is the app's own grammar: an accent mark on a filed entry. */
.lpw-stage { background: #fbfaf7; }
.lpw-sky-green { background: #f5f5f2; }
.lpw-terrain { background: #eceae2; }
.lpw-terrain--green { background: #e3e3dd; }
.lpw-slot__card::before { content: ""; display: inline-block; width: 7px; height: 7px;
  background: #2f6fde; margin-right: 7px; }

/* walk-as-hero: hide the band's own heading inside the hero */
.lp-hero__walk { margin-top: 34px; }
.lp-hero__walk .lp-section__title, .lp-hero__walk .lp-section__lead { display: none; }
.lp-hero__walk .lpw { padding: 0; }

/* Lean rebuild (2026-07-16): bigger in-game type + explicit state bar */
.lpw-sign { font-size: 19px; padding: 14px 18px; }
.lpw-cap { font-size: 16px; padding: 10px 14px; }
.lpw-slot__card { font-size: 15px; }
.lpw-shelf { width: 430px; }
.lpw-shelf__label { font-size: 13px; }
.lpw-panel__title { font-size: 27px; }
.lpw-panel__line { font-size: 16px; }
.lpw-chip { font-size: 13px; }
.lpw-key__label, .lpw-door__note { font-size: 14px; }
.lpw-caption { font-size: 17px; color: var(--ink, #111); }
.lpw-state { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 8;
  background: var(--paper, #fff); border: 2px solid var(--ink, #111); padding: 10px 16px;
  font: 600 13px/1 "JetBrains Mono", monospace; letter-spacing: 0.1em; white-space: nowrap; }
.lpw-state--manual { background: var(--ink, #111); color: var(--paper, #fff); }
@media (max-width: 680px) { .lpw-state { font-size: 11px; padding: 8px 10px; bottom: 10px; } }

/* lean hero: tight, centered, the game right below */
.lp-hero--lean { padding: 46px 0 8px; }
.lp-hero--lean .lp-hero__title { max-width: 900px; margin-left: auto; margin-right: auto; }
.lp--lean .lp-hero__walk, .lp--lean .lpw { padding-top: 0; }
/* lean: the game needs no section heading, and the station list is SR/skim-only */
.lp--lean .lpw .lp-section__title, .lp--lean .lpw .lp-section__lead { display: none; }
.lp--lean .lpw-textline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* level navigation + bigger, full-bleed stage + centered plans (lean pass 2) */
.lp--lean .lpw-stage { width: 100vw; margin-left: calc(50% - 50vw); border-left: none; border-right: none; border-radius: 0; }
.lpw-level { position: absolute; bottom: 14px; z-index: 8; padding: 12px 16px;
  border: 2px solid var(--ink, #111); background: var(--paper, #fff); color: var(--ink, #111);
  font: 600 13px/1 "JetBrains Mono", monospace; letter-spacing: 0.1em; cursor: pointer; }
.lpw-level:hover { background: var(--ink, #111); color: var(--paper, #fff); }
.lpw-level--next { right: 16px; }
.lpw-level--back { right: 150px; width: 44px; text-align: center; }
@media (max-width: 680px) { .lpw-level--next { right: 10px; padding: 10px 12px; } .lpw-level--back { right: 118px; } }
.lp--lean .lp-plan-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.lp--lean #plans { text-align: center; }
.lp--lean #plans .lp-plan { text-align: left; }
/* far-layer scenery gets inner detail — no more empty outlined boxes */
.lpw-far__col i, .lpw-far__post i { display: block; height: 26px; margin: 14px 16px;
  border: 1px solid rgba(17, 17, 17, 0.28); background: rgba(255, 255, 255, 0.55); }
/* plans: two cards side by side, centered (pro inherited a full-width grid span) */
.lp--lean .lp-plan { flex: 0 1 320px; min-width: 280px; }

/* polish pass (owner review): stamp, true centering, shared rhythm */
.lp--lean .lp-plan-grid { margin-left: auto; margin-right: auto; }

/* the beta offer as a stamp, top-right of the hero */
.lp--lean .lp-hero--lean { position: relative; }
.lp--lean .lp-hero__beta-link { position: absolute; right: max(3vw, 18px); top: 6px; margin: 0; text-decoration: none; transform: rotate(5deg); }
.lp--lean .lp-hero__beta { display: inline-block; border: 2px solid var(--ink, #111); padding: 10px 14px;
  background: var(--paper, #fff); color: var(--ink, #111); font-weight: 600; letter-spacing: 0.1em; }
.lp--lean .lp-hero__beta:empty { display: none; border: none; }
.lp--lean .lp-hero__beta-link:hover { transform: rotate(0deg); }
@media (max-width: 760px) { .lp--lean .lp-hero__beta-link { position: static; display: inline-block; transform: none; margin-top: 12px; } }

/* one vertical rhythm: hero, caption, plans, footer share spacing steps */
.lp--lean .lp-hero--lean { padding: 56px 20px 16px; }
.lp--lean .lp-hero--lean .lp-hero__cta { margin-top: 26px; }
.lp--lean .lpw-caption { margin: 20px auto 0; }
.lp--lean #plans { padding-top: 72px; padding-bottom: 72px; }
.lp--lean #plans .lp-section__title { margin-bottom: 40px; }
/* horizontal line: caption + state bar + plans + hero title share the page axis */
.lp--lean .lp-hero__title { letter-spacing: -0.035em; }
.lp--lean .lpw-state { letter-spacing: 0.12em; }
.lp--lean .lpw-sign, .lp--lean .lpw-shelf__label, .lp--lean .lpw-chip { letter-spacing: 0.12em; }

/* owner fixes: no horizontal scrollbar · stamp fully visible · near-full-width dividers */
.lp--lean { overflow-x: clip; }
.lp--lean .lp-hero__beta-link { top: 22px; right: max(4vw, 24px); }
.lp--lean .lp-section, .lp--lean .lp-footer { border-top: 0; position: relative; }
.lp--lean .lp-section::before, .lp--lean .lp-footer::before { content: ""; position: absolute; top: 0;
  left: calc(50% - 48vw); width: 96vw; height: var(--border, 1px); background: var(--line-soft, #e7e7e4); }

/* full-width experiment: the lean page uses the whole browser width */
.lp--lean { max-width: none; padding: 0 3vw; }
.lp--lean .lp-hero__title { max-width: none; }
.lp--lean .lp-section::before, .lp--lean .lp-footer::before { left: calc(50% - 50vw + 3vw); width: calc(100vw - 6vw); }
.lp--lean .lpw-stage { width: calc(100vw - 6vw); margin-left: calc(50% - 50vw + 3vw); }
.lp--lean .lp-plan-grid { max-width: none; gap: 40px; }
.lp--lean .lp-plan { flex: 0 1 380px; }
.lp--lean .lp-hero__beta-link { top: 58px; }
.lp-hero__title-row { display: block; }

/* controls v2: one bar — prev · move · hop · move · next · auto; black focus ring.
   Issue 69: the bar lives in .lpw-stagewrap (sibling of the stage). Desktop keeps
   the floating-over-the-stage look; narrow screens drop it into normal flow BELOW
   the stage so it never covers the moving area. */
.lpw-stagewrap { position: relative; }
.lpw-stage:focus-visible { outline: 3px solid var(--ink, #111); outline-offset: -3px; }
.lpw-controls { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 8;
  display: flex; gap: 8px; }
.lpw-ctl { min-width: 52px; height: 52px; padding: 0 14px; border: 2px solid var(--ink, #111);
  background: var(--paper, #fff); color: var(--ink, #111); cursor: pointer;
  font: 600 14px/1 "JetBrains Mono", monospace; letter-spacing: 0.1em;
  /* iOS: kill the UA button chrome + touch artifacts so the pixel-dialect square
     buttons render identically on iPhone (issue 69). */
  appearance: none; -webkit-appearance: none; border-radius: 0;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; }
.lpw-ctl:hover { background: var(--ink, #111); color: var(--paper, #fff); }
.lpw-ctl:focus-visible { outline: 3px solid var(--ink, #111); outline-offset: 2px; }
.lpw-ctl--active { background: var(--ink, #111); color: var(--paper, #fff); }
.lpw-ctl--active:hover { background: var(--paper, #fff); color: var(--ink, #111); }
@media (max-width: 760px) {
  .lpw-controls { position: static; transform: none; margin: 10px auto 0; gap: 5px;
    flex-wrap: wrap; justify-content: center; width: fit-content; max-width: 100%; }
  .lpw-ctl { min-width: 44px; height: 44px; padding: 0 8px; font-size: 12px; }
}
.lpw-ctl:disabled { opacity: 0.35; cursor: default; }
.lpw-ctl:disabled:hover { background: var(--paper, #fff); color: var(--ink, #111); }

/* dash dust: tiny ink puffs behind Ato during level travel — very little */
.lpw-dust { position: absolute; width: 8px; height: 8px; background: var(--ink, #111); opacity: 0.22;
  animation: lpw-dust 0.42s steps(3) forwards; pointer-events: none; }
@keyframes lpw-dust { to { opacity: 0; transform: translate(-16px, -12px); } }
@media (prefers-reduced-motion: reduce) { .lpw-dust { display: none; } }

/* scenery variation: clouds · strays · pile (amber) · grids · orbit (green) */
.lpw-cloud { position: absolute; width: 92px; height: 18px; background: rgba(255,255,255,0.75);
  border: 1px solid rgba(17,17,17,0.22); }
.lpw-cloud::before { content: ""; position: absolute; left: 20px; top: -12px; width: 44px; height: 12px;
  background: rgba(255,255,255,0.75); border: 1px solid rgba(17,17,17,0.22); border-bottom: none; }
.lpw-mid { position: absolute; inset: 0; }
.lpw-stray { position: absolute; width: 11px; height: 11px; background: var(--ink, #111); opacity: 0.85; }
.lpw-stray--ground { opacity: 1; }
.lpw-pile { position: absolute; top: 402px; width: 120px; }
.lpw-pile i { position: absolute; width: 78px; height: 26px; border: 2px solid var(--ink, #111); background: rgba(255,255,255,0.9); }
.lpw-pile i:nth-child(1) { left: 0; top: 40px; }
.lpw-pile i:nth-child(2) { left: 14px; top: 18px; }
.lpw-pile i:nth-child(3) { left: 5px; top: -4px; }
.lpw-grid { position: absolute; top: 372px; display: grid; grid-template-columns: 64px 64px; gap: 8px;
  padding: 10px; border: 2px solid var(--ink, #111); background: rgba(255,255,255,0.85); }
.lpw-grid i { height: 30px; border: 2px dashed rgba(17,17,17,0.4); }
.lpw-grid i.lpw-grid__filled { border: 2px solid var(--ink, #111); position: relative; }
.lpw-grid i.lpw-grid__filled::after { content: ""; position: absolute; left: 5px; top: 5px; width: 7px; height: 7px; background: #2f6fde; }
.lpw-orbit { position: absolute; width: 64px; height: 64px; border: 5px solid var(--ink, #111);
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.6); }
.lpw-orbit b { width: 18px; height: 18px; background: var(--ink, #111); }

/* level 5: the feature gallery — 20 pixel plaques, motifs not paragraphs */
.lpw-gallery { display: grid; grid-template-columns: repeat(10, 118px); gap: 10px; }
.lpw-tile { height: 96px; border: 2px solid var(--ink, #111); background: rgba(255,255,255,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  opacity: 0; transform: translateY(26px); }
.is-on .lpw-tile { opacity: 1; transform: none; transition: transform 0.28s steps(4), opacity 0.1s linear; }
.lpw-tile__label { font: 600 10.5px/1.2 "JetBrains Mono", monospace; letter-spacing: 0.06em; text-align: center; padding: 0 4px; }
.lpw-motif { position: relative; width: 30px; height: 26px; display: block; }
.lpw-motif i { position: absolute; background: var(--ink, #111); }
.lpw-motif--door i:nth-child(1) { left: 4px; top: 2px; width: 22px; height: 4px; }
.lpw-motif--door i:nth-child(2) { left: 4px; top: 2px; width: 4px; height: 24px; }
.lpw-motif--door i:nth-child(3) { left: 22px; top: 2px; width: 4px; height: 24px; }
.lpw-motif--grid i:nth-child(1) { left: 2px; top: 3px; width: 11px; height: 9px; }
.lpw-motif--grid i:nth-child(2) { left: 17px; top: 3px; width: 11px; height: 9px; }
.lpw-motif--grid i:nth-child(3) { left: 2px; top: 16px; width: 11px; height: 9px; background: #2f6fde; }
.lpw-motif--eye i:nth-child(1) { left: 1px; top: 6px; width: 28px; height: 14px; background: none; border: 3px solid var(--ink, #111); }
.lpw-motif--eye i:nth-child(2) { left: 12px; top: 10px; width: 7px; height: 7px; }
.lpw-motif--bubble i:nth-child(1) { left: 2px; top: 2px; width: 26px; height: 16px; background: none; border: 3px solid var(--ink, #111); }
.lpw-motif--bubble i:nth-child(2) { left: 7px; top: 18px; width: 6px; height: 6px; }
.lpw-motif--stack i:nth-child(1) { left: 6px; top: 2px; width: 20px; height: 5px; }
.lpw-motif--stack i:nth-child(2) { left: 3px; top: 11px; width: 20px; height: 5px; }
.lpw-motif--stack i:nth-child(3) { left: 6px; top: 20px; width: 20px; height: 5px; }
.lpw-motif--clock i:nth-child(1) { left: 2px; top: 0; width: 26px; height: 26px; background: none; border: 3px solid var(--ink, #111); }
.lpw-motif--clock i:nth-child(2) { left: 14px; top: 7px; width: 3px; height: 8px; }
.lpw-motif--clock i:nth-child(3) { left: 14px; top: 13px; width: 8px; height: 3px; }
.lpw-motif--key i:nth-child(1) { left: 1px; top: 9px; width: 18px; height: 6px; }
.lpw-motif--key i:nth-child(2) { left: 19px; top: 9px; width: 4px; height: 12px; }
.lpw-motif--key i:nth-child(3) { left: 25px; top: 9px; width: 4px; height: 9px; }
.lpw-motif--tray i:nth-child(1) { left: 2px; top: 12px; width: 26px; height: 10px; background: none; border: 3px solid var(--ink, #111); border-top: none; }
.lpw-motif--tray i:nth-child(2) { left: 12px; top: 1px; width: 6px; height: 12px; }
.lpw-motif--back i:nth-child(1) { left: 3px; top: 10px; width: 22px; height: 5px; }
.lpw-motif--back i:nth-child(2) { left: 3px; top: 5px; width: 7px; height: 7px; clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.lpw-motif--back i:nth-child(3) { left: 20px; top: 15px; width: 5px; height: 8px; }
.lpw-motif--chips i:nth-child(1) { left: 0; top: 8px; width: 8px; height: 10px; }
.lpw-motif--chips i:nth-child(2) { left: 11px; top: 4px; width: 8px; height: 14px; }
.lpw-motif--chips i:nth-child(3) { left: 22px; top: 8px; width: 8px; height: 10px; }
.lpw-motif--orbit i:nth-child(1) { left: 2px; top: 0; width: 26px; height: 26px; background: none; border: 3px solid var(--ink, #111); }
.lpw-motif--orbit i:nth-child(2) { left: 11px; top: 9px; width: 8px; height: 8px; }
.lpw-motif--spark { font-size: 22px; line-height: 26px; text-align: center; }
.lpw-gallery__note { grid-column: 1 / -1; text-align: center; margin: 6px 0 0; color: #4b4b45; letter-spacing: 0.1em; }

/* cloud variants + slow drift, each at its own speed (inline animation-duration) */
.lpw-cloud { animation: lpw-drift 60s linear infinite alternate; }
.lpw-cloud--s { width: 58px; height: 14px; }
.lpw-cloud--s::before { left: 12px; top: -9px; width: 26px; height: 9px; }
.lpw-cloud--l { width: 138px; height: 22px; }
.lpw-cloud--l::before { left: 26px; top: -14px; width: 62px; height: 14px; }
.lpw-cloud--l::after { content: ""; position: absolute; right: 18px; top: -9px; width: 34px; height: 9px;
  background: rgba(255,255,255,0.75); border: 1px solid rgba(17,17,17,0.22); border-bottom: none; }
@keyframes lpw-drift { from { transform: translateX(0); } to { transform: translateX(-340px); } }
@media (prefers-reduced-motion: reduce) { .lpw-cloud { animation: none; } }

/* background elements recede: grey lines only, no ink borders in the scenery */
.lpw-pile i { border-color: rgba(17,17,17,0.3); background: rgba(255,255,255,0.7); }
.lpw-grid { border-color: rgba(17,17,17,0.3); background: rgba(255,255,255,0.65); }
.lpw-grid i { border-color: rgba(17,17,17,0.22); }
.lpw-grid i.lpw-grid__filled { border-color: rgba(17,17,17,0.4); }
.lpw-grid i.lpw-grid__filled::after { opacity: 0.55; }
.lpw-orbit { border-color: rgba(17,17,17,0.3); background: rgba(255,255,255,0.5); }
.lpw-orbit b { background: rgba(17,17,17,0.35); }
.lpw-stray { opacity: 0.4; }
.lpw-stray--ground { opacity: 0.5; }

/* level 1: the hub — one house, every agent docks */
.lpw-hub__crest { position: relative; width: 44px; height: 44px; margin: 0 auto 10px;
  border: 4px solid var(--ink, #111); background: var(--paper, #fff);
  display: flex; align-items: center; justify-content: center; }
.lpw-hub__crest b { width: 12px; height: 12px; background: var(--ink, #111); }
.lpw-hub__house { width: 320px; border: 4px solid var(--ink, #111); background: rgba(255,255,255,0.94);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.lpw-socket { height: 52px; border: 2px dashed rgba(17,17,17,0.45); display: flex; align-items: center; justify-content: center; }
.lpw-socket__chip { opacity: 0; transform: translateX(-170px); }
.is-on .lpw-socket__chip { opacity: 1; transform: none; transition: transform 0.35s steps(5), opacity 0.1s linear; }
.is-on .lpw-socket[data-dock="2"] .lpw-socket__chip { transition-delay: 0.3s; transform: none; }
.is-on .lpw-socket[data-dock="3"] .lpw-socket__chip { transition-delay: 0.6s; }
.lpw-socket__chip .lpw-chip { font-size: 14px; padding: 8px 12px; }
.lpw-socket--open .lpw-socket__plus { font: 600 22px/1 "JetBrains Mono", monospace; color: rgba(17,17,17,0.45); }
.is-on .lpw-socket { transition: border-color 0.2s linear; }
.is-on .lpw-socket:not(.lpw-socket--open) { border: 2px solid var(--ink, #111); }

/* level 1 v2: quiet grey info text + Ato's cart that the agents fly into */
.lpw-leveltext { width: 400px; margin: 0; font: 400 16px/1.65 Inter, Arial, sans-serif; color: #555; }
.lpw-leveltext b { display: block; font-weight: 650; color: #333; margin-bottom: 6px; }
.lpw-l1 { bottom: 200px; }
.lpw-acart { position: absolute; left: -164px; bottom: 0; width: 150px; height: 74px; }
.lpw-acart__tether { position: absolute; right: -16px; bottom: 14px; width: 18px; height: 5px; background: var(--ink, #111); }
.lpw-acart__bed { position: absolute; left: 0; bottom: 12px; width: 132px; height: 54px;
  border: 3px solid var(--ink, #111); background: rgba(255,255,255,0.92);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 3px; gap: 2px; overflow: hidden; }
.lpw-acart__chip { opacity: 0; transform: translateY(-140px); align-self: center; }
.lpw-acart__chip .lpw-chip { font-size: 9px; padding: 2px 6px; letter-spacing: 0.1em; }
.is-filled .lpw-acart__chip { opacity: 1; transform: none; transition: transform 0.4s steps(5), opacity 0.1s linear; }
.lpw-acart__wheel { position: absolute; bottom: 0; width: 16px; height: 16px; background: var(--ink, #111); }
.lpw-acart__wheel--l { left: 18px; } .lpw-acart__wheel--r { left: 96px; }
.lpw-acart__wheel b { position: absolute; left: 10px; top: 6px; width: 4px; height: 4px; background: var(--paper, #fff); }
.lpw-leveltext { width: auto; max-width: 440px; font-size: 17px; line-height: 1.5; color: #5a5a55; text-align: center; }

/* level 1 v3: labeled boxes fall into the cart; cart shows plain black boxes */
.lpw-l1 .lpw-leveltext { position: absolute; left: 118px; bottom: 212px; width: max-content; max-width: none;
  font: 500 13px/1 "JetBrains Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase;
  color: #75756e; white-space: nowrap; }
.lpw-l1box { position: absolute; background: var(--ink, #111); color: var(--paper, #fff);
  padding: 8px 10px; font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.12em; }
.lpw-l1box--fall { transform: translateY(var(--fall)); opacity: 0;
  transition: transform 0.7s steps(9), opacity 0.18s linear;
  transition-delay: 0s, 0.6s; }
.lpw-acart__bed { flex-direction: row; align-items: flex-end; justify-content: center; gap: 5px; }
.lpw-acart__box { width: 15px; height: 15px; background: var(--ink, #111);
  opacity: 0; transform: translateY(-60px); }
.lpw-acart__box--in { opacity: 1; transform: none; transition: transform 0.3s steps(4), opacity 0.08s linear; }

/* level 2: messy scraps get filed into a clean grid, signed */
.lpw-l2 .lpw-leveltext { position: absolute; left: 118px; bottom: 212px; width: max-content;
  font: 500 13px/1 "JetBrains Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase;
  color: #75756e; white-space: nowrap; }
.lpw-scrap { position: absolute; width: 46px; height: 30px; border: 2px solid rgba(17,17,17,0.75);
  background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 "JetBrains Mono", monospace; }
.is-on .lpw-scrap { transform: translate(var(--tx), var(--ty)); transition: transform 0.5s steps(7) var(--d, 0s); }
.lpw-l2grid { position: absolute; bottom: 54px; display: grid; grid-template-columns: 66px 66px; gap: 10px;
  padding: 12px; border: 3px solid var(--ink, #111); background: rgba(255,255,255,0.9); }
.lpw-l2grid i { height: 40px; border: 2px dashed rgba(17,17,17,0.4); transition: border-color 0.15s linear; }
.is-on .lpw-l2grid i:nth-child(1) { transition-delay: 1.15s; }
.is-on .lpw-l2grid i:nth-child(2) { transition-delay: 1.7s; }
.is-on .lpw-l2grid i:nth-child(3) { transition-delay: 2.25s; }
.is-on .lpw-l2grid i:nth-child(1), .is-on .lpw-l2grid i:nth-child(2), .is-on .lpw-l2grid i:nth-child(3) { border: 2px solid var(--ink, #111); }
.lpw-l2worker { position: absolute; left: 300px; bottom: 96px; width: 16px; height: 16px; background: var(--ink, #111); opacity: 0; }
.is-on .lpw-l2worker { animation: lpw-l2hop 0.55s steps(7) 0.15s forwards; }
@keyframes lpw-l2hop { from { opacity: 1; transform: translate(-260px, -60px); } 60% { opacity: 1; transform: translate(-90px, -110px); } to { opacity: 1; transform: translate(0, 84px); } }
.lpw-l2sig { position: absolute; left: 356px; bottom: 16px; display: flex; gap: 8px; align-items: center; opacity: 0; white-space: nowrap; }
.is-on .lpw-l2sig { opacity: 1; transition: opacity 0.25s linear 2.6s; }
.lpw-chip2 { background: var(--ink, #111); color: var(--paper, #fff); padding: 4px 8px;
  font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: 0.12em; }
.lpw-l2sig__t { font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.1em; color: #75756e; text-transform: uppercase; }

/* shared level text style + level 3: the knowledge constellation */
.lpw-station .lpw-leveltext { position: absolute; left: 118px; bottom: 212px; width: max-content; max-width: none;
  font: 500 13px/1 "JetBrains Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase;
  color: #75756e; white-space: nowrap; }
.lpw-l3node { position: absolute; width: 44px; height: 34px; border: 2px solid var(--ink, #111);
  background: var(--paper, #fff); display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 "JetBrains Mono", monospace; color: #4b4b45; }
.lpw-l3node--hit::after { content: ""; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px;
  background: #2f6fde; opacity: 0; }
.is-on .lpw-l3node--hit::after { opacity: 1; transition: opacity 0.2s linear var(--d, 2.4s); }
.lpw-l3link { position: absolute; background: var(--ink, #111); }
.lpw-l3link--h { transform: scaleX(0); transform-origin: left center; }
.lpw-l3link--v { transform: scaleY(0); transform-origin: center bottom; }
.is-on .lpw-l3link--h { transform: scaleX(1); transition: transform 0.45s steps(6) var(--d, 0s); }
.is-on .lpw-l3link--v { transform: scaleY(1); transition: transform 0.45s steps(6) var(--d, 0s); }
.lpw-l3spark { position: absolute; font-size: 18px; color: var(--ink, #111); opacity: 0; }
.is-on .lpw-l3spark { opacity: 1; transition: opacity 0.25s steps(2) 2.7s; }

/* level 4: chats stream into one archive */
.lpw-l4bub { position: absolute; width: 40px; height: 28px; border: 2px solid var(--ink, #111);
  background: var(--paper, #fff); display: flex; align-items: center; justify-content: center;
  font-size: 11px; }
.lpw-l4bub::after { content: ""; position: absolute; left: 6px; bottom: -8px; width: 6px; height: 6px; background: var(--ink, #111); }
.is-on .lpw-l4bub { transform: translate(var(--tx), var(--ty)) scale(0.6); opacity: 0;
  transition: transform 0.55s steps(7) var(--d, 0s), opacity 0.15s linear calc(var(--d, 0s) + 0.5s); }
.lpw-l4box { position: absolute; width: 150px; border: 3px solid var(--ink, #111); background: rgba(255,255,255,0.92);
  padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.lpw-l4box__label { align-self: flex-start; background: var(--ink, #111); color: var(--paper, #fff);
  padding: 4px 7px; font: 600 9px/1 "JetBrains Mono", monospace; letter-spacing: 0.12em; }
.lpw-l4box i { height: 18px; border: 2px dashed rgba(17,17,17,0.4); }
.is-on .lpw-l4box i { border-style: solid; border-color: var(--ink, #111); }
.is-on .lpw-l4box i:nth-of-type(1) { transition: border-color 0.15s linear 1.05s; }
.is-on .lpw-l4box i:nth-of-type(2) { transition: border-color 0.15s linear 1.55s; }
.is-on .lpw-l4box i:nth-of-type(3) { transition: border-color 0.15s linear 2.05s; }

/* level 5: text lines write themselves, labels attach */
.lpw-l5card { position: absolute; width: 190px; padding: 16px 14px; border: 3px solid var(--ink, #111);
  background: var(--paper, #fff); display: flex; flex-direction: column; gap: 14px; }
.lpw-l5line { height: 8px; background: rgba(17,17,17,0.55); transform: scaleX(0); transform-origin: left center; }
.is-on .lpw-l5line { transform: scaleX(1); transition: transform 0.5s steps(8) var(--d, 0s); }
.lpw-l5tag { position: absolute; display: flex; align-items: center; gap: 4px; opacity: 0; transform: translateX(90px); }
.lpw-l5tag b { width: 9px; height: 9px; background: #2f6fde; }
.lpw-l5tag i { width: 34px; height: 8px; background: var(--ink, #111); }
.lpw-l5tag:nth-of-type(2) b { background: var(--ink, #111); }
.lpw-l5tag:nth-of-type(3) b { background: var(--ink, #111); }
.is-on .lpw-l5tag { opacity: 1; transform: none; transition: transform 0.35s steps(5) var(--d, 0s), opacity 0.1s linear var(--d, 0s); }

/* level 6: curation — the stale refreshes, the duplicates merge */
.lpw-l6shelf { position: absolute; display: flex; gap: 12px; padding: 12px; border: 3px solid var(--ink, #111);
  background: rgba(255,255,255,0.9); }
.lpw-l6card { width: 54px; height: 72px; border: 2px solid var(--ink, #111); background: var(--paper, #fff); }
.lpw-l6card--stale { opacity: 0.3; }
.is-on .lpw-l6card--stale { opacity: 1; transition: opacity 0.4s steps(4) 1.1s; }
.lpw-l6card--dupB { margin-left: -46px; transform: translateX(10px); }
.is-on .lpw-l6card--dupB { transform: translateX(0); opacity: 0; transition: transform 0.4s steps(5) 1.9s, opacity 0.12s linear 2.25s; }
.lpw-l6done { position: absolute; display: flex; gap: 8px; align-items: center; opacity: 0; white-space: nowrap; }
.is-on .lpw-l6done { opacity: 1; transition: opacity 0.25s linear 2.7s; }

/* level 7: chips converge on one doc */
.lpw-l7doc { position: absolute; width: 150px; padding: 14px 12px; border: 3px solid var(--ink, #111);
  background: var(--paper, #fff); display: flex; flex-direction: column; gap: 12px; }
.lpw-l7doc i { height: 7px; background: rgba(17,17,17,0.5); }
.lpw-l7chip { position: absolute; opacity: 0; transform: translate(var(--fx), var(--fy)); }
.is-on .lpw-l7chip { opacity: 1; transform: none; transition: transform 0.5s steps(7) var(--d, 0s), opacity 0.12s linear var(--d, 0s); }
.lpw-l7note { position: absolute; width: 26px; height: 8px; background: #2f6fde; opacity: 0; }
.lpw-l7note:nth-of-type(2) { background: var(--ink, #111); }
.is-on .lpw-l7note { opacity: 1; transition: opacity 0.2s steps(2) var(--d, 2s); }

/* level 8: blueprint → structure */
.lpw-l8frame { position: absolute; width: 220px; border: 3px solid var(--ink, #111); background: rgba(255,255,255,0.92); padding: 10px; }
.lpw-l8grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.lpw-l8cell { height: 44px; border: 2px dashed rgba(17,17,17,0.4); background: none; }
.is-on .lpw-l8cell { border-style: solid; border-color: var(--ink, #111); background: var(--paper, #fff); transition: border-color 0.2s linear var(--d, 0s), background 0.2s linear var(--d, 0s); }
.lpw-l8guide { position: absolute; font: 500 11px/1.5 "JetBrains Mono", monospace; letter-spacing: 0.1em;
  color: #75756e; text-transform: uppercase; opacity: 0; width: 150px; }
.is-on .lpw-l8guide { opacity: 1; transition: opacity 0.25s linear var(--d, 2.3s); }

/* level 9: the night shift */
.lpw-l9night { position: absolute; left: -80px; bottom: 0; width: 640px; height: 430px; background: rgba(17,17,17,0.06); }
.lpw-l9moon { position: absolute; right: 60px; top: 40px; width: 26px; height: 26px; background: var(--ink, #111);
  clip-path: polygon(0 0, 60% 0, 60% 40%, 100% 40%, 100% 100%, 0 100%); opacity: 0.75; }
.lpw-l9zz { position: absolute; font: 600 14px/1 "JetBrains Mono", monospace; letter-spacing: 0.3em; color: #75756e; }
.lpw-l9jobs { position: absolute; width: 240px; display: flex; flex-direction: column; gap: 12px; padding: 12px;
  border: 3px solid var(--ink, #111); background: rgba(255,255,255,0.94); }
.lpw-l9job__t { font: 500 10px/1 "JetBrains Mono", monospace; letter-spacing: 0.14em; color: #75756e; text-transform: uppercase; }
.lpw-l9job__bar { display: block; height: 8px; margin-top: 4px; background: var(--ink, #111); transform: scaleX(0); transform-origin: left center; }
.is-on .lpw-l9job__bar { transform: scaleX(1); transition: transform 0.9s steps(12) var(--d, 0s); }

/* level 11: the reviewable proposal */
.lpw-l11old { height: 8px; width: 170px; background: rgba(17,17,17,0.5); position: relative; }
.is-on .lpw-l11old { opacity: 0.25; transition: opacity 0.3s linear 1.0s; }
.lpw-l11new { height: 8px; width: 170px; background: #2f6fde; transform: scaleX(0); transform-origin: left center; }
.is-on .lpw-l11new { transform: scaleX(1); transition: transform 0.5s steps(8) var(--d, 1s); }
.lpw-l11accept { position: absolute; border: 2px solid var(--ink, #111); background: var(--paper, #fff);
  padding: 8px 11px; font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: 0.12em; opacity: 0; white-space: nowrap; }
.is-on .lpw-l11accept { opacity: 1; transition: opacity 0.25s linear var(--d, 1.9s); }

/* level 12: self-drawing flowchart */
.lpw-l12node { position: absolute; width: 56px; height: 32px; border: 3px solid var(--ink, #111);
  background: var(--paper, #fff); opacity: 0; }
.lpw-l12node--q { width: 44px; height: 40px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--ink, #111); border: none; }
.is-on .lpw-l12node { opacity: 1; transition: opacity 0.2s steps(2) var(--d, 0s); }

/* level 13: version stack + restore */
.lpw-l13stack { position: absolute; width: 190px; display: flex; flex-direction: column; gap: 8px; }
.lpw-l13row { border: 2px solid var(--ink, #111); background: var(--paper, #fff); padding: 9px 10px;
  font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; transform: translateY(-16px); }
.is-on .lpw-l13row { opacity: 1; transform: none; transition: transform 0.3s steps(4) var(--d, 0s), opacity 0.1s linear var(--d, 0s); }
.lpw-l13row--top { background: var(--ink, #111); color: var(--paper, #fff); }
.lpw-l13undo { position: absolute; font: 600 13px/1 "JetBrains Mono", monospace; letter-spacing: 0.12em;
  color: #75756e; text-transform: uppercase; opacity: 0; }
.is-on .lpw-l13undo { opacity: 1; transition: opacity 0.25s linear var(--d, 2s); }

/* level 14: the orbital map */
.lpw-l14ring { position: absolute; border: 3px solid rgba(17,17,17,0.45); opacity: 0; }
.is-on .lpw-l14ring { opacity: 1; transition: opacity 0.3s steps(3) var(--d, 0s); }
.lpw-l14dot { position: absolute; width: 10px; height: 10px; background: var(--ink, #111); opacity: 0; }
.lpw-l14dot--hot { background: #2f6fde; }
.is-on .lpw-l14dot { opacity: 1; transition: opacity 0.2s steps(2) var(--d, 0s); }

/* level 15 v2: three plaques + ghosts trailing off */
.lpw-l15row { position: absolute; display: flex; gap: 12px; align-items: center; }
.lpw-l15row .lpw-tile { width: 118px; opacity: 0; transform: translateY(26px); }
.is-on .lpw-l15row .lpw-tile { opacity: 1; transform: none; transition: transform 0.3s steps(4), opacity 0.1s linear; }
.lpw-tile--ghost { border-style: dashed; border-color: rgba(17,17,17,0.35); background: none; }
.is-on .lpw-l15row .lpw-tile--ghost { opacity: var(--g, 0.2); }
.lpw-l15more { background: var(--ink, #111); color: var(--paper, #fff); padding: 10px 12px;
  font: 600 12px/1 "JetBrains Mono", monospace; letter-spacing: 0.14em; opacity: 0; white-space: nowrap; }
.is-on .lpw-l15more { opacity: 1; transition: opacity 0.25s steps(2); }

/* level 6 v2: the stale card revives — one act, no overlap */
.lpw-l6row { position: absolute; display: flex; gap: 26px; padding: 14px; border: 3px solid var(--ink, #111); background: rgba(255,255,255,0.94); }
.lpw-l6c { width: 66px; height: 88px; border: 3px solid var(--ink, #111); background: var(--paper, #fff); position: relative; }
.lpw-l6c--stale { opacity: 0.22; }
.is-on .lpw-l6c--stale { opacity: 1; transition: opacity 0.6s steps(3) 1.0s; }
.lpw-l6c--stale::after { content: ""; position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; background: #2f6fde; opacity: 0; }
.is-on .lpw-l6c--stale::after { opacity: 1; transition: opacity 0.2s linear 1.7s; }
.lpw-l6worker { position: absolute; width: 16px; height: 16px; background: var(--ink, #111); opacity: 0; }
.is-on .lpw-l6worker { animation: lpw-l6drop 0.5s steps(6) 0.35s forwards; }
@keyframes lpw-l6drop { from { opacity: 1; transform: translateY(-120px); } to { opacity: 1; transform: translateY(0); } }
.lpw-l6sig { opacity: 0; white-space: nowrap; display: flex; gap: 8px; align-items: center; position: absolute; }
.is-on .lpw-l6sig { opacity: 1; transition: opacity 0.25s linear 2.1s; }

/* level 7 v2: one doc, chips docked, marks ON the lines */
.lpw-l7doc { width: 220px; }
.lpw-l7doc i { height: 8px; }
.lpw-l7mark { position: absolute; height: 8px; background: #2f6fde; opacity: 0; }
.lpw-l7mark--ink { background: var(--ink, #111); }
.is-on .lpw-l7mark { opacity: 1; transition: opacity 0.2s steps(2) var(--d, 1.5s); }
.lpw-l7stub { position: absolute; background: var(--ink, #111); opacity: 0; }
.is-on .lpw-l7stub { opacity: 1; transition: opacity 0.2s linear var(--d, 1.2s); }

/* level 8 v2: cards visibly drop into the blueprint cells */
.lpw-l8cell { position: relative; overflow: visible; }
.is-on .lpw-l8cell { border-style: dashed; border-color: rgba(17,17,17,0.4); background: none; transition: none; }
.lpw-l8cell b { position: absolute; inset: 3px; background: var(--paper, #fff); border: 3px solid var(--ink, #111);
  opacity: 0; transform: translateY(-70px); }
.is-on .lpw-l8cell b { opacity: 1; transform: none; transition: transform 0.4s steps(5) var(--d, 0s), opacity 0.1s linear var(--d, 0s); }

/* info text raised above every level's action zone (readable before/during/after) */
.lpw-world .lpw-station .lpw-leveltext { left: 150px; bottom: 342px; z-index: 5; }

/* per-level text placement: each line sits in free space near its animation */
.lpw-world .lpw-l1 .lpw-leveltext  { left: 150px; bottom: 262px; }
.lpw-world .lpw-l2 .lpw-leveltext  { left: 60px;  bottom: 286px; }
.lpw-world .lpw-l3 .lpw-leveltext  { left: 40px;  bottom: 336px; }
.lpw-world .lpw-l4 .lpw-leveltext  { left: 310px; bottom: 244px; }
.lpw-world .lpw-l5 .lpw-leveltext  { left: 120px; bottom: 258px; }
.lpw-world .lpw-l6 .lpw-leveltext  { left: 110px; bottom: 284px; }
.lpw-world .lpw-l7 .lpw-leveltext  { left: 404px; bottom: 148px; }
.lpw-world .lpw-l8 .lpw-leveltext  { left: 356px; bottom: 204px; }
.lpw-world .lpw-l9 .lpw-leveltext  { left: 60px;  bottom: 282px; }
.lpw-world .lpw-l10 .lpw-leveltext { left: 90px;  bottom: 302px; }
.lpw-world .lpw-l11 .lpw-leveltext { left: 120px; bottom: 256px; }
.lpw-world .lpw-l12 .lpw-leveltext { left: 90px;  bottom: 300px; }
.lpw-world .lpw-l13 .lpw-leveltext { left: 130px; bottom: 282px; }
.lpw-world .lpw-l14 .lpw-leveltext { left: 300px; bottom: 222px; }
.lpw-world .lpw-l15 .lpw-leveltext { left: 40px;  bottom: 242px; }
.lpw-world .lpw-l16 .lpw-leveltext { left: 60px;  bottom: 312px; }
/* review fix: L1 station back on the base line (legacy 200px lift removed) */
.lpw-l1 { bottom: 96px; }