:root  {
  --paper:#f2f0e9;
  --ink:#232623;
  --muted:#666a63;
  --line:#d8d8d0;
  --accent:#c4422c;
  --accent-hover:#a93220;
  --metal-top:#f1f1ec;
  --metal-mid:#ddded9;
  --metal-bottom:#caccc6;
  --key:#e8e9e3;
  --key-bottom:#d4d6cf;
  --screen:#dce3b5;
  --screen-deep:#bdc990;
  --screen-ink:#354334;
  --well:#5c6055;
  --focus:#2857a0;
  --sans:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  color-scheme:light;
}

* {
  box-sizing:border-box
}

[hidden] {
  display:none!important
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s,color .3s
}

button,input,a {
  -webkit-tap-highlight-color:transparent
}

button,input {
  font:inherit
}

button,a {
  touch-action:manipulation
}

button {
  color:inherit;
  cursor:pointer
}

button {
  border:0
}

button:disabled {
  cursor:not-allowed
}

a {
  color:inherit;
  text-decoration:none
}

p,h1,h2,h3 {
  margin:0
}

p {
  text-wrap:pretty
}

button:focus-visible,a:focus-visible,input:focus-visible,[tabindex="0"]:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:5px
}

svg {
  display:block;
  width:20px;
  height:20px;
  stroke:currentColor;
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  padding:14px 20px;
  background:var(--ink);
  color:var(--paper);
  z-index:100
}

.skip-link:focus {
  top:16px
}

.site-header {
  max-width:1440px;
  margin:auto;
  padding:32px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:13px;
  font-weight:750;
  letter-spacing:1.3px;
  line-height:1.35
}

.brand-second {
  display:block;
  font-size:10px;
  font-weight:550;
  letter-spacing:3.1px;
  margin-top:2px
}

.brand-mark {
  display:flex;
  align-items:center;
  gap:3px;
  height:34px
}

.brand-mark i {
  display:block;
  width:4px;
  background:var(--accent);
  height:16px;
  border-radius:2px
}

.brand-mark i:nth-child(2) {
  height:26px
}

.brand-mark i:nth-child(3) {
  height:34px
}

.brand-mark i:nth-child(4) {
  height:22px
}

.brand-mark i:nth-child(5) {
  height:12px
}

.header-actions {
  display:flex;
  align-items:center;
  gap:32px
}

.privacy-status {
  font-size:12px;
  color:var(--muted)
}

.utility-button {
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 0 11px 16px;
  background:none;
  font-size:12px;
  min-height:44px
}

.appearance-icon {
  width:16px;
  height:16px;
  border:1.3px solid currentColor;
  border-radius:50%;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%)
}

.listening-room {
  max-width:1360px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:6%;
  padding:65px 5% 46px;
  align-items:center
}

.hero-copy {
  padding-bottom:45px;
  min-width:0
}

.eyebrow {
  display:flex;
  gap:10px;
  align-items:center;
  font:10px var(--mono);
  letter-spacing:1.6px;
  color:var(--muted);
  margin-bottom:32px
}

.eyebrow>span {
  width:24px;
  height:2px;
  background:var(--accent)
}

h1 {
  font-size:clamp(48px,4.95vw,70px);
  font-weight:650;
  line-height:1.24;
  letter-spacing:-3px;
  white-space:nowrap
}

.memory-word {
  position:relative;
  color:var(--accent)
}

.memory-word:after {
  content:"";
  position:absolute;
  height:4px;
  left:3px;
  right:0;
  bottom:-5px;
  background:var(--accent);
  border-radius:50%;
  transform:rotate(-3deg);
  opacity:.7
}

.hand-note {
  font-family:"Baskerville","Times New Roman",serif;
  font-style:italic;
  font-size:26px;
  color:var(--accent);
  letter-spacing:-.4px;
  transform:rotate(-5deg);
  transform-origin:left center;
  margin:25px 0 33px 25px
}

.hero-lede {
  font-size:17px;
  line-height:1.9;
  font-weight:450
}

.hero-explanation {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  margin-top:16px
}

.hero-actions {
  margin-top:34px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px
}

.primary-action {
  display:flex;
  gap:12px;
  align-items:center;
  background:var(--accent);
  color:#fffaf2;
  padding:17px 20px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  min-width:226px;
  box-shadow:0 3px 0 var(--accent-hover),inset 0 1px 0 #ffffff40;
  transition:transform .18s,background-color .18s,box-shadow .18s
}

.plus-icon {
  font-size:24px;
  font-weight:300;
  line-height:20px
}

.action-arrow {
  margin-left:auto;
  font-weight:400;
  font-size:20px
}

.demo-action {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 1px;
  background:none;
  min-height:44px;
  color:var(--muted);
  font-size:13px
}

.demo-action>span {
  font-size:22px;
  color:var(--ink)
}

.local-note {
  font-size:11px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:22px;
  line-height:1.7
}

.local-note svg {
  width:15px;
  height:15px;
  flex-shrink:0
}

.player-shell {
  min-width:0;
  outline:none;
  position:relative
}

.instrument {
  position:relative;
  border:1px solid #c1c4bc;
  border-radius:32px;
  background:linear-gradient(145deg,var(--metal-top) 0%,var(--metal-mid) 52%,var(--metal-bottom) 100%);
  padding:26px 28px 18px;
  box-shadow:inset 0 2px 1px #fffffff2,inset 0 -4px 2px #858c8066,0 2px 2px #282e251c,0 15px 25px -16px #2e3e3570,0 36px 60px -35px #28352c55;
  isolation:isolate
}

.instrument:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#ffffff18 2px 3px);
  pointer-events:none
}

.instrument-heading {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:21px;
  min-height:33px
}

