/* Long Screen — a pocket printer on a desk. A 2.5D low-poly cartoon device: flat-shaded faces, hard offset shadows and
 * faceted keys. The recording goes onto the printer's screen, the LCD and LED segments report the run, the keys and the
 * settings dial sit on the device, and the print comes out as an instant photo (the tile viewer).
 *
 * Body classes drive the states: `is-processing` (src/ui/run.ts, a run or an export is busy), `has-result`
 * (src/ui/canvases.ts, a canvas is on the print) and `receipt-open` (src/ui/main.ts, the print is spread over the page).
 * Wide screens (≥ 1080px) put the printer and the print side by side; narrower ones stack them. */

/* Baloo 2 (SIL OFL 1.1, static/fonts/OFL.txt), self-hosted: the page makes no network requests. Chinese text falls
   back to the system's CJK fonts. */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(./fonts/baloo-2-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(./fonts/baloo-2-latin-wght-normal.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 {
  --desk: #f6efe4;
  --ink: #3d3530;
  --muted: #3d3530b8;
  --faint: #3d353094;
  --line: #3d35301a;
  --paper: #fffdf8;
  --white: #fff;
  --pink: #ffb4a2;
  --blue: #a2d2ff;
  --green: #cdeac0;
  --yellow: #ffe08a;
  --lilac: #d5c6f5;
  --coral: #ff7a6b;
  --led: #ffd24d;
  --ok: #56c26a;
  --warn: #f0a92a;
  --err: #ef6a5b;
  /* The printer body: one hue, flat-shaded per face. */
  --body: #86c6f4;
  --body-facet: #93cdf7;
  --body-hi: #a9d8fa;
  --body-lo: #6aafe3;
  --body-edge: #74b9ea;
  --body-top: #c3e5fd;
  --body-side: #5a9fd6;
  /* Hard 2.5D shadows: offset, no blur. */
  --lift: 0 4px 0 #3d353026;
  --lift-lg: 8px 10px 0 #3d35301c;
  --spring: cubic-bezier(.3, 1.6, .5, 1);
  --dodecagon: polygon(37% 1%, 63% 1%, 86% 14%, 99% 37%, 99% 63%, 86% 86%, 63% 99%, 37% 99%, 14% 86%, 1% 63%, 1% 37%, 14% 14%);
  --hexagon: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}

* {
  box-sizing: border-box;
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: "Baloo 2", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--desk) radial-gradient(#3d353012 1.2px, transparent 1.6px) 0 0 / 22px 22px;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
.i18n-pending body {
  visibility: hidden;
}
[hidden] {
  display: none !important;
}
button,
select,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- buttons ---------- */
.primary,
.secondary,
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1.25;
  transition: transform .12s, box-shadow .12s;
}
.primary {
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 4px 0 #1f1a17;
}
.secondary {
  padding: 10px 18px;
  background: var(--white);
  box-shadow: 0 4px 0 #3d353030, inset 0 0 0 1.5px #3d35301a;
}
.chip {
  padding: 7px 14px;
  font-size: 13px;
  background: var(--white);
  box-shadow: 0 3px 0 #3d353026, inset 0 0 0 1.5px #3d353014;
}
.round {
  width: 36px;
  height: 36px;
  padding: 0;
  flex: none;
}
.big {
  padding: 13px 22px;
  font-size: 15.5px;
}
.full {
  width: 100%;
}
.primary:active:not(:disabled),
.secondary:active:not(:disabled),
.chip:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #3d353030;
}
.primary:hover:not(:disabled) {
  background: #4c423c;
}
.secondary:hover:not(:disabled),
.chip:hover:not(:disabled) {
  background: #fffaf0;
}
.text-button {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button:disabled {
  cursor: not-allowed;
}
.primary:disabled,
.secondary:disabled,
.chip:disabled {
  opacity: .45;
}

/* ---------- selects ---------- */
.pill-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  max-width: 100%;
  padding: 8px 34px 8px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%233d3530' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center / 12px 8px;
  box-shadow: 0 3px 0 #3d353026, inset 0 0 0 1.5px #3d353014;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.pill-select:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------- header ---------- */
.app-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  max-width: 1760px;
  margin: 0 auto;
  padding: 16px clamp(16px, 3vw, 40px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  text-decoration: none;
  border-radius: 8px;
}
.brand-mark {
  flex: none;
}
.brand small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--faint);
}
/* Left: who we are and the privacy promise (a status, not a control). Right, in order of use: the app's own
   action (past prints), the page utilities (help, language) and, in the corner, the link that leaves for GitHub.
   Groups are 16px apart, keys within a group 8px; every key is 36px tall. */
