:root{color-scheme:dark;font-family:Inter,Avenir,Helvetica Neue,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#eef5f2;background:#0a0d0e;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #0a0d0e;--surface: #111718;--surface-raised: #171e1f;--line: rgba(183, 220, 211, .14);--line-strong: rgba(183, 220, 211, .26);--muted: #8ea19c;--muted-bright: #b5c4c0;--accent: #79ebd5;--accent-ink: #082b25;--warning: #f1bb72;--error: #ff877e;--radius-xl: 22px;--radius-lg: 16px;--radius-md: 11px;--shadow: 0 18px 65px rgba(0, 0, 0, .25)}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:radial-gradient(circle at 18% 0%,rgba(47,108,98,.16),transparent 30rem),var(--bg)}body{min-height:100vh;min-height:100svh}button,input,select{font:inherit}button,select,input[type=range],input[type=checkbox]{accent-color:var(--accent)}button:focus-visible,select:focus-visible,input:focus-visible,video:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-shell{display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100svh;min-height:100vh;min-height:100svh;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(18px,2.6vw,38px);border-bottom:1px solid var(--line);background:#0a0d0ecc;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.title-lockup,.panel-heading,.viewer-toolbar,.toolbar-actions,.status-pill,.toggle-row,.asset-path,.bounds-row{display:flex;align-items:center}.title-lockup{gap:13px}.mark{display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(121,235,213,.4);border-radius:12px;color:var(--accent);background:#79ebd514;font-size:12px;font-weight:800;letter-spacing:.12em}h1,h2,p{margin:0}h1{font-size:clamp(18px,2vw,23px);line-height:1.08;letter-spacing:-.025em}h2{font-size:16px;line-height:1.25;letter-spacing:-.015em}.eyebrow,.section-kicker{margin-bottom:4px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.status-pill{gap:9px;min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted-bright);background:#ffffff06;font-size:12px;font-weight:600;white-space:nowrap}.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}.status-pill[data-state=loading] .status-dot{animation:pulse 1.2s ease-in-out infinite}.status-pill[data-state=ready]{color:var(--accent);border-color:#79ebd53d}.status-pill[data-state=warning]{color:var(--warning);border-color:#f1bb7247}.status-pill[data-state=error]{color:var(--error);border-color:#ff877e4d}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,385px);gap:16px;height:100%;min-height:0;overflow:hidden;padding:16px clamp(16px,2.2vw,32px) 24px}.viewer-card,.panel{border:1px solid var(--line);background:#111718e0;box-shadow:var(--shadow)}.viewer-card{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;overflow:hidden;border-radius:var(--radius-xl)}.viewer-toolbar{z-index:2;justify-content:space-between;gap:18px;padding:14px 16px 14px 18px;border-bottom:1px solid var(--line);background:#111718f2}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px}.button{min-height:36px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:9px;color:#dfeae7;background:#ffffff06;font-size:12px;font-weight:700;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.button:hover:not(:disabled){border-color:#79ebd580;background:#79ebd512}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{cursor:not-allowed;opacity:.38}.button-primary{color:var(--accent-ink);border-color:transparent;background:var(--accent)}.button-primary:hover:not(:disabled){color:var(--accent-ink);border-color:transparent;background:#91f3df}#play-icon{display:inline-block;width:14px;margin-right:3px;text-align:center}.canvas-host{position:relative;min-width:0;min-height:360px;overflow:hidden;background:#11171b;isolation:isolate}.canvas-host canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}.viewport-badges{position:absolute;z-index:2;top:14px;left:14px;display:flex;gap:6px;pointer-events:none}.viewport-badges span,.asset-path,.source-chip{border:1px solid var(--line);border-radius:999px;background:#070a0bad;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.viewport-badges span{padding:6px 9px;color:#a6b6b2;font-size:10px;font-weight:600}.stage-message{position:absolute;z-index:3;bottom:48px;left:50%;display:flex;width:min(calc(100% - 28px),510px);align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:#080c0dd1;box-shadow:0 14px 40px #0000004d;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translate(-50%)}.stage-message[hidden]{display:none}.stage-message strong,.stage-message span:not(.loader){display:block}.stage-message strong{margin-bottom:2px;font-size:12px}.stage-message span:not(.loader){color:var(--muted);font-size:11px;line-height:1.45}.stage-message[data-state=warning]{border-color:#f1bb725c}.stage-message[data-state=error]{border-color:#ff877e61}.loader{flex:0 0 auto;width:19px;height:19px;border:2px solid rgba(121,235,213,.25);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.stage-message[data-state=warning] .loader,.stage-message[data-state=error] .loader{width:9px;height:9px;border:0;background:var(--warning);box-shadow:0 0 12px #f1bb72a6;animation:none}.stage-message[data-state=error] .loader{background:var(--error)}.asset-path{position:absolute;z-index:2;right:13px;bottom:12px;gap:8px;max-width:calc(100% - 26px);padding:6px 9px;color:var(--muted);pointer-events:none}.asset-path span{font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.asset-path code{overflow:hidden;color:#cad8d4;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.inspector{display:flex;min-height:0;flex-direction:column;gap:12px;overflow:auto;padding-right:3px;scrollbar-color:rgba(121,235,213,.24) transparent}.panel{flex:0 0 auto;padding:16px;border-radius:var(--radius-lg);box-shadow:none}.panel-heading{justify-content:space-between;gap:12px;margin-bottom:13px}.panel-heading.compact{margin-bottom:15px}.source-chip{padding:5px 8px;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:9px;white-space:nowrap}.reference-frame{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;aspect-ratio:898 / 818;background:linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.025) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.025) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.025) 75%),#0c1112;background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.reference-frame video{display:block;width:100%;height:100%;object-fit:contain}.reference-note{margin-top:10px;color:var(--muted);font-size:10px;line-height:1.55}.reference-note code{color:var(--muted-bright)}.field{display:grid;gap:7px;margin-top:12px}.field>span,.toggle-row strong,.bounds-row>span{color:#dbe6e3;font-size:11px;font-weight:650}.field output{float:right;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;font-weight:500}select{width:100%;height:38px;padding:0 34px 0 10px;border:1px solid var(--line-strong);border-radius:9px;color:#e2ece9;background:#0d1314;font-size:11px}select:disabled,input:disabled{cursor:not-allowed;opacity:.44}input[type=range]{width:100%;height:18px;margin:0;cursor:pointer}.toggle-row{justify-content:space-between;gap:16px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}.toggle-row span,.toggle-row strong,.toggle-row small{display:block}.toggle-row small{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.35}.toggle-row input[type=checkbox]{position:relative;width:34px;height:19px;flex:0 0 auto;appearance:none;border:1px solid var(--line-strong);border-radius:999px;background:#0c1112;cursor:pointer;transition:background .16s ease}.toggle-row input[type=checkbox]:after{position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:var(--muted);content:"";transition:transform .16s ease,background .16s ease}.toggle-row input[type=checkbox]:checked{border-color:#79ebd599;background:#79ebd52e}.toggle-row input[type=checkbox]:checked:after{background:var(--accent);transform:translate(15px)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0}.stats-grid>div{min-width:0;padding:10px 9px;border:1px solid var(--line);border-radius:9px;background:#ffffff05}.stats-grid dt{overflow:hidden;margin-bottom:4px;color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.stats-grid dd{margin:0;color:#e2ece9;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;font-weight:500}.bounds-row{justify-content:space-between;gap:10px;margin-top:8px;padding:10px 4px 0}.bounds-row code{overflow:hidden;color:var(--muted);font-size:9px;text-align:right;text-overflow:ellipsis;white-space:nowrap}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35}}@media(max-width:980px){.app-shell{display:block;height:auto;overflow:visible}.workspace{grid-template-columns:1fr;height:auto;overflow:visible}.viewer-card{height:min(72svh,720px);min-height:500px}.inspector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding-right:0}.reference-panel{grid-row:span 2}}@media(max-width:660px){.topbar{align-items:flex-start;padding:14px 15px}.mark{width:38px;height:38px}.status-pill{max-width:44%;white-space:normal}.workspace{gap:12px;padding:12px}.viewer-card{height:min(76svh,650px);min-height:510px;border-radius:17px}.viewer-toolbar{align-items:flex-start;flex-direction:column;padding:13px}.toolbar-actions{width:100%;justify-content:flex-start}.button{flex:1 1 auto}.viewport-badges span:last-child{display:none}.asset-path{right:auto;left:12px}.stage-message{bottom:54px}.inspector{display:flex}.panel{border-radius:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}