:root {
  --background: #000;
  --text: #fff;
  --muted: #8d8d8d;
  --surface: #0b0b0b;
  --surface-raised: #1c1c1c;
  --line: #262626;
  --dot-off: #2e2e2e;
  --accent: #d71921;
  --sleep-time: #8e8e8e;
  --sleep-date: #5e5e5e;
  --sleep-fade: 1.5s;
  --gutter: 32px;
  --large-player-width: 448px;
  --large-player-height: 252px;
  --mini-player-width: 356px;
  --mini-player-height: 200px;
  --mini-controls-height: 56px;
  --card-gap: 8px;
  --player-radius: 14px;
  --body-font: "Space Grotesk", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dot-font: Doto, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono-font: "Space Mono", "Roboto Mono", "Courier New", monospace;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--background);
  color: var(--text);
  font-family: var(--body-font);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

button, input {
  font: inherit;
  color: inherit;
}

/* Buttons read like Nothing's labels: small monospaced capitals in a thin outline. */
button {
  height: 52px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  font-family: var(--mono-font);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

button:active,
button.primary:active {
  border-color: var(--text);
  background: var(--text);
  color: var(--background);
  transform: scale(0.96);
}

button.primary {
  border-color: var(--text);
  background: var(--text);
  color: var(--background);
}

button svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  fill: currentColor;
}

.icon-pause { display: none; }
.toggle-play.is-playing .icon-play { display: none; }
.toggle-play.is-playing .icon-pause { display: block; }

#keepalive-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0.01;
}

#wallpaper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--sleep-fade);
}

body:not([data-screen="home"]) #wallpaper,
body:not([data-screen="home"]) #photo-frame { opacity: 0.1; }

body.in-game #wallpaper,
body.in-game #photo-frame { display: none; }

/* Photo wallpaper: two pictures cross-fade, darkened toward the clock so the time stays readable. */
#photo-frame {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  transition: opacity var(--sleep-fade);
}

body.photo-wallpaper #photo-frame { display: block; }
body.photo-wallpaper #wallpaper { visibility: hidden; }

.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s;
}

.photo.shown { opacity: 0.6; }

#photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2) 60%, transparent);
}

body.sleeping #photo-frame { opacity: 0; }

/* Screens are stacked vertically and the stage slides between them. */
#stage {
  position: absolute;
  inset: 0;
  transition: transform 0.25s ease;
}

body[data-screen="apps"] #stage { transform: translateY(-100%); }
body.in-app #stage { transform: translateY(-200%); }

.screen {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--gutter);
}

#home { top: 0; }
#apps { top: 100%; }

/* App pages share the bottom slot, and only the open one shows. */
.app-page {
  top: 200%;
  visibility: hidden;
}

body[data-screen="music"] #music,
body[data-screen="timer"] #timer,
body[data-screen="alarm"] #alarm,
body[data-screen="weather"] #weather,
body[data-screen="games"] #games,
body[data-screen="snake"] #snake,
body[data-screen="tetris"] #tetris,
body[data-screen="pong"] #pong,
body[data-screen="breakout"] #breakout,
body[data-screen="g2048"] #g2048,
body[data-screen="mines"] #mines,
body[data-screen="flap"] #flap,
body[data-screen="simon"] #simon,
body[data-screen="full-lyrics"] #full-lyrics,
body[data-screen="notes"] #notes,
body[data-screen="habits"] #habits,
body[data-screen="morning"] #morning,
body[data-screen="toys"] #toys,
body[data-screen="breathe"] #breathe,
body[data-screen="ttt"] #ttt,
body[data-screen="connect4"] #connect4,
body[data-screen="words"] #words,
body[data-screen="countdowns"] #countdowns,
body[data-screen="stats"] #stats,
body[data-screen="settings"] #settings,
body[data-screen="account"] #account { visibility: visible; }

/* Leaves room for the small player so nothing sits on top of it. */
body.has-media .narrow,
body.has-media #tiles {
  margin-right: calc(var(--mini-player-width) + var(--gutter));
  width: auto;
  right: 0;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  margin-bottom: 14px;
}

