/* Walk through it. The world is a fixed canvas behind everything; the page scrolls a tall, empty track and the
   camera follows it. What sits on top is the homepage's own type, buttons and glass. Nothing that moves is blurred. */
/* The caption glow and cursor tip must never widen the mobile layout viewport.
   Keep vertical document scrolling: it drives the walk. Pinch zoom stays available. */
html { overscroll-behavior-y: none; overflow-x: clip; }
body { overflow-x: clip; transition: background-color .6s var(--ease), color .6s var(--ease); }
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#stage { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; overflow: hidden; background: var(--bg); }
#stage canvas { width: 100%; height: 100%; }
#track { position: relative; }
.stop { height: calc(var(--len) * 100vh); height: calc(var(--len) * 100lvh); }
#veil { position: fixed; inset: 0; z-index: 5; background: var(--bg); opacity: 0; pointer-events: none; }
body.is-pointing { cursor: pointer; }

/* ───────── Top bar: the name home, the theme ───────── */
.bar { position: fixed; z-index: 20; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + var(--safe-t)) var(--gutter) 0; pointer-events: none; }
.bar > * { pointer-events: auto; }
.logo { font-size: 22px; }
.theme { width: 44px; height: 44px; margin-right: -4px; border-radius: 50%; display: grid; place-items: center; transition: opacity .6s var(--ease); }
:root:not([data-ready="1"]) .theme { opacity: 0; pointer-events: none; }
/* The homepage's theme toggle, as is */
.tt { position: relative; width: 18px; height: 18px; border-radius: 50%; }
.tt-ring { position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, #ed1652, #ff6a1a, #ffb22c, #43d9ff, #8a3cff, #3a17e0, #ed1652);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 72%, transparent 100%); mask: radial-gradient(closest-side, transparent 62%, #000 72%, transparent 100%);
  transition: transform 1s var(--ease); }
.tt-disc { position: absolute; inset: 1px; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: 0 0 0 .5px rgba(10, 10, 10, .12); }
.tt-moon { position: absolute; inset: 0; border-radius: 50%; background: #05070b; transform: translateX(-115%); transition: transform .8s var(--ease-io); }
.theme:hover .tt-ring { transform: rotate(180deg); }
.bar-end { display: flex; align-items: center; gap: 2px; margin-right: -4px; }
.bar-end .theme { margin-right: 0; }
.snd { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: color .3s var(--ease), opacity .6s var(--ease); }
.snd[hidden] { display: none; }
.snd:hover { color: var(--ink); }
.snd svg { width: 19px; height: 19px; overflow: visible; }
.snd .snd-wave { transition: opacity .35s var(--ease), transform .5s var(--ease); transform-origin: 10px 10px; }
.snd .snd-x { opacity: 0; transition: opacity .35s var(--ease); }
.snd.is-muted .snd-wave { opacity: 0; transform: scale(.7); }
.snd.is-muted .snd-x { opacity: 1; }
:root:not([data-ready="1"]) .snd { opacity: 0; pointer-events: none; }
.theme[aria-pressed="true"] .tt-moon { transform: none; }

/* The theme spreads from the toggle like the homepage: a soft umbra over the finished change */
@property --umbra { syntax: '<length>'; inherits: false; initial-value: 0px; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(circle at var(--vx, 90%) var(--vy, 4%), #000 var(--umbra), transparent calc(var(--umbra) + 220px));
          mask-image: radial-gradient(circle at var(--vx, 90%) var(--vy, 4%), #000 var(--umbra), transparent calc(var(--umbra) + 220px));
  animation: umbra 1.15s var(--ease-io) both; }
@keyframes umbra { from { --umbra: -220px; } to { --umbra: 160vmax; } }

/* ───────── What's on screen at each stop ───────── */
.intro, .cap, .talk { position: fixed; z-index: 10; opacity: 0; visibility: hidden; pointer-events: none; }
.intro.is-live, .cap.is-live, .talk.is-live { pointer-events: auto; }

.intro { left: 50%; top: 57%; width: min(88vw, 600px); translate: -50% 0; text-align: center; }
.lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 14px; font-weight: 400; color: var(--ink-2); }

.cap { left: var(--gutter); bottom: calc(108px + var(--safe-b)); width: min(420px, 36vw); }
.cap.is-right { left: auto; right: var(--gutter); }
.cap.is-beside, .cap.is-beside.is-right { right: auto; bottom: auto; width: min(380px, 30vw); }
.cap::before { content: ""; position: absolute; z-index: -1; inset: -56px -80px -40px -80px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 74%, transparent) 40%, color-mix(in srgb, var(--bg) 30%, transparent) 72%, transparent); }
.cap-meta { display: flex; align-items: center; gap: 9px; }
.cap-meta i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--tone); }
.cap h2 { margin-top: 12px; font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -.022em; }
.cap-line { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }
.cap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cap-actions .btn { height: 46px; padding: 0 20px; font-size: 15px; }
.cap-actions .btn svg { width: 12px; height: 12px; transition: transform .4s var(--ease); }
.cap-actions .btn.is-primary:hover svg { transform: translateX(2px); }

