:root{font-family:Kalinga,Arial,sans-serif;color:#22272c;background:#f3f4f5;font-synthesis:none;--accent:#ae391f;--border:#d9dde0;--ink:#22272c}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[role=button]:focus-visible{outline:3px solid #1b6bce;outline-offset:4px}button{border:1px solid #b9c0c5;background:transparent;color:var(--ink);padding:11px 15px;border-radius:6px;font-size:14px}button:hover:not(:disabled){background:#e7eaec}button:disabled,select:disabled,input:disabled{cursor:default;opacity:.45}header{height:92px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1260px)/2));background:#fff}.brand{display:flex;align-items:center;gap:13px;font-size:16px;font-weight:700;letter-spacing:2px}.brand-mark{font-size:44px;color:var(--accent);line-height:1}.brand small{display:block;font-size:10px;letter-spacing:2.7px;font-weight:400;margin-top:7px}.version,.eyebrow{font-size:12px;letter-spacing:2px;color:#626b73}main{max-width:1260px;margin:auto;padding:34px 24px 36px}.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}h1{font-size:34px;font-weight:500;letter-spacing:-1px;margin:10px 0 0}h2{font-size:16px;margin:0;font-weight:600}h2 span{font-weight:400;color:#68727b}.meter-control{display:flex;align-items:center;gap:15px}.meter-control label{font-size:14px}select{border:1px solid #c7cdd1;background:#fff;color:var(--ink);border-radius:6px;padding:11px 30px 11px 12px}.meter-control select{font-size:22px;font-weight:600}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px}.circle-panel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:23px;min-width:0}.panel-heading,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading>span,.section-heading>span{font-size:12px;letter-spacing:1px;color:#68727b}.panel-heading>span{color:var(--accent)}#circle-container{max-width:565px;margin:6px auto 0}#circle-container svg{display:block;width:100%;height:auto;overflow:visible}.sector{cursor:pointer;transition:fill .12s;stroke:#fff;stroke-width:2}.sector:hover{filter:brightness(.94)}.sector:focus-visible{stroke:#1769cd;stroke-width:4;outline:none}.sector-label{pointer-events:none;font-family:'Segoe UI Symbol',Arial,sans-serif;font-size:22px;fill:#6b747b}.sector-label.active{fill:#fff}.circle-center-title{font-size:12px;letter-spacing:1.6px;fill:#707980}.circle-center-number{font-size:38px;fill:#22272c}.beat-number{font-size:14px;fill:#666f77}.legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:13px;color:#626b73}.legend strong{font-family:'Segoe UI Symbol',Arial,sans-serif;margin-right:6px;color:var(--accent);font-size:19px}.hint{font-size:13px;color:#65717a;line-height:1.6;margin:13px 0 0}.circle-panel>.hint{text-align:center}aside{display:flex;flex-direction:column;gap:19px}.track-panel,.edit-panel{padding:20px;background:#fff;border:1px solid var(--border);border-radius:10px}.section-heading{margin-bottom:16px}.track{width:100%;display:flex;align-items:center;gap:12px;margin-top:9px;text-align:left;padding:12px;border:1px solid #e0e4e6;min-height:51px}.track.selected{border-color:var(--accent);background:#fcf0eb}.track-index{border-radius:50%;width:26px;height:26px;display:grid;place-items:center;color:var(--track);border:1px solid currentColor;font-size:12px}.track-label{flex:1}.track-count{font-size:12px;color:#68727b}.edit-panel label{display:block;font-size:14px;margin-bottom:10px}.edit-panel select{width:100%;font-size:14px}.small-actions{display:flex;gap:8px;margin-top:15px}.small-actions button{flex:1}.transport{padding:20px;border-radius:10px;background:#20262c;color:#fff}.tempo-heading{display:flex;align-items:center;justify-content:space-between}.tempo-heading>label{font-size:14px}.tempo-heading>div{display:flex;align-items:center;gap:6px}.tempo-heading span{font-size:12px;color:#aeb7be}#bpm{background:transparent;color:#fff;border:0;border-bottom:1px solid #626e77;font-size:29px;width:80px;text-align:center;padding:0 0 3px}#tempo{width:100%;accent-color:#f78060;margin:21px 0}.transport-buttons{display:flex;gap:10px}.transport-buttons button{flex:1;border-color:#65717a;color:#fff;font-weight:600}.transport-buttons button.primary{background:#f07755;border-color:#f07755;color:#171b20}.transport-buttons button:hover:not(:disabled){background:#4a545e}.transport-buttons button.primary:hover:not(:disabled){background:#ff9273}.transport-status{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#c0c9d0;margin-top:17px}.timeline-panel{margin-top:24px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:21px 24px}#timeline svg{width:100%;display:block;height:auto;min-width:550px}#timeline{overflow-x:auto}.timeline-label{font-size:13px;fill:#56616a}.timeline-beat{font-size:12px;fill:#63717a}.playhead{pointer-events:none}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}.file-actions{display:flex;gap:9px;flex-wrap:wrap}#save-status{font-size:12px;color:#67717a}#notice{font-size:14px;color:#96301d;min-height:18px}details{font-size:13px;color:#626d76;line-height:1.6;max-width:850px}summary{cursor:pointer}details p{margin:8px 0}.playing .circle-panel{border-color:#a0abb4}
@media(min-width:1500px){main{padding-top:42px}.workspace{grid-template-columns:minmax(0,1fr) 350px}}
@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr) 285px;gap:16px}.circle-panel{padding:16px}.panel-heading{align-items:flex-start;flex-direction:column}.legend{gap:10px}.track-panel,.edit-panel,.transport{padding:16px}h1{font-size:29px}}
@media(max-width:700px){header{padding:0 20px;height:76px}.version{display:none}main{padding:24px 15px}.topline{gap:14px}h1{font-size:25px}.eyebrow{font-size:10px}.meter-control{gap:7px}.workspace{grid-template-columns:1fr}.panel-heading{flex-direction:row}.panel-heading>span{font-size:10px}h2{font-size:14px}aside{display:grid;grid-template-columns:1fr}.transport{grid-row:1}.timeline-panel{padding:18px 15px}.section-heading{align-items:flex-start;flex-wrap:wrap}footer{align-items:flex-start;flex-direction:column}.legend{gap:12px}.brand{font-size:14px}.brand small{font-size:9px}}

