.app-shell{background:#171717;grid-template-rows:1fr;height:100%;display:grid}.workspace{grid-template-columns:minmax(0,1fr) 480px;min-height:0;display:grid}.viewport-card{flex-direction:column;justify-content:center;align-items:center;gap:14px;min-width:0;padding:12px 0;transition:filter .45s;display:flex;position:relative;overflow:hidden}.app-shell.is-standby .viewport-card{filter:brightness(.5)saturate(.7)}.lab-link{z-index:30;color:#ffffff8c;letter-spacing:.06em;background:var(--key-face-flat);border-radius:var(--key-radius);height:28px;box-shadow:var(--key-bevel), var(--key-lift);place-items:center;padding:0 12px;font-size:12px;text-decoration:none;transition:color .15s,background .15s;display:grid;position:absolute;top:16px;left:18px}.lab-link:hover{color:#ffffffeb;background:var(--key-face-flat-hover)}.character-frame{height:var(--figure,80%);aspect-ratio:1024/784;position:relative;transform:translateY(2.7%)}.monitor{background:linear-gradient(#3a3b3e,#232427 42%,#1a1b1d);border-radius:24px;padding:18px 18px 0;position:relative;box-shadow:inset 0 1px #ffffff29,0 0 0 1px #0009,0 34px 60px #0009}.monitor-screen{--scene-x:0%;--scene-y:0%;--scene-pad:0;aspect-ratio:3/2;background:#111214;border-radius:14px/20px;justify-content:center;align-items:flex-end;width:min(150vh - 345px,90vw - 495px,880px);display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #000c}.scene{position:absolute;inset:0}.scene img{object-fit:cover;opacity:0;width:100%;height:100%;transform:scale(1.08) translate(var(--scene-x), var(--scene-y));filter:saturate(.85)contrast(1.06)brightness(.9);transition:opacity .45s,transform .25s ease-out;position:absolute;inset:0}.scene img.on{opacity:1}.scene-pad{pointer-events:none;opacity:var(--scene-pad);background:radial-gradient(38% 44% at 50% 47%,#060910b8,#0000 72%);transition:opacity .45s;position:absolute;inset:0}.monitor .character-frame{z-index:2}.scene-grade{z-index:5;pointer-events:none;background:repeating-linear-gradient(#00000038 0 1px,#0000 1px 3px),radial-gradient(130% 120% at 50% 0,#bee1ff12,#0000 62%);animation:5.3s step-end infinite signal-drop;position:absolute;inset:0;box-shadow:inset 0 0 70px #0000009e}@keyframes signal-drop{0%,to{opacity:1}37%{opacity:.8}38.5%{opacity:1}71%{opacity:.9}72%{opacity:1}88%{opacity:.74}89.5%{opacity:1}}.scene-grade:before{content:"";opacity:0;background:#e1f3ff8c;height:2px;animation:6.1s step-end infinite glitch-line;position:absolute;top:30%;left:0;right:0}@keyframes glitch-line{0%,to{opacity:0}12%{opacity:.85;top:62%;box-shadow:0 11px #e1f3ff00}12.7%{opacity:0}37%{opacity:1;top:28%;box-shadow:0 11px #e1f3ff4d}37.6%{opacity:0}58%{opacity:.7;top:74%;box-shadow:0 11px #e1f3ff00}58.5%{opacity:0}79%{opacity:.95;top:45%;box-shadow:0 7px #e1f3ff73}79.5%{opacity:0}80.4%{opacity:.6;top:48%;box-shadow:0 11px #e1f3ff00}80.9%{opacity:0}}.scene-grade:after{content:"";opacity:.42;mix-blend-mode:overlay;will-change:transform;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");animation:.7s steps(2,end) infinite grain;position:absolute;inset:-4px}@keyframes grain{50%{transform:translate(-3px,2px)}}.scene-tune{z-index:6;pointer-events:none;animation:.42s ease-out tune-in;position:absolute;inset:0}@keyframes tune-in{0%{background:#000000d9;box-shadow:inset 0 0 0 200px #0003}22%{background:linear-gradient(#0000 30%,#d2f0ff59 32%,#0000 35%)}60%{background:linear-gradient(#0000 66%,#d2f0ff29 68%,#0000 71%)}to{background:0 0}}.monitor.is-blank .monitor-screen{background:0 0}.monitor.is-blank .scene-grade{opacity:.35;animation:none}.monitor.is-blank .scene-grade:before{display:none}.app-shell.is-standby .scene-grade,.app-shell.is-standby .scene-grade:before,.app-shell.is-standby .scene-grade:after{animation-play-state:paused}.monitor-chin{color:#ffffff4d;letter-spacing:.22em;align-items:center;gap:14px;height:42px;padding:0 7px 0 12px;font:600 9px/1 ui-monospace,monospace;display:flex}.chin-vents{flex:1;justify-content:center;gap:4px;display:flex}.chin-vents i{background:#0f1012;border-radius:2px;width:3px;height:11px;box-shadow:inset 0 1px 2px #000000e6,0 1px #ffffff12}.chin-tally{letter-spacing:.18em;align-items:center;gap:6px;display:flex}.chin-tally i{background:var(--lamp);width:6px;height:6px;box-shadow:var(--lamp-glow);border-radius:50%}.chin-tally.is-standby i{background:var(--lamp-standby);box-shadow:var(--lamp-standby-glow)}.chin-power{flex:none;width:26px;height:26px}.chin-power svg{width:11px;height:11px}.channel-bar{gap:var(--key-gap-tight);background:var(--track);box-shadow:var(--track-sunk);border:1px solid #ffffff0f;border-radius:12px;padding:3px;display:flex}.channel-key{border-radius:var(--key-radius);color:#ffffff8c;white-space:nowrap;cursor:pointer;background:0 0;border:0;align-items:center;gap:7px;padding:8px 15px 9px;font-size:12px;transition:color .15s,background-color .15s,box-shadow .15s;display:flex}.channel-key em{letter-spacing:.14em;color:#ffffff4d;font:600 9px/1 ui-monospace,monospace}.channel-key:hover:not(.active){color:#fff;background-color:var(--key-wash)}.channel-key:active:not(.active){box-shadow:var(--key-nudge)}.channel-key.active{color:#fff;background:var(--key-face);box-shadow:var(--key-lift), var(--key-bevel);font-weight:500}.channel-key.active em{color:var(--lamp);text-shadow:var(--lamp-glow)}.osd{z-index:5;pointer-events:none;color:#ffffff6b;letter-spacing:.14em;white-space:nowrap;text-shadow:0 1px 3px #000000e6;flex-direction:column;gap:5px;font:500 10px/1 ui-monospace,monospace;display:flex;position:absolute;bottom:13px;left:16px}.osd-live{color:#ffffffbd;align-items:center;gap:7px;display:flex}.osd-stamp{color:#fff9;font-variant-numeric:tabular-nums}.osd .rec{background:var(--lamp-rec);width:6px;height:6px;box-shadow:var(--lamp-rec-glow);border-radius:50%;animation:1.6s step-end infinite rec-blink}.osd-live.is-standby{color:#ffffff80}.osd-live.is-standby .rec{background:var(--lamp-standby);box-shadow:var(--lamp-standby-glow);animation:none}@keyframes rec-blink{50%{opacity:.25}}.endpoint-buttons{z-index:4;gap:var(--key-gap-tight);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#171717b8;border-radius:14px;padding:5px;display:flex;position:relative;box-shadow:0 16px 28px #00000061}.endpoint-buttons button{border-radius:var(--key-radius);color:#fff9;cursor:pointer;background:0 0;border:0;min-width:76px;padding:9px 14px;font-size:13px}.endpoint-buttons button:hover{background:var(--key-wash);color:#fff}.endpoint-buttons button.active{color:#fff;background:var(--key-face);box-shadow:var(--key-lift), var(--key-bevel);font-weight:500}.pose-endpoints{gap:var(--key-gap-tight);grid-template-columns:repeat(3,1fr);width:270px;display:grid}.pose-endpoints button{min-width:0;padding:7px 9px}.outfit-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.outfit-chip{cursor:pointer;background:#ffffff08;border:1px solid #ffffff1c;border-radius:10px;padding:0;transition:border-color .15s;overflow:hidden}.outfit-chip:hover{border-color:#ffffff4d}.outfit-chip.active{border-color:#fff}.outfit-chip i{aspect-ratio:660/258;background-color:#ffffff0a;background-position:45.6% 100%;background-repeat:no-repeat;background-size:155.2%;display:block}.outfit-chip span{color:#fff9;border-top:1px solid #ffffff12;padding:6px 0 7px;font-size:11px;transition:background .15s,color .15s;display:block}.outfit-chip.active span{color:#fff;background:var(--key-face);border-top-color:#ffffff24;font-weight:500}@media (width<=880px){body{overflow:auto}.app-shell{height:auto;min-height:100dvh}.lab-link{align-self:flex-start;margin-left:18px;position:static}.workspace{grid-template-rows:min(84dvh,780px) auto;grid-template-columns:1fr}.monitor-screen{aspect-ratio:auto;width:auto;padding:16px;display:block}.character-frame{width:min(80vw,52dvh);height:auto;transform:none}.monitor{border-radius:18px;padding:12px 12px 0}.monitor-chin{height:34px;padding:0 4px}.chin-brand{display:none}.channel-key{padding:7px 11px 8px}.panel-device{margin:14px}.panel-screen{overflow:visible}.osd{gap:4px;font-size:9px;bottom:10px;left:11px}.osd span:nth-child(n+3){display:none}}
