:root{--demo-surface: #12141a;--demo-ui: #eef1f7;--demo-accent: #4fd1c5;--demo-warn: #f2b134;--demo-bad: #ef6461}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--demo-surface);color:var(--demo-ui);font-family:system-ui,-apple-system,Segoe UI,sans-serif;-webkit-text-size-adjust:100%}#demo-root{position:fixed;inset:0}#demo-root canvas{object-fit:cover}.demo-overlay-host{position:fixed;inset:0;pointer-events:none;display:flex}.demo-overlay{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px calc(env(safe-area-inset-bottom,0px) + 12px);font-size:13px;line-height:1.35}.demo-gate{pointer-events:auto;margin:auto;max-width:24rem;background:#12141af0;border:1px solid rgba(238,241,247,.14);border-radius:18px;padding:24px}.demo-gate h1{margin:0 0 6px;font-size:1.25rem}.demo-gate p{margin:0 0 16px;color:#eef1f7b3;font-size:.9rem}.demo-gate button{width:100%;padding:13px;border:0;border-radius:12px;background:var(--demo-accent);color:#06231f;font:inherit;font-weight:700}.demo-gate button[disabled]{opacity:.45}.demo-gate .demo-gate-note{margin:14px 0 0;font-size:.8rem}.demo-gate .demo-gate-note[data-tone=bad]{color:var(--demo-bad)}.demo-gate .demo-gate-note[data-tone=warn]{color:var(--demo-warn)}.demo-metrics{align-self:flex-start;min-width:11.5rem;background:#12141ab8;border-radius:10px;padding:8px 10px;font-variant-numeric:tabular-nums}.demo-metrics dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:1px 10px}.demo-metrics dt{color:#eef1f799}.demo-metrics dd{margin:0;text-align:right}.demo-metrics dd[data-tone=warn]{color:var(--demo-warn)}.demo-metrics dd[data-tone=bad]{color:var(--demo-bad)}.demo-controls{pointer-events:auto;display:flex;flex-direction:column;gap:8px}.demo-note{background:#12141ab8;border-radius:10px;padding:6px 10px;color:#eef1f7b3;font-size:12px}.demo-note[data-tone=warn]{color:var(--demo-warn)}.demo-note[data-tone=bad]{color:var(--demo-bad)}.demo-actions{display:flex;gap:6px;flex-wrap:wrap}.demo-actions button{flex:1 1 auto;padding:10px 12px;border:1px solid rgba(238,241,247,.18);border-radius:10px;background:#12141ad1;color:var(--demo-ui);font:inherit;font-weight:600}.demo-actions button[aria-pressed=true]{border-color:var(--demo-warn);color:var(--demo-warn)}