.app-title {
  font-family: var(--dot-font);
  font-size: 22px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.app-status {
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.big-number {
  font-family: var(--dot-font);
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  line-height: 1;
}

.hint {
  position: absolute;
  right: var(--gutter);
  bottom: 22px;
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

body.hint-seen .hint,
body.has-media .hint { visibility: hidden; }

.quiet {
  height: 44px;
  padding: 0 18px;
  background: transparent;
  font-size: 12px;
  color: var(--muted);
}

.corner-left {
  position: absolute;
  left: var(--gutter);
  bottom: 16px;
}

/* Home */
#sleep-toggle {
  position: absolute;
  top: 20px;
  left: var(--gutter);
  width: 44px;
  padding: 0;
}

#ambient-toggle {
  position: absolute;
  top: 20px;
  left: calc(var(--gutter) + 52px);
  width: 44px;
  padding: 0;
}

#ambient-toggle.active {
  border-color: var(--text);
  background: var(--text);
  color: var(--background);
}


#alarm-buttons {
  position: absolute;
  top: 20px;
  right: var(--gutter);
  display: none;
}

body.alarm-ringing #alarm-buttons { display: flex; }

#alarm-snooze {
  height: 64px;
  margin-right: 10px;
  padding: 0 34px;
  border-color: var(--text);
  background: var(--text);
  color: var(--background);
}

#alarm-stop {
  height: 64px;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text);
}

/* Widgets: small dotted cards like Nothing's, each opening its app when tapped. */
/* Five fit in a row beside the lyrics; more wrap onto a second row above the clock, and any past
   ten are cut off, the least important last. */
#widgets {
  position: absolute;
  top: 80px;
  left: var(--gutter);
  width: 580px;
  max-height: 228px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  transition: opacity var(--sleep-fade), visibility var(--sleep-fade);
}

.widget {
  position: relative;
  box-sizing: border-box;
  width: 104px;
  height: 104px;
  margin: 0 10px 10px 0;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(11, 11, 11, 0.88);
  font-family: var(--body-font);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.widget-label {
  font-family: var(--mono-font);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.widget:active .widget-label { color: inherit; }

.widget-value {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--dot-font);
  font-size: 26px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  line-height: 1;
  white-space: nowrap;
}

.widget-icon svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: currentColor;
}

#widget-weather,
#widget-timer,
#widget-rain,
#widget-art,
#widget-music,
#widget-sky,
#widget-countdown,
#widget-notes,
#widget-habits { display: none; }

body.has-weather #widget-weather,
body.timer-active #widget-timer,
body.rain-soon #widget-rain,
body.visualizing.has-art #widget-art,
body.visualizing #widget-music,
body.has-sky #widget-sky,
body.has-countdown #widget-countdown,
body.has-notes #widget-notes,
body.has-habits #widget-habits { display: flex; }

#widget-rain .widget-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: var(--accent);
}

#moon-dots {
  display: block;
  width: 27px;
  height: 27px;
}

#widget-art {
  align-items: center;
  justify-content: center;
  padding: 0;
}

#album-dots {
  display: block;
  width: 96px;
  height: 96px;
}

#widget-countdown-name {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#widget-alarm:not(.on) .widget-value { color: var(--muted); }

#widget-alarm.on .widget-label::before,
#widget-timer .widget-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: var(--accent);
}

#widget-dial {
  align-items: center;
  justify-content: center;
  padding: 0;
}

#dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#dial-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#dial-day { font-size: 30px; }

#visualizer {
  display: block;
  width: 77px;
  height: 66px;
}

#clock {
  position: absolute;
  left: var(--gutter);
  bottom: 18px;
  transition: opacity var(--sleep-fade);
}

#event-line {
  margin: 0 0 6px 4px;
  font-family: var(--mono-font);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#event-line:empty { display: none; }

#event-line::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 10px 1px 0;
  border-radius: 50%;
  background: var(--accent);
}

#date-line {
  margin-left: 4px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
}

#time,
#timer-display,
#weather-temperature,
#account-code {
  font-variation-settings: "ROND" 100;
}

#time {
  font-family: var(--dot-font);
  font-size: min(36vh, 19vw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -4px;
}

#home-temperature:not(:empty)::before,
#home-alarm:not(:empty)::before {
  content: "  \00B7  ";
  white-space: pre;
}

/* Live lyrics sit above the player, because nothing may cover the player itself. */
#home-lyrics {
  position: absolute;
  right: var(--gutter);
  bottom: calc(18px + var(--mini-controls-height) + var(--mini-player-height) + var(--card-gap) * 2);
  width: var(--mini-player-width);
  height: 140px;
  display: none;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, #000 90%, transparent);
}

#home-lyrics::-webkit-scrollbar { display: none; }

body.has-timed-lyrics #home-lyrics { display: block; }

/* The bottom space lets the last lines scroll up to the top like the rest. */
#lyric-track {
  position: relative;
  padding-bottom: 110px;
}

