@font-face{font-family:"Gemini Sans";src:url(fonts/gemini-sans.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Gemini Serif";src:url(fonts/gemini-serif.woff2) format("woff2");font-weight:200 900;font-display:swap}
:root{--bg:#05060f;--card:#0d1028;--line:rgba(255,214,140,.22);--gold:#f5c66a;--txt:#eef1ff;--mut:#9aa3c7}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#1a1440 0,transparent 60%),var(--bg);color:var(--txt);font-family:"Gemini Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;flex-wrap:wrap}
.brand{display:flex;gap:14px;align-items:center}
.glyph{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font:900 26px "Gemini Serif","Noto Serif SC",serif;color:#1b1030;background:linear-gradient(135deg,#fff1c8,#f0b54e)}
h1{font:800 20px "Gemini Serif","Noto Serif SC",serif;margin:0;letter-spacing:.04em}
.brand p{margin:2px 0 0;color:var(--mut);font-size:13px}
.orient,.seg{display:inline-flex;background:#0b0e24;border:1px solid var(--line);border-radius:999px;padding:3px}
.orient button,.seg button{background:none;border:0;padding:7px 14px;border-radius:999px;color:var(--mut);font-size:14px;white-space:nowrap}
.orient button.on,.seg button.on{background:linear-gradient(135deg,#ffe2a0,#e9a945);color:#1b1030;font-weight:700}
main{max-width:1280px;margin:0 auto;padding:0 20px 40px;display:grid;gap:22px}
.player{background:#000;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;margin:0 auto}
body.portrait .stage{aspect-ratio:9/16;width:min(100%,calc(82vh * 9 / 16));height:auto}
canvas#view{width:100%;height:100%;display:block}
.gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle,rgba(5,6,15,.25),rgba(5,6,15,.7));transition:opacity .4s}
.gate.hide{opacity:0;pointer-events:none}
#bigplay{width:92px;height:92px;border-radius:50%;border:1px solid rgba(255,230,180,.6);background:rgba(255,214,140,.15);backdrop-filter:blur(6px);display:grid;place-items:center}
#bigplay:disabled{opacity:.4;cursor:wait}
.tri{width:0;height:0;border-left:28px solid #ffe6b0;border-top:17px solid transparent;border-bottom:17px solid transparent;margin-left:8px}
#status{margin:0;color:#ffe6b0;font-size:14px;text-shadow:0 1px 4px #000}
.bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#090b1d}
.ic{background:#141838;border:1px solid var(--line);border-radius:10px;width:40px;height:36px;display:grid;place-items:center}
.ic.small{width:36px;font-size:14px}
.ic.on{border-color:var(--gold);color:var(--gold)}
.ic:disabled{opacity:.4}
#time{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mut);font-size:13px;min-width:104px}
#seek{flex:1;accent-color:var(--gold)}
.chapters{display:flex;gap:6px;overflow-x:auto;padding:8px 14px 12px;background:#090b1d;scrollbar-width:thin}
.chapters button{flex:none;background:#10142f;border:1px solid transparent;color:var(--mut);border-radius:999px;padding:5px 12px;font-size:12px}
.chapters button.on{border-color:var(--gold);color:#ffe6b0}
.panel{background:linear-gradient(180deg,#0e1130,#0a0c22);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.panel h2{margin:0 0 14px;font:800 18px "Gemini Serif","Noto Serif SC",serif}
.panel h2 small{font:400 12px "Gemini Sans","Noto Sans SC",sans-serif;color:var(--mut);margin-left:8px}
.row{display:flex;align-items:center;gap:12px;margin:10px 0;flex-wrap:wrap}
.row>label{width:56px;color:var(--mut);font-size:14px}
.primary{background:linear-gradient(135deg,#ffe2a0,#e9a945);color:#1b1030;border:0;border-radius:12px;padding:10px 22px;font-weight:800;text-decoration:none;display:inline-block}
.primary:disabled{opacity:.4}
.ghost{background:none;border:1px solid var(--line);border-radius:12px;padding:9px 18px}
.prog{height:10px;background:#141838;border-radius:99px;overflow:hidden;margin-top:6px}
.fill{height:100%;width:0;background:linear-gradient(90deg,#8fb5ff,#ffd48a);transition:width .2s}
.note{color:var(--mut);font-size:13px;line-height:1.6;margin:10px 0 0}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{background:#10142f;border:1px solid var(--line);border-radius:12px;padding:8px 16px;color:var(--mut)}
.tabs button.on{background:linear-gradient(135deg,#ffe2a0,#e9a945);color:#1b1030;font-weight:800;border-color:transparent}
.field{background:#080a1c;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.field .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:13px;color:var(--mut)}
.field .hd b{color:#ffe6b0;font-weight:700}
.count.ok{color:#8fe3a8}.count.bad{color:#ff8f8f}
.field pre{margin:0;white-space:pre-wrap;word-break:break-all;font:15px/1.7 "Gemini Sans","Noto Sans SC",sans-serif;color:var(--txt)}
.copy{background:#1a1f45;border:1px solid var(--line);border-radius:9px;padding:4px 12px;font-size:12px;color:#ffe6b0}
.copy.done{background:#1f4a33;color:#bff5cf}
.covers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:start}
.cover{background:#080a1c;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:10px}
.cover canvas{width:100%;height:auto;border-radius:8px;display:block}
.cover .hd{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:var(--mut)}
footer{text-align:center;color:#5d6488;font-size:12px;padding:10px 20px 30px}
:fullscreen .stage,.stage:fullscreen{width:100vw!important;height:100vh!important;aspect-ratio:auto;max-width:none}
:fullscreen canvas#view{object-fit:contain}
@media (max-width:640px){
  .top{padding:12px 14px}
  h1{font-size:16px}
  main{padding:0 10px 30px;gap:14px}
  body.portrait .stage{width:min(100%,calc(86svh * 9 / 16))}
  .row>label{width:100%}
  .seg button{padding:7px 10px;font-size:13px}
  #time{min-width:auto;font-size:12px}
}
[hidden]{display:none!important}
#mute .x{display:none}#mute.muted .x{display:inline}#mute.muted .wave{display:none}