/* ============================================================================
   PadCoach marketing site: Analog Heat + Instrument
   ----------------------------------------------------------------------------
   Every colour below is lifted value for value from App/Theme/Theme.swift
   (Theme.analogHeat) so the site and the app are the same object. The chrome
   techniques (keycaps, moulded trays, LCD wells with dot matrix masks, segment
   meters, dome LEDs, record sleeves) come from App/Theme/Instrument/ and the
   approved explorations in preview/album-covers/ and preview/ui-personality/.

   No em dashes anywhere.
   ========================================================================== */

:root{
  /* Surfaces (the one warm ladder) */
  --bg:#0A0706;
  --page:#080605;
  --panel:#100B09;
  --tray:#150F0C;
  --keycap:#271A14;
  --lcd:#0A0605;
  --hw:#130E0B;
  --hwb:#38261F;
  --ruler:#180F0C;
  --div:#251812;
  --grid:#1B120E;
  --barline:#3D2820;
  --card:#241812;
  --cardlock:#1D130F;

  /* Ink. All three are Theme.analogHeat values, unchanged.
     --tm measures 4.4:1 on the moulded panels, which is under the 4.5:1 floor
     before the grain overlay is even counted, so it is reserved for decoration.
     Anything that carries information uses --ts (7.3:1 or better) or --tp. */
  --tp:#F9F1E8;
  --ts:#B79C8B;
  --tm:#8C7666;

  /* Hands: the only two saturated hues on the play surface */
  --hl:#3FBEF5;   /* left hand, cold cyan */
  --hr:#FCDCC0;   /* right hand, warm peach ivory */

  /* Semantic */
  --coral:#E84A3C;
  --gold:#FFC96B;
  --perfect:#4ED6A0;
  --good:#FFE066;
  --near:#FF8C42;
  --miss:#F2385A;

  /* Type */
  --f-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Cascadia Mono","Roboto Mono","Courier New",monospace;

  /* Rhythm */
  --gut:clamp(20px, 5vw, 56px);
  --sect:clamp(64px, 11vw, 132px);

  /* Motion. One easing family for the whole site, so every surface decelerates
     the same way. The durations are deliberately short: a keycap is a sprung
     object, not a dissolve, and the press is faster than the release. */
  --ease:cubic-bezier(.2, 0, 0, 1);
  --t-press:70ms;
  --t-quick:130ms;
  --t-calm:180ms;
  --t-reveal:380ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* The page is one dark object: native scrollbars, form widgets and the
     overscroll gutter follow it rather than flashing white. */
  color-scheme:dark;
  scrollbar-color:var(--hwb) var(--page);
  /* The rubber band at the top and bottom of the scroll shows this, so the
     page overscrolls into more of itself rather than into system grey. The
     overscroll gesture itself is left alone on purpose: locking it down would
     also take away pull to refresh, and this is a page, not an app. */
  background:var(--page);
  /* Taps light the object itself (see :active below), not a grey rectangle. */
  -webkit-tap-highlight-color:transparent;
}
html,body{ margin:0; padding:0; max-width:100%; overflow-x:clip; }

body{
  background:
    radial-gradient(1200px 520px at 50% -8%, #17110E 0%, transparent 68%),
    radial-gradient(900px 700px at 92% 12%, rgba(232,74,60,.055) 0%, transparent 60%),
    var(--page);
  color:var(--tp);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* The room has dust in it. Fixed so it never scrolls with the panels. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.28;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:rgba(232,74,60,.35); color:#fff; }

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

.shell{ width:min(1140px, 100% - (var(--gut) * 2)); margin-inline:auto; }

/* Anything an in-page link can target has to clear the sticky rail, or the
   heading it lands on ends up underneath it. */
[id]{ scroll-margin-top:76px; }
@media (max-width:640px){ [id]{ scroll-margin-top:66px; } }

/* Text for assistive tech only: labels the numerals and unlabelled chips. */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:400;
  display:inline-flex; align-items:center; min-height:44px;
  background:var(--coral); color:#1A0503; padding:10px 16px; border-radius:4px;
  font:700 12px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{ left:12px; top:12px; }

/* ============================================================
   TYPE SCALE
   ============================================================ */

.silk{
  display:flex; align-items:center; gap:9px;
  font:700 10px/1 var(--f-mono); letter-spacing:.26em; text-transform:uppercase;
  color:var(--ts); margin:0;
}
.silk::before{
  content:''; width:6px; height:6px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 34% 30%, #ffb3a6 0%, var(--coral) 46%, #7d1c14 100%);
  box-shadow:0 0 8px rgba(232,74,60,.8);
}
.silk .no{ color:var(--tp); }
.silk.gold::before{
  background:radial-gradient(circle at 34% 30%, #fff0cf 0%, var(--gold) 46%, #7a5420 100%);
  box-shadow:0 0 8px rgba(255,201,107,.7);
}

h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.028em; line-height:1.02; text-wrap:balance; }
/* Body copy gets the slower algorithm, which has no line limit, so no
   paragraph anywhere ends on a single orphaned word. */
p,li,figcaption{ text-wrap:pretty; }

.display{
  font-size:clamp(46px, 7.6vw, 94px);
  letter-spacing:-.038em;
  line-height:.95;
}
.h2{ font-size:clamp(31px, 4.6vw, 55px); line-height:1.02; }
.h3{ font-size:clamp(20px, 2.3vw, 27px); letter-spacing:-.018em; line-height:1.14; }

.lede{
  font-size:clamp(17px, 1.55vw, 20px); line-height:1.55; color:var(--ts);
  max-width:56ch; margin:0;
}
.lede b{ color:var(--tp); font-weight:600; }

.dim{ color:var(--ts); }
.warm{ color:var(--gold); }
.hot{ color:var(--coral); }

.sect{ padding-block:var(--sect); position:relative; }
.sect-head{ margin-bottom:clamp(26px, 3.4vw, 44px); }
.sect-head .h2{ margin-top:14px; max-width:19ch; }
.sect-head .lede{ margin-top:16px; }

/* A hairline that reads as the seam between two moulded panels. */
.seam{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, var(--div) 12%, var(--barline) 50%, var(--div) 88%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.035);
}

/* ============================================================
   HARDWARE PRIMITIVES
   ============================================================ */

/* A moulded panel: lit top edge, dark bottom edge, cast shadow. */
.panel{
  position:relative; border-radius:14px;
  background:linear-gradient(180deg, #16100D 0%, var(--panel) 62%, #0C0806 100%);
  border:1px solid rgba(0,0,0,.85);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 14px 32px rgba(0,0,0,.55);
}

/* A recessed housing: a hole, not a thing. */
.tray{
  border-radius:12px; background:var(--tray);
  box-shadow:inset 0 4px 10px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.06);
}

/* Keycap button. Rest: raised, casting 3px. Press: travels 2px down and the
   cast shadow collapses to almost nothing, because the cap is now sitting on
   the panel. The press is faster than the release, the way a sprung key is. */
.cap{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 20px; min-height:44px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(0,0,0,.85);
  background:linear-gradient(180deg,#31211A 0%,#1E1310 100%);
  color:var(--tp); text-decoration:none;
  font:700 12px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase;
  box-shadow:inset 0 1.6px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.6);
  transition-property:transform, box-shadow, filter;
  transition-duration:var(--t-quick);
  transition-timing-function:var(--ease);
  -webkit-user-select:none; user-select:none;
}
/* A key does not rise when you point at it. It lights. */
.cap:hover{ filter:brightness(1.14); }
.cap:focus-visible{ filter:brightness(1.14); }
.cap:active{
  transform:translateY(2px);
  transition-duration:var(--t-press);
  box-shadow:inset 0 1.6px 0 rgba(255,255,255,.06), inset 0 3px 7px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.6);
}
.cap svg{ width:16px; height:16px; flex:none; }
.cap.action{
  background:linear-gradient(180deg,#F2705F 0%,#D6362A 58%,#B12E1D 100%);
  color:#1A0503; border-color:rgba(0,0,0,.7);
  box-shadow:inset 0 1.8px 0 rgba(255,255,255,.32), 0 3px 8px rgba(0,0,0,.6);
}
/* The action cap declares its own resting shadow after .cap:active, so it needs
   its own pressed shadow or the primary CTA travels without ever going down. */
.cap.action:active{
  box-shadow:inset 0 1.8px 0 rgba(255,255,255,.14), inset 0 3px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.6);
}
.cap.sm{ padding:9px 13px; font-size:10px; letter-spacing:.16em; border-radius:7px; }

