/* Existing scale-practice controls, guide and piano console adapted to a desktop workspace. */
#module-warmup .yw-workspace{display:grid;grid-template-columns:minmax(230px,.78fr) minmax(0,2.22fr);height:auto;min-height:0;border-radius:18px;overflow:hidden;background:#f5efdf;color:var(--ink,#1c1813)}
#module-warmup .yw-workspace *{box-sizing:border-box}
#module-warmup .yw-setup{padding:22px 26px;min-width:0;display:flex;flex-direction:column}
#module-warmup .yw-setup-heading{display:flex;align-items:center;gap:8px;margin-bottom:22px}
#module-warmup .yw-setup-heading h4{font:600 18px/1.4 var(--body,sans-serif);margin:0;white-space:nowrap}
#module-warmup .yw-dot{width:7px;height:7px;border-radius:50%;background:#ffc817;flex:none}
#module-warmup .yw-demo-tag{margin-left:auto;font:400 10px/1.5 var(--body,sans-serif);color:#796c55;white-space:nowrap}
#module-warmup .yw-field-label{display:block;color:#796c55;font:400 12px/1.4 var(--body,sans-serif);margin-bottom:6px}
#module-warmup .yw-select-wrap{position:relative;display:flex;align-items:center;min-height:42px;padding:0 12px;background:#fffdf8;border:1px solid #ddd2bf;border-radius:9px;gap:9px}
#module-warmup .yw-select-wrap>svg{width:16px;height:16px;fill:none;stroke:#f5350c;stroke-width:1.7;flex:none}
#module-warmup select{font:400 14px/1.4 var(--body,sans-serif);color:#1c1813;max-width:100%;cursor:pointer}
#module-warmup .yw-select-wrap select{width:100%;height:40px;border:0;background:transparent;padding-right:9px}
#module-warmup .yw-setting-row{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-top:12px}
#module-warmup .yw-root-select{border:0;border-bottom:1px solid #d6c9b3;background:transparent;border-radius:0;min-height:39px;min-width:64px;padding:0 12px 0 0}
#module-warmup .yw-bpm{text-align:center}
#module-warmup .yw-bpm>.yw-field-label{margin-bottom:0;font-size:10px;letter-spacing:.08em}
#module-warmup .yw-stepper{--yw-stepper-width:97px;--yw-stepper-visual:30px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:0;width:var(--yw-stepper-width);height:44px;flex:none}
#module-warmup .yw-stepper button{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;min-height:44px;border:0;padding:0;background:transparent;color:#796c55;font:400 22px/1 var(--body,sans-serif);cursor:pointer}
#module-warmup .yw-stepper button:first-child{padding-right:calc(44px - var(--yw-stepper-visual))}
#module-warmup .yw-stepper button:last-child{padding-left:calc(44px - var(--yw-stepper-visual))}
#module-warmup .yw-stepper output{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;min-width:35px;font:400 22px/1 var(--body,sans-serif);font-variant-numeric:tabular-nums}
#module-warmup .yw-guide{margin-top:19px}
#module-warmup .yw-guide h4{font:500 13px/1.5 var(--body,sans-serif);margin:0 0 8px}
#module-warmup .yw-guide ol{list-style:none;padding:0;margin:0;counter-reset:yw-guide;display:grid;gap:7px}
#module-warmup .yw-guide li{display:flex;gap:9px;align-items:baseline;color:#5e5342;font:400 13px/1.55 var(--body,sans-serif);counter-increment:yw-guide}
#module-warmup .yw-guide li:before{content:counter(yw-guide);color:#f5350c;font-size:10px;flex:none}
#module-warmup .yw-range-note{font:400 11px/1.6 var(--body,sans-serif);color:#796c55;margin:14px 0 0}
#module-warmup .yw-console{min-width:0;display:grid;grid-template-rows:auto minmax(min-content,1fr) auto 128px auto;row-gap:12px;padding:18px 24px 16px;background:linear-gradient(110deg,#241f1a,#14100c);color:#fffdf8}
#module-warmup .yw-console-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 15px;min-height:44px}
#module-warmup .yw-modes{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
#module-warmup .yw-modes button{border:1px solid #f3dfba29;background:#ffebc80b;color:#c9bfaf;border-radius:8px;min-height:44px;padding:0 12px;font:400 12px/1.2 var(--body,sans-serif);cursor:pointer;white-space:nowrap}
#module-warmup .yw-modes button[aria-pressed=true]{border-color:#f5350c;background:#f5350c21;color:#ffab82}
#module-warmup .yw-reset{display:flex;flex:none;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:#b8ad9d;font:400 11px/1.2 var(--body,sans-serif);cursor:pointer;white-space:nowrap}
#module-warmup .yw-reset svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}
#module-warmup .yw-score{margin:0;min-height:min-content;display:grid;grid-template-rows:auto minmax(38px,1fr) auto;row-gap:8px}
#module-warmup .yw-score-meta,#module-warmup .yw-score-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;font:400 10px/1.6 var(--body,sans-serif);color:#b8ad9d;gap:4px 12px}
#module-warmup .yw-score-meta{margin:0}
#module-warmup .yw-notation{display:flex;align-items:center;justify-content:space-between;gap:3px}
#module-warmup .yw-note{display:flex;align-items:center;justify-content:center;min-width:0;flex:1;height:38px;border-radius:7px;color:#eadfce;font:400 22px/1 var(--body,sans-serif);font-variant-numeric:tabular-nums;transition:color .12s,background-color .12s}
#module-warmup .yw-note.is-active{background:#f5350c;color:#fffdf8}
#module-warmup .yw-score-bottom{margin:0}
#module-warmup .yw-score-bottom strong{font-weight:400;color:#f7dba9;min-width:30px;display:inline-block;text-align:right}
#module-warmup .yw-transport{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0}
#module-warmup .yw-play{display:flex;flex:none;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:124px;padding:0 18px;border:0;border-radius:9px;background:#f5350c;color:#fffdf8;font:500 13px/1.2 var(--body,sans-serif);cursor:pointer;white-space:nowrap}
#module-warmup .yw-play svg{height:17px;width:17px;fill:currentColor}
#module-warmup .yw-transport-hint{flex:1 1 140px;min-width:0;font:400 12px/1.6 var(--body,sans-serif);color:#b8ad9d}
#module-warmup .yw-keyboard{height:128px;flex:none;position:relative;display:flex;border-radius:9px;overflow:hidden;background:#1a150e;touch-action:manipulation}
#module-warmup .yw-key{border:0;font:400 9px/1.2 var(--body,sans-serif);cursor:pointer;padding:0 0 10px;display:flex;align-items:end;justify-content:center;position:relative;transition:background-color .1s}
#module-warmup .yw-key-white{height:100%;flex:1;min-width:0;background:linear-gradient(180deg,#fffdf8,#f8f1e2 72%,#f0e6d2);border-right:1px solid #ded2bc;border-radius:0 0 6px 6px;color:#6b6153;box-shadow:inset 0 -6px 8px #9678502e}
#module-warmup .yw-key-white.is-root{background:linear-gradient(180deg,#fff6dc,#ffeec2 72%,#f7e2ae)}
#module-warmup .yw-key-white.is-active{background:linear-gradient(180deg,#ffd0a8,#ff9d5c 60%,#f5350c);color:#fffdf8}
#module-warmup .yw-key-black{position:absolute;top:0;transform:translateX(-50%);height:62%;z-index:2;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#2a2219,#1a150e 62%,#12100b);color:#b8ad9d;box-shadow:inset 0 2px 0 #ffebc824,0 4px 6px #0005;font-size:8px;padding-bottom:7px}
#module-warmup .yw-key-black.is-root{background:linear-gradient(180deg,#7a5518,#563a0d)}
#module-warmup .yw-key-black.is-active{background:linear-gradient(180deg,#ff9d5c,#f5350c 60%,#c92a08);color:#fffdf8}
#module-warmup .yw-keyboard-caption{display:flex;justify-content:space-between;margin:0;color:#b8ad9d;font:400 10px/1.5 var(--body,sans-serif);font-variant-numeric:tabular-nums}
#module-warmup button:focus-visible,#module-warmup select:focus-visible{outline:2px solid #f5350c;outline-offset:3px}
#module-warmup .yw-stepper button:focus-visible{outline:none}
#module-warmup .yw-stepper button:focus-visible:after{content:'';position:absolute;top:50%;width:26px;height:32px;border:2px solid #f5350c;border-radius:6px;pointer-events:none}
#module-warmup .yw-stepper button:first-child:focus-visible:after{left:calc(var(--yw-stepper-visual)/2);transform:translate(-50%,-50%)}
#module-warmup .yw-stepper button:last-child:focus-visible:after{right:calc(var(--yw-stepper-visual)/2);transform:translate(50%,-50%)}
#module-warmup .yw-console button:focus-visible{outline-color:#ffb489;outline-offset:-3px}
#module-warmup button:active{filter:brightness(.93)}
#module-warmup button:disabled{opacity:.4;cursor:not-allowed}
@media(hover:hover){#module-warmup .yw-modes button:hover{background:#ffebc81a}#module-warmup .yw-play:hover{background:#e42d08}#module-warmup .yw-stepper button:hover,#module-warmup .yw-reset:hover{color:#f5350c}}
/* Fit the song's actual stage, preserving the control and score rows. */
@media(min-width:1024px){
 #module-warmup .yw-console{--yw-key-height:clamp(88px,calc(var(--module-stage-height) - 255px),128px);grid-template-rows:44px minmax(86px,1fr) 44px var(--yw-key-height) 15px;row-gap:8px;padding-block:18px 16px}
 #module-warmup .yw-keyboard{height:var(--yw-key-height)}
}
@media(min-width:901px) and (max-width:1100px){#module-warmup .yw-setup{padding:20px}#module-warmup .yw-console{padding-inline:20px}#module-warmup .yw-modes button{padding-inline:8px;font-size:11px}#module-warmup .yw-reset span{display:none}#module-warmup .yw-transport-hint{font-size:10px}}
@media(max-width:900px){#module-warmup .yw-workspace{grid-template-columns:minmax(210px,.9fr) minmax(0,1.8fr);height:auto;min-height:420px}#module-warmup .yw-console{padding:22px}#module-warmup .yw-modes{gap:5px;flex-wrap:wrap}#module-warmup .yw-modes button{padding-inline:8px;font-size:11px}#module-warmup .yw-reset span{display:none}#module-warmup .yw-setup{padding:24px 20px}#module-warmup .yw-transport{align-items:start;gap:10px}#module-warmup .yw-transport-hint{max-width:140px}}
@media(max-width:680px){#module-warmup .yw-workspace{grid-template-columns:minmax(0,1fr);border-radius:14px}#module-warmup .yw-setup{padding:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px}#module-warmup .yw-setup-heading{grid-column:1/-1;margin-bottom:18px}#module-warmup .yw-setup>.yw-field-label{grid-column:1;margin-bottom:5px}#module-warmup .yw-select-wrap{grid-column:1;align-self:start}#module-warmup .yw-setting-row{grid-column:2;grid-row:1/3;margin:0;align-items:end;gap:7px}#module-warmup .yw-root-select{min-width:56px;font-size:13px;padding-right:4px}#module-warmup .yw-stepper{--yw-stepper-width:88px;--yw-stepper-visual:25px}#module-warmup .yw-stepper output{font-size:20px;min-width:33px}#module-warmup .yw-guide{grid-column:1/-1;margin-top:22px}#module-warmup .yw-guide ol{gap:6px}#module-warmup .yw-guide h4{margin-bottom:7px}#module-warmup .yw-range-note{grid-column:1/-1;margin-top:16px;padding-top:12px}#module-warmup .yw-range-note br{display:none}#module-warmup .yw-console{grid-template-rows:auto minmax(min-content,1fr) auto 117px auto;min-height:365px;padding:18px 18px 13px}#module-warmup .yw-console-toolbar{gap:10px}#module-warmup .yw-modes button{min-height:44px;padding-inline:9px;font-size:11px}#module-warmup .yw-score{min-height:110px}#module-warmup .yw-keyboard{height:117px}#module-warmup .yw-transport{align-items:center}#module-warmup .yw-note{font-size:21px}#module-warmup .yw-transport-hint{font-size:10px}}
@media(max-width:390px){#module-warmup .yw-setup{padding:20px 16px;gap:0 14px}#module-warmup .yw-console{padding-inline:13px}#module-warmup .yw-modes{gap:4px}#module-warmup .yw-modes button{padding-inline:7px;font-size:10px}#module-warmup .yw-reset{width:44px}#module-warmup .yw-transport{gap:10px}#module-warmup .yw-play{min-width:113px;padding-inline:12px}#module-warmup .yw-demo-tag{font-size:9px}#module-warmup .yw-stepper{--yw-stepper-visual:23px}}
@media(max-width:360px){#module-warmup .yw-setup{grid-template-columns:minmax(0,1fr)}#module-warmup .yw-setting-row{grid-column:1;grid-row:auto;margin-top:12px}}
@media(prefers-reduced-motion:reduce){#module-warmup .yw-note,#module-warmup .yw-key{transition:none}}