/* Tape Reader: a mahogany desk, a stock ticker under glass, and the things a
   tape reader kept around it. Every texture is generated at load time and
   set on :root (--tex-*); each use has a plain colour underneath. */

:root {
  --ui: "Helvetica Neue", Helvetica, "Heiti SC", "PingFang SC", sans-serif;
  --engrave: Copperplate, "Copperplate Gothic Light", Didot, serif;
  --digits: "DIN Condensed", "DIN Alternate", "Helvetica Neue", sans-serif;
  --hand: Noteworthy, "Long Cang", "Kaiti SC", STKaiti, "Songti SC", cursive;
  --chalk: Chalkduster, "Long Cang", "Kaiti SC", cursive;
  --vu-font: Futura, "Futura PT", "Helvetica Neue", sans-serif;
  --song: "Songti SC", STSong, serif;

  --brass: #c9a24f;
  --brass-hi: #f7e7b4;
  --brass-lo: #7a5a22;
  --ink: #1d1a1a;
  --red: #b0261c;
  --green: #2f6b3a;
  --pen: #23408e;
  --ivory: #f8f1df;

  --brass-grad: linear-gradient(180deg, #f7e7b4 0%, #e2c57c 18%, #c9a24f 48%, #ad8637 76%, #7a5a22 100%);
  --brass-grad-h: linear-gradient(90deg, #8a6828 0%, #d9b964 20%, #f3e0a6 42%, #c9a24f 64%, #9c772d 86%, #6f511c 100%);
  --chrome-grad: linear-gradient(180deg, #fbfbfb 0%, #dfe2e5 45%, #b9bec3 52%, #d6d9dc 100%);

  --mw: 300px;
  --tape-row: calc(var(--mw) / 2);
  --gap: 24px;
}

@media (max-width: 1199px) {
  :root { --mw: 260px; --gap: 20px; }
}
@media (max-width: 759px) {
  :root { --mw: 170px; --gap: 12px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background-color: #4a2516;
  background-image: var(--tex-wood, none);
  background-size: 512px 512px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #f3e9d2;
  font: 14px/1.45 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

/* lamplight on the desk, darker towards the edges */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 45% 28%, rgba(255, 200, 140, .10), rgba(255, 200, 140, 0) 60%),
    radial-gradient(ellipse 120% 100% at 50% 40%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%);
}

button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid rgba(90, 160, 255, .9); outline-offset: 2px; }

/* ---------------------------------------------------------------- screws */

.screw {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  --rot: 35deg;
  background:
    linear-gradient(var(--rot), transparent 43%, rgba(50, 32, 8, .85) 43%, rgba(50, 32, 8, .85) 57%, transparent 57%),
    radial-gradient(circle at 35% 30%, #fff6d8 0, #e1c47c 30%, #b08a3a 65%, #6b4c1a 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .55), inset 0 0 1px rgba(0, 0, 0, .7), 0 0 0 .5px rgba(60, 40, 10, .5);
}
.screw.s1 { left: 6px; top: 6px; --rot: 25deg; }
.screw.s2 { right: 6px; top: 6px; --rot: 110deg; }
.screw.s3 { left: 6px; bottom: 6px; --rot: 160deg; }
.screw.s4 { right: 6px; bottom: 6px; --rot: 70deg; }

/* ================================================================ navbar */

.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: #5c3c27;
  background-image:
    linear-gradient(rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .18)),
    var(--tex-leather-brown, none);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 235, 210, .22), inset 0 -1px 0 rgba(0, 0, 0, .7);
}
/* stitching along both edges */
.navbar::before, .navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed rgba(246, 226, 196, .42);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
  pointer-events: none;
}
.navbar::before { top: 5px; }
.navbar::after { bottom: 6px; }

.nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  min-height: 62px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.plaque {
  position: relative;
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 22px 5px;
  border-radius: 5px;
  background-image: var(--tex-brushed, none), var(--brass-grad);
  background-blend-mode: soft-light, normal;
  background-size: 256px 64px, auto;
  border: 1px solid #5e4317;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 250, 225, .8), inset 0 -1px 0 rgba(90, 60, 20, .45);
}
.plaque .screw { width: 6px; height: 6px; top: 50%; margin-top: -3px; }
.plaque .screw.s1 { left: 7px; }
.plaque .screw.s2 { right: 7px; }
.plaque b {
  font: 700 17px/1.2 var(--engrave);
  letter-spacing: .1em;
  color: #3b2410;
  text-shadow: 0 1px 0 rgba(255, 245, 215, .7), 0 -1px 0 rgba(80, 50, 10, .3);
}
.plaque span {
  font: 600 11px/1 var(--ui);
  letter-spacing: .3em;
  color: rgba(59, 36, 16, .82);
  text-shadow: 0 1px 0 rgba(255, 245, 215, .6);
}

/* search bar */
.search {
  position: relative;
  flex: 1 1 260px;
  max-width: 400px;
  min-width: 0;
}
.search input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 31px;
  padding: 0 30px 0 30px;
  border-radius: 16px;
  border: 1px solid #2a170b;
  background: linear-gradient(#e2e2e2, #fdfdfd 35%, #fff);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 235, 210, .22);
  font: 15px var(--ui);
  color: #1e1e1e;
}
.search input::placeholder { color: #9a9a9a; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search input:focus { outline: none; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), 0 0 0 3px rgba(98, 160, 255, .55); }
.search-glass {
  position: absolute;
  left: 11px;
  top: 9px;
  width: 11px;
  height: 11px;
  border: 2px solid #8e8e8e;
  border-radius: 50%;
  pointer-events: none;
}
.search-glass::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 8px;
  width: 6px;
  height: 2.4px;
  border-radius: 2px;
  background: #8e8e8e;
  transform: rotate(45deg);
}
.search-clear {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 17px;
  height: 17px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #b2b2b2;
  color: #fff;
  font: 700 14px/17px var(--ui);
  cursor: pointer;
}

