/* Orbito+ on the web. The same rooms, accents, type and sizes as the phone and TV apps. */
@font-face { font-family: "Geist"; font-weight: 400; src: url("fonts/geist_400.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Geist"; font-weight: 500; src: url("fonts/geist_500.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Geist"; font-weight: 600; src: url("fonts/geist_600.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Geist"; font-weight: 700; src: url("fonts/geist_700.ttf") format("truetype"); font-display: swap; }

:root {
  --bg: #0B0A0E; --surface: #16151B; --raised: #23222A; --text: #F5F4F6; --dim: #9E9CA8; --line: rgba(245, 244, 246, .12);
  --accent: #FFC46B; --on-accent: #2A1700;
  --poster-w: 150px; --poster-r: 14px;
  /* From the home screen the page fills the whole screen, so on a phone turned sideways its camera is at one side.
     The margins and the menu on the left make room for it there. Anywhere else these come to 40px and 216px. */
  --gutter: max(40px, env(safe-area-inset-right)); --rail: calc(216px + env(safe-area-inset-left));
  --glow-rgb: 255, 196, 107; --glow: 1;
  --sub-size: 1.5rem; --sub-back: rgba(0, 0, 0, .75);
  --hover: color-mix(in srgb, var(--raised) 78%, var(--text));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --scroll: 0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* A phone's browser draws a see-through blue box over whatever's tapped. Everything here answers a tap in its own way. */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 400 15px/22px "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
img, svg { display: block; }
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--text); outline-offset: 2px; }
.noscript { padding: 40px; }

html.locked, html.locked body { background: #000; }
html.locked #glow { display: none; }
.gate, .gate-primaries { --bg: #000; --surface: #101010; --raised: #1c1c1c; --line: #2a2a2a; --text: #fff; --dim: #8c8c8c; --accent: #fff; --on-accent: #000; color: #fff; }
.gate { --plus: #fff; }
.gate-primaries .person { --glow-rgb: 255, 255, 255; }
.stars { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.stars i { position: absolute; display: block; border-radius: 50%; background: var(--star, #fff); opacity: .12; animation: twinkle 4s ease-in-out infinite; }
.stars i.sparkle { border-radius: 0; opacity: .06; clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%); animation-name: sparkle; }
@keyframes twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .68; } }
@keyframes sparkle { 0%, 52%, 100% { opacity: .06; transform: scale(.45); } 76% { opacity: .9; transform: scale(1); } }
.stars i.shooting { width: var(--tail); height: 1.6px; border-radius: 1px; opacity: 0; background: linear-gradient(90deg, transparent, var(--star, #fff)); transform-origin: 100% 50%; animation: shooting var(--lasts) cubic-bezier(.2, .7, .4, 1) forwards; }
.stars i.shooting::after { content: ""; position: absolute; right: -1px; top: -1px; width: 3.6px; height: 3.6px; border-radius: 50%; background: var(--star, #fff); }
@keyframes shooting {
  0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scaleX(.1); }
  14% { opacity: 1; }
  60% { opacity: 1; transform: rotate(var(--angle)) translateX(calc(var(--reach) * .72)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--reach)) scaleX(.05); }
}
html[data-motion="0"] .stars i { animation: none; opacity: .34; }
/* These scroll with the page, and the page keeps clear of them, so nothing ever sits on top of the title. */
.center-page:has(.who-logo) { position: relative; padding-top: calc(76px + env(safe-area-inset-top)); }
.center-page .who-logo { position: absolute; top: calc(20px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 2; }
.who-logo svg { height: 30px; }
.who-line { margin-top: 6px; }
/* After a visit stopped while it was on screen: what it was doing, to pass on. */
.stop-note { width: min(560px, 100%); margin: 0 auto 22px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: left; display: flex; flex-direction: column; gap: 8px; }
.stop-note p { margin: 0; }
.stop-title { font-weight: 600; }
.stop-lines { margin: 0; max-height: 172px; overflow: auto; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dim); }
.stop-note .btn { align-self: flex-start; }
.primary-mark { margin-top: -8px; font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: .16em; color: var(--gold, #FFCB57); text-shadow: 0 0 5px var(--gold, #FFCB57), 0 0 14px var(--gold, #FFCB57); animation: primaryGlow 3s ease-in-out infinite; }
@keyframes primaryGlow { 50% { text-shadow: 0 0 7px var(--gold, #FFCB57), 0 0 26px var(--gold, #FFCB57); } }
html[data-motion="0"] .primary-mark { animation: none; }
.profile-scene { position: fixed; inset: 0; z-index: 60; background: #000; animation: heroFade 140ms ease backwards; transition: opacity 300ms; }
.profile-scene canvas { display: block; width: 100%; height: 100%; }
.profile-scene.leaving { opacity: 0; }
/* After picking a profile on a phone: its picture and name over the room's glow, with lights taking turns, while Home gets ready. */
.profile-scene.picture { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--bg); }
.scene-who { display: flex; flex-direction: column; align-items: center; gap: 18px; animation: sceneGrow 620ms var(--spring) backwards; }
@keyframes sceneGrow { from { transform: scale(.84); } }
/* The intro on a phone: the name on black, with its plus going once around it. A tap skips it. */
.intro { position: fixed; inset: 0; z-index: 70; background: #000; transition: opacity 340ms; touch-action: none; }
.intro canvas { display: block; width: 100%; height: 100%; opacity: 0; }
.intro.leaving { opacity: 0; }
.plus-preview { margin-bottom: 10px; }
.plus-preview svg { height: 26px; }
.who-content { display: contents; }
.who-content > * { position: relative; z-index: 1; }
.gate {
  position: relative; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 22px 72px; background: #000; color: #fff; }
.gate-box { width: min(360px, 100%); }
.gate-box .stack { gap: 10px; }
.gate-box .btn.primary { width: 100%; }
.gate-note { margin-bottom: 14px; color: var(--dim); text-align: center; }
.gate-switch { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 14px; transition: color 160ms; }
.gate-switch:hover, .gate-switch:focus-visible { color: var(--text); }
.gate-private { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); text-align: center; color: var(--dim); font-size: 13px; letter-spacing: .4px; }
#glow { position: fixed; inset: -12%; z-index: -1; pointer-events: none; opacity: var(--glow-on, 1); transition: background 650ms var(--ease), opacity 500ms ease; background: radial-gradient(circle 92vmax at 74% -8%, rgba(var(--glow-rgb), calc(.46 * var(--glow))) 0%, rgba(var(--glow-rgb), calc(.17 * var(--glow))) 45%, transparent 100%); }

.display { font: 700 40px/46px "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.025em; }
.title { font: 700 26px/32px "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.02em; }
.rowname { font: 600 19px/25px "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.012em; }
.heading { font-weight: 600; font-size: 16px; line-height: 22px; }
.small { font-size: 13px; line-height: 18px; }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.wordmark { display: inline-block; color: var(--text); line-height: 0; text-decoration: none; }
.wordmark svg { display: block; width: auto; height: 22px; }
.wordmark .plus { fill: var(--plus, var(--accent)); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap; text-decoration: none; transition: transform 300ms var(--spring), background 160ms, color 160ms, box-shadow 220ms; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { transform: translateY(-1px) scale(1.02); }
  .btn.primary:hover:not(:disabled) { box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 38%, transparent); }
}
.btn:active:not(:disabled) { transform: scale(.96); transition-duration: 90ms; }
.btn.primary { background: var(--accent); color: var(--on-accent); font-weight: 600; padding-inline: 20px; }
.btn.primary:disabled { background: var(--raised); color: var(--dim); }
.btn.quiet { background: var(--raised); color: var(--text); }
.btn.quiet:focus-visible { background: var(--text); color: var(--bg); }
.btn.quiet:disabled { color: var(--dim); }
.round { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--raised); color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: transform 300ms var(--spring), background 160ms, color 160ms; }
@media (hover: hover) { .round:hover:not(:disabled) { transform: scale(1.08); } }
.round:active:not(:disabled) { transform: scale(.92); transition-duration: 90ms; }
.round:focus-visible { background: var(--text); color: var(--bg); }
.round:disabled { opacity: .4; }
/* A starred source. */
.round.on { color: var(--accent); }
.round.on:focus-visible { color: var(--bg); }
.chip { border: 0; border-radius: 999px; padding: 8px 16px; background: var(--raised); color: var(--text); font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap; transition: transform 300ms var(--spring), background 180ms, color 180ms; }
.chip.on { background: var(--accent); color: var(--on-accent); }
.chip:active { transform: scale(.94); transition-duration: 90ms; }
.chip:focus-visible { background: var(--text); color: var(--bg); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Forms */
.input { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 10px; background: var(--surface); border: 2px solid var(--line); color: var(--dim); }
.input:focus-within { border-color: var(--accent); }
.input-field { flex: 1; min-width: 0; width: 100%; height: 48px; border: 0; background: transparent; color: var(--text); font-size: 16px; }
.input-field:focus-visible { outline: none; }
.input-field::placeholder { color: var(--dim); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.problem { color: var(--accent); font-size: 13px; line-height: 18px; margin-top: 10px; }
.note { font-size: 13px; line-height: 18px; color: var(--dim); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

.bulbs { display: flex; gap: 7px; padding: 10px 0; }
.bulbs i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: bulb 1040ms infinite alternate; opacity: .25; }
.bulbs i:nth-child(2) { animation-delay: 170ms; }
.bulbs i:nth-child(3) { animation-delay: 340ms; }
@keyframes bulb { to { opacity: 1; } }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; animation: toastIn 420ms var(--spring) backwards; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 10px; font-weight: 500; font-size: 14px; max-width: calc(100vw - 32px); }
.banner { background: var(--raised); padding: 10px 16px; font-size: 13px; line-height: 18px; }

/* Settings lines */
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; background: transparent; text-align: left; text-decoration: none; color: inherit; transition: background 160ms; }
button.row:hover, a.row:hover, .row:focus-visible { background: var(--raised); }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-weight: 600; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; white-space: pre-wrap; }
.row-sub { font-size: 13px; line-height: 18px; color: var(--dim); overflow-wrap: anywhere; white-space: pre-wrap; }
.switch { flex: none; width: 42px; height: 24px; border-radius: 12px; background: var(--raised); position: relative; transition: background 180ms; }
.switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--dim); transition: left 300ms var(--spring), background 180ms; }
.switch.on { background: var(--accent); }
.switch.on i { left: 21px; background: var(--on-accent); }
.choice { padding: 10px 14px; }
.choice .chips { margin-top: 8px; }
.sortable { display: flex; gap: 6px; align-items: center; }
.sortable .row { flex: 1; min-width: 0; }

/* The app's frame */
.shell { display: flex; min-height: 100dvh; }
.rail { position: fixed; inset: 0 auto 0 0; width: var(--rail); display: flex; flex-direction: column; padding: 22px 14px 18px calc(14px + env(safe-area-inset-left)); gap: 4px; z-index: 5; background: linear-gradient(90deg, var(--bg) 70%, transparent); }
.rail .wordmark { padding: 0 12px 16px; }
.rail-items { position: relative; display: flex; flex-direction: column; gap: 4px; --tab-i: 0; }
.rail-pill { position: absolute; top: 0; left: 0; right: 0; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 15%, transparent); transform: translateY(calc(var(--tab-i) * 48px)); transition: transform 420ms var(--spring); }
.nav-item { position: relative; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px; border-radius: 10px; color: var(--dim); text-decoration: none; font-weight: 500; font-size: 14px; transition: background 160ms, color 160ms; }
.nav-item:hover { background: color-mix(in srgb, var(--raised) 60%, transparent); color: var(--text); }
.nav-item:focus-visible { background: var(--text); color: var(--bg); }
.nav-item.on, .nav-item.on:hover { color: var(--accent); }
.nav-item.on:focus-visible { color: var(--bg); }
.rail .who { margin-top: auto; }
.who { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; text-decoration: none; font-weight: 500; font-size: 14px; color: var(--text); min-width: 0; }
.who:hover, .who:focus-visible { background: var(--raised); }
.who span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { flex: 1; min-width: 0; margin-left: var(--rail); padding-bottom: 40px; }
.topbar, .tabs, .kind-bar { display: none; }

.page-in { animation: pageIn 460ms var(--ease) backwards; }
.rise { animation: rise 560ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
.stage { animation: rise 720ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
.tile { flex: none; width: var(--size); height: var(--size); border-radius: calc(var(--size) / 5); background: var(--back); color: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; font: 600 calc(var(--size) * .42)/1 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.02em; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
/* A GIF holds still on its first frame until it, or the button or link it's in, is pointed at or focused. */
.tile.holds .tile-moving, .tile.holds:hover .tile-still, :is(a, button):is(:hover, :focus-visible) .tile.holds .tile-still { display: none; }
.tile.holds:hover .tile-moving, :is(a, button):is(:hover, :focus-visible) .tile.holds .tile-moving { display: block; }
/* A finger can't point at anything, so on a touch screen everyone's GIF plays at Who's watching, as in the phone app,
   unless motion's turned off. */
@media (hover: none) {
  html:not([data-motion="0"]) .people .tile.holds .tile-still { display: none; }
  html:not([data-motion="0"]) .people .tile.holds .tile-moving { display: block; }
}
/* A kids profile: a bright ring, and on bigger pictures the word along the bottom. */
.tile.kids { position: relative; }
.tile.kids::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 max(2px, calc(var(--size) * .035)) var(--kids, #7CE0A3); pointer-events: none; }
.kids-mark { position: absolute; left: 50%; bottom: calc(var(--size) * .07); transform: translateX(-50%); padding: calc(var(--size) * .025) calc(var(--size) * .07); border-radius: 99px; background: var(--kids, #7CE0A3); color: var(--on-kids, #08321A); font: 800 max(9px, calc(var(--size) * .1))/1.15 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .12em; white-space: nowrap; }

/* Who's watching */
.center-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 18px; text-align: center; }
.people { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin: 36px 0 34px; }
.person { width: 148px; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: transparent; padding: 0; text-decoration: none; color: inherit; animation: popIn 620ms var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms + 80ms); transition: opacity 240ms, transform 340ms var(--spring); }
.person .frame { position: relative; border-radius: 30px; transition: transform 320ms var(--spring), box-shadow 200ms; }
.person:focus-visible .frame { transform: scale(1.08); box-shadow: 0 0 0 2.5px var(--text), 0 14px 44px rgba(var(--glow-rgb), .4); }
@media (hover: hover) { .person:hover .frame { transform: scale(1.08); box-shadow: 0 0 0 2.5px var(--text), 0 14px 44px rgba(var(--glow-rgb), .4); } }
.picking .person:not(.picked) { opacity: 0; }
.picking .person.picked { animation: none; transform: scale(1.18); }
.settled .person { animation: none; }
.picking h1, .picking > .btn { opacity: 0; transition: opacity 200ms; }
.person:focus-visible { outline: none; }
.person .name { font-weight: 600; font-size: 16px; line-height: 22px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .edit { position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, .45); color: #fff; display: flex; align-items: center; justify-content: center; }
.add-tile { width: 148px; height: 148px; border-radius: 30px; background: var(--surface); border: 1px solid var(--line); color: var(--dim); display: flex; align-items: center; justify-content: center; }

/* Sign-in */
.auth { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 40px 18px; max-width: 900px; margin: 0 auto; }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; margin-top: 22px; }
.auth-form { max-width: 460px; }
.code { font: 700 38px/44px "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .1em; color: var(--accent); }

/* Home */
.hero { position: relative; min-height: 520px; display: flex; align-items: flex-end; padding: 40px var(--gutter) 40px; overflow: hidden; touch-action: pan-y; user-select: none; }
.hero-art { animation: heroFade 1000ms ease backwards; }
.hero-art img, .hero-wash { animation: slowZoom 16s linear both; animation-delay: var(--elapsed, 0ms); }
.hero-art.still, .hero-text.still .stage { animation: none; }
.hero-text { position: relative; }
.hero-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 2px; align-items: center; }
.hero-dot { border: 0; background: transparent; padding: 8px 3px; display: block; }
.hero-dot i { display: block; position: relative; overflow: hidden; width: 7px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--text) 28%, transparent); transition: width 420ms var(--spring); }
.hero-dot.on i { width: 28px; }
.hero-dot.on i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; animation: dotFill 8s linear backwards; animation-delay: var(--elapsed, 0ms); }
/* Scrolled out of sight, it holds still until it's back. */
.hero.asleep *, .hero.asleep *::after { animation-play-state: paused !important; }
.hero-art { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 55%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 45%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 55%); mask-composite: intersect; }
.hero-art img, .hero-wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-wash { display: block; background: linear-gradient(115deg, var(--bottom) 10%, var(--top) 100%); }
.hero-text { max-width: 620px; display: flex; flex-direction: column; gap: 8px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 20px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--dim); }
.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pad { padding: 30px var(--gutter) 10px; }
.section { padding: 0 var(--gutter); }
.shelf { margin-top: 22px; }
/* A row a long way off screen isn't drawn until it comes near, which with dozens of rows is most of what scrolling the
   page would otherwise be doing, above all in Safari. Meanwhile it takes the room it took when it was last drawn, which
   app.js keeps, so a page put back where it was lands there, or about a row's when it hasn't been drawn yet. */
main > .shelf, main > .row-slot > .shelf { content-visibility: auto; contain-intrinsic-size: auto var(--row-h, calc(var(--poster-w) * 1.5 + 51px)); }
.shelf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 var(--gutter) 8px; }
.shelf-head a { font-size: 13px; color: var(--dim); text-decoration: none; }
.shelf-head a:hover { color: var(--text); }
.shelf-track { display: flex; gap: 14px; overflow-x: auto; padding: 6px var(--gutter) 12px; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.shelf-track::-webkit-scrollbar { display: none; }
.poster { flex: none; width: var(--poster-w); border: 0; padding: 0; background: transparent; text-align: left; color: inherit; text-decoration: none; display: block; }
.poster-frame { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--poster-r); overflow: hidden; background: var(--surface); transition: transform 340ms var(--spring), box-shadow 240ms; }
/* The light that passes over a poster when it's pointed at or the keyboard's on it. It's only there while it is, so
   the thousands of posters on a long Home aren't each carrying one around for nothing. */
.poster:focus-visible .poster-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%); animation: sheen 800ms var(--ease) both; }
.poster:active .poster-frame { transform: scale(.96); transition-duration: 90ms; }
.poster-frame.square { aspect-ratio: 1; }
.poster-frame.landscape { aspect-ratio: 16 / 9; }
.poster:focus-visible .poster-frame { transform: scale(1.07); box-shadow: 0 0 0 2.5px var(--accent), 0 16px 44px rgba(var(--glow-rgb), .42); }
@media (hover: hover) {
  .poster:hover .poster-frame { transform: scale(1.07); box-shadow: 0 0 0 2.5px var(--accent), 0 16px 44px rgba(var(--glow-rgb), .42); }
  .poster:hover .poster-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%); animation: sheen 800ms var(--ease) both; }
}
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.poster:focus-visible { outline: none; }
.poster-frame > img { width: 100%; height: 100%; object-fit: cover; }
.poster-sub { display: block; font-size: 12px; line-height: 16px; color: var(--dim); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.poster.wide { width: calc(var(--poster-w) * 1.72); }
.poster.wide .poster-label { color: var(--text); font-weight: 500; }
.poster-label { display: block; margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--dim); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.bar { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .3); }
.rewatch { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: rgba(0, 0, 0, .58); color: #fff; font-weight: 600; font-size: 14px; line-height: 18px; }
.holdable { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.holdable img { -webkit-user-drag: none; }
.bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.drawn { position: absolute; inset: 0; background: linear-gradient(var(--top), var(--bottom)); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; padding: 9%; }
.drawn-year { font-size: var(--year); line-height: 1.15; opacity: .72; }
.drawn-title { font: 700 calc(var(--title) * .62)/1.12 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.skeleton { position: relative; overflow: hidden; flex: none; width: var(--poster-w); aspect-ratio: 2 / 3; border-radius: var(--poster-r); background: var(--surface); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--text) 9%, transparent) 50%, transparent 75%); animation: shimmer 1500ms linear infinite; }
/* On a page of rows, only what's likely to be on screen slides in or shimmers: the first few rows, and the first few
   things in each. The rest just appears, since nobody sees it arrive, and hundreds of things moving at once is a lot for a
   phone to draw. */
main > section:nth-of-type(n+4) .rise, .shelf-track > .rise:nth-child(n+7), .shelf-track > :nth-child(n+7) .rise, .grid > .rise:nth-child(n+13) { animation: none; }
main > section:nth-of-type(n+4) .skeleton::after, .shelf-track > .skeleton:nth-child(n+5)::after { animation: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--poster-w), 1fr)); gap: 14px 12px; padding: 8px var(--gutter) 40px; }
.grid .poster { width: auto; }
.narrow { max-width: 620px; }
.search-box { padding: 0 var(--gutter); max-width: 720px; }

/* Folders */
.folder { position: relative; flex: none; display: block; width: calc(var(--poster-w) * 1.72); aspect-ratio: 16 / 9; border-radius: var(--poster-r); overflow: hidden; color: #fff; text-decoration: none; background: var(--surface); transition: transform 340ms var(--spring); }
.folder.rise { animation: rise 520ms var(--ease) backwards; animation-delay: calc(var(--i) * 45ms); }
.folder::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .74)); pointer-events: none; }
.folder-art { position: absolute; inset: 0; display: block; background: linear-gradient(135deg, var(--top), var(--bottom)); }
.folder-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folder-name { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font-weight: 700; font-size: 17px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (hover: hover) { .folder:hover { transform: scale(1.03); } }
.folder-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.folder-list .folder { width: auto; }
.folder-preview { padding: 0 14px 14px; }
.folder-preview .folder { width: min(320px, 100%); }
.folder-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 18px; }
.folder-top h1 { flex: 1 1 auto; min-width: 0; }
.rows-actions { margin-bottom: 6px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--dim); text-decoration: none; font-size: 14px; line-height: 20px; }
.text-link:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) { .text-link:hover { color: var(--text); } }
.library-groups { margin: 12px 0 2px; }
.library-versions { margin: 8px 0 6px; }
.library-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 8px 14px; border-top: 1px solid var(--line); }
.library-row .row-title { min-width: 0; }
.library-row .chips { flex: none; flex-wrap: nowrap; }
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.cover-choice { aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; color: var(--text); font: inherit; font-size: 13px; line-height: 17px; background: linear-gradient(135deg, var(--top), var(--bottom)); outline: 2px solid transparent; outline-offset: 2px; transition: transform 240ms var(--spring); }
.cover-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-choice.auto { padding: 8px; background: var(--surface); }
.cover-choice.on { outline-color: var(--accent); }
.cover-choice:focus-visible { outline-color: var(--text); }

