*,:before,:after{box-sizing:border-box}html,body{color:#e8eaed;background:#0f1115;height:100%;margin:0;font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.shell{flex-direction:column;height:100vh;display:flex}.bar{border-bottom:3px solid var(--env-colour);background:#16181d;flex:0 0 60px;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:60px;padding:0 16px;display:grid}.brand{align-items:center;gap:12px;min-width:0;display:flex}.logo{width:auto;height:34px;display:block}.title{letter-spacing:.01em;color:#c7ccd4;white-space:nowrap;border-left:1px solid #2b2f38;padding-left:12px;font-size:14px;font-weight:600}.envs{justify-self:center;gap:6px;display:flex}.env{color:#a8adb7;font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;padding:7px 14px;font-size:13px;transition:background .12s,color .12s;display:flex}.env:hover{color:#e8eaed;background:#1e2128}.env--on{background:color-mix(in srgb, var(--opt-colour) 16%, #16181d);border-color:color-mix(in srgb, var(--opt-colour) 45%, transparent);color:#fff;font-weight:600}.dot{border-radius:50%;flex:0 0 8px;width:8px;height:8px}.env--on .dot{box-shadow:0 0 0 0 var(--opt-colour);animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb, var(--opt-colour) 70%, transparent)}50%{opacity:.45;box-shadow:0 0 0 5px color-mix(in srgb, var(--opt-colour) 0%, transparent)}}@media (prefers-reduced-motion:reduce){.env--on .dot{animation:none}.spinner{animation-duration:2s}}.live{background:#4ade80;border-radius:50%;width:5px;height:5px;margin-left:2px}.actions{align-items:center;gap:10px;margin-left:auto;display:flex}.host{color:#6f7681;font-variant-numeric:tabular-nums;font-size:12px}.ghost{color:#a8adb7;font:inherit;cursor:pointer;background:0 0;border:1px solid #2b2f38;border-radius:7px;padding:6px 12px;font-size:12px;text-decoration:none}.ghost:hover{color:#e8eaed;background:#1e2128}.stage{flex:auto;min-height:0;position:relative}.viewport{position:absolute;inset:0}.viewport[hidden]{display:none}.viewport iframe{background:#fff;border:0;width:100%;height:100%;display:block}.loading{color:#6f7681;z-index:1;background:#0f1115;justify-content:center;align-items:center;gap:12px;font-size:13px;display:flex;position:absolute;inset:0}.spinner{border:2px solid #2b2f38;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}