/* Renata - homepage stylesheet */


/* 01  Fonts */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2-variations"),
       url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Departure Mono";
  src: url("../assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* 02  Tokens */

:root{
  /* Colour law */

  /* Material */
  --plate:#DEDCD6;
  --plate-hi:#EFEEEA;
  --plate-lo:#C9C6BF;

  /* Silkscreen */
  --ink:#16181A;
  --ink-2:#5C5F63;
  --rule:#B4B1A9;

  /* Display glass */
  --window:#0B0D0F;
  --window-edge:#2A2D31;
  --window-ink:#E7E9EA;
  --window-ink-2:#838A8F;

  /* Signal */
  --signal:#FF4A00;
  --signal-dim:#B83600;
  --signal-idle:rgba(255,74,0,.22);

  /* Edges */
  --edge-up:inset 0 1px 0 var(--plate-hi), inset 0 -1px 0 var(--plate-lo);
  --edge-down:inset 0 1px 0 rgba(0,0,0,.55), inset 0 -1px 0 var(--plate-hi);
  --edge-hair-hi:0 1px 0 var(--plate-hi);
  --edge-hair-lo:0 1px 0 var(--plate-lo);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 18%);

  /* Grain */
  --grain-tint:rgba(0,0,0,.018);
  --grain-angle:137deg;

  /* Type */
  --font-sans:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:"Departure Mono","Consolas",ui-monospace,monospace;

  /* Space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:176px;

  /* Panel padding */
  --pad-sm-t:clamp(64px,6.6vw,96px);  --pad-sm-b:clamp(48px,5vw,72px);
  --pad-md-t:clamp(96px,10vw,152px);  --pad-md-b:clamp(56px,5.4vw,80px);
  --pad-lg-t:clamp(136px,15vw,224px); --pad-lg-b:clamp(72px,7.4vw,112px);

  /* Chassis */
  --rail:72px;
  --rail-h:44px;
  --nav-h:64px;
  --max-w:1512px;
  --gutter:clamp(20px,3.2vw,56px);
  --col-gap:24px;
  --measure:68ch;           /* Hard body cap */
  --measure-deck:34ch;

  /* Corners */
  --radius:0;

  /* Motion */
  --dur-press:90ms; --dur-state:180ms; --dur-seat:420ms;
  --dur-sweep:800ms; --dur-latch:400ms; --dur-type:18ms;
  --ease-seat:cubic-bezier(.16,1,.30,1);
  --ease-sweep:cubic-bezier(.65,0,.35,1);
  --ease-latch:cubic-bezier(.90,0,.10,1);

  /* Z-index scale */
  --z-plate:0; --z-window:1; --z-rail:40; --z-nav:50; --z-contents:60; --z-lightbox:70;

  /* Derived tokens */

  /* Surfaces */
  --surface-plate:var(--plate);
  --surface-raised:var(--plate-hi);
  --surface-recess:var(--plate-lo);
  --surface-ink:var(--ink);
  --surface-glass:var(--window);
  --nav-bg:#EFEEEA;
  --nav-blur:none;
  --scrim:rgba(11,13,15,.86);          /* Lightbox backdrop */

  /* Borders */
  --bw-hair:1px;
  --bw-rule:2px;
  --bw-bezel:2px;                      /* Display-window bezel */
  --border-hair:var(--bw-hair) solid var(--rule);
  --border-ink:var(--bw-hair) solid var(--ink);
  --border-bezel:var(--bw-bezel) solid var(--ink);
  --border-glass:var(--bw-hair) solid var(--window-edge);

  /* Shadows */
  --shadow-raised:var(--edge-up);
  --shadow-recess:var(--edge-down);
  --shadow-hair-hi:var(--edge-hair-hi);
  --shadow-hair-lo:var(--edge-hair-lo);

  /* Z-index */
  --z-below:-1;
  --z-grain:30;
  --z-skip:80;

  /* Grain */
  --grain-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-size:120px 120px;
  --grain-op-plate:.02;                /* Multiply on plate grounds */
  --grain-op-ink:.035;                 /* Screen on ink grounds */

  /* Dark-panel radial wash */
  --wash-x:50%;
  --wash-y:0%;
  --wash:radial-gradient(120% 80% at var(--wash-x) var(--wash-y),
    rgba(255,255,255,.09) 0%,transparent 70%);

  /* Dot leader */
  --leader-dot:radial-gradient(circle at 1px 50%, var(--rule) 0 1px, transparent 1px);
  --leader-step:6px;

  /* Focus */
  --focus-w:2px;
  --focus-offset:3px;
  --focus-color:var(--signal-dim);

  /* Controls */
  --tap:44px;                          /* Minimum tap target */
  --btn-pad-x:var(--s5);
  --btn-pad-y:var(--s3);
  --key:40px;
  --field-h:56px;                      /* The input-jack slot */
  --led:4px;                           /* LED dot diameter */
  --port:28px;                         /* Output-jack ring diameter */
  --crosshair:8px;                     /* Registration mark */

  /* Motion */
  --dur-sheen:900ms;
  --stagger:40ms;
  --stagger-tight:24ms;                /* Contents-sheet rows */
  --stagger-latch:90ms;                /* Stat registers */
  --seat-travel:10px;

  /* Full-bleed */
  --bleed-w:calc(100vw - var(--rail));
}

@media (max-width:1440px){ :root{--max-w:1280px} }


/* 03  Reset */

*,*::before,*::after{box-sizing:border-box}

html{
  font-size:16px;
  -moz-text-size-adjust:none;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--s4));
  overflow-x:clip;
}

body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul,pre,fieldset,legend{
  margin:0;
  padding:0;
}

ul[role="list"],ol[role="list"]{list-style:none}

h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit;text-wrap:balance}

img,picture,video,canvas,svg,iframe{display:block;max-width:100%}
img,video{height:auto}
svg{fill:currentColor}

input,button,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;border-radius:var(--radius)}
table{border-collapse:collapse;border-spacing:0}
fieldset{border:0}
hr{border:0;border-top:var(--border-hair);margin:0}
:where(button,[type="button"],[type="submit"],summary,label[for]){cursor:pointer}

[id]{scroll-margin-top:calc(var(--nav-h) + var(--s4))}

svg[aria-hidden="true"],img[aria-hidden="true"],canvas[aria-hidden="true"]{pointer-events:none}
[inert]{pointer-events:none}


/* 04  Base elements */

html{background:var(--plate)}

body{
  margin-left:var(--rail);
  min-height:100vh;
  overflow-x:clip;
  isolation:isolate;
  background:var(--plate);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.6;
  font-feature-settings:"ss01" 1,"cv05" 1,"calt" 1;
  text-rendering:optimizeLegibility;
  hyphens:manual;
  hanging-punctuation:first;
}

::selection{background:var(--signal);color:var(--ink)}

/* Focus */
:focus:not(:focus-visible){outline:none}
:focus-visible{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:var(--focus-offset);
}
.recess :focus-visible,.window :focus-visible{outline-offset:calc(var(--focus-offset) * -1)}
.panel--ink,.panel--glass,.window,.footer,[data-ground="ink"]{--focus-color:var(--signal)}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* First body child */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:var(--z-skip);
  background:var(--ink);
  color:var(--plate-hi);
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:var(--s3) var(--s4);
  min-height:var(--tap);
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  border-radius:var(--radius);
}
.skip-link:focus{left:var(--s2);top:var(--s2)}

body.lightbox-open,body.sheet-open{overflow:hidden}


/* 05  Texture */

body::before,body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:var(--z-grain);
  pointer-events:none;
}
body::before{
  background-image:repeating-linear-gradient(
    var(--grain-angle),
    var(--grain-tint) 0 .5px,
    transparent .5px 2px);
}
body::after{
  background-image:var(--grain-tile);
  background-size:var(--grain-size);
  opacity:var(--grain-op-plate);
  mix-blend-mode:multiply;
}

.panel--ink::before,.panel--glass::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--grain-tile);
  background-size:var(--grain-size);
  opacity:var(--grain-op-ink);
  mix-blend-mode:screen;
}


/* 06  Typography scale */

/* Volume 1 */
.h1,.display,#journey h2,#waitlist h2{
  font-size:clamp(2.75rem,1.2rem + 6.6vw,6.5rem);
  font-weight:620; line-height:.93; letter-spacing:-.035em;
  font-variation-settings:"opsz" 32; text-wrap:balance;
}

/* Volume 2 */
h2{
  font-size:clamp(2rem,1.1rem + 3.8vw,3.5rem);
  font-weight:600; line-height:.96; letter-spacing:-.028em;
  font-variation-settings:"opsz" 32; text-wrap:balance;
}

/* Volume 3 */
.h2-quiet{
  font-size:clamp(1.375rem,1.05rem + 1.35vw,2rem);
  font-weight:560; line-height:1.08; letter-spacing:-.02em; text-wrap:balance;
}
h3{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:560;
  line-height:1.14;letter-spacing:-.015em}
h4{font-size:1rem;font-weight:560;line-height:1.25;letter-spacing:-.01em}

/* The missing tier */
.deck{
  font-size:clamp(1.125rem,.98rem + .62vw,1.5rem);
  font-weight:380; line-height:1.42; letter-spacing:-.008em;
  color:var(--ink-2); max-width:var(--measure-deck);
  margin-block:var(--s5) 0; text-wrap:pretty;
}

/* Body */
.body-copy{max-width:var(--measure);text-wrap:pretty}
.body-copy + .body-copy{margin-top:var(--s5)}

/* Sidenote */
.sidenote{
  font-family:var(--font-mono); font-size:.6875rem; line-height:1.5;
  letter-spacing:.12em; color:var(--ink-2);
  align-self:start; max-width:26ch;
  border-top:var(--border-hair); padding-top:var(--s3);
}

/* Silkscreen tiers */
.legend{font-family:var(--font-mono);font-size:.6875rem;line-height:1.45;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2)}
.legend-lg{font-family:var(--font-mono);font-size:.8125rem;line-height:1.4;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2)}
.designation{font-family:var(--font-mono);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2)}
/* Legacy alias */
.eyebrow{font-family:var(--font-mono);font-size:.6875rem;line-height:1.45;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);
  display:block;margin-bottom:var(--s4)}

/* Data */
.stat-num{
  font-family:var(--font-mono);
  font-size:clamp(2.5rem,1.4rem + 4.6vw,5rem);
  line-height:1; letter-spacing:-.02em; color:var(--window-ink);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"case" 1;
  display:block; min-width:5ch;      /* Reserved width */
}
.stat-num .suffix{font-size:.55em;vertical-align:.42em;color:var(--signal)}
.stat-num .suffix--unit{font-size:1em;vertical-align:baseline}

/* Numeric columns elsewhere */
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"case" 1}

/* The ink inlay */
.inlay{background-color:transparent;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-size:100% 1.16em;background-position:0 100%;
  color:var(--plate-hi);padding:0 .18em;
  letter-spacing:-.045em;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}

/* Ascender and descender */

.h1 .inlay,.display .inlay,#waitlist h2 .inlay{background-size:100% 1em}
.panel--ink .inlay{background-image:linear-gradient(var(--plate-hi),var(--plate-hi));
  color:var(--ink)}
.inlay--lead{margin-inline-start:-.18em}

/* Rag control */
.keep{display:inline-block}
@media (min-width:900px){ .ln{display:block} }      /* Authored line units */
@media (max-width:639.98px){ .ln{display:inline} }

/* Reversed grounds */
.panel--ink,.panel--glass{color:var(--window-ink)}
.panel--ink .deck,.panel--glass .deck,
.panel--ink .legend,.panel--ink .legend-lg,
.panel--glass .legend,.panel--glass .legend-lg,
.panel--ink .designation,.panel--glass .designation,
.panel--ink .eyebrow,.panel--glass .eyebrow,
.panel--ink .footnote,.panel--glass .footnote{color:var(--window-ink-2)}

/* Footnote */
.footnote{
  font-size:.8125rem; line-height:1.5; color:var(--ink-2);
  max-width:var(--measure); text-wrap:pretty;
}

/* Accessibility correction */

.panel--recess .deck,.panel--recess .legend,.panel--recess .legend-lg,
.panel--recess .designation,.panel--recess .footnote,.panel--recess .sidenote,
.panel--recess .eyebrow,.panel--recess .silk,
.plinth .deck,.plinth .legend,.plinth .footnote,.plinth .designation,
.recess .legend,.recess .legend-lg,.recess .designation,
.recess .footnote{color:var(--ink)}

.panel--ink .deck,.panel--glass .deck,
.panel--ink .body-copy,.panel--glass .body-copy,
.panel--ink .footnote,.panel--glass .footnote,
.panel--ink .confirm,.panel--ink .cta-confirm{color:var(--window-ink)}


/* 07  Layout */

/* Chassis */

.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:var(--z-rail);
  background:var(--plate-hi);box-shadow:1px 0 0 var(--plate-lo);
  display:flex;flex-direction:column}
.rail[data-ground="ink"]{background:var(--ink);box-shadow:1px 0 0 #000}
.rail canvas{width:var(--rail);flex:1 1 auto}
.rail,.rail *{transition:background-color var(--dur-state) var(--ease-seat),
  color var(--dur-state) var(--ease-seat)}

.nav{position:sticky;top:0;height:var(--nav-h);z-index:var(--z-nav);
  background:var(--nav-bg);-webkit-backdrop-filter:var(--nav-blur);
  backdrop-filter:var(--nav-blur);
  border:0}   /* No bottom hairline */

.container{max-width:var(--max-w);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:40px repeat(11,minmax(0,1fr));
  column-gap:var(--col-gap)}
.silk{grid-column:1;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);align-self:end}

/* Panels */

.panel{padding-block:var(--pad-md-t) var(--pad-md-b);background:var(--plate);
  position:relative}
.panel--sm{padding-block:var(--pad-sm-t) var(--pad-sm-b)}
.panel--lg{padding-block:var(--pad-lg-t) var(--pad-lg-b)}
.panel--raised{background:var(--plate);box-shadow:var(--edge-up)}
.panel--recess{background:var(--plate-lo);box-shadow:var(--edge-down)}
.panel--ink{background:var(--ink);background-image:var(--wash)}
.panel--glass{background:var(--window);background-image:var(--wash)}

.panel > *{position:relative;z-index:1}

/* Section rhythm */

.flow > * + *{margin-block-start:var(--flow,var(--s5))}
.flow-tight{--flow:var(--s3)}
.flow-loose{--flow:var(--s7)}
.stack-1{margin-block-start:var(--s1)}
.stack-2{margin-block-start:var(--s2)}
.stack-3{margin-block-start:var(--s3)}
.stack-4{margin-block-start:var(--s4)}
.stack-5{margin-block-start:var(--s5)}
.stack-6{margin-block-start:var(--s6)}
.stack-7{margin-block-start:var(--s7)}
.stack-8{margin-block-start:var(--s8)}

/* A panel head */
.panel-head{display:grid;gap:var(--s5);align-content:start}
.panel-head .deck{margin-block:0}

.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.row--tight{gap:var(--s2)}
.row--between{justify-content:space-between}

/* Full-bleed escape hatch */

.bleed{margin-inline:calc(var(--gutter) * -1)}
.bleed-grid{grid-column:1/-1;margin-inline:calc(var(--gutter) * -1)}
.bleed-full{
  grid-column:1/-1;
  width:auto;
  max-width:none;
  margin-inline:calc(-1 * (max(0px,(var(--bleed-w) - var(--max-w)) / 2) + var(--gutter)));
}

