/* The Session Room. Loaded only by the two Music Lab entry points. */
:root {
  --bg:#241a14; --deep:#241a14; --panel:#282824; --cream:#f7eedc;
  --aqua:#8bdac9; --pink:#f1d7a3; --mint:#8bdac9; --brass:#ddb97b;
  --line:#8c7964; --warning:#ffc28d;
  color-scheme:dark;
}
body { background:radial-gradient(ellipse at 45% 0,#493125 0,transparent 70%),#241a14; }
button,select,summary { min-height:44px; }
button { background:linear-gradient(#42433c,#2b2d29); border-color:#8c8878; border-radius:8px; box-shadow:0 3px 0 #151612,inset 0 1px #ffffff16; }
button:hover { border-color:var(--aqua); }
button.accent,button[aria-pressed=true] { color:#142c26; background:linear-gradient(#b4ecdf,#8bdac9); border-color:#b4ecdf; box-shadow:0 3px 0 #31564b; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #c0f5e7; outline-offset:4px; }
button:disabled { opacity:.55; }
select { background:#202a25; color:var(--cream); }
.app-header { max-width:1480px; padding:12px 24px; min-height:68px; border-color:#76604d; }
#activityTitle { font-size:22px; }
#stop { color:#ffe2d8; }
main { max-width:1480px; padding:24px 24px 40px; }
.eyebrow { color:#e5c58f; font-size:14px; letter-spacing:.08em; }
.room-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.room-heading h1 { font-size:clamp(32px,4vw,54px); margin:6px 0 0; letter-spacing:-.035em; }
.room-heading .intro { margin:0 0 4px; color:#e4d2bc; max-width:30ch; font-size:18px; }
.room-entrance { display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:center; gap:28px; margin-top:16px; }
.room-scene { margin:0; min-width:0; border-radius:24px; overflow:hidden; background:#302015; box-shadow:0 18px 46px #0005; }
.room-scene img { display:block; width:100%; height:auto; }
.room-choices>.eyebrow { margin-bottom:14px; }
.activities { display:grid; grid-template-columns:1fr; gap:14px; }
.activity-card { position:relative; display:flex; flex-direction:row; gap:16px; align-items:center; min-height:118px; padding:20px 26px 20px 18px; border:1px solid #b1946c; border-radius:12px; color:var(--cream); background:linear-gradient(115deg,#65412b 0,#352b21 12%,#302f28 80%,#563923); box-shadow:0 5px 0 #1c120d,inset 0 1px #dfb57d55; text-align:left; }
.activity-card:hover { transform:translateY(-3px); background:linear-gradient(115deg,#765038,#373e31 35%,#283e33); box-shadow:0 7px 0 #1c120d,0 0 22px #8bdac91c; }
.station-number { color:#e4c085; font:500 15px/1.2 ui-monospace,monospace; align-self:flex-start; margin-top:4px; }
.card-copy { gap:8px; }
.card-copy strong { font-size:25px; line-height:1.1; }
.card-copy>span { color:#eadbc7; font-size:16px; line-height:1.35; }
.station-light { position:absolute; width:5px; height:30px; right:10px; top:calc(50% - 15px); border-radius:3px; background:#8bdac9; box-shadow:0 0 8px #8bdac933; }
.activity-card:is(:hover,:focus-visible) .station-light { background:#cbfff1; box-shadow:0 0 14px #8bdac9; }
.studio-link { color:#dfcbb3; font-size:16px; }
.room-choices .studio-link { flex-direction:column; align-items:flex-start; gap:0; margin:20px 0 0; }
.room-choices .studio-link span { line-height:1.4; }
.room-choices .studio-link a { color:#f7eedc; }
.in-activity main { max-width:1160px; padding-top:18px; }
.instrument { border:1px solid #a47c54; border-radius:18px; padding:0 30px 16px; background:linear-gradient(90deg,#674128 0,#895932 12px,#4d3020 23px,#30312b 24px,#242824 calc(100% - 24px),#513322 calc(100% - 23px),#8a5b37 calc(100% - 12px),#563520); box-shadow:0 10px 0 #24150e,0 12px 0 #95643d,0 30px 55px #0006,inset 0 1px #e7bf8755; }
#workspace:not([hidden]) .instrument { animation:instrument-arrives 260ms ease-out both; }
@keyframes instrument-arrives { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
.controller-rim { border-color:#797363; color:#eadcc6; font-size:13px; height:44px; letter-spacing:.02em; }
.controller-rim strong span { font-size:13px; }
.controller-rim i { background:#8bdac9; box-shadow:0 0 9px #8bdac944; }
.controller-display { background:#16251e; color:#b8efd7; border-color:#0c1511; box-shadow:0 1px #9c967b,inset 0 3px 16px #0007; border-radius:8px; margin-top:14px; padding:12px 16px; }
.display-label { color:#d9ceb6; font-size:13px; letter-spacing:.07em; }
#deviceName { font-family:'Bricolage Grotesque',sans-serif; font-size:24px; }
#deviceState { font-size:14px; color:#c4edda; }
.instrument-top p { font-size:16px; color:#e7dece; }
.mix-controls .volume { color:#e4f2e7; font-size:15px; text-transform:none; letter-spacing:0; }
.mix-controls #musicChannel { color:#f1ca86; }
.mix-controls input { accent-color:#8bdac9; }
.mix-controls #musicVolume { accent-color:#e4b366; }
.sound-levels { display:flex; gap:24px; border-block:1px solid #70634e; padding:8px 0; margin:10px 0; }
.sound-levels label { display:flex; align-items:center; gap:10px; flex:1; min-width:0; font-size:14px; color:#d9e8d9; }
.sound-levels meter { min-width:30px; width:100%; height:12px; }
.sound-levels meter::-webkit-meter-bar { background:#151f18; border:1px solid #89917a; border-radius:3px; }
.sound-levels meter::-webkit-meter-optimum-value { background:#8bdac9; }
#musicMeter::-webkit-meter-optimum-value { background:#e4b366; }
.sound-levels meter::-moz-meter-bar { background:#8bdac9; }
#musicMeter::-moz-meter-bar { background:#e4b366; }
#musicMeterLabel { color:#f1ca86; }
.tutorial { background:#f0e4cd; color:#252b22; box-shadow:0 3px 10px #0002; }
.tutorial button { background:#e8ddc6; color:#243126; box-shadow:0 2px 0 #b0a18a; }
.tutorial button.accent { background:#94d4bb; }
.tutorial strong { font-size:19px; }
.tutorial-target { outline-color:#f0cd8c; }
.keyboard { height:240px; border:6px solid #161913; border-bottom-width:9px; box-shadow:0 1px #9b977f; }
.piano-key.white { background:linear-gradient(90deg,#d7cbb1,#fff8e9 13%,#f5ecd8 85%,#c7bda8); color:#233126; border-color:#4b4638; border-bottom-color:#b5a78f; }
.piano-key.black { background:linear-gradient(90deg,#121510,#3b3d33 20%,#252921 80%,#0e120e); color:#fff5e4; border-color:#0b0e0a; border-bottom-color:#10150f; min-width:0; box-shadow:3px 5px 5px #0007,inset 0 1px #807b63; }
.piano-key.active { background:#9fe4cd!important; color:#10261d!important; }
.piano-key.demo { background:#ecd4a2!important; color:#242b1d!important; }
.piano-key.target { box-shadow:inset 0 -8px #8bdac9; }
.piano-key.home-anchor:after { border-bottom:3px solid; text-decoration:underline; text-underline-offset:2px; }
.piano-key[data-shortcut]:after { bottom:44px; font-size:14px; }
.note-lane { height:132px; background:linear-gradient(#352d22,#24271f); border:6px solid #674329; border-bottom:0; border-radius:12px 12px 0 0; box-shadow:inset 0 3px 8px #0005; }
.lane-hint { font-size:15px; color:#f0e3cf; }
.hit-line { background:#8bdac9; box-shadow:0 0 10px #8bdac933; }
.falling-note { background:linear-gradient(#ffedc8,#d5b477); color:#1c2b20; box-shadow:0 2px 5px #0004; }
.desktop-hint { color:#dbd9c9; font-size:15px; }
.desktop-hint kbd { font:600 14px 'IBM Plex Sans',sans-serif; border:1px solid #b0ad98; border-radius:3px; padding:1px 4px; }
.pad,.pad:nth-child(n) { color:#d5fff0; background:radial-gradient(ellipse at 50% 85%,#79c5b33b,transparent 75%),linear-gradient(#37453d,#243b32); border:2px solid #81bda8; border-bottom:6px solid #13261d; box-shadow:inset 0 0 0 5px #22382d,0 5px 0 #161913; border-radius:12px; }
.pad.active { background:#b4f0dc!important; color:#132a20!important; box-shadow:inset 0 0 0 4px #395948,0 0 22px #8bdac966; }
.pad small { color:#d0e9dc; font-size:13px; letter-spacing:.025em; }
.pad.active small { color:#132a20; }
.pad[data-shortcut]:before { color:inherit; }
.layer-state { background:#1a271f; color:#ece4d2; border-left-color:#8bdac9; font-size:16px; }
.layer-state.recording { color:#ffe4db; border-left-color:#f59b88; background:#3d2924; }
#record { border-color:#e9a18d; color:#ffddcf; background:linear-gradient(#50382f,#342a23); box-shadow:0 3px 0 #271811; }
#record[aria-pressed=true] { background:#a53728; color:#fff4e9; border-color:#ffba9f; box-shadow:0 3px 0 #451e13; }
#record[aria-pressed=true]:before { color:#fff4e9; }
#beatDots i { background:#73664f; }
#beatDots i.lit { background:#8bdac9; box-shadow:0 0 8px #8bdac944; }
#stepEditor { border-color:#8a806a; }
#stepEditor p { font-size:16px; color:#e0ddcd; }
.step:nth-child(4n+1) { border-top-color:#e7bf7b; }
.feedback p { color:#e5e9da; font-size:16px; }
.characters img { border-radius:5px; }
.controls span,.practice-speed { font-size:16px; }
.reduced .note-lane { height:64px; }
/* Full studio keeps its layout and behavior, sharing only materials and type. */
.session-full .controller-wrap { background:linear-gradient(100deg,#956339,#4f321f); padding:16px; }
.session-full .controller { background:#272b25; border-color:#a07d52; }
.session-full :is(.wheel-bank,.mixer-bank,.command-bank,.tone-bank,.pad-bank,.host-bank) { background:linear-gradient(#383c33,#272e26); border-color:#686b56; }
.session-full .command-display { background:#d7e2c7; background-image:none; }
.session-full .note-highway { background:linear-gradient(#302b21,#1d2c22); background-size:auto; }
.session-full .piano-section { background:linear-gradient(#5e402a,#392c20); }
.session-full :is(.eyebrow,.bank-heading span,.bank-heading small,.wheel-group label,.octave-bank>span,.pack-control label,.channel-label,.channel-value,.host-copy span,.piano-labels span,.display-topline,.display-details,.key-label) { font-family:'IBM Plex Sans',sans-serif; font-size:13px; line-height:1.35; color:#ede4d2; }
.session-full .command-display :is(.display-topline,.display-details) { color:#243b2d; }
.session-full :is(.status-pill,.mode-tab,.transport-button,.sustain-button,.channel-button) { font-family:'IBM Plex Sans',sans-serif; font-size:13px; }
.session-full :is(button,select) { min-height:44px; }
.session-full .channel-button { min-width:44px; }
.session-full .fader-grid { grid-template-columns:repeat(8,minmax(94px,1fr)); overflow-x:auto; }
.session-full .piano-key .key-label { color:#293127; }
.session-full .piano-key.black .key-label { color:#fff4df; }
.session-full .piano-labels strong { font-family:'Bricolage Grotesque',sans-serif; font-size:17px; }
.session-full .host-copy strong { font-size:18px; }
.session-full .eyebrow { color:#e5c58f; }
.session-full .studio-intro h1 { font-size:clamp(40px,6vw,84px); line-height:1; }
.session-full .studio-intro { margin-bottom:24px; }
.session-full .studio-page { padding-top:70px; }
.session-full .return-to-desk { min-height:44px; background:#302419; color:#f6e8ce; border-color:#a2845d; }
.session-full :is(.mobile-studio-bar,.mobile-studio-nav,.sound-gate-card,.mobile-coach-card) { background:#302b22; border-color:#9c825f; }
.session-full .studio-sound-gate { background:#211a15f5; }
.session-full :is(.sound-gate-card button,.mobile-studio-nav button.active) { background:linear-gradient(#b4ecdf,#8bdac9); color:#142c26; border-color:#b4ecdf; box-shadow:0 3px 0 #31564b; }
.session-full .performance-pad { background:linear-gradient(#405c4e,#284336); color:#e3fff1; border-color:#81bda8; box-shadow:inset 0 0 0 3px #22382d,0 4px 0 #161913; }
.session-full .performance-pad::after { background:none; }
.session-full .performance-pad:is(:active,.is-hit) { background:#b4f0dc; color:#142c26; }
.session-full .performance-pad :is(strong,span,em) { font-family:'IBM Plex Sans',sans-serif; font-size:13px; opacity:1; color:inherit; }
.session-full .performance-pad { padding-top:28px; }
.session-full .performance-pad :is(strong,span) { line-height:1.3; overflow-wrap:anywhere; }
.session-full .transport-button small { font:600 12px/1.3 'IBM Plex Sans',sans-serif; }
.session-full :is(.knob-label,.knob-value) { font:600 12px/1.3 'IBM Plex Sans',sans-serif; white-space:normal; }
@media(min-width:951px) { body[data-activity=beats] #pads { grid-template-columns:repeat(2,1fr); max-width:680px; margin-inline:auto; } body[data-activity=beats] #pads .pad { aspect-ratio:auto; height:138px; } }
@media(max-width:1100px) and (min-width:701px) { .room-entrance { grid-template-columns:minmax(0,1fr) 260px; gap:18px; } .activity-card { padding:16px 24px 16px 12px; gap:10px; } .card-copy strong { font-size:23px; } }
@media(max-width:700px) {
  html { scrollbar-width:auto; }
  .app-header { padding:8px 12px; min-height:64px; gap:8px; background:#241a14; }
  #activityTitle { font-size:18px; }
  .app-header button { padding:8px 10px; }
  main { padding:18px 12px 24px; }
  .room-heading { display:block; }
  .room-heading h1 { font-size:32px; }
  .room-heading .intro { font-size:16px; margin:8px 0 0; max-width:none; }
  .room-entrance { grid-template-columns:1fr; gap:18px; margin-top:14px; }
  .room-scene { border-radius:14px; background:#302015; }
  .room-scene img { height:auto; max-height:none; object-fit:contain; }
  .room-choices>.eyebrow { margin-bottom:10px; }
  .activities { gap:10px; }
  .activity-card { min-height:80px; padding:12px 30px 12px 16px; gap:14px; border-radius:10px; }
  .card-copy strong { font-size:23px; }
  .card-copy>span { font-size:16px; }
  .room-choices .studio-link { align-items:center; margin-top:16px; }
  .in-activity main { padding:12px 6px 24px; }
  .instrument { padding:0 10px 10px; border-radius:13px; background:linear-gradient(90deg,#8b5933 0,#5e3922 6px,#2c3028 7px,#242824 calc(100% - 7px),#754729 calc(100% - 6px),#8b5933); }
  .controller-rim { margin:0 4px; font-size:12px; height:36px; }
  .controller-rim strong { font-size:18px; }
  .controller-rim>span { display:none; }
  .controller-display { margin:8px 0; padding:8px 10px; }
  .display-label { font-size:12px; }
  #deviceName { font-size:20px; }
  #deviceState { font-size:13px; max-width:125px; }
  .instrument-top,.controls,#songArea,.lesson-stages,.practice-speed,.beat-start,.beat-meter,.pads,details,.feedback,.layer-state { margin-left:0; margin-right:0; }
  .mix-controls .volume { font-size:14px; }
  .sound-levels { gap:12px; }
  .sound-levels label { flex-direction:column; align-items:stretch; gap:2px; font-size:13px; }
  .keyboard { height:205px; border-left-width:0; border-right-width:0; }
  .piano-key { padding-bottom:16px; font-size:15px; }
  .piano-key.black { min-width:0; font-size:12px; padding-bottom:16px; }
  .piano-key[data-shortcut]:after { font-size:12px; padding:0 3px; bottom:40px; }
  .note-lane { height:104px; }
  .lane-hint { font-size:14px; }
  .pad { height:110px; }
  .pad strong { font-size:24px; }
  .pad small { font-size:12px; }
  .feedback { min-height:48px; }
  .feedback p,.layer-state { font-size:15px; }
  .lesson-stages { grid-template-columns:1fr 1fr; }
  .lesson-stages button:last-child { grid-column:1/-1; }
  .lesson-stages button { font-size:15px; }
  #loopControls { grid-template-columns:1fr 1fr; }
  #loopControls button:last-child { grid-column:1/-1; }
  .session-full .studio-page { padding-top:18px; }
  .session-full .controller-wrap { padding:7px; }
}
@media(max-height:550px) and (orientation:landscape) { .room-entrance { grid-template-columns:1fr 270px; } .room-scene img { max-height:none; } .keyboard { height:150px; } .note-lane { height:70px; } .room-heading .intro { display:none; } }
@media(hover:none) and (pointer:coarse) { .desktop-hint { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }