/* ═══════════════════════════════════════════════════════════════
   orch-ppt.css —— 《配器法》网页课件（PPT 播放器）样式
   仅用于 配器法/ppt/*.html；全部类名以 .orc-ppt- / .os- 前缀，
   不与站点通用类（.card/.score/.label…）冲突。
   ═══════════════════════════════════════════════════════════════ */

:root{
  --pptj:#4FA691;          /* 主色 jade，与课程一致 */
  --pptj-d:#2F7C6B;
  --pptj-l:#EDF6F3;
  --pptink:#0E2A25;        /* 深墨绿：封面/分节页 */
  --pptink-2:#123B33;
  --pptpaper:#FBFAF6;
  --pptline:#E2E0D6;
  --ppttext:#22322E;
  --ppttext2:#54665F;
  --pptmute:#8A9A94;
  --pptgold:#C9A55E;
  --pptW:min(1220px,94vw);
  --pptmono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

/* ── 页面基本框架 ── */
html.os-deck-mode,html.os-deck-mode body{height:100%;}
body.os-deck{
  margin:0; background:#101A17; color:var(--ppttext);
  font:400 16px/1.75 system-ui,-apple-system,"Microsoft YaHei","PingFang SC",sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
/* 舞台：居中显示当前页 */
.os-stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:66px 0 76px; box-sizing:border-box;
  background:
    radial-gradient(1100px 520px at 14% -8%,rgba(79,166,145,.16),transparent 62%),
    radial-gradient(900px 480px at 92% 108%,rgba(201,165,94,.10),transparent 60%),
    #101A17;
}
/* 幻灯片本体 */
.os-slide{
  display:none; width:var(--pptW); max-height:100%;
  background:var(--pptpaper); border-radius:16px; overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.46),0 2px 0 rgba(255,255,255,.5) inset;
  position:relative;
}
.os-slide.on{ display:block; animation:os-in .34s cubic-bezier(.2,.7,.3,1); }
@keyframes os-in{ from{ opacity:0; transform:translateY(14px) scale(.994);} to{ opacity:1; transform:none;} }

