/* Attrovia. Dark, calm, big type. See docs/brand.md.
   One accent at a time: Ocean blue by default, or the first of the colours chosen in Settings (web/look.ts sets
   --accent, --glow and --g0..2). It marks played time, the scrub handle, marker dots, focus, Done and slider fills. */
:root {
  --bg: #0b0b0c;
  --label: #f5f2ec;
  --label-2: #a1a09c;
  --label-3: #6b6a67;
  --dim: rgba(245, 242, 236, 0.3);
  --ahead: rgba(245, 242, 236, 0.42);
  --fill: #17171a;
  --fill-2: #232327;
  --line: rgba(245, 242, 236, 0.08);
  --ink: #f5f2ec;
  --on-ink: #0b0b0c;
  --accent: #4fa3ff;
  --accent-soft: rgba(79, 163, 255, 0.14);
  --glow: rgba(79, 163, 255, 0.09);
  --sheet: #111113;
  --cell: #1e1e21;
  --sep: rgba(245, 242, 236, 0.14);
  --track: rgba(245, 242, 236, 0.18);
  --g0: #84bfff;
  --g1: #6b9ae2;
  --g2: #bcdeff;
  --danger: #ff7a6b;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  /* library and profile */
  --lib-bg: #05070c;
  --blob: rgba(79, 163, 255, 0.2);
  --card-bg: rgba(255, 255, 255, 0.035);
  --card-line: rgba(255, 255, 255, 0.08);
  --card-hi: rgba(255, 255, 255, 0.05);
  --card-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
  --chip: rgba(255, 255, 255, 0.06);
  --chip-2: rgba(255, 255, 255, 0.1);
  --track-2: rgba(255, 255, 255, 0.12);
  --row-on: rgba(79, 163, 255, 0.1);
  --rplay-on: rgba(0, 0, 0, 0.35);
  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lyric: clamp(24px, 2.4vw + 15px, 38px);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #faf8f4;
    --label: #141413;
    --label-2: #6b6964;
    --label-3: #a9a6a0;
    --dim: rgba(20, 20, 19, 0.26);
    --ahead: rgba(20, 20, 19, 0.4);
    --fill: #efece6;
    --fill-2: #e4e0d8;
    --line: rgba(20, 20, 19, 0.08);
    --ink: #141413;
    --on-ink: #faf8f4;
    --accent: #006ee6;
    --accent-soft: rgba(0, 110, 230, 0.1);
    --glow: rgba(79, 163, 255, 0.12);
    --sheet: #f2f0ec;
    --cell: #ffffff;
    --sep: rgba(20, 20, 19, 0.14);
    --track: rgba(20, 20, 19, 0.14);
    --danger: #c03a2b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.1);
    --lib-bg: #f5f7fb;
    --blob: rgba(79, 163, 255, 0.22);
    --card-bg: rgba(255, 255, 255, 0.74);
    --card-line: rgba(16, 32, 64, 0.07);
    --card-hi: rgba(255, 255, 255, 0.9);
    --card-shadow: 0 18px 50px -24px rgba(31, 60, 120, 0.22);
    --chip: rgba(16, 32, 64, 0.05);
    --chip-2: rgba(16, 32, 64, 0.08);
    --track-2: rgba(16, 32, 64, 0.1);
    --row-on: rgba(79, 163, 255, 0.12);
    --rplay-on: #ffffff;
    color-scheme: light;
  }
}

[hidden] {
  display: none !important;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 44% at 50% -14%, var(--glow), transparent 72%);
  z-index: 0;
}
/* the player's background: drawn small on a canvas and stretched, so it stays soft and cheap (web/atmos.ts) */
#atmos {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#atmos.on {
  opacity: 1;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
.scrub:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
svg {
  display: block;
  flex: none;
}
input,
textarea,
select {
  font: 400 16px var(--font);
  color: var(--label);
}

#app {
  position: relative;
  z-index: 1;
  height: 100%;
}
.view {
  height: 100%;
}