.home-lyric {
  padding: 4px 0;
  font-size: 19px;
  line-height: 1.25;
  color: var(--muted);
  transition: color 0.4s;
}

.home-lyric.current {
  font-weight: 500;
  color: var(--text);
}

body.has-timed-lyrics #wallpaper { opacity: 0.3; }

/* Sleep: everything fades to black, then large plain numbers fade in by themselves. */
#sleep-toggle,
#ambient-toggle,
#mini-controls,
#home-lyrics,
#player-dock,
.hint {
  transition: opacity var(--sleep-fade), visibility var(--sleep-fade);
}

body.sleeping #wallpaper { opacity: 0; }

body.sleeping #clock { opacity: 0; }

body.sleeping #sleep-toggle,
body.sleeping #ambient-toggle,
body.sleeping #widgets,
body.sleeping .hint,
body.sleeping #mini-controls,
body.sleeping #home-lyrics,
body.sleeping.music-stopped #player-dock {
  opacity: 0;
  visibility: hidden;
}

body.sleep-clock #clock {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 2.5s;
}

body.sleep-clock #time {
  font-family: var(--body-font);
  font-size: min(58vh, 32vw);
  font-weight: 300;
  font-variation-settings: normal;
  letter-spacing: -6px;
  color: var(--sleep-time);
}

body.sleep-clock #date-line {
  order: 1;
  margin: 12px 0 0;
  font-size: 18px;
  color: var(--sleep-date);
}

body.sleep-clock #event-line { display: none; }

/* Apps */
#apps {
  display: flex;
  align-items: center;
}

#apps-header {
  position: absolute;
  top: 22px;
  left: calc(var(--gutter) + 4px);
  right: calc(var(--gutter) + 4px);
}

.tile-grid {
  display: grid;
  gap: 12px;
}

/* Twelve apps in a four by three grid that shares the height between the header and the Home button. */
#tiles {
  flex: 1;
  align-self: stretch;
  margin: 44px 0 48px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
}

#tiles .tile { padding: 14px 16px; }

#tiles .tile-icon svg {
  width: 36px;
  height: 36px;
}

#tiles .tile-name { font-size: 22px; }

/* With a video in the corner, nine apps sit on the left and three fill the space above the player.
   Twelve thin rows let the left tiles take four rows each and the shorter ones above the player three. */
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles {
  margin-right: 0;
  grid-template-columns: repeat(3, 1fr) 8px repeat(2, calc((var(--mini-player-width) - 12px) / 2));
  grid-template-rows: repeat(12, 1fr);
}

body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(1) { grid-area: 1 / 1 / span 4 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(2) { grid-area: 1 / 2 / span 4 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(3) { grid-area: 1 / 3 / span 4 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(4) { grid-area: 1 / 5 / span 3 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(5) { grid-area: 1 / 6 / span 3 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(6) { grid-area: 5 / 1 / span 4 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(7) { grid-area: 5 / 2 / span 4 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(8) { grid-area: 5 / 3 / span 4 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(9) { grid-area: 9 / 1 / span 4 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(10) { grid-area: 9 / 2 / span 4 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(11) { grid-area: 9 / 3 / span 4 / span 1; }
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(12) { grid-area: 4 / 5 / span 3 / span 2; }

/* The tiles above the player are shorter, so their icons shrink a little. */
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(4),
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(5),
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(12) { padding: 10px 14px; }

body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(4) .tile-icon svg,
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(5) .tile-icon svg,
body.has-media:not(.streaming):not(.small-player):not(.dumb-mode) #tiles .tile:nth-child(12) .tile-icon svg {
  width: 26px;
  height: 26px;
}

/* Dumb phone mode: only the everyday apps, as six big tiles, and none of the extra widgets. */
body.dumb-mode #tiles { grid-template-columns: repeat(3, 1fr); }

body.dumb-mode #tiles .tile[data-open="habits"],
body.dumb-mode #tiles .tile[data-open="countdowns"],
body.dumb-mode #tiles .tile[data-open="stats"],
body.dumb-mode #tiles .tile[data-open="games"],
body.dumb-mode #tiles .tile[data-open="toys"],
body.dumb-mode #tiles .tile[data-open="breathe"] { display: none; }

body.dumb-mode #widget-countdown,
body.dumb-mode #widget-habits { display: none; }

/* Minimal mode: no widgets, and smaller lyrics and controls in the corner for more empty space. */
body.minimal-mode { --mini-controls-height: 48px; }

body.minimal-mode #widgets { display: none; }

body.minimal-mode #open-player { height: 38px; }

body.minimal-mode #mini-controls .previous-track,
body.minimal-mode #mini-controls .toggle-play,
body.minimal-mode #mini-controls .next-track {
  width: 38px;
  height: 38px;
}

body.minimal-mode #home-lyrics { height: 96px; }

body.minimal-mode .home-lyric { font-size: 15px; }

/* Small player: the corner video is 200 wide instead of 356, the least YouTube allows, with just the buttons under it. */
body.small-player { --mini-player-width: 200px; }

body.small-player #open-player { display: none; }

body.small-player #mini-controls { justify-content: center; }

/* Album-art songs get a square player, the art's own shape, centered over the controls. */
body.square-art:not([data-screen="music"]) #player-dock {
  right: calc(var(--gutter) + (var(--mini-player-width) - var(--mini-player-height)) / 2);
  width: var(--mini-player-height);
}

/* Big lyrics, one tap from the home screen while a song plays. */
#home-lyrics-open {
  position: absolute;
  top: 20px;
  right: var(--gutter);
  display: none;
}

body.has-media:not(.streaming) #home-lyrics-open { display: block; }

body.alarm-ringing #home-lyrics-open,
body.sleeping #home-lyrics-open { display: none; }

#game-tiles {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 128px;
}

.corner-second {
  position: absolute;
  left: calc(var(--gutter) + 110px);
  bottom: 16px;
}

/* Words: five-letter rows on top, the keyboard below; right letters go white, near ones take the accent. */
#words {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
}

#words-grid {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  grid-auto-rows: 40px;
  gap: 5px;
}

.word-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--dot-font);
  font-size: 24px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
}

.word-tile.typed { border-color: var(--muted); }

.word-tile.right,
.word-key.right {
  border-color: var(--text);
  background: var(--text);
  color: var(--background);
}

.word-tile.near,
.word-key.near {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text);
}