/* 统一内边距与内容滚动 */
.os-body{ padding:34px 48px 40px; max-height:calc(100vh - 142px); overflow:auto; overscroll-behavior:contain; }
.os-body::-webkit-scrollbar{ width:8px; }
.os-body::-webkit-scrollbar-thumb{ background:#CFD9D5; border-radius:8px; }

/* 页眉：板块名 + 页码 */
.os-kick{
  display:flex; align-items:center; gap:10px;
  font:700 11.5px/1 var(--pptmono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--pptj-d); margin:0 0 12px;
}
.os-kick::before{ content:""; width:22px; height:2px; background:var(--pptj); border-radius:2px; }

/* 标题 */
.os-h1{ margin:0 0 8px; font-size:clamp(30px,3.5vw,46px); line-height:1.18; letter-spacing:-.01em; color:var(--pptink); font-weight:800; }
.os-h2{ margin:0 0 18px; font-size:clamp(22px,2.3vw,30px); line-height:1.25; color:var(--pptink); font-weight:800; letter-spacing:-.005em; }
.os-sub{ margin:0 0 20px; font-size:15px; color:var(--ppttext2); }
.os-rule{ height:1px; background:var(--pptline); border:0; margin:0 0 22px; }
.os-lead{ font-size:16.5px; color:var(--ppttext2); line-height:1.9; }
.os-lead b,.os-p b{ color:var(--pptj-d); font-weight:700; }
.os-p{ font-size:15.4px; line-height:1.92; color:var(--ppttext2); margin:0 0 14px; }

/* ── 封面页 ── */
.os-cover{ position:relative; padding:0; }
.os-cover-bg{ position:absolute; inset:0; }
.os-cover-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 34%; filter:brightness(.44) saturate(.9); }
.os-cover-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(9,26,22,.94) 0%,rgba(9,26,22,.80) 44%,rgba(9,26,22,.42) 100%); }
.os-cover-in{ position:relative; padding:76px 62px 66px; color:#EAF3F0; }
.os-cover-tag{ display:inline-block; font:700 12px/1 var(--pptmono); letter-spacing:.2em;
  color:#BFE3D9; border:1px solid rgba(191,227,217,.42); border-radius:999px; padding:8px 16px; }
.os-cover h1{ margin:26px 0 10px; font-size:clamp(40px,5.6vw,72px); line-height:1.04; font-weight:800; letter-spacing:-.02em; color:#fff; }
.os-cover .os-cover-en{ font:700 12.5px/1 var(--pptmono); letter-spacing:.34em; color:#8CC4B4; text-transform:uppercase; }
.os-cover .os-cover-line{ width:76px; height:3px; background:var(--pptgold); border-radius:3px; margin:22px 0; }
.os-cover p{ margin:0; max-width:640px; font-size:16px; line-height:1.9; color:#C9DBD6; }
.os-cover-meta{ display:flex; gap:26px; flex-wrap:wrap; margin-top:34px; font-size:13.5px; color:#9FBBB4; }
.os-cover-meta b{ color:#EAF3F0; font-weight:600; }

/* ── 分节页 ── */
.os-sec{ background:var(--pptink); }
.os-sec .os-body{ display:flex; flex-direction:column; justify-content:center; min-height:min(430px,46vh); }
.os-sec-no{ font:800 15px/1 var(--pptmono); letter-spacing:.2em; color:var(--pptgold); }
.os-sec h2{ margin:16px 0 14px; font-size:clamp(28px,3.4vw,44px); line-height:1.16; color:#fff; font-weight:800; }
.os-sec p{ margin:0; max-width:760px; font-size:15.6px; line-height:1.9; color:#A9C6BF; }
.os-sec .os-sec-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.os-sec .os-sec-tags span{ font-size:12.6px; color:#CFE6E0; border:1px solid rgba(207,230,224,.26);
  border-radius:999px; padding:6px 14px; }

/* ── 结束页 ── */
.os-end{ background:var(--pptink); }
.os-end .os-body{ text-align:center; padding:44px 48px 34px; }
.os-end .os-points{ gap:8px; }
.os-end .os-points>li{ padding:10px 16px 10px 50px; }
.os-end .os-h3{ margin:20px 0 10px; }
.os-end h2{ margin:8px 0 16px; font-size:clamp(28px,3.2vw,42px); color:#fff; font-weight:800; }
.os-end p{ margin:0 auto; max-width:720px; font-size:15.4px; line-height:2; color:#A9C6BF; }

/* ── 列表：要点 ── */
.os-points{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.os-points>li{ position:relative; padding:14px 18px 14px 52px; background:#fff;
  border:1px solid var(--pptline); border-radius:12px; font-size:15px; line-height:1.8; color:var(--ppttext2); }
.os-points>li::before{ content:counter(ospt,decimal-leading-zero); counter-increment:ospt;
  position:absolute; left:16px; top:15px; font:800 12.5px/1.6 var(--pptmono); color:var(--pptj-d); }
.os-points{ counter-reset:ospt; }
.os-points>li b{ color:var(--pptink); font-weight:700; }
.os-points.nos::before{ content:"·"; }

/* ── 卡片网格 ── */
.os-grid{ display:grid; gap:14px; }
.os-grid.c2{ grid-template-columns:repeat(2,1fr); }
.os-grid.c3{ grid-template-columns:repeat(3,1fr); }
.os-grid.c4{ grid-template-columns:repeat(4,1fr); }
.os-card{ background:#fff; border:1px solid var(--pptline); border-radius:14px; padding:18px 20px; }
.os-card h4{ margin:0 0 8px; font-size:15.6px; font-weight:800; color:var(--pptink); display:flex; align-items:center; gap:8px; }
.os-card h4 i{ font-style:normal; flex:0 0 auto; width:22px; height:22px; border-radius:7px;
  background:var(--pptj-l); color:var(--pptj-d); font:800 11.5px/22px var(--pptmono); text-align:center; }
.os-card p{ margin:0; font-size:13.8px; line-height:1.82; color:var(--ppttext2); }
.os-card.tint{ background:var(--pptj-l); border-color:#CFE4DE; }
.os-card.ink{ background:var(--pptink); border-color:var(--pptink); }
.os-card.ink h4,.os-card.ink p{ color:#DCEBE7; }
.os-card.ink h4 i{ background:rgba(255,255,255,.14); color:#BFE3D9; }

/* 四大件环形图（用 CSS 摆位，避免绝对定位失控） */
.os-four{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 14px; }
.os-four .os-card{ text-align:center; padding:22px 16px; }
.os-four .os-card b{ display:block; font-size:22px; font-weight:800; color:var(--pptink); letter-spacing:.02em; }
.os-four .os-card span{ display:block; margin-top:6px; font-size:12.6px; color:var(--pptmute); }
.os-four .os-card.hot{ background:var(--pptink); border-color:var(--pptink); }
.os-four .os-card.hot b{ color:#fff; }
.os-four .os-card.hot span{ color:#9FC4BB; }

/* ── 表格 ── */
.os-tbl{ width:100%; border-collapse:collapse; font-size:14px; background:#fff;
  border:1px solid var(--pptline); border-radius:12px; overflow:hidden; }
.os-tbl th{ background:#F2F1E9; color:var(--pptink); font-weight:700; font-size:13.4px;
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--pptline); white-space:nowrap; }
.os-tbl td{ padding:11px 14px; border-bottom:1px solid #EFEEE6; color:var(--ppttext2); line-height:1.72; vertical-align:top; }
.os-tbl tr:last-child td{ border-bottom:0; }
.os-tbl td b{ color:var(--pptink); }
.os-tbl .num{ font-family:var(--pptmono); font-size:12.8px; color:var(--pptj-d); white-space:nowrap; }
.os-tbl-wrap{ overflow-x:auto; }

/* ── 谱例 / 插图 ── */
.os-fig{ background:#fff; border:1px solid var(--pptline); border-radius:12px; padding:14px; }
.os-fig img{ display:block; width:100%; height:auto; border-radius:6px; }
.os-fig figcaption{ margin:10px 2px 0; font-size:12.6px; color:var(--pptmute); line-height:1.7; }
.os-fig.sm img{ max-width:520px; margin:0 auto; }
.os-fig.center img{ max-width:660px; margin:0 auto; }

/* 竖长图（总谱格式等）：按高度约束，避免溢出视口 */
.os-fig.tall{ display:flex; flex-direction:column; }
.os-fig.tall img{ width:auto; max-width:100%; max-height:min(58vh,520px); margin:0 auto; }
.os-cols .os-fig.tall{ align-items:center; }

/* 两栏（图 + 文） */
.os-cols{ display:grid; grid-template-columns:1.08fr .92fr; gap:24px; align-items:start; }
.os-cols.even{ grid-template-columns:1fr 1fr; }
.os-cols.rev{ grid-template-columns:.92fr 1.08fr; }
@media(max-width:900px){ .os-cols,.os-cols.even,.os-cols.rev{ grid-template-columns:1fr; } }

/* 试听/对比标签 */
.os-listen{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.os-listen span{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--pptink);
  background:#fff; border:1px solid var(--pptline); border-radius:999px; padding:7px 14px; }
.os-listen span::before{ content:"♪"; color:var(--pptj); font-size:14px; }
.os-listen span.on{ background:var(--pptj); border-color:var(--pptj); color:#fff; }
.os-listen span.on::before{ color:#EAF3F0; }

/* 时间轴（发展史小结） */
.os-tl{ position:relative; margin:6px 0 0; padding-left:26px; }
.os-tl::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--pptj),#CFE4DE); border-radius:2px; }
.os-tl-i{ position:relative; padding:0 0 15px; }
.os-tl-i::before{ content:""; position:absolute; left:-24px; top:7px; width:10px; height:10px; border-radius:50%;
  background:#fff; border:2.5px solid var(--pptj); }
.os-tl-i b{ display:block; font-size:14.6px; color:var(--pptink); font-weight:800; }
.os-tl-i span{ display:block; font-size:13.6px; color:var(--ppttext2); line-height:1.8; }
.os-tl-i em{ font-style:normal; font-family:var(--pptmono); font-size:11.8px; color:var(--pptj-d); letter-spacing:.06em; }

/* 高亮引文 */
.os-quote{ margin:0; padding:16px 22px; background:var(--pptj-l); border-left:4px solid var(--pptj);
  border-radius:0 12px 12px 0; font-size:15.4px; line-height:1.9; color:var(--pptink); }
.os-quote b{ color:var(--pptj-d); }

/* 分组小标题 */
.os-h3{ margin:22px 0 10px; font-size:16.4px; font-weight:800; color:var(--pptink); }
.os-h3:first-child{ margin-top:0; }

/* ══════════ 顶栏 / 底栏 ══════════ */
.os-bar{
  position:fixed; top:0; left:0; right:0; height:52px; z-index:40;
  display:flex; align-items:center; gap:12px; padding:0 18px;
  background:rgba(12,26,22,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08); color:#CFE0DB;
}
.os-bar-t{ font-size:13.6px; font-weight:700; color:#EAF3F0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.os-bar-t em{ font-style:normal; color:#8CC4B4; font-weight:600; margin-left:8px; font-size:12.6px; }
.os-bar-sp{ flex:1; }
.os-btns{ display:flex; align-items:center; gap:6px; }
.os-btn{
  appearance:none; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:#DCEBE7; font:600 12.8px/1 system-ui,"Microsoft YaHei",sans-serif;
  padding:8px 12px; border-radius:9px; cursor:pointer; transition:.18s; white-space:nowrap;
}
.os-btn:hover{ background:rgba(79,166,145,.28); border-color:rgba(79,166,145,.55); color:#fff; }
.os-btn.pri{ background:var(--pptj); border-color:var(--pptj); color:#fff; }
.os-btn.pri:hover{ background:var(--pptj-d); border-color:var(--pptj-d); }

.os-foot{
  position:fixed; bottom:0; left:0; right:0; height:62px; z-index:40;
  display:flex; align-items:center; gap:16px; padding:0 18px;
  background:rgba(12,26,22,.9); backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.08); color:#A9C6BF;
}
.os-prog{ flex:1; height:4px; background:rgba(255,255,255,.14); border-radius:99px; cursor:pointer; position:relative; }
.os-prog i{ position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg,var(--pptj),#7FC7B4); border-radius:99px; transition:width .28s cubic-bezier(.2,.7,.3,1); }
.os-prog:hover{ background:rgba(255,255,255,.22); }
.os-count{ font:700 12.6px/1 var(--pptmono); color:#CFE0DB; letter-spacing:.06em; white-space:nowrap; }
.os-count b{ color:#fff; font-size:14px; }
.os-nav{ display:flex; gap:6px; }

/* ══════════ 目录抽屉 ══════════ */
.os-drawer{
  position:fixed; inset:0 0 0 auto; width:min(460px,92vw); z-index:60;
  background:#0E211D; border-left:1px solid rgba(255,255,255,.1);
  transform:translateX(102%); transition:transform .34s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column;
}
.os-drawer.on{ transform:none; box-shadow:-24px 0 60px rgba(0,0,0,.5); }
.os-drawer-h{ display:flex; align-items:center; gap:10px; padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.09); }
.os-drawer-h b{ font-size:14.6px; color:#EAF3F0; }
.os-drawer-h em{ font-style:normal; margin-left:auto; font:700 11.6px/1 var(--pptmono); color:#8CC4B4; }
.os-drawer-l{ overflow:auto; padding:10px 12px 24px; }
.os-drawer-l::-webkit-scrollbar{ width:8px; }
.os-drawer-l::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }
.os-di{ display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:10px;
  cursor:pointer; text-decoration:none; transition:.16s; }
.os-di:hover{ background:rgba(255,255,255,.07); }
.os-di.on{ background:rgba(79,166,145,.22); }
.os-di-n{ flex:0 0 auto; font:700 11.6px/1.7 var(--pptmono); color:#8CC4B4; min-width:22px; }
.os-di b{ display:block; font-size:13.6px; font-weight:600; color:#DCEBE7; line-height:1.55; }
.os-di span{ display:block; font-size:11.8px; color:#7E9A93; margin-top:2px; }
.os-di.sec b{ color:#C9A55E; letter-spacing:.04em; }
.os-mask{ position:fixed; inset:0; z-index:55; background:rgba(6,16,13,.62); opacity:0; pointer-events:none; transition:.3s; }
.os-mask.on{ opacity:1; pointer-events:auto; }

/* ══════════ 帮助浮层 ══════════ */
.os-help{ position:fixed; inset:0; z-index:70; background:rgba(6,16,13,.78);
  display:none; align-items:center; justify-content:center; padding:24px; }
.os-help.on{ display:flex; }
.os-help-in{ width:min(560px,100%); background:#12231F; border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:26px 28px; color:#CFE0DB; }
.os-help-in h3{ margin:0 0 16px; font-size:17px; color:#fff; }
.os-keys{ display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:13.6px; }
.os-kbd{ display:inline-block; font:700 11.6px/1 var(--pptmono); color:#EAF3F0;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-bottom-width:2px; border-radius:6px; padding:5px 9px; }
.os-help-in .os-help-f{ margin:18px 0 0; font-size:12.6px; color:#8CA8A1; }

/* ══════════ 打印（讲义） ══════════ */
@media print{
  body.os-deck{ overflow:visible; background:#fff; }
  .os-bar,.os-foot,.os-drawer,.os-mask,.os-help{ display:none !important; }
  .os-stage{ position:static; display:block; padding:0; background:#fff; }
  .os-slide{ display:block !important; width:100%; box-shadow:none; border-radius:0;
    break-inside:avoid; page-break-after:always; border-bottom:1px solid #ddd; }
  .os-body{ max-height:none; overflow:visible; }
  .os-slide{ animation:none; }
}

/* ══════════ 窄屏 ══════════ */
@media(max-width:760px){
  .os-body{ padding:22px 20px 28px; max-height:calc(100vh - 150px); }
  .os-slide{ border-radius:12px; }
  .os-grid.c3,.os-grid.c4{ grid-template-columns:1fr 1fr; }
  .os-bar-t em{ display:none; }
  .os-bar{ padding:0 12px; gap:8px; }
  .os-foot{ padding:0 12px; gap:10px; height:56px; }
  .os-btn{ padding:7px 10px; font-size:12.2px; }
  .os-cover-in{ padding:52px 28px 46px; }
}
@media(max-width:520px){
  .os-grid.c2,.os-grid.c3,.os-grid.c4{ grid-template-columns:1fr; }
}

/* ═══════════ 视频对照（同一主题 · 六种编制） ═══════════ */
.os-vwrap{background:#0E2A25;border:1px solid #1C4A40;border-radius:14px;padding:12px 12px 8px;}
.os-video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:9px;outline:0;}
.os-vbar{display:flex;align-items:center;gap:10px;margin:10px 4px 0;}
.os-vfull{appearance:none;cursor:pointer;font-family:inherit;font-size:12.8px;font-weight:700;
  color:#EAF6F2;background:#1C4A40;border:1px solid #2E6A5C;border-radius:999px;padding:6px 16px;line-height:1.2;}
.os-vfull:hover{background:#235A4E;border-color:#3C8574;}
.os-vhint{font-size:12.2px;color:#8FBFB2;}
.os-vnote{margin:10px 4px 4px;min-height:44px;font-size:13.4px;line-height:1.8;color:#BFE3D9;}
.os-vlist{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.os-vch{appearance:none;text-align:left;cursor:pointer;font-family:inherit;
  background:#fff;border:1px solid var(--pptline);border-radius:11px;padding:11px 13px;transition:.2s;}
.os-vch b{display:block;font-size:13.8px;font-weight:700;color:var(--pptink);line-height:1.4;}
.os-vch span{display:block;margin-top:2px;font-size:11.6px;color:var(--pptmute);}
.os-vch:hover{border-color:#BED9D1;transform:translateY(-1px);}
.os-vch.on{background:var(--pptj);border-color:var(--pptj);}
.os-vch.on b{color:#fff;}
.os-vch.on span{color:#D9EDE7;}
@media(max-width:520px){ .os-vlist{grid-template-columns:1fr;} }