/* ---------- shared pieces ---------- */
.pill {
  height: 38px;
  padding: 0 16px;
  border-radius: 9999px;
  background: var(--fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
@media (hover: hover) {
  .pill:hover {
    background: var(--fill-2);
  }
}
.pill.ink {
  background: var(--ink);
  color: var(--on-ink);
}
@media (hover: hover) {
  .pill.ink:hover {
    background: var(--ink);
    opacity: 0.9;
  }
}
.pill[disabled] {
  opacity: 0.45;
  cursor: default;
}
.round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
@media (hover: hover) {
  .round:hover {
    background: var(--fill);
  }
}
.round.sm {
  width: 36px;
  height: 36px;
  background: var(--fill);
}
.plain {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--r-sm);
}
.field {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--fill);
  padding: 0 14px;
}
.field::placeholder,
textarea::placeholder {
  color: var(--label-3);
}
.count {
  font-variant-numeric: tabular-nums;
}
.bar-progress {
  height: 3px;
  border-radius: 9999px;
  background: var(--fill-2);
  overflow: hidden;
}
.bar-progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--label);
  border-radius: inherit;
}
.bar-progress.accent > i {
  background: var(--accent);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 42px;
  max-width: calc(100vw - 32px);
  padding: 0 8px 0 18px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow);
}
.toast span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast button {
  font-weight: 700;
  padding: 0 12px;
  height: 32px;
  border-radius: 9999px;
}
.toast.lifted {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ---------- library and profile (the founder's design, 9 November 2026) ----------
   A dark navy page (pale on the light theme) with two soft pools of the accent at the edges, glass cards with a
   hairline edge, the app bar with Library and Profile, the podcast that is playing in a large card, and the
   library as one card of rows. */
.library {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(36% 44% at -6% 98%, var(--blob), transparent 70%),
    radial-gradient(28% 40% at 106% 40%, var(--blob), transparent 70%),
    var(--lib-bg);
}
.lib-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: max(6px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 120px
    max(24px, env(safe-area-inset-left, 0px));
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 var(--card-hi),
    var(--card-shadow);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

/* the app bar */
.appbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--card-line);
}
.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand .appicon {
  --s: 38px;
}
.brand b {
  font: 600 24px / 1 var(--display);
  letter-spacing: -0.02em;
}
/* the app icon, drawn: a black rounded square with a glassy edge and the white logo (web/brand/logo.png) */
.appicon {
  --s: 104px;
  flex: none;
  width: var(--s);
  height: var(--s);
  display: grid;
  place-items: center;
  border-radius: calc(var(--s) * 0.225);
  background: linear-gradient(180deg, #1e1e21, #050506);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.appicon img {
  width: 62%;
  height: auto;
  filter: drop-shadow(0 0 calc(var(--s) * 0.05) rgba(255, 255, 255, 0.28));
}
.tabs {
  display: flex;
  gap: 6px;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border-radius: 9999px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tab svg {
  color: var(--label-2);
}
.tab.on,
.tab.on svg {
  color: var(--accent);
}
.tab.on {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
@media (hover: hover) {
  .tab:not(.on):hover {
    background: var(--chip);
  }
}
.newr {
  justify-self: end;
  height: 46px;
  padding: 0 20px;
  font-size: 16px;
}

.notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  padding: 14px 14px 14px 20px;
  border-radius: 20px;
  background: var(--accent-soft);
  font-size: 15px;
  line-height: 1.4;
}
.notice p {
  margin: 0;
  flex: 1;
}

/* the podcast that is playing, or where you left off */
.now-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  margin: 26px 0 46px;
  padding: 38px 44px;
  border-radius: 36px;
  overflow: hidden;
}
.now-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 70% at 82% -20%, var(--blob), transparent 70%);
  pointer-events: none;
}
.now-card > * {
  position: relative;
}
.art {
  --s: 138px;
  width: var(--s);
  height: var(--s);
  display: grid;
  place-items: center;
  border-radius: 30px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 70%, #0a1a3a), #08122a 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 34px -14px rgba(0, 0, 0, 0.7);
}
.art img {
  width: 64%;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25));
}
.now-card h2 {
  margin: 0 0 6px;
  font: 600 34px / 1.12 var(--display);
  letter-spacing: -0.025em;
}
.now-t {
  max-width: 100%;
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.now-card .sub {
  margin: 0 0 22px;
  color: var(--label-2);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.nbar {
  height: 6px;
  border-radius: 9999px;
  background: var(--track-2);
  cursor: pointer;
  overflow: hidden;
}
.nbar i,
.rbar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
}
.ntimes {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  color: var(--label-2);
  font: 500 15px var(--font);
  font-variant-numeric: tabular-nums;
}
.now-ctl {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 30px;
}
.now-ctl .round {
  width: 48px;
  height: 48px;
}
.bigplay {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

/* the library: heading, count, search and sort, then one card of rows */
.lib-h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
}
.lib-h h1 {
  margin: 0;
  font: 700 36px / 1 var(--display);
  letter-spacing: -0.03em;
}
.count-pill {
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--chip);
  color: var(--label-2);
  font: 600 14px / 1.2 var(--font);
  font-variant-numeric: tabular-nums;
}
.lib-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.search {
  position: relative;
  width: 322px;
}
.search input {
  height: 48px;
  padding-left: 48px;
  border-radius: 9999px;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  font-size: 16px;
}
.search svg {
  position: absolute;
  left: 18px;
  top: 15px;
  color: var(--label-2);
  pointer-events: none;
}
.tool {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
}
@media (hover: hover) {
  .tool:hover {
    background: var(--chip-2);
  }
}
.card.list {
  padding: 10px;
}
.card.list.empty {
  padding: 10px 24px;
}
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.row {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 214px 46px 78px 40px;
  align-items: center;
  gap: 0 20px;
  padding: 14px 18px;
  border-radius: 20px;
  cursor: pointer;
}
.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: var(--card-line);
}
.row.on::before,
.row.on + .row::before {
  display: none;
}
.row.on {
  background: var(--row-on);
}
@media (hover: hover) {
  .row:not(.on):hover {
    background: var(--chip);
  }
  .row:hover::before,
  .row:hover + .row::before {
    opacity: 0;
  }
}
.tile {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--chip);
  color: var(--label-2);
}
.row.on .tile {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}
.rt {
  min-width: 0;
}
.rt .t {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt .m {
  margin-top: 3px;
  color: var(--label-2);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt .m.work {
  color: var(--accent);
}
.rt .m.bad {
  color: var(--danger);
}
.rbar {
  height: 4px;
  border-radius: 9999px;
  background: var(--track-2);
  overflow: hidden;
}
.rplay {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chip-2);
}
.row.on .rplay {
  background: var(--rplay-on);
}
.row .end {
  text-align: right;
  color: var(--label-2);
  font: 500 16px var(--font);
  font-variant-numeric: tabular-nums;
}
.more {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--label-2);
}
@media (hover: hover) {
  .rplay:hover,
  .more:hover {
    background: var(--chip-2);
    color: var(--label);
  }
}
.list-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 8px 18px;
  color: var(--label-2);
  font-size: 14px;
}
.empty-lib {
  padding: 60px 0;
  text-align: center;
}
.empty-lib h2 {
  font: 700 30px / 1.15 var(--display);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.empty-lib p {
  color: var(--label-2);
  margin: 0 0 22px;
  font-size: 16px;
}
.card.results {
  padding: 4px 18px 18px;
}
.results h3 {
  margin: 20px 0 4px;
  font: 700 15px var(--font);
  color: var(--label-2);
}
.hit {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;
  margin: 0 -12px;
  border-radius: var(--r-md);
}
@media (hover: hover) {
  .hit:hover {
    background: var(--chip);
  }
}
.hit .q {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.hit .w {
  font-size: 13px;
  color: var(--label-2);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.hit mark {
  background: none;
  color: var(--accent);
}
.none {
  color: var(--label-2);
  font-size: 15px;
  padding: 18px;
  margin: 0;
}
.drop {
  position: fixed;
  inset: 12px;
  z-index: 40;
  border: 2px dashed var(--accent);
  border-radius: var(--r-lg);
  background: rgba(5, 7, 12, 0.82);
  display: grid;
  place-items: center;
  font: 700 28px var(--display);
  pointer-events: none;
}
.ren-body {
  padding: 6px 20px 26px;
}
.ren-body .field {
  height: 48px;
  font-size: 17px;
}

/* a small menu under a button */
.menu {
  position: fixed;
  z-index: 60;
  min-width: 228px;
  padding: 6px;
  border-radius: 16px;
  background: var(--sheet);
  border: 1px solid var(--card-line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}
.menu-t {
  padding: 10px 12px 4px;
  color: var(--label-2);
  font: 600 13px var(--font);
}
.menu-i {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
}
.menu-i:hover,
.menu-i:focus-visible {
  background: var(--chip-2);
  outline: none;
}
.menu-i svg {
  color: var(--accent);
}
.menu-i.danger {
  color: var(--danger);
}

/* profile */
.prof-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 26px 0 16px;
  padding: 30px 36px;
  border-radius: 32px;
}
.prof-head .appicon {
  --s: 84px;
}
.prof-who {
  flex: 1;
  min-width: 0;
}
.prof-who h1 {
  margin: 0;
  font: 700 30px / 1.1 var(--display);
  letter-spacing: -0.025em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-who .sub {
  margin: 5px 0 0;
  color: var(--label-2);
  font-size: 16px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 38px;
}
.stat {
  display: grid;
  gap: 4px;
  padding: 22px 26px;
  border-radius: 24px;
}
.stat b {
  font: 700 28px / 1.1 var(--display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat span {
  color: var(--label-2);
  font-size: 15px;
}
.prof-h {
  margin: 0 0 12px;
  font: 700 22px var(--display);
  letter-spacing: -0.02em;
}
.prows {
  padding: 6px;
  margin-bottom: 38px;
}
.prow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
}
.prow .val {
  margin-left: auto;
  color: var(--label-2);
  font-size: 15px;
  font-weight: 500;
}
.prow svg {
  color: var(--label-3);
}
@media (hover: hover) {
  .prow:hover {
    background: var(--chip);
  }
}
.profile .row {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  cursor: default;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .art {
    background: linear-gradient(150deg, #142a57, #060c1a 75%);
  }
  :root:not([data-theme="dark"]) .drop {
    background: rgba(245, 247, 251, 0.86);
  }
}

/* phones and narrow windows */
@media (max-width: 860px) {
  .row {
    grid-template-columns: 48px minmax(0, 1fr) 44px 64px 36px;
    gap: 0 14px;
  }
  .rmid {
    display: none;
  }
  .now-card {
    padding: 28px;
    gap: 22px;
  }
  .now-ctl {
    padding-left: 0;
    gap: 12px;
  }
}
@media (max-width: 680px) {
  .lib-in {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .appbar {
    grid-template-columns: auto 1fr auto;
    padding: 12px 0;
  }
  .brand b,
  .tab span,
  .newr span {
    display: none;
  }
  .tabs {
    justify-self: center;
  }
  .tab {
    height: 42px;
    padding: 0 16px;
  }
  .newr {
    width: 42px;
    height: 42px;
    padding: 0;
  }
  .now-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px 18px;
    margin: 18px 0 32px;
    padding: 20px;
    border-radius: 28px;
  }
  .art {
    --s: 80px;
    border-radius: 20px;
  }
  .now-card h2 {
    font-size: 23px;
  }
  .now-card .sub {
    margin-bottom: 0;
    font-size: 15px;
  }
  .now-mid .nbar,
  .now-mid .ntimes {
    display: none;
  }
  .now-ctl {
    grid-column: 1 / -1;
    justify-content: center;
    gap: 28px;
  }
  .lib-h {
    flex-wrap: wrap;
    gap: 12px;
  }
  .lib-h h1 {
    font-size: 30px;
  }
  .lib-tools {
    width: 100%;
    margin-left: 0;
  }
  .search {
    flex: 1;
    width: auto;
  }
  .card.list {
    padding: 6px;
    border-radius: 24px;
  }
  .row {
    grid-template-columns: 44px minmax(0, 1fr) 42px 34px;
    gap: 0 12px;
    padding: 12px;
  }
  .row .end {
    display: none;
  }
  .tile {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .rplay {
    width: 42px;
    height: 42px;
  }
  .rt .t,
  .now-t {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .rt .t {
    font-size: 16px;
  }
  .rt .m {
    font-size: 14px;
  }
  .prof-head {
    padding: 22px;
    gap: 16px;
  }
  .prof-head .appicon {
    --s: 60px;
  }
  .prof-who h1 {
    font-size: 24px;
  }
  .stats {
    gap: 8px;
  }
  .stat {
    padding: 16px;
    border-radius: 20px;
  }
  .stat b {
    font-size: 21px;
  }
}

/* sheets, Apple style: a bottom sheet with a grab bar on a phone, a panel on the right from 900 px */
dialog.sheet {
  margin: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 82dvh;
  padding: 0;
  border: 0;
  border-radius: 32px 32px 0 0;
  background: var(--sheet);
  color: var(--label);
}
dialog.sheet::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
@media (min-width: 900px) {
  dialog.sheet {
    margin: 0 0 0 auto;
    width: 420px;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  dialog.sheet.center {
    margin: auto;
    height: auto;
    max-height: 86dvh;
    border-radius: var(--r-lg);
    width: 520px;
  }
}
.sheet-in {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  height: 100%;
  padding-block: 18px max(18px, env(safe-area-inset-bottom, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.grabber {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--label-3);
  opacity: 0.6;
  margin: -6px auto 10px;
  flex: none;
}
@media (min-width: 900px) {
  .grabber {
    display: none;
  }
  dialog.sheet.center .grabber {
    display: none;
  }
}
/* nav bar: the title centred, Done on the right */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  flex: none;
}
.nav h2 {
  margin: 0;
  font: 600 17px var(--font);
  letter-spacing: -0.01em;
  text-align: center;
}
.nav-side {
  justify-self: start;
}
.nav-done,
.nav-act {
  color: var(--accent);
  font: 600 17px var(--font);
  padding: 6px 2px;
  border-radius: 8px;
}
.nav-done {
  justify-self: end;
}
.nav-act {
  font-weight: 400;
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
/* grouped lists, like iOS Settings */
.set-body {
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 8px;
}
.set-body section + section {
  margin-top: 26px;
}
.group-title {
  margin: 0 0 7px 16px;
  font: 400 13px var(--font);
  color: var(--label-2);
}
.group {
  background: var(--cell);
  border-radius: 12px;
  overflow: hidden;
}
.list.group {
  flex: initial;
  overflow-y: auto;
}
.group + .group {
  margin-top: 18px;
}
.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 16px;
  width: 100%;
  font: 400 17px var(--font);
  color: var(--label);
  text-align: left;
}
.cell + .cell::before,
.crow + .crow::before,
.mrow + .mrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: top;
  background: var(--sep);
}
.slider-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-items: stretch;
  gap: 8px;
  padding: 12px 16px;
}
.cell-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.val {
  font: 600 15px var(--font);
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.cell-btn {
  justify-content: center;
  color: var(--accent);
  font-weight: 600;
}
.cell-btn:disabled {
  color: var(--label-3);
  cursor: default;
}
@media (hover: hover) {
  .cell-btn:not(:disabled):hover {
    background: var(--fill-2);
  }
}
.footnote {
  margin: 8px 16px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--label-2);
  min-height: 18px;
}
/* iOS sliders: a thin track filled in the accent up to the value, a white round handle */
input[type="range"].ios {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  --p: 50%;
}
input[type="range"].ios:focus-visible {
  outline: none;
}
input[type="range"].ios:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--accent);
}
input[type="range"].ios::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--p), var(--track) var(--p));
}
input[type="range"].ios::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0.5px 4px rgba(0, 0, 0, 0.28),
    0 3px 8px rgba(0, 0, 0, 0.18);
}
input[type="range"].ios::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--track);
}
input[type="range"].ios::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}
input[type="range"].ios::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0.5px 4px rgba(0, 0, 0, 0.28),
    0 3px 8px rgba(0, 0, 0, 0.18);
}
input[type="range"].ios:disabled {
  opacity: 0.45;
}
/* colour swatches: the presets as round lights, names in their labels */
.swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 8px;
  justify-items: center;
  width: 100%;
  padding: 8px 0 6px;
}
.swatch {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.swatch i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
.swatch[aria-checked="true"]::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2.5px solid var(--label);
}
.pickers {
  display: inline-flex;
  gap: 10px;
}
.pickers input {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.pickers input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.pickers input::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}
.pickers input::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
}