/* Column choreography */
.hero-copy     {grid-column:2/span 6}  .hero-index   {grid-column:9/span 4}
.stats         {grid-column:2/-1}
.listen-copy   {grid-column:2/span 5}  .listen-window{grid-column:8/span 5}
.track-rack    {grid-column:2/-1}
.gen-copy      {grid-column:2/span 4;grid-row:1}
.gen-sheet     {grid-column:2/span 4;grid-row:2}
.gen-window    {grid-column:7/span 6;grid-row:1/span 2}
.studio-window {grid-column:2/span 6}  .studio-copy  {grid-column:9/span 4}
.convert-wrap  {grid-column:2/-1}
.export-ports  {grid-column:2/-1}
/* Mirrored */
.ls-copy       {grid-column:7/span 6}
.compare-sheet {grid-column:2/-1}
.themes-sheet  {grid-column:2/-1}
.journey-spine {grid-column:1/span 2}  .journey-head {grid-column:3/span 8}
.cta-wrap      {grid-column:2/-1}  .cta-form     {grid-column:2/span 6}
.foot-a{grid-column:2/span 3} .foot-b{grid-column:6/span 4} .foot-c{grid-column:10/span 2}

/* Breakpoints */

@media (max-width:1079.98px){
  :root{--rail:0px}
  body{margin-left:0;padding-bottom:var(--rail-h)}
  .rail{left:0;right:0;top:auto;bottom:0;width:auto;height:var(--rail-h);
    flex-direction:row;box-shadow:0 -1px 0 var(--plate-lo)}
  .rail[data-ground="ink"]{box-shadow:0 -1px 0 #000}
  .rail canvas{width:auto;height:var(--rail-h);flex:1 1 auto}
  .nav{height:56px}
  .grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .silk{display:none}
  .hero-copy,.hero-index,.stats,.listen-copy,.listen-window,.track-rack,
  .gen-copy,.gen-window,.studio-window,.studio-copy,.convert-wrap,
  .export-ports,.ls-copy,.compare-sheet,.themes-sheet,.journey-head,
  .cta-wrap,.cta-form,.foot-a,.foot-b,.foot-c{grid-column:1/-1}
  .studio-window{order:-1}
  .journey-spine{display:none}
}

@media (max-width:767.98px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));--col-gap:16px}
  .spec-table,.spec-table tbody,.spec-table tr,.spec-table td{display:block}
  .compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .compare-table th[scope="row"]{position:sticky;left:0;z-index:1;
    background:var(--ink);color:var(--window-ink)}
}

@media (max-width:479.98px){ .ln{display:inline} }


/* 08  The seam */

.seam{height:3px;background:transparent;position:relative;
  border-top:1px solid var(--plate-lo);
  border-bottom:1px solid var(--plate-hi);
  z-index:2}
.seam::before,.seam::after{position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);line-height:1;
  background:var(--plate);padding-inline:var(--s3);white-space:nowrap}
/* Running-head knockout */
.seam::before{content:attr(data-designation);left:var(--gutter)}
.seam::after{content:attr(data-index);right:var(--gutter)}
.seam--ink{border-top-color:#000;border-bottom-color:var(--window-edge)}
.seam--ink::before,.seam--ink::after{background:var(--ink);color:var(--window-ink-2)}
.crosshair{display:block;width:var(--crosshair);height:var(--crosshair);
  color:var(--rule);flex:0 0 auto}


/* 09  The display window */

.window{background:var(--window);border:var(--border-bezel);border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--window-edge),var(--edge-down),var(--edge-hair-hi);
  position:relative;overflow:hidden;
  aspect-ratio:var(--ar,16/9)}
.window::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--glass-sheen)}
.window img,.window video{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--crop,50% 50%)}
.window .led{position:absolute;right:8px;bottom:8px;width:var(--led);height:var(--led);
  border-radius:50%;background:var(--signal-idle);z-index:3}
.window .led.is-lit{background:var(--signal)}
.window-caption{margin-top:var(--s3)}
/* Ambient */
.window::before{content:"";position:absolute;left:0;right:0;top:0;height:60%;
  z-index:2;pointer-events:none;background:var(--glass-sheen);
  transform:translateY(-110%)}
.window.is-swept::before{animation:sheen var(--dur-sheen) var(--ease-sweep) 1}
@keyframes sheen{
  from{transform:translateY(-110%)}
  to{transform:translateY(280%)}
}


/* 10  Components */

/* Surfaces */
.raised{background:var(--plate);box-shadow:var(--edge-up)}
.recess{background:var(--plate-lo);box-shadow:var(--edge-down)}
.plinth{background:var(--plate-lo);box-shadow:var(--edge-down);padding:var(--s5)}
.hair-top{border-top:var(--border-hair)}
.hair-bottom{border-bottom:var(--border-hair)}
.keyline{border:var(--border-ink)}

/* Links */
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:var(--rule);
  transition:text-decoration-color var(--dur-state) var(--ease-seat),
             text-decoration-thickness var(--dur-state) var(--ease-seat)}
a:hover{text-decoration-thickness:var(--bw-rule);text-decoration-color:var(--signal)}
.panel--ink a,.panel--glass a{text-decoration-color:var(--window-edge)}
.link-plain{text-decoration:none}
.link-plain:hover{text-decoration:underline;text-decoration-thickness:var(--bw-rule);
  text-decoration-color:var(--signal)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);min-width:var(--tap);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  font-family:var(--font-sans);font-size:.9375rem;font-weight:500;
  letter-spacing:-.01em;line-height:1;text-align:center;text-decoration:none;
  border:0;border-radius:var(--radius);
  background:var(--plate);color:var(--ink);
  box-shadow:var(--edge-up),inset 0 0 0 1px var(--rule);
  transition:transform var(--dur-press) var(--ease-seat),
             box-shadow var(--dur-press) var(--ease-seat),
             background-color var(--dur-state) var(--ease-seat),
             color var(--dur-state) var(--ease-seat);
}
.btn:hover{background:var(--plate-hi)}
.btn:active{transform:translateY(1px);
  box-shadow:var(--edge-down),inset 0 0 0 1px var(--rule)}

/* Primary */
.btn--primary{background:var(--ink);color:var(--plate-hi);box-shadow:var(--edge-hair-lo)}
.btn--primary:hover{background:#000}
.btn--primary:active{transform:translateY(1px);box-shadow:var(--edge-down)}

/* Ghost */
.btn--ghost{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink)}
.btn--ghost:hover{background:var(--plate-hi)}
.btn--ghost:active{transform:translateY(1px);
  box-shadow:inset 0 0 0 1px var(--ink),var(--edge-down)}
.panel--ink .btn--ghost,.panel--glass .btn--ghost{color:var(--window-ink);
  box-shadow:inset 0 0 0 1px var(--window-edge)}
.panel--ink .btn--ghost:hover,.panel--glass .btn--ghost:hover{background:rgba(255,255,255,.05)}

/* Signal */
.btn--signal{background:var(--signal);color:var(--ink);box-shadow:var(--edge-hair-lo)}
.btn--signal:hover{background:var(--signal-dim);color:var(--plate-hi)}
.btn--signal:active{transform:translateY(1px);background:var(--signal-dim);
  box-shadow:var(--edge-down)}

/* Disabled */
.btn[disabled],.btn[aria-disabled="true"],
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover,
.btn[disabled]:active,.btn[aria-disabled="true"]:active{
  background:var(--plate);color:var(--ink-2);
  box-shadow:var(--edge-down),inset 0 0 0 1px var(--rule);
  cursor:not-allowed;transform:none;
}

/* Keys and detents */
.key{width:var(--key);height:var(--key);min-width:var(--tap);min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--plate-hi);border:0;border-radius:var(--radius);
  box-shadow:var(--edge-hair-lo);
  transition:transform var(--dur-press) var(--ease-seat),
             background-color var(--dur-state) var(--ease-seat)}
.key:active{transform:translateY(1px);box-shadow:var(--edge-down)}
.key.is-live,.key[aria-pressed="true"]{background:var(--signal);color:var(--ink)}
.detent{position:relative}
.detent.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:var(--bw-rule);background:var(--signal)}

/* Lamps */
.led{width:var(--led);height:var(--led);border-radius:50%;
  background:var(--signal-idle);flex:0 0 auto}
.led.is-lit{background:var(--signal)}
.nav a[aria-current]::after,.led.is-lit,.detent.is-active,
.detent.is-active::after,.lamp{transition:none}

/* Ports */
.port{width:var(--port);height:var(--port);border-radius:50%;
  background:var(--plate-lo);box-shadow:var(--edge-down);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.port.is-live{background:var(--signal)}

/* Tags */
.tag,.format-tag{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:.6875rem;line-height:1;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink);
  border:var(--border-ink);border-radius:var(--radius);
  padding:var(--s2) var(--s3);background:transparent}
.panel--ink .tag,.panel--ink .format-tag,
.panel--glass .tag,.panel--glass .format-tag{color:var(--window-ink);
  border-color:var(--window-edge)}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Dot leaders */
.leader{display:flex;align-items:baseline;gap:var(--s3);width:100%}
.leader__fill{flex:1 1 auto;height:1em;
  background-image:var(--leader-dot);
  background-size:var(--leader-step) 100%;
  background-repeat:repeat-x;
  background-position:0 calc(50% + .1em)}
.leader__value{flex:0 0 auto}

/* The input jack */
.field{position:relative;display:flex;align-items:center;
  background:var(--plate-lo);box-shadow:var(--edge-down);
  border:var(--border-hair);border-radius:var(--radius);
  min-height:var(--field-h)}
.field input{flex:1 1 auto;min-height:var(--field-h);
  padding-inline:var(--s5);padding-block:0;
  background:transparent;border:0;border-radius:var(--radius);
  color:var(--ink);font-size:1rem}
.field input::placeholder{color:var(--ink);opacity:1}
.field input:focus{outline:none}
.field:focus-within{box-shadow:var(--edge-down),inset 0 0 0 2px var(--signal)}
.field .led{position:absolute;right:var(--s4)}

/* Status */
.confirm,.cta-confirm{
  display:block;
  font-size:clamp(1.125rem,.98rem + .62vw,1.5rem);
  font-weight:380;line-height:1.42;letter-spacing:-.008em;
  border-top:var(--bw-rule) solid var(--signal);
  padding-top:var(--s5);
  max-width:var(--measure-deck);
}
.panel--ink .confirm,.panel--ink .cta-confirm{color:var(--window-ink)}


/* 11  Motion utilities */

/* Entrance */
.seam-draw{transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-sweep) var(--ease-sweep)}
.seam-draw.is-seated{transform:scaleX(1)}

/* Seat */
.seat{transform:translateY(var(--seat-travel));
  transition:transform var(--dur-seat) var(--ease-seat)}
.seat.is-seated{transform:none}

/* Row / group entrances */
.stagger > .seat{transition-delay:calc(var(--i,0) * var(--stagger))}

/* Latch */
.latch{transition:transform var(--dur-latch) var(--ease-latch)}


/* Scrubbed */
.scrub-draw{stroke-dasharray:var(--len,1);stroke-dashoffset:calc(var(--len,1) * (1 - var(--p,0)))}


/* 12  Reduced motion */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
    animation-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  .seat,.seat.is-seated,.latch{transform:none!important}
  .seam-draw,.seam-draw.is-seated{transform:scaleX(1)!important}
  .btn:active,.btn--primary:active,.btn--ghost:active,
  .btn--signal:active,.key:active{transform:none!important}
  .window::before,.window.is-swept::before{animation:none!important;display:none}
  .scrub-draw{stroke-dashoffset:0!important}
}


/* 13  Print */

@media print{
  html,body{background:#fff;color:#000;margin-left:0;padding-bottom:0;
    overflow:visible}
  body::before,body::after{display:none}
  .rail,.nav,.skip-link{display:none!important}
  .panel{padding-block:var(--s6);background:#fff;break-inside:avoid;
    box-shadow:none}
  .panel--ink,.panel--glass{background:#fff;color:#000;background-image:none}
  .panel--ink::before,.panel--glass::before{display:none}
  .panel--ink .deck,.panel--glass .deck,
  .panel--ink .legend,.panel--glass .legend{color:#333}
  .inlay,.panel--ink .inlay{background:transparent;color:#000;
    text-decoration:underline}
  .window{border:1px solid #000;box-shadow:none;background:#fff}
  .window::before,.window::after{display:none}
  .stat-num{color:#000}
  .stat-num .suffix{color:#000}
  .seam{border-color:#999}
  a{text-decoration:underline;text-decoration-color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em}
  .seat,.seam-draw{transform:none!important}
}


/* 14  Forced colors */

@media (forced-colors:active){
  .panel--raised,.panel--recess,.raised,.recess,.plinth{border:1px solid CanvasText}
  .window{border:2px solid CanvasText;forced-color-adjust:none;background:Canvas}
  .window::before,.window::after{display:none}
  .btn,.key,.tag,.format-tag,.field{border:1px solid ButtonText}
  .btn--primary,.btn--signal,.key.is-live,.key[aria-pressed="true"]{
    background:Highlight;color:HighlightText;forced-color-adjust:none}
  :focus-visible{outline:2px solid Highlight;outline-offset:3px}
  .led,.port{forced-color-adjust:none;border:1px solid CanvasText}
  .led.is-lit,.port.is-live{background:Highlight}
  .detent.is-active::after{background:Highlight}
  .seam{border-top:1px solid CanvasText;border-bottom:0}
  body::before,body::after,
  .panel--ink::before,.panel--glass::before{display:none}
}


/* Section  Nav */

/* Nav */

.nav{
  --nav-tier-gap:var(--s7);
  --nav-item-gap:20px;
  /* The light model */
  box-shadow:inset 0 1px 0 var(--plate-hi);
}

.nav-inner{
  display:flex;
  align-items:stretch;
  gap:0;
  height:var(--nav-h);
}


/* The nameplate */

.wordmark{
  display:inline-flex;
  align-items:center;
  gap:var(--s3);
  min-height:var(--tap);
  flex:0 0 auto;
  padding-inline-end:var(--s5);
  text-decoration:none;
  color:var(--ink);
}
.nav-inner > .wordmark{
  border-inline-end:var(--bw-hair) solid var(--rule);
}
.wordmark__mark{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-block-start:1px;
  background:var(--ink);
  color:var(--plate-hi);
  font-size:11px;
  font-weight:600;
  letter-spacing:0;
  line-height:1;
  /* Stamped */
  box-shadow:0 1px 0 var(--plate-hi),1px 0 0 var(--plate-lo);
}
.wordmark__name{
  font-size:1.5rem;
  font-weight:620;
  letter-spacing:-.035em;
  line-height:1;
}

/* The accent letter */
/* The accent letter */
.wm-accent{color:var(--signal)}

/* The doubled monogram */
@media (min-width:1080px){
  .nav-inner > .wordmark .wordmark__mark,
  .contents .wordmark__mark{display:none}
}

.wordmark:hover .wordmark__mark{background:#000}


/* Link tiers */

.nav-links{
  display:flex;
  align-items:stretch;
  gap:var(--nav-tier-gap);
  height:100%;
  min-width:0;
  margin-inline-start:var(--s5);
  overflow:clip;
  overflow-clip-margin:6px;
}
.nav-group{
  display:flex;
  align-items:stretch;
  height:100%;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-group li{display:flex}

.nav-group a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:100%;
  min-height:var(--tap);
  min-width:var(--tap);
  padding-block:var(--s3);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--dur-state) var(--ease-seat);
}

/* Primary */
.nav-group--primary{gap:var(--nav-item-gap)}
.nav-group--primary a{
  font-family:var(--font-sans);
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--ink);
}

/* Secondary */
.nav-group--secondary{gap:var(--nav-item-gap)}
.nav-group--secondary a{
  font-family:var(--font-sans);
  font-size:.9375rem;
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--ink-2);
}
.nav-group--secondary a:hover{color:var(--ink)}

/* The lamp */
.nav-group a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--bw-rule);
  background:transparent;
  transition:background-color var(--dur-state) var(--ease-seat);
}
.nav-group a:hover::after{background:var(--rule)}
.nav-group a[aria-current]::after{background:var(--signal)}
.nav-group a[aria-current]{color:var(--ink)}

.nav-div{
  align-self:center;
  width:var(--bw-hair);
  height:24px;
  background:var(--rule);
  flex:0 0 auto;
}


/* Right cluster */

.nav-right{
  display:flex;
  align-items:center;
  gap:var(--s3);
  margin-inline-start:auto;
  padding-inline-start:var(--s5);
  flex:0 0 auto;
}


/* Now playing */

.nav-now{
  display:none;
  align-items:center;
  gap:var(--s3);
  padding-inline:var(--s3);
  min-height:32px;
  background:var(--plate-lo);
  box-shadow:var(--edge-down);
  max-width:292px;
}
.nav-now[hidden]{display:none}
.nav-now__scope{
  width:44px;
  height:16px;
  flex:0 0 auto;
}
.nav-now__title{
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:172px;
}
.nav-now__mute{
  display:inline-grid;
  place-items:center;
  width:var(--tap);
  height:var(--tap);
  flex:0 0 auto;
  color:var(--ink);
  background:none;
  transition:transform var(--dur-press) var(--ease-seat);
}
.nav-now__mute:active{transform:translateY(1px)}
.nav-now__slash{display:none}
.nav-now__mute[aria-pressed="true"] .nav-now__wave{display:none}
.nav-now__mute[aria-pressed="true"] .nav-now__slash{display:block}


/* Contents button */

.nav-contents{padding-inline:var(--s4)}
.nav-contents__glyph{flex:0 0 auto}


/* CTA */

.nav-cta{
  gap:0;
  background:var(--signal);
  color:var(--ink);
  box-shadow:var(--edge-hair-lo);
  padding-inline:var(--s4);
  white-space:nowrap;
}
.nav-cta:hover{background:var(--signal-dim);color:var(--plate-hi)}
.nav-cta:active{transform:translateY(1px);box-shadow:var(--edge-down)}
.nav-cta__short{display:none}


/* The contents sheet */

.contents{
  position:fixed;
  inset:0 0 0 var(--rail);
  z-index:var(--z-contents);
  background:var(--plate);
  overflow-y:auto;
  overscroll-behavior:contain;
  --contents-row:56px;
  --contents-label:1.25rem;
}
.contents[hidden]{display:none}

/* Scroll lock */
html.sheet-lock{overflow:hidden}

.contents__inner{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding-block:0 var(--s6);
}

.contents__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  height:var(--nav-h);
  flex:0 0 auto;
}
.wordmark--static{cursor:default;padding-inline-end:0}

.contents__close{padding-inline:var(--s4)}

.contents__legend{
  margin-block:var(--s6) var(--s3);
  padding-bottom:var(--s3);
  border-bottom:var(--border-hair);
  font-size:.6875rem;
  font-weight:400;
  line-height:1.45;
  letter-spacing:.16em;
}

.contents__list{
  list-style:none;
  margin:0;
  padding:0;
}

.c-row{border-bottom:var(--border-hair)}
.c-row a{
  position:relative;
  display:grid;
  grid-template-columns:3.5ch auto 1fr auto;
  align-items:center;
  gap:var(--s4);
  min-height:var(--contents-row);
  padding-inline:var(--s4);
  text-decoration:none;
  color:var(--ink);
  background:transparent;
  transition:background-color var(--dur-state) var(--ease-seat);
}
.c-row a::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--bw-rule);
  background:transparent;
}
.c-row a:hover,.c-row a:focus-visible{background:var(--plate-hi)}
.c-row a:hover::before,.c-row a:focus-visible::before{background:var(--signal)}
.c-row a[aria-current]::before{background:var(--signal)}

