/* HPR-C2, the calibrator (egg.js). The device is a 3D rig of path-traced plates at their depths, turned to the
   pointer, with its keys, nameplate, counter, thumbwheel, switch, light and printed legend live on the face; the
   paper, the torn ticket and the graded slab are printed objects with their own type and timing. Sizes on the
   device are in millimetres (--mm, set by egg.js for the room it is in); the room's chrome (Tear off, the actions,
   the hint, Close) uses the site's buttons, labels and tokens (shell.css). */

/* the receipt's own supplement: what Xanh Mono lacks, on its 0.5 em advance (fonts/LICENSE.txt), so the columns hold */
@font-face { font-family: "HPR-C2 Receipt"; src: url("./fonts/receipt.woff2") format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0218-021B, U+02BB-02BC, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5, U+1E00-1EFB, U+2010-2012, U+2015-2017, U+201B, U+201F, U+2023-2025, U+2031-2038, U+2070-2071, U+2074-208E, U+2090-209C, U+20AF, U+20B1, U+20B4-20B5, U+20B8-20BA, U+20BD, U+2103, U+2109, U+2116, U+2126, U+2150-215E, U+2190-2195, U+21D2-21D4, U+2200-2211, U+2213-2247, U+2249-225F, U+2261-2263, U+2266-22C5, U+2300, U+25A0-25A1, U+25B2-25B3, U+25CB, U+25CF; font-display: swap; }

.c2-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.egg-open { overflow: hidden; }

/* ------------------------------------------------------------------ the room */
.c2 {
  --mm: 4px;
  --label: var(--egg-quiet);
  --c2-ink: #1d1f22;
  --c2-paper: #f7f7f2;
  --c2-thermal: #26282b;
  --c2-print: rgba(244, 252, 251, 0.9);          /* the pad-printed legend on the clear face */
  --c2-red: #c41a2b;
  color: var(--c2-ink);
  font-family: var(--text); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-tap-highlight-color: transparent;
}
dialog.c2 {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--egg-bg);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), overlay var(--t-fast) var(--ease) allow-discrete, display var(--t-fast) var(--ease) allow-discrete;
}
dialog.c2[open] { opacity: 1; transition-duration: var(--t-ui); }
@starting-style { dialog.c2[open] { opacity: 0; } }
dialog.c2::backdrop { background: transparent; }
.c2--page { position: relative; height: max(300px, calc(100svh - var(--bar-h))); }
.c2-page { background: var(--egg-bg); padding-top: var(--bar-h); }
.c2-host { display: block; }
.c2-nojs { padding: calc(var(--bar-h) + var(--s5)) var(--frame) var(--space-block); }

.c2-room {
  position: absolute; inset: 0; overflow: hidden;
  /* the studio sweep: the plates are rendered over exactly this colour */
  background:
    radial-gradient(120% 90% at 50% 64%, rgba(255, 255, 255, 0) 55%, rgba(60, 70, 78, 0.1)),
    linear-gradient(180deg, #e8ebed 0%, var(--egg-bg) 58%, #d3d8dc 100%);
}
.c2--page .c2-room { top: 0; }

/* ------------------------------------------------------------------ the stage and the object */
.c2-stage {
  position: absolute; left: 50%; bottom: var(--foot, max(2vh, 10px));
  width: calc(100 * var(--mm)); height: calc(148 * var(--mm));
  translate: -50% 0;
  perspective: calc(380 * var(--mm)); perspective-origin: 50% 40%;
  transition: left var(--t-scene) var(--ease), translate var(--t-scene) var(--ease), scale var(--t-scene) var(--ease), opacity var(--t-scene) var(--ease), filter var(--t-scene) var(--ease);
}
dialog.c2[open] .c2-stage { animation: c2-in var(--t-ui) var(--ease); }
@keyframes c2-in { from { translate: -50% 12px; scale: 0.985; } }
.c2.c2-wide.has-desk .c2-stage { left: 31%; }
/* a phone or a narrow window: the slab comes forward and the device steps back */
.c2:not(.c2-wide).has-desk .c2-stage { scale: 0.86; opacity: 0.32; filter: blur(1.5px) saturate(0.8); pointer-events: none; }

.c2-obj {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, -4deg));
  user-select: none; -webkit-user-select: none;
}
.c2-obj > * { position: absolute; }
.c2-plate-img { left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity var(--t-ui) var(--ease); }
.c2-obj.is-lit .c2-plate-img, .c2-obj.is-lit .c2-race { opacity: 1; }
.c2-body { transform: translateZ(calc(-7 * var(--mm))); }
.c2-rim { transform: translateZ(calc(-0.1 * var(--mm))); }
.c2-face { transform: translateZ(0); }
/* the room's shadow, on the table under the device */
.c2-shadow {
  left: calc(7 * var(--mm)); top: calc(10 * var(--mm)); width: calc(86 * var(--mm)); height: calc(134 * var(--mm));
  border-radius: calc(16 * var(--mm));
  background: rgba(24, 40, 46, 0.38);
  filter: blur(calc(5 * var(--mm)));
  transform: translateZ(calc(-12.5 * var(--mm))) translate(calc(2.5 * var(--mm)), calc(4 * var(--mm)));
}
/* without the plates (or before they arrive) the shell is drawn in CSS */
.c2-obj::before {
  content: ""; position: absolute; left: calc(4 * var(--mm)); top: calc(4 * var(--mm)); width: calc(92 * var(--mm)); height: calc(140 * var(--mm));
  border-radius: calc(14 * var(--mm));
  background: linear-gradient(160deg, rgba(150, 214, 210, 0.95), rgba(64, 140, 150, 0.95)), #4c8f97;
  box-shadow: inset 0 0 0 calc(1.8 * var(--mm)) rgba(170, 230, 226, 0.6);
  transform: translateZ(calc(-7 * var(--mm)));
  transition: opacity var(--t-ui) var(--ease);
}
.c2-obj.is-lit::before { opacity: 0; }

