:root {
  --deep: #10030a;
  --mid: #3a0818;
  --red: #8e1530;
  --l0: #b3263f;
  --l1: #d4405a;
  --l2: #4e0a1f;
  --fg: #f4e9ea;
  --muted: #d8c3c7;
  --dim: #bfa3a8;
  --line: #3a1520;
  --accent: #e0566e;
  /* Accent for text: the ruby lifted until it reads at 4.5:1 over the darkened photo (--accent stays for fills and rules). */
  --accent-ink: #f3889a;
  --glass-tint: rgba(179, 38, 63, 0.1);
  --glass-edge: rgba(255, 214, 222, 0.42);
  --glass-rim: rgba(255, 255, 255, 0.08);
  --plate: color-mix(in srgb, var(--deep) 84%, transparent);
  --ft: #f05a0e;
  --paper: #f3efe9;
  --text: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --spec-font: var(--mono);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --pad: 48px;
  --max: 1240px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--deep); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--deep); color: var(--fg); font: 400 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; font-variant-numeric: tabular-nums;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, h4, figure, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: none) { * { -webkit-tap-highlight-color: transparent; } }
::selection { background: var(--accent); color: var(--deep); }

#tide { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--deep); }
/* A veil per chapter over the photo: none on the home, more where the content is busiest (Music & Film). */
#tide::after { content: ''; position: absolute; inset: 0; background: var(--deep); opacity: var(--bg-veil, 0); transition: opacity .8s ease; }
#ink { position: fixed; left: 0; top: 0; z-index: 100; display: none; image-rendering: pixelated; pointer-events: none; }
#ink.on { display: block; }
main { position: relative; z-index: 1; }

/* ---------- Type: 13 / 16 / 20 / 32 / 56, sans for reading, mono only for data ---------- */
h1, h2 { font: 600 56px/1.02 var(--text); letter-spacing: -0.025em; text-wrap: balance; }
h3 { font: 600 32px/1.1 var(--text); letter-spacing: -0.02em; text-wrap: balance; }
h4 { font: 600 20px/1.25 var(--text); letter-spacing: -0.01em; }
.kicker { font: 500 13px/1.3 var(--text); color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kicker .mono { font-size: 13px; color: var(--accent-ink); }
.kicker .tail { margin-left: auto; color: var(--dim); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ft)); display: inline-block; flex: none; }
.plate { background: var(--plate); }

/* Drawn glass: tint, specular top edge, rim. Never a backdrop blur over the tide. */
.glass {
  background: linear-gradient(180deg, color-mix(in srgb, var(--glass-edge) 18%, transparent), transparent 40%), linear-gradient(var(--glass-tint), var(--glass-tint)), var(--plate);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-edge) 60%, transparent), inset 0 0 0 1px var(--glass-rim);
}

/* ---------- Top ---------- */
.top { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top::before { content: ''; position: absolute; z-index: -1; inset: 0 0 -24px; pointer-events: none; background: linear-gradient(var(--deep) 40%, color-mix(in srgb, var(--deep) 60%, transparent) 70%, transparent); }
.mark { text-decoration: none; font: 600 16px/1 var(--text); min-height: 44px; display: flex; align-items: center; }
.mark-s { display: none; }
.nav { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 4px; }
.nav a { min-height: 44px; display: flex; align-items: center; padding: 0 11px; text-decoration: none; color: var(--muted); font: 500 15px/1 var(--text); position: relative; transition: color 0.18s ease; }
.nav a::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 8px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.28s var(--ease-out); }
.nav a[aria-current] { color: var(--fg); }
.nav a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) { .nav a:hover { color: var(--fg); } }
.tone { display: flex; gap: 2px; }
.tone button { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; background: none; cursor: pointer; color: var(--muted); font: 500 13px/1 var(--text); border-radius: 22px; transition: color 0.18s ease, background-color 0.18s ease; }
.tone i { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.tone button[aria-checked='true'] { color: var(--fg); background: rgba(255, 255, 255, 0.07); }
.tone button[aria-checked='true'] i { box-shadow: 0 0 0 2px var(--fg); }
.tone button:active { transform: scale(0.97); }

/* ---------- Buttons ---------- */
.btn {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 0; border-radius: 22px; cursor: pointer;
  background: var(--fg); color: var(--deep); font: 600 16px/1 var(--text); text-decoration: none;
  transition: transform 0.14s var(--ease-out), background-color 0.18s ease, opacity 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: progress; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn.ghost { background: rgba(255, 255, 255, 0.07); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.btn[aria-pressed='true'] { background: var(--accent); color: var(--deep); }
.btn.round { width: 44px; padding: 0; justify-content: center; }
.btn.sm { font-size: 13px; padding: 0 14px; }
@media (hover: hover) { .btn.ghost:hover { background: rgba(255, 255, 255, 0.13); } }
.tool {
  height: 32px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 16px; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); color: var(--fg); font: 500 13px/1 var(--text);
  transition: background-color 0.18s ease, transform 0.14s var(--ease-out);
}
.tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tool:active:not(:disabled) { transform: scale(0.96); }
.tool:disabled { opacity: 0.4; cursor: progress; }
.tool[aria-pressed='true'] { background: var(--accent); color: var(--deep); }
@media (hover: hover) { .tool:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); } }

/* ---------- Home: the desk ---------- */
.desk {
  min-height: 100svh; padding: 80px var(--pad) 28px; max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(240px, 300px) auto minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 40px; row-gap: 20px; align-items: center;
}
.intro { grid-column: 1; grid-row: 1; transition: opacity 0.3s ease; }
.intro h1 { font-size: 56px; }
.intro .line { font: 600 20px/1.3 var(--text); letter-spacing: -0.01em; margin-top: 20px; }
.intro .where { margin-top: 12px; color: var(--muted); }
.receiver { grid-column: 2; grid-row: 1; position: relative; z-index: 3; }
.phone-host { position: relative; }
.deskwin { grid-column: 3; grid-row: 1; display: grid; gap: 16px; min-width: 0; }
#homeWin .bw-view { height: clamp(240px, calc(100svh - 560px), 420px); aspect-ratio: auto; }
#homeWin .bw-foot { display: none; }
.card { padding: 18px 20px; border-radius: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 6px; align-items: start; }
.card { background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); }
.card .kicker { grid-column: 1 / -1; }
.card h2 { grid-column: 1; font: 600 20px/1.25 var(--text); letter-spacing: -0.01em; }
.card .decision { grid-column: 1; color: var(--muted); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .numbers { grid-column: 1; }
.card-actions { grid-column: 2; grid-row: 2 / span 3; display: flex; flex-direction: column; gap: 8px; align-self: center; }
.numbers { display: grid; gap: 4px; margin-top: 4px; }
.numbers:empty { display: none; }
.numbers div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.numbers dt { color: var(--muted); }
.numbers dd { font-family: var(--mono); }
body.piece-open .intro { opacity: 0.4; }

.tray { will-change: transform; contain: layout paint; grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 0; padding: 14px 8px 10px; border-radius: 24px; background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); justify-self: center; }
.tray-group { padding: 0 14px; position: relative; }
.tray-group + .tray-group::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 26px; width: 1px; background: var(--line); }
.tray-label { font: 500 13px/1 var(--text); color: var(--muted); display: flex; gap: 8px; align-items: center; margin: 0 0 10px 4px; }
.tray-row { display: flex; gap: 6px; align-items: flex-start; }
.tray-row .ios-cart { width: 72px; color: var(--fg); }
.tray-row .ios-cart .lb, .dcart .lb { font: 500 13px/1.2 var(--text); color: var(--muted); }
.dcart { width: 72px; display: grid; justify-items: center; gap: 8px; text-decoration: none; }
.dcart .art { width: 64px; height: 64px; transition: transform 0.3s cubic-bezier(0.3, 1.35, 0.45, 1); }
.dcart .art svg { display: block; width: 100%; height: 100%; }
.dcart:active .art { transform: scale(0.95); }
@media (hover: hover) { .dcart:hover .art { transform: translateY(-3px); } .dcart:hover .lb { color: var(--fg); } }

/* ---------- Sections ---------- */
.sec { position: relative; padding: 112px var(--pad) 72px; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }
.sec-head { max-width: 820px; margin-bottom: 48px; }
.sec-head h2 { margin: 12px 0 16px; }
.sec-head .lead { font-size: 20px; line-height: 1.4; color: var(--muted); max-width: 640px; text-wrap: pretty; }

.case-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: start; }
.case-role { font: 600 20px/1.35 var(--text); margin-top: 12px; }
.problem { margin-top: 12px; color: var(--muted); max-width: 560px; }
.decisions { margin-top: 24px; display: grid; gap: 12px; }
.decisions li { display: grid; grid-template-columns: 32px 1fr; gap: 8px; }
.decisions li .mono { font-size: 13px; line-height: 1.85; color: var(--accent-ink); }
.readout { padding: 20px 24px; border-radius: 18px; background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); }
.ro-head, .ro-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; }
.ro-head { font-size: 13px; color: var(--dim); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ro-row { padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ro-l { font-size: 16px; }
.ro-b { font-size: 13px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dim); }
.ro-a { font-size: 13px; color: var(--fg); }
.ro-a small { display: block; font: 500 13px/1.3 var(--text); color: var(--accent-ink); margin-top: 2px; }
.ro-foot { margin-top: 12px; font-size: 13px; color: var(--dim); }

.block { margin-top: 120px; }
.block-head { max-width: 640px; margin-bottom: 28px; }
.block-head p { margin-top: 8px; color: var(--muted); text-wrap: pretty; }

/* ---------- Before / after ---------- */
.cmp { position: relative; overflow: hidden; border-radius: 18px; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cmp-b { will-change: clip-path; }
.cmp-tag { position: absolute; bottom: 12px; z-index: 2; padding: 6px 10px; border-radius: 14px; background: color-mix(in srgb, var(--deep) 86%, transparent); font: 500 13px/1.2 var(--text); display: flex; gap: 8px; align-items: center; pointer-events: none; }
.cmp-tag b { font-size: 13px; color: var(--accent-ink); }
.cmp-tag.l { left: 12px; }
.cmp-tag.r { right: 12px; }
.cmp-line { position: absolute; z-index: 1; left: -1px; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); pointer-events: none; }
.cmp-knob {
  position: absolute; z-index: 3; left: -22px; top: 50%; margin-top: -22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; outline-offset: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 50%), color-mix(in srgb, var(--deep) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.cmp-knob svg { width: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s var(--ease-out); }
.cmp.drag .cmp-knob svg { transform: scale(1.1); }
#logoCmp { aspect-ratio: 3 / 1; max-width: 960px; }
#logoCmp .cmp-a { background: var(--paper); padding: 4% 6% 8%; }
#logoCmp .cmp-b { background: var(--paper); padding: 6% 10% 8%; }
.ab-box { aspect-ratio: 16 / 10; max-width: 1120px; background: #fff; }

/* ---------- The mark: chapters and every step ---------- */
.chapters { margin-top: 56px; display: grid; gap: 56px; }
.chapter { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; align-items: center; }
.ch-body { margin-top: 12px; text-wrap: pretty; }
.ch-score { margin-top: 16px; display: flex; align-items: baseline; gap: 12px; font-size: 13px; color: var(--muted); }
.ch-score b { font-size: 20px; color: var(--fg); }
.ch-fig { background: var(--paper); border-radius: 18px; padding: 20px; display: grid; place-items: center; max-width: 680px; }
.ch-fig img { max-height: 480px; width: auto; object-fit: contain; }
.steps-all { margin-top: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps-all summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font: 600 16px/1 var(--text); }
.steps-all summary::-webkit-details-marker { display: none; }
.steps-all summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.24s var(--ease-out); }
.steps-all[open] summary svg { transform: rotate(180deg); }
#allStepsList { display: grid; gap: 32px; padding: 16px 0 40px; }
.step { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 32px; align-items: start; }
.step figure { background: var(--paper); border-radius: 14px; padding: 14px; }
.step img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.step p:not(.kicker) { margin-top: 8px; text-wrap: pretty; }
.step.v-rejected .tail { color: var(--dim); text-decoration: line-through; }
.step.v-chosen .tail { color: var(--accent-ink); }

/* ---------- Phone pieces ---------- */
.pp { width: 100%; max-width: 300px; }
.pp-screen { position: relative; width: 100%; aspect-ratio: 393 / 798; overflow: hidden; border-radius: 34px; background: #0a0a0c; box-shadow: 0 0 0 6px #1a1012, 0 0 0 7px rgba(255, 255, 255, 0.12), 0 30px 60px -24px rgba(0, 0, 0, 0.7); isolation: isolate; }
.pp-page { position: absolute; left: 0; top: 0; width: 393px; height: 798px; transform-origin: 0 0; }
.pp-boot { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font: 500 13px/1 var(--text); transition: opacity 0.3s ease; pointer-events: none; }
.pp-screen.live .pp-boot { opacity: 0; }
.pp-bar { display: flex; gap: 8px; margin-top: 18px; justify-content: center; }
.pieces { margin-top: 72px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.piece { display: grid; justify-items: center; align-content: start; gap: 4px; }
.piece-text { width: 100%; max-width: 300px; margin-top: 16px; }
.piece-text p { margin-top: 6px; color: var(--muted); text-wrap: pretty; }
.piece-text .try { font-size: 13px; color: var(--dim); }
.piece-text .numbers { margin-top: 10px; }

.liquid { position: relative; height: 260vh; }
.liquid-stage { position: sticky; top: 0; height: 100vh; padding-top: 56px; display: grid; grid-template-columns: minmax(0, 460px) 300px; justify-content: center; gap: 120px; align-items: center; }
.liquid-copy h4 { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin-top: 12px; max-width: 460px; }
.liquid-steps { margin-top: 24px; display: grid; gap: 10px; max-width: 460px; }
.liquid-steps li { padding-left: 16px; border-left: 2px solid var(--line); color: var(--dim); transition: color 0.24s ease, border-color 0.24s ease; }
.liquid-steps li.on { color: var(--fg); border-color: var(--accent); }
.liquid-num { margin-top: 20px; font-size: 13px; color: var(--muted); }
.liquid-host .pp-bar { margin-top: 14px; }

/* ---------- A/B ---------- */
.ab-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.ab-pick span { margin-right: 4px; }
.chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, 0.07); color: var(--fg); cursor: pointer; font: 500 13px/1 var(--text); transition: background-color 0.18s ease, transform 0.14s var(--ease-out); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed='true'] { background: var(--fg); color: var(--deep); }
.ab-why { margin-top: 20px; max-width: 720px; text-wrap: pretty; }
.ab-why b { color: var(--accent-ink); font-weight: 600; }

/* ---------- Browser windows ---------- */
.windows { display: grid; gap: 96px; }
.wrow { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: start; }
.wnote h4 { margin-top: 12px; }
.wnote p:not(.kicker) { margin-top: 10px; color: var(--muted); text-wrap: pretty; }
.bw { position: relative; min-width: 0; }
.bw-frame { border-radius: 14px; overflow: hidden; background: #241a1c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.75); }
.bw-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 10px 0; overflow-x: auto; scrollbar-width: none; }
.bw-tabs:empty { display: none; }
.bw-tabs .bw-lights { margin-right: 10px; }
.bw-tabs [role='tab'] { flex: none; min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 10px 10px 0 0; background: none; color: var(--muted); font: 500 13px/1 var(--text); cursor: pointer; transition: color 0.18s ease, background-color 0.18s ease; }
.bw-tabs [role='tab'] .dot { width: 6px; height: 6px; }
.bw-tabs [role='tab'][aria-selected='true'] { background: #33282a; color: var(--fg); }
.bw-bar { height: 46px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 8px 0 14px; background: #33282a; }
.tabbed .bw-bar { grid-template-columns: minmax(0, 1fr) auto; padding-left: 8px; }
.bw-lights { display: flex; gap: 8px; }
.bw-lights i { width: 12px; height: 12px; border-radius: 50%; }
.bw-lights .r { background: #ff5f57; } .bw-lights .y { background: #febc2e; } .bw-lights .g { background: #28c840; }
.bw-url { justify-self: center; width: min(100%, 440px); height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; background: rgba(0, 0, 0, 0.28); border-radius: 15px; font: 400 13px/1 var(--text); white-space: nowrap; overflow: hidden; min-width: 0; }
.bw-url svg { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.2; }
.bw-url b { font-weight: 600; }
.bw-url span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.bw-tools { display: flex; gap: 6px; }
.bw-site { min-width: 32px; padding: 0; color: var(--muted); text-decoration: none; }
@media (hover: hover) { .bw-site:hover { color: var(--fg); } }
.bw-view { position: relative; overflow: hidden; background: #f4f4f5; aspect-ratio: 16 / 10; max-height: 72vh; contain: strict; }
.bw-view::before, .bw-view::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 3; pointer-events: none; }
.bw-view::before { left: 0; background: linear-gradient(90deg, rgba(16, 6, 9, 0.6), transparent); }
.bw-view::after { right: 0; background: linear-gradient(270deg, rgba(16, 6, 9, 0.6), transparent); }
.bw[data-kind='piece'] .bw-view { background: #0b0b0d; }
.bw-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.bw-page.glide { transition: transform 0.5s var(--ease-out); }
.bw-page .da-piece { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.bw-pan { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.bw-pan.drag { cursor: grabbing; }
.bw[data-kind='piece'] .bw-pan, .bw[data-kind='live'] .bw-pan, .inspect-on .bw-pan { display: none; }
.bw[data-kind='live'] .bw-view { aspect-ratio: 1100 / 720; background: #0b0b0d; }
.bw-boot { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--deep) 85%, var(--c, var(--ft))); color: var(--muted); font: 500 13px/1 var(--text); transition: opacity 0.18s linear; pointer-events: none; }
.bw-view.live .bw-boot { opacity: 0; }
.bw-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font: 400 13px/1.3 var(--mono); color: var(--dim); }
.bw-foot span:empty { display: none; }
.bw-k { color: var(--muted); }
.inspect-on .bw-view { cursor: crosshair; }

.stubs { margin-top: 140px; display: grid; gap: 96px; }
.stub { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: start; }
.stub h3 { margin-top: 12px; }
.stub-t p:not(.kicker) { margin-top: 12px; color: var(--muted); text-wrap: pretty; }
.stub-phones { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; margin-top: 40px; gap: 64px; }
.wnote .try { font-size: 13px; color: var(--dim); }
.wnote .metric { font-size: 13px; color: var(--fg); }

/* ---------- Brand ---------- */
#brand .sec-head { margin-bottom: 32px; }
.sheet-bar { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; padding: 6px 6px 6px 16px; margin-bottom: 16px; border-radius: 28px; background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); }
.sheet-tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.sheet-group { display: flex; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); }
.sheet-group span { margin-right: 6px; }
.sheet-group button { min-width: 44px; min-height: 44px; border: 0; border-radius: 22px; background: none; color: var(--muted); font: 400 13px/1 var(--mono); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; }
.sheet-group button[aria-selected='true'] { background: var(--fg); color: var(--deep); }
@media (hover: hover) { .sheet-group button:hover:not([aria-selected='true']) { background: rgba(255, 255, 255, 0.08); color: var(--fg); } }
.sheet-img { display: block; border-radius: 14px; overflow: hidden; background: var(--mid); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.7); cursor: zoom-in; }
.sheet-img img { width: 100%; height: auto; }
.sheet-cap { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.sheet-cap .mono { color: var(--fg); }
.sheet-nav { margin-left: auto; display: flex; gap: 6px; }
.btn.round svg, .crate-nav svg { width: 20px; height: 20px; }

.beast { margin-top: 112px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; align-items: center; }
.beast-plate { display: grid; gap: 20px; padding: 32px; border-radius: 18px; background: #efe9e1; color: #4a443e; text-decoration: none; transition: transform 0.2s var(--ease-out); }
.beast-plate img { max-height: 130px; width: auto; max-width: 80%; object-fit: contain; }
.beast-plate .mono { font-size: 13px; border-top: 1px solid rgba(21, 17, 15, 0.14); padding-top: 12px; }
.beast-plate:active { transform: scale(0.99); }
.beast-text h3 { margin-top: 12px; }
.beast-text p:not(.kicker) { margin-top: 12px; color: var(--muted); max-width: 560px; }

.crate-row { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 64px; align-items: center; margin-top: 96px; }
.crate { position: relative; height: 470px; perspective: 1100px; perspective-origin: 50% 20%; cursor: pointer; touch-action: pan-y; }
.crate-stack { position: absolute; inset: 0; }
.rec { position: absolute; left: 60px; bottom: 70px; width: 340px; height: 340px; transform-origin: 50% 100%; overflow: hidden; transition: transform 0.6s cubic-bezier(0.2, 0.85, 0.2, 1), opacity 0.3s ease; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.12), 0 20px 40px -20px rgba(0, 0, 0, 0.8); }
.rec img { width: 100%; height: 100%; object-fit: cover; }
.rec .shade { position: absolute; inset: 0; background: var(--deep); opacity: var(--shade, 0); transition: opacity 0.4s ease; }
.crate-lip { position: absolute; left: 20px; right: 20px; bottom: 30px; height: 150px; z-index: 200; pointer-events: none; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--glass-edge) 26%, transparent), transparent 30%), color-mix(in srgb, var(--deep) 76%, transparent); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-rim), 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.crate:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); border-radius: 12px; }
.crate:focus-visible .crate-lip { box-shadow: inset 0 0 0 2px var(--accent); }
.crate-info h3 { margin: 12px 0 8px; }
.crate-info .muted { margin-top: 4px; }
.crate-info .kicker .mono { color: var(--fg); }
.crate-nav { display: flex; gap: 8px; margin-top: 24px; align-items: center; }
.crate-nav svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn.round svg { fill: none; stroke: currentColor; }
.crate-dots { display: flex; gap: 6px; margin-left: 12px; }
.crate-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background-color 0.2s ease; }
.crate-dots i.on { background: var(--accent); }

