/* RC176: grade-scoped arts and music reinforcement, three presentation modes. */
.sk176-studio{--sk170-card:#ffffff;--sk170-soft:#edf5fc;--sk170-text:#19334b;--sk170-edge:#b5cfe6;--sk170-accent:#256487;box-sizing:border-box;min-width:0;max-width:100%;margin:22px 0;padding:clamp(15px,2.8vw,27px);border:1px solid var(--sk170-edge,#b5cfe6);border-radius:22px;background:var(--sk170-card,#f8fbff);color:var(--sk170-text,#19334b);overflow-wrap:anywhere}
.sk176-studio *{box-sizing:border-box}
.sk176-studio header>span{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--sk170-accent,#256487)}
.sk176-studio header h3{margin:8px 0;font-size:clamp(21px,3vw,27px);line-height:1.28;color:inherit}
.sk176-studio header p{margin:8px 0;line-height:1.6;color:inherit}
.sk176-guide{background:var(--sk170-soft,#edf5fc);border:1px solid var(--sk170-edge,#b5cfe6);padding:12px 16px;border-radius:14px;margin:15px 0}
.sk176-guide ol{margin:0;padding-left:25px;line-height:1.75}.sk176-guide li{margin:4px 0}
.sk176-board{min-width:0;margin:18px 0;padding:14px;border:1px solid var(--sk170-edge,#b5cfe6);border-radius:17px;background:var(--sk170-soft,#edf5fc)}
.sk176-board h4{font-size:18px;margin:0 0 10px;color:inherit}
.sk176-scene{width:100%;min-width:0;overflow:hidden;border:1px solid #59819e;border-radius:16px;background:#193753}
.sk176-scene svg{display:block;width:100%;height:auto;max-height:230px;aspect-ratio:520/190}
.sk176-options{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.sk176-options button,.sk176-round button{cursor:pointer;border-radius:12px;border:1px solid var(--sk170-edge,#9fbdd4);min-height:48px;padding:11px 14px;font:inherit;font-weight:700;line-height:1.3;touch-action:manipulation}
.sk176-options button{background:var(--sk170-card,#fff);color:var(--sk170-text,#19334b)}
.sk176-options button[aria-pressed=true]{border-color:#168ba8;box-shadow:inset 0 0 0 2px #168ba8}
.sk176-options .sk176-play{background:#12688a;color:#fff;border-color:#12688a}
.sk176-board-feedback{display:block;background:var(--sk170-card,#fff);color:var(--sk170-text,#19334b);border-radius:12px;padding:12px;line-height:1.65;min-height:48px;border:1px solid var(--sk170-edge,#b5cfe6)}
.sk176-caption-note{margin:9px 0 0;font-size:13px;line-height:1.55;color:inherit;opacity:.86}
.sk176-round{min-width:0;margin:15px 0;padding:16px;border:1px solid var(--sk170-edge,#b5cfe6);border-radius:15px;background:var(--sk170-soft,#edf5fc)}
.sk176-round[hidden],.sk176-round button[hidden]{display:none!important}
.sk176-round h4{margin:0 0 12px;font-size:17px;line-height:1.4;color:inherit}
.sk176-round fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:9px}
.sk176-round legend{display:block;width:100%;padding:0;margin:0 0 11px;font-size:16px;font-weight:700;line-height:1.5;color:inherit}
.sk176-round label{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--sk170-edge,#b5cfe6);min-width:0;min-height:48px;border-radius:11px;background:var(--sk170-card,#fff);color:var(--sk170-text,#19334b);cursor:pointer}
.sk176-round label span{min-width:0;overflow-wrap:anywhere}
.sk176-round label:has(input:checked){outline:2px solid #248aac;outline-offset:1px}
.sk176-round label input{flex:none;width:18px;height:18px;accent-color:#168ba8}
.sk176-round button[data-sk176-evaluate]{margin-top:13px;background:#126e98;color:#fff;border-color:#126e98}
.sk176-round .sk176-next,.sk176-round .sk176-restart{margin-top:10px;margin-left:8px;background:#167a76;color:#fff;border-color:#167a76}
.sk176-feedback{margin:13px 0 0;padding:12px 13px;background:var(--sk170-card,#fff);border:1px solid var(--sk170-edge,#b5cfe6);border-radius:11px;line-height:1.6;color:var(--sk170-text,#19334b)}
.sk176-feedback[data-state=correct]{background:#e1f7ec;color:#075844;border-color:#6fbfa4;font-weight:700}
.sk176-feedback[data-state=review]{background:#fff2dc;color:#754518;border-color:#dab66e;font-weight:680}
.sk176-activity{padding:13px 15px;margin:18px 0 10px;background:var(--sk170-soft,#edf5fc);border-inline-start:4px solid #208ca2;border-radius:9px;color:inherit;line-height:1.65}
.sk176-privacy{font-size:12px;line-height:1.6;color:inherit;opacity:.8;margin:0}

:is(html.lessonsky-dark body,body.lessonsky-dark) .sk176-studio{--sk170-card:#1e3956;--sk170-soft:#294969;--sk170-text:#f3f8ff;--sk170-edge:#4d6e91;--sk170-accent:#afd9fb;background:#142840;color:#f3f8ff}
:is(html.lessonsky-dim body,body.lessonsky-dim) .sk176-studio{--sk170-card:#304d63;--sk170-soft:#3c607b;--sk170-text:#f4f8ff;--sk170-edge:#66839b;--sk170-accent:#b7dfff;background:#23384d;color:#f4f8ff}
:is(html.lessonsky-dark body,body.lessonsky-dark,html.lessonsky-dim body,body.lessonsky-dim) .sk176-round .sk176-feedback[data-state=correct]{background:#194737;color:#c1f9e0;border-color:#529b7f}
:is(html.lessonsky-dark body,body.lessonsky-dark,html.lessonsky-dim body,body.lessonsky-dim) .sk176-round .sk176-feedback[data-state=review]{background:#4e351f;color:#ffdfb2;border-color:#ac874e}
:is(html.lessonsky-dark body,body.lessonsky-dark,html.lessonsky-dim body,body.lessonsky-dim) .sk176-options .sk176-play{background:#216c8b;color:#fff;border-color:#6baeca}
@media(max-width:640px){.sk176-studio{padding:15px}.sk176-round{padding:13px}.sk176-round button[data-sk176-evaluate],.sk176-round .sk176-next,.sk176-round .sk176-restart{display:block;width:100%;margin:10px 0 0}.sk176-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sk176-options .sk176-play{grid-column:1/-1}.sk176-options button{font-size:13px;padding:9px 6px}.sk176-scene svg{max-height:180px}}
@media(forced-colors:active){.sk176-options button[aria-pressed=true],.sk176-round label:has(input:checked){outline:2px solid Highlight}.sk176-scene{border:2px solid CanvasText}.sk176-round button,.sk176-options button{border:1px solid ButtonText}}
@media(prefers-reduced-motion:reduce){.sk176-studio *{animation:none!important;transition:none!important}}