.header-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  min-width: 0;
}
.header-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
}
.header-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-right .chip,
.header-right .pill-select {
  height: 36px;
  padding-block: 0;
}
.safe {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--green);
  box-shadow: 0 3px 0 #3d35301f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.safe i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3f9a50;
}
#help-btn {
  font-size: 15px;
}
/* The GitHub link: the Invertocat stays pure black and unmodified (GitHub's logo rules), smaller than our own mark. */
.gh-star {
  gap: 7px;
  padding: 7px 11px 7px 10px;
  text-decoration: none;
}
.gh-mark {
  flex: none;
}
.star {
  flex: none;
}
.gh-star:hover .star {
  animation: twinkle .5s var(--spring);
}
@keyframes twinkle {
  50% {
    transform: rotate(-20deg) scale(1.3);
  }
}

/* ---------- page grid ---------- */
.workbench {
  display: grid;
  grid-template-areas: "intro" "printer" "tray";
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 24px;
  max-width: 1760px;
  margin: 0 auto;
  padding: 8px clamp(16px, 3vw, 40px) 0;
}
.intro {
  grid-area: intro;
  width: min(100%, 720px);
  text-align: center;
}
.printer-zone {
  grid-area: printer;
  width: min(100%, 520px);
}
.tray {
  grid-area: tray;
  width: min(100%, 960px);
  min-width: 0;
}