.add-body {
  display: grid;
  gap: 14px;
  overflow-y: auto;
  min-height: 0;
}
.pick {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 150px;
  padding: 22px;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--fill-2);
  background: var(--fill);
  text-align: center;
  cursor: pointer;
}
.pick b {
  font-size: 17px;
}
.pick span {
  color: var(--label-2);
  font-size: 14px;
}
.or {
  text-align: center;
  color: var(--label-3);
  font-size: 14px;
}
textarea.paste {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--fill);
  padding: 12px 14px;
  line-height: 1.45;
}
.voice {
  display: grid;
  gap: 8px;
}
.voice label {
  font-size: 14px;
  color: var(--label-2);
}
select.field {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--label-2) 50%),
    linear-gradient(135deg, var(--label-2) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 19px,
    calc(100% - 15px) 19px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.add-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 16px;
}
.uploading {
  display: grid;
  gap: 10px;
  padding: 8px 0;
}
.uploading .n {
  font-weight: 600;
}
.err {
  color: var(--danger);
  font-size: 14px;
  margin: 0;
}

/* ---------- processing ---------- */
.making {
  height: 100%;
  overflow-y: auto;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 40px
    max(16px, env(safe-area-inset-left, 0px));
}
.making-in {
  max-width: 720px;
  margin: 0 auto;
}
.making h1 {
  margin: 12vh 0 12px;
  font: 700 clamp(30px, 4vw + 14px, 52px) / 1.06 var(--display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.making .src {
  color: var(--label-2);
  font-size: 16px;
  margin: 0 0 40px;
}
.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 4px;
}
.steps li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: center;
  padding: 12px 0;
  font: 700 clamp(20px, 1.5vw + 14px, 26px) / 1.2 var(--display);
  letter-spacing: -0.015em;
  color: var(--dim);
}
.steps li.done {
  color: var(--label);
}
.steps li.now {
  color: var(--label);
}
.steps li .p {
  font: 600 14px var(--font);
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.steps li .bar-progress {
  grid-column: 1 / -1;
}
.making .eta {
  color: var(--label-2);
  font-size: 15px;
  margin: 0 0 24px;
}
.making .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- player ---------- */
.player {
  position: relative;
  height: 100%;
  display: grid;
  /* the column may shrink below a long chapter title (it is cut with an ellipsis instead) */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
.wide {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}
.pbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 10px 4px;
}
.chap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.chap span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chap svg {
  color: var(--label-2);
}

.stage {
  position: relative;
  min-height: 0;
}
.lyrics {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 80%, transparent 100%);
  outline: none;
}
.lyrics::-webkit-scrollbar {
  display: none;
}
.col {
  padding: 30vh 0 55vh 18px;
}
.lyric {
  position: relative;
  padding-block: 7px;
  font: 700 var(--lyric) / 1.2 var(--display);
  letter-spacing: -0.017em;
  color: var(--dim);
  cursor: pointer;
  text-wrap: pretty;
  transition: color 0.4s ease;
}
.lyric.p {
  margin-top: 16px;
}
.lyric.h {
  margin-top: 76px;
}
.lyric:first-child {
  margin-top: 0;
}
@media (hover: hover) {
  .lyric:not(.read):hover {
    color: var(--label-3);
  }
}
.lyric.read,
.lyric.on,
.lyric.on:hover {
  color: var(--label);
}
.lyric.on .w {
  transition: color 0.18s linear;
}
.lyric.on .w.ahead {
  color: var(--ahead);
}
/* chapter titles and numbered points carry the chosen colours */
.lyric .key,
.lyric .w.k {
  background-image: linear-gradient(100deg, var(--g0), var(--g2) 55%, var(--g1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: opacity 0.4s ease;
}
.lyric:not(.on):not(.read) .key {
  opacity: 0.8;
}
.lyric.on .w.k.ahead {
  opacity: 0.5;
  -webkit-text-fill-color: transparent;
}
.lyric.h {
  font-size: calc(var(--lyric) * 1.08);
  letter-spacing: -0.022em;
}
/* the summary beside the transcript (web/player.ts), on wide screens: the transcript column narrows a little and
   the panel sits in the right margin. The point being talked about is lit in the chosen colours, like a numbered
   point in the transcript; the ones already covered stay readable, the ones to come are dim. */
.gist {
  display: none;
}
@media (min-width: 1280px) {
  .player.has-gist {
    --gw: clamp(240px, 21vw, 320px);
  }
  .player.has-gist .wide {
    max-width: min(780px, calc(100vw - 2 * var(--gw) - 160px));
  }
  .player.has-gist .gist:not([hidden]) {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(50% + min(390px, (100vw - 2 * var(--gw) - 160px) / 2) + 56px);
    width: var(--gw);
    max-height: 100%;
    transform: translateY(-50%);
    overflow-y: auto;
    scrollbar-width: none;
  }
}
.gist-in {
  transition:
    opacity 0.26s ease,
    transform 0.26s ease;
}
.gist-in.out {
  opacity: 0;
  transform: translateY(-10px);
}
.gist-in.in {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
}
.gist-h {
  margin: 0 0 14px;
  font: 600 22px / 1.15 var(--display);
  letter-spacing: -0.02em;
  color: var(--label);
}
.gist-p {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.gist-p button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  width: 100%;
  padding: 7px 0;
  text-align: left;
  font: 600 17px / 1.3 var(--display);
  letter-spacing: -0.012em;
  color: var(--dim);
  transition: color 0.4s ease;
}
.gist-p .n {
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .gp:not(.on) button:hover {
    color: var(--label-3);
  }
}
.gp.done button,
.gp.done button:hover {
  color: var(--label-2);
}
.gp.on .n,
.gp.on .tx {
  background-image: linear-gradient(100deg, var(--g0), var(--g2) 55%, var(--g1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lyric.mk::before {
  content: "";
  position: absolute;
  left: -15px;
  top: calc(7px + var(--lyric) * 0.6);
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--accent);
}
.lyric .note {
  display: block;
  margin-top: 6px;
  font: 500 15px / 1.4 var(--font);
  letter-spacing: 0;
  color: var(--label-2);
}

.float {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: var(--shadow);
}
.composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 3;
  margin: 0 auto;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--r-lg);
  background: var(--sheet);
  box-shadow: var(--shadow);
}
.composer .when {
  font-size: 13px;
  font-weight: 600;
  color: var(--label-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.composer .field {
  height: 40px;
  flex: 1;
  min-width: 0;
}

.dock {
  display: grid;
  gap: 6px;
  padding-block: 4px max(14px, env(safe-area-inset-bottom, 0px));
}
.scrub {
  position: relative;
  height: 30px;
  touch-action: none;
  cursor: pointer;
  border-radius: 6px;
}
.track {
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 4px;
  border-radius: 9999px;
  background: var(--fill-2);
  overflow: hidden;
  transition:
    height 0.15s,
    top 0.15s;
}
.scrub:hover .track,
.scrub.drag .track {
  top: 12px;
  height: 6px;
}
.played {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--accent);
}
.cut {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--bg);
}
.thumb {
  position: absolute;
  top: 15px;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.15s;
}
.scrub.drag .thumb {
  transform: scale(1.3);
}
.tick {
  position: absolute;
  top: 2px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--label-2);
  pointer-events: none;
}
.times {
  display: flex;
  justify-content: space-between;
  margin-top: -6px;
  font: 600 13px / 1 var(--font);
  letter-spacing: 0;
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.controls {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.controls .speed {
  justify-self: start;
  min-width: 58px;
  font-variant-numeric: tabular-nums;
}
.controls .markbtn {
  justify-self: end;
}
.play {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--on-ink);
  flex: none;
}
.status {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--label-2);
}

.crow,
.mrow {
  position: relative;
}
.crow button {
  width: 100%;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 13px 16px;
  text-align: left;
}
.crow button.now .t {
  color: var(--accent);
}
@media (hover: hover) {
  .crow button:hover {
    background: var(--fill-2);
  }
}
.crow .n {
  font: 600 15px var(--font);
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.crow .t {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.crow .d {
  font: 600 15px var(--font);
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.mrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: start;
  padding: 12px 12px 12px 16px;
}
.mtime {
  color: var(--accent);
  font: 600 15px / 22px var(--font);
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
  border-radius: 6px;
}
.mquote {
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mchap {
  font-size: 13px;
  color: var(--label-2);
  margin-top: 2px;
}
.mrow .field {
  grid-column: 2;
  height: 38px;
}
.mrow .del {
  grid-row: 1;
  grid-column: 3;
  width: 32px;
  height: 32px;
  color: var(--label-2);
}
.empty {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--label-2);
  max-width: 34ch;
}
.fine {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--label-2);
}
.fine.warn {
  color: var(--accent);
}
.copybox {
  width: 100%;
  min-height: 120px;
  margin-top: 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--fill);
  color: var(--label);
  font: 400 13px / 1.5 var(--mono);
  padding: 10px;
}

@media (max-width: 420px) {
  .controls {
    gap: 6px;
  }
  .controls .speed {
    min-width: 50px;
    padding: 0 10px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 22px 20px 20px;
  }
  .bigplay {
    justify-self: start;
  }
  .brand b {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lyric,
  .lyric.on .w,
  .track,
  .thumb {
    transition: none;
  }
}

.list:empty { flex: 0; }
dialog .toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* ---------- sign in ---------- */
/* always dark, like the app icon: the founder's blue picture behind it (web/brand/signin.jpg), no gradients */
.signin {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  color-scheme: dark;
  color: #f5f2ec;
  background: #000 url("/web/brand/signin.jpg?v=1") center bottom / cover no-repeat;
}
.signin-in { width: min(360px, 100%); display: grid; gap: 12px; }
.signin-brand { display: grid; justify-items: center; text-align: center; margin-bottom: 26px; }
.signin-brand .appicon {
  --s: 108px;
  margin-bottom: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 18px 40px -12px rgba(0, 0, 0, 0.8),
    0 2px 10px rgba(0, 0, 0, 0.6);
}
.signin h1 { margin: 0; font: 600 40px/1.05 var(--display); letter-spacing: -0.025em; }
.signin-sub { margin: 8px 0 0; color: #a1a09c; font-size: 17px; }
.signin .field {
  height: 52px;
  font-size: 17px;
  color: #f5f2ec;
  background: rgba(10, 10, 12, 0.62);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.signin .field::placeholder { color: #6b6a67; }
.signin .field:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.signin-go { height: 52px; font-size: 17px; font-weight: 600; margin-top: 8px; background: #f5f2ec; color: #0b0b0c; }
.signin .err { color: #ff8a7d; }
.signout { display: block; margin: 40px auto 0; color: var(--label-3); font-size: 14px; padding: 8px 12px; border-radius: var(--r-sm); }
@media (hover: hover) { .signout:hover { color: var(--label-2); } }