/* LCD window: gold phosphor on a well blacker than the room, with the pixel
   grid painted OVER the glyphs and dim ghost digits behind the live number. */
.lcd{
  position:relative; display:inline-flex; align-items:stretch; gap:0;
  border-radius:5px; background:var(--lcd); border:1px solid #000;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
}
.lcd::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 .9px, transparent .9px 3px),
    repeating-linear-gradient(180deg, rgba(0,0,0,.42) 0 .9px, transparent .9px 3px),
    linear-gradient(118deg, rgba(255,255,255,.05) 0 18%, transparent 34%);
}
.lcd .cell{ padding:7px 12px 8px; display:flex; flex-direction:column; gap:5px; position:relative; }
.lcd .cell + .cell{ border-left:1px solid rgba(255,201,107,.09); }
.lcd .k{ font:700 7.5px/1 var(--f-mono); letter-spacing:.22em; color:rgba(255,201,107,.46); text-transform:uppercase; }
.lcd .v{
  position:relative; font:600 20px/1 var(--f-mono); letter-spacing:.04em;
  color:var(--gold); text-shadow:0 0 6px rgba(255,201,107,.6), 0 0 16px rgba(255,201,107,.24);
  font-variant-numeric:tabular-nums;
}
/* The ghost digits are the ones in the flow, so each readout is as wide as the
   biggest number it can ever show. The live number is laid over them. Done the
   other way round the cell resizes as the score gains a digit, which shoves the
   readouts beside it sideways and leaks unlit digits into the next cell. */
.lcd .gh{ color:rgba(255,201,107,.075); text-shadow:none; }
.lcd .v .live{ position:absolute; left:0; top:0; z-index:2; }

/* Segment meter: 16 cells, the app's SegmentMeterView. */
.meter{ display:flex; gap:2px; width:100%; }
.meter i{ flex:1; height:8px; border-radius:1px; background:rgba(255,201,107,.075); display:block; }
.meter i.on{ background:var(--gold); box-shadow:0 0 5px rgba(255,201,107,.5); }
.meter i.head{ background:var(--tp); box-shadow:0 0 7px rgba(252,220,192,.75); }

/* Dome LED. Brightness is a filter so a lamp can come up without repainting
   its gradient or its glow. */
