/*
 * Beranda — fixed 1920x1080 stage. Visual design: Figma "Samsung TV" (TV Glass tokens).
 *
 * Performance rules for TV hardware, measured on the reference Q70B (Chromium 85, 4 cores, 2 GB)
 * with the Lab render probe rather than assumed. Baseline for a focus walk along eight tiles is
 * 59.5 fps / 16.8 ms, zero dropped frames:
 *
 *   - Blurred box-shadows are FREE. Eight tiles at `0 40px 100px` measured 59.5 fps and zero
 *     dropped frames, indistinguishable from baseline across two runs. Use them.
 *   - Live gradient layers are RUINOUS. Three 1100px radial-gradient layers behind the UI
 *     measured 4.6 fps, 178.7 ms median, 88 of 90 frames dropped. Never composite one at
 *     runtime: bake it into the wallpaper instead (see scripts/prepare-wallpapers.mjs, which
 *     already burns the readability scrim into the JPEG at build time).
 *
 * Still assumed rather than measured: no filters or masks; no rounded clipping (overflow: hidden
 * + border-radius) on tiles; only transform animates, on elements with their own layer. The
 * engine does report `filter: blur` and `backdrop-filter` as supported, so if either becomes
 * worth having, measure it first — the probe is in the Lab screen.
 *
 * This engine lacks `inset`, `aspect-ratio`, `overflow: clip`, the individual transform
 * properties, `color-mix()`, container queries and `:has()`. Grid, gap, sticky and `clamp()` work.
 */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope.woff2") format("woff2");
    font-weight: 200 800;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter.woff2") format("woff2");
    font-weight: 100 900;
}

@font-face {
    font-family: "Outfit";
    src: url("../fonts/outfit.woff2") format("woff2");
    font-weight: 100 900;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/dm-sans.woff2") format("woff2");
    font-weight: 100 1000;
}

/* Tokens: Figma collection "TV Glass" (mode Dark). */
:root {
    --bg: #000;
    --fg: #fff;
    --text-2: rgba(255, 255, 255, 0.64);
    --text-3: rgba(255, 255, 255, 0.42);
    --muted: var(--text-2);
    --faint: var(--text-3);
    --glass: rgba(255, 255, 255, 0.12);
    --glass-strong: rgba(255, 255, 255, 0.22);
    --glass-line: rgba(255, 255, 255, 0.22);
    --panel: rgba(28, 28, 30, 0.92);
    --live: #30d158;
    --blue: #0a84ff;
    --ring: #fff;
    --font: "Inter", "SamsungOne", "Helvetica Neue", Arial, sans-serif;
    --edge: 130px;
    /* Motion: spring-like focus, iOS sheet curve for rows and panels. */
    --spring: cubic-bezier(0.34, 1.32, 0.64, 1);
    --sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --focus-ms: 240ms;
}

html.reduce-motion {
    --spring: ease-out;
    --focus-ms: 160ms;
}

html, body {
    margin: 0;
    padding: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    cursor: none;
}

#stage {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: var(--bg);
    transform-origin: 0 0;
}

.view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hidden {
    display: none !important;
}

h1, h2 {
    margin: 0;
    font-weight: 600;
}

.ic {
    display: block;
    width: 32px;
    height: 32px;
}

/* ---------- Wallpaper ---------- */

/* Two full-screen JPEGs with the scrim baked in; only their opacity animates. */
#bg, .bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
}

.bg-layer {
    background: #000 center / cover no-repeat;
    opacity: 0;
    transition: opacity 600ms cubic-bezier(0.45, 0, 0.55, 1);
    will-change: opacity;
}

.bg-layer.on {
    opacity: 1;
}

/* The 480x270 pre-blurred twin, scaled up, behind pages and the switching overlay. */
.bg-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    display: none;
    background: #000 center / cover no-repeat;
}

#stage:not([data-view="home"]):not([data-view="screensaver"]) #bg-blur,
#stage[data-overlay="switching"] #bg-blur {
    display: block !important;
}

#stage[data-overlay="switching"] #home,
#stage[data-overlay="switching"] #status {
    visibility: hidden;
}

/* ---------- Status pill ---------- */

