@font-face {
  font-family: "Playpen Sans";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/static/fonts/playpen-sans-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Playpen Sans";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/static/fonts/playpen-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "GFS Didot";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/gfs-didot-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "GFS Didot";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/gfs-didot-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --bg: light-dark(#f4efe4, #181b20);
  --surface: light-dark(#fbf8f1, #22262d);
  --sunken: light-dark(#ece5d5, #1c1f25);
  --text: light-dark(#22201c, #ece5d6);
  --muted: light-dark(#665f53, #a59d8e);
  --line: light-dark(#ddd4c2, #353a44);
  --line-strong: light-dark(#c4b89f, #4b515d);
  --primary: light-dark(#2f4a6d, #9fb6d8);
  --on-primary: light-dark(#fbf8f1, #f3eee3);
  --button: light-dark(#2f4a6d, #41608c);
  --button-hover: light-dark(#253c59, #4b6b99);
  --gold: light-dark(#c9962e, #d6a943);
  --gold-line: light-dark(#9c7320, #d6a943);
  --gold-soft: light-dark(rgb(201 150 46 / 14%), rgb(214 169 67 / 14%));
  --ok: light-dark(#37704c, #86c298);
  --ok-bg: light-dark(#e4ebdc, #1f2b24);
  --bad: light-dark(#ab3f2a, #e8937c);
  --bad-bg: light-dark(#f6e6de, #33221e);
  --tile: light-dark(#ddd0b4, #3a404b);
  --tile-slate: light-dark(#2f4a6d, #5a77a0);
  --shadow: 0 1px 0 light-dark(rgb(80 62 30 / 6%), rgb(0 0 0 / 30%)), 0 2px 11px -4px light-dark(rgb(80 62 30 / 14%), rgb(0 0 0 / 45%));
  --radius: 10px;
  --display-font: "GFS Didot", Didot, "Bodoni 72", Georgia, serif;
  --answer-font: "Playpen Sans", system-ui, sans-serif;
  --strip: url("/static/brand/strip.svg");
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --strip: url("/static/brand/strip-dark.svg");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --strip: url("/static/brand/strip-dark.svg");
  }
}

@supports not (color: light-dark(#000, #fff)) {
  :root,
  :root[data-theme] {
    color-scheme: light;
    --bg: #f4efe4;
    --surface: #fbf8f1;
    --sunken: #ece5d5;
    --text: #22201c;
    --muted: #665f53;
    --line: #ddd4c2;
    --line-strong: #c4b89f;
    --primary: #2f4a6d;
    --on-primary: #fbf8f1;
    --button: #2f4a6d;
    --button-hover: #253c59;
    --gold: #c9962e;
    --gold-line: #9c7320;
    --gold-soft: rgb(201 150 46 / 14%);
    --ok: #37704c;
    --ok-bg: #e4ebdc;
    --bad: #ab3f2a;
    --bad-bg: #f6e6de;
    --tile: #ddd0b4;
    --tile-slate: #2f4a6d;
    --shadow: 0 1px 0 rgb(80 62 30 / 6%), 0 2px 11px -4px rgb(80 62 30 / 14%);
    --strip: url("/static/brand/strip.svg");
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

main,
header.site {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 16px;
}

main {
  padding-top: 0.5rem;
  padding-bottom: 2.5rem;
}

header.site {
  padding-top: 6px;
  padding-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  flex-shrink: 0;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

.wordmark {
  font-family: var(--display-font);
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.01em;
  padding-bottom: 2px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.875rem;
  white-space: nowrap;
  text-decoration: none;
}

.nav a:last-child {
  padding-right: 0;
}

.nav a:hover {
  color: var(--text);
}

.nav a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline 2px var(--gold);
  text-underline-offset: 0.45em;
}

.nav a.acct {
  position: relative;
  justify-content: center;
  min-width: 44px;
  padding: 0;
}

.nav a.acct .icon {
  display: block;
}

.nav a.acct[aria-current="page"] {
  text-decoration: none;
}

.nav a.acct[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--gold);
}

.strip {
  height: 8px;
  margin-bottom: 8px;
  background: var(--strip) repeat-x 0 0 / auto 8px;
}

h1,
h2 {
  font-family: var(--display-font);
  font-weight: 400;
  letter-spacing: 0.005em;
}

h1 {
  font-size: 2rem;
  line-height: 1.15;
  margin: 0.9rem 0 0.6rem;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

h2 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 2rem 0 0.5rem;
}

a {
  color: var(--primary);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

p {
  margin: 0.5rem 0;
}

.lede {
  color: var(--muted);
  margin: -0.15rem 0 1rem;
}

.foot {
  margin-top: 1.5rem;
  font-size: 0.925rem;
}

.muted,
.meta,
.hint,
.count {
  color: var(--muted);
}

.ok {
  color: var(--ok);
}

.bad {
  color: var(--bad);
}

.card.result,
.item.ok,
.item.bad {
  color: var(--text);
}

.error,
.notice,
.warning {
  border-radius: 2px 8px 8px 2px;
  padding: 10px 14px;
  border-left: 3px solid currentColor;
}

.warning {
  color: var(--text);
  background: var(--gold-soft);
  border-left-color: var(--gold);
}

.error {
  color: var(--bad);
  background: var(--bad-bg);
}

.notice {
  color: var(--ok);
  background: var(--ok-bg);
}

form {
  margin: 0;
}

.stack label:first-of-type {
  margin-top: 0;
}

.stack button {
  width: 100%;
}

.rows {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.rows li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.rows li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rows .meta {
  display: block;
  font-size: 0.9rem;
}

.rows button {
  margin-top: 0;
}

button.small,
.button.small {
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.95rem;
}

code.copy {
  display: block;
  padding: 10px 12px;
  margin: 0.5rem 0;
  border-radius: 6px;
  background: var(--sunken);
  border: 1px solid var(--line);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

.secret {
  border-left: 3px solid var(--gold);
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 1rem 0 0.35rem;
}

input,
select,
textarea {
  font: inherit;
  font-size: max(16px, 1rem);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-bottom: 2px solid var(--gold-line);
  border-radius: 6px 6px 2px 2px;
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold-line);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 44px;
  padding: 0 22px;
  margin-top: 1rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-primary);
  background: var(--button);
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:hover,
.button:hover {
  background: var(--button-hover);
}

button:active,
.button:active {
  transform: translateY(1px);
}

button.secondary,
.button.secondary {
  color: var(--primary);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

button.secondary:hover,
.button.secondary:hover {
  background: var(--sunken);
}

button.danger {
  color: var(--bg);
  background: var(--bad);
}

button.danger:hover {
  background: var(--bad);
  filter: brightness(0.92);
}

.danger-zone {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}

.danger-zone a {
  color: var(--bad);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 18px 18px;
  margin: 0.75rem 0;
}

.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.card button {
  width: 100%;
}

.verdict {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: -6px 0 0.35rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.verdict .tick {
  color: var(--ok);
  font-weight: 700;
}

.sentence {
  font-size: 1.3rem;
  line-height: 2.1;
  margin: 0;
}

.sentence input {
  display: inline-block;
  width: 9ch;
  min-height: 0;
  padding: 0 4px;
  margin: 0 2px;
  font-size: max(16px, 1em);
  line-height: 1.3;
  border: 0;
  border-bottom: 2px solid var(--gold-line);
  border-radius: 2px 2px 0 0;
  background: transparent;
  text-align: center;
}

.sentence input:focus {
  box-shadow: none;
  background: var(--gold-soft);
  border-bottom-color: var(--gold);
}

.sentence input::placeholder {
  color: transparent;
}

.sentence .hint {
  font-size: 0.8em;
}

.sentence input,
.filled,
.fix .given,
.fix .expected {
  font-family: var(--answer-font);
}

.filled,
.fix .expected {
  font-weight: 600;
  border-bottom: 2px solid currentColor;
}

.fix .given {
  text-decoration-thickness: 2px;
  margin-right: 0.15em;
}

.explanation {
  margin-top: 0.75rem;
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--line-strong);
  background: var(--sunken);
  color: var(--text);
  white-space: pre-line;
}

.position {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1rem;
}

.progress {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.progress .bar {
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.count {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.position + .card {
  margin-top: 0.6rem;
}

.set-head h1 {
  font-size: 1.75rem;
  margin-bottom: 0.3rem;
}

.set-head .instructions {
  margin: 0 0 0.15rem;
}

.deck-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  min-height: 28px;
  font-size: 0.9rem;
}

.star-toggle button {
  gap: 4px;
  min-height: 44px;
  min-width: 0;
  margin: 0;
  padding: 0 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
}

.star-toggle button:hover {
  color: var(--text);
  background: transparent;
}

.star-toggle button span {
  font-size: 1.05rem;
}

.star-toggle button[aria-pressed="true"] {
  color: var(--text);
}

.star-toggle button[aria-pressed="true"] span {
  color: var(--gold-line);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 12px;
  margin: 0.2rem 0 0;
  border-bottom: 1px solid var(--line);
}

.seg {
  display: inline-flex;
  margin: 0 -8px;
}

.seg a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.seg a:hover {
  color: var(--text);
}

.seg a[aria-current] {
  color: var(--text);
  text-decoration: underline 2px var(--gold);
  text-underline-offset: 0.5em;
}

.seg a.toggle {
  margin-left: 4px;
  padding-left: 12px;
  background: linear-gradient(var(--line-strong), var(--line-strong)) left center / 1px 14px no-repeat;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0 7px;
  border-radius: 4px;
  background: var(--bad-bg);
  white-space: nowrap;
}

.badge.bad {
  padding: 0;
  background: none;
  font-weight: 500;
}

.badge.vis {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  vertical-align: 2px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sets,
.items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.set-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  align-items: center;
  min-height: 64px;
  padding: 14px 16px;
  margin: 10px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
}

.set-row:hover {
  border-color: var(--line-strong);
}

.set-row .title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.set-row .meta {
  grid-column: 1;
  font-size: 0.875rem;
}

.set-row .meta:empty {
  display: none;
}

.meter {
  grid-column: 1 / -1;
  display: block;
  height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.meter > span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.set-row .score {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 0.95rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.star-mark {
  color: var(--gold-line);
  font-weight: 400;
}

.sets li.deck {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sets li.deck .set-row {
  flex: 1;
  min-width: 0;
}

.star button {
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border-radius: 999px;
}

.star button:hover {
  background: var(--sunken);
}

.star button[aria-pressed="true"] {
  color: var(--gold-line);
}

.items .item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 12px 0;
}

.items .item button {
  margin-top: 0.75rem;
}

.ask {
  margin-top: 2.5rem;
}

.copy-btn,
.card .copy-btn,
#ask-copy {
  width: auto;
  margin-top: 0;
}

.group h2 a {
  color: inherit;
  text-decoration: none;
}

.group h2 a:hover {
  text-decoration: underline;
}

.items .item.mistake .sentence {
  font-size: 1.15rem;
  line-height: 1.85;
}

.item.mistake .meta {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}

.kind {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 0 7px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--muted);
}

.motif {
  flex-shrink: 0;
  overflow: visible;
}

.motif rect {
  fill: var(--tile);
}

.motif .slate {
  fill: var(--tile-slate);
}

.motif .hole {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 1.5 1;
}

.done {
  text-align: center;
  padding-top: 28px;
}

.done .motif {
  width: 36px;
  height: 36px;
}

.done.complete .motif .hole {
  fill: var(--gold);
  stroke: none;
}

.done h2 {
  margin: 0.75rem 0 0.15rem;
}

.done .links {
  margin: 0.9rem 0 0;
  font-size: 0.925rem;
  color: var(--muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 1rem;
}

.actions .button {
  margin-top: 0;
  flex: 1 1 auto;
}

.empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
  margin-top: 1.5rem;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.empty .motif {
  margin-top: 2px;
}

.card-area {
  position: relative;
}

#kbd-keeper {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .progress .bar {
    transition: none;
  }
}

#flash {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 40rem;
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  background: var(--bad-bg);
  color: var(--bad);
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 100;
}

#flash[hidden] {
  display: none;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-head .button,
.page-head button {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.inline-form {
  display: flex;
  gap: 8px;
}

.inline-form input {
  flex: 1;
  min-width: 0;
}

.inline-form button {
  margin: 0;
  flex-shrink: 0;
}

.gap {
  white-space: nowrap;
}

.facts {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
}

.facts li + li {
  margin-top: 0.2rem;
}

.ask-allow {
  font-size: 1.1rem;
}

.issues {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
  overflow-wrap: anywhere;
}

.issues li + li {
  margin-top: 0.15rem;
}

.set-head .notice {
  margin: 0.5rem 0;
}

.set-head .notice p {
  margin: 0;
}

.set-head .notice .issues {
  color: var(--text);
  font-size: 0.95rem;
}

.editor .fields {
  padding-top: 6px;
}

.editor .fields label:first-child {
  margin-top: 0.5rem;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 7rem;
  gap: 0 12px;
}

.editor > label {
  margin-top: 1.5rem;
}

.cheat {
  margin: 0 0 0.6rem;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.925rem;
}

.cheat summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--primary);
  cursor: pointer;
}

.cheat[open] {
  padding-bottom: 10px;
}

.cheat pre {
  margin: 0.5rem 0;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--sunken);
  font-family: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cheat ul {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
}

.cheat code {
  font-family: inherit;
  font-weight: 600;
  white-space: nowrap;
}

textarea.deck-source {
  display: block;
  min-height: 50vh;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
  background: var(--surface);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-actions > * {
  flex: 1 1 10rem;
}

.confirm .button,
.confirm button {
  width: 100%;
}

.confirm .button {
  margin-top: 8px;
}

.steps {
  margin: 0.75rem 0 0.5rem;
  padding-left: 1.3rem;
}

.steps li + li {
  margin-top: 0.2rem;
}

.steps li::marker {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sentence input.locked {
  color: var(--ok);
  font-weight: 600;
  border-bottom-color: var(--ok);
}

.sentence input.locked:focus {
  background: transparent;
}

.sentence input.wrong {
  border-bottom-color: var(--bad);
  animation: shake 300ms ease-in-out;
}

@keyframes shake {
  20% {
    transform: translateX(-4px);
  }

  40% {
    transform: translateX(4px);
  }

  60% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sentence input.wrong {
    animation: none;
  }
}

.nudge {
  margin: 0.5rem 0 0;
  font-size: 0.925rem;
  color: var(--muted);
}

.check-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1rem;
}

.check-actions button,
.card .check-actions button {
  margin: 0;
}

.check-actions button:first-child {
  flex: 1;
}

.items .check-actions button:first-child {
  flex: 0 1 auto;
}

button.quiet,
.card button.quiet {
  width: auto;
  flex: 0 0 auto;
  padding: 0 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
}

button.quiet:hover {
  color: var(--text);
  background: var(--sunken);
}

.why {
  margin-top: 0.6rem;
  font-size: 0.925rem;
  color: var(--muted);
}

.why summary {
  width: fit-content;
  padding: 4px 0;
  cursor: pointer;
}

.why p {
  margin: 0.25rem 0 0;
  white-space: pre-line;
  color: var(--text);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-foot {
  margin-top: 2rem;
  font-size: 0.875rem;
}

.page-foot a {
  color: var(--muted);
}

.position .first,
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -14px 0;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.jump {
  margin: 0.25rem 0 -0.5rem;
  text-align: right;
}

.jump a {
  margin: 0;
}

.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0.75rem 0;
  text-align: center;
}

.qr {
  display: block;
  width: min(240px, 70vw);
  height: auto;
  padding: 0;
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.pass {
  position: relative;
}

.pass input {
  padding-right: 64px;
}

.pass .reveal,
.stack .pass .reveal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 2px;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border-radius: 0 6px 0 0;
}

.pass .reveal:hover {
  color: var(--text);
  background: transparent;
}

.pass .reveal[aria-pressed="true"] {
  color: var(--text);
}

.site-foot {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 16px 1.5rem;
}

.site-foot .theme-switch {
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.theme-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 2px;
  font-size: 0.85rem;
  color: var(--muted);
}

.theme-switch .label {
  margin-right: 6px;
}

.theme-switch button {
  min-height: 44px;
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  font-size: inherit;
  font-weight: 400;
  color: var(--muted);
  background: transparent;
}

.theme-switch button:hover {
  color: var(--text);
  background: transparent;
}

.theme-switch button[aria-pressed="true"] {
  color: var(--text);
  text-decoration: underline 2px var(--gold);
  text-underline-offset: 0.45em;
}

@media (max-width: 389px) {
  .nav a {
    padding: 0 5px;
  }

  .controls {
    column-gap: 6px;
  }

  .seg {
    margin: 0 -6px;
  }

  .seg a {
    padding: 0 6px;
  }

  .seg a.toggle {
    margin-left: 2px;
    padding-left: 9px;
  }
}

@media (max-width: 369px) {
  .brand .wordmark {
    display: none;
  }
}