/* S03 HTML音频与随堂作答 · 仅作用于本页片段（.subjectiveTracks.s03） */
.subjectiveTracks.s03{
  --st-teal:#0b7775;--st-teal-2:#1aaaa1;--st-ink:#11283a;--st-muted:#526976;
  --st-line:#dbe6ea;--st-hover:#f2fbfa;--st-radius:12px;
  display:block;color:var(--st-ink);font-size:var(--yk-type-body);line-height:var(--yk-line-reading);min-width:0
}
:where(.subjectiveTracks.s03) *{box-sizing:border-box}
.subjectiveTracks.s03 h1,.subjectiveTracks.s03 h2,.subjectiveTracks.s03 h3,.subjectiveTracks.s03 p,.subjectiveTracks.s03 ul,.subjectiveTracks.s03 ol,.subjectiveTracks.s03 li{margin:0;padding:0}
:where(.subjectiveTracks.s03) ul,:where(.subjectiveTracks.s03) ol{list-style:none}
:where(.subjectiveTracks.s03) a{color:inherit;text-decoration:none}
:where(.subjectiveTracks.s03) svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
:where(.subjectiveTracks.s03) :where(:focus-visible){outline:2px solid var(--st-teal);outline-offset:2px;border-radius:6px}
.s03-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 公共页头 */
.st-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#526976;font-size:var(--yk-type-meta);line-height:1.5}
.st-crumb>a{color:#0b7775;font-weight:600}
.st-crumb>a:hover{text-decoration:underline}
.st-crumb>small{margin-left:auto;font-size:var(--yk-type-meta);color:#526976}
.st-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:14px}
.st-head-main{flex:1 1 260px;min-width:0}
.subjectiveTracks.s03 h1{font-size:var(--yk-type-page);line-height:var(--yk-line-heading);letter-spacing:normal;overflow-wrap:anywhere;font-weight:var(--yk-weight-page)}
.st-test-mark{display:inline-block;font-size:var(--yk-type-body);font-weight:var(--yk-weight-title);color:#0b7775;background:#e6f6f4;border:1px solid #cfeae7;border-radius:7px;padding:2px 8px;vertical-align:2px;white-space:nowrap}
.st-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.st-badge{display:inline-block;border:1px solid #cfeae7;background:#f2fbfa;color:#0b7775;border-radius:999px;padding:5px 14px;font-size:var(--yk-type-meta);font-weight:var(--yk-weight-title);max-width:100%;overflow-wrap:anywhere}
.st-badge-teal{background:#e6f6f4;border-color:#cfeae7}

/* 两栏 */
.s03-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:18px;margin-top:18px;align-items:start}
.st-panel{background:#fff;border:1px solid var(--st-line);border-radius:var(--st-radius);padding:16px 18px;min-width:0}
.s03-panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.subjectiveTracks.s03 .s03-panel-head h2{font-size:var(--yk-type-section);line-height:var(--yk-line-ui);margin-right:auto;min-width:0;font-weight:var(--yk-weight-title)}

/* 微课面板 */
.s03-slide{border:1px solid #dceceb;border-radius:11px;background:linear-gradient(180deg,#f8fdfd,#ffffff);padding:15px 16px}
.subjectiveTracks.s03 .s03-slide h3{font-size:var(--yk-type-card);line-height:var(--yk-line-ui);color:#0b5f5d;overflow-wrap:anywhere;font-weight:var(--yk-weight-title)}
.s03-slide-line{color:#4a5b6d;font-size:var(--yk-type-meta);margin-top:6px;overflow-wrap:anywhere}
.s03-flow{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:14px}
.s03-node{flex:1 1 calc((100% - 76px)/3);min-width:0;border:1px solid #dceceb;border-radius:10px;background:#fff;padding:11px 12px;display:flex;flex-direction:column;gap:3px}
.s03-node>b{font-size:var(--yk-type-meta);color:#0b7775;font-weight:var(--yk-weight-title)}
.s03-node>span{font-size:var(--yk-type-meta);color:#5c6b7d;overflow-wrap:anywhere}
.s03-arrow{display:grid;place-items:center;align-self:center;flex:0 0 auto;color:#1aaaa1;font-size:var(--yk-type-control);line-height:1}

/* 演示播放器（无真实音频） */
.s03-player{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px;border:1px solid var(--st-line);border-radius:11px;padding:10px 12px;background:#fff}
.s03-play{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border:0;border-radius:50%;background:linear-gradient(120deg,#0b7775,#1aaaa1);color:#fff;cursor:pointer}
.s03-play svg{width:17px;height:17px}
.s03-play .s03-ico-pause{display:none}
.s03-player.playing .s03-play .s03-ico-pause{display:block}
.s03-player.playing .s03-play .s03-ico-play{display:none}
.s03-time{display:inline-flex;align-items:center;gap:3px;font-size:var(--yk-type-meta);color:#526976;white-space:nowrap}
.s03-time b{color:#0b7775;font-size:var(--yk-type-meta);font-weight:var(--yk-weight-title)}
.s03-track{display:block;flex:1 1 120px;min-width:60px;height:7px;border-radius:999px;background:#e8f0f1;overflow:hidden}
.s03-track>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0b7775,#1aaaa1)}
.s03-chip{min-height:32px;padding:5px 11px;border:1px solid var(--st-line);background:#fff;color:#48596b;border-radius:999px;font-size:var(--yk-type-meta);font-weight:var(--yk-weight-title);cursor:pointer;white-space:nowrap}
.s03-chip:hover{background:var(--st-hover);border-color:#9ecac6}
.s03-chip.on{background:#e6f6f4;border-color:#cfeae7;color:#0b7775}
.s03-demo{margin-left:auto;background:#fff6e5;border:1px solid #f0dcb4;color:#8a6416;border-radius:8px;padding:3px 9px;font-size:var(--yk-type-micro);font-weight:var(--yk-weight-title);white-space:nowrap;line-height:var(--yk-line-ui)}
.s03-caption{margin-top:9px;font-size:var(--yk-type-meta);color:#5c6b7d;background:#f7fbfb;border:1px dashed #dceceb;border-radius:9px;padding:9px 11px;overflow-wrap:anywhere;line-height:var(--yk-line-ui)}
.s03-caption[hidden]{display:none!important}
.s03-points{margin-top:14px;border-top:1px dashed #e2ecee;padding-top:12px}
.subjectiveTracks.s03 .s03-points h3{font-size:var(--yk-type-meta);color:#0b7775;font-weight:var(--yk-weight-title)}
.s03-point-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.s03-point-list>li{display:inline-flex;align-items:center;gap:7px;border:1px solid #dceceb;background:#f2fbfa;border-radius:999px;padding:5px 13px 5px 6px;font-size:var(--yk-type-meta);color:#3d4c5e}
.s03-point-list>li>b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#0b7775;color:#fff;font-size:var(--yk-type-micro);font-weight:var(--yk-weight-page)}

/* 随堂练习 */
.s03-state{background:#fff6e5;border:1px solid #f0dcb4;color:#8a6416;border-radius:999px;padding:3px 11px;font-size:var(--yk-type-micro);font-weight:var(--yk-weight-title);white-space:nowrap;line-height:var(--yk-line-ui)}
.s03-block{margin-top:12px}
.subjectiveTracks.s03 .s03-block h3{font-size:var(--yk-type-meta);color:#0b7775;margin-bottom:6px;font-weight:var(--yk-weight-title)}
.s03-prompt{font-size:var(--yk-type-body);font-weight:var(--yk-weight-title);line-height:var(--yk-line-reading);overflow-wrap:anywhere}
.s03-material{background:#f7fbfb;border:1px solid #e4eef0;border-radius:10px;padding:11px 12px;font-size:var(--yk-type-body);line-height:var(--yk-line-reading);color:#48596b;overflow-wrap:anywhere}

/* 编辑器 */
.s03-editor{border:1px solid #d6e2e6;border-radius:10px;overflow:hidden;background:#fff}
.s03-editor:fullscreen{background:#fff;padding:16px;overflow:auto}
.s03-editor:fullscreen .s03-editor-body{min-height:calc(100vh - 140px)}
.s03-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--st-line);padding:8px 10px;background:#fbfdfd}
.s03-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;min-height:32px;padding:0 6px;border:0;border-radius:7px;background:none;color:#425065;font-size:var(--yk-type-control);cursor:pointer}
.s03-toolbar button:hover{background:var(--st-hover);color:#0b7775}
.s03-toolbar button>svg{width:17px;height:17px}
.s03-toolbar button>b,.s03-toolbar button>i,.s03-toolbar button>u{font-size:var(--yk-type-control);line-height:1}
.s03-toolbar .s03-full{width:auto;padding:0 9px;font-size:var(--yk-type-meta);color:#0b7775;font-weight:var(--yk-weight-title)}
.s03-sep{width:1px;height:18px;background:#e1e5eb;flex-shrink:0}
.s03-select{display:inline-flex;align-items:center}
.s03-select select{border:0;background:none;color:#546171;font:inherit;font-size:var(--yk-type-meta);padding:5px 2px;cursor:pointer}
.s03-editor-body{min-height:150px;padding:12px 13px;font-size:var(--yk-type-body);line-height:var(--yk-line-reading);color:#37485c;outline:none;overflow-wrap:anywhere}
.s03-editor-body h3{font-size:var(--yk-type-body);color:#0b5f5d;margin:6px 0;font-weight:var(--yk-weight-title)}
.s03-editor-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.s03-count{font-size:var(--yk-type-meta);color:#526976;font-variant-numeric:tabular-nums}
.s03-count.over{color:#b3261e;font-weight:700}
.s03-foot-note{font-size:var(--yk-type-micro);color:#526976;margin-left:auto}
.s03-hint{margin-top:10px;background:#fff9ec;border:1px solid #f2e2c4;border-radius:9px;padding:10px 12px;font-size:var(--yk-type-meta);line-height:var(--yk-line-ui);color:#6d5a2c;overflow-wrap:anywhere}
.s03-hint[hidden]{display:none!important}
.s03-hint>b{color:#8a6416;margin-right:6px}

/* 操作区 */
.s03-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.s03-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:45px;padding:10px 18px;border:1px solid #c3d3d8;background:#fff;color:#2c3d4f;border-radius:9px;font-size:var(--yk-type-control);font-weight:var(--yk-weight-title);cursor:pointer;transition:background .15s,border-color .15s;max-width:100%;line-height:var(--yk-line-ui)}
.s03-btn:hover{background:var(--st-hover);border-color:#9ecac6}
.s03-btn>svg{width:16px;height:16px}
.s03-btn.s03-primary{margin-left:auto;background:linear-gradient(120deg,#0b7775,#1aaaa1);border-color:#0b7775;color:#fff}
.s03-btn.s03-primary:hover{background:linear-gradient(120deg,#0a6a68,#159a92);border-color:#0a6a68}
.s03-fine{margin-top:9px;font-size:var(--yk-type-micro);color:#526976;text-align:right;overflow-wrap:anywhere}
.s03-status{margin-top:10px;background:#fff9ec;border:1px solid #f2e2c4;border-radius:9px;padding:9px 12px;font-size:var(--yk-type-meta);line-height:var(--yk-line-ui);color:#6d5a2c;overflow-wrap:anywhere}
.s03-status:empty{display:none}

/* 中等与窄屏 */
@media (max-width:1100px){
  .s03-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:650px){
  .subjectiveTracks.s03 h1{font-size:var(--yk-type-page);line-height:var(--yk-line-heading)}
  .st-crumb>small{margin-left:0;width:100%}
  .st-panel{padding:14px}
  .s03-flow{gap:8px}
  .s03-node{flex:1 1 100%}
  .s03-arrow{flex:1 1 100%;transform:rotate(90deg);align-self:center}
  .s03-player{gap:7px;padding:9px 10px}
  .s03-demo{flex:1 1 100%;text-align:center}
  .s03-track{flex:1 1 100%;order:9}
  .s03-actions .s03-btn{flex:1 1 100%}
  .s03-btn.s03-primary{margin-left:0}
  .s03-fine{text-align:left}
  .s03-foot-note{margin-left:0}
  .s03-editor-body{min-height:130px;font-size:var(--yk-type-body)}
  .s03-point-list>li{font-size:var(--yk-type-meta)}
}
@media (max-width:360px){
  .subjectiveTracks.s03 h1{font-size:var(--yk-type-page)}
  .s03-slide{padding:13px 12px}
  .subjectiveTracks.s03 .s03-slide h3{font-size:var(--yk-type-card)}
  .s03-chip{padding:5px 9px;font-size:var(--yk-type-meta)}
  .s03-toolbar{gap:4px;padding:7px}
  .s03-toolbar .s03-full span{display:none}
}
