.practice-page header{justify-content:flex-start}.practice-page .source-tabs{margin-bottom:26px}.practice-page .source-bar{display:flex;align-items:end;gap:12px;margin-bottom:24px;min-height:44px}.practice-page .source-bar .field{flex:1}.practice-page .source-bar input[type=url]{width:100%}.practice-page .field>label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:9px}.practice-page .source-bar button{height:44px}.practice-page .video-wrap{aspect-ratio:16/9;background:#e0ebee;border-radius:10px;overflow:hidden;margin-bottom:26px}.practice-page .video-wrap iframe,.practice-page #video-player{width:100%;height:100%;border:0}.practice-page .practice-controls{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:22px;align-items:start}.practice-page .practice-controls input[type=number]{width:84px;height:44px;background:#ebf3f5;border:0;text-align:center;padding:8px}.practice-page .practice-controls select{height:44px;background:#ebf3f5;border:0;min-width:92px;max-width:260px}.practice-page .time-range{display:flex;align-items:center;gap:6px;height:44px;background:#ebf3f5;border-radius:9px;padding:4px 8px}.practice-page .time-range input{border:0;background:transparent;width:80px;text-align:center;padding:5px; font-variant-numeric:tabular-nums}.practice-page .time-range button{background:#fff;padding:7px 9px;font-size:12px;color:var(--brand)}.practice-page .transport{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}.practice-page .transport button{padding:10px 16px}.practice-page .toggle{background:#ebf3f5;color:var(--muted)}.practice-page .toggle.active{background:#e0ebee;color:#1b2c30}.practice-page .toggle.active:before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:7px}.practice-page output{font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted);margin-left:8px}.practice-page .seek{width:100%;padding:0;accent-color:#78acd2}.practice-page .file-button{cursor:pointer;padding:12px 17px;border-radius:8px;white-space:nowrap}.practice-page .file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.practice-page .file-button:has(+input:focus-visible){outline:3px solid #9bbbc3;outline-offset:3px}.practice-page #gp-filename{overflow-wrap:anywhere;color:var(--muted);font-size:13px}.practice-page #gp-loading{font-size:12px;color:var(--muted)}.practice-page .bar-range{width:148px}.practice-page .bar-range input[type=number]{width:50px;height:34px;padding:4px 0}.practice-page .score-title{font-weight:600;font-size:18px;margin:24px 0 12px}.practice-page .score-viewport{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:auto;position:relative;max-height:78vh;padding:16px 8px;min-height:160px}.practice-page #score{min-width:260px}.practice-page .at-cursor-bar{background:#78acd21c}.practice-page .at-cursor-beat{background:#5e95bc;width:2px}.practice-page .at-selection div{background:#78acd22b}.practice-page .at-highlight *{fill:#4d6c74;stroke:#4d6c74}.practice-page #practice-error{color:#8c4545;font-size:13px;margin-top:18px}.practice-page #gp-countdown,.practice-page #video-countdown{color:var(--brand);font-weight:600;font-size:20px}
@media(max-width:800px){.practice-page .practice-controls{gap:16px 12px}.practice-page .practice-controls>.field:first-child:has(.time-range){width:100%}.practice-page .time-range{justify-content:center}.practice-page .source-bar{flex-wrap:wrap}.practice-page .source-tabs{width:fit-content}.practice-page .source-tabs button{min-width:100px}.practice-page .transport button{padding:9px 12px}.practice-page #gp-track{max-width:148px}}
@media(max-width:420px){header{gap:8px;padding-left:12px;padding-right:12px}.tool-tabs{gap:2px}.tool-tabs a{font-size:12px;padding:9px 7px}header .primary{padding:9px 8px;font-size:11px}header .primary span{margin-left:3px}.practice-page .time-range{gap:3px;padding:4px}.practice-page .time-range input{width:68px}.practice-page .time-range button{padding:7px}.practice-page .practice-controls input[type=number]{width:76px}}

/* Preserve the source systems on narrow screens; pan inside the sheet instead of compressing notation. */
.practice-page #score{min-width:760px}.practice-page .score-viewport{overscroll-behavior:contain}
.practice-page .compact-transport{gap:10px;margin:0 0 18px;align-items:center}.practice-page .compact-transport>label{font-size:12px;color:var(--muted);font-weight:600;margin-left:4px}.practice-page .compact-transport select,.practice-page .compact-transport input[type=number]{height:40px;border:0;background:#ebf3f5;border-radius:8px;padding:8px 10px;min-width:76px;width:82px;text-align:center}.practice-page .compact-transport output{margin-left:4px}.practice-page .compact-transport .subtle{margin-left:auto;background:transparent;color:var(--muted);font-size:12px;padding:8px}.practice-page .video-timeline{margin:14px 0 26px}.practice-page .timeline-ruler{position:relative;height:28px;margin:0 9px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none}.practice-page .timeline-ruler span{position:absolute;transform:translateX(-50%);white-space:nowrap}.practice-page .timeline-ruler span:after{content:"";position:absolute;width:1px;height:5px;background:#bdcfd4;bottom:-7px;left:50%}.practice-page .timeline-ruler .first{transform:none}.practice-page .timeline-ruler .last{transform:translateX(-100%)}.practice-page .loop-lane{height:36px;position:relative;margin:0 9px;background:#e5eef1;border-radius:6px;touch-action:none;user-select:none;cursor:crosshair}.practice-page .video-timeline[aria-disabled=true] .loop-lane{opacity:.5;cursor:default}.practice-page .timeline-selection{position:absolute;top:0;height:100%;background:#a8ccdce6;border:1px solid #6d9fb4;border-radius:5px;cursor:grab;min-width:3px;display:flex;align-items:center;justify-content:center}.practice-page .timeline-selection[hidden]{display:none}.practice-page #video-selection-time{font-size:11px;color:#284955;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;padding:0 14px;pointer-events:none}.practice-page .range-handle{position:absolute;top:-3px;bottom:-3px;width:16px;padding:0;background:#618da0;border:2px solid #f5fafb;border-radius:5px;cursor:ew-resize;z-index:1;touch-action:none}.practice-page .range-handle:after{content:"";position:absolute;height:12px;width:2px;background:white;top:11px;left:5px}.practice-page .range-handle.left{left:-7px}.practice-page .range-handle.right{right:-7px}.practice-page .video-timeline .seek{margin-top:12px;display:block;height:20px}.practice-page #gp-seek{display:block;margin:0 0 18px;height:20px}.practice-page .loop-lane:focus-visible,.practice-page .range-handle:focus-visible{outline:2px solid #638fa1;outline-offset:3px}
@media(max-width:600px){.practice-page .compact-transport{gap:8px}.practice-page .compact-transport .subtle{margin-left:0}.practice-page .compact-transport output{font-size:12px}.practice-page #gp-panel .compact-transport output{flex-basis:calc(100% - 90px)}.practice-page .video-wrap{min-height:200px}.practice-page #video-selection-time{font-size:10px}}
.practice-page .video-wrap{width:100%}

.practice-page .compact-transport .subtle{background:#fff;border:1px solid #a8c1ca;color:#3e6676;border-radius:8px;font-size:14px;font-weight:600;padding:10px 16px;min-height:40px}.practice-page .compact-transport .subtle:not(:disabled):hover{background:#e5f0f4;border-color:#769dab}

/* Keep the media and its controls in the same desktop view. */
.practice-page header{padding-top:18px;padding-bottom:18px}
.practice-page main{padding-top:20px;padding-bottom:20px}
.practice-page .source-tabs{margin-bottom:18px}
.practice-page .source-bar{margin-bottom:16px}
.practice-page #youtube-panel{width:min(100%,880px,max(356px,calc((100svh - 500px)*16/9)));margin-inline:auto}
.practice-page .video-wrap{margin-bottom:16px}
.practice-page .compact-transport{margin-bottom:12px}
.practice-page .video-timeline{margin-top:10px;margin-bottom:0}
.practice-page .range-actions{display:flex;justify-content:space-between;gap:12px;margin:0 9px 12px}
.practice-page .range-actions button{display:flex;align-items:center;gap:12px;padding:8px 12px;min-height:38px;background:#fff;border:1px solid #bed3dc;color:#3e6676;border-radius:8px}
.practice-page .range-actions button:hover{background:#eaf3f7;border-color:#83aabb}
.practice-page .range-actions span{font-size:12px;color:#667e89}
.practice-page .range-actions time{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.practice-page .score-title{margin-top:12px;margin-bottom:10px}
.practice-page .score-viewport{max-height:max(200px,calc(100svh - 380px));padding-top:8px;padding-bottom:8px}
@media(max-width:600px){.practice-page #youtube-panel{width:100%}.practice-page .range-actions{gap:8px}.practice-page .range-actions button{gap:8px;padding:8px 10px}.practice-page .range-actions time{font-size:13px}.practice-page .score-viewport{max-height:60svh}}

@media(min-width:601px) and (max-width:1100px){.practice-page .score-viewport{max-height:max(200px,calc(100svh - 430px))}}

.practice-page .source-header{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.practice-page .source-header .source-tabs{margin:0;flex-shrink:0}
.practice-page .source-header .inline-source{margin:0;align-items:center;min-width:0;flex:1}
.practice-page #gp-source{justify-content:flex-end}
.practice-page #gp-filename{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
.practice-page #youtube-panel{width:100%;margin:0}
.practice-page .range-actions{position:relative;height:58px;display:block;margin:0 9px 2px}
.practice-page .range-actions button{position:absolute;top:22px;transform:translateX(-50%);width:32px;height:32px;min-height:0;padding:6px;display:block;border-radius:7px}
.practice-page .range-actions button svg{width:18px;height:18px;display:block;fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.practice-page .range-actions time{position:absolute;top:0;transform:translateX(-50%);font-size:12px;line-height:18px;color:#4a7182;white-space:nowrap}
@media(max-width:700px){.practice-page .source-header{flex-wrap:wrap;gap:12px}.practice-page .source-header .inline-source{flex-basis:100%}.practice-page #gp-source{justify-content:flex-start}.practice-page #gp-filename{max-width:calc(100% - 130px)}}
.practice-page .range-actions{overflow:clip}