.word-tile.miss {
  border-color: var(--surface-raised);
  background: var(--surface-raised);
  color: var(--muted);
}

.word-key.miss { color: var(--dot-off); }

#words-message {
  min-height: 16px;
  margin: 8px 0 6px;
}

.word-key-row {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

.word-key {
  width: 38px;
  height: 38px;
  margin: 0 2px;
  padding: 0;
  border-radius: 10px;
  font-size: 13px;
}

.word-key.wide { width: 58px; font-size: 10px; }

#game-tiles .tile { padding: 14px 16px; }

#game-tiles .tile-name { font-size: 19px; }

/* Dot-matrix tiles, matching the clock and wallpaper. */
.tile {
  height: auto;
  min-width: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 28px;
  font-family: var(--body-font);
  text-transform: none;
  text-align: left;
}

.tile-icon svg,
#weather-icon svg {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0;
  fill: currentColor;
}

.dot-lit { opacity: 1; }
.dot-half { opacity: 0.4; }
.dot-off { opacity: 0.1; }

.tile-name {
  margin-top: auto;
  font-family: var(--dot-font);
  font-size: 24px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tile-info {
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tile:active .tile-info { color: inherit; }

/* The player is never covered, hidden or moved offscreen while music is on. */
#player-dock {
  position: absolute;
  right: var(--gutter);
  bottom: calc(18px + var(--mini-controls-height) + var(--card-gap));
  width: var(--mini-player-width);
  height: var(--mini-player-height);
  display: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--player-radius);
  background: var(--surface);
}

#player-dock iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

body.has-media #player-dock { display: block; }

/* With the corner player set to home and apps only, app pages put it away and use the full width. */
body.corner-home-only.in-app:not([data-screen="music"]) #player-dock,
body.has-media.corner-home-only.in-app:not([data-screen="music"]) #mini-controls { display: none; }

body.has-media.corner-home-only .narrow { margin-right: 0; }

/* Radio is audio only: the stopped YouTube player is put away and a card takes its place. */
body.streaming #player-dock { display: none; }

body.has-media.streaming .narrow:not(.game),
body.has-media.streaming #tiles { margin-right: 0; }

#radio-card {
  position: absolute;
  top: 20px;
  left: var(--gutter);
  box-sizing: border-box;
  width: var(--large-player-width);
  height: var(--large-player-height);
  padding: 22px 24px;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  border-radius: var(--player-radius);
  background: radial-gradient(circle, var(--dot-off) 1.4px, transparent 1.9px) 0 0 / 12px 12px, var(--surface);
}

body.streaming #radio-card { display: flex; }

.radio-live {
  position: absolute;
  top: 20px;
  left: 24px;
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.radio-live::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--accent);
}