/* A title */
.detail { position: relative; padding: 0 var(--gutter); }
.detail-art { position: absolute; inset: 0 0 auto 0; height: 460px; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.detail-art img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transform: translateY(calc(var(--scroll) * .4px)); animation: settleZoom 1800ms var(--ease) backwards; }
.detail-head > .poster-frame { animation: popIn 620ms var(--spring) backwards; }
.detail-text > * { animation: rise 620ms var(--ease) backwards; }
.detail-text > :nth-child(2) { animation-delay: 60ms; }
.detail-text > :nth-child(3) { animation-delay: 120ms; }
.detail-text > :nth-child(n + 4) { animation-delay: 180ms; }
.detail-head { display: flex; gap: 28px; padding-top: 72px; align-items: flex-end; }
.detail-head .poster-frame { width: 200px; flex: none; }
.detail-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 680px; }
.back-link { position: absolute; top: 18px; left: var(--gutter); z-index: 3; }
/* The bell for new episodes, across from Back. It's only on a phone, where the website can be on the Home Screen like an app. */
.bell-link { position: absolute; top: 18px; right: var(--gutter); z-index: 3; display: none; }
.bell-link .round.on { color: var(--accent); }
.detail .shelf { margin-inline: calc(-1 * var(--gutter)); }
.cast-card { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; text-decoration: none; color: var(--text); }
.cast-card:first-child { margin-left: -10px; }
.cast-face { display: block; width: 84px; height: 84px; margin-bottom: 6px; border-radius: 50%; overflow: hidden; background: var(--surface); transition: transform 340ms var(--spring), box-shadow 240ms; }
.cast-face.large { flex: none; width: 112px; height: 112px; margin: 0; }
.cast-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cast-initials { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 600; font-size: 20px; }
.cast-name { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cast-role { max-width: 100%; font-size: 12px; line-height: 1.3; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-card:active .cast-face { transform: scale(.96); transition-duration: 90ms; }
.cast-card:focus-visible { outline: none; }
.cast-card:focus-visible .cast-face { transform: scale(1.06); box-shadow: 0 0 0 2.5px var(--accent), 0 12px 32px rgba(var(--glow-rgb), .42); }
@media (hover: hover) { .cast-card:hover .cast-face { transform: scale(1.06); box-shadow: 0 0 0 2.5px var(--accent), 0 12px 32px rgba(var(--glow-rgb), .42); } }
.someone-top { display: flex; flex-direction: column; gap: 14px; }
.someone-head { display: flex; align-items: center; gap: 18px; }
.someone-head h1 { min-width: 0; }
.someone-about { max-width: 680px; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.episodes { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; max-width: 860px; }
.episode { display: flex; gap: 14px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; color: inherit; transition: background 160ms, transform 300ms var(--spring); }
@media (hover: hover) { .episode:hover:not(:disabled) { transform: translateX(4px); } }
.episode:hover:not(:disabled), .episode:focus-visible { background: var(--raised); }
.episode:disabled { opacity: .5; }
.thumb { position: relative; flex: none; width: 150px; aspect-ratio: 16 / 9; border-radius: var(--poster-r); overflow: hidden; background: var(--surface); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:has(.bar) .thumb-code { padding-bottom: 16px; }
.thumb-code { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72)); color: #fff; font-weight: 600; font-size: 12px; line-height: 16px; }

.sheet-back { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .6); display: flex; justify-content: flex-end; animation: heroFade 240ms ease backwards; }
/* It goes from the top of the screen to the bottom, so on a phone it keeps clear of the camera and the bar at the bottom. */
.sheet { width: min(520px, 100%); height: 100%; overflow-y: auto; background: var(--surface); padding: calc(24px + env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) 24px; display: flex; flex-direction: column; gap: 6px; animation: sheetIn 460ms var(--ease) backwards; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
/* The sheet scrolls as a whole, so nothing in it gives up its height. The source tabs scroll sideways, and would otherwise be squashed to a sliver once the list is long. */
.sheet > * { flex-shrink: 0; }
.hold-back { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .66); animation: heroFade 200ms ease backwards; }
.hold-menu { width: min(380px, 100%); padding: 10px; border-radius: 20px; background: var(--surface); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); animation: holdIn 320ms var(--ease) backwards; }
.hold-head { padding: 10px 14px 12px; }
.hold-head .heading { overflow-wrap: anywhere; }
.hold-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 8px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background 140ms ease; }
.hold-row:hover { background: var(--raised); }
.hold-row:focus-visible { outline: none; background: var(--text); color: var(--bg); }
.hold-row:focus-visible .row-sub { color: inherit; }
.hold-words { display: flex; flex-direction: column; min-width: 0; }
@keyframes holdIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.stream { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; background: var(--raised); text-align: left; color: inherit; text-decoration: none; transition: background 160ms, transform 300ms var(--spring); }
@media (hover: hover) {
  .stream:not(.link):hover:not(:disabled) { transform: translateX(-3px); }
  .stream.link:hover:not(:disabled) .link-go { background: var(--text); color: var(--bg); transform: scale(1.08); }
}
.stream:focus-visible { background: var(--text); color: var(--bg); }
.stream:focus-visible .row-sub { color: inherit; }
.stream:disabled { opacity: .55; }
/* The list of links after Play. The title sits in its own light at the top, and each link is a card: its quality in a
   square, what's special about it, its size and where it's from, and a round play button. The one that would be picked by
   itself says it's the best match. */
