*, *::before, *::after { box-sizing: border-box; }
:root {
  --ink: #10151c;
  --quiet: var(--reading);
  --paper: #eef1f5;
  --card: #ffffff;
  --edge: #8a93a0;
  --accent: #0b5fa5;
  --accent-ink: #ffffff;
  --good: #1d6b3a;
  --warn: #8a4b00;
  --reading: #14532d;
  --unit: calc(1rem * var(--size));
  --label-column: min(calc(var(--unit) * 8), 55%);
}
html {
  font-size: 100%;
  overflow-x: hidden;
  scroll-padding-top: var(--stuck, var(--unit));
  scroll-padding-bottom: calc(1rem * var(--nav-cap) * 8.4);
}
body, button, .preset .name, .status, .said { overflow-wrap: break-word; }
body {
  margin: 0;
  padding: min(var(--unit), 5vw);
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--unit);
  line-height: 1.4;
}
* { transition: none !important; animation: none !important; }
a, button { font: inherit; }
:focus-visible {
  outline: calc(var(--unit) * 0.28) solid var(--accent);
  outline-offset: calc(var(--unit) * 0.18);
}
header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unit);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--unit);
}
h1 { font-size: calc(var(--unit) * 1.35); margin: 0; }
.where { color: var(--quiet); font-size: calc(var(--unit) * 0.85); overflow-wrap: break-word; }
.sizing {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
  align-self: flex-start;
}
.sizing button {
  min-height: 3.4rem;
  min-width: 3.4rem;
  padding: 0.6rem 0.9rem;
  border-width: 0.12rem;
  border-radius: 0.4rem;
  font-size: 1rem;
}
button, .button {
  min-height: calc(var(--unit) * 3.4);
  min-width: calc(var(--unit) * 3.4);
  padding: calc(var(--unit) * 0.6) calc(var(--unit) * 0.9);
  border: calc(var(--unit) * 0.12) solid var(--edge);
  border-radius: calc(var(--unit) * 0.4);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--unit) * 0.4);
}
button[disabled] { opacity: 0.55; cursor: default; }
.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.status.settled {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 calc(var(--unit) * 0.1);
  margin-bottom: calc(var(--unit) * 0.6);
  color: var(--quiet);
  font-size: calc(var(--unit) * 0.9);
}
.status {
  background: var(--card);
  border: calc(var(--unit) * 0.12) solid var(--edge);
  border-left: calc(var(--unit) * 0.5) solid var(--good);
  border-radius: calc(var(--unit) * 0.4);
  padding: var(--unit);
  margin-bottom: var(--unit);
}
.status.trouble { border-left-color: var(--warn); }
.status p { margin: 0 0 calc(var(--unit) * 0.4); }
.status p:last-child { margin-bottom: 0; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--unit) * 11)), 1fr));
  gap: var(--unit);
  margin-bottom: var(--unit);
}
.grid form { display: flex; }
.grid .preset { width: 100%; }
.preset {
  flex-direction: column;
  align-items: stretch;
  min-height: calc(var(--unit) * 7);
  padding: var(--unit);
  text-align: left;
}
.leaders .preset {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--unit) * 0.5);
  min-height: calc(var(--unit) * 3.6);
  padding: calc(var(--unit) * 0.5) var(--unit);
}
.leaders .preset .name { font-size: calc(var(--unit) * 1.05); }
.leaders .preset .key { align-self: center; flex: 0 0 auto; }
.preset .name { font-size: calc(var(--unit) * 1.15); font-weight: 600; }
.preset .detail { color: var(--quiet); font-size: calc(var(--unit) * 0.8); }
.preset .key {
  align-self: flex-start;
  border: calc(var(--unit) * 0.08) solid var(--edge);
  border-radius: calc(var(--unit) * 0.25);
  padding: 0 calc(var(--unit) * 0.35);
  font-size: calc(var(--unit) * 0.75);
  color: var(--quiet);
}
.empty {
  background: var(--card);
  border: calc(var(--unit) * 0.12) dashed var(--edge);
  border-radius: calc(var(--unit) * 0.4);
  padding: calc(var(--unit) * 1.5);
  text-align: center;
  color: var(--quiet);
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unit);
  align-items: center;
  margin-bottom: var(--unit);
}
.viewfinder {
  position: relative;
  margin-bottom: var(--unit);
  padding: calc(var(--unit) * 0.25) 0;
  background: var(--paper);
  max-width: calc(100% * var(--picture, 1));
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}
.pinned {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--paper);
}
.pinned header {
  margin-bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--unit) * 0.5);
  padding: calc(var(--unit) * 0.3) 0;
}
.pinned header > div:first-child { flex: 1 1 auto; min-width: 0; }
.pinned header h1 { font-size: calc(var(--unit) * 1.1); }
.corner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--unit) * 0.3);
  flex: 0 1 auto;
  min-width: 0;
}
.tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--unit) * 0.3);
}
.tools form { flex: 0 0 auto; display: flex; }
.tools button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--unit) * 0.1);
  font-size: min(calc(1rem * var(--nav-cap) * 0.8), 3.6vw);
  min-height: calc(1rem * var(--nav-cap) * 3);
  padding: calc(var(--unit) * 0.25) calc(var(--unit) * 0.3);
}
.tools .glyph { flex: 0 0 auto; }
.tools .word { white-space: nowrap; }
@media (max-width: 700px) {
  .pinned header { flex-wrap: wrap; }
  .pinned header > div:first-child { flex: 1 1 0; }
  .corner { display: contents; }
  .tools { flex: 1 1 100%; justify-content: stretch; }
  .tools form { flex: 1 1 auto; }
  .tools button { width: 100%; }
}
.pinned header .where {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pinned header .sizing { flex: 0 0 auto; }
.pinned header,
.nav {
  --unit: calc(1rem * min(var(--size), var(--nav-cap)));
  font-size: var(--unit);
}
.nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.4rem), 1fr));
  gap: calc(var(--unit) * 0.5);
  padding: calc(var(--unit) * 0.4) 0;
  background: var(--paper);
}
.nav form { display: flex; min-width: 0; }
.nav button {
  width: 100%;
  white-space: nowrap;
  padding-left: calc(var(--unit) * 0.4);
  padding-right: calc(var(--unit) * 0.4);
}
.nav button.here {
  border-color: var(--accent);
  border-bottom-width: calc(var(--unit) * 0.35);
  font-weight: 600;
}
.nav.at-bottom { margin-top: 0; }
.viewfinder > img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: calc(50vh * 4 / 3);
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--card);
  border: calc(var(--unit) * 0.08) solid var(--edge);
  border-radius: calc(var(--unit) * 0.4);
}
.closeup-block, .focus-block { margin-bottom: var(--unit); }
.early {
  margin: 0 0 var(--unit);
  padding: calc(var(--unit) * 0.5) 0 calc(var(--unit) * 0.5) var(--unit);
  border-left: calc(var(--unit) * 0.25) solid var(--edge);
}
.front-door {
  margin-top: calc(var(--unit) * 1.5);
  padding-top: var(--unit);
  border-top: calc(var(--unit) * 0.08) solid var(--edge);
}
.front-door .trouble {
  margin: 0 0 var(--unit);
  padding: calc(var(--unit) * 0.5) 0 calc(var(--unit) * 0.5) var(--unit);
  border-left: calc(var(--unit) * 0.25) solid var(--warn);
  font-weight: 600;
}
.front-door label { font-weight: 600; }
.front-door input[type="text"] {
  flex: 1 1 calc(var(--unit) * 12);
  min-width: calc(var(--unit) * 10);
}
.closeup-block h2, .focus-block h2 {
  font-size: calc(var(--unit) * 1.1);
  margin: 0 0 calc(var(--unit) * 0.5);
}
.closeup {
  position: relative;
  overflow: hidden;
  height: min(60vh, 90vw);
  margin-bottom: var(--unit);
  background: #000;
  border: calc(var(--unit) * 0.08) solid var(--edge);
  border-radius: calc(var(--unit) * 0.4);
}
.closeup img {
  position: absolute;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
}
.closeup.live {
  height: min(50vh, 66vw);
  width: min(calc(50vh * 4 / 3), 88vw);
  max-width: calc(50vh * 4 / 3);
  margin: 0 auto calc(var(--unit) * 0.5);
}
.viewfinder .level {
  position: absolute;
  left: calc(var(--unit) * 0.5);
  top: calc(var(--unit) * 0.55);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--unit) * 0.25);
  max-width: 45%;
  font-size: calc(var(--unit) * 0.8);
  pointer-events: none;
}
.closeup.live .level { max-width: none; bottom: 0; }
.viewfinder .level .attitude {
  display: block;
  width: calc(var(--unit) * 4.5);
  height: calc(var(--unit) * 4.5);
}
.viewfinder .level .sky { fill: url(#attitude-sky); }
.viewfinder .level .ground { fill: url(#attitude-ground); }
.viewfinder .level .round {
  fill: url(#attitude-round);
  pointer-events: none;
}
.viewfinder .level[data-stale="1"] .attitude { opacity: 0.25; }
.viewfinder .histogram[data-words="0"] .light-line {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.viewfinder .level[data-words="0"] .level-line {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.viewfinder .level .join,
.viewfinder .level .ladder line {
  stroke: #f2f6fa;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.viewfinder .level .ladder line { stroke-width: 1; opacity: 0.85; }
.viewfinder .level .rim {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.viewfinder .level .wings path {
  fill: none;
  stroke: #ffd21f;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.viewfinder .level .wings circle { fill: #ffd21f; }
.viewfinder .level .pointer { fill: #f2f6fa; }
.viewfinder .level[data-level="1"] .wings path { stroke: #4ade80; }
.viewfinder .level[data-level="1"] .wings circle { fill: #4ade80; }
.viewfinder .level .level-line {
  display: inline-flex;
  gap: calc(var(--unit) * 0.4);
  margin: 0;
  padding: calc(var(--unit) * 0.1) calc(var(--unit) * 0.45);
  background: rgba(0, 0, 0, 0.66);
  border-radius: calc(var(--unit) * 0.25);
  color: #e8edf3;
}
.viewfinder .level .level-words { color: #4ade80; }
.viewfinder .level .score-label,
.viewfinder .histogram .score-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.shutter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: min(calc(var(--unit) * 0.55), 3.5vw);
  padding-bottom: calc(var(--unit) * 0.4);
  --unit: calc(1rem * min(var(--size), var(--nav-cap)));
  font-size: var(--unit);
}
.docked {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: var(--unit);
}
.docked .nav { background: var(--paper); }
.tap-focus { position: absolute; inset: 0; margin: 0; z-index: 1; }
.tap-focus input[type="image"] {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
.picture-size { align-items: center; gap: calc(var(--unit) * 0.4); }
.picture-size .note { margin: 0; }
.shutter .wait {
  display: block;
  font-size: calc(var(--unit) * 0.7);
  opacity: 0.9;
}
.shutter button {
  min-width: calc(var(--unit) * 9);
  box-shadow: 0 0 0 calc(var(--unit) * 0.25) var(--paper),
              0 calc(var(--unit) * 0.12) calc(var(--unit) * 0.5)
              rgba(0, 0, 0, 0.45);
}
.card { display: flex; flex-direction: column; }
.card .preset { width: 100%; }
.card .ordering {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--unit) * 0.4);
  margin-top: calc(var(--unit) * 0.3);
}
.card .ordering form { flex: 1 1 auto; display: flex; min-width: min-content; }
.card .ordering button {
  width: 100%;
  min-height: calc(var(--unit) * 2.4);
  font-size: calc(var(--unit) * 0.85);
  gap: calc(var(--unit) * 0.3);
}
.card .heart[aria-pressed="true"] {
  color: var(--reading);
  border-color: var(--reading);
}
.card .heart-word { font-size: calc(var(--unit) * 0.8); }
.shutter .beside {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.shutter .before { justify-self: end; }
.shutter .after { justify-self: start; }
.shutter .focusing { flex: 0 1 auto; min-width: 0; }
.shutter #take-picture { max-width: 100%; }
.shutter .focusing button {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-size: min(calc(var(--unit) * 0.85), 4.2vw);
  overflow-wrap: normal;
}
.shutter .focusing .now { font-size: min(calc(var(--unit) * 0.7), 3.4vw); }
.editor {
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 0.5);
  margin-top: calc(var(--unit) * 0.5);
  padding-top: calc(var(--unit) * 0.5);
  border-top: 1px solid var(--edge);
}
.editor .holds {
  display: grid;
  grid-template-columns: var(--label-column) minmax(0, 1fr);
  gap: calc(var(--unit) * 0.15) calc(var(--unit) * 0.6);
  margin: 0;
}
.editor .holds div { display: contents; }
.editor .holds dt { color: var(--quiet); }
.editor .holds dd { margin: 0; color: var(--reading); font-weight: 600; }
.editor .captured, .editor .holds-none {
  margin: 0;
  color: var(--quiet);
  font-size: calc(var(--unit) * 0.8);
}
.account {
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 0.4);
}
.account .signing-in {
  display: grid;
  grid-template-columns: var(--label-column) minmax(0, 1fr);
  gap: calc(var(--unit) * 0.3) calc(var(--unit) * 0.6);
  align-items: center;
}
.account .signing-in .primary, .account .signing-in .note { grid-column: 1 / -1; }
.account input[type="email"], .account input[type="password"],
.account input[type="text"] {
  min-width: 0;
  width: 100%;
  font: inherit;
  padding: calc(var(--unit) * 0.4);
  border: 1px solid var(--edge);
  border-radius: calc(var(--unit) * 0.3);
  background: var(--card);
  color: var(--ink);
}
.account .secret { display: flex; gap: calc(var(--unit) * 0.3); min-width: 0; }
.account .secret input { flex: 1 1 auto; }
.account .secret .reveal { flex: 0 0 auto; }
.account .creating { padding-top: calc(var(--unit) * 0.3); }
.ask { display: flex; flex-direction: column; gap: calc(var(--unit) * 0.5); }
.ask h2 { margin: 0; font-size: calc(var(--unit) * 1.1); }
.ask .canned { flex-wrap: wrap; }
.ask .asking { flex-wrap: wrap; align-items: center; }
.ask .asking input[type="text"] {
  flex: 1 1 calc(var(--unit) * 12);
  min-width: 0;
  font: inherit;
  padding: calc(var(--unit) * 0.4);
  border: 1px solid var(--edge);
  border-radius: calc(var(--unit) * 0.3);
  background: var(--card);
  color: var(--ink);
}
.ask .answer {
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 0.4);
  padding: calc(var(--unit) * 0.6);
  border: 1px solid var(--edge);
  border-radius: calc(var(--unit) * 0.4);
  background: var(--card);
}
.ask .answer .asked { margin: 0; color: var(--quiet); font-style: italic; }
.ask .answer .reply { margin: 0; white-space: pre-line; }
.ask .answer .holds {
  display: grid;
  grid-template-columns: var(--label-column) minmax(0, 1fr);
  gap: calc(var(--unit) * 0.15) calc(var(--unit) * 0.6);
  margin: 0;
}
.ask .answer .holds div { display: contents; }
.ask .answer .holds dt { color: var(--quiet); }
.ask .answer .holds dd { margin: 0; color: var(--reading); font-weight: 600; }
.editor .renaming {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--unit) * 0.4);
  min-width: 0;
}
.editor label { font-size: calc(var(--unit) * 0.8); }
.editor input[type="text"] {
  flex: 1 1 calc(var(--unit) * 6);
  min-width: 0;
}
.editor .destructive {
  color: var(--warn);
  border-color: var(--warn);
}
.card .to-top[disabled] { opacity: 0.45; }
.grid.leaders { margin-bottom: var(--unit); }
.viewfinder .histogram {
  position: absolute;
  right: calc(var(--unit) * 0.5);
  bottom: calc(var(--unit) * 0.55);
  max-width: 45%;
  font-size: calc(var(--unit) * 0.8);
  padding: calc(var(--unit) * 0.15) calc(var(--unit) * 0.45);
  background: rgba(0, 0, 0, 0.66);
  border-radius: calc(var(--unit) * 0.25);
  pointer-events: none;
  text-align: right;
}
.viewfinder .histogram .shape {
  display: block;
  width: calc(var(--unit) * 6);
  height: calc(var(--unit) * 2);
  margin-left: auto;
}
.viewfinder .histogram .shape polyline {
  fill: none;
  stroke: #e8edf3;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5;
}
.viewfinder .histogram .light-line {
  display: flex;
  gap: calc(var(--unit) * 0.4);
  margin: 0;
  justify-content: flex-end;
  color: #e8edf3;
}
.viewfinder .histogram .light-words { color: #4ade80; }
.peak {
  position: absolute;
  pointer-events: none;
  image-rendering: pixelated;
}
.peaking { margin-bottom: var(--unit); }
.viewfinder .peaking {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--unit) * 0.55);
  max-width: calc(50vh * 4 / 3);
  margin: 0 auto;
  padding: 0 calc(var(--unit) * 0.5);
  pointer-events: none;
}
.closeup.live .peaking { max-width: none; }
.viewfinder .peaking .score-line,
.viewfinder .peaking .score-bar {
  background: rgba(0, 0, 0, 0.66);
  border-radius: calc(var(--unit) * 0.25);
}
.viewfinder .peaking .score-line {
  display: inline-flex;
  margin: 0 0 calc(var(--unit) * 0.15);
  padding: calc(var(--unit) * 0.1) calc(var(--unit) * 0.45);
}
.viewfinder .peaking .score-label,
.viewfinder .peaking .score-best { color: #e8edf3; }
.viewfinder .peaking .score-now { color: #4ade80; }
.viewfinder .peaking .score-bar {
  width: calc(var(--unit) * 9);
  height: calc(var(--unit) * 0.45);
  border-color: rgba(255, 255, 255, 0.45);
}
.viewfinder .peaking .score-bar span { background: #4ade80; }
.score-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--unit) * 0.5);
  margin: 0 0 calc(var(--unit) * 0.35);
}
.score-label { font-weight: 600; }
.score-now {
  font-size: calc(var(--unit) * 1.8);
  font-weight: 700;
  color: var(--reading);
  font-variant-numeric: tabular-nums;
}
.score-best { color: var(--quiet); }
.score-bar {
  height: calc(var(--unit) * 0.6);
  background: var(--card);
  border: calc(var(--unit) * 0.08) solid var(--edge);
  border-radius: calc(var(--unit) * 0.3);
  overflow: hidden;
}
.score-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--reading);
}
.whole-shot { margin-bottom: calc(var(--unit) * 0.5); }
.whole-shot input[type="image"] {
  display: block;
  background: #000;
  border: calc(var(--unit) * 0.08) solid var(--edge);
  border-radius: calc(var(--unit) * 0.4);
  cursor: crosshair;
}
.pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--unit) * 0.5);
  margin-bottom: var(--unit);
  max-width: calc(var(--unit) * 24);
}
.pad form:nth-child(1) { grid-column: 2; }
.pad form:nth-child(2) { grid-column: 1; grid-row: 2; }
.pad form:nth-child(3) { grid-column: 2; grid-row: 2; }
.pad form:nth-child(4) { grid-column: 3; grid-row: 2; }
.pad form:nth-child(5) { grid-column: 2; grid-row: 3; }
.pad form { display: flex; }
.pad button { width: 100%; }
.ways-row .ways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--unit) * 0.5);
}
.ways-row form { display: flex; }
.ways-row button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--ink);
  opacity: 1;
}
.row.steps { margin-bottom: calc(var(--unit) * 0.75); }
.row.steps .what { flex: 0 0 var(--label-column); font-weight: 600; }
.row.steps .ways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--unit) * 0.5);
}
.row.steps form { display: flex; }
.row.steps button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--ink);
  opacity: 1;
}
.dials { margin-bottom: var(--unit); }
.dial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--unit) * 0.5);
  margin-bottom: calc(var(--unit) * 0.5);
}
.dial .what {
  flex: 0 0 var(--label-column);
  font-weight: 600;
}
.dial .now {
  flex: 0 0 calc(var(--unit) * 4);
  font-variant-numeric: tabular-nums;
  color: var(--reading);
  font-weight: 600;
}
.dial .ways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--unit) * 0.5);
  min-width: 0;
}
.dial form { display: flex; }
.dial button { min-width: min(calc(var(--unit) * 5.5), 100%); }
.dialkeys { color: var(--quiet); font-size: calc(var(--unit) * 0.75); }
form.save {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--unit) * 0.5);
  align-items: center;
  flex: 1 1 100%;
  min-width: 0;
}
input[type=text] {
  font: inherit;
  min-height: calc(var(--unit) * 3.4);
  padding: calc(var(--unit) * 0.5) calc(var(--unit) * 0.7);
  border: calc(var(--unit) * 0.12) solid var(--edge);
  border-radius: calc(var(--unit) * 0.4);
  flex: 1 1 calc(var(--unit) * 8);
  min-width: 0;
  max-width: 100%;
}
.said {
  background: var(--card);
  border: calc(var(--unit) * 0.12) solid var(--edge);
  border-left: calc(var(--unit) * 0.5) solid var(--accent);
  border-radius: calc(var(--unit) * 0.4);
  padding: var(--unit);
  margin-bottom: var(--unit);
}
.said p { margin: 0 0 calc(var(--unit) * 0.35); }
.said p:last-child { margin-bottom: 0; }
.said p:first-child { font-weight: 600; }
.keys {
  color: var(--quiet);
  font-size: calc(var(--unit) * 0.8);
  margin-top: var(--unit);
  line-height: 2.1;
  word-spacing: calc(var(--unit) * 0.1);
}
.build .built { color: var(--quiet); }
.keys kbd {
  display: inline-block;
  border: calc(var(--unit) * 0.08) solid var(--edge);
  border-radius: calc(var(--unit) * 0.2);
  padding: 0 calc(var(--unit) * 0.35);
  margin: 0 calc(var(--unit) * 0.12);
  background: var(--card);
}
.build {
  color: var(--quiet);
  font-size: calc(var(--unit) * 0.7);
  margin-top: calc(var(--unit) * 0.5);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2f5f8; --paper: #11151a; --card: #1b2129;
    --edge: #66707c; --accent: #4aa3ef; --accent-ink: #06121d;
    --good: #63c98a; --warn: #e8a75a;
    --reading: #4ade80;  
  }
}
:root[data-theme="dark"] {
    --ink: #f2f5f8; --paper: #11151a; --card: #1b2129;
    --edge: #66707c; --accent: #4aa3ef; --accent-ink: #06121d;
    --good: #63c98a; --warn: #e8a75a;
    --reading: #4ade80;  
}