.c-row__n{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-2);
}
.c-row__label{
  font-family:var(--font-sans);
  font-size:var(--contents-label);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
  white-space:nowrap;
}
.c-row__leader{
  height:1em;
  background-image:var(--leader-dot);
  background-size:var(--leader-step) 100%;
  background-repeat:repeat-x;
  background-position:0 calc(50% + .1em);
}
.c-row__code{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-2);
  white-space:nowrap;
}

/* Specification stack */

.contents__spec{display:none}
.spec-lines{margin:0;padding:0}
.spec-line{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:var(--s3);
  padding-block:var(--s2);
  border-bottom:var(--border-hair);
}
.spec-line dt,.spec-line dd{
  margin:0;
  font-family:var(--font-mono);
  font-size:.6875rem;
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.14em;
  white-space:nowrap;
}
.spec-line dt{color:var(--ink-2)}
.spec-line dd{color:var(--ink)}
.spec-line__fill{
  height:1em;
  align-self:center;
  background-image:var(--leader-dot);
  background-size:var(--leader-step) 100%;
  background-repeat:repeat-x;
  background-position:0 calc(50% + .1em);
}

/* The conversion plate */

.contents__cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s5);
  margin-block-start:var(--s6);
  padding:var(--s4) var(--s5);
  min-height:80px;
  /* Width */
  width:fit-content;
  max-width:100%;
  justify-self:start;
  background:var(--signal);
  color:var(--ink);
  text-decoration:none;
  box-shadow:var(--edge-hair-lo);
  transition:background-color var(--dur-state) var(--ease-seat),
             color var(--dur-state) var(--ease-seat),
             transform var(--dur-press) var(--ease-seat);
}
@media (max-width:1079.98px){
  .contents__cta{width:auto;justify-self:stretch}
}

.contents__cta-text{display:block}
.contents__cta-label{
  display:block;
  font-size:1.375rem;
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.1;
}
.contents__cta-note{
  display:block;
  margin-block-start:var(--s2);
  font-family:var(--font-sans);
  font-size:.875rem;
  font-weight:400;
  line-height:1.45;
  letter-spacing:-.005em;
  text-transform:none;
  color:var(--ink);
}
.contents__cta-glyph{flex:0 0 auto}
.contents__cta:hover{background:var(--signal-dim);color:var(--plate-hi)}
.contents__cta:hover .contents__cta-note{color:var(--plate-hi)}
.contents__cta:active{transform:translateY(1px);box-shadow:var(--edge-down)}

.contents__foot{
  margin-block-start:var(--s5);
  padding-top:var(--s4);
  border-top:var(--border-hair);
}

.contents.is-open .c-row{
  animation:c-seat 180ms var(--ease-seat) both;
  animation-delay:calc(var(--i,0) * var(--stagger-tight));
}
@keyframes c-seat{
  from{transform:translateY(var(--seat-travel))}
  to{transform:none}
}


@media (min-width:1080px){
  .contents{--contents-row:90px;--contents-label:1.375rem}
  .contents__spec{display:block}
  .contents__inner{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    grid-template-rows:auto auto auto auto 1fr auto auto;
    column-gap:var(--s9);
  }
  .contents__head{grid-column:1/-1;grid-row:1}
  .contents__legend{grid-column:1;grid-row:2}
  .contents__list{grid-column:1;grid-row:3/span 2;align-self:start}
  .contents__legend--b{grid-column:2;grid-row:2;margin-block-start:var(--s6)}
  .contents__list--pages{grid-column:2;grid-row:3;align-self:start}
  .contents__spec{grid-column:2;grid-row:4;align-self:start}
  .contents__cta{grid-column:1/-1;grid-row:6}
  .contents__foot{grid-column:1/-1;grid-row:7;margin-block-start:var(--s5)}
  .contents__legend--c{margin-block-start:var(--s4)}
}


/* Breakpoints */

@media (min-width:1360px){
  .nav-now{display:flex}
  .nav-now[hidden]{display:none}
  .nav-contents{padding:0;width:var(--tap);min-width:var(--tap)}
  .nav-contents__label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0;
  }
  .nav.has-now .nav-group--secondary,
  .nav.has-now .nav-div{display:none}
}

@media (max-width:1359.98px){
  .nav-group--secondary,.nav-div{display:none}
  .nav-links{margin-inline-start:var(--s5)}
}

@media (max-width:1079.98px){
  .nav-links{display:none}
  .nav-now{display:none}
  #nav-contents-toggle{display:none}
  .nav-inner{height:56px}
  .nav-inner > .wordmark{border-inline-end:0;padding-inline-end:0}
  .contents__head{height:56px}
}

@media (max-width:639.98px){
  .nav-inner{gap:var(--s3)}
  .nav-right{gap:var(--s2);padding-inline-start:var(--s3)}
  .nav-cta{padding-inline:var(--s3)}
  .nav-cta__full{display:none}
  .nav-cta__short{display:inline}
  .nav-contents{padding-inline:var(--s3)}
  .nav-contents__label{position:absolute;width:1px;height:1px;padding:0;
    margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0}
  .contents__close-label{position:absolute;width:1px;height:1px;padding:0;
    margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0}
  .contents__close{padding-inline:var(--s3)}

  .contents{--contents-row:47px;--contents-label:1.25rem}
  .contents__foot{display:none}
  .contents__legend{margin-block-start:var(--s4)}
  .contents__legend--b{margin-block-start:var(--s4)}
  .contents__cta{margin-block-start:var(--s4);padding-inline:var(--s4);min-height:76px}
  .contents__cta-label{font-size:1.25rem}
  .c-row a{gap:var(--s3);padding-inline:var(--s3)}
}

@media (max-width:389.98px){
  .c-row__code{display:none}
  .c-row a{grid-template-columns:3.5ch auto 1fr}
  .contents{--contents-label:1.1875rem}
}

/* Very short viewports */
@media (max-height:520px){
  .contents{--contents-row:48px}
  .contents__legend{margin-block-start:var(--s5)}
}

@media (prefers-reduced-motion:reduce){
  .contents.is-open .c-row{animation:none}
}


/* Section  Hero */

/* Panel 01  Hero */

.hero{
  padding-block:clamp(56px,6.6vw,96px) var(--pad-md-b);
  background:var(--plate);
}

.hero-grid{
  align-items:start;
  row-gap:clamp(var(--s6),3.5vw,var(--s8));
}

.hero-silk{grid-row:1/span 2;align-self:end}


/* Seven columns */
.hero-head{grid-column:2/span 7;grid-row:1}

.hero-desig{display:grid;gap:var(--s4);justify-items:start;margin-bottom:var(--s7)}
.hero-desig__rule{display:block;width:64px;height:1px;background:var(--rule)}

/* The ladder */
.hero-h1{
  font-size:clamp(3.5rem,.2rem + 4vw,4.5rem);   /* Governs 1400px and up */
  letter-spacing:-.05em;
  line-height:1;
  margin-top:0;
}
.hero-h1 .w{display:inline-block}
.hero-h1 .ln{display:block}


.hero-copy{grid-row:2}
.hero-copy .deck{margin-block:0;max-width:32ch}
.hero-btns{margin-top:var(--s7);gap:var(--s3)}

/* The hero controls */
.hero-btns .btn{
  flex:0 0 auto;
  min-height:var(--close-jack-h,64px);
  padding-inline:var(--s6);
  font-size:1rem;
}
.hero-btns .btn--primary{
  box-shadow:var(--edge-hair-lo),
             inset 0 1px 0 rgba(239,238,234,.26),
             inset 0 -1px 0 #000;
}
.hero-btns .btn--primary:active{
  box-shadow:inset 0 1px 0 #000,
             inset 0 -1px 0 rgba(239,238,234,.26);
}
.hero-btns .btn--ghost{
  background:var(--plate);
  box-shadow:inset 0 0 0 1px var(--ink),
             inset 0 2px 0 -1px var(--plate-hi),
             inset 0 -2px 0 -1px var(--plate-lo);
}
.hero-btns .btn--ghost:hover{background:var(--plate-hi)}
.hero-btns .btn--ghost:active{
  box-shadow:inset 0 0 0 1px var(--ink),
             inset 0 2px 0 -1px rgba(0,0,0,.55),
             inset 0 -2px 0 -1px var(--plate-hi);
}
.hero-btns__glyph{
  margin-inline-end:var(--s2);
  font-size:.75em;line-height:1;
  transition:color var(--dur-state) var(--ease-seat);
}
.hero-btns .btn--primary:hover .hero-btns__glyph,
.hero-btns .btn--primary:focus-visible .hero-btns__glyph,
.hero-btns .btn--primary:active .hero-btns__glyph{color:var(--signal)}

@media (prefers-reduced-motion:reduce){
  .hero-btns .btn--primary:active,
  .hero-btns .btn--ghost:active{transform:none}
}


.hero-index{grid-row:1/span 2;margin:0;align-self:start}
.hero-index__plate{width:100%}
.hero-index__cap{margin-top:var(--s6);border-top:var(--border-hair);padding-top:var(--s4)}
.hero-index .footnote{max-width:42ch}

.chip-index{display:block;width:100%;height:auto;overflow:visible}
.chip-index__rule{stroke:var(--rule);stroke-width:1}

.chip__body{
  fill:var(--plate-hi);stroke:var(--ink);stroke-width:1.5;
  stroke-dasharray:var(--perim,520);stroke-dashoffset:0;
  animation:chip-draw var(--dur-sweep) var(--ease-sweep) calc(var(--i,0) * var(--stagger)) backwards;
  transition:stroke-width var(--dur-state) var(--ease-seat),
             stroke var(--dur-state) var(--ease-seat);
}
.chip__body--dip16{--perim:160}
.chip__body--dip28{--perim:290}
.chip__body--dip40{--perim:375}
.chip__body--dip48{--perim:430}
.chip__body--qfp{--perim:175}
@keyframes chip-draw{from{stroke-dashoffset:var(--perim,520)}}

.chip-index .chip:nth-of-type(1){--i:0}
.chip-index .chip:nth-of-type(2){--i:1}
.chip-index .chip:nth-of-type(3){--i:2}
.chip-index .chip:nth-of-type(4){--i:3}
.chip-index .chip:nth-of-type(5){--i:4}
.chip-index .chip:nth-of-type(6){--i:5}
.chip-index .chip:nth-of-type(7){--i:6}
.chip-index .chip:nth-of-type(8){--i:7}

.chip__pin{fill:none;stroke:var(--ink-2);stroke-width:1.25}
.chip__pin--fine{stroke-width:.7}
.chip__hit{fill:transparent}
.chip__pn{
  fill:var(--ink);font-family:var(--font-mono);font-size:15px;
  letter-spacing:.1em;text-anchor:start;
}
.chip__sub{
  fill:var(--ink-2);font-family:var(--font-mono);font-size:9px;
  letter-spacing:.14em;text-anchor:start;
}
/* The case code */
.chip__case{
  fill:var(--ink-2);font-family:var(--font-mono);font-size:9px;
  letter-spacing:.14em;text-anchor:end;
}
/* QFP pin-1 index dot */
.chip__dot{fill:var(--ink)}
.chip__led{fill:var(--signal)}