.led{
  width:8px; height:8px; border-radius:50%; flex:none; display:inline-block;
  background:var(--hwb); box-shadow:inset 0 1px 1.5px rgba(255,255,255,.14);
  transition:filter var(--t-calm) var(--ease);
}
.led.on{
  background:radial-gradient(circle at 35% 30%, #fff 0, var(--coral) 46%, #7d1c14 100%);
  box-shadow:0 0 8px rgba(232,74,60,.85);
}
.led.gold.on{
  background:radial-gradient(circle at 35% 30%, #fff 0, var(--gold) 48%, #6f4a17 100%);
  box-shadow:0 0 8px rgba(255,201,107,.8);
}

/* ============================================================
   NAV
   ============================================================ */

.rail{
  position:sticky; top:0; z-index:120;
  background:linear-gradient(180deg, rgba(10,7,6,.95), rgba(10,7,6,.82));
  backdrop-filter:saturate(140%) blur(9px);
  -webkit-backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid rgba(56,38,31,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}
.rail-in{ display:flex; align-items:center; gap:16px; height:60px; }
.mark{
  display:flex; align-items:center; gap:10px; text-decoration:none; flex:none;
  min-height:44px; font:700 13px/1 var(--f-mono); letter-spacing:.3em; color:var(--tp);
  -webkit-user-select:none; user-select:none;
}
.mark .led{ width:7px; height:7px; }
/* Point at the logotype and its power lamp comes up. */
a.mark{
  transition:transform var(--t-quick) var(--ease);
}
a.mark:hover .led.on,
a.mark:focus-visible .led.on{ filter:brightness(1.28); }
a.mark:active{ transform:translateY(1px); transition-duration:var(--t-press); }
.rail nav{ margin-left:auto; display:flex; align-items:center; gap:4px; padding:4px; border-radius:9px; }
/* Rail links are the one nav a thumb has to hit, so they carry a full 44px
   target even though the label itself is 10px. */
.rail nav a{
  display:inline-flex; align-items:center; min-height:44px; white-space:nowrap;
  padding:0 12px; border-radius:6px; text-decoration:none; color:var(--ts);
  font:700 10px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase;
  transition-property:color, background-color, transform;
  transition-duration:var(--t-calm);
  transition-timing-function:var(--ease);
  -webkit-user-select:none; user-select:none;
}
.rail nav a:hover,
.rail nav a:focus-visible{ color:var(--tp); background:rgba(255,255,255,.045); }
/* The tap highlight is off, so the label itself has to acknowledge the press. */
.rail nav a:active{ transform:translateY(1px); transition-duration:var(--t-press); }
.rail nav a[aria-current="page"]{ color:var(--gold); }
.rail .cap{ margin-left:8px; min-height:40px; padding-block:0; }

@media (max-width:640px){
  .rail-in{ height:54px; gap:8px; }
  .mark{ font-size:11px; letter-spacing:.22em; }
  .rail nav{ gap:0; padding:0; }
  .rail nav a{ padding:0 7px; font-size:9px; letter-spacing:.12em; }
  .rail .cap{ display:none; }
}
/* Below this the four labels stop fitting on one line. The least distinct
   destination steps out rather than letting a label wrap inside the rail. */
@media (max-width:430px){
  .rail nav a.opt{ display:none; }
}

/* ============================================================
   APP STORE BADGE
   ============================================================ */

.getit{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.badge{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  padding:10px 18px 11px 16px; border-radius:11px;
  background:linear-gradient(180deg,#1B1310 0%,#0B0807 100%);
  border:1px solid rgba(249,241,232,.28);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.6);
  color:var(--tp);
  transition-property:transform, filter;
  transition-duration:var(--t-quick);
  transition-timing-function:var(--ease);
  -webkit-user-select:none; user-select:none;
}
.badge:hover{ filter:brightness(1.16); transform:translateY(-1px); }
.badge:active{ transform:translateY(1px); transition-duration:var(--t-press); }
/* Until the app is actually on the App Store there is nothing to link to, so
   the badge is a plaque: it states the status and does not pretend to be a
   button. The live action next to it is the one that goes somewhere. */
.badge.plaque{ cursor:default; border-style:dashed; border-color:rgba(249,241,232,.2); }
.badge.plaque:hover{ filter:none; transform:none; }
.badge svg{ width:27px; height:27px; flex:none; color:var(--tp); }
.badge .bt{ display:flex; flex-direction:column; gap:3px; text-align:left; }
.badge .bt i{ font:600 9.5px/1 var(--f-sans); letter-spacing:.06em; font-style:normal; color:var(--ts); }
.badge .bt b{ font:600 18px/1 var(--f-sans); letter-spacing:-.02em; }
.soon{
  display:inline-flex; align-items:center; gap:7px;
  font:700 9.5px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ts);
}

/* ============================================================
   DEVICE FRAME (landscape iPhone)
   ============================================================ */

.device{
  position:relative; padding:9px; border-radius:30px; width:100%;
  background:linear-gradient(158deg,#241A16 0%,#120C0A 46%,#070505 100%);
  box-shadow:
    0 30px 60px rgba(0,0,0,.72),
    inset 0 1.5px 0 rgba(255,255,255,.12),
    inset 0 -1.5px 0 rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.85);
}
.device::after{
  /* The lamp reflection on the glass. Radius is concentric: 30 outer minus the
     9px bezel is 21, not 22, and at this size the 1px shows. */
  content:''; position:absolute; inset:9px; border-radius:21px; pointer-events:none; z-index:3;
  background:linear-gradient(116deg, rgba(255,255,255,.075) 0 14%, transparent 30%, transparent 100%);
  /* The screenshot's own edge, drawn on the overlay rather than as an outline on
     the img, so it follows the corner radius instead of cutting across it. */
  box-shadow:inset 0 0 0 1px rgba(249,241,232,.08);
}
.device .glass{ border-radius:21px; overflow:hidden; background:var(--bg); position:relative; }
.device img{ width:100%; display:block; }

/* ============================================================
   HERO
   ============================================================ */

.hero{ padding-block:clamp(52px, 8vw, 104px) clamp(40px, 6vw, 76px); position:relative; }
.hero-grid{
  display:grid; gap:clamp(34px, 5vw, 66px);
  grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
  align-items:center;
}
.hero h1{ margin:18px 0 0; }
.hero h1 .l2{ display:block; color:var(--coral); }
.hero .lede{ margin-top:24px; }
.hero .getit{ margin-top:32px; }
.hero-strip{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:34px; padding-top:22px;
  border-top:1px solid var(--div);
}
.hero-strip span{ font:700 10px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ts); }
.hero-strip b{ color:var(--tp); }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   THE LIVE EXERCISE
   ============================================================ */

/* The rig is two objects: the app, and the controller it is being played on.
   Every measurement the highway shares with the notes and the lane heads lives
   here once, so the CSS and the rAF loop can never disagree about a width. */
.rigstage{
  --lane-h:clamp(56px, 7.6vw, 96px);
  --lhead:clamp(96px, 13vw, 132px);
  /* Cap size is a starting value only: the script overwrites both from the
     measured bar width so two adjacent hats can never overlap. */
  --note-w:clamp(30px, 4.2vw, 46px);
  --note-h:clamp(19px, 2.8vw, 32px);
  display:flex; flex-direction:column;
}

/* The plate that says what this thing is. It sits on top of the rig rather
   than under it, because the point of it is to be read before the moving
   picture is believed. */
.simnote{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin:0 0 clamp(12px, 1.6vw, 18px);
  font:400 12.5px/1.5 var(--f-sans); color:var(--ts);
}
.simnote .tag{
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:5px;
  background:var(--lcd); border:1px solid #000;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.92), 0 1px 0 rgba(255,255,255,.06);
  font:700 9px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); text-shadow:0 0 6px rgba(255,201,107,.5); white-space:nowrap;
}
.simnote .led{ width:6px; height:6px; }

/* The tray radius is fixed but its bezel is fluid, so the inner radius is
   computed rather than guessed: it stays concentric at every viewport width. */
.rig{ --bezel:clamp(11px, 1.3vw, 14px); padding:var(--bezel); border-radius:18px; }
/* The instrument face is a surface you hit, not text you drag across. */
.rig-inner{
  position:relative;
  border-radius:calc(18px - var(--bezel)); overflow:hidden; background:var(--bg);
  -webkit-user-select:none; user-select:none; cursor:default;
}
/* The same lamp that falls across the device frames falls across this one, so
   the running rig reads as a screen rather than as a diagram of one. */
.rig-inner::after{
  content:''; position:absolute; inset:0; z-index:9; pointer-events:none;
  background:linear-gradient(116deg, rgba(255,255,255,.045) 0 13%, transparent 29%);
}

.hud{
  display:flex; align-items:center; gap:clamp(10px, 1.6vw, 18px);
  padding:clamp(10px, 1.4vw, 14px);
  background:var(--tray);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.055);
}
.hud .prog{ flex:1; min-width:70px; display:flex; flex-direction:column; gap:7px; }
/* The bar counter ticks while you watch it, so its digits are fixed width and
   the label beside it never moves. */
