body{height:100dvh;overflow:hidden}.app-header{padding:15px 22px}.brand-title{font-size:18px}.brand-eyebrow{font-size:8px;letter-spacing:2px;color:#728c9c;margin-bottom:5px}.brand-copy{display:block}.demoBadge{font-size:9px;color:#82cbbb;padding:5px 9px;background:#16312f;border:1px solid #2d635a;border-radius:15px;margin-left:12px}.demoNotice{font-size:10px;color:#7b95a4;padding:10px 22px;border-bottom:1px solid #20303a;background:#0c151b}.app-main{display:grid;grid-template-columns:300px minmax(0,1fr);flex:1;min-height:0;gap:0;overflow:hidden}.side-panel{width:auto;min-width:0;min-height:0;background:#101820;border-right:1px solid #22313b;display:flex;flex-direction:column;overflow:hidden}.tabs{padding:12px 10px;display:flex;gap:4px;border-bottom:1px solid #22313b}.tab{flex:1;white-space:nowrap;font-size:11px;padding:10px 7px}.tab-body{overflow:auto;padding:18px 17px 28px;flex:1;min-height:0}.demoStage{overflow:auto;padding:22px 26px;min-width:0;min-height:0;background:radial-gradient(ellipse at 50% 30%,#15302f36,transparent 70%)}.stageHeader{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.stageHeader small{font-size:7px;letter-spacing:2px;color:#547d80}.stageHeader h2{font-size:19px;font-weight:400;margin:8px 0 0;color:#d4e6e7}.stageHeader>span{font-size:8px;color:#5b7783;white-space:nowrap}.recording{position:relative;overflow:hidden;background:#040a0d;border:1px solid #2b4149;border-radius:12px;box-shadow:0 12px 55px #0005}.recording video{width:100%;max-height:calc(100dvh - 300px);min-height:210px;display:block;object-fit:contain}#startOverlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;background:#04101155;color:#edfffa;border:0;backdrop-filter:blur(1px)}#startOverlay span{font-size:36px;width:70px;height:70px;display:grid;place-items:center;border:1px solid #a7ddcf88;border-radius:50%;background:#1937358c}#startOverlay b{font-weight:400;font-size:15px;letter-spacing:3px}#startOverlay small{font-size:9px;color:#99b6ba}.chapterBar{display:flex;gap:9px;margin-top:15px}.chapterBar button{flex:1;background:#121f27;border:1px solid #283f47;border-radius:7px;padding:11px 7px;font-size:10px;color:#78979e;transition:all .25s}.chapterBar button:hover,.chapterBar button[aria-pressed=true]{border-color:#3f998d;background:#163730;color:#a3e7d5}.transport{display:flex;gap:8px;align-items:center;margin-top:15px;flex-wrap:wrap}.transport .btn{font-size:10px;padding:9px 13px}.transport>span{margin-left:auto;font-size:9px;color:#68828b;font-variant-numeric:tabular-nums}.stageNote{font-size:9px;color:#55747f;line-height:1.9;margin-top:14px}.demoField{display:block;margin-bottom:18px;font-size:11px;color:#b4c7cc}.demoField small{display:block;color:#56737e;font-size:9px;line-height:1.8;margin-top:7px}.demoField input,.demoField textarea,.demoField select{display:block;width:100%;border:1px solid #2a404a;border-radius:7px;padding:10px;background:#0c141b;color:#9eb7c0;font:11px/1.8 "Microsoft YaHei",sans-serif;margin-top:8px}.demoField textarea{min-height:95px;resize:vertical}.modeSwitch{display:flex;gap:7px;margin:9px 0 20px}.modeSwitch button{flex:1;padding:10px 5px;border:1px solid #2e4b52;border-radius:7px;color:#688b94;background:#0e1c24;font-size:10px}.modeSwitch button[aria-pressed=true]{background:#153b34;color:#a0e6d1;border-color:#398b7b}.avatarSample{width:100%;height:125px;object-fit:cover;object-position:50% 36%;border-radius:8px;border:1px solid #2a424b;margin-top:9px}.switchDemo{display:flex;align-items:center;gap:9px;font-size:10px;color:#89a8b1;margin:13px 0}.switchDemo input{accent-color:#2dd4bf}.panelIntro{font-size:10px;line-height:1.9;color:#6f8b98;margin:0 0 18px}.sampleRow{width:100%;padding:15px 12px;border:1px solid #283d47;background:#101f27;border-radius:8px;text-align:left;color:#b1c7ce;margin-bottom:11px;cursor:pointer}.sampleRow strong{font-size:12px;font-weight:400;display:block}.sampleRow small{display:block;font-size:9px;color:#63828d;margin-top:8px;line-height:1.7}.sampleRow[aria-pressed=true]{border-color:#419a89;background:#14342f}.panelAction{width:100%;margin-top:10px}.panelInfo{margin:15px 0;padding:13px;border-left:1px solid #398578;background:#14312860;color:#87b5b1;font-size:10px;line-height:1.9}.status-pill{font-size:10px;color:#7fb5aa;white-space:nowrap}.tab.active{color:#8ce0cb;background:#173d35}.btn{cursor:pointer}button:focus-visible{outline:2px solid #65ccba;outline-offset:3px}[hidden]{display:none!important}#demoToast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:13px 19px;border:1px solid #2d6b60;border-radius:8px;background:#12372ff5;color:#ade9d7;font-size:10px;line-height:1.8;max-width:85%;opacity:0;pointer-events:none;transition:opacity .2s}#demoToast.show{opacity:1}@media(max-width:850px){.app-main{grid-template-columns:245px minmax(0,1fr)}.demoStage{padding:18px 16px}.stageHeader{display:block}.stageHeader h2{font-size:15px}.stageHeader>span{display:none}.tab{font-size:10px;padding:9px 4px}.tab-body{padding:16px 13px}.chapterBar{gap:5px}.chapterBar button{font-size:8px;padding:10px 5px}.recording video{min-height:180px}.demoNotice{font-size:8px}.stageNote{font-size:8px}.transport .btn{font-size:9px;padding:8px 9px}}@media(max-width:560px){body{height:auto;overflow:auto}.app{height:auto;min-height:100dvh}.app-main{display:flex;flex-direction:column;overflow:visible}.side-panel{border-right:0;order:2}.tab-body{max-height:350px}.demoStage{order:1;overflow:visible}.recording video{max-height:55vh;min-height:160px}.brand-title{font-size:15px}.demoBadge{margin-left:3px;font-size:8px}.app-header{padding:13px}.demoNotice{padding:9px 13px}.status-pill{font-size:8px}.chapterBar button{font-size:9px}.transport>span{font-size:8px}.stageHeader h2{font-size:17px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}