.chip{cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.chip:hover{text-decoration:none}

.chip__lead{
  fill:none;stroke:var(--ink);stroke-width:1;
  stroke-dasharray:var(--hero-lead-len);stroke-dashoffset:var(--hero-lead-len);
  transition:stroke-dashoffset var(--dur-state) var(--ease-seat);
}
.chip__cal-t{
  fill:var(--ink-2);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
}
.chip__cal-n{
  /* Ink */
  fill:var(--ink);font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;
}
.chip__cal{
  --hero-lead-len:620;
  opacity:0;
  transition:opacity var(--dur-state) var(--ease-seat);
  pointer-events:none;
}

.chip--default .chip__cal{opacity:1}
.chip--default .chip__lead{stroke-dashoffset:0}

.chip-index:hover .chip--default .chip__cal,
.chip-index:focus-within .chip--default .chip__cal{opacity:0}
.chip-index:hover .chip--default .chip__lead,
.chip-index:focus-within .chip--default .chip__lead{
  stroke-dashoffset:var(--hero-lead-len);
}
.chip-index .chip:hover .chip__cal,
.chip-index .chip:focus-visible .chip__cal{opacity:1}
.chip-index .chip:hover .chip__lead,
.chip-index .chip:focus-visible .chip__lead{stroke-dashoffset:0}
.chip-index .chip:hover .chip__body,
.chip-index .chip:focus-visible .chip__body{stroke-width:2}

.chip:focus-visible{outline:none}
.chip:focus-visible .chip__body{stroke:var(--signal-dim);stroke-width:2.5}

/* Responsive */

@media (max-width:1399.98px) and (min-width:1080px){
  .hero-head{grid-column:2/span 9}
  .hero-index{grid-row:2}
  .hero-h1{font-size:clamp(3.5rem,.21rem + 4.2vw,4.25rem)}
}

@media (max-width:1079.98px){
  .hero-head{grid-column:1/-1;grid-row:auto}
  .hero-copy,.hero-index{grid-row:auto}
  .hero-index__plate{max-width:440px}
  .hero-grid{row-gap:var(--s8)}
  .hero-h1{font-size:clamp(3.5rem,.2rem + 5.4vw,4.5rem)}
}

@media (max-width:767.98px){
  .hero{padding-block:var(--s7) var(--pad-md-b)}
  .hero-desig{margin-bottom:var(--s6);gap:var(--s3)}
  .hero-h1{font-size:clamp(2.25rem,-.14rem + 8.33vw,4rem)}
  .hero-btns{margin-top:var(--s6)}
  .hero-btns .btn{flex:1 1 auto}
  .hero-index__plate{max-width:none}
}

@media (max-width:479.98px){
  .hero-desig .designation{font-size:.625rem;letter-spacing:.1em}
  .hero-h1{font-size:clamp(1.5rem,-.23rem + 9.31vw,2.6rem)}
}

/* Motion gates */

@media (prefers-reduced-motion:reduce){
  .chip__body{animation:none;stroke-dashoffset:0}
}

.capture .hero{min-height:0}


/* Section  Stats */

/* Panel 02  Specification */

.stat-strip{
  /* Silkscreen inks */
  --stat-silk:#B7BCC0;
  --stat-silk-2:#9AA0A5;

  /* Slot padding */
  --stat-pad-s:var(--s5);
  --stat-pad-e:var(--s5);
  --stat-pad-t:var(--s6);
  --stat-pad-b:var(--s6);

  /* The register size */
  --stat-size:min(20.5cqw,5.5rem);

  --sig-seg-w:14px;
  --sig-seg-h:6px;
  --sig-seg-gap:4px;
}

/* Ground-level silkscreen override */
.stat-strip.panel--ink .legend{color:var(--stat-silk)}

/* The bay */

.stat-strip .stats{grid-column:2/-1}

/* The silkscreen margin column */
.stat-strip .stat-silk{color:var(--stat-silk-2);letter-spacing:.2em}

/* Panel head */

.stat-strip .stat-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s5);
  flex-wrap:wrap;
  padding-block-end:var(--s5);
}

.stat-strip .stat-desig{
  display:flex;
  align-items:center;
  gap:var(--s4);
  margin:0;
  font-family:var(--font-mono);
  font-size:.625rem;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stat-silk-2);
}
.stat-strip .stat-head__rule{
  display:block;
  width:64px;
  height:var(--bw-hair);
  background:var(--window-edge);
  flex:0 0 auto;
}

/* SIG */

.stat-strip .sig{
  display:flex;
  align-items:center;
  gap:var(--s3);
}
.stat-strip .sig-bar{
  display:flex;
  gap:var(--sig-seg-gap);
}
.stat-strip .sig-seg{
  display:block;
  width:var(--sig-seg-w);
  height:var(--sig-seg-h);
  background:var(--signal-idle);
  transition:none;
}
.stat-strip .sig-seg.is-lit{background:var(--signal)}
.stat-strip .sig-legend{
  font-family:var(--font-mono);
  font-size:.625rem;
  line-height:1;
  letter-spacing:.18em;
  color:var(--stat-silk-2);
}

/* The slot block */

.stat-strip .stat-bank{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none;
  margin:0;
  padding:0;
  border-block:var(--bw-hair) solid var(--window-edge);
}

.stat-strip .stat{
  container-type:inline-size;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  padding-block:var(--stat-pad-t) var(--stat-pad-b);
  padding-inline:var(--stat-pad-s) var(--stat-pad-e);
}
.stat-strip .stat:not(:nth-child(3n+1)){
  border-inline-start:var(--bw-hair) solid var(--window-edge)}
.stat-strip .stat:nth-child(n+4){
  border-block-start:var(--bw-hair) solid var(--window-edge)}
/* Symmetry of the bay */

/* Item reference */
.stat-strip .stat-id{
  display:block;
  font-family:var(--font-mono);
  font-size:.625rem;
  line-height:1;
  letter-spacing:.18em;
  text-align:end;
  color:var(--stat-silk-2);
}

/* The register */
.stat-strip .stat-fig{
  display:block;
  position:relative;
  margin-block-start:var(--s6);
  padding-block-end:var(--s4);
  border-block-end:var(--bw-hair) solid var(--window-edge);
  min-width:0;
}
.stat-strip .stat-num{
  display:inline-block;
  min-width:0;
  font-size:var(--stat-size);
  line-height:.86;
  letter-spacing:-.02em;
  color:var(--window-ink);
  white-space:nowrap;
}
.stat-strip .stat-num__val{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"case" 1}
.stat-strip .stat-num .suffix{
  font-size:.55em;
  vertical-align:.42em;
  margin-inline-start:.06em;
  color:var(--signal);
}
.stat-strip .stat-num .suffix--unit{
  font-size:1em;
  vertical-align:baseline;
  margin-inline-start:.04em;
}

.stat-strip .stat-label{
  display:block;
  margin-block-start:var(--s4);
  letter-spacing:.12em;
  color:var(--stat-silk);
  text-wrap:pretty;
}

/* Motion */

.stat-strip .stat-fig::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:calc(-1 * var(--bw-hair));
  height:var(--bw-rule);
  background:var(--signal);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur-latch) var(--ease-latch);
}
.stat-strip .stat.is-latching .stat-fig::after{transform:scaleX(1)}
.stat-strip .stat.is-latched .stat-fig::after{transform:scaleX(0);transform-origin:right center}

/* Breakpoints */

@media (max-width:1079.98px){
  .stat-strip .stats{grid-column:1/-1}
}

@media (max-width:1079.98px){
  .stat-strip .stat-bank{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-strip .stat:not(:nth-child(3n+1)){border-inline-start:0}
  .stat-strip .stat:nth-child(n+4){border-block-start:0}
  .stat-strip .stat:nth-child(3n+1){padding-inline-start:var(--stat-pad-s)}
  .stat-strip .stat:not(:nth-child(2n+1)){
    border-inline-start:var(--bw-hair) solid var(--window-edge)}
  .stat-strip .stat:nth-child(n+3){
    border-block-start:var(--bw-hair) solid var(--window-edge)}
  .stat-strip .stat:nth-child(2n+1){padding-inline-start:0}
}

@media (max-width:639.98px){
  .stat-strip{--stat-size:min(30cqw,3.25rem);--stat-pad-t:var(--s4);--stat-pad-b:var(--s4)}
  .stat-strip .stat-fig{margin-block-start:var(--s4);padding-block-end:var(--s3)}
  .stat-strip .stat-label{margin-block-start:var(--s3)}
  .stat-strip .stat-head{align-items:flex-start;flex-direction:column;gap:var(--s4)}
}

@media (max-width:359.98px){
  .stat-strip{--stat-pad-e:var(--s4)}
  .stat-strip .stat-desig{gap:var(--s3)}
  .stat-strip .stat-head__rule{width:40px}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .stat-strip .stat-fig::after{display:none}
}

/* Print */
@media print{
  .stat-strip .stat-bank,.stat-strip .stat,.stat-strip .stat-fig{border-color:#999}
  .stat-strip .stat-label,.stat-strip .stat-id,
  .stat-strip .stat-desig,.stat-strip .stat-num{color:#000}
  .stat-strip .sig{display:none}
  .stat-strip .stat-fig::after{display:none}
}

/* Forced colors */
@media (forced-colors:active){
  .stat-strip .stat-bank,.stat-strip .stat,.stat-strip .stat-fig,
  .stat-strip .stat-head__rule{border-color:CanvasText}
  .stat-strip .stat-head__rule{background:CanvasText;forced-color-adjust:none}
  .stat-strip .sig-seg{forced-color-adjust:none;border:1px solid CanvasText}
  .stat-strip .sig-seg.is-lit{background:Highlight}
  .stat-strip .stat-fig::after{background:Highlight}
}


/* Section  Listen */

/* Panel 03  MON-04 */

#listen{
  --mon-ar:374/150;
  --row-h:64px;
}

/* Seam */

.listen-seam .crosshair{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
.listen-seam .crosshair--l{left:var(--s2)}
.listen-seam .crosshair--r{right:var(--s2)}


/* Copy column */

.listen-desig{display:flex;align-items:center;gap:var(--s3)}
.listen-lamp{margin-block-start:1px}

.listen-copy{align-content:start}

/* The rack mark */
.rack-mark{
  grid-column:1;
  align-self:start;
  margin-block-start:calc(clamp(48px,5vw,72px) + var(--s3));
  padding-block-start:var(--s2);
  border-top:var(--border-hair);
  display:grid;
  gap:var(--s1);
  line-height:1.3;
  margin-bottom:0;
}


/* The monitor */

.listen-window{align-self:start}

.listen-mon{
  aspect-ratio:var(--mon-ar);
  --wash-x:20%;
  --wash-y:10%;
}

/* Crop */
.listen-mon .mon-video{
  position:absolute;
  top:0;
  left:0;
  width:342.246%;
  max-width:none;
  height:auto;
  object-fit:fill;
  transform:translate(-14.6094%,-13.8889%);
}

.listen-mon .mon-scope{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:none;
}
.listen-mon.is-live .mon-video{display:none}
.listen-mon.is-live .mon-scope{display:block}

.listen-window .window-caption{
  min-height:2.8em;             /* Reserved */
  display:block;
}


/* Transport */

.transport{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s4);
  margin-block-start:var(--s3);
  padding-block-start:var(--s2);
  border-top:var(--border-hair);
}
.transport .tc{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-2);
  line-height:1;
}
#listen.is-live .transport .tc{color:var(--ink)}
.transport .tc--e{color:var(--ink)}
.transport .tc--r{grid-column:3;justify-self:end;text-align:end}

.scrub{
  position:relative;
  grid-column:2;
  min-width:0;
  height:var(--tap);
  min-height:var(--tap);
  cursor:pointer;
  touch-action:none;
}
.scrub[aria-disabled="true"]{cursor:default}

/* The groove */
.scrub::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:5px;
  margin-top:-3px;
  background:var(--plate-lo);
  box-shadow:var(--edge-down);
}
.scrub-ticks{
  position:absolute;
  left:0;
  top:calc(50% - 7px);
  width:100%;
  height:14px;
  color:var(--rule);
  pointer-events:none;
}
.scrub-heard{
  position:absolute;
  left:0;
  top:50%;
  height:5px;
  margin-top:-3px;
  width:0%;
  background:var(--signal-idle);
  transition:width 220ms linear;
}
#listen.is-live .scrub-heard{background:var(--signal)}

/* The playhead notch */
.scrub-head{
  position:absolute;
  top:calc(50% - 10px);
  left:0;
  width:3px;
  height:20px;
  margin-left:-1px;
  background:var(--ink);
  transition:left 220ms linear;
  opacity:0;
}
#listen.is-live .scrub-head{opacity:1}


/* The track rack */

.track-rack{margin-block-start:clamp(48px,5vw,72px)}

.track-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:var(--border-hair);
  position:relative;
}

.track::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(var(--tap) + var(--s5) / 2);
  width:1px;
  background:var(--rule);
  pointer-events:none;
  z-index:1;
}

.track{
  position:relative;
  border-bottom:var(--border-hair);
  background:var(--plate);
  transition:background-color var(--dur-state) var(--ease-seat);
}
.track:hover{background:var(--plate-hi)}
.track.playing{background:var(--plate-hi)}

/* The powered slot */
.track.playing::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--bw-rule);
  background:var(--signal);
}

.track-btn{
  display:grid;
  grid-template-columns:var(--tap) 3.5ch auto minmax(var(--s7),1fr) auto auto;
  grid-template-areas:"key cat name leader chip time";
  align-items:center;
  gap:var(--s2) var(--s5);
  width:100%;
  min-height:var(--row-h);
  /* Zero right pad */
  padding:var(--s2) 0;
  text-align:left;
  color:inherit;
  border-radius:var(--radius);
}

.track-leader{
  grid-area:leader;
  height:1em;
  background-image:var(--leader-dot);
  background-size:var(--leader-step) 100%;
  background-repeat:repeat-x;
  background-position:0 calc(50% + .1em);
}

