/* moonknob: a specimen card. Green tea paper, green-ink type, one small
   instrument on it, and nothing louder than a hairline. The four greens are
   spent where they read: the palest as the paper and the code wells, the two
   middle ones as the band and the instrument, the deepest as ink and rules. */

:root {
  --frame: #eff5e9;
  --panel: #e6f2dd;
  --well: #e6f2dd;
  --plate: #b1d3b9;
  --raise: #88bda4;
  --ink: #1b2b25;
  --ink-2: #43604f;
  --head-ink: #2f4e44;
  --line: color-mix(in srgb, #659287 46%, transparent);
  --line-soft: color-mix(in srgb, #659287 24%, transparent);
  --accent: #3f6a5c;
  --mark: #659287;
  --icon: #3d5a4d;
  --on: #1b2b25;
  --on-ink: #e6f2dd;
  --stop: #8c3b28;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --frame: #101a16;
    --panel: #16241e;
    --well: #0b1512;
    --plate: #1e3129;
    --raise: #2a4136;
    --ink: #e6f2e4;
    --ink-2: #a8c4b4;
    --head-ink: #f0f8ec;
    --line: color-mix(in srgb, #88bda4 34%, transparent);
    --line-soft: color-mix(in srgb, #88bda4 17%, transparent);
    --accent: #88bda4;
    --mark: #88bda4;
    --icon: #e8f2e8;
    --on: #88bda4;
    --on-ink: #0d1a15;
    --stop: #e08a70;
  }
}

:root[data-theme="dark"] {
  --frame: #101a16;
  --panel: #16241e;
  --well: #0b1512;
  --plate: #1e3129;
  --raise: #2a4136;
  --ink: #e6f2e4;
  --ink-2: #a8c4b4;
  --head-ink: #f0f8ec;
  --line: color-mix(in srgb, #88bda4 34%, transparent);
  --line-soft: color-mix(in srgb, #88bda4 17%, transparent);
  --accent: #88bda4;
  --mark: #88bda4;
  --icon: #e8f2e8;
  --on: #88bda4;
  --on-ink: #0d1a15;
  --stop: #e08a70;
}

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

html {
  font-variant-ligatures: no-contextual;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

html,
button,
input,
textarea,
select {
  font-variant-ligatures: no-contextual;
}

body {
  margin: 0;
  background: var(--frame);
  color: var(--ink);
  font: 400 14.5px/1.62 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

code,
pre,
kbd {
  font-family: var(--mono);
  font-size: 0.92em;
}

.wrap {
  width: min(980px, 100% - 40px);
  margin-inline: auto;
}

/* The page's own scrollbar: a hairline that appears once the page moves. */
@supports selector(::-webkit-scrollbar) {
  html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  html::-webkit-scrollbar-track {
    background: transparent;
  }

  html::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-radius: 99px;
    background-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background-clip: content-box;
  }

  html::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent);
  }

  html.at-top::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent;
  }

  html.at-top {
    scrollbar-color: transparent transparent;
  }
}

/* Masthead */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--head-ink);
  font: 400 22px/1 var(--display);
  letter-spacing: -0.005em;
}

.wordmark svg {
  width: 22px;
  height: 22px;
  display: block;
  color: var(--mark);
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav a {
  text-decoration: none;
  color: var(--ink-2);
  padding: 3px 0;
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.nav .gh {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--icon);
}

.nav .gh svg {
  width: 16px;
  height: 16px;
  display: block;
}

.switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--icon) 55%, transparent);
  border-radius: 99px;
  background: transparent;
  color: var(--icon);
  cursor: pointer;
}

.switch:hover {
  color: var(--ink);
  border-color: var(--icon);
}

.switch svg {
  width: 13px;
  height: 13px;
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .switch .i-moon {
    display: none;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .switch .i-sun {
    display: none;
  }
}

:root[data-theme="light"] .switch .i-moon,
:root[data-theme="dark"] .switch .i-sun {
  display: none;
}

.wordmark .cap {
  fill: var(--ink);
}

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 392px);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: 34px 0 30px;
}