.status {
    position: absolute;
    top: 56px;
    right: 96px;
    z-index: 5;
    display: none;
    align-items: center;
    gap: 18px;
    height: 64px;
    padding: 0 8px 0 24px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--glass);
    box-shadow: inset 0 0 0 1.5px var(--glass-line);
    transition: opacity 380ms var(--sheet);
}

#stage[data-view="home"] .status,
#stage[data-view="all"] .status {
    display: flex;
}

#stage.full .status,
#stage[data-overlay="cc"] .status {
    opacity: 0;
}

.weather {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
}

.weather .ic {
    width: 28px;
    height: 28px;
}

.status-div {
    width: 1.5px;
    height: 26px;
    margin-left: 10px;
    background: var(--text-3);
}

.status-time {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.15px;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffb86b, #ff5e7e);
    font-size: 26px;
    font-weight: 600;
    line-height: 48px;
    text-align: center;
}

.avatar-l {
    flex: none;
    width: 72px;
    height: 72px;
    font-size: 34px;
    line-height: 72px;
}

/* ---------- Tiles (Figma "App Tile", 5:3) ---------- */

.app {
    position: relative;
    flex: none;
    width: 250px;
    height: 150px;
}

.tile {
    position: relative;
    width: 250px;
    height: 150px;
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    transition: transform var(--focus-ms) var(--spring);
    will-change: transform;
}

.tile.edge {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
}

/* The lift shadow is its own layer so focus only changes opacity, never repaints a shadow. */
.tile::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 36px 72px rgba(0, 0, 0, 0.6), 0 10px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity var(--focus-ms) ease-out;
}

.logo {
    position: absolute;
    top: 50%;
    left: 50%;
}

.sheen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity var(--focus-ms) ease-out;
}

.focused .tile {
    transform: scale(1.12);
}

.focused .tile::before,
.focused .sheen {
    opacity: 1;
}

.mono {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -1px;
    color: rgba(255, 255, 255, 0.9);
}

.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    object-fit: contain;
}

/* Name under the tile: 22px below the dock edge, shown on focus (tvOS). */
.app .label {
    position: absolute;
    top: 200px;
    left: -40px;
    right: -40px;
    text-align: center;
    font-size: 22px;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.app.focused .label,
.names-always .app .label,
.app.sys .label {
    opacity: 1;
}

.app.sys:not(.focused) .label,
.names-always .app:not(.focused) .label {
    opacity: 0.75;
}

.names-never .app:not(.sys) .label {
    opacity: 0 !important;
}

.label-sub {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-2);
}

/* Glass tiles: launcher functions. Flat translucency, no live blur. */
.tile.glass {
    background: var(--glass);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25), inset 0 0 0 1.5px var(--glass-line);
}

.focused .tile.glass {
    background: var(--glass-strong);
}

.tile-ic {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    stroke-width: 1.8;
}

/* HDMI connection dot. */
.dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.dot.on {
    background: var(--live);
    box-shadow: 0 0 10px rgba(48, 209, 88, 0.8);
}

/* ---------- Home ---------- */

/* Each row slides as a whole; ROW_Y in home.js holds the positions per state. */
.row {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    transition: transform 380ms var(--sheet), opacity 380ms var(--sheet);
    will-change: transform;
}

.state-1 #row-dock,
.state-2 #row-dock {
    opacity: 0.4;
}

.state-full .row {
    opacity: 0;
}

.edge-hint {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    text-align: center;
    font-size: 22px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
    transition: opacity 300ms ease-out;
}

#home:not(.state-0) .edge-hint {
    opacity: 0;
}

/* Liquid Glass dock: a crop of the pre-blurred wallpaper, a white wash and a hairline. */
.dock {
    position: absolute;
    top: 50px;
    left: 102px;
    width: 1716px;
    height: 206px;
}

.dock-glass {
    position: absolute;
    top: 0;
    left: 0;
    width: 1716px;
    height: 206px;
    border-radius: 48px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1.5px var(--glass-line), inset 0 1.5px 0 rgba(255, 255, 255, 0.28);
}

/* Lined up with the wallpaper behind the dock in state 0 (dock at x 102, y 690). */
.dock-blur {
    position: absolute;
    top: -690px;
    left: -102px;
    width: 1920px;
    height: 1080px;
    background: center / 1920px 1080px no-repeat;
    opacity: 0;
    transition: opacity 600ms cubic-bezier(0.45, 0, 0.55, 1);
}

