:root{--text:#1C1C1E;--sub:#636366;--bg:#FFFFFF;--bg2:#F5F5F7;--line:#E5E5EA;--main:#00708A;--main-soft:#E6F2F5;--orange:#FF6B35;--orange-text:#B44414;--deco:#0099BB;
  --cream:#F5F2EC;--tight:"Inter Tight","Noto Sans SC",sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans SC","Inter",system-ui,sans-serif;font-size:16px;line-height:1.6}
a{color:var(--main)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
header{background:var(--cream)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
header .logo{height:34px;width:auto;display:block}
.priv{font-size:13px;color:var(--sub)}
.mag{background:var(--cream);position:relative;padding:24px 0 112px}
.mag .kick{font:500 12px var(--mono);letter-spacing:.16em;color:var(--sub);text-transform:uppercase;margin:0 0 16px}
.mag h1{font:900 60px/1 var(--tight);letter-spacing:-.03em;margin:0}
.mag h1 em{font-style:normal;color:var(--main);display:block}
.mag p.lead{font-weight:700;font-size:18px;margin:18px 0 0;max-width:720px}
.mag .signline{position:absolute;left:16px;right:16px;bottom:62px;height:4px;background:var(--text);max-width:1148px;margin:0 auto}
.mag .seal{position:absolute;width:116px;right:max(16px,calc(50% - 574px));bottom:4px;transform:rotate(-4deg)}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}
.steps span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:14px}
.steps b{color:var(--main)}
.tabs{display:flex;gap:4px;margin:20px 0 0;border-bottom:2px solid var(--line);overflow-x:auto;position:sticky;top:0;background:#fff;z-index:5}
.tab{appearance:none;border:0;background:none;font:inherit;font-weight:700;font-size:17px;padding:10px 14px;cursor:pointer;color:var(--sub);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--main);border-bottom-color:var(--main)}
.panel{display:none;padding:20px 0 40px}.panel.on{display:block}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 14px}
legend{font-weight:700;padding:0 6px}
label{display:block;font-weight:500;margin:10px 0 4px}
label input[type=checkbox]{margin-right:6px}
.hint{color:var(--sub);font-size:13px;font-weight:400}
input[type=text],select,textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:#fff;color:var(--text)}
textarea{min-height:240px;resize:vertical;line-height:1.7}
input[type=range]{width:100%;accent-color:var(--main)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--main);outline-offset:1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font:inherit;font-size:14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--main);border-color:var(--main);color:#fff}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn{font:inherit;font-weight:700;border-radius:8px;padding:10px 16px;cursor:pointer;border:1px solid var(--main);background:var(--main);color:#fff}
.btn.ghost{background:#fff;color:var(--main)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.rec{background:#C62828;border-color:#C62828;min-width:120px}
.btn.rec.on{background:#1C1C1E;border-color:#1C1C1E}
.btn:focus-visible{outline:3px solid var(--deco);outline-offset:2px}
.note{border-left:4px solid var(--orange);background:#FFF4EF;padding:10px 12px;border-radius:6px;font-size:14px;margin:12px 0}
.note b{color:var(--orange-text)}
.ok{color:var(--main);font-weight:700;font-size:14px;min-height:1.4em;margin-top:8px}
.ok.err{color:var(--orange-text)}
.outbox{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:14px}
.ob-h{font-weight:700;margin:0 0 8px}
.cuelist{margin:0;padding-left:26px;max-height:420px;overflow:auto;font-size:15px}
.cuelist li{padding:4px 0;border-bottom:1px solid var(--line)}
.cuelist li .kw,.kw{color:var(--orange-text);font-weight:700}
.cuelist li small{color:var(--sub);margin-left:6px}
.mono{font-family:var(--mono);font-size:13px}

/* 开拍 */
.shoot{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:24px;align-items:start}
.stage{position:relative;background:#111;border-radius:14px;overflow:hidden;aspect-ratio:9/16;width:100%;user-select:none;-webkit-user-select:none}
.stage.r11{aspect-ratio:1/1}.stage.r169{aspect-ratio:16/9}
.stage canvas{width:100%;height:100%;display:block}
.stage.mirror #live{transform:scaleX(-1)}
.prompter{position:absolute;left:0;right:0;top:0;height:42%;background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.55) 80%,rgba(0,0,0,0));overflow:hidden;cursor:pointer;padding:10px 14px 0}
.stage.r169 .prompter{height:48%}
.pl{transition:transform .35s ease;will-change:transform}
.pl p{margin:0 0 .45em;color:rgba(255,255,255,.42);font-weight:700;line-height:1.35;font-size:var(--pf,34px)}
.pl p.cur{color:#fff}
.pl p.cur .rd{color:#5FD3E8}
.pl p .kw{color:#FFD60A}
.pl p.cur .rd.kw{color:#FFD60A;text-decoration:underline}
.count{position:absolute;inset:0;display:grid;place-items:center;font:900 140px var(--tight);color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.6);pointer-events:none}
.recdot{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.6);color:#ff5252;font:700 14px var(--mono);padding:4px 10px;border-radius:999px}
.recdot span{color:#fff}
.heard{position:absolute;left:10px;right:90px;bottom:10px;background:rgba(0,0,0,.55);color:#cfe;font-size:13px;padding:4px 10px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camoff{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#eee;padding:20px;background:#1b1b1d}
.camoff .hint{color:#aaa}
.fsbtn{position:absolute;right:8px;top:calc(42% + 6px);background:rgba(0,0,0,.5);color:#fff;border:0;border-radius:8px;font-size:20px;width:40px;height:40px;cursor:pointer}
.stage:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}
.stage:fullscreen canvas{width:auto;height:100%;max-width:100%;object-fit:contain}
.ctrl label{margin-top:12px}
.takes{margin-top:12px;font-size:14px}
.takes .tk{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:6px}
.takes .tk.on{border-color:var(--main);background:var(--main-soft)}

/* 字幕特效 */
.edit{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:24px;align-items:start}
.stage.small{max-width:380px}
.player{display:flex;gap:10px;align-items:center;margin-top:10px}
.player input{flex:1}
.cuetab{max-height:440px;overflow:auto;margin-top:10px}
.ct{display:grid;grid-template-columns:28px 1fr 74px 74px;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.ct.cur{background:var(--main-soft)}
.ct input{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:6px;padding:4px 6px;width:100%}
.ct .n{color:var(--sub);font-family:var(--mono);font-size:12px}
.ct .tm{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.ct .tm b{font:500 12px var(--mono);text-align:center;cursor:pointer;color:var(--main)}
.ct .tm span{display:flex;gap:2px}.ct .tm span button{flex:1;font-size:11px;padding:1px 0;border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer}
.howto{padding-left:22px;margin:6px 0 10px}
.dl{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.bar{width:100%;height:10px;background:var(--line);border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--main);transition:width .2s}

/* 老师 */
.teacher{background:var(--cream);margin-top:24px;padding:40px 0 48px;border-top:4px solid var(--text)}
.teacher .tg{display:grid;grid-template-columns:150px 1.2fr 1fr 1fr;gap:32px;align-items:start}
.teacher img.ph{width:150px;height:188px;object-fit:cover;object-position:center 15%}
.teacher .k{font:500 11px var(--mono);letter-spacing:.16em;color:var(--main);text-transform:uppercase;margin:0 0 10px}
.teacher .n{font:900 26px/1.25 "Noto Sans SC";margin:0}
.teacher .r{color:var(--sub);font-size:14px;margin:6px 0 0}
.teacher .st{display:flex;gap:22px;margin-top:14px}
.teacher .st b{display:block;font:800 22px var(--tight);color:var(--main)}
.teacher .st span{font-size:12px;color:var(--sub)}
.teacher ul{list-style:none;margin:0;padding:0;font-size:14px}
.teacher li{padding:6px 0;border-bottom:1px solid #DED9CF}
.teacher li span{display:inline-block;width:96px;color:var(--sub);font-size:12px}
.teacher .cta{display:inline-block;margin-top:14px;background:var(--orange);color:var(--text);font-weight:800;text-decoration:none;padding:10px 18px}
footer{border-top:1px solid var(--line);color:var(--sub);font-size:13px;padding:16px 0 28px}

@media (max-width:860px){
  .grid,.shoot,.edit{grid-template-columns:1fr}
  .stage{max-width:440px;margin:0 auto}
  .mag h1{font-size:42px}.mag .seal{width:80px;bottom:-4px}
  .teacher .tg{grid-template-columns:1fr}.teacher img.ph{width:120px;height:150px}
  .priv{display:none}
}
@media (max-width:520px){.two{grid-template-columns:1fr}.tab{font-size:15px;padding:10px 9px}.ct{grid-template-columns:22px 1fr 66px 66px}}
[hidden]{display:none!important}