.eyebrow {
  margin: 0 0 14px;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 16px;
  font: 400 clamp(1.9rem, 3.5vw, 2.35rem)/1.02 var(--display);
  letter-spacing: -0.012em;
  color: var(--head-ink);
}

.lede {
  margin: 0 0 18px;
  max-width: 40ch;
  font-size: 13.6px;
  line-height: 1.72;
  color: var(--ink-2);
}

.install {
  margin: 0 0 16px;
}

.install code {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 11.6px;
  cursor: copy;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.links a {
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
}

/* The plate: the instrument the page is built around. */

.plate {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--plate);
  padding: 11px 13px 12px;
}

.plate-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.plate-head .tag {
  color: var(--ink);
}

.dot {
  width: 5px;
  height: 5px;
  margin-left: auto;
  background: var(--accent);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--accent) 26%, transparent);
}

/* Two positions, one switch: the plate's whole control. */

.rocker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 10px 0 0;
  border: 1px solid var(--accent);
  background: var(--raise);
}

.rocker button {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 13px 6px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.rocker button + button {
  border-left: 1px solid var(--accent);
}

.rocker button::before {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
}

.rocker button:hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

.rocker button[aria-pressed="true"] {
  background: var(--on);
  color: var(--on-ink);
}

.rocker button[aria-pressed="true"]::before {
  background: currentColor;
}

.rocker button:focus-visible,
.keys button:focus-visible,
.chooser button:focus-visible,
.switch:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 11px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

.source {
  padding: 8px 2px 9px;
}

.source + .source {
  border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  padding-left: 11px;
}

.source-name {
  display: block;
  font: 500 9.2px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.source-value {
  display: block;
  margin-top: 4px;
  font: 400 18px/1 var(--mono);
}

.chooser {
  display: flex;
  gap: 4px;
}

.chooser button {
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: transparent;
  color: var(--ink);
  font: 400 15px/1.25 var(--mono);
  cursor: pointer;
}

.chooser button[aria-pressed="true"] {
  border-color: var(--on);
  background: var(--on);
  color: var(--on-ink);
}

.answer {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0 2px;
}

.answer-value {
  font: 400 30px/1 var(--mono);
  letter-spacing: -0.02em;
}

.answer-origin {
  font: 500 9.2px/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.answer-origin[data-origin="the caller"] {
  color: var(--accent);
}

.note {
  min-height: 26px;
  margin: 5px 0 9px;
  padding: 5px 8px;
  border-left: 2px solid color-mix(in srgb, var(--ink) 34%, transparent);
  background: color-mix(in srgb, var(--frame) 55%, transparent);
  font: 400 10.6px/1.5 var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.note[data-state="said"] {
  border-left-color: var(--ink);
}

.note[data-state="stopped"] {
  border-left-color: var(--stop);
  color: var(--stop);
}

.keys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--accent);
  border: 1px solid var(--accent);
}

.keys button {
  padding: 6px 2px 7px;
  border: 0;
  background: var(--panel);
  color: var(--ink);
  font: 500 9.4px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}

.keys button:hover {
  background: var(--panel);
  color: var(--accent);
}

.keys button[aria-pressed="true"] {
  background: var(--on);
  color: var(--on-ink);
}

.plate-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 0;
  font: 400 9.4px/1.4 var(--mono);
  color: var(--ink-2);
}

/* Sections */

section {
  scroll-margin-top: 20px;
}

.head {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.head h2 {
  margin: 0;
  font: 400 clamp(1.15rem, 2vw, 1.35rem)/1.15 var(--display);
  letter-spacing: -0.005em;
  color: var(--head-ink);
}

.head .no {
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.14em;
  background: var(--on);
  color: var(--on-ink);
  padding: 4px 5px 5px;
}

.head p {
  margin: 0 0 0 auto;
  max-width: 42ch;
  font-size: 11.8px;
  color: var(--ink-2);
  text-align: right;
  text-wrap: balance;
}

.order {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--panel);
}

.stop {
  padding: 16px 16px 18px;
}

.stop + .stop {
  border-left: 1px solid var(--line);
}

.stop .n {
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--accent);
}

