.collection-label { cursor:pointer; padding:0; }
.grade-filter { position:absolute; left:16%; top:18.2%; height:3.6%; display:flex; gap:8px; z-index:2; }
.grade-filter button { min-width:38px; padding:2px 10px; font-size:calc(var(--u)*.9); color:#b3c7d4; border-bottom:2px solid transparent; }
.grade-filter button[aria-pressed=true] { color:#fff; background:#ffffff18; border-color:#fce491; }
#sort-direction { padding:8px; font-size:20px; }
.chapter-cards { position:absolute; inset:25% 12% 18%; display:grid; grid-template-columns:1fr 1fr; gap:4%; }
.chapter-cards button { padding:10%; text-align:left; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(135deg,#344954dd,#17232dea); border-left:3px solid #fce491; }
.chapter-cards button+button { border-color:#9ed5f3; background:linear-gradient(135deg,#283744dd,#111c2aea); }
.chapter-cards small { font-size:clamp(9px,1cqw,16px); letter-spacing:.16em; opacity:.55; }
.chapter-cards strong { font-size:clamp(24px,3.5cqw,56px); font-weight:400; margin:18px 0; }
.chapter-cards span,.chapter-cards p { font-size:clamp(11px,1.2cqw,19px); opacity:.7; }
.calibration { height:clamp(210px,20cqw,340px); }
.calibration .cal-note { width:18%; height:auto; background:none; box-shadow:none; transform:translate(-50%,-50%); object-fit:contain; animation:none; pointer-events:none; top:28%; }
.calibration .note-one { left:25%; }.calibration .note-two { left:46%; top:43%; }.calibration .note-three { left:70%; top:58%; }
.calibration.running .cal-note { animation:none; }
.calibration-mark { position:absolute; left:59%; width:22%; height:2px; background:white; pointer-events:none; box-shadow:0 0 6px #fff5; }
.calibration-beats { position:absolute; display:flex; gap:10px; left:5%; top:10%; }
.calibration-beats i { width:8px; height:8px; border-radius:50%; background:#ffffff28; }
.calibration-beats i.active { background:#fce491; box-shadow:0 0 8px #fce491; }
.calibration-fine { display:flex; gap:10px; align-items:center; justify-content:center; margin-bottom:20px; font-size:13px; }
.calibration-fine button { padding:8px 12px; background:#ffffff12; }
.calibration-fine span { opacity:.5; }
@media(orientation:portrait) {
 .grade-filter { top:13.3%; left:9%; height:3%; gap:5px; }.grade-filter button { font-size:3vw; padding:2px 9px; min-width:35px; }
 .selection-tools { width:53%; }.selection-tools>div { gap:3%; }
 #sort-direction { padding:3px; font-size:16px; }
 .chapter-cards { inset:17% 8% 10%; grid-template-columns:1fr; grid-template-rows:1fr 1fr; gap:5%; }
 .chapter-cards strong { font-size:9vw; }.chapter-cards small { font-size:2.4vw; }.chapter-cards span,.chapter-cards p { font-size:3vw; }
 .calibration-controls { flex-wrap:wrap; }.calibration-controls span { width:100%; }
 .calibration-fine { gap:5px; font-size:11px; }.calibration-fine button { padding:7px; }
}