/* ---------- intro ---------- */
.intro h1 {
  position: relative;
  z-index: 0;
  font-size: clamp(30px, 2.4vw + 18px, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.intro h1 .hl {
  position: relative;
  white-space: nowrap;
}
.intro h1 .hl::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 6%;
  height: 32%;
  z-index: -1;
  background: var(--led);
  clip-path: polygon(1% 18%, 99% 0, 100% 84%, 0 100%);
}
.intro .sub {
  max-width: 600px;
  margin: 12px auto 0;
  font-size: 14.5px;
  line-height: 1.8;
  font-weight: 500;
  color: var(--muted);
}
/* The demo, as a button inside the sentence. */
.inline-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 2px .35em;
  padding: 2px 10px 2px 3px;
  border-radius: 9px;
  background: var(--white);
  box-shadow: 0 3px 0 #3d353026, inset 0 0 0 1.5px #3d35301a;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.6;
  vertical-align: baseline;
  transition: transform .12s, box-shadow .12s;
}
.inline-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #3d353026, inset 0 0 0 1.5px #3d353026;
}
.inline-chip:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #3d353026;
}
.inline-chip:disabled {
  opacity: .5;
}
.chip-screen {
  display: grid;
  place-items: center;
  width: 24px;
  height: 18px;
  border-radius: 5px;
  background: #2d3440;
  color: var(--led);
  box-shadow: inset 0 -2px 0 #00000040;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  text-align: left;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  padding: 12px 12px 12px 10px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 4px 5px 0 #3d353014, inset 0 0 0 1.5px #3d35300f;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 30px;
  clip-path: var(--hexagon);
  background: linear-gradient(160deg, #ffa092 0 50%, var(--coral) 50%);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
}
.steps li:nth-child(2)::before {
  background: linear-gradient(160deg, var(--body-hi) 0 50%, var(--body-lo) 50%);
}
.steps li:nth-child(3)::before {
  background: linear-gradient(160deg, #8fd9a0 0 50%, var(--ok) 50%);
}
.steps b {
  font-size: 15px;
  font-weight: 800;
}
.steps span {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- the printer ---------- */
.printer-zone {
  display: flex;
  justify-content: center;
  padding: 18px 18px 30px 0;
}
.printer {
  --d: 18px;
  position: relative;
  width: 100%;
}
.printer::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4%;
  right: -6%;
  bottom: -22px;
  height: 40px;
  border-radius: 50%;
  background: #3d35301f;
}
.printer-top,
.printer-side {
  position: absolute;
}
.printer-top {
  left: 0;
  right: calc(-1 * var(--d));
  top: calc(-1 * var(--d));
  height: var(--d);
  background: linear-gradient(90deg, var(--body-top) 0 70%, #b6defc 70%);
  clip-path: polygon(0 100%, var(--d) 0, 100% 0, calc(100% - var(--d)) 100%);
}
.printer-side {
  top: calc(-1 * var(--d));
  bottom: 0;
  right: calc(-1 * var(--d));
  width: var(--d);
  background: linear-gradient(180deg, var(--body-side) 0 60%, #5296cd 60%);
  clip-path: polygon(0 var(--d), 100% 0, 100% calc(100% - var(--d)), 0 100%);
}
.printer-front {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas: "plate plate" "screen lcd" "controls controls" "slot slot";
  gap: 12px;
  padding: 14px 18px 24px;
  --screw: #5a9fd6 0 2.4px, #a9d8fa 2.6px 3.4px, transparent 3.6px;
  background:
    radial-gradient(circle at 12px 16px, var(--screw)),
    radial-gradient(circle at calc(100% - 15px) 16px, var(--screw)),
    radial-gradient(circle at 12px calc(100% - 17px), var(--screw)),
    radial-gradient(circle at calc(100% - 15px) calc(100% - 17px), var(--screw)),
    linear-gradient(118deg, var(--body-facet) 0 44%, var(--body) 44%);
  box-shadow: inset 0 7px 0 var(--body-hi), inset -7px 0 0 var(--body-edge), inset 0 -10px 0 var(--body-lo);
}
.plate {
  grid-area: plate;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffffffe6;
  text-shadow: 0 1px 0 #3d353033;
}
.plate span {
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffffaa;
}
.status-led {
  width: 11px;
  height: 11px;
  margin-left: auto;
  border-radius: 50%;
  background: #7ee08a;
  box-shadow: 0 0 0 2px #3d353026, 0 0 10px #7ee08acc;
}
.status-led.running {
  background: var(--led);
  box-shadow: 0 0 0 2px #3d353026, 0 0 12px #ffd24dcc;
  animation: blink .9s steps(2, jump-none) infinite;
}
/* Working hard: the whole printer shakes while it runs. */
.is-processing .printer {
  animation: hum .42s ease-in-out infinite;
}
@keyframes hum {
  25% {
    transform: translate(-1.5px, .5px) rotate(-.25deg);
  }
  75% {
    transform: translate(1.5px, -.5px) rotate(.25deg);
  }
}
@keyframes blink {
  50% {
    opacity: .35;
  }
}

/* The screen: drop a recording onto it; it plays the recording. */
.screen {
  grid-area: screen;
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  padding: 8px;
  border-radius: 10px;
  background: #2d3440;
  box-shadow: 0 3px 0 #ffffff59, inset 0 -4px 0 #00000040;
  cursor: pointer;
  transition: box-shadow .15s;
}
.screen:hover {
  box-shadow: 0 3px 0 #ffffff59, inset 0 -4px 0 #00000040, 0 0 0 4px #ffd24d99;
}
.screen.dragging {
  box-shadow: 0 3px 0 #ffffff59, inset 0 -4px 0 #00000040, 0 0 0 6px var(--led);
}
.screen video,
.screen-empty {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 5px;
  background: #1b212a;
}
.screen video {
  display: block;
  object-fit: contain;
}
/* A hard-edged glare facet across the glass. */
.screen::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 5px;
  background: linear-gradient(118deg, #ffffff1a 0 28%, transparent 28%);
  pointer-events: none;
}
.screen-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  color: #e9f2ff;
}
.screen-empty strong {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
}
.screen-empty small {
  font-size: 12px;
  color: #e9f2ffa6;
}
.screen-caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: none;
  flex-direction: column;
  padding: 18px 12px 7px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(transparent, #0f131acc 45%);
  color: var(--white);
  pointer-events: none;
}
.screen-caption strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 800;
}
.screen-caption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #ffffffb3;
}
.screen:has(#preview-video[src]) .screen-empty {
  display: none;
}
.screen:has(#preview-video[src]) .screen-caption {
  display: flex;
}
/* While a run reads the recording, a scan line sweeps the (paused) picture. It is a band painted in a background twice
   the glass's height, so it can never leave the screen. */
.is-processing .screen::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 8px;
  border-radius: 5px;
  background: linear-gradient(transparent calc(50% - 14px), #9df0ff33 calc(50% - 6px), #9df0ff calc(50% - 1.5px) calc(50% + 1.5px),
    #9df0ff33 calc(50% + 6px), transparent calc(50% + 14px)) 0 100% / 100% 200% no-repeat;
  animation: scan 1.6s linear infinite;
  pointer-events: none;
}
@keyframes scan {
  to {
    background-position: 0 0;
  }
}

/* The LCD: what the printer is doing, for how long, and how far along. */
.lcd {
  grid-area: lcd;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 11px 10px;
  border-radius: 8px;
  background: #c7d8ae;
  color: #26301d;
  box-shadow: inset 0 3px 0 #00000026, inset 0 0 0 2px #00000012, 0 2px 0 #ffffff66;
  font-variant-numeric: tabular-nums;
}
.lcd-head {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}
#status-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.elapsed {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 1px;
}
.lcd-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #26301dcc;
  overflow-wrap: anywhere;
}
.progress-count {
  font-weight: 800;
  color: #26301d;
}
.progress-count:not(:empty)::after {
  content: " · ";
}
.segments {
  position: relative;
  margin-top: auto;
  padding-top: 8px;
  container-type: inline-size;
}
.seg-row {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 2px;
}
.seg-row i {
  height: 8px;
  border-radius: 2px;
  background: #26301d17;
}
.seg-fill {
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  transition: width .3s ease-out;
}
.seg-fill .seg-row {
  width: 100cqw;
}
.seg-fill i {
  background: #26301d;
}