.dock-blur.on {
    opacity: 1;
}

.dock-glass::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1.5px var(--glass-line);
}

.dock-row {
    position: absolute;
    top: 28px;
    left: 28px;
    display: flex;
    gap: 32px;
}

.row-title {
    position: absolute;
    top: 0;
    left: var(--edge);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.36px;
    opacity: 0;
    transition: opacity 300ms ease-out;
}

.state-1 .row-title,
.state-2 .row-title {
    opacity: 1;
}

.state-1 #row-system .row-title {
    opacity: 0.64;
}

.row-viewport {
    position: absolute;
    top: 72px;
    left: var(--edge);
    width: 1700px;
}

.row-track {
    position: relative;
    display: flex;
    gap: 32px;
    transition: transform 380ms var(--sheet);
    will-change: transform;
}

/* Top Shelf summary of the focused tile in the devices row (state 1). */
.shelf-info {
    position: absolute;
    top: 250px;
    left: var(--edge);
    width: 1100px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 300ms ease-out, transform 380ms var(--sheet);
}

.state-1 .shelf-info {
    opacity: 1;
    transform: none;
}

.shelf-mark {
    position: static;
    display: block;
    margin: 0 0 20px !important;
}

.shelf-mark-app {
    display: none;
}

.shelf-title {
    font-size: 88px;
    font-weight: 700;
    line-height: 96px;
    letter-spacing: -2.2px;
}

.chips-row {
    display: flex;
    gap: 14px;
}

.has-chips .chips-row {
    margin-top: 20px;
}

.chip-glass {
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--glass);
    box-shadow: inset 0 0 0 1.5px var(--glass-line);
    font-size: 22px;
    line-height: 28px;
}

.shelf-desc {
    width: 820px;
    margin-top: 20px;
    font-size: 26px;
    line-height: 34px;
    color: var(--text-2);
}

/* ---------- Pages (everything except Home) ---------- */

/* Static dim over the pre-blurred wallpaper so pages stay readable. */
.page {
    background: rgba(0, 0, 0, 0.55);
}

.page-head {
    position: absolute;
    top: 64px;
    left: var(--edge);
    right: var(--edge);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 26px;
    color: var(--text-2);
}

.page-head h1 {
    font-size: 52px;
    line-height: 60px;
    letter-spacing: -0.8px;
    color: var(--fg);
}

/* ---------- All apps ---------- */

.grid-viewport {
    position: absolute;
    top: 170px;
    bottom: 60px;
    left: 100px;
    width: 1760px;
    overflow: hidden;
    /* room for the scaled tile and its label */
    padding: 20px 30px 0;
    box-sizing: border-box;
}

.grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 250px);
    column-gap: 32px;
    row-gap: 90px;
    transition: transform 380ms var(--sheet);
}

/* The grid has too many tiles for a layer each, so focus changes without the spring. */
.grid .tile {
    will-change: auto;
    transition: none;
}

.page-foot {
    position: absolute;
    left: var(--edge);
    bottom: 40px;
    font: 18px Menlo, "Courier New", monospace;
    color: var(--text-3);
}

/* ---------- Control Center ---------- */

.cc-dim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    animation: fade-in 260ms ease-out;
}

.cc-panel {
    position: absolute;
    top: 60px;
    right: 60px;
    width: 680px;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 28px;
    border-radius: 48px;
    background: var(--panel);
    box-shadow: inset 0 0 0 1.5px var(--glass-line), 0 40px 80px rgba(0, 0, 0, 0.45);
    animation: slide-in 420ms var(--sheet);
}

