:root{color-scheme:light;--ink:#203b47;--muted:#566d73;--line:#ccd9d7;--teal:#176c67;--paper:#fafbf8;--gold:#dfc38a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI","Microsoft YaHei",sans-serif}a{color:var(--teal);text-underline-offset:5px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b27d30;outline-offset:4px}[hidden]{display:none!important}.topbar,footer{max-width:1440px;margin:auto;padding:24px 36px;display:flex;justify-content:space-between;gap:16px;font-size:13px}.topbar>span{font:11px Consolas,monospace;letter-spacing:2px;color:var(--muted)}main{max-width:1440px;margin:auto;padding:12px 36px 50px}.intro{padding:12px 0 28px}.eyebrow{font:11px Consolas,monospace;letter-spacing:2px}.intro h1{font-family:"Georgia","Microsoft YaHei",serif;font-size:clamp(30px,4vw,48px);font-weight:500;letter-spacing:-1px;margin:10px 0}.intro>p:last-child{color:var(--muted);font-size:14px;line-height:1.8}.studio{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(290px,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 18px 50px #203b4709}.stage{position:relative;min-height:610px;overflow:hidden;color:#f5f5ec;background:#163e47;background-image:radial-gradient(ellipse at 75% 30%,#37726f80,transparent 60%),linear-gradient(120deg,transparent 50%,#ffffff04 50%)}.stage:before{content:"";position:absolute;width:540px;height:540px;right:-100px;top:90px;border:1px solid #d5c28c25;border-radius:50%;box-shadow:0 0 0 45px #d5c28c07,0 0 0 90px #d5c28c04}.stage-top{position:relative;display:flex;justify-content:space-between;gap:10px;padding:28px 30px;align-items:center}.brand{font-size:20px;letter-spacing:3px}.brand small{display:block;font:9px Consolas,monospace;letter-spacing:4px;color:#afc8c7;margin-top:6px}.stage-badge{font-size:10px;border:1px solid #8eaaa7;border-radius:30px;padding:6px 10px;color:#dbe8df}.stage-left{position:relative;margin:18px 0 0 36px;width:45%;z-index:1}.stage-left>.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2px}.stage-left h2{font-size:clamp(24px,2.7vw,38px);line-height:1.45;letter-spacing:2px;font-weight:500;margin:14px 0}.stage-description{font-size:14px;line-height:1.9;color:#bcd0cd}.sample{margin-top:28px;border-left:2px solid #d0b273;padding:10px 0 10px 14px}.sample span,.sample small{font-size:10px;color:#b8cdca}.sample strong{display:block;color:var(--gold);font-size:17px;margin:8px 0}.sample p{font-size:12px;margin:7px 0}.host-slot{position:absolute;width:53%;height:450px;right:0;bottom:135px}.host-slot>div{height:100%}.host-slot .virtual-host{max-width:none;width:100%;height:100%}.host-name{position:absolute;right:36px;bottom:160px;text-align:right;z-index:2}.host-name strong{display:block;font-size:16px;letter-spacing:2px}.host-name strong span{font:10px Consolas,monospace;color:var(--gold)}.host-name small{display:block;font-size:10px;color:#bed2cc;margin-top:5px}.stage-caption{position:absolute;bottom:0;left:0;width:100%;padding:18px 30px 20px;background:#102d35ee;min-height:135px;z-index:3}.stage-caption>span{font-size:10px;color:var(--gold);letter-spacing:1px}.stage-caption p{font-size:14px;line-height:1.8;margin:7px 0 0}.stage-caption [lang=en]{font-size:11px;color:#b8cdc8;line-height:1.6}.stage-meter{display:flex;align-items:center;gap:4px;height:28px;position:absolute;bottom:160px;left:36px}.stage-meter i{width:3px;height:20px;background:#a9c8ba;transform:scaleY(.1);transform-origin:center}.console{padding:28px 26px;min-width:0}.console-heading{display:flex;justify-content:space-between;gap:8px;align-items:center}.console-heading .eyebrow{font-size:9px;letter-spacing:1px}.console-heading p{font-size:10px;color:var(--teal);margin:0}.console h2{font-size:23px;font-weight:500;margin:25px 0 8px}.console-lead{font-size:12px;color:var(--muted);margin:0 0 24px}.chapters{list-style:none;padding:0;margin:0 0 24px}.chapters li+li{margin-top:7px}.chapters button{display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:13px 12px;border:1px solid transparent;background:#f5f7f4;color:var(--muted);border-radius:5px;transition:background .2s}.chapters button[aria-current=step]{border-color:#82aaa1;background:#e8f1ec;color:var(--teal)}.chapters b{font:13px Consolas,monospace}.chapters span{font-size:13px}.chapters small{display:block;font-size:9px;letter-spacing:.5px;margin-top:6px}.transport{display:flex;gap:8px}.transport button{border:1px solid var(--line);background:white;color:var(--ink);padding:11px 15px;border-radius:5px;font-size:12px;min-height:42px}.transport #play{flex:1;background:var(--teal);border-color:var(--teal);color:white}.timeline-label{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:21px}.timeline-label output{font-family:Consolas,monospace}#timeline{width:100%;accent-color:var(--teal);margin:12px 0 15px;min-height:24px}.motion-option{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.console-note{font-size:11px;line-height:1.9;color:var(--muted);margin-top:16px}.signal-path{display:flex;justify-content:space-between;gap:6px;border-top:1px solid var(--line);padding-top:17px;margin-top:24px;font-size:10px;color:var(--teal)}.signal-path i{font-style:normal;color:#819591}.reading{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin:48px 0}.reading h2{font-size:28px;font-weight:500}.reading h3{font-size:17px}.reading p{font-size:13px;color:var(--muted);line-height:2}.reading a,.transcript a{font-size:12px}.transcript{border-top:1px solid var(--line);padding-top:20px}.transcript h2{font-size:20px;font-weight:500}.transcript h3{font-size:14px}.transcript p{font-size:13px;line-height:1.9;max-width:960px}.transcript [lang=en]{color:var(--muted);font-size:12px}footer{border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.studio:not([data-state=playing]) .host-slot *,body[data-reduced=true] .host-slot *{animation-play-state:paused!important}body[data-reduced=true] .host-slot *{animation:none!important}.studio:not([data-state=playing]) .host-mouth{opacity:0!important}.studio[data-state=playing] .host-mouth{animation:none;opacity:1}.capture-mode .topbar,.capture-mode .intro,.capture-mode .reading,.capture-mode .transcript,.capture-mode footer{display:none}.capture-mode main{padding:0;max-width:none}.capture-mode .studio{height:720px;border:0;border-radius:0;grid-template-columns:minmax(0,2.2fr) minmax(300px,1fr)}.capture-mode .stage{min-height:720px}.capture-mode .host-slot{height:510px;bottom:135px}.capture-mode .stage-left{margin-top:35px}.capture-mode .stage-left h2{font-size:42px}.capture-mode .console{padding:34px}.capture-mode .console h2{margin-top:42px}.capture-mode .chapters{margin:30px 0}.capture-mode .stage-caption{min-height:135px}.capture-mode .console-note{margin-top:24px}
@media(max-width:900px){.studio{grid-template-columns:1fr}.stage{min-height:570px}.console{padding:24px}.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.chapters li+li{margin:0}.chapters button{height:100%;gap:8px}.chapters small{font-size:8px}.console h2{margin-top:12px}.stage-left h2{font-size:36px}.reading{gap:30px}}
@media(max-width:520px){.topbar,footer{padding:20px}.topbar>span{display:none}main{padding:0 16px 30px}.intro{padding:8px 4px 18px}.intro>p:last-child{font-size:12px}.stage{min-height:620px}.stage-top{padding:22px 18px}.brand{font-size:16px}.stage-badge{font-size:8px;padding:5px 7px}.stage-left{margin:24px 0 0 20px;width:53%}.stage-left>.eyebrow{font-size:8px;letter-spacing:1px}.stage-left h2{font-size:25px;letter-spacing:0}.stage-description{font-size:11px}.sample{margin-top:20px;padding-left:10px}.sample strong{font-size:13px}.sample p,.sample small{font-size:9px}.host-slot{width:65%;right:-25px;bottom:190px;height:330px}.host-name{right:20px;bottom:185px}.host-name small{font-size:8px}.stage-caption{min-height:165px;padding:16px 18px}.stage-caption p{font-size:12px}.stage-caption [lang=en]{font-size:10px}.stage-meter{left:20px;bottom:186px}.console{padding:22px 18px}.chapters{display:block}.chapters li+li{margin-top:6px}.chapters button{padding:12px}.chapters small{font-size:9px}.reading{grid-template-columns:1fr;gap:16px;margin-top:32px}.reading h2{font-size:24px}footer{font-size:10px;flex-wrap:wrap}.timeline-label{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.host-slot *{animation:none!important}}
@media(max-width:520px){.stage-left h2{max-width:4em}.host-slot{width:60%;right:-4px}}