.hud .prog .pl{
  display:flex; justify-content:space-between; gap:10px;
  font:700 9px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ts);
  font-variant-numeric:tabular-nums;
}
.hud .prog .pl b{ color:var(--tp); }
.hud .caps{ display:flex; gap:6px; }
.hud .kc{
  width:38px; height:33px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#2E1F18,#1E1310); border:1px solid rgba(0,0,0,.85); color:var(--ts);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.11), 0 2px 4px rgba(0,0,0,.6); flex:none; position:relative;
}
.hud .kc svg{ width:16px; height:16px; }
.hud .kc.on{ color:var(--tp); background:linear-gradient(180deg,#3A1712,#220D0A); border-color:rgba(232,74,60,.5); }
.hud .kc.on::after{
  content:''; position:absolute; top:4px; right:4px; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffb0a2 0%, var(--coral) 42%, #7d1c12 100%);
  box-shadow:0 0 6px rgba(232,74,60,.85);
}

/* The highway */
.highway{
  position:relative; background:var(--hw);
  border-top:1px solid rgba(0,0,0,.7);
  box-shadow:inset 0 3px 9px rgba(0,0,0,.7);
}
.hwruler{
  height:24px; position:relative; background:var(--ruler);
  border-bottom:1px solid var(--div); overflow:hidden;
}
.hwruler .rtrack{ position:absolute; inset:0; will-change:transform; }
.hwruler .bn{
  position:absolute; left:0; top:6px; font:700 9px/1 var(--f-mono); letter-spacing:.2em;
  color:var(--ts); text-transform:uppercase; white-space:nowrap;
}
.hwlegend{
  position:absolute; right:8px; top:4px; z-index:6; display:flex; align-items:center; gap:10px;
  padding:3px 9px; border-radius:5px; background:rgba(0,0,0,.55);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
}
.hwlegend span{
  display:flex; align-items:center; gap:5px;
  font:700 8px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ts);
}
.hwlegend i{ width:8px; height:8px; border-radius:2px; display:block; }
.hwlegend i.hollow{ background:transparent; border-radius:50%; box-shadow:inset 0 0 0 1.6px currentColor; }

/* With a controller connected the app gives the highway the whole screen, so
   the lanes here are the full height ones, not the short ones that share a
   window with a touch pad grid. */
.lanes{ position:relative; }
.lane{
  position:relative; display:flex; align-items:center;
  height:var(--lane-h); border-bottom:1px solid var(--div);
}
.lane:last-child{ border-bottom:none; }
.lhead{
  width:var(--lhead); flex:none; display:flex; align-items:center; gap:9px;
  padding-left:clamp(9px, 1.2vw, 14px); z-index:5; position:relative;
}
.mini{ display:grid; grid-template-columns:repeat(4,4px); grid-auto-rows:4px; gap:1.6px; flex:none; }
.mini i{ background:var(--barline); border-radius:.5px; display:block; }
.mini i.on{ background:var(--hr); }
.mini i.onl{ background:var(--hl); }
.lname{ font:700 10px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ts); }
.fbadge{
  width:17px; height:17px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font:700 9px/1 var(--f-sans); color:#130E0B; flex:none;
}
.fbadge.r{ background:var(--hr); }
.fbadge.l{ background:var(--hl); color:#062033; }

/* The scrolling area. Everything left of the playhead fades, which is also what
   makes the one bar recycle invisible. */
.ltrack{
  position:absolute; top:0; bottom:0; left:var(--lhead); right:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.scroller{ position:absolute; inset:0; will-change:transform; }
.note{
  position:absolute; top:50%; left:0;
  width:var(--note-w); height:var(--note-h);
  margin-top:calc(var(--note-h) / -2);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  /* The finger letter is sized off the cap, so it stays inside a small square
     cap on a phone instead of being cropped by it. */
  font-family:var(--f-sans); font-weight:700; line-height:1;
  font-size:clamp(9px, calc(var(--note-h) * .44), 13px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5), 0 1.5px 2px rgba(0,0,0,.6);
}
.note.r{ background:var(--hr); color:#130E0B; }
.note.l{ background:var(--hl); color:#062033; }
/* A landing cap brightens and takes a halo in the judgment colour. The colour
   arrives as --j, not as the cap's text colour, so the finger letter keeps its
   dark ink and stays readable through the flash. */
.note.lit{ filter:brightness(1.3); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6), 0 0 14px var(--j, currentColor); }

.gl{ position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--grid); }
.gl.bar{ background:var(--barline); }

.playhead{
  position:absolute; top:0; bottom:0; width:2px; z-index:7;
  background:var(--gold); box-shadow:0 0 12px rgba(255,201,107,.65);
}
.playhead::before{
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:7px solid var(--gold);
}

/* The judgment ring sits ON the playhead in each lane. */
.ring{
  position:absolute; top:50%; z-index:6;
  width:var(--note-w); height:var(--note-h);
  margin-top:calc(var(--note-h) / -2);
  border-radius:6px; box-shadow:inset 0 0 0 1.5px rgba(56,38,31,.85);
  opacity:1; pointer-events:none;
}
.ring .burst{
  position:absolute; inset:-4px; border-radius:10px; opacity:0;
  box-shadow:inset 0 0 0 2px currentColor, 0 0 16px currentColor;
  will-change:transform, opacity;
}
.ring.flash .burst{ animation:burst 420ms cubic-bezier(.2,.7,.3,1) 1; }
@keyframes burst{
  0%{ opacity:1; transform:scale(.72); }
  55%{ opacity:.85; }
  100%{ opacity:0; transform:scale(1.5); }
}

/* ---- the hardware, outside the app window ----
   The controller is a second object sitting under the screen, wired to it. The
   cable is a hint and nothing more: one dotted run with the port named on it. */
.deckrow{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(18px, 3vw, 44px);
}
/* The column carries the width for the cable and the slab together. Without an
   explicit width the slab would collapse to the max-content width of its own
   label strip, because a percentage width has nothing to resolve against in a
   shrink to fit flex item. */
.deckcol{
  display:flex; flex-direction:column; align-items:stretch;
  width:min(440px, 100%); min-width:0;
}

.wire{
  display:flex; flex-direction:column; align-items:center;
  -webkit-user-select:none; user-select:none;
}
.wire .wseg{
  width:1px; height:clamp(13px, 1.8vw, 22px); display:block;
  background:repeating-linear-gradient(180deg, var(--barline) 0 4px, transparent 4px 8px);
}
.wire .wtag{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:5px;
  background:var(--tray); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.55);
  font:700 8.5px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ts);
  white-space:nowrap;
}
.wire .led{ width:6px; height:6px; }

/* The slab. Moulded body, lit top edge, a recessed well the pads sit down in,
   and a second cast shadow underneath so it reads as sitting on a desk. */
.deck{
  --dbez:clamp(11px, 1.5vw, 17px);
  width:100%;
  padding:var(--dbez); border-radius:18px;
  background:linear-gradient(180deg, #1F1611 0%, #150F0C 46%, #0A0706 100%);
  border:1px solid rgba(0,0,0,.85);
  box-shadow:
    inset 0 1.6px 0 rgba(255,255,255,.085),
    inset 0 -1.5px 0 rgba(0,0,0,.7),
    0 2px 0 rgba(0,0,0,.75),
    0 22px 40px rgba(0,0,0,.62);
}
.deck-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:1px 3px clamp(9px, 1.2vw, 13px);
  font:700 8.5px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ts);
}
.deck-head .dname{ display:inline-flex; align-items:center; gap:8px; color:var(--tp); }
.deck-head .led{ width:6px; height:6px; }
.deck-well{
  padding:clamp(7px, 1vw, 11px); border-radius:max(5px, calc(18px - var(--dbez)));
  background:var(--tray);
  box-shadow:inset 0 5px 12px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.055);
}
.padgrid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(5px, .8vw, 9px); width:min(300px, 62vw); }
.pad{
  aspect-ratio:1.28 / 1; border-radius:6px; position:relative;
  background:linear-gradient(180deg,#241812 0%,#160E0B 100%);
  border:1px solid rgba(0,0,0,.8);
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.55);
  transition-property:box-shadow, transform, background;
  transition-duration:var(--t-calm), var(--t-press), var(--t-calm);
  transition-timing-function:var(--ease);
}
/* Only the pads the loop actually strikes get a compositing layer. The pad grid
   in the controllers section never moves, so it does not need 16 of them. */
#pads .pad{ will-change:transform; }
/* The deck's own pads are square rubber, sunk in the well, and bigger than the
   cutaway ones, so they carry their own face and their own travel. */