/* The square play key */
.track-key{grid-area:key}
.track-play{font-size:.75rem;line-height:1;letter-spacing:.02em}
.track.playing .track-key{background:var(--signal);color:var(--ink)}
.track-btn:hover .track-key{background:#000}
.track.playing .track-btn:hover .track-key{background:var(--signal-dim);color:var(--plate-hi)}
.track-btn:active .track-key{transform:translateY(1px)}

/* Mono law */
.track-cat{
  grid-area:cat;
  font-family:var(--font-mono);
  font-size:.6875rem;
  line-height:1.45;
  color:var(--ink-2);
  letter-spacing:.16em;
  white-space:nowrap;
}
.track.playing .track-cat{color:var(--ink)}

.track-name{
  grid-area:name;
  font-size:1.0625rem;
  font-weight:500;
  letter-spacing:-.012em;
  line-height:1.2;
  min-width:0;
  overflow-wrap:break-word;
  padding-right:var(--s2);
}

.track-chip{
  grid-area:chip;
  justify-self:end;
  color:var(--ink-2);
  white-space:nowrap;
  padding:2px var(--s2);
  border:var(--bw-hair) solid var(--rule);
  font-size:.625rem;
}
.track.playing .track-chip{color:var(--ink);border-color:var(--ink)}
.track-time{
  grid-area:time;
  font-family:var(--font-mono);
  font-size:.8125rem;
  letter-spacing:.12em;
  color:var(--ink-2);
  justify-self:end;
  white-space:nowrap;
}
.track.playing .track-time{color:var(--ink)}

.track-bar{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  pointer-events:none;
}
.track-fill{
  display:block;
  width:0%;
  height:100%;
  background:var(--signal);
  transition:width 220ms linear;
}

.listen-note{margin-block-start:var(--s6)}


/* Breakpoints */

@media (max-width:639.98px){
  #listen{--row-h:76px}
  .track-btn{
    grid-template-columns:var(--tap) auto auto minmax(0,1fr);
    grid-template-areas:
      "key  name name name"
      "key  cat  chip time";
    gap:var(--s3) var(--s4);
  }
  .track::after{left:calc(var(--tap) + var(--s4) / 2)}
  .track-key{align-self:start;margin-top:2px}
  .track-leader{display:none}
  .track-cat{justify-self:start}
  .track-chip{justify-self:start}
  .track-time{justify-self:end}
  .track-name{padding-right:0}
  .transport{gap:var(--s3)}
}

@media (max-width:1079.98px){
  .listen-window{margin-block-start:var(--s7)}
  .rack-mark{
    grid-column:1/-1;
    display:flex;
    gap:var(--s4);
    margin-block-start:var(--s7);
    padding-block-start:0;
    border-top:0;
  }
}


/* Reduced motion */

@media (prefers-reduced-motion:reduce){
  .track-fill,.scrub-heard,.scrub-head{transition:none!important}
  .track-btn:active .track-key{transform:none!important}
}


/* Section  Pillars */

/* Section group  Pillars */


/* Shared */

#generator .grid,
#studio .grid{ row-gap:var(--s9) }

#generator h2 .line,
#studio h2 .line{ display:block; overflow:hidden }
#generator h2 .line-inner,
#studio h2 .line-inner{ display:block }

/* The panel eyebrow */
.pillar-eyebrow{
  display:flex; align-items:center; gap:var(--s3);
  font-family:var(--font-sans); font-size:.8125rem; font-weight:560;
  letter-spacing:.01em; line-height:1.2; color:var(--ink-2);
}
.pillar-eyebrow__mark{
  display:block; flex:0 0 auto; width:var(--s3); height:var(--bw-rule);
  background:var(--ink);
}

/* The bed */
.pillar-bed{
  position:relative;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}

.pillar-figure{ margin:0 }

.pillar-caption{
  display:block;
  max-width:46ch;
  text-wrap:balance;
  border-top:var(--bw-hair) solid var(--rule);
  padding-top:var(--s3);
  margin-top:var(--s5);
}

/* Cropped product imagery */
.window .pillar-crop{
  position:absolute; top:0; left:0;
  height:auto; max-width:none;
  object-fit:fill;
}


/* Panel 04  GEN-SID */

/* Datasheet spec table */
.gen-spec{ margin-top:var(--s6); border-top:var(--bw-hair) solid var(--rule) }

.gen-spec__row{
  align-items:baseline;
  padding-block:var(--s3);
  border-bottom:var(--bw-hair) solid var(--rule);
}
.gen-spec__key,
.gen-spec__val{
  font-family:var(--font-mono); font-size:.75rem; line-height:1.35;
  text-transform:uppercase; letter-spacing:.12em;
}
.gen-spec__key{ color:var(--ink-2); flex:0 0 auto }
.gen-spec__val{ color:var(--ink); margin:0; text-align:right }

/* The datasheet */
.gen-sheet{ margin-block:0 }
.gen-sheet .gen-spec{ margin-top:0 }

/* The sidenote */
/* Mono law */
.gen-note{
  font-family:var(--font-sans);
  font-size:.8125rem;
  line-height:1.5;
  letter-spacing:normal;
  margin-top:var(--s7);
  margin-left:calc(-1 * (40px + var(--col-gap)));
  max-width:38ch;
  text-transform:none;
  text-wrap:pretty;
}

/* The window stack */
.gen-window{ align-self:start }
.gen-figure{ position:relative; margin-right:calc(-1 * var(--gutter)) }
.gen-bed{ overflow:visible }

.window.gen-shot .pillar-crop{
  width:180.2632%;
  transform:translate(-2.8467%, -25.0612%);
}

/* Seated on a seam */
.gen-detail{
  position:relative;
  left:auto;
  bottom:auto;
  width:100%;
  margin-top:var(--s6);
}
.window.gen-detail .pillar-crop{
  width:173.4177%;
  transform:translate(-1.8248%, -58.4924%);
}

.gen-figure .pillar-caption{ margin-top:var(--s5) }


/* Panel 05  STU-12 */

/* Mirrored */
/* Row placement only */
.studio-window{ grid-row:1 }
.studio-copy{ grid-row:1 / span 2; align-self:center }
.stu-figure{
  position:relative;
  margin-left:calc(-1 * (40px + var(--col-gap)));
}

.stu-window .pillar-crop,
.stu-window .stu-poster{
  position:absolute; top:0; left:0;
  height:auto; max-width:none; object-fit:fill;
  width:380.9524%;
  transform:translate(-14.5833%, -13.9241%);
}

.stu-window video{
  position:absolute; top:0; left:0;
  height:auto; max-width:none; object-fit:fill;
  width:380.9524%;
  transform:translate(-14.6094%, -13.75%);
}

/* The play key */
/* The light model */
.stu-play{
  position:absolute; left:50%; top:50%;
  margin:calc(var(--tap) / -2) 0 0 calc(var(--tap) / -2);
  width:var(--tap); height:var(--tap);
  z-index:5;
  box-shadow:var(--edge-hair-lo),
             inset 0 1px 0 rgba(239,238,234,.5),
             inset 0 -1px 0 #000,
             inset 0 0 0 1px var(--window-edge);
  transition:transform var(--dur-press) var(--ease-seat),
             background-color var(--dur-state) var(--ease-seat),
             box-shadow var(--dur-press) var(--ease-seat),
             left var(--dur-seat) var(--ease-seat),
             top var(--dur-seat) var(--ease-seat);
}
.stu-play:active{
  box-shadow:inset 0 1px 0 #000,
             inset 0 -1px 0 rgba(239,238,234,.5),
             inset 0 0 0 1px var(--window-edge);
}
.stu-icon{ margin-left:2px }                          /* Optical centring */
.stu-icon--pause{ display:none; margin-left:0 }
.stu-play:hover{ background:#000 }
.stu-play:active{ background:var(--signal); color:var(--ink) }

/* Powered */
.stu-window.is-live .stu-play{
  left:var(--s3); top:auto; bottom:var(--s3); margin:0;
  background:var(--signal); color:var(--ink);
}
.stu-window.is-live .stu-icon--play{ display:none }
.stu-window.is-live .stu-icon--pause{ display:block }

/* The chip rack */
.stu-rack{ grid-column:2 / span 6; grid-row:2 }

.stu-rack__head{
  font-family:var(--font-sans);
  color:var(--ink);
  padding-bottom:var(--s4);
  border-bottom:var(--bw-rule) solid var(--ink);
}
.stu-rack__list{ margin-top:var(--s2) }
.stu-rack__row{
  align-items:baseline;
  padding-block:var(--s4);
  border-bottom:var(--bw-hair) solid var(--rule);
}
.stu-rack__key,
.stu-rack__val{
  font-family:var(--font-mono); font-size:.75rem; line-height:1.35;
  text-transform:uppercase; letter-spacing:.12em;
}
.stu-rack__key{ color:var(--ink); flex:0 0 auto }
.stu-rack__val{ color:var(--ink-2); margin:0; text-align:right }

/* Feature list */
.stu-features{
  list-style:none;
  border-top:var(--bw-hair) solid var(--rule);
}
.stu-features li{
  padding-block:var(--s3);
  border-bottom:var(--bw-hair) solid var(--rule);
  font-size:.9375rem; font-weight:450; color:var(--ink);
}


/* Seam ends */

.pillar-seam .crosshair{
  position:absolute; top:50%;
  transform:translateY(-50%);
  color:var(--rule);
}
.pillar-seam .crosshair--start{ left:calc(var(--gutter) - var(--s3) - var(--crosshair)) }
.pillar-seam .crosshair--end{ right:calc(var(--gutter) - var(--s3) - var(--crosshair)) }
@media (max-width:520px){
  .pillar-seam .crosshair{ display:none }
}


/* Breakpoints */

@media (max-width:1079.98px){
  #generator .grid,
  #studio .grid{ row-gap:var(--s8) }
  .studio-window,
  .studio-copy,
  .stu-rack{ grid-row:auto }
  .stu-rack{ grid-column:1 / -1 }
  .gen-sheet,
  .gen-copy,
  .gen-window{ grid-row:auto }
  .gen-sheet{ margin-top:0; margin-bottom:0 }
  .gen-note{ margin-left:0 }
  .gen-window,
  .studio-copy{ align-self:stretch }
  .gen-figure{ margin-right:0 }
  .stu-figure{ margin-left:0 }
  .gen-detail{ left:auto; width:100% }
  .gen-figure,
  .stu-figure{ max-width:720px }
  .studio-copy .stu-features{ max-width:520px }
}

@media (max-width:767.98px){
  .gen-detail{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    margin-top:var(--s4);
    aspect-ratio:790/367;
    box-shadow:inset 0 0 0 1px var(--window-edge), var(--edge-down), var(--edge-hair-hi);
  }
  /* Per-breakpoint art direction */
  .window.gen-shot{ aspect-ratio:610/249 }
  .window.gen-shot .pillar-crop{
    width:224.5902%;
    transform:translate(-2.1898%, -30.3475%);
  }
  .stu-window .pillar-crop,
  .stu-window .stu-poster{
    width:380.9524%;
    transform:translate(-14.5833%, -13.9241%);
  }
  .gen-figure .pillar-caption{ margin-top:var(--s5) }
  .gen-spec__row,
  .stu-rack__row{ flex-wrap:wrap; row-gap:var(--s1) }
  .gen-spec__val,
  .stu-rack__val{ text-align:left }
  .gen-spec__row .leader__fill,
  .stu-rack__row .leader__fill{ min-width:var(--s6) }
}

@media (max-width:479.98px){
  .gen-spec__key,
  .gen-spec__val,
  .stu-rack__key,
  .stu-rack__val{ letter-spacing:.1em }
}


/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .stu-play,
  .stu-play:active{ transform:none !important }
}


/* Forced colors */
@media (forced-colors:active){
  .pillar-bed{ border:1px solid CanvasText }
  .pillar-eyebrow__mark{ background:CanvasText }
  .stu-play{ border:1px solid ButtonText }
  .stu-play.is-live{ background:Highlight; color:HighlightText; forced-color-adjust:none }
}


/* Print */
@media print{
  .gen-detail{ position:relative; left:auto; bottom:auto; width:100%;
    margin-top:var(--s4); box-shadow:none }
  .stu-play{ display:none }
  .pillar-bed{ background:#fff; box-shadow:none; border:1px solid #000 }
}


/* Section  Convert */

/* Panel 06  CNV-ON */

#convert,#export{
  --blk-gap:calc(var(--s6) + var(--s2));
  --blk-gap-lg:var(--s8);
}


/* Panel 06  CNV-ON */

#convert .convert-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,380px);
  /* The diagram leads */
  grid-template-areas:
    "diag diag"
    "head note";
  column-gap:var(--s7);
  row-gap:var(--s7);
  align-items:start;
}

#convert .cnv-head{grid-area:head;display:grid;gap:var(--blk-gap);align-content:start}
#convert .cnv-deck{margin-block:0;max-width:46ch}
#convert .cnv-body{max-width:52ch}

#convert .cnv-onward-wrap{margin:0}
#convert .cnv-onward{gap:var(--s3);font-weight:500}
#convert .cnv-arrow{width:14px;height:14px;flex:0 0 auto}


#convert .cnv-diagram{grid-area:diag;margin:0;display:flex;flex-direction:column}

#convert .cnv-screen{
  aspect-ratio:auto;
  display:flex;flex-direction:column;
  padding-block:var(--s2);
}

#convert .lane{padding:var(--s4) var(--s5)}
#convert .lane + .lane{border-top:1px solid var(--window-edge)}
#convert .lane.lane--fork{padding-block:0;border-top:0}
#convert .lane--fork + .lane{border-top:0}

/* Two real columns */
#convert .lane-head{
  display:grid;
  grid-template-columns:var(--lane-key-w,7rem) minmax(0,1fr);
  align-items:baseline;
  gap:var(--s2) var(--s4);
  margin-bottom:var(--s3);
}
#convert .lane-key{
  font-family:var(--font-mono);font-size:.6875rem;line-height:1.45;
  text-transform:uppercase;letter-spacing:.16em;color:var(--window-ink-2);
  white-space:nowrap;
}
#convert .lane-name{font-size:.875rem;line-height:1.3;color:var(--window-ink);
  letter-spacing:-.005em}

#convert .lane-plot{display:block}
#convert .lane-plot svg{display:block;width:100%;height:64px}
#convert .lane--fork .lane-plot svg{height:40px}

#convert .plot-grid{color:var(--window-edge)}   /* Hairline only */
#convert .bars--src{color:var(--window-ink-2)}
#convert .bars--midi{color:var(--window-ink)}
#convert .bars--chip{color:var(--signal)}      /* Fill on glass */
#convert .fork,#convert .fork-node{color:var(--window-ink-2)}

/* Scrubbed geometry */
#convert .fork .scrub-draw{--len:9999;--p:1}

#convert .cnv-screen .led{right:10px;bottom:10px}

#convert .cnv-fig{
  margin-top:var(--s4);
  display:block;
}
#convert .cnv-fig-no{display:block}
#convert .cnv-fig-txt{display:block;margin-top:var(--s2);
  font-size:.8125rem;line-height:1.5;text-wrap:pretty;
  color:var(--ink);max-width:52ch}

/* The honesty block */
/* An ink keyline */
#convert .cnv-honesty{
  grid-area:note;
  background:transparent;
  box-shadow:inset 0 0 0 var(--bw-hair) var(--ink);
  padding:var(--s6);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:var(--s4);
  align-items:baseline;
}
#convert .cnv-honesty-lead{
  font-size:clamp(1.125rem,.98rem + .62vw,1.5rem);
  font-weight:560;line-height:1.15;letter-spacing:-.02em;
  color:var(--ink);
}
#convert .cnv-honesty-body{
  font-size:.875rem;line-height:1.55;color:var(--ink);
  max-width:62ch;text-wrap:pretty;
}


/* Panel 07  OUT-08 */

#export .export-ports{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  grid-template-areas:
    "head fan"
    "rack rack"
    "cap  cap";
  column-gap:var(--s7);
  row-gap:var(--s8);
  align-items:start;
}
#export .exp-head{grid-area:head;display:grid;gap:var(--blk-gap-lg);
  align-content:start;max-width:52ch}
#export .exp-head .deck{margin-block:0;max-width:44ch}

#export .exp-fig{grid-area:fan;margin:0;align-self:start;justify-self:end;
  width:100%;max-width:300px}
#export .exp-fan{display:block;width:100%;height:auto;color:var(--ink)}
#export .fan-in,#export .fan-chip,#export .fan-term{color:var(--ink-2)}
#export .fan-bracket{color:var(--rule)}
#export .fan-hub-t{fill:var(--ink);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em}
#export .exp-fig-cap{margin-top:var(--s3);text-align:right;text-wrap:balance}

#export .fan-line{--len:9999;--p:1}
#export .exp-fan.is-armed .fan-line{--p:0}
#export .exp-fan.is-armed.is-seated .fan-line{
  --p:1;
  transition:stroke-dashoffset var(--dur-sweep) var(--ease-sweep);
  transition-delay:calc(min(var(--i,0),3) * var(--stagger));
}
#export .fan-chip .fan-line:nth-child(1){--i:0}
#export .fan-chip .fan-line:nth-child(2){--i:1}
#export .fan-chip .fan-line:nth-child(3){--i:2}
#export .fan-chip .fan-line:nth-child(4){--i:3}
#export .fan-chip .fan-line:nth-child(5){--i:3}
#export .fan-chip .fan-line:nth-child(6){--i:3}
#export .fan-chip .fan-line:nth-child(7){--i:3}

#export .exp-rack{grid-area:rack;display:grid;row-gap:0}

/* Bank brackets */
#export .exp-brackets{display:grid;grid-template-columns:1fr 7fr;
  margin-bottom:var(--s5)}