.device-wordmark {
  font-size:19px;
  font-weight:750;
  letter-spacing:-.9px;
  line-height:1.05
}

.device-wordmark>span {
  display:block;
  font:7px var(--mono);
  letter-spacing:1.05px;
  margin-top:8px;
  opacity:.6
}

.device-status {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  white-space:nowrap;
  color:var(--muted)
}

.power-light {
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#657358;
  box-shadow:0 0 0 2px #52634312
}

.speaker-grille {
  width:47px;
  height:27px;
  background-image:radial-gradient(circle,#555e53 1px,transparent 1.5px);
  background-size:5px 5px;
  opacity:.55;
  margin-left:8px
}

.screen-bezel {
  padding:9px;
  border-radius:19px;
  background:linear-gradient(155deg,#a7ada0,#ebeee6);
  box-shadow:inset 0 1px 3px #65715e66,0 1px 0 #ffffffaa
}

.lcd-window {
  position:relative;
  min-width:0;
  border-radius:11px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--screen),var(--screen-deep));
  color:var(--screen-ink);
  box-shadow:inset 0 2px 8px #263c3445,inset 0 0 0 1px #25392e3b;
  cursor:pointer
}

.lcd-window:before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.27;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#34433314 2px 3px)
}

.lcd-window:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  border-radius:inherit;
  background:linear-gradient(120deg,#ffffff20,transparent 48%,#ffffff09)
}

.lcd-window.is-dragging {
  outline:3px solid var(--accent);
  outline-offset:-4px
}

.lcd-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 19px;
  padding:14px 0 10px;
  border-bottom:1px solid #35433432;
  font:9px var(--mono);
  letter-spacing:.6px
}

.lcd-header strong {
  font-size:9px;
  font-weight:500
}

.state-layer {
  height:191px;
  padding:20px;
  position:relative
}

.lcd-empty {
  display:flex;
  align-items:center;
  gap:23px;
  padding:17px 23px
}

.sound-emblem {
  position:relative;
  width:134px;
  height:134px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  opacity:.83
}

.emblem-rings {
  position:absolute;
  inset:3px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.42
}

.emblem-rings:before,.emblem-rings:after {
  content:"";
  position:absolute;
  border:1px solid currentColor;
  border-radius:50%;
  inset:10px
}

.emblem-rings:after {
  inset:21px
}

.emblem-bars {
  display:flex;
  align-items:center;
  gap:4px;
  transform:rotate(-12deg)
}

.emblem-bars i {
  display:block;
  width:6px;
  height:25px;
  background:currentColor
}

.emblem-bars i:nth-child(2n) {
  height:48px
}

.emblem-bars i:nth-child(3n) {
  height:66px
}

.emblem-bars i:nth-child(4n) {
  height:39px
}

.empty-copy {
  min-width:0
}

.empty-copy>p {
  font:8px var(--mono);
  letter-spacing:.8px;
  opacity:.7;
  margin-bottom:12px
}

.empty-copy h2 {
  font-size:28px;
  line-height:1.4;
  letter-spacing:-.7px;
  font-weight:600
}

.empty-copy>span {
  display:block;
  font-size:10px;
  margin-top:11px;
  line-height:1.5
}

.empty-copy b {
  font-size:18px;
  font-weight:400;
  margin-left:6px
}

.lcd-footer {
  margin:0 19px;
  padding:10px 0 13px;
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid #35433432;
  font:8px var(--mono)
}

.lcd-footer>span:last-child {
  margin-left:auto;
  font-size:8px
}

.screen-dots {
  letter-spacing:3px;
  opacity:.5
}

.lcd-loading,.lcd-error {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap:9px
}

.lcd-loading h2,.lcd-error h2 {
  font-size:19px;
  font-weight:550
}

.lcd-loading p,.lcd-error p {
  font-size:11px
}

.pixel-loader {
  display:flex;
  gap:4px;
  margin-bottom:8px
}

.pixel-loader i {
  height:8px;
  width:8px;
  background:currentColor;
  animation:load-pulse .8s infinite alternate
}

.pixel-loader i:nth-child(2) {
  animation-delay:.2s
}

.pixel-loader i:nth-child(3) {
  animation-delay:.4s
}

.pixel-loader i:nth-child(4) {
  animation-delay:.6s
}

.error-sign {
  border:1px solid;
  width:25px;
  height:25px;
  border-radius:50%;
  font:20px Georgia,serif
}

.lcd-playing {
  padding:18px 21px 12px;
  display:flex;
  flex-direction:column;
  gap:8px
}

.track-readout {
  display:flex;
  align-items:center;
  gap:15px
}

.track-readout>div {
  min-width:0;
  flex:1
}

.track-readout p {
  font:8px var(--mono);
  letter-spacing:1px;
  margin-bottom:6px;
  opacity:.7
}

.track-readout h2 {
  font-size:21px;
  line-height:1.45;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.track-readout #trackMeta {
  font:8px var(--mono);
  opacity:.75
}

.play-glyph {
  font-size:21px
}

#spectrumCanvas {
  display:block;
  width:100%;
  min-height:37px;
  flex:1;
  height:49px;
  opacity:.8
}

.lcd-file-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:8px var(--mono);
  gap:10px
}

.screen-link {
  background:none;
  color:inherit;
  font-size:10px;
  padding:8px 0;
  min-height:32px;
  text-decoration:underline;
  text-underline-offset:3px
}

.timeline {
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 3px 5px;
  font:10px var(--mono);
  color:var(--muted)
}

.timeline>input {
  flex:1;
  min-width:0
}

.timeline>span {
  font-variant-numeric:tabular-nums
}

input[type="range"] {
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  width:100%;
  height:24px;
  padding:0;
  margin:0;
  cursor:pointer;
  color:var(--ink)
}

