/* ============================================================================
   RESOUNDLE: the landing page
   Same bench as the app (v4/static/app.css): graphite ground, warm-white ink,
   one brass accent.

   BRASS RULE
   Brass means one of two things: the primary action (Try it, Join the
   waitlist) or sound in motion (a playhead, a key that is sounding).
   Brass anywhere else is a bug.

   WEIGHTS
   400 and 500 only. Emphasis comes from size and colour.

   MONO
   Martian Mono is for real data only: file lengths, notes, prompts, logs.
   Never for headings, labels or body copy.

   RADII
   Controls 7px, containers 12px, keys 4px. Pills only for the floating
   glass: the nav, the door's buttons, the family cards' controls.

   GLASS
   Floating layers (nav pill, family cards) are frosted glass over the dust.
   Never put opacity, filter or will-change:opacity on an ancestor of a
   backdrop-filter element: it cuts the glass off from what is behind it.
   ============================================================================ */

:root{
  color-scheme: dark;
  --paper:#0F1113;
  --surface:#15181B;
  --raise:#1B1F23;
  --ink:#ECE9E2;
  --ink-2:#AAAEAB;
  --ink-3:#80878A;
  --line:#23282C;
  --line-strong:#323A3F;
  --signal:#E9A53C;
  --signal-ink:#1A1206;
  --signal-wash:#211B11;
  --alert:#E0735F;

  --r:12px; --r-sm:7px; --r-xs:4px;
  --nav:64px;
  /* never under a notch or the Dynamic Island (env() is 0 on desktop) */
  --gut:max(clamp(16px, 4.2vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --max:1360px;

  --sans:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* fast out, no bounce: interface motion decelerates and settles */
  --out:cubic-bezier(.23,1,.32,1);
  --snap:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55; font-weight:400;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* fixed, inert grain: flat graphite reads as a screenshot */
body::after{
  content:""; position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--signal);color:var(--signal-ink)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
/* no double-tap zoom delay on controls */
button, a, select, .pk, .fam-glass{touch-action:manipulation}
kbd{
  font-family:var(--mono); font-size:11px; padding:1px 5px 2px; border-radius:var(--r-xs);
  border:1px solid var(--line-strong); color:var(--ink-2); background:var(--surface);
}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-xs)}

.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r-sm);text-decoration:none}
.skip:focus{top:12px}

/* ---------- type ---------- */
h1,h2,h3{font-weight:500;letter-spacing:-.032em;text-wrap:balance}
h1{font-size:clamp(42px, 5.2vw, 84px);line-height:.98}
h2{font-size:clamp(34px, 4.2vw, 64px);line-height:1.02;max-width:17ch}
h3{font-size:20px;letter-spacing:-.015em;line-height:1.25}
.lede{font-size:clamp(18px, 1.45vw, 21px);color:var(--ink-2);max-width:40ch;line-height:1.5;margin-top:28px;text-wrap:pretty}
.body{color:var(--ink-2);max-width:46ch;margin-top:22px;text-wrap:pretty}
.note,.fine{font-size:14px;color:var(--ink-3);line-height:1.5;text-wrap:pretty}
.split .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.split .ln > span{display:block}

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:44px; padding:0 20px; border-radius:var(--r-sm);
  font-size:15px; font-weight:500; letter-spacing:-.005em; text-decoration:none; white-space:nowrap;
  transition:transform .14s var(--snap), background-color .2s var(--snap), border-color .2s var(--snap), color .2s var(--snap);
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-hot{background:var(--signal);color:var(--signal-ink)}
.btn-hot:hover{background:#F2B455}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#fff}
.btn-line{border:1px solid var(--line-strong);color:var(--ink);background:var(--surface);overflow:hidden}
.btn-line:hover{border-color:#4A545A;background:var(--raise)}
.btn-wide{width:100%;height:50px;font-size:16px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* Play buttons: the brass fill IS the playhead, it runs for the real length of what is sounding */
.playset .fill{position:absolute;inset:-1px;background:var(--signal);color:var(--signal-ink);clip-path:inset(0 100% 0 0);pointer-events:none;display:flex;align-items:center;justify-content:center}
.playset .lbl{position:relative;display:inline-flex;align-items:center;gap:10px}
.playset .fill .lbl{position:static}
.playset.playing{border-color:var(--signal)}
.tri{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;display:inline-block}

/* the game menu: play/ in a frame over everything, opened from the hero */
.playov{position:fixed;inset:0;z-index:95;background:#08090A;opacity:0;transition:opacity .35s var(--out)}
.playov.on{opacity:1}
.playov iframe{display:block;width:100%;height:100%;border:0}
html.gaming{overflow:hidden}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:30; height:var(--nav);
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut) 0; pointer-events:none;
}
.nav > *{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;font-size:17px;letter-spacing:-.02em}
/* the name is the brand's: always a small r, even inside a line set in capitals */
.wm{text-transform:none}
.mark{width:22px;height:22px;fill:var(--ink)}
.mark .lead{fill:var(--signal)}
.nav-r{display:flex;align-items:center}

/* The glass pill. Under it, a live spectrum of whatever this page is playing:
   a faint idle shimmer at rest, brass while a sound is sounding. */
.pill, .nav .brand{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(236,233,226,.07), rgba(236,233,226,.015) 60%), rgba(13,15,17,.58);
  border:1px solid rgba(236,233,226,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -10px 24px -18px rgba(233,165,60,.25), 0 18px 50px -18px rgba(0,0,0,.9);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.pill{position:relative; display:flex; align-items:center; gap:2px; height:48px; padding:0 6px 0 8px; isolation:isolate}
/* the logo and name sit in the same glass, and stay put while the page scrolls */
.nav .brand{height:48px; padding:0 18px 0 15px}
.pill::before{               /* the glow the spectrum stands in */
  content:""; position:absolute; left:14%; right:14%; top:calc(100% - 6px); height:30px; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%, rgba(233,165,60,calc(.10 + var(--lvl,0) * .45)), transparent 70%);
  filter:blur(6px);
}
.pill-spec{position:absolute; left:16%; right:16%; top:calc(100% + 1px); width:68%; height:22px; pointer-events:none}
.nav .link{padding:10px 12px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;transition:color .2s}
.nav .link:hover{color:var(--ink)}
.pill-rule{width:clamp(18px, 3vw, 46px); height:1px; background:linear-gradient(90deg, transparent, rgba(236,233,226,.45), transparent)}
.nav .btn.pill-cta{height:36px; padding:0 18px; margin-left:8px; border-radius:999px; font-size:14px}

/* ---------- 3D canvas ---------- */
#stage3d{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:1;pointer-events:none}
html::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% -12%, rgba(120,146,150,.16), transparent 70%),
    radial-gradient(60% 50% at 50% 115%, rgba(233,165,60,.05), transparent 70%);
}
#stage3d.live{pointer-events:auto}
main, .foot{position:relative;z-index:2;pointer-events:none}
main a, main button, main input, main select, main textarea, main label, main form, main kbd,
.foot a, .foot button, .foot input, .foot select, .foot textarea, .foot label, .foot form,
.hero-copy, .ab, .chord-copy, .how-inner, .wait-inner, .fam{pointer-events:auto}
.stage{pointer-events:none;position:relative}