/* ---------- Film ---------- */
.video .sec-head { margin-bottom: 24px; }
.screen-wrap { width: min(100%, calc(60svh * 16 / 9)); }
.screen { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
.screen-play { position: absolute; inset: 0; overflow: hidden; display: block; cursor: pointer; }
.screen-play img { width: 133.4%; max-width: none; margin-left: -16.7%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.screen-play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.5)); }
.play-disc { position: absolute; z-index: 1; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 50%), rgba(10, 4, 6, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.18); transition: transform 0.2s var(--ease-out); }
.play-disc svg { width: 28px; fill: #fff; margin-left: 4px; }
.screen-play:active .play-disc { transform: scale(0.97); }
@media (hover: hover) { .screen-play:hover .play-disc { transform: scale(1.06); } }
.video-copy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 18px; }
.yt { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.yt svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) { .yt:hover svg { transform: translate(2px, -2px); } }
.slate { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.slate p { font-size: 13px; padding-bottom: 6px; }
.slate span { color: var(--dim); margin-right: 8px; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: start; }
.bio { font-size: 20px; line-height: 1.45; max-width: 620px; text-wrap: pretty; }
.contact .label { font-size: 13px; color: var(--muted); margin: 20px 0 4px; }
.contact .label:first-child { margin-top: 0; }
.email { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line); }
.sel { user-select: all; overflow-wrap: anywhere; }
.rowlink { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; }
.rowlink span { margin-left: auto; font-size: 13px; color: var(--muted); }
.rowlink svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.foot { padding: 40px var(--pad) 48px; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }
.foot p { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 20px; }
.foot b { font-weight: 400; color: var(--fg); margin-left: 6px; }