input[type="range"]::-webkit-slider-runnable-track {
  height:3px;
  border-radius:2px;
  background:linear-gradient(to right,var(--accent) 0 var(--range-fill,0%),#b2b8ad var(--range-fill,0%) 100%);
  box-shadow:0 1px 0 #ffffff77
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  background:var(--ink);
  border:2px solid var(--metal-top);
  border-radius:50%;
  margin-top:-4.5px;
  box-shadow:0 1px 3px #0003
}

input[type="range"]::-moz-range-track {
  height:3px;
  background:#b2b8ad
}

input[type="range"]::-moz-range-progress {
  background:var(--accent)
}

input[type="range"]::-moz-range-thumb {
  width:10px;
  height:10px;
  border:2px solid var(--metal-top);
  background:var(--ink);
  border-radius:50%
}

input[type="range"]:disabled {
  opacity:.4;
  cursor:not-allowed
}

input[type="range"]:focus-visible {
  outline-offset:1px;
  border-radius:4px
}

.transport-row {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:center;
  padding:7px 3px 23px
}

.transport {
  display:flex;
  align-items:center;
  gap:14px
}

.transport button {
  width:41px;
  height:51px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:none;
  padding:3px
}

.transport button svg {
  height:19px;
  width:19px;
  stroke-width:1.3
}

.transport small,.stop-button small {
  font:7px var(--mono);
  color:var(--muted);
  letter-spacing:.5px
}

.transport button.play-button {
  height:60px;
  width:60px;
  background:var(--accent);
  color:#fff8eb;
  border-radius:50%;
  box-shadow:inset 0 1px 2px #ffdfc780,0 3px 0 var(--accent-hover),0 5px 8px #7638212c;
  transition:transform .18s,box-shadow .18s
}

.play-button>span {
  font-size:20px;
  line-height:1.1
}

.transport .play-button>small {
  color:inherit;
  font-size:6px;
  letter-spacing:1.1px
}

.stop-button {
  display:flex;
  align-items:center;
  gap:7px;
  background:none;
  padding:12px 2px;
  min-height:44px;
  justify-self:start
}

.stop-button>span {
  font-size:12px
}

.volume-control {
  max-width:87px;
  justify-self:end;
  width:100%;
  font-size:9px
}

.volume-control>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px
}

.volume-control output {
  font:8px var(--mono)
}

.transport button:disabled,.stop-button:disabled {
  opacity:.36
}

.transport button.play-button:disabled {
  opacity:.58
}

.mode-bank {
  border-top:1px solid #8d968047;
  padding-top:18px
}

.bank-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px
}

.bank-label h2 {
  font-size:11px;
  font-weight:550
}

.bank-label>span {
  font:7px var(--mono);
  letter-spacing:1px;
  color:var(--muted)
}

.profile-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}

.profile-grid button {
  min-width:0;
  min-height:83px;
  border:1px solid #afb5aa;
  border-radius:9px;
  background:linear-gradient(160deg,var(--key),var(--key-bottom));
  text-align:left;
  padding:10px 11px 11px;
  box-shadow:inset 0 1px 0 #ffffffc7,0 2px 0 #a5ad9e,0 3px 4px #3c483b1a;
  transition:transform .18s,box-shadow .18s,background-color .18s
}

.key-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:9px
}

.key-top>b {
  font:8px var(--mono);
  opacity:.55
}

.key-top>i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#9ca397;
  box-shadow:inset 0 1px 1px #0003
}

.profile-grid strong {
  display:block;
  font-size:11px;
  font-weight:550;
  white-space:nowrap
}

.profile-grid small {
  font:7px var(--mono);
  letter-spacing:.7px;
  display:block;
  margin-top:5px;
  opacity:.55
}

.profile-grid button[aria-pressed="true"] {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
  transform:translateY(2px);
  box-shadow:inset 0 2px 5px #0006,0 1px 0 #ffffffe0
}

.profile-grid button[aria-pressed="true"] .key-top>i {
  background:#e29551;
  box-shadow:0 0 5px #ffa16070
}

.profile-grid button[aria-pressed="true"] small {
  opacity:.7
}

.instrument-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:19px 3px 0;
  min-height:12px
}

.instrument-bottom>span:first-child {
  font:6px var(--mono);
  letter-spacing:1px;
  opacity:.45
}

.screw {
  height:8px;
  width:8px;
  border:1px solid #97a090;
  border-radius:50%;
  background:linear-gradient(130deg,transparent 45%,#97a090 47% 54%,transparent 56%);
  opacity:.7
}

.listening-options {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:23px 12px 0;
  padding-bottom:4px;
  font-size:11px
}

.switch-control {
  display:flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  min-height:44px;
  position:relative
}

.switch-control input {
  position:absolute;
  opacity:0;
  width:30px;
  height:20px;
  left:0;
  margin:0
}

.switch-control>i {
  display:block;
  position:relative;
  width:27px;
  height:16px;
  border:1px solid #91988b;
  border-radius:9px;
  transition:background .2s
}

.switch-control>i:before {
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:10px;
  height:10px;
  background:#91988b;
  border-radius:50%;
  transition:transform .2s,background .2s
}

.switch-control input:checked+i {
  background:var(--accent);
  border-color:var(--accent)
}

.switch-control input:checked+i:before {
  background:#fff;
  transform:translateX(11px)
}

.switch-control input:focus-visible+i {
  outline:3px solid var(--focus);
  outline-offset:4px
}

.fine-tune-toggle {
  display:flex;
  align-items:center;
  gap:7px;
  background:none;
  font-size:11px;
  min-height:44px;
  padding:10px 4px
}

.fine-tune-toggle svg {
  height:15px;
  width:15px
}

.fine-tune-toggle>span {
  font-size:17px;
  margin-left:3px;
  transition:transform .2s
}

.fine-tune-toggle[aria-expanded="true"]>span {
  transform:rotate(45deg)
}

.record-button {
  display:flex;
  gap:7px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:6px;
  background:transparent;
  font:10px var(--mono);
  min-width:63px;
  min-height:36px;
  padding:10px
}

.record-button:before {
  content:"";
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%
}

.record-button:disabled {
  opacity:.4
}

.is-recording .record-button {
  background:var(--accent);
  border-color:var(--accent);
  color:white
}

.is-recording .record-button:before {
  background:white;
  animation:load-pulse .65s infinite alternate
}

.recording-message {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:13px;
  min-height:18px;
  margin:3px 12px 0;
  font:8px var(--mono);
  color:var(--muted)
}

#recordStatus {
  display:none
}

