.practice-page{background:#101113}.practice-workspace{max-width:1180px;margin:auto;padding:28px 24px 30px}.practice-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.practice-heading h1{font-size:clamp(30px,4vw,46px);letter-spacing:-1.6px;line-height:1.1;margin:7px 0}.practice-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:20px;align-items:start}.practice-controls{padding:24px}.practice-controls h2{font-size:21px;margin:0 0 20px}.practice-controls .field{margin-bottom:15px}.practice-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.practice-fields .field{min-width:0;margin-bottom:4px}.practice-controls select,.practice-controls input[type=number]{width:100%;min-width:0;height:46px;font-size:15px}.practice-slider{width:100%;margin:7px 0 15px;accent-color:#ff8656}.practice-checks{display:flex;flex-wrap:wrap;gap:10px 16px;margin:8px 0 16px;font-size:13px;color:#d8d8d9}.practice-checks label{display:flex;align-items:center;gap:6px;cursor:pointer}.practice-checks input{accent-color:#ff8656;width:17px;height:17px}.practice-volume{display:flex;align-items:center;gap:12px;font-size:13px;color:#aaa;margin:12px 0 19px}.practice-volume input{width:100%;min-width:0;accent-color:#ff8656}.practice-status{font-size:12px;line-height:1.5;color:#a8aaa9;margin:12px 0 0;min-height:36px}.practice-score{padding:26px;min-width:0;overflow:hidden}.practice-score .section-heading{margin-bottom:12px}.practice-score h2{font-size:clamp(22px,3.5vw,32px);line-height:1.15;letter-spacing:-.7px;margin:0 0 8px;overflow-wrap:anywhere}.practice-score>p.muted{margin:0;font-size:14px}.practice-live{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:22px 0 18px;padding:17px 19px;background:#111315;border:1px solid #343739;border-radius:15px}.practice-live>div:first-child{display:flex;flex-direction:column;gap:4px}.practice-live #practice-cue{font-size:10px;letter-spacing:1.6px;color:#b1b3b5}.practice-live #practice-hand{font-size:40px;line-height:1.05;font-weight:500;color:#ff8656;min-height:44px}.practice-live-meta{display:flex;flex-direction:column;gap:6px;text-align:right;font-size:12px;color:#969a9a}.practice-live-meta strong{font-size:14px;color:#eee;font-weight:500}.practice-strip{overflow-x:auto;max-width:100%;padding:5px 1px 13px;scrollbar-color:#5c6163 #1d2022;scrollbar-width:thin;border-radius:10px}.practice-notes{display:flex;gap:5px;width:max-content;min-width:100%;align-items:stretch}.practice-note{flex:none;width:68px;min-height:107px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;background:#25282a;border:1px solid #383d40;border-radius:11px;padding:7px 5px 8px;position:relative}.practice-note.active{background:#493126;border-color:#ff8656;box-shadow:inset 0 0 0 1px #ff8656}.practice-note strong{font-size:28px;font-weight:500;line-height:1}.practice-note .accent{height:13px;font-size:19px;color:#ffad87;line-height:.7}.practice-note .hands{display:flex;align-items:baseline;gap:3px;white-space:nowrap}.practice-note .grace{font-size:12px;color:#bebaba}.practice-note .beat{font-size:10px;color:#a9afb1;white-space:nowrap}.practice-note .duration{height:3px;min-width:6px;background:#82888b;align-self:flex-start;border-radius:3px}.practice-note.active .duration{background:#ff8656}.practice-note.rest strong{font-size:23px;color:#a7adb0}.practice-note.buzz strong::after{content:'z';font-size:17px;vertical-align:super;color:#ffad87}.practice-legend{display:flex;gap:10px 16px;flex-wrap:wrap;font-size:12px;color:#a5abad;margin:12px 0 8px}.practice-legend b{font-weight:500;color:#eee}.practice-grace-help{font-size:12px;color:#91989a;line-height:1.5;margin:0}.practice-tip{font-size:15px;line-height:1.6;border-left:3px solid #ff8656;padding-left:14px;margin:21px 0}.practice-navigation{display:flex;justify-content:space-between;gap:12px}.practice-navigation button{font-size:13px;min-height:43px;padding:9px 15px}.practice-guide{border-top:1px solid #373b3d;padding-top:17px;margin-top:21px;font-size:13px;color:#a7acad;line-height:1.7}.practice-guide summary{cursor:pointer;color:#dfdfe0;font-weight:500}.practice-guide ol{padding-left:20px}.practice-guide a{color:#ffad87}.practice-storage{font-size:12px;color:#81888b;text-align:center;margin:20px 0 0}.practice-page button:focus-visible,.practice-page a:focus-visible,.practice-page select:focus-visible,.practice-page input:focus-visible,.practice-strip:focus-visible{outline:2px solid #ffad87;outline-offset:3px}.practice-controls .primary-button{min-height:49px;justify-content:center;gap:10px}.practice-controls .primary-button[aria-pressed=true]{background:#423026;color:#ff986c;border-color:#9b5b40}.practice-controls .primary-button:disabled{opacity:.6}
@media(max-width:720px){.practice-workspace{padding:19px 16px 24px}.practice-heading{margin-bottom:17px}.practice-heading .eyebrow{font-size:9px}.practice-heading .pill{font-size:10px;white-space:nowrap}.practice-layout{grid-template-columns:minmax(0,1fr);gap:14px}.practice-controls{padding:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}.practice-controls h2{font-size:18px;margin:0 0 14px;grid-column:1/-1}.practice-controls>.field{min-width:0;margin-bottom:12px}.practice-controls .field label{font-size:11px;margin-bottom:6px}.practice-controls .practice-fields,.practice-slider,.practice-checks,.practice-volume,#practice-play,.practice-status{grid-column:1/-1}.practice-controls select,.practice-controls input[type=number]{font-size:13px;height:42px;padding-left:10px;padding-right:25px}.practice-checks{margin:6px 0;font-size:12px;gap:13px}.practice-slider{margin:8px 0}.practice-volume{margin:9px 0 13px}.practice-status{min-height:0;margin-top:9px}.practice-score{padding:19px}.practice-score .section-number{font-size:14px}.practice-score .eyebrow{font-size:10px}.practice-score h2{font-size:25px}.practice-live{margin:16px 0 12px;padding:12px 15px}.practice-live #practice-hand{font-size:33px;min-height:35px}.practice-note{width:62px;min-height:98px}.practice-tip{font-size:13px;margin:17px 0}.practice-page .app-header{padding-left:16px;padding-right:16px;gap:10px}.practice-page .app-header .brand{font-size:24px}.practice-page .app-header .brand img{width:30px;height:30px}.practice-page .app-header .nav-button{font-size:12px;padding:9px}.practice-page .app-header .header-end:empty{display:none}.practice-page .app-header .header-end .account-link{font-size:11px}.practice-page .app-footer{padding:20px 16px;gap:12px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.practice-page *{scroll-behavior:auto!important;transition:none!important}}
.practice-controls input[type=range]{height:22px;min-height:22px;padding:0;min-width:0}.practice-controls input[type=checkbox]{width:17px;min-width:17px;height:17px;min-height:17px;padding:0;margin:0}.practice-volume{height:24px}.practice-checks label{min-height:24px}
@media(max-width:720px){.practice-page .app-header{display:flex;flex-wrap:nowrap;min-height:72px}.practice-page .app-header nav{width:auto;order:0;flex:0 1 auto;margin-left:auto;justify-content:flex-end}.practice-page .header-end{margin-left:0}.practice-volume{margin:6px 0 12px}.practice-checks{gap:6px 12px}.practice-checks label{font-size:11px}}
@media(max-width:720px){.practice-playing #practice-play{position:fixed;z-index:40;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100% - 32px);box-shadow:0 0 0 8px #101113,0 -10px 30px #0008}.practice-playing .practice-controls{padding-bottom:67px}.practice-playing .practice-workspace{padding-bottom:90px}.practice-score{scroll-margin-top:12px}}
