/* BarRemote: "Dark room, TV on". Night navy lit by the screen; the glow follows what's on it and dies with the power. Colours from the app icon. */
:root {
  --night: #0e1b3d;
  --deep: #081129;
  --bezel: #33466e;
  --panel: #0d3a63;
  --key: #15507e;
  --sky: #13b5f5;
  --teal: #35dcc4;
  --coral: #ff6a55;
  --text: #eaf4ff;
  --dim: #a9bdd8;
  --glow: #13b5f5;
}

* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font: 400 16px/1.5 "Bricolage Grotesque", -apple-system, sans-serif; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: "Unbounded", "Bricolage Grotesque", sans-serif; }
a { color: var(--teal); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.top, .hero, .room, main, .foot { max-width: 1040px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.top { padding-top: 24px; }
.top a { color: var(--dim); text-decoration: none; font-size: 14px; }
.top a:hover { color: var(--teal); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 52px); align-items: end; padding-block: clamp(20px, 3vw, 36px) clamp(26px, 3.5vw, 40px); }
.icon { width: 62px; height: 62px; border-radius: 14px; box-shadow: 0 0 0 1px rgb(255 255 255 / .12); }
h1 { margin: 16px 0 0; font-size: clamp(32px, 4.5vw, 52px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.lede { margin: 0 0 16px; color: var(--dim); font-size: 17px; }
.store { display: inline-block; padding: 11px 17px; border-radius: 11px; background: var(--coral); color: var(--deep); font-weight: 700; text-decoration: none; transition: background-color .15s; }
.store:hover { background: var(--teal); }

/* The room */
.room { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 310px; column-gap: clamp(18px, 3vw, 34px); align-items: start; }
.room::before {
  /* light thrown on the wall by the screen */
  content: "";
  position: absolute;
  inset: -70px 0 -50px;
  z-index: -1;
  background: radial-gradient(52% 58% at 36% 52%, var(--glow), transparent 72%);
  opacity: .34;
  transition: opacity .5s, background .5s;
}
.room.is-off::before { opacity: 0; }

.menubar { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 14px; height: 30px; margin-bottom: 8px; padding-inline: 12px; border-radius: 9px; background: rgb(8 17 41 / .6); font-size: 13px; font-weight: 500; }
.menubar__app { display: grid; place-items: center; width: 30px; height: 24px; border-radius: 6px; background: rgb(255 255 255 / .18); }
.menubar svg { display: block; }

.tv { padding-top: 14px; }
.tv__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 11px solid var(--bezel); border-radius: 16px; background: linear-gradient(135deg, #0a86e0, #1bb7c9 60%, var(--teal)); transition: filter .35s; }
.tv__stand { width: 34%; height: 26px; margin: 0 auto; background: linear-gradient(var(--bezel), var(--bezel)) center top / 34% 15px no-repeat, linear-gradient(var(--bezel), var(--bezel)) center bottom / 100% 9px no-repeat; border-radius: 0 0 6px 6px; }
.room.is-off .tv__screen { filter: brightness(.08) saturate(.2); }

.tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3%; padding: 5%; }
.tile { display: flex; align-items: flex-end; min-width: 0; padding: 7px 10px; border-radius: 8px; background: var(--c); color: #fff; font: 600 clamp(9px, 1.25vw, 13px)/1.1 "Unbounded", sans-serif; transition: scale .16s, box-shadow .16s; }
.tile.is-focus { scale: 1.06; box-shadow: 0 0 0 3px #fff, 0 8px 18px rgb(8 17 41 / .45); }

.show { position: absolute; inset: 0; display: grid; place-items: center; padding: 6%; text-align: center; background: var(--c); }
.show p { margin: 0; color: #fff; font: 700 clamp(19px, 3.4vw, 36px)/1.1 "Unbounded", sans-serif; }
.show[hidden], .osd[hidden], .panel__off[hidden] { display: none; }

.osd { position: absolute; right: 4%; top: 7%; z-index: 2; margin: 0; padding: 5px 11px; border-radius: 7px; background: rgb(8 17 41 / .78); color: #fff; font-size: clamp(11px, 1.4vw, 14px); font-weight: 600; }

/* The panel, copied from the app */
.panel { position: relative; padding: 11px 12px 13px; border: 1px solid rgb(255 255 255 / .16); border-radius: 15px; background: var(--panel); box-shadow: 0 16px 38px rgb(8 17 41 / .55); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid rgb(255 255 255 / .09); }
.panel__tv { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 4px 9px; border-radius: 7px; background: var(--key); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.panel__keys { display: grid; grid-template-columns: minmax(0, 1fr) 54px 54px; gap: 10px; }

.key { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 4px; border: 0; border-radius: 7px; background: var(--key); color: var(--text); font: 600 13px "Bricolage Grotesque", sans-serif; cursor: pointer; transition: background-color .12s, scale .08s; }
.key:hover { background: #1f6aa3; }
.key:active { scale: .94; background: var(--sky); color: var(--deep); }
.key svg { flex: none; }
.key--power { width: 34px; min-height: 28px; background: none; color: #45e08c; }
.key--power[aria-pressed="false"] { color: var(--dim); }
.key[aria-pressed="true"]#mute { background: var(--coral); color: var(--deep); }

.dpad { display: grid; grid-template: repeat(3, 34px) / repeat(3, minmax(0, 1fr)); gap: 3px; }
.dpad .up { grid-area: 1 / 2; }
.dpad .left { grid-area: 2 / 1; }
.dpad .ok { grid-area: 2 / 2; }
.dpad .right { grid-area: 2 / 3; }
.dpad .down { grid-area: 3 / 2; }
.key.left svg { rotate: -90deg; }
.key.right svg { rotate: 90deg; }
.key.down svg { rotate: 180deg; }
.rocker { display: grid; grid-template-rows: 34px 1fr 34px; gap: 3px; text-align: center; font-size: 11px; font-weight: 600; color: var(--dim); align-items: center; }
.rocker .key { height: 34px; font-size: 19px; font-weight: 500; }
.wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }

.panel__off { position: absolute; inset: 56px 0 0; display: grid; place-content: center; justify-items: center; gap: 10px; border-radius: 0 0 15px 15px; background: var(--panel); }
.panel__off p { margin: 0; font-weight: 700; }
.panel__off .key { padding-inline: 14px; }

.room__note { grid-column: 1 / -1; margin: 18px 0 0; color: var(--dim); font-size: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

main { margin-top: clamp(44px, 6vw, 72px); }

/* Features, laid out like a remote's keys */
.keys-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.keys-grid article { padding: 18px 20px 19px; border-radius: 18px; background: #16295a; box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 3px 0 var(--deep); }
.keys-grid h2 { margin: 0 0 7px; color: var(--teal); font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.keys-grid p { margin: 0; font-size: 15px; color: var(--text); }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(30px, 4vw, 48px) 0 0; }
.shots figure { margin: 0; }
.shots img { border-radius: 12px; }
.shots figcaption { margin-top: 8px; color: var(--dim); font-size: 14px; }

.setup, .fits, .help, .private { margin-top: clamp(38px, 5vw, 60px); }
.setup h2, .fits h2, .help h2, .private h2 { margin: 0 0 14px; font-size: clamp(21px, 2.7vw, 29px); font-weight: 700; line-height: 1.14; letter-spacing: -.02em; }
.setup ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.setup li { counter-increment: step; padding-top: 10px; border-top: 3px solid var(--sky); }
.setup li::before { content: counter(step); display: block; margin-bottom: 3px; color: var(--sky); font: 700 25px "Unbounded", sans-serif; }

.fits ul { margin: 0; padding: 0; list-style: none; max-width: 44em; }
.fits li { padding: 9px 0; border-top: 1px solid rgb(255 255 255 / .13); }
.fits b { color: var(--teal); font-weight: 700; }

.help details { max-width: 44em; border-top: 1px solid rgb(255 255 255 / .13); }
.help summary { padding: 10px 0; font-weight: 600; cursor: pointer; }
.help details p { margin: 0 0 13px; color: var(--dim); }
.help__more { max-width: 44em; margin: 0; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .13); }

.private { margin-bottom: clamp(32px, 4vw, 48px); padding: clamp(20px, 3vw, 30px); border-radius: 18px; background: linear-gradient(115deg, #0b7fda, #18adc4 62%, #27c7b3); color: var(--deep); }
.private h2 { margin-bottom: 6px; }
.private p { margin: 0; max-width: 38em; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-block: 0 26px; color: var(--dim); font-size: 14px; }

/* Privacy page */
.policy { max-width: 700px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 24px) 48px; }
.policy header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.policy header img { width: 50px; height: 50px; border-radius: 11px; }
.policy header h1 { margin: 0; font-size: 26px; }
.sheet { padding: 26px clamp(20px, 4vw, 30px); border-radius: 16px; background: #f4f8fd; color: var(--deep); font: 15.5px/1.55 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
.sheet h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; }
.sheet h3 { margin: 22px 0 4px; font-size: 14.5px; font-weight: 600; }
.sheet .updated { margin-top: 0; opacity: .7; font-weight: 700; }
.sheet p { margin-block: 6px 10px; }
.sheet li { margin: 4px 0; }
.sheet a { color: #0a5fb4; font-weight: 700; }
.top:has(+ .policy) { max-width: 700px; padding-inline: clamp(16px, 4vw, 24px); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .room { grid-template-columns: minmax(0, 1fr); }
  .menubar { display: none; }
  .tv { padding-top: 0; margin-bottom: 18px; }
  .panel { width: 100%; max-width: 360px; margin-inline: auto; }
  .keys-grid, .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .keys-grid, .shots, .setup ol { grid-template-columns: 1fr; }
  .tile { padding: 4px 6px; border-radius: 5px; }
  .tv__screen { border-width: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}