.is-recording #recordStatus,.player-shell:has(#recordingDownload:not([hidden])) #recordStatus {
  display:block
}

.download-link {
  padding:7px 0;
  color:var(--accent);
  font:12px var(--sans);
  text-decoration:underline;
  text-underline-offset:3px
}

.fine-tune-panel {
  margin:12px 5px 0;
  padding:23px 20px 18px;
  border:1px solid var(--line);
  border-radius:12px
}

.fine-tune-intro h3 {
  font-size:15px;
  font-weight:550
}

.fine-tune-intro p {
  font-size:11px;
  color:var(--muted);
  margin-top:6px
}

.sound-controls {
  margin-top:15px;
  display:grid;
  gap:4px
}

.sound-controls>label {
  display:grid;
  grid-template-columns:90px 1fr 24px;
  gap:14px;
  align-items:center;
  min-height:40px
}

.sound-controls>label>span {
  font-size:11px
}

.sound-controls small {
  font:7px var(--mono);
  color:var(--muted);
  margin-left:7px
}

.sound-controls output {
  text-align:right;
  font:10px var(--mono)
}

.listening-guide {
  max-width:1216px;
  margin:6px auto 0;
  padding:31px 0 36px;
  display:grid;
  grid-template-columns:1.3fr repeat(4,1fr);
  gap:24px;
  border-top:1px solid var(--line)
}

.guide-heading>p {
  font-size:18px;
  line-height:1.7;
  font-weight:400
}

.guide-heading strong {
  font-weight:550
}

.guide-heading>span {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:12px
}

.guide-number {
  font:10px var(--mono);
  color:var(--accent);
  display:block;
  margin-bottom:13px
}

.guide-item {
  padding-left:18px;
  border-left:1px solid var(--line)
}

.guide-item h3 {
  font-size:12px;
  font-weight:550;
  margin-bottom:9px;
  line-height:1.6
}

.guide-item p {
  font-size:11px;
  color:var(--muted);
  line-height:1.9
}

.guide-item>span:last-child {
  display:block;
  font-size:9px;
  margin-top:15px;
  color:var(--muted)
}

.site-footer {
  max-width:1216px;
  margin:0 auto;
  padding:28px 0 30px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:11px;
  color:var(--muted)
}

.site-footer>p {
  font-size:12px;
  color:var(--ink);
  line-height:1.8
}

.site-footer>p>span {
  display:block;
  font-size:10px;
  color:var(--muted)
}

.keyboard-hint {
  display:flex;
  gap:14px;
  font-size:9px
}

.keyboard-hint>span {
  display:flex;
  align-items:center;
  gap:5px
}

kbd {
  font:8px var(--mono);
  padding:3px 4px;
  border:1px solid var(--line);
  border-radius:3px
}

.footer-brand {
  font:8px var(--mono);
  letter-spacing:.6px
}

.drawer-backdrop {
  position:fixed;
  inset:0;
  background:#1b26244a;
  backdrop-filter:blur(4px);
  z-index:20
}

.tweaks-panel {
  position:fixed;
  z-index:21;
  right:22px;
  top:22px;
  bottom:22px;
  width:min(390px,calc(100% - 32px));
  padding:30px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 20px 70px #0002;
  overflow:auto
}

.tweaks-header {
  display:flex;
  align-items:flex-start;
  gap:10px;
  justify-content:space-between
}

.tweaks-header p {
  font:8px var(--mono);
  color:var(--muted);
  letter-spacing:1px;
  margin-bottom:13px
}

.tweaks-header h2 {
  font-size:20px;
  line-height:1.5;
  font-weight:550
}

.tweaks-header button {
  background:none;
  font-size:27px;
  font-weight:300;
  width:36px;
  min-height:44px;
  margin-top:-10px
}

.skin-options {
  padding:0;
  border:0;
  margin:32px 0
}

.skin-options legend {
  font-size:12px;
  margin-bottom:16px;
  color:var(--muted)
}

.skin-options>label {
  display:flex;
  position:relative;
  align-items:center;
  gap:14px;
  padding:17px 13px;
  border:1px solid var(--line);
  border-radius:11px;
  margin-top:12px;
  cursor:pointer;
  min-height:80px
}

.skin-options>label:has(input:checked) {
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent)
}

.skin-options input {
  position:absolute;
  opacity:0
}

.skin-options>label:has(input:focus-visible) {
  outline:3px solid var(--focus);
  outline-offset:3px
}

.skin-swatch {
  display:block;
  width:46px;
  height:42px;
  border-radius:7px;
  background:#e0e2db;
  box-shadow:inset 0 1px 2px #fff,0 2px 3px #0003;
  position:relative
}

.skin-swatch:before {
  content:"";
  position:absolute;
  inset:8px 7px 14px;
  background:#c4cf9b;
  border:1px solid #929d79;
  border-radius:3px
}

.skin-swatch:after {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#c4422c;
  left:21px;
  bottom:5px
}