.talk { left: 50%; top: 46%; width: min(92vw, 760px); translate: -50% -50%; text-align: center; transform-origin: 50% 50%; }
.talk h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(60px, 9vw, 132px); line-height: .95; letter-spacing: -.03em; word-spacing: -.04em; }
.talk h2 em { font-style: italic; letter-spacing: -.022em; }
.talk .sub { margin-top: 18px; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; }
.email { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 19px 30px 19px 26px; border-radius: 999px;
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 400; letter-spacing: -.01em; color: var(--bg); background: var(--ink);
  box-shadow: 0 8px 22px rgba(10, 10, 10, .16); transition: box-shadow .6s var(--ease); }
.email:hover { box-shadow: 0 16px 44px rgba(10, 10, 10, .26); }
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.email::before { content: ""; position: absolute; inset: -3px; border-radius: 999px; padding: 2px; opacity: 0; pointer-events: none;
  background: conic-gradient(from var(--sweep), #ed1652, #ff6a1a, #ffb22c, #43d9ff, #8a3cff, #3a17e0, #ed1652);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.talk.is-live .email::before { animation: sweep 1.8s var(--ease-io) .3s both; }
.talk.is-live .email:hover::before { animation: orbit 2.6s linear infinite; opacity: .95; }
@keyframes sweep { 0% { opacity: 0; --sweep: 0deg; } 25% { opacity: 1; } 100% { opacity: 0; --sweep: 360deg; } }
@keyframes orbit { to { --sweep: 360deg; } }
[data-theme="dark"] .email { box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.email-icon { width: 18px; height: 18px; flex: none; }
.copy { display: inline-flex; align-items: center; gap: 8px; height: 62px; padding: 0 22px 0 20px; border-radius: 999px; font-size: 14px; font-weight: 400; color: var(--ink-2);
  background: var(--glass-strong); border: 1px solid var(--glass-line); transition: color .3s var(--ease), border-color .3s var(--ease); }
.copy:hover, .copy.is-copied { color: var(--ink); }
.copy svg { width: 16px; height: 16px; flex: none; }
.linkedin { display: flex; width: max-content; align-items: center; gap: 9px; margin: 26px auto 0; font-size: 15px; font-weight: 400; color: var(--ink-2); transition: color .3s var(--ease); }
.linkedin .mark { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.linkedin .arr { width: 11px; height: 11px; transition: transform .4s var(--ease); }
.linkedin:hover { color: var(--ink); }
.linkedin:hover .arr { transform: translate(2px, -2px); }
.restart { display: flex; width: max-content; align-items: center; gap: 8px; margin: 14px auto 0; font-size: 14px; font-weight: 400; color: var(--whisper); transition: color .3s var(--ease); }
.restart svg { width: 11px; height: 11px; transition: transform .4s var(--ease); }
.restart:hover { color: var(--ink); }
.restart:hover svg { transform: translateY(-2px); }

/* ───────── Stops: back, one dash per stop, on ───────── */
.walk { position: fixed; z-index: 12; left: 50%; bottom: calc(22px + var(--safe-b)); translate: -50% 0; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; }
.walk-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: color .3s var(--ease), opacity .3s var(--ease); }
.walk-btn:hover { color: var(--ink); }
.walk-btn:disabled { opacity: .3; cursor: default; }
.walk-btn svg { width: 15px; height: 15px; flex: none; }
/* Next up: the arrow opens to say where it goes. Nudge: it pulses. */
#next { position: relative; width: auto; min-width: 40px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.next-up { display: inline-flex; align-items: baseline; gap: 6px; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: 13px; font-weight: 400;
  transition: max-width .8s var(--ease), opacity .5s var(--ease), margin .8s var(--ease); }
.next-say { color: var(--whisper); }
.next-name { color: var(--ink); }
#next.is-up { color: var(--ink); }
#next.is-up .next-up { max-width: 220px; opacity: 1; margin-right: 8px; margin-left: 4px; }
#next::after { content: ""; position: absolute; inset: 2px; border-radius: 999px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px var(--tone, var(--ink)); }
#next.is-nudge { color: var(--ink); }
#next.is-nudge::after { animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 0% { opacity: .75; transform: scale(.82); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
.dashes { list-style: none; display: flex; align-items: center; }
.dashes button { position: relative; width: 20px; height: 36px; display: grid; place-items: center; transition: width .6s var(--ease); }
.dashes button::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 20%, transparent); transition: width .6s var(--ease), background-color .6s var(--ease); }
.dashes button:hover::before { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.dashes button[aria-current="step"] { width: 34px; }
.dashes button[aria-current="step"]::before { width: 24px; background: var(--tone, var(--ink)); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 60%, transparent); outline-offset: 3px; }

