:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #f9ead8; background: #090e1b; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(ellipse 80% 55% at 50% 3%, #3a2c4b, #15192b 54%, transparent), radial-gradient(ellipse 65% 50% at 50% 80%, #142134, transparent), #080d17; }
a { color: #f5bd65; }
.shell { width: min(100%, 3500px); height: 100svh; min-height: 0; margin: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: clamp(12px, 1.4vw, 36px) clamp(12px, 3vw, 80px); gap: clamp(8px, .75vw, 20px); }
header, .metrics, footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
header h1 { margin: 0; font: 700 clamp(1.4rem, 1.8vw, 3.25rem)/1 Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
header .eyebrow { margin: 0 0 4px; color: #f5bd65; font-size: clamp(.7rem, .63vw, 1.08rem); letter-spacing: .25em; font-weight: 800; }
header a { font-size: clamp(.85rem, .8vw, 1.2rem); white-space: nowrap; }
.metrics { grid-row: 2; grid-column: 1; position: relative; z-index: 2; align-self: start; justify-self: center; justify-content: flex-end; width: min(100%, calc((100svh - clamp(235px, 19svh, 350px)) * 4 / 3), 2360px); margin-top: clamp(40px, 5vw, 76px); text-align: center; pointer-events: none; }
.metrics::before { content: ""; position: absolute; top: 0; right: 0; width: min(100%, 480px); height: 2px; background: linear-gradient(90deg, #f5bd65, #ee649a 35%, #76d6da 65%, #a58af1); box-shadow: 0 0 16px #f5bd6577; }
.metrics::after { content: ""; position: absolute; right: 0; bottom: -8px; width: min(100%, 480px); height: 8px; pointer-events: none; background: linear-gradient(90deg, #f5bd6588, #ee649a66 35%, #76d6da66 65%, #a58af188); clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%); opacity: .65; }
.metrics div { flex: none; min-width: 0; width: clamp(102px, 8.5vw, 160px); padding: clamp(8px, .7vw, 18px) 6px; background: linear-gradient(110deg, #12182af2, #261e37ed); border-top: 1px solid #b99cb080; border-bottom: 1px solid #b99cb080; box-shadow: 0 12px 38px #0008, inset 0 1px #ffffff16; backdrop-filter: blur(8px); }
.metrics div:first-child { width: clamp(126px, 11vw, 200px); border-left: 1px solid #b99cb080; border-radius: 12px 0 0 6px; }
.metrics div:last-child { border-right: 1px solid #b99cb080; border-radius: 0 12px 6px 0; }
.metrics div + div { border-left: 1px solid #e7caa51d; }
.metrics span { display: block; color: #dfd3e6; text-transform: uppercase; font-size: clamp(.7rem, .75vw, 1.35rem); letter-spacing: .15em; font-weight: 700; }
.metrics strong { display: block; margin-top: 2px; font-size: clamp(1.4rem, 1.9vw, 3rem); line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.metrics div:first-child strong { color: #fff0d3; font-size: clamp(1.8rem, 2.3vw, 3.8rem); text-shadow: 0 0 22px #f5bd6570; }
.metrics div:nth-child(2) strong { color: #91e2e5; }
.metrics div:last-child strong { color: #d8c7e8; font-size: clamp(1.15rem, 1.4vw, 2.1rem); }
.stage { grid-row: 2; grid-column: 1; position: relative; min-height: 0; padding-top: clamp(62px, 7vw, 108px); display: grid; place-items: center; isolation: isolate; overflow: hidden; border: 1px solid #9d80942b; border-radius: clamp(18px, 2vw, 32px); background: linear-gradient(90deg, #080f1dc9, #10122555 24%, #10122555 76%, #080f1dc9), url("../art/loom-chamber.webp") center / cover no-repeat; box-shadow: inset 0 0 80px #060c18a8, 0 22px 70px #0004; }
.stage::before { content: ""; position: absolute; inset: 4% 5%; pointer-events: none; border: 1px solid #f5bd6520; border-radius: inherit; background: linear-gradient(90deg, transparent 0 12.4%, #f5bd6528 12.5%, transparent 12.6% 37.4%, #ee649a28 37.5%, transparent 37.6% 62.4%, #76d6da28 62.5%, transparent 62.6% 87.4%, #a58af128 87.5%, transparent 87.6%); -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 72% 80% at 50% 52%, #080c1d7a, transparent 78%), linear-gradient(0deg, #070d19ac, transparent 16%, transparent 84%, #070d1980); }
canvas { position: relative; z-index: 1; display: block; width: min(100%, calc((100svh - clamp(235px, 19svh, 350px)) * 4 / 3), 2360px); max-height: calc(100svh - clamp(235px, 19svh, 350px)); aspect-ratio: 4 / 3; border: 2px solid #927298; border-radius: clamp(14px, 1vw, 25px); box-shadow: 0 28px 90px #000b, 0 0 0 1px #eabfd32e, 0 0 65px #b577c033; touch-action: none; }
.song-readout { position: absolute; z-index: 2; left: 50%; bottom: clamp(8px, 1vw, 20px); transform: translateX(-50%); width: min(calc(100% - 20px), calc((100svh - clamp(235px, 19svh, 350px)) * 4 / 3), 2360px); display: flex; align-items: center; gap: clamp(8px, 1vw, 22px); padding: 5px clamp(8px, 1vw, 18px); border: 1px solid #b99cb04d; border-radius: 4px 4px 10px 10px; color: #f5dec4; background: linear-gradient(90deg, #10182ce8, #251b36eb 50%, #10182ce8); box-shadow: 0 6px 22px #0008; font-size: clamp(.72rem, .8vw, 1.2rem); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.song-readout[hidden] { display: none; }
.song-readout span { color: #f5dec4; }
.song-readout progress { flex: 1; min-width: 24px; height: clamp(7px, .6vw, 12px); border: 1px solid #f5bd6555; border-radius: 999px; background: #0a1020; overflow: hidden; appearance: none; -webkit-appearance: none; }
.song-readout progress::-webkit-progress-bar { background: #0a1020; }
.song-readout progress::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #f5bd65, #ee649a 38%, #76d6da 74%, #a58af1); box-shadow: 0 0 12px #f5bd65aa; }
.song-readout progress::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, #f5bd65, #ee649a 38%, #76d6da 74%, #a58af1); }
.song-readout strong { min-width: 3ch; text-align: right; color: #fff0d3; }
.panel { position: absolute; z-index: 2; width: min(88%, 600px); padding: clamp(22px, 3vw, 48px); text-align: center; background: #101a2ff2; border: 1px solid #f5bd65; border-radius: 18px; box-shadow: 0 24px 70px #000c; }
.panel[hidden] { display: none; }
.panel .kicker { color: #f5bd65; letter-spacing: .26em; font-size: .7rem; font-weight: 800; }
.panel h2 { font: 700 clamp(2rem, 4vw, 4rem)/.95 Georgia, serif; margin: 10px 0; }
.panel p { line-height: 1.5; color: #e3dce5; }
button { font: inherit; cursor: pointer; }
#start { margin-top: 8px; min-height: 52px; padding: 0 30px; border: 0; border-radius: 7px; color: #1a1725; background: #f5bd65; font-weight: 900; letter-spacing: .14em; }
#start:focus-visible, a:focus-visible { outline: 3px solid #76d6da; outline-offset: 3px; }
footer { color: #b9b6c9; font-size: clamp(.82rem, .8vw, 1.2rem); }
footer p { margin: 0; }
#feedback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#feedback.audio-warning { position: static; width: auto; height: auto; overflow: visible; clip-path: none; grid-column: 1 / -1; justify-self: center; color: #ffd194; font-weight: 800; letter-spacing: .05em; text-align: center; }
@media (min-width: 2000px) { header .eyebrow { font-size: 1.3rem; } header h1 { font-size: 4rem; } header a { font-size: 1.4rem; } footer { font-size: 1.5rem; } }
@media (min-width: 1200px) and (min-height: 600px) {
  .metrics { align-self: end; justify-self: stretch; width: 100%; height: 0; margin: 0; }
  .metrics::before, .metrics::after { display: none; }
  .metrics div, .metrics div:first-child, .metrics div:last-child { position: absolute; bottom: clamp(48px, 5vw, 110px); width: clamp(160px, 12vw, 340px); padding: clamp(12px, 1vw, 24px); border: 1px solid #b99cb080; border-radius: 12px; background: linear-gradient(110deg, #12182af2, #261e37ed); box-shadow: 0 12px 38px #0008, inset 0 1px #ffffff16; }
  .metrics div:first-child { left: 1.5%; }
  .metrics div:nth-child(2) { right: 1.5%; border-left: 1px solid #b99cb080; }
  .metrics div:last-child { right: 1.5%; bottom: clamp(158px, 12vw, 260px); }
  .metrics strong { font-size: clamp(2rem, 2.2vw, 4.8rem); }
  .metrics div:first-child strong { font-size: clamp(2.5rem, 3vw, 6rem); }
  .metrics div:last-child strong { font-size: clamp(1.5rem, 1.6vw, 3rem); }
}
@media (max-width: 580px) {
  .shell { padding: 8px; gap: 7px; }
  header { gap: 8px; }
  header h1 { font-size: 1.25rem; }
  header a { font-size: .78rem; }
  .metrics { width: min(100%, calc((100svh - 150px) * 8 / 13)); margin-top: 7px; gap: 0; justify-content: space-between; padding: 7px 2px; background: linear-gradient(100deg, #12182aef, #261e37e6 52%, #12182aef); border: 1px solid #b99cb080; border-radius: 12px 12px 6px 6px; box-shadow: 0 12px 38px #0008, inset 0 1px #ffffff16, 0 0 28px #e28eb322; backdrop-filter: blur(8px); }
  .metrics::before, .metrics::after { width: 100%; }
  .metrics div, .metrics div:first-child, .metrics div:last-child { flex: 1; width: auto; padding: 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
  .metrics div + div { border-left: 1px solid #e7caa51d; }
  .metrics::after { bottom: -9px; height: 8px; }
  .metrics div:first-child { flex: 1.35; }
  .metrics div:nth-child(2) { flex: 1.05; }
  .metrics div:last-child { flex: .9; }
  .metrics span { font-size: .7rem; letter-spacing: .08em; }
  .metrics strong { font-size: 1.5rem; }
  .metrics div:first-child strong { font-size: 2rem; }
  .metrics div:nth-child(2) strong { color: #b6fbff; text-shadow: 0 0 14px #76d6da66; }
  .metrics div:last-child strong { font-size: 1.1rem; }
  .stage { padding-top: 65px; border-radius: 18px; background: radial-gradient(ellipse 75% 30% at 50% 48%, #50305977, transparent 85%), repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #e2b6e316 calc(25% - 1px) 25%), linear-gradient(#12182a, #15182b 55%, #101b2b); }
  .stage::before { inset: 3% 4%; background: linear-gradient(90deg, transparent 0 12.4%, #f5bd6538 12.5%, transparent 12.6% 37.4%, #ee649a38 37.5%, transparent 37.6% 62.4%, #76d6da38 62.5%, transparent 62.6% 87.4%, #a58af138 87.5%, transparent 87.6%); }
  .stage::after { display: none; }
  canvas { width: min(100%, calc((100svh - 150px) * 8 / 13)); max-height: calc(100svh - 150px); aspect-ratio: 8 / 13; }
  .song-readout { width: min(calc(100% - 16px), calc((100svh - 150px) * 8 / 13)); bottom: 6px; gap: 6px; padding: 5px 7px; font-size: .75rem; letter-spacing: .04em; }
  .song-readout span { font-size: 0; }
  .song-readout span::after { content: "Song"; font-size: .75rem; }
  .song-readout progress { height: 10px; }
  footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-size: .87rem; line-height: 1.25; }
  footer p:first-child { grid-column: 1; grid-row: 1; text-align: left; color: #f5d9ac; font-weight: 800; }
  footer a { grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap; }
  footer #feedback.audio-warning { grid-row: 2; padding: 3px 8px; border: 1px solid #f5bd6570; border-radius: 6px; background: #33251ce8; }
}
@media (max-width: 580px) and (max-height: 650px) {
  .shell { padding: 4px 6px; gap: 3px; }
  header .eyebrow { margin-bottom: 2px; font-size: .56rem; letter-spacing: .11em; white-space: nowrap; }
  header h1 { font-size: 1.18rem; }
  .metrics { width: min(100%, calc((100svh - 140px) * 2 / 3)); margin-top: 0; padding: 5px 2px; }
  .metrics span { font-size: .73rem; }
  .metrics div:last-child span { font-size: .62rem; }
  .stage { padding-top: 66px; }
  canvas { width: min(100%, calc((100svh - 140px) * 2 / 3)); max-height: calc(100svh - 140px); aspect-ratio: 2 / 3; }
  .song-readout { width: min(calc(100% - 12px), calc((100svh - 140px) * 2 / 3)); bottom: 3px; padding: 5px 7px; }
  .song-readout, .song-readout span::after { font-size: .85rem; }
  .song-readout progress { height: 12px; }
  .metrics strong { font-size: 1.48rem; }
  .metrics div:first-child strong { font-size: 1.88rem; }
  footer { font-size: .82rem; }
  .panel { padding: 18px; }
  .panel h2 { font-size: 1.8rem; }
  .panel p { font-size: .88rem; line-height: 1.35; }
}
@media (max-width: 360px) {
  footer p:first-child { font-size: 0; white-space: nowrap; }
  footer p:first-child::after { content: "Tap rings · D F J K"; font-size: .82rem; }
}
@media (max-width: 580px) and (min-height: 700px) {
  .metrics { margin-top: 35px; }
}
@media (max-width: 580px) and (max-height: 650px) {
  body:has(#feedback.audio-warning) canvas { width: min(100%, calc((100svh - 175px) * 2 / 3)); max-height: calc(100svh - 175px); }
}
@media (min-width: 581px) and (max-width: 900px) and (min-height: 700px) and (orientation: portrait) {
  .stage { padding-top: clamp(100px, 11svh, 124px); }
  canvas { width: min(100%, 780px); max-height: calc(100svh - 250px); aspect-ratio: 1 / 1; }
  .song-readout { width: min(calc(100% - 20px), 780px); }
}
@media (max-height: 440px) {
  .shell { width: 100%; height: 100svh; min-height: 0; padding: 4px 10px; gap: 4px; display: grid; grid-template-columns: clamp(96px, 13vw, 120px) minmax(0, 1fr) clamp(132px, 17vw, 160px); grid-template-rows: minmax(0, 1fr) auto; }
  header { grid-column: 1; grid-row: 1; z-index: 2; align-self: stretch; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 10px; border-right: 1px solid #b99cb05c; border-radius: 14px 0 0 14px; background: linear-gradient(90deg, #101629e8, #101629b8); box-shadow: inset 0 1px #ffffff0d; }
  header .eyebrow { display: none; }
  header h1 { font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.1; }
  header a { white-space: nowrap; font-size: .68rem; letter-spacing: -.015em; line-height: 1.25; }
  .metrics { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; width: clamp(132px, 17vw, 160px); height: auto; margin: 0 0 29px; transform: none; flex-direction: column; justify-content: flex-end; padding: 6px 5px 5px; gap: 0; border: 1px solid #b99cb05c; border-radius: 10px; background: linear-gradient(90deg, #101629e8, #101629bb); box-shadow: 0 8px 24px #0009, inset 0 1px #ffffff16; backdrop-filter: blur(5px); }
  .metrics::after { display: none; }
  .metrics div, .metrics div:first-child, .metrics div:last-child { position: static; width: 100%; flex: none; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
  .metrics div:first-child, .metrics div:last-child { width: 100%; border-radius: 0; }
  .metrics div:first-child { order: 0; padding-bottom: 5px; border-top: 0; }
  .metrics div:nth-child(2) { order: 1; padding: 4px 0 5px; }
  .metrics div:last-child { order: 2; padding-top: 4px; border-bottom: 0; }
  .metrics div + div { border-left: 0; border-top: 1px solid #e7caa52b; }
  .metrics span { font-size: .62rem; letter-spacing: .08em; }
  .metrics strong { font-size: 1.5rem; line-height: 1; }
  .metrics div:first-child strong { font-size: 2.6rem; }
  .metrics div:nth-child(2) strong { font-size: 2rem; }
  .metrics div:last-child strong { font-size: .95rem; }
  .stage { grid-column: 1 / -1; grid-row: 1; min-width: 0; padding-top: 0; border-radius: 14px; }
  .stage::before, .stage::after { display: none; }
  canvas { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(calc(100% - 270px), 548px); height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: auto; }
  .song-readout { width: min(calc(100% - 270px), 548px); bottom: 2px; padding: 5px 7px; gap: 8px; font-size: .75rem; }
  .song-readout progress { height: 10px; }
  .song-readout span::after { font-size: .67rem; }
  footer { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: nowrap; gap: 8px; font-size: .82rem; line-height: 1.1; min-height: 20px; }
  footer p:first-child { flex: 1; white-space: nowrap; }
  footer #feedback.audio-warning { flex: none; font-size: .75rem; white-space: nowrap; }
  body:has(#feedback.audio-warning) footer p:first-child { display: none; }
  footer a { white-space: nowrap; }
  .panel { padding: 12px; }
  .panel h2 { font-size: 1.5rem; }
  .panel p { margin: 7px 0; font-size: .8rem; }
  #start { min-height: 38px; }
}