.swatch-ice {
  background:#d9e5e8
}

.swatch-ice:before {
  background:#b8d4dc;
  border-color:#9eb8c4
}

.swatch-lime {
  background:#333c37;
  box-shadow:inset 0 1px 2px #677267,0 2px 3px #0003
}

.swatch-lime:before {
  background:#c7d992
}

.swatch-lime:after {
  background:#d7e8a9
}

.skin-options>label>span {
  font-size:14px
}

.skin-options small {
  font-size:10px;
  display:block;
  color:var(--muted);
  margin-top:6px
}

.motion-option {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  min-height:48px;
  gap:15px
}

.motion-option small {
  display:block;
  font-size:11px;
  line-height:1.7;
  color:var(--muted);
  margin-top:6px
}

.motion-option input {
  width:19px;
  height:19px;
  accent-color:var(--accent)
}

.reset-button {
  border-bottom:1px solid var(--line);
  background:none;
  font-size:12px;
  margin-top:30px;
  padding:12px 0;
  min-height:44px
}

.toast {
  position:fixed;
  z-index:30;
  left:50%;
  bottom:28px;
  max-width:calc(100% - 32px);
  width:max-content;
  transform:translate(-50%,10px);
  opacity:0;
  pointer-events:none;
  background:var(--ink);
  color:var(--paper);
  font-size:13px;
  line-height:1.6;
  padding:12px 21px;
  border-radius:10px;
  box-shadow:0 8px 25px #0002;
  transition:transform .2s,opacity .2s
}

.toast.is-visible {
  transform:translate(-50%,0);
  opacity:1
}

body[data-skin="ice"] {
  --paper:#eef2f2;
  --ink:#263a43;
  --muted:#5c747e;
  --line:#d2dce0;
  --accent:#326287;
  --accent-hover:#234d6d;
  --metal-top:#f3f8f9;
  --metal-mid:#d9e4e9;
  --metal-bottom:#bacdd7;
  --key:#e6f0f3;
  --key-bottom:#cbdee6;
  --screen:#c9e1e8;
  --screen-deep:#adc8d2;
  --screen-ink:#294958
}

body[data-skin="lime"] {
  --paper:#202622;
  --ink:#e5e7dc;
  --muted:#adb5a8;
  --line:#3c453d;
  --accent:#d2e2a4;
  --accent-hover:#a5b976;
  --metal-top:#515a50;
  --metal-mid:#3e493f;
  --metal-bottom:#2b352d;
  --key:#4a564b;
  --key-bottom:#364038;
  --screen:#d6e6a5;
  --screen-deep:#b2c984;
  --screen-ink:#2a3c26;
  --focus:#abd2ff;
  color-scheme:dark
}

body[data-skin="lime"] .instrument {
  border-color:#64715e;
  box-shadow:inset 0 2px 1px #a0b09655,inset 0 -4px 2px #060c0780,0 15px 25px -16px #000a,0 36px 60px -35px #000c
}

body[data-skin="lime"] .primary-action,body[data-skin="lime"] .play-button {
  color:#253322
}

