@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--bg: #081019;--bg-soft: #0d1722;--panel: rgba(14, 24, 35, .92);--line: rgba(156, 182, 214, .24);--line-strong: rgba(156, 182, 214, .4);--text: #e9f1ff;--text-soft: #a8bbde;--mint: #29d0a3;--blue: #58b5ff;--amber: #ffbd59;--danger: #ff7b88;--radius-lg: 16px;--radius-md: 12px;--radius-sm: 10px;--shadow: 0 16px 28px rgba(2, 8, 15, .35)}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden;color:var(--text);font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif;background:radial-gradient(circle at 14% 10%,rgba(88,181,255,.12),transparent 32%),radial-gradient(circle at 84% 5%,rgba(41,208,163,.1),transparent 28%),linear-gradient(140deg,#050a11,#081019 45%,#0f1c2a)}#root{height:100vh}.sota-shell{max-width:1500px;height:100%;margin:0 auto;padding:10px;display:grid;grid-template-rows:auto 1fr;gap:10px}.studio-bar{border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(160deg,#111c28f5,#0c1621e6);box-shadow:var(--shadow);padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px}.studio-brand{min-width:0}.studio-brand h1{margin:0;font-size:1.08rem;line-height:1.1;letter-spacing:.01em}.studio-brand p{margin:2px 0 0;color:var(--text-soft);font-size:12px}.studio-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pill{border-radius:999px;padding:4px 9px;font-size:10px;letter-spacing:.08em;font-family:IBM Plex Mono,monospace;border:1px solid var(--line)}.pill-ok{background:var(--mint);color:#062019;border-color:#ffffff40}.pill-warn{background:var(--amber);color:#2a1a00;border-color:#ffffff40}.pill-muted{background:#ffffff12;color:#bdd0f2}.pill-neutral{background:#58b5ff2e;color:#dceeff}.workspace-grid.compact{min-height:0;display:grid;gap:10px;grid-template-columns:minmax(0,1.42fr) minmax(350px,.96fr)}.panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(165deg,#0f1a26f5,#0c1520f0);box-shadow:var(--shadow);padding:12px;min-height:0}.panel-title-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.panel h2{margin:0;font-size:.98rem}.inline-metrics{display:flex;gap:6px;flex-wrap:wrap}.inline-metrics span,.chip{border-radius:999px;border:1px solid var(--line);background:#ffffff0f;color:#c0d2f1;padding:3px 7px;font-size:10px;font-family:IBM Plex Mono,monospace}.camera-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;min-height:0}.camera-stage{position:relative;width:min(100%,980px);height:min(56vh,560px);min-height:250px;margin:0 auto;border-radius:var(--radius-md);border:1px solid var(--line-strong);background:#050a11;overflow:hidden}.camera-stage video,.camera-stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;image-rendering:auto}.camera-stage canvas{pointer-events:none}.hud-strip{position:absolute;inset:auto 8px 8px 8px;display:flex;gap:6px;flex-wrap:wrap;font-size:10px;font-family:IBM Plex Mono,monospace}.hud-strip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:#060a10bd;padding:3px 7px}.action-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.btn{border:1px solid transparent;border-radius:999px;padding:7px 11px;cursor:pointer;font-weight:600;font-family:Space Grotesk,sans-serif;transition:transform .14s ease,filter .14s ease,border-color .14s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}.btn:disabled{transform:none;opacity:.45;filter:grayscale(.35);cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#31c6ff,#2a8fff);color:#041326}.btn-accent{background:linear-gradient(135deg,#41d6b4,#12bd94);color:#03211a}.btn-ghost{background:#ffffff0d;color:var(--text);border-color:var(--line)}.btn-soft{background:#ffffff14;color:#d4e2fb;border-color:var(--line);font-size:11px;padding:6px 10px}.quality-grid{display:grid;gap:6px;grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card{border-radius:var(--radius-sm);border:1px solid var(--line);background:#ffffff08;padding:7px}.stat-card h3{margin:0 0 4px;font-size:10px;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;font-family:IBM Plex Mono,monospace}.stat-card p{margin:0;font-size:14px;font-weight:700}.stat-card.ok{border-color:#29d0a373;background:#29d0a317}.stat-card.warn{border-color:#ffbd5970;background:#ffbd591a}.stat-card.pending{border-color:#9cb6d63d;background:#87a6cb0f}.compat-lines{display:flex;gap:8px;flex-wrap:wrap;color:#b5c8e8;font-size:11px;font-family:IBM Plex Mono,monospace}.sidebar-shell{border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(160deg,#111c28f2,#0d1621ed);box-shadow:var(--shadow);padding:10px;min-height:0;display:grid;grid-template-rows:auto 1fr;gap:8px}.sidebar-tab-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.sidebar-tab{border:1px solid var(--line);border-radius:10px;background:#ffffff0a;color:#c4d6f4;font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:6px 4px;cursor:pointer}.sidebar-tab.active{color:#081522;background:linear-gradient(135deg,#3eceff,#1db4ff);border-color:#ffffff4d}.sidebar-stage{min-height:0}.sidebar-stage>[role=tabpanel]{min-height:0;height:100%}.sidebar-stage>[role=tabpanel]>.panel{height:100%;margin:0;overflow:auto}.panel-load{border:1px dashed var(--line);border-radius:11px;padding:16px 12px;color:var(--text-soft);text-align:center;font-size:12px;font-family:IBM Plex Mono,monospace}.integration-shell{max-width:1500px;height:100%;margin:0 auto;padding:10px;display:grid;grid-template-rows:auto 1fr;gap:10px}.integration-topbar{padding:12px 14px}.integration-nav{display:flex;gap:7px;flex-wrap:wrap}.integration-nav a{text-decoration:none;border:1px solid var(--line);border-radius:999px;background:#ffffff0f;color:var(--text);padding:6px 11px;font-size:11px;font-family:IBM Plex Mono,monospace}.integration-nav a:hover{filter:brightness(1.08)}.integration-body{min-height:0;display:grid;gap:10px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr)}.integration-primary,.integration-sidebar{display:grid;align-content:start;gap:10px;min-height:0}.integration-sidebar{overflow:auto}.integration-description{margin:0;color:var(--text-soft);font-size:13px}.integration-demo-grid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) minmax(260px,.82fr)}.integration-live-card,.integration-output-card{border:1px solid var(--line);border-radius:var(--radius-md);background:#ffffff08;padding:10px;display:grid;align-content:start;gap:10px;min-height:0}.integration-output-card h3{margin:0;font-size:.92rem}.integration-camera-stage{position:relative;width:100%;height:min(50vh,460px);min-height:240px;border-radius:var(--radius-md);border:1px solid var(--line-strong);background:#040a12;overflow:hidden}.integration-camera-stage video,.integration-camera-stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain}.integration-chip-row{display:flex;gap:6px;flex-wrap:wrap}.integration-note{margin:0;color:var(--text-soft);font-size:12px;font-family:IBM Plex Mono,monospace}.integration-capture-preview{width:100%;max-height:40vh;border-radius:var(--radius-md);border:1px solid var(--line-strong);object-fit:contain;background:#060c14}.snippet-stack{display:grid;gap:10px}.snippet-card{border:1px solid var(--line);border-radius:var(--radius-md);background:#ffffff08;overflow:hidden}.snippet-header{padding:8px 9px;border-bottom:1px solid rgba(156,182,214,.18);display:flex;align-items:center;justify-content:space-between;gap:8px}.snippet-header h3{margin:0;font-size:12px}.snippet-header span{color:var(--text-soft);font-size:10px;font-family:IBM Plex Mono,monospace}.snippet-pre{margin:0;padding:10px;overflow:auto;background:#060a10e6;color:#d2e2ff;font-size:12px;line-height:1.4;font-family:IBM Plex Mono,monospace}.js-demo-mount{min-height:min(70vh,760px)}.control-panel{display:grid;gap:9px;align-content:start}.preset-row{display:flex;gap:6px;flex-wrap:wrap}.control-group{display:grid;gap:5px}.control-group label{color:#cad9f4;font-size:11px;font-family:IBM Plex Mono,monospace}.helper-text{color:var(--text-soft);font-size:10px;font-family:IBM Plex Mono,monospace}.control-group input,.control-group select{width:100%;border-radius:10px;border:1px solid var(--line);background:#080e16d9;color:var(--text);padding:7px 9px;font-size:13px}.control-grid{display:grid;gap:7px}.control-grid.two{grid-template-columns:1fr 1fr}.control-grid.three{grid-template-columns:repeat(3,1fr)}.toggle{border:1px solid var(--line);border-radius:10px;background:#ffffff08;display:flex;align-items:center;gap:7px;padding:8px}.toggle span{font-size:12px}.toggle input{accent-color:#27c89f}.copy-status{color:#9bd9ff;font-size:11px;font-family:IBM Plex Mono,monospace}.shortcut-grid{display:grid;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}.shortcut-grid div{border:1px solid var(--line);border-radius:10px;background:#ffffff08;padding:7px;display:grid;gap:2px}.shortcut-grid span{color:var(--text-soft);font-size:10px;font-family:IBM Plex Mono,monospace}.shortcut-grid strong{font-size:11px;font-weight:600}.diag-table{border:1px solid var(--line);border-radius:11px;overflow:hidden}.diag-table div{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-bottom:1px solid rgba(156,182,214,.15);font-size:11px}.diag-table div:last-child{border-bottom:none}.diag-table span{color:var(--text-soft)}.diag-table strong{font-family:IBM Plex Mono,monospace;font-weight:500}.capture-panel{display:grid;gap:10px;align-content:start}.capture-preview{width:100%;max-height:40vh;border-radius:var(--radius-md);border:1px solid var(--line-strong);object-fit:contain;background:#060c14}.adjusted-block h3{margin:0 0 7px;font-size:.85rem}.adjusted-preview{max-height:32vh}.compare-stage{position:relative}.compare-stage .overlay{position:absolute;top:0;right:0;bottom:0;left:0}.compare-labels{position:absolute;inset:auto 8px 8px 8px;display:flex;justify-content:space-between;pointer-events:none}.compare-labels span{border-radius:999px;border:1px solid var(--line);background:#060b12c7;font-size:10px;font-family:IBM Plex Mono,monospace;padding:2px 7px}.compare-slider{margin-top:7px;display:grid;gap:5px}.compare-slider span{color:var(--text-soft);font-size:10px;font-family:IBM Plex Mono,monospace}.compare-slider input{width:100%}.capture-meta{display:flex;gap:6px;flex-wrap:wrap;color:#c1d5f7;font-size:10px;font-family:IBM Plex Mono,monospace}.capture-meta span{border:1px solid var(--line);border-radius:999px;background:#ffffff0d;padding:3px 7px}.thumb-strip{display:flex;gap:7px;flex-wrap:wrap}.thumb{width:74px;aspect-ratio:3 / 4;border-radius:9px;border:1px solid var(--line);overflow:hidden;padding:0;background:#ffffff0a;cursor:pointer}.thumb img{width:100%;height:100%;object-fit:cover}.thumb.active{border-color:#3ad2b1;box-shadow:0 0 0 2px #3ad2b133}.empty-state{border:1px dashed var(--line);border-radius:var(--radius-md);color:var(--text-soft);text-align:center;padding:20px 14px;font-size:13px}.event-panel{display:grid;grid-template-rows:auto 1fr;gap:8px}.event-list{margin:0;padding:0;list-style:none;display:grid;gap:6px;overflow:auto}.event-item{border:1px solid var(--line);border-radius:10px;background:#ffffff08;padding:7px 8px;display:grid;gap:3px;font-size:11px}.event-item span:first-child{color:var(--text-soft);font-size:10px;font-family:IBM Plex Mono,monospace}.event-item.warn{border-color:#ffbd5973;background:#ffbd591a}.event-item.error{border-color:#ff7b8873;background:#ff7b881f}.insight-panel{display:grid;gap:10px}.insight-grid{display:grid;gap:7px;grid-template-columns:repeat(3,minmax(0,1fr))}.sparkline-wrap{border:1px solid var(--line);border-radius:var(--radius-md);padding:9px;background:#ffffff08}.sparkline{width:100%;height:130px;display:block}.sparkline-legend{margin-top:7px;display:flex;gap:7px;flex-wrap:wrap}.sparkline-legend span{border:1px solid var(--line);border-radius:999px;background:#ffffff08;padding:3px 8px;font-size:10px;font-family:IBM Plex Mono,monospace}@media(max-width:1150px){body{overflow:auto}#root,.sota-shell{height:auto;min-height:100vh}.workspace-grid.compact,.integration-body,.integration-demo-grid{grid-template-columns:1fr}.camera-stage{height:min(52vh,460px)}}@media(max-width:760px){.sota-shell{padding:8px;gap:8px}.studio-bar{flex-direction:column;align-items:flex-start}.panel{padding:10px}.sidebar-tab-row{grid-template-columns:1fr 1fr}.control-grid.two,.control-grid.three,.quality-grid,.insight-grid,.shortcut-grid{grid-template-columns:1fr}.camera-stage{height:min(48vh,380px);min-height:220px}.integration-camera-stage{height:min(46vh,360px);min-height:220px}.capture-preview,.adjusted-preview,.integration-capture-preview{max-height:30vh}.btn{width:100%}}