@keyframes slide-in {
    from { transform: translateX(720px); }
    to { transform: none; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cc-head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cc-who {
    flex: 1;
}

.cc-name {
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
}

.cc-date {
    font-size: 22px;
    color: var(--text-2);
}

.cc-time {
    font-size: 52px;
    font-weight: 600;
    letter-spacing: -0.8px;
}

.cc-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.toggle {
    width: 290px;
    height: 148px;
    padding: 24px 26px 22px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 32px;
    background: var(--glass);
    box-shadow: inset 0 0 0 1.5px var(--glass-line);
    transition: transform var(--focus-ms) var(--spring);
}

.toggle-ic {
    width: 36px;
    height: 36px;
}

.toggle-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
}

.toggle-value {
    font-size: 22px;
    color: var(--text-2);
}

.toggle.active {
    background: var(--blue);
    box-shadow: none;
}

.toggle.active .toggle-value {
    color: rgba(255, 255, 255, 0.8);
}

.toggle.focused {
    background: #fff;
    color: #000;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    transform: scale(1.04);
}

.toggle.focused .toggle-value {
    color: rgba(0, 0, 0, 0.6);
}

.cc-label {
    margin-bottom: -14px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}

.segmented {
    display: flex;
    align-self: flex-start;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    background: var(--glass);
    box-shadow: inset 0 0 0 1.5px var(--glass-line);
}

.seg {
    padding: 12px 26px;
    border-radius: 999px;
    font-size: 22px;
    line-height: 28px;
}

.seg.on {
    background: var(--glass-strong);
}

.seg.focused {
    background: #fff;
    color: #000;
}

.cc-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    border-radius: 24px;
}

.action-ic {
    flex: none;
    width: 30px;
    height: 30px;
}

.action-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
}

.action-sub {
    font-size: 22px;
    color: var(--text-3);
}

.action.focused {
    background: #fff;
    color: #000;
}

.action.focused .action-sub {
    color: rgba(0, 0, 0, 0.55);
}

/* ---------- Switching to an HDMI input ---------- */

.switch-dim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.62);
}

.switch-body {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1920px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fade-in 300ms ease-out;
}

.switch-logo {
    height: 132px;
    display: flex;
    align-items: center;
    margin-bottom: 26px;
}

.switch-mark {
    position: static;
    margin: 0 !important;
    transform: scale(1.5);
}

.switch-name {
    font-size: 52px;
    font-weight: 600;
    letter-spacing: -0.8px;
}

.switch-sub {
    margin-top: 10px;
    font-size: 26px;
    color: var(--text-2);
}

.switch-track {
    width: 360px;
    height: 6px;
    margin-top: 40px;
    border-radius: 3px;
    background: var(--glass-strong);
    overflow: hidden;
}