.stop h3 {
  margin: 8px 0 6px;
  font: 500 13.6px/1.35 var(--text);
  letter-spacing: -0.005em;
  color: var(--ink);
}

.stop p {
  margin: 0;
  font-size: 12.2px;
  line-height: 1.62;
  color: var(--ink-2);
}

.after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding: 16px 0 0;
}

.after p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12.6px;
  line-height: 1.68;
}

.policies {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--panel);
}

.policy {
  padding: 15px 14px 16px;
}

.policy + .policy {
  border-left: 1px solid var(--line);
}

.policy-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 10.4px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.policy-name svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--icon);
}

.policy-name svg [stroke] {
  stroke-width: 1.7;
}

.policy p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.62;
  color: var(--ink-2);
}

.policy .who {
  display: block;
  margin-top: 8px;
  font: 400 10px/1.45 var(--mono);
  color: var(--ink-2);
}

/* Use it */

.use {
  padding-top: 22px;
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(18px, 3.4vw, 38px);
  padding: 20px 0 22px;
  border-top: 1px solid var(--line-soft);
}

.step:first-of-type {
  border-top: 0;
}

.step h3 {
  margin: 0 0 7px;
  font: 400 15.5px/1.3 var(--display);
  letter-spacing: 0;
  color: var(--head-ink);
}

.step p {
  margin: 0 0 8px;
  font-size: 12.4px;
  line-height: 1.68;
  color: var(--ink-2);
}

.step p:last-child {
  margin-bottom: 0;
}

.code {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--well);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.76;
  tab-size: 2;
}

@supports selector(::-webkit-scrollbar) {
  .code::-webkit-scrollbar {
    height: 8px;
    background: transparent;
  }

  .code::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 99px;
    background-color: color-mix(in srgb, var(--accent) 32%, transparent);
    background-clip: content-box;
  }

  .code:hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--accent) 60%, transparent);
  }
}

@supports not selector(::-webkit-scrollbar) {
  .code {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 38%, transparent) transparent;
  }

  .code:hover {
    scrollbar-color: color-mix(in srgb, var(--accent) 64%, transparent) transparent;
  }
}

/* The reference */

.doc {
  display: grid;
  grid-template-columns: minmax(0, 164px) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 44px);
  align-items: start;
  padding: 26px 0 48px;
}

.itinerary {
  position: sticky;
  top: 22px;
  border-left: 1px solid var(--line);
  padding-left: 12px;
}

.itinerary p.label {
  margin: 0 0 9px;
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.itinerary ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.itinerary li {
  margin: 0 0 6px;
}

.itinerary a {
  text-decoration: none;
  color: var(--ink-2);
}

.itinerary a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.itinerary ol.sub {
  margin: 6px 0 12px;
  padding-left: 9px;
  border-left: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10.4px;
}

.itinerary ol.sub li {
  margin-bottom: 4px;
}

.page {
  min-width: 0;
}

.page > .intro {
  margin: 0 0 20px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.page > .intro p {
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 12.6px;
  line-height: 1.66;
}

.page > .intro p:last-child {
  margin-bottom: 0;
}

.route {
  font: 400 10.4px/1.5 var(--mono);
  color: var(--accent);
}

.page h2 {
  margin: 26px 0 12px;
  font: 400 18px/1.2 var(--display);
  color: var(--head-ink);
}

.entry {
  padding: 14px 0 16px;
  border-top: 1px solid var(--line-soft);
}

.entry:first-of-type {
  border-top: 0;
}

.entry h3 {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 6px;
  font: 500 13px/1.3 var(--mono);
  letter-spacing: -0.005em;
  color: var(--ink);
}

.kind {
  font: 500 8.4px/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--frame);
  background: var(--accent);
  padding: 3px 4px;
  flex: none;
}

.sig {
  margin: 8px 0 0;
  padding: 8px 10px;
  overflow-x: auto;
  border-left: 2px solid var(--accent);
  background: var(--well);
  font-size: 10.8px;
  line-height: 1.68;
  color: var(--ink);
  white-space: pre;
}

@supports selector(::-webkit-scrollbar) {
  .sig::-webkit-scrollbar {
    height: 7px;
    background: transparent;
  }

  .sig::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 99px;
    background-color: color-mix(in srgb, var(--accent) 28%, transparent);
    background-clip: content-box;
  }

  .sig:hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--accent) 56%, transparent);
  }
}