/* ---------- Mid widths: the intro goes above the phone and the window ---------- */
@media (max-width: 1180px) and (min-width: 768px) {
  .desk { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .intro { grid-column: 1 / -1; grid-row: 1; }
  .intro h1 { font-size: 32px; }
  .receiver { grid-column: 1; grid-row: 2; }
  .deskwin { grid-column: 2; grid-row: 2; }
  .tray { grid-row: 3; }
  .case-grid, .chapter, .step, .wrow, .stub, .beast, .crate-row, .about-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  :root { --pad: 16px; }
  h1, h2 { font-size: 32px; line-height: 1.08; }
  h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
  .top { padding: 0 8px 0 16px; height: 56px; gap: 4px; }
  .mark-l { display: none; }
  .mark-s { display: block; font-size: 16px; }
  .nav { position: static; translate: none; gap: 0; }
  .nav a { padding: 0 8px; font-size: 13px; }
  .nav a::after { left: 8px; right: 8px; }
  .tone button { padding: 0 6px; min-width: 32px; justify-content: center; }
  .tone span { display: none; }
  .desk { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 72px 16px 24px; min-height: 0; }
  .intro h1 { font-size: 32px; }
  .intro .line { margin-top: 10px; font-size: 16px; }
  .intro .where { font-size: 13px; margin-top: 6px; }
  .receiver { align-self: center; }
  .deskwin { display: contents; }
  #homeWin { display: none; }
  .card { order: 3; }
  body:not(.piece-open) .card { display: none; }
  .card { grid-template-columns: minmax(0, 1fr); }
  .card-actions { grid-column: 1; grid-row: auto; flex-direction: row; }
  .tray { order: 4; padding: 12px 4px 8px; border-radius: 20px; width: 100%; }
  .tray { justify-content: flex-start; }
  .tray-group { padding: 0 8px; width: 100%; }
  .tray-group + .tray-group { margin-top: 8px; }
  .tray-group + .tray-group::before { display: none; }
  .tray-row { flex-wrap: wrap; gap: 4px 2px; }
  .tray-row .ios-cart, .dcart { width: 66px; }
  .dcart .art { width: 56px; height: 56px; }
  .sec { padding: 88px 16px 56px; }
  .sec-head { margin-bottom: 32px; }
  .sec-head .lead { font-size: 16px; }
  .case-grid, .chapter, .step, .wrow, .stub, .beast, .crate-row, .about-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .readout { padding: 16px; }
  .ro-l { font-size: 13px; }
  .block { margin-top: 88px; }
  #logoCmp { border-radius: 12px; }
  .cmp-tag { bottom: 8px; padding: 4px 8px; }
  .cmp-tag.l { left: 8px; } .cmp-tag.r { right: 8px; }
  .chapters { gap: 48px; }
  .ch-fig { padding: 12px; }
  .ch-fig img { max-height: 360px; }
  .pieces, .stub-phones { grid-template-columns: minmax(0, 1fr); gap: 64px; margin-top: 56px; }
  .liquid { height: 240vh; }
  .liquid-stage { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 64px; align-content: start; justify-items: center; }
  .liquid-copy { width: 100%; }
  .liquid-copy h4 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; margin-top: 6px; }
  .liquid-steps { margin-top: 10px; gap: 4px; }
  .liquid-steps li { font-size: 13px; display: none; }
  .liquid-steps li.on { display: block; }
  .liquid-num { display: none; }
  .liquid-host { width: min(220px, 56vw); }
  .liquid-host .pp { max-width: none; }
  .liquid-host .pp-screen { border-radius: 26px; }
  .liquid-host .pp-bar { margin-top: 10px; }
  .ab-box { border-radius: 12px; }
  .ab-box .cmp-tag span { display: none; }
  .bw-view { aspect-ratio: 4 / 5; max-height: 64vh; }
  .bw-bar { grid-template-columns: minmax(0, 1fr) auto; padding-left: 8px; }
  .bw-bar .bw-l1 { display: none; }
  .bw-url { justify-content: flex-start; }
  .bw-url span { display: none; }
  .windows, .stubs { gap: 64px; }
  .stubs { margin-top: 96px; }
  .sheet-bar { top: 56px; padding: 4px; gap: 0 8px; border-radius: 22px; }
  .sheet-tabs { gap: 0 8px; }
  .sheet-group button { min-width: 36px; }
  .sheet-cap { display: none; }
  .beast { margin-top: 72px; }
  .beast-plate { padding: 24px; }
  .crate-row { margin-top: 56px; }
  .crate { height: 360px; }
  .rec { width: 250px; height: 250px; left: calc(50% - 125px); bottom: 56px; }
  .crate-lip { height: 110px; bottom: 20px; left: 8px; right: 8px; }
  .bio { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .rec, .rec .shade, .nav a::after, .bw-page.glide, .liquid-steps li { transition: none; }
}

/* RONDA dashboard impression behind the agent bubble (from home-mesa Backdrops). */
.bd {
  position: absolute;
  inset: 0;
  overflow: clip;
  background: #0d111c;
}
.bd::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 70% 80%, rgba(7, 9, 16, 0.2), rgba(7, 9, 16, 0.72));
}
.bd-blur {
  position: absolute;
  inset: -12px;
  display: flex;
  gap: 14px;
  padding: 26px;
  filter: blur(5px);
  opacity: 0.85;
}
.bd i,
.bd b,
.bd u {
  display: block;
  border-radius: 6px;
  background: #1c2436;
}
.bd aside {
  width: 64px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bd aside i {
  height: 30px;
}
.bd aside .bd-logo {
  height: 40px;
  background: #0254e5;
}
.bd aside .is-on {
  background: #22345e;
}
.bd main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bd header {
  display: flex;
  justify-content: space-between;
}
.bd-title {
  width: 46%;
  height: 26px;
}
.bd-pill {
  width: 70px;
  height: 26px;
  border-radius: 13px !important;
  background: #0254e5 !important;
}
.bd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bd-cards div {
  height: 74px;
  border-radius: 10px;
  background: #151c2b;
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.bd-cards i {
  width: 40%;
  height: 8px;
}
.bd-cards b {
  height: 16px;
  background: #2a3a5e;
}
.bd-chart {
  height: 150px;
  border-radius: 10px;
  background: #151c2b;
  padding: 16px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.bd-chart i {
  flex: 1;
  background: #1f3f86;
}
.bd-chart i:nth-child(n + 8) {
  background: #0254e5;
}
.bd-list {
  display: grid;
  gap: 8px;
}
.bd-list div {
  height: 44px;
  border-radius: 10px;
  background: #151c2b;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.bd-list i {
  width: 24px;
  height: 24px;
  border-radius: 12px;
}
.bd-list b {
  flex: 1;
  height: 9px;
}
.bd-list u {
  width: 48px;
  height: 9px;
}


/* Phone apps start installed on the home screen; their desk cartridge reappears when one is dragged back out. */
#tray .ios-cart.out { display: none !important; }

/* The bubble page has no background of its own; matching its color-scheme keeps the iframe transparent so the dashboard shows through. */
iframe.da-piece[title="Agent bubble"] { color-scheme: light; background: transparent; }

/* v4: iPhone mockup */
/* iPhone 15 Pro, front view, in pt: display 393×852 with 55 pt corners. Body 71.6×146.6 mm = 432×885 pt
   (6.04 pt/mm), so 19.5 pt each side and 16.5 pt top and bottom: a 5.5 pt titanium rim, then black glass.
   Radii are concentric: screen 55, glass 67.5, body 73. 1 pt = --pt, so the device scales as one piece. */
.pp-device { container-type: inline-size; width: 100%; max-width: 300px; }
.pp-device .pp-body {
  --pt: calc(100cqw / 432);
  position: relative;
  padding: calc(var(--pt) * 5.5);
  border-radius: calc(var(--pt) * 73);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 9%, rgba(255, 255, 255, 0) 91%, rgba(0, 0, 0, 0.3)),
    linear-gradient(125deg, #6a645e 0%, #34302d 18%, #4c4743 40%, #2a2725 62%, #45403c 82%, #5f5953 100%);
  box-shadow:
    inset 0 0 0 calc(var(--pt) * 0.8) rgba(255, 255, 255, 0.22),
    inset 0 0 0 calc(var(--pt) * 2.2) rgba(0, 0, 0, 0.28),
    0 1px 1px rgba(8, 0, 3, 0.5),
    2px 6px 10px -4px rgba(8, 0, 3, 0.5),
    6px 22px 34px -16px rgba(8, 0, 3, 0.6),
    12px 52px 70px -36px rgba(8, 0, 3, 0.7);
}
.pp-device .pp-bezel {
  position: relative;
  padding: calc(var(--pt) * 11) calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 67.5);
  background: #050406;
  box-shadow: inset 0 0 0 calc(var(--pt) * 0.6) rgba(255, 255, 255, 0.07), 0 0 0 calc(var(--pt) * 0.5) rgba(0, 0, 0, 0.7);
}
.pp-device .pp-screen {
  aspect-ratio: 393 / 852;
  border-radius: calc(var(--pt) * 55);
  background: var(--sb, #000);
  box-shadow: none;
  transition: background-color 0.3s ease;
}
.pp-device .pp-boot { top: calc(var(--pt) * 54); }
.pp-status {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0;
  height: calc(var(--pt) * 54);
  display: grid; grid-template-columns: 1fr calc(var(--pt) * 126) 1fr; align-items: center;
  padding-top: calc(var(--pt) * 4);
  color: #fff; pointer-events: none;
}
.pp-screen.sb-dark .pp-status { color: #0b0a0c; }
.pp-time { justify-self: center; transform: translateX(calc(var(--pt) * 6)); font: 600 calc(var(--pt) * 17) / 1 var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pp-glyphs { grid-column: 3; justify-self: center; transform: translateX(calc(var(--pt) * -4)); display: flex; align-items: center; gap: calc(var(--pt) * 5); }
.pp-glyphs svg { display: block; fill: currentColor; }
.pp-sig { width: calc(var(--pt) * 18); height: calc(var(--pt) * 12); }
.pp-wifi { width: calc(var(--pt) * 16); height: calc(var(--pt) * 12); }
.pp-bat { width: calc(var(--pt) * 27); height: calc(var(--pt) * 13); }
.pp-island {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--pt) * 11);
  width: calc(var(--pt) * 126); height: calc(var(--pt) * 37);
  margin-left: calc(var(--pt) * -63);
  border-radius: calc(var(--pt) * 18.5);
  background: radial-gradient(circle at calc(100% - var(--pt) * 18.5) 50%, #141826 0, #07080c calc(var(--pt) * 5.5), #000 calc(var(--pt) * 6.5)) #000;
  pointer-events: none;
}
/* One static reflection across the glass: a hard-edged wedge from the top left, barely there. */
.pp-glass {
  position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(116deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 31%, rgba(255, 255, 255, 0) 31.3%);
}
.pp-btn {
  position: absolute; width: calc(var(--pt) * 3.2);
  background: linear-gradient(90deg, #26231f, #5a554f 45%, #3a3632);
}
.pp-action, .pp-vol-up, .pp-vol-down { left: calc(var(--pt) * -2.6); border-radius: calc(var(--pt) * 1.6) 0 0 calc(var(--pt) * 1.6); }
.pp-power { right: calc(var(--pt) * -2.6); border-radius: 0 calc(var(--pt) * 1.6) calc(var(--pt) * 1.6) 0; background: linear-gradient(270deg, #26231f, #5a554f 45%, #3a3632); }
.pp-action { top: calc(var(--pt) * 158); height: calc(var(--pt) * 34); }
.pp-vol-up { top: calc(var(--pt) * 230); height: calc(var(--pt) * 62); }
.pp-vol-down { top: calc(var(--pt) * 308); height: calc(var(--pt) * 62); }
.pp-power { top: calc(var(--pt) * 250); height: calc(var(--pt) * 100); }
.pp-device .pp-bar { margin-top: 22px; }

/* RONDA has no desktop window any more: its two phones stand on a lit stage next to the text. */
.stub-solo .stub-phones {
  grid-column: 2; margin-top: 0; gap: 56px;
  padding: 48px 40px 40px; border-radius: 32px;
  background:
    radial-gradient(110% 55% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--deep)) 0%, color-mix(in srgb, var(--c) 3%, var(--deep)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (max-width: 1180px) {
  .stub-solo .stub-phones { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .stub-solo .stub-phones { padding: 40px 20px 32px; border-radius: 28px; gap: 56px; }
}

/* v4: map editor */
#desk .block-head { max-width: 680px; }
.ed { display: grid; gap: 24px; }
.ed .bw[data-kind] .bw-view.bw-view { aspect-ratio: 1280 / 800; max-height: none; background: #0b0b0d; }
.ed .bw-view::before, .ed .bw-view::after { display: none; }
.ed .bw-frame { border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.07), 0 60px 120px -40px rgba(0, 0, 0, 0.8); }
.ed .bw-foot { margin-top: 10px; }
.ed .bw-size, .ed .bw-st { display: none; }
.ed-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 48px; max-width: 980px; }
.ed-note p { color: var(--muted); text-wrap: pretty; }
.ed-note .kicker { display: block; margin-bottom: 6px; color: var(--c); }
.ed-note .ed-why { color: var(--fg); }
@media (max-width: 767px) {
  .ed { gap: 16px; }
  .ed .bw-frame { border-radius: 12px; }
  .ed-note { grid-template-columns: minmax(0, 1fr); }
}

/* v4: liquid header isolated */
/* Only the header band of the live build: 393 × 120 pt, scaled up, the photo behind it. */
.liquid { height: 190vh; }
.liquid-stage { grid-template-columns: minmax(0, 340px) minmax(0, 780px); gap: 72px; padding-top: 56px; }
.liquid-band { width: 100%; min-width: 0; }
.liquid-host { width: 100%; container-type: inline-size; }
.liquid-host .pp { max-width: none; }
/* Corner = drop radius 22 + top inset 12, in the piece's own points. */
.liquid-host .pp-screen { aspect-ratio: 393 / 120; border-radius: calc(34 / 393 * 100cqw); background: #120709; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 60px -34px rgba(0, 0, 0, 0.8); }
.liquid-host .pp-bar { display: none; }
.liquid-spec { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.liquid-spec b { font-weight: 500; color: var(--fg); }
.liquid-spec span:last-child { margin-left: auto; }
.liquid-copy h4 { max-width: 340px; }
@media (max-width: 767px) {
  .liquid { height: 170vh; }
  .liquid-stage { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 72px; align-content: center; justify-items: stretch; }
  .liquid-host { width: 100%; }
  .liquid-host .pp-screen { border-radius: calc(34 / 393 * 100cqw); }
  .liquid-spec { gap: 4px 14px; margin-top: 12px; font-size: 11px; }
  .liquid-num { display: block; margin-top: 10px; font-size: 12px; }
}

/* v4: type and rhythm. Titles in Instrument Sans at a narrower width: more weight per line, less height lost. */
h1, h2 { font-stretch: 84%; font-weight: 640; letter-spacing: -0.02em; line-height: 0.98; }
.sec-head h2 { font-size: clamp(40px, 4.6vw, 64px); margin: 10px 0 12px; }
h3 { font-stretch: 90%; letter-spacing: -0.015em; }
.intro h1 { font-size: clamp(56px, 5.4vw, 76px); }
.sec { padding-top: 88px; padding-bottom: 56px; }
.sec-head { margin-bottom: 32px; }
.block { margin-top: 96px; }
.block-head { margin-bottom: 20px; }
.btn kbd { margin-left: 8px; padding: 1px 6px; border-radius: 6px; font: 500 13px/1.3 var(--mono); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: none) { .btn kbd { display: none; } }
@media (max-width: 767px) {
  .intro h1 { font-size: 40px; }
  .sec-head h2 { font-size: 40px; }
  .sec { padding-top: 72px; padding-bottom: 40px; }
  .block { margin-top: 72px; }
}

/* v4: collectible ticket on its own row, Purchase done as a closing note */
#phonePieces { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; margin-inline: auto; }
.ticket-feature { margin-top: 120px; }
.piece.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); justify-items: stretch; align-items: center; column-gap: 72px; max-width: 980px; margin-inline: auto; }
.piece.wide .piece-text { order: -1; max-width: 440px; margin-top: 0; }
.piece.wide .piece-text h4 { font: 640 40px/1 var(--text); font-stretch: 84%; letter-spacing: -0.02em; }
.piece.wide .piece-text p { font-size: 18px; margin-top: 14px; }
.piece.wide .piece-text .try { font-size: 13px; }
#ab { max-width: 880px; }
#ab .block-head h3 { font-size: 24px; }
#ab .ab-box { max-width: 880px; }
@media (max-width: 767px) {
  #phonePieces { grid-template-columns: minmax(0, 1fr); }
  .ticket-feature { margin-top: 72px; }
  .piece.wide { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .piece.wide .piece-text { order: 0; }
  .piece.wide .piece-text h4 { font-size: 32px; }
}

/* v4 home 2: compact intro with two steps, the phone and a large browser as the two leads */
.desk { max-width: 1520px; padding: 76px 40px 24px; grid-template-columns: 220px auto minmax(0, 1fr); column-gap: 32px; row-gap: 16px; }
.intro h1 { font-size: 44px; }
.intro .line { font-size: 17px; margin-top: 14px; }
.intro .where { font-size: 13px; margin-top: 8px; }
#homeWin .bw-view { height: clamp(360px, calc(100svh - 330px), 640px); }
.card { padding: 14px 18px; row-gap: 4px; }
.card h2 { font-size: 17px; }
.card .decision { font-size: 14px; -webkit-line-clamp: 2; }
.guide { margin-top: 28px; display: grid; gap: 14px; transition: opacity 0.4s ease; }
.guide li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; transition: opacity 0.3s ease; }
.guide .mono { width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; font-size: 13px; color: var(--deep); background: var(--accent); transition: background-color 0.3s ease, color 0.3s ease; }
.guide p { font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.guide b { display: block; font: 600 15px/1.3 var(--text); color: var(--fg); margin-bottom: 2px; }
.guide span:not(.mono) { display: block; }
.guide .g-phone { display: none !important; }
.guide li.done { opacity: 0.5; }
.guide li.done .mono { background: transparent; color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.guide.used { opacity: 0.55; }
.tap-ghost { position: absolute; left: 4px; top: 4px; width: 52px; height: 52px; border-radius: 50%; pointer-events: none; opacity: 0; background: rgba(255, 255, 255, 0.42); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 4px 14px rgba(0, 0, 0, 0.35); }
#phoneHost.hinting .tap-ghost { animation: tap-ghost 2.6s cubic-bezier(0.3, 0.7, 0.4, 1) 1.2s infinite; }
#phoneHost.hinting .ios-grid .ios-icon:first-child > svg { animation: icon-press 2.6s ease 1.2s infinite; transform-origin: 30px 30px; }
@keyframes tap-ghost { 0% { opacity: 0; transform: scale(1.35); } 14% { opacity: 1; transform: scale(0.92); } 26% { opacity: 1; transform: scale(0.84); } 50% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes icon-press { 0%, 12% { transform: scale(1); } 20% { transform: scale(0.9); } 34% { transform: scale(1.04); } 46%, 100% { transform: scale(1); } }
@media (max-width: 1180px) and (min-width: 768px) {
  .desk { grid-template-columns: auto minmax(0, 1fr); }
  .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
}
@media (max-width: 767px) {
  .desk { padding: 64px 16px 24px; gap: 16px; }
  .intro h1 { font-size: 34px; }
  .guide { margin-top: 16px; gap: 10px; }
  .guide .g-desk { display: none !important; }
  .guide .g-phone { display: block !important; }
}
@media (min-width: 1181px) {
  /* The card joins the intro column, so the browser gets the full height between the top bar and the tray. */
  .desk { grid-template-rows: 1fr auto auto; }
  .deskwin { display: contents; }
  .intro { grid-column: 1; grid-row: 1; align-self: end; }
  .card { grid-column: 1; grid-row: 2; align-self: start; grid-template-columns: minmax(0, 1fr); }
  .card-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
  .card .decision { -webkit-line-clamp: 4; }
  .receiver { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  #homeWin { grid-column: 3; grid-row: 1 / 3; align-self: center; min-width: 0; }
  #homeWin .bw-view { height: clamp(380px, calc(100svh - 330px), 680px); }
  .tray { grid-row: 3; }
}
/* A tray group whose apps all sit on the phone has nothing to show. */
.tray-group:not(:has(.tray-row > :not(.out))) { display: none; }
.card .btn { height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 767px) {
  .intro h1 { font-size: 30px; }
  .intro .line { font-size: 15px; margin-top: 6px; }
  .intro .where { display: none; }
  .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
  .guide li { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
  .guide .mono { width: 20px; height: 20px; font-size: 11px; }
  .guide b { font-size: 14px; }
  .guide p { font-size: 12px; }
}
@media (min-width: 1181px) {
  /* One screen tall, so a taller card never pushes the tray below the fold or moves the devices. */
  .desk { height: 100svh; min-height: 680px; grid-template-rows: minmax(0, 1fr) auto auto; }
  .card-actions { flex-direction: column; align-items: stretch; }
  .card-actions .btn { white-space: nowrap; justify-content: center; }
}
@media (min-width: 1181px) and (max-height: 860px) {
  .intro h1 { font-size: 38px; }
  .intro .where { display: none; }
  .guide { margin-top: 18px; gap: 10px; }
  .card .decision { -webkit-line-clamp: 3; }
}
@media (min-width: 1181px) {
  /* With an app open the steps are done; the card about that app takes their place. */
  body.piece-open .guide { display: none; }
}

/* v4: Details, interaction pieces in a loose grid; each stage keeps its piece's own aspect ratio */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 40px 32px; }
.detail { display: grid; gap: 6px; align-content: start; }
.detail-stage { position: relative; overflow: hidden; border-radius: 22px; background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 10px; }
.detail .muted { font-size: 14px; text-wrap: pretty; }

/* v4: Music & Film. Roles as a short definition row, the covers crate, releases as a numbered list, then the clip. */
.music .roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 980px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.music .roles dt { font-size: 13px; color: var(--dim); }
.music .roles dd { margin-top: 4px; font: 600 18px/1.3 var(--text); }
.music .crate-row { margin-top: 150px; }
.releases { margin-top: 64px; max-width: 980px; }
.releases:empty { display: none; }
.releases ol { margin-top: 12px; border-top: 1px solid var(--line); }
.releases li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 96px auto; gap: 16px; align-items: center; padding: 2px 0; border-bottom: 1px solid var(--line); }
.releases li .mono { font-size: 13px; color: var(--accent-ink); }
.releases li b { font-weight: 600; }
.releases .r-type { font-size: 13px; color: var(--muted); }
.releases a, .m-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fg); text-decoration: none; min-height: 44px; }
.releases a svg, .m-links a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: hover) { .releases a:hover, .m-links a:hover { color: var(--accent-ink); } }
.music .v-head { margin: 88px 0 20px; }
.m-foot { margin-top: 48px; display: grid; gap: 16px; max-width: 980px; }
.m-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.m-links:empty { display: none; }
.m-events { color: var(--muted); max-width: 640px; text-wrap: pretty; }
@media (max-width: 767px) {
  .music .roles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .releases li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .releases .r-type { display: none; }
  .music .v-head { margin-top: 64px; }
}
.detail-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 64px 40px; }
.detail-stage { border-radius: 28px; margin-bottom: 0; background: #111; }
.detail-bar { display: flex; justify-content: center; margin: 12px 0 8px; }
.detail .decision { color: var(--muted); text-wrap: pretty; }
.detail .try { font-size: 13px; color: var(--dim); }
.detail .credits { font-size: 13px; color: var(--dim); margin-top: 4px; }
.detail .credits a { color: inherit; }

/* v4: units. One template for every component, after the venue map editor: name, one line and a small project
   chip, the live stage, then Try it / Decision and the Inspect, always in the same places. */
.units { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 112px 48px; align-items: start; }
.unit { display: grid; align-content: start; gap: 24px; min-width: 0; }
.unit-window, .unit-liquid, .unit-ab { grid-column: 1 / -1; }
.unit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; max-width: 820px; }
.unit-head h3 { font-size: 32px; }
.unit-line { flex-basis: 100%; color: var(--muted); font-size: 18px; line-height: 1.4; text-wrap: pretty; }
.u-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--text); color: var(--muted); padding: 5px 9px 5px 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.u-chip .dot { width: 6px; height: 6px; }
.unit-phone .unit-stage, .unit-detail .unit-stage { justify-self: center; width: 100%; max-width: 300px; }
.unit-detail .unit-stage { max-width: 380px; position: relative; overflow: hidden; border-radius: 28px; background: #111; }
.unit-stage .pp { margin: 0 auto; }
.unit .pp-bar, .unit-stage .bw [data-act="inspect"] { display: none !important; }
.unit .ed-note { display: none; }
.unit-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.unit-window .unit-notes, .unit-liquid .unit-notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; column-gap: 48px; max-width: none; }
.unit-notes p { color: var(--muted); text-wrap: pretty; }
.unit-notes .kicker { display: block; margin-bottom: 6px; color: var(--c); }
.u-side { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.u-side .numbers { flex: 1 1 200px; margin: 0; }
.unit-notes .credits { font-size: 13px; color: var(--dim); }
.unit-notes .credits a { color: inherit; }
.unit-liquid .liquid { margin-top: 0; }
.unit-ab .unit-stage { max-width: 880px; }
#projects .case { margin-top: 8px; }
.card-detail { grid-column: 1; font: 500 14px/1.3 var(--text); color: var(--accent-ink); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
@media (hover: hover) { .card-detail:hover { text-decoration: underline; } }

/* Index: a small button in the top bar that opens every group and component. */
.index-btn { position: relative; z-index: 2; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.08); color: var(--fg); font: 500 14px/1 var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: background-color 0.18s ease; }
.index-btn[aria-expanded='true'] { background: var(--fg); color: var(--deep); }
@media (hover: hover) { .index-btn:hover { background: rgba(255, 255, 255, 0.14); } .index-btn[aria-expanded='true']:hover { background: var(--fg); } }
.index-panel { position: absolute; right: 16px; top: 58px; width: min(620px, calc(100vw - 32px)); max-height: calc(100svh - 76px); overflow: auto; padding: 20px 24px; border-radius: 20px; background: var(--plate); box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px -24px rgba(0, 0, 0, 0.7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; transform-origin: top right; animation: ix-in 0.22s var(--ease-out); }
.index-panel[hidden] { display: none; }
@keyframes ix-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.ix-head { display: flex; align-items: center; min-height: 36px; font: 600 15px/1.2 var(--text); color: var(--fg); text-decoration: none; }
.ix-group ul { display: grid; }
.ix-group li a { display: flex; align-items: center; min-height: 32px; font-size: 14px; color: var(--muted); text-decoration: none; }
@media (hover: hover) { .ix-group a:hover { color: var(--accent-ink); } }
.ix-more { display: grid; align-content: start; }
@media (max-width: 1180px) { .nav { display: none; } }
@media (max-width: 767px) {
  .units { gap: 80px; }
  .unit-head h3 { font-size: 26px; }
  .unit-line { font-size: 16px; }
  .unit-window .unit-notes, .unit-liquid .unit-notes { grid-template-columns: minmax(0, 1fr); }
  .index-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); right: 8px; width: calc(100vw - 16px); }
}

/* v4: desktop OS. A workspace right of the phone, over the landscape; windows move with transform only. */
.os { position: relative; min-width: 0; min-height: 0; height: clamp(420px, calc(100svh - 380px), 760px); }
@media (min-width: 1181px) { .os { grid-column: 3; grid-row: 1 / 3; align-self: stretch; height: auto; margin: 4px 0; } }
@media (max-width: 767px) { .os { display: none; } }
.os-screen { position: absolute; inset: 0; overflow: clip; overflow-clip-margin: 32px; }
.osw { position: absolute; left: 0; top: 0; will-change: transform; touch-action: none; }
.osw[hidden] { display: none; }
.osw.min { visibility: hidden; }
.osw-in {
  height: 100%; display: grid; grid-template-rows: 36px minmax(0, 1fr); border-radius: 12px; overflow: hidden; background: #241a1c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.2s ease;
}
.osw.focus .osw-in { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 44px 90px -30px rgba(0, 0, 0, 0.85), 0 14px 28px -14px rgba(0, 0, 0, 0.55); }
.osw.max .osw-in { border-radius: 10px; }
.osw-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 10px 0 8px; background: #2b2123; user-select: none; -webkit-user-select: none; cursor: default; transition: background-color 0.2s ease; }
.osw.focus .osw-bar { background: #36292b; }
.osw-lights { display: flex; }
.osw-lights button { width: 20px; height: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.osw-lights svg { width: 12px; height: 12px; border-radius: 50%; background: #4a3d3f; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25); fill: none; stroke: transparent; stroke-width: 1.3; stroke-linecap: round; transition: background-color 0.16s ease, transform 0.12s var(--ease-out); }
.osw-lights .g svg path { fill: transparent; stroke: none; }
.osw.focus .r svg { background: #ff5f57; } .osw.focus .y svg { background: #febc2e; } .osw.focus .g svg { background: #28c840; }
.osw-lights:hover svg { stroke: rgba(40, 0, 0, 0.65); }
.osw-lights:hover .g svg path { fill: rgba(0, 40, 0, 0.6); }
.osw-lights:hover .r svg { background: #ff5f57; } .osw-lights:hover .y svg { background: #febc2e; } .osw-lights:hover .g svg { background: #28c840; }
.osw-lights button:active svg { transform: scale(0.88); }
.osw-lights button:focus-visible { outline: none; }
.osw-lights button:focus-visible svg { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--accent); }
.osw-lights button:focus-visible svg { outline: 2px solid var(--accent); outline-offset: 2px; }
.osw-url { height: 24px; width: min(420px, 100%); max-width: 46vw; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.26); font: 400 12px/1 var(--text); color: var(--fg); white-space: nowrap; overflow: hidden; min-width: 0; }
.osw:not(.focus) .osw-url { color: var(--muted); }
.osw-url svg { width: 11px; height: 11px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.2; }
.osw-url b { font-weight: 600; }
.osw-url span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.osw-k { justify-self: end; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.osw-view { position: relative; overflow: hidden; background: #0b0b0d; contain: strict; }
.osw-view::after { content: ''; position: absolute; inset: 0; background: rgba(12, 4, 7, 0.22); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 4; }
.osw:not(.focus) .osw-view::after { opacity: 1; }
.osw-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.osw-page .da-piece { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.osw-boot { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--deep) 86%, var(--c, var(--ft))); color: var(--muted); font: 500 13px/1 var(--text); transition: opacity 0.3s ease; pointer-events: none; }
.osw-view.live .osw-boot, .osx-view.live .osw-boot { opacity: 0; }
.inspect-on .osw-view { cursor: crosshair; }
.osw-h { position: absolute; z-index: 2; touch-action: none; }
.osw-h.n, .osw-h.s { left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.osw-h.n { top: -4px; } .osw-h.s { bottom: -4px; }
.osw-h.e, .osw-h.w { top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.osw-h.e { right: -4px; } .osw-h.w { left: -4px; }
.osw-h.ne, .osw-h.nw, .osw-h.se, .osw-h.sw { width: 16px; height: 16px; }
.osw-h.nw { left: -6px; top: -6px; cursor: nwse-resize; } .osw-h.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.osw-h.ne { right: -6px; top: -6px; cursor: nesw-resize; } .osw-h.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.osw.max .osw-h { display: none; }
/* While a window moves or resizes, no page takes the pointer away from the gesture. */
.os.busy .osw-view { pointer-events: none; }
.os.busy, .os.busy .osw-bar { cursor: default; }

/* The dock: a dot under running desktop apps, a short hop when one launches. */
.dcart { position: relative; }
.dcart::after { content: ''; position: absolute; left: 50%; top: 67px; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: var(--fg); opacity: 0; transform: scale(0.4); transition: opacity 0.2s ease, transform 0.2s var(--ease-out); }
.dcart.running::after { opacity: 0.85; transform: none; }
.dcart.launch .art { animation: dock-hop 0.6s var(--ease-out); }
@keyframes dock-hop { 0% { transform: none; } 30% { transform: translateY(-12px); } 55% { transform: none; } 75% { transform: translateY(-4px); } 100% { transform: none; } }
@media (max-width: 767px) { .dcart::after { top: 59px; } }

/* Phone: a desktop app full screen, with a clear way out. */
html.osx-open { overflow: hidden; }
.osx { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--deep); padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.22s ease, transform 0.32s var(--ease-out); }
.osx[hidden] { display: none; }
.osx.in { opacity: 1; transform: none; }
.osx-bar { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
.osx-t { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; min-width: 0; }
.osx-t .dot { background: var(--c); }
.osx-t b { font: 600 16px/1.2 var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osx-k { grid-column: 2; font-size: 11px; color: var(--dim); }
.osx-close { height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px 0 12px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, 0.1); color: var(--fg); font: 600 15px/1 var(--text); cursor: pointer; transition: transform 0.14s var(--ease-out), background-color 0.18s ease; }
.osx-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.osx-close:active { transform: scale(0.96); }
.osx-view { position: relative; overflow: hidden; background: #0b0b0d; }
.ix-group ul { list-style: none; margin: 0; padding: 0; }
.unit, .group, #brand, #film, #about { scroll-margin-top: 76px; }
.index-panel { background: linear-gradient(var(--plate), var(--plate)), var(--deep); }
@media (max-width: 767px) { .ix-head { min-height: 32px; font-size: 14px; } .ix-group li a { font-size: 13px; min-height: 30px; } .index-panel { gap: 12px 20px; padding: 16px 18px; } }
.osx-view { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 12px 12px 24px; background: var(--deep); }
.osx-screen { position: relative; flex: none; overflow: hidden; border-radius: 12px; background: #0b0b0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -24px rgba(0, 0, 0, 0.8); }
.osx-note { margin: 0 4px; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.osx-note:empty { display: none; }

/* v4: chapters. One chapter on screen at a time; each opens on a short cover and ends on the way into the next. */
main > section.ch-off:not(.tr-live) { display: none; }
.ch-num { font: 400 13px/1 var(--mono); color: var(--accent-ink); letter-spacing: 0.08em; margin-bottom: 4px; }
.sec .sec-head { min-height: 38svh; display: grid; align-content: end; padding-top: 24px; margin-bottom: 64px; }
.sec .sec-head .ch-num { font-size: clamp(64px, 9vw, 128px); line-height: 0.9; letter-spacing: -0.04em; font-family: var(--text); font-weight: 640; font-stretch: 84%; color: color-mix(in srgb, var(--accent) 80%, transparent); }
#home .ch-num { display: none; }
.ch-enter .sec-head > * { animation: ch-rise 0.7s var(--ease-out) both; }
.ch-enter .sec-head > :nth-child(2) { animation-delay: 0.06s; }
.ch-enter .sec-head > :nth-child(3) { animation-delay: 0.12s; }
.ch-enter .sec-head > :nth-child(4) { animation-delay: 0.18s; }
@keyframes ch-rise { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .ch-enter .sec-head > * { animation: none; } }
.ch-next { margin-top: 120px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px; padding: 32px 0 8px; border-top: 1px solid var(--line); text-decoration: none; color: var(--fg); }
.ch-next-k { grid-column: 1; font-size: 13px; color: var(--muted); }
.ch-next-n { grid-column: 1; display: flex; align-items: baseline; gap: 16px; font: 640 clamp(36px, 5vw, 64px)/1 var(--text); font-stretch: 84%; letter-spacing: -0.02em; }
.ch-next-n b { font-size: 15px; font-weight: 400; color: var(--accent-ink); }
.ch-next svg { grid-column: 2; grid-row: 1 / 3; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.3s var(--ease-out); }
@media (hover: hover) { .ch-next:hover svg { transform: translateX(6px); } .ch-next:hover .ch-next-n { color: var(--accent-ink); } }
#home .ch-next { grid-column: 1 / -1; margin-top: 24px; }
@media (min-width: 1181px) { #home .ch-next { display: none; } }

/* Guidance: a hint on the piece until the first touch, and Reset beside Inspect on every piece. */
.unit-stage { position: relative; }
.u-hint { position: absolute; left: 50%; top: 14%; z-index: 6; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 18px; pointer-events: none; white-space: nowrap; font: 500 13px/1 var(--text); color: #fff; background: rgba(12, 10, 20, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 30px -10px rgba(0, 0, 0, 0.6); transition: opacity 0.4s ease, translate 0.4s var(--ease-out); animation: hint-in 0.5s var(--ease-out) 0.8s both; }
.u-hint svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.u-hint.used { opacity: 0; translate: -50% 6px; }
@keyframes hint-in { from { opacity: 0; translate: -50% 8px; } }
.unit-window .u-hint { top: 96px; }
.unit-liquid .u-hint { top: auto; bottom: 24px; }
.u-side .numbers { flex-basis: 100%; }
.u-reset svg { stroke-linejoin: round; }

/* v4: on a phone a piece's iPhone fits on one screen together with its title (body 432 x 885 pt, about 2.05:1). */
@media (max-width: 767px) {
  .unit-phone .unit-stage, .unit-detail .unit-stage { max-width: min(300px, calc((100svh - 230px) / 2.05)); }
  .unit-detail .unit-stage { max-width: min(380px, calc((100svh - 230px) / 1.5)); }
  .unit { gap: 16px; }
  .unit-head { gap: 4px 10px; }
}

/* v4: lang */
.lang { display: flex; align-items: center; margin-left: auto; margin-right: -10px; }
.lang button { min-height: 36px; min-width: 32px; padding: 0 6px; border: 0; background: none; cursor: pointer; color: var(--dim, var(--muted)); font: 500 13px/1 var(--mono, ui-monospace, monospace); letter-spacing: 0.04em; border-radius: 18px; transition: color 0.18s ease; }
.lang button[aria-pressed='true'] { color: var(--fg); }
@media (hover: hover) { .lang button:hover { color: var(--fg); } }
.lang button:focus-visible { outline: 2px solid var(--fg); outline-offset: -4px; }
@media (max-width: 767px) {
  .lang { margin-right: 0; }
  .lang button { min-height: 44px; min-width: 36px; padding: 0 4px; }
}

/* v4: reach. CV and email beside the language switch, on every chapter. */
.reach { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.reach + .lang { margin-left: 8px; }
.reach a, .reach button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.08); color: var(--fg); font: 500 13px/1 var(--text); text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: background-color 0.18s ease; }
.reach svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.reach button.ok { background: color-mix(in srgb, var(--accent) 30%, transparent); }
@media (hover: hover) { .reach a:hover, .reach button:hover { background: rgba(255, 255, 255, 0.16); } }
@media (max-width: 767px) {
  .reach { gap: 2px; }
  .reach a, .reach button { min-height: 44px; min-width: 44px; padding: 0 10px; justify-content: center; }
  .reach .reach-l { display: none; }
  .reach button.ok .reach-l { display: inline; }
}
/* Skip link: off screen until focused. */
.skip { position: fixed; z-index: 200; left: 12px; top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--fg); color: var(--deep); font: 600 14px/1 var(--text); text-decoration: none; transform: translateY(-160%); transition: transform 0.2s var(--ease-out); }
.skip:focus-visible { transform: none; outline: 2px solid var(--accent); outline-offset: 2px; }

/* v4: guide. On a plate so the text keeps 4.5:1 over any part of the sky; a done step shows a check, it is not dimmed. */
.guide { padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--deep) 82%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.guide p { color: #ddd0d2; }
.guide li.done, .guide.used { opacity: 1; }
.guide li.done .mono { font-size: 0; color: transparent; background: var(--accent) center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2310030a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: none; }
.guide li.done b { text-decoration: none; }
@media (max-width: 767px) { .guide { padding: 12px; } }

/* v4: photo credits folded under a small toggle, below the decision. */
.unit-notes details.credits { font-size: 13px; color: var(--dim); }
.unit-notes details.credits summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; list-style: none; color: var(--muted); }
.unit-notes details.credits summary::-webkit-details-marker { display: none; }
.unit-notes details.credits summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate 0.2s ease; }
.unit-notes details.credits[open] summary::after { rotate: 225deg; translate: 0 2px; }
.unit-notes details.credits p { margin-top: 4px; font-size: 13px; color: var(--dim); }

/* v4: chapter openings. The cover is compact and the first piece starts inside the first screen. */
.sec .sec-head { min-height: 0; padding-top: 8px; margin-bottom: 40px; }
.sec .sec-head .ch-num { font-size: clamp(48px, 6vw, 88px); }
.sec .sec-head h2 { font-size: clamp(36px, 3.8vw, 52px); }
.sec { padding-top: 84px; }
@media (max-width: 767px) { .sec .sec-head { margin-bottom: 28px; } .sec { padding-top: 72px; } }
@media (min-width: 1181px) and (max-height: 980px) {
  .intro h1 { font-size: 40px; }
  .intro .line { font-size: 16px; margin-top: 10px; }
  .intro .where { display: none; }
  .guide { margin-top: 16px; padding: 12px 14px; gap: 10px; }
}

/* v4: phone ux */
@media (max-width: 767px) {
  /* Home: phone, then its card, then the apps, and Next at the very end. */
  #home .ch-next { order: 9; }
  .receiver { scroll-margin-top: 60px; }
  .card { scroll-margin-top: 60px; }
  /* Dock and tray labels on one line. */
  .tray-row .ios-cart .lb, .dcart .lb { display: block; max-width: 100%; max-width: none; margin-inline: -6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; letter-spacing: -0.01em; text-align: center; }
  /* Desktop chapter: the window is a poster with an Open button, no promise of taps at 0.28x. */
  .unit-window.poster .bw-view .bw-page, .unit-window.poster .bw-pan { pointer-events: none; }
  .unit-window.poster .bw-foot, .unit-window.poster .u-hint { display: none; }
  .unit-window.poster .unit-stage { position: relative; }
  .u-poster { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 40px 12px 12px; border-radius: 0 0 14px 14px; background: linear-gradient(transparent, rgba(8, 4, 8, 0.86) 45%); }
  .u-poster p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--fg); text-wrap: pretty; }
  .u-poster .btn { flex: none; min-height: 44px; background: var(--fg); color: var(--deep, #10030a); }
  .u-poster .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
}
/* Focus mode: a desktop page at a legible scale, panned with one finger and pinched with two. */
.osx { grid-template-rows: auto minmax(0, 1fr) auto; }
.osx-view { display: block; padding: 0; touch-action: none; overscroll-behavior: contain; cursor: grab; background: #070507; }
.osx-view .osx-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 0; will-change: transform; }
.osx-view .osx-screen.glide { transition: transform 0.32s var(--ease-out); }
.osx-view .osx-screen .osw-page { position: absolute; inset: 0; width: 100%; height: 100%; }
.osx-view .osx-screen .osw-page .da-piece { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.osx-view:not(.use) .osw-page { pointer-events: none; }
.osx-view.use { touch-action: auto; cursor: auto; box-shadow: inset 0 0 0 2px var(--c); }
.osx-foot { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--deep); }
.osx-mode { display: inline-flex; padding: 2px; border-radius: 22px; background: rgba(255, 255, 255, 0.08); }
.osx-mode button, .osx-zoom { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: none; color: var(--muted); font: 600 14px/1 var(--text); cursor: pointer; }
.osx-mode button[aria-pressed='true'] { background: var(--fg); color: var(--deep, #10030a); }
.osx-zoom { background: rgba(255, 255, 255, 0.08); color: var(--fg); font: 500 13px/1 var(--mono); }
.osx-foot .osx-note { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* v4: controls under every piece. Inspect and Reset sit right below the stage, in reach of the thumb, with enough
   contrast to read as buttons; the decision follows them. Same place and style in every chapter. */
.unit-phone .unit-notes .u-side, .unit-detail .unit-notes .u-side { order: -1; }
@media (max-width: 767px) { .unit-notes .u-side { order: -1; } }
.u-side .tool { height: 40px; padding: 0 16px; background: rgba(255, 255, 255, 0.13); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-size: 14px; }
@media (hover: hover) { .u-side .tool:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); } }
.u-side .tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 767px) { .u-side .tool { height: 44px; } }

/* v4: copy ux. The decision is two short sentences, always whole; the long copy waits behind Inspect. */
.card .decision, .card .decision[class] { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.es-note { margin: 0; font: 400 13px/1.4 var(--text); color: var(--dim); }
.card .es-note { grid-column: 1; }
.u-why .es-note { display: block; margin-top: 6px; }
.es-note:empty { display: none; }
.built { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px var(--line); }
.built p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.built p + p { margin-top: 8px; }
.built .kicker { margin: 0 0 6px; color: var(--c, var(--accent)); }
.card .built { grid-column: 1 / -1; max-height: min(220px, 34vh); overflow: auto; overscroll-behavior: contain; }
.unit-notes .built { grid-column: 1 / -1; }
.osw-page.glide { transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .osw-page.glide { transition: none; } }

/* v4: the home's left column never grows past the screen: the name stays at the top, the steps drop their sub-line
   on short screens, and "How it's built" scrolls inside the card. */
@media (min-width: 1181px) {
  .intro { align-self: start; }
  .card { align-self: start; max-height: calc(100svh - 120px - var(--intro-h, 0px)); overflow: auto; overscroll-behavior: contain; }
  .card .built { max-height: 160px; overflow: auto; }
}
@media (min-width: 1181px) and (max-height: 980px) {
  .guide p > span:not(.mono) { display: none; }
  .guide li { align-items: center; }
  .card .es-note, .card [class*="shipped"] { font-size: 13px; }
}
/* While Inspect is on the card needs the room; the steps step aside, as they do with an app open. */
@media (min-width: 1181px) { .desk:has(#inspectBtn[aria-pressed='true']) .guide { display: none; } }

/* v4: chapter number as a small label beside the kicker; the content starts right away. */
.sec .sec-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.sec .sec-head > :not(.ch-num):not(.kicker) { flex-basis: 100%; }
.sec .sec-head .ch-num { font: 500 13px/1 var(--mono); letter-spacing: 0.04em; color: var(--accent-ink); margin: 0; font-stretch: normal; }

/* v4: About. One analog photo with presence, the four lines beside it, the facts and the ways to reach me. */
#about .sec-head { margin-bottom: 28px; }
#about .sec-head h2 { font-size: clamp(44px, 5vw, 72px); }
.about-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.about-photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 914 / 596; background: #1a1210; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 240, 225, 0.06); }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
/* A soft vignette and a warm lift in the shadows; the grain of the film stays as it is. */
.about-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(16, 3, 10, 0.45) 100%), linear-gradient(rgba(255, 170, 110, 0.04), rgba(255, 170, 110, 0.04)); mix-blend-mode: multiply; }
.about-photo { animation: about-in 0.9s var(--ease-out) both; }
@keyframes about-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) { .about-photo { animation: none; } }
.about-text { display: grid; gap: 28px; align-content: center; }
.about-text .bio { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.about-text .bio li { font-size: 19px; line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.about-text .bio li + li { color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; }
.facts dt { font-size: 13px; color: var(--dim); }
.facts dd { margin: 4px 0 0; font: 600 15px/1.3 var(--text); }
.reach-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reach-row .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.reach-row .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.a-links { display: contents; }
#about .projects { margin-top: 112px; }
@media (max-width: 1100px) { .about-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
/* Desktop, two columns: the photo also answers to the screen's height (same proportion), so About with its footer is one
   screen at 1280x800 and lower. */
@media (min-width: 1101px) { .about-photo { width: min(100%, calc((100svh - 462px) * 914 / 596)); justify-self: end; } }
@media (min-width: 1024px) { body[data-section="about"] #about { padding-bottom: 16px; } .foot { padding-top: 12px; padding-bottom: 20px; } }
@media (max-width: 767px) {
  .about-photo { margin: 0 -16px; border-radius: 0; }
  .about-text .bio li { font-size: 17px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .facts div { display: flex; justify-content: space-between; gap: 12px; }
  .facts dd { margin: 0; text-align: right; }
}

/* v4: no badge pills. The project is plain small text after the title: no capsule, no colored dot, anywhere. */
.dot { display: none !important; }
.u-chip { box-shadow: none; padding: 0; border-radius: 0; background: none; font: 400 13px/1.2 var(--mono); letter-spacing: 0.02em; color: var(--dim); gap: 0; }
.unit-head .u-chip { align-self: baseline; }
.kicker .tail { color: var(--dim); }

/* v4: the open index sits on an opaque plate over a scrim; the page behind neither shows through nor scrolls. */
html.ix-open, html.ix-open body { overflow: hidden; }
.ix-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(8, 2, 6, 0.62); animation: ix-scrim 0.2s ease both; }
.ix-scrim[hidden] { display: none; }
@keyframes ix-scrim { from { opacity: 0; } }
.index-panel { background: #170811; overscroll-behavior: contain; z-index: 2; }

/* v4: chapter characters */
/* Mobile: one phone, the pieces beside it. Only the picked piece runs; picking opens it like an app. */
#mobile .units { display: block; }
.mp-device { --ph: min(calc(100svh - 128px), 820px); display: grid; grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 340px); gap: 56px; align-items: start; }
.mp-col { display: grid; align-content: start; gap: 20px; min-width: 0; padding-top: 8px; }
.mp-head .sec-head { margin: 0; padding: 0; }
.mp-head .sec-head h2 { font-size: clamp(32px, 3vw, 44px); margin: 6px 0 8px; }
.mp-head .sec-head .lead { font-size: 16px; }
.mp-k { margin: 4px 0 -8px; color: var(--muted); }
.mp-k .mono { color: var(--dim); }
.mp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mp-pick { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 56px; padding: 6px 12px 6px 6px; border: 0; border-radius: 16px; background: none; color: var(--fg); text-align: left; cursor: pointer; transition: background-color 0.18s ease; }
.mp-pick .mp-ic { width: 44px; height: 44px; border-radius: 11px; overflow: hidden; transition: transform 0.24s var(--ease-out); }
.mp-ic svg { display: block; width: 100%; height: 100%; }
.mp-tx { display: grid; gap: 2px; min-width: 0; }
.mp-name { font: 600 15px/1.2 var(--text); }
.mp-line { font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-pick[aria-pressed='true'] { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.mp-pick[aria-pressed='true'] .mp-name { color: #fff; }
@media (hover: hover) { .mp-pick:hover:not([aria-pressed='true']) { background: rgba(255, 255, 255, 0.05); } .mp-pick:hover .mp-ic { transform: scale(1.06); } }
.mp-pick:focus-visible, .mp-chip:focus-visible, .mp-step:focus-visible, .mp-why:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mp-stage { position: relative; display: flex; align-items: flex-start; gap: 18px; }
.mp-phone.pp-device { width: calc(var(--ph) * 432 / 885); max-width: none; transition: width 0.4s var(--ease-out); }
.mp-splash { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: var(--deep); transform-origin: 50% 50%; transition: opacity 0.18s linear; pointer-events: none; }
/* The skeleton (no poster) leaves the status bar to the screen, like the piece will. */
.pp-device .mp-splash:not(.has-poster) { top: calc(var(--pt) * 54); }
.mp-splash .mp-ic { width: 76px; height: 76px; border-radius: 18px; overflow: hidden; }
.mp-splash.out { opacity: 0; }
.mp-notes { display: grid; align-content: start; gap: 14px; min-width: 0; padding-top: 8px; }
.mp-meta { display: flex; gap: 14px; margin: 0; font-size: 13px; color: var(--dim); letter-spacing: 0.04em; }
.mp-meta .mp-count { color: var(--accent-ink); }
.mp-notes h3.mp-title { font-size: 30px; line-height: 1.1; min-height: 2lh; } /* two lines kept: a long title never moves the notes */
.mp-how { margin: 0; color: var(--fg); font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.mp-how:empty { display: none; }
.mp-notes .u-why, .mp-panel .u-why { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.mp .u-why .kicker { display: block; margin-bottom: 6px; color: var(--c); }
.mp .numbers { margin: 0; }
.mp .numbers[hidden], .mp .u-why[hidden], .mp .es-note[hidden] { display: none; }
.mp-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-tools .tool { height: 40px; padding: 0 16px; background: rgba(255, 255, 255, 0.13); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-size: 14px; }
.mp-focus { justify-self: start; }
.mp-focus svg, .mp-close svg, .mp-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mp-built { max-height: 200px; overflow: auto; overscroll-behavior: contain; }
.mp-hint { top: 18%; }
.mp-stage .mp-hint { left: calc(var(--ph) * 216 / 885); }
/* Focus: the phone at the height of the screen, the notes beside it, nothing else. */
html.mp-locked { overflow: hidden; }
.mp-device.focus { position: fixed; inset: 0; z-index: 45; --ph: calc(100svh - 104px); padding: 80px max(24px, calc(50vw - 640px)) 24px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); background: color-mix(in srgb, var(--deep) 96%, #000); animation: mp-in 0.3s var(--ease-out) both; }
.mp-device.focus .mp-col { visibility: hidden; }
.mp-device.focus .mp-notes { align-self: center; }
.mp-device.focus .mp-focus { display: none; }
.mp-close[hidden] { display: none; }
.mp-close { justify-self: start; height: 40px; padding: 0 14px; background: rgba(255, 255, 255, 0.13); color: var(--fg); }
@keyframes mp-in { from { opacity: 0; } }
@media (max-width: 1180px) and (min-width: 768px) {
  .mp-device { --ph: min(calc(100svh - 160px), 720px); grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
  .mp-notes { grid-column: 1 / -1; }
}
/* From 1024 px the three columns still fit (list, phone, notes), a little tighter: with the notes moved under the list
   the chapter ran past a 700 px window. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .mp-device { --ph: min(calc(100svh - 128px), 820px); grid-template-columns: minmax(240px, 1fr) auto minmax(220px, 280px); gap: 28px; }
  .mp-notes { grid-column: auto; }
}
/* On a real phone the phone is the device: the piece fills the screen under a bar of chips. */
@media (max-width: 767px) {
  #mobile { padding-top: 64px; }
  #mobile .sec-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; padding: 0; min-height: 0; }
  #mobile .ch-next { margin-top: 48px; }
}
.mp-full { position: relative; height: calc(100svh - 64px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; margin-inline: -16px; }
.mp-bar { display: grid; gap: 6px; padding: 0 0 8px; }
.mp-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; touch-action: pan-y; }
.mp-step { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; }
.mp-tt { margin: 0; display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; }
.mp-tt .mp-count { font-size: 13px; color: var(--accent-ink); letter-spacing: 0.06em; }
.mp-tt .mp-title { font: 600 17px/1.2 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mp-chips { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0 16px; overscroll-behavior-x: contain; }
.mp-chips::-webkit-scrollbar { display: none; }
.mp-chip { flex: none; scroll-snap-align: center; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.07); color: var(--muted); font: 500 14px/1 var(--text); cursor: pointer; white-space: nowrap; transition: background-color 0.18s ease, color 0.18s ease; }
.mp-chip[aria-pressed='true'] { background: var(--fg); color: var(--deep, #10030a); }
.mp-full .mp-stage { display: block; min-height: 0; }
.mp-full .mp-screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #0a0a0c; }
.mp-full .mp-hint { left: 50%; top: 22%; }
.mp-sheet { position: relative; border-top: 1px solid var(--line); background: var(--deep); }
.mp-why { width: 100%; min-height: 52px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 16px; border: 0; background: none; color: var(--fg); font: 600 15px/1 var(--text); text-align: left; cursor: pointer; }
.mp-why::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -135deg; translate: 0 3px; transition: rotate 0.2s ease; }
.mp-why[aria-expanded='true']::after { rotate: 45deg; translate: 0 -2px; }
.mp-sub { font: 400 13px/1.3 var(--text); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-panel { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 8; display: grid; gap: 12px; max-height: 62svh; overflow: auto; overscroll-behavior: contain; padding: 18px 16px 16px; border-radius: 20px 20px 0 0; background: var(--deep); box-shadow: 0 -1px 0 var(--line), 0 -24px 48px -24px rgba(0, 0, 0, 0.7); animation: mp-up 0.28s var(--ease-out) both; }
.mp-panel[hidden] { display: none; }
.mp-panel h3.mp-title { display: none; }
.mp-panel .mp-tools .tool { height: 44px; }
@keyframes mp-up { from { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-device.focus, .mp-panel { animation: none; } .mp-phone.pp-device { transition: none; } }

/* Desktop and Details: one scene each. The pieces are steps of the scene; only the shown one is mounted. */
#desktop .units, #details .units { display: block; }
.sc-steps { display: flex; gap: 4px; margin: -16px 0 24px; overflow-x: auto; scrollbar-width: none; }
.sc-steps::-webkit-scrollbar { display: none; }
.sc-step { flex: none; display: grid; gap: 2px; min-height: 52px; padding: 8px 14px; border: 0; border-radius: 14px; background: none; color: var(--muted); text-align: left; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; }
.sc-step b { font: 600 14px/1.2 var(--text); color: inherit; }
.sc-step span { font: 400 13px/1 var(--mono); color: var(--dim); letter-spacing: 0.04em; }
.sc-step[aria-selected='true'] { background: rgba(255, 255, 255, 0.09); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.sc-step[aria-selected='true'] span { color: var(--accent-ink); }
@media (hover: hover) { .sc-step:hover:not([aria-selected='true']) { background: rgba(255, 255, 255, 0.05); color: var(--fg); } }
.sc-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#desktop .units > .unit:not(.sc-on), #details .units > .unit:not(.sc-on) { display: none; }
.units > .unit.sc-on { animation: sc-in 0.36s var(--ease-out) both; }
@keyframes sc-in { from { opacity: 0; transform: translateY(10px); } }
/* Desktop: a big screen. The window takes the width; the notes are a slim gallery label under it. */
#desktop .unit-window .unit-head, #desktop .unit-ab .unit-head { display: none; }
@media (min-width: 768px) { #desktop .unit-window .unit-notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; align-items: start; padding-top: 14px; border-top: 1px solid var(--line); } }
@media (min-width: 1181px) { #desktop .sec-head h2, #details .sec-head h2 { font-size: clamp(30px, 2.8vw, 40px); } #desktop .unit-window .unit-stage { max-width: calc((100svh - 330px) * 1.6); margin-inline: auto; width: 100%; } }
/* Details: a specimen sheet. A smaller, closer frame with its label to the side. */
@media (min-width: 900px) {
  #details .unit-detail { grid-template-columns: minmax(0, 380px) minmax(0, 420px); grid-template-areas: 'stage head' 'stage notes'; justify-content: center; column-gap: 64px; align-content: start; }
  #details .unit-detail .unit-head { grid-area: head; align-self: end; }
  #details .unit-detail .unit-stage { grid-area: stage; }
  #details .unit-detail .unit-notes { grid-area: notes; align-self: start; }
}
@media (max-width: 767px) { .sc-steps { margin: -8px -16px 16px; padding: 0 16px; } .sc-step { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .units > .unit.sc-on { animation: none; } }

/* v5: little text. At rest a piece shows its title, one line and what to do; the decision and the number come with
   Inspect. Type tops out at 56 (scale 13/16/20/32/56), tracking no tighter than -0.025em. */
.unit:not(.insp-on) .u-why, .unit:not(.insp-on) .u-side .numbers, .unit:not(.insp-on) .es-note { display: none; }
.card:has(#inspectBtn[aria-pressed='false']) :is(.decision, [data-k='numbers'], .es-note) { display: none; }
.intro h1, .sec-head h2, #about .sec-head h2 { font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.02em; }
.ch-next-n { font-size: clamp(32px, 3.6vw, 56px); }
@media (max-width: 767px) { .intro h1, .sec-head h2, #about .sec-head h2 { font-size: 32px; } }
/* At rest a piece shows its title, line and what to do; the decision and the number wait for Inspect. */
.mp:not(.insp-on) .u-why, .mp:not(.insp-on) .mp-num { display: none; }

/* v5: the Desktop scene fits one screen: the window takes the width the height leaves it (1280 x 838 page plus the
   title bar), centred, with its caption bar under it. */
@media (min-width: 768px) {
  #desktop .unit-window .unit-stage { width: min(100%, calc((100svh - 400px) * 1.527)); margin-inline: auto; }
  #desktop .unit-window .bw-foot { display: none; }
  #desktop .sec-head { margin-bottom: 20px; }
  #desktop .sec-head h2 { font-size: clamp(32px, 3vw, 44px); }
}

/* v5: Brand and Music & Film bring their own scene and title; the shell shows only the chapter label above it. */
.ch-module .sec-head > :not(.ch-num):not(.kicker) { display: none; }
.ch-module .sec-head { margin-bottom: 8px; }
.ch-module .ch-body { scroll-margin-top: 72px; }

/* v5 phone: no phone drawn inside the phone. The home is the name, one line and the chapters; a tab bar holds the six
   chapters at the bottom, over the safe area. */
.m-chapters, .m-tabs { display: none; }
@media (max-width: 767px) {
  #home .receiver, #home #card, #home #tray, #home .guide, #home .where, #home .ch-next, #home #os { display: none !important; }
  #home.desk { min-height: calc(100svh - 64px - env(safe-area-inset-bottom)); align-content: start; }
  #home .intro h1 { font-size: 44px; }
  #home .intro .line { font-size: 18px; margin-top: 10px; }
  .m-chapters { display: grid; list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
  .m-chapters a { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg); }
  .m-chapters .mono { grid-row: 1 / 3; font-size: 12px; color: var(--accent-ink); }
  .m-chapters b { font: 600 19px/1.2 var(--text); }
  .m-chapters .m-ch-l { grid-column: 2; font-size: 13px; color: var(--muted); }
  .m-chapters svg { grid-column: 3; grid-row: 1 / 3; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.6; }
  .m-chapters a:active { background: rgba(255, 255, 255, 0.04); }
  .m-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--deep) 92%, transparent); box-shadow: 0 -1px 0 var(--line); }
  .m-tabs a { display: grid; justify-items: center; gap: 3px; min-height: 48px; padding-top: 4px; text-decoration: none; color: var(--dim); font: 500 10px/1.1 var(--text); text-align: center; -webkit-tap-highlight-color: transparent; }
  .m-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .m-tabs a[aria-current] { color: var(--fg); }
  .m-tabs a[aria-current] svg { stroke: var(--accent); }
  main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .top .nav { display: none; }
}
@media (max-width: 767px) {
  /* The full-screen player ends above the tab bar, so its Why bar stays in reach. */
  .mp-full { height: calc(100svh - 56px - 62px - env(safe-area-inset-bottom)); }
  /* Mobile chapter on a phone: the player is the chapter; its own bar carries the title and progress. */
  #mobile .sec-head { display: none; }
  #mobile.sec { padding-top: 56px; padding-bottom: 0; }
  #mobile .ch-next { display: none; }
  /* Desktop pieces on a phone: no miniature of the page. An app tile (name, one line, Open it) opens the focus mode
     at full screen. */
  .unit.poster .unit-stage .bw, .unit.poster .unit-stage .bw-frame, .unit.poster .unit-stage iframe { display: none !important; }
  .unit.poster .unit-stage { min-height: 0; }
  .unit.poster .u-poster { position: static; display: grid; gap: 14px; padding: 22px 18px; border-radius: 20px; background: color-mix(in srgb, var(--deep) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
  .unit.poster .u-poster p { color: var(--muted); font-size: 14px; }
  .unit.poster .u-open { justify-self: start; min-height: 48px; padding: 0 20px; font-size: 16px; }
  #desktop .sec-head h2, #details .sec-head h2 { font-size: 28px; }
}
@media (max-width: 767px) {
  /* Details on a phone: the interaction fills the screen edge to edge under its step chips, no frame around it. */
  #details .sec-head h2, #details .sec-head .lead { display: none; }
  #details .sec-head { margin-bottom: 8px; }
  #details .unit-detail .unit-head { display: none; }
  #details .unit-detail .unit-stage { max-width: none !important; width: 100vw; justify-self: start; margin-inline: -16px; border-radius: 0; aspect-ratio: auto !important; height: calc(100svh - 56px - 62px - 120px - 64px - env(safe-area-inset-bottom)); box-shadow: none; }
  #desktop .unit.poster .u-inspect { display: none; }
  #desktop .unit.poster .unit-head { display: flex; }
}
/* Music & Film brings its own kicker ("Music & Film") above its title; the shell label would repeat it. */
#film.ch-module .sec-head { display: none; }

/* v5: desktop and details entries */
.u-how, .u-num, .sc-dk .sc-ic, .sc-dk em, .dt-rule, .dt-crop { display: none; }
.sc-step span i { font-style: normal; }
/* A live page fills its window: no edge shading over it (that was for panning a frozen page). */
.bw:is([data-kind='live'], [data-kind='piece']) .bw-view::before, .bw:is([data-kind='live'], [data-kind='piece']) .bw-view::after { display: none; }
@media (min-width: 768px) {
  /* Desktop: sitting at a computer. A dock of the six apps on the left, one window, a slim caption bar under it. */
  #desktop .sec-head { margin-bottom: 20px; }
  #desktop .sec-head h2 { font-size: 32px; max-width: 760px; margin-bottom: 0; }
  #desktop .sec-head .lead { display: none; }
  .dk-scene { --dkw: min(100%, calc((100svh - 330px) * 1.528)); display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 32px; align-items: center; }
  .sc-dk { flex-direction: column; align-self: center; gap: 4px; margin: 0; padding: 8px 6px; overflow: visible; border-radius: 24px; background: rgba(18, 8, 12, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.07), 0 24px 48px -24px rgba(0, 0, 0, 0.7); }
  .sc-dk .sc-step { position: relative; display: grid; justify-items: center; gap: 5px; min-height: 0; padding: 8px 2px 7px; border-radius: 16px; text-align: center; background: none; box-shadow: none; }
  .sc-dk .sc-step > span, .sc-dk .sc-step > b { display: none; }
  .sc-dk .sc-ic { display: block; width: 46px; height: 46px; transition: transform 0.24s var(--ease-out); }
  .sc-dk .sc-ic svg { display: block; width: 100%; height: 100%; }
  .sc-dk em { display: block; max-width: 84px; font: 500 13px/1.15 var(--text); font-style: normal; color: var(--muted); }
  .sc-dk .sc-step::before { content: ''; position: absolute; left: -6px; top: 50%; width: 3px; height: 22px; margin-top: -11px; border-radius: 2px; background: var(--fg); transform: scaleY(0); transition: transform 0.22s var(--ease-out); }
  .sc-dk .sc-step[aria-selected='true'] { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
  .sc-dk .sc-step[aria-selected='true']::before { transform: none; }
  .sc-dk .sc-step[aria-selected='true'] em { color: var(--fg); }
  @media (hover: hover) { .sc-dk .sc-step:hover .sc-ic { transform: scale(1.08); } .sc-dk .sc-step:hover:not([aria-selected='true']) { background: none; } }
  #desktop .units > .unit.sc-on { animation: none; }
  #desktop .units > .unit { width: var(--dkw); margin-inline: auto; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'stage stage' 'head tools' 'why why'; column-gap: 24px; row-gap: 0; }
  #desktop .unit .unit-stage { grid-area: stage; width: 100%; max-width: none; margin: 0; }
  #desktop .unit-ab .unit-stage { height: calc(var(--dkw) / 1.528 + 46px); overflow: auto; overscroll-behavior: contain; }
  #desktop .unit .unit-head { grid-area: head; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 12px; min-width: 0; max-width: none; padding-top: 14px; white-space: nowrap; animation: dk-cap 0.3s ease 0.14s both; }
  #desktop .unit .unit-head h3 { font-size: 16px; letter-spacing: 0; flex: none; }
  #desktop .unit .unit-head .u-chip { order: 3; font-size: 13px; color: var(--dim); flex: none; }
  #desktop .unit .unit-line { margin: 0; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #desktop .unit .u-how { display: block; order: 2; flex: none; margin: 0; padding-left: 12px; border-left: 1px solid var(--line); font-size: 13px; color: var(--fg); }
  #desktop .unit .unit-notes { display: contents; }
  #desktop .unit .u-side { grid-area: tools; flex-wrap: nowrap; gap: 8px; padding-top: 8px; animation: dk-cap 0.3s ease 0.14s both; }
  #desktop .unit .u-side .numbers { flex: none; font-size: 13px; }
  #desktop .unit .u-side .tool { height: 34px; padding: 0 12px; font-size: 13px; }
  #desktop .unit .u-why { display: none; }
  #desktop .unit.insp-on .u-why { grid-area: why; margin: 10px 0 0; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #desktop .unit .built, #desktop .unit .credits { display: none; }
  #desktop .unit .bw-view { max-height: none; }
  @keyframes dk-cap { from { opacity: 0; } }

  /* Details: a specimen sheet. A compact index of the six, one piece under a loupe with its measured size, the
     number and the notes beside it. */
  #details .sec-head { margin-bottom: 20px; }
  #details .sec-head h2 { font-size: 32px; margin-bottom: 0; }
  #details .sec-head .lead { display: none; }
  .dt-scene { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .sc-dt { flex-direction: column; gap: 0; margin: 8px 0 0; overflow: visible; border-top: 1px solid var(--line); }
  .sc-dt .sc-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; gap: 0; min-height: 44px; padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; }
  .sc-dt .sc-step span i { display: none; }
  .sc-dt .sc-step span { font-size: 13px; }
  .sc-dt .sc-step b { font-size: 15px; transition: transform 0.22s var(--ease-out); }
  .sc-dt .sc-step[aria-selected='true'] { background: none; box-shadow: none; color: #fff; }
  .sc-dt .sc-step[aria-selected='true'] b { transform: translateX(4px); }
  @media (hover: hover) { .sc-dt .sc-step:hover:not([aria-selected='true']) { background: none; color: var(--fg); } }
  #details .unit-detail { grid-template-columns: auto minmax(0, 340px); grid-template-areas: 'stage head' 'stage notes'; justify-content: start; column-gap: 56px; row-gap: 20px; align-content: start; }
  #details .unit-detail .unit-head { grid-area: head; align-self: end; display: grid; gap: 10px; max-width: none; }
  #details .unit-detail .unit-notes { grid-area: notes; align-self: start; }
  #details .u-num { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font: 600 56px/1 var(--text); letter-spacing: -0.025em; color: var(--fg); font-variant-numeric: tabular-nums; }
  #details .u-num .mono { font-size: 13px; letter-spacing: 0; color: var(--dim); }
  #details .unit-detail .unit-head h3 { font-size: 32px; }
  #details .unit-detail .unit-line { margin: 0; font-size: 16px; color: var(--muted); }
  #details .unit-detail .u-chip { font-size: 13px; color: var(--dim); }
  #details .unit-detail .u-how { display: block; margin: 0; font-size: 14px; color: var(--fg); }
  #details .unit-detail .u-how::before { content: ''; display: inline-block; width: 14px; height: 1px; margin-right: 8px; vertical-align: middle; background: var(--accent); }
  .dt-spec { --rule: rgba(255, 255, 255, 0.3); grid-area: stage; position: relative; padding: 30px 40px 0 0; }
  #details .dt-spec .unit-stage { width: min(380px, calc((100svh - 300px) * var(--ar, 0.66))); max-width: none; }
  #details .units { position: relative; }
  .dt-ruler { position: absolute; z-index: 2; pointer-events: none; --rule: rgba(255, 255, 255, 0.3); }
  .dt-rule { display: block; position: absolute; pointer-events: none; color: var(--rule); }
  .dt-w { top: 10px; left: 0; right: 40px; height: 9px; border-inline: 1px solid; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
  .dt-h { top: 30px; bottom: 0; right: 14px; width: 9px; border-block: 1px solid; background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; }
  .dt-rule b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 2px 6px; font-size: 13px; line-height: 1; color: var(--dim); background: var(--deep); white-space: nowrap; }
  .dt-h b { writing-mode: vertical-rl; padding: 6px 2px; }
  .dt-crop { display: block; position: absolute; inset: 22px 32px -8px -8px; pointer-events: none; --m: linear-gradient(var(--rule), var(--rule));
    background: var(--m) 0 0 / 1px 10px, var(--m) 0 0 / 10px 1px, var(--m) 100% 0 / 1px 10px, var(--m) 100% 0 / 10px 1px, var(--m) 0 100% / 1px 10px, var(--m) 0 100% / 10px 1px, var(--m) 100% 100% / 1px 10px, var(--m) 100% 100% / 10px 1px; background-repeat: no-repeat; }
  #details .units > .unit.sc-on { animation: dt-in 0.32s var(--ease-out) both; }
  @keyframes dt-in { from { opacity: 0; transform: scale(0.985); } }
}
@media (prefers-reduced-motion: reduce) {
  #desktop .unit .unit-head, #desktop .unit .u-side, #details .units > .unit.sc-on { animation: none; }
  .sc-dk .sc-ic, .sc-dk .sc-step::before, .sc-dt .sc-step b { transition: none; }
}

/* v5: desktop journey */
/* A chapter swap pins both chapters where they sit on screen (transition.js?v=93751818e1) and slides them; nothing takes input mid-way. */
main > section.tr-live { position: fixed; left: 0; right: 0; will-change: transform, opacity; backface-visibility: hidden; }
html.tr-on main { pointer-events: none; }
.jr, .jr-hint { display: none; }
@media (min-width: 1024px) {
  /* The bottom indicator and the wheel lead to the next chapter, so the end-of-chapter link and the footer stay for About only. */
  html.jr-on main > section > .ch-next { display: none; }
  html.jr-on body:not([data-section="about"]) .foot { display: none; }
  html.jr-on .sec { padding-bottom: 40px; }
  html.jr-on #home.desk { padding-bottom: 52px; }

  /* Where you are, bottom centre: the chapter's name, one dot per step (the current one long and ruby, each a button)
     and the next chapter. The top bar lists the chapters, so this does not. It sits on a feathered plate of the deep
     tone, with no edge, so it reads over any part of the photo. */
  .jr { display: flex; align-items: center; gap: 16px; position: fixed; z-index: 45; left: 50%; bottom: 12px; height: 40px; padding: 0 22px; transform: translateX(-50%); isolation: isolate; white-space: nowrap; font: 500 13px/1 var(--text); color: var(--muted); }
  .jr::before { content: ''; position: absolute; z-index: -1; inset: -20px -64px -12px; pointer-events: none; background: color-mix(in srgb, var(--deep) 80%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent), linear-gradient(transparent, #000 45%, #000 70%, transparent); -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent), linear-gradient(transparent, #000 45%, #000 70%, transparent); mask-composite: intersect; }
  .jr-now { color: var(--fg); font-weight: 600; }
  .jr-ticks { display: flex; align-items: center; margin-inline: -5px; }
  .jr-ticks:empty { display: none; }
  .jr-t { display: grid; place-items: center; width: 16px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 0.3s var(--ease-out); }
  .jr-t i { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 40%, transparent); transition: width 0.3s var(--ease-out), background-color 0.2s ease; }
  .jr-t.done i { background: color-mix(in srgb, var(--fg) 78%, transparent); }
  .jr-t[aria-current] { width: 32px; }
  .jr-t[aria-current] i { width: 22px; background: var(--accent-ink); }
  @media (hover: hover) { .jr-t:not([aria-current]):hover i { background: var(--fg); } }
  .jr-t:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -4px; border-radius: 8px; }
  .jr-next { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); color: var(--muted); text-decoration: none; transition: color 0.18s ease; }
  .jr-next[hidden] { display: none; }
  .jr-next-k { color: var(--dim); font-weight: 400; }
  .jr-next b { font-weight: 500; }
  .jr-next svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease-out); }
  @media (hover: hover) { .jr-next:hover { color: var(--fg); } .jr-next:hover svg { transform: translateX(3px); } }
  .jr-next:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; }

  .jr-hint { display: block; position: fixed; z-index: 46; left: 50%; bottom: 52px; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font: 500 13px/1.2 var(--text); white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translate3d(-50%, 6px, 0); transition: opacity 0.2s ease, transform 0.2s var(--ease-out); }
  .jr-hint.on { opacity: 1; transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .jr-t, .jr-t i, .jr-next svg, .jr-hint { transition: none; } }
@media (min-width: 1024px) {
  /* Piece steps crossfade in JS (scene() in main.js, player.js); the outgoing one stays laid over the incoming. */
  html.jr-on #desktop .units, html.jr-on #details .units { position: relative; }
  html.jr-on .units > .unit.sc-on, html.jr-on #details .units > .unit.sc-on { animation: none; }
  #desktop .units > .unit.sc-ghost, #details .units > .unit.sc-ghost { display: block; }
}

/* v5: library */
.lib { --lib-bg: #10030a; position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain; background: var(--lib-bg); color: var(--fg); animation: lib-fade 0.2s ease both; }
.lib[hidden] { display: none; }
.lib-in { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad) 72px; animation: lib-in 0.32s var(--ease-out) both; }
@keyframes lib-fade { from { opacity: 0; } }
@keyframes lib-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.lib .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lib-top { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr); align-items: center; gap: 24px; height: 76px; background: linear-gradient(var(--lib-bg) 78%, transparent); }
.lib-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.lib-title h2 { margin: 0; font: 600 20px/1.2 var(--text); letter-spacing: -0.01em; }
.lib-total { font: 400 13px/1 var(--mono); color: var(--dim); white-space: nowrap; }
.lib-search { position: relative; display: flex; align-items: center; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: box-shadow 0.18s ease, background-color 0.18s ease; }
.lib-search:focus-within { background: rgba(255, 255, 255, 0.075); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26); }
.lib-search svg { position: absolute; left: 14px; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.lib-search input { width: 100%; height: 100%; padding: 0 14px 0 42px; border: 0; background: none; color: var(--fg); font: 400 15px/1 var(--text); outline: none; -webkit-appearance: none; appearance: none; }
.lib-search input::placeholder { color: var(--dim); }
.lib-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lib-close { justify-self: end; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 14px; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; transition: color 0.18s ease, background-color 0.18s ease; }
.lib-close svg { order: 2; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.lib-close kbd { font: 400 13px/1 var(--mono); color: var(--dim); padding: 4px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) { .lib-close:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); } }
.lib-filters { display: grid; gap: 14px; padding: 6px 0 4px; }
.lib-cats, .lib-types { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lib-cats button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 500 14px/1 var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.lib-cats button span { font: 400 13px/1 var(--mono); color: var(--dim); transition: color 0.18s ease; }
.lib-cats button[aria-pressed='true'] { background: var(--fg); color: var(--deep); box-shadow: none; }
.lib-cats button[aria-pressed='true'] span { color: color-mix(in srgb, var(--deep) 60%, transparent); }
.lib-types { gap: 2px; }
.lib-types-k { margin-right: 8px; font: 400 13px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.lib-types button { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 400 13px/1 var(--text); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.lib-types button[aria-pressed='true'] { color: var(--fg); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (hover: hover) {
  .lib-cats button[aria-pressed='false']:hover { color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
  .lib-types button[aria-pressed='false']:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
}
.lib-group { margin-top: 40px; }
.lib-group[hidden] { display: none; }
.lib-group h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); font: 600 15px/1.2 var(--text); }
.lib-group h3 span { font: 400 13px/1 var(--mono); color: var(--dim); }
.lib-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
.lib-grid li[hidden] { display: none; }
.lib-card { display: block; color: inherit; text-decoration: none; border-radius: 14px; transition: transform 0.28s var(--ease-out); }
.lib-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lib-poster { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: linear-gradient(170deg, color-mix(in srgb, var(--c) 17%, #150a12) 0%, #0b0609 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.lib-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 0.45s var(--ease-out); }
.lib-poster img[data-fit='contain'] { object-fit: contain; padding: 14% 18%; }
.lib-card.tall .lib-poster img { inset: 8% auto auto 50%; width: auto; height: 92%; aspect-ratio: 360 / 560; translate: -50% 0; border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 36px -18px rgba(0, 0, 0, 0.8); transform-origin: 50% 100%; }
.lib-icon { position: absolute; inset: 0; display: none; place-items: center; }
.lib-icon svg { width: 64px; height: 64px; }
.lib-poster.no-img img { display: none; }
.lib-poster.no-img .lib-icon { display: grid; }
.lib-meta { display: grid; gap: 5px; padding: 14px 2px 0; }
.lib-proj { font: 400 13px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-name { font: 600 15px/1.3 var(--text); color: var(--fg); letter-spacing: -0.005em; }
.lib-tags { font: 400 13px/1.35 var(--text); color: var(--muted); }
.lib-tags span + span::before { content: '\00b7'; margin: 0 7px; color: var(--dim); }
@media (hover: hover) {
  .lib-card:hover { transform: translate3d(0, -2px, 0); }
  .lib-card:hover .lib-poster img { scale: 1.02; }
}
.lib-empty { padding: 72px 0; text-align: center; color: var(--muted); }
.lib-empty[hidden] { display: none; }
.lib-empty p { margin: 0 0 16px; font-size: 15px; }
.lib-clear { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: var(--fg); font: 500 14px/1 var(--text); cursor: pointer; }
@media (max-width: 1100px) { .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .lib-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title close' 'search search'; gap: 4px 12px; height: auto; padding: 8px 0 10px; background: var(--lib-bg); }
  .lib-title { grid-area: title; }
  .lib-search { grid-area: search; }
  .lib-close { grid-area: close; padding: 0 12px; }
  .lib-close kbd { display: none; }
  .lib-search input { font-size: 16px; }
  .lib-filters { gap: 10px; }
  .lib-cats, .lib-types { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scrollbar-width: none; }
  .lib-cats::-webkit-scrollbar, .lib-types::-webkit-scrollbar { display: none; }
  .lib-cats button, .lib-types button { flex: none; }
  .lib-cats button { height: 44px; }
  .lib-types button { height: 40px; }
  .lib-types-k { flex: none; }
  .lib-group { margin-top: 28px; }
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .lib-poster, .lib-card { border-radius: 12px; }
  .lib-meta { padding-top: 10px; gap: 4px; }
  .lib-name { font-size: 14px; }
  .lib-tags { font-size: 12px; }
  .lib-tags span + span::before { margin: 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-in { animation-name: lib-fade; }
  .lib-card, .lib-poster img { transition: none; }
  .lib-card:hover { transform: none; }
}

/* The poster is the whole screen as the piece first paints it (same box, same scale): drawn 1:1, never cropped. */
.mp-splash .mp-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; }
/* On desktop the chapter's entry is the sideways travel; the cover's own rise would arrive late on top of it. */
@media (min-width: 1024px) { .ch-enter .sec-head > * { animation: none; } }

/* v6: About is the photo, four lines, the ways to reach me and the key facts in one line. */
.facts-line { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 500 15px/1.3 var(--text); color: var(--fg); }
.facts-line span[aria-hidden] { color: var(--dim); }

/* v6: the liquid header's scroll control floats beside the phone; it never takes room, so the iPhone sits in the
   same place for every piece. */
.mp-device .mp-stage { display: block; }

/* v6: details and notes */
@media (min-width: 1024px) {
  /* Every piece shares one cell and keeps its layout while hidden (its neighbours stay mounted there, already
     final): the outgoing one stays exactly where it was while the incoming one arrives. */
  #details .units { display: grid; }
  #details .units > .unit { grid-area: 1 / 1; }
  #details .units > .unit:not(.sc-on) { display: grid; visibility: hidden; pointer-events: none; }
  #details .units > .unit.sc-ghost { visibility: visible; z-index: 0; }
  #details .units > .unit.sc-on { z-index: 1; }
  /* One text column height for all pieces (the tallest head, set by scene() in main.js): nothing beside the piece moves. */
  #details .unit-detail .unit-head { min-height: var(--dt-head, auto); align-content: start; }
}
/* Poster and live frame share the stage box. The frame fades in over the opaque poster, which goes only once the
   frame is fully opaque: never two translucent copies of the piece at once. */
.unit-detail .unit-stage .dt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity 0s linear 0.22s; }
.unit-detail .unit-stage .da-piece { opacity: 0; transition: opacity 0.2s ease; }
.unit-detail .unit-stage.dt-live .da-piece { opacity: 1; }
.unit-detail .unit-stage.dt-live .dt-poster { opacity: 0; }

/* Design notes: accent marks with a dark halo so they read over any piece, values in mono, numbered markers tied to
   the list beside the piece (hover either side and the pair lights up, the rest steps back). */
.nt { --nt: #ff6f86; position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.nt[hidden] { display: none; }
.nt-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nt-g { transition: opacity 0.16s ease; }
.nt[data-hot]:not([data-hot='']) .nt-g:not(.hot), .nt[data-hot]:not([data-hot='']) .nt-v:not(.hot), .nt[data-hot]:not([data-hot='']) .nt-m:not(.hot) { opacity: 0.22; }
.nt-box { fill: color-mix(in srgb, var(--nt) 10%, transparent); stroke: var(--nt); stroke-width: 1; stroke-dasharray: 4 3; paint-order: stroke; filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.95)); }
.nt-halo { fill: none; stroke: rgba(8, 2, 5, 0.85); stroke-width: 3.5; stroke-linecap: round; }
.nt-line { fill: none; stroke: var(--nt); stroke-width: 1.25; stroke-linecap: round; }
.nt-g.hot .nt-line { stroke-width: 2; }
.nt-g.hot .nt-box { fill: color-mix(in srgb, var(--nt) 18%, transparent); stroke-dasharray: none; }
.nt-v { position: absolute; transform: translate(-50%, -50%); padding: 3px 6px; border-radius: 5px; background: rgba(12, 3, 8, 0.92); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nt) 60%, transparent); color: #fff; font: 500 13px/1 var(--mono); white-space: nowrap; transition: opacity 0.16s ease; }
.nt-v[data-at='v'] { transform: translate(6px, -50%); }
.nt-v[data-at='h'] { transform: translate(-50%, calc(-100% - 6px)); }
.nt-m { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--nt); color: #14040b; font: 700 11px/1 var(--mono); box-shadow: 0 0 0 1.5px rgba(8, 2, 5, 0.9); pointer-events: auto; cursor: default; transition: opacity 0.16s ease, transform 0.16s var(--ease-out); }
.nt-m.hot { transform: scale(1.12); }
.nt-list { display: grid; gap: 8px; }
.nt-list[hidden] { display: none; }
.nt-k { margin: 0; font: 400 13px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.nt-list ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nt-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 8px 6px 0; border-radius: 8px; color: var(--muted); font-size: 14px; line-height: 1.35; outline: none; transition: color 0.16s ease, background-color 0.16s ease; }
.nt-list li.hot, .nt-list li:focus-visible { color: var(--fg); background: color-mix(in srgb, #ff6f86 9%, transparent); }
.nt-list li:focus-visible { box-shadow: inset 0 0 0 1px #ff6f86; }
.nt-n { display: grid; place-items: center; width: 20px; height: 20px; margin-top: -1px; border-radius: 6px; background: #ff6f86; color: #14040b; font: 700 11px/1 var(--mono); }
.nt-t b { margin-right: 6px; color: var(--fg); font: 500 13px/1.35 var(--mono); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .nt-g, .nt-v, .nt-m, .nt-list li, .unit-detail .unit-stage .dt-poster, .unit-detail .unit-stage .da-piece { transition: none; } }
/* With the numbered notes open, the long build note would push Details past one screen; the decision line stays. */
@media (min-width: 1024px) { #details .unit.insp-on .built { display: none; } }

/* v6: the footer belongs to About. A window shows the piece's poster while the page starts: the view as the live
   piece first paints it, at the view's own box (fill, never cover), with no label on it. */
body:not([data-section="about"]) .foot { display: none; }
.bw-boot .bw-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; }
.bw-boot:has(.bw-poster) span { display: none; }
.bw.no-poster .bw-boot .bw-poster { display: none; }
.bw.no-poster .bw-boot span { display: inline; }

/* Legibility (22-oct): where a chapter's text sits over the bright part of the photo (the volcano, the snow, the dusk
   glow), a feathered plate of the deep tone sits behind it: no edge and no box, it only darkens the photo under the
   words until muted text reads at 4.5:1 (tools/contraste.mjs measures it over the rendered pixels). */
@media (min-width: 1024px) {
  /* Mobile: the list of pieces. Details: the index, and the number, title and notes beside the piece (each block its
     own haze; they overlap into one). An ellipse twice the block's size, so it has no corners: full strength over the
     words, gone well past them. */
  .dt-scene > .sc-steps, .mp-col, #details .unit-detail .unit-head, #details .unit-detail .unit-notes { position: relative; isolation: isolate; }
  .dt-scene > .sc-steps::before, .mp-col::before, #details .unit-detail .unit-head::before, #details .unit-detail .unit-notes::before {
    content: ''; position: absolute; z-index: -1; inset: -50%; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--deep) 66%, transparent) 64%, color-mix(in srgb, var(--deep) 30%, transparent) 84%, transparent);
  }
  /* The index's haze reaches up to the heading: the heading stays on top of it. */
  #details .sec-head { position: relative; z-index: 1; }
}

/* Desktop: the step list sits at the top of the windows, not centered on them; the windows change height from piece
   to piece, and a centered list moved with them (layout shift). */
@media (min-width: 1024px) { .dk-scene > .sc-steps { align-self: start; } }

/* Mobile chapter (desktop): the neighbours kept mounted beside the piece shown, invisible and inert until a step. */
.pp-page > .mp-warm { opacity: 0; pointer-events: none; }
/* Desktop chapter: like Details, every window shares one cell and keeps its layout while hidden, so the neighbours
   kept mounted are already final when a step shows them. */
@media (min-width: 1024px) {
  #desktop .units { display: grid; }
  #desktop .units > .unit { grid-area: 1 / 1; }
  #desktop .units > .unit:not(.sc-on) { display: grid; visibility: hidden; pointer-events: none; }
  #desktop .units > .unit.sc-ghost { visibility: visible; }
}
/* The legibility haze reaches well past its block (inset -50%): clipped to the chapter, so a one-screen chapter never
   grows the page and never scrolls. */
@media (min-width: 1024px) { #mobile, #details { overflow-y: clip; } }

/* v7 home: one desk the size of the screen. The name sits on the wallpaper; the phone, the card and the windows ride
   on one layer above it and move anywhere on it; the dock floats over everything at the bottom. The layer itself takes
   no pointer, so only what you see can be grabbed. */
html:not(.m-on) #home.desk { position: relative; display: block; height: 100svh; min-height: 640px; max-width: none; margin: 0; padding: 0; overflow: clip; }
/* Off screen it goes like any chapter: the rule above outweighs 'main > section.ch-off' and kept the home under every
   other chapter, two screens tall. */
html:not(.m-on) main > #home.desk.ch-off:not(.tr-live) { display: none; }
html:not(.m-on) #home .deskwin { display: contents; }
html:not(.m-on) #home .os { position: absolute; inset: 64px 0 0; z-index: 2; height: auto; margin: 0; pointer-events: none; }
html:not(.m-on) #home .os-screen { overflow: visible; }
.os-screen > * { pointer-events: auto; }
.os-thing { position: absolute; left: 0; top: 0; will-change: transform; touch-action: none; }
.os-thing.carried { cursor: grabbing; }
.os-shield { position: fixed; inset: 0; z-index: 2147483000; }
#home .receiver.os-thing { margin: 0; cursor: grab; }
#home .receiver.os-thing :is(.ios-icon, .ios-win, .ios-swipe, button, a) { cursor: pointer; }
/* The card closes the guide: right under the two steps and as wide, on the same plate. It can be carried anywhere:
   a small grip of dots at its top and the grab cursor say so. No coloured edge, nothing scrolls inside it. */
html:not(.m-on) #home .guide { width: 316px; }
#home .card.os-thing { width: 316px; max-height: none; overflow: visible; padding: 18px 16px 16px; border-radius: 12px; background: color-mix(in srgb, var(--deep) 84%, transparent); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -24px rgba(0, 0, 0, 0.7); cursor: grab; }
#home .card.os-thing.carried { cursor: grabbing; }
#home .card.os-thing :is(button, a) { cursor: pointer; }
#home .card.os-thing::after { content: "" ; position: absolute; top: 5px; left: 50%; width: 18px; height: 10px; translate: -50% 0; pointer-events: none; opacity: 0.5; background: radial-gradient(circle, var(--fg) 1.2px, transparent 1.6px) 0 0 / 6px 5px; }
@media (hover: hover) { #home .card.os-thing:hover::after { opacity: 0.8; } }
#home .card.os-thing .kicker { font-size: 13px; }
#home .card.os-thing h2 { font-size: 19px; line-height: 1.2; margin-top: 2px; }
#home .card.os-thing .card-detail { order: 9; min-height: 36px; margin-top: 2px; font-weight: 600; }
#home .card.os-thing .card-detail::after { content: ' \2192'; }
html:not(.m-on) #home .tray { position: absolute; z-index: 4; left: 50%; bottom: 18px; translate: -50% 0; margin: 0; }
html:not(.m-on) #home .ch-next { display: none; }

/* The name is the wallpaper: set huge behind the desk, the role and the line under it, then the two steps. The lines
   under the name sit on a feathered veil of the deep tone and the steps on a plate, so they read at 4.5:1 over any
   part of the landscape. */
html:not(.m-on) #home .intro { position: absolute; z-index: 1; left: 40px; top: 72px; display: grid; justify-items: start; pointer-events: none; isolation: isolate; }
html:not(.m-on) #home .intro > * { pointer-events: auto; }
html:not(.m-on) #home .intro h1 { position: relative; width: fit-content; font-size: clamp(110px, 13vw, 260px); line-height: 0.82; letter-spacing: -0.045em; max-width: 7ch; color: var(--fg); text-shadow: 0 1px 2px color-mix(in srgb, var(--deep) 45%, transparent); }
/* The name stays the wallpaper but reads at 3:1 over the light dawn sky: a broad feathered shade of the deep tone under
   it (no edge, no glow), and a contact shadow one pixel deep. */
html:not(.m-on) #home .intro h1::before { content: ''; position: absolute; z-index: -1; inset: -50% -50% -50% -50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--deep) 62%, transparent) 70%, transparent); }
html:not(.m-on) #home .intro .role { position: relative; margin-top: 24px; font: 600 22px/1.2 var(--text); letter-spacing: -0.01em; color: color-mix(in srgb, var(--accent-ink) 35%, var(--fg)); }
html:not(.m-on) #home .intro .line { position: relative; margin-top: 4px; font: 500 22px/1.25 var(--text); letter-spacing: -0.01em; color: var(--fg); }
html:not(.m-on) #home .intro .role::before { content: ''; position: absolute; z-index: -1; left: -120px; top: -40px; width: 680px; height: 170px; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--deep) 82%, transparent), color-mix(in srgb, var(--deep) 66%, transparent) 60%, transparent); }
html:not(.m-on) #home .intro .where { display: none; }
html:not(.m-on) #home .guide { margin: 18px 0 0; padding: 10px 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--deep) 84%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
html:not(.m-on) #home .guide li { display: flex; gap: 8px; align-items: center; }
html:not(.m-on) #home .guide .mono { width: 22px; height: 22px; font-size: 13px; flex: none; }
html:not(.m-on) #home .guide p { font-size: 13px; color: var(--fg); }
html:not(.m-on) #home .guide b { display: inline; font: 500 13px/1.3 var(--text); color: var(--fg); margin: 0; }
html:not(.m-on) #home .guide p > span:not(.mono) { display: none; }
body.piece-open #home .intro { opacity: 1; }

/* The dock: a sheet of frosted glass, icons that swell under the pointer and push their neighbours aside, the name
   above the icon you point at, a dot under what is open and a hop when an app opens. Sizes in px: icon --dw (54 at
   rest, up to 86), the plate stays 70 tall and the swelling grows upward out of it. */
html:not(.m-on) #home .tray { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 0; padding: 8px 6px; border-radius: 22px; contain: none; will-change: auto;
  background: color-mix(in srgb, var(--deep) 42%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 60px -24px rgba(0, 0, 0, 0.8); }
html:not(.m-on) #home .tray-group { display: flex; padding: 0 6px; }
html:not(.m-on) #home .tray-group + .tray-group { padding-left: 12px; }
html:not(.m-on) #home .tray-group + .tray-group::before { left: 0; top: 8px; bottom: 8px; background: rgba(255, 255, 255, 0.16); }
html:not(.m-on) #home .tray-label { display: none; }
html:not(.m-on) #home .tray-row { gap: 6px; align-items: flex-end; }
html:not(.m-on) #home .tray-row > * { --dw: 54px; position: relative; display: block; width: var(--dw); height: 54px; padding: 0; border: 0; background: none; text-decoration: none; transition: width 0.24s var(--ease-out); }
html:not(.m-on) #home .tray.mag .tray-row > * { transition: none; }
html:not(.m-on) #home .tray-row > * > .art { position: absolute; left: 0; bottom: 0; width: var(--dw); height: var(--dw); transform-origin: 50% 100%; transition: width 0.24s var(--ease-out), height 0.24s var(--ease-out); }
html:not(.m-on) #home .tray.mag .tray-row > * > .art { transition: none; }
html:not(.m-on) #home .tray-row > * > .art svg { width: 100%; height: 100%; }
html:not(.m-on) #home .tray-row > :active > .art { filter: brightness(0.8); transform: none; }
html:not(.m-on) #home .tray-row .sock { display: none; }
@media (hover: hover) { html:not(.m-on) #home .dcart:hover .art { transform: none; } }
html:not(.m-on) #home .tray-row .lb { position: absolute; left: 50%; bottom: calc(var(--dw) + 12px); translate: -50% 4px; display: flex; align-items: baseline; gap: 6px; margin: 0; max-width: none; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  background: color-mix(in srgb, var(--deep) 78%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
  font: 500 13px/1 var(--text); color: var(--fg); opacity: 0; pointer-events: none; transition: opacity 0.12s ease, translate 0.16s var(--ease-out); }
html:not(.m-on) #home .tray-row .lb em { font-style: normal; color: var(--c, var(--muted)); }
html:not(.m-on) #home .tray-row > :is(:hover, :focus-visible) .lb { opacity: 1; translate: -50% 0; }
html:not(.m-on) #home .tray-row > :focus-visible { outline: none; }
html:not(.m-on) #home .tray-row > :focus-visible > .art { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 14px; }
html:not(.m-on) #home .dcart::after { top: auto; bottom: -6px; width: 4px; height: 4px; background: var(--fg); }
html:not(.m-on) #home .dcart.launch .art { animation: dock-bounce 1s cubic-bezier(0.3, 0, 0.5, 1); }
@keyframes dock-bounce { 0%, 100% { transform: none; } 18% { transform: translateY(-22px); } 36% { transform: none; } 52% { transform: translateY(-11px); } 68% { transform: none; } 80% { transform: translateY(-3px); } 90% { transform: none; } }
html:not(.m-on) #home .dcart.took .art { animation: dock-take 0.42s var(--ease-out) 0.3s; }
@keyframes dock-take { 40% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { html:not(.m-on) #home .dcart.launch .art, html:not(.m-on) #home .dcart.took .art { animation: none; } }

/* Focus: a veil right under the object in use (os.js spot) dims everything behind it. While the object is carried,
   the landscape, the name and every other window or thing also blur and grey; the carried object, the dock and the
   top bar stay sharp. Both fade in and out. */
.os-veil { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: rgba(16, 3, 10, 0.3); transition: opacity 0.38s var(--ease-out), visibility 0s linear 0.38s; visibility: hidden; }
.os.spot .os-veil { opacity: 1; visibility: visible; transition: opacity 0.38s var(--ease-out); }
html:not(.m-on) :is(#tide, #home .intro, #home .os-screen > :not(.os-veil)) { transition: filter 0.38s var(--ease-out); }
html:not(.m-on):has(#home .os.carrying) #home .intro, html:not(.m-on) #home .os.carrying .os-screen > :not(.lit):not(.os-veil) { filter: blur(6px) saturate(0.6); }
html:not(.m-on):has(#home .os.carrying) #tide { filter: saturate(0.6); }
@media (prefers-reduced-motion: reduce) { .os-veil, .os.spot .os-veil, html:not(.m-on) :is(#tide, #home .intro, #home .os-screen > *) { transition: none; } }

/* The home is a free canvas: the journey bar steps out (the dock carries the way on) and its wheel hint sits above
   the dock. */
@media (min-width: 1024px) {
  html.jr-on body[data-section='home'] .jr { display: none; }
  html.jr-on #home.desk { padding-bottom: 0; }
  body[data-section='home'] .jr-hint { bottom: 112px; }
}
html:not(.m-on) #home .dock-next { position: relative; align-self: center; display: flex; flex-direction: column; justify-content: center; gap: 3px; margin-left: 6px; padding: 0 8px 0 18px; min-height: 54px; text-decoration: none; color: var(--fg); font: 500 13px/1.1 var(--text); white-space: nowrap; }
html:not(.m-on) #home .dock-next::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.16); }
html:not(.m-on) #home .dock-next span { color: var(--muted); font-size: 13px; }
html:not(.m-on) #home .dock-next b { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
html:not(.m-on) #home .dock-next svg { position: absolute; right: 8px; bottom: 12px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease-out); }
html:not(.m-on) #home .dock-next b { padding-right: 22px; }
@media (hover: hover) { html:not(.m-on) #home .dock-next:hover svg { transform: translateX(3px); } html:not(.m-on) #home .dock-next:hover b { color: var(--accent-ink); } }
/* Desktop journey: every chapter is one screen and the wheel walks the story, so the document itself never scrolls.
   Gecko rounds some heights a pixel over the window; that pixel showed a scrollbar and let the page drift. */
@media (min-width: 1024px) { html.jr-on, html.jr-on body { overflow-y: hidden; } }

/* A site shown by its full-page capture (pieces.js mountSite): it scrolls inside the window, the real one is a tab away. */
.da-site { background: #fff; }
.da-site-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.da-site-scroll img { display: block; width: 100%; height: auto; user-select: none; }
.da-site-open { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px 9px 14px; border-radius: 10px; background: var(--c, #1f64f6); color: #fff; font: 600 14px/1 var(--text); text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); transition: transform 0.16s var(--ease-out, ease-out), filter 0.16s; }
.da-site-open:hover { filter: brightness(1.08); }
.da-site-open:active { transform: scale(0.97); }
.da-site-open svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Short desktop windows (1024 × 700, or a laptop at 125% zoom): the eight phone pieces keep to the screen, with rows
   a touch tighter instead of running under the chapter bar. */
@media (min-width: 768px) and (max-height: 760px) {
  .mp-col { gap: 12px; }
  .mp-pick { min-height: 44px; padding-block: 3px; gap: 12px; }
  .mp-pick .mp-ic { width: 36px; height: 36px; border-radius: 9px; }
  .mp-pick { grid-template-columns: 36px minmax(0, 1fr); }
}
/* About keeps its two columns from 1024 px (a small laptop window): stacked, the photo filled the screen and the text
   went below the fold of a chapter that does not scroll. */
@media (min-width: 1024px) and (max-width: 1100px) {
  .about-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
  .about-text .bio li { font-size: 17px; }
}
/* Up to 1800 px the desktop caption keeps the piece's name, its line and its buttons: the one-line how (the same words
   as the hint over the stage) and the project chip, cut to a letter or two, read as noise. */
@media (max-width: 1800px) { #desktop .unit .u-how, #desktop .unit .unit-head .u-chip { display: none; } }
/* About in a short desktop window (700 to 760 px tall): the same layout with less air between its blocks, so the
   chapter and its footer fit one screen. */
@media (min-width: 1024px) and (max-height: 760px) {
  #about .sec-head { margin-bottom: 16px; }
  .about-text { gap: 16px; }
  .about-text .bio { gap: 6px; }
  body[data-section="about"] #about { padding-bottom: 0; }
  .foot { padding-top: 4px; }
}