.deck .padgrid{
  width:100%; aspect-ratio:1 / 1;
  grid-template-rows:repeat(4, 1fr); gap:clamp(6px, .95vw, 10px);
}
.deck .pad{
  aspect-ratio:auto; border-radius:9px;
  box-shadow:inset 0 1.6px 0 rgba(255,255,255,.075), inset 0 -3px 4px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.6);
}
.deck .pad.hit{ transform:translateY(2px); }
.pad .pn{
  position:absolute; left:5px; bottom:3px;
  font:700 7px/1 var(--f-mono); letter-spacing:.1em; color:rgba(249,241,232,.2);
}
.deck .pad .pn{ left:7px; bottom:5px; font-size:8px; color:rgba(249,241,232,.3); }
.pad.hit{ transform:translateY(1.5px); }
.pad.hit.r{ background:linear-gradient(180deg,#FCDCC0,#C7A78C); box-shadow:0 0 18px rgba(252,220,192,.55), inset 0 1.4px 0 rgba(255,255,255,.7); }
.pad.hit.l{ background:linear-gradient(180deg,#3FBEF5,#1D7CA8); box-shadow:0 0 18px rgba(63,190,245,.55), inset 0 1.4px 0 rgba(255,255,255,.5); }
.padnote{ max-width:24ch; min-width:0; }
.padnote p{ margin:0; font:400 12.5px/1.5 var(--f-sans); color:var(--ts); }
.padnote .silk{ margin-bottom:9px; }

/* Below this the slab and its explainer stop sitting side by side without one
   of them getting squeezed, so the unit stacks: cable, controller, then the
   layout note centred under it. */
@media (max-width:760px){
  .deckrow{ flex-direction:column; gap:clamp(14px, 2.4vw, 20px); }
  .padnote{ max-width:44ch; text-align:center; }
  .padnote .silk{ justify-content:center; }
}

/* On a phone the HUD becomes two rows: readouts and keycaps, then the take
   meter full width. The LCD never shrinks, or it eats its own cells. */
@media (max-width:640px){
  .hud{ flex-wrap:wrap; row-gap:12px; }
  .hud .lcd{ flex:none; }
  .hud .lcd .cell{ padding:6px 9px 7px; }
  .hud .lcd .v{ font-size:17px; }
  .hud .caps{ margin-left:auto; }
  .hud .prog{ order:3; flex:0 0 100%; }
}
@media (max-width:470px){
  .hud .caps{ display:none; }
}

.rig-caption{
  display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center;
  margin-top:18px; font:700 10px/1.5 var(--f-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ts);
}
.rig-caption b{ color:var(--tp); }

/* ============================================================
   THREE BEATS
   ============================================================ */

.beats{ display:grid; gap:clamp(14px, 2vw, 20px); grid-template-columns:repeat(3, minmax(0,1fr)); }
.beat{ padding:clamp(22px, 2.6vw, 32px); display:flex; flex-direction:column; gap:14px; }
.beat .no{
  font:600 46px/1 var(--f-mono); letter-spacing:-.02em; color:var(--barline);
}
.beat h3{ font-size:clamp(19px, 2vw, 24px); }
.beat p{ margin:0; color:var(--ts); font-size:15.5px; line-height:1.6; max-width:42ch; }
@media (max-width:820px){ .beats{ grid-template-columns:1fr; } }

/* ============================================================
   THE SHELF
   ============================================================ */

.shelf{
  display:grid; gap:clamp(14px, 2vw, 22px);
  grid-template-columns:repeat(4, minmax(0,1fr));
}
@media (max-width:900px){ .shelf{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:660px){ .shelf{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } }

.rec{ display:flex; flex-direction:column; gap:11px; }
.rec .meta{ display:flex; flex-direction:column; gap:3px; }
.rec .meta b{ font:700 14px/1.2 var(--f-sans); letter-spacing:-.01em; }
.rec .meta span{ font:400 12.5px/1.45 var(--f-sans); color:var(--ts); }
.rec .meta .chipkey{ color:var(--gold); }

.cover{
  --sz:100%; --a:var(--coral); --a2:var(--gold);
  position:relative; width:100%; aspect-ratio:1/1;
  font-size:clamp(9px, 1.2vw, 12px);
  border-radius:3px; overflow:hidden; isolation:isolate;
  background:linear-gradient(168deg,#18110E 0%,#0C0908 58%,#080605 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.72), inset 0 0 0 1px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09);
  transition-property:transform, box-shadow;
  transition-duration:var(--t-calm);
  transition-timing-function:var(--ease);
}
/* A sleeve you point at eases out of the shelf and casts further. Pointer
   devices only: there is nothing to hover on a touch screen, and nothing here
   is clickable, so the cursor is deliberately left alone. */
@media (hover:hover) and (pointer:fine){
  .rec:hover .cover{
    transform:translateY(-4px);
    box-shadow:0 16px 30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.13);
  }
}
.cover .wash{ position:absolute; inset:0; opacity:.17; background:radial-gradient(120% 92% at 22% 6%, var(--a), transparent 62%); }
.cover .art{ position:absolute; inset:0; overflow:hidden; }
.cover .art i{ position:absolute; display:block; }
.cover .halftone{
  position:absolute; inset:0; opacity:.45; mix-blend-mode:overlay;
  background-image:radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 22%, transparent 24%);
  background-size:3px 3px;
}
.cover .wear{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 46%, transparent 30%, rgba(255,255,255,.035) 31%, rgba(255,255,255,.035) 32%, transparent 33%),
    radial-gradient(120% 100% at 108% 106%, rgba(0,0,0,.6), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.07) 0 6%, transparent 16%);
}
.cover .spine{ position:absolute; left:0; top:0; bottom:0; width:5%; background:linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,0)); }
.cover .cat{
  position:absolute; top:.62em; left:.9em; z-index:2;
  font:700 .58em/1 var(--f-mono); letter-spacing:.2em; color:rgba(249,241,232,.72);
}
.cover .plate{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.2em .9em .8em;
  background:linear-gradient(180deg, rgba(8,6,5,0), rgba(8,6,5,.86) 42%, rgba(8,6,5,.96));
}
.cover .plate .ttl{
  display:block; font:700 .95em/1.18 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--tp); text-shadow:0 1px 0 rgba(0,0,0,.8);
}
.cover .plate .imp{
  display:block; margin-top:.5em; font:700 .52em/1 var(--f-mono); letter-spacing:.26em;
  color:rgba(183,156,139,.92);
}
.cover .chip{
  position:absolute; top:.55em; right:.6em; z-index:2; padding:.26em .46em; border-radius:3px;
  background:var(--lcd); border:1px solid #000;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.06);
}
.cover .chip b{
  position:relative; z-index:2; font:700 .74em/1 var(--f-mono); letter-spacing:.07em;
  color:var(--gold); text-shadow:0 0 6px rgba(255,201,107,.8);
}
.cover .chip::after{
  content:''; position:absolute; inset:0; border-radius:3px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 .9px, transparent .9px 3px),
    repeating-linear-gradient(180deg, rgba(0,0,0,.4) 0 .9px, transparent .9px 3px);
}
.cover .flag{
  position:absolute; left:.9em; bottom:6.4em; z-index:2; display:flex; align-items:center; gap:.45em;
  padding:.3em .55em; border-radius:2px; background:var(--coral); color:#1A0503;
  font:700 .55em/1 var(--f-mono); letter-spacing:.2em;
}
.cover .flag i{ width:.42em; height:.42em; border-radius:50%; background:#1A0503; }

/* ---- the twelve motifs, one per course ---- */
.m1 .l1{ left:50%; top:44%; width:52%; height:52%; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.44), rgba(255,255,255,0) 58%), var(--a); }
.m1 .l2{ left:50%; top:44%; width:74%; height:74%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,255,255,.2); }
.m1 .l3{ left:50%; top:44%; width:96%; height:96%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.m1 .l4{ right:11%; bottom:19%; width:13%; height:13%; border-radius:50%; background:var(--a2); }

.m2 .l1{ top:12%; bottom:22%; left:-16%; right:-16%; transform:skewX(-13deg); opacity:.92;
  background:repeating-linear-gradient(90deg, var(--a) 0 3.1%, transparent 3.1% 7.8%, var(--a2) 7.8% 10.2%, transparent 10.2% 15.6%); }
.m2 .l2{ left:0; right:0; top:52%; height:1px; background:rgba(255,255,255,.22); }
.m2 .l3{ left:9%; right:9%; bottom:20%; height:2px; background:var(--a); opacity:.6; }

.m3 .l1{ top:16%; bottom:22%; left:9%; right:30%;
  background:repeating-linear-gradient(90deg, var(--a) 0 26%, transparent 26% 50%);
  clip-path:polygon(0 100%, 100% 12%, 100% 100%); }
.m3 .l2{ right:10%; top:46%; transform:translateY(-50%); width:20%; height:20%; border-radius:50%;
  background:var(--a2); box-shadow:0 0 14px rgba(255,255,255,.14); }
.m3 .l3{ left:9%; right:10%; bottom:20%; height:1px; background:rgba(255,255,255,.22); }

.m4 .l1{ left:0; top:0; bottom:0; width:44%; background:linear-gradient(158deg, var(--a), rgba(0,0,0,.42)); }
.m4 .l2{ right:15%; top:15%; width:16%; bottom:24%;
  background-image:radial-gradient(circle at 50% 12.5%, var(--a2) 25%, transparent 27%); background-size:100% 25%; }
.m4 .l3{ left:-16%; bottom:-24%; width:56%; height:56%; border-radius:50%; background:rgba(0,0,0,.34); }

.m5 .l1{ inset:0; background:repeating-radial-gradient(circle at 50% 48%, var(--a) 0 1.4px, transparent 1.4px 9px); opacity:.85; }
.m5 .l2{ left:50%; top:48%; width:15%; height:15%; transform:translate(-50%,-50%); border-radius:50%; background:var(--a2); }
.m5 .l3{ inset:0; background:conic-gradient(from 22deg at 50% 48%, rgba(8,6,5,.94) 0 44deg, transparent 44deg); }
.m5 .l4{ inset:0; background:radial-gradient(circle at 50% 48%, transparent 50%, rgba(8,6,5,.62) 88%); }

.m6 .l1{ top:26%; bottom:20%; left:9%; right:9%; background:var(--a);
  clip-path:polygon(0 40%,25% 40%,25% 58%,50% 58%,50% 76%,75% 76%,75% 94%,100% 94%,100% 100%,0 100%); }
.m6 .l2{ left:9%; right:9%; top:12%; height:24%; opacity:.9;
  background:repeating-linear-gradient(45deg, var(--a2) 0 1.5px, transparent 1.5px 6px); }
.m6 .l3{ left:9%; right:9%; top:41%; height:1px; background:rgba(255,255,255,.22); }

.m7 .l1{ inset:15% 15% 24% 15%; background-size:25% 25%;
  background-image:radial-gradient(circle at 50% 50%, rgba(249,241,232,.3) 15%, transparent 17%); }
.m7 .l2{ left:42%; top:35%; width:26%; height:6%; border-radius:99px;
  background:linear-gradient(90deg, rgba(78,214,160,0), var(--a)); }
.m7 .l3{ left:64%; top:32%; width:11%; height:11%; border-radius:50%; background:var(--a); box-shadow:0 0 12px rgba(78,214,160,.5); }
.m7 .l4{ left:15%; right:15%; bottom:22%; height:1px; background:rgba(255,255,255,.16); }

.m8 .l1{ inset:20% 9% 26% 9%; background:linear-gradient(90deg, var(--a2), var(--a)); opacity:.92;
  clip-path:polygon(0 44%,100% 0,100% 100%,0 56%); }
.m8 .l2{ inset:20% 9% 26% 9%; clip-path:polygon(0 44%,100% 0,100% 100%,0 56%);
  background:repeating-linear-gradient(90deg, rgba(8,6,5,.9) 0 2px, transparent 2px 9px); }
.m8 .l3{ left:9%; right:9%; top:47%; height:1px; background:rgba(255,255,255,.26); }

.m9 .l1{ left:0; right:0; bottom:0; height:24%;
  background:repeating-linear-gradient(90deg, var(--a2) 0 7.4%, rgba(8,6,5,.92) 7.4% 8.3%); }
.m9 .l2{ left:0; right:0; bottom:12%; height:12%;
  background:repeating-linear-gradient(90deg, transparent 0 4.4%, rgba(8,6,5,.94) 4.4% 7%, transparent 7% 14.8%); }
.m9 .l3{ top:16%; bottom:30%; left:14%; right:14%; background:var(--a); opacity:.92;
  clip-path:polygon(0 66%,24% 66%,24% 44%,50% 44%,50% 22%,76% 22%,76% 0,100% 0,100% 100%,0 100%); }

.m10 .l1{ inset:0; background:radial-gradient(circle at 50% 46%, rgba(232,74,60,.4), transparent 62%); }
.m10 .l2{ inset:14% 14% 22% 14%; background-image:linear-gradient(180deg, var(--a), var(--a2));
  background-size:19% 19%; background-repeat:space; }
.m10 .l3{ inset:14% 14% 22% 14%; border:1px solid rgba(255,255,255,.14); }

.m11 .l1,.m12 .l1{ left:10%; right:10%; top:56%; height:2px; background:var(--a); }
.m11 .l2,.m12 .l2{ left:10%; right:10%; top:62%; height:1px; background:rgba(255,255,255,.18); }
.m11 .l3,.m12 .l3{ left:10%; right:10%; bottom:22%; height:9%;
  background-image:radial-gradient(circle at 50% 50%, var(--a2) 20%, transparent 22%); background-size:12.5% 100%; }
.cover .gtext{
  position:absolute; left:10%; right:10%; top:13%; z-index:1;
  font:700 2.6em/1.05 var(--f-mono); letter-spacing:.05em; color:var(--a); text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.m12 .gtext{ text-align:right; }

.sleeveback{
  display:grid; gap:clamp(24px, 4vw, 56px); align-items:center;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  margin-top:clamp(38px, 5vw, 62px);
}
.sleeveback .h3{ margin-top:14px; }
.sleeveback p{ margin:14px 0 0; color:var(--ts); font-size:15.5px; line-height:1.62; max-width:46ch; }
@media (max-width:820px){ .sleeveback{ grid-template-columns:1fr; } }

/* ============================================================
   BENEFITS
   ============================================================ */

.gains{ display:grid; gap:clamp(16px, 2vw, 22px); grid-template-columns:repeat(2, minmax(0,1fr)); }
.gain{ padding:clamp(24px, 2.8vw, 34px); display:flex; flex-direction:column; gap:13px; }
.gain .silk{ margin-bottom:2px; }
.gain h3{ font-size:clamp(21px, 2.2vw, 27px); max-width:16ch; }
.gain p{ margin:0; color:var(--ts); font-size:15.5px; line-height:1.62; max-width:50ch; }
.gain b{ color:var(--tp); font-weight:600; }
@media (max-width:760px){ .gains{ grid-template-columns:1fr; } }

/* Hand key: the one thing the app teaches with colour. */
.handkey{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.handkey span{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 7px; border-radius:6px;
  background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  font:700 10px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ts);
}
.handkey i{ width:20px; height:14px; border-radius:4px; display:block; box-shadow:inset 0 1.4px 0 rgba(255,255,255,.5); }
.handkey i.r{ background:var(--hr); }
.handkey i.l{ background:var(--hl); }

/* ============================================================
   SPEC SHEET / WHAT IS INSIDE
   ============================================================ */

.kit{ display:grid; gap:clamp(16px, 2vw, 22px); grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; }
@media (max-width:860px){ .kit{ grid-template-columns:1fr; } }

.speclist{ list-style:none; margin:0; padding:clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px); }
.speclist li{
  display:flex; gap:16px; align-items:center; padding:15px 0;
  border-bottom:1px solid rgba(37,24,18,.85);
}
.speclist li:last-child{ border-bottom:none; padding-bottom:2px; }
.speclist li:first-child{ padding-top:2px; }
.speclist .n{
  flex:none; width:58px; text-align:center; font:600 21px/1 var(--f-mono); color:var(--gold); letter-spacing:.02em;
  text-shadow:0 0 8px rgba(255,201,107,.35);
}
.speclist .n.sm{ font-size:12px; letter-spacing:.1em; }
/* The infinity glyph draws small for its point size, so it is set twice as
   large to carry the same weight as the numerals above and below it. */
.speclist .n.inf{ font-size:42px; }
.speclist .t{ max-width:56ch; }
.speclist .t b{ display:block; font:600 15.5px/1.35 var(--f-sans); }
.speclist .t span{ display:block; margin-top:3px; font:400 13.5px/1.5 var(--f-sans); color:var(--ts); }

.price{ padding:clamp(24px, 2.8vw, 32px); display:flex; flex-direction:column; gap:16px; }
.price .tag{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }
.price .tag b{ font:800 clamp(30px, 3.6vw, 42px)/1 var(--f-sans); letter-spacing:-.03em; }
.price .tag span{ font:700 10px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ts); }
.price p{ margin:0; color:var(--ts); font-size:15px; line-height:1.6; max-width:46ch; }
.price ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.price li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ts); line-height:1.5; }
.price li svg{ width:15px; height:15px; flex:none; margin-top:3px; color:var(--perfect); }
.price .pricecta{ align-self:flex-start; min-height:44px; }
.price .fine{ font:400 12.5px/1.55 var(--f-sans); color:var(--ts); padding-top:14px; border-top:1px solid var(--div); max-width:54ch; }

