/* ============================================================
   Clerpe

   Four colours, taken straight from the swatch: cream, orange,
   teal, deep teal. One typeface, Jost (a Futura revival, so
   Bauhaus by descent). Flat fills only: no outlines, no
   hairlines, no accent-edged boxes. The one shadow in the whole
   site sits under the floating player.
   ============================================================ */

@font-face{
  font-family: "Jost";
  src: url("/fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  /* the swatch, exactly as supplied */
  --cream:  #F2E6E2;
  --orange: #EFB78E;
  --teal:   #507976;
  --deep:   #234042;

  /* mixes of the four, nothing new */
  --paper-lite: #FFF8F5;
  --blush:  #F2DED5;
  --peach:  #F0CCB4;
  --muted:  #426765;

  /* roles */
  --bg:       var(--cream);
  --bg-2:     var(--blush);
  --fg:       var(--deep);
  --fg-2:     var(--muted);
  --accent:   var(--orange);
  --on-accent:var(--deep);
  --sel-bg:   var(--orange);
  --sel-fg:   var(--deep);
  --btn-bg:   var(--deep);
  --btn-fg:   var(--paper-lite);
  --btn-hover:var(--teal);

  --rail-bg:  var(--deep);
  --rail-fg:  var(--cream);
  --rail-fg-2:#B0B1AF;
  --rail-hover: rgba(242,230,226,0.1);

  --glass:    rgba(242,230,226,0.72);
  --shadow:   rgba(35,64,66,0.5);

  /* the four "how it works" steps, one swatch colour each */
  --s1: var(--peach);  --s1-fg: var(--deep);
  --s2: var(--orange); --s2-fg: var(--deep);
  --s3: var(--teal);   --s3-fg: var(--paper-lite);
  --s4: var(--deep);   --s4-fg: var(--paper-lite);

  --font: "Jost", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rail: 232px;
  --r: 20px;
  --r-sm: 14px;
  --ease: cubic-bezier(0.22, 0.85, 0.24, 1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:       #1C3436;
    --bg-2:     #234042;
    --fg:       #F2E6E2;
    --fg-2:     #B2B1AE;
    --sel-bg:   var(--orange);
    --sel-fg:   var(--deep);
    --btn-bg:   var(--orange);
    --btn-fg:   var(--deep);
    --btn-hover:var(--paper-lite);
    --rail-bg:  #182C2D;
    --glass:    rgba(35,64,66,0.74);
    --shadow:   rgba(0,0,0,0.6);
    --s1: #385152;      --s1-fg: #F2E6E2;
    --s4: #F2E6E2;      --s4-fg: #234042;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:       #1C3436;
  --bg-2:     #234042;
  --fg:       #F2E6E2;
  --fg-2:     #B2B1AE;
  --sel-bg:   var(--orange);
  --sel-fg:   var(--deep);
  --btn-bg:   var(--orange);
  --btn-fg:   var(--deep);
  --btn-hover:var(--paper-lite);
  --rail-bg:  #182C2D;
  --glass:    rgba(35,64,66,0.74);
  --shadow:   rgba(0,0,0,0.6);
  --s1: #385152;      --s1-fg: #F2E6E2;
  --s4: #F2E6E2;      --s4-fg: #234042;
  color-scheme: dark;
}

/* ---------- base ---------- */

[hidden]{ display: none !important; }

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15.5px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd{ margin: 0; }
h1{ font-size: 32px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
h2{ font-size: 23px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
h3{ font-size: 21px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }

a{ color: inherit; text-decoration: none; }
button, input, textarea, select{ font: inherit; color: inherit; }
button{ -webkit-tap-highlight-color: transparent; }

:focus-visible{ outline: 2.5px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

.muted{ color: var(--fg-2); }

/* ---------- frame ---------- */

.app{
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100%;
}

/* ---------- rail ---------- */

.rail{
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-block: 26px 24px;
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: 14px;
  background: var(--rail-bg);
  color: var(--rail-fg);
}

.wordmark{
  display: flex;
  align-items: center;
  gap: 11px;
  padding-inline: 8px;
}
.wordmark .mark{ display: block; width: 36px; height: 22px; flex: none; cursor: pointer; }
.wordmark .mark svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.wordmark .name{ font-size: 25px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.mark.spun svg{ animation: spin 900ms var(--ease); }
@keyframes spin{ to{ transform: rotate(720deg); } }

.nav{ display: flex; flex-direction: column; gap: 2px; }
.nav a{
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--rail-fg-2);
  font-size: 16px;
  font-weight: 500;
  transition: background 120ms linear, color 120ms linear;
}
.nav a:hover{ background: var(--rail-hover); color: var(--rail-fg); }
.nav a[aria-current="page"]{ background: var(--rail-hover); color: var(--rail-fg); font-weight: 600; }
.nav a[aria-current="page"] svg{ color: var(--orange); }
.nav svg{ width: 20px; height: 20px; flex: none; }

.rail-group{ display: flex; flex-direction: column; gap: 8px; }
.rail-group > p{ padding-inline: 12px; font-size: 14px; font-weight: 600; color: var(--rail-fg-2); }
.rail-list{ display: flex; flex-direction: column; gap: 2px; }
.rail-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-radius: 12px;
  color: var(--rail-fg);
  font-size: 14.5px;
  min-width: 0;
  transition: background 120ms linear;
}
.rail-item:hover{ background: var(--rail-hover); }
.rail-item .mini{ width: 34px; height: 34px; flex: none; border-radius: 8px; overflow: hidden; }
.rail-item .mini svg{ display: block; width: 100%; height: 100%; }
.rail-item span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-empty{ padding-inline: 12px; font-size: 14px; color: var(--rail-fg-2); }
.rail-foot{ margin-top: auto; padding-inline: 12px; font-size: 13px; color: var(--rail-fg-2); line-height: 1.4; }

/* ---------- pane ---------- */

.pane{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-block: 36px 150px;
  padding-left: max(38px, env(safe-area-inset-left, 0px));
  padding-right: max(38px, env(safe-area-inset-right, 0px));
}
.pane > *{ min-width: 0; }

.pane-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------- search ---------- */

.search{
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: 400px;
  padding: 12px 18px;
  border-radius: 100px;
  background: var(--bg-2);
}
.search input{ border: 0; background: none; outline: none; width: 100%; }
.search input::placeholder{ color: var(--fg-2); opacity: 1; }
.search:focus-within{ outline: 2.5px solid var(--teal); outline-offset: 2px; }
.search svg{ width: 18px; height: 18px; flex: none; color: var(--fg-2); }

/* ---------- intro ---------- */

.intro{
  position: relative;
  border-radius: var(--r);
  padding: 26px 70px 26px 28px;
  background: var(--deep);
  color: var(--paper-lite);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.intro p{ font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; max-width: 46ch; }
.intro .close{
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(242,230,226,0.14);
  color: var(--paper-lite);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms linear;
}
.intro .close:hover{ background: rgba(242,230,226,0.28); }

/* ---------- tiles ---------- */

.tiles{ display: grid; grid-template-columns: 1.45fr 1fr; gap: 14px; }

.tile{
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  padding: 28px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.tile > *{ position: relative; z-index: 1; }
.tile h2{ font-size: 30px; }
.tile p{ margin-top: 8px; max-width: 30ch; }
.tile .go{ font-weight: 600; }

/* two overlapping discs, the logo again, cropped off the corner */
.tile::before, .tile::after{
  content: "";
  position: absolute;
  border-radius: 50%;
}
.tile--make{ background: var(--orange); color: var(--deep); }
.tile--make::before{ width: 210px; height: 210px; right: -40px; bottom: -70px; background: var(--teal); }
.tile--make::after{ width: 150px; height: 150px; right: 70px; bottom: -60px; background: var(--paper-lite); opacity: 0.85; mix-blend-mode: multiply; }
.tile--explore{ background: var(--teal); color: var(--paper-lite); }
.tile--explore::before{ width: 170px; height: 170px; right: -50px; bottom: -60px; background: var(--orange); }
.tile--explore::after{ width: 120px; height: 120px; right: 50px; bottom: -50px; background: var(--deep); opacity: 0.7; mix-blend-mode: multiply; }

/* ---------- shelves ---------- */

.shelf{ display: flex; flex-direction: column; gap: 18px; }
.shelf-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shelf-head a{ font-weight: 600; color: var(--fg-2); transition: color 120ms linear; }
.shelf-head a:hover{ color: var(--fg); }
.shelf-head .aside{ color: var(--fg-2); }

.row{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 190px;
  gap: 18px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scrollbar-width: thin;
}
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 28px 18px;
}

/* ---------- cards ---------- */

.card{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card .art{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
  transition: transform 380ms var(--ease);
}
.card .art svg{ display: block; width: 100%; height: 100%; }
.card:hover .art{ transform: translateY(-5px); }
.card .art .ink-shift{ transition: transform 620ms var(--ease); transform-origin: 50% 50%; }
.card:hover .art .ink-shift{ transform: translate(3px, -3px) rotate(4deg); }

.card .play{
  position: absolute;
  right: 10px; bottom: 10px;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--deep);
  background: rgba(255,248,245,0.66);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), background 120ms linear;
}
.card:hover .play, .card .play:focus-visible{ opacity: 1; transform: none; }
.card .play:hover{ background: rgba(255,248,245,0.92); }
.card .play svg{ width: 16px; height: 16px; }
@media (hover: none){ .card .play{ opacity: 1; transform: none; } }

.card .t{
  font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -0.015em;
  min-height: 2.5em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.card .m{ font-size: 14px; color: var(--fg-2); }

.ripple{
  position: fixed;
  pointer-events: none;
  z-index: 900;
  border-radius: 50%;
  background: var(--orange);
  animation: ripple 780ms var(--ease) forwards;
}
@keyframes ripple{
  from{ width: 0; height: 0; margin: 0; opacity: 0.8; }
  to{ width: 220px; height: 220px; margin: -110px 0 0 -110px; opacity: 0; }
}

/* ---------- chips ---------- */

.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip{
  border: 0;
  background: var(--bg-2);
  color: var(--fg);
  padding: 9px 17px;
  border-radius: 100px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms linear;
}
.chip:hover{ background: var(--peach); }
.chip[aria-pressed="true"]{ background: var(--sel-bg); color: var(--sel-fg); font-weight: 600; }

/* ---------- buttons ---------- */

.btn{
  border: 0;
  padding: 14px 26px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: background 120ms linear, color 120ms linear;
}
.btn:hover{ background: var(--btn-hover); color: var(--paper-lite); }
.btn:disabled{ background: var(--bg-2); color: var(--fg-2); cursor: not-allowed; }
.btn--accent{ background: var(--orange); color: var(--deep); }
.btn--accent:hover{ background: var(--paper-lite); color: var(--deep); }
.btn--soft{ background: var(--bg-2); color: var(--fg); }
.btn--soft:hover{ background: var(--peach); color: var(--deep); }

/* ---------- today ---------- */

.today{
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  border-radius: var(--r);
  padding: 22px;
  background: var(--bg-2);
}
.today .art{ display: block; aspect-ratio: 1; max-width: 100%; border-radius: 14px; overflow: hidden; }
.today .art svg{ display: block; width: 100%; height: 100%; }
.today .body{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.today .body p{ color: var(--fg-2); max-width: 50ch; }
.today .actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- make: the four steps ----------
   Four bars rising left to right, like a level meter coming up.
   Order is carried by height, so there are no numbers. */

.bars{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.bar{
  position: relative;
  overflow: hidden;
  padding: 22px 22px 24px;
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bar > *{ position: relative; z-index: 1; }
.bar p{ font-size: 15.5px; line-height: 1.4; max-width: 24ch; }
.bar svg.art{
  position: absolute;
  z-index: 0;
  right: -18px; bottom: -18px;
  width: 120px; height: 84px;
}
.bar--1{ min-height: 176px; background: var(--s1); color: var(--s1-fg); }
.bar--2{ min-height: 224px; background: var(--s2); color: var(--s2-fg); }
.bar--3{ min-height: 272px; background: var(--s3); color: var(--s3-fg); }
.bar--4{ min-height: 320px; background: var(--s4); color: var(--s4-fg); }

/* the heading sits in the empty space above the short bars */
.bars-wrap{ position: relative; }
.bars-wrap h1{ position: absolute; top: 0; left: 0; }

/* ---------- make: prompt + settings ---------- */

.prompt{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px 14px;
  border-radius: var(--r);
  background: var(--bg-2);
}
.prompt:focus-within{ outline: 2.5px solid var(--teal); outline-offset: 2px; }
.prompt label{ font-weight: 600; }
.prompt textarea{
  border: 0;
  outline: none;
  background: none;
  resize: vertical;
  width: 100%;
  min-height: 108px;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.prompt textarea::placeholder{ color: var(--fg-2); opacity: 0.8; }

.settings{ display: flex; flex-direction: column; gap: 30px; }
.set{
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px 28px;
  align-items: start;
}
.set-label{ font-weight: 600; padding-top: 10px; }
.set-ctl{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; width: 100%; }
.live{ color: var(--fg-2); font-size: 15px; }
.live:empty{ display: none; }
.live b{ color: var(--fg); font-weight: 600; }

.seg{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  border-radius: 100px;
  background: var(--bg-2);
}
.seg button{
  border: 0;
  background: none;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 100px;
  font-weight: 500;
  transition: background 120ms linear;
}
.seg button:hover{ background: var(--peach); }
.seg button[aria-pressed="true"]{ background: var(--sel-bg); color: var(--sel-fg); font-weight: 600; }

.opts{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.opt{
  border: 0;
  text-align: left;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  transition: background 120ms linear;
}
.opt b{ display: block; font-weight: 600; }
.opt span{ display: block; font-size: 14px; line-height: 1.35; color: var(--fg-2); margin-top: 2px; }
.opt:hover{ background: var(--peach); }
.opt:hover span{ color: var(--deep); }
.opt[aria-pressed="true"]{ background: var(--sel-bg); color: var(--sel-fg); }
.opt[aria-pressed="true"] span{ color: var(--sel-fg); }

.dial{ width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 8px; }
.dial-ends{ display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--fg-2); }
.dial input[type="range"]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  outline: none;
  cursor: pointer;
  margin: 8px 0;
}
.dial input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--deep);
  border: 4px solid var(--bg);
  cursor: grab;
}
.dial input[type="range"]::-moz-range-thumb{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--deep);
  border: 4px solid var(--bg);
  cursor: grab;
}
.dial input[type="range"]:focus-visible{ outline: 2.5px solid var(--teal); outline-offset: 6px; }

.len-custom{ display: flex; align-items: center; gap: 10px; font-weight: 500; }
.len-custom input{
  width: 92px;
  border: 0;
  outline: none;
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--bg-2);
}
.len-custom input:focus{ outline: 2.5px solid var(--teal); outline-offset: 2px; }
.len-custom[hidden]{ display: none; }

details.adv{ border-radius: var(--r-sm); background: var(--bg-2); }
details.adv > summary{
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
details.adv > summary::-webkit-details-marker{ display: none; }
details.adv > summary::before{ content: "+"; display: inline-block; width: 14px; font-size: 22px; line-height: 1; font-weight: 500; }
details.adv[open] > summary::before{ content: "\2212"; }
.adv-body{ padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.adv-body label{ font-weight: 600; }
.adv-body textarea{
  border: 0;
  outline: none;
  resize: vertical;
  width: 100%;
  min-height: 92px;
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg);
  line-height: 1.45;
}
.adv-body textarea:focus{ outline: 2.5px solid var(--teal); outline-offset: 2px; }

.result{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.result .today{ background: var(--bg-2); }

/* ---------- show ---------- */

.show-head{ display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: end; }
.show-head .art{ display: block; aspect-ratio: 1; max-width: 100%; border-radius: var(--r); overflow: hidden; }
.show-head .art svg{ display: block; width: 100%; height: 100%; }
.show-head .meta{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.show-head h1{ font-size: 40px; }
.show-head .by{ color: var(--fg-2); }
.show-head .prompt-text{ font-size: 19px; line-height: 1.4; letter-spacing: -0.01em; max-width: 52ch; }
.show-head .actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.facts{ display: flex; flex-wrap: wrap; gap: 8px 28px; }
.facts div{ display: flex; gap: 8px; }
.facts dt{ color: var(--fg-2); }
.facts dd{ font-weight: 600; }

.eps{ display: flex; flex-direction: column; }
.ep{
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 14px;
  border-radius: var(--r-sm);
  transition: background 120ms linear;
}
.ep:hover{ background: var(--bg-2); }
.ep .n{ font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ep .t{ display: block; font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.ep .d{ display: block; color: var(--fg-2); font-size: 14.5px; }
.ep .len{ color: var(--fg-2); font-variant-numeric: tabular-nums; }

.footnote{ color: var(--fg-2); font-size: 14.5px; max-width: 60ch; }

/* ---------- floating player ---------- */

.player{
  position: fixed;
  z-index: 60;
  left: calc(var(--rail) + 20px);
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 11px 18px;
  border-radius: 24px;
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: 0 22px 50px -18px var(--shadow), 0 2px 8px -2px rgba(35,64,66,0.18);
}

.now{ display: flex; align-items: center; gap: 13px; min-width: 0; }
.now .art{ width: 50px; height: 50px; flex: none; border-radius: 11px; overflow: hidden; background: var(--bg-2); }
.now .art svg{ display: block; width: 100%; height: 100%; }
.now .txt{ min-width: 0; }
.now .t{ display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now .m{ display: block; font-size: 13.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wave{ display: flex; align-items: flex-end; gap: 3px; height: 16px; flex: none; }
.wave i{ display: block; width: 3px; height: 28%; border-radius: 2px; background: var(--teal); }
.wave.on i{ animation: bar 900ms var(--ease) infinite alternate; }
.wave.on i:nth-child(2){ animation-delay: 140ms; }
.wave.on i:nth-child(3){ animation-delay: 300ms; }
.wave.on i:nth-child(4){ animation-delay: 90ms; }
@keyframes bar{ from{ height: 22%; } to{ height: 100%; } }

.transport{ display: flex; align-items: center; gap: 6px; }
.tbtn{
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  background: none;
  color: var(--fg);
  transition: background 120ms linear;
}
.tbtn:hover{ background: rgba(35,64,66,0.1); }
.tbtn svg{ width: 21px; height: 21px; }
.tbtn--main{ width: 46px; height: 46px; background: var(--deep); color: var(--paper-lite); }
.tbtn--main:hover{ background: var(--teal); }
.tbtn--main svg{ width: 17px; height: 17px; }
.rate{
  border: 0; background: none; cursor: pointer;
  padding: 7px 10px;
  border-radius: 100px;
  font-weight: 600;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.rate:hover{ background: rgba(35,64,66,0.1); color: var(--fg); }

.scrub{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.scrub .time{ font-size: 13.5px; color: var(--fg-2); font-variant-numeric: tabular-nums; flex: none; }
.track{
  flex: 1 1 auto;
  min-width: 0;
  height: 6px;
  padding: 0; border: 0;
  border-radius: 100px;
  background: rgba(35,64,66,0.16);
  position: relative;
  cursor: pointer;
}
.track .fill{ position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 100px; background: var(--deep); }

:root[data-theme="dark"] .tbtn:hover, :root[data-theme="dark"] .rate:hover{ background: rgba(242,230,226,0.12); }
:root[data-theme="dark"] .tbtn--main{ background: var(--orange); color: var(--deep); }
:root[data-theme="dark"] .track{ background: rgba(242,230,226,0.2); }
:root[data-theme="dark"] .track .fill{ background: var(--orange); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tbtn:hover, :root:not([data-theme="light"]) .rate:hover{ background: rgba(242,230,226,0.12); }
  :root:not([data-theme="light"]) .tbtn--main{ background: var(--orange); color: var(--deep); }
  :root:not([data-theme="light"]) .track{ background: rgba(242,230,226,0.2); }
  :root:not([data-theme="light"]) .track .fill{ background: var(--orange); }
}

/* ---------- misc ---------- */

.empty{ grid-column: 1 / -1; padding: 40px 0; color: var(--fg-2); }

.confetti{
  position: fixed;
  pointer-events: none;
  z-index: 998;
  border-radius: 50%;
  animation: fall 2.6s var(--ease) forwards;
}
@keyframes fall{
  from{ transform: translateY(-20px) rotate(0); opacity: 1; }
  to{ transform: translateY(104vh) rotate(540deg); opacity: 0; }
}

/* ============================================================
   Added with the real backend: hero, room, booth, cast,
   script, week strip, year ruler. Same rules as above: flat
   fills, no outlines, nothing outside the swatch.
   ============================================================ */

:root{
  --seat0: #EFB78E;
  --seat1: #507976;
  --seat2: #234042;
  --seat3: #8DA9A5;
  --seat4: #C99A74;
  --field: var(--paper-lite);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --seat2: #F2E6E2; --field: #1C3436; }
}
:root[data-theme="dark"]{ --seat2: #F2E6E2; --field: #1C3436; }

/* ---------- the little people ---------- */

.dot{ display: inline-block; width: 14px; height: 14px; flex: none; background: var(--seat0); }
.dot.seat1{ background: var(--seat1); }
.dot.seat2{ background: var(--seat2); }
.dot.seat3{ background: var(--seat3); }
.dot.seat4{ background: var(--seat4); }
.dot.s-circle{ border-radius: 50%; }
.dot.s-square{ border-radius: 4px; }
.dot.s-arch{ border-radius: 50% 50% 2px 2px; }
.dot.s-leaf{ border-radius: 2px 50% 50% 50%; }
.dot.s-bar{ width: 9px; height: 17px; border-radius: 5px; margin-inline: 2.5px; }

/* ---------- the recording booth ---------- */

.problem{ font-weight: 600; font-size: 19px; line-height: 1.35; max-width: 48ch; }
.booth{ background: var(--bg-2); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 22px; }
.booth--bad{ align-items: flex-start; }

.phases{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.phases li{ display: flex; align-items: center; gap: 11px; font-weight: 600; color: var(--fg-2); }
.pip{ position: relative; width: 38px; height: 22px; flex: none; opacity: 0.32; transition: opacity 400ms linear; }
.pip i{ position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; }
.pip i:first-child{ left: 0; background: var(--orange); }
.pip i:last-child{ left: 15px; background: var(--teal); mix-blend-mode: multiply; }
.phases li.done{ color: var(--fg); }
.phases li.done .pip{ opacity: 1; }
.phases li.now{ color: var(--fg); }
.phases li.now .pip{ opacity: 1; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse{ 50%{ transform: scale(1.14); } }

.meter{ height: 10px; border-radius: 5px; background: rgba(35,64,66,0.12); overflow: hidden; }
.meter span{ display: block; width: 0; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--teal), var(--orange)); transition: width 900ms var(--ease); }
:root[data-theme="dark"] .meter{ background: rgba(242,230,226,0.16); }

.step{ display: flex; align-items: baseline; gap: 16px; }
.step b{ flex: 1; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.step span{ color: var(--fg-2); font-variant-numeric: tabular-nums; }

.cast-row{ display: flex; flex-wrap: wrap; gap: 10px 26px; }
.who{ display: flex; align-items: center; gap: 9px; }
.who em{ font-style: normal; color: var(--fg-2); }

.ticker{ display: flex; flex-direction: column; gap: 14px; }
.tk{ display: flex; align-items: flex-start; gap: 13px; line-height: 1.45; animation: rise 600ms var(--ease) both; }
.tk .dot{ margin-top: 5px; }
.tk b{ margin-right: 6px; }
@keyframes rise{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
.quiet{ color: var(--fg-2); font-size: 14.5px; }

/* ---------- cast and script ---------- */

.cast-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.member{ display: flex; gap: 14px; align-items: flex-start; background: var(--bg-2); border-radius: var(--r-sm); padding: 16px 18px; }
.member .dot{ margin-top: 5px; }
.member .stance{ display: block; margin-top: 3px; color: var(--fg-2); }

.lines{ display: flex; flex-direction: column; max-width: 74ch; }
.line{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 9px 0 9px 14px;
  margin-left: -14px;
  background: none;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 16.5px;
  line-height: 1.6;
  box-shadow: inset 3px 0 0 transparent;
  transition: box-shadow 160ms linear, color 160ms linear;
}
.line:hover{ box-shadow: inset 3px 0 0 rgba(35,64,66,.18); }
.line.on{ box-shadow: inset 3px 0 0 var(--orange); }
.line .at{ font-size: 12.5px; color: var(--fg-2); font-variant-numeric: tabular-nums; opacity: .7; }
.line.on .at{ opacity: 1; color: var(--fg); }
.say b{ font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-right: 4px; }
.say .who0{ color: #234042; } .say .who1{ color: #A85A2A; } .say .who2{ color: #3D6E6A; } .say .who3{ color: #6B4B8A; } .say .who4{ color: #8C5E4A; }

/* ---------- explore: the week ---------- */

.days{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.day{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 156px;
  padding: 15px 15px 16px;
  text-align: left;
  border: 0; border-radius: 18px;
  background: var(--bg-2); color: var(--fg);
  cursor: pointer;
  transition: background 120ms linear, color 120ms linear;
}
.day:hover{ background: var(--blush); }
.day .dn{ font-weight: 600; color: var(--fg-2); }
.day .dd{ font-size: 36px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.day .dm{ margin-top: 5px; max-width: 11ch; font-size: 13.5px; line-height: 1.25; }
.day .dart{ position: absolute; right: -20px; bottom: -20px; width: 78px; height: 78px; border-radius: 50%; overflow: hidden; }
.day .dart svg{ display: block; width: 100%; height: 100%; }
.day.today .dn::after{ content: " · today"; }
.day[aria-pressed="true"]{ background: var(--btn-bg); color: var(--btn-fg); }
.day[aria-pressed="true"] .dn{ color: inherit; opacity: 0.8; }

/* ---------- explore: the year ---------- */

.year{ display: flex; flex-direction: column; gap: 14px; }
.year-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.year-top .aside{ color: var(--fg-2); }
.yr{ position: relative; height: 104px; margin-inline: 10px; }
.months{ position: absolute; inset: 0 0 auto 0; height: 20px; }
.months span{ position: absolute; font-size: 13px; color: var(--fg-2); }
.rule{ position: absolute; left: 0; right: 0; top: 48px; height: 8px; border-radius: 4px; background: var(--bg-2); }
.rule .fill{ display: block; height: 100%; border-radius: 4px; background: var(--teal); }
.pin{ position: absolute; top: 38px; width: 28px; height: 28px; margin-left: -14px; padding: 0; border: 0; background: none; cursor: pointer; }
.pin i{ position: absolute; inset: 6px; border-radius: 50%; background: var(--orange); transition: transform 180ms var(--ease); }
.pin:hover i{ transform: scale(1.4); }
.pin.here i{ background: var(--deep); transform: scale(1.25); }
:root[data-theme="dark"] .pin.here i{ background: var(--paper-lite); }
.pin .tip{
  position: absolute; bottom: 36px; left: 50%;
  transform: translate(-50%, 5px);
  white-space: nowrap; pointer-events: none;
  padding: 5px 11px; border-radius: 10px;
  background: var(--deep); color: var(--paper-lite);
  font-size: 13px; opacity: 0;
  transition: opacity 120ms linear, transform 120ms linear;
}
.pin:hover .tip, .pin:focus-visible .tip{ opacity: 1; transform: translate(-50%, 0); }
.pin.edge-r .tip{ left: auto; right: -6px; transform: translate(0, 5px); }
.pin.edge-l .tip{ left: -6px; transform: translate(0, 5px); }
.pin.edge-r:hover .tip, .pin.edge-r:focus-visible .tip,
.pin.edge-l:hover .tip, .pin.edge-l:focus-visible .tip{ transform: none; }
.now-flag{ position: absolute; top: 64px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; }
.now-flag i{ display: block; width: 2px; height: 13px; border-radius: 1px; background: var(--fg); }

@media (max-width: 960px){
  .days{ grid-auto-flow: column; grid-auto-columns: 112px; grid-template-columns: none; overflow-x: auto; padding-bottom: 8px; }
  .phases{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 760px){
  .step b{ font-size: 19px; }
  .line{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .line .at{ display: none; }
}

/* ============================================================
   Minimal pass. Boxes are for things you press, not for
   decoration: no tinted panels around text, no cards around
   the cast, no tiles around the days.
   ============================================================ */

.adv-body input[type="text"]{
  border: 0; outline: none; width: 100%; max-width: 320px;
  border-radius: 12px; padding: 12px 16px; background: var(--bg);
}
.adv-body input[type="text"]:focus{ outline: 2.5px solid var(--teal); outline-offset: 2px; }

/* ---------- home: just the greeting, with the two circles ---------- */

.top{
  --mx: 0; --my: 0; --sun-x: 50%; --sun-y: 40%;
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  padding-block: 20px 4px;
  min-height: 190px;
  overflow-x: clip; overflow-y: visible;
  justify-content: flex-end;
}
.top > *{ position: relative; z-index: 1; }
.top h1{ font-size: clamp(42px, 6vw, 68px); letter-spacing: -0.05em; line-height: 1; }
.top .search{ max-width: 460px; }

.orbs{ position: absolute !important; z-index: 0 !important; right: 0; top: 0; width: min(46%, 360px); height: 100%; pointer-events: none; }
.o{ position: absolute; border-radius: 50%; mix-blend-mode: multiply; will-change: transform; }
.o1{ width: 120px; height: 120px; background: var(--orange); left: var(--sun-x); top: var(--sun-y);
     transform: translate(calc(-50% + var(--mx) * 20px), calc(-50% + var(--my) * 14px));
     transition: left 1.2s var(--ease), top 1.2s var(--ease); }
.o2{ width: 190px; height: 190px; background: var(--teal); right: -30px; top: 14px;
     transform: translate(calc(var(--mx) * -14px), calc(var(--my) * -10px)); }
.o3{ width: 70px; height: 70px; background: var(--deep); right: 36%; bottom: 6px;
     transform: translate(calc(var(--mx) * 30px), calc(var(--my) * 18px)); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .o{ mix-blend-mode: normal; opacity: 0.9; }
  :root:not([data-theme="light"]) .o3{ background: var(--paper-lite); opacity: 0.75; }
}
:root[data-theme="dark"] .o{ mix-blend-mode: normal; opacity: 0.9; }
:root[data-theme="dark"] .o3{ background: var(--paper-lite); opacity: 0.75; }

.intro{
  position: relative; display: block;
  max-width: 64ch; padding: 0 48px 0 0;
  background: none; color: var(--fg); border-radius: 0;
}
.intro p{ font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--fg-2); max-width: none; }
.intro p a{ color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
.intro .close{ top: -2px; right: 0; width: 32px; height: 32px; background: var(--bg-2); color: var(--fg); font-size: 18px; }
.intro .close:hover{ background: var(--blush); }

.doors{ display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.doors .plain{ font-weight: 600; text-decoration: underline; text-underline-offset: 4px; color: var(--fg); }
.doors .plain:hover{ color: var(--teal); }

.today{ background: none; padding: 0; }
.result .today{ background: none; }

/* ---------- make: a plain top, and the summary line ---------- */

.make-top{ display: flex; flex-direction: column; gap: 26px; }
.how{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 30px; }
.how li{ display: flex; flex-direction: column; gap: 5px; color: var(--fg-2); max-width: 28ch; line-height: 1.45; }
.how b{ color: var(--fg); font-size: 18px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 9px; }
.how b::before{ content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); flex: none; }
.how li:nth-child(2) b::before{ background: var(--teal); }
.how li:nth-child(3) b::before{ background: var(--orange); }
.how li:nth-child(4) b::before{ background: var(--teal); }

.room{ background: none; padding: 0; border-radius: 0; }
.room-line{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.room-line b{ font-size: 21px; letter-spacing: -0.025em; }
.room-line span{ color: var(--fg-2); }

details.adv{ background: none; }
details.adv > summary{ padding: 6px 0; }
.adv-body{ padding: 8px 0 0; }
.adv-body textarea{ background: var(--bg-2); }
.adv-body input[type="text"]{ background: var(--bg-2); }

.set.is-off .dial, .set.is-off .live{ opacity: 0.4; }
.set.is-off .dial input{ pointer-events: none; }

/* ---------- the booth, plainly ---------- */

.booth{ background: none; padding: 0; border-radius: 0; gap: 20px; }
.meter span{ transition: width 3.6s linear; }
.step{ align-items: baseline; }
.step #b-eta{ margin-left: auto; }
.note{ color: var(--fg-2); max-width: 56ch; margin-top: -8px; }

/* ---------- the cast, plainly ---------- */

.cast-list{ display: flex; flex-direction: column; gap: 14px; }
.member{ background: none; padding: 0; border-radius: 0; }

/* ---------- transcript: shut until asked for ---------- */

.transcript > summary{
  display: flex; align-items: baseline; gap: 14px;
  cursor: pointer; list-style: none;
  font-size: 23px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
}
.transcript > summary::-webkit-details-marker{ display: none; }
.transcript > summary::before{ content: "+"; display: inline-block; width: 16px; font-weight: 500; }
.transcript[open] > summary::before{ content: "\2212"; }
.transcript > summary .count{ font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--fg-2); }
.transcript .lines{ margin-top: 18px; }
.bc{ color: var(--fg-2); font-style: italic; font-size: .92em; }

/* ---------- explore: the week, as plain columns ---------- */

.days{ gap: 4px; }
.day{ min-height: 0; background: none; padding: 12px 14px 14px; border-radius: 14px; }
.day:hover{ background: var(--bg-2); }
.day .dd{ font-size: 34px; }
.day[aria-pressed="true"]{ background: var(--bg-2); color: var(--fg); }
.day[aria-pressed="true"] .dn{ color: var(--fg); opacity: 1; }
.day[aria-pressed="true"] .dd::after{ content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 9px; border-radius: 50%; background: var(--orange); }

@media (max-width: 960px){
  .how{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orbs{ width: min(40%, 240px); }
}
@media (max-width: 760px){
  .top{ min-height: 170px; }
  .o1{ width: 90px; height: 90px; }
  .o2{ width: 140px; height: 140px; }
  .how{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .booth{ padding: 0; }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px){
  .bars-wrap h1{ position: static; margin-bottom: 24px; }
  .bars{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar--1, .bar--2{ min-height: 190px; }
  .bar--3, .bar--4{ min-height: 230px; }
  .bar{ border-radius: 18px; }
  .opts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px){
  .tiles{ grid-template-columns: 1fr; }
  .today{ grid-template-columns: 1fr; }
  .today .art{ max-width: 200px; }
  .show-head{ grid-template-columns: 1fr; }
  .show-head .art{ max-width: 220px; }
}

@media (max-width: 760px){
  .app{ grid-template-columns: minmax(0, 1fr); }
  .rail{
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: visible;
    padding-block: 12px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .rail-group, .rail-foot{ display: none; }
  .wordmark{ padding-inline: 0; }
  .wordmark .name{ font-size: 22px; }
  .nav{ flex-direction: row; gap: 0; }
  .nav a span{ display: none; }
  .nav a{ padding: 10px; }
  .pane{
    gap: 36px;
    padding-block: 26px 140px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  h1{ font-size: 28px; }
  .intro{ padding: 24px 62px 24px 22px; }
  .intro p{ font-size: 18px; }
  .set{ grid-template-columns: minmax(0, 1fr); }
  .set-label{ padding-top: 0; }
  .opts{ grid-template-columns: minmax(0, 1fr); }
  .bars{ grid-template-columns: minmax(0, 1fr); }
  .bar--1, .bar--2, .bar--3, .bar--4{ min-height: 0; border-radius: 16px; }
  .bar{ padding-right: 92px; }
  .bar p{ max-width: 34ch; }
  .player{
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 10px 14px 12px;
    border-radius: 22px;
  }
  .scrub{ grid-column: 1 / -1; order: 3; }
  .rate{ display: none; }
  .ep{ grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   v3: a front page that sells the idea, and the publish flow
   ============================================================ */

@keyframes paneIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
.pane{ animation: paneIn 240ms var(--ease) both; }
.is-nav .pane{ opacity: 0.6; transition: opacity 160ms linear; }

.hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 300px);
  gap: 40px;
  align-items: center;
  padding-top: 18px;
}
.hero-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.hero h1{
  font-size: clamp(46px, 6.6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.ask{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
  max-width: 660px;
  padding: 14px 14px 14px 24px;
  border-radius: var(--r);
  background: var(--bg-2);
}
.ask:focus-within{ outline: 2.5px solid var(--teal); outline-offset: 2px; }
.ask textarea{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  resize: none;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  padding: 6px 0;
  min-height: 62px;
}
.ask textarea::placeholder{ color: var(--fg-2); opacity: 0.85; }
.ask .btn{ flex: none; padding: 14px 26px; }

.hero .note{ margin: -8px 0 0; font-weight: 600; min-height: 0; }
.hero .note:empty{ display: none; }

.tries{ display: flex; flex-wrap: wrap; gap: 8px; }
.try{
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.3;
  transition: background 120ms linear, color 120ms linear;
}
.try:hover{ background: var(--peach); color: var(--fg); }

.proof{ max-width: 54ch; color: var(--fg-2); font-size: 17px; line-height: 1.55; }
.proof a{ display: inline; color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* two voices overlapping: the product, as a picture */
.duet{ position: relative; height: 250px; width: 100%; }
.duet .lane{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; }
.duet .r1{ transform: translateX(5px); }
.duet i{
  display: block;
  width: 5px;
  height: var(--h);
  border-radius: 5px;
  transform-origin: center;
  animation: duet 2.6s ease-in-out var(--d) infinite alternate;
}
.duet .r0 i{ background: var(--orange); }
.duet .r1 i{ background: var(--teal); mix-blend-mode: multiply; }
@keyframes duet{ from{ transform: scaleY(0.32); } to{ transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .duet i{ animation: none; } .pane{ animation: none; } }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .duet .r1 i{ mix-blend-mode: normal; opacity: 0.85; }
}
:root[data-theme="dark"] .duet .r1 i{ mix-blend-mode: normal; opacity: 0.85; }

.make-top{ gap: 0; }
.prompt .tries{ margin-top: 8px; }

/* casting */
.cast-pick{ display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cast-pick .seat{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cast-pick .seat[hidden]{ display: none; }
.seat-n{ width: 64px; color: var(--fg-2); }
.pick{
  border: 0;
  outline: none;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
}
.pick{ max-width: 100%; }
.pick:focus-visible{ outline: 2.5px solid var(--teal); outline-offset: 2px; }

/* who is talking */
.member .tag{ font-style: normal; font-size: 14px; color: var(--fg-2); margin-left: 8px; }

/* publishing */
.pub{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pub[hidden]{ display: none; }
.pub-ask{ max-width: 56ch; color: var(--fg-2); line-height: 1.5; }
.pub-line{ line-height: 1.5; }
.pub-go{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pub-err{ font-weight: 600; }
.chip em{ font-style: normal; font-size: 12px; opacity: 0.7; margin-left: 4px; }
.linkbtn{ border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--fg); }
.btn--soft.is-on{ background: var(--sel-bg); color: var(--sel-fg); }

.rail-item .making{ font-style: normal; font-size: 11px; margin-left: 7px; padding: 2px 8px; border-radius: 100px; background: var(--orange); color: var(--deep); }

@media (max-width: 860px){
  .hero{ grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .duet{ height: 110px; order: -1; max-width: 340px; }
  .ask{ flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .ask .btn{ align-self: flex-end; }
}

.prompt .try{ background: var(--bg); }
.prompt .try:hover{ background: var(--peach); }
.prompt textarea{ min-height: 84px; }

/* voice audition */
.plain-link{ font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--fg); }
.vlist{ display: flex; flex-direction: column; gap: 4px; }
.vrow{ display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: var(--r-sm); }
.vrow:hover{ background: var(--bg-2); }
.vrow.on{ background: var(--bg-2); }
.vplay{ flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; background: var(--btn-bg); color: var(--btn-fg); display: grid; place-items: center; font-size: 13px; }
.vplay svg{ width: 16px; height: 16px; margin-left: 2px; }
.vplay:disabled{ opacity: 0.35; cursor: default; }
.vinfo{ flex: 1; min-width: 0; }
.vinfo .stance{ display: block; color: var(--fg-2); font-size: 14px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vinfo .tag{ font-style: normal; font-size: 14px; color: var(--fg-2); margin-left: 8px; }
.vtick{ flex: none; border: 0; cursor: pointer; padding: 8px 18px; border-radius: 100px; background: var(--bg-2); font-weight: 500; }
.vrow.on .vtick, .vtick[aria-pressed="true"]{ background: var(--sel-bg); color: var(--sel-fg); font-weight: 600; }
.vbar{ position: sticky; bottom: 110px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--r); background: var(--bg); box-shadow: 0 8px 30px -12px var(--shadow); }
.vbar[hidden]{ display: none; }

.vo-play{
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; cursor: pointer; padding: 10px 16px; border-radius: 100px;
  background: var(--teal); color: var(--cream, #F2E6E2); font: inherit;
}
.vo-play:disabled{ opacity: .35; cursor: default; }
.vo-play.on{ background: var(--orange, #EFB78E); color: var(--deep, #234042); }

/* ============================================================
   v4: sharper, more like a company than a toy
   ============================================================ */
:root{ --r: 8px; --r-sm: 6px; }
.btn, .try, .pick, .vo-play, .vtick, .chip, .seg, .seg button{ border-radius: 6px; }
.search{ border-radius: 8px; }

.stage{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: stretch;
  padding: 44px;
  border-radius: 8px;
  background: var(--deep);
  color: var(--cream);
}
.stage-ask{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; justify-content: center; }
.stage h1{ font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; color: var(--cream); }
.stage .ask{ max-width: none; padding: 10px 10px 10px 20px; border-radius: 6px; background: var(--cream); color: var(--deep); align-items: center; }
.stage .ask textarea{ font-size: 19px; min-height: 52px; color: var(--deep); }
.stage .ask textarea::placeholder{ color: var(--teal); }
.stage .ask .btn{ padding: 14px 24px; }
.stage .ask .btn--accent:hover{ background: var(--teal); color: var(--paper-lite); }
.stage .note{ color: var(--orange); margin: 0; }
.stage .try{ background: rgba(242,230,226,0.1); color: var(--cream); border-radius: 4px; font-size: 14px; padding: 7px 12px; }
.stage .try:hover{ background: rgba(242,230,226,0.2); color: var(--cream); }
.stage-link{ color: var(--orange); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

.sample{ display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 6px; background: var(--teal); color: var(--paper-lite); min-width: 0; }
.sample-top{ display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.sample-top b{ font-weight: 600; font-size: 17px; line-height: 1.3; }
.sample-top span{ flex: none; font-size: 13px; opacity: 0.8; }
.sample-lines{ display: flex; flex-direction: column; gap: 12px; }
.sample-lines p{ font-size: 16px; line-height: 1.45; }
.sample-lines .over{ margin-left: 22px; }
.who{ display: inline-block; font-style: normal; font-weight: 600; font-size: 12px; padding: 2px 8px; border-radius: 3px; margin-right: 9px; vertical-align: 1px; color: var(--deep); }
.who.w1{ background: var(--orange); }
.who.w2{ background: var(--cream); }
.sample .duet{ height: 74px; }
.sample .duet i{ width: 4px; }
.sample .duet .r0 i{ background: var(--orange); }
.sample .duet .r1 i{ background: var(--cream); mix-blend-mode: normal; opacity: 0.75; }

.shelf-head h2, .today h2{ font-size: 22px; letter-spacing: -0.02em; }
.today{ border-radius: 8px; }
@media (max-width: 900px){
  .stage{ grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 28px; }
  .stage .ask{ flex-wrap: wrap; }
}
.sample .duet{ order: 0; max-width: none; }

/* ---- in-page voice picker ---- */
.cast-pick{ width: 100%; gap: 18px; }
#seat-rows{ display: flex; flex-direction: column; gap: 10px; width: 100%; }
.seat-pin{ display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 6px; background: var(--deep); color: var(--paper-lite); }
.seat-pin em{ font-style: normal; opacity: .75; font-size: 14px; }
.seat-pin[hidden], .seat-free[hidden]{ display: none; }
.seat-free{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.vdrop{ border: 0; cursor: pointer; width: 28px; height: 28px; border-radius: 4px; background: rgba(242,230,226,.14); color: var(--paper-lite); font-size: 18px; line-height: 1; }
.vdrop:hover{ background: var(--orange); color: var(--deep); }
.vbrowse{ width: 100%; display: flex; flex-direction: column; gap: 10px; }
.vbrowse-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vb-title{ font-weight: 600; }
.vb-list{ display: block; }
.vb-h{ margin: 14px 0 8px; font-size: 14px; font-weight: 600; color: var(--ink-2, var(--deep)); }
.vb-h:first-child{ margin-top: 2px; }
.vb-top, .vacc-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.vacc{ border-top: 1px solid rgba(35,64,66,.14); }
.vacc:last-child{ border-bottom: 1px solid rgba(35,64,66,.14); }
.vacc summary{ list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 12px 2px; font-weight: 600; }
.vacc summary::-webkit-details-marker{ display: none; }
.vacc summary::after{ content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 200ms var(--ease); opacity: .6; }
.vacc[open] summary::after{ transform: rotate(225deg) translate(-2px, -2px); }
.vacc summary em{ font-style: normal; font-weight: 400; opacity: .6; font-size: 14px; }
.vacc-list{ padding: 0 0 14px; }
.vfeel{ display: flex; gap: 2px; flex: none; }
.vlike, .vnope{ width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .45; cursor: pointer; display: grid; place-items: center; transition: opacity 120ms linear, background 120ms linear; }
.vnope svg{ transform: rotate(180deg); }
.vlike:hover, .vnope:hover{ opacity: .9; background: rgba(35,64,66,.08); }
.vlike[aria-pressed="true"]{ opacity: 1; color: var(--teal); }
.vlike[aria-pressed="true"] path, .vnope[aria-pressed="true"] path{ fill: currentColor; fill-opacity: .25; }
.vnope[aria-pressed="true"]{ opacity: 1; color: #B4523C; }
.vb.is-on .vlike[aria-pressed="true"]{ color: var(--orange); }
.vb.is-off .vb-info, .vb.is-off .vplay{ opacity: .5; }
.vb{ display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border-radius: 6px; background: var(--bg-2); }
.vb.is-on{ background: var(--deep); color: var(--paper-lite); }
.vb-info{ display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.vb-info b{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-info span{ font-size: 13px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vplay{ flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; background: var(--teal); color: var(--paper-lite); }
.vplay:disabled{ opacity: .3; cursor: default; }
.vplay .i-stop{ display: none; }
.vplay.on{ background: var(--orange); color: var(--deep); }
.vplay.on .i-play{ display: none; }
.vplay.on .i-stop{ display: block; }
.vuse{ flex: none; border: 0; cursor: pointer; padding: 8px 16px; border-radius: 6px; background: var(--cream); color: var(--deep); font: inherit; font-weight: 500; }
.vuse[aria-pressed="true"]{ background: var(--orange); color: var(--deep); font-weight: 600; }
.vuse:disabled{ opacity: .35; cursor: default; }

/* ---- settings pop-up ---- */
.ask-set{
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  border: 0; cursor: pointer; padding: 12px 16px; border-radius: 6px;
  background: rgba(35,64,66,0.08); color: var(--deep); font: inherit; font-weight: 500; font-size: 15px;
  transition: background 120ms linear;
}
.ask-set:hover{ background: rgba(35,64,66,0.16); }
.ask-set.changed{ background: var(--orange); }
.sheet{ position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sheet[hidden]{ display: none; }
.sheet-bg{ position: absolute; inset: 0; background: rgba(20,38,40,0.62); }
.sheet-card{
  position: relative; width: min(720px, 100%); max-height: min(88vh, 860px);
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg); border-radius: 8px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
  animation: sheetIn 220ms var(--ease) both;
}
@keyframes sheetIn{ from{ opacity: 0; transform: translateY(14px) scale(.985); } to{ opacity: 1; transform: none; } }
.sheet-head{ display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 14px; font-size: 20px; letter-spacing: -0.02em; }
.sheet-x{ border: 0; cursor: pointer; width: 36px; height: 36px; border-radius: 6px; background: var(--bg-2); font-size: 22px; line-height: 1; color: var(--fg); }
.sheet-x:hover{ background: var(--peach); }
.sheet-body{ overflow: auto; padding: 4px 24px 18px; }
.sheet-foot{ padding: 14px 24px 20px; display: flex; justify-content: flex-end; background: var(--bg); border-radius: 0 0 8px 8px; box-shadow: 0 -10px 20px -14px rgba(35,64,66,0.25); }
.sheet-open body{ overflow: hidden; }
@media (max-width: 640px){
  .sheet{ align-items: flex-end; padding: 0; }
  .sheet-card{ width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }
  .ask-set span{ display: none; }
  .ask-set.changed span{ display: inline; }
}
@media (prefers-reduced-motion: reduce){ .sheet-card{ animation: none; } }

/* ---- footer and information pages ---- */
.site-foot{
  margin-top: 72px; padding: 36px 0 44px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr); gap: 28px 48px;
  background: none; color: var(--fg);
  box-shadow: 0 -1px 0 rgba(35,64,66,0.12);
}
.foot-brand{ display: flex; gap: 14px; align-items: flex-start; }
.foot-mark svg{ width: 38px; height: 23px; display: block; margin-top: 3px; }
.foot-brand b{ display: block; font-size: 20px; letter-spacing: -0.02em; }
.foot-brand span{ color: var(--fg-2); line-height: 1.45; display: block; margin-top: 4px; max-width: 34ch; }
.foot-links{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.foot-links div{ display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.foot-links b{ font-size: 14px; color: var(--fg-2); font-weight: 500; margin-bottom: 4px; }
.foot-links a{ color: var(--fg); }
.foot-links a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.foot-fine{ grid-column: 1 / -1; color: var(--fg-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 720px){ .site-foot{ grid-template-columns: minmax(0, 1fr); padding-bottom: 44px; } }

.doc{ max-width: 68ch; display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }
.doc h1{ font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.035em; }
.doc h2{ font-size: 21px; letter-spacing: -0.02em; margin-top: 18px; }
.doc p, .doc li{ font-size: 17px; line-height: 1.65; }
.doc ul{ padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.doc a{ color: var(--fg); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.doc .lead{ font-size: 21px; line-height: 1.5; letter-spacing: -0.01em; }
.doc .muted{ color: var(--fg-2); }

/* ---- home v5: the stage, tidied ---- */
.ask-set.changed{ background: var(--deep); color: var(--paper-lite); }
.stage{ position: relative; overflow: hidden; }
.stage::before, .stage::after{
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.stage::before{ width: 520px; height: 520px; left: -170px; bottom: -300px; background: var(--orange); opacity: .09; }
.stage::after{ width: 520px; height: 520px; left: 20px; bottom: -330px; background: var(--cream); opacity: .06; }
.stage > *{ position: relative; z-index: 1; }

.sample{ gap: 14px; background: #2E5654; box-shadow: 0 24px 50px -28px rgba(0,0,0,.55); }
.sample-head{ display: flex; gap: 14px; align-items: center; }
.sample-art{ flex: none; width: 58px; height: 58px; border-radius: 4px; overflow: hidden; display: block; }
.sample-art svg, .sample-art > *{ width: 100%; height: 100%; display: block; }
.sample-title{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sample-title b{ font-weight: 600; font-size: 17px; line-height: 1.25; }
.sample-title span{ font-size: 13px; opacity: .7; }
.sample-lines{ gap: 4px; }
.sample-lines p{ display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 9px 10px; border-radius: 6px; font-size: 15.5px; line-height: 1.45; opacity: .55; transition: opacity 400ms ease, background 400ms ease; }
.sample-lines p.is-live{ opacity: 1; background: rgba(242,230,226,.09); }
.sample-lines .over{ margin-left: 0; }
.sample-lines time{ font-size: 12px; opacity: .6; padding-top: 3px; font-variant-numeric: tabular-nums; }
.av{ display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-weight: 600; font-size: 13px; color: var(--deep); }
.av.a1{ background: var(--orange); }
.av.a2{ background: var(--cream); }
.sample .duet{ height: 56px; }
.sample-bar{ height: 3px; border-radius: 3px; background: rgba(242,230,226,.18); overflow: hidden; }
.sample-bar i{ display: block; height: 100%; width: 38%; background: var(--orange); animation: sbar 8s linear infinite; }
@keyframes sbar{ from{ width: 4%; } to{ width: 96%; } }
@media (prefers-reduced-motion: reduce){ .sample-bar i{ animation: none; } }

/* ============================================================
   v6: the player grows up — glass, queue, transcript, devices
   ============================================================ */
.player{
  background: rgba(246,237,232,0.58);
  backdrop-filter: blur(26px) saturate(1.8);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 22px 50px -18px var(--shadow), 0 2px 8px -2px rgba(35,64,66,0.16), inset 0 0 0 1px rgba(255,255,255,0.35);
  transform-origin: 50% 100%;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), background 260ms linear, padding 260ms var(--ease);
}
@media (hover: hover){
  .player:hover{
    transform: translateY(-3px) scale(1.012);
    background: rgba(246,237,232,0.7);
    box-shadow: 0 30px 60px -18px var(--shadow), 0 2px 10px -2px rgba(35,64,66,0.2), inset 0 0 0 1px rgba(255,255,255,0.45);
  }
}
.tbtn--sm{ width: 34px; height: 34px; }
.tbtn--sm svg{ width: 15px; height: 15px; }
.tools{ display: flex; align-items: center; gap: 2px; flex: none; margin-left: 6px; }
.tool{
  position: relative; width: 34px; height: 34px; border: 0; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; background: none; color: var(--fg-2);
  transition: background 120ms linear, color 120ms linear;
}
.tool svg{ width: 19px; height: 19px; }
.tool:hover{ background: rgba(35,64,66,0.1); color: var(--fg); }
.tool[aria-pressed="true"], .tool[aria-expanded="true"]{ color: var(--deep); background: rgba(239,183,142,0.55); }
.qcount{ position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--deep); color: var(--paper-lite); font-size: 10px; line-height: 15px; font-weight: 600; text-align: center; }
.qcount[hidden]{ display: none; }

/* hover labels */
.hint{
  position: fixed; z-index: 400; pointer-events: none; max-width: 240px;
  padding: 6px 10px; border-radius: 6px; font-size: 13px; line-height: 1.3; font-weight: 500;
  background: rgba(35,64,66,0.92); color: var(--paper-lite);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(3px); transition: opacity 140ms linear, transform 140ms var(--ease);
}
.hint.on{ opacity: 1; transform: none; }
@media (hover: none){ .hint{ display: none; } }

.toast{
  position: fixed; z-index: 300; left: 50%; bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 8px; font-weight: 500; font-size: 15px;
  background: rgba(35,64,66,0.88); color: var(--paper-lite);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: opacity 180ms linear, transform 220ms var(--ease);
}
.toast.on{ opacity: 1; transform: translate(-50%, 0); }

/* add to queue on every cover */
.card .qadd{
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--deep);
  background: rgba(255,248,245,0.6); backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5);
  opacity: 0; transform: translateY(-4px); transition: opacity 160ms linear, transform 220ms var(--ease), background 120ms linear;
}
.card .qadd svg{ width: 15px; height: 15px; }
.card:hover .qadd, .card .qadd:focus-visible{ opacity: 1; transform: none; }
.card .qadd:hover{ background: rgba(255,248,245,0.94); }
@media (hover: none){ .card .qadd{ opacity: 1; transform: none; } }

/* side panels */
.side{
  position: fixed; z-index: 70; display: flex; flex-direction: column;
  background: rgba(246,237,232,0.82); color: var(--fg);
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 30px 70px -24px rgba(20,38,40,0.55), inset 0 0 0 1px rgba(255,255,255,0.4);
  border-radius: 14px;
  animation: sideIn 240ms var(--ease) both;
}
.side[hidden]{ display: none; }
.side--queue{ right: 20px; top: 20px; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 40px)); }
.side--words{ left: 12px; top: 12px; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); width: min(420px, calc(100vw - 24px)); background: rgba(35,64,66,0.9); color: var(--cream); animation-name: sideInL; }
@keyframes sideIn{ from{ opacity: 0; transform: translateX(16px); } to{ opacity: 1; transform: none; } }
@keyframes sideInL{ from{ opacity: 0; transform: translateX(-16px); } to{ opacity: 1; transform: none; } }
.side-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 10px 20px; }
.side-head b{ font-size: 19px; letter-spacing: -0.02em; display: block; }
.side-sub{ display: block; font-size: 13.5px; opacity: .7; margin-top: 2px; line-height: 1.3; }
.side-x{ flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; cursor: pointer; display: grid; place-items: center; background: rgba(35,64,66,0.08); color: inherit; }
.side-x svg{ width: 16px; height: 16px; }
.side-x:hover{ background: var(--orange); color: var(--deep); }
.side--words .side-x{ background: rgba(242,230,226,0.12); }
.side-body{ flex: 1; overflow: auto; padding: 4px 12px 18px; }
.side-label{ font-size: 13px; font-weight: 600; color: var(--fg-2); margin: 14px 8px 6px; }
.side-label-row{ display: flex; align-items: baseline; justify-content: space-between; padding-right: 8px; }
.side-empty{ padding: 6px 8px 10px; color: var(--fg-2); line-height: 1.5; font-size: 15px; }
.side--words .side-empty{ color: rgba(242,230,226,0.75); }
.kbd{ display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(35,64,66,0.12); font-weight: 600; }
.qrow{ display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.qrow:hover{ background: rgba(35,64,66,0.07); }
.qrow.is-now{ cursor: default; background: rgba(239,183,142,0.35); }
.qart{ flex: none; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; }
.qart svg{ display: block; width: 100%; height: 100%; }
.qtxt{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.qtxt b{ font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtxt span{ font-size: 13px; color: var(--fg-2); }
.qx{ flex: none; width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--fg-2); display: grid; place-items: center; opacity: 0; }
.qx svg{ width: 14px; height: 14px; }
.qrow:hover .qx, .qx:focus-visible{ opacity: 1; }
.qx:hover{ background: rgba(35,64,66,0.12); color: var(--fg); }
@media (hover: none){ .qx{ opacity: 1; } }

.words{ padding: 4px 16px 30vh 20px; scroll-behavior: smooth; }
.wl{ font-size: 18px; line-height: 1.5; padding: 7px 0; color: rgba(242,230,226,0.42); cursor: pointer; transition: color 260ms linear; letter-spacing: -0.005em; }
.wl:hover{ color: rgba(242,230,226,0.75); }
.wl.on{ color: var(--cream); }
.wl .who{ display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 1px; color: var(--orange); opacity: .9; }
.wl .who.s1{ color: #BFD9D3; } .wl .who.s2{ color: #F4D7A6; } .wl .who.s3{ color: #E8B9C4; }

/* devices */
.devpop{
  position: fixed; z-index: 75; width: 290px; padding: 12px; border-radius: 12px;
  background: rgba(246,237,232,0.88); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 24px 60px -20px rgba(20,38,40,0.55), inset 0 0 0 1px rgba(255,255,255,0.45);
  display: flex; flex-direction: column; gap: 4px;
}
.devpop[hidden]{ display: none; }
.dev-now{ display: flex; align-items: center; gap: 9px; padding: 6px 8px 10px; font-size: 15px; }
.dev-dot{ width: 8px; height: 8px; border-radius: 50%; background: #3FA36B; box-shadow: 0 0 0 4px rgba(63,163,107,0.18); }
.dev-opt{ border: 0; background: none; text-align: left; padding: 10px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--fg); }
.dev-opt:hover{ background: rgba(35,64,66,0.08); }
.dev-note{ font-size: 13px; line-height: 1.45; color: var(--fg-2); padding: 8px 8px 4px; }

/* cover choice on publish */
.cover-pick{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cover-opts{ display: flex; gap: 12px; flex-wrap: wrap; }
.cover-opt{ border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font: inherit; color: var(--fg-2); font-size: 14px; }
.cover-opt .art{ width: 104px; height: 104px; border-radius: 8px; overflow: hidden; display: block; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color 120ms linear, transform 200ms var(--ease); }
.cover-opt .art svg{ width: 100%; height: 100%; display: block; }
.cover-opt:hover .art{ transform: translateY(-2px); }
.cover-opt[aria-pressed="true"] .art{ outline-color: var(--deep); }
.cover-opt[aria-pressed="true"]{ color: var(--fg); font-weight: 600; }

@media (max-width: 760px){
  .tools .rate{ display: none; }
  .tbtn#p-back, .tbtn#p-fwd{ display: none; }
  .side--queue, .side--words{ left: 8px; right: 8px; width: auto; top: 8px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
:root[data-theme="dark"] .player, :root[data-theme="dark"] .side--queue, :root[data-theme="dark"] .devpop{ background: rgba(24,44,45,0.66); box-shadow: 0 22px 50px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,0.08); }
:root[data-theme="dark"] .tool:hover, :root[data-theme="dark"] .qrow:hover, :root[data-theme="dark"] .dev-opt:hover{ background: rgba(242,230,226,0.1); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .player, :root:not([data-theme="light"]) .side--queue, :root:not([data-theme="light"]) .devpop{ background: rgba(24,44,45,0.66); box-shadow: 0 22px 50px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,0.08); }
  :root:not([data-theme="light"]) .tool:hover, :root:not([data-theme="light"]) .qrow:hover, :root:not([data-theme="light"]) .dev-opt:hover{ background: rgba(242,230,226,0.1); }
}

/* ---- the top bar ---- */
.topbar{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  margin: -36px calc(-1 * max(38px, env(safe-area-inset-right, 0px))) -18px calc(-1 * max(38px, env(safe-area-inset-left, 0px)));
  padding: 14px max(38px, env(safe-area-inset-right, 0px)) 14px max(38px, env(safe-area-inset-left, 0px));
  background: rgba(242,230,226,0.78);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(35,64,66,0.13);
}
.tb-nav{ display: flex; gap: 6px; flex: none; }
.tb-arrow{ width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: rgba(35,64,66,0.08); color: var(--fg); }
.tb-arrow svg{ width: 17px; height: 17px; }
.tb-arrow:hover{ background: rgba(35,64,66,0.16); }
.tb-search{ max-width: 460px; padding: 9px 16px; border-radius: 8px; background: rgba(255,248,245,0.75); }
.tb-search input{ font-size: 15px; }
.tb-gap{ flex: 1; }
.tb-make{
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border-radius: 8px; font-weight: 600; font-size: 15px;
  background: var(--deep); color: var(--paper-lite); transition: background 120ms linear;
}
.tb-make svg{ width: 17px; height: 17px; }
.tb-make:hover{ background: var(--teal); }
:root[data-theme="dark"] .topbar{ background: rgba(24,44,45,0.8); box-shadow: 0 1px 0 rgba(242,230,226,0.1); }
:root[data-theme="dark"] .tb-search{ background: rgba(242,230,226,0.08); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .topbar{ background: rgba(24,44,45,0.8); box-shadow: 0 1px 0 rgba(242,230,226,0.1); }
  :root:not([data-theme="light"]) .tb-search{ background: rgba(242,230,226,0.08); }
}
@media (max-width: 760px){
  .tb-nav{ display: none; }
  .tb-make span{ display: none; }
  .tb-make{ padding: 9px 10px; }
}

/* ---- the settings nudge ---- */
.stage .ask{ position: relative; }
.ask-bubble{
  position: absolute; right: 118px; bottom: calc(100% + 12px); z-index: 3;
  padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  color: var(--cream);
  background: rgba(242,230,226,0.14);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(242,230,226,0.22), 0 14px 30px -16px rgba(0,0,0,0.5);
  animation: bubbleIn 320ms var(--ease) both;
  pointer-events: none;
}
.ask-bubble::after{
  content: ""; position: absolute; right: 34px; top: 100%;
  border: 7px solid transparent; border-top-color: rgba(242,230,226,0.2);
}
.ask-bubble[hidden]{ display: none; }
@keyframes bubbleIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@media (max-width: 640px){ .ask-bubble{ right: auto; left: 0; white-space: normal; max-width: 260px; } .ask-bubble::after{ right: auto; left: 30px; } }

.sample{ transition: opacity 260ms linear; }
.sample.swap .sample-lines, .sample.swap .sample-head{ opacity: 0; transform: translateY(4px); }
.sample-lines, .sample-head{ transition: opacity 260ms linear, transform 260ms var(--ease); }
@media (max-width: 760px){
  .topbar{
    margin: -26px calc(-1 * max(16px, env(safe-area-inset-right, 0px))) -14px calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    position: relative;
  }
}
@media (max-width: 640px){
  .stage .ask{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; gap: 10px; width: 100%; }
  .stage .ask textarea{ grid-column: 1 / -1; padding: 4px 6px; min-height: 64px; width: 100%; }
  .stage .ask .ask-set{ justify-content: center; }
  .stage .ask .ask-set span{ display: inline; }
  .stage-ask{ align-items: stretch; }
}
@media (max-width: 640px){
  .ask-bubble{ bottom: auto; top: calc(100% + 10px); left: 12px; }
  .ask-bubble::after{ top: auto; bottom: 100%; left: 40px; border-top-color: transparent; border-bottom-color: rgba(242,230,226,0.2); }
}

/* ============================================================
   browse, done like a record shop
   ============================================================ */
.bsearch{
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 760px;
  padding: 16px 20px; border-radius: 10px; background: var(--paper-lite);
  box-shadow: 0 12px 30px -20px rgba(35,64,66,0.45);
}
.bsearch:focus-within{ outline: 2.5px solid var(--teal); outline-offset: 2px; }
.bsearch svg{ width: 22px; height: 22px; flex: none; color: var(--fg-2); }
.bsearch input{ flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 20px; letter-spacing: -0.01em; }
.bsearch input::placeholder{ color: var(--fg-2); }
.bclear{ border: 0; background: var(--bg-2); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; color: var(--fg); }
.bclear[hidden]{ display: none; }
#b-home{ display: flex; flex-direction: column; gap: 44px; }
#b-home[hidden], #b-results[hidden]{ display: none; }
#b-results{ display: flex; flex-direction: column; gap: 20px; }

.hot{ position: relative; overflow: hidden; border-radius: 12px; min-height: 340px; background: var(--deep); color: var(--paper-lite); isolation: isolate; }
.hot-bg{ position: absolute; inset: -40px; z-index: -1; filter: blur(42px) saturate(1.3) brightness(.62); transform: scale(1.15); }
.hot-bg svg{ width: 100%; height: 100%; display: block; }
.hot-in{ position: relative; display: grid; grid-template-columns: minmax(180px, 290px) minmax(0, 1fr); gap: 36px; align-items: end; padding: 36px; }
.hot-art{ display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); transform: rotate(-2.5deg); transition: transform 360ms var(--ease); }
.hot-art:hover{ transform: rotate(0) scale(1.02); }
.hot-art svg{ width: 100%; height: 100%; display: block; }
.hot-txt{ display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.hot-k{ font-size: clamp(40px, 6.4vw, 86px); line-height: .9; font-weight: 800; letter-spacing: -0.045em; text-transform: uppercase; color: var(--orange); transform: skewY(-3deg); transform-origin: left; max-width: 9ch; }
.hot-t{ font-size: clamp(20px, 2.3vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; max-width: 26ch; }
.hot-t:hover{ text-decoration: underline; text-underline-offset: 4px; }
.hot-d{ max-width: 52ch; opacity: .82; line-height: 1.5; }
.hot-act{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.hot-q{ background: rgba(242,230,226,0.16); color: var(--paper-lite); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hot-q:hover{ background: rgba(242,230,226,0.28); }
.hot-sticker{ position: absolute; top: 18px; right: 22px; width: 118px; height: 118px; display: grid; place-items: center; color: var(--deep); }
.hot-sticker svg{ position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.hot-sticker svg text{ fill: var(--paper-lite); font-family: var(--font); }
.hot-sticker b{ width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); font-size: 24px; font-weight: 800; letter-spacing: -0.04em; transform: rotate(-8deg); }
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .hot-sticker svg{ animation: none; } }
@media (max-width: 760px){
  .hot-in{ grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 22px; }
  .hot-art{ max-width: 220px; }
  .hot-sticker{ width: 92px; height: 92px; top: 12px; right: 12px; }
  .hot-sticker b{ width: 48px; height: 48px; font-size: 19px; }
}

.row--big{ grid-auto-columns: 230px; }
.card--idea .art{ outline: 2px dashed rgba(35,64,66,0.22); outline-offset: -2px; }
.idea-go{
  position: absolute; left: 10px; bottom: 10px; padding: 7px 12px; border-radius: 6px; font-size: 14px; font-weight: 600;
  background: var(--deep); color: var(--paper-lite); opacity: 0; transform: translateY(4px); transition: opacity 160ms linear, transform 220ms var(--ease);
}
.card--idea:hover .idea-go{ opacity: 1; transform: none; }
@media (hover: none){ .idea-go{ opacity: 1; transform: none; } }

.tiles{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.gtile{
  position: relative; overflow: hidden; height: 112px; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  padding: 14px 16px; background: var(--tc); color: #FFF8F2; font: inherit; font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
  transition: transform 200ms var(--ease);
}
.gtile:hover{ transform: translateY(-3px); }
.gtile > span:first-child{ position: relative; z-index: 1; }
.gtile-art{ position: absolute; right: -16px; bottom: -14px; width: 84px; height: 84px; border-radius: 6px; overflow: hidden; transform: rotate(22deg); box-shadow: 0 10px 22px -10px rgba(0,0,0,.5); }
.gtile-art svg{ width: 100%; height: 100%; display: block; }

.makeit{ display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 28px; border-radius: 12px; background: var(--deep); color: var(--paper-lite); }
.makeit p{ font-size: 19px; line-height: 1.4; max-width: 48ch; }
.makeit:empty{ display: none; }

/* ---- the gum tree and the promise ---- */
.foot-earth{
  grid-column: 1 / -1; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 26px 28px; border-radius: 12px; background: rgba(110,138,92,0.12);
}
.foot-tree{ display: block; }
.gum{ width: 100%; height: auto; display: block; }
.foot-earth b{ display: block; font-size: 19px; letter-spacing: -0.02em; margin-bottom: 8px; }
.foot-earth p{ color: var(--fg-2); line-height: 1.6; max-width: 70ch; }
.foot-earth p + p{ margin-top: 10px; }
@media (max-width: 720px){ .foot-earth{ grid-template-columns: minmax(0, 1fr); padding: 20px; } .foot-tree{ max-width: 180px; } }

/* ---- top bar, take two: home, a search that looks like a search, your library ---- */
.topbar{ gap: 12px; }
.tb-home, .tb-lib{
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(35,64,66,0.08); color: var(--fg); transition: background 120ms linear, transform 160ms var(--ease);
}
.tb-home svg, .tb-lib svg{ width: 20px; height: 20px; }
.tb-home:hover, .tb-lib:hover{ background: rgba(35,64,66,0.16); transform: scale(1.04); }
.tb-search{
  flex: 1 1 auto; max-width: 520px; display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 6px 0 16px; border-radius: 23px;
  background: var(--paper-lite); box-shadow: inset 0 0 0 1px rgba(35,64,66,0.1);
  transition: box-shadow 140ms linear;
}
.tb-search:hover{ box-shadow: inset 0 0 0 1px rgba(35,64,66,0.24); }
.tb-search:focus-within{ box-shadow: inset 0 0 0 2px var(--teal); outline: none; }
.tb-ico svg{ width: 19px; height: 19px; color: var(--fg-2); display: block; }
.tb-search input{ flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 15.5px; }
.tb-search input::placeholder{ color: var(--fg-2); }
.tb-browse{
  flex: none; height: 34px; padding: 0 12px 0 14px; display: grid; place-items: center; color: var(--fg-2);
  box-shadow: -1px 0 0 rgba(35,64,66,0.16); border-radius: 0 17px 17px 0; transition: color 120ms linear;
}
.tb-browse svg{ width: 19px; height: 19px; }
.tb-browse:hover{ color: var(--fg); }
.tb-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.tb-make{ margin-left: 0; border-radius: 23px; height: 42px; }
:root[data-theme="dark"] .tb-search{ background: rgba(242,230,226,0.08); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tb-search{ background: rgba(242,230,226,0.08); } }
@media (max-width: 760px){
  .tb-home{ display: none; }
  .tb-search{ height: 42px; }
  .tb-browse{ display: none; }
}

/* ---- your podcasts ---- */
.rail-head{ display: flex; align-items: baseline; justify-content: space-between; padding-inline: 12px; font-size: 14px; font-weight: 600; color: var(--rail-fg-2); }
.rail-head span{ font-weight: 500; font-size: 13px; opacity: .8; }
.rail-head:hover{ color: var(--rail-fg); }
.lib-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lib-head h1{ font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.035em; }
.lib-head .muted{ margin-top: 4px; }
.lib-actions{ display: flex; gap: 10px; }
.lib-actions [hidden]{ display: none; }
.lib-tools{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: -18px; }
.lib-find{ display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 21px; background: var(--paper-lite); box-shadow: inset 0 0 0 1px rgba(35,64,66,0.1); flex: 1 1 220px; max-width: 320px; }
.lib-find svg{ width: 18px; height: 18px; color: var(--fg-2); flex: none; }
.lib-find input{ border: 0; outline: none; background: none; width: 100%; font-size: 15px; }
.lib-find:focus-within{ box-shadow: inset 0 0 0 2px var(--teal); }
.lib-sort{ display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 14px; }
.lib-sort .pick{ padding: 9px 14px; }
.lib-view{ margin-left: auto; }
.lib-view button{ padding: 8px 10px; display: grid; place-items: center; }
.lib-view svg{ width: 18px; height: 18px; }
.lib-list--list{ display: flex; flex-direction: column; gap: 4px; }
.lib-list--grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 28px 18px; }
.lib-group{ font-weight: 600; font-size: 14px; color: var(--fg-2); margin: 18px 10px 6px; }
.lrow{ display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 10px; transition: background 120ms linear, opacity 180ms linear, transform 180ms var(--ease); }
.lrow:hover{ background: rgba(35,64,66,0.06); }
.lrow.going{ opacity: 0; transform: translateX(10px); }
.lart{ position: relative; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 7px; overflow: hidden; cursor: pointer; background: var(--bg-2); }
.lart svg{ width: 100%; height: 100%; display: block; }
.lplay{ position: absolute; inset: 0; display: grid; place-items: center; background: rgba(35,64,66,0.45); color: var(--paper-lite); opacity: 0; transition: opacity 140ms linear; }
.lplay svg{ width: 20px; height: 20px; }
.lrow:hover .lplay, .lart:focus-visible .lplay{ opacity: 1; }
.ltxt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ltxt b{ font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltxt span{ font-size: 13.5px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpub{ font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--orange); color: var(--deep); vertical-align: 2px; margin-left: 4px; }
.lbtns{ display: flex; gap: 4px; flex: none; }
.lbtn{ width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: none; color: var(--fg-2); opacity: .55; transition: opacity 120ms linear, background 120ms linear; }
.lbtn svg{ width: 16px; height: 16px; }
.lrow:hover .lbtn{ opacity: 1; }
.lbtn:hover{ background: rgba(35,64,66,0.1); color: var(--fg); }
.lmaking{ display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--teal); padding-right: 6px; }
.lmaking i{ width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dots 1.2s infinite ease-in-out; }
.lmaking i:nth-child(2){ animation-delay: .15s; } .lmaking i:nth-child(3){ animation-delay: .3s; }
@keyframes dots{ 0%, 80%, 100%{ opacity: .25; } 40%{ opacity: 1; } }
.lib-empty{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; border-radius: 12px; background: var(--bg-2); }
.lib-empty p{ font-size: 18px; max-width: 46ch; line-height: 1.45; }
@media (hover: none){ .lbtn{ opacity: 1; } }
@media (max-width: 640px){ .lib-view{ margin-left: 0; } .lib-tools{ margin-top: -10px; } }

/* ---- where it plays, take two ---- */
.devpop{ width: 300px; padding: 10px; gap: 2px; border-radius: 14px; }
.dev-h{ font-size: 13px; font-weight: 600; color: var(--fg-2); padding: 6px 10px 6px; }
.dev-row{ display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--fg); }
button.dev-row:hover{ background: rgba(35,64,66,0.08); }
.dev-row.is-on{ background: rgba(239,183,142,0.42); cursor: default; }
.dev-ic{ flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: rgba(35,64,66,0.08); }
.dev-row.is-on .dev-ic{ background: var(--deep); color: var(--paper-lite); }
.dev-ic svg{ width: 19px; height: 19px; }
.dev-tx{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dev-tx b{ font-weight: 600; font-size: 15px; }
.dev-tx span{ font-size: 13px; color: var(--fg-2); }
.dev-eq{ display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.dev-eq i{ width: 3px; height: 40%; border-radius: 2px; background: var(--deep); animation: bar 800ms var(--ease) infinite alternate; }
.dev-eq i:nth-child(2){ animation-delay: 160ms; } .dev-eq i:nth-child(3){ animation-delay: 320ms; }
.dev-note{ display: flex; gap: 8px; align-items: flex-start; padding: 10px 10px 4px; font-size: 12.5px; line-height: 1.4; color: var(--fg-2); }
.dev-note svg{ width: 15px; height: 15px; flex: none; margin-top: 1px; }
.dev-now, .dev-opt, .dev-dot{ display: none; }

/* ---- genre tiles: our own drawings, flat and square-on ---- */
.gtile{ height: 118px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1px; padding: 16px 18px; border-radius: 12px; }
.gt-big{ position: absolute; bottom: -0.34em; right: 0.02em; z-index: 0; font-size: 120px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: #FFF8F2; opacity: 0.14; transition: transform 320ms var(--ease), opacity 200ms linear; }
.gtile:hover .gt-big{ transform: translateY(-4px); opacity: 0.2; }
.gt-name{ position: relative; z-index: 1; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.gt-n{ position: relative; z-index: 1; font-size: 13px; font-weight: 500; opacity: .78; }
.gtile::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.14), transparent 60%); }

/* ---- being made: a warm line, a soft meter, the people ---- */
.booth2{ display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px 26px; align-items: center; padding: 28px; border-radius: 14px; background: var(--deep); color: var(--cream); }
.b2-anim{ position: relative; width: 92px; height: 60px; }
.b2-anim span{ position: absolute; top: 0; width: 60px; height: 60px; border-radius: 50%; }
.b2-a{ left: 0; background: var(--orange); animation: b2a 2.4s ease-in-out infinite; }
.b2-b{ left: 32px; background: var(--teal); mix-blend-mode: screen; animation: b2b 2.4s ease-in-out infinite; }
@keyframes b2a{ 50%{ transform: translateX(6px) scale(.94); } }
@keyframes b2b{ 50%{ transform: translateX(-6px) scale(1.06); } }
.b2-body{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.b2-line{ font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; transition: opacity 220ms linear, transform 220ms var(--ease); }
.b2-line.swap{ opacity: 0; transform: translateY(5px); }
.b2-meter{ height: 4px; border-radius: 4px; background: rgba(242,230,226,0.16); overflow: hidden; max-width: 520px; }
.b2-meter span{ display: block; height: 100%; width: 3%; border-radius: 4px; background: var(--orange); transition: width 900ms var(--ease); }
.b2-eta{ font-size: 14px; opacity: .7; min-height: 1.2em; }
.booth2 .guests{ grid-column: 1 / -1; }
.booth2 .quiet{ grid-column: 1 / -1; font-size: 13.5px; color: var(--cream); opacity: .6; }
@media (prefers-reduced-motion: reduce){ .b2-a, .b2-b{ animation: none; } }
@media (max-width: 640px){ .booth2{ grid-template-columns: minmax(0, 1fr); padding: 22px; } }

.guests{ display: flex; flex-wrap: wrap; gap: 12px; }
.guest{ display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 12px; background: rgba(242,230,226,0.08); min-width: 0; max-width: 100%; }
.cast-list .guest{ background: var(--bg-2); }
.g-av{ flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 19px; color: var(--deep); }
.g-av.g0{ background: var(--orange); } .g-av.g1{ background: #BFD9D3; } .g-av.g2{ background: #F4D7A6; } .g-av.g3{ background: #E8B9C4; }
.g-tx{ display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.g-tx b{ font-weight: 600; font-size: 16px; }
.g-role{ font-size: 14px; opacity: .78; }
.g-meta{ font-size: 13px; color: var(--fg-2); }
.g-block{ font-size: 13px; margin-left: 6px; }

/* ---- series ---- */
.ser{ width: min(640px, 100%); }
.ser-wait{ display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 36px 0 30px; font-size: 19px; font-weight: 600; }
.ser-wait .b2-anim{ display: block; }
.ser-title{ font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.ser-premise{ color: var(--fg-2); line-height: 1.5; margin-top: 4px; }
.ser-eps{ list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 4px; }
.ser-eps li{ display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; }
.ser-eps li:nth-child(odd){ background: rgba(35,64,66,0.05); }
.ser-eps li.is-here{ background: rgba(239,183,142,0.38); }
.ser-n{ flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--paper-lite); font-weight: 700; font-size: 14px; }
.ser-eps li > span:nth-child(2){ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.ser-eps b{ font-weight: 600; }
.ser-eps b a{ text-decoration: underline; text-underline-offset: 3px; }
.ser-eps li > span:nth-child(2) > span{ font-size: 14px; color: var(--fg-2); }
.ser-make{ flex: none; padding: 10px 16px; font-size: 14px; }
.ser-more{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; color: var(--fg-2); font-size: 14px; }
.ser-more .seg button{ padding: 7px 12px; }
.sheet-foot{ gap: 10px; }
.series-box{ padding: 22px 24px; border-radius: 14px; background: var(--bg-2); }
.ser-head{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ser-k{ font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 5px; background: var(--deep); color: var(--paper-lite); }
.ser-head b{ font-size: 20px; letter-spacing: -0.02em; }
.ser-of{ color: var(--fg-2); font-size: 14px; }
[data-ctl="seriesn"][hidden]{ display: none; }
.ser-count{ margin-top: 10px; }

/* ---- footer, take three: a printed gum tree and the pledge ---- */

.pledge{ grid-column: 1 / -1; display: flex; gap: 20px; align-items: center; padding-top: 18px; margin-top: 4px; box-shadow: 0 -1px 0 rgba(35,64,66,0.1); }
.stamp{ flex: none; width: 96px; height: 96px; transform: rotate(-8deg); }
.pledge b{ display: block; font-size: 17px; letter-spacing: -0.015em; margin-bottom: 4px; }
.pledge p{ color: var(--fg-2); line-height: 1.55; max-width: 70ch; font-size: 15px; }
@media (max-width: 720px){ .pledge{ flex-direction: column; align-items: flex-start; } }

/* ---- the series, laid out like the back of a record ---- */
.sp-top{ display: flex; gap: 20px; align-items: center; }
.sp-art{ flex: none; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 34px -18px rgba(20,38,40,.6); }
.sp-art svg{ width: 100%; height: 100%; display: block; }
.sp-title{ font-size: 26px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.sp-premise{ color: var(--fg-2); line-height: 1.5; margin-top: 6px; max-width: 52ch; }
.sp-count{ font-size: 13.5px; color: var(--fg-2); margin-top: 8px; font-variant-numeric: tabular-nums; }
.tracks{ list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; }
.tracks li{ display: flex; align-items: baseline; gap: 18px; padding: 12px 4px; }
.tracks li + li{ box-shadow: 0 -1px 0 rgba(35,64,66,0.09); }
.tracks li.is-here .tr-t b{ color: var(--teal); }
.tr-n{ flex: none; width: 30px; font-size: 22px; font-weight: 300; letter-spacing: -0.02em; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tr-t{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.35; }
.tr-t b{ font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.tr-t b a{ text-decoration: underline; text-underline-offset: 3px; }
.tr-t > span{ font-size: 14.5px; color: var(--fg-2); }
.tracks .ser-make{ align-self: center; }
.sp-tweak{ margin-top: 20px; padding: 16px; border-radius: 12px; background: rgba(35,64,66,0.05); display: flex; flex-direction: column; gap: 10px; }
.sp-tweak label{ font-weight: 600; font-size: 15px; }
.sp-tweak textarea{ border: 0; outline: none; resize: vertical; min-height: 54px; padding: 10px 12px; border-radius: 8px; background: var(--paper-lite); font: inherit; font-size: 15px; line-height: 1.4; color: var(--fg); }
.sp-tweak textarea:focus{ box-shadow: inset 0 0 0 2px var(--teal); }
.sp-tweak-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-n button{ padding: 7px 12px; }
.series-box .sp-art{ width: 96px; height: 96px; }
.series-box .sp-title{ font-size: 22px; }
@media (max-width: 560px){ .sp-top{ flex-direction: column; align-items: flex-start; } }

/* ---- hello ---- */
.stage .hello{ font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: var(--orange); max-width: 18ch; }
.stage h1{ font-size: 19px; opacity: .9; }

/* ---- the day's shelf and the week's games ---- */
.day-head{ display: flex; align-items: center; gap: 18px; }
.day-badge{ flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--dc); color: #FFF8F2; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; transform: rotate(-8deg); box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); }
.day-head h2{ font-size: 26px; letter-spacing: -0.03em; }
.day-head p{ color: var(--fg-2); margin-top: 2px; }
.day-shelf .row{ margin-top: 4px; }
.funrow{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.dinner, .spin{ position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px; border-radius: 14px; }
.dinner{ background: var(--orange); color: var(--deep); }
.dinner::after{ content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.22); }
.spin{ background: var(--teal); color: var(--paper-lite); }
.spin::after{ content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; border: 18px dotted rgba(255,255,255,.18); animation: spin 30s linear infinite; }
.fun-k{ font-weight: 700; font-size: 16px; position: relative; z-index: 1; }
.fun-q{ font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; max-width: 22ch; position: relative; z-index: 1; }
.fun-s{ opacity: .8; max-width: 42ch; line-height: 1.45; position: relative; z-index: 1; }
.dinner .btn, .spin .btn, .spin-act{ position: relative; z-index: 1; margin-top: 6px; }
.dinner .btn--accent{ background: var(--deep); color: var(--paper-lite); }
.spin-act{ display: flex; gap: 10px; flex-wrap: wrap; }
.spin-go{ background: var(--paper-lite); color: var(--deep); }
.spin-q.spinning{ opacity: .85; filter: blur(.4px); }
@media (max-width: 760px){ .funrow{ grid-template-columns: minmax(0, 1fr); } }

/* ---- the Make box: one question, room to type, and a plus for files ---- */
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.prompt2{ padding: 26px 26px 18px; gap: 10px; }
.prompt2 .p-ask{ font-size: clamp(26px, 3.1vw, 36px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; color: var(--fg); }
.prompt2 textarea{ font-size: 20px; line-height: 1.4; min-height: 96px; }
.p-foot{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.p-foot .tries{ margin-top: 0; }
.p-add{
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--deep); color: var(--paper-lite);
  transition: transform 160ms var(--ease), background 120ms linear;
}
.p-add:hover{ background: var(--teal); transform: rotate(90deg); }
.p-add svg{ width: 20px; height: 20px; }
.p-add input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.p-add:focus-within{ outline: 2.5px solid var(--teal); outline-offset: 3px; }
.p-files{ display: flex; flex-wrap: wrap; gap: 8px; }
.p-files[hidden]{ display: none; }
.p-file{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 8px; background: var(--paper-lite); font-size: 14px; max-width: 100%; }
.p-file b{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.p-file span{ color: var(--fg-2); white-space: nowrap; }
.p-file.busy span{ color: var(--teal); }
.p-file.bad span{ color: #B4452F; }
.p-file button{ border: 0; background: var(--bg-2); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; color: var(--fg); }
@media (max-width: 640px){ .p-foot{ flex-direction: column-reverse; align-items: flex-end; } }

/* ---- the week's games, less like cards and more like things ---- */
.dinner{ background: #3C6461; color: var(--deep); flex-direction: row; align-items: center; gap: 0; padding: 22px; min-height: 280px; }
.dinner::after{ display: none; }
.table{ position: absolute; left: -70px; top: 50%; width: 300px; height: 300px; transform: translateY(-50%); opacity: .55; }
.place{ position: relative; z-index: 1; margin-left: auto; width: min(100%, 470px); padding: 24px 26px 22px; border-radius: 6px; background: #FFF8F2; box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); transform: rotate(-1.5deg); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.place-fold{ position: absolute; left: 0; right: 0; top: 0; height: 14px; border-radius: 6px 6px 0 0; background: linear-gradient(#EFE3D8, #FFF8F2); }
.place .fun-q{ color: var(--deep); margin-top: 6px; }
.place .fun-s{ color: var(--fg-2); opacity: 1; }
.place .btn{ background: var(--deep); color: var(--paper-lite); }
.spin{ flex-direction: row; align-items: center; gap: 22px; }
.spin::after{ display: none; }
.wheel-wrap{ position: relative; flex: none; width: 150px; height: 150px; }
.wheel{ width: 100%; height: 100%; transition: transform 1.6s cubic-bezier(.15, .7, .1, 1); filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); }
.pointer{ position: absolute; left: 50%; top: -8px; width: 22px; height: 22px; transform: translateX(-50%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.spin-txt{ display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
@media (max-width: 760px){ .spin{ flex-direction: column; align-items: flex-start; } .table{ left: -110px; } }

/* ---- Explore: today's edition ---- */
.ex-head h1{ font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.04em; }
.ex-head p{ color: var(--fg-2); margin-top: 4px; }
.edition{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }
.ed-lead{ display: flex; gap: 22px; align-items: stretch; padding: 18px; border-radius: 14px; background: var(--deep); color: var(--cream); }
.ed-lead .ed-art{ flex: none; width: 46%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.ed-art svg{ width: 100%; height: 100%; display: block; }
.ed-body{ display: flex; flex-direction: column; gap: 12px; align-items: flex-start; justify-content: flex-end; min-width: 0; }
.ed-lead .ed-q{ font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
.ed-why{ display: inline-block; font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 5px; background: rgba(239,183,142,.22); color: var(--orange); }
.ed-rest{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ed-card{ display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ed-card .ed-art{ width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; transition: transform 300ms var(--ease); }
.ed-card:hover .ed-art{ transform: translateY(-3px); }
.ed-card .ed-why{ background: var(--bg-2); color: var(--fg-2); }
.ed-card .ed-q{ font-weight: 600; line-height: 1.3; }
@media (max-width: 900px){ .edition{ grid-template-columns: minmax(0, 1fr); } .ed-lead{ flex-direction: column; } .ed-lead .ed-art{ width: 100%; } }
.foot-earth a{ color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ed-lead{ align-items: center; }
.ed-lead .ed-art{ align-self: center; height: auto; }
.ed-rest{ grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
.ed-card{ display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 6px; align-items: start; padding: 10px; border-radius: 12px; transition: background 140ms linear; }
.ed-card:hover{ background: var(--bg-2); }
.ed-card .ed-art{ grid-row: 1 / span 2; width: 104px; height: 104px; aspect-ratio: auto; }
.ed-card .ed-why{ align-self: end; justify-self: start; }
.ed-card .ed-q{ font-size: 17px; }

/* credit for a real photo on a cover, small and out of the way */
.ed-lead{ position: relative; }
.ed-credit{ position: absolute; right: 12px; bottom: 8px; font-size: 10px; color: rgba(242,230,226,0.55); }

/* a real photo's credit, on a podcast's own page */
#s-art{ position: relative; }
.ph-credit{ position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: rgba(255,255,255,0.75); text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ph-credit:hover{ text-decoration: underline; }

/* the way in, on Explore: the panel at a little desk, one of them talking */
.ld-teaser{
  display: flex; align-items: center; gap: 20px;
  padding: 10px 18px 0 20px; border-radius: 18px; overflow: hidden;
  background: var(--ld-board); color: var(--cream); text-decoration: none; min-height: 96px;
}
.ldt-set{ position: relative; flex: none; align-self: flex-end; padding-top: 30px; }
.ldt-faces{ display: flex; gap: 6px; }
.ldt-faces img{ width: 54px; height: 54px; border-radius: 50%; display: block; margin-bottom: -10px; transition: transform .25s var(--ease); }
.ld-teaser:hover .ldt-faces img:nth-child(2){ transform: translateY(-5px) rotate(-2deg); }
.ldt-desk{ position: relative; display: block; height: 16px; margin: 0 -10px; background: var(--orange); box-shadow: inset 0 4px 0 #F4CAA9; }
.ldt-bub{
  position: absolute; left: 50%; top: 0; transform: translateX(-50%) rotate(-2deg); white-space: nowrap;
  background: var(--cream); color: var(--deep); font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 10px;
}
.ldt-bub::after{ content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--cream); }
.ldt-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; padding-bottom: 10px; }
.ldt-name{ font-weight: 700; font-size: 18px; }
.ldt-name span{ color: var(--orange); margin-left: 4px; }
.ldt-line{ font-size: 15px; color: rgba(242,230,226,0.8); }
.ldt-go{
  flex: none; margin-bottom: 10px; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; text-align: center; line-height: 1.05;
  background: var(--liar); color: var(--paper-lite); box-shadow: 0 5px 0 #8E3426; transition: transform .1s, box-shadow .1s;
}
.ld-teaser:hover .ldt-go{ transform: translateY(2px); box-shadow: 0 3px 0 #8E3426; }

/* ============================================================
   Lie Detector. Plain like the daily games people already play:
   the page itself, a row of faces at a desk, words appearing as
   they're said, one big button. No boxes, no badges.
   ============================================================ */
:root{ --liar: #D4553E; --ld-right: #3F8A7E; --ld-board: #507976; }

.pane--game{ gap: 16px; }
.ld{ width: 100%; max-width: 760px; margin: 26px auto 0; display: flex; flex-direction: column; }

.ld-head{ display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(35,64,66,0.16); }
.ld-title{ flex: 1; min-width: 0; }
.ld-title h1{ margin: 0; font-size: clamp(28px, 4.4vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.ld-title p{ margin: 6px 0 0; font-size: 14px; color: var(--fg-2); }
.ld-icons{ display: flex; gap: 2px; }
.ld-icons button{ width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--fg); cursor: pointer; display: grid; place-items: center; padding: 0; }
.ld-icons button:hover{ background: var(--bg-2); }
.ld-icons svg{ width: 22px; height: 22px; }
.ld-mute.is-off .ld-wave{ display: none; }
.ld-mute.is-off{ color: var(--fg-2); }

.ld-bar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; font-size: 15px; color: var(--fg-2); }
.ld-where{ display: inline-flex; align-items: center; gap: 10px; }
.ld-where .dots{ display: inline-flex; gap: 5px; }
.ld-where .dots i{ width: 11px; height: 11px; border-radius: 3px; background: rgba(35,64,66,0.15); }
.ld-where .dots i.is-now{ background: var(--fg); }
.ld-where .dots i.is-right{ background: var(--ld-right); }
.ld-where .dots i.is-wrong{ background: var(--liar); }
.ld-score{ display: inline-flex; align-items: baseline; gap: 5px; }
.ld-score b{ color: var(--fg); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.ld-score-k{ font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.ld-score-max{ font-size: 12.5px; color: var(--fg-2); }

/* the faces at the desk */
.ld-stage{ --face: clamp(104px, 19vw, 150px); --pt: 92px; position: relative; padding-top: var(--pt); margin-top: 4px; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ld-seats{ position: relative; display: flex; justify-content: space-around; }
.ld-seat{ position: relative; width: 33%; display: flex; flex-direction: column; align-items: center; }
.ld-face{ position: relative; width: var(--face); height: var(--face); border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; margin-bottom: -22px; z-index: 1; }
.ld-face img{ position: relative; width: 100%; height: 100%; display: block; border-radius: 50%; pointer-events: none; transform-origin: 50% 85%; will-change: transform; transition: filter .3s, opacity .3s; }
.ld-face:focus-visible{ outline: 3px solid var(--orange); outline-offset: 6px; }
.ld-ring{ position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); pointer-events: none; }
.ld-ring circle{ fill: none; stroke: var(--fg); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; }
.ld-name{ position: relative; z-index: 3; margin-top: 30px; font-weight: 800; font-size: 17px; color: var(--deep); }
.ld-desk{ position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--pt) + var(--face) - 22px); height: 62px; background: var(--orange); border-radius: 10px; pointer-events: none; }
.ld-listen{
  position: relative; z-index: 3; margin-top: 26px; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: var(--deep); color: var(--paper-lite); display: grid; place-items: center; transition: transform .1s, background .2s;
}
.ld-listen:active{ transform: scale(0.94); }
.ld-listen .i{ display: none; width: 24px; height: 24px; }
.ld-listen svg{ width: 24px; height: 24px; display: block; }
.ld-listen .i-play{ display: block; }
.ld-seat.is-heard .ld-listen{ background: var(--bg-2); color: var(--fg); }
.ld-seat.is-heard .ld-listen .i-play{ display: none; }
.ld-seat.is-heard .ld-listen .i-again{ display: block; }
.ld-seat.is-talking .ld-listen{ background: var(--liar); color: var(--paper-lite); }
.ld-seat.is-talking .ld-listen .i-play, .ld-seat.is-talking .ld-listen .i-again{ display: none; }
.ld-seat.is-talking .ld-listen .i-stop{ display: block; }
.ld-state{ margin-top: 6px; min-height: 18px; font-size: 13px; color: var(--fg-2); }
.ld-seat.is-heard .ld-state{ color: var(--ld-right); font-weight: 700; }
.ld-stage:not([data-state="listen"]) .ld-listen, .ld-stage:not([data-state="listen"]) .ld-state{ display: none; }
.ld-stage:not([data-state="listen"]) .ld-seat{ padding-bottom: 14px; }

/* bubbles */
.ld-bubble{
  position: absolute; left: 50%; top: -14px; z-index: 9;
  width: max-content; max-width: min(200px, 30vw);
  background: var(--paper-lite); color: var(--deep); border-radius: 16px;
  box-shadow: 0 1px 0 rgba(35,64,66,0.12), 0 6px 18px -8px rgba(35,64,66,0.35);
  font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center; text-wrap: balance;
  padding: 8px 12px 9px;
  transform: translate(-50%, -100%) scale(0.3); transform-origin: 50% 130%; opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.3,1.6,.6,1), opacity .12s;
}
.ld-bubble::after{ content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--paper-lite); transform: rotate(45deg); border-radius: 2px; }
.ld-bubble.is-on{ opacity: 1; transform: translate(-50%, -100%) rotate(var(--tilt, -2deg)) scale(1); }
.ld-seat:nth-child(2) .ld-bubble{ --tilt: 2deg; }
.ld-seat:nth-child(3) .ld-bubble{ --tilt: -1deg; }

/* picking */
.ld-stage[data-state="accuse"] .ld-face img{ animation: ld-wait 2.2s ease-in-out infinite; }
.ld-stage[data-state="accuse"] .ld-seat:nth-child(2) .ld-face img{ animation-delay: .25s; }
.ld-stage[data-state="accuse"] .ld-seat:nth-child(3) .ld-face img{ animation-delay: .5s; }
@keyframes ld-wait{ 0%, 70%, 100%{ filter: none; } 80%{ filter: brightness(1.06); } }
@media (hover: hover){ .ld-stage[data-state="accuse"] .ld-face:hover img{ box-shadow: 0 0 0 5px rgba(212,85,62,0.45); } }
.ld-stage[data-state="accuse"] .ld-seat.is-picked .ld-face img,
.ld-stage[data-state="suspense"] .ld-seat.is-picked .ld-face img{ box-shadow: 0 0 0 6px var(--liar); animation: none; }
.ld-stage[data-state="accuse"] .ld-seat:not(.is-picked) .ld-face img,
.ld-stage[data-state="suspense"] .ld-seat:not(.is-picked) .ld-face img{ opacity: 0.55; }
.ld-stage:has(.is-picked)[data-state="accuse"] .ld-seat:not(.is-picked) .ld-face img{ opacity: 0.55; }
.ld-stage[data-state="accuse"]:not(:has(.is-picked)) .ld-seat .ld-face img{ opacity: 1; }
.ld-stage[data-state="suspense"] .ld-seat.is-picked .ld-face{ animation: ld-shake .12s linear infinite; }
@keyframes ld-shake{ 25%{ transform: translateX(-2px); } 75%{ transform: translateX(2px); } }
.ld-seat.is-picked .ld-name{ color: var(--liar); }

/* chips bet on someone */
.ld-bet{ position: absolute; right: -6px; bottom: 6px; display: flex; flex-direction: column-reverse; z-index: 3; }
.ld-bet i, .ld-chip .stack i{
  display: block; width: 30px; height: 9px; border-radius: 50%; margin-top: -4px;
  background: var(--liar); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22), 0 0 0 1.5px var(--paper-lite);
}
.ld-bet i{ animation: ld-drop .28s cubic-bezier(.4,1.6,.6,1) both; }
.ld-bet i:nth-child(2){ animation-delay: .08s; } .ld-bet i:nth-child(3){ animation-delay: .16s; }
@keyframes ld-drop{ from{ transform: translateY(-40px); opacity: 0; } }

/* the answer */
.ld-stamp{
  position: absolute; left: 50%; top: 42%; z-index: 2;
  transform: translate(-50%, -50%) rotate(-13deg) scale(2.6); opacity: 0; pointer-events: none;
  background: var(--liar); color: var(--paper-lite);
  font: 800 clamp(15px, 2.4vw, 22px)/1 var(--font); text-transform: uppercase; letter-spacing: 0.16em;
  padding: 7px 10px 7px 14px; border-radius: 4px;
}
.ld-seat.is-liar .ld-stamp{ animation: ld-stamp .26s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes ld-stamp{ to{ opacity: 1; transform: translate(-50%, -50%) rotate(-13deg) scale(1); } }
.ld-seat.is-liar .ld-face img{ box-shadow: 0 0 0 6px var(--liar); opacity: 1; }
.ld-seat.is-liar .ld-name{ color: var(--liar); }
.ld-seat.is-true .ld-face img{ opacity: 0.8; }
.ld-confetti{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; }

/* the words, like subtitles: only what's been said so far */
.ld-sub{ min-height: 110px; padding: 22px 6px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ld-sub p{ margin: 0; }
.ld-who{ font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.ld-words{ font-size: clamp(19px, 2.6vw, 23px); line-height: 1.45; font-weight: 600; max-width: 34em; width: 100%; text-align: left; color: var(--fg); }
.ld-words span{ opacity: 0; transition: opacity .18s; }
.ld-words span.on{ opacity: 1; }
.ld-note{ font-size: 17px; line-height: 1.5; color: var(--fg-2); max-width: 32em; }
.ld-note b{ color: var(--fg); }
.ld-ask{ font-size: clamp(22px, 3.2vw, 28px); font-weight: 800; color: var(--fg); }
.ld-red{ color: var(--liar); }
.ld-pulse{ animation: ld-pulse 0.6s ease-in-out infinite alternate; }
@keyframes ld-pulse{ to{ opacity: 0.4; } }

/* the one big button */
.ld-cta{ display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: 6px; }
.ld-cta:empty{ display: none; }
.ld-go{
  --p: 0; width: min(100%, 360px); height: 58px; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--deep); color: var(--paper-lite); font: 700 19px/1 var(--font); transition: background .2s, transform .08s;
}
.ld-go:hover:not(:disabled){ background: var(--teal); }
.ld-go:active:not(:disabled){ transform: scale(0.98); }
.ld-go--red{ background: var(--liar); }
.ld-go--red:hover:not(:disabled){ background: #BF4733; }
.ld-go:disabled{ cursor: default; color: var(--fg-2); background: linear-gradient(90deg, rgba(35,64,66,0.16) calc(var(--p) * 100%), rgba(35,64,66,0.07) 0); }
.ld-link{ border: 0; background: none; padding: 0; color: var(--fg-2); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }
.ld-small{ margin: 0; font-size: 14px; color: var(--fg-2); }
.ld-verdict{ margin: 0; font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; }
.ld-verdict.is-right{ color: var(--ld-right); }
.ld-verdict.is-wrong{ color: var(--liar); }
.ld-truth{ margin: 0 0 4px; font-size: 16px; line-height: 1.5; max-width: 34em; color: var(--fg); }

.ld-chips{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ld-chip{
  width: 128px; padding: 16px 8px 12px; border: 0; border-radius: 16px; cursor: pointer; background: var(--bg-2); color: var(--fg);
  display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; transition: background .15s, transform .1s;
}
.ld-chip:hover{ background: var(--peach); }
.ld-chip:active{ transform: scale(0.97); }
.ld-chip .stack{ display: flex; flex-direction: column-reverse; height: 30px; justify-content: flex-start; margin-bottom: 4px; }
.ld-chip b{ font-size: 16px; font-weight: 800; }
.ld-chip small{ font-size: 12px; color: var(--fg-2); }

/* the end */
.ld-total{ display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.ld-total b{ font-size: clamp(56px, 9vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--fg); }
.ld-total span{ font-size: 18px; color: var(--fg-2); }
.ld-tiles{ display: flex; gap: 8px; justify-content: center; }
.ld-tiles i{ width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; }
.ld-tiles i.is-right{ background: var(--ld-right); }
.ld-tiles i.is-wrong{ background: var(--liar); }
.ld-crowd{ font-size: 16px; font-weight: 700; color: var(--fg); }
.ld-after{ display: flex; flex-direction: column; gap: 22px; padding-top: 30px; }
.ld-after:empty{ display: none; }
.ld-rank{ display: flex; flex-direction: column; gap: 8px; }
.ld-rank p{ margin: 0; }
.ld-rank p:first-child{ display: flex; align-items: baseline; gap: 10px; }
.ld-rank span{ font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--fg-2); }
.ld-rank b{ font-size: 22px; font-weight: 800; }
.ld-rank.is-up span{ color: var(--liar); }
.ld-meter{ height: 10px; border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.ld-meter i{ display: block; height: 100%; background: var(--orange); border-radius: 10px; transition: width .8s var(--ease); }
.ld-stats{ margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ld-stats div{ display: flex; flex-direction: column-reverse; align-items: center; }
.ld-stats dd{ margin: 0; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ld-stats dt{ font-size: 12px; color: var(--fg-2); text-align: center; }
.ld-h{ font-size: 20px; margin: 0 0 10px; }
.ld-dist{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 96px; margin: 12px 0 8px; align-items: end; }
.ld-dist div{ height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; }
.ld-dist i{ display: block; background: rgba(35,64,66,0.2); border-radius: 4px 4px 0 0; min-height: 3px; }
.ld-dist span{ font-size: 11px; color: var(--fg-2); text-align: center; }
.ld-dist .is-me i{ background: var(--orange); }
.ld-dist .is-me span{ color: var(--fg); font-weight: 800; }
.ld-tomorrow p{ margin: 0; font-size: 16px; }
.ld-tomorrow span{ font-weight: 800; margin-right: 6px; }
.ld-recap{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.ld-rt{ margin: 0 0 8px; font-weight: 700; font-size: 17px; }
.ld-rt span{ color: var(--fg-2); font-weight: 400; margin-right: 6px; }
.ld-rt em{ font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 100px; margin-left: 8px; vertical-align: 2px; color: #fff; }
.ld-rt em.is-right{ background: var(--ld-right); }
.ld-rt em.is-wrong{ background: var(--liar); }
.ld-recap ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-recap ul li{ display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 34px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(35,64,66,0.1); }
.ld-recap img{ width: 40px; height: 40px; border-radius: 50%; display: block; }
.ld-recap ul li span{ font-size: 15px; line-height: 1.35; }
.ld-recap ul li em{ font-style: normal; font-size: 13px; color: var(--fg-2); }
.ld-recap ul li.is-lie em{ color: var(--liar); font-weight: 700; }
.ld-recap .ld-truth{ margin: 8px 0 0; font-size: 15px; color: var(--fg-2); }
.ld-hear{ border: 0; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-2); color: var(--fg); display: grid; place-items: center; padding: 0; }
.ld-hear svg{ width: 16px; height: 16px; }
.ld-hear:hover, .ld-hear.is-on{ background: var(--deep); color: var(--cream); }

/* how to play, and stats */
.ld-sheet{ position: fixed; inset: 0; z-index: 300; background: rgba(28,52,54,0.42); display: grid; place-items: center; padding: 16px; }
.ld-sheet[hidden]{ display: none; }
.ld-sheet-in{ position: relative; width: min(100%, 460px); max-height: 86vh; overflow: auto; background: var(--paper-lite); color: var(--deep); border-radius: 18px; padding: 26px 24px 22px; }
.ld-sheet-in h2{ margin: 0 0 12px; font-size: 24px; font-weight: 800; }
.ld-sheet-in p, .ld-sheet-in li{ font-size: 16px; line-height: 1.5; }
.ld-sheet-in ul{ padding-left: 20px; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 6px; }
.ld-sheet-in .ld-stats{ margin: 14px 0; }
.ld-x{ position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--deep); }
.ld-x:hover{ background: var(--bg-2); }

/* the faces' credit, kept small */
.ld-credit{ margin: 0 auto; width: 100%; max-width: 760px; text-align: right; font-size: 10px; line-height: 1; opacity: 0.5; }
.ld-credit a{ color: var(--fg-2); text-decoration: none; }
.ld-credit a:hover{ text-decoration: underline; opacity: 1; }

@media (max-width: 640px){
  .ld{ margin-top: 18px; }
  .ld-stage{ --face: min(26vw, 104px); --pt: 84px; }
  .ld-name{ font-size: 15px; margin-top: 28px; }
  .ld-desk{ height: 54px; }
  .ld-listen{ width: 46px; height: 46px; margin-top: 24px; }
  .ld-bubble{ font-size: 12.5px; max-width: 30vw; padding: 6px 9px 7px; border-radius: 13px; }
  .ld-seat:first-child .ld-bubble{ left: 0; transform: translateY(-100%) scale(0.3); transform-origin: 30% 130%; }
  .ld-seat:first-child .ld-bubble.is-on{ transform: translateY(-100%) rotate(var(--tilt, -2deg)) scale(1); }
  .ld-seat:first-child .ld-bubble::after{ left: 40%; }
  .ld-seat:last-child .ld-bubble{ left: auto; right: 0; transform: translateY(-100%) scale(0.3); transform-origin: 70% 130%; }
  .ld-seat:last-child .ld-bubble.is-on{ transform: translateY(-100%) rotate(var(--tilt, -2deg)) scale(1); }
  .ld-seat:last-child .ld-bubble::after{ left: 60%; }
  .ld-chip{ width: calc(33% - 7px); padding: 12px 4px 10px; }
  .ld-stats{ grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .ld-teaser{ gap: 12px; padding: 8px 12px 0; }
  .ldt-faces img{ width: 40px; height: 40px; }
  .ldt-line{ font-size: 13px; }
  .ldt-go{ width: 54px; height: 54px; font-size: 12px; }
  .ldt-bub{ font-size: 11px; }
  .ld-recap ul li{ grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .ld-recap ul li em{ display: none; }
  .ld-recap img{ width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce){
  .ld-seat.is-liar .ld-stamp{ animation-duration: .01s; }
  .ld-stage[data-state="accuse"] .ld-face img{ animation: none; }
}

/* picking a real photo for a cover */
.ph-pick{ display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ph-row{ display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.ph-opt{ flex: none; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--bg-2); outline: 3px solid transparent; outline-offset: 2px; }
.ph-opt img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s var(--ease); }
.ph-opt:hover img{ transform: scale(1.05); }
.ph-opt[aria-pressed="true"]{ outline-color: var(--deep); }
.ph-none{ font-size: 14px; color: var(--fg-2); padding: 30px 0; }
.ph-search{ display: flex; gap: 8px; max-width: 460px; }
.ph-search input{ flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 14px; border-radius: 8px; border: 0; background: var(--bg-2); color: var(--fg); }

/* Explore: the lead is the cover itself, no box round it */
.ed-lead{ display: flex; flex-direction: column; gap: 10px; padding: 0; background: none; color: var(--fg); border-radius: 0; position: relative; text-decoration: none; }
.ed-lead .ed-art{ position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 40px -26px rgba(35,64,66,0.7); align-self: stretch; transition: transform 300ms var(--ease); }
.ed-lead:hover .ed-art{ transform: translateY(-3px); }
.ed-make{ position: absolute; right: 14px; bottom: 14px; background: var(--orange); color: var(--deep); font-weight: 700; font-size: 16px; padding: 11px 20px; border-radius: 100px; transition: background .2s; }
.ed-lead:hover .ed-make{ background: var(--paper-lite); }
.ed-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ed-lead .ed-why{ background: var(--bg-2); color: var(--fg-2); }
.ed-credit{ position: static; font-size: 11px; color: var(--fg-2); }
@media (max-width: 900px){ .ed-lead .ed-art{ width: 100%; } }

/* About: the founder's note, the promises; What's new */
.doc .sig{ font-weight: 700; font-size: 18px; margin-top: 4px; }
.doc .sig span{ font-weight: 400; font-size: 14px; color: var(--fg-2); }
.doc .promises, .doc .log{ padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.doc .promises li, .doc .log li{ line-height: 1.55; }

.contact{ display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 8px 0 20px; }
.contact .hp{ position: absolute; left: -9999px; }
.contact .fld{ display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--fg-2); }
.contact textarea, .contact input[type=email]{ font: inherit; font-size: 16px; color: var(--fg); background: var(--bg-2); border: 0; border-radius: 10px; padding: 12px 14px; resize: vertical; }
.contact textarea:focus, .contact input:focus{ outline: 2px solid var(--deep); outline-offset: 1px; }
.contact .btn{ align-self: flex-start; }
.contact-done{ font-weight: 600; }
.ed-lead .ed-foot{ align-self: stretch; }

/* why a weekly pick is here: a strip of masking tape stuck on the corner of the cover */
.card .why{
  position: absolute; left: -4px; bottom: 16px; z-index: 2;
  padding: 5px 14px 5px 12px; max-width: calc(100% - 64px);
  font-size: 12.5px; font-weight: 600; letter-spacing: .005em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--deep); background: rgba(246,236,226,.93);
  transform: rotate(-3deg); transform-origin: left center;
  clip-path: polygon(0 6%, 4% 0, 9% 7%, 14% 1%, 100% 0, 97% 22%, 100% 46%, 96% 70%, 100% 100%, 12% 100%, 7% 93%, 2% 100%, 0 94%);
  box-shadow: 0 1px 0 rgba(35,64,66,.08);
  pointer-events: none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .say .who0{ color: #F2E6E2; } :root:not([data-theme="light"]) .say .who1{ color: #EFB78E; }
  :root:not([data-theme="light"]) .say .who2{ color: #8FC2BD; } :root:not([data-theme="light"]) .say .who3{ color: #C6B0E0; } :root:not([data-theme="light"]) .say .who4{ color: #D9B19F; }
}
:root[data-theme="dark"] .say .who0{ color: #F2E6E2; } :root[data-theme="dark"] .say .who1{ color: #EFB78E; }
:root[data-theme="dark"] .say .who2{ color: #8FC2BD; } :root[data-theme="dark"] .say .who3{ color: #C6B0E0; } :root[data-theme="dark"] .say .who4{ color: #D9B19F; }


/* home, de-gadgeted: no floating circles, no initials in bubbles, no waveform. The
   sample reads like a few lines torn from a transcript, beside a plain rule. */
.stage::before, .stage::after{ display: none !important; }
.vh{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage .tries{ gap: 6px 18px; align-items: baseline; }
.stage .try-k{ font-size: 14px; color: var(--cream); opacity: .6; }
.stage .try{ background: none !important; padding: 2px 0 !important; border-radius: 0 !important; font-size: 15px; color: var(--cream); text-decoration: underline; text-decoration-color: rgba(239,183,142,.55); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.stage .try:hover{ color: var(--orange) !important; text-decoration-color: var(--orange); }
.sample{ background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 4px 0 4px 32px !important; border-left: 1px solid rgba(242,230,226,.22); }
.sample-lines p{ display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 6px 0 !important; background: none !important; border-radius: 0; }
.sample-lines p.is-live{ background: none !important; }
.sample-lines .nm{ font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-right: 3px; }
.sample-lines .nm0{ color: var(--orange); } .sample-lines .nm1{ color: #9BC7C2; }
.sample .duet{ display: none; }
.sample-art{ border-radius: 2px; }
@media (max-width: 900px){ .sample{ border-left: 0; border-top: 1px solid rgba(242,230,226,.22); padding: 22px 0 0 !important; } }
.ld-again{ display: block; margin: 12px auto 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--deep); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ld-again:hover{ color: var(--teal); }
.say .cue{ font-style: italic; color: var(--fg-2); opacity: .7; font-size: .92em; }
.ld-caught{ text-align: center; font-size: 16px; color: var(--fg-2); margin-top: -4px; }
.ld-caught b{ color: var(--fg); font-weight: 700; }

/* no "home" button when you're already home */
.app[data-page="home"] .tb-home{ display: none; }



/* Lie Detector: the no-risk bet, and chips you can't afford */
.ld-chip.is-safe{ background: transparent; border: 1.5px dashed currentColor; }
.ld-chip.is-safe .stack em{ font-style: normal; font-weight: 800; font-size: 22px; line-height: 30px; }
.ld-chip[disabled]{ opacity: .35; cursor: not-allowed; transform: none; }
.ld-crowdr{ font-size: 14px; opacity: .75; margin-top: 6px; }
@media (max-width: 640px){ .ld-chip{ width: calc(50% - 5px); } }

/* ---- home hero, broken into blocks: the question across the top, the ask in deep
   teal, a real conversation on orange under a real photo, then what's new ---- */
.app[data-page="home"] .rail .nav a[href="/"]{ display: none; }
.hero{ display: flex; flex-direction: column; gap: 18px; }
.hero-h{ margin: 14px 0 10px; font-family: "Jost", sans-serif; font-size: clamp(34px, 4.4vw, 60px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; color: #234042; }
:root[data-theme="dark"] .hero-h{ color: #EFB78E; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero-h{ color: #EFB78E; } }
.hero-grid{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.hero .stage{ display: flex; grid-template-columns: none; padding: 36px; border-radius: 8px; }
.hero .stage-ask{ width: 100%; justify-content: center; }

.hero .sample{ display: flex; flex-direction: column; gap: 10px; padding: 0 0 18px !important; border: 0 !important; border-radius: 8px !important; overflow: hidden;
  background: #EFB78E !important; color: #234042; }
.hero .sample-art{ display: block; width: 100%; height: 150px; border-radius: 0; flex: none; background: #507976; }
.hero .sample-art svg{ width: 100%; height: 100%; display: block; }
.hero .sample-head{ padding: 6px 22px 0; }
.hero .sample-title b{ font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #234042; }
.hero .sample-title span{ color: #234042; opacity: .7; }
.hero .sample-lines{ padding: 0 22px; gap: 0; }
.hero .sample-lines p{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 7px 0 !important; color: #234042; opacity: .5; transition: opacity 400ms ease; }
.hero .sample-lines p.is-live{ opacity: 1; }
.hero .sample-lines .nm{ font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-right: 4px; }
.hero .sample-lines .nm0{ color: #234042; } .hero .sample-lines .nm1{ color: #507976; }
.hero .sample-lines time{ display: block; font-size: 12px; opacity: .65; padding-top: 3px; font-variant-numeric: tabular-nums; }

.hero-new{ display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.hero-new h2{ font-size: 20px; font-weight: 600; margin: 0; color: var(--fg); }
.hero-new ol{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hero-new li{ display: grid; grid-template-columns: 64px minmax(0, 1fr) 34px; gap: 12px; align-items: center; padding-top: 12px; border-top: 2px solid #234042; }
.hn-ph{ display: block; width: 64px; height: 64px; border-radius: 4px; overflow: hidden; background: #507976; }
.hn-ph svg{ width: 100%; height: 100%; display: block; }
.hero-new .ch-t{ display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--fg); text-decoration: none; }
.hero-new .ch-t b{ font-weight: 600; font-size: 15px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hero-new .ch-t span{ font-size: 12.5px; opacity: .7; }
.hero-new .ch-t:hover b{ text-decoration: underline; text-underline-offset: 3px; }
.ch-play{ width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #234042; color: #F2E6E2; cursor: pointer; transition: transform 140ms ease; }
.ch-play svg{ width: 15px; height: 15px; margin-left: 2px; }
.ch-play:hover{ transform: scale(1.08); }
@media (max-width: 1100px){ .hero-new ol{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: minmax(0, 1fr); }
  .hero .stage{ padding: 22px; }
  .hero .sample-art{ height: 120px; }
  .hero-new ol{ grid-template-columns: minmax(0, 1fr); }
}

/* the ask box, without the list under it */
.ask-hint{ margin: 4px 0 0; max-width: 34em; font-size: 15px; line-height: 1.5; color: #F2E6E2; opacity: .62; }

/* photos: the drawn scene underneath at once, the real photo fades over it */
.hero .sample-art, .hn-ph{ position: relative; }
.sa-draw, .sa-draw svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sa-ph{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.sa-ph.is-in{ opacity: 1; }
.sa-by{ position: absolute; right: 8px; bottom: 6px; font-size: 10.5px; color: #F2E6E2; opacity: .8; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

.hero{ min-width: 0; }
.ticker{ width: 100%; contain: inline-size; }
.sample-art > .sa-by, .hn-ph > .sa-by{ position: absolute; width: auto; height: auto; top: auto; left: auto; right: 8px; bottom: 6px; display: inline; }
.hero{ align-items: stretch; text-align: left; }

/* lighter: no heavy dark box round the ask; a two-voice sound bar instead of a ticker */
.hero .stage{ background: none !important; color: #234042; padding: 0 !important; }
.hero .stage-ask{ gap: 18px; justify-content: flex-start; }
.hero .stage .ask{ background: #FFF8F5; border: 2px solid #234042; }
.hero .stage .note{ color: #507976; }
.hero .ask-hint{ color: #234042; opacity: .72; margin: 0; }
.hero .duet{ height: 92px; width: 100%; margin: 6px 0 0; }
.hero .duet i{ width: 4px; }
.hero .duet .r0 i{ background: #EFB78E; }
.hero .duet .r1 i{ background: #507976; mix-blend-mode: multiply; }
:root[data-theme="dark"] .hero .stage{ color: #F2E6E2; }
:root[data-theme="dark"] .hero .ask-hint{ color: #F2E6E2; }
:root[data-theme="dark"] .hero-h{ color: #F2E6E2; }

/* neater: left column ends where the card ends, the sound bar sits on that line and
   follows whoever is talking in the sample (names and bars share colours) */
.hero-grid{ align-items: stretch; }
.hero .stage, .hero .stage-ask{ height: 100%; }
.hero .stage-ask{ display: flex; flex-direction: column; gap: 14px; }
.hero .ask-hint{ font-size: 16px; }
.hero .duet{ margin-top: auto; height: 120px; }
.hero .duet .lane{ transition: opacity .5s ease, transform .5s ease; transform-origin: center; }
.hero .duet .r0 i{ background: #234042; }
.hero .duet .r1 i{ background: #EFB78E; mix-blend-mode: normal; }
.hero .duet[data-who="0"] .r1, .hero .duet[data-who="1"] .r0{ opacity: .45; transform: scaleY(.4); }
.hero .duet[data-who="1"] .r1{ transform: translateX(5px); }
.hero .sample-lines .nm0{ color: #234042; }
.hero .sample-lines .nm1{ color: #507976; }
.hn-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.hn-head a{ font-weight: 500; color: var(--fg); text-decoration: underline; text-underline-offset: 4px; font-size: 15px; }
.hero-new ol{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hero-new li{ grid-template-columns: 72px minmax(0, 1fr) 36px; }
.hn-ph{ width: 72px; height: 72px; }
@media (max-width: 1100px){ .hero-new ol{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px){ .hero-new ol{ grid-template-columns: minmax(0, 1fr); } .hero .duet{ height: 80px; margin-top: 4px; } }
.hn-head a{ display: none; }

/* no boxes: the search is a big line to write on, the sample is a photo with the
   conversation printed under it, straight on the page */
.hero .stage .ask{ background: transparent; border: 0; border-bottom: 3px solid #234042; border-radius: 0; padding: 6px 0 14px; }
.hero .stage .ask textarea{ font-size: clamp(20px, 2vw, 26px); color: #234042; background: transparent; padding-left: 0; }
.hero .stage .ask textarea::placeholder{ color: #507976; opacity: .85; }
.hero .stage .ask .ask-set{ background: transparent; color: #234042; }
.hero .stage .ask .ask-set:hover{ background: rgba(35,64,66,.08); }
.hero .ask-hint{ font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; line-height: 1.45; opacity: 1; color: #234042; max-width: 30em; }
.hero .ask-hint span{ color: #507976; }

.hero .sample{ background: none !important; padding: 0 !important; overflow: visible; gap: 12px; }
.hero .sample-art{ border-radius: 8px; overflow: hidden; height: 170px; }
.hero .sample-head{ padding: 4px 0 0; }
.hero .sample-lines{ padding: 0; }
.hero .sample-lines p{ border-top: 1px solid rgba(35,64,66,.14); padding: 9px 0 !important; }
.hero .sample-lines .nm0, .hero .sample-lines .nm1{ color: #234042; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.hero .sample-lines .nm0{ text-decoration-color: #234042; }
.hero .sample-lines .nm1{ text-decoration-color: #EFB78E; }
:root[data-theme="dark"] .hero .sample-title b, :root[data-theme="dark"] .hero .sample-title span, :root[data-theme="dark"] .hero .sample-lines p{ color: #F2E6E2; }
.hero .duet{ order: 0; max-width: none; }

/* the sample reads like an episode: a square cover (title over the photo) beside its name */
.hero .sample-top{ display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: end; }
.hero .sample-top .sample-art{ width: 210px; height: 210px; border-radius: 6px; overflow: hidden; background: #234042; }
.hero .sample-top .sample-art svg{ position: static; width: 100%; height: 100%; display: block; }
.hero .sample-top .sample-head{ padding: 0 0 4px; }
.hero .sample-title b{ font-size: 22px; line-height: 1.2; }
.sample-by{ display: block; margin-top: 10px; font-size: 11.5px; opacity: .55; }
.hero .ask-hint{ font-weight: 400; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.55; max-width: 34em; }
.hero .ask-hint b{ font-weight: 600; display: block; margin-bottom: 4px; font-size: 1.12em; }
@media (max-width: 560px){ .hero .sample-top{ grid-template-columns: 120px minmax(0, 1fr); gap: 14px; } .hero .sample-top .sample-art{ width: 120px; height: 120px; } .hero .sample-title b{ font-size: 18px; } }

/* =========== home hero, one clean grid ===========
   heading / the line you write on / why + a sample / two voices / what's new.
   One left edge, one right edge, five type sizes. */
.hx{ display: flex; flex-direction: column; min-width: 0; padding-top: 8px; }
.hx-h{ margin: 0 0 28px; font-size: clamp(34px, 4.4vw, 60px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; color: #234042; }

.hx-ask{ max-width: none; align-items: center; gap: 14px; padding: 0 0 12px; background: transparent; border-radius: 0; border-bottom: 3px solid #234042; }
.hx-ask:focus-within{ outline: none; border-bottom-color: #507976; }
.hx-ask textarea{ font-size: clamp(20px, 1.9vw, 26px); min-height: 0; padding: 8px 0; color: #234042; }
.hx-ask textarea::placeholder{ color: #507976; opacity: .8; }
.hx-ask .ask-set{ background: transparent; color: #234042; }
.hx-ask .ask-set:hover{ background: rgba(35,64,66,.08); }
.hx-ask .btn{ padding: 13px 26px; }
.hx-note{ margin: 10px 0 0; color: #507976; font-weight: 600; }
.hx-note:empty{ display: none; }

.hx-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 36px; align-items: start; }
.hx-lead{ margin: 0 0 10px; font-size: 20px; font-weight: 600; line-height: 1.3; color: #234042; }
.hx-body{ margin: 0; font-size: 17px; line-height: 1.6; color: #234042; opacity: .8; max-width: 32em; }

.hx .sample{ display: flex; flex-direction: column; gap: 14px; padding: 0 !important; border: 0 !important; background: none !important; min-width: 0; color: #234042; }
.hx .sample-top{ display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; }
.hx .sample-art{ position: relative; width: 112px; height: 112px; border-radius: 6px; overflow: hidden; background: #234042; }
.hx .sample-art svg{ width: 100%; height: 100%; display: block; }
.hx .sample-title{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hx .sample-title b{ font-size: 20px; font-weight: 600; line-height: 1.25; color: #234042; }
.hx .sample-title span{ font-size: 14px; opacity: .7; }
.hx .sample-by{ display: block; font-size: 11.5px; opacity: .5; margin-top: 2px; }
.hx .sample-lines{ display: flex; flex-direction: column; gap: 0; padding: 0; }
.hx .sample-lines p{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin: 0; padding: 9px 0 !important; border-top: 1px solid rgba(35,64,66,.14); font-size: 16px; line-height: 1.45; color: #234042; opacity: .45; transition: opacity .4s ease; background: none !important; }
.hx .sample-lines p.is-live{ opacity: 1; }
.hx .sample-lines .nm{ font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-right: 6px; color: #234042; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.hx .sample-lines .nm0{ text-decoration-color: #234042; }
.hx .sample-lines .nm1{ text-decoration-color: #EFB78E; }
.hx .sample-lines time{ font-size: 12px; opacity: .6; padding-top: 3px; font-variant-numeric: tabular-nums; }

.hx-duet{ order: 0; height: 64px; max-width: none; width: 100%; margin: 36px 0 0; }
.hx-duet i{ width: 4px; }
.hx-duet .lane{ transition: opacity .5s ease, transform .5s ease; transform-origin: center; }
.hx-duet .r0 i{ background: #234042; }
.hx-duet .r1 i{ background: #EFB78E; mix-blend-mode: normal; }
.hx-duet[data-who="0"] .r1, .hx-duet[data-who="1"] .r0{ opacity: .4; transform: scaleY(.4); }
.hx .hero-new{ margin-top: 36px; }

:root[data-theme="dark"] .hx-h, :root[data-theme="dark"] .hx-lead, :root[data-theme="dark"] .hx-body, :root[data-theme="dark"] .hx .sample, :root[data-theme="dark"] .hx .sample-title b, :root[data-theme="dark"] .hx .sample-lines p, :root[data-theme="dark"] .hx-ask textarea{ color: #F2E6E2; }

@media (max-width: 900px){
  .hx-h{ margin-bottom: 20px; }
  .hx-ask{ flex-wrap: wrap; }
  .hx-ask textarea{ flex: 1 1 100%; }
  .hx-ask .ask-set{ margin-left: auto; }
  .hx-row{ grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 26px; }
  .hx-duet{ height: 48px; margin-top: 26px; }
}
@media (max-width: 900px){
  .hx-ask{ display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 0 12px !important; }
  .hx-ask textarea{ grid-column: 1 / -1; width: 100%; min-height: 0 !important; padding: 4px 0 !important; }
  .hx-ask .ask-set{ justify-self: start; margin: 0; }
  .hx-ask .ask-set span{ display: inline; }
  .hx-ask .btn{ justify-self: end; }
}
@media (max-width: 900px){ .hx-ask textarea{ min-height: 2.8em !important; } }

/* the pitch: three lines, not a paragraph */
.hx-why{ display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.hx-no, .hx-yes{ margin: 0; font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: #234042; }
.hx-no{ color: #507976; text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: #EFB78E; }
.hx-yes{ margin-top: 10px; max-width: 14em; }
.hx-yes u{ text-decoration: underline; text-decoration-color: #EFB78E; text-decoration-thickness: 6px; text-underline-offset: 6px; text-decoration-skip-ink: none; }
:root[data-theme="dark"] .hx-yes{ color: #F2E6E2; } :root[data-theme="dark"] .hx-no{ color: #8FC2BD; }

/* the three reasons */
ul.hx-why{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
ul.hx-why li{ padding: 14px 0; border-top: 1px solid rgba(35,64,66,.14); font-size: 17px; line-height: 1.45; color: #234042; }
ul.hx-why li:first-child{ border-top: 0; padding-top: 2px; }
ul.hx-why b{ display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 2px; }
:root[data-theme="dark"] ul.hx-why li{ color: #F2E6E2; }

/* calmer: no rules between things, one text colour, the circled "you" drawn by hand */
ul.hx-why li{ border-top: 0 !important; padding: 0 0 18px; }
ul.hx-why li:first-child{ padding-top: 0; }
.hx .sample-lines p{ border-top: 0; padding: 5px 0 !important; }
.hx .sample-lines .nm, .hx .sample-lines .nm0, .hx .sample-lines .nm1{ text-decoration: none; color: #234042; }
.hx-ask textarea::placeholder{ color: #234042; opacity: .45; }
.hx-you{ position: relative; display: inline-block; }
.hx-you svg{ position: absolute; left: -14%; top: -6%; width: 128%; height: 118%; overflow: visible; pointer-events: none; }
.hx-you path{ fill: none; stroke: #EFB78E; stroke-width: 4.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 400; stroke-dashoffset: 400; animation: hx-loop 0.9s 0.4s ease-out forwards; }
@keyframes hx-loop{ to{ stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){ .hx-you path{ animation: none; stroke-dashoffset: 0; } }

/* the episode page: the line worth sending, and what they left open */
.takeaway{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; margin: 8px 0 12px; }
.tk-line{ margin: 0; }
.tk-line blockquote{ margin: 0; font-size: clamp(22px, 2.3vw, 30px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); }
.tk-line blockquote::before{ content: "\201C"; } .tk-line blockquote::after{ content: "\201D"; }
.tk-line figcaption{ margin-top: 10px; font-size: 14px; color: var(--fg-2); }
.tk-acts{ display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.tk-open{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tk-q{ margin: 0; font-size: 18px; font-weight: 400; line-height: 1.4; color: var(--fg); }
.tk-q b{ display: block; margin-top: 4px; font-size: 20px; font-weight: 600; }
.transcript .line-k{ margin: 6px 0 2px; font-size: 14px; color: var(--fg-2); }
.transcript .line.tease{ opacity: .75; }
@media (max-width: 760px){ .takeaway{ grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* the voice picker: each voice is a person, with a line about who they are */
.vb-info .vb-who{ display: block; font-size: 12.5px; line-height: 1.35; color: var(--fg-2); opacity: .85; margin-top: 2px; white-space: normal; }

/* ---- home ----
   One question, one place to type, and a few lines of two people talking.
   Speaker colours are the two halves of the logo: orange and teal. */

.home{ max-width: 860px; padding: clamp(28px, 5vh, 56px) 0 0; color: var(--deep); }
.home-h{ margin: 0; font-size: clamp(36px, 4.6vw, 60px); font-weight: 500; line-height: 1.04; letter-spacing: -0.028em; color: var(--deep); max-width: 13em; text-wrap: balance; }

.home-ask{ display: flex; align-items: center; gap: 6px; margin-top: 32px; padding: 8px 8px 8px 24px; border-radius: 18px; background: var(--paper-lite); box-shadow: 0 1px 2px rgba(35,64,66,.06), 0 12px 32px -18px rgba(35,64,66,.35); transition: box-shadow .2s ease; position: relative; }
.home-ask:focus-within{ box-shadow: 0 0 0 2px var(--teal), 0 12px 32px -18px rgba(35,64,66,.35); }
.home-ask textarea{ flex: 1; min-width: 0; border: 0; background: none; resize: none; outline: none; font: inherit; font-size: 20px; line-height: 1.4; padding: 14px 0; color: var(--deep); }
.home-ask textarea::placeholder{ color: var(--teal); opacity: .7; }
.home-set{ display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--teal); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.home-set:hover{ background: rgba(35,64,66,.07); color: var(--deep); }
.home-set.changed{ color: var(--deep); background: rgba(239,183,142,.35); }
.home-go{ height: 56px; padding: 0 28px; border: 0; border-radius: 12px; background: var(--deep); color: var(--paper-lite); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.home-go:hover{ background: var(--teal); }
.home-set:focus-visible, .home-go:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }
.home-note{ margin: 12px 0 0 24px; color: var(--teal); font-weight: 600; }
.home-note:empty{ display: none; }
.home-sub{ margin: 18px 0 0 24px; font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 40em; text-wrap: pretty; }

/* the conversation builds up line by line; past lines step back, future lines wait */
.home-talk{ margin: clamp(56px, 10vh, 112px) 0 0; padding: 0; max-width: 720px; }
.home-talk .sample-title{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 22px; }
.home-talk .sample-title b{ font-size: 17px; font-weight: 600; color: var(--deep); }
.home-talk .sample-title span{ font-size: 15px; color: var(--muted); }
.home-lines{ display: flex; flex-direction: column; gap: 18px; }
.home-lines p{ display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 16px; margin: 0; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.38; letter-spacing: -0.01em; color: var(--deep); opacity: .45; transition: opacity .5s ease; }
.home-lines p b{ position: relative; padding-left: 18px; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.home-lines p b::before{ content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; border-radius: 50%; }
.home-lines p.s0 b::before{ background: var(--orange); }
.home-lines p.s1 b::before{ background: var(--teal); }
.home-lines p.is-live{ opacity: 1; }
.home-lines p.is-live ~ p{ opacity: 0; }
.home-talk.swap .home-lines{ opacity: 0; transition: opacity .25s ease; }

[data-page="home"] .shelf{ margin-top: 56px; }
[data-page="home"] .pane{ padding-bottom: 160px; }

@media (max-width: 700px){
  .home{ padding-top: 28px; }
  .home-ask{ flex-wrap: wrap; padding: 8px 8px 8px 18px; }
  .home-ask textarea{ flex-basis: 100%; font-size: 18px; padding: 12px 0 4px; }
  .home-set{ margin-right: auto; padding: 0 10px; }
  .home-go{ height: 50px; }
  .home-note, .home-sub{ margin-left: 4px; }
  .home-lines p{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce){ .home-lines p.is-live ~ p{ opacity: .38; } }

:root[data-theme="dark"] .home, :root[data-theme="dark"] .home-h, :root[data-theme="dark"] .home-lines p, :root[data-theme="dark"] .home-talk .sample-title b{ color: var(--cream); }
:root[data-theme="dark"] .home-ask{ background: rgba(242,230,226,.07); box-shadow: none; }
:root[data-theme="dark"] .home-ask textarea{ color: var(--cream); }
:root[data-theme="dark"] .home-go{ background: var(--orange); color: var(--deep); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .home, :root:not([data-theme="light"]) .home-h, :root:not([data-theme="light"]) .home-lines p, :root:not([data-theme="light"]) .home-talk .sample-title b{ color: var(--cream); }
  :root:not([data-theme="light"]) .home-ask{ background: rgba(242,230,226,.07); box-shadow: none; }
  :root:not([data-theme="light"]) .home-ask textarea{ color: var(--cream); }
  :root:not([data-theme="light"]) .home-go{ background: var(--orange); color: var(--deep); }
}
.home-ask .ask-bubble{ background: var(--deep); color: var(--paper-lite); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* this week's picks: four posters in a row. Bauhaus blocks in the house colours,
   one shape each, the title set big in a condensed display face. */
@font-face{ font-family: "Shoulders"; src: url("/fonts/shoulders-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
.hits{ margin-top: clamp(48px, 8vh, 80px); color: var(--deep); }
.hits-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.hits-head h2{ margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.015em; }
.hits-head a{ font-size: 15px; font-weight: 600; color: inherit; }
.picks{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pk{ position: relative; overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 4 / 5; padding: 20px 20px 18px; border-radius: 14px; isolation: isolate; transition: transform .2s ease; }
.pk:hover{ transform: translateY(-3px); }
.pk0{ background: #234042; color: #F2E6E2; --shape: #507976; --btn: #EFB78E; --btn-fg: #234042; }
.pk1{ background: #EFB78E; color: #234042; --shape: #F2E6E2; --btn: #234042; --btn-fg: #F2E6E2; }
.pk2{ background: #507976; color: #F2E6E2; --shape: #234042; --btn: #F2E6E2; --btn-fg: #234042; }
.pk3{ background: #FFF8F5; color: #234042; --shape: #EFB78E; --btn: #234042; --btn-fg: #F2E6E2; }
.pk3{ background: #234042; color: #F2E6E2; --shape: #EFB78E; --btn: #EFB78E; --btn-fg: #234042; }
.pk-ph{ background: #234042; color: #F2E6E2; --btn: #EFB78E; --btn-fg: #234042; }
.pk-img{ position: absolute; inset: 0; z-index: -1; }
.pk-img img{ width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s ease; }
.pk-img img.is-in{ opacity: 1; }
.pk-img::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(35,64,66,.92) 0%, rgba(35,64,66,.55) 42%, rgba(35,64,66,.05) 75%); }
.pk-ph .pk-g{ text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.pk-shape{ position: absolute; top: 0; right: 0; width: 58%; height: auto; z-index: -1; fill: var(--shape); }
.pk-g{ font-size: 14px; font-weight: 600; }
.pk-t{ margin-top: auto; font-family: "Shoulders", "Jost", sans-serif; font-weight: 800; font-size: clamp(28px, 2.3vw, 40px); line-height: .94; letter-spacing: .005em; color: inherit; text-decoration: none; text-wrap: balance; overflow-wrap: anywhere; }
.pk-t::after{ content: ""; position: absolute; inset: 0; z-index: 0; }
.pk-foot{ display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 14px; font-weight: 500; opacity: .9; }
.pk-play{ position: relative; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: var(--btn-fg); cursor: pointer; transition: transform .15s ease; }
.pk-play svg{ width: 18px; height: 18px; }
.pk-play:hover{ transform: scale(1.08); }
.pk-play:focus-visible, .pk-t:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 1100px){ .picks{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .pk{ aspect-ratio: 5 / 4; } }
@media (max-width: 640px){
  .picks{ display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 0 4px; scrollbar-width: none; }
  .picks::-webkit-scrollbar{ display: none; }
  .pk{ flex: 0 0 72%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .pk-t{ font-size: 34px; }
}
@media (prefers-reduced-motion: reduce){ .pk, .pk-play{ transition: none; } .pk:hover{ transform: none; } }
:root[data-theme="dark"] .hits{ color: var(--cream); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hits{ color: var(--cream); } }

/* ---- accounts: plain and clear ---- */
.tb-acct{ flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(35,64,66,0.08); color: var(--fg); font-weight: 600; font-size: 17px; text-decoration: none; }
.tb-acct svg{ width: 22px; height: 22px; }
.tb-acct:hover{ background: rgba(35,64,66,0.16); }
.tb-acct.is-in{ background: var(--deep); color: var(--paper-lite); }
.tb-acct.is-in:hover{ background: var(--teal); }
.tb-acct:focus-visible, .rail-acct:focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }

/* the account row at the foot of the rail, under an orange rule */
.rail-acct{ position: relative; margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 18px 12px 10px; color: var(--rail-fg); text-decoration: none; border-radius: 0 0 10px 10px; }
.rail-acct::before{ content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; border-radius: 2px; background: var(--orange); }
.rail-acct:hover .ra-c{ background: rgba(242,230,226,0.24); }
.rail-acct[hidden]{ display: none; }
.ra-c{ flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(242,230,226,0.14); font-weight: 600; font-size: 15px; transition: background .15s ease; }
.ra-c svg{ width: 20px; height: 20px; }
.ra-t{ flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ra-t b{ font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-t span{ font-size: 13px; color: var(--rail-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-more{ flex: none; width: 18px; height: 18px; color: var(--rail-fg-2); }
@media (max-width: 900px){ .rail-acct{ display: none !important; } }

/* the account menu */
.am{ position: fixed; z-index: 90; width: 280px; padding: 6px; border-radius: 14px; background: var(--paper-lite); color: var(--deep); box-shadow: 0 2px 6px rgba(35,64,66,.08), 0 18px 44px -18px rgba(35,64,66,.5); }
.am[hidden]{ display: none; }
.am-head{ display: flex; align-items: center; gap: 12px; padding: 10px 10px 8px; }
.am-head--out{ flex-direction: column; align-items: flex-start; gap: 3px; }
.am-head--out b{ font-size: 16px; }
.am-head--out span{ font-size: 14px; color: var(--muted); line-height: 1.4; }
.am-c{ flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--paper-lite); font-weight: 600; font-size: 17px; }
.am-who{ display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.am-who b{ font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-who span{ font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-sep{ height: 6px; }
.am-i{ display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--deep); font: inherit; font-size: 15px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.am-i:hover, .am-i:focus-visible{ background: rgba(35,64,66,.07); outline: none; }
.am-danger{ color: #8A3B2E; }
:root[data-theme="dark"] .am{ background: #2B4B4D; color: var(--cream); }
:root[data-theme="dark"] .am-i{ color: var(--cream); }
:root[data-theme="dark"] .am-i:hover, :root[data-theme="dark"] .am-i:focus-visible{ background: rgba(242,230,226,.08); }
:root[data-theme="dark"] .am-who span, :root[data-theme="dark"] .am-head--out span{ color: #B0B1AF; }
:root[data-theme="dark"] .am-danger{ color: #F0A898; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .am{ background: #2B4B4D; color: var(--cream); }
  :root:not([data-theme="light"]) .am-i{ color: var(--cream); }
  :root:not([data-theme="light"]) .am-i:hover, :root:not([data-theme="light"]) .am-i:focus-visible{ background: rgba(242,230,226,.08); }
  :root:not([data-theme="light"]) .am-who span, :root:not([data-theme="light"]) .am-head--out span{ color: #B0B1AF; }
  :root:not([data-theme="light"]) .am-danger{ color: #F0A898; }
}

/* shared bits for the account pages */
.acct{ max-width: 620px; padding: 40px 0 140px; color: var(--deep); }
.acct--narrow{ max-width: 420px; }
.acct--wide{ max-width: none; }
.acct--settings{ max-width: 920px; }
.acct h1{ margin: 0 0 8px; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; }
.acct-sub{ margin: 0 0 28px; font-size: 17px; color: var(--muted); }
.acct-form{ display: flex; flex-direction: column; gap: 16px; }
.acct-form[hidden]{ display: none; }
.acct-f{ display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 500; }
.acct-f[hidden]{ display: none; }
.acct-f input, .ac input:not([type="radio"]), .ad-find{ font: inherit; font-size: 16px; padding: 11px 14px; border: 1.5px solid rgba(35,64,66,0.22); border-radius: 10px; background: var(--paper-lite); color: var(--deep); width: 100%; box-sizing: border-box; }
.acct-f input:focus, .ac input:not([type="radio"]):focus, .ad-find:focus{ outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(80,121,118,0.2); }
.acct-btn{ display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--deep); color: var(--paper-lite); font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.acct-btn:hover{ background: var(--teal); }
.acct-btn:disabled{ opacity: .45; cursor: default; }
.acct-btn:disabled:hover{ background: var(--deep); }
.acct-btn--wide{ width: 100%; margin-top: 4px; }
.acct-btn--sm{ height: 40px; padding: 0 16px; font-size: 15px; align-self: flex-start; }
.acct-btn--ghost{ background: rgba(35,64,66,.08); color: var(--deep); }
.acct-btn--ghost:hover{ background: rgba(35,64,66,.16); }
.acct-btn--danger{ background: #8A3B2E; }
.acct-btn--danger:hover{ background: #6F2E24; }
.acct-btn--danger:disabled:hover{ background: #8A3B2E; }
.acct-btn:focus-visible, .acct-link:focus-visible, .ac-nav a:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }
.acct-link{ border: 0; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: flex-start; }
.acct-small{ margin: 0; font-size: 15px; color: var(--muted); }
.acct-small a{ color: var(--deep); font-weight: 600; }
.acct-msg{ margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: rgba(80,121,118,0.13); font-size: 15px; line-height: 1.45; }
.acct-msg.is-bad{ background: rgba(138,59,46,0.1); color: #7A3326; }
.acct-msg[hidden]{ display: none; }

/* account settings: a short list of sections on the left, one shown at a time */
.ac{ display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 24px; }
.ac-nav{ position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.ac-nav a{ padding: 10px 12px; border-radius: 8px; color: var(--deep); font-size: 15px; font-weight: 500; text-decoration: none; }
.ac-nav a:hover{ background: rgba(35,64,66,.06); }
.ac-nav a[aria-current="page"]{ background: var(--deep); color: var(--paper-lite); }
.ac-nav .ac-nav-danger{ margin-top: 12px; color: #8A3B2E; }
.ac-nav .ac-nav-danger[aria-current="page"]{ background: #8A3B2E; color: var(--paper-lite); }
.ac-sec[hidden]{ display: none; }
.ac-sec h2{ margin: 0 0 16px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.ac-card{ margin-bottom: 14px; padding: 6px 22px; border-radius: 14px; background: var(--paper-lite); }
.ac-card[hidden]{ display: none; }
.ac-card > .acct-msg{ margin: 0 0 14px; }
.ac-who{ display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.ac-who > span:last-child{ display: flex; flex-direction: column; min-width: 0; }
.ac-who b{ font-size: 18px; }
.ac-who span span{ color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.ac-big{ flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--paper-lite); font-size: 22px; font-weight: 600; }
.ac-row{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; }
.ac-row + .ac-row, .ac-row + .acct-msg + .ac-row{ box-shadow: 0 -1px 0 rgba(35,64,66,.08); }
.ac-row > span:first-child, .ac-row > label{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-row > span:first-child span, .ac-row > label span{ font-size: 14px; color: var(--muted); }
.ac-row b{ font-size: 15px; font-weight: 600; }
.ac-val{ text-align: right; color: var(--deep); font-size: 15px; }
.ac-val a{ margin-left: 10px; color: var(--deep); font-weight: 600; }
.ac-ctl{ display: flex; gap: 10px; flex: 1; max-width: 380px; }
.ac-ctl input{ padding: 8px 12px !important; }
.ac-stack{ display: flex; flex-direction: column; gap: 10px; padding: 16px 0; margin: 0; border: 0; min-width: 0; }
.ac-stack legend{ padding: 0; margin-bottom: 2px; float: left; width: 100%; }
.ac-stack legend + *{ clear: both; }
.ac-stack b{ font-size: 15px; font-weight: 600; }
.ac-stack input:not([type="radio"]){ max-width: 380px; }
.ac-help{ font-size: 14px; color: var(--muted); line-height: 1.45; }
.ac-note{ margin: 0 0 14px; }
.ac-opts{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ac-opt{ position: relative; }
.ac-opt input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ac-opt span{ display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px; background: rgba(35,64,66,.07); font-size: 15px; font-weight: 500; }
.ac-opt input:checked + span{ background: var(--deep); color: var(--paper-lite); }
.ac-opt input:focus-visible + span{ outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 760px){
  .ac{ grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ac-nav{ position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .ac-nav a{ flex: none; background: rgba(35,64,66,.06); }
  .ac-nav .ac-nav-danger{ margin-top: 0; }
  .ac-row{ flex-wrap: wrap; }
  .ac-ctl{ max-width: none; flex-basis: 100%; }
  .ac-val{ text-align: left; }
}

/* admin dashboard */
.ad-toolbar{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 18px 0 8px; }
.ad-range{ display: inline-flex; padding: 4px; border-radius: 12px; background: rgba(35,64,66,.07); }
.ad-range button{ height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--deep); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.ad-range button[aria-pressed="true"]{ background: var(--deep); color: var(--paper-lite); }
.ad-range button:focus-visible{ outline: 2px solid var(--teal); outline-offset: 1px; }
.ad-check{ display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.ad-check input{ width: 18px; height: 18px; accent-color: var(--deep); }
.ad-range-note{ margin: 0 0 18px; font-size: 14px; color: var(--muted); }
#ad-out.is-loading{ opacity: .5; transition: opacity .2s ease; }
.ad-stats{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.ad-stat{ display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 14px; background: var(--paper-lite); min-width: 0; }
.ad-sl{ font-size: 14px; font-weight: 500; color: var(--muted); }
.ad-sv{ font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--deep); }
.ad-ss{ font-size: 13px; color: var(--muted); }
.ad-grid{ display: grid; gap: 12px; margin-bottom: 12px; }
.ad-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ad-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ad-panel{ padding: 20px 22px; border-radius: 14px; background: var(--paper-lite); min-width: 0; }
.ad-panel--full{ margin-bottom: 12px; }
.ad-panel h2{ margin: 0 0 14px; font-size: 17px; font-weight: 600; }
.ad-panel h3{ margin: 20px 0 10px; font-size: 15px; font-weight: 600; }
.na{ color: var(--muted); font-size: 14px; font-weight: 400; }
.ad-sv .na{ font-size: 15px; }
.ad-chart{ position: relative; }
.ad-svg{ display: block; width: 100%; height: 170px; overflow: visible; }
.ad-svg .ad-bar{ fill: var(--deep); }
.ad-svg .ad-hit{ fill: transparent; cursor: default; }
.ad-svg .ad-hit:hover{ fill: rgba(35,64,66,.06); }
.ad-svg .ad-base{ stroke: rgba(35,64,66,.25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ad-axis{ display: flex; justify-content: space-between; margin-top: -14px; font-size: 12.5px; color: var(--muted); }
.ad-peak{ position: absolute; top: -34px; right: 0; margin: 0; font-size: 13px; color: var(--muted); }
.ad-tip{ position: absolute; z-index: 95; padding: 7px 10px; border-radius: 8px; background: var(--deep); color: var(--paper-lite); font-size: 13.5px; pointer-events: none; white-space: nowrap; }
.ad-tip[hidden]{ display: none; }
.ad-kv{ margin: 0; }
.ad-kv > div{ display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 15px; }
.ad-kv > div + div{ box-shadow: 0 -1px 0 rgba(35,64,66,.07); }
.ad-kv dt{ color: var(--muted); }
.ad-kv dd{ margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ad-kv small, .ad-lv small{ font-weight: 400; color: var(--muted); margin-left: 4px; }
.ad-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ad-list li{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14.5px; }
.ad-lk{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-lv{ font-weight: 600; font-variant-numeric: tabular-nums; }
.ad-lb{ grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(35,64,66,.07); overflow: hidden; }
.ad-lb i{ display: block; height: 100%; border-radius: 3px; background: var(--teal); }
.ad-funnel{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ad-funnel li{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 15px; }
.ad-fk{ font-weight: 500; }
.ad-fv{ font-weight: 600; font-variant-numeric: tabular-nums; }
.ad-fb{ grid-column: 1 / -1; height: 10px; border-radius: 5px; background: rgba(35,64,66,.07); overflow: hidden; }
.ad-fb i{ display: block; height: 100%; border-radius: 5px; background: var(--orange); }
.ad-fp{ grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.ad-tools{ display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.ad-find{ max-width: 340px; padding: 9px 12px !important; font-size: 15px !important; }
.ad-count{ font-size: 14px; color: var(--muted); }
.ad-wrap{ overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
.ad-table{ width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ad-table th{ text-align: left; font-weight: 600; padding: 0; white-space: nowrap; box-shadow: inset 0 -2px 0 var(--deep); }
.ad-table th button{ width: 100%; padding: 10px 12px; border: 0; background: none; font: inherit; color: var(--deep); text-align: inherit; cursor: pointer; }
.ad-table th.n button{ text-align: right; }
.ad-table td{ padding: 11px 12px; white-space: nowrap; box-shadow: inset 0 -1px 0 rgba(35,64,66,.08); vertical-align: top; }
.ad-table td small{ display: block; color: var(--muted); font-size: 13px; }
.ad-table .n{ text-align: right; font-variant-numeric: tabular-nums; }
.ad-table tbody tr[data-id]{ cursor: pointer; }
.ad-table tbody tr[data-id]:hover td, .ad-table tbody tr[data-id]:focus-visible td{ background: rgba(35,64,66,.05); }
.ad-table tbody tr:focus-visible{ outline: 2px solid var(--teal); outline-offset: -2px; }
.ad-wide{ white-space: normal !important; min-width: 260px; }
.ad-warn{ color: #8A3B2E !important; }
.ad-err{ color: #8A3B2E !important; white-space: normal; }
.ad-drawer{ position: fixed; inset: 0; z-index: 100; background: rgba(35,64,66,.35); display: flex; justify-content: flex-end; }
.ad-drawer[hidden]{ display: none; }
.ad-dpanel{ position: relative; width: min(520px, 100%); height: 100%; overflow-y: auto; padding: 28px 28px 60px; background: var(--cream); color: var(--deep); box-sizing: border-box; }
.ad-dpanel h2{ margin: 0 40px 4px 0; font-size: 22px; overflow-wrap: anywhere; }
.ad-dpanel h3{ margin: 26px 0 10px; font-size: 16px; }
.ad-dpanel .ad-kv{ padding: 6px 18px; border-radius: 14px; background: var(--paper-lite); margin-top: 16px; }
.ad-x{ position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(35,64,66,.08); color: var(--deep); font-size: 24px; line-height: 1; cursor: pointer; }
.ad-x:hover{ background: rgba(35,64,66,.16); }
.ad-plist{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ad-plist li{ display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--paper-lite); font-size: 14.5px; }
.ad-plist span{ color: var(--muted); font-size: 13.5px; }
.ad-plist a{ align-self: flex-start; margin-top: 4px; color: var(--deep); font-weight: 600; font-size: 14px; }
.ad-lock, .ad-lock body{ overflow: hidden; }
@media (max-width: 1200px){ .ad-stats{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .ad-grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px){ .ad-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-grid--2, .ad-grid--3{ grid-template-columns: minmax(0, 1fr); } .ad-sv{ font-size: 26px; } }

.welcome{ position: fixed; right: 24px; bottom: 112px; z-index: 60; width: min(360px, calc(100vw - 32px)); padding: 20px; border-radius: 14px; background: var(--paper-lite); color: var(--deep); box-shadow: 0 18px 40px -20px rgba(35,64,66,.55); box-sizing: border-box; }
.welcome p{ margin: 0 0 16px; font-size: 16px; line-height: 1.45; }
.welcome-b{ display: flex; align-items: center; gap: 18px; }
@media (max-width: 640px){ .welcome{ right: 16px; bottom: 150px; } }

/* dark mode for the account pages */
:root[data-theme="dark"] .acct, :root[data-theme="dark"] .acct-link, :root[data-theme="dark"] .ac-val, :root[data-theme="dark"] .ac-val a, :root[data-theme="dark"] .acct-small a, :root[data-theme="dark"] .ac-nav a, :root[data-theme="dark"] .ad-sv, :root[data-theme="dark"] .ad-range button, :root[data-theme="dark"] .ad-table th button, :root[data-theme="dark"] .ad-plist a{ color: var(--cream); }
:root[data-theme="dark"] .ac-card, :root[data-theme="dark"] .ad-stat, :root[data-theme="dark"] .ad-panel, :root[data-theme="dark"] .welcome, :root[data-theme="dark"] .ad-plist li, :root[data-theme="dark"] .ad-dpanel .ad-kv{ background: rgba(242,230,226,.06); color: var(--cream); }
:root[data-theme="dark"] .ad-svg .ad-bar{ fill: var(--orange); }
:root[data-theme="dark"] .ad-dpanel{ background: var(--deep); color: var(--cream); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .acct, :root:not([data-theme="light"]) .acct-link, :root:not([data-theme="light"]) .ac-val, :root:not([data-theme="light"]) .ac-val a, :root:not([data-theme="light"]) .acct-small a, :root:not([data-theme="light"]) .ac-nav a, :root:not([data-theme="light"]) .ad-sv, :root:not([data-theme="light"]) .ad-range button, :root:not([data-theme="light"]) .ad-table th button, :root:not([data-theme="light"]) .ad-plist a{ color: var(--cream); }
  :root:not([data-theme="light"]) .ac-card, :root:not([data-theme="light"]) .ad-stat, :root:not([data-theme="light"]) .ad-panel, :root:not([data-theme="light"]) .welcome, :root:not([data-theme="light"]) .ad-plist li, :root:not([data-theme="light"]) .ad-dpanel .ad-kv{ background: rgba(242,230,226,.06); color: var(--cream); }
  :root:not([data-theme="light"]) .ad-svg .ad-bar{ fill: var(--orange); }
  :root:not([data-theme="light"]) .ad-dpanel{ background: var(--deep); color: var(--cream); }
}

@media (max-width: 640px){ .topbar .tb-search{ flex: 1 1 auto; min-width: 0; width: auto; max-width: none; } .topbar .tb-right{ gap: 8px; flex: none; } .topbar .tb-lib{ display: none; } }
@media (max-width: 560px){ .ad-range{ max-width: 100%; overflow-x: auto; scrollbar-width: none; } .ad-range button{ flex: none; padding: 0 11px; } }

/* sign-up and log-in: a photo with the poster type on the left, the form on the right */
.auth{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; padding: 32px 0 140px; }
.auth-art{ position: relative; overflow: hidden; isolation: isolate; min-height: 620px; border-radius: 18px; background: #234042; color: #F2E6E2; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; }
.auth-img{ position: absolute; inset: 0; z-index: -1; }
.auth-img img{ width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .7s ease; }
.auth-img img.is-in{ opacity: 1; }
.auth-img::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(35,64,66,.94) 0%, rgba(35,64,66,.6) 38%, rgba(35,64,66,.08) 72%); }
.auth-big{ margin: 0; font-family: "Shoulders", "Jost", sans-serif; font-weight: 800; font-size: clamp(48px, 5.4vw, 84px); line-height: .92; letter-spacing: .005em; text-wrap: balance; }
.auth-small{ margin: 18px 0 0; max-width: 30em; font-size: 17px; line-height: 1.5; opacity: .92; }
.auth-credit{ position: absolute; top: 18px; right: 20px; font-size: 12px; opacity: .8; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.auth-credit a{ color: inherit; }
.auth-form{ padding: 40px 0 0; align-self: center; width: 100%; }
@media (max-width: 900px){
  .auth{ grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 16px; }
  .auth-art{ min-height: 0; padding: 56px 22px 22px; }
  .auth-big{ font-size: 42px; }
  .auth-small{ display: none; }
  .auth-credit{ top: 14px; right: 16px; font-size: 11px; }
}
.lg-captcha{ min-height: 65px; }
.lg-captcha[hidden]{ display: none; }

/* the footer tree: a real photo, framed like a print */
.foot-tree{ margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ft-img{ display: block; aspect-ratio: 22 / 26; border-radius: 10px; overflow: hidden; background: rgba(110,138,92,.18); }
.ft-img img{ width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s ease; }
.ft-img img.is-in{ opacity: 1; }
.ft-by{ font-size: 11.5px; color: var(--fg-2); }
.ft-by a{ color: inherit; font-weight: 400; text-decoration: underline; }
.foot-mail{ display: inline-block; margin-top: 6px; color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px){ .foot-tree{ max-width: 160px; } }
.ad-help{ margin: -6px 0 14px; font-size: 14px; color: var(--muted); }
.pin-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pin-grid button{ padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: pointer; background: rgba(35,64,66,.07); }
.pin-grid button:hover, .pin-grid button:focus-visible{ outline: 3px solid var(--orange); outline-offset: 1px; }
.pin-grid img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-after{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 4px 0 28px; }
.rs-after[hidden]{ display: none; }
.rs-after .acct-btn{ color: var(--paper-lite); }
.lg-help{ margin-top: 22px; }
.acct-msg a, .acct-msg .acct-link{ color: inherit; font-weight: 600; text-decoration: underline; font-size: inherit; }