#radio-name {
  font-size: 44px;
  text-transform: uppercase;
  text-shadow: 0 0 12px var(--background);
}

#radio-source { margin-top: 6px; }

/* The song the station says is on, under the station name. */
#radio-song {
  min-height: 20px;
  margin-top: 8px;
  overflow: hidden;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Episode names run long, so podcasts get smaller type, up to three lines. */
body.podcast #radio-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 26px;
  line-height: 1.15;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

body.podcast .radio-live::before { background: var(--text); }

body[data-screen="music"] #player-dock {
  left: var(--gutter);
  right: auto;
  top: 20px;
  bottom: auto;
  width: var(--large-player-width);
  height: var(--large-player-height);
}

#mini-controls {
  position: absolute;
  right: var(--gutter);
  bottom: 18px;
  box-sizing: border-box;
  width: var(--mini-player-width);
  height: var(--mini-controls-height);
  padding: 4px;
  display: none;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
}

body.has-media:not([data-screen="music"]) #mini-controls { display: flex; }

#open-player {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  overflow: hidden;
  border: 0;
  background: none;
  font-family: var(--body-font);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#mini-controls .previous-track,
#mini-controls .toggle-play,
#mini-controls .next-track {
  flex: none;
  width: 46px;
  height: 46px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: var(--surface-raised);
}

#mini-controls .toggle-play {
  background: var(--text);
  color: var(--background);
}

/* Music */
#music {
  display: flex;
  padding-top: 20px;
}

#now-playing {
  box-sizing: border-box;
  flex: none;
  width: var(--large-player-width);
  padding-top: calc(var(--large-player-height) + 10px);
}

body:not(.has-media) #now-playing { padding-top: 46px; }

#track-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--dot-font);
  font-size: 24px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  line-height: 1.15;
  text-transform: uppercase;
}

#track-detail {
  min-height: 17px;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--muted);
}

/* A row of dots that light up as the song plays. */
#progress {
  position: relative;
  height: 22px;
  background: radial-gradient(circle, var(--dot-off) 1.6px, transparent 2.1px) 0 50% / 8px 8px repeat-x;
}

#progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: radial-gradient(circle, var(--text) 1.6px, transparent 2.1px) 0 50% / 8px 8px repeat-x;
}

.controls {
  display: flex;
  align-items: center;
}

.controls button {
  flex: 1;
  height: 50px;
  padding: 0 4px;
  margin-right: 8px;
}

.controls button:last-child { margin-right: 0; }

.controls .toggle-play {
  border-color: var(--text);
  background: var(--text);
  color: var(--background);
}

.controls.secondary { margin-top: 8px; }

.controls.secondary button {
  height: 38px;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.controls button.active {
  border-color: var(--text);
  color: var(--text);
}

/* A switched-on control gets Nothing's small red dot. */
.controls button.active::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: var(--accent);
}

.scroll::-webkit-scrollbar { width: 3px; }
.scroll::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: var(--line);
}

#library {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: var(--gutter);
}

.tabs {
  display: flex;
}

.tabs button {
  height: 32px;
  margin-left: 6px;
  padding: 0 10px;
  font-size: 10px;
  color: var(--muted);
}

.tabs button.active {
  border-color: var(--text);
  color: var(--text);
}

body.show-lyrics #library-tabs,
body.show-queue #library-tabs { display: none; }

/* Six tabs need the whole width, so the title only shows over lyrics and Up next. */
body:not(.show-lyrics):not(.show-queue) #library-title { display: none; }

#library .app-header { justify-content: flex-end; }

body.show-lyrics #library .app-header,
body.show-queue #library .app-header { justify-content: space-between; }

/* Nudges lyrics that run early or late; it takes the tabs' place while lyrics show. */
.lyrics-tools {
  display: none;
  align-items: center;
}

body.show-lyrics #library .lyrics-tools,
#full-lyrics .lyrics-tools { display: flex; }

.lyrics-tools button {
  height: 32px;
  padding: 0 10px;
  font-size: 10px;
  color: var(--muted);
}

.lyrics-offset {
  min-width: 96px;
  text-align: center;
  font-size: 10px;
}

.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
}

#lyrics-view,
#queue-view {
  position: relative;
  display: none;
  scroll-behavior: smooth;
}

body.show-lyrics #library-list,
body.show-lyrics #add-form,
body.show-queue #library-list,
body.show-queue #add-form { display: none; }

body.show-lyrics #lyrics-view,
body.show-queue #queue-view { display: block; }

/* Up next: songs already played dim, and the one playing gets the red dot. */
#queue-view .library-row.played .library-title { color: var(--muted); }