/* ───────── The homepage's tip: rides above the cursor, says where a click goes ───────── */
.tip { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; color: var(--ink);
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  opacity: 0; scale: .94; transform-origin: 0% 100%; transition: opacity .35s var(--ease), scale .5s var(--ease); will-change: transform; }
.tip.is-on { opacity: .94; scale: 1; }
.tip svg { width: 12px; height: 12px; flex: none; rotate: 45deg; }
.tip.is-out svg { rotate: 0deg; }

/* ───────── Loading ───────── */
.loader { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; background: var(--bg); transition: opacity .9s var(--ease), visibility 0s linear .9s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader .ring { --size: 22px; animation: spin 1.4s linear infinite; }
@keyframes spin { to { rotate: 1turn; } }
.fail { max-width: 30em; padding: 24px; text-align: center; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.fail a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fail small { display: block; margin-top: 14px; font-size: 12px; color: var(--whisper); word-break: break-word; }
.nojs { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--bg); font-size: 16px; }
.nojs a { text-decoration: underline; }

/* ───────── Phones ───────── */
@media (max-width: 700px), (max-aspect-ratio: 9/10) {
  .cap { left: var(--gutter); right: var(--gutter); width: auto; max-width: 620px; bottom: calc(92px + var(--safe-b)); }
  .cap.is-right { right: var(--gutter); left: var(--gutter); }
  .cap h2 { font-size: clamp(34px, 5.2vw, 46px); }
  .cap-line { font-size: clamp(15px, 2vw, 17px); }
}
@media (max-width: 700px) {
  .logo { font-size: 20px; }
  .lede { font-size: 16px; }
  .hint { margin-top: 16px; }
  .cap { left: 20px; right: 20px; width: auto; bottom: calc(86px + var(--safe-b)); }
  .cap.is-right { right: 20px; left: 20px; }
  .cap h2 { font-size: 34px; margin-top: 10px; }
  .cap-line { font-size: 15px; margin-top: 8px; }
  .cap-actions { margin-top: 16px; gap: 8px; }
  .cap-actions .btn { height: 44px; padding: 0 17px; font-size: 14px; }
  .talk .sub { font-size: 16px; margin-top: 14px; padding: 0 12px; }
  .cta { flex-direction: column; gap: 10px; margin-top: 26px; }
  .email { padding: 17px 24px 17px 22px; }
  .copy { height: 48px; }
  .linkedin { margin-top: 20px; }
  .walk { bottom: calc(16px + var(--safe-b)); }
  .walk-btn { width: 38px; height: 38px; }
  .dashes button { width: 16px; }
  .dashes button::before { width: 9px; }
  .dashes button[aria-current="step"] { width: 30px; }
  .dashes button[aria-current="step"]::before { width: 20px; }
}

/* Short screens: the walk controls say what to do, so the hint goes */
@media (max-height: 640px) {
  .hint { display: none; }
}
/* A phone on its side: everything compact */
@media (max-height: 520px) and (min-aspect-ratio: 9/10) {
  .bar { padding-top: calc(10px + var(--safe-t)); }
  .logo { font-size: 19px; }
  .intro { width: min(84vw, 720px); }
  .lede { font-size: 14px; line-height: 1.5; }
  .cap { bottom: calc(66px + var(--safe-b)); width: min(400px, 42vw); }
  .cap::before { inset: -30px -50px -24px -50px; }
  .cap-meta { font-size: 12px; }
  .cap h2 { font-size: 28px; margin-top: 6px; }
  .cap-line { font-size: 14px; line-height: 1.45; margin-top: 6px; }
  .cap-actions { margin-top: 12px; gap: 8px; }
  .cap-actions .btn { height: 38px; padding: 0 15px; font-size: 13px; }
  .walk { bottom: calc(10px + var(--safe-b)); }
  .walk-btn { width: 34px; height: 34px; }
  .dashes button { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .talk.is-live .email::before, .talk.is-live .email:hover::before { animation: none; opacity: 0; }
  .loader .ring { animation-duration: 4s; }
  ::view-transition-new(root) { animation: none; }
  .tip { transition: none; }
}

/* ───────── The lab (js/world-lab.js): switches for motion, cards, glass and sound ───────── */
.bar-end { display: flex; align-items: center; gap: 6px; }
.lab-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 13px; font-weight: 400; color: var(--ink-2);
  background: var(--glass-strong); border: 1px solid var(--glass-line); transition: color .3s var(--ease), opacity .6s var(--ease); }
.lab-chip svg { width: 15px; height: 15px; flex: none; }
.lab-chip:hover, .lab-chip[aria-expanded="true"] { color: var(--ink); }
:root:not([data-ready="1"]) .lab-chip { opacity: 0; pointer-events: none; }

/* A wide screen: under the bar, on whichever side the pane isn't */
.lab-panel { position: fixed; z-index: 70; top: calc(66px + var(--safe-t)); right: var(--gutter); width: 452px; max-height: calc(100vh - 150px); max-height: calc(100svh - 150px);
  overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px 12px; border-radius: 26px;
  background: rgba(228, 230, 236, .7); border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 18px 50px rgba(10, 14, 30, .16);
  -webkit-backdrop-filter: blur(30px) saturate(1.7); backdrop-filter: blur(30px) saturate(1.7);
  transition: right .7s var(--ease), translate .7s var(--ease); }
.lab-panel.is-left { right: calc(100% - var(--gutter)); translate: 100% 0; }
[data-theme="dark"] .lab-panel { background: rgba(14, 16, 22, .7); border-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .5); }
.lab-panel[hidden] { display: none; }
.lab-top { display: flex; align-items: center; gap: 4px; }
.lab-title { flex: 1; font-family: var(--serif); font-size: 21px; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.lab-reset { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 400; color: var(--ink-2); transition: color .3s var(--ease), background-color .3s var(--ease); }
.lab-close { width: 32px; height: 32px; margin-right: -6px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: color .3s var(--ease), background-color .3s var(--ease); }
.lab-close svg { width: 14px; height: 14px; }
.lab-reset:hover, .lab-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lab-row { display: grid; grid-template-columns: 74px 1fr; align-items: start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--hair); }
.lab-top + .lab-row { border-top: 0; padding-top: 6px; }
.lab-name { display: flex; align-items: center; gap: 6px; height: 30px; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.lab-name kbd { min-width: 16px; height: 16px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 4px; font: inherit; font-size: 10px; font-weight: 500; color: var(--whisper); border: 1px solid var(--hair); }
.lab-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.lab-opts button { position: relative; height: 30px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 400; color: var(--ink-2);
  background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--glass-line); transition: color .25s var(--ease), background-color .25s var(--ease); }
