body:has(#practicePage:not([hidden])) .shell { padding-top:12px; }
body:has(#practicePage:not([hidden])) .shell>header { padding-bottom:10px; }
body:has(#practicePage:not([hidden])) .global-state { padding:8px 0; }
#practicePage { padding-top:12px; }
#practicePage>.page-heading,#practicePage.is-active>.page-heading { display:flex; margin:0 0 10px; }
#practicePage>.page-heading h1 { margin:0; font-size:23px; }
#practicePage .practice-cards,#practicePage.is-active>.practice-cards { display:flex; gap:0; margin:0; border-bottom:1px solid #555; }
#practicePage .practice-card,#practicePage .practice-card.selected,#practicePage .practice-card.selected:first-child { flex:0 1 200px; padding:10px 20px!important; min-height:42px; background:transparent; border:0; border-bottom:3px solid transparent; border-radius:0; font-size:15px; text-align:center; }
#practicePage .practice-card.selected,#practicePage .practice-card.selected:first-child { border-bottom-color:#7edce5; background:#323737; color:#edffff; }
#practicePage .practice-card::after { content:none; }
#practicePage .practice-card:disabled { opacity:.75; }
#practicePage .practice-workspace { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:0; margin:0; border:0; background:none; gap:0 16px; }
#practicePage .practice-header { grid-column:2; grid-row:1; align-self:center; border:0; padding:0; }
#practicePage .practice-header>div,#practicePage .practice-settings legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#practicePage .practice-header>span { border:0; padding:0; font-size:12px; }
#practicePage .practice-settings,#practicePage.is-active .practice-settings { grid-column:1; grid-row:1; margin:0; padding:10px 0; gap:22px; min-width:0; }
#practicePage .practice-settings label { font-size:13px; gap:8px; }
#practicePage .practice-settings input[type=number] { font:22px monospace; width:78px; padding:6px 10px; height:38px; }
#practicePage .practice-settings select { height:38px; padding:6px 10px; font-size:13px; }
#practicePage #practiceConnectHint { grid-column:1/-1; grid-row:2; padding:0; margin:0 0 8px; min-height:28px; background:none; border:0; gap:18px; }
#practicePage #practiceConnectHint .text-button { padding:0; }
#practicePage .practice-live { grid-column:1/-1; grid-row:3; grid-template-columns:minmax(0,1fr) 160px; gap:0; border-radius:4px; }
#practicePage .fret-area { padding:12px 18px; }
#practicePage .phase-line { margin:0; }
#practicePage .phase-line strong { font-size:16px; }
#practicePage .phase-line span { font-size:19px; }
#practicePage #fretboard svg { width:100%; height:clamp(190px,29vh,300px); max-height:none; }
#practicePage .position-label { margin-top:4px; gap:20px; font-size:15px; }
#practicePage .position-label strong { color:#a1edf3; font-weight:700; }
#practicePage .pitch-panel { display:flex; flex-direction:column; padding:14px; border-left:1px solid #484848; }
#practicePage .pitch-panel>strong { font:32px monospace; margin:4px 0 12px; }
#practicePage .pitch-panel #practiceInstruction { display:none; }
#practicePage .pitch-panel p { margin:2px 0; }
#practicePage #practiceProgress { grid-column:1/-1; grid-row:4; margin:8px 0 3px; height:4px; }
#practicePage #practiceProgressText { grid-column:1/-1; grid-row:5; font-size:12px!important; }
#practicePage .practice-controls { grid-column:1/-1; grid-row:6; margin:8px 0; padding:0; gap:10px; }
#practicePage .practice-controls button { min-height:40px; padding:8px 18px; font-size:14px; }
#practicePage .compact-mixer,#practicePage.is-active .compact-mixer { grid-column:1/-1; grid-row:7; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; margin:0; padding:8px 0; border:0; border-top:1px solid #484848; background:none; }
#practicePage .compact-channel { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:0 16px; }
#practicePage .compact-channel:first-child { padding-left:0; }
#practicePage .compact-channel label { font-size:11px; }
#practicePage .compact-channel output { text-align:right; font-size:14px; }
#practicePage .compact-fader { grid-column:1; height:28px; padding:0; }
#practicePage .compact-scale,#practicePage .compact-fader::before,#practicePage .compact-channel>span { display:none; }
#practicePage .compact-channel input,#practicePage.is-active .compact-channel input { writing-mode:horizontal-tb; direction:ltr; width:100%; height:28px; cursor:ew-resize; }
#practicePage .compact-channel input::-webkit-slider-runnable-track { width:100%; height:4px; background:#575757; border:0; box-shadow:none; }
#practicePage .compact-channel input::-webkit-slider-thumb { width:12px; height:20px; margin:-8px 0 0; background:#ddd; border:1px solid #eee; border-radius:2px; box-shadow:none; }
#practicePage .compact-channel input::-moz-range-track { width:100%; height:4px; background:#575757; }
#practicePage .compact-channel input::-moz-range-thumb { width:12px; height:20px; background:#ddd; border-radius:2px; }
#practicePage .compact-channel button { min-height:28px; padding:4px 10px; font-size:11px; }
#practicePage .result-panel { grid-column:1/-1; grid-row:8; }
#practicePage:has([data-kind=bend][aria-pressed=true]) .practice-live { grid-template-columns:minmax(0,1fr) minmax(340px,.9fr); }
#practicePage:has([data-kind=bend][aria-pressed=true]) .pitch-panel { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto auto; align-content:center; gap:8px 22px; text-align:center; }
#practicePage:has([data-kind=bend][aria-pressed=true]) #targetLabel { grid-column:1; grid-row:1; }
#practicePage:has([data-kind=bend][aria-pressed=true]) #targetNote { grid-column:1; grid-row:2; color:#a1edf3; }
#practicePage:has([data-kind=bend][aria-pressed=true]) .pitch-panel>span:not(#targetLabel) { grid-column:2; grid-row:1; }
#practicePage:has([data-kind=bend][aria-pressed=true]) #currentNote { grid-column:2; grid-row:2; }
#practicePage:has([data-kind=bend][aria-pressed=true]) .pitch-panel>strong { font-size:48px; margin:0; }
#practicePage:has([data-kind=bend][aria-pressed=true]) #bendMeter { grid-column:1/-1; grid-row:3; height:28px; border-color:#8de9ef; }
#practicePage:has([data-kind=bend][aria-pressed=true]) #bendFill { background:#437c80; }
#practicePage:has([data-kind=bend][aria-pressed=true]) #centsDifference { grid-column:1/-1; grid-row:4; font-size:14px; }
@media(max-width:900px) { #practicePage .practice-workspace { grid-template-columns:1fr; } #practicePage .practice-header { grid-column:1; grid-row:2; justify-self:end; } #practicePage .practice-settings { flex-wrap:wrap; } #practicePage:has([data-kind=bend][aria-pressed=true]) .practice-live { grid-template-columns:1fr 300px; } }