#queue-view .library-row.current .library-title { font-weight: 500; }

/* Big lyrics: the dot font, dim until each line is sung. */
#full-lyrics-view {
  position: relative;
  scroll-behavior: smooth;
}

#full-lyrics-view .lyric-line {
  padding: 8px 4px;
  font-family: var(--dot-font);
  font-size: 34px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  line-height: 1.2;
  color: #3a3a3a;
}

#full-lyrics-view .lyric-line.current { color: var(--text); }

#full-lyrics-view .lyric-line.timed:active { color: var(--accent); }

#full-lyrics-view::after {
  content: "";
  display: block;
  height: 200px;
}

body[data-library-tab="recent"] #add-form,
body[data-library-tab="artists"]:not([data-artist-level="list"]) #add-form { display: none; }

/* Artists */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-bottom: 8px;
}

.artist-card {
  min-width: 0;
  height: 96px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 20px;
  font-family: var(--body-font);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.artist-initials {
  font-family: var(--dot-font);
  font-size: 30px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  line-height: 1;
}

.artist-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.artist-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 10px;
}

.artist-back {
  height: 30px;
  padding: 0 12px;
  font-size: 10px;
  color: var(--muted);
}

.artist-title {
  max-width: 100%;
  margin-top: 10px;
  overflow: hidden;
  font-family: var(--dot-font);
  font-size: 28px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.artist-detail {
  margin-top: 4px;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.artist-actions { margin-bottom: 6px; }

.artist-actions button {
  height: 40px;
  font-size: 11px;
}

.lyric-line {
  padding: 7px 4px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--muted);
  transition: color 0.2s;
}

.lyric-line.current { color: var(--text); }

.lyric-line.timed,
.home-lyric.timed { cursor: pointer; }

/* A pressed line flashes the accent so the tap registers before the song jumps. */
.lyric-line.timed:active,
.home-lyric.timed:active { color: var(--accent); }

.lyrics-credit {
  padding: 16px 4px;
  font-family: var(--mono-font);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
}

/* List rows are split by dotted lines, the way Nothing lists are. */
.library-row {
  display: flex;
  align-items: center;
  background: radial-gradient(circle, var(--dot-off) 1px, transparent 1.4px) 0 100% / 6px 3px repeat-x;
}

.library-play {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 8px 0 4px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--body-font);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.library-play:active {
  border-radius: 12px;
}

.library-number {
  flex: none;
  width: 34px;
  font-family: var(--mono-font);
  font-size: 12px;
  color: var(--muted);
}

.library-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.library-tag {
  flex: none;
  margin-left: 10px;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.library-tag.live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: var(--accent);
}

.library-note {
  padding: 18px 4px;
  font-family: var(--mono-font);
  font-size: 13px;
  color: var(--muted);
}

.library-remove {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: none;
  color: var(--muted);
}

.library-remove svg {
  width: 16px;
  height: 16px;
}

#add-form,
#city-form,
.input-form {
  display: flex;
  margin: 10px 0 0;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: var(--surface);
}

#add-link,
#city-name,
.input-form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  box-sizing: border-box;
  padding: 0 20px;
  border: 0;
  outline: 0;
  background: none;
  font-size: 16px;
  -webkit-user-select: text;
  user-select: text;
}

#add-link::placeholder,
#city-name::placeholder,
.input-form input::placeholder {
  font-family: var(--mono-font);
  font-size: 13px;
  color: var(--muted);
}

#add-form button,
#city-form button,
.input-form button {
  height: 40px;
  margin: 4px;
}

/* List apps: a header, a list that scrolls, and a form, with room left for the Home button. */
.list-app {
  display: flex;
  flex-direction: column;
  padding-bottom: 72px;
}

.list-app .app-header { flex: none; }

.list-app .scroll { flex: 1; }

/* Notes: a ring to check off, filled red once done. */
.note-row .library-number { font-size: 0; }

.note-row .library-number::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
}

.note-row.done .library-number::before {
  border-color: var(--accent);
  background: var(--accent);
}

.note-row.done .library-title {
  color: var(--muted);
  text-decoration: line-through;
}

/* Toys: one panel at a time under the tabs. */
.toy-panel {
  display: none;
  flex: 1;
  min-height: 0;
}

body[data-toy="drums"] #drums-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
}

body[data-toy="piano"] #piano-panel { display: flex; }