/* ============================================================
   CONTROLLERS
   ============================================================ */

.ctrl{ display:grid; gap:clamp(20px, 3vw, 40px); grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:center; }
@media (max-width:860px){ .ctrl{ grid-template-columns:1fr; } }

.ctrlist{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:16px; }
.ctrlist li{ display:flex; gap:14px; align-items:flex-start; max-width:56ch; }
.ctrlist .dot{
  flex:none; width:26px; height:26px; border-radius:7px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#2E1F18,#1E1310); border:1px solid rgba(0,0,0,.8);
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.11);
}
.ctrlist .dot svg{ width:14px; height:14px; color:var(--coral); }
.ctrlist b{ display:block; font:600 15.5px/1.35 var(--f-sans); }
.ctrlist span{ display:block; margin-top:3px; color:var(--ts); font-size:14px; line-height:1.55; }

.rigcut{ padding:clamp(20px, 2.6vw, 30px); display:flex; flex-direction:column; gap:18px; align-items:center; }
.rigcut .padgrid{ width:min(320px, 100%); }
.rigcut .pad{ aspect-ratio:1/1; }
.rigcut .cable{ display:flex; align-items:center; gap:10px; width:100%; }
.rigcut .cable .line{ flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--barline) 0 6px, transparent 6px 11px); }
.rigcut .cable span{ font:700 9px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ts); }