/* The keys. Every cap is a flat-shaded solid: a darker copy of its shape sits under it as the extrusion. */
.controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 2px;
}
.aux-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
}
.aux-btn small {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #1d3d5c;
  white-space: nowrap;
}
.cap {
  position: relative;
  display: block;
}
/* The print key: a wide printer key with its icon, pressed in and held while the printer works. */
.print-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 12px 20px 12px 16px;
  border-radius: 10px;
  background: linear-gradient(160deg, #ff9a8b 0 42%, var(--coral) 42%);
  color: var(--white);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.2;
  box-shadow: 0 6px 0 #c14a3d, 0 6px 0 1px #3d35301a;
  transition: transform .1s, box-shadow .1s;
}
.print-key:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 7px 0 #c14a3d, 0 7px 0 1px #3d35301a;
}
.print-key:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #c14a3d;
}
.print-key:disabled {
  background: linear-gradient(160deg, #f7ddd8 0 42%, #efcdc6 42%);
  color: #ffffffd9;
  box-shadow: 0 6px 0 #cfaaa3;
}
.is-processing .print-key {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #cfaaa3;
}
.run-keys:not([hidden]) + .print-key {
  margin-left: 0;
}
.run-keys {
  display: flex;
  gap: 8px;
  align-self: center;
  margin-left: auto;
}
.key {
  padding: 8px 11px;
  border-radius: 7px;
  background: linear-gradient(#fdfaf4 0 58%, #efe8dc 58%);
  box-shadow: 0 5px 0 #b9ad9a, 0 5px 0 1px #3d35301a;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .1s, box-shadow .1s;
}
.key:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #b9ad9a;
}
.aux {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.dial {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fdf9f1 0 12px, #e6dccb 12.5px 13.5px, transparent 14px),
    repeating-conic-gradient(#ddd2bf 0 7.5deg, #f7f1e5 7.5deg 15deg);
  box-shadow: 0 5px 0 #b9ad9a, inset 0 0 0 2px #3d353014;
  transition: transform .35s var(--spring);
}
.dial::after {
  content: "";
  position: absolute;
  left: calc(50% - 2px);
  top: 10px;
  width: 4px;
  height: 9px;
  border-radius: 2px;
  background: var(--coral);
}
.aux-btn:hover .dial {
  transform: rotate(35deg);
}
@supports selector(:popover-open) {
  body:has(#knobs:popover-open) .dial {
    transform: rotate(120deg);
  }
}
.clear-cap {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(150deg, #fdfaf4 0 48%, #ece5d8 48%);
  box-shadow: 0 5px 0 #b9ad9a;
  color: var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.aux-btn:active:not(:disabled) .clear-cap {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #b9ad9a;
}
/* While the printer works, the clear key (disabled then) makes room for pause and stop. */
.is-processing #clear-btn {
  display: none;
}
.lamp {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffffb0 0 5px, transparent 5.5px), #d7d2c8;
  box-shadow: 0 5px 0 #a79f92, inset 0 -3px 0 #0000001a;
}
.lamp:has(.has-issues) {
  background: radial-gradient(circle at 35% 30%, #ffffffc0 0 5px, transparent 5.5px), var(--led);
  box-shadow: 0 5px 0 #c99a1e, inset 0 -3px 0 #0000001a, 0 0 16px #ffd24daa;
}
.cnt {
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* The output slot, with paper feeding out of it while the printer works. */
.slot-out {
  grid-area: slot;
  position: relative;
  height: 12px;
  margin: 2px 8% 0;
  border-radius: 6px;
  background: #2b2622;
  box-shadow: 0 3px 0 #ffffff55, inset 0 3px 4px #000;
}
.is-processing .slot-out::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 6px;
  height: 30px;
  background: repeating-linear-gradient(180deg, var(--paper) 0 6px, #f1ece2 6px 7px);
  box-shadow: 0 3px 0 #3d35301a;
  transform-origin: top;
  animation: feed 1.4s ease-in-out infinite alternate;
}
@keyframes feed {
  from {
    transform: scaleY(.25);
  }
}

/* ---------- the print (instant photo) ---------- */
.receipt {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 0;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--lift-lg), inset 0 0 0 1px #3d353012;
}
.has-result .receipt {
  animation: eject .6s cubic-bezier(.2, .9, .3, 1.1) backwards;
}
@keyframes eject {
  from {
    transform: translateY(-22px) rotate(-.6deg);
    opacity: .3;
  }
}
/* The stage's size never transitions: the viewer measures it synchronously to fit the canvas. */
.stage {
  position: relative;
  flex: 1 1 auto;
  height: 300px;
  min-height: 0;
  overflow: hidden;
  border-radius: 2px;
  background: #ece6db;
  box-shadow: inset 0 0 0 1px #3d353014;
}
.has-result .stage {
  height: min(72vh, 760px);
  background: repeating-conic-gradient(#f0e9dd 0 25%, var(--paper) 0 50%) 0 0 / 24px 24px;
}
#viewer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
#viewer:active {
  cursor: grabbing;
}
.tray-idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
}
.is-processing .tray-idle,
.has-result .tray-idle {
  display: none;
}
.concept {
  width: min(88%, 400px);
  max-height: 58%;
  margin-bottom: 6px;
  filter: drop-shadow(5px 6px 0 #3d353014);
}
.explainer {
  width: min(94%, 580px);
  max-height: 84%;
  margin: 0;
}
.explainer .caption {
  font-size: 17px;
  font-weight: 800;
  fill: var(--ink);
  text-anchor: middle;
}
.explainer .rec {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  fill: #ef6a5b;
}
.idle-title {
  font-size: 17px;
  font-weight: 800;
}
.idle-hint {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--faint);
}
.idle-body {
  max-width: 340px;
  font-size: 13px;
  color: var(--muted);
}
.empty-state {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  pointer-events: none;
}
.is-processing .empty-state {
  display: flex;
}
.canvas-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 70px);
  padding: 4px 10px;
  border-radius: 8px;
  background: #fffffff0;
  box-shadow: 0 3px 0 #3d353020;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.expand-btn,
.zoom-controls,
.foot > * {
  display: none;
}
.expand-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
.has-result .expand-btn {
  display: inline-flex;
}
.expand-btn .icon-close,
.receipt-open .expand-btn .icon-open {
  display: none;
}
.receipt-open .expand-btn .icon-close {
  display: block;
}
.zoom-controls {
  position: absolute;
  left: 10px;
  bottom: 10px;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 3px 0 #3d353026;
  font-size: 12px;
  font-weight: 800;
}
.has-result .zoom-controls {
  display: flex;
}
.zoom-controls button {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.zoom-controls button:hover {
  background: var(--desk);
}
#zoom-label {
  min-width: 46px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* The photo's wide bottom border carries the tools and the way out. */
.foot {
  display: grid;
  gap: 10px;
  min-height: 56px;
  padding: 12px 2px 14px;
}
.has-result .foot > * {
  display: flex;
}
.receipt-tools {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#canvas-select {
  flex: 1 1 200px;
}
.quality-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.quality-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--ink);
}
.lod-label {
  flex-basis: 100%;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--faint);
}
.take-row {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
.export-advanced {
  flex-basis: 100%;
}
/* After a finished print, a quiet ask for a star; never while the printer is still working. */
.foot > .star-nudge {
  font-size: 12.5px;
  font-weight: 800;
}
.is-processing .foot > .star-nudge {
  display: none;
}
.star-nudge a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-underline-offset: 3px;
}
.star-nudge a:hover {
  color: var(--ink);
}
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
.export-advanced > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.export-advanced > summary::after {
  content: "▾";
  transition: transform .2s;
}
.export-advanced[open] > summary::after {
  transform: rotate(180deg);
}
.export-options {
  display: grid;
  gap: 6px;
  max-width: 560px;
  margin-top: 8px;
}
.export-download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.export-link {
  font-size: 13px;
  font-weight: 800;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.hint {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--faint);
}