/* the shell's sides: tinted polycarbonate, seen as the device turns */
.c2-side { background: linear-gradient(90deg, rgba(64, 150, 150, 0.82), rgba(140, 214, 210, 0.7) 45%, rgba(84, 170, 168, 0.85)); backface-visibility: hidden; }
.c2-side--l, .c2-side--r { top: calc(18 * var(--mm)); height: calc(112 * var(--mm)); width: calc(24 * var(--mm)); }
.c2-side--l { left: calc(-8 * var(--mm)); transform: rotateY(-90deg); }
.c2-side--r { left: calc(84 * var(--mm)); transform: rotateY(90deg); }
.c2-side--t, .c2-side--b { left: calc(18 * var(--mm)); width: calc(64 * var(--mm)); height: calc(24 * var(--mm)); background: linear-gradient(180deg, rgba(64, 150, 150, 0.82), rgba(150, 220, 216, 0.72) 45%, rgba(84, 170, 168, 0.85)); }
.c2-side--t { top: calc(-8 * var(--mm)); transform: rotateX(90deg); }
.c2-side--b { top: calc(132 * var(--mm)); transform: rotateX(-90deg); }

/* the room's light stays where it is as the shell turns: the gloss slides the other way */
.c2-gloss { left: calc(4 * var(--mm)); top: calc(4 * var(--mm)); width: calc(92 * var(--mm)); height: calc(140 * var(--mm)); border-radius: calc(14 * var(--mm)); overflow: hidden; pointer-events: none; transform: translateZ(calc(0.15 * var(--mm))); }
.c2-gloss i { position: absolute; inset: -20%; translate: var(--gx, 0) var(--gy, 0); }
.c2-gloss i:first-child { background: linear-gradient(125deg, rgba(255, 255, 255, 0.2) 8%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 38%); }
.c2-gloss i:last-child { background: radial-gradient(40% 22% at 30% 18%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)); translate: calc(var(--gx, 0px) * 2.2) calc(var(--gy, 0px) * 1.4); }

/* the motor shakes the body a hair while it prints; a refusal gives one small knock */
.c2-obj.is-printing { animation: c2-buzz 70ms steps(2, end) infinite; }
@keyframes c2-buzz { 50% { translate: 0.35px 0.2px; } }
.c2-obj.is-refused { animation: c2-knock 360ms var(--ease); }
@keyframes c2-knock { 20% { translate: -3px 0; } 45% { translate: 2px 0; } 70% { translate: -1px 0; } }

/* ------------------------------------------------------------------ the gauge's balls and the acrylic race over them */
.c2-balls { transform: translateZ(calc(2.1 * var(--mm))); pointer-events: none; }
.c2-race { transform: translateZ(calc(3.6 * var(--mm))); pointer-events: none; opacity: 0; transition: opacity var(--t-ui) var(--ease); }
.c2-track { transform: translateZ(calc(0.6 * var(--mm))); }

/* ------------------------------------------------------------------ the legend, pad-printed on the face */
.c2-legend { inset: 0; pointer-events: none; transform: translateZ(calc(0.05 * var(--mm))); font-family: var(--text); color: var(--c2-print); text-shadow: 0 0 calc(0.5 * var(--mm)) rgba(6, 30, 50, 0.6); }
.c2-legend > * { position: absolute; display: block; font-style: normal; font-weight: 400; line-height: 1; white-space: nowrap; }
.c2-tick { width: calc(1.6 * var(--mm)); height: calc(0.24 * var(--mm)); background: var(--c2-print); translate: -100% -50%; }
.c2-tick--r { translate: 0 -50%; }
.c2-tick--mid { width: calc(2.6 * var(--mm)); }
.c2-tick-n { font-size: calc(2.1 * var(--mm)); translate: -100% -50%; }
.c2-tick-n--r { translate: 0 -50%; }
.c2-end { font-size: calc(3.1 * var(--mm)); letter-spacing: 0.3em; translate: -50% -50%; rotate: -90deg; }
.c2-scale { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--c2-print); opacity: 0.62; overflow: visible; }
.c2-how { font-size: max(calc(2.0 * var(--mm)), 11px); font-style: italic; translate: -100% -50%; letter-spacing: 0.02em; }
.c2-panel { border-radius: calc(1.6 * var(--mm)); background: rgba(4, 14, 30, 0.5); box-shadow: inset 0 0 0 calc(0.22 * var(--mm)) rgba(236, 248, 250, 0.55); }
.c2-banklbl { font-size: max(calc(2.0 * var(--mm)), 11px); font-style: italic; translate: -50% -50%; }
.c2-bankopt { font-size: max(calc(1.8 * var(--mm)), 10px); translate: -50% -50%; letter-spacing: 0.08em; }