/* ============================================================
   SPEC STRIP
   ============================================================ */

.strip{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  border-radius:12px; overflow:hidden;
}
.strip div{
  padding:20px 18px; display:flex; flex-direction:column; gap:7px;
  border-right:1px solid rgba(37,24,18,.9);
}
.strip div:last-child{ border-right:none; }
.strip .k{ font:700 9px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ts); }
.strip .v{ font:600 15px/1.25 var(--f-sans); color:var(--tp); }
@media (max-width:840px){
  .strip{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .strip div{ border-bottom:1px solid rgba(37,24,18,.9); }
  .strip div:nth-child(2n){ border-right:none; }
  .strip div:last-child{ grid-column:1 / -1; border-bottom:none; }
}

/* ============================================================
   CLOSER
   ============================================================ */

.closer{
  padding:clamp(38px, 6vw, 80px) clamp(24px, 4vw, 60px);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px;
  border-radius:18px; position:relative; overflow:hidden;
}
.closer::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 130% at 50% -20%, rgba(232,74,60,.16), transparent 62%);
}
.closer > *{ position:relative; }
.closer .h2{ max-width:16ch; }
.closer .lede{ margin-inline:auto; text-align:center; }
.closer .getit{ justify-content:center; }

/* ============================================================
   ARTICLE PAGES (privacy, support)
   ============================================================ */

.doc{ padding-block:clamp(44px, 6vw, 82px) clamp(60px, 8vw, 100px); }
.doc-head{ margin-bottom:clamp(30px, 4vw, 46px); }
.doc-head h1{ font-size:clamp(38px, 6vw, 66px); letter-spacing:-.035em; margin-top:16px; }
.doc-head .stamp{
  display:inline-flex; gap:18px; flex-wrap:wrap; margin-top:22px; padding:12px 16px;
  border-radius:8px; background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  font:700 10px/1.4 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ts);
}
.doc-head .stamp b{ color:var(--tp); }

/* Document pages are a single reading column. The measure is set once, here,
   and the panels match it rather than stretching to the shell. */
.doc .prose,
.doc .faq,
.doc .contact{ max-width:580px; }
.prose h2{
  font:700 11px/1 var(--f-mono); letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  margin:clamp(38px, 4.5vw, 54px) 0 16px; display:flex; align-items:center; gap:11px;
}
.prose h2::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--div), transparent); }
.prose h3{ font-size:19px; letter-spacing:-.015em; margin:30px 0 9px; }
.prose p{ margin:0 0 15px; color:var(--ts); font-size:16px; line-height:1.68; }
.prose p b, .prose li b{ color:var(--tp); font-weight:600; }
.prose ul{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:11px; }
.prose ul li{ position:relative; padding-left:22px; color:var(--ts); font-size:16px; line-height:1.6; }
.prose ul li::before{
  content:''; position:absolute; left:3px; top:9px; width:6px; height:6px; border-radius:2px;
  background:var(--coral); box-shadow:0 0 7px rgba(232,74,60,.6);
}
.prose a{
  color:var(--gold); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color var(--t-calm) var(--ease), text-decoration-color var(--t-calm) var(--ease);
}
.prose a:hover,
.prose a:focus-visible{ color:var(--tp); }
/* The tap highlight is off, so an inline link has to answer a touch itself. */
.prose a:active{ color:var(--coral); }