body[data-skin="lime"] .screen-bezel {
  background:linear-gradient(155deg,#1e281e,#77866b)
}

body[data-skin="lime"] .profile-grid button {
  border-color:#2c382b;
  box-shadow:inset 0 1px 0 #9ba89260,0 2px 0 #1d291b,0 3px 4px #0004
}

body[data-skin="lime"] .profile-grid button[aria-pressed="true"] {
  background:var(--accent);
  color:#253322
}

body[data-skin="lime"] .profile-grid button[aria-pressed="true"] .key-top>i {
  background:#405f27;
  box-shadow:none
}

body[data-skin="lime"] .speaker-grille {
  background-image:radial-gradient(circle,#111b11 1px,transparent 1.5px);
  opacity:.9
}

body[data-skin="lime"] .power-light {
  background:#d2e2a4
}

@media(hover:hover) and (pointer:fine) {
  .primary-action:hover {
    background:var(--accent-hover);
    transform:translateY(-2px)
  }

  .demo-action:hover,.utility-button:hover,.fine-tune-toggle:hover {
    color:var(--accent)
  }

  .profile-grid button:not([aria-pressed="true"]):hover {
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 #ffffffb0,0 4px 0 #a5ad9e,0 5px 8px #3c483b22
  }

  .transport button:not(:disabled):hover {
    filter:brightness(1.07)
  }

  .screen-link:hover {
    opacity:.65
  }

  .record-button:not(:disabled):hover {
    border-color:var(--accent)
  }

}

.primary-action:active,.transport .play-button:not(:disabled):active {
  transform:translateY(2px);
  box-shadow:inset 0 2px 4px #0002,0 1px 0 var(--accent-hover)
}

.profile-grid button:active {
  transform:translateY(2px)
}

@keyframes load-pulse {
  from {
    opacity:.35
  }

  to {
    opacity:1
  }

}

@keyframes room-entrance {
  from {
    opacity:0;
    transform:translateY(12px)
  }

  to {
    opacity:1;
    transform:translateY(0)
  }

}

body[data-motion="full"] .hero-copy,body[data-motion="full"] .player-shell {
  animation:room-entrance .65s both
}

body[data-motion="full"] .player-shell {
  animation-delay:.08s
}

body[data-motion="reduced"] *,body[data-motion="reduced"] *:before,body[data-motion="reduced"] *:after {
  animation:none!important;
  scroll-behavior:auto!important;
  transition:none!important
}

@media(min-width:1600px) {
  .listening-room {
    padding-top:88px;
    padding-bottom:65px
  }

}

@media(max-width:1370px) {
  .listening-guide,.site-footer {
    margin-left:5%;
    margin-right:5%
  }

  .listening-room {
    gap:5%;
    padding-top:50px
  }

  .instrument {
    padding:24px 24px 18px
  }

  .lcd-empty {
    gap:16px;
    padding-left:18px;
    padding-right:18px
  }

  .sound-emblem {
    width:118px;
    height:118px
  }

  .empty-copy h2 {
    font-size:26px
  }

  .empty-copy>span {
    font-size:9px
  }

  .guide-item {
    padding-left:15px
  }

  .listening-guide {
    gap:15px
  }

}

@media(max-width:1120px) {
  .listening-room {
    grid-template-columns:.8fr 1.2fr;
    gap:4%;
    padding-top:36px
  }

  .hero-copy {
    padding-bottom:32px
  }

  h1 {
    font-size:48px;
    letter-spacing:-2px
  }

  .eyebrow {
    font-size:9px;
    margin-bottom:26px
  }

  .hand-note {
    font-size:24px;
    margin-left:13px;
    margin-bottom:25px
  }

  .hero-lede {
    font-size:15px
  }

  .hero-explanation {
    font-size:12px
  }

  .primary-action {
    min-width:205px;
    font-size:14px
  }

  .local-note {
    font-size:10px;
    max-width:245px
  }

  .instrument {
    padding:22px 21px 17px;
    border-radius:28px
  }

  .device-wordmark {
    font-size:17px
  }

  .speaker-grille {
    width:32px
  }

  .lcd-header,.lcd-footer {
    margin-left:15px;
    margin-right:15px
  }

  .state-layer {
    height:184px
  }

  .sound-emblem {
    width:99px;
    height:99px
  }

  .emblem-bars {
    gap:3px
  }

  .emblem-bars i {
    width:4px
  }

  .empty-copy h2 {
    font-size:24px
  }

  .empty-copy>p {
    font-size:7px
  }

  .transport-row {
    gap:10px
  }

  .transport {
    gap:8px
  }

  .volume-control {
    max-width:63px
  }

  .profile-grid {
    gap:6px
  }

  .profile-grid button {
    padding:9px 8px;
    min-height:79px
  }

  .profile-grid strong {
    font-size:10px
  }

  .profile-grid small {
    font-size:6px
  }

  .listening-guide {
    grid-template-columns:repeat(4,1fr);
    gap:26px
  }

  .guide-heading {
    grid-column:1/-1;
    display:flex;
    justify-content:space-between;
    align-items:center
  }

  .guide-heading br {
    display:none
  }

  .guide-heading>p {
    font-size:18px
  }

  .guide-heading>span {
    margin:0
  }

  .guide-item:nth-child(2) {
    padding-left:0;
    border:0
  }

  .footer-brand {
    display:none
  }

}

@media(max-width:850px) {
  .site-header {
    padding:23px 6%
  }

  .privacy-status {
    display:none
  }

  .listening-room {
    display:block;
    padding:28px 6% 28px;
    max-width:660px
  }

  .hero-copy {
    padding-bottom:28px
  }

  .eyebrow {
    margin-bottom:18px
  }

  h1 {
    font-size:clamp(44px,8vw,60px);
    line-height:1.2
  }

  h1 br {
    display:none
  }

  .hand-note {
    font-size:22px;
    margin:15px 0 22px 42%;
    transform:rotate(-4deg)
  }

  .hero-lede {
    font-size:14px;
    line-height:1.8
  }

  .hero-lede br {
    display:none
  }

  .hero-explanation {
    margin-top:9px;
    font-size:12px
  }

  .hero-explanation br {
    display:none
  }

  .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:20px;
    margin-top:24px
  }

  .primary-action {
    padding:15px 17px;
    min-width:202px
  }

  .demo-action {
    font-size:12px;
    gap:7px
  }

  .local-note {
    margin-top:18px;
    max-width:none;
    font-size:10px
  }

  .instrument {
    padding:24px 26px 18px;
    border-radius:30px
  }

  .device-wordmark {
    font-size:21px
  }

  .speaker-grille {
    width:47px
  }

  .state-layer {
    height:204px
  }

  .lcd-empty {
    gap:28px;
    padding-left:28px
  }

  .sound-emblem {
    width:132px;
    height:132px
  }

  .emblem-bars {
    gap:4px
  }

  .emblem-bars i {
    width:6px
  }

  .empty-copy h2 {
    font-size:29px
  }

  .empty-copy>p {
    font-size:8px
  }

  .empty-copy>span {
    font-size:10px
  }

  .transport-row {
    padding-top:9px;
    padding-bottom:23px
  }

  .transport {
    gap:17px
  }

  .volume-control {
    max-width:80px
  }

  .profile-grid {
    gap:9px
  }

  .profile-grid button {
    min-height:84px;
    padding:10px 11px
  }

  .profile-grid strong {
    font-size:11px
  }

  .profile-grid small {
    font-size:7px
  }

  .listening-options {
    margin-top:19px
  }

  .listening-guide {
    max-width:580px;
    margin:0 auto;
    padding:28px 0 30px;
    grid-template-columns:repeat(2,1fr);
    gap:26px
  }

  .guide-heading {
    display:block
  }

  .guide-heading>span {
    margin-top:9px
  }

  .guide-item {
    padding-left:0;
    border-left:0
  }

  .guide-item h3 {
    font-size:13px
  }

  .guide-item p {
    font-size:12px
  }

  .guide-item>span:last-child {
    margin-top:10px
  }

  .site-footer {
    max-width:580px;
    margin:0 auto;
    flex-direction:column;
    align-items:flex-start;
    gap:18px
  }

  .keyboard-hint {
    display:none
  }

}

@media(max-width:620px) {
  .site-header {
    padding:22px 6%
  }

  .brand {
    font-size:11px;
    gap:10px
  }

  .brand-second {
    font-size:8px;
    letter-spacing:2.5px
  }

  .brand-mark {
    transform:scale(.85);
    transform-origin:left center;
    margin-right:-4px
  }

  .utility-button {
    font-size:11px
  }

  .listening-room {
    padding-top:26px
  }

  .eyebrow {
    font-size:8px
  }

  h1 {
    font-size:clamp(38px,8.8vw,53px);
    letter-spacing:-1.7px;
    white-space:nowrap
  }

  .hand-note {
    font-size:21px;
    margin:17px 0 25px 34%
  }

  .hero-copy {
    padding-bottom:31px
  }

  .hero-lede {
    font-size:13px
  }

  .hero-lede br {
    display:block
  }

  .hero-explanation {
    font-size:11px;
    max-width:310px;
    line-height:1.9
  }

  .hero-actions {
    gap:17px;
    margin-top:22px
  }

  .primary-action {
    min-width:177px;
    padding:14px 13px;
    font-size:13px;
    gap:8px
  }

  .plus-icon {
    font-size:21px
  }

  .action-arrow {
    font-size:17px
  }

  .demo-action {
    font-size:11px;
    gap:5px;
    white-space:nowrap
  }

  .demo-action>span {
    font-size:19px
  }

  .local-note {
    font-size:9px;
    margin-top:17px
  }

  .instrument {
    padding:20px 16px 15px;
    border-radius:25px
  }

  .instrument-heading {
    gap:9px;
    margin-bottom:18px
  }

  .device-wordmark {
    font-size:17px
  }

  .device-wordmark>span {
    font-size:6px;
    letter-spacing:.7px;
    margin-top:7px
  }

  .speaker-grille {
    width:32px;
    height:23px;
    margin-left:2px
  }

  .device-status {
    font-size:9px;
    gap:5px
  }

  .screen-bezel {
    padding:7px;
    border-radius:15px
  }

  .lcd-window {
    border-radius:8px
  }

  .lcd-header {
    font-size:7px;
    padding-top:12px;
    margin:0 13px
  }

  .lcd-header strong {
    font-size:7px
  }

  .state-layer {
    height:178px
  }

  .lcd-empty {
    gap:16px;
    padding:17px 14px
  }

  .sound-emblem {
    width:99px;
    height:99px
  }

  .emblem-bars {
    gap:3px
  }

  .emblem-bars i {
    width:4px;
    height:16px
  }

  .emblem-bars i:nth-child(2n) {
    height:35px
  }

  .emblem-bars i:nth-child(3n) {
    height:47px
  }

  .emblem-bars i:nth-child(4n) {
    height:28px
  }

  .empty-copy h2 {
    font-size:23px;
    letter-spacing:-.5px
  }

  .empty-copy>p {
    font-size:6px;
    letter-spacing:.3px;
    margin-bottom:11px
  }

  .empty-copy>span {
    font-size:8px;
    margin-top:10px;
    max-width:120px
  }

  .empty-copy b {
    display:none
  }

  .lcd-footer {
    margin:0 13px;
    font-size:7px;
    gap:10px;
    padding-top:9px;
    padding-bottom:11px
  }

  .lcd-footer>span:last-child {
    font-size:7px
  }

  .screen-dots {
    letter-spacing:1px
  }

  .lcd-playing {
    padding:15px 14px 10px
  }

  .track-readout h2 {
    font-size:19px
  }

  .track-readout p {
    font-size:7px
  }

  .track-readout #trackMeta {
    font-size:7px
  }

  .lcd-file-actions {
    font-size:7px
  }

  .screen-link {
    font-size:9px
  }

  .timeline {
    padding-top:11px;
    gap:9px;
    font-size:9px
  }

  .transport-row {
    grid-template-columns:.7fr auto .9fr;
    gap:8px;
    padding:5px 0 20px
  }

  .transport {
    gap:5px
  }

  .transport button {
    width:34px
  }

  .transport button.play-button {
    width:54px;
    height:54px
  }

  .transport button svg {
    width:17px;
    height:17px
  }

  .transport small,.stop-button small {
    font-size:6px
  }

  .stop-button {
    gap:5px
  }

  .stop-button>span {
    font-size:10px
  }

  .volume-control {
    max-width:58px;
    font-size:8px
  }

  .mode-bank {
    padding-top:15px
  }

  .bank-label {
    margin-bottom:11px
  }

  .bank-label h2 {
    font-size:10px
  }

  .bank-label>span {
    font-size:6px;
    letter-spacing:.4px
  }

  .profile-grid {
    gap:6px
  }

  .profile-grid button {
    min-height:78px;
    padding:9px 7px;
    border-radius:7px
  }

  .profile-grid strong {
    font-size:10px
  }

  .profile-grid small {
    font-size:6px;
    letter-spacing:.4px
  }

  .key-top {
    margin-bottom:10px
  }

  .key-top>b {
    font-size:7px
  }

  .instrument-bottom {
    margin-top:16px
  }

  .instrument-bottom>span:first-child {
    font-size:5px;
    letter-spacing:.7px
  }

  .listening-options {
    margin:15px 7px 0;
    font-size:10px;
    gap:10px
  }

  .fine-tune-toggle {
    font-size:10px
  }

  .record-button {
    font-size:9px;
    min-width:57px;
    min-height:40px
  }

  .listening-guide,.site-footer {
    margin-left:6%;
    margin-right:6%
  }

  .listening-guide {
    gap:28px 18px;
    padding-top:28px
  }

  .guide-heading>p {
    font-size:17px
  }

  .guide-item h3 {
    font-size:12px
  }

  .guide-item p {
    font-size:11px
  }

  .guide-number {
    margin-bottom:11px
  }

  .site-footer {
    padding-top:23px;
    padding-bottom:28px
  }

  .site-footer>p {
    font-size:11px
  }

  .site-footer>p>span {
    font-size:9px
  }

  .tweaks-panel {
    right:12px;
    top:12px;
    bottom:12px;
    padding:25px
  }

  .sound-controls>label {
    grid-template-columns:83px 1fr 22px;
    gap:10px
  }

  .fine-tune-panel {
    padding:20px 15px
  }

  .fine-tune-intro p {
    font-size:10px
  }

}