.links-sheet { width: min(560px, 100%); position: relative; isolation: isolate; }
.links-glow { position: absolute; left: 0; right: 0; top: 0; height: 320px; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 95% at 72% 0%, color-mix(in srgb, var(--title-glow, var(--accent)) 50%, transparent), transparent 72%); }
.links-glow img { position: absolute; inset: -25%; width: 150%; height: 150%; object-fit: cover; filter: blur(44px) saturate(1.3); opacity: .5; }
.links-glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 15%, transparent), var(--surface) 96%); }
.sheet-head.links-head { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: end; margin: 6px 0 14px; }
.links-head > .round { align-self: start; }
.links-poster { position: relative; display: block; width: 76px; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--raised); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.links-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.links-words { min-width: 0; }
.links-eyebrow { margin: 0 0 4px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.links-name { margin: 0; font-size: 24px; line-height: 29px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.links-sub { margin: 3px 0 0; }
.links-sub:empty { display: none; }
.links-summary { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.links-summary[hidden] { display: none; }
.links-spin { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 22%, transparent); border-top-color: var(--text); animation: linksSpin 800ms linear infinite; }
@keyframes linksSpin { to { transform: rotate(360deg); } }
.links { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.links-status:empty { display: none; }
.stream.link { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 14px; padding: 12px; border-radius: 18px; transition: background 160ms, box-shadow 160ms; }
.stream.link:focus-visible { outline: none; background: var(--hover); color: inherit; box-shadow: 0 0 0 2.5px var(--text); }
.stream.link:focus-visible .row-sub { color: var(--dim); }
.link-q { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: -.01em; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--dim); }
.link-q.q1080, .link-q.q1440 { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.link-q.q2160 { font-size: 19px; color: var(--accent); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 30%, var(--raised)), color-mix(in srgb, var(--accent) 9%, var(--raised))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent); }
.link-words .sb-row { margin: 6px 0 3px; }
/* The best match's label goes after the name, or under it when there isn't room for both. */
.link-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.link-line .row-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-flag { flex: none; width: 21px; height: 14px; clip-path: inset(0 round 3px); }
.link-best { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; line-height: 16px; font-weight: 700; }
/* The best in the second language: the same shape, in outline, so the best match still stands out. */
.link-best.other { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 45%, transparent); }
.link-about { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 10%, transparent); transition: background 160ms, color 160ms, transform 300ms var(--spring); }
.stream.link.best .link-go { background: var(--text); color: var(--bg); }
.stream.link:disabled .link-go { visibility: hidden; }
.badge { flex: none; font-weight: 600; font-size: 12px; line-height: 16px; padding: 3px 7px; border-radius: 6px; background: var(--accent); color: var(--on-accent); }
.sb-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 4px; }
.sb { display: inline-flex; align-items: center; font-weight: 600; font-size: 11px; line-height: 14px; padding: 3px 7px; border: 1px solid transparent; white-space: nowrap; color: var(--text); }
.sb.size-0 { font-size: 10px; line-height: 13px; padding: 2px 5px; }
.sb.size-2 { font-size: 13px; line-height: 17px; padding: 4px 9px; }
.sb.shape-0 { border-radius: 2px; }
.sb.shape-1 { border-radius: 6px; }
.sb.shape-2 { border-radius: 999px; }
.sb.clean { border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.sb.solid { background: var(--c); color: var(--on); }
.sb.glass { background: color-mix(in srgb, var(--text) 12%, transparent); border-color: color-mix(in srgb, var(--text) 18%, transparent); }
.sb.mono { background: var(--text); color: var(--bg); }
.sb.ink { background: #000; color: #fff; border-color: color-mix(in srgb, var(--text) 22%, transparent); }
.sb.neon { background: color-mix(in srgb, var(--c) 14%, transparent); border-color: var(--c); color: var(--c); }
.sb.minimal { padding: 0; border: 0; color: var(--dim); }
.sb.ticket { background: var(--raised); }
.sb.ticket.res { background: var(--accent); color: var(--on-accent); }
/* Its color running into a deeper shade of it. */
.sb.gradient { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 62%, #000)); color: var(--on); }
/* Lit up in its color, on black. */
.sb.glow { background: #0A0A0C; border-color: var(--c); color: var(--c); box-shadow: 0 0 7px 1px color-mix(in srgb, var(--c) 42%, transparent); text-shadow: 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); }
/* Polished silver. */
.sb.chrome { background: linear-gradient(180deg, #F7F8FA, #C3CAD3 50%, #EDEFF3); border-color: #9AA3AE; color: #1B1F24; }
/* Like the shine on a hologram sticker. */
.sb.holo { background: linear-gradient(135deg, #FFA7D8, #C6A8FF, #9ED8FF, #A6F5D6); color: #1C1430; }
/* Dot: just a dot in its color before the words. It's "spot" here, since .dot is already the color buttons. */
.sb.spot, .sb.spot.size-0, .sb.spot.size-2 { padding: 0; border: 0; gap: 5px; }
.sb.spot::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.sb.spot.shape-0::before { border-radius: 1px; }
.sb.spot.size-2::before { width: 8px; height: 8px; }
/* Capitals in its color, like the labels on an old stereo. */
.sb.retro { background: #0B0B0D; border-color: color-mix(in srgb, var(--c) 35%, transparent); color: var(--c); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.badge-preview { padding: 14px; margin-bottom: 4px; border-radius: 14px; background: var(--surface); }
.badge-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.badge-style { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 2px solid transparent; border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.badge-style.on { border-color: var(--accent); }
.badge-style.on .badge-style-name { color: var(--accent); }
.badge-style-name { font-weight: 500; font-size: 14px; line-height: 20px; }
.badge-colors { margin: -2px 0 10px; }
.small-dot { width: 32px; height: 32px; }

/* The player */
.player { position: fixed; inset: 0; z-index: 30; background: #000; display: flex; align-items: center; justify-content: center; }
.player video { width: 100%; height: 100%; background: #000; }
.player video::cue { font-size: var(--sub-size); background: var(--sub-back); color: #fff; }
/* Held upright, the video is only as tall as its picture, so subtitles go under the picture rather than the screen's
   foot. Sideways, they rise out of the way while the buttons are showing. */
@media (max-aspect-ratio: 1/1) {
  .player video { height: auto; max-height: 100%; }
  .player.zoomed video { height: 100%; }
  /* The picture is in the middle, so the shade is only where the buttons are. */
  .pc-shade-top { height: 20%; }
  .pc-shade-bottom { height: 24%; }
}
.player video::-webkit-media-text-track-container { transition: transform 240ms var(--ease); }
@media (min-aspect-ratio: 1/1) {
  .player:not(.idle):not(.native):not(.panel-open):not(.ending) video::-webkit-media-text-track-container { transform: translateY(-112px); }
}
@media (min-aspect-ratio: 1/1) and (max-width: 1000px) {
  .player:not(.idle):not(.native):not(.panel-open):not(.ending) video::-webkit-media-text-track-container { transform: translateY(-84px); }
}
/* While a video loads: the logo's plus going around a thin ring, with a tail of light behind it. */
.orbit-loader { position: absolute; top: 50%; left: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11); opacity: 0; pointer-events: none; transition: opacity 180ms; }
.player.loading .orbit-loader { opacity: 1; }
.orbit-loader i { position: absolute; inset: 0; animation: orbitTurn 1500ms linear infinite; }
.orbit-loader i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -171deg, transparent, color-mix(in srgb, var(--plus) 20%, transparent) 85deg, color-mix(in srgb, var(--plus) 85%, transparent) 171deg, transparent 171deg); -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
.orbit-loader b { position: absolute; top: -7px; left: 30px; width: 14px; height: 14px; filter: drop-shadow(0 0 6px var(--plus)); animation: orbitTurn 1500ms linear infinite reverse; }
.orbit-loader b::before, .orbit-loader b::after { content: ""; position: absolute; border-radius: 2px; background: var(--plus); }
.orbit-loader b::before { inset: 5.25px 0; }
.orbit-loader b::after { inset: 0 5.25px; }
@keyframes orbitTurn { to { transform: rotate(360deg); } }
.player { --on-video: #f6f0e6; --on-video-dim: rgba(246, 240, 230, .7); --glass: rgba(16, 15, 20, .58); --glass-edge: rgba(245, 244, 246, .14); --card: rgba(16, 15, 20, .96); --ink: #0b0a0e; color: var(--on-video); }
.player.idle { cursor: none; }
.player.zoomed video { object-fit: cover; }
/* A touch shows or hides the buttons. It's under them, over the video. */
.pc-hit { position: absolute; inset: 0; }
.pc { position: absolute; inset: 0; transition: opacity 240ms; }
/* Only the buttons and the bar take a touch. Anywhere else goes through to show or hide them. */
.pc, .pc * { pointer-events: none; }
.pc button, .pc .pc-bar { pointer-events: auto; }
.player.idle .pc, .player.panel-open .pc, .player.ending .pc { opacity: 0; }
.player.idle .pc button, .player.idle .pc .pc-bar, .player.panel-open .pc button, .player.panel-open .pc .pc-bar, .player.ending .pc button, .player.ending .pc .pc-bar { pointer-events: none; }
.pc-shade { position: absolute; left: 0; right: 0; pointer-events: none; }
.pc-shade-top { top: 0; height: 42%; background: linear-gradient(rgba(0, 0, 0, .74), rgba(0, 0, 0, .34) 45%, transparent); }
.pc-shade-bottom { bottom: 0; height: 52%; background: linear-gradient(transparent, rgba(0, 0, 0, .5) 34%, rgba(0, 0, 0, .8) 62%, rgba(0, 0, 0, .92)); }

/* Along the top: back, what's playing, and the time now and when it'll be over. */
.pc-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; gap: 16px; padding: max(26px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right)) 0 max(40px, env(safe-area-inset-left)); }
.player.native .pc-top { padding-bottom: 40px; background: linear-gradient(rgba(0, 0, 0, .74), transparent); transition: opacity 240ms; }
.player.native.idle .pc-top { opacity: 0; pointer-events: none; }
.pc-names { flex: 1; min-width: 0; }
.pc-kicker { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.pc-title { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-what { margin-top: 6px; display: flex; align-items: center; gap: 8px; color: var(--on-video-dim); font-size: 14px; line-height: 19px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-age { border: 1px solid rgba(246, 240, 230, .34); border-radius: 5px; padding: 0 5px; font-size: 11.5px; line-height: 17px; font-weight: 600; }
.pc-clock { flex: none; text-align: right; }
.pc-clock b { display: block; font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-clock span { display: block; color: var(--on-video-dim); font-size: 13px; line-height: 18px; font-weight: 500; }

/* Round see-through buttons, white when they're the one you're on. */
.pc-round, .pc-tool, .pc-pill { flex: none; border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--on-video); display: inline-flex; align-items: center; justify-content: center; transition: transform 300ms var(--spring), background 160ms, color 160ms, border-color 160ms, padding 220ms var(--ease); }
.pc-round { position: relative; width: 46px; height: 46px; border-radius: 50%; padding: 0; }
.pc-round .pc-n { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -36%); font-size: 8.5px; font-weight: 700; line-height: 1; }
.pc-big { width: 72px; height: 72px; }
.pc-big .icon { width: 32px; height: 32px; }
.pc-mid { width: 54px; height: 54px; }
.pc-mid .icon { width: 28px; height: 28px; }
.pc-mid .pc-n { font-size: 10px; }
.pc-round:focus-visible, .pc-tool:focus-visible, .pc-pill:focus-visible { background: var(--on-video); color: var(--ink); border-color: transparent; transform: scale(1.07); outline: none; }
@media (hover: hover) {
  .pc-round:hover, .pc-tool:hover, .pc-pill:hover { background: var(--on-video); color: var(--ink); border-color: transparent; transform: scale(1.07); }
}
.pc-round:active, .pc-tool:active, .pc-pill:active { transform: scale(.94); transition-duration: 90ms; }

/* Phones: play and skipping in the middle, where thumbs are. */
.pc-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 36px; transition: opacity 180ms; }
.player.loading .pc-center { opacity: 0; }
.player.loading .pc-center button { pointer-events: none; }

/* Along the bottom: where you are, and everything else. */
.pc-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 max(40px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(40px, env(safe-area-inset-left)); }
.pc-seek { display: flex; align-items: center; gap: 14px; }
.pc-time { flex: none; min-width: 4ch; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-left { color: var(--on-video-dim); text-align: right; }
.pc-bar { position: relative; flex: 1; height: 30px; cursor: pointer; touch-action: none; outline: none; }
.pc-bar::before, .pc-loaded, .pc-played { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; transition: height 160ms, margin 160ms; }
.pc-bar::before { content: ""; right: 0; background: rgba(255, 255, 255, .2); }
.pc-loaded { width: 0; background: rgba(255, 255, 255, .34); }
.pc-played { width: 0; background: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }
.pc-bar.on::before, .pc-bar.on .pc-loaded, .pc-bar.on .pc-played, .pc-bar:focus-visible::before, .pc-bar:focus-visible .pc-loaded, .pc-bar:focus-visible .pc-played { height: 6px; margin-top: -3px; }
.pc-thumb { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 14px rgba(0, 0, 0, .5); transform: scale(0); transition: transform 160ms var(--spring); }
.pc-bar.on .pc-thumb, .pc-bar:focus-visible .pc-thumb { transform: scale(1); }
.pc-bubble { position: absolute; bottom: 100%; left: 0; margin-bottom: 2px; transform: translateX(-50%); padding: 4px 10px; border-radius: 10px; background: var(--on-video); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity 140ms; pointer-events: none; }
.pc-bar.saying .pc-bubble { opacity: 1; }
@media (hover: hover) {
  .pc-bar:hover::before, .pc-bar:hover .pc-loaded, .pc-bar:hover .pc-played { height: 6px; margin-top: -3px; }
  .pc-bar:hover .pc-thumb { transform: scale(1); }
  .pc-bar:hover .pc-bubble { opacity: 1; }
}
.pc-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.pc-gap { flex: 1; }
.pc-pill { height: 46px; border-radius: 99px; gap: 9px; padding: 0 18px 0 15px; font: 600 15px/1 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
/* The tools stay round until you're on one, which then says what it is and what it's set to. */
.pc-tool { height: 46px; min-width: 46px; border-radius: 99px; padding: 0 11px; font: 600 15px/1 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
.pc-tool[hidden] { display: none; }
.pc-label { display: inline-flex; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 240ms var(--ease), opacity 160ms, margin 240ms var(--ease); }
.pc-val { margin-left: 7px; font-weight: 500; opacity: .6; }
.pc-val:empty { display: none; }
.pc-tool:focus-visible { padding: 0 18px 0 15px; }
.pc-tool:focus-visible .pc-label { max-width: 260px; opacity: 1; margin-left: 9px; }
@media (hover: hover) {
  .pc-tool:hover { padding: 0 18px 0 15px; }
  .pc-tool:hover .pc-label { max-width: 260px; opacity: 1; margin-left: 9px; }
}

/* Subtitles, audio and speed: a card that floats over the picture, which dims toward it. */
.player.panel-open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 35%, rgba(0, 0, 0, .55)); pointer-events: none; }
.pc-panel { position: absolute; z-index: 2; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: min(340px, calc(100% - 36px)); display: flex; flex-direction: column; padding: 20px 12px 8px; border-radius: 26px; background: var(--card); border: 1px solid var(--glass-edge); box-shadow: -20px 0 60px rgba(0, 0, 0, .45); animation: panelIn 320ms var(--ease) backwards; }
.pc-panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateX(24px); } }
.pc-panel-head { display: flex; align-items: center; gap: 12px; padding: 0 4px 0 10px; }
.pc-panel-head h2 { flex: 1; margin: 0; font-size: 21px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; }
.pc-panel-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(246, 240, 230, .08); display: inline-flex; align-items: center; justify-content: center; }
.pc-close { width: 38px; height: 38px; background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pc-panel-note { margin: 8px 10px 0; color: var(--on-video-dim); font-size: 13px; line-height: 18px; }
.pc-opts { margin-top: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.pc-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--on-video); text-align: left; font: inherit; transition: background 140ms, color 140ms; }
.pc-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-opt-text b { font-size: 15px; line-height: 21px; font-weight: 600; }
.pc-opt-text span { margin-top: 2px; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 17px; color: var(--on-video-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-opt .icon { flex: none; color: var(--accent); }
.pc-tag { flex: none; font-style: normal; font-size: 10px; line-height: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 2px 7px; border-radius: 99px; }
.pc-opt:focus-visible { outline: none; background: var(--on-video); color: var(--ink); }
.pc-opt:focus-visible .pc-opt-text span, .pc-opt:focus-visible .icon { color: rgba(11, 10, 14, .62); }
.pc-opt:focus-visible .pc-tag { color: rgba(11, 10, 14, .7); background: rgba(11, 10, 14, .08); }
@media (hover: hover) {
  .pc-opt:hover { background: var(--on-video); color: var(--ink); }
  .pc-opt:hover .pc-opt-text span, .pc-opt:hover .icon { color: rgba(11, 10, 14, .62); }
  .pc-opt:hover .pc-tag { color: rgba(11, 10, 14, .7); background: rgba(11, 10, 14, .08); }
}

/* At the end of an episode: the next one, with a line counting down along its picture. */
.pc-next { position: absolute; z-index: 3; right: max(28px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom)); width: min(460px, calc(100% - 32px)); display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 24px; background: var(--card); border: 1px solid var(--glass-edge); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); animation: rise 420ms var(--ease) backwards; }
.pc-next-pic { position: relative; flex: none; width: 150px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: rgba(246, 240, 230, .08) center / cover no-repeat; }
.pc-next-line { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--accent); }
.pc-next-line.go { width: 100%; transition: width 10s linear; }
.pc-next-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-next-text .pc-kicker { margin-bottom: 4px; }
.pc-next-text b { font-size: 16px; line-height: 22px; font-weight: 700; }
.pc-next-text > span { margin-top: 2px; color: var(--on-video-dim); font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-next-text .actions { margin-top: 10px; }

.player-error { position: absolute; z-index: 3; max-width: 500px; margin: 20px; padding: 24px; border-radius: 26px; background: var(--card); border: 1px solid var(--glass-edge); color: var(--on-video); display: flex; flex-direction: column; gap: 12px; }
.player-error p { margin: 0; color: var(--on-video-dim); }

/* Phones and small windows: a smaller title, the tools as plain round buttons, and play in the middle. */
@media (max-width: 760px), (pointer: coarse) {
  .bell-link { display: block; }
  .pc-top { gap: 12px; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .pc-top .pc-kicker { display: none; }
  .pc-title { font-size: 19px; line-height: 24px; }
  .pc-what { margin-top: 2px; font-size: 12.5px; line-height: 17px; }
  .pc-clock b { font-size: 16px; line-height: 21px; }
  .pc-clock span { font-size: 11.5px; line-height: 16px; }
  .pc-top .pc-round { width: 40px; height: 40px; }
  .pc-bottom { padding: 0 max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .pc-wide { display: none; }
  .pc-time { font-size: 13px; }
  .pc-seek { gap: 10px; }
  .pc-row { gap: 8px; margin-top: 8px; }
  .pc-tool { width: 42px; height: 42px; min-width: 42px; padding: 0; }
  .pc-tool .pc-label { display: none; }
  .pc-pill { height: 42px; padding: 0 14px 0 12px; font-size: 13.5px; }
  .pc-next { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .pc-next-pic { width: 112px; }
  .player-error { margin: 16px; padding: 20px; }
}
@media (min-width: 761px) and (pointer: fine) {
  .pc-center { display: none; }
}

/* The control panel */
.manage { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 10px; padding: 0 var(--gutter); align-items: start; }
.manage-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
.manage-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--dim); text-decoration: none; font-weight: 500; font-size: 14px; transition: background 180ms, color 180ms; }
.manage-link:hover, .manage-link:focus-visible { background: var(--raised); color: var(--text); }
.manage-link.on { background: var(--raised); color: var(--accent); }
.panel { max-width: 720px; min-width: 0; padding: 0 0 40px 20px; }
.panel h2.title { margin-bottom: 4px; }
.panel-note { color: var(--dim); margin-bottom: 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 86px; border: 0; background: transparent; padding: 0; color: var(--dim); font-size: 13px; line-height: 18px; text-align: left; }
.swatch.on { color: var(--text); }
.swatch-face { transition: transform 300ms var(--spring); display: flex; justify-content: space-between; align-items: center; height: 58px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 5px; background: var(--s-bg); }
.swatch.on .swatch-face { border: 2.5px solid var(--accent); }
.swatch-face i { display: block; width: 20px; height: 30px; border-radius: 3px; background: var(--s-raised); }
.swatch-face b { display: block; width: 26px; height: 8px; border-radius: 2px; background: var(--s-text); }
@media (hover: hover) { .swatch:hover .swatch-face { transform: scale(1.05); } }
.dot { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--dot); color: var(--dot-ink); display: inline-flex; align-items: center; justify-content: center; transition: transform 300ms var(--spring); }
.dot:hover, .dot:focus-visible { transform: scale(1.1); }
.control-head { font-weight: 600; font-size: 16px; line-height: 22px; padding: 14px 14px 8px; }
.pad14 { padding-inline: 14px; }
.code-card { margin-top: 14px; padding: 18px 20px; border-radius: 14px; background: var(--surface); animation: rise 460ms var(--ease) backwards; }
.code-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.code-letters { font: 700 52px/58px "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .14em; user-select: all; }
.code-time { font-weight: 600; font-size: 24px; line-height: 30px; font-variant-numeric: tabular-nums; color: var(--accent); }
.code-bar { height: 4px; margin: 10px 0 16px; border-radius: 2px; overflow: hidden; background: var(--raised); }
.code-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform 1000ms linear; }
.code-card.soon .code-time { animation: soon 900ms ease-in-out infinite alternate; }
@keyframes soon { to { opacity: .45; } }
.device { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: var(--surface); margin-bottom: 8px; animation: rise 460ms var(--ease) backwards; }
/* What it says keeps enough room to read easily. Where the buttons beside it would leave less, as on a phone, they go
   under it instead, to the right. */
.device > .row-text { flex: 1 1 180px; }
/* The switch for a notification when someone opens Orbito+ sits with the devices, looking like one of them. */
.open-alerts > .row { padding: 14px 16px; border-radius: 12px; background: var(--surface); margin: 4px 0 18px; }
.open-alerts > .row:disabled { cursor: default; }
.device > .actions { margin-left: auto; }
.device-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--raised); display: flex; align-items: center; justify-content: center; color: var(--dim); }
.device.me .device-icon { color: var(--accent); }
/* Giving one a name: the field needs a bit more room than the words do. */
.device.renaming > .row-text { flex: 1 1 260px; gap: 6px; }
.settled .device { animation: none; }
.device-on { color: color-mix(in srgb, #22c55e 78%, var(--text)); font-weight: 600; }
.device-on i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #22c55e; vertical-align: 1px; animation: devicePulse 2s ease-out infinite; }
@keyframes devicePulse { from { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } to { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }
.history { display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
.history .poster-frame { width: 56px; flex: none; }
.progress-line { height: 4px; border-radius: 2px; background: var(--raised); margin-top: 6px; max-width: 280px; }
.progress-line i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.edit-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
/* A decision waiting to be made, which holds back news from other devices until it is, and a box that only looks like one. */
.confirm, .inset-box { padding: 14px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

@keyframes pageIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes popIn { from { opacity: 0; transform: scale(.72); } }
@keyframes heroFade { from { opacity: 0; } }
@keyframes slowZoom { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes settleZoom { from { scale: 1.08; } to { scale: 1; } }
@keyframes dotFill { from { transform: scaleX(0); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes sheetIn { from { transform: translateX(60px); opacity: 0; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 18px) scale(.94); } }
@keyframes drift { from { transform: translate3d(-6vw, -2vh, 0) scale(1); } to { transform: translate3d(7vw, 3vh, 0) scale(1.12); } }

/* Full motion: the things that move on their own. A phone's room glow stays where it is, since moving it means the
   phone drawing the whole screen again all the time, and the see-through bars blurring it again, even while nothing
   else is moving. */
@media (hover: hover) {
  html[data-motion="2"] #glow { animation: drift 19s ease-in-out infinite alternate; }
}

/* Subtle: everything still springs and slides, but nothing moves unless you do something. */
html[data-motion="1"] .hero-art img, html[data-motion="1"] .hero-wash, html[data-motion="0"] .hero-art img, html[data-motion="0"] .hero-wash { animation: none; }
html[data-motion="1"] .hero-dot.on i::after, html[data-motion="0"] .hero-dot.on i::after { animation: none; }
html[data-motion="1"] .poster-frame::after, html[data-motion="0"] .poster-frame::after { display: none; }

/* Off: only what's needed to see where you are. */
html[data-motion="0"] *, html[data-motion="0"] *::before, html[data-motion="0"] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
html[data-motion="0"] .detail-art img { transform: none; }
html[data-motion="0"] .skeleton::after { display: none; }
html[data-motion="0"] .code-card.soon .code-time, html[data-motion="1"] .code-card.soon .code-time { animation: none; }

@media (hover: hover) {
  .btn.quiet:hover:not(:disabled) { background: var(--hover); }
  .round:hover:not(:disabled) { background: var(--hover); }
  .chip:hover { background: var(--hover); }
  .chip.on:hover { background: var(--accent); }
  .stream:hover:not(:disabled) { background: var(--hover); }
}
@media (max-width: 600px) {
  .who-logo svg { height: 24px; }
}
@media (max-width: 900px) {
  .hold-back { align-items: flex-end; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  :root { --gutter: max(18px, env(safe-area-inset-left), env(safe-area-inset-right)); --rail: 0px; --poster-w: 112px; }
  .display { font-size: 32px; line-height: 38px; }
  .title { font-size: 24px; line-height: 30px; }
  .wordmark svg { height: 20px; }
  .rowname { font-size: 18px; line-height: 24px; }
  .rail { display: none; }
  .content { margin-left: 0; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .topbar { display: flex; position: sticky; top: 0; z-index: 8; align-items: center; justify-content: space-between; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) var(--gutter) 8px; background: transparent; transition: background 260ms, backdrop-filter 260ms; }
  .topbar.solid { background: color-mix(in srgb, var(--bg) 74%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
  .topbar .who { padding: 0; }
  .tabs { display: flex; position: fixed; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 10; height: 60px; padding: 0; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: color-mix(in srgb, var(--bg) 50%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); --tab-i: 0; }
  .tab-pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: calc(25% - 10px); margin-left: 5px; border-radius: 999px; background: var(--text); transform: translateX(calc(var(--tab-i) * (100% + 10px))); transition: transform 460ms var(--spring); }
  .tab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: color-mix(in srgb, var(--text) 78%, transparent); text-decoration: none; font-size: 12px; line-height: 14px; font-weight: 500; white-space: nowrap; transition: color 180ms; }
  .tab .icon { transition: transform 340ms var(--spring); }
  /* Going down the page, the bar draws in to just its icons: shorter from underneath, so the icons stay put, and narrower
     from both sides, as the names fade. Going back up brings it all back out. It only moves while that's happening, so
     turning the phone puts it straight where it goes. */
  .tabs.moving { transition: left 300ms var(--ease), right 300ms var(--ease), bottom 300ms var(--ease), height 300ms var(--ease); }
  .tab-name { display: block; max-height: 14px; overflow: hidden; transition: opacity 180ms, max-height 300ms var(--ease); }
  .tabs.small { left: calc(max(14px, env(safe-area-inset-left)) + (100vw - 28px) * .07); right: calc(max(14px, env(safe-area-inset-right)) + (100vw - 28px) * .07); bottom: calc(24px + env(safe-area-inset-bottom)); height: 46px; }
  .tabs.small .tab { gap: 0; }
  .tabs.small .tab-name { opacity: 0; max-height: 0; transition: opacity 120ms, max-height 300ms var(--ease); }
  /* Home, Movies, Shows, Anime and Live TV in one see-through bar, the page you're on in white. It stays at the top once the page has scrolled it there, and the name above it goes on up. */
  .kind-bar { display: flex; position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 7; height: 50px; margin: 4px var(--gutter) 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: color-mix(in srgb, var(--bg) 50%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); --kind-i: 0; }
  .kind-pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: calc(var(--kind-w, 20%) - 10px); margin-left: 5px; border-radius: 999px; background: var(--text); transform: translateX(var(--kind-x, calc(var(--kind-i) * (100% + 10px)))); transition: transform 460ms var(--spring), width 460ms var(--spring); }
  .kind-tab { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: color-mix(in srgb, var(--text) 80%, transparent); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 180ms; }
  .kind-tab.on { color: var(--bg); font-weight: 600; }
  /* Spanish names are longer, so each tab is as wide as its name, with the rest of the bar shared out evenly. */
  .kind-bar:lang(es) .kind-tab { flex: 1 1 auto; padding: 0 11px; }
  .kind-tab:focus-visible { outline: 2.5px solid var(--text); outline-offset: -2px; }
  .content:has(.kind-bar) > .topbar, .content:has(.kind-bar) > .topbar.solid { position: relative; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tab.on { color: var(--bg); font-weight: 600; }
  .tab.on .icon { transform: scale(1.08); }
  .hero { min-height: 560px; margin-top: -56px; padding-top: 24px; }
  .hero-art { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 48%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 48%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 45%); }
  .hero-art { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 48%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 48%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 45%); }
  .auth-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .people { gap: 22px; }
  .person, .add-tile { width: 124px; }
  .add-tile { height: 124px; }
  .manage { grid-template-columns: minmax(0, 1fr); }
  .manage-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
  .manage-link { flex: none; }
  .panel { padding-left: 0; }
  /* A title: its picture across the top, then everything else stacked and full width. */
  .detail-art { position: relative; inset: auto; height: 64vw; max-height: 360px; margin: calc(-52px - env(safe-area-inset-top)) calc(-1 * var(--gutter)) 0; z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  .detail-art img { opacity: 1; transform: none; }
  .back-link, .bell-link { top: calc(58px + env(safe-area-inset-top)); }
  .detail-head { display: block; position: relative; padding-top: 0; margin-top: -22px; }
  .detail-head > .poster-frame { display: none; }
  .detail:not(:has(.detail-art)) .detail-head { padding-top: 58px; margin-top: 0; }
  .detail:not(:has(.detail-art)) .detail-head > .poster-frame { display: block; width: 120px; margin-bottom: 16px; }
  .detail-text { gap: 10px; max-width: none; }
  .detail-text > .actions { margin-top: 6px; gap: 8px; }
  .detail-text > .actions .btn { flex: 1 1 auto; min-height: 46px; }
  .detail-text > .actions .btn.primary { flex: 1 1 100%; }
  .detail-text > .meta-line { gap: 2px 14px; }
  .thumb { width: 128px; }
  .episode { padding: 8px 0; gap: 12px; }
  .episode .row-title { font-size: 14px; line-height: 20px; }

  /* Home: the same picture treatment, with room for the words under it. */
  .hero { height: min(132vw, 600px); min-height: 480px; margin-top: calc(-52px - env(safe-area-inset-top)); padding: 0 var(--gutter) 36px; align-items: flex-end; }
  .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 110px; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent); pointer-events: none; }
  .hero-art { -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .5) 58%, transparent 88%); mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .5) 58%, transparent 88%); -webkit-mask-composite: source-over; mask-composite: add; }
  .hero-text { width: 100%; gap: 8px; }
  .hero-text .actions .btn { min-height: 46px; }
  .hero-text .actions .btn.primary { flex: 1 1 auto; }
  .hero-text .actions .btn.quiet { flex: 0 0 auto; padding-inline: 22px; }
  .hero-dots { bottom: 8px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  .shelf { margin-top: 18px; }
  .shelf-track { gap: 10px; }

  /* Manage: everything starts at the same left edge. */
  .row, .choice, .control-head, .pad14, .history { padding-inline: 0; }
  .manage-nav { gap: 6px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 14px; }
  .manage-link { padding: 8px 14px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; }
  .manage-link .icon { display: none; }
  .manage-link.on { background: var(--text); color: var(--bg); }
  .panel-note { font-size: 14px; line-height: 21px; }
  .sortable.long { flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-block: 6px 12px; border-top: 1px solid var(--line); }
  .sortable.long > :first-child { flex: 1 1 100%; }
  .sortable .round { width: 38px; height: 38px; }
  .sortable { gap: 4px; }
  .rows-actions .btn { flex: 1 1 auto; }
  .library-groups { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .library-groups::-webkit-scrollbar { display: none; }
  .library-groups .chip { flex: none; }
  .library-row { padding-inline: 0; }
  .folder-preview { padding-inline: 0; }
  .folder-name { font-size: 15px; line-height: 20px; }
  .device { padding: 12px; gap: 12px; }
  .device .actions { flex-wrap: nowrap; }

  /* A finger has no hover or keyboard focus, so nothing stays lit up after it's touched. */
  @media (hover: none) {
    .poster:focus-visible .poster-frame, .person:focus-visible .frame { transform: none; box-shadow: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---- The new look: a title card at the top, logos, pills, streaming services and charts ---- */
.hero { margin: 6px var(--gutter) 0; min-height: 0; height: clamp(440px, 52vw, 560px); padding: 28px 28px 40px; border-radius: 18px; isolation: isolate; background: var(--surface); color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .32) 50%, transparent 80%), linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .5) 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border: 1px solid rgba(255, 255, 255, .16); border-radius: inherit; }
.hero-art { -webkit-mask-image: none; mask-image: none; }
.hero-text { max-width: 440px; gap: 6px; z-index: 2; }
.hero-text .clamp { color: rgba(255, 255, 255, .9); }
/* The dots go under the buttons, clear of them. */
.hero-dots { z-index: 2; bottom: 10px; }
.hero-logo, .title-art { margin: 0; display: flex; align-items: flex-end; }
.hero-logo { height: 110px; width: min(340px, 100%); }
.title-art { height: 96px; width: min(360px, 100%); }
.hero-logo img, .title-art img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: left bottom; }
.title-words { font: 700 40px/44px "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.025em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta-line.dots { gap: 0; color: #fff; font-weight: 600; }
.meta-line.dots span + span::before { content: "\2022"; margin: 0 10px; opacity: .8; }
.age { border: 1px solid currentColor; border-radius: 3px; padding: 0 5px; font-size: 11px; line-height: 16px; font-weight: 600; }
.btn.pill { border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 15px; background: rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(6px); }
.btn.pill.solid { background: #fff; color: #000; }
.btn.pill:focus-visible { background: #fff; color: #000; outline: none; }
/* The title page's buttons are pills too, with Play in white. */
.detail .btn { border-radius: 999px; font-weight: 600; }
.detail .btn.primary { background: var(--text); color: var(--bg); }
.detail .btn.quiet { background: color-mix(in srgb, var(--text) 12%, transparent); }
.detail .btn.quiet:focus-visible { background: var(--text); color: var(--bg); }

/* Streaming services: each one's own logo from TMDB, beside its name. */
.services { margin-top: 18px; }
.service { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 150px; height: 72px; padding: 0 16px; white-space: nowrap; border-radius: 12px; background: var(--raised); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-weight: 600; font-size: 14px; line-height: 18px; text-decoration: none; transition: transform 300ms var(--spring), box-shadow 200ms; }
.service-logo { flex: none; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.service-logo img { width: 100%; height: 100%; object-fit: cover; }
.service:focus-visible { outline: none; box-shadow: 0 0 0 2.5px var(--text); }
@media (hover: hover) { .service:hover { transform: scale(1.04); box-shadow: 0 0 0 2.5px var(--text); } }
.service-title { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; }
.accent-bar { width: 4px; height: 24px; border-radius: 2px; background: var(--accent); }

/* Charts: each title's place, drawn as a large outline that its poster tucks over. */
.chart-item { flex: none; display: flex; align-items: flex-start; }
.chart-num { flex: none; width: calc(var(--poster-w) * .39); margin-top: calc(var(--poster-w) * -.12); text-align: right; font: 700 calc(var(--poster-w) * .81)/1 "Geist", system-ui, sans-serif; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--text) 42%, transparent); transform: scaleX(.8); transform-origin: right top; user-select: none; }
.chart-item .poster { position: relative; margin-left: calc(var(--poster-w) * -.06); }

/* Search: the bar and the ways to browse along the top, then titles across the page. */
.search-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 24px var(--gutter) 0; }
.search-top .search-box { padding: 0; flex: 0 1 320px; max-width: none; }
.search-top .input { border-radius: 999px; height: 40px; background: color-mix(in srgb, var(--text) 7%, transparent); border-color: transparent; }
.search-top .input:focus-within { border-color: var(--text); }
.search-top .input-field { height: 36px; }
.search-top .chips { flex-wrap: nowrap; }
.pick { appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; padding: 8px 34px 8px 16px; background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; color: var(--text); font: 500 14px/20px "Geist", system-ui, sans-serif; }
.pick:focus-visible { outline: 2.5px solid var(--text); outline-offset: 1px; }
.search-heading { padding: 18px var(--gutter) 2px; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; }
.search-grid { padding-top: 10px; }

@media (max-width: 900px) {
  .hero { height: 480px; padding: 18px 18px 36px; align-items: flex-end; margin-top: 0; }
  .hero-dots { bottom: 6px; }
  /* Without a picture across the top, the poster starts under the back button rather than behind it. */
  .detail:not(:has(.detail-art)) .detail-head { padding-top: calc(114px + env(safe-area-inset-top)); }
  .hero::before { inset: 0; height: auto; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .45) 62%, rgba(0, 0, 0, .88) 100%); }
  .hero-text .actions .btn { min-height: 0; }
  .hero-logo { height: 84px; width: 82%; }
  .title-art { height: 80px; width: 80%; }
  .title-words { font-size: 30px; line-height: 34px; }
  .hero-text .clamp { -webkit-line-clamp: 2; font-size: 14px; }
  .btn.pill { padding: 9px 18px; }
  /* On a phone the logo is what you look for, so it's big and the name sits beside it. */
  .service { min-width: 0; height: 76px; gap: 12px; padding: 0 18px 0 12px; border-radius: 16px; font-size: 14px; }
  .service-logo { width: 52px; height: 52px; border-radius: 12px; }
  .search-top { padding-top: 12px; }
  .search-top .search-box { flex: 1 1 100%; }
  .search-top .chips, .search-top .pick { flex: none; }
  .search-top { flex-wrap: wrap; }
  .search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* The list after Play: a tab for each source along the top, which stays while the list scrolls. */
/* Narrowing the list to one language: it stays at the top as the list goes by. */
.links-pick-row { position: sticky; top: -24px; z-index: 1; margin: 0 -24px 6px; padding: 10px 24px; background: var(--surface); }
.links-pick-row[hidden] { display: none; }
.links-pick { max-width: 100%; }
.chip-count { margin-left: 2px; opacity: .6; }

/* ---- Settings and profiles, like the apps: each run of rows in a rounded card, choices as boxes that turn white when
   picked, long lists as a drop-down, and rounded buttons. On a computer too, beside its own list of sections, where the
   one that's open is white as well. ---- */
.choice-pick { display: none; }
.btn { border-radius: 999px; }
.btn.primary { background: var(--text); color: var(--bg); }
.btn.primary:disabled { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--dim); }
.btn.quiet { background: color-mix(in srgb, var(--text) 12%, transparent); }
.panel > :is(.row, .choice, .sortable) {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-block-width: 0;
  border-radius: 0;
  padding: 13px 16px;
}
.panel > :is(.row, .choice, .sortable):not(:is(.row, .choice, .sortable) + *) { border-top-width: 1px; border-radius: 16px 16px 0 0; margin-top: 12px; padding-top: 15px; }
.panel > :is(.row, .choice, .sortable):not(:has(+ :is(.row, .choice, .sortable))) { border-bottom-width: 1px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; padding-bottom: 15px; }
.panel > .sortable.long { border-top: 0; }
.panel > .sortable .row { padding: 0; background: none; }
.panel .choice .chips { margin-top: 10px; }
.panel .choice .chip { border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.panel .choice .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.panel .chips .chip.on { background: var(--text); color: var(--bg); }
.panel .choice.long .chips { display: none; }
.panel .choice.long { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.panel .choice.long .row-sub { grid-column: 1; }
.panel .choice.long .choice-pick { display: block; grid-column: 2; grid-row: 1 / span 2; border-radius: 10px; background-color: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.panel .edit-top { padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
@media (hover: hover) { .btn.primary:hover:not(:disabled) { box-shadow: 0 8px 26px color-mix(in srgb, var(--text) 20%, transparent); } }
.manage-link { border-radius: 999px; }
.manage-link.on, .manage-link.on:hover { background: var(--text); color: var(--bg); }
@media (max-width: 900px) {
  .panel .edit-top .tile { --size: 112px !important; }
}

/* ---- A title's page on a phone, like the app: the name, its line with dots, Play right across, the rest in one line
   that slides along, and then what it's about. ---- */
.more-actions { display: contents; }
@media (max-width: 900px) {
  .detail-text > * { order: 3; }
  .detail-text > :is(.title-art, h1) { order: 0; }
  .detail-text > .meta-line { order: 1; gap: 0; }
  .detail-text > .meta-line span + span::before { content: "\2022"; margin: 0 8px; opacity: .8; }
  .detail-text > .meta-line .age::before { content: none; }
  .detail-text > .meta-line .age { margin-left: 8px; }
  .detail-text > :is(.actions, .bulbs) { order: 2; }
  .detail-text > .actions .more-actions { display: flex; flex: 1 1 100%; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .detail-text > .actions .more-actions::-webkit-scrollbar { display: none; }
  .detail-text > .actions .more-actions .btn { flex: none; min-height: 0; padding: 8px 16px; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--text) 18%, transparent); }
  .topbar .who span.name { display: none; }
}

/* The passcode: a card in the middle with a field and a number pad. */
.pass-back { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .7); animation: heroFade 200ms ease backwards; }
.pass-box { width: min(340px, 100%); padding: 22px 20px 14px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); display: flex; flex-direction: column; align-items: center; text-align: center; animation: holdIn 320ms var(--ease) backwards; }
.pass-box.busy { opacity: .7; pointer-events: none; }
.pass-box.shake { animation: passShake 360ms ease; }
@keyframes passShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pass-lock { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--raised); color: var(--text); margin-bottom: 12px; }
.pass-note { margin: 6px 0 0; min-height: 20px; font-size: 14px; line-height: 20px; }
.pass-note.wrong { color: var(--accent); }
.pass-field { width: 100%; margin: 14px 0 12px; height: 54px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--text); text-align: center; font: 600 26px/1 "Geist", system-ui, sans-serif; letter-spacing: .4em; padding: 0 0 0 .4em; outline: none; }
.pass-field:focus { border-color: var(--text); }
.pass-keys { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pass-key { height: 54px; border: 0; border-radius: 16px; background: var(--raised); color: var(--text); font: 600 22px/1 "Geist", system-ui, sans-serif; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 140ms ease, transform 120ms ease; }
.pass-key:hover { background: color-mix(in srgb, var(--raised), var(--text) 10%); }
.pass-key:active { transform: scale(.96); }
.pass-key.quiet { background: transparent; }
.pass-key.go { background: var(--text); color: var(--bg); }
.pass-cancel { margin-top: 10px; padding: 10px 16px; border: 0; background: transparent; color: var(--dim); font: 500 15px/1 "Geist", system-ui, sans-serif; cursor: pointer; border-radius: 99px; }
.pass-cancel:hover { color: var(--text); }
.pass-after { margin-top: 10px; font-size: 13px; line-height: 18px; }
.pass-after button { border: 0; background: none; color: var(--text); text-decoration: underline; font: inherit; cursor: pointer; padding: 0; }
/* Manage's locked part: a lock in the middle until it's open, then its pages as chips. */
.lock-screen { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 560px; }
.lock-icon { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--raised); margin-bottom: 10px; }
.locked-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.locked-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--kids, #7CE0A3) 18%, transparent); color: var(--kids, #7CE0A3); font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.locked-parts { margin-bottom: 18px; flex-wrap: wrap; }
.kids-row[disabled] { cursor: default; opacity: .6; }
.kids-row .bulbs { margin: 0; }
.kids-block { padding-top: 70px; }