body[data-toy="metronome"] #metronome-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Drum pads are dotted squares that flash the accent when hit. */
.drum-pad {
  height: auto;
  border-radius: 24px;
  background: radial-gradient(circle, var(--dot-off) 1.4px, transparent 1.9px) 0 0 / 12px 12px, var(--surface);
  font-size: 12px;
  touch-action: none;
}

.drum-pad.hit,
.drum-pad:active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text);
  transform: none;
}

#piano-keys {
  position: relative;
  display: flex;
  flex: 1;
  margin-bottom: 8px;
}

.piano-key {
  flex: 1;
  height: 100%;
  margin-right: 3px;
  padding: 0;
  border-radius: 0 0 12px 12px;
  background: var(--text);
  touch-action: none;
}

.piano-key.black {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 6.4%;
  height: 60%;
  border-color: var(--background);
  background: var(--surface-raised);
}

.piano-key.hit,
.piano-key:active {
  border-color: var(--accent);
  background: var(--accent);
  transform: none;
}

#metronome-bpm {
  margin-top: 4px;
  font-size: 110px;
}

#metronome-beats {
  display: flex;
  margin: 18px 0 20px;
}

.beat-dot {
  width: 22px;
  height: 22px;
  margin: 0 9px;
  border-radius: 50%;
  background: var(--dot-off);
}

.beat-dot.lit { background: var(--text); }

.beat-dot.lit.first { background: var(--accent); }

#metronome-panel .controls {
  width: 100%;
  margin-bottom: 10px;
}

/* Breathe: the dotted circle fills the space, with the instruction in the middle. */
#breathe-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-bottom: 10px;
}

#breathe-board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* What to do now sits under the circle, beside the buttons, so the dots never cover it. */
#breathe-footer {
  display: flex;
  flex: none;
  align-items: center;
}

#breathe-words {
  flex: 1;
  min-width: 0;
}

#breathe-label {
  font-family: var(--dot-font);
  font-size: 30px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  text-transform: uppercase;
}

#breathe-count {
  min-height: 16px;
  margin-top: 4px;
}

#breathe .controls {
  flex: none;
  width: 300px;
}

/* Habits: the name and streak, then two weeks of dots with today on the right. */
.habit-row {
  display: flex;
  align-items: center;
  background: radial-gradient(circle, var(--dot-off) 1px, transparent 1.4px) 0 100% / 6px 3px repeat-x;
}

.habit-main {
  flex: 1;
  min-width: 0;
  height: 64px;
  padding: 0 8px 0 4px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--body-font);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.habit-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.habit-name {
  overflow: hidden;
  font-size: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.habit-streak {
  margin-top: 2px;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.habit-dots {
  display: flex;
  flex: none;
  margin-left: 12px;
}

.habit-dot {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--dot-off);
}

.habit-dot.done { background: var(--text); }

.habit-dot.today:not(.done) {
  border: 1.5px solid var(--accent);
  background: none;
}

.habit-dot.today.done { background: var(--accent); }

#countdown-date {
  flex: none;
  width: 170px;
  padding: 0 10px;
  color-scheme: dark;
}

#countdown-yearly {
  padding: 0 14px;
  font-size: 11px;
  color: var(--muted);
}

#countdown-yearly.active {
  border-color: var(--text);
  color: var(--text);
}

/* Stats */
#stats-summary {
  display: flex;
  flex: none;
  margin-bottom: 14px;
}

.stats-total {
  display: flex;
  flex-direction: column;
  margin-right: 48px;
}

.stats-total .big-number { font-size: 52px; }

.stats-total .app-status { margin-top: 4px; }

#stats-lists {
  display: flex;
  flex: 1;
  min-height: 0;
}

.stats-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.stats-column + .stats-column { margin-left: 24px; }

.stats-column > .app-status { margin-bottom: 4px; }

.stats-column .library-play {
  height: 42px;
  font-size: 14px;
}

/* Games */
.game-board {
  position: absolute;
  top: 20px;
  left: var(--gutter);
  width: calc(100% - var(--gutter) * 2);
  height: calc(100% - 84px);
  touch-action: none;
}

.game-score {
  position: absolute;
  right: var(--gutter);
  bottom: 14px;
  font-family: var(--dot-font);
  font-size: 34px;
  font-variation-settings: "ROND" 100;
  font-weight: 700;
}

.game-message {
  position: absolute;
  top: 44%;
  left: 0;
  right: 0;
  font-family: var(--mono-font);
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 6px var(--background), 0 0 12px var(--background);
  pointer-events: none;
}

/* Clock: the timer, stopwatch and world clocks share the page, one tab at a time. */
#timer {
  display: flex;
  flex-direction: column;
  padding-bottom: 72px;
}