@supports not selector(::-webkit-scrollbar) {
  .sig {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 34%, transparent) transparent;
  }
}

.prose {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 12.4px;
  line-height: 1.68;
}

.prose code,
.member .prose code {
  padding: 0 3px;
  background: var(--panel);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.member {
  margin: 12px 0 0;
  padding-left: 11px;
  border-left: 1px solid var(--line);
}

.member h4 {
  margin: 0;
  font: 500 11.6px/1.3 var(--mono);
  color: var(--ink);
}

table.members {
  width: 100%;
  margin: 9px 0 0;
  border-collapse: collapse;
  font-size: 12px;
}

table.members th,
table.members td {
  padding: 6px 8px 6px 0;
  border-top: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

table.members th {
  font: 500 10.2px/1.55 var(--mono);
  color: var(--ink);
  white-space: nowrap;
}

table.members td {
  padding-left: 12px;
  color: var(--ink-2);
}

@media (width <= 620px) {
  table.members tr {
    display: block;
    padding: 7px 0 8px;
    border-top: 1px solid var(--line-soft);
  }

  table.members th,
  table.members td {
    display: block;
    padding: 0;
    border-top: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  table.members td {
    margin-top: 2px;
  }
}

.traits {
  margin: 5px 0 0;
  padding-left: 0;
  list-style: none;
  font: 400 10.4px/1.8 var(--mono);
  color: var(--ink-2);
}

.traits code {
  overflow-wrap: anywhere;
}

.traits-label {
  margin: 11px 0 0;
  font: 500 8.8px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Footer */

footer {
  border-top: 1px solid var(--line);
  padding: 14px 0 30px;
  font: 400 10px/1.7 var(--mono);
  color: var(--ink-2);
}

footer .row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: baseline;
}

footer .plate-no {
  margin-left: auto;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (width <= 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .lede {
    max-width: 48ch;
  }

  .plate {
    max-width: 430px;
  }

  .doc {
    grid-template-columns: minmax(0, 1fr);
  }

  .itinerary {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 10px 0 0;
  }

  .itinerary ol {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
  }

  .itinerary ol.sub {
    display: none;
  }

  .itinerary li {
    margin: 0;
  }

  .itinerary p.label {
    margin-bottom: 6px;
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
  }

  .after {
    grid-template-columns: minmax(0, 1fr);
  }

  .head {
    flex-wrap: wrap;
  }

  .head p {
    margin: 7px 0 0;
    text-align: left;
  }
}

@media (width <= 760px) {
  .order {
    grid-template-columns: minmax(0, 1fr);
  }

  .stop + .stop {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .policies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .policy + .policy {
    border-left: 0;
  }

  .policy:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .policy:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (width <= 520px) {
  .wrap {
    width: min(980px, 100% - 26px);
  }

  .masthead {
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav {
    gap: 13px;
    font-size: 9.5px;
    letter-spacing: 0.08em;
  }

  .switch {
    width: 23px;
    height: 23px;
  }

  h1 {
    font-size: clamp(1.75rem, 9vw, 2.1rem);
  }

  .rocker button {
    padding: 11px 4px 12px;
    font-size: 9.4px;
    letter-spacing: 0.1em;
  }

  .keys button {
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  .answer-value {
    font-size: 26px;
  }
}