.lab-opts button:hover { color: var(--ink); }
.lab-opts button[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: transparent; }
.lab-row.is-locked .lab-opts { opacity: .45; }
.lab-opts button:disabled { cursor: default; }
.lab-live { width: 5px; height: 5px; border-radius: 50%; flex: none; background: conic-gradient(#ed1652, #ff6a1a, #ffb22c, #43d9ff, #8a3cff, #3a17e0, #ed1652); }
.lab-opts .lab-live { position: absolute; top: 4px; right: 5px; }
/* The rows already decided, folded away under the ones still open */
.lab-done { border-top: 1px solid var(--hair); }
.lab-done summary { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.lab-done summary::-webkit-details-marker { display: none; }
.lab-done summary::before { content: ""; width: 6px; height: 6px; flex: none; align-self: center; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; rotate: -45deg; transition: rotate .3s var(--ease); }
.lab-done[open] summary::before { rotate: 45deg; }
.lab-done summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--whisper); }
.lab-done[open] summary span { visibility: hidden; }
.lab-note { min-height: 4.4em; padding: 10px 0 2px; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.lab-note b { font-weight: 500; color: var(--ink); }
.lab-foot { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11.5px; color: var(--whisper); }
.lab-toast { position: fixed; z-index: 71; top: calc(66px + var(--safe-t)); right: var(--gutter); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 400; color: var(--ink);
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  opacity: 0; translate: 0 -6px; pointer-events: none; transition: opacity .3s var(--ease), translate .4s var(--ease); }
.lab-toast.is-on { opacity: 1; translate: 0 0; }
/* Phones and upright screens: a sheet over the caption and the stops, so the pane above stays in view */
@media (max-width: 700px), (max-aspect-ratio: 9/10) {
  .lab-chip { height: 34px; padding: 0 12px 0 10px; }
  .lab-panel, .lab-panel.is-left { top: auto; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); width: auto; max-width: 520px; margin: 0 auto; translate: none;
    max-height: calc(100svh - 140px - var(--safe-t)); padding: 8px 14px 10px; border-radius: 24px; transition: none; }
  .lab-row { grid-template-columns: 1fr; gap: 4px; padding: 7px 0 8px; }
  .lab-row.is-wide { display: none; }
  .lab-name { height: 20px; }
  .lab-panel { background: rgba(236, 238, 243, .93); }
  [data-theme="dark"] .lab-panel { background: rgba(14, 16, 22, .93); }
  /* the sheet covers the caption and the stops, so they step aside while it's open */
  .lab-open .cap, .lab-open .walk, .lab-open .talk { visibility: hidden !important; }
  .lab-note { min-height: 0; }
  .lab-foot { display: none; }
  .lab-toast { top: calc(60px + var(--safe-t)); }
}
@media (max-height: 520px) and (min-aspect-ratio: 9/10) {
  .lab-panel { top: calc(52px + var(--safe-t)); max-height: calc(100svh - 70px); }
  .lab-note { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .lab-panel { transition: none; } }