@font-face {
  font-family:Bungee;
  src:url('../fonts/Bungee.ttf') format('truetype');
  font-display:swap;
}
@font-face {
  font-family:Tilt Neon;
  src:url('../fonts/TiltNeon.ttf') format('truetype');
  font-display:swap;
}
@font-face {
  font-family:DSEG7;
  src:url('../fonts/DSEG7Classic-Bold.ttf') format('truetype');
  font-display:swap;
}
@font-face {
  font-family:Metal Mania;
  src:url('../fonts/MetalMania.ttf') format('truetype');
  font-display:swap;
}
:root {
  color-scheme:dark;
  --bg:#0e0b14;
  --top:#160f21;
  --surface:#1a1724;
  --raised:#24202f;
  --sunken:#110e18;
  --stroke:#36303f;
  --text:#f6f1fa;
  --muted:#b5adc4;
  --pink:#ff5cb8;
  --cyan:#4be8e6;
  --purple:#9b7bff;
  --gold:#ffc94a;
  --ink:#241c32;
  --paper:#ede4d2;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Tilt Neon',system-ui,sans-serif;
  font-size:18px;
  line-height:1.5;
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
  opacity:.09;
  background-image:repeating-conic-gradient(#fff1 0 25%,transparent 0 50%);
  background-size:3px 3px;
}
.wrap {
  width:min(1100px,calc(100% - 32px));
  margin-inline:auto;
}
a {
  color:inherit;
  text-underline-offset:5px;
}
button,input {
  font:inherit;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:wait;
}
button {
  touch-action:manipulation;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:5px;
}
button {
  color:inherit;
}
h1,h2,h3,p,figure {
  margin:0;
}
h2 {
  font-family:Bungee,sans-serif;
  font-weight:400;
  font-size:clamp(21px,2.3vw,28px);
  line-height:1.35;
}
button {
  border:0;
}
a,button,input {
  scroll-margin:28px;
}
.muted {
  color:var(--muted);
}
.eyebrow {
  font-size:12px;
  letter-spacing:.16em;
  line-height:1.6;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  top:12px;
  left:16px;
  z-index:30;
  padding:10px;
  background:var(--cyan);
  color:var(--bg);
  transform:translateY(-200%);
}
.skip-link:focus {
  transform:none;
}
/* The landing view: one full-bleed screen with the player, nothing above it. */
.hero {
  position:relative;
  overflow-x:clip;
  display:grid;
  align-items:center;
  min-height:100vh;
  min-height:100svh;
  padding-block:48px;
  isolation:isolate;
}
.hero-layout {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  align-items:center;
}
.hero-copy {
  position:relative;
  z-index:1;
  padding-left:32px;
}
.hero .eyebrow {
  color:var(--cyan);
}
.tiny-tape {
  font-size:18px;
  vertical-align:-1px;
  margin-right:6px;
}
.chrome {
  font-family:Bungee,sans-serif;
  font-weight:400;
  font-size:clamp(72px,8.6vw,112px);
  line-height:.98;
  letter-spacing:-.055em;
  background:linear-gradient(#fff 0%,#aeb6c2 35%,#3a3f48 51.9%,#e8ecf2 52%,#e8ecf2 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  filter:drop-shadow(0 4px 0 #6a375f) drop-shadow(0 8px 14px #0009);
  margin:24px 0 27px;
}
.tagline {
  font-size:clamp(18px,2.1vw,24px);
  white-space:nowrap;
}
.hero-actions {
  display:flex;
  gap:23px;
  align-items:center;
  margin-block:30px 25px;
}
/* First-screen karaoke. Its space is reserved, so pressing play never moves the layout. */
.hero-karaoke {
  opacity:0;
  transition:opacity .4s ease;
}
.hero-karaoke.is-on {
  opacity:1;
}
/* Opens full-screen karaoke; shown with the strip while a timed track plays. */
.karaoke-button {
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:52px;
  padding:0 20px 0 16px;
  border:1px solid var(--stroke);
  border-radius:4px;
  background:#1a1724cc;
  font-size:17px;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease,visibility 0s .4s,border-color .2s ease;
}
/* Visible at once, so focus can return to it when the karaoke screen closes. */
.karaoke-button.is-on {
  opacity:1;
  visibility:visible;
  transition:opacity .4s ease,visibility 0s,border-color .2s ease;
}
.karaoke-button:hover {
  border-color:var(--cyan);
}
/* Same height as Press play, pressed the same way. */
.karaoke-button:active {
  transform:translateY(1px);
}
.karaoke-button svg {
  fill:none;
  stroke:var(--cyan);
  stroke-width:2;
  stroke-linecap:round;
}
.hero-line {
  min-height:2.6em;
  font-size:clamp(22px,2.3vw,30px);
  line-height:1.3;
  text-wrap:balance;
}
.hero-line .wiped {
  color:var(--pink);
  text-shadow:0 0 14px #ff5cb866;
}
.hero-line.upcoming {
  color:var(--muted);
}
.hero-next {
  min-height:1.5em;
  margin-top:4px;
  color:var(--muted);
  font-size:16px;
}
.primary {
  border:1px solid #ff8ecd;
  border-radius:4px;
  background:var(--pink);
  color:#2a0b1e;
  box-shadow:0 0 26px #ff5cb81a;
  height:52px;
  padding:0 24px;
  font-size:18px;
}
.primary:hover {
  background:#ff8ecd;
}
.primary:active {
  transform:translateY(1px);
}
.primary [aria-hidden] {
  margin-right:7px;
}
/* Both labels share one grid cell, so the button keeps the wider one's size. */
#hero-play {
  display:inline-grid;
  align-items:center;
}
#hero-play>span {
  grid-area:1/1;
}
#hero-play .when-playing,#hero-play.is-playing .when-paused {
  visibility:hidden;
}
#hero-play.is-playing .when-playing {
  visibility:visible;
}
.hero-art {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-1;
  pointer-events:none;
  mask-image:linear-gradient(#000 75%,transparent);
  background:radial-gradient(ellipse 110% 60% at 50% 100%,#61327147,transparent 70%),radial-gradient(ellipse 70% 70% at 70% 40%,#6132712e,transparent 70%);
}
.grid {
  position:absolute;
  bottom:-110px;
  left:-20%;
  width:140%;
  height:310px;
  transform:perspective(260px) rotateX(57deg);
  background-image:linear-gradient(#9b7bff25 1px,transparent 1px),linear-gradient(90deg,#9b7bff25 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:linear-gradient(transparent,#0008,transparent);
}
.walkman-group {
  text-align:center;
  position:relative;
}
.walkman {
  position:relative;
  z-index:1;
  width:min(420px,100%);
  aspect-ratio:2/3;
  margin:auto;
  filter:drop-shadow(0 24px 20px #0009);
}
.walkman-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
}
.display {
  position:absolute;
  left:17.7734%; top:16.0156%; width:59.7656%; height:7.1615%;
  overflow:hidden;
  border-radius:10px;
  z-index:3;
  background:#070c0e;
  pointer-events:none;
}
.display canvas { display:block; width:100%; height:100%; }
.piano,.hardware-key {
  position:absolute;
  z-index:5;
  min-width:44px; min-height:44px;
  transform:translate(-50%,-50%);
  padding:0;
  background:transparent;
  border-radius:5px;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.piano::after,.hardware-key::after {
  content:''; position:absolute;
  left:var(--feature-x); top:var(--feature-y);
  width:var(--feature-width); height:var(--feature-height);
  border-radius:4px; pointer-events:none;
}
.piano:hover::after,.hardware-key:hover::after { background:#ffffff12; }
.piano:active,.piano.pressed,.hardware-key:active {
  transform:translate(-50%,calc(-50% + 2px));
}
.piano:active::after,.piano.pressed::after,.hardware-key:active::after { background:#0005; box-shadow:inset 0 3px 5px #0005; }
.volume-wheel:active { transform:translate(-50%,-50%); }
.volume-wheel:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.walkman-reels { position:absolute; inset:0; z-index:3; pointer-events:none; }
.walkman-reels svg { width:100%; height:100%; display:block; }
.wheel-ridges {
  position:absolute; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(#f9f9ed20 0 1px,#07070730 1px 3px,transparent 3px 6px);
  border-radius:25%; mix-blend-mode:overlay;
}
.power-led { position:absolute; z-index:4; border-radius:50%; background:#4d0204cc; pointer-events:none; }
.is-playing .power-led { background:#ff4c37; box-shadow:0 0 5px 2px #ff302bb3; }
.player-switcher { position:relative; isolation:isolate; display:inline-grid; grid-template-columns:repeat(3,1fr); max-width:100%; margin-top:10px; padding:3px; gap:2px; border:1px solid var(--stroke); border-radius:8px; background:var(--sunken); }
.player-switcher button { position:relative; z-index:1; min-height:44px; padding:7px 12px; background:transparent; border-radius:5px; font-size:13px; color:var(--muted); white-space:nowrap; transition:color .3s ease; }
.player-switcher button[aria-pressed=true] { color:var(--cyan); }
.player-switcher:not(.has-thumb) button[aria-pressed=true] { background:var(--raised); }
/* Equal columns; a plain thumb springs to the chosen player. */
.switcher-thumb { position:absolute; top:3px; bottom:3px; left:0; width:var(--w,0); transform:translateX(var(--x,0)); border-radius:5px; background:var(--raised); pointer-events:none; }
.player-switcher.is-ready .switcher-thumb { transition:transform .55s cubic-bezier(.3,1.45,.5,1),width .55s cubic-bezier(.3,1.45,.5,1); }
/* The player stripes, swept behind the player like a light streak while it changes. */
.switch-streak { position:absolute; z-index:0; left:-15%; right:-15%; top:43%; height:8%; opacity:0; pointer-events:none; background:linear-gradient(var(--pink) 0 38%,transparent 38% 62%,var(--cyan) 62%); mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent); transform:skewY(-9deg); filter:drop-shadow(0 0 18px #ff5cb899); }
.section-top {
  margin-bottom:30px;
}
/* Narrower than the page grid, so the case keeps a real cassette case's proportions. */
.jcard {
  width:min(960px,calc(100% - 32px));
  padding-block:25px 70px;
}
/* The J-card under the lid of a clear cassette case, seen face on: a thin silvery
   rim, wider side walls with their moulded lines, hinge blocks in the corners,
   the lid's centre tab and a soft glare over the card. */
.cassette-case {
  --wall:30px;
  position:relative;
  padding:14px var(--wall);
  border-radius:7px;
  background:
    linear-gradient(#ffffff42,#ffffff17) left top/var(--wall) var(--wall) no-repeat,
    linear-gradient(#ffffff42,#ffffff17) right top/var(--wall) var(--wall) no-repeat,
    linear-gradient(#ffffff17,#ffffff38) left bottom/var(--wall) var(--wall) no-repeat,
    linear-gradient(#ffffff17,#ffffff38) right bottom/var(--wall) var(--wall) no-repeat,
    linear-gradient(#ffffff5c,#ffffff26) center top 3px/84px 7px no-repeat,
    linear-gradient(90deg,#ffffff4d 0 1px,transparent 1px 27%,#ffffff2e 27% calc(27% + 1px),#0000003d calc(27% + 1px) 70%,#ffffff47 70% calc(70% + 1px),transparent calc(70% + 1px)) left/var(--wall) 100% no-repeat,
    linear-gradient(270deg,#ffffff4d 0 1px,transparent 1px 27%,#ffffff2e 27% calc(27% + 1px),#0000003d calc(27% + 1px) 70%,#ffffff47 70% calc(70% + 1px),transparent calc(70% + 1px)) right/var(--wall) 100% no-repeat,
    linear-gradient(160deg,#dfe3ee38,#c7cbd61c 50%,#dfe3ee30);
  box-shadow:inset 0 0 0 1px #ffffff4d,inset 0 1px 0 #ffffffa6,inset 0 -1px 0 #ffffff33,0 26px 44px -22px #000;
}
.cassette-case::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 16%,#ffffff1c 23%,transparent 31%,transparent 63%,#ffffff12 67%,transparent 73%);
}
.jcard-insert {
  position:relative;
  border-radius:2px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 0 0 1px #00000059;
}
/* The spine fold: printed title, the label stripes and a soft crease. */
.jcard-spine {
  display:flex;
  align-items:center;
  gap:18px;
  padding:9px 28px;
  border-bottom:1px solid #5c526d40;
  background:linear-gradient(#0000000d,transparent 35%,transparent 65%,#00000012);
  box-shadow:0 1px 0 #ffffffa6;
  font-family:Bungee,sans-serif;
  font-size:15px;
  letter-spacing:.04em;
}
.spine-stripes {
  flex:1;
  height:8px;
  background:linear-gradient(#e8559f 0 3px,transparent 3px 5px,#46c3c6 5px);
}
.jcard-paper {
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
}
.side {
  padding:30px 28px 23px;
  min-width:0;
}
.side+.side {
  border-left:1px dashed #5c526d66;
}
.side-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:2px solid var(--ink);
  padding-bottom:12px;
}
.side-heading h3 {
  font-family:Bungee,sans-serif;
  font-size:21px;
  font-weight:400;
}
.side-heading span {
  font-family:Tilt Neon,sans-serif;
  font-variant-numeric:tabular-nums;
  font-size:15px;
}
.side ol {
  list-style:none;
  padding:12px 0 0;
  margin:0;
}
.track {
  width:100%;
  min-height:55px;
  display:grid;
  grid-template-columns:25px 1fr auto;
  align-items:center;
  gap:10px;
  padding:9px 8px;
  background:transparent;
  text-align:left;
  color:var(--ink);
  border-bottom:1px solid #443a501f;
  border-radius:0;
  font-size:17px;
  line-height:1.2;
}
.track .track-number {
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:#61536c;
}
.track time {
  font-family:Tilt Neon,sans-serif;
  font-variant-numeric:tabular-nums;
  font-size:15px;
  color:#55465e;
}
.track:hover {
  background:#e2d6cf;
}
/* The current track sits on slightly darker paper; small level bars replace its
   number while playing and a play mark while paused. */
.track[aria-current=true] {
  background:#e2d8c4;
}
.track .now {
  display:none;
  align-items:flex-end;
  gap:2px;
  height:12px;
}
.track[aria-current=true] .track-number {
  display:none;
}
.track[aria-current=true] .now {
  display:flex;
}
.now i {
  width:3px;
  height:100%;
  background:#a3195f;
  transform-origin:bottom;
  transform:scaleY(var(--level, .5));
}
.now i:nth-child(1) { --level:var(--level-1, .6); }
.now i:nth-child(2) { --level:var(--level-2, 1); }
.now i:nth-child(3) { --level:var(--level-3, .4); }
.jcard-paper:not(.is-playing) .now i {
  display:none;
}
.jcard-paper:not(.is-playing) .now::before {
  content:'';
  border-block:5px solid transparent;
  border-left:8px solid #a3195f;
  margin:0 0 1px 2px;
}
.track:focus-visible {
  outline-color:#6243a2;
  outline-offset:1px;
}
.side-foot {
  font-size:10px;
  letter-spacing:.13em;
  margin-top:15px;
  display:flex;
  justify-content:space-between;
  color:#61536c;
}
/* --table is the line the phone, the watch and the sweatband rest on. */
.app-preview {
  --table:88px;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  padding-block:96px var(--table);
}
.app-copy .eyebrow {
  color:var(--cyan);
  margin-bottom:20px;
}
.app-preview h2 {
  font-size:clamp(32px,5vw,57px);
  line-height:1.2;
  letter-spacing:-.02em;
}
.app-preview h2 span {
  color:var(--pink);
}
/* The hero's chrome wordmark, on one line, as the app's logo. */
.chrome.app-logo {
  margin:30px 0 0;
  font-size:clamp(44px,4.6vw,64px);
  white-space:nowrap;
}
/* A small neon sign hung askew in the section's top right corner: pink tubes in a
   cyan frame, with an occasional flicker. */
.neon-sign {
  position:absolute;
  top:40px;
  right:0;
  padding:.3em .6em .35em;
  border:2px solid #c9fffd;
  border-radius:.45em;
  color:#ffe8f5;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1;
  white-space:nowrap;
  text-shadow:0 0 2px #fff,0 0 6px var(--pink),0 0 14px var(--pink),0 0 28px #ff2fa0,0 0 46px #ff2fa099;
  box-shadow:0 0 4px var(--cyan),0 0 14px #4be8e6aa,inset 0 0 4px var(--cyan),inset 0 0 12px #4be8e655;
  transform:rotate(-9deg);
  animation:neon-flicker 7s linear infinite;
}
@keyframes neon-flicker {
  0%,90%,92.5%,94.5%,100% { opacity:1; }
  91%,93.5% { opacity:.5; }
}
/* The sweatband rests on the table after the wordmark; its image has 2.5% clear
   space below the band. */
.sweatband {
  position:absolute;
  right:4%;
  bottom:calc(var(--table) - 4px);
  width:clamp(140px,15vw,200px);
  height:auto;
  filter:drop-shadow(0 10px 10px #000c);
}
/* The phone frame is drawn around a real simulator screenshot; sizes scale with --phone. */
.app-stage {
  --phone:clamp(190px,54vw,290px);
  position:relative;
  width:calc(var(--phone) * 1.6);
  margin-inline:auto;
  order:-1;
}
.phone {
  position:relative;
  width:var(--phone);
  padding:calc(var(--phone) * .034);
  border-radius:calc(var(--phone) * .17);
  background:linear-gradient(150deg,#4a4452,#1b1720 30%,#121016 70%,#3b3543);
  box-shadow:inset 0 0 0 1px #6d6578,inset 0 0 0 3px #050407,0 40px 60px -24px #000,0 0 70px #ff5cb822;
}
.phone img {
  display:block;
  width:100%;
  height:auto;
  border-radius:calc(var(--phone) * .136);
}
.phone::before {
  content:'';
  position:absolute;
  right:-3px;
  top:24%;
  width:3px;
  height:11%;
  border-radius:0 2px 2px 0;
  background:linear-gradient(#2b2631,#5a5262,#2b2631);
}
.phone::after {
  content:'';
  position:absolute;
  left:50%;
  top:calc(var(--phone) * .058);
  width:calc(var(--phone) * .28);
  height:calc(var(--phone) * .083);
  transform:translateX(-50%);
  border-radius:999px;
  background:#000;
}
/* A watch beside the phone with an imagined heart rate screen in the page's style. */
/* Upright like the phone; the lower band's end rests on the table. */
.watch {
  --watch:calc(var(--phone) * .5);
  position:absolute;
  right:0;
  bottom:0;
  width:var(--watch);
  font-size:calc(var(--watch) / 12);
  filter:drop-shadow(0 12px 14px #000c);
}
.watch-band {
  display:block;
  height:calc(var(--watch) * .42);
  margin-inline:15%;
  background:linear-gradient(90deg,#17131c,#2b2333 50%,#17131c);
}
.watch-band:first-child {
  margin-bottom:-6%;
  mask-image:linear-gradient(transparent,#000 70%);
}
.watch-band:last-child {
  height:calc(var(--watch) * .3);
  margin-top:-6%;
  border-radius:0 0 18% 18%/0 0 30% 30%;
  background:linear-gradient(#0000 55%,#0007),linear-gradient(90deg,#17131c,#2b2333 50%,#17131c);
}
.watch-case {
  position:relative;
  z-index:1;
  aspect-ratio:39/46;
  padding:7%;
  border-radius:27%/23%;
  background:linear-gradient(150deg,#56505e,#1d1a22 35%,#141217 70%,#45404d);
  box-shadow:inset 0 0 0 1px #77708080,inset 0 0 0 3px #060508;
}
.watch-case::before,.watch-case::after {
  content:'';
  position:absolute;
}
.watch-case::before {
  right:-5%;
  top:20%;
  width:6%;
  height:17%;
  border-radius:2px 4px 4px 2px;
  background:repeating-linear-gradient(#37323d 0 2px,#5f5868 2px 3px);
}
.watch-case::after {
  right:-2.5%;
  top:46%;
  width:3%;
  height:20%;
  border-radius:0 3px 3px 0;
  background:linear-gradient(#2b2631,#4b4552,#2b2631);
}
.watch-screen {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  padding:13% 11% 12%;
  border-radius:22%/18%;
  background:radial-gradient(ellipse at 50% 35%,#2b1639,#000 72%);
  overflow:hidden;
}
.watch-status {
  display:flex;
  justify-content:space-between;
  gap:.5em;
  line-height:1;
}
.watch-status span:first-child {
  min-width:0;
  overflow:hidden;
  color:var(--pink);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.watch-bpm {
  display:flex;
  align-items:center;
  gap:.3em;
}
.watch-heart {
  width:1.5em;
  height:1.5em;
  fill:var(--pink);
  filter:drop-shadow(0 0 .3em var(--pink));
  animation:heartbeat var(--beat,.4s) ease-in-out infinite;
}
.bpm {
  font-family:DSEG7,monospace;
  font-size:2.5em;
  line-height:1;
  color:var(--pink);
  text-shadow:0 0 .25em #ff5cb8aa;
}
.unit {
  align-self:flex-end;
  font-size:.8em;
  letter-spacing:.08em;
  color:var(--cyan);
}
.watch-trace {
  width:100%;
  height:2.2em;
  fill:none;
  stroke:var(--cyan);
  stroke-width:1.5px;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 .2em var(--cyan));
}
/* Heart rate recovery: the curve grows with the rest timer, led by a glowing dot. */
.watch-trace polyline {
  vector-effect:non-scaling-stroke;
}
.watch-trace polygon {
  fill:url(#watch-glow);
  stroke:none;
}
.watch-trace circle {
  fill:#c9fffd;
  stroke:none;
}
.watch-rest {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  font-size:.8em;
  letter-spacing:.08em;
  color:var(--muted);
}
/* A digital rest timer over its unlit segments, like the player display. */
.watch-timer {
  position:relative;
  isolation:isolate;
  font-family:DSEG7,monospace;
  font-size:2.1em;
  line-height:1;
  letter-spacing:0;
  color:var(--cyan);
  text-shadow:0 0 .25em #4be8e6aa;
}
.watch-timer::before {
  content:'8:88';
  position:absolute;
  inset:0;
  z-index:-1;
  color:#4be8e61a;
  text-shadow:none;
}
@keyframes heartbeat {
  0%,50%,100% { transform:scale(1); }
  18% { transform:scale(1.16); }
}

footer {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  border-top:1px solid var(--stroke);
  padding-block:30px 40px;
  color:var(--muted);
  font-size:13px;
}
/* Brighter than the footer text, without an underline; pink on hover. */
footer a {
  color:var(--text);
  text-decoration:none;
  transition:color .2s ease;
}
footer a:hover {
  color:var(--pink);
}
.celebration {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  width:min(420px,calc(100% - 32px));
  z-index:20;
  background:var(--surface);
  border:1px solid var(--pink);
  border-radius:8px;
  padding:20px;
  text-align:center;
  box-shadow:0 10px 60px #000b;
}
.celebration:not([hidden]) img {
  animation:sparkle 1s ease-in-out 3;
}
.celebration button {
  margin-top:12px;
  background:var(--pink);
  color:var(--ink);
  padding:10px 20px;
  border-radius:3px;
}
.celebration p {
  font-size:17px;
}
@keyframes sparkle {
  50% {
    filter:brightness(1.7);
    transform:rotate(12deg);
  }
}
[hidden] {
  display:none!important;
}
.motion-paused * {
  animation-play-state:paused!important;
  transition:none!important;
}
@media(max-width:800px) {
  .hero-copy {
    padding-left:8px;
  }
  .hero-actions {
    gap:15px;
    flex-wrap:wrap;
  }
  .chrome {
    font-size:80px;
  }
  .tagline {
    font-size:18px;
    white-space:normal;
  }
  .walkman {
    width:min(370px,100%);
  }
  .player-switcher button {
    padding-inline:8px;
  }
  .side {
    padding:22px 18px;
  }
  .track {
    font-size:15px;
    gap:6px;
    padding-inline:6px;
  }
}
@media(max-width:600px) {
  body {
    font-size:17px;
  }
  .hero {
    padding-block:32px 28px;
  }
  .hero-layout {
    grid-template-columns:1fr;
    gap:26px;
  }
  .hero-copy {
    padding:0;
    text-align:center;
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:.12em;
  }
  .chrome {
    max-width:100%;
    font-size:clamp(44px,12vw,72px);
    line-height:1;
    margin-block:18px 22px;
    letter-spacing:-.04em;
    white-space:nowrap;
  }
  .chrome br {
    display:none;
  }
  .tagline {
    font-size:18px;
  }
  /* Press play stays centred; the karaoke icon appears in the column beside it. */
  .hero-actions {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    margin-block:24px 20px;
    gap:12px;
  }
  .hero-actions .primary {
    grid-column:2;
  }
  .karaoke-button {
    justify-self:start;
    justify-content:center;
    width:48px;
    height:48px;
    padding:0;
  }
  .karaoke-button span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .primary {
    font-size:16px;
    padding:0 19px;
    height:48px;
  }
  .hero-line {
    font-size:20px;
  }
  .hero-next {
    font-size:14px;
  }
  .walkman {
    width:min(420px,100%);
  }
  .hero-art {
    background:radial-gradient(ellipse 140% 50% at 50% 100%,#61327147,transparent 70%),radial-gradient(ellipse 90% 45% at 50% 62%,#6132712e,transparent 70%);
  }
  .grid {
    bottom:-90px;
  }
  .section-top {
    margin-bottom:24px;
  }
  .jcard {
    padding-block:15px 45px;
  }
  .cassette-case {
    --wall:14px;
    padding-block:10px;
    border-radius:5px;
  }
  .jcard-spine {
    gap:12px;
    padding:8px 18px;
    font-size:13px;
  }
  .jcard-paper {
    grid-template-columns:1fr;
  }
  .side {
    padding:23px 18px;
  }
  .side+.side {
    border-left:0;
    border-top:1px dashed #5c526d66;
  }
  .track {
    font-size:17px;
    min-height:56px;
    gap:10px;
  }
  .side-heading {
    padding-bottom:10px;
  }
  .app-preview {
    grid-template-columns:1fr;
    gap:40px;
    padding-block:96px 64px;
    text-align:center;
  }
  .neon-sign {
    top:28px;
    right:6px;
    font-size:20px;
  }
  .app-preview h2 {
    font-size:36px;
  }
  .app-stage {
    order:0;
  }
  .chrome.app-logo {
    font-size:clamp(36px,10vw,56px);
  }
  /* Copy and stage stack on phones, so the sweatband follows the wordmark. */
  .sweatband {
    position:static;
    display:block;
    width:130px;
    margin:4px 6% 0 auto;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}

/* Full-screen karaoke dialog. */
.karaoke-dialog button,.timing-page button { min-height:44px; padding:8px 16px; background:var(--raised); border:1px solid var(--stroke); border-radius:6px; }
body.karaoke-open { overflow:hidden; }
.karaoke-dialog { position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; border:0; padding:24px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background:radial-gradient(ellipse at 50% 30%,#30203f,var(--bg) 75%); color:var(--text); }
.karaoke-dialog[open] { display:flex; flex-direction:column; align-items:center; gap:16px; }
.karaoke-dialog::backdrop { background:var(--bg); }
.karaoke-dialog::after { content:''; position:fixed; inset:0; pointer-events:none; opacity:.16; background:repeating-linear-gradient(transparent 0 3px,#000 3px 4px); }
.karaoke-dialog .karaoke-close { position:absolute; z-index:1; top:16px; right:max(16px,env(safe-area-inset-right)); display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; background:#ffffff0f; }
.karaoke-close svg { width:20px; height:20px; fill:none; stroke:var(--text); stroke-width:2; stroke-linecap:round; }
.karaoke-title { padding-inline:52px; color:var(--muted); text-align:center; font-size:clamp(18px,3vw,28px); }
.karaoke-stage { flex:1; width:min(100%,1100px); min-height:0; overflow-y:auto; display:flex; flex-direction:column; justify-content:safe center; align-items:center; text-align:center; gap:24px; padding-block:24px; }
.karaoke-line { font-family:'Tilt Neon',sans-serif; font-size:clamp(28px,5vw,68px); line-height:1.35; color:var(--text); text-shadow:0 0 18px #ff5cb833; overflow-wrap:anywhere; }
.karaoke-line:empty { display:none; }
.karaoke-word { display:inline-block; max-width:100%; }
.karaoke-line .wiped { color:var(--pink); }
.karaoke-next-line { color:var(--muted); font-size:clamp(20px,3vw,36px); }
.karaoke-countdown { color:var(--cyan); font-size:32px; letter-spacing:.3em; min-height:48px; }
.karaoke-dialog button:disabled { opacity:.45; cursor:default; }
/* A pocket player in the hero's design language: silver piano keys on top, the
   same display and power LED, and the chosen player's body and stripes. */
.mini-deck { width:min(340px,100%); }
.mini-keys { position:relative; z-index:0; display:flex; justify-content:center; gap:4px; margin-bottom:-8px; }
.karaoke-dialog .mini-key { display:grid; place-items:center; width:64px; min-height:44px; padding:0 0 8px; border:1px solid #8d8d95; border-bottom:0; border-radius:6px 6px 2px 2px; color:#3a3a40; background:linear-gradient(#f4f4f6,#d4d4d9 45%,#b5b5bc); box-shadow:inset 0 1px 0 #fff,inset 0 -8px 8px -8px #0006; transition:transform .08s ease; }
.karaoke-dialog .mini-key:hover { background:linear-gradient(#fff,#dcdce1 45%,#bdbdc4); }
.karaoke-dialog .mini-key:active { transform:translateY(3px); }
.karaoke-dialog .mini-key:disabled { opacity:1; color:#3a3a4052; }
.mini-key svg { width:18px; height:18px; fill:currentColor; }
.mini-key .pause-icon,.mini-deck.is-playing .mini-key .play-icon { display:none; }
.mini-deck.is-playing .mini-key .pause-icon { display:block; }
.mini-body { position:relative; z-index:1; padding:12px 14px 20px; border-radius:12px; background:repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 3px),linear-gradient(#2f6fd6,#1b4aa6); box-shadow:inset 0 1px 0 #ffffff59,inset 0 -2px 4px #0006,0 18px 30px -14px #000; }
.mini-body::after { content:''; position:absolute; left:14px; right:14px; bottom:8px; height:5px; background:linear-gradient(var(--pink) 0 2px,transparent 2px 3px,var(--cyan) 3px); }
.mini-display { overflow:hidden; aspect-ratio:var(--display-ratio,5.56); border-radius:7px; background:#070c0e; box-shadow:inset 0 0 0 2px #0009,0 1px 0 #ffffff33; }
.mini-display canvas { display:block; width:100%; height:100%; }
.mini-led { position:absolute; top:5px; right:9px; width:5px; height:5px; border-radius:50%; background:#4d0204cc; }
.mini-deck.is-playing .mini-led { background:#ff4c37; box-shadow:0 0 5px 2px #ff302bb3; }
.mini-deck[data-skin=autoreverse] .mini-body { background:repeating-linear-gradient(90deg,#ffffff1f 0 1px,transparent 1px 3px),linear-gradient(#dcdcdf,#a7a7ad); box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px #0005,0 18px 30px -14px #000; }
.mini-deck[data-skin=neon] .mini-body { background:repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 3px),linear-gradient(#222228,#0c0c10); box-shadow:inset 0 0 0 2px #a9a9b2,inset 0 0 0 3px #0008,0 18px 30px -14px #000; }
@media(max-width:600px) {
  .karaoke-stage { gap:20px; }
}
@media(prefers-reduced-motion:reduce) {
  .karaoke-line,.hero-line .wiped { text-shadow:none; }
  .now i { transform:scaleY(var(--level)); }
  .now i:nth-child(1) { --level:.6; }
  .now i:nth-child(2) { --level:1; }
  .now i:nth-child(3) { --level:.4; }
}