#export .exp-subbracket{display:grid;grid-template-columns:repeat(8,1fr);
  margin-top:var(--s5)}
#export .exp-bracket--drv{grid-column:5/-1}

#export .exp-bracket{
  position:relative;height:14px;
  border:1px solid var(--rule);border-bottom:0;
}
#export .exp-bracket .legend{
  position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  background:var(--plate);padding-inline:var(--s3);
  line-height:1;white-space:nowrap;
}
#export .exp-bracket--drv{border:1px solid var(--rule);border-top:0}
#export .exp-bracket--drv .legend{top:auto;bottom:0;transform:translate(-50%,50%)}

/* The eight ports */
#export .exp-ports{
  display:grid;grid-template-columns:repeat(8,1fr);
  gap:0;margin:0;padding:0;list-style:none;
}
/* Stagger index */
#export .exp-ports > li:nth-child(1){--i:0}
#export .exp-ports > li:nth-child(2){--i:1}
#export .exp-ports > li:nth-child(3){--i:2}
#export .exp-ports > li:nth-child(4){--i:3}
#export .exp-ports > li:nth-child(5){--i:4}
#export .exp-ports > li:nth-child(6){--i:5}
#export .exp-ports > li:nth-child(7){--i:6}
#export .exp-ports > li:nth-child(8){--i:7}

#export .port-cell{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s3);
  padding:var(--s5) var(--s3) var(--s4);
  text-align:center;
  min-height:var(--tap);
}
#export .port-cell + .port-cell::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--rule);transform-origin:top center;
}
#export .exp-ports > li:nth-child(2)::before{width:var(--bw-rule)}

/* The three classes */
#export .port-cell--hub .port{
  background:var(--ink);color:var(--plate-hi);
  box-shadow:var(--edge-hair-lo);
}
#export .port-cell--data .port{
  background:transparent;color:var(--ink);
  box-shadow:none;
}
#export .port-cell--drv .port{
  background:var(--plate-lo);color:var(--ink);
  box-shadow:var(--edge-down),inset 0 0 0 var(--bw-rule) var(--ink);
}

#export .port-glyph{width:22px;height:22px;color:inherit}

#export .port-ext{
  font-family:var(--font-mono);font-size:.9375rem;line-height:1;
  letter-spacing:.1em;color:var(--ink);
}
#export .port-ext .dot{color:var(--ink-2)}

#export .port-leader{
  display:block;width:100%;height:5px;
  background-image:var(--leader-dot);
  background-size:var(--leader-step) 100%;
  background-repeat:repeat-x;
  background-position:0 50%;
}
#export .port-gloss{font-size:.8125rem;line-height:1.3;color:var(--ink);
  letter-spacing:-.005em;text-wrap:balance}
#export .port-class{margin-top:var(--s1)}
#export .port-cell--drv .port-class{color:var(--ink)}

#export .exp-caption{
  grid-area:cap;
  margin-top:calc(var(--s3) - var(--s8));
  margin-left:0;
  max-width:none;color:var(--ink);font-size:.875rem;
}
#export .exp-more{display:flex;align-items:center;
  width:max-content;max-width:100%;min-height:var(--tap);margin-top:var(--s2);
  color:var(--ink);white-space:nowrap}

/* Port stagger */
#export .exp-rack.is-armed .port-cell::before{transform:scaleY(0)}
#export .exp-rack.is-armed.is-seated .port-cell::before{
  transform:scaleY(1);
  transition:transform var(--dur-seat) var(--ease-seat);
  transition-delay:calc(min(var(--i,0),3) * var(--stagger));
}


/* Breakpoints */

@media (max-width:1079.98px){
  #convert .convert-wrap{
    grid-template-areas:"head" "diag" "note";
  }
  #convert .cnv-honesty{grid-template-columns:minmax(0,1fr);row-gap:var(--s3)}
  #convert .lane-plot svg{height:56px}

  #export .export-ports{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "fan" "rack" "cap";
    row-gap:var(--s7);
  }
  #export .exp-head{gap:var(--s7)}
  #export .exp-fig{justify-self:start;max-width:260px}
  #export .exp-fig-cap{text-align:left}

  #export .exp-brackets,#export .exp-subbracket{display:none}
  #export .exp-caption{margin-left:0;margin-top:0;max-width:70ch}
  #export .exp-ports{grid-template-columns:repeat(4,1fr);gap:0}
  #export .port-cell{border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
  #export .port-cell:nth-child(4n+2){border-left:0}
  #export .port-cell:nth-last-child(-n+4){border-bottom:1px solid var(--rule)}
  #export .port-cell + .port-cell::before{display:none}
  #export .port-cell--hub{
    grid-column:1/-1;border-left:0;border-top:0;
    flex-direction:row;align-items:center;text-align:left;
    gap:var(--s4);padding-inline:var(--s4);
  }
  #export .port-cell--hub .port-leader{flex:1 1 auto;width:auto}
  #export .port-cell--hub .port-class{margin-top:0}
}

@media (max-width:767.98px){
  #convert .convert-wrap{row-gap:var(--s7)}
  #convert .cnv-honesty{padding:var(--s5)}
  #convert .lane{padding:var(--s3) var(--s4)}
  #convert .lane-head{gap:var(--s1) var(--s3);margin-bottom:var(--s2)}

  #export .exp-ports{grid-template-columns:minmax(0,1fr)}
  #export .port-cell{
    grid-column:1/-1;
    flex-direction:row;align-items:center;text-align:left;
    gap:var(--s4);padding:var(--s4);
    border-left:0;border-top:1px solid var(--rule);border-bottom:0;
  }
  #export .port-cell:nth-last-child(-n+4){border-bottom:0}
  #export .port-cell:last-child{border-bottom:1px solid var(--rule)}
  #export .port-cell--hub{border-top:1px solid var(--rule);padding:var(--s4)}
  #export .port-ext{flex:0 0 auto;min-width:5ch;text-align:left}
  #export .port-leader{flex:1 1 auto;width:auto}
  #export .port-gloss{flex:0 0 auto;text-align:right}
  #export .port-class{flex:0 0 auto;margin-top:0;min-width:8ch;text-align:right}
}

@media (max-width:479.98px){
  #convert .lane-plot svg{height:48px}
  #export .port-gloss{display:none}
  #export .port-class{min-width:0}
}


/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #convert .scrub-draw{--p:1!important;stroke-dashoffset:0!important}
  #export .exp-fan.is-armed .fan-line,
  #export .exp-fan.is-armed.is-seated .fan-line{--p:1!important;
    stroke-dashoffset:0!important}
  #export .exp-rack.is-armed .port-cell::before,
  #export .exp-rack.is-armed.is-seated .port-cell::before{transform:none!important}
}


/* Print */
@media print{
  #convert .cnv-honesty{background:transparent;box-shadow:none;
    border:1px solid #000;padding:var(--s4)}
  #convert .cnv-honesty-lead,#convert .cnv-honesty-body{color:#000}
  #convert .cnv-screen{background:#fff}
  #convert .lane-key,#convert .lane-name,
  #convert .lane + .lane{border-top-color:#999}
  #convert .bars--src,#convert .bars--midi,#convert .fork,
  #convert .fork-node{color:#000}
  #export .exp-fan{color:#000}
}


/* Forced colors */
@media (forced-colors:active){
  #convert .cnv-honesty{border:1px solid CanvasText}
  #convert .lane + .lane{border-top-color:CanvasText}
  #export .port-cell + .port-cell::before{background:CanvasText}
  #export .port-cell{border-color:CanvasText}
  #export .exp-bracket{border-color:CanvasText}
  #export .port-leader{background-image:none;border-top:1px dotted CanvasText;height:1px}
}


/* Section  Showcase */

/* Panel 08 */


/* Panel 08  VIS-15K */

.ls{
  --wash-x:50%;
  --wash-y:0%;
  --ls-ground-op:.72;         /* The treatment layer */
  overflow:hidden;
  /* Re-proportioned */
  padding-block:var(--pad-sm-t) var(--pad-sm-b);
}

.ls .silk{color:var(--window-ink-2);align-self:center}

.ls-ground{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.ls-ground img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 46%;
  opacity:var(--ls-ground-op);
  filter:brightness(.42) contrast(1.55) saturate(1.1);
}
/* A flat ink veil */
.ls-ground::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ink);
  opacity:.28;
}

.ls-copy{align-self:center}

/* The scrim block */
.ls-scrim{
  background:var(--window);
  border:var(--border-bezel);
  box-shadow:inset 0 0 0 1px var(--window-edge),var(--edge-down);
  padding:clamp(32px,4vw,60px) clamp(24px,3vw,48px);
  display:grid;
  gap:var(--s7);
  align-content:start;
  max-width:44rem;
}
.ls-scrim .designation{color:var(--window-ink-2)}
.ls-scrim .deck{color:var(--window-ink);max-width:32ch}

.ls-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s4) var(--s5);
}
/* The signal budget */
.ls-play{
  background:var(--ink);
  color:var(--window-ink);
  box-shadow:inset 0 0 0 1px var(--window-edge);
}
.ls-play:hover{background:#202428}
.ls-play:active{box-shadow:inset 0 0 0 1px var(--window-edge),var(--edge-down)}
.ls-tri{flex:0 0 auto;fill:var(--signal)}
@media (forced-colors:active){
  .ls-play{background:Highlight;color:HighlightText;forced-color-adjust:none;
    box-shadow:none}
  .ls-tri{fill:HighlightText;forced-color-adjust:none}
}
.ls-meta{
  color:var(--window-ink-2);
  border-left:1px solid var(--window-edge);
  padding-left:var(--s4);
}
/* Wrap guard */
@media (max-width:767.98px){
  .ls-meta{border-left:0;padding-left:0}
}
.ls-meta[data-state="loading"]{color:var(--signal)}

/* The gallery */
.ls-gallery{
  grid-column:2/span 4;
  grid-row:1;
  align-self:center;
}
.ls-fig{margin:0}
.ls-window{
  --ar:1/1;
  border-color:var(--plate-lo);
  box-shadow:inset 0 0 0 1px var(--window-edge),var(--edge-down);
}
.ls .window-caption{color:var(--window-ink)}


/* Panel 10  THM-09 */

.themes{--thm-gap:var(--s4)}

.thm-head{grid-column:2/span 8}
.thm-head .deck{max-width:38ch}

.themes-sheet{margin-top:var(--s8)}

/* The crop engine */
.thm-shot{
  --cx:0;
  --cw:1350;
  --ch:372;
  --top:var(--cy);
  position:relative;
  overflow:hidden;
  display:block;
  aspect-ratio:var(--cw)/var(--ch);
}
.thm-shot img{
  position:absolute;
  top:0;
  left:0;
  width:calc(135000% / var(--cw));
  max-width:none;
  height:auto;
  object-fit:fill;
  transform:translate(calc(-1% * var(--cx) / 13.5),calc(-1% * var(--top) / 20.55));
}

/* Per-theme band top */
/* Faceplate */
[data-thm="faceplate"] {--cy:392}
[data-thm="modern"] {--cy:404}
[data-thm="atari"]  {--cy:400}
[data-thm="c64"]    {--cy:370}
[data-thm="amiga"]  {--cy:442}
[data-thm="zx"]     {--cy:392}
[data-thm="sega"]   {--cy:440}
[data-thm="nes"]    {--cy:465}
[data-thm="gameboy"]{--cy:470}

/* The stage */
.thm-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.thm-stage-fig{margin:0;min-width:0;max-width:64rem}
.thm-stage-fig .window-caption{
  display:block;
  border-top:var(--bw-hair) solid var(--rule);
  padding-top:var(--s3);
  margin-top:var(--s4);
}
.thm-stage .window{width:100%}

/* The register header */
.thm-spec{
  grid-column:10/span 2;
  grid-row:1;
  align-self:end;
  display:grid;
  gap:var(--s3);
  border-top:var(--border-hair);
  padding-top:var(--s4);
}
.thm-spec .leader{gap:var(--s2)}
.thm-spec dt{flex:0 0 auto}
.thm-spec dd{
  margin:0;
  font-family:var(--font-mono);
  font-size:.8125rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  text-align:right;
}

/* The contact sheet */
.thm-contact{
  position:relative;
  margin-top:var(--s7);
  padding:clamp(20px,2.2vw,32px);
}
.xh{position:absolute;color:var(--rule)}
.xh--tl{top:6px;left:6px}
.xh--tr{top:6px;right:6px}
.xh--bl{bottom:6px;left:6px}
.xh--br{bottom:6px;right:6px}

/* Nine frames */
.thm-frames{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--thm-gap);
}
.tab-underline{display:none}

/* A frame */
.thm-frame{
  display:block;
  width:100%;
  min-height:var(--tap);
  padding:var(--s2);
  text-align:left;
  background:var(--plate);
  box-shadow:var(--edge-up),inset 0 0 0 1px var(--rule);
  transition:box-shadow var(--dur-state) var(--ease-seat),
             transform var(--dur-press) var(--ease-seat),
             background-color var(--dur-state) var(--ease-seat);
}
.thm-frame:hover{background:var(--plate-hi)}
.thm-frame:active{transform:translateY(1px)}
.thm-frame[aria-pressed="true"]{
  background:var(--plate-hi);
  box-shadow:var(--edge-down),inset 0 0 0 1px var(--ink);
}

/* The colour governor */
.thm-frame .thm-shot img{
  filter:saturate(.34) contrast(.93) brightness(1.03);
  transition:filter var(--dur-seat) var(--ease-seat);
}
.thm-frame:hover .thm-shot img,
.thm-frame:focus-visible .thm-shot img,
.thm-frame[aria-pressed="true"] .thm-shot img{filter:none}

.thm-plate{
  display:block;
  background:var(--window);
  box-shadow:inset 0 0 0 1px var(--window-edge);
}

/* A specimen card */
.thm-meta{
  display:flex;
  align-items:baseline;
  gap:var(--s3);
  padding:var(--s1) var(--s1) var(--s2);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s2);
}
.thm-idx,.thm-machine{
  font-family:var(--font-mono);
  font-size:.6875rem;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.thm-idx{flex:0 0 auto}
.thm-machine{
  flex:1 1 auto;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.thm-frame[aria-pressed="true"] .thm-idx,
.thm-frame[aria-pressed="true"] .thm-machine{color:var(--ink)}
.thm-frame[aria-pressed="true"] .thm-meta{border-bottom-color:var(--ink)}
.thm-frame[aria-pressed="true"] .thm-title{font-weight:600}
.thm-title{
  display:block;
  padding:var(--s3) var(--s1) var(--s2);
  font-size:.9375rem;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* The detent */
.thm-frame.detent::after{content:none}
.thm-frame[aria-pressed="true"].detent::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--bw-rule);
  background:var(--signal);
}

/* The small-screen selector */
.thm-select{
  margin-top:var(--s6);
  display:none;
  align-items:center;
  gap:var(--s4);
  padding-inline:var(--s4);
}
.thm-select label{flex:0 0 auto;color:var(--ink)}
.thm-select select{
  flex:1 1 auto;
  min-height:var(--tap);
  background:transparent;
  border:0;
  border-radius:var(--radius);
  color:var(--ink);
  font-size:1rem;
  padding-block:var(--s2);
}

.thm-tag{
  display:inline-block;
  margin-inline-start:var(--s2);
  padding:1px var(--s2);
  background:var(--ink);
  color:var(--plate-hi);
  font-family:var(--font-mono);
  font-size:.625rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  vertical-align:.12em;
}


/* The faceplate specimen */

.spx{display:none}

#themes[data-theme="faceplate"] .spx--on{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:var(--plate);
  color:var(--ink);
  padding:clamp(10px,1.5vw,18px) clamp(14px,2.2vw,28px);
  overflow:hidden;
}

