:root {
  --ground: #e9ecf5;
  --ink: #1b1830;
  --soft: #5e5a78;
  --line: #c9cbe0;
  --accent: #6b3bf5;
  --bolt: #f2c230;
  --field: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #17142a; --ink: #ece9f7; --soft: #a9a3c7; --line: #332d52;
    --accent: #a88bff; --bolt: #f5cd4d; --field: #211c3a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #17142a; --ink: #ece9f7; --soft: #a9a3c7; --line: #332d52;
  --accent: #a88bff; --bolt: #f5cd4d; --field: #211c3a; color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 18px/1.6 "Atkinson Hyperlegible", system-ui, sans-serif;
}
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.top { display: flex; align-items: center; gap: 10px; padding: 20px clamp(16px, 5vw, 64px); font-weight: 700; }
.top a { margin-left: auto; font-weight: 400; }
.mark { width: 18px; height: 18px; background: var(--accent);
  clip-path: polygon(40% 0, 100% 0, 62% 42%, 100% 42%, 20% 100%, 44% 55%, 0 55%); }

main { padding: 0 clamp(16px, 5vw, 64px); max-width: 1100px; }

/* The hero is the form: a sentence you complete. */
.ask { padding: clamp(32px, 8vh, 96px) 0 48px; }
.ask h1 {
  font: 800 clamp(34px, 5.6vw, 68px)/1.08 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -0.02em; margin: 0; max-width: 20ch;
}
/* The app names sit inside the sentence as a compact row, smaller than the headline around them. */
.picks { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: .3em 0 .35em; max-width: 36em;
  font: 700 clamp(18px, 2.1vw, 26px)/1.25 "Atkinson Hyperlegible", system-ui, sans-serif; letter-spacing: 0; }
.pick { display: inline-block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span {
  display: inline-block; padding: .3em .7em; border: 2px solid var(--line); border-radius: 999px; color: var(--soft);
  transition: background-color .15s, color .15s, border-color .15s;
}
.pick input:checked + span { background: var(--bolt); color: #1b1830; border-color: transparent; }
.pick input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.pick input:disabled + span { cursor: default; }
.pick:hover input:not(:disabled):not(:checked) + span { color: var(--ink); border-color: var(--accent); }

.send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 36px 0 0; font-size: 20px; }
.send input {
  flex: 1 1 260px; min-width: 0; max-width: 420px; padding: 14px 16px; font: inherit;
  color: var(--ink); background: var(--field); border: 2px solid var(--line); border-radius: 10px;
}
.send input:focus { border-color: var(--accent); outline: none; }
.send button {
  padding: 14px 22px; font: 700 18px/1 "Atkinson Hyperlegible", system-ui, sans-serif; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; cursor: pointer;
}
.send button:disabled { background: var(--line); color: var(--soft); cursor: not-allowed; }
.fine { color: var(--soft); font-size: 15px; max-width: 60ch; margin: 14px 0 0; }

/* The log: every app, newest status first in the data file. */
.log { border-top: 2px solid var(--ink); padding: 28px 0 64px; }
.log h2 { font: 800 28px/1.2 "Bricolage Grotesque", system-ui, sans-serif; margin: 0 0 8px; }
.log ul { list-style: none; margin: 0; padding: 0; }
.app {
  display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 2px 20px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.app h3 { margin: 0; font: 700 21px/1.3 "Atkinson Hyperlegible", system-ui, sans-serif; }
.app h3 a { color: var(--ink); text-decoration-color: var(--accent); }
.app p { grid-column: 2; margin: 0; color: var(--soft); max-width: 62ch; }
.state { grid-row: span 3; font-size: 15px; color: var(--soft); }
.app .new { grid-column: 2; margin-top: 6px; color: var(--ink); font-size: 16px; }
.app .new time { color: var(--soft); font-size: 14px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.log > .fine { margin: 0 0 8px; }
.state-live::before, .state-beta::before, .state-soon::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px;
}
.state-live::before { background: #2f9e6b; }
.state-beta::before { background: var(--bolt); }
.state-soon::before { border: 2px solid var(--soft); width: 7px; height: 7px; }
.app:target { background: color-mix(in srgb, var(--bolt) 22%, transparent); }

footer { padding: 24px clamp(16px, 5vw, 64px) 40px; color: var(--soft); font-size: 15px; }

@media (max-width: 560px) {
  .app { grid-template-columns: 1fr; }
  .app p, .app .new { grid-column: 1; }
  .state { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .pick span { transition: none; } }