/* ---------- sections ---------- */
.sec{min-height:100vh;min-height:100svh;position:relative;padding:calc(var(--nav) + 40px) var(--gut) 64px}
.wrap{max-width:var(--max);margin:0 auto;width:100%}

/* 1 · hero: copy left, instrument right */
.hero{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);align-items:center;gap:24px;max-width:var(--max);margin:0 auto;padding-top:calc(var(--nav) + 24px)}
.hero-copy{position:relative;z-index:2}
.hero .stage{height:min(72vh,640px);align-self:center}
.styler{margin-top:40px;max-width:460px;min-width:0}
.styler-k{display:block;font-size:14px;color:var(--ink-3);margin-bottom:8px}
.styler-field{
  display:block;min-height:74px;padding:14px 16px;border-radius:var(--r-sm);line-height:1.6;
  background:var(--surface);border:1px solid var(--line-strong);
  font-family:var(--mono);font-size:14px;color:var(--ink)
}
.caret{display:inline-block;vertical-align:-3px;width:1px;height:17px;background:var(--ink);margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.styler-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.opt-style{
  height:32px;padding:0 12px;border-radius:var(--r-sm);font-size:14px;color:var(--ink-2);
  border:1px solid var(--line);background:transparent;transition:color .2s,border-color .2s,background-color .2s
}
.opt-style:hover{color:var(--ink);border-color:var(--line-strong)}
.opt-style[aria-checked="true"]{color:var(--ink);border-color:var(--ink-3);background:var(--raise)}
.hero-act{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
.hint{font-size:14px;color:var(--ink-3)}

/* key legend: the accessible instrument, and the real data under the 3D one */
.keys{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:min(100%,620px);pointer-events:auto
}
.keys button{
  width:100%;text-align:left;padding:8px 10px 9px;border-radius:var(--r-sm);border:1px solid transparent;
  display:flex;flex-direction:column;gap:3px;transition:border-color .2s,background-color .2s
}
.keys button:hover{border-color:var(--line);background:rgba(21,24,27,.7)}
.keys .ev{font-size:14px;color:var(--ink);white-space:nowrap}
.keys .len{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.keys .num{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.keys button.on .len{color:var(--signal)}

/* 3 · A/B: a session view. Two lanes, six clips each, one playhead. */
.ab{display:flex;flex-direction:column;justify-content:center;gap:48px;max-width:var(--max);margin:0 auto}
.ab-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,90px);align-items:end}
.ab-head .body{margin-top:0}
.session{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.session-bar{display:flex;align-items:center;gap:16px;height:56px;padding:0 12px 0 12px;border-bottom:1px solid var(--line)}
.transport{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--signal);color:var(--signal-ink);transition:transform .14s var(--snap)}
.transport:active{transform:scale(.94)}
.transport.playing .tri{border:0;width:10px;height:10px;background:currentColor;border-radius:1px}
.tc{font-family:var(--mono);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.session-name{margin-left:auto;font-size:14px;color:var(--ink-3)}
.lanes{position:relative;--hd:172px;--al:132px}
.lane{display:grid;grid-template-columns:var(--hd) minmax(0,1fr) var(--al);align-items:stretch;height:118px;border-bottom:1px solid var(--line)}
.lane-h{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;padding:0 18px;text-align:left;border-right:1px solid var(--line);transition:background-color .2s}
.lane-h:hover{background:var(--raise)}
.lane-t{font-size:16px;color:var(--ink)}
.lane-s{font-size:13px;color:var(--ink-3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%}
.lane.solo .lane-h{box-shadow:inset 2px 0 0 var(--signal)}
.clips{position:relative;background:
  repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--line) calc(10% - 1px) 10%)}
.clip{position:absolute;top:14px;bottom:14px;border-radius:var(--r-xs);background:var(--raise);border:1px solid var(--line-strong);overflow:hidden;padding:0;transition:border-color .2s,background-color .2s}
.clip:hover{border-color:#4A545A}
.clip canvas{position:absolute;inset:18px 4px 4px;width:calc(100% - 8px);height:calc(100% - 22px)}
.clip .cl{position:absolute;left:6px;top:3px;font-size:11px;color:var(--ink-3);white-space:nowrap}
.clip.on{border-color:var(--signal);background:var(--signal-wash)}
.clip.on .cl{color:var(--signal)}
.lane[data-lane="strangers"] .clip:nth-child(odd){top:22px;bottom:8px}
.alike{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-content:center;gap:4px 8px;padding:0 18px;border-left:1px solid var(--line)}
.alike-n{font-size:30px;letter-spacing:-.03em;line-height:1;font-weight:500}
.alike-k{align-self:end;font-size:13px;color:var(--ink-3)}
.alike-bar{grid-column:1 / -1;height:3px;border-radius:2px;background:var(--line-strong);overflow:hidden}
.alike-bar i{display:block;height:100%;width:calc(var(--v,0) * 100%);background:var(--ink-2);transition:width 1s var(--out)}
.lane[data-lane="strangers"] .alike-n{color:var(--ink-3)}
.playhead{position:absolute;top:0;bottom:0;left:var(--hd);width:2px;background:var(--signal);opacity:0;pointer-events:none;transform:translateX(var(--x,0px));box-shadow:0 0 12px rgba(233,165,60,.45)}
.playhead.run{opacity:1}
.session-fine{font-size:13px;color:var(--ink-3);padding:14px 18px}
.lane-ruler{display:none}

/* 4 · chord: instrument left, a real keyboard right */
.chord{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:center;max-width:var(--max);margin:0 auto}
.chord .stage{height:min(76vh,680px)}
.piano{position:relative;display:flex;height:150px;margin:34px 0 0;max-width:470px;user-select:none}
.pk{position:relative;flex:1;border:1px solid #2a3035;border-radius:0 0 var(--r-xs) var(--r-xs);background:#D9D5CC;margin-right:-1px;transition:background-color .15s}
.pk.blk{flex:0 0 0;width:0;margin:0;border:0;z-index:2}
.pk.blk::before{content:"";position:absolute;left:-9px;width:18px;top:0;height:82px;background:#15181B;border:1px solid #000;border-top:0;border-radius:0 0 3px 3px}
.pk.used{background:#ECE9E2}
.pk .pn{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--mono);font-size:9px;color:#6a7074}
.pk .pe{position:absolute;left:50%;bottom:24px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:11.5px;font-weight:500;color:#1a1d20;white-space:nowrap}
.pk.used .pn{color:#1a1d20}
.pk.flat7 .pe{color:#B9452F}
.pk.on{background:var(--signal)}
.pk.on .pn,.pk.on .pe{color:var(--signal-ink)}
.pk.blk.used::before{background:#2b3237}
.pk.blk.on::before{background:var(--signal)}
.strum{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:470px;height:52px;margin-top:22px;padding:0 18px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);font-size:15px;font-weight:500;transition:border-color .2s}
.strum:hover{border-color:#4A545A}
.strum-r{font-family:var(--mono);font-size:12px;color:var(--ink-3);position:relative}
.strum-l{position:relative}
.strum-fill{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(233,165,60,.26) 70%,var(--signal));transform:scaleX(0);transform-origin:left;opacity:0}
.chord .note{margin-top:16px;max-width:36ch}

/* 5 · how: tabs on a rail, the step's real output in a window */
.how{display:flex;align-items:center}
.how-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);max-width:var(--max);margin:0 auto;width:100%;align-items:center}
.rail{display:flex;flex-direction:column;margin-top:44px;border-left:1px solid var(--line-strong);position:relative}
.rail::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:20%;background:var(--ink);transform:translateY(calc(var(--s,0) * 100%));transition:transform .45s var(--out)}
.rail button{text-align:left;padding:11px 0 11px 22px;font-size:clamp(20px,1.9vw,28px);letter-spacing:-.025em;color:var(--ink-3);transition:color .25s var(--snap)}
.rail button:hover{color:var(--ink-2)}
.rail button[aria-selected="true"]{color:var(--ink)}
.win{border-radius:var(--r);border:1px solid var(--line-strong);background:#0B0D0E;overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.win-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.win-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.win-t{margin-left:10px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.win-body{position:relative;min-height:360px}
.pane{position:absolute;inset:0;padding:28px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s var(--out),transform .5s var(--out),visibility 0s .35s}
.pane.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--out),transform .5s var(--out)}
.pane-say{color:var(--ink-2);max-width:50ch;font-size:16px}
.pick{margin-top:34px}
.lens{margin-top:34px;display:flex;flex-direction:column;gap:16px}
.tok-row{display:grid;grid-template-columns:64px 1fr;align-items:start;gap:12px}
.tok-k{font-size:13px;color:var(--ink-3);padding-top:7px}
.toks{display:flex;flex-wrap:wrap;gap:6px}
.tok{font-family:var(--mono);font-size:13px;padding:5px 9px;border-radius:var(--r-xs);background:var(--raise);border:1px solid var(--line-strong);color:var(--ink)}
.tok.ev{background:transparent;border-style:dashed;color:var(--ink-2)}
button.tok{transition:color .2s var(--snap),background .2s var(--snap)}
button.tok.ev:hover{color:var(--ink)}
.wave{display:block;width:100%;height:auto;margin-top:30px}
.files{margin-top:24px;width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
.files td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.files td:last-child{text-align:right;white-space:nowrap;color:var(--ink)}

/* 7 · waitlist: the form is one sentence */
.wait{display:flex;align-items:center;justify-content:center}
.wait-inner{max-width:1100px;margin:0 auto;width:100%}
.wait h2{max-width:none}
.sentence{margin-top:48px}
.sentence-line{font-size:clamp(26px,3.3vw,48px);letter-spacing:-.03em;line-height:1.5;color:var(--ink-2);max-width:none}
.inl{display:inline-block;vertical-align:baseline;position:relative}
.inl select,.inl input{
  font-size:inherit;letter-spacing:inherit;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--line-strong);
  border-radius:0;padding:0 2px 2px;line-height:1.2;transition:border-color .2s var(--snap)
}
.inl select{appearance:none;padding-right:.9em;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - .42em) 55%,calc(100% - .2em) 55%;background-size:.22em .22em;background-repeat:no-repeat}
.inl select option{font-size:16px;background:var(--surface);color:var(--ink)}
.inl input{width:11.5em;max-width:100%}
.inl input::placeholder{color:#555c60}
.inl select:hover,.inl input:hover{border-bottom-color:#4A545A}
.inl select:focus,.inl input:focus{outline:none;border-bottom-color:var(--ink)}
.inl input[aria-invalid="true"]{border-bottom-color:var(--alert)}
.sentence-act{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px}
.btn-big{height:56px;padding:0 28px;font-size:17px}
.sentence-act .status,.sentence-act .err{margin:0}
.wait-fine{margin-top:28px;font-size:14px;color:var(--ink-3)}
.sentence.done .sentence-line,.sentence.done .btn{display:none}
.sentence.done .status{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;color:var(--ink);line-height:1.3}

/* footer: book a demo by picking a slot */
.foot{border-top:1px solid var(--line);background:var(--surface);min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav) + 40px) var(--gut) 48px;padding-bottom:max(48px, env(safe-area-inset-bottom))}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);max-width:var(--max);margin:0 auto;width:100%;align-items:stretch}
.foot-copy{display:flex;flex-direction:column}
.foot-meta{margin-top:auto;padding-top:64px;display:flex;flex-direction:column;gap:20px}
.foot-links{list-style:none;display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{color:var(--ink-2);text-decoration:none;font-size:15px}
.foot-links a:hover{color:var(--ink)}
.booker{display:flex;flex-direction:column;gap:28px;align-self:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,32px)}
.slots-k{font-size:14px;color:var(--ink-2);margin-bottom:10px}
.slots-k + .days, .slots-k + .times{margin-bottom:0}
.days + .slots-k{margin-top:20px}
.tz{color:var(--ink-3)}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.day,.time{border:1px solid var(--line-strong);border-radius:var(--r-sm);transition:border-color .2s,background-color .2s,color .2s}
.day{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px}
.day .dw{font-size:13px;color:var(--ink-3)}
.day .dn{font-size:22px;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.day .dm{font-size:12px;color:var(--ink-3)}
.day:hover,.time:hover{border-color:#4A545A}
.day[aria-checked="true"],.time[aria-checked="true"]{background:var(--ink);border-color:var(--ink)}
.day[aria-checked="true"] *,.time[aria-checked="true"]{color:var(--paper)}
.times{display:flex;flex-wrap:wrap;gap:6px}
.time{height:38px;padding:0 14px;font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.who{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.booker-act{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:20px}
.pick{font-size:15px;color:var(--ink-2)}
.pick b{font-weight:500;color:var(--ink)}
.booker .status:empty{display:none}
.booker.done .slots,.booker.done .who,.booker.done .booker-act{display:none}
.booker.done .status{font-size:22px;letter-spacing:-.02em;color:var(--ink);line-height:1.35}

.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;color:var(--ink-2)}
.field .opt{color:var(--ink-3)}
.field input{
  width:100%;min-height:46px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--surface);padding:11px 13px;font-size:16px;color:var(--ink);
  transition:border-color .2s var(--snap), background-color .2s var(--snap)
}
.field input::placeholder{color:#6E7578}
.field input:hover{border-color:#4A545A}
.field input:focus{outline:none;border-color:var(--ink-2)}
.field.bad input{border-color:var(--alert)}
.err{font-size:14px;color:var(--alert)}
.status{font-size:15px;color:var(--ink-2);min-height:1.5em}
.status.ok{color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .lanes{--hd:128px;--al:96px}
  .alike-n{font-size:24px}
  .ab-head{grid-template-columns:1fr}
}
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse){
  :root{--nav:58px}
  /* phones: sections are as tall as their content, with a small gap; anchors land just under the nav */
  .sec{padding-top:calc(var(--nav) + 12px);padding-bottom:28px;min-height:0}
  [id]{scroll-margin-top:var(--nav)}
  body{font-size:16px}
  .nav .link{padding:10px 8px}
  .nav .link[href="#families"], .nav .link[href="#how"], .pill-rule{display:none}
  .nav .btn.pill-cta{margin-left:2px}
  .hero{grid-template-columns:minmax(0,1fr);align-content:start;gap:0}
  .hero-copy{min-width:0}
  .hero .stage{height:46vh;min-height:300px;order:2;margin-top:8px}
  /* without WebGL the legend's two rows of bars must fit the stage: shorter bars, never a taller stage,
     so the page height does not change when the 3D keys lose their context */
  .no3d .hero .keys button::before{height:calc(12px + var(--len,.5) * 60px)}
  .styler{margin-top:28px}
  .keys{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab{gap:28px}
  .lanes{--hd:0px;--al:0px}
  .lane{grid-template-columns:1fr;grid-template-rows:auto 96px auto;height:auto}
  .lane-h{flex-direction:row;align-items:baseline;gap:10px;padding:12px 14px 4px;border-right:0}
  .lane-h{min-width:0}
  .lane-s{width:auto;flex:1;min-width:0}
  .alike{grid-template-columns:auto auto 1fr;grid-template-rows:auto;align-items:center;padding:6px 14px 12px;border-left:0}
  .alike-bar{grid-column:auto}
  .alike-n{font-size:18px}
  .playhead{display:none}
  .lane-ruler{display:block;position:relative;height:16px;margin:10px 10px 0;font:clamp(10px, 2.9vw, 11px) var(--mono);letter-spacing:-.05em;color:var(--ink-3)}
  .lane-ruler span{position:absolute}
  .clips{margin:0 10px}
  .clip{min-width:14.5%}
  .clip .cl{display:none}
  .session-name{display:none}
  .chord{grid-template-columns:1fr}
  .chord .stage{height:30vh;order:2}
  /* taller keys so the event names clear the black keys; the black keys are decoration, so taps fall through to the white key */
  .piano{height:190px}
  .pk.blk{pointer-events:none}
  .pk .pn{font-size:10px}
  .how-inner{grid-template-columns:minmax(0,1fr)}
  .how-head{min-width:0}
  .rail{flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line-strong);margin-top:28px}
  .rail::before{display:none}
  .rail button{font-size:17px;padding:10px 14px 12px 0;white-space:nowrap}
  .rail button[aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--ink)}
  /* the panes share one grid cell: the window is as tall as the tallest pane and never jumps between tabs */
  .win-body{display:grid;min-height:0}
  .pane{position:relative;inset:auto;grid-area:1/1}
  .pane{padding:20px}
  .sentence-line{line-height:1.6}
  .foot-grid{display:flex;flex-direction:column}
  .foot-copy{display:contents}
  .foot-meta{order:3;margin-top:0;padding-top:40px}
  .who{grid-template-columns:1fr}
  .days{grid-template-columns:repeat(5,minmax(0,1fr))}
  .day{padding:8px}
  .day .dn{font-size:18px}
  .booker-act{flex-direction:column;align-items:stretch}
  .booker-act .btn{width:100%;height:50px}
  .times{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .time{height:44px;padding:0}
}
@media (max-width: 420px){
  .nav .btn.pill-cta{padding:0 12px}
  .nav .brand{padding:0 14px 0 12px; gap:8px; font-size:16px}
  .day .dm{display:none}
  .inl input{width:100%}
}

/* fingers: controls at least about 40-44px tall */
@media (pointer:coarse){
  .opt-style{height:40px;padding:0 14px}
  button.tok{min-height:40px}
  .styler-opts{gap:8px}
  .transport{width:44px;height:44px}
  .fam-play{min-height:44px}
  .fams-list button{min-height:44px}
  .foot-links a{display:inline-block;padding:12px 0;margin:-12px 0}
  .wait-fine a,.booker .fine a{display:inline-block;padding:10px 0;margin:-10px 0}
}

@media (max-width: 340px){ .sentence-line{font-size:23px} }
/* the slot names are a slot apart: a little tighter and a little wider, so 'select' and 'back' do not touch */
@media (max-width: 350px){
  .lane-ruler{letter-spacing:-.1em; margin-left:6px; margin-right:6px}
  .clips{margin:0 6px}
}

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

/* ---------- browser surfaces, themed ---------- */
html{scrollbar-color:var(--line-strong) var(--paper)}
input,textarea{caret-color:var(--signal)}
a{text-underline-offset:.2em}
@media (pointer:fine){html{overscroll-behavior:none}}
@media (hover:none){
  .btn-hot:hover{background:var(--signal)} .btn-line:hover{border-color:var(--line-strong);background:var(--surface)}
  .keys button:hover{border-color:transparent;background:none}
  /* a tap leaves :hover stuck on: put every hover back to rest (the chosen/playing states still win) */
  .btn-ink:hover{background:var(--ink)}
  .nav .link:hover{color:var(--ink-2)}
  .opt-style:hover:not([aria-checked="true"]){color:var(--ink-2);border-color:var(--line)}
  .lane-h:hover{background:none}
  .clip:hover:not(.on){border-color:var(--line-strong)}
  .strum:hover{border-color:var(--line-strong)}
  .rail button:hover:not([aria-selected="true"]){color:var(--ink-3)}
  .day:hover:not([aria-checked="true"]),.time:hover:not([aria-checked="true"]){border-color:var(--line-strong)}
  .fam .fam-play:hover{border-color:rgba(236,233,226,.22)}
  .fams-list button:hover:not([aria-current="true"]){color:var(--ink-3)}
  .foot-links a:hover{color:var(--ink-2)}
  .lane-h:active,.clip:active,.strum:active{background:var(--raise)}
  .hint{display:none}
}

/* ---------- no WebGL: the legend becomes the instrument ---------- */
.no3d .keys{position:static;transform:none;margin:0 auto;height:100%;align-items:end;width:min(100%,560px)}
.no3d .hero .stage{display:flex;align-items:flex-end}
.no3d .keys button{justify-content:flex-end;height:100%}
.no3d .keys button::before{
  content:"";display:block;width:100%;height:calc(40px + var(--len,.5) * 220px);margin-bottom:10px;
  border-radius:var(--r-xs);background:var(--raise);border:1px solid var(--line-strong)
}
.no3d .keys button.on::before{background:var(--signal);border-color:var(--signal)}
.no3d .keys li{display:flex;height:100%}

/* ---------- the door ---------- */
@property --hole{syntax:'<length>';inherits:false;initial-value:0px}
.door{
  position:fixed; inset:0; z-index:90; background:#08090A; display:grid; place-items:center;
  --hole:0px;
  -webkit-mask-image:radial-gradient(circle at 50% 46%, transparent var(--hole), #000 calc(var(--hole) + 1px));
          mask-image:radial-gradient(circle at 50% 46%, transparent var(--hole), #000 calc(var(--hole) + 1px));
  transition:--hole 1.25s cubic-bezier(.7,0,.2,1);
}
html:not(.js) .door, .door.gone{display:none}
.door.open{--hole:150vmax; pointer-events:none}
.door-cv{position:absolute; inset:0; width:100%; height:100%}
.door-ui{position:absolute; left:0; right:0; top:calc(46% + 200px); display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:0 16px}
.door-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.door-k{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3)}
.door-k b{font-weight:400; color:var(--ink-2)}
.door-act{display:flex; align-items:center; gap:18px; opacity:0; transform:translateY(8px); transition:opacity .6s var(--out), transform .8s var(--out); pointer-events:none}
.door.ready .door-act{opacity:1; transform:none; pointer-events:auto}
.door.ready .door-k{opacity:0; transition:opacity .25s}
/* the count and the button share a spot: the button waits until the count has gone */
.door.ready .door-act{transition-delay:.25s}
.door-go{height:44px; padding:0 22px; border-radius:999px}
.door-fine{font-size:12.5px; color:var(--ink-3); margin-top:8px}
.door.ready .door-k{margin-bottom:-34px}
@media (max-width: 860px){ .door-ui{top:calc(46% + 150px)} .door-act{flex-direction:column; gap:6px} }
/* a short screen (a phone on its side): the controls sit at the bottom, the ring and the hole above them */
@media (max-height: 520px){
  .door-ui{top:auto; bottom:max(12px, env(safe-area-inset-bottom)); gap:8px}
  .door-fine{margin-top:0}
  .door{-webkit-mask-image:radial-gradient(circle at 50% calc(50% - 48px), transparent var(--hole), #000 calc(var(--hole) + 1px));
                mask-image:radial-gradient(circle at 50% calc(50% - 48px), transparent var(--hole), #000 calc(var(--hole) + 1px))}
}

html.doored, html.doored body{overflow:hidden}
.door-go:focus-visible{outline:1px solid rgba(236,233,226,.45);outline-offset:4px;border-radius:999px}

/* ---------- type that hears ---------- */
/* --ab is the page's output level: loud sound splits the big type into steel and brass */
h1, h2{text-shadow:calc(var(--ab, 0) * -4px) 0 rgba(159,180,184,calc(var(--ab, 0) * .75)), calc(var(--ab, 0) * 4px) 0 rgba(233,165,60,calc(var(--ab, 0) * .75))}
h2 .gl{font-family:var(--mono); font-weight:400; color:var(--ink-3); font-size:.78em}

/* ---------- families: glass cards round a spine ---------- */
.fams{height:100vh; height:100svh; min-height:640px; padding:0; overflow:hidden}
.fams-stage{position:absolute; inset:0}
.fams-cv{position:absolute; inset:0; width:100%; height:100%; z-index:50; pointer-events:none}
.fams-cards{position:absolute; inset:0}
.fam{
  position:absolute; left:50%; top:50%; width:min(440px, 78vw); margin:-170px 0 0 calc(min(440px, 78vw) / -2);
  pointer-events:auto;
}
.fam-glass{
  position:relative; border-radius:16px; padding:22px 22px 18px; overflow:hidden; cursor:pointer;
  background:
    linear-gradient(135deg, rgba(236,233,226,.10), rgba(236,233,226,.02) 38%, rgba(159,180,184,.05) 70%, rgba(236,233,226,.08)),
    rgba(16,18,20,.56);
  border:1px solid rgba(236,233,226,.16); will-change:transform; transform-origin:50% 50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 40px rgba(159,180,184,.05), 0 30px 80px -30px rgba(0,0,0,.9);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:border-color .3s;
}
.fam-glass::before{          /* a sheen that slides across as the card turns */
  content:""; position:absolute; inset:-40%; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.09) 50%, transparent 58%);
  transform:translateX(calc(var(--sheen, 0) * 60%));
}
.fam.front .fam-glass{border-color:rgba(236,233,226,.3)}
.fam.playing .fam-glass{border-color:rgba(233,165,60,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(233,165,60,.25), 0 30px 90px -30px rgba(233,165,60,.35)}
.fam-k{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between}
.fam-t{font-weight:400; font-size:clamp(34px, 3.6vw, 50px); line-height:1; letter-spacing:-.03em; margin:14px 0 10px; text-transform:uppercase}
.fam-t .gl{font-family:var(--mono); color:var(--ink-3); font-size:.7em}
.fam-p{font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--ink-2); min-height:3.2em}
.fam-waves{display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin:18px 0 14px}
.fam-w{display:flex; flex-direction:column; gap:6px}
.fam-w canvas{width:100%; height:34px; display:block}
.fam-w span{font-size:10.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fam-w.on span{color:var(--signal)}
.fam-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid rgba(236,233,226,.1); padding-top:12px}
.fam-alike{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.fam-alike b{font-weight:400; color:var(--ink)}
.fam-play{display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--ink); padding:7px 14px; border-radius:999px; border:1px solid rgba(236,233,226,.22); background:rgba(236,233,226,.04)}
.fam-play:hover{border-color:rgba(236,233,226,.5)}
.fam.playing .fam-play{border-color:var(--signal); color:var(--signal)}

.fams-side{position:absolute; left:var(--gut); top:calc(var(--nav) + 48px); bottom:56px; width:min(340px, 30vw); display:flex; flex-direction:column; z-index:60; pointer-events:none}
.fams-side > *{pointer-events:auto}
.fams-side h2{font-weight:400; font-size:clamp(34px, 3.4vw, 52px); line-height:1.02; letter-spacing:-.03em}
.fams-q{margin-top:auto; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.fams-list{list-style:none; margin:12px 0 22px}
.fams-list button{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); transition:color .2s, transform .3s var(--out)}
.fams-list button::before{content:"\2192"; opacity:.5}
.fams-list button:hover{color:var(--ink-2)}
.fams-list button[aria-current="true"]{color:var(--ink); transform:translateX(6px)}
.fams-list button[aria-current="true"]::before{opacity:1}
.fams-make{align-self:flex-start; border-radius:999px; height:42px; padding:0 20px; gap:10px}
.fams-hint{position:absolute; right:var(--gut); bottom:28px; font-size:12px; color:var(--ink-3); z-index:60}

@media (max-width: 860px), (max-height: 500px) and (pointer: coarse){
  .fams{height:auto; min-height:0; padding:calc(var(--nav) + 24px) 0 8px; overflow:visible}
  .fams-stage{position:relative; inset:auto}
  .fams-cv{display:none}
  .fams-cards{position:relative; display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px var(--gut) 18px; scrollbar-width:none}
  .fam{position:relative; left:auto; top:auto; margin:0; flex:0 0 82vw; scroll-snap-align:center}
  .fam-glass{transform:none !important; opacity:1 !important}
  .fams-side{position:relative; inset:auto; width:auto; padding:0 var(--gut); order:-1}
  .fams{display:flex; flex-direction:column}
  .fams-q{margin-top:22px}
  .fams-hint{display:none}
  .fam-waves{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:12px}
  .fam-w span{font-size:11px; overflow:hidden; text-overflow:ellipsis}
  .fam-alike{font-size:11px}
  .fam-p{font-size:12px}
  .fam-play{white-space:nowrap}
  .fam-foot{flex-wrap:wrap; row-gap:8px}
}

/* ---------- the dive ---------- */
.dive{position:relative; height:520vh; pointer-events:none}
/* the pin fills the large viewport, so no empty band shows when the phone's toolbar hides; the captions
   sit above the toolbar line (100lvh - 100svh is the toolbar's height, 0 on desktop) */
.dive-pin{position:sticky; top:0; height:100vh; height:100lvh; overflow:hidden; pointer-events:auto}
.dive-cv{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:clamp(0, calc(1 - (var(--s, 0) - .9) * 11), 1)}
.dive-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.dive-t:focus{outline:none}
.dive-hint, .dive-tap{
  position:absolute; left:0; right:0; text-align:center; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(205,222,224,.55); pointer-events:none;
}
.dive-hint{top:calc(var(--nav) + 30px); opacity:calc(1 - var(--s, 0) * 14)}
.dive-hint::after{content:""; display:block; width:1px; height:28px; margin:12px auto 0; background:linear-gradient(rgba(205,222,224,.5), transparent); animation:drip 2.2s var(--out) infinite}
@keyframes drip{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}
.dive-tap{bottom:34px; bottom:calc(100lvh - 100svh + 34px); opacity:calc(1 - var(--s, 0) * 10); text-shadow:0 0 6px #07090A, 0 0 12px #07090A}
/* a touch screen is tapped, not clicked */
.say-touch{display:none}
@media (hover:none){ .say-mouse{display:none} .say-touch{display:inline} }
.dive-copy{
  position:absolute; right:var(--gut); top:68%; width:min(270px, 21vw);
  font-family:var(--mono); font-size:11.5px; line-height:1.75; color:var(--ink-2); text-transform:uppercase; letter-spacing:.02em;
  opacity:min(clamp(0, calc((var(--s, 0) - .64) * 9), 1), clamp(0, calc(1 - (var(--s, 0) - .9) * 11), 1));
  transform:translateY(calc(clamp(0, calc(.76 - var(--s, 0)), .12) * 160px));
}
.dive-copy p + p{margin-top:14px}
.dive-k{color:var(--ink)}
html.diving #stage3d{opacity:0}
#stage3d{transition:opacity .5s linear}
/* no WebGL at boot: no dive. A context lost later never changes the page height: the pin stays and
   the HTML headline stands in for the canvas */
html.no3d:not(.keys-lost) .dive{display:none}
.dive.lost .dive-cv{visibility:hidden}
/* the loop has stopped, so --s is frozen: drop the captions that point at the mark, and show the copy */
.dive.lost .dive-hint, .dive.lost .dive-tap{display:none}
.dive.lost .dive-copy{opacity:1; transform:none}
.dive.lost .dive-t{width:auto; height:auto; overflow:visible; clip:auto; left:var(--gut); right:var(--gut); top:50%; transform:translateY(-50%); font-size:clamp(44px, 8vw, 120px); line-height:.95; text-transform:uppercase; max-width:none}
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse){
  .dive{height:420vh}
  .dive-copy{left:var(--gut); right:var(--gut); top:auto; bottom:48px; bottom:calc(100lvh - 100svh + 48px); width:auto; font-size:10.5px}
}
/* portrait phones: the copy sits on a dark fade, so the strings behind it do not cut through the words.
   The fade runs to the bottom of the pin (100lvh), not of the copy: the copy stops above the browser's
   toolbar line, and when the toolbar slides away the strip under it showed with no fade */
@media (max-width: 860px) and (orientation: portrait){
  .dive-copy{z-index:1; font-size:12px; line-height:1.65}
  .dive-copy::before{content:""; position:absolute; z-index:-1; left:calc(-1 * var(--gut)); right:calc(-1 * var(--gut)); top:-24px; bottom:-48px; bottom:calc(-48px - (100lvh - 100svh)); background:linear-gradient(to bottom, rgba(7,9,10,0), rgba(7,9,10,.78) 40px)}
}
/* short portrait phones (SE and the like): the copy would run over the end medallion, so leave out
   the middle paragraph, which the hero says next */
@media (max-width: 860px) and (orientation: portrait) and (max-height: 700px){
  .dive-copy p:nth-child(2){display:none}
}
/* phones on their side: the hint and the caption go to the bottom corners, off the ring. The copy goes
   under 'KEPT.', lined up with it (77lvh left of the centre) unless that leaves it under 200px wide, and
   ends before the ring, whose left rim is about 18lvh left of the centre at the end of the dive.
   The middle paragraph is left out there: there is no room, and the hero says it next. */
@media (max-height: 500px) and (pointer: coarse){
  .dive-hint{top:auto; bottom:14px; left:var(--gut); right:auto; text-align:left}
  .dive-hint::after{display:none}
  .dive-tap{bottom:14px; left:auto; right:var(--gut); text-align:right}
  .dive-copy{left:max(var(--gut), min(calc(50vw - 77lvh), calc(50vw - 18lvh - 214px))); right:calc(50vw + 18lvh + 14px); top:auto; bottom:16px; bottom:calc(100lvh - 100svh + 16px); width:auto; font-size:10.5px; line-height:1.6}
  .dive-copy p + p{margin-top:8px}
  .dive-copy p:nth-child(2){display:none}
}
@media (prefers-reduced-motion: reduce){ .dive{height:100vh} .dive-hint::after{animation:none} }