/* Spread out: the print covers the page so a large canvas can be inspected. */
body.receipt-open {
  overflow: hidden;
}
.receipt-open .receipt {
  position: fixed;
  inset: 16px;
  z-index: 50;
  height: auto;
}
/* On wide screens the tray is sticky, which makes it its own stacking context: raise the whole tray above the
   backdrop, or the backdrop paints over the spread print. */
.receipt-open .tray {
  z-index: 50;
}
.receipt-open .stage {
  flex: 1 1 0;
  height: auto;
}
.receipt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: #3d353080;
  backdrop-filter: blur(3px);
}

/* ---------- footer ---------- */
.app-footer {
  padding: 36px 20px 40px;
  text-align: center;
}
/* What it is made of: the Rust and WebAssembly logos, unmodified, on paper stickers. */
.app-footer .stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
}
.part {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 8px;
  border-radius: 9px;
  background: var(--white);
  box-shadow: 0 3px 0 #3d35301f, inset 0 0 0 1.5px #3d353014;
  font-weight: 800;
  color: var(--ink);
}
.part svg {
  flex: none;
}
.app-footer .stack-more {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 800;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-underline-offset: 3px;
}
.app-footer .fineprint {
  max-width: 62ch;
  margin: 10px auto 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.6;
}
.app-footer p {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--faint);
}