/* ------------------------------------------------------------------ the nameplate: brushed silver, a family mark (HPR-C1 to C3) */
.c2-label {
  transform: translateZ(calc(0.3 * var(--mm)));
  border-radius: calc(1.2 * var(--mm));
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 1px, rgba(0, 0, 0, 0.03) 1px 2px),
    linear-gradient(100deg, #b7bdc2 0%, #eef1f3 22%, #c9ced2 48%, #f4f6f7 70%, #b9bfc4 100%);
  box-shadow: inset 0 0 0 0.5px rgba(30, 34, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 calc(0.3 * var(--mm)) calc(0.6 * var(--mm)) rgba(10, 30, 40, 0.35);
  color: #191b1e; overflow: hidden; pointer-events: none;
}
.c2-label p { position: absolute; margin: 0; line-height: 1; white-space: nowrap; max-width: none; }
.c2-label-part { left: calc(1.6 * var(--mm)); top: calc(1.4 * var(--mm)); font-family: var(--display); font-size: calc(5.0 * var(--mm)); letter-spacing: -0.02em; }
.c2-label-name { left: calc(1.7 * var(--mm)); top: calc(6.9 * var(--mm)); font-size: calc(2.2 * var(--mm)); }
.c2-label-sub { left: calc(1.7 * var(--mm)); top: calc(9.3 * var(--mm)); font-size: max(calc(1.8 * var(--mm)), 9px); font-style: italic; color: #3a3f44; }
.c2-label-fw { right: calc(1.5 * var(--mm)); top: calc(1.6 * var(--mm)); font-size: calc(1.35 * var(--mm)); color: #3a3f44; letter-spacing: 0.02em; }
.c2-label-code { position: absolute; right: calc(1.5 * var(--mm)); top: calc(3.6 * var(--mm)); width: calc(13 * var(--mm)); height: calc(3.6 * var(--mm)); color: #15171a; }
.c2-label-code svg { display: block; width: 100%; height: 100%; }
.c2-label-maker { right: calc(1.5 * var(--mm)); top: calc(9.6 * var(--mm)); font-size: calc(1.15 * var(--mm)); color: #3a3f44; letter-spacing: 0.03em; }

/* ------------------------------------------------------------------ the counter: two drums in a chrome bezel */
.c2-counter {
  transform: translateZ(calc(0.2 * var(--mm)));
  display: flex; align-items: center; justify-content: center; gap: calc(0.3 * var(--mm));
  border-radius: calc(1.3 * var(--mm));
  background: linear-gradient(180deg, #050607, #17191b 50%, #050607);
  box-shadow:
    0 0 0 calc(0.55 * var(--mm)) #d9dee2, 0 0 0 calc(0.75 * var(--mm)) #8b949b,
    inset 0 calc(0.6 * var(--mm)) calc(0.8 * var(--mm)) rgba(0, 0, 0, 0.8);
  font-family: var(--text); font-size: calc(5.4 * var(--mm)); line-height: 1; color: #f2f4f5;
  pointer-events: none; overflow: hidden;
}
.c2-drum { position: relative; display: block; width: 0.62em; height: 1.08em; overflow: hidden; border-radius: 0.06em;
  background: linear-gradient(180deg, #000, #222528 22%, #2c2f33 50%, #222528 78%, #000); }
.c2-drum-strip { position: absolute; left: 0; right: 0; top: 0.04em; display: flex; flex-direction: column; translate: 0 calc(var(--d, 0) * -1em); transition: translate 220ms var(--ease); }
.c2-drum-strip span { display: block; height: 1em; text-align: center; }
.c2-drum::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7)); }
.c2-pct { font-size: 0.5em; color: #c7cdd1; margin-left: 0.1em; align-self: center; }

/* the thumbwheel: a knurled edge in its slot */
.c2-wheel {
  transform: translateZ(calc(0.1 * var(--mm)));
  border-radius: calc(1.2 * var(--mm)); cursor: ns-resize; touch-action: none; outline-offset: 2px;
  background: linear-gradient(90deg, #111 0, #1d1f22 15%, #1d1f22 85%, #111);
  box-shadow: inset 0 0 0 calc(0.3 * var(--mm)) rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(200, 220, 222, 0.5);
}
.c2-wheel-knurl {
  position: absolute; inset: calc(0.6 * var(--mm)); border-radius: calc(0.8 * var(--mm));
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 30%, rgba(255, 255, 255, 0.18) 50%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.75)),
    repeating-linear-gradient(180deg, #a9b1b6 0 calc(0.35 * var(--mm)), #4b5257 calc(0.35 * var(--mm)) calc(0.7 * var(--mm)));
  background-position: 0 0, 0 calc(var(--k, 70) * 0.35 * var(--mm));
  transition: background-position 180ms var(--ease);
}
.c2-wheel:focus-visible { outline: var(--ring-double); box-shadow: var(--ring-halo); }

/* the status light: a red dome on the face */
.c2-led {
  transform: translateZ(calc(0.8 * var(--mm)));
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ff9c86 0, #b3221a 32%, #5c0d09 72%, #2a0605);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 0 0 calc(0.35 * var(--mm)) rgba(200, 210, 214, 0.7);
  pointer-events: none;
}
.c2-obj[data-led="on"] .c2-led, .c2-obj[data-led="blink"] .c2-led, .c2-obj[data-led="refuse"] .c2-led {
  background: radial-gradient(circle at 38% 34%, #fff1ea 0, #ff5b41 30%, #e4231a 60%, #8a120c);
  box-shadow: 0 0 calc(2 * var(--mm)) calc(0.6 * var(--mm)) rgba(255, 70, 40, 0.55), 0 0 0 calc(0.35 * var(--mm)) rgba(200, 210, 214, 0.7);
}
.c2-obj[data-led="blink"] .c2-led { animation: c2-blink 200ms steps(1, end) infinite; }
.c2-obj[data-led="refuse"] .c2-led { animation: c2-blink 110ms steps(1, end) 6; }
@keyframes c2-blink { 50% { background: radial-gradient(circle at 38% 34%, #ff9c86 0, #b3221a 32%, #5c0d09 72%); box-shadow: 0 0 0 calc(0.35 * var(--mm)) rgba(200, 210, 214, 0.7); } }

/* the bank's switch: a chrome slider in a slot */
.c2-switch {
  transform: translateZ(calc(0.2 * var(--mm)));
  border-radius: 999px;
  background: linear-gradient(180deg, #0a0c0d, #1c1f22);
  box-shadow: inset 0 calc(0.4 * var(--mm)) calc(0.6 * var(--mm)) rgba(0, 0, 0, 0.8), 0 0 0 0.5px rgba(200, 220, 222, 0.55);
}
.c2-switch-opt { position: absolute; top: 0; bottom: 0; width: 50%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.c2-switch-opt--general { left: 0; }
.c2-switch-opt--ml { right: 0; }
.c2-switch-opt:focus-visible { outline: var(--ring-double); box-shadow: var(--ring-halo); outline-offset: 1px; }
.c2-switch-knob {
  position: absolute; top: calc(0.6 * var(--mm)); bottom: calc(0.6 * var(--mm)); left: calc(0.7 * var(--mm)); width: calc(12 * var(--mm));
  border-radius: 999px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px), linear-gradient(180deg, #fbfcfd, #c9cfd4 50%, #9aa3a9 52%, #e6eaed);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: translate var(--t-move) var(--spring);
}
.c2-switch[data-bank="ml"] .c2-switch-knob { translate: calc(12.6 * var(--mm)) 0; }

/* ------------------------------------------------------------------ the keys: milky acrylic, and Print in the jelly teal */
.c2-key {
  transform: translateZ(calc(1.6 * var(--mm)));
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; touch-action: manipulation;
  -webkit-touch-callout: none; border-radius: calc(3.2 * var(--mm));
  transition: transform 90ms var(--ease);
}
.c2-key-cap {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(247, 250, 250, 0.95), rgba(222, 231, 232, 0.9) 60%, rgba(200, 213, 215, 0.92));
  /* milky acrylic: a lit lip, the cap's own thickness as a skirt, the shadow it throws on the face */
  box-shadow:
    inset 0 calc(0.25 * var(--mm)) 0 rgba(255, 255, 255, 0.95),
    inset 0 calc(-0.5 * var(--mm)) calc(0.8 * var(--mm)) rgba(70, 110, 120, 0.22),
    0 0 0 0.5px rgba(40, 70, 80, 0.4),
    0 calc(0.9 * var(--mm)) 0 rgba(176, 198, 202, 0.96),
    0 calc(1.05 * var(--mm)) 0 rgba(48, 80, 90, 0.45),
    0 calc(1.6 * var(--mm)) calc(1.6 * var(--mm)) rgba(6, 34, 48, 0.45);
  transition: box-shadow 90ms var(--ease), filter 90ms var(--ease), translate 90ms var(--ease);
}
.c2-key-label { font-family: var(--text); font-size: calc(3.3 * var(--mm)); line-height: 1; color: #2b3135; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
/* a latched answer sits down and a small light under it comes on */

.c2-key[aria-pressed="true"] .c2-key-cap, .c2-key.is-down .c2-key-cap, .c2-key:active .c2-key-cap {
  filter: brightness(0.95); translate: 0 calc(0.6 * var(--mm));
  box-shadow: inset 0 calc(0.4 * var(--mm)) calc(0.9 * var(--mm)) rgba(40, 70, 80, 0.32), 0 0 0 0.5px rgba(40, 70, 80, 0.5),
    0 calc(0.3 * var(--mm)) 0 rgba(176, 198, 202, 0.96), 0 calc(0.45 * var(--mm)) 0 rgba(48, 80, 90, 0.45), 0 calc(0.6 * var(--mm)) calc(0.6 * var(--mm)) rgba(6, 34, 48, 0.35);
}
.c2-key[aria-pressed]::after {
  content: ""; position: absolute; right: calc(1.6 * var(--mm)); top: calc(1.5 * var(--mm)); width: calc(1.1 * var(--mm)); height: calc(1.1 * var(--mm)); border-radius: 50%;
  background: #6e7a80; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.4); transform: translateZ(1px);
}
.c2-key[aria-pressed="true"]::after { background: #7ff5e2; box-shadow: 0 0 calc(1 * var(--mm)) rgba(90, 255, 225, 0.9), inset 0 0 0 0.5px rgba(0, 60, 50, 0.4); }
.c2-key--print { border-radius: 999px; }
.c2-key--print .c2-key-cap {
  background: var(--pinstripe-teal), var(--jelly);
  box-shadow: var(--jelly-shadow), 0 calc(0.9 * var(--mm)) 0 #06433f, 0 calc(1.05 * var(--mm)) 0 rgba(0, 30, 28, 0.6), 0 calc(1.6 * var(--mm)) calc(1.6 * var(--mm)) rgba(0, 40, 37, 0.5);
}
.c2-key--print .c2-key-cap::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 1px; height: 50%;
  border-radius: 999px 999px 60% 60% / 999px 999px 40% 40%; background: var(--jelly-gloss); pointer-events: none;
}
.c2-key--print .c2-key-label { color: var(--teal-ink); text-shadow: var(--teal-shade); position: relative; }
.c2-key--print:hover .c2-key-cap { filter: brightness(1.08) saturate(1.06); }
.c2-key--print.is-down .c2-key-cap, .c2-key--print:active .c2-key-cap { filter: brightness(0.9); translate: 0 calc(0.6 * var(--mm)); box-shadow: inset 0 2px 4px rgba(0, 24, 22, 0.6), inset 0 0 0 0.5px rgba(0, 30, 28, 0.7), 0 calc(0.3 * var(--mm)) 0 #06433f; }
.c2-key:focus-visible { outline: var(--ring-double); outline-offset: 3px; box-shadow: var(--ring-halo); }

/* ------------------------------------------------------------------ the paper */
.c2-paper {
  --t: 0.3em;
  left: calc(21 * var(--mm)); width: calc(58 * var(--mm)); bottom: calc(144 * var(--mm));
  max-height: calc(var(--paper-room, 60vh));
  transform: translateZ(calc(-10.8 * var(--mm)));
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  padding: 0 calc(2.4 * var(--mm));
  font-family: "Xanh Mono", "HPR-C2 Receipt", monospace;
  font-size: calc(53.2 * var(--mm) / 13 / 1.02); line-height: 1.36;
  color: var(--c2-thermal);
  background:
    linear-gradient(90deg, rgba(40, 46, 50, 0.08), rgba(40, 46, 50, 0) 9%, rgba(255, 255, 255, 0) 70%, rgba(40, 46, 50, 0.09)),
    linear-gradient(180deg, #eef0ec, var(--c2-paper) 12%, #fbfbf7 70%, #eff0ec);
  box-shadow: calc(0.5 * var(--mm)) 0 calc(1.4 * var(--mm)) rgba(24, 34, 40, 0.18);
  -webkit-mask: linear-gradient(180deg, transparent, #000 calc(9 * var(--mm)));
  mask: linear-gradient(180deg, transparent, #000 calc(9 * var(--mm)));
  transition: filter 30s linear;
}
/* where it leaves the slot, the paper is in the shadow of the cutter */
.c2-paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.4em; pointer-events: none; background: linear-gradient(0deg, rgba(20, 50, 60, 0.28), rgba(20, 50, 60, 0.06) 45%, transparent); }
.c2-obj.is-printing .c2-paper { animation: c2-buzz 70ms steps(2, end) infinite; }
.c2-roll { display: flex; flex-direction: column; padding: 0.6em 0 0.5em; }
/* thermal paper yellows a little after ten minutes in the light */
.c2-obj.is-aged .c2-paper, .c2-ticket.is-aged, .c2-slab.is-aged .c2s-canvas { filter: sepia(0.22) saturate(1.25) brightness(0.985); }

.c2-l { white-space: pre; min-height: 1.36em; overflow: hidden; text-shadow: 0 0 0.02em rgba(20, 22, 25, 0.35); }
.c2-l--dim { color: #66696d; }
.c2-l--gap { min-height: 0.7em; height: 0.7em; }
.c2-l--q { font-size: 1.22em; line-height: 1.15; min-height: 0; padding: 0.04em 0; }
.c2-l--a { color: var(--c2-thermal); }
.c2-l--head { transform: scaleY(1.45); transform-origin: 50% 70%; margin: 0.22em 0; }
.c2-l--fact { font-size: 0.8em; min-height: 0; line-height: 1.5; padding-left: calc(1.5em / 0.8); color: #66696d; }
.c2-l--say { white-space: pre; }
.c2-l--cut { color: #66696d; margin-top: 0.3em; }
.c2-l--bar { white-space: normal; height: 3.2em; padding: 0.4em 0; color: var(--c2-thermal); }
.c2-l--bar svg { display: block; width: 100%; height: 100%; }
.c2-l--pattern { height: 2.6em; margin: 0.3em 0; background:
  linear-gradient(90deg, #26282b 0 8%, transparent 8% 12%, #26282b 12% 16%, transparent 16% 22%, #26282b 22% 24%, transparent 24% 30%, #26282b 30% 31%, transparent 31%),
  repeating-linear-gradient(90deg, #26282b 0 0.25em, transparent 0.25em 0.5em);
  background-size: 100% 50%, 100% 50%; background-position: 0 0, 0 100%; background-repeat: no-repeat; }

/* Tear off: by the slot on a wide screen (egg.js places it), in the bar along the foot otherwise */
.c2-tear { position: absolute; z-index: 4; white-space: nowrap; }
.c2:not(.c2-wide):not(.c2-short) .c2-tear { left: auto; right: var(--gutter); top: auto; bottom: 11px; }
.c2.c2-low:not(.c2-wide):not(.c2-short) .c2-tear { bottom: auto; }

/* ------------------------------------------------------------------ the desk: the torn ticket, then the slab */
.c2-desk {
  position: absolute; z-index: 2;
  left: 54%; right: 4%; top: calc(var(--bar-h) + 1vh); bottom: 16vh;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
}
/* a hidden desk (or actions bar) is really gone: displayed, the empty desk lay over the device on a narrow screen
   and took the taps meant for its keys */
.c2-desk[hidden], .c2-actions[hidden] { display: none; }
.c2--page .c2-desk { top: 3vh; }
.c2:not(.c2-wide) .c2-desk { left: 4%; right: 4%; top: calc(var(--bar-h) * 0.9); bottom: calc(var(--hit) * 2.4 + 24px); }
.c2--page:not(.c2-wide) .c2-desk { top: 12px; }
.c2-ticket {
  --t: 0.32em;
  position: relative; height: 100%; max-height: 100%; aspect-ratio: 15.5 / 30;
  max-width: 100%;
  padding: 1.1em 1.25em;
  font-family: "Xanh Mono", "HPR-C2 Receipt", monospace; font-size: clamp(11px, 1.15vw + 0.4vh, 17px); line-height: 1.36;
  width: calc(15.5em + 2.5em); aspect-ratio: auto;
  color: var(--c2-thermal);
  background: linear-gradient(180deg, #f1f2ee, var(--c2-paper) 8%, #fbfbf7 80%, #f0f1ed);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 18px 36px -18px rgba(24, 40, 48, 0.55);
  rotate: -1.2deg;
  -webkit-mask: conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) 50% 0 / calc(var(--t) * 2) var(--t) repeat-x, linear-gradient(#000 0 0) 0 var(--t) / 100% calc(100% - 2 * var(--t)) no-repeat, conic-gradient(from 135deg at 50% 100%, #000 90deg, #0000 0) 50% 100% / calc(var(--t) * 2) var(--t) repeat-x;
  mask: conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) 50% 0 / calc(var(--t) * 2) var(--t) repeat-x, linear-gradient(#000 0 0) 0 var(--t) / 100% calc(100% - 2 * var(--t)) no-repeat, conic-gradient(from 135deg at 50% 100%, #000 90deg, #0000 0) 50% 100% / calc(var(--t) * 2) var(--t) repeat-x;
  transition: filter 30s linear, opacity var(--t-move) var(--ease), translate var(--t-move) var(--ease), scale var(--t-move) var(--ease);
}
.c2-ticket-roll { height: 100%; overflow: auto; scrollbar-width: none; }
.c2-ticket-roll::-webkit-scrollbar { display: none; }
.c2-ticket-roll:focus-visible { outline: var(--ring); outline-offset: 4px; }
.c2-ticket.is-sealing { opacity: 0; translate: 0 -10px; scale: 0.96; }
.c2-fly {
  position: fixed; z-index: 3; pointer-events: none; transform-origin: 50% 50%;
  background: linear-gradient(180deg, #eef0ec, var(--c2-paper) 12%, #fbfbf7 70%);
  box-shadow: 0 12px 24px -12px rgba(24, 40, 48, 0.5);
}

/* the slab: two faces drawn on canvases (slab.js), turned over in 3D, leaning a little toward the pointer */
.c2-slab-rig { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ease); }
.c2-slab-rig.is-arriving { animation: c2-slab-in 820ms var(--ease) both; }
@keyframes c2-slab-in { from { translate: 120px 0; rotate: 0 1 0 -18deg; opacity: 0; } 60% { opacity: 1; } }
.c2-slab { position: relative; margin: 0; height: var(--slab-h, 70vh); aspect-ratio: 100 / 162; transform-style: preserve-3d; cursor: pointer; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.c2s-turn { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 900ms var(--ease); }
.c2-slab.is-back .c2s-turn { transform: rotateY(180deg); }
.c2s-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 5.2% / 3.21%; filter: drop-shadow(0 14px 18px rgba(20, 34, 44, 0.32)); }
.c2s-back { transform: rotateY(180deg); }
.c2s-canvas { display: block; width: 100%; height: 100%; transition: filter 30s linear; }
.c2s-holo { position: absolute; display: block; border-radius: 2px; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.8;
  background: linear-gradient(100deg, rgba(255, 0, 140, 0.35), rgba(0, 220, 255, 0.35) 25%, rgba(255, 240, 0, 0.35) 50%, rgba(0, 255, 160, 0.35) 75%, rgba(180, 0, 255, 0.35));
  background-size: 300% 100%; background-position: calc(50% + var(--ry, 0deg) / 1deg * 6%) 0; transition: background-position 600ms var(--ease); }
.c2s-gloss { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 10%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0));
  background-size: 200% 200%; background-position: calc(50% - var(--ry, 0deg) / 1deg * 3%) calc(50% + var(--rx, 0deg) / 1deg * 3%); }

/* ------------------------------------------------------------------ the room's chrome */
.c2-actions {
  position: absolute; z-index: 4; left: 54%; right: 4%; bottom: 5vh;
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; align-items: center;
}
.c2:not(.c2-wide) .c2-actions { left: var(--gutter); right: var(--gutter); bottom: max(12px, 2.4vh); gap: var(--s1); }
.c2-actions .chip, .c2-actions .btn { white-space: nowrap; }
.c2-actions .btn--s { min-height: var(--btn-s-h); }
.c2-actions [aria-disabled="true"] { opacity: 0.6; cursor: progress; }

/* Close, the shell's small black pill, where the capsule sits on every page; on /calibrate/ the way home, the black
   pill, at the room's foot (shell.css, buttons) */
.c2-close-capsule { position: absolute; z-index: 6; top: calc((var(--bar-h) - var(--btn-s-h)) / 2); right: var(--frame); display: flex; }
.c2--page .c2-close-capsule { top: auto; bottom: max(2vh, 12px); right: auto; left: var(--frame); }
.c2--page:not(.c2-wide) .c2-close-capsule { bottom: 11px; left: var(--gutter); }
/* a low room (a small phone, or one on its side) keeps its foot for the device: the way home is the bar's */
.c2--page:not(.c2-wide).has-desk .c2-close-capsule, .c2--page.c2-low .c2-close-capsule { display: none; }
.c2-close { min-height: var(--btn-s-h); white-space: nowrap; }

.c2-hint { position: absolute; z-index: 4; left: var(--frame); bottom: max(2vh, 12px); margin: 0; max-width: 34ch; font-family: var(--text); font-style: italic; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--egg-quiet); }
.c2--page .c2-hint { left: auto; right: var(--frame); text-align: right; }
.c2.has-desk .c2-hint { display: none; }
@media (max-width: 1100px), (max-height: 640px) { .c2-hint { display: none; } }

/* a short room (a phone on its side): the device stands to the left, the statement beside it */
.c2-sidepanel { display: none; }
.c2.c2-short .c2-stage { left: 30%; }
.c2.c2-short .c2-sidepanel { display: block; position: absolute; z-index: 3; left: 52%; right: var(--gutter); top: calc(var(--bar-h) + 8px); max-height: calc(100% - var(--bar-h) - 64px); overflow: auto; }
.c2-side-k { margin: 0 0 var(--s1); }
.c2-side-q { margin: 0; font-family: var(--display); font-size: clamp(19px, 2.4vw, 26px); line-height: 1.15; letter-spacing: -0.01em; color: var(--c2-ink); }
.c2.c2-short .c2-hint { display: none; }
/* the ticket and the slab go beside the device, where the statement was; the actions in a column at the edge */
.c2.c2-short.has-desk .c2-sidepanel { display: none; }
.c2.c2-short .c2-desk { left: 46%; right: calc(var(--gutter) + 13.5rem + 12px); top: calc(var(--bar-h) + 4px); bottom: 10px; }
.c2--page.c2-short .c2-desk { top: 8px; }
.c2.c2-short .c2-actions { left: auto; right: var(--gutter); width: 13.5rem; top: calc(var(--bar-h) + 4px); bottom: 10px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: var(--s1); }
.c2--page.c2-short .c2-actions { top: 8px; }

/* ------------------------------------------------------------------ what to press (HYBRID-4 item 23), in the device's own terms
   The answer keys stand proud on a deeper skirt and rise a hair under the pointer; their lights glow amber while the
   device waits for Yes or No (and the chosen one turns teal). The counter stays dim until there is an answer to be
   sure of; then the thumbwheel's slot and Print light up, Print with its own lamp. Small pad-printed numerals, 1 2 3,
   give the order. Tear off and the slab's keys are keys too: milky caps with a skirt, pressed down when pressed. */
.c2-key-cap {
  box-shadow:
    inset 0 calc(0.25 * var(--mm)) 0 rgba(255, 255, 255, 0.95),
    inset 0 calc(-0.5 * var(--mm)) calc(0.8 * var(--mm)) rgba(70, 110, 120, 0.22),
    0 0 0 0.5px rgba(40, 70, 80, 0.45),
    0 calc(1.3 * var(--mm)) 0 rgba(176, 198, 202, 0.98),
    0 calc(1.5 * var(--mm)) 0 rgba(40, 72, 82, 0.55),
    0 calc(2.2 * var(--mm)) calc(1.8 * var(--mm)) rgba(6, 34, 48, 0.5);
}
.c2-key:not(.c2-key--print):not([aria-pressed="true"]):not(.is-down):not(:active):hover .c2-key-cap { translate: 0 calc(-0.2 * var(--mm)); filter: brightness(1.04); }
.c2-key[aria-pressed]::after {
  right: calc(1.4 * var(--mm)); top: calc(1.3 * var(--mm)); width: calc(1.45 * var(--mm)); height: calc(1.45 * var(--mm));
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.c2-obj.wants-answer .c2-key[aria-pressed]::after {
  background: #ffc861; box-shadow: 0 0 calc(1.6 * var(--mm)) calc(0.2 * var(--mm)) rgba(255, 178, 64, 0.95), inset 0 0 0 0.5px rgba(90, 50, 0, 0.45);
  animation: c2-standby 1.8s ease-in-out infinite;
}
/* while it waits for an answer the two keys are backlit, a soft amber round their caps */
.c2-key:not(.c2-key--print)::before {
  content: ""; position: absolute; inset: calc(-0.6 * var(--mm)); border-radius: calc(3.8 * var(--mm)); pointer-events: none; opacity: 0;
  box-shadow: 0 0 calc(2.4 * var(--mm)) calc(0.3 * var(--mm)) rgba(255, 186, 84, 0.5), 0 0 0 calc(0.25 * var(--mm)) rgba(255, 210, 140, 0.55);
  transition: opacity var(--t-ui) var(--ease);
}
.c2-obj.wants-answer .c2-key:not(.c2-key--print)::before { opacity: 1; animation: c2-standby 1.8s ease-in-out infinite; }
@keyframes c2-standby { 50% { opacity: 0.45; } }
/* Print's lamp, in the cap, and its halo once there is something to print */
.c2-key--print .c2-key-cap::after {
  content: ""; position: absolute; left: 13%; top: 50%; width: calc(1.2 * var(--mm)); height: calc(1.2 * var(--mm)); translate: 0 -50%;
  border-radius: 50%; background: #0b3a37; box-shadow: inset 0 0 0 0.5px rgba(0, 20, 18, 0.6), 0 0.5px 0 rgba(255, 255, 255, 0.35);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.c2-obj.wants-print .c2-key--print .c2-key-cap::after { background: #9bfff1; box-shadow: 0 0 calc(1.2 * var(--mm)) rgba(110, 255, 232, 0.95), inset 0 0 0 0.5px rgba(0, 60, 50, 0.4); }
.c2-key--print::before {
  content: ""; position: absolute; inset: calc(-0.8 * var(--mm)); border-radius: 999px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 calc(2.4 * var(--mm)) calc(0.5 * var(--mm)) rgba(80, 250, 220, 0.5), 0 0 0 calc(0.3 * var(--mm)) rgba(150, 255, 238, 0.55);
  transition: opacity var(--t-ui) var(--ease);
}
.c2-obj.wants-print .c2-key--print::before { opacity: 1; animation: c2-standby 1.8s ease-in-out infinite; }
/* the thumbwheel: its slot lights once there is an answer to set it for, and under the pointer */
.c2-wheel { transition: box-shadow var(--t-fast) var(--ease); }
.c2-obj.wants-print .c2-wheel, .c2-wheel:hover {
  box-shadow: inset 0 0 0 calc(0.3 * var(--mm)) rgba(0, 0, 0, 0.6), 0 0 0 calc(0.32 * var(--mm)) rgba(140, 250, 232, 0.85), 0 0 calc(1.6 * var(--mm)) rgba(90, 255, 225, 0.55);
}
.c2-wheel:hover .c2-wheel-knurl { filter: brightness(1.18); }
.c2-counter.is-unset .c2-drum-strip, .c2-counter.is-unset .c2-pct { opacity: 0.4; }
.c2-drum-strip, .c2-pct { transition: translate 220ms var(--ease), opacity var(--t-fast) var(--ease); }
/* the order, pad-printed in rings beside the controls */
.c2-step {
  display: grid !important; place-items: center; width: calc(3.6 * var(--mm)); height: calc(3.6 * var(--mm)); min-width: 14px; min-height: 14px;
  border-radius: 50%; box-shadow: inset 0 0 0 max(calc(0.28 * var(--mm)), 1px) #f4fcfb; color: #f4fcfb;
  font-size: max(calc(2.3 * var(--mm)), 10px); translate: -50% -50%; letter-spacing: 0;
}
/* Tear off and the slab's keys: milky caps with a skirt, the room's own keys rather than labels */
.c2 .c2-actions .chip, .c2 .c2-tear.chip {
  color: #22292d;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #fbfdfd, #e2eaeb 60%, #d2dddf);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(40, 70, 80, 0.24), 0 3px 0 rgba(160, 182, 188, 0.98), 0 4px 0 rgba(40, 72, 82, 0.4), 0 7px 12px -5px rgba(6, 34, 48, 0.45);
  translate: 0 -2px;
}
.c2 .c2-actions .chip:hover, .c2 .c2-tear.chip:hover { translate: 0 -3px; filter: brightness(1.03); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(40, 70, 80, 0.32), 0 4px 0 rgba(160, 182, 188, 0.98), 0 5px 0 rgba(40, 72, 82, 0.4), 0 9px 14px -5px rgba(6, 34, 48, 0.45); }
.c2 .c2-actions .chip:active, .c2 .c2-tear.chip:active { translate: 0 1px; box-shadow: inset 0 1px 2px rgba(40, 70, 80, 0.3), inset 0 0 0 1px rgba(40, 70, 80, 0.3), 0 1px 0 rgba(160, 182, 188, 0.98), 0 2px 0 rgba(40, 72, 82, 0.4); }
/* Tear off waits by the slot with its lamp lit: the one thing to do next */
.c2 .c2-tear.chip { padding-left: 30px; }
.c2 .c2-tear.chip::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; translate: 0 -50%; border-radius: 50%;
  background: #ffc861; box-shadow: 0 0 6px rgba(255, 178, 64, 0.95), inset 0 0 0 0.5px rgba(90, 50, 0, 0.45);
  animation: c2-standby 1.8s ease-in-out infinite;
}
/* the turn key's lamp says which face is up: dark for the front, teal for the back */
.c2 .c2-actions [data-turn] { position: relative; padding-left: 30px; }
.c2 .c2-actions [data-turn]::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; translate: 0 -50%; border-radius: 50%;
  background: #6e7a80; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.4); transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.c2 .c2-actions [data-turn][aria-pressed="true"]::before { background: #7ff5e2; box-shadow: 0 0 6px rgba(90, 255, 225, 0.9), inset 0 0 0 0.5px rgba(0, 60, 50, 0.4); }

/* the loupe over the slab's receipt */
.c2s-lens {
  position: absolute; z-index: 5; display: block; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0;
  background: #f6f5ef; transform: translateZ(40px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 3.5px rgba(70, 86, 98, 0.55), 0 14px 28px -8px rgba(10, 22, 32, 0.5);
  transition: opacity 140ms var(--ease);
}
.c2s-lens.is-on { opacity: 1; }
.c2s-lens canvas { display: block; width: 100%; height: 100%; }
.c2s-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 50% at 32% 24%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%), radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 70%, rgba(30, 44, 54, 0.22)); }
.c2-slab.is-aged .c2s-lens canvas { filter: sepia(0.22) saturate(1.25) brightness(0.985); }

/* /calibrate: the studio sweep comes down to the footer's silver on the shared ramp, so the footer has no seam
   (REVIEW-P3) */
.c2--page .c2-room::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(38%, var(--fade-pp)); pointer-events: none;
  background: var(--silver); -webkit-mask-image: var(--ramp); mask-image: var(--ramp);
}

/* the slab printed at card size (egg.js puts its front in .c2-print-card once it is drawn) */
.c2-print-card { display: none; }
@media print {
  html.c2-has-card:is(.egg-open, .c2-html) body > :not(.c2-print-card) { display: none !important; }
  html.c2-has-card:is(.egg-open, .c2-html) .c2-print-card { display: block !important; padding-top: 14mm; }
  .c2-print-card img { display: block; width: 54mm; height: 87.48mm; margin: 0 auto; }
}

/* ------------------------------------------------------------------ reduced motion: art-directed stills, nothing slides */
.c2.c2-still .c2-stage, .c2.c2-still .c2-slab-rig, .c2.c2-still .c2s-turn, .c2.c2-still .c2-drum-strip, .c2.c2-still .c2-switch-knob { transition: none !important; animation: none !important; }
.c2.c2-still .c2-obj, .c2.c2-still .c2-key::before, .c2.c2-still .c2-key::after, .c2.c2-still .c2-tear::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  dialog.c2[open] .c2-stage, .c2-slab-rig.is-arriving { animation: none; }
  .c2-obj.is-printing, .c2-obj.is-printing .c2-paper, .c2-obj.is-refused { animation: none; }
  .c2-obj.wants-answer .c2-key[aria-pressed]::after, .c2-obj.wants-answer .c2-key::before, .c2-obj.wants-print .c2-key--print::before, .c2 .c2-tear.chip::before { animation: none; }
}
/* forced colours: the keys and the device's controls get real borders */
@media (forced-colors: active) {
  .c2-key-cap, .c2-wheel, .c2-switch, .c2-counter { border: 1px solid CanvasText; }
}