@charset "UTF-8";
:root {
  color-scheme: light;
  --paper: #f5f3eb; --ink: #27302e; --muted: #777c70; --line: #dedfd3;
  --lime: #c9e77b; --peach: #f29c80; --violet: #b7a8e7; --aqua: #8fd3cb;
  --machine: #29322f; --step: #39423e; --focus: #fff7cf;
  font-family: "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  color: var(--ink); background: var(--paper); font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .35; }
button:focus-visible, a:focus-visible, input:focus-visible, .controller-focus {
  outline: 3px solid #55733a !important; outline-offset: 4px;
}
.machine :focus-visible, .machine .controller-focus { outline-color: var(--focus) !important; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }
.app-shell { max-width: 1280px; margin: auto; padding: 0 40px 20px; }
.masthead { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 12px; align-items: center; font-size: 28px; font-weight: 900; letter-spacing: -1.7px; text-decoration: none; color: var(--ink); }
.brand-dot { color: #91a753; }
.brand-mark { display: flex; align-items: center; gap: 4px; background: var(--ink); padding: 10px; border-radius: 12px; height: 43px; width: 46px; }
.brand-mark i { width: 4px; border-radius: 4px; background: var(--lime); height: 13px; }
.brand-mark i:nth-child(2) { height: 24px; background: var(--peach); }
.brand-mark i:nth-child(3) { height: 18px; background: var(--violet); }
.brand-mark i:nth-child(4) { height: 9px; background: var(--aqua); }
.header-tools { display: flex; align-items: center; gap: 24px; }
.save-status { font-size: 12px; display: flex; align-items: center; gap: 6px; color: #66714e; }
.save-status .icon { width: 16px; height: 16px; }
.help-button { width: 44px; height: 44px; background: transparent; border: 1.5px solid #cfd1c2; border-radius: 50%; font-size: 21px; font-weight: bold; }
.help-button:hover { background: white; }
.intro { display: flex; align-items: center; justify-content: space-between; padding: 30px 0 26px; gap: 24px; }
.eyebrow { font: 700 10px/1.5 system-ui, sans-serif; letter-spacing: 2px; margin: 0 0 9px; color: var(--muted); }
h1 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -2px; line-height: 1.1; margin: 0; font-weight: 900; }
h1 > span { color: #8fa14e; }
.intro-copy { font-size: 15px; color: #71766a; margin: 12px 0 0; }
.play-button { border: 0; background: var(--lime); border-radius: 16px; min-height: 70px; min-width: 182px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 21px; font-weight: 800; box-shadow: 0 4px 0 #a9c05e; padding: 16px 25px; transition: transform .12s, box-shadow .12s; }
.play-button .icon { width: 27px; height: 27px; }
.play-button > span { white-space: nowrap; }
.play-button:hover { background: #d7ed9c; }
.play-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #a9c05e; }
.play-button[aria-pressed=true] { background: var(--peach); box-shadow: 0 4px 0 #c7745b; }
.groove-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.groove-card { position: relative; display: flex; gap: 15px; align-items: center; border: 1.5px solid #dedfd3; background: #eeeee5; padding: 16px; border-radius: 16px; text-align: left; min-height: 88px; }
.groove-card[aria-pressed=true] { background: #fffef8; border: 2px solid var(--ink); padding: 15.5px; box-shadow: 0 3px 0 #d9dbce; }
.groove-card:hover { background: #fffef8; }
.groove-art { width: 48px; height: 48px; display: grid; place-items: center; background: #f0c66c; border-radius: 12px; flex-shrink: 0; transform: rotate(-6deg); }
.groove-art .icon { width: 28px; height: 28px; }
.groove-club .groove-art, .groove-acid .groove-art, .groove-pixel .groove-art { background: var(--violet); transform: rotate(5deg); }
.groove-float .groove-art, .groove-liquid .groove-art, .groove-cloud .groove-art { background: var(--aqua); transform: rotate(-4deg); }
.groove-card small { font: 700 9px system-ui, sans-serif; letter-spacing: 1.5px; color: #767a6d; display: block; margin-bottom: 6px; }
.groove-card strong { font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.chosen { margin-left: auto; align-self: flex-start; visibility: hidden; }
.chosen .icon { width: 17px; height: 17px; stroke-width: 2.5; }
.groove-card[aria-pressed=true] .chosen { visibility: visible; }
.machine { background: var(--machine); border: 1px solid #1e2623; color: #f4f5e9; border-radius: 24px; box-shadow: 0 7px 0 #caccbd, 0 18px 30px -24px #27302e66; overflow: clip; }
.machine-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 17px 26px; border-bottom: 1px solid #414942; }
.machine-name { font: 600 9px system-ui, sans-serif; letter-spacing: 1.7px; color: #a4ad9d; }
.machine-name > span { color: #687161; margin: 0 6px; }
.play-state { display: flex; align-items: center; gap: 8px; font: 600 9px system-ui, sans-serif; letter-spacing: 1.4px; color: #afb7a9; }
.play-state i, .scope-label i { width: 6px; height: 6px; background: #7f8b76; border-radius: 50%; display: inline-block; }
.play-state.playing { color: var(--lime); }
.play-state.playing i { background: var(--lime); box-shadow: 0 0 10px #c9e77b66; }
.workspace-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 26px 0; gap: 16px; }
.tabs { display: flex; padding: 5px; border-radius: 13px; background: #1c2421; gap: 4px; }
.tab { display: flex; align-items: center; justify-content: center; gap: 10px; background: transparent; border: 0; border-radius: 9px; min-height: 48px; padding: 10px 25px; color: #acb5a6; font-weight: 700; font-size: 15px; }
.tab .icon { width: 22px; height: 22px; }
.tab[aria-selected=true] { background: var(--peach); color: #26302a; box-shadow: 0 2px 3px #0003; }
.tab[data-tab=melody][aria-selected=true] { background: var(--violet); }
.tab[data-tab=sound][aria-selected=true] { background: var(--aqua); }
.tab:hover:not([aria-selected=true]) { background: #39443b; color: white; }
.machine-button { display: flex; align-items: center; justify-content: center; gap: 9px; background: none; border: 1px solid #525c4f; border-radius: 11px; min-height: 44px; padding: 10px 14px; font-size: 12px; color: #c0c8b9; }
.machine-button .icon { width: 17px; height: 17px; }
.machine-button:hover:enabled { border-color: #a9b29e; background: #354033; }
.workspace { padding: 25px 26px 0; }
.pattern-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 23px; }
.pattern-controls h2 { font-size: 18px; margin: 0 0 7px; letter-spacing: -.3px; }
.pattern-controls p { font-size: 12px; margin: 0; color: #a8b29f; }
.page-picker { display: flex; align-items: center; gap: 5px; }
.page-picker button { background: #39433b; border: 1px solid #52604b; border-radius: 8px; color: #acb99f; min-width: 60px; min-height: 44px; padding: 9px; font-size: 12px; font-weight: 700; }
.page-picker button[aria-pressed=true] { background: #d8deca; color: #29322f; border-color: #d8deca; }
.sequence-grid { --visible-steps: 16; display: grid; grid-template-columns: 90px repeat(var(--visible-steps), minmax(0, 1fr)); gap: 10px 6px; align-items: stretch; }
.step-number { color: #9aa78f; text-align: center; font: 500 10px system-ui, sans-serif; height: 20px; display: grid; place-items: center; }
.step-number.beat-start { color: #dde4d3; font-weight: 800; }
.step-number.current { color: var(--lime); }
.drum-pad { display: flex; align-items: center; gap: 10px; background: #39443b; border: 1px solid #54604f; border-radius: 10px; padding: 10px; color: var(--row-color); min-height: 55px; font-size: 13px; font-weight: 700; text-align: left; }
.drum-pad .icon { width: 25px; height: 25px; }
.drum-pad { flex-direction: column; justify-content: center; gap: 4px; font-size: 11px; }
.drum-pad:active, .drum-pad.sounding { background: var(--row-color); color: var(--machine); }
.step { position: relative; min-width: 44px; min-height: 55px; padding: 0; background: var(--step); border: 1px solid #465047; border-radius: 8px; box-shadow: 0 3px 0 #19211c; border-top: 3px solid #485349; }
.step.beat-start { background: #454f45; border-top-color: #64725b; }
.step[aria-pressed=true] { background: var(--row-color); border-color: var(--row-color); border-top-color: #ffffff3b; box-shadow: 0 3px 0 color-mix(in srgb, var(--row-color), #142016 55%); }
.step[aria-pressed=true]::after { content: ""; position: absolute; width: 7px; height: 7px; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: #25302566; }
.step.current { box-shadow: inset 0 0 0 2px #f6f9e2, 0 3px 0 #19211c; }
.step:active { transform: translateY(2px); }
.step:hover { filter: brightness(1.15); }
.note-key { border: 1px solid #ffffff22; background: #39443b; border-radius: 8px; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-weight: 800; font-size: 14px; color: var(--row-color); }
.key-dot { height: 10px; width: 10px; border-radius: 50%; background: var(--row-color); }
.note-key.sounding, .note-key:active { background: var(--row-color); color: #222a27; }
.melody-grid { gap: 6px; }
.melody-grid .step { min-height: 44px; border-radius: 6px; box-shadow: none; }
.melody-grid .step.current { box-shadow: inset 0 0 0 2px #f6f9e2; }
.instrument-caption { display: flex; gap: 12px; flex-wrap: wrap; font: 600 9px system-ui, sans-serif; letter-spacing: 1.4px; color: #c1cdb4; margin: 0 0 12px; }
.instrument-caption span { font: 11px "Trebuchet MS", system-ui, sans-serif; letter-spacing: 0; color: #9fae96; }
.instrument-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.instrument-picker button { min-height: 50px; min-width: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid #5b6852; border-radius: 10px; background: #344033; color: var(--instrument-color, #c5bbec); text-align: left; font-size: 13px; font-weight: 700; }
.instrument-picker button:hover { background: #44503d; }
.instrument-picker small { display: block; font: 600 8px system-ui, sans-serif; letter-spacing: 1px; color: #a6b39b; margin-bottom: 3px; }
.instrument-picker .icon { width: 21px; height: 21px; }
.switch-icon { margin-left: auto; font-size: 20px; opacity: .75; }
.instrument-picker button[aria-pressed=true] { background: var(--violet); border-color: var(--violet); color: #252e27; }
.grid-tip { font-size: 11px; line-height: 1.7; color: #d5dcca; margin: 17px 0 0; }
.grid-tip span { color: #9fae96; }
.beat-ruler { display: flex; align-items: center; gap: 13px; padding: 24px 0 22px; color: #9aa88f; }
.beat-ruler > span { font: 700 8px system-ui, sans-serif; letter-spacing: 1.5px; min-width: 77px; }
.beat-ruler > .icon { width: 14px; height: 14px; }
.beat-ruler > div { display: grid; grid-template-columns: repeat(16, 1fr); gap: 6px; flex: 1; }
.loop-light { height: 4px; border-radius: 5px; background: #465140; }
.loop-light:nth-child(4n+1) { background: #738564; }
.loop-light.current { background: var(--lime); box-shadow: 0 0 8px #c9e77b66; }
.transport { display: flex; gap: 32px; align-items: center; border-top: 1px solid #47503f; padding: 20px 26px 23px; background: #252e27; }
.tempo-control { flex: 1; max-width: 460px; }
.tempo-control > span:first-child, .volume-control > span { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; }
.tempo-control small { font: 600 10px system-ui, sans-serif; color: #bbc6ac; letter-spacing: .8px; }
.range-labels { display: flex; justify-content: space-between; font-size: 10px; color: #95a28a; margin-top: 8px; }
.volume-control { width: 175px; }
.volume-control > span { justify-content: flex-start; gap: 8px; font-size: 12px; color: #bec8b3; }
.volume-control .icon { width: 17px; height: 17px; }
.volume-control input { margin-top: 15px; }
.reset-button { margin-left: auto; white-space: nowrap; }
.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 2px 10px; }
.discovery { font-size: 12px; display: flex; align-items: center; gap: 8px; color: #7c806f; }
.discovery > span { font-size: 28px; color: #96a85c; }
.app-footer button { display: flex; align-items: center; gap: 9px; min-height: 44px; border: 0; background: transparent; color: #777e6c; text-align: right; font-size: 11px; padding: 8px 0; }
.app-footer .icon { width: 20px; height: 20px; }
.message { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); width: max-content; padding: 15px 22px; background: #fffdf2; color: #27302e; border: 2px solid #818c69; border-radius: 12px; font-size: 13px; box-shadow: 0 5px 20px #0002; z-index: 5; }
.sound-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: center; min-height: 240px; }
.sound-view { background: #1b2520; border: 1px solid #43513d; border-radius: 14px; padding: 18px 20px; }
.scope-label { font: 600 8px system-ui, sans-serif; letter-spacing: 1.8px; color: #a8b89c; display: flex; align-items: center; gap: 7px; }
.scope-label i { background: var(--aqua); }
#waveform { width: 100%; height: 130px; display: block; margin: 7px 0; }
.scope-line { stroke: #3a4b37; stroke-width: 1; fill: none; }
#wave-path { stroke: var(--aqua); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.hear-button { background: #32463a; border: 1px solid #6e9c80; color: #b9e3c5; border-radius: 9px; min-height: 44px; padding: 9px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.hear-button .icon { width: 16px; height: 16px; }
.sound-sliders { display: grid; gap: 18px; }
.sound-control { display: block; font-size: 15px; font-weight: 700; }
.sound-control > small { font: 600 8px system-ui, sans-serif; letter-spacing: 1.3px; color: #95a88c; margin-left: 10px; }
.sound-control > span { display: flex; justify-content: space-between; font-size: 10px; color: #9eaf95; margin-top: 8px; font-weight: 400; }
input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; cursor: pointer; background: transparent; touch-action: pan-y; margin: 0; --fill: 50%; --track-color: var(--lime); }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--track-color) 0 var(--fill), #526148 var(--fill) 100%); border-radius: 6px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 24px; width: 24px; margin-top: -9px; border-radius: 50%; border: 4px solid #2a3528; background: var(--track-color); box-shadow: 0 0 0 1.5px var(--track-color); }
input[type=range]::-moz-range-track { height: 6px; background: #526148; border-radius: 6px; }
input[type=range]::-moz-range-progress { height: 6px; background: var(--track-color); border-radius: 6px; }
input[type=range]::-moz-range-thumb { height: 17px; width: 17px; border: 3px solid #2a3528; border-radius: 50%; background: var(--track-color); box-shadow: 0 0 0 1.5px var(--track-color); }
.sound-control input { --track-color: var(--aqua); }

dialog { background: var(--paper); color: var(--ink); border: 1px solid #d0d6c3; border-radius: 24px; padding: 28px; max-width: min(540px, calc(100vw - 32px)); max-height: 85dvh; box-shadow: 0 20px 70px #0005; }
dialog::backdrop { background: #13231999; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dialog-heading .eyebrow { margin: 0; }
#close-help { width: 44px; height: 44px; font-size: 30px; border: 0; border-radius: 50%; background: #e3e7d7; }
dialog h2 { font-size: 32px; line-height: 1.05; letter-spacing: -1.3px; margin: 15px 0 20px; }
dialog p { font-size: 13px; line-height: 1.7; color: #65705d; }
.controller-guide { padding: 18px; border-radius: 13px; background: #e6eadd; }
.controller-guide h3 { font-size: 15px; margin: 0; }
.controller-guide p { font-size: 12px; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; font-size: 12px; align-items: center; margin: 16px 0 0; }
dt { font-weight: 700; }
dd { margin: 0; color: #65705d; }
.xbox-a, .xbox-b, .xbox-x { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #fff; background: #47712e; }
.xbox-b { background: #a53c31; }.xbox-x { background: #326c9a; }
.help-note { font-size: 11px !important; }
dialog .play-button { min-height: 54px; font-size: 16px; width: 100%; margin-top: 20px; }

@media (max-width: 1249px) {
  .app-shell { max-width: 1080px; }
  .sequence-grid { --visible-steps: 8; grid-template-columns: 85px repeat(var(--visible-steps), minmax(0,1fr)); gap: 10px 8px; }
  .step { min-height: 64px; }.melody-grid { gap: 6px 8px; }.melody-grid .step { min-height: 44px; }
  .beat-ruler > span { min-width: 72px; }
}
@media (max-width: 850px) {
  .app-shell { padding: 0 24px 14px; }.masthead { padding: 20px 0; }
  .intro { padding: 27px 0 24px; }.intro-copy { font-size: 13px; }
  .play-button { min-width: 158px; font-size: 19px; min-height: 65px; }
  .groove-picker { gap: 10px; margin-bottom: 22px; }
  .groove-card { gap: 10px; padding: 13px; min-height: 86px; }.groove-card[aria-pressed=true] { padding: 12.5px; }
  .groove-art { width: 39px; height: 43px; }.groove-art .icon { width: 25px; height: 25px; }
  .groove-card strong { font-size: 15px; }.groove-card small { font-size: 8px; letter-spacing: 1px; }
  .chosen { position: absolute; top: 8px; right: 8px; }.chosen .icon { width: 13px; height: 13px; }
  .machine-top { padding: 15px 20px; }.workspace-bar { padding: 16px 20px 0; }.workspace { padding: 24px 20px 0; }
  .tab { padding: 10px 18px; gap: 8px; }
  .sequence-grid { grid-template-columns: 72px repeat(var(--visible-steps), minmax(0,1fr)); gap: 9px 6px; }
  .drum-pad { padding: 8px; gap: 5px; flex-direction: column; justify-content: center; font-size: 11px; }
  .step { min-height: 60px; }.note-key { padding: 8px; gap: 8px; }
  .beat-ruler > span { min-width: 59px; }.transport { gap: 22px; padding: 18px 20px; }
  .volume-control { width: 120px; }.sound-layout { gap: 24px; }
  .app-footer { gap: 12px; }.app-footer button { max-width: 235px; font-size: 10px; }.discovery { font-size: 11px; }
  .save-status { font-size: 11px; }.header-tools { gap: 16px; }.volume-control input { margin-top: 6px; }
}
@media (max-width: 620px) {
  .instrument-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .instrument-picker button { padding: 9px 10px; font-size: 12px; }
  .app-shell { padding: 0 16px 12px; }.brand { font-size: 25px; }.brand-mark { width: 40px; height: 39px; padding: 8px; }
  .save-status { font-size: 10px; max-width: 110px; line-height: 1.4; }.save-status .icon { display: none; }.header-tools { gap: 10px; }
  .intro { gap: 12px; padding: 24px 0; }.eyebrow { font-size: 8px; letter-spacing: 1.6px; }
  h1 { font-size: 31px; letter-spacing: -1.5px; }.intro-copy { font-size: 11px; max-width: 190px; line-height: 1.6; margin-top: 8px; }
  .play-button { min-width: 118px; min-height: 63px; padding: 12px; font-size: 16px; border-radius: 13px; gap: 6px; }.play-button .icon { width: 22px; height: 22px; }
  .groove-picker { gap: 7px; }.groove-card { padding: 11px 10px; gap: 9px; flex-direction: column; align-items: flex-start; border-radius: 12px; min-height: 118px; }
  .groove-card[aria-pressed=true] { padding: 10.5px 9.5px; }.groove-art { width: 34px; height: 34px; border-radius: 8px; }.groove-art .icon { width: 23px; height: 23px; }
  .groove-card small { font-size: 6.5px; margin-bottom: 5px; letter-spacing: 1px; }.groove-card strong { font-size: 13px; letter-spacing: -.3px; }
  .machine { border-radius: 19px; }.machine-name { font-size: 7px; letter-spacing: 1.1px; }.machine-name > span { margin: 0 3px; }.play-state { font-size: 7px; letter-spacing: 1px; gap: 5px; }
  .machine-top { padding: 14px; }.workspace-bar { padding: 14px 14px 0; gap: 8px; }.tabs { padding: 4px; gap: 2px; flex: 1; }
  .tabs { min-width: 0; }
  .tab { padding: 9px 6px; gap: 5px; min-height: 44px; min-width: 0; font-size: 12px; flex: 1; }.tab .icon { width: 18px; height: 18px; }
  .machine-button { padding: 10px; gap: 5px; }.workspace-bar > .machine-button { min-width: 44px; }.workspace-bar > .machine-button span { display: none; }
  .workspace { padding: 22px 14px 0; }.pattern-controls { align-items: flex-start; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
  .pattern-controls h2 { font-size: 16px; margin-bottom: 6px; }.pattern-controls p { font-size: 11px; }.page-picker { margin-left: auto; }.page-picker button { min-width: 56px; font-size: 11px; }
  .sequence-grid { grid-template-columns: 54px repeat(var(--visible-steps), minmax(0,1fr)); gap: 8px 6px; }.drum-pad { font-size: 10px; }
  .note-key { font-size: 12px; padding: 6px; gap: 5px; }.key-dot { width: 7px; height: 7px; }
  .beat-ruler { padding: 22px 0 18px; gap: 9px; }.beat-ruler > span { min-width: 45px; font-size: 7px; }.beat-ruler > div { gap: 4px; }
  .transport { flex-wrap: wrap; gap: 14px; padding: 16px 14px; }.tempo-control { flex-basis: 100%; max-width: none; }
  .volume-control { flex: 1; max-width: 190px; }.reset-button { margin-left: auto; font-size: 11px; min-height: 44px; }
  .app-footer { flex-wrap: wrap; padding: 20px 0 6px; gap: 0; }.app-footer button { max-width: none; text-align: left; min-height: 44px; font-size: 10px; }
  .sound-layout { grid-template-columns: 1fr; gap: 25px; }.sound-view { padding: 15px; }#waveform { height: 110px; }.sound-sliders { gap: 15px; }
  .grid-tip { font-size: 10px; }.grid-tip span { display: block; }.sound-control { font-size: 14px; }
}
@media (max-width: 559px) {
  .sequence-grid { --visible-steps: 4; gap: 9px 8px; }.melody-grid { gap: 6px 8px; }.step-number { height: 15px; }.step { min-height: 58px; }.melody-grid .step { min-height: 44px; }
  .page-picker { margin-left: 0; width: 100%; }.page-picker button { flex: 1; min-width: 0; }.pattern-controls { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Keep playback and reset together, including when the transport wraps. */
.transport-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.transport-actions .play-button { color: var(--ink); min-height: 48px; min-width: 140px; padding: 12px 16px; border-radius: 11px; font-size: 16px; }
.transport-actions .play-button .icon { width: 20px; height: 20px; }
.transport-actions .reset-button { margin-left: 0; }
@media (max-width: 620px) {
  .transport-actions { width: 100%; }
  .transport-actions .play-button { flex: 1; }
}

/* One short, spoken prompt with an open view of the real instrument. */
.tutorial-start, .tutorial-card { font-family: Arial, Helvetica, system-ui, sans-serif; }
.tutorial-start { min-height: 50px; border: 2px solid var(--ink); background: var(--lime); border-radius: 12px; padding: 10px 16px; font-size: 22px; font-weight: 700; white-space: nowrap; }
.tutorial-start span { margin-left: 8px; font-size: 17px; }
.tutorial-card { position: fixed; z-index: 40; right: 20px; bottom: 20px; width: min(480px, calc(100% - 40px)); padding: 18px 24px 22px; color: #202a26; background: #fffef5; border: 3px solid #27302e; border-radius: 22px; box-shadow: 0 6px 0 #27302e, 0 12px 35px #0003; }
.tutorial-card.tutorial-top { top: 12px; bottom: auto; }
.tutorial-card.tutorial-left { left: 12px; right: auto; }
.tutorial-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tutorial-topline > span { font-size: 20px; font-weight: 700; color: #576447; }
.tutorial-card button { min-height: 48px; padding: 8px 14px; border: 2px solid #b8bead; border-radius: 12px; font-size: 21px; font-weight: 700; background: #f2f3e7; }
.tutorial-topline button { background: transparent; border-color: transparent; }
.tutorial-card h2 { font-family: inherit; font-size: 36px; line-height: 1.12; letter-spacing: 0; margin: 8px 0 10px; }
.tutorial-card p { font-size: 28px; line-height: 1.25; margin: 0 0 20px; }
.tutorial-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tutorial-picture { margin: 0 0 16px; }
.tutorial-picture svg { display: block; width: 100%; height: 60px; overflow: visible; }
.tutorial-picture text { font: 20px Arial, Helvetica, sans-serif; fill: #405033; }
.tutorial-picture figcaption { font-size: 20px; font-weight: 700; text-align: center; margin-top: 4px; }
.tutorial-actions #tutorial-next, .tutorial-actions #tutorial-done { background: var(--lime); border-color: #94ad58; margin-left: auto; }
#tutorial-ring { position: fixed; z-index: 35; pointer-events: none; border: 5px solid #f4cf54; outline: 3px solid #233029; border-radius: 15px; box-shadow: 0 0 0 6px #fffdf3, 0 4px 22px #0006; }
#tutorial-shade { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }
#tutorial-shade svg { width: 100%; height: 100%; display: block; }
#tutorial-shade path { fill: #08120f; fill-opacity: .76; pointer-events: visiblePainted; }
.tutorial-open .message { display: none; }
@media (max-width: 800px) {
  .header-tools { gap: 12px; }
  .header-tools .save-status { display: none; }
}
@media (max-width: 620px) {
  .masthead { flex-wrap: wrap; gap: 16px; }
  .tutorial-start { font-size: 21px; padding: 9px 12px; }
  .tutorial-card { right: 12px; bottom: 12px; width: calc(100% - 24px); padding: 10px 18px 16px; }
  .tutorial-card h2 { font-size: 30px; }
  .tutorial-card p { font-size: 24px; margin-bottom: 14px; }
  .tutorial-card button { font-size: 20px; padding: 8px 11px; }
  .tutorial-actions { gap: 6px; }
  .tutorial-actions button { font-size: 18px; min-height: 44px; padding: 6px; }
}
@media (max-height: 500px) {
  .tutorial-card { width: min(320px, calc(100% - 24px)); right: 12px; padding: 6px 14px 10px; }
  .tutorial-actions { gap: 6px; }
  .tutorial-actions button { font-size: 18px; min-height: 44px; padding: 6px; }
  .tutorial-card h2 { font-size: 28px; margin: 2px 0 5px; }
  .tutorial-card p { font-size: 23px; margin-bottom: 8px; }
  .tutorial-picture { margin-bottom: 6px; }
  .tutorial-picture svg { height: 36px; }
  .tutorial-picture figcaption { font-size: 18px; }
}

/* Big, short labels for early readers. Music terms live in grown-up help. */
:root { font-family: Arial, Helvetica, system-ui, sans-serif; }
body { font-size: 20px; }
.intro-copy { font-size: 22px; color: #4e5b47; line-height: 1.4; }
h1 { letter-spacing: -1px; }
.save-status { font-size: 18px; }
.groove-card { min-height: 96px; gap: 16px; padding: 16px; }
.groove-card[aria-pressed=true] { padding: 16px; }
.groove-card strong { font-size: 26px; letter-spacing: 0; }
.groove-art { width: 56px; height: 56px; }
.groove-art .icon { width: 34px; height: 34px; }
.machine-name, .play-state { font: 700 18px Arial, sans-serif; letter-spacing: 0; color: #d3dfc8; }
.tab { font-size: 23px; min-height: 64px; }
.tab .icon { width: 28px; height: 28px; }
.machine-button { font-size: 20px; min-height: 56px; color: #e1e8d9; }
.machine-button .icon { width: 24px; height: 24px; }
.pattern-controls h2 { font-size: 28px; letter-spacing: 0; }
.pattern-controls p, .grid-tip { font-size: 20px; color: #d5dfcc; line-height: 1.4; }
.page-picker button { font-size: 18px; min-height: 52px; padding: 9px; }
.sequence-grid { grid-template-columns: 90px repeat(var(--visible-steps), minmax(0, 1fr)); }
.step-number { font: 700 18px Arial, sans-serif; height: 26px; color: #c1cdb7; }
.drum-pad { font-size: 18px; padding: 8px 4px; overflow-wrap: anywhere; }
.drum-pad .icon { width: 32px; height: 32px; }
.note-key { font-size: 20px; }
.instrument-caption { font: 700 20px Arial, sans-serif; letter-spacing: 0; }
.instrument-picker button { font-size: 22px; min-height: 64px; gap: 10px; }
.instrument-picker small { font: 700 18px Arial, sans-serif; letter-spacing: 0; }
.instrument-picker .icon { width: 28px; height: 28px; }
.beat-ruler > span { font: 700 18px Arial, sans-serif; letter-spacing: 0; }
.loop-light { height: 8px; }
.scope-label { font: 700 20px Arial, sans-serif; letter-spacing: 0; }
.hear-button { font-size: 22px; min-height: 56px; }
.hear-button .icon { width: 26px; height: 26px; }
.sound-control { font-size: 26px; }
.sound-control > span, .range-labels { font-size: 20px; color: #c4d4b9; }
input[type=range] { height: 56px; }
input[type=range]::-webkit-slider-thumb { width: 32px; height: 32px; margin-top: -13px; }
input[type=range]::-moz-range-thumb { width: 25px; height: 25px; }
.tempo-control > span:first-child, .volume-control > span { font-size: 23px; }
.tempo-control small { font: 700 20px Arial, sans-serif; letter-spacing: 0; }
.transport { flex-wrap: wrap; gap: 22px; }
.tempo-control { min-width: 160px; }
.volume-control { width: 150px; }
.transport-actions .play-button { font-size: 24px; min-height: 64px; padding: 14px 20px; }
.transport-actions .play-button .icon { width: 28px; height: 28px; }
.transport-actions .reset-button { font-size: 22px; min-height: 64px; }
.discovery, .app-footer button, .message { font-size: 20px; }
.app-footer button { max-width: none; }
@media (max-width: 850px) {
  .groove-card { gap: 10px; padding: 12px; }
  .groove-card[aria-pressed=true] { padding: 12px; }
  .groove-card strong { font-size: 23px; }
  .groove-art { width: 44px; height: 44px; }
  .groove-art .icon { width: 30px; height: 30px; }
  .instrument-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab { padding: 12px; }
}
@media (max-width: 620px) {
  .intro-copy { font-size: 20px; max-width: none; }
  .groove-card { flex-direction: row; align-items: center; min-height: 88px; }
  .groove-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .groove-card { flex-direction: column; gap: 8px; align-items: center; }
  .groove-card strong { font-size: 20px; }
  .groove-art { width: 40px; height: 40px; }
  .chosen { top: 6px; right: 6px; }
  .workspace-bar { align-items: stretch; }
  .tab { flex-direction: column; gap: 5px; font-size: 20px; padding: 9px 5px; }
  .tab .icon { width: 26px; height: 26px; }
  .workspace-bar > .machine-button { flex-direction: column; font-size: 18px; padding: 8px; }
  .workspace-bar > .machine-button span { display: block; }
  .sequence-grid { grid-template-columns: 78px repeat(var(--visible-steps), minmax(0, 1fr)); }
  .page-picker button { font-size: 18px; }
  .transport { gap: 16px; }
  .tempo-control { flex-basis: 100%; }
  .volume-control { max-width: none; }
  .transport-actions { gap: 10px; }
  .transport-actions .play-button { font-size: 22px; padding: 12px; }
  .transport-actions .reset-button { font-size: 20px; padding: 12px; }
}

/* A bright music toy: colour identifies each instrument; ink marks playback. */
:root {
  --paper: #fff8e9; --ink: #26344a; --muted: #536473; --line: #e6dfce;
  --surface: #fffdf8; --panel: #eef1fd; --control: #ffffff;
  --border: #bcc9d5; --shadow: #c9d5e2; --subtle: #4b6073;
  --card-one: #fff0c9; --card-two: #f0e8ff; --card-three: #e1f6f2;
  --tab-one: #ffe1d4; --tab-two: #e9dfff; --tab-three: #cdf0eb;
  --action: #ffdf67; --action-ink: #26344a; --action-border: #8e732d; --action-shadow: #c9ab50;
  --accent: #c87520; --brand: #354569; --hover: #fff2b5; --selected: #e0d0ff;
  --transport: #fff1ca; --scope: #e7f6f4; --wave: #25796f; --stop: #ffb19b;
  --pad-ink: #26344a; --playhead: #26344a;
  --machine: var(--surface); --step: var(--panel); --focus: var(--ink);
}
.brand-dot { color: var(--accent); }
.brand-mark { background: var(--brand); box-shadow: 0 4px 0 var(--shadow); }
.masthead { border-bottom: 2px solid var(--line); }
.intro-copy { color: var(--muted); }
h1 > span { color: var(--accent); }
.help-button { background: var(--control); border: 2px solid var(--border); }
.groove-card { border: 3px solid var(--border); box-shadow: 0 4px 0 var(--shadow); }
.groove-card:nth-child(3n + 1) { background: var(--card-one); }
.groove-card:nth-child(3n + 2) { background: var(--card-two); }
.groove-card:nth-child(3n) { background: var(--card-three); }
.groove-card[aria-pressed=true] { border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--shadow); }
.groove-card:hover { filter: brightness(1.025); }
.groove-art { border: 2px solid #26344a12; }
.groove-art .icon { stroke-width: 2.2; }
.machine { background: var(--machine); color: var(--ink); border: 3px solid var(--border); border-radius: 28px; box-shadow: 0 8px 0 var(--shadow); }
.machine-top { background: var(--panel); border-bottom: 2px solid var(--border); }
.machine-name, .play-state, .play-state.playing { color: var(--subtle); }
.play-state i { background: #9aa7be; }
.play-state.playing i { background: #278362; box-shadow: 0 0 0 4px #c7f0d4; }
.tabs { background: var(--panel); padding: 7px; gap: 7px; border-radius: 18px; }
.tab { border: 2px solid transparent; color: var(--ink); min-height: 66px; }
.tab[data-tab=drums] { background: var(--tab-one); }
.tab[data-tab=melody] { background: var(--tab-two); }
.tab[data-tab=sound] { background: var(--tab-three); }
.tab[aria-selected=true] { border-color: var(--ink); box-shadow: 0 4px 0 var(--shadow); }
.tab:hover:not([aria-selected=true]) { color: var(--ink); background: var(--hover); }
.machine :focus-visible, .machine .controller-focus { outline-color: var(--ink) !important; }
.machine-button { color: var(--ink); background: var(--control); border: 2px solid var(--border); box-shadow: 0 3px 0 var(--shadow); border-radius: 15px; }
.machine-button:hover:enabled { background: var(--hover); border-color: var(--border); }
.pattern-controls p, .grid-tip, .grid-tip span, .instrument-caption { color: var(--subtle); }
.page-picker button { background: var(--panel); border: 2px solid var(--border); color: var(--subtle); }
.page-picker button[aria-pressed=true] { background: var(--action); color: var(--action-ink); border-color: var(--action-border); }
.step-number, .step-number.beat-start { color: var(--subtle); }
.step-number.current { color: var(--ink); background: var(--action); border-radius: 8px; }
.drum-pad, .note-key { background: var(--row-color); color: var(--pad-ink); border: 2px solid #26344a25; box-shadow: 0 3px 0 var(--shadow); border-radius: 12px; }
.drum-pad:active, .drum-pad.sounding, .note-key:active, .note-key.sounding { background: var(--row-color); color: var(--pad-ink); filter: brightness(1.08); box-shadow: inset 0 0 0 3px var(--ink); }
.key-dot { background: #26344a55; }
.step, .step.beat-start { background: color-mix(in srgb, var(--row-color) 13%, var(--control)); border: 2px solid var(--border); border-top: 4px solid color-mix(in srgb, var(--row-color) 60%, var(--border)); box-shadow: 0 3px 0 var(--border); border-radius: 12px; }
.step[aria-pressed=true] { background: var(--row-color); border-color: #26344a40; border-top-color: #26344a40; box-shadow: 0 3px 0 var(--shadow); }
.step.current, .melody-grid .step.current { box-shadow: inset 0 0 0 3px var(--playhead), 0 0 0 2px var(--surface); }
.instrument-picker button { background: color-mix(in srgb, var(--instrument-color, #c5bbec) 35%, var(--control)); color: var(--ink); border: 2px solid var(--border); border-radius: 15px; box-shadow: 0 3px 0 var(--shadow); }
.instrument-picker button:hover { background: var(--hover); }
.instrument-picker small { color: var(--subtle); }
.instrument-picker button[aria-pressed=true] { background: var(--selected); color: var(--ink); border-color: var(--border); box-shadow: 0 3px 0 var(--shadow); }
.switch-icon { color: var(--subtle); font-size: 28px; opacity: 1; }
.beat-ruler, .beat-ruler > span { color: var(--subtle); }
.loop-light { background: var(--panel); }
.loop-light:nth-child(4n+1) { background: var(--border); }
.loop-light.current { background: var(--accent); box-shadow: 0 0 0 3px var(--action); }
.transport { background: var(--transport); border-top: 3px solid var(--border); }
.tempo-control small, .volume-control > span, .range-labels, .sound-control > span { color: var(--muted); }
.tempo-control input { --track-color: var(--accent); }
.volume-control input { --track-color: var(--wave); }
input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--track-color) 0 var(--fill), var(--border) var(--fill) 100%); height: 8px; }
input[type=range]::-webkit-slider-thumb { border-color: white; margin-top: -12px; box-shadow: 0 0 0 3px var(--track-color); }
input[type=range]::-moz-range-track { background: var(--border); height: 8px; }
input[type=range]::-moz-range-thumb { border-color: white; box-shadow: 0 0 0 3px var(--track-color); }
.play-button, .transport-actions .play-button { background: var(--action); color: var(--action-ink); border: 3px solid var(--action-border); box-shadow: 0 5px 0 var(--action-shadow); border-radius: 17px; }
.play-button:hover { background: var(--hover); }
.play-button[aria-pressed=true] { background: var(--stop); box-shadow: 0 5px 0 var(--action-shadow); border-color: var(--action-border); }
.sound-view { background: var(--scope); border: 2px solid var(--border); border-radius: 19px; }
.scope-label { color: var(--wave); }
.scope-line { stroke: var(--border); }
#wave-path { stroke: var(--wave); stroke-width: 4; }
.hear-button { color: var(--wave); background: var(--control); border: 2px solid var(--border); }
.sound-control input { --track-color: var(--wave); }
.discovery, .app-footer button { color: var(--muted); }
.tutorial-start { background: var(--action); box-shadow: 0 4px 0 var(--action-shadow); }
.tutorial-card { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.tutorial-actions #tutorial-next, .tutorial-actions #tutorial-done { background: var(--action); border-color: var(--action-border); }
@media (max-width: 620px) {
  .tabs { gap: 4px; padding: 4px; }
  .tab { padding: 9px 3px; }
  .machine { border-width: 2px; }
  .groove-card { padding: 10px 8px; }
  .groove-card[aria-pressed=true] { padding: 10px 8px; }
}

/* The palette changes the whole instrument; musical row colours stay familiar. */
:root[data-theme=pink] {
  --paper: #fff0f6; --ink: #532d4e; --muted: #78536e; --line: #efd0df;
  --surface: #fff9fd; --panel: #fce6f1; --control: #fffafd;
  --border: #d7a8c2; --shadow: #e6bfd5; --subtle: #78536e;
  --card-one: #ffdce9; --card-two: #f4e2ff; --card-three: #fff0db;
  --tab-one: #ffd6e7; --tab-two: #ebd3ff; --tab-three: #ffe7ed;
  --action: #ffb8d9; --action-border: #a75a83; --action-shadow: #d58fb4;
  --accent: #af4d86; --brand: #8b4a7d; --hover: #ffe1f0; --selected: #f7c7e2;
  --transport: #ffe3ef; --scope: #fae8f5; --wave: #944774; --stop: #ffc5a4;
}
:root[data-theme=space] {
  color-scheme: dark;
  --paper: #10182e; --ink: #f3f1ff; --muted: #c1c9e3; --line: #34425f;
  --surface: #1b2640; --panel: #25324f; --control: #25324f;
  --border: #667a9e; --shadow: #080f20; --subtle: #c4d2ef;
  --card-one: #343151; --card-two: #293855; --card-three: #253e4d;
  --tab-one: #46304a; --tab-two: #3d3260; --tab-three: #23494d;
  --action: #ffdd76; --action-border: #b29652; --action-shadow: #76612f;
  --accent: #ffc370; --brand: #394974; --hover: #3e4163; --selected: #4c3c70;
  --transport: #17223b; --scope: #0c1b30; --wave: #8ce8dd; --stop: #ffc1ac;
  --playhead: #ffffff;
}
:root[data-theme=dino] {
  --paper: #eef7d9; --ink: #29452c; --muted: #4e6946; --line: #c6d8b1;
  --surface: #fbfff0; --panel: #dfeecb; --control: #f9fff0;
  --border: #9cb88a; --shadow: #b1c79a; --subtle: #4e6946;
  --card-one: #e0edb5; --card-two: #d3edc7; --card-three: #f1e8bd;
  --tab-one: #d4e7a8; --tab-two: #c4e5b8; --tab-three: #e5ebad;
  --action: #e2e878; --action-border: #7a873e; --action-shadow: #b2bd60;
  --accent: #6a762b; --brand: #3e6442; --hover: #e9f5bd; --selected: #cae29f;
  --transport: #e8f0c3; --scope: #e4f0d3; --wave: #3d7047; --stop: #ffcd95;
}
:root[data-theme=race] {
  --paper: #ecf4ff; --ink: #213e60; --muted: #45617f; --line: #c7d7ec;
  --surface: #fbfdff; --panel: #dceaff; --control: #ffffff;
  --border: #9eb6d4; --shadow: #b3c9e3; --subtle: #45617f;
  --card-one: #ffdcd6; --card-two: #d8e8ff; --card-three: #e6ecf7;
  --tab-one: #ffd0c7; --tab-two: #c9dfff; --tab-three: #dbe6f7;
  --action: #ffb6a6; --action-border: #a45c51; --action-shadow: #d38b7d;
  --accent: #b83e42; --brand: #305784; --hover: #ffdfd5; --selected: #bcd8ff;
  --transport: #dceaff; --scope: #e5f1ff; --wave: #28639b; --stop: #ffd36b;
}
html[data-theme=space] body { background-image: radial-gradient(#c8d5ff88 1px, transparent 1.5px), radial-gradient(#a8cfff55 1px, transparent 1.5px); background-size: 77px 97px, 131px 149px; background-position: 13px 20px, 51px 63px; }
html[data-theme=pink] body { background-image: radial-gradient(#e6a7c044 2px, transparent 2.5px); background-size: 43px 43px; }
html[data-theme=dino] body { background-image: radial-gradient(ellipse at 0 0, #b0d88744 0 18px, transparent 19px); background-size: 103px 83px; }
html[data-theme=race] .machine-top { border-bottom: 6px solid transparent; border-image: repeating-linear-gradient(90deg, #29445f 0 12px, #ffffff 12px 24px) 6; }
.look-button { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 8px 14px; border: 2px solid var(--border); border-radius: 13px; background: var(--control); color: var(--ink); font-size: 22px; font-weight: 700; white-space: nowrap; }
#theme-symbol { font-size: 26px; }
.intro > div { min-width: 0; }
.look-mascot { font-size: 72px; line-height: 1; flex-shrink: 0; }
.theme-dialog { width: min(540px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 3px solid var(--border); }
.theme-dialog h2 { font: 800 32px Arial, sans-serif; margin: 0; letter-spacing: 0; }
#theme-close { min-width: 48px; min-height: 48px; border: 2px solid var(--border); border-radius: 50%; background: var(--control); color: var(--ink); font-size: 30px; }
.theme-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 22px 0 4px; }
.theme-choices button { position: relative; min-width: 0; min-height: 118px; border: 3px solid #b6bdc9; border-radius: 18px; background: #fff8e9; color: #26344a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 23px; font-weight: 700; }
.theme-picture { font-size: 42px; line-height: 1.2; }
.theme-choices [data-theme-choice=pink] { background: #ffe1ef; }
.theme-choices [data-theme-choice=space] { background: #1b2640; color: #f3f1ff; }
.theme-choices [data-theme-choice=dino] { background: #e0edb5; }
.theme-choices [data-theme-choice=race] { background: #d8e8ff; }
.theme-choices button[aria-pressed=true] { border-color: #b47c12; box-shadow: 0 0 0 3px #ffdf67; }
.theme-picked { position: absolute; top: 5px; right: 7px; font-size: 23px; visibility: hidden; }
.theme-choices button[aria-pressed=true] .theme-picked { visibility: visible; }
#theme-done { color: var(--action-ink); }
.tutorial-start, .tutorial-actions #tutorial-next, .tutorial-actions #tutorial-done { color: var(--action-ink); }
.tutorial-card button { background: var(--panel); color: var(--ink); border-color: var(--border); }
.tutorial-topline > span { color: var(--subtle); }
.tutorial-picture text { fill: var(--ink); }
.tutorial-pill { fill: color-mix(in srgb, var(--row-color) 13%, var(--control)); stroke: var(--border); stroke-width: 1; }
.tutorial-pill.on { fill: var(--row-color); stroke: #26344a40; }
.tutorial-pill.current, .tutorial-chord { stroke: var(--playhead); stroke-width: 3; }
.tutorial-arrow, .tutorial-wave { stroke: var(--wave); }
.tutorial-axis { stroke: var(--border); }
.help-button, dialog { color: var(--ink); }
dialog p, dialog dd, .save-status { color: var(--muted); }
.controller-guide { background: var(--panel); }
#close-help { background: var(--panel); color: var(--ink); }
html[data-theme=space] .play-button:hover { background: #ffe9a0; }
@media (max-width: 850px) { .header-tools { flex-wrap: wrap; justify-content: flex-end; gap: 10px; } }
@media (max-width: 620px) {
  .masthead { align-items: flex-start; }
  .header-tools { width: 100%; justify-content: flex-start; }
  .look-button { font-size: 21px; }
  .look-mascot { font-size: 54px; }
  .theme-dialog { padding: 18px; }
  .theme-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.groove-art { color: var(--pad-ink); }
.step-number.current { color: var(--action-ink); }
html[data-theme=space] .step.current[aria-pressed=true] { box-shadow: inset 0 0 0 3px #26344a, 0 0 0 2px white; }

#theme-done { font-size: 22px; min-height: 56px; }
@media (max-height: 500px) and (min-width: 620px) {
  .theme-dialog { width: min(700px, calc(100vw - 24px)); padding: 16px; }
  .theme-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 12px 0 0; }
  .theme-choices button { min-height: 88px; font-size: 20px; gap: 3px; }
  .theme-picture { font-size: 32px; }
  #theme-done { margin-top: 14px; }
}
.help-button:hover { background: var(--hover); }
button:focus-visible, a:focus-visible, input:focus-visible, .controller-focus { outline-color: var(--ink) !important; }
dialog::backdrop { background: #17213799; }
html[data-theme=space] dialog::backdrop { background: #070b1dc9; }

/* Keep each bar roomy: longer songs add bars, not smaller step targets. */
.loop-size { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.loop-size h2 { font-size: 22px; margin: 0; }
.loop-size-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 420px); }
.loop-size-choices button, .page-picker button { border: 2px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--ink); font-size: 18px; font-weight: 700; min-height: 52px; padding: 8px; }
.loop-size-choices button { display: grid; gap: 3px; }
.loop-size-choices button span:last-child { font-weight: 500; }
.loop-size-choices button[aria-pressed=true], .page-picker button[aria-pressed=true] { background: var(--action); color: var(--action-ink); border-color: var(--action-border); }
.page-picker { flex-wrap: wrap; }
.page-picker button { position: relative; padding-bottom: 15px; }
.page-picker button::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: 5px; height: 5px; border-radius: 4px; background: transparent; }
.page-picker button.playing::after { background: currentColor; box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 699px) {
  .loop-size { align-items: stretch; flex-direction: column; gap: 10px; }
  .loop-size-choices { width: 100%; }
}
/* In short landscape windows, leave room beside the guide for four large beats. */
@media (min-width: 700px) and (max-height: 500px) {
  .tutorial-open .sequence-grid { width: calc(100vw - 410px); margin-left: auto; }
}

/* Use each theme's ink on selected tabs too; inherited legacy colours are unsafe. */
.tab[aria-selected=true] { color: var(--ink); }
.tab[data-tab=drums][aria-selected=true] { background: var(--tab-one); }
.tab[data-tab=melody][aria-selected=true] { background: var(--tab-two); }
.tab[data-tab=sound][aria-selected=true] { background: var(--tab-three); }

/* Page selection lives on the song map, directly below the editable boxes. */
.beat-ruler { display: block; }
.beat-ruler > span { display: block; margin-bottom: 10px; }
.beat-ruler > .loop-map { display: block; position: relative; height: 90px; }
.loop-map #loop-lights { display: grid; gap: 4px; position: absolute; inset: 9px 8px 35px; }
.loop-map .loop-light { display: grid; grid-template-rows: repeat(5,minmax(0,1fr)); gap: 3px; height: auto; padding: 2px; background: transparent; }
.map-dot { border-radius: 3px; background: var(--border); opacity: .45; }
.map-dot.on { background: var(--map-color); opacity: 1; }
.loop-map .loop-light.current { background: var(--playhead); box-shadow: 0 0 0 2px var(--playhead); }
.loop-map .page-picker { position: absolute; inset: 0; display: grid; gap: 2px; margin: 0; width: 100%; }
.loop-map .page-picker button { display: flex; align-items: end; justify-content: center; padding: 4px; min-width: 44px; min-height: 44px; font-size: 18px; background: transparent; color: var(--ink); border: 2px solid transparent; border-radius: 10px; }
.loop-map .page-picker button[aria-pressed=true] { background: color-mix(in srgb,var(--action) 12%,transparent); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--action); }
.loop-map .page-picker button::after { display: none; }

.volume-section { padding: 18px 26px; background: var(--transport); border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); }
.volume-section .volume-control { display: flex; align-items: center; gap: 18px; width: 100%; max-width: none; }
.volume-section .icon { width: 36px; height: 36px; flex: 0 0 36px; }
.volume-section #volume { flex: 1; width: 100%; min-width: 0; height: 64px; margin: 0; }
.volume-section #volume::-webkit-slider-thumb { width: 38px; height: 38px; }
.volume-section #volume::-moz-range-thumb { width: 38px; height: 38px; }
@media (max-width: 620px) { .volume-section { padding: 14px; } }
.loop-map .page-picker { align-items: stretch; }

.loop-size-dots { display: grid; grid-template-columns: repeat(4,8px); gap: 3px; justify-content: center; align-content: center; min-height: 29px; }
.loop-size-dots i { width: 8px; height: 5px; border-radius: 4px; background: currentColor; }

.volume-section #mute { display: grid; place-items: center; flex: 0 0 56px; width: 56px; min-height: 64px; padding: 6px; background: var(--control); color: var(--ink); border: 2px solid var(--border); border-radius: 14px; }
.volume-section #mute:hover { background: var(--hover); }
.volume-section #mute[aria-pressed=true] { background: var(--action); color: var(--action-ink); border-color: var(--action-border); }

.melody-grid .step { display: grid; place-items: center; padding: 3px; }
.melody-grid .step[aria-pressed=true]::after { display: none; }
.melody-grid .step .icon { width: 30px; height: 30px; color: var(--pad-ink); pointer-events: none; stroke-width: 2.3; }

/* Keep the music machine first, then offer another song to try. */
.machine + .groove-picker { margin-top: 28px; margin-bottom: 0; }

#synth-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 850px) {
  #synth-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #synth-picker button:last-child { grid-column: 1 / -1; }
}

.transport-actions { flex-wrap: wrap; }
@media (min-width: 1400px) {
  .app-shell { max-width: 1920px; padding-inline: 28px; }
  .music-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 24px; }
  .intro { grid-column: 1 / -1; }
  .music-sidebar { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: 18px; max-height: calc(100dvh - 36px); overflow-y: auto; padding: 10px; border: 2px solid var(--border); border-radius: 20px; background: var(--surface); }
  .music-sidebar .tabs { display: flex; flex-direction: column; gap: 8px; padding: 0; background: transparent; }
  .music-sidebar .tab { flex: none; justify-content: flex-start; width: 100%; min-height: 58px; padding: 10px 14px; }
  .music-sidebar h2 { font-size: 23px; margin: 22px 4px 12px; }
  .music-sidebar .groove-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .music-sidebar .groove-card, .music-sidebar .groove-card[aria-pressed=true] { min-width: 0; min-height: 86px; padding: 7px; gap: 6px; flex-direction: column; align-items: center; }
  .music-sidebar .groove-art { width: 44px; height: 44px; }
  .music-sidebar .groove-art .icon { width: 32px; height: 32px; }
  .music-sidebar .groove-card strong { font-size: 20px; }
  .music-sidebar .chosen { top: 7px; right: 7px; }
  .machine { grid-column: 2; grid-row: 2; min-width: 0; }
  .workspace-bar { justify-content: flex-end; padding-top: 14px; }
  .music-layout > .app-footer, .music-layout > .message { grid-column: 1 / -1; }
}

@media (min-width: 1400px) {
  .music-sidebar .loop-size { flex-direction: column; align-items: stretch; margin: 22px 0 0; gap: 10px; }
  .music-sidebar .loop-size h2 { margin: 0; }
  .music-sidebar .loop-size-choices { grid-template-columns: 1fr; width: 100%; }
  .music-sidebar .loop-size-choices button { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
}

.speaker-sync { margin: 22px 0; padding: 18px; border: 2px solid var(--border); border-radius: 18px; background: var(--panel); }
.speaker-sync h3 { margin: 0 0 10px; font-size: 25px; }
.speaker-sync p { font-size: 18px; line-height: 1.4; }
.sync-lights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.sync-lights i { height: 48px; border: 3px solid var(--border); border-radius: 14px; background: var(--control); }
.sync-lights i.on { background: var(--action); border-color: var(--ink); box-shadow: 0 0 0 3px var(--action); }
.sync-control { display: block; font-size: 22px; font-weight: 700; }
.sync-control > span { display: flex; justify-content: space-between; gap: 12px; }
.sync-control input { display: block; width: 100%; --track-color: var(--wave); }
.sync-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sync-actions button { min-height: 48px; padding: 10px 12px; border: 2px solid var(--border); border-radius: 12px; background: var(--control); color: var(--ink); font-size: 19px; font-weight: 700; }
#sync-test[aria-pressed=true] { background: var(--action); color: var(--action-ink); }

/* Preset lengths use the same four-beat rows as the size choices. */
.groove-label { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.groove-label .loop-size-dots { align-content: start; }
/* Selection stays out of the content flow, so every song keeps its alignment. */
.groove-card .chosen { position: absolute; top: 7px; right: 7px; margin: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); }
.groove-card .chosen .icon { width: 14px; height: 14px; }

.song-slots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 2px solid var(--border); padding-top: 12px; }
.song-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 44px; min-height: 56px; padding: 10px 14px; border: 2px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--ink); box-shadow: 0 3px 0 var(--shadow); }
.song-slot strong { font-size: 22px; }
.song-slot[aria-pressed=true] { background: var(--action); color: var(--action-ink); border-color: var(--ink); }
.song-slot:hover:enabled { filter: brightness(1.05); }

.app-footer { flex-wrap: wrap; gap: 12px 20px; }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.credits-dialog { width: min(540px, calc(100vw - 32px)); padding: 24px; background: var(--surface); border: 3px solid var(--border); }
.credits-dialog h2 { margin: 0; font-size: 32px; letter-spacing: 0; }
#credits-close { min-width: 48px; min-height: 48px; border: 2px solid var(--border); border-radius: 50%; background: var(--control); color: var(--ink); font-size: 30px; }
.credits-dialog p { font-size: 18px; line-height: 1.5; }
.share-dialog p { font-size: 22px; }
.share-dialog #share-link { width: 100%; min-width: 0; min-height: 56px; padding: 12px; font-size: 18px; color: var(--ink); background: var(--panel); border: 2px solid var(--border); border-radius: 12px; }
.share-dialog button { min-width: 48px; min-height: 48px; padding: 10px 12px; font-size: 22px; font-weight: 700; border: 2px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--ink); }
.share-dialog #share-close { padding: 0; font-size: 30px; border-radius: 50%; }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.share-actions #share-copy { background: var(--action); color: var(--action-ink); border-color: var(--action-border); }
.credits-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 22px 0; }
.credits-list li { display: grid; gap: 5px; padding: 16px; background: var(--panel); border-radius: 14px; }
.credits-list strong { font-size: 24px; overflow-wrap: anywhere; }
.credits-list span { font-size: 18px; color: var(--muted); }
#credits-done { font-size: 22px; color: var(--action-ink); }

/* Keep audition and sound cycling together beside each drum's beats. */
.drum-lane { display: grid; grid-template-rows: 1fr 44px; gap: 6px; min-width: 0; }
.drum-lane .drum-pad { min-width: 0; min-height: 72px; }
.drum-cycle { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 2px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--ink); font-size: 30px; line-height: 1; box-shadow: 0 3px 0 var(--shadow); }
.drum-cycle:hover { background: var(--hover); }

/* A whole instrument fits on a desktop without shrinking its touch targets. */
@media (min-width: 1400px) {
  .masthead { padding-block: 10px; }
  .intro { padding-block: 8px; }
  .intro .look-mascot { font-size: 44px; }
  .intro > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 22px; }
  .intro h1 { font-size: 36px; }
  .intro-copy { margin: 0; font-size: 20px; }
  .music-sidebar { top: 10px; }
  .music-sidebar .tabs { gap: 6px; }
  .music-sidebar .tab { min-height: 52px; padding-block: 7px; }
  .music-sidebar h2 { margin: 12px 4px 8px; }
  .music-sidebar .loop-size { margin-top: 12px; gap: 8px; }
  .music-sidebar .loop-size-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .music-sidebar .loop-size-choices button { flex-direction: column; justify-content: center; padding: 6px 2px; font-size: 18px; }
  .music-sidebar .groove-card, .music-sidebar .groove-card[aria-pressed=true] { gap: 4px; padding: 4px; }
  .music-sidebar .groove-picker { gap: 6px; }
  .music-sidebar .groove-label { gap: 4px; }
  .music-sidebar .chosen { position: absolute; }
  .music-sidebar .groove-label .loop-size-dots { min-height: 18px; gap: 2px; }
  .music-sidebar .groove-label .loop-size-dots i { height: 3px; }
  .music-sidebar .song-slots { gap: 6px; padding-top: 8px; }
  .music-sidebar .song-slot { min-height: 48px; padding: 6px; gap: 6px; }
  .music-sidebar .song-slot strong { font-size: 18px; }
  .music-sidebar .song-slot .loop-size-dots { grid-template-columns: repeat(4, 6px); min-height: 18px; gap: 2px; }
  .music-sidebar .song-slot .loop-size-dots i { width: 6px; height: 3px; }
  .music-sidebar .tab { min-height: 50px; }
  .music-sidebar h2 { margin-top: 8px; }
  .machine { position: relative; }
  .machine-top { min-height: 56px; padding: 8px 160px 8px 22px; }
  .workspace-bar { height: 0; padding: 0; }
  .workspace-bar > #undo { position: absolute; top: 4px; right: 18px; min-height: 44px; padding-block: 7px; }
  .workspace { padding: 12px 22px 0; }
  .pattern-controls { margin-bottom: 12px; }
  .pattern-controls > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; }
  .pattern-controls h2 { font-size: 26px; margin-bottom: 0; }
  .pattern-controls p { margin: 0; }
  #drum-grid { grid-template-columns: 142px repeat(var(--visible-steps), minmax(0, 1fr)); }
  .drum-lane { grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: 1fr; }
  .instrument-picker { margin-bottom: 12px; }
  .instrument-picker button { min-height: 52px; padding-block: 7px; }
  .grid-tip { margin-top: 8px; }
  .beat-ruler { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
  .beat-ruler > span { flex: 0 0 auto; margin: 0; }
  .beat-ruler > .loop-map { flex: 1; height: 64px; }
  .loop-map #loop-lights { inset-block: 6px 28px; }
  .volume-section { padding: 8px 22px; }
  .volume-section #volume, .volume-section #mute { height: 56px; min-height: 56px; }
  .transport { padding: 10px 22px; gap: 22px; }
  .tempo-control { display: grid; grid-template-columns: auto minmax(120px, 1fr); column-gap: 18px; }
  .tempo-control > span:first-child { grid-row: 1 / 3; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
  .tempo-control .range-labels { grid-column: 2; margin: 0; }
  .tempo-control input { grid-column: 2; height: 44px; }
  .sound-sliders { gap: 12px; }
  .sound-control { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px; }
  .sound-control > span { margin-top: 0; }
  .sound-control input { grid-column: 1 / -1; height: 48px; }
  .app-footer { padding-block: 8px; }
}

.voice-info-button { display: inline-block; min-width: 44px; min-height: 44px; padding: 4px 2px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; text-decoration: underline dotted; text-underline-offset: 4px; cursor: help; }
.voice-tooltip { position: fixed; z-index: 2; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; padding: 18px; border: 2px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 32px #0006; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.voice-tooltip > strong { font-size: 22px; }
.voice-tooltip p { margin: 14px 0 0; }

/* Give spacious desktop displays the larger controls of a 130% browser view. */
@media (min-width: 2400px) and (min-height: 1200px) {
  .app-shell { zoom: 1.3; }
  .music-sidebar { max-height: calc(100dvh / 1.3 - 20px); }
  .tutorial-card { width: 624px; padding: 24px 31px 29px; }
  .tutorial-card h2 { font-size: 47px; }
  .tutorial-card p { font-size: 36px; }
  .tutorial-card button { font-size: 27px; min-height: 62px; }
  .tutorial-picture svg { height: 78px; }
  .tutorial-picture figcaption { font-size: 26px; }
}