/* ---------- settings flap and notes sheet (Popover API) ---------- */
/* Without popover support both are ordinary cards at the end of the page. */
.flap,
.sheet {
  width: min(94vw, 520px);
  margin: 0 auto 24px;
  padding: 18px 20px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--lift-lg), inset 0 0 0 1.5px #3d353012;
}
.flap h2,
.sheet h2 {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.flap-sub,
.sheet-sub {
  margin: 2px 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--faint);
}
@supports selector(:popover-open) {
  .flap,
  .sheet {
    position: fixed;
    max-height: min(84vh, 760px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .flap {
    width: min(94vw, 400px);
    margin: auto;
  }
  .flap:popover-open {
    animation: pop .28s var(--spring);
  }
  .sheet {
    inset: auto 0 0 0;
    margin: 0 auto;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 0 #3d353014, inset 0 0 0 1.5px #3d353012;
  }
  .sheet:popover-open {
    animation: sheet-up .38s cubic-bezier(.3, 1.3, .5, 1);
  }
  .flap::backdrop,
  .sheet::backdrop {
    background: #3d353022;
  }
}
/* Anchored to the settings dial where the browser can; otherwise the flap stays centred. */
@supports (position-area: bottom) {
  @media (min-width: 601px) {
    #knobs-btn {
      anchor-name: --knobs;
    }
    /* Hangs from the dial towards the right (the dial is the leftmost key, so the area is wide enough for the flap),
       opens on whichever side of it has more room and is never taller than that room: the position area is its
       containing block, so 100% is the space left there, and what does not fit scrolls inside the flap. */
    .flap {
      position-anchor: --knobs;
      position-area: bottom span-right;
      position-try-fallbacks: flip-block;
      position-try-order: most-height;
      max-height: min(760px, calc(100% - 28px));
      inset: auto;
      margin: 14px 0;
    }
  }
}
@keyframes pop {
  from {
    transform: translateY(-8px) scale(.97);
    opacity: 0;
  }
}
@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
}
@keyframes sheet-left {
  from {
    transform: translateX(100%);
  }
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 2px dashed var(--line);
}
.setting-row label {
  font-size: 14px;
  font-weight: 700;
}
.setting-row .pill-select {
  max-width: 62%;
}
.setting-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 6px 0 2px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--desk);
  box-shadow: 0 3px 0 #3d35301a;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.setting-button:disabled {
  opacity: .5;
}
#regions-count {
  font-size: 12.5px;
  color: var(--muted);
}
.advanced {
  margin-top: 8px;
}
.advanced > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 800;
  border-radius: 8px;
}
.advanced > summary span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 24px;
  clip-path: var(--hexagon);
  background: var(--lilac);
  transition: transform .2s var(--spring);
}
.advanced[open] > summary span {
  transform: rotate(45deg);
}
.grab {
  width: 44px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 99px;
  background: #3d353022;
}
.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.metrics > div {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--blue);
  box-shadow: 0 3px 0 #3d35301a;
}
.metrics > div + div {
  background: var(--green);
}
.metrics span {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.metrics small {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.coverage-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--desk);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
}
.coverage-card small {
  display: block;
  font-weight: 500;
  color: var(--faint);
}
.legend-square {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: repeating-conic-gradient(#e6ddcd 0 25%, var(--paper) 0 50%) 0 0 / 12px 12px;
  box-shadow: inset 0 0 0 2px #3d353014;
}
.diagnostics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 800;
}
.diagnostics {
  display: grid;
  gap: 8px;
}
.diagnostic-empty {
  padding: 14px;
  border-radius: 10px;
  background: var(--desk);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: var(--faint);
}
article.diagnostic {
  position: relative;
  padding: 10px 12px 11px 34px;
  border-radius: 10px;
  background: var(--desk);
  font-size: 12.5px;
  line-height: 1.65;
}
article.diagnostic::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 13px;
  width: 11px;
  height: 11px;
  clip-path: var(--hexagon);
  background: var(--ok);
}
article.diagnostic.warning::before {
  background: var(--warn);
}
article.diagnostic.error::before {
  background: var(--err);
}
.diagnostic-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.diagnostic-head span:first-child,
article.diagnostic p {
  overflow-wrap: anywhere;
}
article.diagnostic .action {
  margin-top: 2px;
  font-style: italic;
  color: var(--muted);
}
article.diagnostic > button {
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 3px 0 #3d35301f;
  font-size: 12px;
  font-weight: 800;
}
#more-diagnostics {
  display: flex;
  margin: 10px auto 0;
}
.report {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1.5px dashed #3d353033;
}
.report p {
  font-size: 13.5px;
  font-weight: 800;
}
.report .chip {
  text-decoration: none;
}
.report small {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- toast ---------- */
#toast {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 60;
  width: max-content;
  max-width: min(92vw, 560px);
  padding: 11px 16px 11px 36px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 5px 0 #3d353022, inset 0 0 0 1.5px #3d353012;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: anywhere;
  transform: translateX(-50%);
  animation: toast-in .3s var(--spring);
}
#toast::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 14px;
  width: 11px;
  height: 11px;
  clip-path: var(--hexagon);
  background: var(--ok);
}
#toast.error {
  background: #fff3ef;
}
#toast.error::before {
  background: var(--err);
}
@keyframes toast-in {
  from {
    transform: translate(-50%, -20px);
    opacity: 0;
  }
}

