:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--bg:#09131f;--surface:#101e2c;--surface-raised:#152637;--line:#b7d3e51f;--text:#edf5f8;--muted:#92a8b9;--mint:#87efd0;--mint-hover:#a5f7df;--danger:#ff9b9f;--radius:22px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}*,:before,:after{box-sizing:border-box}body{min-width:280px;min-height:100dvh;color:var(--text);background:radial-gradient(ellipse at 50% 0, #142d3b 0, transparent 55%), var(--bg);overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent;margin:0;line-height:1.65}header,main#app,footer{width:min(100%,1100px);padding-inline:max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));margin-inline:auto}header{padding-top:max(24px, env(safe-area-inset-top));justify-content:space-between;align-items:center;gap:14px;padding-bottom:24px;display:flex}.brand{color:var(--text);letter-spacing:-.4px;align-items:center;gap:11px;font-size:17px;font-weight:750;text-decoration:none;display:inline-flex}.brand-icon{width:36px;height:36px;color:var(--mint);background:#87efd01a;border:1px solid #87efd040;border-radius:11px;flex-shrink:0;place-items:center;display:grid}.brand-icon svg{width:21px;height:21px}.badge,.tag{border:1px solid var(--line);color:var(--muted);border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:600;line-height:1.6;display:inline-flex}main#app{padding-top:16px;padding-bottom:32px}.hero{text-align:center;max-width:720px;margin:22px auto 32px}.eyebrow{color:var(--mint);letter-spacing:.16em;margin:0 0 14px;font-size:11px;font-weight:700}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.055em;text-wrap:balance;margin-bottom:18px;font-size:clamp(32px,6vw,56px);font-weight:750;line-height:1.18}h2{letter-spacing:-.025em;margin-bottom:6px;font-size:20px;font-weight:700;line-height:1.4}h3{margin-bottom:6px;font-size:15px;line-height:1.5}.hero em{color:var(--mint);font-style:normal}.hero p{max-width:560px;color:var(--muted);text-wrap:pretty;margin:0 auto;font-size:15px;line-height:1.9}.features{gap:12px;margin-bottom:24px;display:grid}.feature{border:1px solid var(--line);background:#101e2ca6;border-radius:16px;padding:18px;font-size:14px}.feature>svg,.feature>.icon{width:22px;height:22px;color:var(--mint);margin-bottom:10px}.feature p{color:var(--muted);margin-bottom:0;font-size:13px}.panel,.preview-panel,.controls-panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#172938d9,#0f1c29f2);min-width:0;padding:22px;box-shadow:0 16px 48px #0000001f}.panel+.panel{margin-top:18px}.panel-head{margin-bottom:22px}.panel-head p,.panel>p{color:var(--muted);margin-bottom:0;font-size:14px}.actions,.toolbar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.actions>.button,.actions>button{flex:180px}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button,.button{border:1px solid var(--line);background:var(--surface-raised);min-height:48px;color:var(--text);text-align:center;cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:9px;padding:11px 20px;font-size:14px;font-weight:650;line-height:1.5;text-decoration:none;transition:background-color .18s,border-color .18s,box-shadow .18s;display:inline-flex}.button svg,button svg{flex-shrink:0;width:18px;height:18px}.primary{background:var(--mint);color:#08271f;border-color:#0000;box-shadow:0 4px 18px #87efd01a}.secondary{color:var(--text);background:#b7d3e50b;border-color:#b7d3e533}.danger{color:var(--danger);background:#ff9b9f14;border-color:#ff9b9f40}:where(button,.button,a,input,select,summary):focus-visible{outline:3px solid var(--mint);outline-offset:4px}button:disabled,.button:disabled,.button[aria-disabled=true]{opacity:.45;box-shadow:none;cursor:not-allowed}@media (hover:hover){button:not(:disabled):hover,.button:not(:disabled):not([aria-disabled=true]):hover{background-color:#20364a;border-color:#b7d3e559}.primary:not(:disabled):not([aria-disabled=true]):hover{background-color:var(--mint-hover);border-color:#0000}.danger:not(:disabled):not([aria-disabled=true]):hover{background-color:#ff9b9f29;border-color:#ff9b9f80}}.muted,.hint{color:var(--muted)}.hint{margin:10px 0 0;font-size:12px;line-height:1.8}.error{color:var(--danger);font-size:13px}.status{color:var(--muted);flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;display:inline-flex}.dot{background:currentColor;border-radius:50%;flex:none;width:7px;height:7px;display:inline-block}.online,.status.online{color:var(--mint)}.offline,.status.offline{color:var(--muted)}.status.online .dot,.dot.online{box-shadow:0 0 0 4px #87efd017}.steps3{counter-reset:setup-step;gap:20px;margin-top:32px;display:grid}.step{min-width:0;color:var(--muted);counter-increment:setup-step;padding-left:42px;font-size:13px;position:relative}.step>b{display:none}.step:before{border:1px solid var(--line);width:28px;height:28px;color:var(--mint);content:counter(setup-step, decimal-leading-zero);border-radius:9px;place-items:center;font-size:12px;font-weight:700;display:grid;position:absolute;top:0;left:0}.step h3,.step strong{color:var(--text)}.step p{margin-bottom:0}.session-grid{align-items:start;gap:18px;display:grid}.controls-panel{box-shadow:none;background:0 0;border:0;padding:0!important}.preview-panel{padding:14px}.preview-panel>.toolbar{margin:0 0 14px}.preview-panel>.actions{margin-top:14px}.preview{aspect-ratio:9/16;background:#050b12;border:1px solid #b7d3e514;border-radius:14px;width:min(100%,36.5625dvh);max-width:100%;height:auto;max-height:65dvh;margin-inline:auto;position:relative;overflow:hidden}.preview.wide{aspect-ratio:16/9;width:100%}.preview video,.preview canvas{object-fit:contain;width:100%;height:100%;display:block;position:absolute;inset:0}#preview-video{object-fit:contain;width:100%;height:100%}.mirror{transform:scaleX(-1)}.placeholder{color:var(--muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;font-size:13px;display:flex;position:absolute;inset:0}.placeholder svg{color:#567185;width:36px;height:36px}.placeholder p{margin:0}.field{flex-direction:column;gap:8px;min-width:0;margin-bottom:18px;display:flex}.field>span{color:#c5d5df;font-size:13px;font-weight:550}input:not([type=checkbox]):not([type=radio]),select{width:100%;min-width:0;min-height:48px;color:var(--text);background:#0b1723;border:1px solid #b7d3e52b;border-radius:11px;padding:11px 13px;font-size:16px;line-height:1.5;display:block}select{cursor:pointer;padding-right:32px}input::placeholder{color:#6e879a}input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.field-row{gap:0 14px;display:grid}.switch-line{color:#c5d5df;cursor:pointer;align-items:center;gap:12px;min-height:48px;margin-bottom:14px;font-size:14px;display:flex}.switch-line input[type=checkbox]{width:22px;height:22px;accent-color:var(--mint);cursor:pointer;flex:none;margin:0}.link-box{border:1px solid var(--line);background:#050b1240;border-radius:14px;flex-wrap:wrap;gap:8px;min-width:0;margin:14px 0;padding:8px;display:flex}.link-box input{flex:150px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.link-box button{flex:1 0 auto}.qr{justify-content:center;margin:20px auto;display:flex}.qr img{object-fit:contain;background:#fff;border-radius:12px;width:160px;max-width:100%;height:160px;padding:10px;display:block}.notice{color:#afc8ce;background:#87efd00b;border:1px solid #87efd026;border-radius:12px;margin-block:16px;padding:13px 15px;font-size:13px;line-height:1.8}.notice p:last-child{margin-bottom:0}.stats{color:var(--muted);font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:14px;font-size:12px;display:flex}.stats strong{color:var(--text);font-weight:600}.toolbar{justify-content:space-between;margin-top:14px}details.guide{border:1px solid var(--line);color:var(--muted);border-radius:14px;margin-top:24px;padding:16px 18px;font-size:13px}details.guide summary{color:#cedde5;cursor:pointer;min-height:32px;font-size:14px;font-weight:550}details.guide summary::marker{color:var(--mint)}details.guide[open] summary{margin-bottom:12px}details.guide p:last-child{margin-bottom:0}footer{padding-top:20px;padding-bottom:max(28px, env(safe-area-inset-bottom));color:#71899c;text-align:center;font-size:12px}footer a,.notice a,details.guide a{color:var(--mint);text-underline-offset:3px;text-decoration-thickness:1px}.toast{z-index:100;right:max(20px, env(safe-area-inset-right));bottom:max(24px, env(safe-area-inset-bottom));left:max(20px, env(safe-area-inset-left));color:#e4fff6;text-align:center;background:#18352f;border:1px solid #87efd040;border-radius:14px;width:fit-content;max-width:min(480px,100% - 40px);margin-inline:auto;padding:12px 20px;font-size:14px;position:fixed;box-shadow:0 12px 40px #0000004d}html:has(body.viewer){color-scheme:normal;background:0 0}body.viewer{background:0 0;width:100vw;min-width:0;height:100vh;min-height:0;margin:0;padding:0;overflow:hidden}body.viewer>:not(#app):not(#output):not(#remote-video):not(#viewer-status),body.viewer header,body.viewer footer,body.viewer #app>:not(#output):not(#remote-video):not(#viewer-status){display:none!important}body.viewer #app,body.viewer #output{background:0 0;border:0;border-radius:0;width:100vw;max-width:none;height:100vh;max-height:none;margin:0;padding:0;display:block}body.viewer #output{object-fit:contain;position:fixed;inset:0}body.viewer #remote-video{opacity:.01;pointer-events:none;width:320px;height:240px;display:block;position:fixed;top:0;left:-9999px}#viewer-status{z-index:10;bottom:max(24px, env(safe-area-inset-bottom));color:#cedde5;text-align:center;pointer-events:none;background:#09131fe6;border:1px solid #b7d3e529;border-radius:999px;justify-content:center;align-items:center;gap:9px;width:max-content;max-width:calc(100vw - 40px);padding:10px 18px;font-size:13px;line-height:1.5;display:flex;position:fixed;left:50%;transform:translate(-50%)}#viewer-status.online,body.viewer.online #viewer-status{display:none}body.viewer:has(#output.online) #viewer-status{display:none}body.viewer:has(#remote-video.online) #viewer-status{display:none}.hidden{display:none!important}@media (width>=480px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}.link-box button{flex-grow:0}}@media (width>=640px){header,main#app,footer{padding-inline:max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right))}header{padding-top:max(32px, env(safe-area-inset-top));padding-bottom:32px}.hero{margin-top:36px;margin-bottom:40px}.hero p{font-size:16px}.features,.steps3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.feature{padding:22px}.panel,.controls-panel{padding:28px}.steps3{margin-top:36px}.badge{font-size:12px}}@media (width>=860px){.session-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px}.preview-panel{padding:18px}.hero{margin-top:48px;margin-bottom:44px}.steps3{gap:28px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}