.faq{ display:grid; gap:14px; margin-top:8px; }
.faq details{
  border-radius:11px; overflow:hidden;
  background:linear-gradient(180deg,#16100D,#0E0A08);
  border:1px solid rgba(0,0,0,.8);
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.06), 0 3px 9px rgba(0,0,0,.4);
}
.faq summary{
  cursor:pointer; list-style:none; padding:19px 22px; display:flex; align-items:center; gap:14px;
  font:600 16px/1.35 var(--f-sans); color:var(--tp); min-height:44px;
  transition-property:background-color, transform;
  transition-duration:var(--t-calm);
  transition-timing-function:var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover,
.faq summary:focus-visible{ background:rgba(255,255,255,.028); }
/* The whole row is the switch, so the whole row takes the press. */
.faq summary:active{ transform:translateY(1px); transition-duration:var(--t-press); }
.faq summary:hover .led.on,
.faq details[open] summary .led.on{ filter:brightness(1.3); }
.faq summary::after{
  content:''; margin-left:auto; flex:none; width:9px; height:9px; border-right:2px solid var(--ts);
  border-bottom:2px solid var(--ts); transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-calm) var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.faq summary .led{ flex:none; }
.faq .body{ padding:0 22px 20px 22px; }
.faq .body p{ margin:0 0 12px; color:var(--ts); font-size:15px; line-height:1.65; }
.faq .body p:last-child{ margin-bottom:0; }
.faq .body b{ color:var(--tp); font-weight:600; }
.faq .body ol{ margin:0 0 12px; padding-left:20px; color:var(--ts); font-size:15px; line-height:1.7; }

.contact{ margin-top:clamp(34px, 4vw, 48px); padding:clamp(24px, 3vw, 34px); display:flex; flex-direction:column; gap:14px; }
.contact .h3{ margin:0; }
.contact p{ margin:0; color:var(--ts); font-size:15.5px; line-height:1.6; }
.contact .mail{
  display:inline-flex; align-items:center; gap:11px; align-self:flex-start; margin-top:4px;
  text-decoration:none; padding:12px 18px; border-radius:8px;
  background:var(--lcd); border:1px solid #000; position:relative;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.06);
  min-height:44px; font:600 15px/1 var(--f-mono); color:var(--gold); text-shadow:0 0 7px rgba(255,201,107,.5);
  word-break:break-word;
  transition-property:color, text-shadow, transform;
  transition-duration:var(--t-calm);
  transition-timing-function:var(--ease);
}
.contact .mail:hover,
.contact .mail:focus-visible{ color:var(--tp); text-shadow:0 0 8px rgba(249,241,232,.5); }
/* It is a recessed readout, so it presses in rather than down. */
.contact .mail:active{ transform:translateY(1px); transition-duration:var(--t-press); }

/* Question headings inside a summary keep the summary's own type. */
.faq summary .q{
  font:inherit; color:inherit; letter-spacing:normal; margin:0; flex:1;
}

/* ============================================================
   UTILITIES
   The handful of one-off spacings that used to be inline styles.
   ============================================================ */

.sect.tight{ padding-block:clamp(44px, 6vw, 72px); }
.sect.closing{ padding-block:0 var(--sect); }
.head-tight .h2{ margin-top:14px; }
.head-tight .h2 + .lede{ margin-top:16px; }
.note-aside{ margin-top:22px; font-size:14px; }
.doc-intro{ margin-bottom:34px; }
.silk.centred{ justify-content:center; }
.shelfkey{ margin-top:16px; font-size:12.5px; color:var(--ts); }

/* ============================================================
   FOOTER
   ============================================================ */

.foot{ border-top:1px solid var(--div); padding-block:clamp(34px, 4vw, 52px) clamp(40px, 5vw, 60px); }
.foot-in{ display:flex; gap:22px 40px; flex-wrap:wrap; align-items:flex-start; }
.foot .brandcol{ display:flex; flex-direction:column; gap:11px; max-width:34ch; }
.foot .brandcol .mark{ font-size:12px; }
.foot .brandcol p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ts); }
.foot nav{ margin-left:auto; display:flex; gap:28px; flex-wrap:wrap; }
.foot nav div{ display:flex; flex-direction:column; gap:2px; }
.foot nav b{ font:700 9.5px/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ts); }
.foot nav a{
  display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--ts); font-size:14px;
  transition-property:color, transform;
  transition-duration:var(--t-calm);
  transition-timing-function:var(--ease);
}
.foot nav a:hover,
.foot nav a:focus-visible{ color:var(--tp); }
.foot nav a:active{ transform:translateY(1px); transition-duration:var(--t-press); }
.foot .fine{ margin-top:28px; padding-top:20px; border-top:1px solid rgba(37,24,18,.7); font-size:12.5px; color:var(--ts); line-height:1.6; max-width:56ch; }
@media (max-width:640px){ .foot nav{ margin-left:0; width:100%; gap:26px 36px; } }

/* ============================================================
   SCROLL REVEAL
   ------------------------------------------------------------
   Deliberately almost nothing: 10px and a fade, once, then the element is
   unobserved and forgotten. The hero is not in the list, so the page never
   assembles itself in front of you.

   The whole thing is gated on html.rvl, which the inline script in the head
   adds only when motion is allowed and only when scripting is on. Without that
   class every rule here is inert and the page is simply visible, which is what
   a no-JS or reduced-motion visitor gets.

   The selector list below is mirrored in the reveal script at the foot of
   index.html. If one changes, change the other.
   ============================================================ */

.rvl .sect-head,
.rvl .rig-caption,
.rvl .beats > *,
.rvl .shelf > *,
.rvl .sleeveback > *,
.rvl .gains > *,
.rvl .kit > *,
.rvl .ctrl > *,
.rvl .strip,
.rvl .closer{
  opacity:0; transform:translateY(10px);
  transition-property:opacity, transform;
  transition-duration:var(--t-reveal);
  transition-timing-function:var(--ease);
}
.rvl .in{ opacity:1; transform:none; }
/* Anything already on screen when the page loads is simply there. */
.rvl .now{ transition:none; }

/* List-like groups sweep rather than arriving as a block. The shelf staggers by
   column, so each row reads left to right the way you would pull records out. */
.rvl .beats > *:nth-child(2),
.rvl .gains > *:nth-child(2),
.rvl .sleeveback > *:nth-child(2),
.rvl .kit > *:nth-child(2),
.rvl .ctrl > *:nth-child(2){ transition-delay:70ms; }
.rvl .beats > *:nth-child(3),
.rvl .gains > *:nth-child(3){ transition-delay:140ms; }
.rvl .gains > *:nth-child(4){ transition-delay:210ms; }
.rvl .shelf > *:nth-child(4n+2){ transition-delay:45ms; }
.rvl .shelf > *:nth-child(4n+3){ transition-delay:90ms; }
.rvl .shelf > *:nth-child(4n+4){ transition-delay:135ms; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  /* Nothing may stay hidden waiting for a stagger that will never play. */
  .rvl .in{ opacity:1; transform:none; }
}