@media(max-width:360px) {
  .site-header {
    padding-left:5%;
    padding-right:5%
  }

  .listening-room {
    padding-left:5%;
    padding-right:5%
  }

  h1 {
    font-size:36px
  }

  .hero-actions {
    gap:11px
  }

  .primary-action {
    min-width:166px
  }

  .demo-action {
    font-size:10px
  }

  .instrument {
    padding-left:13px;
    padding-right:13px
  }

  .speaker-grille {
    width:25px
  }

  .lcd-empty {
    gap:10px;
    padding-left:12px;
    padding-right:12px
  }

  .sound-emblem {
    width:82px;
    height:82px
  }

  .empty-copy h2 {
    font-size:22px
  }

  .profile-grid button {
    padding-left:5px;
    padding-right:5px
  }

  .profile-grid strong {
    font-size:9px
  }

  .transport {
    gap:3px
  }

  .transport-row {
    gap:6px
  }

  .stop-button small {
    display:none
  }

  .listening-options {
    gap:6px
  }

  .volume-control {
    max-width:51px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }

}

body.drawer-open {
  overflow:hidden
}

/* Reading scale: keep the instrument tactile without making its labels miniature. */
@media(min-width:851px) {
  .profile-grid strong {
    font-size:13px
  }

  .profile-grid small {
    font-size:8px
  }

  .key-top>b {
    font-size:9px
  }

  .bank-label h2 {
    font-size:12px
  }

  .bank-label>span {
    font-size:8px
  }

  .listening-options,.fine-tune-toggle {
    font-size:12px
  }

  .record-button {
    font-size:11px
  }

  .device-wordmark>span {
    font-size:8px
  }

  .lcd-header,.lcd-header strong {
    font-size:10px
  }

  .empty-copy>p {
    font-size:9px
  }

  .empty-copy>span {
    font-size:11px
  }

  .lcd-footer {
    font-size:9px
  }

  .timeline {
    font-size:11px
  }

  .guide-item h3 {
    font-size:14px
  }

  .guide-item p {
    font-size:13px
  }

  .guide-item>span:last-child {
    font-size:11px
  }

  .guide-heading>span {
    font-size:12px
  }

  .guide-number {
    font-size:11px
  }

  .site-footer>p {
    font-size:13px
  }

  .site-footer>p>span {
    font-size:11px
  }

  .hero-explanation {
    font-size:14px
  }

  .local-note {
    font-size:11px
  }

}