.switch-bar {
    width: 360px;
    height: 6px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.switch-bar.run {
    animation: switch-bar 1400ms cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes switch-bar {
    from { transform: scaleX(0); }
    to { transform: scaleX(0.9); }
}

.pill-hint {
    position: absolute;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 24px;
    border-radius: 999px;
    background: var(--glass);
    box-shadow: inset 0 0 0 1.5px var(--glass-line);
    font-size: 22px;
    color: var(--text-2);
    white-space: nowrap;
}

/* ---------- Settings ---------- */

.settings-list {
    position: absolute;
    top: 190px;
    left: var(--edge);
    width: 1100px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.setting-row {
    display: flex;
    align-items: center;
    padding: 22px 32px;
    margin-bottom: 10px;
    border-radius: 24px;
    background: var(--glass);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.1);
    font-size: 30px;
    font-weight: 600;
}

.setting-label {
    flex: 1;
}

.setting-row .mini {
    margin-right: 28px;
}

.setting-value {
    font-size: 24px;
    font-weight: 400;
    color: var(--text-2);
}

.setting-row.focused {
    background: #fff;
    color: #000;
}

.setting-row.focused .setting-value {
    color: rgba(0, 0, 0, 0.6);
}

.settings-body {
    position: absolute;
    top: 190px;
    left: var(--edge);
    right: var(--edge);
}

.setting-block {
    margin-bottom: 44px;
}

.compact .setting-block {
    margin-bottom: 30px;
}

.compact .setting-block h2 {
    margin-bottom: 14px;
}

.setting-block h2,
.ed-col h2 {
    margin-bottom: 20px;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}

.chips {
    display: flex;
}

.chip {
    padding: 14px 28px;
    margin-right: 14px;
    border-radius: 999px;
    background: var(--glass);
    font-size: 24px;
    font-weight: 500;
    color: var(--text-2);
}

.chip.on {
    background: var(--blue);
    color: #fff;
}

.chip.on::before {
    content: "✓\00a0\00a0";
}

.chip.focused {
    background: #fff;
    color: #000;
}

.thumbs {
    display: grid;
    grid-template-columns: repeat(6, 256px);
    column-gap: 28px;
    row-gap: 26px;
}

.thumb img {
    display: block;
    width: 256px;
    height: 144px;
    border-radius: 16px;
}

.thumb-title {
    margin-top: 12px;
    font-size: 22px;
    color: var(--text-2);
}

.thumb.on .thumb-title {
    color: var(--fg);
}

.thumb.on .thumb-title::before {
    content: "✓\00a0\00a0";
    color: var(--blue);
}

.thumb.on img {
    box-shadow: 0 0 0 4px var(--blue);
}

.thumb.focused img {
    transform: scale(1.06);
    box-shadow: 0 0 0 5px var(--ring);
}

/* Apps on Home editor */

.ed-col {
    position: absolute;
    top: 190px;
    bottom: 110px;
    width: 780px;
}

.ed-left { left: var(--edge); }
.ed-right { left: 1020px; }

.vport {
    position: absolute;
    top: 56px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    padding-top: 6px;
    box-sizing: border-box;
}

.vtrack {
    position: relative;
    transition: transform 0.18s ease-out;
}

.ed-item {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    margin-bottom: 6px;
    border-radius: 18px;
    font-size: 28px;
    color: var(--text-2);
}

.ed-item.focused {
    background: #fff;
    color: #000;
}

.ed-item.moving {
    background: var(--blue);
    color: #fff;
}

.ed-move {
    margin-left: auto;
    font-size: 34px;
}

.mini {
    position: relative;
    flex: none;
    width: 96px;
    height: 58px;
    margin-right: 22px;
}

.mini .tile {
    width: 250px;
    height: 150px;
    transform: scale(0.384);
    transform-origin: 0 0;
    box-shadow: none;
    will-change: auto;
}

/* ---------- Pop-up menu, rename ---------- */

.overlay {
    background: rgba(0, 0, 0, 0.55);
}

.cc-view,
.switching {
    background: none;
}

.menu-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 640px;
    width: 640px;
    padding: 36px;
    border-radius: 32px;
    background: var(--panel);
    box-shadow: inset 0 0 0 1.5px var(--glass-line);
    box-sizing: border-box;
}

#menu-title {
    margin-bottom: 20px;
    font-size: 32px;
    font-weight: 700;
}

#menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu-list li {
    padding: 16px 24px;
    margin-bottom: 6px;
    border-radius: 18px;
    font-size: 28px;
    color: var(--text-2);
}

#menu-list li.focused {
    background: #fff;
    color: #000;
}

#menu-list li.checked::before {
    content: "✓\00a0\00a0";
}

.dialog-title {
    margin-bottom: 20px;
    font-size: 32px;
    font-weight: 700;
}

#rename-input {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 24px;
    border: 0;
    border-radius: 18px;
    outline: none;
    background: #fff;
    color: #000;
    font: 600 32px var(--font);
}

/* ---------- Lab ---------- */

.lab-list {
    position: absolute;
    top: 190px;
    left: var(--edge);
    width: 860px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lab-list li {
    padding: 10px 24px;
    margin-bottom: 4px;
    border-radius: 14px;
    font-size: 24px;
    color: var(--text-2);
}

.lab-list li.focused {
    background: #fff;
    color: #000;
}

.lab-log {
    position: absolute;
    top: 190px;
    bottom: 120px;
    left: 1040px;
    right: var(--edge);
    margin: 0;
    padding: 24px;
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.45);
    font: 20px/1.45 Menlo, "Courier New", monospace;
    color: #cfd3da;
    white-space: pre-wrap;
    word-break: break-all;
    overflow: hidden;
}

/* ---------- Toast, hints ---------- */

#toast {
    position: absolute;
    bottom: 72px;
    left: 50%;
    z-index: 20;
    max-width: 1100px;
    transform: translateX(-50%);
    box-sizing: border-box;
    text-align: center;
    padding: 18px 32px;
    border-radius: 999px;
    background: var(--panel);
    box-shadow: inset 0 0 0 1.5px var(--glass-line);
    color: var(--fg);
    font-size: 24px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

#toast.visible { opacity: 1; }

/* HDMI shown inside the launcher: the video plane must be visible through the page. */
html.tv-mode, html.tv-mode body { background: transparent; }
html.tv-mode #stage { visibility: hidden; }

