.scale-game{--theory-accent:#7040d9;--theory-soft:#e8defa;--theory-light:#f9f5ff}
.scale-game button:focus-visible,.scale-game input:focus-visible,.scale-game select:focus-visible,.scale-game summary:focus-visible{outline:3px solid #8c52ff;outline-offset:3px}
.scale-game .heading-symbol{font-size:3.5rem}
.scale-game:not(.sb-practicing) .play-heading{padding:22px 32px}.scale-game:not(.sb-practicing) .play-heading h1{font-size:2.4rem}.scale-game:not(.sb-practicing) .theory-body{padding:22px 32px 26px}
.sb-config{max-width:920px;margin:auto}
.scale-game .sb-config .setup-group{margin:0 0 20px}.scale-game .sb-config legend,.scale-game .sb-mode legend{font-size:.76rem;letter-spacing:.06em;color:#796788;text-transform:uppercase;margin-bottom:9px}
.sb-setup-choices{display:flex;justify-content:space-between;align-items:start;gap:24px}.sb-family{text-align:left}.sb-family legend{float:none;width:100%}
.sb-segments{display:flex;gap:3px;width:fit-content;max-width:100%;padding:4px;background:#f1ebf8;border-radius:13px}
.sb-family .sb-segments,.sb-mode .sb-segments{margin:0}
.scale-game .sb-segments .theory-chip{flex:1 0 auto;min-width:0;min-height:44px;padding:8px 16px;border:0;border-radius:9px;background:transparent;box-shadow:none;color:#756183;font-size:.84rem;font-weight:750;line-height:1.25;transform:none;white-space:nowrap}
.scale-game .sb-segments .theory-chip:hover{background:#e8def7;color:#583388;transform:none}
.scale-game .sb-segments .theory-chip.selected{background:#fff;color:#6835b1;box-shadow:0 2px 7px #56317b15}
.sb-selection-segments{background:transparent;padding:0;gap:12px}.scale-game .sb-selection-segments .theory-chip{border-radius:0;border-bottom:2px solid transparent;padding:8px 3px;background:transparent;box-shadow:none;font-size:.82rem}.scale-game .sb-selection-segments .theory-chip.selected{border-color:#8853cf;background:transparent;box-shadow:none}
.sb-fifths{margin-top:19px;background:radial-gradient(ellipse at 50% 45%,#e9ddfb77,transparent 70%);padding:6px 0 0}
.sb-fifths-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:6px}.sb-fifths-heading h2{font-size:1.08rem;color:#493060;margin:0}.sb-fifths-heading p{display:flex;justify-content:space-between;gap:22px;color:#95839f;font-size:.73rem;margin:0}
.sb-range-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#d4bdeb transparent;border-radius:10px}
.sb-range-path{min-width:728px;padding:18px 48px 12px}
.sb-range-track{position:relative;height:44px;isolation:isolate}
.sb-range-track::before,.sb-range-fill{content:'';position:absolute;top:20px;height:4px;border-radius:5px}.sb-range-track::before{left:0;right:0;background:#ddd0eb}.sb-range-fill{left:var(--range-from);width:calc(var(--range-to) - var(--range-from));min-width:4px;background:linear-gradient(90deg,#ac73ed,#7040d9);box-shadow:0 0 10px #9761d72b;transition:left .16s ease,width .16s ease}
.sb-range-dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.sb-range-dots i{width:6px;height:6px;border-radius:50%;background:#c8b3dd;box-shadow:0 0 0 3px #faf7fd55}
.sb-range-handle{position:absolute;top:0;width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;border:3px solid #9160d5;border-radius:50%;background:white;color:#7040d9;box-shadow:0 3px 9px #5e348333;transform:translateX(-50%);touch-action:none;cursor:grab;z-index:2;transition:left .16s ease,box-shadow .16s ease}
.sb-range-handle span{font-size:1.7rem;font-weight:700;line-height:1}.sb-range-from{left:var(--range-from)}.sb-range-to{left:var(--range-to)}.sb-range-handle:hover,.sb-range-handle:focus-visible{z-index:3;box-shadow:0 3px 12px #7040d955}.sb-range-handle:active{cursor:grabbing}
.sb-range-single .sb-range-from{transform:translateX(calc(-50% - 23px))}.sb-range-single .sb-range-to{transform:translateX(calc(-50% + 23px))}
.sb-dragging .sb-range-handle,.sb-dragging .sb-range-fill{transition:none}.sb-range-handle.sb-settle span{animation:sb-handle-settle .28s ease-out}
@keyframes sb-handle-settle{0%{transform:scale(.85)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
.sb-key-order{position:relative;height:44px;margin-top:14px}.sb-key-order>span{position:absolute;left:var(--key-position);width:44px;text-align:center;align-content:center;font-size:.84rem;font-weight:750;line-height:1.2;padding:8px 1px;min-height:37px;border-radius:9px;color:#9886a2;transform:translateX(-50%);transition:transform .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease}.sb-key-order small{display:block;font-size:.66rem;margin-top:4px;color:#9a7eb1}.sb-key-order .in-range{background:#f0e5fe;color:#6c3da5;transform:translate(-50%,-3px);box-shadow:0 3px 10px #9152d71b}.sb-key-order .sb-neutral{font-weight:900;color:#5f3b86}
.sb-range-help,.sb-minor-note{font-size:.72rem;line-height:1.5;color:#93819f;margin:5px 0 0}.sb-range-help{text-align:center}.sb-scroll-help{display:none}.sb-minor-note{margin-top:10px}
.sb-summary{padding:13px 16px;border:0;border-left:3px solid #b291dc;border-radius:0 9px 9px 0;background:#f7f3fc;line-height:1.45;margin:14px 0}
.sb-summary-heading{display:flex;gap:12px;align-items:center;justify-content:space-between}.sb-summary-heading strong{font-size:.85rem;color:#61417b}.sb-summary-heading>span{font-size:.72rem;color:#8b749d;white-space:nowrap}.sb-summary p{margin:5px 0 0;color:#695574;font-size:.78rem}.sb-summary .sb-plan-meta{font-size:.72rem;color:#907a9b}.sb-summary .sb-pool{color:#6c3da5;font-weight:750}.sb-summary-label{font-weight:650;color:#8b749d}
.sb-more{border:0;border-top:1px solid #ede5f4;border-bottom:1px solid #ede5f4;padding:0 2px;margin:14px 0}
.scale-game .sb-more summary{cursor:pointer;font-weight:750;min-height:44px;align-content:center;color:#725785;font-size:.8rem}.sb-more summary>span{font-weight:500;color:#a18baa;font-size:.72rem;margin-left:10px}.sb-more[open] summary{margin-bottom:14px}
.sb-key-checks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:16px}.sb-key-checks label{display:flex;gap:7px;align-items:center;padding:8px 10px;border:1px solid #e7ddf0;border-radius:9px;min-height:44px;font-weight:750;font-size:.83rem;color:#796187;cursor:pointer}.sb-key-checks label:has(:checked){background:#f1e8fc;border-color:#ba99e3;color:#7040a7}.sb-key-checks input{accent-color:#8c52ff;width:17px;height:17px;flex-shrink:0}
.scale-game select,.sb-tonic input{font:inherit;min-height:48px;border:2px solid #d9cce7;border-radius:10px;padding:8px 12px;background:#fff;color:#382546;max-width:100%}
.sb-select-label{display:grid;gap:8px;font-weight:750;font-size:.85rem;max-width:540px;margin:16px auto}.sb-assignment-style{margin-top:13px}.sb-student{padding:13px;background:var(--theory-light);border-radius:10px}
.sb-launch{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;max-width:920px;margin:18px auto 0}.scale-game .sb-mode{margin:0;text-align:left}.sb-mode legend{width:100%}
.sb-setup-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:0}.sb-setup-actions button{min-height:48px}.sb-copy-fallback{width:100%;min-height:100px;font:inherit;border:1px solid #c2afd6;border-radius:10px;padding:10px}
.sb-practicing .play-heading{padding:14px 24px}.sb-practicing .play-heading h1{font-size:1.9rem}.sb-practicing .play-heading .heading-symbol{font-size:2rem}.sb-practicing .play-heading p:not(.eyebrow){display:none}.sb-practicing .theory-body{padding:18px 24px 24px}
.scale-game .theory-session-top{margin-bottom:10px}.scale-game .theory-scoreboard{margin:5px 0 10px}.scale-game .theory-intro{margin:12px auto}.scale-game .theory-intro h2{font-size:1.65rem}.scale-game .theory-intro p{font-size:.85rem;margin:7px 0}
.sb-tonic{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px 0 18px}.sb-tonic label{font-weight:800;font-size:.9rem}.sb-tonic small{display:block;font-size:.7rem;font-weight:600;margin-top:4px;color:#74657d}.sb-tonic input{width:135px}.sb-tonic button{min-height:48px}
.scale-game .sb-stage{max-width:100%;margin-bottom:15px}.scale-game .sb-stage svg{display:block;margin:0;min-width:600px;max-height:280px;min-height:180px}.scale-game .theory-stage-label{padding-top:10px}
.sb-slots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;margin:10px 0 16px}.sb-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:2px solid #dbd0e7;border-radius:13px;background:#fff;min-height:75px;padding:9px 3px;color:#39254c}.sb-slot small{font-size:.58rem;letter-spacing:.04em;font-weight:800}.sb-slot strong{font-size:1.3rem}.sb-slot.verified{border-color:#358258;background:#effaf2}.sb-slot:disabled{opacity:.85;cursor:default}
.sb-accidentals button{min-height:48px;font-size:.85rem}.sb-accidentals button>span{font-size:1.3rem;margin-right:4px}.scale-game .theory-control-label{margin-bottom:10px}.scale-game .theory-hint{line-height:1.5}.scale-game .theory-feedback{margin:10px auto;min-height:35px}
.sb-review{padding:16px 20px;background:#f7f3fc;border:1px solid #dfd2ec;border-radius:16px;margin:12px 0 18px;font-size:.88rem;line-height:1.6}.sb-review h3{margin:0 0 10px}.sb-review p{margin:8px 0}.sb-spelling{font-weight:850;font-size:1rem}.sb-review svg{width:100%;min-width:600px;max-height:280px;display:block}.sb-notation-scroll{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#ccb4e6 transparent}.sb-staff-scroll-help{display:none}.sb-hint{font-size:.85rem;line-height:1.6}.sb-order-label{font-weight:850;margin-bottom:5px}.sb-order{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.sb-order>span{min-width:30px;text-align:center;padding:7px;border:1px solid #e3d9ed;border-radius:8px;font-weight:800}.sb-order .used{background:#8c52ff;color:#fff;border-color:#8c52ff}.sb-order .sb-arrow{padding:0;min-width:10px;border:0;color:#907c9f}
@media(max-width:800px){.sb-staff-scroll-help{display:block;font-size:.6rem;font-weight:600;letter-spacing:0;color:#9a84ab;margin-top:6px}.sb-setup-choices{display:block}.sb-family{text-align:center}.sb-family .sb-segments{margin:auto}.sb-launch{flex-direction:column;align-items:center;gap:16px}.scale-game .sb-mode{text-align:center}.sb-mode .sb-segments{margin:auto}.sb-slots{grid-template-columns:repeat(4,minmax(0,1fr))}.sb-key-checks{grid-template-columns:repeat(3,minmax(0,1fr))}.sb-slot{min-height:65px}.sb-scroll-help{display:inline}}
@media(max-width:480px){.sb-segments{width:100%}.scale-game .sb-segments .theory-chip{flex:1 1 0;white-space:normal}.scale-game:not(.sb-practicing) .play-heading{padding:20px 16px}.scale-game:not(.sb-practicing) .play-heading h1{font-size:2rem}.scale-game:not(.sb-practicing) .theory-body{padding:20px 14px 24px}.sb-selection-segments{width:100%}.scale-game .sb-selection-segments .theory-chip{white-space:normal}.sb-setup-actions{width:100%}.sb-range-help{font-size:.68rem}.sb-practicing .theory-body{padding:16px 12px 22px}.sb-summary{padding:11px 12px}.sb-summary p{font-size:.75rem}.scale-game .sb-segments .theory-chip{font-size:.73rem;padding:8px 10px}.sb-selection-segments{gap:10px}.sb-fifths-heading{display:block}.sb-fifths-heading h2{font-size:1rem}.sb-fifths-heading p{margin-top:9px}.sb-more summary>span{font-size:.65rem;margin-left:5px}.sb-key-checks label{font-size:.75rem;padding:8px 6px;gap:6px}.sb-setup-actions>*{flex:1;font-size:.83rem}.scale-game .theory-intro h2{font-size:1.3rem}.sb-tonic{gap:8px}.sb-tonic label{width:100%}.sb-slots{gap:6px}.sb-slot strong{font-size:1.15rem}.sb-accidentals{gap:6px}.sb-accidentals button{padding:8px 10px;font-size:.78rem}.sb-review{padding:12px}.sb-order>span{padding:6px;min-width:24px}.sb-order{gap:3px}}
@media(prefers-reduced-motion:reduce){.sb-range-fill,.sb-range-handle,.sb-key-order>span{transition:none}.sb-range-handle.sb-settle span{animation:none}}

.sb-tonic-help{max-width:650px;margin:12px auto 18px;padding:14px 18px;border-left:3px solid #b99bde;border-radius:0 10px 10px 0;background:#f7f2fc;color:#654e78;font-size:.85rem;line-height:1.5}.sb-tonic-help p{margin:6px 0}.sb-tonic-path{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0}.sb-tonic-path>span{display:grid;min-width:44px;min-height:44px;align-content:center;justify-items:center;padding:7px 10px;border-radius:9px;background:#eadcfb;color:#6739a2;font-size:1rem;font-weight:800}.sb-tonic-path small{font-size:.6rem;color:#9a7cb1}.sb-tonic-path .sb-path-blank{background:#fff;border:1px dashed #b694d8}.sb-tonic-path .sb-path-answer{background:#7040d9;color:#fff}.sb-tonic-path>b{color:#b195c6}.sb-work:not([hidden]){animation:sb-unlock .2s ease-out}@keyframes sb-unlock{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.sb-work:not([hidden]){animation:none}}