.sector.blocked{fill:#f5f6f7;cursor:not-allowed}.sector.blocked:hover{filter:none}.sector-label.blocked{fill:#bdc4c9}.sector-label.triplet{font-size:15px}.sector-label.active{fill:#fff}.legend{gap:10px 16px}

.triplet-option{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}.triplet-option .hint{margin:0;flex:1;min-width:180px}.triplet-option button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.track-row{display:flex;align-items:stretch;gap:6px;margin-top:9px}.track-row .track{margin:0;min-width:0;flex:1;gap:8px;padding:10px 7px}.mute-button{font-size:12px;padding:8px;min-width:53px}.mute-button[aria-pressed=true]{background:#333e47;color:#fff;border-color:#333e47}.muted .track-label{text-decoration:line-through;color:#7d858b}.track-row .track-count{font-size:11px}

/* Compact instrument surface: all performance controls stay with the circle. */
main{max-width:940px}.workspace{display:block}.circle-panel{padding:22px 26px}.panel-heading{flex-direction:row;align-items:center}.mode-switch,.instrument-switch{font-size:16px;font-weight:600;background:#f5f6f7;border-color:#dde1e4}.instrument-switch{color:var(--accent);min-width:132px;text-align:right}.circle-stage{position:relative;max-width:650px;margin:6px auto}#circle-container{max-width:none;margin:0}.center-controls{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32%;display:flex;flex-direction:column;align-items:center;gap:10px}.core-play{border:0;border-radius:30px;background:var(--accent);color:#fff;font-weight:600;padding:12px 20px}.core-play:hover:not(:disabled){background:#333e47}.core-tempo{display:flex;align-items:center;gap:3px}.core-tempo #bpm{color:#22272c;font-size:24px;width:72px;border-color:#d4dade;padding:0;text-align:center}.core-tempo span{font-size:11px;color:#747f88}.center-controls #beat-label{font-size:12px;color:#747f88}.orbit-tools{display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap}.orbit-tools .meter-control{gap:7px}.orbit-tools .meter-control select{font-size:16px;padding:9px}.mute-strip{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0}.mute-strip .mute-button{font-size:14px;border-color:var(--track);color:var(--track);padding:10px 12px}.mute-strip .mute-button span{font-size:11px;margin-left:8px}.mute-strip .mute-button[aria-pressed=true]{background:var(--track);color:white}.core-status{display:block;text-align:center;font-size:11px;letter-spacing:1px;color:#747f88;margin:14px 0}.circle-panel #triplet-note:empty{display:none}.timeline-panel{margin-top:18px}
@media(max-width:700px){main{padding:15px 10px}.circle-panel{padding:14px 10px}.mode-switch,.instrument-switch{font-size:14px;padding:10px}.instrument-switch{min-width:110px}.center-controls{gap:5px}.core-play{font-size:13px;padding:9px 14px}.core-tempo #bpm{font-size:20px;width:62px}.center-controls #beat-label{font-size:11px}.mute-strip{gap:7px}.mute-strip .mute-button{font-size:13px;padding:9px}.orbit-tools{gap:7px}.orbit-tools button{font-size:12px;padding:9px}.circle-stage{margin:8px auto}.orbit-tools .meter-control label{font-size:12px}}

#timeline .score{min-width:0;width:100%}.rest-glyph{font-family:"Segoe UI Symbol","Noto Music",serif}.timeline-panel{background:#fff}.orbit-tools{margin-bottom:8px}

.speed-control{display:flex;align-items:center;gap:7px}.speed-control label{font-size:14px}.speed-control #bpm{font-size:18px;width:64px;color:#22272c;border:1px solid #c7cdd1;border-radius:6px;padding:8px 3px}#triplets{display:grid;place-items:center;min-height:39px;padding:5px 10px}#triplets[aria-pressed=true]{background:#fae8e1;border-color:var(--accent);color:var(--accent)}.center-controls{gap:14px}@media(max-width:700px){.speed-control label{font-size:12px}.speed-control #bpm{font-size:16px;width:57px}.orbit-tools{gap:6px}}

.center-controls{width:17.5%;height:17.5%;gap:0}.core-play{width:100%;height:100%;padding:0;background:transparent;border-radius:50%;display:grid;place-items:center}.core-play svg{width:65%;height:65%;fill:var(--accent)}.core-play:hover:not(:disabled){background:#f0f2f3}.sector-label.triplet{font-size:11px}

.score-mute{cursor:pointer}.score-mute:hover circle{filter:brightness(.85)}.score-mute:focus-visible{outline:2px solid #1b6bce;outline-offset:2px}

.score-mute{display:grid;place-items:center;width:30px;height:32px;padding:0;border:0;border-radius:5px;background:transparent}.score-mute span{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#21854b;color:#fff;font:bold 12px Kalinga,Arial,sans-serif;line-height:1}.score-mute[aria-pressed=true] span{background:#c53030}.score-mute:focus-visible{outline-offset:-2px}

.instrument-control{display:flex;align-items:center;border:1px solid #dde1e4;border-radius:6px;background:#f5f6f7;padding-right:6px}.instrument-control .instrument-switch{border:0;background:transparent;min-width:0}.instrument-control #selection-mute{width:36px;height:36px;flex-shrink:0}.instrument-control #selection-mute span{width:18px;height:18px;font-size:14px}

.panel-heading{align-items:flex-start}.edit-controls{display:flex;flex-direction:column;gap:8px}.grid-controls{display:flex;align-items:center;gap:8px}.grid-controls button{width:48px;height:40px;padding:4px;display:grid;place-items:center}#quantization{font-family:"Segoe UI Symbol","Noto Music",serif;font-size:25px;line-height:1}#triplets{min-height:40px}.grid-controls #triplets svg{max-width:100%}

.instrument-control select.instrument-switch{font:600 16px Kalinga,Arial,sans-serif;text-align:left;padding:9px 28px 9px 12px;background:#fff;color:var(--accent);border:1px solid #c7cdd1;border-radius:6px}.instrument-control{gap:4px}

.grid-controls select#quantization{height:40px;min-width:65px;padding:4px 24px 4px 10px;font-size:25px;background:#fff}

/* Midnight palette inspired by the reference. Existing layout and controls stay intact. */
:root{color-scheme:dark;color:#deebf1;background:#07131e;--ink:#deebf1;--border:#263e4e;--accent:#ffb638}
body{background:radial-gradient(ellipse at 50% 30%,#102432 0%,#081722 48%,#050e17 100%)}
header{background:#08151f;border-color:#243b4b}.brand small,.version{color:#96adbb}.brand-mark{filter:drop-shadow(0 0 8px #ffb63830)}
.circle-panel,.timeline-panel{background:linear-gradient(145deg,#0c1c28,#08151f);border-color:#2a4252;box-shadow:0 12px 40px #00000020}
button,select{color:#dfecf2;border-color:#365364;background:#102633}
button:hover:not(:disabled){background:#1b3747;border-color:#608395}
button:focus-visible,select:focus-visible,input:focus-visible,[role=button]:focus-visible{outline-color:#00c4da}
.mode-switch,.instrument-control{background:#102633;border-color:#365364}
.instrument-control select.instrument-switch,.grid-controls select#quantization,.meter-control select{background:#102633;border-color:#365364;color:#dfecf2}
.instrument-control select.instrument-switch{color:var(--accent)}
select option{background:#102633;color:#dfecf2}
.speed-control #bpm{background:#102633;border-color:#365364;color:#dfecf2}
#triplets[aria-pressed=true]{background:#123b47;border-color:#00c4da;color:#5ee9f4}
#circle-container{filter:drop-shadow(0 0 22px #00bcd408)}
.sector{stroke:#294353;stroke-width:1;transition:fill .12s,filter .12s}
.sector:hover{filter:brightness(1.3)}
.sector[aria-pressed=true]{stroke:var(--accent);filter:drop-shadow(0 0 3px #00c4da20)}
.sector.blocked{fill:#0b1c28;stroke:#213745}.sector.blocked:hover{filter:none}
.sector-label{fill:#9ab1be}.sector-label.blocked{fill:#526b7a}.sector-label.active{fill:#06202b}
.beat-number{fill:#d7e7ef}.sector:focus-visible{stroke:#dffbff}
.core-play{background:#f4f8fa;box-shadow:0 0 20px #d7f5ff18}
.core-play svg{fill:#081722}.core-play:hover:not(:disabled){background:#dcecf3}
#timeline .score>g{fill:#dce9f0;stroke:#dce9f0}
#linear-playhead{stroke:#00c4da}
#save-status{color:#98afbd}#notice{color:#ffc66b}
.score-mute,.instrument-control .score-mute{background:transparent;border:0;box-shadow:none}
.score-mute span{background:#22804e;color:#fff}.score-mute[aria-pressed=true] span{background:#c53030}
.score-mute:hover:not(:disabled){background:#203c4b}.playing .circle-panel{border-color:#4f8998}

/* Keep the score in its original light appearance. */
.timeline-panel{background:#fff;border-color:#d9dde0;color:#22272c;box-shadow:none}
#timeline .score>g{fill:#22272c;stroke:#22272c}
#linear-playhead{stroke:#b84228}
.timeline-panel .score-mute:hover:not(:disabled){background:#e7eaec}

.instrument-tools{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.instrument-tools #clear{align-self:stretch;height:40px;padding:4px 12px}
.orbit-tools .speed-control{display:flex;gap:10px;align-items:center;background:#0c1d29;border:1px solid #142b3a;border-radius:15px;padding:6px 9px;box-shadow:inset 0 1px 0 #ffffff03}
.speed-control .tempo-value{display:flex;align-items:baseline;gap:3px}
.speed-control #bpm{appearance:textfield;-moz-appearance:textfield;width:38px;border:0;border-radius:3px;background:transparent;color:#e0e9ef;font-size:16px;font-weight:600;padding:3px 0;text-align:right}
.speed-control #bpm::-webkit-inner-spin-button,.speed-control #bpm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.speed-control .tempo-value label{font-size:10px;font-weight:500;color:#a5b7c5;letter-spacing:.2px}
.orbit-tools .speed-control button{display:grid;place-items:center;width:28px;height:28px;min-width:28px;border:0;border-radius:50%;padding:0;font-size:19px;font-weight:400;line-height:1;color:#c3d4df;background:linear-gradient(#1b3141,#122432)}
.orbit-tools .speed-control button:hover:not(:disabled){background:#274454;color:#fff}

/* User-selectable vertical and horizontal workspaces. */
.layout-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:18px;color:#98afbd;font-size:12px}
.layout-toolbar select{font-size:13px;padding:7px 25px 7px 10px}
#layout-status{font-size:11px;min-width:58px}#score-controls:empty{display:none}
.horizontal-layout main{max-width:1500px;display:grid;grid-template-columns:minmax(300px,1fr) minmax(300px,1fr);grid-template-rows:auto auto auto 1fr auto;gap:16px 24px;align-items:start}
.horizontal-layout .layout-toolbar{grid-column:1/-1;margin-bottom:0}
.horizontal-layout .workspace{grid-column:1;grid-row:2/6;min-width:0}
.horizontal-layout .timeline-panel{grid-column:2;grid-row:2;margin:0;min-width:0;padding:20px}
.horizontal-layout #score-controls{grid-column:2;grid-row:3;display:block}
.horizontal-layout #score-controls .orbit-tools{justify-content:flex-start;margin:0}
.horizontal-layout footer{grid-column:2;grid-row:4;margin:0;flex-direction:column;align-items:flex-start;gap:14px}
.horizontal-layout #notice{grid-column:2;grid-row:5;margin:0}
.horizontal-layout .circle-panel{padding:18px}.horizontal-layout .circle-stage{margin:8px auto 0}
@media(max-width:800px){.horizontal-layout main{gap:12px;min-width:640px;padding:12px}.horizontal-layout .circle-panel{padding:12px 8px}.horizontal-layout .timeline-panel{padding:15px 10px}.horizontal-layout .file-actions{gap:6px}.horizontal-layout .file-actions button{font-size:12px;padding:9px}.horizontal-layout .instrument-control select.instrument-switch{font-size:14px}}

/* Landscape: maximize the circular editor; collect every control below the score. */
.horizontal-layout main{grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);grid-template-rows:auto auto auto auto auto;gap:10px 16px}
.horizontal-layout .circle-panel{padding:8px;border:0;background:transparent;box-shadow:none}
.horizontal-layout .circle-stage{margin:0;max-width:650px}
.horizontal-layout .workspace{grid-row:2/6;align-self:start}
.horizontal-layout #score-controls{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.horizontal-layout #score-controls .panel-heading{grid-column:1/-1;gap:12px;align-items:flex-start}
.horizontal-layout #score-controls .orbit-tools{grid-column:1;justify-content:flex-start}
.horizontal-layout #score-controls .center-controls{position:static;transform:none;width:44px;height:44px;grid-column:2;grid-row:2;justify-self:end}
.horizontal-layout #score-controls .core-play{width:44px;height:44px}
.horizontal-layout footer{gap:8px}.horizontal-layout .timeline-panel{padding:12px}.horizontal-layout .section-heading{margin-bottom:6px}
@media(orientation:landscape) and (max-height:600px){
 .horizontal-layout header{height:40px;padding:0 14px}.horizontal-layout .brand{font-size:12px;gap:8px}.horizontal-layout .brand-mark{font-size:27px}.horizontal-layout .brand small{font-size:7px;margin-top:3px}.horizontal-layout .version{display:none}
 .horizontal-layout main{min-width:0;max-width:none;padding:6px 10px;gap:6px 12px;grid-template-columns:minmax(230px,.9fr) minmax(0,1.2fr)}
 .horizontal-layout .layout-toolbar{margin:0;gap:6px;height:26px}.horizontal-layout .layout-toolbar select{padding:3px 20px 3px 7px;font-size:11px}
 .horizontal-layout .circle-panel{padding:0}.horizontal-layout .circle-stage{width:min(100%,calc(100dvh - 82px));margin:0 auto}
 .horizontal-layout .timeline-panel{padding:7px 10px}.horizontal-layout .timeline-panel h2{font-size:12px}.horizontal-layout .section-heading{margin-bottom:0}
 .horizontal-layout #timeline .score{max-height:calc(100dvh - 230px);min-height:100px}
 .horizontal-layout #score-controls{gap:5px}.horizontal-layout #score-controls .panel-heading{gap:8px}.horizontal-layout .edit-controls,.horizontal-layout .instrument-tools{flex-direction:row;align-items:center;gap:5px}
 .horizontal-layout .grid-controls{gap:4px}.horizontal-layout .mode-switch,.horizontal-layout .instrument-control select.instrument-switch{font-size:12px;padding:6px}
 .horizontal-layout .instrument-tools #clear{height:32px;padding:4px 7px;font-size:11px}.horizontal-layout .grid-controls button,.horizontal-layout .grid-controls select#quantization{height:32px;min-height:32px;min-width:36px;width:39px;font-size:20px;padding:2px}
 .horizontal-layout .instrument-control{padding-right:2px;gap:0}.horizontal-layout .instrument-control #selection-mute{width:27px;height:30px}
 .horizontal-layout .orbit-tools .speed-control{padding:3px 6px}.horizontal-layout .meter-control select{padding:5px;font-size:14px}
 .horizontal-layout #score-controls .center-controls,.horizontal-layout #score-controls .core-play{width:34px;height:34px}
 .horizontal-layout .file-actions button{font-size:11px;padding:6px 8px}.horizontal-layout footer{gap:5px}.horizontal-layout #save-status{font-size:10px}.horizontal-layout #notice{font-size:11px;min-height:0}
}
.horizontal-layout #circle-container svg>circle:last-of-type{fill:#081722;stroke:#365364}
.horizontal-layout .workspace{grid-row:1/6}
.horizontal-layout .timeline-panel{grid-row:1}
.horizontal-layout #score-controls{grid-row:2}
.horizontal-layout footer{grid-row:3}
.horizontal-layout #notice{grid-row:4}
.horizontal-layout .layout-toolbar{grid-column:2;grid-row:5;justify-content:flex-start}

/* Shared proportional controls, below the score in both orientations. */
#score-controls,.horizontal-layout #score-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.15fr);grid-template-rows:auto auto;gap:8px;align-items:stretch;margin-top:12px}
#score-controls #mode-title{grid-column:1;grid-row:1}
#score-controls .instrument-control{grid-column:2;grid-row:1;min-width:0;padding-right:2px}
#score-controls .speed-control{grid-column:3;grid-row:1;min-width:0}
#score-controls .grid-controls{grid-column:1;grid-row:2;display:flex;gap:5px}
#score-controls #clear{grid-column:2;grid-row:2}
#score-controls .meter-control{grid-column:3;grid-row:2;display:flex}
#score-controls .meter-control select{width:100%;font-size:16px;padding:5px 10px}
#score-controls .grid-controls>*{flex:1;min-width:0;width:auto}
#score-controls .instrument-control select{flex:1;min-width:0;width:0;font-size:14px;padding:6px 3px}
#score-controls #selection-mute{width:28px;flex-shrink:0}
#score-controls #mode-title,#score-controls #clear{font-size:14px;padding:6px;min-height:38px}
#score-controls .speed-control{display:flex;justify-content:center;gap:4px;background:#0c1d29;border:1px solid #142b3a;border-radius:12px;padding:4px}
#score-controls .speed-control button{display:grid;place-items:center;flex-shrink:0;width:25px;height:25px;padding:0;border:0;border-radius:50%;background:#1b3141;font-size:17px}
#score-controls .speed-control #bpm{width:31px;font-size:14px;padding:0}
#score-controls .tempo-value{gap:1px}#score-controls .tempo-value label{font-size:8px}
.horizontal-layout #score-controls{margin-top:0}
.horizontal-layout .center-controls{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:17.5%;height:17.5%}
.horizontal-layout #circle-container svg>circle:last-of-type{fill:#fff;stroke:#7292a3}
@media(max-width:450px),(orientation:landscape) and (max-height:600px){
 #score-controls,.horizontal-layout #score-controls{gap:5px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.2fr)}
 #score-controls #mode-title,#score-controls #clear{font-size:12px;min-height:34px;padding:4px}
 #score-controls .instrument-control select{font-size:12px}
 #score-controls .speed-control{gap:2px;padding:2px}
 #score-controls .speed-control button{width:22px;height:22px}
 #score-controls .speed-control #bpm{width:28px;font-size:12px}
 #score-controls .grid-controls button,#score-controls .grid-controls select#quantization{height:34px;min-height:34px}
 #score-controls .meter-control select{font-size:14px;padding:4px}
}

/* Vertical retains the original control locations. */
.panel-heading[hidden],.orbit-tools[hidden]{display:none!important}
body:not(.horizontal-layout) #score-controls:empty{display:none}
/* FREE interface: controls stay below the score, independent of orientation. */
[hidden]{display:none!important}
#score-controls,.horizontal-layout #score-controls{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;gap:8px}
#score-controls .grid-controls{grid-column:1;grid-row:1}
#score-controls .speed-control{grid-column:2;grid-row:1}
#score-controls #clear{grid-column:3;grid-row:1}
#score-controls #clear-pattern{grid-column:4;grid-row:1;font-size:14px;padding:6px;min-width:0}
#meter-display{background:#fff;color:#111;border:0;border-radius:4px;font-size:16px;font-weight:600;padding:2px 4px;cursor:default;line-height:1.2}
#meter-display:hover{background:#fff;border:0}
.score-instrument{display:block;width:100%;height:36px;padding:0 2px;border:0;border-radius:4px;background:transparent;color:#22272c;font:600 16px Kalinga,Arial,sans-serif;text-align:left;white-space:nowrap}
.score-instrument[aria-pressed=true]{background:#eef1f3;box-shadow:inset 3px 0 #22272c;padding-left:5px}
.score-instrument:disabled{opacity:1}
.score-row.inactive-track{opacity:.38}
.score-row:focus-within{opacity:1}
.playback-dot.hit-active{fill:#fff;filter:drop-shadow(0 0 6px #fff)}
/* Set this attribute on the published edition to hide local development actions. */
body[data-distribution="public"] .file-actions{display:none}
@media(max-width:450px),(orientation:landscape) and (max-height:600px){
 #score-controls,.horizontal-layout #score-controls{gap:4px;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,.9fr) minmax(0,1fr)}
 #score-controls #clear,#score-controls #clear-pattern{font-size:11px;padding:4px;min-height:34px}
}
/* Exercise library: additive toolbar and shared, responsive local dialog. */
.exercise-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;margin:8px 0 12px}
.exercise-toolbar button{background:#fff;color:#22272c;border:1px solid #ccd3d7;padding:7px 12px;font-size:13px}
.exercise-toolbar button:hover{background:#eef2f4;border-color:#81929b}
#compatibility-note{color:#58636b;font-size:12px;line-height:1.5;margin:8px 0}
#exercise-dialog{color-scheme:light;background:#fff;color:#22272c;border:1px solid #ccd3d7;border-radius:14px;padding:22px;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 20px 80px #0008}
#exercise-dialog::backdrop{background:#020c16aa}
#exercise-dialog button{color:#22272c;background:#f4f6f7;border-color:#cbd3d8;font-size:13px;padding:8px 11px}
#exercise-dialog button:hover{background:#e4ebef}
#exercise-dialog button[aria-pressed=true]{background:#173647;color:#fff;border-color:#173647}
.exercise-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.exercise-dialog-heading h2{font-size:20px}
.exercise-storage-notice{font-size:12px;line-height:1.5;color:#596771;margin:14px 0 18px}
.exercise-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
#exercise-save-form{display:flex;flex-direction:column;gap:10px;align-items:stretch}
#exercise-dialog input{background:#fff;color:#22272c;border:1px solid #aab8c1;border-radius:6px;padding:10px;width:100%;font-size:16px}
#exercise-dialog label{display:block;font-size:14px;line-height:1.5}
#exercise-list{list-style:none;margin:0;padding:0}
#exercise-list li{padding:14px 0;border-bottom:1px solid #e3e8eb;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
#exercise-list strong{overflow-wrap:anywhere;flex:1 1 160px;font-size:15px}
.exercise-row-actions{display:flex;flex-wrap:wrap;gap:6px}
#exercise-decision{margin-top:14px;padding:14px;background:#f1f5f7;border:1px solid #cbd6dd;border-radius:8px}
#exercise-decision p{margin:0 0 12px;line-height:1.5;font-size:14px;overflow-wrap:anywhere}
#exercise-decision button{margin:3px}
#exercise-decision form{display:flex;flex-wrap:wrap;gap:8px}
#exercise-decision label{width:100%}
#exercise-message{font-size:13px;line-height:1.5;color:#29536b;overflow-wrap:anywhere}
#exercise-message:empty{display:none}
@media(max-width:450px){#exercise-dialog{padding:16px}.exercise-toolbar{gap:6px}.exercise-toolbar button{padding:7px 10px}}
/* The whole staff selects its instrument; mute remains an independent action. */
body:not(.playing) .score-row{cursor:pointer}
.playing .score-row{cursor:default}
.exercise-toolbar #save-exercise,.exercise-toolbar #my-exercises{display:inline-grid;place-items:center;width:40px;height:38px;padding:8px;flex:0 0 auto}
.exercise-toolbar svg{display:block;pointer-events:none}

/* A readable score per measure, with touch scrolling independent of the controls. */
#timeline{overflow-x:auto;overscroll-behavior-x:contain;max-width:100%;scrollbar-width:thin}
.measure-strip{display:flex;gap:10px;align-items:flex-start}
.measure-card{flex:0 0 100%;min-width:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#fff}
.measure-card.active-measure{border-color:#00a5b9}
.measure-select{display:block;width:100%;padding:5px 10px;border:0;border-radius:0;color:#243946;background:#edf3f5;text-align:left;font-size:12px}
.measure-select[aria-pressed=true]{background:#d5f2f5;font-weight:700}
.measure-select:disabled{opacity:1}
.measure-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 8px;font-size:12px}
.measure-toolbar button{padding:5px 10px;font-size:12px}
.hide-track-mutes .score-mute{display:none!important}
.measure-card .score{display:block;width:100%}

/* Each gesture settles on one complete measure. */
#timeline{scroll-snap-type:x mandatory}
.measure-strip{gap:0}
.measure-card{scroll-snap-align:start;scroll-snap-stop:always}
.score-instrument:hover:not(:disabled){background:transparent;border-color:transparent}
.score-instrument[aria-pressed=true]:hover:not(:disabled){background:#eef1f3}

/* Instrument text remains plain; hover highlights its entire staff. */
.score-row:hover{opacity:1}
.score-instrument,.score-instrument[aria-pressed=true],.score-instrument:hover:not(:disabled),.score-instrument[aria-pressed=true]:hover:not(:disabled){background:transparent;box-shadow:none;border:0;padding:0 2px;border-radius:0}
.sector:focus:not(:focus-visible){outline:none}

/* Center instrument labels in the space before the staff. */
.hide-track-mutes .score-label-area{width:90px}
.score-instrument{text-align:center}

/* Shared interface switch; normal theme remains unchanged. */
.kids header .version{display:none}
/* KIDS theme tokens, scoped to this mode. */
body.kids{--kids-sky:#70a9ff;--kids-sky-deep:#5382ed;--kids-lime:#acff35;--kids-sector:#80b944;--kids-coral:#ff959d;--kids-white:#fff;--kids-play:#159b49;--kids-stop:#db2635;--kids-ink:#34445a;--kids-muted:#7e8b9c;--kids-glow:#e3ffac;--ink:var(--kids-ink);--accent:var(--kids-lime);background:linear-gradient(145deg,var(--kids-sky),var(--kids-sky-deep));color:var(--kids-ink);min-height:100dvh}
.kids header{background:transparent;border-color:var(--kids-white);color:var(--kids-white)}
.kids .brand-mark{color:var(--kids-lime)}
.kids .circle-panel{background:transparent;border-color:transparent;box-shadow:none}
.kids .timeline-panel{background:var(--kids-white);border-color:var(--kids-white)}
.kids .sector{fill:var(--kids-sector);stroke:var(--kids-white);stroke-width:2;opacity:.4}
.kids .sector[aria-pressed=true]{fill:var(--kids-lime);opacity:.9}
.kids .sector.blocked{opacity:.4;cursor:default}
.kids .sector.blocked[aria-pressed=true]{opacity:.9}
.kids .sector.hit-active{fill:var(--kids-glow);opacity:1;filter:drop-shadow(0 0 9px var(--kids-lime))}
.kids .sector-label{fill:var(--kids-white)}
.kids .sector-label.active{fill:#000}
.kids .sector-label.blocked{opacity:1}
.kids .beat-number{fill:var(--kids-white)}
.kids #circle-container line{stroke:var(--kids-white)}
.kids-planet{fill:var(--kids-coral)}
.kids-note-dot{fill:var(--kids-lime)}
.kids-note-dot.hit-active{fill:var(--kids-white);filter:drop-shadow(0 0 6px var(--kids-lime))}
.kids-satellite{fill:var(--kids-lime);stroke:var(--kids-white);stroke-width:2;filter:drop-shadow(0 0 8px var(--kids-lime))}
.kids #transport-toggle{background:var(--kids-play);color:var(--kids-white);border-color:var(--kids-white)}
.kids.playing #transport-toggle{background:var(--kids-stop)}
.kids #transport-toggle svg{fill:var(--kids-white)}
.kids .score-instrument{font-size:12px;color:var(--kids-ink)}
.kids .score-row.metronome-muted,.kids .score-row.metronome-muted:hover{opacity:.3}
.kids .score-row{opacity:1}
.kids #score-controls .speed-control,.kids button,.kids select,.kids #bpm{color:var(--kids-ink);background:var(--kids-white);border-color:var(--kids-white)}
.kids #score-controls .speed-control button{background:var(--kids-sky);color:var(--kids-white)}
.kids #save-status,.kids #notice{color:var(--kids-ink)}
.kids .measure-card.active-measure{border-color:var(--kids-sector)}
.kids .measure-select[aria-pressed=true]{background:var(--kids-glow)}
@media(max-width:600px){header{gap:8px}.kids .brand{font-size:11px;letter-spacing:1px}}

/* KIDS: one coral circle, exterior beat labels and satellite-only transport. */
.kids .sector,.kids .sector[aria-pressed=true]{fill:var(--kids-coral)}
.kids .sector.hit-active{fill:var(--kids-white);filter:drop-shadow(0 0 9px var(--kids-coral))}
.kids #circular-playhead{display:none}
/* Shared transport helpers, intentionally outside the circular editing controls. */
#metronome-toggle[aria-pressed=true]{border-color:#00c4da;color:#59ded2}

/* Lesson UI is an optional KIDS layer; the score/editor are not replaced. */
.kids #open-lessons{font-weight:600;background:var(--kids-glow);border-color:var(--kids-sky)}
#kids-lessons{width:min(920px,calc(100vw - 24px));max-height:90dvh;padding:20px;border:0;border-radius:20px;color:#34445a;background:#f6faff}
#kids-lessons::backdrop{background:#172c4c99}
.lesson-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lesson-language{display:flex;gap:12px;align-items:center;margin:12px 0}
.lesson-layout{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,2fr);gap:20px}
.lesson-layout nav{display:flex;flex-direction:column;gap:10px}
#kids-lessons button{border:1px solid #9bb9e6;white-space:normal}
.lesson-layout nav button{text-align:left;line-height:1.5}
.lesson-layout nav button[aria-current=true]{background:#e3ffac}
.lesson-detail{min-width:0}.lesson-detail h3{margin-top:0}
.lesson-detail video{display:block;width:100%;max-height:45dvh;border-radius:12px;background:#14243b}
.lesson-detail video[hidden]{display:none}
.lesson-content{line-height:1.65}.lesson-state{font-weight:600}.lesson-video-status{font-size:14px}
.lesson-message{color:#96301d}.lesson-message:empty{display:none}
.lesson-exercises{margin-top:20px;display:flex;flex-direction:column;gap:8px}
@media(max-width:600px){#kids-lessons{padding:14px}.lesson-layout{grid-template-columns:1fr}.lesson-layout nav{flex-direction:row;overflow-x:auto;padding-bottom:6px}.lesson-layout nav button{min-width:155px;font-size:12px}.lesson-language{flex-wrap:wrap}.lesson-detail video{max-height:35dvh}}
/* GAME is a clean KIDS use mode; the editor DOM and its state stay intact. */
body.game-active>header,body.game-active main>:not(#kids-game){display:none!important}
body.game-active main{display:block;max-width:1100px;padding:14px;margin:auto}
#kids-game[hidden]{display:none!important}
.game-heading{display:flex;gap:12px;align-items:center;justify-content:space-between}
.game-heading strong{font-size:15px;text-align:center}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.game-circle-stage{position:relative;min-width:0}
#game-circle>svg{display:block;width:100%;height:auto}
#game-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;width:90px;height:90px;padding:8px;font-weight:700;touch-action:none;user-select:none}
.game-reading{min-width:0}#game-score{background:#fff;border-radius:14px;padding:8px}#game-score>svg{width:100%;height:auto;display:block}
.game-score-label{display:block;text-align:center;font-size:12px;font-weight:600;line-height:36px}
#game-score .game-next{opacity:.4}
#game-indicator{font-size:15px;font-weight:700;text-align:center}
#game-feedback,#game-encouragement,#game-best,#game-storage-error{text-align:center;min-height:22px}
#game-storage-error:empty{display:none}
#game-feedback{font-weight:700}#game-storage-error{color:#9b1221}
@media(orientation:portrait),(max-width:600px){.game-layout{grid-template-columns:1fr;gap:0}.game-circle-stage{max-width:440px;width:min(100%,45dvh);margin:auto}.game-heading strong{font-size:12px}.game-heading button{padding:9px;font-size:12px}#game-start{width:66px;height:66px;font-size:11px}#game-indicator{font-size:13px;margin:5px 0}#game-best,#game-feedback,#game-encouragement{margin:6px 0;font-size:13px}.game-reading{width:100%;max-width:600px;margin:auto}}
@media(orientation:landscape) and (max-height:550px){.game-heading strong{font-size:12px}.game-heading button{padding:6px;font-size:12px}.game-circle-stage{max-width:75dvh;margin:auto}.game-layout{gap:6px}#game-start{width:60px;height:60px;font-size:10px}#game-indicator,#game-best,#game-feedback,#game-encouragement{font-size:12px;margin:4px 0}}

.kids #game-start{background:var(--kids-play);color:white;font-size:30px;border:2px solid white}
.kids .game-running #game-start{background:var(--kids-stop)}
#game-tap{display:block;margin:10px auto;min-width:160px;min-height:52px;touch-action:none;user-select:none;font-weight:600}

.kids #game-reset{display:block;margin:6px auto;padding:5px 12px;font-size:11px;background:transparent;border:1px solid currentColor;opacity:.75}
.kids #game-reset:hover,.kids #game-reset:focus-visible{opacity:1}

/* Phase policy hides temporal aids, while retaining layout and transport. */
#kids-game[data-circle="false"] #game-circle{visibility:hidden}
#kids-game[data-cursor="false"] #linear-playhead{display:none}
/* GAME visuals only. All contexts use game-visuals.js and the same artwork. */
#kids-game{position:relative}
.game-transition{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:20;border-radius:12px}
#kids-game[data-planet-visible="false"] .game-planet,
#kids-game[data-planet-figures-visible="false"] .game-planet-figures,
#kids-game[data-crosshair-visible="false"] .game-cross,
#kids-game[data-satellite-visible="false"] #game-satellite,
#kids-game[data-floating-figures-visible="false"] .game-floating,
#kids-game[data-score-visible="false"] #game-score,
#kids-game[data-score-cursor-visible="false"] #linear-playhead{display:none}
.game-note{pointer-events:none;color:#22272c}
.game-burst{opacity:0;fill:white;pointer-events:none}
.game-note[data-context="current"] .game-burst{fill:#a56c1f}
.game-note[data-effect="explosion"] .game-symbol{animation:game-explode .1s linear both}
.game-note[data-effect="explosion"] .game-burst{animation:game-burst var(--burst-time,.85s) linear both}
.game-note[data-effect="explosion"] .game-flare{animation:game-flare .18s ease-out both}
.game-note[data-effect="explosion"] .game-fragment{animation:game-fragment var(--fragment-time) cubic-bezier(.1,.6,.3,1) both}
.game-note[data-effect="white-fade"] .game-symbol{animation:game-white-fade .65s ease-out both}
.game-note[data-effect="white-stay"] .game-symbol{animation:game-white-stay .65s ease-out both}
.game-floating{animation:game-drift var(--float-duration) ease-in-out var(--float-delay) infinite alternate}
#kids-game:not(.game-running) .game-floating{animation-play-state:paused}
#kids-game:not(.game-running) .game-note *{animation-play-state:paused}
@keyframes game-drift{0%{transform:translate(-3px,2px)}37%{transform:translate(4px,-2px)}73%{transform:translate(-1px,-5px)}100%{transform:translate(3px,4px)}}
@keyframes game-explode{0%{opacity:1}100%{opacity:0}}
@keyframes game-burst{0%,95%{opacity:1}100%{opacity:0}}
@keyframes game-flare{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.8);opacity:0}}
@keyframes game-fragment{0%{opacity:1}65%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--spin));opacity:0}}
@keyframes game-white-fade{0%,25%{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 4px white)}100%{opacity:0;filter:brightness(0) invert(1) drop-shadow(0 0 7px white)}}
@keyframes game-white-stay{0%,25%{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 4px white)}100%{opacity:1;filter:none}}
@media(prefers-reduced-motion:reduce){.game-floating{animation:none}.game-note[data-effect="explosion"] .game-symbol{animation:game-white-fade .3s both}.game-fragment{display:none}}
#kids-game:not([data-execution-points-visible="true"]) .game-execution-points{display:none}

/* Decorative reserve and arrivals never participate in input or feedback. */
#kids-game { position:relative; isolation:isolate; }
.game-stars { position:absolute; inset:0; z-index:-1; pointer-events:none; background-size:cover; }
#game-reserve,#game-arrivals { pointer-events:none; }
#kids-game[data-phase="1"] .game-floating { display:none; }
#kids-game:not([data-phase="1"]) #game-reserve,#kids-game:not([data-phase="1"]) #game-arrivals { display:none; }

.game-penalty-global,.game-penalty-local { fill:#ff152b; opacity:.55; }
.game-penalty-global { display:none; }
#kids-game[data-measure-penalty="true"] .game-penalty-global { display:block; }
#kids-game[data-measure-penalty="true"] .game-penalty-local { display:none; }
.game-note[data-effect="blocked-hit"] .game-symbol { opacity:.55; }
.game-pair-beam { transition:opacity .1s; }
[data-game-pair]:not(:has(.game-note:not([data-effect="explosion"]))) .game-pair-beam { opacity:0; }
#game-penalty { visibility:visible; }

#lesson-development{position:fixed;bottom:8px;right:8px;background:#231b12;color:#fff;border:1px solid #715938;border-radius:10px;z-index:50;font-size:12px;max-width:calc(100vw - 16px)}#lesson-development summary{cursor:pointer;padding:8px 12px;min-height:32px;box-sizing:border-box}#lesson-development[open]{width:340px}#lesson-development .lesson-development-controls{padding:8px;max-height:45dvh;overflow:auto}#lesson-development strong{display:block;margin-bottom:6px}#lesson-development button,#lesson-development select{margin:3px;padding:6px}#game-completed{max-width:480px;border-radius:16px;padding:24px}#game-completed button{display:block;margin:12px 0;padding:12px}

#game-session-stats{padding:12px;border:1px solid #ffffff55;border-radius:12px;margin-top:12px}#game-session-stats h3{font-size:14px;margin:0 0 8px}#game-session-stats[hidden],.game-running #game-indicator,.game-running #game-best,.game-running #game-encouragement{display:none}#game-completed h2:focus{outline:none}

.game-note.rest-error{color:#ff152b;filter:drop-shadow(0 0 3px #ff152b)}
/* KIDS episode menu: thumbnail, theory/GAME and real results share each row. */
#kids-lessons.kids-episode-menu{width:min(1040px,calc(100vw - 20px));max-height:94dvh;padding:18px;background:linear-gradient(150deg,#365da4,#183563);color:#f4faff;box-sizing:border-box}
.kids-episode-list{display:flex;flex-direction:column;gap:10px}
.kids-episode-row{display:grid;grid-template-columns:minmax(100px,.85fr) minmax(180px,2fr) minmax(130px,1fr);gap:12px;align-items:stretch;border:1px solid #a3ceff55;border-radius:14px;padding:9px;background:#b2d7ff12}
#kids-lessons .episode-thumbnail{position:relative;padding:0;overflow:hidden;border:1px solid #b1d8ff;border-radius:9px;background:#153156;min-height:94px;color:#fff}
.episode-thumbnail img{display:block;width:100%;height:100%;min-height:94px;max-height:118px;object-fit:cover}
.episode-thumbnail[data-watched=true] img{opacity:.38}
.episode-video-state{position:absolute;bottom:0;left:0;right:0;padding:5px;background:#122d56c9;color:#fff;font-size:11px}
#kids-lessons .episode-concept{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;padding:10px 12px;text-align:left;color:#fff;background:#84b4f424;border:1px solid #94c9ff80;border-radius:10px;white-space:normal}
.episode-concept strong{font-size:13px;line-height:1.3}.episode-concept span{font-size:12px;line-height:1.35}
#kids-lessons .episode-concept[data-state=completed]{border-color:#a5f1be;background:#508b683d}
#kids-lessons .episode-concept:disabled{opacity:.48;cursor:default}
.episode-progress{display:flex;flex-direction:column;justify-content:center;gap:5px;font-size:12px;line-height:1.4}.episode-progress p{margin:0;color:#d4e7ff}.episode-progress strong{font-size:12px}
#kids-lessons .lesson-language{font-size:12px}#kids-lessons .lesson-message{color:#ffc2bc}
#kids-video-view{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#061324;color:#fff;overflow:hidden}
#kids-video-view::backdrop{background:#061324}#kids-video-view video{display:block;width:100%;height:100%;object-fit:contain;background:#061324}
#kids-video-view>[data-close]{position:absolute;right:12px;top:12px;z-index:2;border:1px solid #fff9;border-radius:50%;width:40px;height:40px;padding:0;background:#152c56c9;color:white;font-size:22px}
#kids-video-view>p{position:absolute;bottom:55px;left:20px;right:20px;text-align:center;pointer-events:none}
#kids-lesson-content{width:min(920px,calc(100vw - 24px));max-height:90dvh;padding:20px;border:0;border-radius:20px;color:#34445a;background:#f6faff}
.kids .meter-control{grid-column:1/-1;justify-content:center}
@media(max-width:600px){#kids-lessons.kids-episode-menu{padding:10px}.kids-episode-row{grid-template-columns:82px minmax(0,1.6fr) minmax(75px,.85fr);gap:7px;padding:7px}.episode-thumbnail img{min-height:110px}.episode-concept strong{font-size:11px}.episode-concept span,.episode-progress,.episode-progress strong{font-size:10px}#kids-lessons .episode-concept{padding:7px;gap:5px}}
#game-meteor-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}

/* Full-screen route, using the existing episode dialog. */
#kids-lessons.kids-episode-menu{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0;padding:clamp(12px,3vw,32px);overflow:auto;background:radial-gradient(circle at 15% 15%,#91c5ff35,transparent 45%),linear-gradient(150deg,#365da4,#183563)}
#kids-lessons .lesson-heading{position:sticky;top:0;z-index:2;background:#24487c;padding:10px;border-radius:10px;gap:12px}
#kids-lessons .lesson-heading h2{margin-right:auto;min-width:0;font-size:clamp(1rem,3vw,1.5rem)}#kids-lessons [data-editor]{background:#fff;color:#183563;font-weight:700}
.game-transport-row{display:flex;justify-content:center;align-items:center;gap:12px;margin:12px 0}
.kids .game-transport-row #game-start{position:static;transform:none;flex:0 0 54px;width:54px;height:54px;font-size:24px}
.game-transport-row #game-tap{margin:0;min-width:0;min-height:54px;font-size:clamp(12px,3vw,16px)}
#kids-game[data-phase="2"] #game-reserve{display:block}
#game-meteor-sky{z-index:-1;opacity:.8} .game-heading,.game-reading{position:relative}
@media(max-width:450px){.kids-episode-row{grid-template-columns:82px minmax(0,1fr)}.episode-progress{grid-column:1/-1}.episode-thumbnail img{min-height:90px}.episode-concept strong{font-size:13px}.episode-concept span,.episode-progress,.episode-progress strong{font-size:12px}}

@media(max-width:520px){#kids-lessons .lesson-heading{flex-wrap:wrap}#kids-lessons .lesson-heading h2{flex:0 0 100%;margin:0}#kids-lessons .lesson-heading [data-editor]{margin-left:auto}}
/* The image and transparent targets always share the same, uncropped box. */
body.home-shell{margin:0;padding:0;width:100%;max-width:none;height:100dvh;overflow:hidden;background:#06152e;color:#fff}
.home-cover{position:fixed;inset:0;display:grid;place-items:center;background:#06152e}
.home-cover[hidden],.application-frame[hidden]{display:none!important}
.cover-art{position:relative;flex:none}
.cover-art picture,.cover-art img{display:block;width:100%;height:100%}
.cover-art img{object-fit:contain}
.cover-art .cover-target{position:absolute;transform:none;padding:0;margin:0;border:0;background:transparent;box-shadow:none;cursor:pointer;min-width:0;min-height:0;touch-action:manipulation}
.cover-art .cover-target:hover{background:transparent;box-shadow:0 0 20px #72d8ff66}
.cover-art .cover-target:focus-visible{outline:4px solid #fff;outline-offset:5px;box-shadow:0 0 16px #00bfff}
.home-loading{position:absolute;bottom:2%;padding:8px 16px;background:#00152be6;border-radius:8px}
.application-frame{position:fixed;inset:0;border:0;width:100%;height:100dvh;background:#07131f}
#exit-home{margin-left:auto}

body.booting{visibility:hidden}

/* October 2026: non-blocking progress and accessible musical pulse. */
.game-score-wrap{position:relative}
#game-pulse{position:absolute;left:9px;top:9px;width:9px;height:9px;border-radius:50%;background:#516478;z-index:2;pointer-events:none}
#game-pulse.lit{background:#0086c9;box-shadow:0 0 0 3px #7bd7ff80}
#game-tempo-message{height:4.5em;margin:5px 0;box-sizing:border-box;padding:8px;text-align:center;color:#fff;background:#124b82;border-radius:10px;opacity:0;pointer-events:none;font-size:clamp(12px,2.5vw,16px)}
#game-tempo-message.visible{opacity:1;animation:tempo-glow 1.8s ease-in-out infinite alternate}
@keyframes tempo-glow{to{box-shadow:0 0 15px #3baaff80}}
@media(prefers-reduced-motion:reduce){#game-tempo-message.visible{animation:none}}
.kids .game-transport-row #game-reset{margin:0 12px 0 0;flex:0 0 auto;min-height:44px}
#game-completed{background:linear-gradient(145deg,#174c82,#081d43);color:#fff;border:1px solid #65b7f1}
#game-completed button{color:#fff;border-color:#75b4e1}
#kids-game[data-fresh="true"] .game-planet-figures,#kids-game[data-fresh="true"] .game-execution-points,#kids-game[data-fresh="true"] #game-arrivals,#kids-game[data-fresh="true"] #game-penalty{visibility:hidden}
#score-controls #clear{order:99;margin-left:auto}

#game-completed button{background:#205e97;color:#fff}#game-completed button:hover{background:#2e77b8}
.kids .game-transport-row #game-reset{color:#173b68;opacity:1;background:#ffffffa6;border-color:#38658b}

#score-controls #clear{grid-column:4;margin-left:0}#score-controls #clear-pattern{grid-column:3}

.episode-progress progress{width:100%;height:12px;border:0;border-radius:6px;overflow:hidden;background:#142f54;color:#83d9ff;accent-color:#83d9ff}
.episode-progress progress::-webkit-progress-bar{background:#142f54}
.episode-progress progress::-webkit-progress-value{background:#83d9ff;border-radius:6px}
.episode-progress progress::-moz-progress-bar{background:#83d9ff;border-radius:6px}
.episode-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.episode-counts span{display:flex;flex-direction:column;gap:3px}.episode-counts b{font-size:16px}.episode-counts small{font-size:9px;overflow-wrap:anywhere}
.episode-progress .episode-tempo-level{font-size:clamp(17px,2vw,23px);color:#a8e6ff;overflow-wrap:anywhere}
.episode-progress>small{font-size:9px;color:#c4d6ec}

.cover-spark{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cover-spark-point{fill:none;stroke:#edfdff;stroke-width:4;stroke-linecap:round;stroke-dasharray:.65 99.35;filter:drop-shadow(0 0 4px #65cfff);animation:cover-orbit 8s linear infinite}
@keyframes cover-orbit{to{stroke-dashoffset:-100}}
@media(prefers-reduced-motion:reduce){.cover-spark-point{animation:none}}

/* Cover and editor refinements, October 2026. */
.cover-spark-point{stroke-width:6;stroke-dasharray:.9 99.1;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #56bfff) drop-shadow(-3px 0 3px #80dbff)}
.cover-meteors{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cover-meteor{position:absolute;width:22px;height:19px;left:0;top:2%;opacity:0;background:radial-gradient(circle at 65% 35%,#99dfff 0 4%,#294968 15%,#050e1d 45%,#3b84b6 65%,#b3eaff 75%,#0b1e31 82%);clip-path:polygon(22% 0,72% 5%,100% 35%,83% 83%,43% 100%,0 66%,8% 25%);animation:cover-meteor-flight 23s linear infinite;--dy:3vh}
.cover-meteor:nth-child(2){top:81%;width:30px;height:25px;animation-duration:31s;animation-delay:9s;--dy:9vh}
.cover-meteor:nth-child(3){top:4%;width:15px;height:14px;animation-duration:29s;animation-delay:17s;--dy:0vh}
@keyframes cover-meteor-flight{0%,72%{opacity:0;transform:translate(-60px,0) rotate(0deg)}73%{opacity:.85}97%{opacity:.85}100%{opacity:0;transform:translate(calc(100vw + 60px),var(--dy)) rotate(160deg)}}
.cover-paused .cover-meteor,.cover-paused .cover-spark-point{animation-play-state:paused}
.home-cover[hidden] .cover-meteor,.home-cover[hidden] .cover-spark-point{animation-play-state:paused}
.lesson-language{display:flex;gap:8px;align-items:center}.lesson-language button{padding:9px;min-width:46px;min-height:44px}.lesson-language img{display:block}.lesson-language button[aria-pressed="true"]{border-color:#7dd8ff;background:#173e65;box-shadow:0 0 0 2px #7dd8ff}
#kids-lessons-title{font-family:"Curlz MT","Comic Sans MS",cursive;font-size:clamp(19px,3.5vw,30px);line-height:1.2;overflow-wrap:anywhere;min-width:0}
#kids-satellite{transform-origin:280px 280px;will-change:transform;transition:none}.editor-auto-rest{fill:#000!important;pointer-events:none}
@media(prefers-reduced-motion:reduce){.cover-meteor{display:none}}

/* Compact menu controls and occasional fast shooting stars. */
#kids-lessons .lesson-heading{flex-wrap:nowrap;gap:8px;padding:8px}
#kids-lessons .lesson-heading .lesson-language{margin:0 auto 0 0;flex-wrap:nowrap;gap:5px}
#kids-lessons .lesson-heading [data-editor]{margin-left:0;padding:10px;font-size:13px}
#kids-lessons .lesson-heading [data-close]{padding:10px;min-width:40px}
.cover-meteor{width:85px;height:2px;clip-path:none;border-radius:50%;background:linear-gradient(90deg,transparent,#83cfff 70%,#fff);box-shadow:2px 0 5px #b7eeff;animation-name:cover-shooting-star;--dy:3vh}
.cover-meteor::after{content:'';position:absolute;right:0;top:-1px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #c4f2ff}
.cover-meteor:nth-child(2){width:110px;height:2px;--dy:5vh}
.cover-meteor:nth-child(3){width:65px;height:2px;--dy:0vh}
@keyframes cover-shooting-star{0%,94%{opacity:0;transform:translate(-120px,0)}94.1%{opacity:1}98%{opacity:1}100%{opacity:0;transform:translate(calc(100vw + 120px),var(--dy))}}

.cover-meteor.cover-random-star{animation-name:cover-random-flight;animation-delay:0s;animation-iteration-count:1;animation-fill-mode:both}
@keyframes cover-random-flight{from{opacity:1;transform:translate(-120px,0)}to{opacity:1;transform:translate(calc(100vw + 120px),var(--dy))}}