:root {
  color-scheme: light;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #363935;
  background: #e9e7df;
  --mint: #46c8b1;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 50% 20%, #faf9f2, #e4e2d9 80%); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, summary:focus-visible, .instrument-scroll:focus-visible { outline: 3px solid #187b76; outline-offset: 5px; }
main { max-width: 1500px; margin: auto; padding: 52px 32px 24px; }
.page-heading { margin-bottom: 46px; }
.eyebrow { font-size: 10px; letter-spacing: .24em; color: #60867e; font-weight: 800; }
h1 { font-size: clamp(25px, 3.2vw, 42px); font-weight: 500; letter-spacing: -.055em; margin: 13px 0 10px; }
.page-heading p { font-size: 13px; color: #7a7e73; margin: 0; }
.page-heading p span { margin: 0 8px; }
.instrument-scroll { padding: 12px 10px 48px; margin: 0 -10px; overflow-x: auto; }
.pss30 {
  container-type: inline-size;
  --u: 1cqw;
  position: relative;
  width: 100%;
  min-width: 760px;
  aspect-ratio: 640 / 207;
  border-radius: .6cqw .7cqw .5cqw .5cqw;
  background: linear-gradient(120deg, #363837, #262827 40%, #303231 80%, #202221);
  box-shadow: 0 2px 1px #535550 inset, 0 -4px 2px #181a19 inset, 0 22px 26px -12px #252e2a66, 0 4px 6px #0005;
  user-select: none;
}
.speaker { position: absolute; left: .4%; top: 2.5%; bottom: 4%; width: 18.8%; overflow: hidden; border-radius: .4cqw; background: linear-gradient(100deg, #3b3e3b, #272a28); border-right: .15cqw solid #171a18; }
.speaker div {
  position: absolute; inset: 9% 1% 6% -3%;
  background: repeating-linear-gradient(180deg, #474b46 0 .2cqw, #303530 .2cqw .5cqw, #101611 .5cqw .9cqw, #232924 .9cqw 1.25cqw);
  box-shadow: inset -.5cqw 0 .4cqw #1b201a;
}
.panel { position: absolute; left: 19.5%; right: .7%; top: 1%; height: 37%; display: grid; grid-template-columns: 36% 31% 33%; }
.panel > section { position: relative; min-width: 0; border: .1cqw solid #171918; border-top: .12cqw solid #4c4e49; background: linear-gradient(130deg, #373a37, #2b2d2b); }
.identity { padding: 1.6cqw 1.7cqw; }
.brand { display: flex; gap: .4cqw; align-items: center; white-space: nowrap; }
.brand div { display: flex; flex-direction: column; }
.brand strong { font: 900 1.5cqw/.95 "Arial Black", Arial, sans-serif; letter-spacing: -.09cqw; color: #dbddd3; }
.brand small { font-size: .58cqw; color: #d0d2c9; text-align: center; font-weight: 700; letter-spacing: .01cqw; }
.brand b { font: 800 3.5cqw/1 Arial, sans-serif; letter-spacing: -.19cqw; color: #5fa59b; background: repeating-linear-gradient(180deg, #65aba2 0 .18cqw, #2d3430 .18cqw .26cqw); background-clip: text; -webkit-text-fill-color: transparent; }
.sliders { display: flex; gap: 2.4cqw; position: absolute; left: 1.7cqw; bottom: 1.1cqw; }
.switch-control, .volume-control { display: flex; flex-direction: column; align-items: center; position: relative; width: 5.4cqw; gap: .25cqw; }
.switch-labels { font-size: .63cqw; color: #d0cfbd; white-space: nowrap; }
.switch-labels i { display: inline-block; width: .38cqw; height: .38cqw; background: #572d24; border-radius: 50%; margin: 0 .4cqw; }
.switch-labels i.on { background: #ffb26f; box-shadow: 0 0 .65cqw #ff9e5b; }
.control-caption { font-size: .65cqw; font-weight: 700; color: #6ba99c; margin-top: .15cqw; }
.switch-control input { position: absolute; top: .9cqw; margin: 0; width: 4.5cqw; height: 1.5cqw; opacity: 0; cursor: pointer; z-index: 2; }
.power-track { width: 4.5cqw; height: 1.45cqw; background: #111812; border: .12cqw solid #51564b; box-shadow: inset 0 .2cqw .25cqw #000; padding: .08cqw; }
.power-track::after { content: ""; display: block; width: 1.8cqw; height: 1.04cqw; background: repeating-linear-gradient(90deg, #b6afa0 0 .15cqw, #8d8b7c .15cqw .25cqw); box-shadow: 0 .15cqw .15cqw #0008; }
.switch-control input:checked + .power-track::after { transform: translateX(2.15cqw); }
.switch-control input:focus-visible + .power-track { outline: .25cqw solid #a5f1dc; outline-offset: .3cqw; }
.volume-control input { appearance: none; width: 5.2cqw; height: 1.3cqw; margin: 0; border: .12cqw solid #53594d; background: #111812; cursor: ew-resize; border-radius: 0; }
.volume-control input::-webkit-slider-thumb { appearance: none; width: 1.5cqw; height: 1.1cqw; background: repeating-linear-gradient(90deg, #c1bbac 0 .15cqw, #999687 .15cqw .25cqw); border: 0; border-radius: .1cqw; }
.volume-control input::-moz-range-thumb { width: 1.5cqw; height: 1.1cqw; background: #b2ac9d; border: 0; border-radius: .1cqw; }
.panel h2 { text-align: center; margin: .9cqw 0 .8cqw; font-size: .8cqw; line-height: 1; font-weight: 700; color: #68aa9d; }
.rhythm-panel, .orchestra-panel { padding: 0 1.25cqw; }
.rhythm-grid, .orchestra-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65cqw .65cqw; }
.control { display: flex; align-items: center; gap: .42cqw; color: #e1dfcf; border: 0; padding: 0; background: none; text-align: left; font-size: .63cqw; line-height: 1.05; white-space: nowrap; min-width: 0; }
.control .cap { display: block; flex-shrink: 0; width: 2.05cqw; height: 1.18cqw; border-radius: .18cqw; background: linear-gradient(180deg, #66ecd3, #18bca0 65%, #068570); border: .12cqw solid #183e33; box-shadow: 0 .25cqw .12cqw #000b, inset 0 .12cqw .05cqw #d2ffe580, 0 0 0 .12cqw #131e18; }
.control:hover .cap { filter: brightness(1.16); }
.control:active .cap, .control[aria-pressed="true"] .cap { transform: translateY(.16cqw); box-shadow: 0 .05cqw .1cqw #0009, inset 0 .15cqw .2cqw #003e2855; }
.control[aria-pressed="true"] { color: #94f6da; }
.control[aria-pressed="true"] .cap { outline: .09cqw solid #b0f9dc; }
.control:focus-visible { outline: .17cqw solid #b6f2df; outline-offset: .35cqw; }
.stone .cap { background: linear-gradient(#c7c1b0, #999586 65%, #787c6e); border-color: #474c40; }
.coral .cap { background: linear-gradient(#ff8069, #ed5845 65%, #b32d29); border-color: #5f2822; }
.yellow .cap { background: linear-gradient(#ffe895, #f6c84a 65%, #c39125); border-color: #775b24; }
.long .cap { width: 7.5cqw; }
.rhythm-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: .65cqw; }
.tempo-controls { text-align: center; color: #d4d4c3; font-size: .58cqw; }
.tempo-controls > div { display: flex; gap: 1.3cqw; margin-bottom: .45cqw; }
.tempo-controls .control { flex-direction: column; gap: .32cqw; font-size: .58cqw; }
.tempo-controls .cap { width: 2cqw; height: 1.05cqw; }
.memory-controls { display: grid; grid-template-columns: 1fr 1fr 2.1fr; gap: .65cqw; margin-top: .8cqw; }
.memory-controls .control { font-size: .59cqw; }
.memory-controls .long .cap { width: 7.8cqw; }
.memory-labels { display: flex; justify-content: space-between; padding-right: 2.5cqw; margin-top: .5cqw; color: #63aa99; font-size: .55cqw; font-weight: 700; }
.keyboard-rail { position: absolute; left: 19.5%; right: .7%; top: 38%; height: 7%; background: repeating-linear-gradient(180deg, #444a42 0 .12cqw, #242c24 .12cqw .3cqw, #323b32 .3cqw .45cqw); border-bottom: .3cqw solid #171d17; }
.keys { position: absolute; left: 19.6%; right: 1.1%; top: 45%; bottom: 5.5%; background: #141a13; box-shadow: 0 -.3cqw .3cqw #000; }
.key { position: absolute; padding: 0; border: 0; touch-action: none; cursor: pointer; }
.white { top: 0; bottom: 0; left: calc(var(--position) * 100% / 19); width: calc(100% / 19 - .12cqw); background: linear-gradient(90deg, #d9d3b8, transparent 9% 91%, #b0ab97), linear-gradient(#d8d3b9, #fff5d8 10%, #f5ebd0 90%, #dad0b7); border-radius: 0 0 .2cqw .2cqw; box-shadow: 0 .22cqw .08cqw #0a100b; z-index: 1; }
.black { top: 0; height: 56%; left: calc((var(--position) + 1) * 100% / 19 - 1.05cqw); width: 2.1cqw; z-index: 2; background: linear-gradient(90deg, #41433c, #171d18 18% 84%, #31392e); border-radius: 0 0 .2cqw .2cqw; box-shadow: .1cqw .3cqw .1cqw #000a, inset 0 -.5cqw 0 #101710; border-bottom: .15cqw solid #3f4639; }
.white.active { background: linear-gradient(#bdb69e, #e2d8bd); transform: translateY(.2cqw); box-shadow: inset 0 .4cqw .5cqw #0003; }
.black.active { filter: brightness(1.8); transform: translateY(.18cqw); }
.key:focus-visible { outline: .25cqw solid #168d78; outline-offset: -.3cqw; }
.key::after { content: attr(data-pc); position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; font: 600 .95cqw Arial, sans-serif; color: #8a8774; pointer-events: none; }
.black::after { color: #b5c6b4; bottom: 16%; }
.pss30:not(.show-hints) .key::after { display: none; }
.front-edge { position: absolute; bottom: 1%; left: 19.2%; right: .2%; height: 3.5%; border-top: .12cqw solid #555a4e; background: linear-gradient(#313a30, #252c24); }
.dashboard { margin-top: 6px; padding: 23px 25px 0; border: 1px solid #cdd1c5; border-radius: 12px; background: #f5f6eecc; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 44px; }
.readout > span { display: block; font-size: 9px; letter-spacing: .17em; color: #8a9384; margin-bottom: 8px; }
.readout strong { font-size: 16px; font-weight: 500; }
.readout strong small { font-size: 10px; color: #7b8878; }
.hint-toggle { margin-left: auto; padding: 10px 14px; min-height: 44px; border: 1px solid #b9c8bc; border-radius: 6px; color: #37685b; background: #eaf1e6; font-size: 12px; }
.hint-toggle[aria-pressed="true"] { background: #316b5c; color: #fff; }
#status { flex-basis: 100%; padding: 14px 0; border-top: 1px solid #d9ded2; margin: 0; font-size: 12px; line-height: 1.5; color: #617063; }
#status.error { color: #a13429; }
.guide { margin-top: 22px; font-size: 13px; color: #6a7569; }
.guide summary { padding: 14px 0; cursor: pointer; width: fit-content; }
.guide-content { max-width: 850px; line-height: 1.8; padding-bottom: 14px; }
.guide-content p { margin: 10px 0; }
.synthesis-note { color: #868b7d; border-top: 1px solid #d3d8cd; padding-top: 14px; }
footer { display: flex; justify-content: center; gap: 14px; color: #94988a; font-size: 10px; padding: 40px 0 12px; }
footer span { color: #b4b8aa; }
@media (max-width: 700px) {
  main { padding: 28px 16px 16px; }
  .page-heading { margin-bottom: 20px; }
  .instrument-scroll { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .dashboard { padding: 18px 18px 0; gap: 20px 30px; }
  .hint-toggle { margin-left: 0; }
  footer { gap: 8px; font-size: 9px; }
}