/* Stitch theme, sized for a 10-foot viewing distance. Everything is in vw/vh so the same sheet works on a 720p TV browser and a 4K one. */ :root { --bg: #131313; --surface-low: #1c1b1b; --surface: #201f1f; --surface-high: #2a2a2a; --primary: #e9c176; --on-surface: #e5e2e1; --on-surface-variant: #cbc4ce; --tertiary: #a2d1b5; --secondary: #d1bfe9; --error: #ffb4ab; --outline: #49454d; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--on-surface); font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; overflow: hidden; /* TV browsers show a focus ring around the body on D-pad input. */ outline: none; } .screen { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .screen.is-active { display: block; } /* ── Pairing ─────────────────────────────────────────────── */ .glow { position: absolute; top: 50%; left: 50%; width: 90vw; height: 90vw; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(233, 193, 118, 0.07) 0%, rgba(19, 19, 19, 0) 60%); pointer-events: none; } .pairing-inner { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4vh 6vw; } .logo { width: 9vw; max-width: 140px; min-width: 64px; height: auto; } .wordmark { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; font-size: 3.6vw; letter-spacing: -0.02em; margin: 1.2vh 0 4vh; color: var(--on-surface); } .wordmark span { color: var(--primary); } .pair-row { display: flex; align-items: center; gap: 4vw; } .qr-frame { padding: 1.2vw; background: #fff; border-radius: 1.2vw; box-shadow: 0 0 0 0.35vw rgba(233, 193, 118, 0.28); line-height: 0; } .qr, .qr svg { display: block; width: 17vw; height: 17vw; max-width: 300px; max-height: 300px; } .pair-copy { max-width: 34vw; } .heading { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 700; font-size: 2.1vw; margin: 0 0 1vh; } .sub { font-size: 1.15vw; line-height: 1.5; color: var(--on-surface-variant); margin: 0 0 3vh; } .code-label { font-size: 0.95vw; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface-variant); margin: 0 0 0.6vh; } .code { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; font-size: 3.4vw; letter-spacing: 0.16em; color: var(--primary); margin: 0 0 2.6vh; } .badge { display: inline-block; padding: 0.7vh 1.4vw; border-radius: 999px; border: 1px solid var(--primary); color: var(--primary); font-size: 1vw; font-weight: 600; } .badge.is-connected { border-color: var(--tertiary); color: var(--tertiary); } .badge.is-error { border-color: var(--error); color: var(--error); } /* ── Player ──────────────────────────────────────────────── */ #player { background: #000; } #video { width: 100%; height: 100%; background: #000; object-fit: contain; } /* Cue size is stepped from the remote; the multiplier lives on . */ video::cue { font-family: 'Inter', sans-serif; font-size: calc(2.2vw * var(--cue-scale, 1)); background: rgba(0, 0, 0, 0.6); color: #fff; } .spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .orb { width: 5vw; height: 5vw; margin: 0 auto 2vh; border-radius: 50%; border: 0.4vw solid rgba(233, 193, 118, 0.2); border-top-color: var(--primary); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .spinner p { font-size: 1.3vw; color: var(--on-surface-variant); } .overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 6vh 5vw 4vh; background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0)); transition: opacity 0.25s ease; opacity: 0; pointer-events: none; } .overlay.is-visible { opacity: 1; } .overlay-title { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 700; font-size: 1.9vw; margin: 0 0 1.6vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .overlay-bar { display: flex; align-items: center; gap: 1.4vw; font-size: 1.05vw; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; } .progress { flex: 1; height: 0.5vh; min-height: 4px; border-radius: 999px; background: rgba(229, 226, 225, 0.22); overflow: hidden; } .progress-fill { height: 100%; width: 0; background: var(--primary); } .overlay-hint { margin: 1.6vh 0 0; font-size: 0.95vw; color: rgba(203, 196, 206, 0.75); } /* ── Menu ────────────────────────────────────────────────── */ .menu { position: absolute; top: 0; right: 0; width: 28vw; min-width: 280px; height: 100%; background: rgba(28, 27, 27, 0.97); border-left: 1px solid var(--outline); padding: 4vh 2vw; overflow: hidden; } .menu-tabs { display: flex; gap: 1.2vw; margin-bottom: 3vh; } .menu-tab { font-size: 1.1vw; font-weight: 600; color: var(--on-surface-variant); padding-bottom: 0.8vh; border-bottom: 0.3vh solid transparent; } .menu-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); } .menu-list { list-style: none; margin: 0; padding: 0; max-height: 78vh; overflow-y: auto; } .menu-item { padding: 1.4vh 1.2vw; border-radius: 0.6vw; font-size: 1.15vw; color: var(--on-surface); display: flex; justify-content: space-between; gap: 1vw; } .menu-item.is-focused { background: var(--surface-high); color: var(--primary); } .menu-item.is-selected::after { content: '●'; color: var(--tertiary); font-size: 0.9vw; } .menu-empty { padding: 1.4vh 1.2vw; font-size: 1.05vw; color: var(--on-surface-variant); } /* ── Error / prompts ─────────────────────────────────────── */ .error-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56vw; background: var(--surface); border: 1px solid var(--outline); border-radius: 1vw; padding: 4vh 3vw; text-align: center; } .error-title { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 700; font-size: 1.9vw; color: var(--error); margin: 0 0 1.6vh; } .error-body { font-size: 1.2vw; line-height: 1.5; color: var(--on-surface); margin: 0 0 2vh; word-break: break-word; } .error-hint { font-size: 1vw; color: var(--on-surface-variant); margin: 0; } .unmute { position: absolute; top: 4vh; left: 50%; transform: translateX(-50%); padding: 1.2vh 2vw; border-radius: 999px; background: rgba(32, 31, 31, 0.94); border: 1px solid var(--primary); color: var(--primary); font-size: 1.1vw; font-weight: 600; } .toast { position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%); padding: 1.2vh 2vw; border-radius: 999px; background: rgba(32, 31, 31, 0.94); border: 1px solid var(--outline); font-size: 1.1vw; z-index: 20; }