/* iPad-style popover under the search bar */
.popover {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  width: min(380px, calc(100vw - 24px));
  transform: translateX(-50%);
  z-index: 50;
  padding: 7px;
  border-radius: 11px;
  background: linear-gradient(#5a6170 0, #232833 22px, #0e1118 100%);
  border: 1px solid #05070b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.popover-arrow {
  position: absolute;
  left: 50%;
  top: -12px;
  width: 24px;
  height: 13px;
  margin-left: -12px;
  overflow: hidden;
}
.popover-arrow::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 17px;
  height: 17px;
  background: #5a6170;
  border: 1px solid #05070b;
  transform: rotate(45deg);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35);
}
.popover ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.popover li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid #e0e0e0;
  color: #111;
  cursor: pointer;
}
.popover li:last-child { border-bottom: none; }
.popover li b { font: 700 16px var(--ui); flex: none; }
.popover li .nm { flex: 1; min-width: 0; font-size: 14px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popover li .ex { flex: none; font-size: 12px; color: #8a8a8a; }
.popover li[aria-selected="true"], .popover li:hover {
  background: linear-gradient(#058cf5, #015fe6);
  color: #fff;
}
.popover li[aria-selected="true"] .nm, .popover li[aria-selected="true"] .ex,
.popover li:hover .nm, .popover li:hover .ex { color: rgba(255, 255, 255, .9); }
.popover li.empty { color: #888; cursor: default; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.popover li.empty small { font-size: 12px; color: #a3a3a3; }
.popover li.empty:hover { background: none; color: #888; }

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

/* segmented control, tinted for the leather bar */
.segmented {
  display: inline-flex;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255, 235, 210, .2);
}
.segmented button {
  min-width: 56px;
  height: 31px;
  padding: 0 14px;
  border: 1px solid #22130a;
  border-left-width: 0;
  background: linear-gradient(#a8825f 0%, #7b5638 50%, #6a472c 51%, #77523a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 230, 200, .35);
  color: #fff;
  font: 700 13px/1 var(--ui);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55);
  cursor: pointer;
}
.segmented button:first-child { border-left-width: 1px; border-radius: 6px 0 0 6px; }
.segmented button:last-child { border-radius: 0 6px 6px 0; }
.segmented button[aria-selected="true"], .segmented button[aria-checked="true"] {
  background: linear-gradient(#3b2416, #57381f);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .7);
}
.segmented button:disabled { color: rgba(255, 255, 255, .45); cursor: default; }

.nav-btn {
  height: 31px;
  padding: 0 13px;
  border-radius: 6px;
  border: 1px solid #22130a;
  background: linear-gradient(#a8825f 0%, #7b5638 50%, #6a472c 51%, #77523a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 230, 200, .35), 0 1px 0 rgba(255, 235, 210, .2);
  color: #fff;
  font: 700 13px/1 var(--ui);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55);
  cursor: pointer;
}
.nav-btn:active { background: linear-gradient(#3b2416, #57381f); }

.sound-ctl { display: flex; align-items: center; gap: 8px; }
.sound-label { font: 700 13px var(--ui); color: #f4e4cb; text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }

/* the iOS 5/6 switch: 77 x 27, ON in blue, OFF in grey */
.ios-switch {
  position: relative;
  flex: none;
  width: 77px;
  height: 27px;
  padding: 0;
  border: 1px solid #6b6b6b;
  border-radius: 14px;
  overflow: hidden;
  background: #e8e8e8;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.sw-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 127px;
  display: flex;
  transition: transform .2s ease;
}
.sw-on, .sw-off {
  flex: 0 0 63.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--ui);
}
.sw-on {
  padding-right: 13.5px;
  background: linear-gradient(#0d5ad0 0%, #2a83ee 52%, #4a9cf6 100%);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
}
.sw-off {
  padding-left: 13.5px;
  background: linear-gradient(#dedede 0%, #f2f2f2 52%, #fdfdfd 100%);
  color: #808080;
  text-shadow: 0 1px 0 #fff;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .22);
}
.sw-knob {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid #9a9a9a;
  background: linear-gradient(#cdcdcd, #fbfbfb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 0 #fff;
  transition: transform .2s ease;
  z-index: 1;
}
.ios-switch[aria-checked="false"] .sw-track { transform: translateX(-50px); }
.ios-switch[aria-checked="true"] .sw-knob { transform: translateX(50px); }

/* ================================================================== desk */

.desk {
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 24px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mw);
  grid-template-rows: auto var(--tape-row) auto auto auto auto;
  column-gap: var(--gap);
}

.console {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  padding-bottom: 16px;
  min-width: 0;
}
.price-stack {
  flex: 1000 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#chg { flex: 0 0 172px; }
/* the meters share a row with the price; when they wrap onto a line of
   their own (mid-size windows) the console stretches across it */
.vu-console { flex: 1 0 340px; }

#machine {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  position: relative;
  z-index: 3;
  pointer-events: none;
  /* the ticker's own shadow is part of the drawing; this lifts it off the wood */
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
}
#machine svg { width: 100%; height: auto; display: block; }

.tape-wrap {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 2;
  height: var(--tape-row);
}
.tape-wrap canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  touch-action: pan-y;
}

.latest {
  position: absolute;
  top: 6px;
  right: calc(var(--mw) + 18px);
  z-index: 4;
  height: 26px;
  padding: 0 12px;
  border-radius: 13px;
  border: 1px solid rgba(0, 0, 0, .7);
  background: linear-gradient(rgba(70, 70, 70, .92), rgba(18, 18, 18, .92));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff;
  font: 700 12px/24px var(--ui);
  text-shadow: 0 -1px 0 #000;
  cursor: pointer;
  animation: pop-in .25s ease-out;
}

.slide-wrap { grid-column: 1; grid-row: 3; min-width: 0; margin-top: 8px; }
.keys { grid-column: 1; grid-row: 4; }
.transport { grid-column: 2; grid-row: 3 / 5; }
.blotter { grid-column: 1 / -1; grid-row: 5; }
.foot { grid-column: 1 / -1; grid-row: 6; }

/* ============================================================ name plate */

.nameplate {
  position: relative;
  padding: 10px 24px 9px;
  border-radius: 6px;
  background-image: var(--tex-brushed, none), var(--brass-grad);
  background-blend-mode: soft-light, normal;
  background-size: 512px 128px, auto;
  border: 1px solid #5e4317;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 250, 225, .85), inset 0 -1px 0 rgba(90, 60, 20, .45);
  color: #3b2410;
  min-width: 0;
}
.nameplate::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  border: 1px solid rgba(90, 60, 20, .35);
  box-shadow: inset 0 1px 0 rgba(90, 60, 20, .12), 0 1px 0 rgba(255, 248, 220, .45);
  pointer-events: none;
}
.np-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-sym {
  font: 700 30px/1.1 var(--engrave);
  letter-spacing: .06em;
  color: #3b2410;
  text-shadow: 0 1px 0 rgba(255, 246, 215, .75), 0 -1px 0 rgba(80, 50, 10, .35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nameplate.long .np-sym { font-size: 22px; }
.np-badge {
  flex: none;
  padding: 2px 9px 3px;
  border-radius: 10px;
  font: 700 11px/1.3 var(--ui);
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
  background: linear-gradient(#8b8178, #5f564e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 rgba(255, 246, 215, .6), 0 0 0 1px rgba(60, 40, 10, .45);
}
.np-badge[data-kind="open"] { background: linear-gradient(#4f9a5c, #2c6a37); }
.np-badge[data-kind="ext"] { background: linear-gradient(#e0a640, #a8701a); }
.np-badge[data-kind="replay"] { background: linear-gradient(#a8443a, #6f1c14); }
.np-badge[data-kind="open"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  vertical-align: 1px;
  border-radius: 50%;
  background: #b8ffbf;
  box-shadow: 0 0 4px #8dff99;
  animation: breathe 2.4s ease-in-out infinite;
}
.np-name {
  margin-top: 2px;
  font: 600 12px/1.3 var(--engrave);
  letter-spacing: .14em;
  color: #4a3214;
  text-shadow: 0 1px 0 rgba(255, 246, 215, .6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-meta {
  margin-top: 1px;
  font: 600 10.5px/1.3 var(--ui);
  letter-spacing: .1em;
  color: rgba(59, 36, 16, .9);
  text-shadow: 0 1px 0 rgba(255, 246, 215, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================== odometer */

.odometer { --odo-size: 60px; min-width: 0; }
.odo-bezel {
  position: relative;
  padding: 12px 16px 7px;
  border-radius: 10px;
  border: 1px solid #000;
  background: linear-gradient(#36302c 0%, #1e1a18 40%, #110e0d 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 2px rgba(0, 0, 0, .35);
}
.odo-bezel .screw { top: 50%; margin-top: -11px; width: 8px; height: 8px; }
.odo-bezel .screw.s1 { left: 4px; }
.odo-bezel .screw.s2 { right: 4px; }
.odo-window {
  position: relative;
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 4px;
  border-radius: 4px;
  overflow: hidden;
  background: #0b0807;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .14), 0 -1px 0 rgba(0, 0, 0, .6);
}
.odo-drums {
  display: flex;
  align-items: stretch;
  height: 1.26em;
  font-size: var(--odo-size);
  font-family: var(--digits);
  font-weight: 700;
  line-height: 1;
}
.drum {
  display: inline-block;
  position: relative;
  height: 1.26em;
  overflow: hidden;
  background: linear-gradient(90deg, #d9d0b8 0%, #f8f2e0 18%, #fffaf0 50%, #f3ecd8 82%, #d2c8ae 100%);
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .55), inset -1px 0 0 rgba(0, 0, 0, .55);
}
.drum.int, .drum.dec { width: .62em; }
.drum.frac { width: 1.02em; }
.drum.dec { background: linear-gradient(90deg, #cfc4a6 0%, #eee4c8 18%, #f6eed6 50%, #e9dfc2 82%, #c8bc9c 100%); }
.strip { display: flex; flex-direction: column; will-change: transform; }
.drum .cell {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
  color: #1d1a1a;
}
/* measured per font by Odometer.centre() so the figure sits in the middle of its drum */
.drum.int .cell, .drum.dec .cell { position: relative; top: var(--odo-dy, .08em); }
.drum.blur .strip { filter: blur(.7px); }
.curve {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .18) 14%, rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .1) 80%, rgba(0, 0, 0, .66) 100%);
}
.odo-sep { position: relative; display: inline-block; height: 1.26em; }
.odo-sep.comma { width: .24em; }
.odo-sep.dot { width: .3em; }
.odo-sep.gap { width: .18em; }
.odo-sep.dot i {
  position: absolute;
  left: 50%;
  bottom: .25em;
  width: .11em;
  height: .11em;
  margin-left: -.055em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #c9a24f 60%, #6b4c1a);
  box-shadow: 0 0 .04em rgba(255, 220, 140, .5);
}
.odo-sep.comma i {
  position: absolute;
  left: 50%;
  bottom: .18em;
  width: .085em;
  height: .17em;
  margin-left: -.04em;
  border-radius: .06em .06em .06em .2em;
  background: linear-gradient(#f3dfa1, #b08a3a);
  transform: skewX(-14deg);
}
.drum .cell .fr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: .4em;
  line-height: 1;
}
.fr sup, .fr sub { font-size: 1em; line-height: 1; vertical-align: baseline; }
.fr i { display: block; width: 1.5em; height: .1em; margin: .1em 0 .05em; background: currentColor; }
.odo-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(172deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .08) 34%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, .28));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  border-radius: 4px;
}
.odo-label {
  display: flex;
  justify-content: center;
  gap: .7em;
  margin-top: 6px;
  font: 600 10px/1.2 var(--engrave);
  letter-spacing: .26em;
  color: #cfae62;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .9);
}
.odo-label b { font-weight: 600; }

/* =========================================================== change card */

.chgcard {
  position: relative;
  display: flex;
  padding: 13px;
  border-radius: 8px;
  background-image: var(--tex-brushed, none), var(--brass-grad);
  background-blend-mode: soft-light, normal;
  background-size: 512px 128px, auto;
  border: 1px solid #5e4317;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 250, 225, .85), inset 0 -1px 0 rgba(90, 60, 20, .45);
}
.chgcard .screw { width: 7px; height: 7px; }
.chgcard .screw.s1, .chgcard .screw.s2 { top: 3px; }
.chgcard .screw.s3, .chgcard .screw.s4 { bottom: 3px; }
.chgcard .screw.s1, .chgcard .screw.s3 { left: 3px; }
.chgcard .screw.s2, .chgcard .screw.s4 { right: 3px; }
.cc-face {
  --ink-c: var(--ink);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 8px 9px;
  border-radius: 4px;
  background: linear-gradient(#fdf9ee, #f1e8d0 70%, #e6dbbd);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 250, 225, .6);
  text-align: center;
  color: var(--ink-c);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.cc-face[data-ink="red"] { --ink-c: var(--red); }
.cc-face[data-ink="black"] { --ink-c: var(--ink); }
.cc-cap { font: 600 9px/1 var(--engrave); letter-spacing: .34em; color: #8a6a2c; }
.cc-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
  font: 700 42px/1 var(--digits);
}
.cc-arrow { font-size: .46em; transform: translateY(-.28em); }
.cc-pct { margin-top: 2px; font: 700 21px/1.1 var(--digits); }
.cc-ref { margin-top: 5px; font: 600 8.5px/1.2 var(--ui); letter-spacing: .1em; color: #7a6646; }
.cc-face.flip { animation: cc-flip .6s cubic-bezier(.3, .6, .3, 1); }
@keyframes cc-flip {
  0% { transform: perspective(500px) rotateX(0); }
  38% { transform: perspective(500px) rotateX(-88deg); filter: brightness(.7); }
  39% { transform: perspective(500px) rotateX(88deg); filter: brightness(.7); }
  100% { transform: perspective(500px) rotateX(0); filter: none; }
}

/* ============================================================ VU meters */

.vu-console {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 12px;
  padding: 12px 12px 9px;
  border-radius: 8px;
  background-color: #3a2316;
  background-image: linear-gradient(rgba(255, 255, 255, .08), rgba(0, 0, 0, .15)), var(--tex-walnut, var(--tex-wood, none));
  background-size: auto, 384px 384px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 225, 190, .25), inset 0 -2px 0 rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.vu-cell { flex: 1 1 0; min-width: 0; max-width: 300px; display: flex; flex-direction: column; align-items: center; }
.vu {
  width: 100%;
  padding: 5px;
  border-radius: 6px;
  background: linear-gradient(#2c2622, #0d0a08);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .7);
}
.vu svg { display: block; width: 100%; height: auto; border-radius: 2px; }
.vu-caption {
  margin-top: 7px;
  padding: 1px 10px 2px;
  border-radius: 3px;
  background-image: var(--brass-grad);
  border: 1px solid #5e4317;
  font: 600 11px/1.3 var(--ui);
  letter-spacing: .3em;
  color: #3b2410;
  text-shadow: 0 1px 0 rgba(255, 246, 215, .6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 250, 225, .7);
  white-space: nowrap;
}
.vu-zone { fill: none; stroke-width: 5; }
.vu[data-conv="cn"] .z-up { stroke: var(--red); }
.vu[data-conv="cn"] .z-down { stroke: var(--green); }
.vu[data-conv="us"] .z-up { stroke: var(--green); }
.vu[data-conv="us"] .z-down { stroke: var(--red); }
.vu[data-conv="mono"] .z-up, .vu[data-conv="mono"] .z-down { stroke: #4a423a; }
.vu .z-hot { stroke: var(--red); }
.vu-num text { font: 500 9px var(--vu-font); text-anchor: middle; fill: #1a1714; }
.vu-word { font: 600 8px var(--vu-font); text-anchor: middle; letter-spacing: .12em; fill: #1a1714; }
.vu[data-conv="cn"] .w-up { fill: var(--red); }
.vu[data-conv="cn"] .w-down { fill: var(--green); }
.vu[data-conv="us"] .w-up { fill: var(--green); }
.vu[data-conv="us"] .w-down { fill: var(--red); }
.vu-maker { font: 500 5px var(--vu-font); letter-spacing: .14em; fill: #4b3f2c; }
.vu-plate { font: 600 6.5px var(--vu-font); text-anchor: middle; letter-spacing: .24em; fill: #e9dcbc; }
.vu-dim { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.vu.off .vu-dim { opacity: .45; }

/* =============================================================== machine */

.m-engrave {
  font-family: var(--engrave);
  fill: #3b2410;
  letter-spacing: .08em;
  filter: drop-shadow(0 .5px 0 rgba(255, 244, 210, .6));
}
.m-big { font-size: 9.5px; font-weight: 700; }
.m-small { font-size: 4.6px; font-weight: 600; letter-spacing: .16em; }
.m-tiny { font-size: 5px; font-weight: 700; letter-spacing: .3em; }
.m-label {
  font: 700 6px var(--engrave);
  letter-spacing: .16em;
  fill: #f1dc9c;
  filter: drop-shadow(0 -.5px 0 rgba(0, 0, 0, .8));
}
.m-wheel-chars text { font: 700 5px var(--digits); text-anchor: middle; fill: #2a2018; }
.lamp .lamp-glow { transition: opacity .12s linear; }
.lamp .lamp-lens { transition: filter .12s linear; }
.lamp[data-state="on"] .lamp-glow { opacity: .9; }
.lamp[data-state="dim"] .lamp-glow { opacity: .3; }
.lamp:not([data-state="on"]):not([data-state="dim"]):not([data-state="blink"]) .lamp-lens { filter: brightness(.45) saturate(.6); }
.lamp[data-state="blink"] .lamp-glow { animation: lamp-glow 1.1s steps(1, end) infinite; }
.lamp[data-state="blink"] .lamp-lens { animation: lamp-lens 1.1s steps(1, end) infinite; }
@keyframes lamp-glow { 0% { opacity: .9; } 50% { opacity: 0; } }
@keyframes lamp-lens { 0% { filter: none; } 50% { filter: brightness(.45) saturate(.6); } }

/* ============================================================ slide rule */

.sliderule {
  position: relative;
  padding-top: 30px;
  height: 130px;
}
.sliderule canvas { display: block; }
.sr-runner {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 128px;
  margin-left: -23px;
  pointer-events: none;
  will-change: transform;
}
.sr-tab {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  padding: 2px 8px 1px;
  border-radius: 4px;
  background-image: var(--brass-grad);
  border: 1px solid #5e4317;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 250, 225, .8);
  white-space: nowrap;
  font: 700 15px/1.2 var(--digits);
  color: #2b1a0a;
  text-shadow: 0 1px 0 rgba(255, 246, 215, .6);
}
.sr-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -4px;
  border: 4px solid transparent;
  border-bottom: none;
  border-top: 5px solid #7a5a22;
}
.sr-glass {
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .26) 28%, rgba(255, 255, 255, .06) 52%, rgba(255, 255, 255, .16) 86%, rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.sr-glass::before, .sr-glass::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  height: 7px;
  border-radius: 2px;
  background: var(--chrome-grad);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(60, 64, 70, .45);
}
.sr-glass::before { top: -3px; }
.sr-glass::after { bottom: -3px; }
.sr-hair {
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 1px;
  margin-left: -.5px;
  background: var(--red);
  box-shadow: 0 0 1px rgba(176, 38, 28, .6);
}

/* ===================================================== typewriter keys */

.keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 14px;
  padding: 16px 6px 6px;
  min-width: 0;
}
.key {
  position: relative;
  flex: none;
  width: 62px;
  height: 62px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* the nickel rim */
.key::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #f5f7f8, #8a9096 18%, #e8ebed 36%, #7c8288 55%, #f2f4f5 72%, #979da3 88%, #f5f7f8);
  box-shadow: 0 5px 0 -1px #3f3328, 0 7px 9px rgba(0, 0, 0, .6);
  transition: box-shadow .08s, transform .08s;
}
.key-cap {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 34%, #3e3e3e 0, #191919 58%, #090909 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .22), inset 0 -3px 6px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .7);
  transition: transform .08s;
  overflow: hidden;
}
.key-cap::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 7%;
  height: 34%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.key-cap b {
  position: relative;
  font: 700 15px/1 var(--digits);
  letter-spacing: .04em;
  color: #f4efe0;
  text-shadow: 0 -1px 0 #000;
  padding-top: 2px;
}
.key-cap b.small { font-size: 12.5px; }
.key.add .key-cap b { font: 300 30px/1 var(--ui); padding: 0 0 3px; }
.key:active::before, .key.down::before { transform: translateY(3px); box-shadow: 0 2px 0 -1px #3f3328, 0 3px 4px rgba(0, 0, 0, .6); }
.key:active .key-cap, .key.down .key-cap { transform: translateY(3px); }
.key.current::before {
  background: conic-gradient(from 210deg, #fff1c4, #9c772d 18%, #f3e0a6 36%, #7a5a22 55%, #f7e7b4 72%, #a07a30 88%, #fff1c4);
}
.key.current .key-cap b { color: #ffd98a; }
.key-x {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: radial-gradient(circle at 50% 35%, #555, #111);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  color: #fff;
  font: 700 15px/19px var(--ui);
  text-align: center;
  display: none;
}
.keys.editing .key-x { display: block; }
.keys.editing .key:not(.add) { animation: jiggle .26s ease-in-out infinite alternate; }
.keys.editing .key:nth-child(2n) { animation-delay: -.13s; animation-duration: .24s; }
.keys.editing .key:nth-child(3n) { animation-delay: -.07s; animation-duration: .28s; }
.keys-done {
  height: 30px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid #22130a;
  background: linear-gradient(#7aa5f2, #4a7fe0 50%, #3570dc 51%, #2a62d0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .5);
  color: #fff;
  font: 700 13px/1 var(--ui);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
  cursor: pointer;
}
@keyframes jiggle {
  from { transform: rotate(-2.2deg); }
  to { transform: rotate(2.2deg); }
}

/* ===================================================== transport panel */

.transport {
  align-self: start;
  margin-top: 14px;
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 10px;
  background-color: #c9ccd0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .05)),
    var(--tex-brushed, none),
    linear-gradient(#e6e8eb, #cdd0d4 55%, #bfc3c8);
  background-blend-mode: normal, soft-light, normal;
  background-size: auto, 512px 128px, auto;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .45);
  color: #2b2b2b;
  min-width: 0;
}
.tp-row { display: flex; align-items: center; gap: 14px; }
.chrome-btn {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #ffffff 0, #e4e6e9 40%, #a8adb3 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .45), inset 0 1px 0 #fff, inset 0 -2px 4px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .4), 0 0 0 4px rgba(0, 0, 0, .06);
  cursor: pointer;
}
.chrome-btn:active { background: radial-gradient(circle at 50% 70%, #fafafa 0, #d9dce0 45%, #9da2a8 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .4); }
.chrome-btn i { position: absolute; left: 50%; top: 50%; }
/* paused: a play triangle */
.chrome-btn.play i {
  margin: -9px 0 0 -5px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #3a3f45;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8));
}
/* playing: two bars */
.chrome-btn.play[data-playing="true"] i {
  margin: -9px 0 0 -7px;
  width: 5px;
  height: 18px;
  border: none;
  background: #3a3f45;
  box-shadow: 9px 0 0 #3a3f45;
  border-radius: 1px;
}
.tp-clock { display: flex; flex-direction: column; min-width: 0; }
.tp-clock b {
  font: 700 34px/1 var(--digits);
  letter-spacing: .02em;
  color: #26292c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums;
}
.tp-clock span {
  margin-top: 2px;
  font: 600 10.5px/1.2 var(--ui);
  letter-spacing: .14em;
  color: #464a4f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.speed-keys {
  display: flex;
  height: 60px;
  margin-top: 13px;
  padding: 3px 3px 0;
  border-radius: 4px;
  background: linear-gradient(#1b1310, #2c201a);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .7);
}
.pkey {
  flex: 1;
  margin: 0 1px;
  padding: 0 0 7px;
  border: none;
  border-radius: 0 0 5px 5px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(#fffef9, #f1ebd9 70%, #e2d9bf);
  box-shadow: inset 0 -5px 0 #d6cdb2, inset 0 -6px 0 rgba(0, 0, 0, .15), 0 2px 2px rgba(0, 0, 0, .55);
  font: 700 13px/1 var(--digits);
  color: #3d362e;
  cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.pkey[aria-checked="true"] {
  transform: translateY(2px);
  background: linear-gradient(#e2dbc6, #efe9d6 60%, #e6ddc3);
  box-shadow: inset 0 -2px 0 #d6cdb2, inset 0 4px 6px rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, .55);
  color: var(--red);
}
.pkey:active { transform: translateY(2px); }

.scrub { margin-top: 14px; }
.ios-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  --fill: 0%;
  cursor: pointer;
}
.ios-slider:focus { outline: none; }
.ios-slider::-webkit-slider-runnable-track {
  height: 9px;
  border-radius: 5px;
  border: 1px solid #5c6066;
  background:
    linear-gradient(#1755c8, #3d8af0 60%, #61a6f7) 0 0 / var(--fill) 100% no-repeat,
    linear-gradient(#bdbdbd, #f2f2f2 60%, #fefefe);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .6);
}
.ios-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  border: 1px solid #8f8f8f;
  background: linear-gradient(#cfcfcf, #fcfcfc);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), inset 0 1px 0 #fff;
}
.ios-slider::-moz-range-track {
  height: 9px;
  border-radius: 5px;
  border: 1px solid #5c6066;
  background: linear-gradient(#bdbdbd, #f2f2f2 60%, #fefefe);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.ios-slider::-moz-range-progress {
  height: 9px;
  border-radius: 5px 0 0 5px;
  border: 1px solid #5c6066;
  background: linear-gradient(#1755c8, #3d8af0 60%, #61a6f7);
}
.ios-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #8f8f8f;
  background: linear-gradient(#cfcfcf, #fcfcfc);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), inset 0 1px 0 #fff;
}
.scrub-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 1px;
  font: 600 11px/1.2 var(--ui);
  color: #3f4348;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  font-variant-numeric: tabular-nums;
}
.tp-note {
  margin: 11px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #4a4e53;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.tp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; margin: 2px 0 0; }
.tp-stats div {
  padding: 8px 10px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .7);
  min-width: 0;
}
.tp-stats dt { font: 600 11px/1.2 var(--ui); color: #5d6166; letter-spacing: .1em; }
.tp-stats dd {
  margin: 3px 0 0;
  font: 700 20px/1.1 var(--digits);
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-stats dd .ok { color: #23763a; }
.tp-stats dd .warn { color: #a8701a; }
.tp-stats dd .bad { color: var(--red); }

/* ============================================================= blotter */

.blotter {
  position: relative;
  margin-top: 34px;
  padding: 40px 40px 46px;
  border-radius: 6px;
  background-color: #2c4b33;
  background-image: linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .12)), var(--tex-leather, none);
  background-size: auto, 256px 256px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 0 60px rgba(0, 0, 0, .35);
}
.blotter::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 2px dashed rgba(232, 222, 186, .32);
  border-radius: 4px;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5));
}
.corner {
  position: absolute;
  width: 74px;
  height: 74px;
  z-index: 0;
  background-color: #4a2a18;
  background-image: linear-gradient(135deg, rgba(255, 235, 210, .16), rgba(0, 0, 0, .2)), var(--tex-leather-brown, none);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.corner::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: linear-gradient(135deg, transparent 49%, rgba(240, 220, 190, .38) 49.5%, rgba(240, 220, 190, .38) 50.5%, transparent 51%);
}
.corner.c1 { left: 0; top: 0; clip-path: polygon(0 0, 100% 0, 0 100%); border-top-left-radius: 6px; }
.corner.c2 { right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); border-top-right-radius: 6px; }
.corner.c3 { left: 0; bottom: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); border-bottom-left-radius: 6px; }
.corner.c4 { right: 0; bottom: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-right-radius: 6px; }
.corner.c2::after, .corner.c3::after { background: linear-gradient(45deg, transparent 49%, rgba(240, 220, 190, .38) 49.5%, rgba(240, 220, 190, .38) 50.5%, transparent 51%); }

.blotter-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 34px 28px;
}
.obj { position: relative; flex: none; }
.obj-baro { width: 400px; height: 300px; }
.obj-pad { width: 300px; height: 372px; transform: rotate(-1.4deg); margin-top: 4px; }
.obj-chalk { width: 272px; height: 238px; transform: rotate(.7deg); margin-top: 18px; }
.obj-col { display: flex; flex-direction: column; align-items: center; gap: 26px; flex: none; }
.obj-cal { width: 150px; height: 182px; transform: rotate(2deg); }
.obj-watch { width: 170px; height: 194px; }

/* ============================================================ barograph */

.barograph { position: relative; }
.barograph canvas { display: block; cursor: grab; touch-action: pan-y; }
.barograph.dragging canvas { cursor: grabbing; }
.baro-tip {
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, .8);
  background: linear-gradient(rgba(64, 64, 64, .95), rgba(14, 14, 14, .95));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #fff;
  font: 700 12px/1.3 var(--ui);
  text-shadow: 0 -1px 0 #000;
  white-space: nowrap;
  pointer-events: none;
}

/* ============================================================ legal pad */

.legalpad {
  --lp-pitch: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .45));
}
.lp-top {
  position: relative;
  z-index: 3;
  flex: none;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#86301f, #5e1c12 70%, #4d150d);
  box-shadow: inset 0 1px 0 rgba(255, 200, 170, .35), inset 0 -2px 3px rgba(0, 0, 0, .45), 0 2px 2px rgba(0, 0, 0, .35);
}
.lp-top span {
  font: 700 10px/1 var(--engrave);
  letter-spacing: .42em;
  color: rgba(255, 228, 200, .55);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}
/* sheets already flipped over the top bunch up behind the binding */
.lp-curl {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: calc(100% - 3px);
  height: 0;
  z-index: 4;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(#e9d46c, #fbefa0 45%, #f4e386);
  box-shadow: 0 -1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(160, 130, 40, .45);
  transition: height .45s ease;
}
.lp-curl[data-n="1"] { height: 5px; }
.lp-curl[data-n="2"] { height: 8px; }
.lp-curl[data-n="3"] { height: 11px; }
.lp-sheets { position: relative; flex: 1; }
.lp-under {
  position: absolute;
  inset: 0;
  background: #f5e692;
  box-shadow: 0 2px 0 #efdf86, 0 3px 0 #d8c66a, 0 5px 0 #efdf86, 0 6px 0 #c9b75e;
}
.lp-sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #fdf3a8;
  background-image:
    linear-gradient(90deg, transparent 47px, rgba(214, 92, 92, .55) 47px, rgba(214, 92, 92, .55) 48px, transparent 48px, transparent 51px, rgba(214, 92, 92, .55) 51px, rgba(214, 92, 92, .55) 52px, transparent 52px),
    linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 30%, rgba(180, 150, 40, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  transform-origin: 50% 0;
  backface-visibility: hidden;
}
.lp-head {
  position: absolute;
  top: 8px;
  left: 58px;
  right: 10px;
  height: 26px;
  font: 15px/26px var(--hand);
  color: var(--pen);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-lines {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 6px;
  overflow: hidden;
  background-image: repeating-linear-gradient(transparent 0, transparent calc(var(--lp-pitch) - 1px), rgba(96, 140, 200, .5) calc(var(--lp-pitch) - 1px), rgba(96, 140, 200, .5) var(--lp-pitch));
}
.lp-line {
  height: var(--lp-pitch);
  display: flex;
  align-items: flex-end;
  padding-bottom: 3px;
  white-space: nowrap;
  transform: translateX(var(--dx, 0)) rotate(var(--tilt, 0));
  transform-origin: 0 100%;
}
.lp-time {
  flex: 0 0 47px;
  padding-left: 6px;
  font: 11px/1 var(--hand);
  color: rgba(35, 64, 142, .7);
}
.lp-txt {
  display: inline-block;
  padding-left: 10px;
  font: 15px/1 var(--hand);
  color: var(--pen);
  transform: scaleX(var(--squeeze, 1));
  transform-origin: 0 50%;
}
.lp-line[data-kind="big"] .lp-txt { color: #a3271c; }
.lp-line[data-kind="close"] .lp-txt, .lp-line[data-kind="open"] .lp-txt {
  text-decoration: underline;
  text-decoration-color: rgba(35, 64, 142, .55);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.lp-line.writing { animation: write-in var(--dur, 1s) linear both; }
@keyframes write-in {
  from { clip-path: inset(-6px 100% -6px -4px); }
  to { clip-path: inset(-6px -8px -6px -4px); }
}
.lp-sheet.flipping { z-index: 5; animation: lp-flip 1.1s cubic-bezier(.45, .05, .3, 1) forwards; }
@keyframes lp-flip {
  0% { transform: perspective(1100px) rotateX(0); }
  70% { opacity: 1; }
  100% { transform: perspective(1100px) rotateX(86deg) translateY(-6px); opacity: 0; }
}

/* ============================================================ chalkboard */

.chalkboard { position: relative; }
.cb-frame {
  position: relative;
  height: 100%;
  padding: 12px 12px 22px;
  border-radius: 6px;
  background-color: #8a5a32;
  background-image: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .18)), var(--tex-oak, none);
  background-size: auto, 256px 256px;
  box-shadow: 0 7px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 240, 210, .35), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 0 0 1px rgba(40, 20, 8, .6);
}
.cb-slate {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 8px 14px 8px;
  border-radius: 3px;
  background-color: #2c3a33;
  background-image: var(--tex-chalk, none);
  background-size: cover;
  box-shadow: inset 0 2px 9px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 240, 210, .3);
  color: rgba(246, 246, 240, .93);
  font-family: var(--chalk);
}
.cb-smears { position: absolute; inset: 0; pointer-events: none; }
.cb-smear {
  position: absolute;
  border-radius: 45%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04) 65%, rgba(255, 255, 255, 0));
  transform: rotate(var(--rot, 0deg));
  filter: blur(1.5px);
}
.cb-smear.wide { left: 6%; top: 18%; width: 88%; height: 70%; opacity: .7; }
.cb-title {
  position: relative;
  text-align: center;
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 4px;
  transform: rotate(-1.2deg);
  text-shadow: 0 0 1px rgba(255, 255, 255, .45);
}
.cb-title::after {
  content: "";
  display: block;
  width: 56%;
  height: 2px;
  margin: 1px auto 0;
  border-radius: 2px;
  background: rgba(246, 246, 240, .55);
  transform: rotate(.8deg);
}
.cb-rows { position: relative; display: grid; gap: 1px; }
.cb-row { display: flex; align-items: center; gap: 8px; height: 23px; }
.cb-k {
  flex: none;
  width: 64px;
  font-size: 11px;
  letter-spacing: .08em;
  opacity: .72;
}
.cb-v { position: relative; flex: 1; height: 100%; }
.cb-txt {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 15px;
  transform: translateX(var(--dx, 0)) rotate(var(--tilt, 0));
  text-shadow: 0 0 1px rgba(255, 255, 255, .5), 0 0 3px rgba(255, 255, 255, .12);
}
.cb-txt.writing { animation: write-in var(--dur, .8s) steps(14, end) var(--delay, 0s) both; }
.cb-txt.erasing { animation: cb-erase .62s ease-in forwards; }
@keyframes cb-erase {
  0% { opacity: 1; filter: none; }
  100% { opacity: 0; filter: blur(3px); transform: translateX(calc(var(--dx, 0px) - 10px)) rotate(var(--tilt, 0)); }
}
.cb-ledge {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(#a0703f, #6c4521);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, .35), 0 2px 3px rgba(0, 0, 0, .45);
}
.cb-chalk {
  position: absolute;
  bottom: 6px;
  left: 30px;
  width: 30px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(#ffffff, #dcdcd6);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
  transform: rotate(-3deg);
}
.cb-chalk.c2 { left: 70px; width: 18px; background: linear-gradient(#f9e9a6, #d8c27a); transform: rotate(4deg); }
.cb-eraser {
  position: absolute;
  right: 26px;
  bottom: 5px;
  width: 54px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(#b98b55 0, #8e6332 58%, #6f6f6f 60%, #8a8a8a 100%);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 240, 210, .4);
}

/* ============================================================== calendar */

.calendar { position: relative; }
.cal-pad {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #ece5d2;
  box-shadow: 0 7px 10px rgba(0, 0, 0, .45);
}
.cal-edges {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: -6px;
  height: 9px;
  border-radius: 0 0 3px 3px;
  background: repeating-linear-gradient(#f6f1e2 0, #f6f1e2 1px, #d6cdb3 1px, #d6cdb3 2px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}
.cal-stack { position: absolute; left: 0; right: 0; top: 26px; bottom: 0; }
.cal-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 9px 7px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(#fdfbf4, #f6f0e0);
  box-shadow: inset 0 0 0 1px rgba(150, 130, 90, .2);
  color: var(--ink);
}
.cal-head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(176, 38, 28, .35);
  font: 700 9.5px/1.2 var(--engrave);
  letter-spacing: .16em;
  color: var(--red);
}
.cal-num {
  margin-top: 4px;
  font: 700 58px/.95 var(--digits);
  color: var(--ink);
  letter-spacing: -.01em;
}
.cal-page.weekend .cal-num, .cal-page.weekend .cal-wd { color: var(--red); }
.cal-wd { font: 600 13px/1.25 var(--song); letter-spacing: .1em; }
.cal-lunar { font: 10px/1.35 var(--song); color: #6d5a3c; letter-spacing: .06em; }
.cal-yiji {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 9.5px/1.3 var(--song);
  color: #3d3326;
  white-space: nowrap;
  overflow: hidden;
}
.cal-yiji b {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  border-radius: 50%;
  font: 600 8.5px/1 var(--song);
  color: #fff;
  vertical-align: -2px;
}
.cal-yiji .yi { background: var(--green); }
.cal-yiji .ji { background: var(--red); }
.cal-stub {
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 7px;
  z-index: 2;
  background: #fbf8ef;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.cal-binding {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 0;
  height: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(#c0352a, #8c1a12 70%, #74140d);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 200, 180, .45);
}
.cal-binding b {
  font: 700 7.5px/1 var(--engrave);
  letter-spacing: .2em;
  color: rgba(255, 238, 210, .88);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}
.cal-eyelet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #1d120c 0, #1d120c 34%, #f3dfa1 40%, #c9a24f 62%, #6b4c1a 100%);
  box-shadow: 0 1px 0 rgba(255, 220, 200, .35);
}
.cal-page.tear {
  z-index: 1;
  transform-origin: 30% 0;
  animation: cal-tear 1.15s cubic-bezier(.55, 0, .75, .3) forwards;
  box-shadow: 0 6px 10px rgba(0, 0, 0, .35);
}
@keyframes cal-tear {
  0% { transform: none; }
  22% { transform: translate(calc(var(--tear-x, -50px) * .08), -3px) rotate(calc(var(--tear-r, -40deg) * .12)); }
  100% { transform: translate(var(--tear-x, -50px), 240px) rotate(var(--tear-r, -40deg)); opacity: 0; }
}
.cal-page.drop { animation: cal-drop .7s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes cal-drop {
  0% { transform: translateY(-46px) rotate(-5deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.cal-tab {
  position: absolute;
  bottom: -14px;
  z-index: 4;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #5e4317;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 30%, #fff1c4, #c9a24f 60%, #7a5a22);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 250, 225, .8);
  color: #3b2410;
  font: 700 20px/26px var(--ui);
  text-shadow: 0 1px 0 rgba(255, 246, 215, .6);
  cursor: pointer;
}
.cal-tab.prev { left: -12px; }
.cal-tab.next { right: -12px; }
.cal-tab:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 1px 2px rgba(0, 0, 0, .3); }
.cal-tab:disabled { opacity: .35; cursor: default; transform: none; }

/* ============================================================= watch */

.watch { position: relative; }
.watch svg { display: block; width: 100%; height: auto; overflow: visible; }
.pw-roman text { font-family: Didot, "Bodoni 72", "Times New Roman", serif; font-size: 10.5px; text-anchor: middle; }
.pw-city { font: 600 6.5px var(--engrave); letter-spacing: .16em; text-anchor: middle; fill: #2a221c; }
.pw-abbr { font: 600 5.5px var(--engrave); letter-spacing: .24em; text-anchor: middle; fill: #2a221c; }

/* ============================================================= footer */

.foot {
  margin-top: 26px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255, 232, 200, .74);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 220, 180, .08);
}
.foot-keys { white-space: normal; }
/* no keyboard on a phone */
@media (hover: none) and (pointer: coarse) { .foot-keys { display: none; } }

/* ===================================================== settings sheet */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .5);
  animation: fade-in .2s ease-out;
}
.sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 81;
  width: min(540px, calc(100vw - 24px));
  max-height: min(660px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: hidden;
  background: #c5ccd4;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .6);
  color: #000;
  animation: sheet-in .32s cubic-bezier(.2, .8, .3, 1);
}
.sheet-bar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 44px;
  padding: 0 7px;
  background: linear-gradient(#b0bccd 0%, #889bb3 50%, #8195af 51%, #6d84a2 100%);
  border-bottom: 1px solid #2d3642;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.sheet-bar h2 {
  margin: 0;
  font: 700 20px/1 var(--ui);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
}
.bar-btn {
  justify-self: end;
  height: 30px;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid #1d2f57;
  color: #fff;
  font: 700 13px/1 var(--ui);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 rgba(255, 255, 255, .25);
}
.bar-btn.done { background: linear-gradient(#7aa5f2 0%, #4a7fe0 50%, #3570dc 51%, #2a62d0 100%); }
.bar-btn.done:active { background: linear-gradient(#2a62d0, #3570dc); }
.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 20px 22px;
  background-color: #c5ccd4;
  background-image: repeating-linear-gradient(90deg, #c5ccd4 0, #c5ccd4 5px, #cbd2d8 5px, #cbd2d8 7px);
}
.group-title {
  margin: 18px 10px 7px;
  font: 700 16px/1.2 var(--ui);
  color: #4c566c;
  text-shadow: 0 1px 0 #fff;
}
.group {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #acaeb1;
  background: #fff;
  box-shadow: 0 1px 0 #fff;
}
.group > .cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid #e0e0e0;
}
.group > .cell:last-child { border-bottom: none; }
.cell-label { display: flex; flex-direction: column; font: 700 16px/1.25 var(--ui); color: #000; }
.cell-label small { font: 400 12px/1.3 var(--ui); color: #6d6d72; margin-top: 2px; }
.group .ios-slider { flex: 1; max-width: 260px; }
.group-foot {
  margin: 14px 12px 0;
  font: 14px/1.45 var(--ui);
  color: #4c566c;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
}
/* the plain (bordered) segmented control used inside table cells */
.segmented.small { box-shadow: none; }
.segmented.small button {
  min-width: 52px;
  height: 30px;
  padding: 0 11px;
  border-color: #8d929a;
  background: linear-gradient(#fdfdfd, #ececec 55%, #dedede);
  box-shadow: inset 0 1px 0 #fff;
  color: #4b505b;
  font: 700 13px/1 var(--ui);
  text-shadow: 0 1px 0 #fff;
}
.segmented.small button[aria-checked="true"] {
  border-color: #23468a;
  background: linear-gradient(#2963d8 0%, #3c7ae6 50%, #4c8bef 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
}
.segmented.small button[aria-checked="true"] + button { border-left-color: #23468a; }

/* ============================================================== alert */

.alert {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .25), rgba(0, 0, 0, .62));
  animation: fade-in .2s ease-out;
}
.alert-box {
  position: relative;
  width: 284px;
  max-width: 100%;
  padding: 16px 14px 14px;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, .88);
  background: linear-gradient(rgba(44, 66, 120, .94), rgba(12, 26, 66, .96));
  box-shadow: 0 8px 28px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(0, 0, 0, .3);
  text-align: center;
  color: #fff;
  animation: alert-pop .4s cubic-bezier(.3, 1.4, .5, 1);
}
.alert-box::before {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: -60%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
  pointer-events: none;
}
.alert-box h2 { position: relative; margin: 0 0 6px; font: 700 18px/1.3 var(--ui); text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }
.alert-box p { position: relative; margin: 0 0 14px; font: 15px/1.4 var(--ui); text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); }
.alert-btns button {
  width: 100%;
  height: 43px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .6);
  background: linear-gradient(rgba(255, 255, 255, .36), rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .06) 51%, rgba(255, 255, 255, .12));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #fff;
  font: 700 18px/1 var(--ui);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55);
  cursor: pointer;
}
.alert-btns button:active { background: rgba(0, 0, 0, .3); }

/* ================================================================ HUD */

.hud {
  position: fixed;
  left: 50%;
  top: 42%;
  z-index: 90;
  min-width: 140px;
  padding: 20px 22px 16px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .74);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  color: #fff;
  font: 700 15px/1.3 var(--ui);
  pointer-events: none;
  animation: fade-in .2s ease-out;
}
.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, .12), #fff);
  -webkit-mask:
    repeating-conic-gradient(#000 0 13deg, transparent 13deg 30deg),
    radial-gradient(circle, transparent 0 40%, #000 41% 98%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    repeating-conic-gradient(#000 0 13deg, transparent 13deg 30deg) intersect,
    radial-gradient(circle, transparent 0 40%, #000 41% 98%, transparent 100%);
  animation: spin .9s steps(12) infinite;
}

/* ============================================================ callout */

.callout {
  position: fixed;
  z-index: 60;
  transform: translate(-50%, -100%);
  padding: 7px 11px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .85);
  background: linear-gradient(rgba(68, 68, 68, .96), rgba(22, 22, 22, .96) 55%, rgba(8, 8, 8, .96));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff;
  font: 12px/1.45 var(--ui);
  text-shadow: 0 -1px 0 #000;
  white-space: nowrap;
  pointer-events: none;
}
.callout::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: none;
  border-top-color: rgba(8, 8, 8, .96);
}
.callout b { font-size: 15px; font-family: var(--digits); letter-spacing: .02em; }
.callout .muted { color: rgba(255, 255, 255, .62); }
.callout .ev { color: #ffd98a; }

/* ============================================================ keyframes */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.85); } }
@keyframes breathe { 50% { opacity: .45; } }
@keyframes sheet-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
@keyframes alert-pop {
  0% { opacity: 0; transform: scale(.7); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ======================================================= responsive */

@media (max-width: 1199px) {
  .nav-inner { gap: 14px; padding: 12px 20px; }
  .sound-label { display: none; }
  .obj-baro { width: 360px; height: 280px; }
  .blotter { padding: 36px 30px 40px; }
  .blotter-inner { justify-content: space-around; }
  .keys { gap: 16px 10px; }
  .key { width: 56px; height: 56px; }
}

@media (max-width: 959px) {
  .nav-inner { flex-wrap: wrap; }
  .search { order: 3; flex: 1 1 100%; max-width: none; }
  .vu-console { flex: 1 1 100%; }
}

@media (max-width: 759px) {
  .nav-inner { padding: 10px 14px 12px; gap: 10px; }
  .plaque { padding: 4px 16px; }
  .plaque b { font-size: 14px; }
  .plaque span { display: none; }
  .nav-right { gap: 10px; }
  .segmented button { min-width: 46px; padding: 0 10px; }
  .nav-btn { padding: 0 10px; }

  .desk {
    padding: 14px 14px 30px;
    grid-template-rows: auto auto var(--tape-row) auto auto auto auto auto auto;
  }
  .console { display: contents; }
  .price-stack { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px; }
  #chg { grid-column: 1; grid-row: 2; align-self: center; margin-bottom: 10px; }
  #machine { grid-column: 2; grid-row: 2 / 4; }
  .tape-wrap { grid-row: 3; }
  .vu-console { grid-column: 1 / -1; grid-row: 4; margin-top: 12px; }
  .slide-wrap { grid-column: 1 / -1; grid-row: 5; }
  .keys { grid-column: 1 / -1; grid-row: 6; justify-content: center; }
  .transport { grid-column: 1 / -1; grid-row: 7; }
  .blotter { grid-row: 8; padding: 30px 14px 34px; }
  .foot { grid-row: 9; }
  .np-sym { font-size: 24px; }
  .nameplate.long .np-sym { font-size: 19px; }
  .key { width: 54px; height: 54px; }
  .blotter-inner { justify-content: center; }
  .obj-baro { width: min(400px, calc(100vw - 60px)); height: 260px; }
  .latest { right: auto; left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}