:root{color-scheme:dark;font-family:Avenir Next,Segoe UI,PingFang SC,sans-serif;line-height:1.5;font-weight:400;background:radial-gradient(circle at top left,rgba(80,178,255,.18),transparent 28%),radial-gradient(circle at top right,rgba(255,127,80,.14),transparent 24%),linear-gradient(180deg,#08111f,#0c1629);color:#e7eefc}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,textarea{font:inherit}code{font-family:SF Mono,JetBrains Mono,monospace}.app-shell{width:min(1440px,calc(100vw - 32px));margin:0 auto;padding:28px 0 40px}.hero{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px;padding:28px;border:1px solid rgba(159,182,218,.16);border-radius:24px;background:linear-gradient(135deg,#0d182ceb,#111d32d6);box-shadow:0 24px 80px #02081259}.eyebrow{margin:0 0 8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#7ea7ff}.hero h1{margin:0;font-size:clamp(30px,5vw,48px);line-height:1.05}.hero-copy{max-width:760px;margin:12px 0 0;color:#b6c5e3}.layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.panel{grid-column:span 4;padding:20px;border:1px solid rgba(159,182,218,.14);border-radius:20px;background:#0a1324d1;box-shadow:inset 0 1px #ffffff08}.panel-viewer,.panel-log{grid-column:span 8}.panel-header,.panel-subheader{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.action-message{margin-bottom:16px;padding:12px 14px;border-radius:14px;border:1px solid rgba(137,159,199,.2);background:#121e34eb;color:#dce8ff}.action-message.is-hidden{display:none}.action-message.is-error{border-color:#ff7f7373;background:#4a1418e6;color:#ffd6d1}.action-message.is-success{border-color:#31da8f66;background:#0c3826e0;color:#d8ffed}.panel-subheader{align-items:flex-end;margin-top:20px}.panel h2,.panel h3{margin:0;font-size:18px}.panel h3{font-size:15px}.muted{color:#8fa1c4}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field-grid-compact{grid-template-columns:repeat(5,minmax(0,1fr))}.field{display:flex;flex-direction:column;gap:8px}.field span{font-size:13px;color:#b7c8ea}.field input,.field textarea{width:100%;padding:12px 14px;border:1px solid rgba(133,157,199,.22);border-radius:14px;background:#040a15ad;color:#edf3ff;outline:none;transition:border-color .12s ease,transform .12s ease}.field input:focus,.field textarea:focus{border-color:#76a3ff;transform:translateY(-1px)}.field textarea{resize:vertical;min-height:120px}.field textarea[readonly]{opacity:.88}.field-token{grid-column:1 / -1}.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px;padding:16px;border:1px dashed rgba(137,159,199,.22);border-radius:16px;background:#060d1a66}.qr-wrap canvas{width:min(220px,100%);max-width:220px;height:auto;border-radius:12px;background:#fff;padding:10px}.qr-wrap p{margin:0;text-align:center}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.btn{padding:11px 14px;border:1px solid rgba(142,165,205,.2);border-radius:999px;background:#162239eb;color:#eff5ff;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.btn:hover:not(:disabled){transform:translateY(-1px);border-color:#7ea7ff85;background:#1f2e4cfa}.btn:disabled{cursor:not-allowed;opacity:.45}.btn-primary{background:linear-gradient(135deg,#4487ff,#42c0ff);color:#041223;border-color:transparent;font-weight:700}.btn-inline{padding-inline:12px}.btn.is-selected{border-color:#7ea7ffb8;background:#263d65fa}.status-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:#1b2841db}.status-chip:before{content:"";width:8px;height:8px;border-radius:50%;background:#8aa4d8}.status-chip.is-connected:before{background:#31da8f}.status-chip.is-idle:before{background:#8aa4d8}.status-chip.is-error:before{background:#ff7f73}.status-chip.is-reconnecting:before{background:#ffcc5c}.meta-list{display:grid;gap:12px;margin:18px 0 0}.meta-list div{display:grid;grid-template-columns:100px 1fr;gap:12px}.meta-list dt{color:#8fa1c4}.meta-list dd{margin:0}.video-stage{position:relative;min-height:480px;border:1px solid rgba(137,159,199,.2);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#131c30e0,#090f1deb),repeating-linear-gradient(135deg,rgba(121,148,199,.08),rgba(121,148,199,.08) 16px,transparent 16px,transparent 32px)}.video-stage video,.gesture-surface,.stage-empty{position:absolute;top:0;right:0;bottom:0;left:0}.video-stage video{width:100%;height:100%;object-fit:contain;background:#01060f99}.gesture-surface{cursor:crosshair;background:transparent}.video-stage.is-empty .gesture-surface{pointer-events:none}.stage-empty{display:grid;place-items:center;padding:24px;text-align:center;color:#9db0d4;font-size:15px}.video-stage:not(.is-empty) .stage-empty{display:none}.event-log{margin:0;min-height:220px;max-height:440px;overflow:auto;padding:16px;border-radius:16px;background:#030912eb;color:#d9e5ff;font-family:SF Mono,JetBrains Mono,monospace;font-size:12px;line-height:1.65}@media (max-width: 1180px){.panel,.panel-viewer,.panel-log{grid-column:span 12}.field-grid-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 720px){.app-shell{width:min(100vw - 20px,100%);padding-top:18px}.hero,.panel{padding:16px;border-radius:18px}.field-grid,.field-grid-compact{grid-template-columns:1fr}.video-stage{min-height:280px}.meta-list div{grid-template-columns:1fr;gap:4px}}