.clock-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

body[data-clock-tab="timer"] #timer-panel,
body[data-clock-tab="stopwatch"] #stopwatch-panel,
body[data-clock-tab="world"] #world-panel { display: flex; }

#timer-display,
#stopwatch-display {
  text-align: center;
  font-size: min(28vh, 13vw);
}

#timer-label {
  min-height: 16px;
  margin: 6px 0 14px;
  text-align: center;
}

#stopwatch-display { margin: 8px 0 18px; }

#timer .controls { margin-bottom: 10px; }

#stopwatch-laps { flex: 1; }

/* World clocks: the city on the left, its time large on the right. */
.world-row {
  display: flex;
  align-items: center;
  min-height: 64px;
  background: radial-gradient(circle, var(--dot-off) 1px, transparent 1.4px) 0 100% / 6px 3px repeat-x;
}

.world-place {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
}

.world-name {
  display: block;
  overflow: hidden;
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.world-difference {
  display: block;
  margin-top: 2px;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.world-time {
  margin: 0 8px 0 12px;
  font-family: var(--dot-font);
  font-size: 34px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
}

/* Alarm */
#alarm-time {
  text-align: center;
  font-size: min(28vh, 13vw);
}

#alarm-time .suffix {
  margin-left: 12px;
  font-size: 0.3em;
}

#alarm-note {
  margin: 4px 0 16px;
  text-align: center;
}

#alarm .controls { margin-bottom: 10px; }

#alarm-switch {
  flex: none;
  margin-left: 10px;
}

#alarm-tabs {
  flex: 1;
  justify-content: flex-end;
}

#alarm-tabs button.off { color: var(--dot-off); }

#alarm-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.corner-right {
  position: absolute;
  right: var(--gutter);
  bottom: 16px;
}

/* Morning: a quick look at the day after the alarm stops. */
#morning-weather {
  display: flex;
  flex: none;
  align-items: center;
  margin-bottom: 10px;
}

#morning-icon svg {
  display: block;
  width: 52px;
  height: 52px;
  margin-right: 18px;
  fill: currentColor;
}

#morning-temperature {
  margin-right: 18px;
  font-size: 64px;
}

/* Weather */
#weather-main {
  display: flex;
  align-items: center;
}

#weather-icon svg {
  width: 60px;
  height: 60px;
  margin-right: 20px;
}

#weather-temperature {
  margin-right: 20px;
  font-size: 88px;
}

#weather-summary {
  min-height: 20px;
  font-family: var(--mono-font);
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Forecast strips: hours, then days, split by a dotted line. */
.weather-strip {
  display: flex;
  margin-top: 10px;
  padding-top: 8px;
  background: radial-gradient(circle, var(--dot-off) 1px, transparent 1.4px) 0 0 / 6px 3px repeat-x;
}

.weather-cell {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.weather-cell-label {
  font-family: var(--mono-font);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.weather-cell-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: 6px 0;
  fill: currentColor;
}

.weather-cell-value {
  font-family: var(--dot-font);
  font-size: 16px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  white-space: nowrap;
}

#city-form {
  max-width: 420px;
  margin-top: 14px;
}

/* Account */
#account {
  text-align: center;
}

#account-title {
  margin-top: 2vh;
  font-family: var(--dot-font);
  font-size: 30px;
  font-weight: 700;
  font-variation-settings: "ROND" 100;
  text-transform: uppercase;
}

#account-step {
  min-height: 24px;
  margin-top: 12px;
  font-family: var(--mono-font);
  font-size: 14px;
  color: var(--muted);
}

#account-code {
  min-height: 90px;
  margin: 20px 0;
  font-family: var(--dot-font);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 4px;
}

#account .controls {
  max-width: 420px;
  margin: 0 auto;
}

/* Settings */
#settings-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: 56px;
  box-sizing: border-box;
  padding: 0 12px 0 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  font-size: 16px;
}

.setting > span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.setting button,
.setting .app-status {
  flex: none;
  margin-left: 12px;
}

.setting-choice {
  height: 40px;
  max-width: 220px;
  padding: 0 16px;
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#alarm .setting { margin-top: 4px; }

#cloud-setting { display: none; }

.switch {
  position: relative;
  width: 58px;
  height: 34px;
  padding: 0;
  border-radius: 17px;
  background: var(--surface);
}

.switch::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s, background 0.15s;
}

.switch.on {
  border-color: var(--text);
  background: var(--text);
}

.switch.on::after {
  background: var(--background);
  transform: translateX(24px);
}