:root { background: #fff; color-scheme: light; -webkit-tap-highlight-color: transparent; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #fff; }
body { position: fixed; inset: 0; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button { font: inherit; }
.prototype, .stage, .display { position: fixed; inset: 0; width: 100%; height: 100%; }
.prototype, .stage { background: #fff; }
.stage { z-index: 1; display: block; padding: 0; border: 0; color: transparent; cursor: pointer; touch-action: manipulation; appearance: none; -webkit-appearance: none; }
.stage:disabled { cursor: default; }
.stage:focus-visible { outline: 3px solid #000; outline-offset: -3px; }
.display { display: block; pointer-events: none; }
.variant-menu { position: fixed; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
.variant-menu.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menu-header, .menu-footer { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.menu-panel { width: min(100%, 520px); margin: auto; }
.menu-eyebrow, .menu-status { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.menu-panel h1 { margin: 8px 0 30px; font-size: clamp(32px, 9vw, 56px); line-height: .92; letter-spacing: -.065em; }
.variant-options { display: grid; gap: 10px; }
.variant-pill { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 8px 10px 8px 26px; border: 0; border-radius: 999px; background: #ededed; color: #000; font-size: 25px; font-weight: 800; letter-spacing: -.04em; cursor: pointer; appearance: none; -webkit-appearance: none; transition: color 120ms ease, background 120ms ease, transform 120ms ease; }
.variant-pill:active { transform: scale(.985); }
.variant-pill:hover, .variant-pill:focus-visible { background: #000; color: #fff; }
.variant-pill:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.variant-pill:disabled { cursor: wait; }
.pill-arrow { display: grid; width: 56px; height: 56px; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font-size: 24px; line-height: 1; }
.menu-status { min-height: 1em; margin-top: 18px; color: #808080; }
.source-videos { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-height: 620px) { .variant-menu { padding-top: 16px; padding-bottom: 16px; } .menu-panel h1 { margin-bottom: 18px; font-size: 34px; } .variant-options { grid-template-columns: repeat(3, 1fr); } .variant-pill { min-height: 58px; padding-left: 20px; font-size: 21px; } .pill-arrow { width: 42px; height: 42px; font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .variant-menu, .variant-pill { transition: none; } }