@media(min-width:851px) and (max-width:1120px) {
  .profile-grid strong {
    font-size:11px
  }

  .hero-explanation {
    font-size:12px
  }

  .empty-copy>span {
    font-size:9px
  }

  .device-wordmark>span {
    font-size:7px
  }

  .lcd-header,.lcd-header strong {
    font-size:8px
  }

  .guide-item h3 {
    font-size:13px
  }

  .guide-item p {
    font-size:12px
  }

}

@media(min-width:851px) and (max-height:850px) {
  .listening-room {
    padding-top:16px;
    padding-bottom:24px
  }

  .hero-copy {
    padding-bottom:20px
  }

  .eyebrow {
    margin-bottom:23px
  }

  .hand-note {
    margin-top:22px;
    margin-bottom:26px
  }

  .hero-actions {
    margin-top:25px
  }

  .instrument {
    padding-top:21px;
    padding-bottom:14px
  }

  .instrument-heading {
    margin-bottom:16px
  }

  .state-layer {
    height:165px
  }

  .transport-row {
    padding-bottom:17px
  }

  .mode-bank {
    padding-top:14px
  }

  .instrument-bottom {
    margin-top:14px
  }

  .listening-options {
    margin-top:16px
  }

}

body[data-skin="lime"] .is-recording .record-button {
  color:#253322
}

body[data-skin="lime"] .is-recording .record-button:before {
  background:#253322
}

/* Keep the introduction anchored when optional controls open. */
@media(min-width:851px) {
  .listening-room {
    align-items:start
  }

  .hero-copy {
    padding-top:42px
  }

}

@media(min-width:851px) and (max-height:850px) {
  .hero-copy {
    padding-top:25px
  }

}

.instrument:before {
  opacity:.28
}

body[data-skin="lime"] .instrument:before {
  opacity:.16
}

@media(max-width:620px) {
  .profile-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }

  .profile-grid button {
    min-height:67px;
    padding:9px 12px;
    position:relative
  }

  .key-top {
    position:absolute;
    top:11px;
    right:11px;
    gap:8px;
    margin:0
  }

  .profile-grid strong {
    font-size:12px;
    margin-top:5px;
    padding-right:27px
  }

  .profile-grid small {
    font-size:8px;
    margin-top:7px
  }

  .record-button {
    min-height:44px
  }

  .transport button {
    min-width:38px
  }

  .transport {
    gap:5px
  }

}

@media(max-width:360px) {
  h1 {
    font-size:32px
  }

  .hand-note {
    font-size:20px
  }

}

html:has(body[data-motion="reduced"]) {
  scroll-behavior: auto;
}
@media(max-width:620px) {
  .transport button {
    min-width: 44px;
  }
}
@media(max-width:360px) {
  .transport {
    gap: 3px;
  }
}