.spx-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s4);
}
.spx-legend{
  font-family:var(--font-mono);
  font-size:.6875rem;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.spx-legend--r{flex:0 1 auto;text-align:right}

/* A real seam */
.spx-seam{
  position:relative;
  height:3px;
  margin-block:clamp(10px,1.4vw,18px);
  border-top:1px solid var(--plate-lo);
  border-bottom:1px solid var(--plate-hi);
}
.spx-seam::before,.spx-seam::after{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--font-mono);
  font-size:.6875rem;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:var(--plate);
  padding-inline:var(--s2);
}
.spx-seam::before{content:attr(data-designation);left:0}
.spx-seam::after{content:attr(data-index);right:0}

/* Two bays */
.spx-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  justify-content:flex-start;
  gap:clamp(20px,3.2vw,56px);
  min-height:0;
}
.spx-idn{
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:var(--s2);
  min-width:0;
}
.spx-spec{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,2.2vw,40px);
  min-width:0;
  padding-inline-start:clamp(20px,3.2vw,56px);
  border-inline-start:1px solid var(--plate-lo);
  box-shadow:inset 1px 0 0 var(--plate-hi);
}
.spx-blk{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.spx-blk__t{
  font-family:var(--font-mono);
  font-size:.6875rem;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.spx-sw,.spx-edge{list-style:none;margin:0;padding:0;display:flex;gap:var(--s2)}
.spx-sw li,.spx-edge li{display:flex;flex-direction:column;gap:5px;min-width:0}
.spx-sw span,.spx-edge span{
  font-family:var(--font-mono);
  font-size:.5625rem;
  line-height:1;
  letter-spacing:.1em;
  color:var(--ink-2);
}
.spx-sw__c{display:block;width:34px;height:22px;box-shadow:inset 0 0 0 1px var(--rule)}
.spx-sw__c--hi{background:var(--plate-hi)}
.spx-sw__c--pl{background:var(--plate)}
.spx-sw__c--lo{background:var(--plate-lo)}
.spx-sw__c--in{background:var(--ink)}
.spx-sw__c--sg{background:var(--signal)}
.spx-ramp{margin:0;color:var(--ink)}
.spx-ramp--sans{font-size:1.125rem;font-weight:620;letter-spacing:-.03em;line-height:1}
.spx-ramp--mono{
  font-family:var(--font-mono);
  font-size:.6875rem;
  line-height:1;
  letter-spacing:.16em;
  color:var(--ink-2);
}
.spx-edge__c{display:block;width:52px;height:22px;background:var(--plate)}
.spx-edge__c--up{box-shadow:var(--edge-up)}
.spx-edge__c--dn{background:var(--plate-lo);box-shadow:var(--edge-down)}

@media (max-width:1079.98px){
  .spx-spec{display:none}
  .spx-body{align-items:center}
  .spx-idn{flex:1 1 auto}
}
.spx-word{
  margin:0;
  font-size:clamp(1.75rem,4.4vw,3.25rem);
  font-weight:620;
  letter-spacing:-.035em;
  line-height:1;
}
.spx-say{
  margin:0;
  font-size:clamp(.875rem,1.1vw,1.0625rem);
  line-height:1.3;
  color:var(--ink-2);
}

#themes .thm-plate.spx-mini{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:8px 10px;
  background:var(--plate);
  box-shadow:inset 0 0 0 1px var(--rule);
}
.spx-mini__legend{
  font-family:var(--font-mono);
  font-size:.625rem;
  line-height:1;
  letter-spacing:.16em;
  color:var(--ink-2);
}
.spx-mini__seam{
  display:block;
  height:2px;
  border-top:1px solid var(--plate-lo);
  border-bottom:1px solid var(--plate-hi);
}
.spx-mini__row{display:flex;align-items:center;gap:var(--s2)}
.spx-mini__word{
  flex:1 1 auto;
  font-size:clamp(1rem,1.6vw,1.375rem);
  font-weight:620;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--ink);
}
.spx-mini__bar{display:flex;gap:2px;flex:0 0 auto}
.spx-mini__bar i{display:block;width:4px;height:9px;background:var(--signal-idle)}
.spx-mini__bar i.is-lit{background:var(--signal)}

.themes .footnote{margin-top:var(--s6)}


/* The lightbox */

.sc-lightbox{
  position:fixed;
  inset:0;
  z-index:var(--z-lightbox);
  background:var(--scrim);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--gutter);
}
.sc-lightbox[hidden]{display:none}
.sc-lb-frame{width:min(1100px,100%)}
.sc-lb-screen{--ar:16/9;border-color:var(--plate-lo)}
.sc-lb-screen video{display:block;width:100%;height:100%;object-fit:contain;background:var(--window)}
.sc-lb-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  margin-top:var(--s3);
}
.sc-lb-cap{color:var(--window-ink-2)}
.sc-lb-close{color:var(--window-ink);box-shadow:inset 0 0 0 1px var(--window-edge)}
.sc-lb-close:hover{background:rgba(255,255,255,.05)}


/* Responsive */

@media (max-width:1079.98px){
  .ls-gallery,.thm-head{grid-column:1/-1}
  .ls-gallery{margin-top:var(--s7);max-width:640px}
  .ls-window{--ar:16/9}
  .ls-scrim{max-width:none}
}

@media (max-width:900px){
  .thm-stage{grid-template-columns:minmax(0,1fr)}
  .thm-spec{grid-column:1/-1;grid-row:auto;align-self:start;margin-top:var(--s6)}
  .thm-stage-fig{max-width:none}
}

@media (max-width:767.98px){
  /* Art direction */
  .thm-frames{grid-template-columns:repeat(2,minmax(0,1fr))}
  .thm-select{display:flex}
  .ls-scrim{padding:var(--s6) var(--s5)}

  #themes[data-theme="faceplate"] #theme-stage{--cw:780;--ch:340}
  .spx-legend--r{display:none}
  #themes[data-theme="faceplate"] .spx{padding:var(--s3) var(--s4)}
  .spx-seam{margin-block:var(--s3)}
  .spx-word{font-size:1.75rem}
  .spx-say{font-size:.9375rem}
}

@media (max-width:479.98px){
  .thm-frames{grid-template-columns:minmax(0,1fr)}
}


/* Reduced motion */

@media (prefers-reduced-motion:reduce){
  .thm-frame,.thm-frame:active{transform:none!important}
  .thm-frame .thm-shot img{transition:none}
}


/* Forced colors */

@media (forced-colors:active){
  .ls-ground{display:none}
  .ls-scrim,.thm-contact,.thm-frame,.thm-plate{border:1px solid CanvasText}
  .thm-frame[aria-pressed="true"]{border:2px solid Highlight}
  .thm-frame[aria-pressed="true"].detent::after{background:Highlight}
  .spx-mini__bar i{background:CanvasText}
  .spx-mini__bar i.is-lit{background:Highlight}
  .thm-tag{border:1px solid CanvasText}
  .thm-frame .thm-shot img{filter:none}
}


/* Section  Close */

/* Close */

:root{
  --close-ink-2:#8B9196;
  --close-jack-h:64px;
}

#journey .legend,#colophon .legend,
#journey .designation,#colophon .designation{color:var(--close-ink-2)}


/* Panel 09  CMP-05 */

#compare .silk{white-space:nowrap}

#compare .cmp-head{gap:var(--s4)}
#compare .cmp-deck{max-width:38ch}

/* The tally */
#compare .cmp-tally{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--s3) var(--s5);
  margin-block-start:var(--s6);
  padding-block-start:var(--s3);
  border-top:var(--border-hair);
  font-family:var(--font-mono);
  font-size:.6875rem;
  line-height:1.45;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
}
#compare .cmp-tally__row{
  display:flex;
  align-items:baseline;
  gap:var(--s2);
}
#compare .cmp-tally__row + .cmp-tally__row{
  padding-inline-start:var(--s5);
  border-inline-start:var(--border-hair);
}
/* Wrap guard */
@media (max-width:767.98px){
  #compare .cmp-tally__row + .cmp-tally__row{
    padding-inline-start:0;
    border-inline-start:0;
  }
}
#compare .cmp-tally__row b{font-weight:400;color:var(--ink)}
#compare .cmp-tally__row::before{
  content:"";
  width:10px;height:10px;
  flex:0 0 auto;
  align-self:center;
  box-shadow:0 0 0 1px var(--ink-2);
  background:rgba(22,24,26,.52);
}
#compare .cmp-tally__row--lit::before{background:var(--signal)}
/* The hollow socket */
#compare .cmp-tally__row--off::before{background:transparent}
#compare .cmp-tally__row--txt::before{display:none}

#compare .cmp-hint{display:none;margin-block:var(--s5) calc(var(--s3) * -1)}

#compare .compare-scroll{
  margin-top:var(--s7);
  border-top:var(--bw-hair) solid var(--ink);
}

#compare .compare-table{
  width:100%;
  min-width:660px;
  text-align:left;
  table-layout:fixed;
}

#compare .compare-table th,
#compare .compare-table td{
  padding:var(--s5) var(--s4);
  border-bottom:var(--border-hair);
  vertical-align:middle;
}

/* Column heads */
#compare thead th{
  font-size:.75rem;font-weight:500;line-height:1.2;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  padding-block:var(--s3);
  border-bottom:var(--bw-hair) solid var(--ink);
  width:15%;
}
#compare thead .row-head{width:26%;border-bottom-color:var(--ink)}
#compare thead .col-renata{
  color:var(--ink);font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  box-shadow:inset 0 -2px 0 var(--signal);
  border-bottom-color:transparent;
}

/* Row heads */
#compare .compare-table th[scope="row"]{
  font-size:1rem;font-weight:500;line-height:1.25;
  letter-spacing:-.015em;color:var(--ink);
  padding-left:0;
}

#compare .col-renata{background:var(--plate-hi)}
#compare tbody tr:first-child .col-renata{box-shadow:var(--edge-hair-hi)}
#compare tbody tr:last-child .col-renata{box-shadow:var(--edge-hair-lo)}

/* The capability mark */
#compare .tk{
  display:inline-block;
  width:10px;height:10px;
  vertical-align:-1px;
  background:transparent;              /* The empty socket */
  box-shadow:0 0 0 1px var(--ink-2);   /* The bezel */
  transition:none;
}
#compare .tk--lit{background:var(--signal)}
#compare td:not(.col-renata) .tk--lit{background:rgba(22,24,26,.52)}
/* Armed state */
#compare tbody tr.is-dark .tk--lit{background:var(--signal-idle)}
#compare tbody tr.is-dark td:not(.col-renata) .tk--lit{background:rgba(22,24,26,.22)}

#compare .cmp-part{
  font-size:.8125rem;line-height:1.3;color:var(--ink-2);
  letter-spacing:-.005em;
}

#compare .cmp-foot{margin-top:var(--s5);max-width:56ch}


#journey{
  --wash-x:30%;--wash-y:100%;
  overflow:hidden;
}

#journey .jn-plate{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
#journey .jn-portrait{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:78% 12%;
  filter:brightness(.9) contrast(1.02) saturate(.82);
}
#journey .jn-scrim{
  position:absolute;inset:0;
  background:rgba(11,13,15,.34);
}
/* The joint */
#journey .jn-plate::after{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:68%;
  background:var(--ink);
  box-shadow:1px 0 0 #000,
             2px 0 0 rgba(231,233,234,.26);
}

#journey .journey-spine{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  align-self:stretch;
  color:var(--close-ink-2);
}
#journey .jn-mark{letter-spacing:.16em;flex:0 0 auto}
#journey .jn-ribbon{
  width:56px;flex:1 1 0;min-height:280px;height:auto;
  color:var(--close-ink-2);
}
#journey .jn-ribbon,#journey .jn-ribbon-h{fill:none}
#journey .jn-ribbon-h{display:none}
#journey .jn-ribbon-cap{display:none}

#journey .jn-line.is-armed{
  stroke-dasharray:var(--len,1200);
  stroke-dashoffset:var(--len,1200);
}
#journey .jn-line.is-armed.is-drawn{
  stroke-dashoffset:0;
  transition:stroke-dashoffset var(--dur-sweep) var(--ease-sweep);
}
#journey .jn-marks line{stroke:currentColor}
#journey .jn-marks.is-armed line{stroke:var(--window-edge)}
#journey .jn-marks.is-armed line.is-latched{stroke:currentColor;transition:none}

#journey .journey-head{max-width:36rem}

/* Authored line units */
#journey h2 .ln,#waitlist h2 .ln{display:block}

#journey h2{font-size:clamp(1.875rem,.8rem + 3.2vw,4.25rem);
  letter-spacing:-.03em;line-height:1.06}
#waitlist h2{font-size:clamp(1.875rem,.6rem + 3.3vw,4rem);line-height:1.06}
#journey .jn-desig{margin-bottom:var(--s5)}
#journey .jn-body{
  margin-top:var(--s6);
  max-width:42ch;
  color:var(--window-ink);
}
#journey .jn-act{margin-top:var(--s7)}
#journey .jn-btn{
  background:var(--plate-hi);color:var(--ink);
  box-shadow:var(--edge-hair-lo);
  font-weight:560;
}
#journey .jn-btn:hover{background:#fff}
#journey .jn-btn:active{transform:translateY(1px);box-shadow:var(--edge-down)}


/* Panel 12  IN-01 */

/* Left-machined */
#waitlist .grid{row-gap:0}

/* Pacing */
#waitlist{padding-block-start:var(--pad-md-t)}

#waitlist .wl-head{
  display:grid;justify-items:start;gap:var(--s5);text-align:left;
  grid-column:2/span 7;grid-row:1;
}
#waitlist .wl-desig{letter-spacing:.18em}

#waitlist .wl-offer{
  grid-column:9/span 4;
  grid-row:1;
  align-self:end;
}

/* The form */
#waitlist .cta-form{
  position:relative;
  margin-top:var(--s8);
  display:block;
  text-align:left;
}
/* The strip */
#waitlist form.cta-form{
  grid-column:2/span 6;
  grid-row:2;
  align-self:start;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "cap  cap"
    "jack send";
  gap:var(--s2) var(--s4);
  align-items:center;
}
#waitlist .wl-slot-cap{grid-area:cap;letter-spacing:.18em}
#waitlist .cta-input{grid-area:jack}
#waitlist .wl-tail{grid-column:9/span 4;grid-row:2/span 2;align-self:start}
#waitlist .wl-terms{grid-column:2/span 6;grid-row:3;align-self:start}
#waitlist .cta-input{
  display:block;width:100%;
  min-height:var(--close-jack-h);
  padding:0 var(--s8) 0 var(--s5);
  background:var(--plate-lo);
  color:var(--ink);
  border:var(--border-hair);
  border-radius:var(--radius);
  box-shadow:var(--edge-down);
  font-family:var(--font-sans);font-size:1.0625rem;letter-spacing:-.01em;
  text-align:left;
}
#waitlist .cta-input::placeholder{color:#4A4D51;opacity:1}
#waitlist .cta-input:focus{outline:none}
#waitlist .cta-input:focus-visible{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:calc(var(--focus-offset) * -1);
}
/* The jack lamp */
#waitlist .wl-lamp{
  position:absolute;
  grid-area:jack;
  right:var(--s5);
  top:calc(50% - var(--led) / 2);
  transition:none;
}
#waitlist .wl-send{
  grid-area:send;
  width:auto;
  font-size:1rem;
  min-height:var(--close-jack-h);
  padding-inline:var(--s6);
  white-space:nowrap;
}
#waitlist .wl-send.is-live{background:var(--signal);color:var(--ink)}
#waitlist .wl-send.is-live:hover{background:var(--signal-dim);color:var(--plate-hi)}