/* Desktop preview only: the stage is scaled to fit the browser window. */
html.preview, html.preview body {
    width: 100%;
    height: 100%;
    background: #000;
    cursor: default;
}

/* Remote hints along the bottom of Settings and Lab: flat borders and text only. */
.hints {
    position: absolute;
    left: var(--edge);
    right: var(--edge);
    bottom: 48px;
    display: flex;
    gap: 40px;
    font-size: 22px;
    color: var(--text-2);
}

.hint {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hint-key {
    border-radius: 10px;
    padding: 4px 12px;
    background: var(--glass);
    box-shadow: inset 0 0 0 1px var(--glass-line);
    color: var(--fg);
    font-weight: 600;
}

/*
 * Render probe stage (Lab only). Deliberately breaks the performance rules above: that is the
 * point — these styles exist to measure what breaking them costs on this TV.
 */
/* Chromium 85 has no `inset` shorthand, so the sides are set individually. */
.probe-stage {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    background: #07080c;
}

.probe-glow {
    position: absolute;
    width: 1100px;
    height: 1100px;
    background: radial-gradient(circle, rgba(120, 140, 255, 0.5), rgba(120, 140, 255, 0) 70%);
}

.probe-glow-0 { top: -380px; left: 140px; }
.probe-glow-1 { top: 180px; left: 820px; }
.probe-glow-2 { top: -220px; left: 1400px; }

.probe-row {
    position: absolute;
    top: 420px;
    left: var(--edge);
    display: flex;
    gap: 36px;
}

.probe-tile {
    width: 300px;
    height: 170px;
    border-radius: 18px;
    background: linear-gradient(140deg, #d8232a, #8c1419);
}

/* The expensive kind: a large blur radius, as used throughout the proposed redesign. */
.probe-shadow { box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }

.probe-focus { box-shadow: 0 0 0 5px var(--ring), 0 40px 100px rgba(0, 0, 0, 0.6); }

/*
 * Screen saver.
 *
 * Only `transform` and `opacity` are animated, both on elements with their own layer, so the
 * zoom and the crossfade should be composited rather than repainted. That follows the rule at
 * the top of this file but is not separately measured: the Lab probe times rAF intervals while
 * JavaScript mutates the stage, and these transitions are set once and then run without the
 * main thread, which that probe would report as a clean 60 fps whether or not the panel keeps
 * up. Judge it by eye instead — Settings ▸ Screen saver ▸ Show it now, on the TV.
 *
 * What is measured is what this deliberately avoids. The design mockup's backdrop was nine
 * radial-gradients over a linear-gradient, the shape that came back at 4.6 fps with 88 of 90
 * frames dropped; a photo fills that role here. The one gradient left is the scrim, which is
 * static and painted once.
 */
#screensaver {
    background: #05060a;
}

.ss-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    opacity: 0;
    background: center / cover no-repeat;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: opacity 2000ms linear, transform 90000ms linear;
    will-change: transform, opacity;
}

/* Rewinding the zoom for the next photo must not animate. */
.ss-photo.ss-instant {
    transition: none;
}

.ss-scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 420px;
    background: linear-gradient(180deg, rgba(3, 4, 7, 0), rgba(3, 4, 7, 0.55));
}

.ss-caption {
    position: absolute;
    right: var(--edge);
    bottom: 104px;
    transition: transform 1200ms ease-out;
}

.ss-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(220, 224, 232, 0.75);
}

/*
 * Four anchors, cycled every couple of minutes so nothing bright sits in one place long enough
 * to mark the panel. They keep clear of the caption's bottom-left corner.
 */
.ss-clock {
    position: absolute;
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
    transition: transform 1200ms ease-out;
}

.ss-clock.pos-0 { left: var(--edge); bottom: 96px; }
.ss-clock.pos-1 { left: var(--edge); top: 96px; }
.ss-clock.pos-2 { right: var(--edge); top: 96px; text-align: right; }
.ss-clock.pos-3 { left: var(--edge); top: 420px; }

.ss-date {
    font-size: 28px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.64);
}

.ss-time {
    font-size: 120px;
    font-weight: 700;
    line-height: 124px;
    letter-spacing: -3px;
    color: #fff;
}

.ss-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    background: #000;
    opacity: 0;
    transition: opacity 10000ms linear;
}