.music-studio{--music-ink:#33261f;--music-paper:#f3eee5;--music-muted:#d0bbaa;--music-rust:#ba7554;color:var(--music-ink);font-family:var(--font-sans,Arial,sans-serif);text-align:left;border:1px solid #33261f35}
.music-studio *{box-sizing:border-box}
.music-studio button,.music-studio input{font:inherit}
.music-studio button{cursor:pointer}
.music-studio button:disabled{cursor:not-allowed;opacity:.55}
.music-studio button:focus-visible,.music-studio input:focus-visible{outline:2px solid #cc855e;outline-offset:4px}
.music-console{background:#33261f;color:#f3eee5;padding:27px 34px 21px}
.music-console-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid #dec9b629}
.music-overline{font-size:10px;line-height:1.5;letter-spacing:1.1px;font-weight:500;text-transform:uppercase}
.music-console-heading .music-overline{display:flex;align-items:center;gap:8px;color:#d9c3b1}
.music-led{display:block;width:5px;height:5px;border-radius:50%;background:#a89074}
.music-is-playing .music-led{background:#d7b888;box-shadow:0 0 9px #d7b88860}
.music-session-number{font-size:10px;letter-spacing:1px;color:#ccb19b}
.music-transport{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin:27px 0 33px}
.music-transport-title h3{font-family:var(--font-serif,Georgia,serif);font-size:46px;line-height:1;letter-spacing:-1.7px;font-weight:400;margin:0}
.music-transport-title h3 em{color:#d7a78e;font-weight:400}
.music-transport-title p{font-size:12px;line-height:1.65;color:#d0bbaa;margin:15px 0 0}
.music-transport-controls{display:flex;align-items:center;gap:27px;padding-bottom:3px}
.music-tempo{display:block;color:#d0bbaa;font-size:10px;line-height:1.5;letter-spacing:.6px}
.music-tempo>span:first-child{display:block;margin-bottom:2px;text-transform:uppercase;font-size:9px}
.music-tempo-value{display:flex;align-items:baseline;gap:6px}
.music-tempo input{width:54px;height:38px;padding:0;color:#f3eee5;background:transparent;border:0;border-bottom:1px solid #dcc4af55;border-radius:0;font-family:var(--font-serif,Georgia,serif);font-size:30px;letter-spacing:-1px;appearance:textfield;-moz-appearance:textfield}
.music-tempo input::-webkit-inner-spin-button,.music-tempo input::-webkit-outer-spin-button{appearance:none;margin:0}
.music-tempo-value>span{font-size:9px}
.music-play{display:flex;flex-direction:column;align-items:center;gap:9px;border:0;background:transparent;color:#f3eee5;min-width:74px;padding:0}
.music-play-symbol{display:grid;place-content:center;width:48px;height:48px;border:1px solid #d5b494;border-radius:50%;font-size:16px;line-height:1;color:#f3eee5;transition:background .18s,color .18s}
.music-play:hover .music-play-symbol,.music-play[aria-pressed=true] .music-play-symbol{background:#d4ae8f;color:#33261f}
.music-play-copy{font-size:10px;letter-spacing:.3px;color:#e6d2c1}
.music-arrangement{border-top:1px solid #dec9b629}
.music-ruler,.music-track{display:grid;grid-template-columns:173px minmax(0,1fr);column-gap:23px}
.music-ruler{padding:17px 0 12px}
.music-ruler-label{font-size:9px;line-height:1.5;letter-spacing:.8px;color:#c3a98f;text-transform:uppercase}
.music-beat-ruler{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;text-align:center;font-size:10px;color:#c8af98}
.music-beat-ruler span{position:relative}
.music-beat-current{color:#f8e0b9!important}
.music-beat-current:after{content:'';position:absolute;bottom:-8px;left:50%;width:1px;height:8px;background:#e3b384;transform:translateX(-50%)}
.music-track{align-items:center;border-top:1px solid #dec9b617;padding:13px 0}
.music-track-heading{display:flex;align-items:center;gap:11px;min-width:0}
.music-track-number{font-size:9px;letter-spacing:.6px;color:#c3a58b}
.music-track-heading>div{min-width:0}
.music-track-heading strong{display:block;font-size:13px;font-weight:400;line-height:1.4;letter-spacing:.1px}
.music-track-heading>div>span{display:block;margin-top:4px;font-size:9px;line-height:1.4;color:#c6ad97}
.music-track-meter{display:flex;align-items:flex-end;gap:2px;margin-left:auto;width:14px;height:15px;flex-shrink:0}
.music-track-meter i{width:3px;background:#ad8d70;opacity:.35;height:5px}
.music-track-meter i:nth-child(2){height:10px}.music-track-meter i:nth-child(3){height:14px}
.music-track-sounding .music-track-meter i{background:#e5bd8b;opacity:1}
.music-step-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
.music-step{position:relative;min-width:0;width:100%;height:48px;min-height:44px;padding:0;overflow:hidden;border:1px solid #dfc4a628;border-radius:2px;background:#f2d0a608;transition:background .14s,border-color .14s}
.music-step:nth-child(odd){background:#f2d0a612}
.music-step:hover{border-color:#dfc4a6a0;background:#f2d0a624}
.music-step[aria-pressed=true]{border-color:#c88a63;background:#ad6748}
.music-track-1 .music-step[aria-pressed=true]{border-color:#bfa383;background:#a48a6e}
.music-track-2 .music-step[aria-pressed=true]{border-color:#b1b193;background:#7f8c71}
.music-step-current:after{content:'';position:absolute;top:0;bottom:0;left:0;width:2px;background:#ffe5b6;box-shadow:0 0 9px #ffe5b68c}
.music-step-current{border-color:#e9c79d!important}
.music-note-mark{position:absolute;left:12%;right:12%;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;gap:3px;opacity:0}
.music-step[aria-pressed=true] .music-note-mark{opacity:.8}
.music-note-mark i{display:block;flex:1;height:2px;background:#fff0da}
.music-note-mark i:first-child{height:17px}.music-note-mark i:nth-child(2){height:11px}.music-note-mark i:nth-child(3){height:7px}.music-note-mark i:nth-child(4){height:4px}
.music-track-1 .music-note-mark i{height:9px}.music-track-1 .music-note-mark i:nth-child(even){height:16px}.music-track-2 .music-note-mark i{height:4px}.music-track-2 .music-note-mark i:nth-child(2){height:12px}
.music-console-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #dec9b629;padding-top:19px;margin-top:5px;color:#d0bbaa;font-size:10px;line-height:1.6}
.music-console-foot>span:first-child{max-width:250px}
.music-console-foot>span:nth-child(2){margin-left:auto;font-size:9px;color:#c3a98f}
.music-console-foot button{border:0;background:transparent;color:#e9d7c4;padding:8px 0;font-size:10px;white-space:nowrap}
.music-console-foot button:hover{color:#fff5e7;text-decoration:underline;text-underline-offset:4px}
.music-console-foot button>span{display:inline-block;margin-left:5px;font-size:15px;vertical-align:middle}
.music-keys-section{padding:31px 34px 20px;background:#e9e0d3}
.music-keys-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:25px}
.music-keys-heading .music-overline{color:#6a5747;font-size:9px}
.music-keys-heading h4{font-family:var(--font-serif,Georgia,serif);font-size:32px;line-height:1.1;letter-spacing:-.8px;font-weight:400;margin:10px 0 0}
.music-keyboard-hint{font-size:11px;line-height:1.7;color:#6a5747;text-align:right}
.music-keyboard-hint>span{font-size:10px}
.music-piano{position:relative;height:194px;border:1px solid #a999865e;border-top:8px solid #443328;border-radius:3px;box-shadow:0 5px 0 #c7b9a4,0 12px 25px #442e1614;isolation:isolate;background:#31251e}
.music-white-keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));height:100%}
.music-key{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;font-weight:400;margin:0;transition:background .1s,box-shadow .1s}
.music-key-white{height:100%;border:0;border-right:1px solid #b3a38d;border-bottom:4px solid #d7cbb8;border-radius:0 0 3px 3px;background:linear-gradient(180deg,#e7ddcd 0%,#fffaf0 30%,#fffaf0 90%,#f1e7d7 100%);color:#685545;padding:0 0 19px}
.music-key-white:last-child{border-right:0}
.music-key-white[aria-pressed=true]{background:#d5b599;color:#513e2e;border-bottom-width:1px;box-shadow:inset 0 7px 12px #5f36182b}
.music-key-black{position:absolute;z-index:2;top:0;left:calc(var(--key-position)*12.5% - 4.1%);width:8.2%;height:62%;padding:0 0 14px;border:1px solid #251a14;border-bottom:5px solid #1d1511;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#3c2e25,#4a3a2f 45%,#32251e);box-shadow:2px 4px 5px #2f1e1540;color:#dec9b4}
.music-key-black[aria-pressed=true]{background:#8f5035;color:#fff5e9;border-bottom-color:#6d3826;box-shadow:inset 0 4px 7px #45281860}
.music-note-name{font-size:10px;line-height:1.3;letter-spacing:.4px}
.music-key kbd{font-family:var(--font-sans,Arial,sans-serif);font-size:10px;font-weight:400;line-height:1.4;letter-spacing:.5px}
.music-key-black .music-note-name{font-size:9px}
.music-key-black kbd{font-size:9px}
.music-key:focus-visible{outline-offset:-5px!important}
.music-key-black:focus-visible{outline-color:#f0c99a!important;z-index:3}
.music-game{display:flex;align-items:center;gap:23px;padding:23px 0 0}
.music-game button{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;min-height:44px;padding:10px 14px;background:transparent;border:1px solid #99836b;color:#513e2e;font-size:12px}
.music-game button:hover{background:#dbc9b5}
.music-game button>span{font-size:16px;line-height:1}
.music-game p{font-size:12px;line-height:1.6;margin:0;color:#6a5747;max-width:400px}
.music-disclosure{display:flex;justify-content:space-between;gap:20px;margin-top:21px;font-size:9px;line-height:1.6;color:#6a5747;letter-spacing:.1px}
@media(min-width:1200px){.music-console{padding:31px 44px 24px}.music-keys-section{padding:34px 44px 24px}.music-ruler,.music-track{grid-template-columns:190px minmax(0,1fr);column-gap:33px}.music-step{height:54px}.music-piano{height:212px}}
@media(max-width:760px){.music-console{padding:24px}.music-keys-section{padding:27px 24px 21px}.music-ruler,.music-track{grid-template-columns:135px minmax(0,1fr);column-gap:15px}.music-track-meter{display:none}.music-track-heading{gap:8px}.music-track-heading>div>span{font-size:8px}.music-step-grid,.music-beat-ruler{gap:5px}.music-step{height:45px}.music-transport-title h3{font-size:40px}.music-transport-controls{gap:18px}.music-console-foot>span:nth-child(2){display:none}.music-keyboard-hint{font-size:10px}.music-keyboard-hint>span{font-size:9px}.music-keys-heading h4{font-size:29px}.music-piano{height:181px}.music-disclosure{font-size:9px}}
@media(max-width:570px){.music-console{padding:23px 18px 17px}.music-console-heading{padding-bottom:18px}.music-overline,.music-session-number{font-size:9px}.music-transport{gap:17px;margin:23px 0 25px;align-items:flex-start}.music-transport-title h3{font-size:35px;letter-spacing:-1px}.music-transport-title p{font-size:11px;max-width:175px;line-height:1.5;margin-top:12px}.music-transport-controls{gap:13px;align-items:flex-end;padding-top:3px}.music-tempo input{font-size:25px;width:42px;height:34px}.music-tempo-value{gap:3px}.music-tempo-value>span{font-size:8px}.music-play{min-width:53px;gap:7px}.music-play-symbol{width:43px;height:43px;font-size:14px}.music-play-copy{font-size:9px;max-width:60px;white-space:nowrap}.music-ruler{display:block;padding:14px 0 8px}.music-ruler-label{display:block;margin-bottom:11px;font-size:9px}.music-beat-ruler{gap:4px;font-size:10px}.music-track{display:block;padding:13px 0}.music-track-heading{margin-bottom:11px}.music-track-heading>div{display:flex;align-items:baseline;gap:11px}.music-track-heading>div>span{font-size:9px;margin:0}.music-track-heading strong{font-size:12px}.music-track-meter{display:flex;height:12px}.music-track-meter i:nth-child(3){height:11px}.music-step-grid{gap:4px}.music-step{min-height:36px;height:40px}.music-note-mark{gap:2px;left:13%;right:13%}.music-note-mark i:first-child{height:15px}.music-console-foot{gap:12px;padding-top:12px;font-size:10px}.music-console-foot>span:first-child{max-width:190px}.music-console-foot button{font-size:9px}.music-keys-section{padding:26px 18px 19px}.music-keys-heading{align-items:flex-start;gap:15px;margin-bottom:21px}.music-keys-heading h4{font-size:28px;max-width:180px;line-height:1.04}.music-keyboard-hint{font-size:9px;max-width:137px;line-height:1.6;padding-top:1px}.music-keyboard-hint>span{font-size:9px}.music-piano{height:174px;border-top-width:6px}.music-key-white{padding-bottom:17px}.music-key-black{height:61%;padding-bottom:11px}.music-note-name,.music-key kbd{font-size:9px}.music-key-black .music-note-name,.music-key-black kbd{font-size:8px}.music-disclosure{flex-direction:column;gap:3px;font-size:9px;margin-top:20px}}
@media(max-width:360px){.music-console,.music-keys-section{padding-left:13px;padding-right:13px}.music-transport{gap:11px}.music-transport-title h3{font-size:32px}.music-transport-controls{gap:9px}.music-play-symbol{width:38px;height:38px}.music-step-grid,.music-beat-ruler{gap:3px}.music-step{min-height:34px;height:37px}.music-keyboard-hint{max-width:112px}.music-keys-heading h4{font-size:26px}}
@media(max-width:570px){.music-game{flex-direction:column;align-items:flex-start;gap:11px;padding-top:23px}.music-game p{font-size:11px}.music-key-white .music-note-name,.music-key-white kbd{font-size:11px}.music-key-black .music-note-name,.music-key-black kbd{font-size:10px}.music-play-copy{font-size:10px}}
@media(max-width:360px){.music-arrangement{overflow-x:auto}.music-ruler,.music-track{min-width:277px}}
@media(prefers-reduced-motion:reduce){.music-studio *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.music-instrument-switch{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid #99836b40}
.music-instrument-switch>.music-overline{color:#6a5747;font-size:9px}
.music-instrument-switch>div{display:flex;padding:3px;border:1px solid #a8917959;border-radius:3px;background:#dfd3c1}
.music-instrument-switch button{min-width:77px;min-height:38px;border:0;border-radius:2px;background:transparent;color:#69513f;padding:9px 15px;font-size:12px;transition:background .15s,color .15s,box-shadow .15s}
.music-instrument-switch button[aria-pressed=true]{background:#f8f1e5;color:#33261f;box-shadow:0 1px 4px #432a1920}
#music-keys-panel[hidden],#music-guitar-panel[hidden]{display:none}
.music-guitar-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 22px}
.music-chords{display:flex;gap:7px}
.music-chords button{width:44px;height:44px;border:1px solid #aa927864;background:transparent;border-radius:50%;color:#604835;font-family:var(--font-serif,Georgia,serif);font-size:18px;transition:background .15s,color .15s}
.music-chords button[aria-pressed=true]{background:#563c2b;border-color:#563c2b;color:#faf2e6}
.music-chords button:hover{border-color:#563c2b}
#music-strum{display:flex;align-items:center;justify-content:space-between;gap:27px;min-height:44px;background:#9d3f2a;border:1px solid #9d3f2a;color:#fff4e8;padding:10px 17px;font-size:12px}
#music-strum:hover{background:#80301f}
#music-strum span{font-size:18px}
.music-guitar-neck{position:relative;isolation:isolate;padding:22px 0 13px;border:1px solid #583d2a;border-radius:3px;background:repeating-linear-gradient(0deg,#ffffff03 0px,#ffffff03 1px,transparent 1px,transparent 7px),linear-gradient(90deg,#523624,#74533b 45%,#61432e);box-shadow:0 5px 0 #412c20,0 12px 25px #442e161c}
.music-guitar-frets{position:absolute;inset:20px 14px 12px 40px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-left:3px solid #d3bea0}
.music-guitar-frets>span{position:relative;border-right:2px solid #cab8a0a6;box-shadow:1px 0 0 #34201566}
.music-guitar-frets i{position:absolute;left:50%;top:-15px;transform:translateX(-50%);color:#e0cbb2;font-family:var(--font-mono,monospace);font-size:9px;font-style:normal;line-height:1}
.music-guitar-inlays{position:absolute;inset:20px 14px 12px 40px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;pointer-events:none}
.music-guitar-inlays i{grid-column:3;display:block;width:11px;height:11px;border-radius:50%;justify-self:center;grid-row:1;background:#d8c7ab7a;box-shadow:inset 0 1px 2px #42281933}
.music-guitar-inlays i+i{grid-column:5}
.music-guitar-string{display:block;position:relative;width:100%;height:34px;min-height:32px;min-width:0;background:transparent;border:0;padding:0;color:#fae8cf;border-radius:0}
.music-guitar-string:before{content:'';position:absolute;left:40px;right:14px;top:50%;height:var(--string-weight);background:linear-gradient(0deg,#b8a789,#eddfc6);box-shadow:0 2px 2px #24180f70;transition:background .12s,box-shadow .12s,transform .12s}
.music-guitar-string:hover:before,.music-string-sounding:before{background:#f1c386;box-shadow:0 0 9px #f3c17c90,0 2px 2px #24180f70}
.music-string-sounding:before{animation:music-string-ring .11s ease-in-out 3}
.music-string-name{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-family:var(--font-mono,monospace);font-size:11px;line-height:1;color:#efdac2}
.music-guitar-finger{position:absolute;z-index:1;top:50%;transform:translate(-50%,-50%);display:grid;place-content:center;width:22px;height:22px;border-radius:50%;background:#e6cfaa;border:1px solid #f6e4c780;color:#553823;font-family:var(--font-mono,monospace);font-size:10px;line-height:1;box-shadow:0 2px 4px #2617075c}
.music-guitar-string[data-fret="0"] .music-guitar-finger,.music-guitar-string[data-fret="-1"] .music-guitar-finger{width:14px;height:20px;border:0;background:transparent;box-shadow:none;color:#f3dcc0;font-size:15px}
.music-guitar-string[data-fret="-1"]:before{opacity:.4}
.music-guitar-string:focus-visible{outline-offset:-3px!important;outline-color:#ebc795!important}
.music-guitar-foot{display:flex;justify-content:space-between;gap:20px;margin-top:20px;font-size:11px;line-height:1.6;color:#6a5747}
.music-guitar-foot>span:last-child{font-family:var(--font-mono,monospace);font-size:10px;white-space:nowrap}
@keyframes music-string-ring{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
@media(max-width:570px){.music-instrument-switch{gap:12px;margin-bottom:24px}.music-instrument-switch>.music-overline{max-width:85px;line-height:1.7}.music-instrument-switch button{min-width:62px;padding:9px 13px}.music-guitar-controls{gap:10px;margin-bottom:20px}.music-chords{gap:5px}.music-chords button{width:37px;height:40px;font-size:17px}#music-strum{gap:15px;padding:10px 12px;font-size:11px}.music-guitar-foot{flex-direction:column;gap:4px;font-size:10px}.music-guitar-string{height:34px}.music-guitar-finger{width:20px;height:20px}.music-guitar-neck{padding-top:23px}}
@media(max-width:360px){.music-chords{gap:4px}.music-chords button{width:32px;height:36px;font-size:16px}#music-strum{gap:10px;padding:9px 10px}.music-instrument-switch button{min-width:57px;padding:9px 10px}.music-guitar-finger{width:18px;height:18px;font-size:9px}}