#waitlist .wl-tail{display:grid;justify-items:start;margin-top:var(--s8)}
#waitlist .wl-terms{margin-top:var(--s6)}
#waitlist .wl-offer{max-width:var(--measure-deck);margin-block:0}
#waitlist .wl-rule{
  width:100%;height:1px;background:var(--rule);border:0;
  margin-top:var(--s6);
}
#waitlist .wl-terms .wl-rule{margin-top:0}
#waitlist .wl-label{margin-top:var(--s5);letter-spacing:.18em}
#waitlist #waitlist-note{margin-top:var(--s4);max-width:var(--measure-deck)}
#waitlist .wl-disclosure{margin-top:var(--s4);max-width:var(--measure-deck)}

#waitlist .cta-confirm{
  grid-column:2/span 6;
  grid-row:2;
  align-self:start;
  margin:var(--s8) 0 0;
  text-align:left;
}
@media (max-width:1079.98px){ #waitlist .cta-confirm{grid-column:1/-1;grid-row:auto} }

@media (max-width:639.98px){
  #waitlist form.cta-form{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"cap" "jack" "send";
    gap:var(--s2);
  }
  #waitlist .wl-send{width:100%;margin-top:var(--s2)}
}


/* Panel 13  End */

#colophon{--wash-x:50%;--wash-y:-10%}
#colophon .grid{row-gap:var(--s8)}

/* Two bays */
#colophon .foot-a{grid-column:2/span 4;grid-row:1}
#colophon .foot-b{grid-column:7/span 6;grid-row:1/span 2}
#colophon .foot-c{grid-column:2/span 4;grid-row:2;align-self:start}
#colophon .grid{align-items:start;grid-template-rows:max-content 1fr}

#colophon .ft-signoff{
  font-size:1.0625rem;font-weight:500;line-height:1.35;letter-spacing:-.015em;
  color:var(--window-ink);max-width:18ch;
  margin-top:var(--s3);
}
#colophon .ft-copy{
  margin-top:var(--s6);
  font-size:.8125rem;color:var(--close-ink-2);
}

#colophon .ft-index-label{
  letter-spacing:.18em;
  padding-bottom:var(--s3);
  border-bottom:var(--bw-hair) solid var(--window-edge);
  margin-bottom:var(--s2);
}

#colophon .ft-index{list-style:none;margin:0;padding:0}
#colophon .ft-row{
  min-height:var(--tap);
  padding-block:var(--s2);
  align-items:center;
  color:var(--window-ink);
  border-bottom:var(--bw-hair) solid rgba(122,128,133,.25);
}
#colophon .ft-name{
  flex:0 0 auto;
  font-size:.9375rem;font-weight:450;letter-spacing:-.01em;
}
#colophon .ft-row .leader__fill{
  height:1px;align-self:center;
  background-image:var(--leader-dot);
  background-size:var(--leader-step) 100%;
  background-repeat:repeat-x;
  background-position:0 50%;
  opacity:.55;
}
#colophon .ft-row .leader__value{letter-spacing:.1em}
#colophon .ft-row:hover .ft-name{text-decoration:underline;
  text-decoration-thickness:var(--bw-rule);text-decoration-color:var(--signal);
  text-underline-offset:.22em}

#colophon .social-row{
  display:flex;list-style:none;margin:0;padding:0;
  box-shadow:inset 0 0 0 1px var(--window-edge);
  width:max-content;max-width:100%;
}
#colophon .social-row li + li{box-shadow:inset 1px 0 0 var(--window-edge)}
#colophon .social-link{
  display:flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);
  color:var(--window-ink);
  text-decoration:none;
  transition:box-shadow var(--dur-state) var(--ease-seat),
             color var(--dur-state) var(--ease-seat);
}
#colophon .social-link:hover{box-shadow:inset 0 0 0 2px var(--signal)}
#colophon .social-link svg{width:22px;height:22px}
#colophon .social-link svg[fill="none"]{fill:none}

#colophon .footer-handles{
  margin-top:var(--s5);
  display:flex;flex-direction:column;align-items:flex-start;
}
#colophon .footer-handles a{
  display:inline-flex;align-items:center;
  min-height:var(--tap);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--close-ink-2);
  text-decoration-color:var(--window-edge);
}
#colophon .footer-handles a:hover{color:var(--window-ink)}

/* The sign-off band */
#colophon .foot-base{
  grid-column:2/span 11;
  border-top:var(--bw-hair) solid var(--window-edge);
  padding-top:var(--s5);
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--s5) var(--col-gap);align-items:baseline;
}
#colophon .foot-base .ft-copy{margin-top:0;text-align:right}
#colophon .ft-retro{
  font-size:.8125rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--window-ink);
}
#colophon .footer-legal{
  margin-top:var(--s6);
  max-width:64ch;font-size:.75rem;line-height:1.55;
}


/* Breakpoints */

@media (max-width:1079.98px){

  /* Compare */
  #compare .cmp-deck{max-width:44ch}

  /* Journey */
  #journey{overflow:hidden}
  #journey .journey-spine{display:none}
  #journey .jn-plate{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    aspect-ratio:16/8;
    margin-top:calc(var(--pad-lg-t) * -1);
    margin-bottom:var(--s8);
    box-shadow:0 1px 0 var(--window-edge);
  }
  #journey .jn-plate::after{display:none}
  #journey .jn-portrait{object-position:70% 24%;filter:brightness(.86) contrast(1.02) saturate(.82)}
  #journey .jn-scrim{background:rgba(11,13,15,.22)}
  #journey .journey-head{max-width:none}
  #journey .jn-ribbon-h{
    display:block;width:100%;height:auto;max-width:520px;
    color:var(--close-ink-2);
    margin-top:var(--s7);
  }
  #journey .jn-ribbon-cap{display:block;margin-top:var(--s3);letter-spacing:.16em}
  #journey .jn-body{max-width:52ch}

  /* Waitlist */
  #waitlist .wl-head,
  #waitlist .wl-offer,
  #waitlist form.cta-form,
  #waitlist .wl-terms,
  #waitlist .wl-tail{grid-column:1/-1;grid-row:auto;max-width:none;margin-inline:0}
  #waitlist .wl-offer{margin-top:var(--s6)}
  #waitlist .wl-terms{margin-top:var(--s7)}
  #waitlist .wl-tail{margin-top:var(--s7)}
  #waitlist .wl-offer,
  #waitlist #waitlist-note,
  #waitlist .wl-disclosure{max-width:52ch}

  /* Footer */
  #colophon .grid{row-gap:var(--s7);grid-template-rows:none}
  #colophon .foot-a,#colophon .foot-b,#colophon .foot-c{
    grid-column:1/-1;grid-row:auto;align-self:start;
  }
  #colophon .foot-b{order:1}
  #colophon .foot-a{order:2}
  #colophon .foot-c{order:3}
  #colophon .foot-base{order:4;grid-column:1/-1}
}

@media (max-width:767.98px){

  /* Compare */
  #compare .cmp-hint{display:block}
  #compare .compare-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-top:0;
    /* The cut edge */
    box-shadow:inset -1px 0 0 var(--ink);
    scroll-snap-type:x proximity;
    scroll-padding-left:170px;
  }
  #compare .compare-table td,
  #compare thead th:not(.row-head){scroll-snap-align:start}
  #compare .compare-table{min-width:600px;table-layout:auto}
  #compare .compare-table th,
  #compare .compare-table td{padding:var(--s3) var(--s3)}
  #compare thead th{width:auto;font-size:.6875rem}
  #compare .compare-table th[scope="row"]{
    position:sticky;left:0;z-index:1;
    background:var(--ink);color:var(--window-ink);
    padding-left:var(--s4);
    min-width:170px;
    box-shadow:1px 0 0 var(--window-edge);
    border-bottom:var(--bw-hair) solid var(--window-edge);
  }
  #compare thead .row-head{
    position:sticky;left:0;z-index:2;
    background:var(--ink);min-width:170px;
    box-shadow:1px 0 0 var(--window-edge);
  }
  #compare .col-renata{background:var(--plate-hi)}
  #compare .cmp-foot{margin-top:var(--s5)}

  /* Journey */
  #journey .jn-plate{aspect-ratio:16/10}
  #journey .jn-portrait{object-position:68% 22%}

  /* Waitlist */
  #waitlist .cta-input{padding-right:var(--s7)}
  #waitlist .wl-lamp{right:var(--s4)}

  /* Footer */
  #colophon .foot-base{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  #colophon .footer-handles{flex-direction:row;flex-wrap:wrap;gap:0 var(--s5)}
}

@media (max-width:479.98px){
  #compare .compare-table th[scope="row"]{min-width:150px;font-size:.875rem}
  #compare .cmp-part{font-size:.75rem}
  #journey .jn-ribbon-h{max-width:100%}
  #waitlist .wl-offer{max-width:none}
}


/* Reduced motion */

@media (prefers-reduced-motion:reduce){
  #journey .jn-line,
  #journey .jn-line.is-armed,
  #journey .jn-line.is-armed.is-drawn{
    stroke-dasharray:none!important;stroke-dashoffset:0!important;
  }
  #journey .jn-marks.is-armed line{stroke:currentColor!important}
  #compare tbody tr.is-dark .tk--lit{background:var(--signal)!important}
  #compare tbody tr.is-dark td:not(.col-renata) .tk--lit{
    background:rgba(22,24,26,.52)!important;
  }
}


/* Print / forced colors */

@media print{
  #journey .jn-plate{display:none}
  #compare .tk{box-shadow:0 0 0 1px #000;background:#fff}
  #compare .tk--lit,
  #compare td:not(.col-renata) .tk--lit{background:#000}
  #colophon .social-row{box-shadow:none;border:1px solid #000}
}

@media (forced-colors:active){
  #compare .tk{border:1px solid CanvasText;background:Canvas;box-shadow:none}
  #compare .tk--lit{background:Highlight;forced-color-adjust:none}
  #compare td:not(.col-renata) .tk--lit{background:CanvasText}
  #compare thead .col-renata{box-shadow:none;border-bottom:2px solid Highlight}
  #journey .jn-plate::after{background:Canvas}
  #colophon .social-link{border:1px solid ButtonText}
  #waitlist .cta-input{border:1px solid ButtonText}
}


/* The rail */

.rail{
  align-items:stretch;
  justify-content:flex-start;
  overflow:hidden;
  --rail-ink:var(--ink);
  --rail-ink-2:var(--ink-2);
  --rail-hair:var(--plate-lo);
  --rail-mark-bg:var(--ink);
  --rail-mark-fg:var(--plate-hi);
}
.rail[data-ground="ink"]{
  --rail-ink:var(--window-ink);
  --rail-ink-2:var(--window-ink-2);
  --rail-hair:#33373B;
  --rail-mark-bg:var(--plate-hi);
  --rail-mark-fg:var(--ink);
}

.rail *{min-width:0;min-height:0}

/* Head */

.rail__head{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  height:var(--nav-h);
  border-bottom:var(--bw-hair) solid var(--rail-hair);
}
.rail__mark{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  background:var(--rail-mark-bg);
  color:var(--rail-mark-fg);
  font-family:var(--font-sans);
  font-size:10px;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
  /* Stamped */
  box-shadow:0 1px 0 var(--plate-hi),1px 0 0 var(--plate-lo);
}
.rail[data-ground="ink"] .rail__mark{box-shadow:0 1px 0 #000,1px 0 0 #000}

/* SIG */
.rail__sig{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s2);
  padding-block:var(--s4) var(--s3);
}
.rail__sig-label{
  font-family:var(--font-mono);
  font-size:.625rem;
  line-height:1;
  letter-spacing:.16em;
  text-indent:.16em;
  text-transform:uppercase;
  color:var(--rail-ink-2);
}

/* Meter / transport */

.rail__meter{
  flex:1 1 auto;
  position:relative;
  display:block;
  min-height:120px;
  cursor:default;
}
.rail__meter[aria-disabled="false"]{cursor:pointer;touch-action:none}
.rail__meter:focus-visible{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:calc(var(--focus-offset) * -1);
}
.rail .rail__canvas{
  display:block;
  width:100%;
  height:100%;
  flex:none;
}

/* Foot */

.rail__foot{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s3);
  padding:var(--s4) var(--s1) var(--s5);
  border-top:var(--bw-hair) solid var(--rail-hair);
}
.rail__index{
  font-family:var(--font-mono);
  font-size:.625rem;
  line-height:1;
  letter-spacing:.12em;
  text-indent:.12em;
  color:var(--rail-ink-2);
  font-variant-numeric:tabular-nums;
}

.rail__contents{
  display:none;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  min-width:var(--tap);
  min-height:var(--tap);
  padding-inline:var(--s3);
  color:var(--rail-ink);
  font-family:var(--font-mono);
  font-size:.625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:transform var(--dur-press) var(--ease-seat),
             background-color var(--dur-state) var(--ease-seat);
}
.rail__contents:active{transform:translateY(1px)}
.rail__contents[aria-expanded="true"]{
  background:var(--rail-ink);
  color:var(--rail-mark-fg);
}
.rail__contents-glyph{flex:0 0 auto}


/* The rotation */

@media (max-width:1079.98px){
  .rail{align-items:stretch}

  .rail__head{display:none}

  .rail__sig{
    flex-direction:row;
    align-items:center;
    gap:var(--s2);
    padding:0 var(--s3);
    border-right:var(--bw-hair) solid var(--rail-hair);
  }

  .rail__meter{min-height:0;height:100%}
  .rail__meter[aria-disabled="false"]{touch-action:pan-y}

  .rail__foot{
    flex-direction:row;
    gap:var(--s3);
    padding:0 0 0 var(--s3);
    height:100%;
    border-top:0;
    border-left:var(--bw-hair) solid var(--rail-hair);
  }
  .rail__contents{display:inline-flex;align-self:stretch;min-height:var(--rail-h)}
}

@media (max-width:479.98px){
  .rail__sig-label{display:none}
  .rail__head{padding-inline:var(--s3) var(--s2)}
  .rail__contents{padding-inline:var(--s2);gap:var(--s2)}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .rail,.rail *{transition:none!important}
}

@media (forced-colors:active){
  .rail{forced-color-adjust:none;background:Canvas}
  .rail__mark{background:CanvasText;color:Canvas;box-shadow:none}
  .rail__head,.rail__foot{border-color:CanvasText}
}


.ls-gpu{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  transition:opacity var(--dur-seat, 420ms) var(--ease-seat, cubic-bezier(.16,1,.30,1));
  pointer-events:none;
}
.ls-gpu-on .ls-gpu{opacity:1}
.ls-gpu-on .ls-ground img{opacity:0}
.ls-gpu-on .ls-ground::after{opacity:.16}

/* Two tiers */
.ls-live{
  display:block;
  margin-top:var(--s3, 12px);
  color:var(--window-ink-2);
}
.ls-live__state{
  display:flex;
  align-items:flex-start;
  gap:var(--s2, 8px);
}
.ls-live .led{flex:0 0 auto;margin-block-start:calc((1.45em - var(--led)) / 2)}
.ls-live__note{
  display:block;
  margin-top:var(--s2, 8px);
  max-width:46ch;
  font-size:.8125rem;
  line-height:1.5;
  letter-spacing:-.005em;
  text-wrap:pretty;
  color:var(--window-ink-2);
}
.ls-live[hidden]{display:none}

@media (prefers-reduced-motion: reduce){
  .ls-gpu{transition:none}
}