/* Layout: one 16:9 stage, controls under it, scene list below. Single dark look, OmniVista 2026 brand. */
:root{
  --ink:#0D0B12; --ink-2:#17131F; --panel:#1E1829; --line:rgba(255,255,255,.12);
  --fg:#F4F1F8; --fg-2:#C9C0D8; --fg-3:#9A8FAE;
  --purple:#69479A; --purple-hi:#8E6BC6; --purple-soft:#EFE8F8;
  --blue:#0085CA; --ok:#3FB37F;
  --sans:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Yu Gothic UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"Cascadia Code",monospace;
  color-scheme:dark;
}
html,body{background:var(--ink);color:var(--fg)}
body{font-family:var(--sans);padding-inline:16px;padding-block:24px 48px}
.wrap{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand b{font-size:15px;font-weight:700}
.brand small{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3)}
.langs{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px}
.langs button{font:inherit;font-size:12px;font-weight:600;color:var(--fg-2);background:none;border:0;border-radius:999px;padding:7px 12px;cursor:pointer;min-height:32px}
.langs button[aria-pressed="true"]{background:var(--purple);color:#fff}

.stage{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 40px 100px rgba(0,0,0,.55);container-type:inline-size}
.scene{position:absolute;inset:0;opacity:0;pointer-events:none}
.u{font-size:1cqw} /* 1cqw unit helper */
.s1 video{width:100%;height:100%;object-fit:cover;display:block}
.grad{background:radial-gradient(120% 140% at 85% 10%,#3A2760 0%,#1A1326 45%,#0D0B12 100%)}
.s2{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3cqw;text-align:center;padding:0 8cqw}
.s2 h2{margin:0;font-size:4.6cqw;line-height:1.08;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.s2 h2 span{display:inline-block;margin-right:.25em;will-change:transform,opacity}
.s2 p{margin:0;font-size:1.8cqw;color:var(--fg-2)}

.win{position:absolute;left:8cqw;right:8cqw;top:7cqw;bottom:9cqw;border-radius:1.4cqw;overflow:hidden;background:#F7F6FA;color:#1B1724;box-shadow:0 3cqw 6cqw rgba(0,0,0,.45);display:flex}
.win .side{width:14cqw;background:#141019;padding:1.6cqw 1.2cqw;display:flex;flex-direction:column;gap:1cqw}
.win .side i{display:block;height:1cqw;border-radius:.5cqw;background:rgba(255,255,255,.12)}
.win .side i.on{background:var(--purple)}
.win .main{flex:1;padding:2.2cqw 2.6cqw;display:flex;flex-direction:column;gap:1.4cqw;position:relative}
.win h4{margin:0;font-size:1.9cqw;font-weight:700}
.win .muted{font-size:1.2cqw;color:#6E6680}
.btn{align-self:flex-start;font-size:1.25cqw;font-weight:600;color:#fff;background:var(--purple);border-radius:.7cqw;padding:.9cqw 1.6cqw;will-change:transform}
.field{display:flex;flex-direction:column;gap:.5cqw}
.field label{font-size:1.05cqw;font-weight:600;color:#4D4658}
.field div{font-family:var(--mono);font-size:1.4cqw;background:#fff;border:1px solid #D8D2E3;border-radius:.6cqw;padding:.9cqw 1.1cqw;min-height:1.6cqw}
.toast{position:absolute;right:2.4cqw;bottom:2.4cqw;font-size:1.2cqw;font-weight:600;background:#14361F;color:#C9F2D9;border-radius:.8cqw;padding:1cqw 1.4cqw;display:flex;gap:.8cqw;align-items:center}
.toast:before{content:"";width:1cqw;height:1cqw;border-radius:50%;background:var(--ok)}
.cursor{position:absolute;width:2.2cqw;height:2.2cqw;pointer-events:none;will-change:transform;z-index:3}

.asst{background:#ECEBEF}
.asst .side{background:#E1DFE6}
.asst .side i{background:#CFCBD8}
.dialog{position:absolute;left:50%;top:50%;width:46cqw;transform:translate(-50%,-50%);background:#fff;border-radius:1.2cqw;box-shadow:0 2cqw 5cqw rgba(20,15,30,.25);padding:2.2cqw;display:flex;flex-direction:column;gap:1.3cqw}
.chips{display:flex;gap:.8cqw;flex-wrap:wrap}
.chips span{font-size:1.2cqw;font-weight:600;padding:.6cqw 1.1cqw;border-radius:999px;background:var(--purple-soft);color:#4B2F75}

.card{position:absolute;left:50%;top:50%;width:34cqw;transform:translate(-50%,-50%);background:#fff;color:#17131F;border-radius:1.4cqw;padding:2.4cqw;display:flex;flex-direction:column;gap:1.2cqw;box-shadow:0 3cqw 7cqw rgba(0,0,0,.5)}
.chat{position:absolute;left:16cqw;right:16cqw;top:6cqw;bottom:8cqw;display:flex;flex-direction:column;gap:1.4cqw;justify-content:flex-end}
.bubble{max-width:80%;font-size:1.55cqw;line-height:1.45;padding:1.2cqw 1.6cqw;border-radius:1.4cqw}
.me{align-self:flex-end;background:var(--purple);color:#fff;border-bottom-right-radius:.4cqw}
.bot{align-self:flex-start;background:#fff;color:#17131F;border-bottom-left-radius:.4cqw;display:flex;flex-direction:column;gap:.7cqw}
.bot .row{display:flex;justify-content:space-between;gap:2cqw;font-size:1.35cqw;padding-top:.6cqw;border-top:1px solid #EEE9F4}
.bot .row code{font-family:var(--mono);font-size:1.25cqw}
.tool{align-self:flex-start;font-size:1.1cqw;font-family:var(--mono);color:#C9B8E8;border:1px solid rgba(201,184,232,.35);border-radius:999px;padding:.4cqw 1cqw}
.dots{align-self:flex-start;display:flex;gap:.5cqw;padding:1.2cqw 1.6cqw;background:#fff;border-radius:1.4cqw}
.dots i{width:.8cqw;height:.8cqw;border-radius:50%;background:#B9AED0}

.s6{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.2cqw;padding:0 8cqw}
.trio{display:flex;gap:2.4cqw;width:100%;justify-content:center}
.trio div{flex:1;max-width:24cqw;border-top:.25cqw solid var(--purple-hi);padding-top:1.4cqw}
.trio b{display:block;font-size:2.1cqw;font-weight:800}
.trio span{font-size:1.35cqw;color:var(--fg-2)}
.end{display:flex;flex-direction:column;align-items:center;gap:1.4cqw}
.end code{font-family:var(--mono);font-size:2cqw;color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:1cqw;padding:1cqw 1.8cqw}
.end small{font-size:1.1cqw;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-3)}

.step{position:absolute;left:8cqw;top:2.2cqw;font-size:1.3cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#E3D8F5;display:flex;align-items:center;gap:1cqw}
.step em{font-style:normal;width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;letter-spacing:0}
.sub{position:absolute;left:50%;bottom:2.4cqw;transform:translateX(-50%);max-width:80%;text-align:center;font-size:1.7cqw;font-weight:500;line-height:1.35;color:#fff;background:rgba(10,8,14,.72);border-radius:.8cqw;padding:.7cqw 1.4cqw;z-index:5;transition:opacity .25s}
.sub:empty{opacity:0}
.bigplay{position:absolute;inset:0;margin:auto;width:8cqw;height:8cqw;border-radius:50%;border:0;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;box-shadow:0 1cqw 3cqw rgba(0,0,0,.4)}
.bigplay svg{width:3cqw;height:3cqw}

.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ctl{font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--ink-2);color:var(--fg);cursor:pointer;font-weight:600;font-size:14px}
.ctl:hover{border-color:rgba(255,255,255,.3)}
.ctl:focus-visible,.langs button:focus-visible,.scenes button:focus-visible,.bigplay:focus-visible{outline:2px solid var(--purple-hi);outline-offset:2px}
.track{flex:1 1 300px;min-width:0;display:flex;align-items:center;gap:12px}
.track input{flex:1;min-width:0;accent-color:var(--purple-hi);height:28px}
.time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--fg-2);white-space:nowrap}
.scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.scenes button{font:inherit;text-align:left;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--ink-2);color:var(--fg);cursor:pointer;min-height:44px}
.scenes button[aria-current="true"]{border-color:var(--purple-hi);background:#221A33}
.scenes span{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.scenes b{font-size:14px;font-weight:600}
.note{font-size:13px;color:var(--fg-3);margin:0;max-width:70ch;line-height:1.55}

html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
img,video{max-width:100%}