/* ---------- dialogs ---------- */
dialog {
  width: min(94vw, 560px);
  max-height: min(88vh, 900px);
  margin: auto;
  padding: 20px 22px 24px;
  border: 0;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 12px 0 #3d353026, inset 0 0 0 1.5px #3d353012;
}
dialog.wide-dialog {
  width: min(96vw, 940px);
}
dialog::backdrop {
  background: #3d353066;
  backdrop-filter: blur(2px);
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.dialog-header h2 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}
.dialog-header .round {
  font-size: 19px;
}
.help-copy h3 {
  margin: 16px 0 4px;
  font-size: 15px;
  font-weight: 800;
}
.help-copy p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--muted);
}
.help-copy a {
  font-weight: 800;
  color: var(--ink);
}
.quiet {
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 700;
}
.quiet:hover {
  background: #3d353010;
}
.region-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
#region-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 3px 0 #3d35301a;
  cursor: crosshair;
  touch-action: none;
}
#region-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
#region-list button {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 3px 0 #3d35301a;
  font-size: 12px;
  font-weight: 700;
}
#source-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  border-radius: 8px;
  background: #000;
}

/* ---------- wide screens: the printer and the print side by side ---------- */
@media (min-width: 1080px) {
  .workbench {
    grid-template-areas: "intro tray" "printer tray";
    grid-template-columns: clamp(460px, 34vw, 600px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: clamp(28px, 3vw, 56px);
    row-gap: 14px;
  }
  .intro {
    width: 100%;
    text-align: left;
  }
  .intro h1 {
    font-size: clamp(32px, 1.2vw + 22px, 44px);
  }
  .intro .sub {
    margin-left: 0;
  }
  .printer-zone {
    width: 100%;
  }
  .tray {
    width: 100%;
    height: clamp(560px, calc(100dvh - 90px), 1100px);
    position: sticky;
    top: 16px;
  }
  .receipt {
    height: 100%;
  }
  .stage,
  .has-result .stage {
    height: auto;
    flex: 1 1 0;
  }
  @supports selector(:popover-open) {
    .sheet {
      inset: 0 0 0 auto;
      width: min(440px, 92vw);
      height: 100dvh;
      max-height: none;
      margin: 0;
      padding-bottom: 22px;
      border-radius: 16px 0 0 16px;
      box-shadow: -8px 0 0 #3d353014, inset 0 0 0 1.5px #3d353012;
    }
    .sheet:popover-open {
      animation: sheet-left .34s cubic-bezier(.3, 1.2, .5, 1);
    }
    .sheet .grab {
      display: none;
    }
  }
}

/* ---------- small screens ---------- */
@media (max-width: 600px) {
  .app-header {
    padding: 12px 14px;
  }
  .brand small {
    display: none;
  }
  .safe {
    display: none;
  }
  .gh-star {
    padding: 7px 9px;
  }
  .gh-star > span {
    display: none;
  }
  .workbench {
    padding: 4px 12px 0;
    gap: 18px;
  }
  .intro .sub {
    font-size: 13.5px;
    line-height: 1.7;
  }
  .steps {
    gap: 6px;
  }
  .steps li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    padding: 10px 9px;
  }
  .steps li::before {
    width: 26px;
    height: 24px;
    font-size: 13px;
  }
  .steps b {
    font-size: 14px;
  }
  .steps span {
    font-size: 11.5px;
  }
  .printer {
    --d: 12px;
  }
  .printer-zone {
    padding: 12px 12px 26px 0;
  }
  .printer-front {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "plate" "screen" "lcd" "controls" "slot";
    padding: 14px 14px 24px;
  }
  .lcd-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .elapsed {
    flex: none;
    font-size: 24px;
  }
  .lcd-line {
    -webkit-line-clamp: 2;
  }
  .controls {
    flex-wrap: wrap;
    row-gap: 12px;
    gap: 8px;
  }
  .aux {
    gap: 8px;
  }
  .print-key {
    padding: 11px 14px 11px 12px;
    font-size: 15px;
  }
  .key {
    padding: 7px 8px;
    font-size: 12px;
  }
  .stage {
    height: 360px;
  }
  .has-result .stage {
    height: 62vh;
  }
  .receipt {
    padding: 10px 10px 0;
  }
  .receipt-open .receipt {
    inset: 8px;
  }
  @supports selector(:popover-open) {
    .flap {
      inset: auto 0 0 0;
      width: 100%;
      margin: 0;
      border-radius: 16px 16px 0 0;
    }
    .flap:popover-open {
      animation: sheet-up .38s cubic-bezier(.3, 1.3, .5, 1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}