:root {
  color-scheme: dark;
  --paper: #e5dfc8;
  --paper-edge: #c8bfa3;
  --ink: #24231f;
  --machine: #2d2a24;
  --machine-light: #4b463d;
  --control-text: #f0ead8;
  /* Model 33 paper geometry: 10 characters/inch, 6 lines/inch. */
  --character-pitch: 0.1in;
  --line-pitch: 0.1666667in;
  --paper-print-width: 7.2in;
  /* The source specimen's ink body occupies only about half its design em.
     Scale the em 1.55x over the fixed advance, centered on each print position,
     to match the actual Model 33 impression without changing 10 CPI spacing. */
  --glyph-em-width: 0.155in;
  --glyph-em-height: 0.1642537in;
  --glyph-em-left: -0.0275in;
  --glyph-em-top: -0.125in;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, #514b40 0, transparent 42rem),
    var(--machine);
  color: var(--control-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

button, input { font: inherit; }

.controls {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.55rem max(0.75rem, env(safe-area-inset-right)) 0.55rem max(0.75rem, env(safe-area-inset-left));
  border-bottom: 1px solid #777063;
  background: rgba(45, 42, 36, 0.96);
  backdrop-filter: blur(8px);
}

.identity { white-space: nowrap; }
.identity strong { letter-spacing: 0.08em; }

.control-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

button, .switch {
  min-height: 2.15rem;
  border: 1px solid #827a6b;
  border-radius: 0.25rem;
  background: var(--machine-light);
  color: var(--control-text);
  padding: 0.35rem 0.65rem;
}

button { cursor: pointer; }
button:active { transform: translateY(1px); }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.switch input { accent-color: #d9cfad; }

.orientation-note {
  display: none;
  padding: 0.45rem 0.8rem;
  background: #bcae83;
  color: #211f1b;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.terminal-shell {
  width: 100%;
  overflow-x: auto;
  padding: 1.1rem max(1rem, env(safe-area-inset-right)) 4rem max(1rem, env(safe-area-inset-left));
  overscroll-behavior-x: contain;
}

.paper {
  position: relative;
  width: calc(var(--paper-print-width) + 4rem);
  min-height: calc(100vh - 7rem);
  margin: 0 auto;
  padding: 2rem;
  overflow: hidden;
  border-left: 0.7rem solid var(--paper-edge);
  border-right: 0.7rem solid var(--paper-edge);
  border-radius: 0.12rem;
  background:
    linear-gradient(to right, rgba(60, 50, 31, 0.04), transparent 4%, transparent 96%, rgba(60, 50, 31, 0.04)),
    var(--paper);
  box-shadow: 0 0.8rem 2.8rem rgba(0, 0, 0, 0.4);
  color: var(--ink);
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.35rem;
  background: repeating-linear-gradient(to right, transparent 0 0.65rem, rgba(55, 48, 35, 0.22) 0.65rem 0.75rem);
  pointer-events: none;
}

.paper::before { top: 0.42rem; }
.paper::after { bottom: 0.42rem; }

.output {
  display: block;
  position: relative;
  z-index: 1;
  width: var(--paper-print-width);
  min-height: var(--line-pitch);
  margin: 0;
}

.keyboard-capture {
  position: fixed;
  width: 1px;
  height: 1px;
  left: -10000px;
  top: 0;
  opacity: 0;
  pointer-events: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (orientation: portrait) and (max-width: 700px) {
  .orientation-note { display: block; }
}

@media (max-width: 720px) {
  .controls { align-items: flex-start; }
  .control-row { gap: 0.3rem; }
  button, .switch { padding-inline: 0.45rem; font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  button:active { transform: none; }
}

.machine-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  border: 1px solid #827a6b;
  border-radius: 0.25rem;
  padding: 0.35rem 0.55rem;
  background: #26231e;
  color: #d8d0bd;
  font-size: 0.78rem;
  white-space: nowrap;
}

.machine-status { min-width: 9.8rem; }


@media (max-width: 900px) {
  .machine-status { min-width: 0; }
}

@media (max-width: 720px) {
  .machine-status {
    min-height: 2rem;
    padding-inline: 0.4rem;
    font-size: 0.7rem;
  }
}


.startup-fallback {
  position: relative;
  z-index: 2;
  width: 72ch;
  white-space: normal;
  font: inherit;
}

.identity-title {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.academy-link {
  display: inline;
  color: #d8d0bd;
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.academy-link:visited { color: #d8d0bd; }
.academy-link:focus-visible { outline: 1px solid #eee4c3; outline-offset: 0.16rem; }

.app-version {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.08rem 0.38rem;
  border: 1px solid #777063;
  border-radius: 0.18rem;
  background: #211f1b;
  color: #d8d0bd;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  opacity: 1 !important;
}

.paper.jolt-type {
  animation: type-impact 72ms steps(2, end);
}

.paper.jolt-backspace {
  animation: backspace-impact 78ms steps(2, end);
}

.paper.jolt-linefeed {
  animation: linefeed-impact 112ms steps(3, end);
}

.terminal-shell.jolt-carriage,
.paper.jolt-carriage {
  animation: carriage-impact 220ms cubic-bezier(.15,.75,.2,1);
}

@keyframes type-impact {
  0% { transform: translate(0, 0); }
  35% { transform: translate(calc(0.7px * var(--jolt-strength)), calc(1.2px * var(--jolt-strength))); }
  70% { transform: translate(calc(-0.45px * var(--jolt-strength)), calc(-0.4px * var(--jolt-strength))); }
  100% { transform: translate(0, 0); }
}

@keyframes backspace-impact {
  0% { transform: translateX(0); }
  45% { transform: translateX(calc(-1.1px * var(--jolt-strength))); }
  80% { transform: translateX(calc(0.4px * var(--jolt-strength))); }
  100% { transform: translateX(0); }
}

@keyframes linefeed-impact {
  0% { transform: translateY(0); }
  32% { transform: translateY(calc(2.0px * var(--jolt-strength))); }
  68% { transform: translateY(calc(-0.65px * var(--jolt-strength))); }
  100% { transform: translateY(0); }
}

@keyframes carriage-impact {
  0% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(calc(-4.8px * var(--jolt-strength)), calc(1.6px * var(--jolt-strength))) rotate(calc(-0.06deg * var(--jolt-strength))); }
  28% { transform: translate(calc(2.8px * var(--jolt-strength)), calc(-1.0px * var(--jolt-strength))) rotate(calc(0.04deg * var(--jolt-strength))); }
  46% { transform: translate(calc(-1.7px * var(--jolt-strength)), calc(0.65px * var(--jolt-strength))); }
  67% { transform: translate(calc(0.8px * var(--jolt-strength)), calc(-0.35px * var(--jolt-strength))); }
  100% { transform: translate(0, 0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .paper.jolt-type,
  .paper.jolt-backspace,
  .paper.jolt-linefeed,
  .paper.jolt-carriage,
  .terminal-shell.jolt-carriage {
    animation: none;
  }
}

.control-bank {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.control-bank button {
  min-width: 2.7rem;
  padding-inline: 0.4rem;
}

#paper-tape-reader.active {
  background: #d9cfad;
  color: #211f1b;
  border-color: #eee4c3;
}

.paper.feeding {
  animation: continuous-feed-vibration 70ms linear infinite;
}

@keyframes continuous-feed-vibration {
  0% { transform: translateY(0); }
  35% { transform: translateY(0.7px); }
  70% { transform: translateY(-0.35px); }
  100% { transform: translateY(0); }
}

@media (max-width: 900px) {
  .controls { align-items: flex-start; }
  .control-bank { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .paper.feeding { animation: none; }
}

/* v0.14.0 continuous friction-feed paper viewport. */
.terminal-shell {
  padding-bottom: 1rem;
  overflow-y: visible;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.85rem;
  align-items: stretch;
  justify-content: center;
}

.paper {
  height: calc(100vh - 5.8rem);
  min-height: 34rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #1d1b17;
  touch-action: none;
  overscroll-behavior: contain;
}

.paper-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 0;
  padding: 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.48);
  border-left: 0.34rem solid var(--paper-edge);
  border-right: 0.34rem solid var(--paper-edge);
  background:
    linear-gradient(to right, rgba(60, 50, 31, 0.04), transparent 4%, transparent 96%, rgba(60, 50, 31, 0.04)),
    var(--paper);
  box-shadow: 0 0.45rem 1.4rem rgba(0, 0, 0, 0.32);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.paper-strip.platen-step {
  transition: transform 82ms cubic-bezier(.2,.75,.25,1);
}

.output {
  position: absolute;
  top: 0;
  left: 2rem;
  margin: 0;
  z-index: 1;
}

.print-position-marker {
  position: absolute;
  z-index: 4;
  top: calc(var(--print-head-y, 80%) + (var(--line-pitch) / 2));
  width: var(--character-pitch);
  height: 1px;
  background: #706851;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.15));
}

/* This unit is friction feed; do not suggest tractor or pin-feed holes. */
.paper::before,
.paper::after {
  display: none;
}

/* ASR 33 one-inch, ten-row-per-inch paper tape. */
.paper-tape-deck {
  width: fit-content;
  height: calc(100vh - 5.8rem);
  min-height: 34rem;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem;
  align-items: stretch;
}

.paper-tape-unit {
  width: min(3.35in, calc(100vw - 2rem));
  height: 100%;
  min-width: 0;
  min-height: 0;
  justify-self: center;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: 0.65rem;
  border: 1px solid #777063;
  border-radius: 0.28rem;
  background: linear-gradient(#39352e, #27241f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 .4rem 1.1rem rgba(0,0,0,.24);
}

.paper-tape-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 1.35rem;
  color: #e7dfca;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.paper-tape-status {
  overflow: hidden;
  color: #bdb5a2;
  font-size: 0.62rem;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paper-tape-viewport {
  position: relative;
  min-height: 0;
  margin: 0.4rem 0;
  overflow: hidden;
  border: 1px solid #181612;
  border-radius: 0.18rem;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 35%, transparent 65%, rgba(255,255,255,.02)),
    #1d1b17;
  box-shadow: inset 0 .35rem .9rem rgba(0,0,0,.55);
}


.reader-tape-viewport { min-height: 1.5in; }
.punch-tape-viewport { min-height: 0.8in; }

.paper-tape-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1in;
  transform: translate3d(0, 0, 0);
  translate: -50% 0;
  will-change: transform;
}

.tape-row {
  position: absolute;
  left: 0;
  width: 1in;
  height: 0.1in;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 0.72fr repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  border-left: 1px solid rgba(84,68,34,.35);
  border-right: 1px solid rgba(84,68,34,.35);
  background:
    linear-gradient(90deg, rgba(124,95,39,.08), transparent 12%, transparent 88%, rgba(124,95,39,.08)),
    #d8cda9;
  box-shadow: inset 0 1px rgba(255,255,255,.14);
}

.tape-row.blank { opacity: 0.94; }

.tape-hole {
  width: 0.058in;
  height: 0.058in;
  border-radius: 50%;
  background: transparent;
}

.tape-hole.feed {
  width: 0.04in;
  height: 0.04in;
}

.tape-hole.open {
  background: #15130f;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1);
}

.reader-sensor,
.punch-mechanism {
  position: absolute;
  z-index: 4;
  left: 50%;
  width: 1.55in;
  translate: -50% 0;
  pointer-events: none;
}

.reader-sensor {
  bottom: 1in;
  height: 0.13in;
  border: 1px solid #777063;
  border-radius: 0.12rem;
  background: linear-gradient(#5a5449, #2b2822);
  box-shadow: 0 .15rem .4rem rgba(0,0,0,.45);
}

.reader-sensor span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.04in;
  height: 1px;
  translate: -50% -50%;
  background: #c9b66f;
}

.punch-mechanism {
  top: 0;
  height: 0.28in;
  border: 1px solid #777063;
  border-radius: 0 0 0.12rem 0.12rem;
  background: linear-gradient(#565045, #24211c);
  box-shadow: 0 .15rem .4rem rgba(0,0,0,.35);
}

.punch-mechanism span {
  position: absolute;
  left: 50%;
  top: 0.05in;
  width: 1.02in;
  height: 0.06in;
  translate: -50% 0;
  border-radius: 999px;
  background: #11100d;
}

.paper-tape-switches {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}

.paper-tape-switches button {
  min-width: 3.75rem;
  min-height: 1.9rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.7rem;
}

.paper-tape-actions {
  display: flex;
  margin-top: 0.35rem;
}

.paper-tape-actions[hidden] {
  display: none;
}

.paper-tape-actions button {
  width: 100%;
  min-height: 1.9rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.7rem;
}

.paper-tape-switches button.active {
  border-color: #e0d3a7;
  background: #6c634f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.paper-tape-unit[data-mode="START"] .reader-sensor,
.paper-tape-unit[data-mode="FREE"] .reader-sensor,
.paper-tape-unit[data-mode="ON"] .punch-mechanism {
  border-color: #b9aa78;
}

@media (max-width: 720px) {
  .paper-tape-deck { gap: 0.45rem; }
  .paper-tape-unit { padding: 0.45rem; }
  .paper-tape-switches { gap: 0.18rem; }
  .paper-tape-switches button {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 0.25rem;
    font-size: 0.62rem;
  }
  .paper-tape-heading { font-size: 0.68rem; }
  .paper-tape-status { font-size: 0.54rem; }
}

/* v0.21.0 native reader file drop and compact physical selector. */
.paper-tape-unit.drop-target {
  border-color: #d5c38b;
  box-shadow:
    inset 0 0 0 2px rgba(213, 195, 139, 0.28),
    0 0 0 2px rgba(213, 195, 139, 0.16),
    0 .4rem 1.1rem rgba(0,0,0,.24);
}

.paper-tape-unit[data-operational="false"] .reader-sensor,
.paper-tape-unit[data-operational="false"] .punch-mechanism {
  border-color: #5f594f;
  opacity: 0.72;
}

.paper-tape-switches button:disabled,
.paper-tape-actions button:disabled,
.control-bank button:disabled {
  cursor: default;
  opacity: 0.48;
}

.line-mode-selector {
  align-self: end;
  justify-self: start;
  width: 1.34in;
  margin: 0 0 0.45rem 0;
  padding: 0.055in 0.07in 0.065in;
  border: 1px solid #746d60;
  border-radius: 0.13rem;
  background: linear-gradient(#49443b, #26231e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 .12rem .32rem rgba(0,0,0,.32);
  color: #e5ddc8;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.line-mode-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.02in;
  margin-bottom: 0.025in;
  font-size: 0.43rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
  pointer-events: none;
}

.line-mode-labels span.active {
  color: #fff5cf;
  text-shadow: 0 0 0.16rem rgba(255, 239, 177, 0.24);
}

.line-mode-track {
  position: relative;
  height: 0.18in;
  border: 1px solid #181612;
  border-radius: 999px;
  background: linear-gradient(#171511, #363128 48%, #15130f);
  box-shadow: inset 0 .03in .06in rgba(0,0,0,.65), 0 1px rgba(255,255,255,.08);
  pointer-events: none;
}

.line-mode-detent {
  position: absolute;
  top: 50%;
  width: 0.075in;
  height: 0.075in;
  translate: -50% -50%;
  border-radius: 50%;
  background: #090806;
  box-shadow: 0 0 0 1px #5d574c;
}

.line-mode-detent.line { left: 10%; }
.line-mode-detent.off { left: 50%; }
.line-mode-detent.local { left: 90%; }

.line-mode-handle {
  position: absolute;
  top: 50%;
  left: var(--line-mode-handle-left, 50%);
  width: 0.19in;
  height: 0.135in;
  translate: -50% -50%;
  border: 1px solid #8b8372;
  border-radius: 0.045in;
  background: linear-gradient(#a69d89, #5f594e 52%, #3a362f);
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 .03in .05in rgba(0,0,0,.48);
  pointer-events: none;
  transition: left 95ms cubic-bezier(.2,.78,.2,1);
}

.line-mode-selector[data-position="LINE"] .line-mode-handle { left: var(--line-mode-handle-left, 10%); }
.line-mode-selector[data-position="OFF"] .line-mode-handle { left: var(--line-mode-handle-left, 50%); }
.line-mode-selector[data-position="LOCAL"] .line-mode-handle { left: var(--line-mode-handle-left, 90%); }
.line-mode-selector.dragging .line-mode-handle { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .line-mode-handle { transition: none; }
}

/* V1.0.6 ASR 33 palette, unlined newsprint paper, and deterministic controls. */
:root {
  color-scheme: light;
  --asr-cover-ivory: #fae9c4;
  --asr-body-putty: #beac87;
  --asr-peripheral-beige: #decba6;
  --asr-control-taupe: #988e7c;
  --asr-metal-satin: #c4b8a6;
  --asr-metal-shadow: #81796b;
  --asr-label: #4b4437;
  --asr-window: #211f1b;
  --asr-paper: #c1b9a6;
  --control-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --paper: var(--asr-paper);
  --paper-edge: #afa58f;
  --machine: var(--asr-body-putty);
  --machine-light: var(--asr-control-taupe);
  --control-text: var(--asr-label);
}

body {
  background: var(--asr-body-putty);
  color: var(--asr-label);
  font-family: var(--control-font);
}

.controls {
  border-bottom-color: #b9a27b;
  background: var(--asr-cover-ivory);
  backdrop-filter: none;
  color: var(--asr-label);
}

.identity-title,
.paper-tape-heading,
.paper-tape-status,
.paper-tape-switches button,
.paper-tape-actions button,
.line-mode-label,
.machine-status,
button,
.switch,
.app-version,
.academy-link {
  font-family: var(--control-font);
}

.academy-link,
.academy-link:visited { color: var(--asr-label); }

.app-version,
.machine-status {
  border-color: #9a896b;
  background: #d7c39a;
  color: var(--asr-label);
}

button,
.switch {
  border-color: #756d60;
  background: linear-gradient(#a79d89, #827969);
  color: #fff9e9;
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 .08rem .16rem rgba(75,68,55,.24);
}

.switch input { accent-color: var(--asr-control-taupe); }

.paper {
  background: var(--asr-window);
  box-shadow: 0 .8rem 2.8rem rgba(65, 54, 36, 0.32);
}

.paper-strip {
  border-left-color: var(--paper-edge);
  border-right-color: var(--paper-edge);
  background:
    linear-gradient(to right, rgba(91,74,43,.055), transparent 4%, transparent 96%, rgba(91,74,43,.055)),
    var(--asr-paper);
}

.paper-tape-unit {
  border-color: #a18f70;
  background: var(--asr-peripheral-beige);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 .4rem 1.1rem rgba(75,58,33,.22);
}

.paper-tape-heading { color: var(--asr-label); }
.paper-tape-status { color: #6e6352; }

.paper-tape-viewport {
  border-color: #756d60;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 35%, transparent 65%, rgba(255,255,255,.02)),
    var(--asr-window);
  box-shadow: inset 0 .35rem .9rem rgba(0,0,0,.48);
}

.tape-row {
  border-left-color: rgba(109,89,49,.28);
  border-right-color: rgba(109,89,49,.28);
  background:
    linear-gradient(90deg, rgba(124,95,39,.07), transparent 12%, transparent 88%, rgba(124,95,39,.07)),
    #e1d2aa;
}

.reader-sensor {
  border-color: #756d60;
  background: linear-gradient(#bbb3a3, #81796b);
  box-shadow: inset 0 1px rgba(255,255,255,.32), 0 .15rem .4rem rgba(67,55,38,.35);
}

.reader-sensor span { background: #d6bf72; }

.punch-mechanism {
  border-color: #a18f70;
  background: linear-gradient(#fae9c4, #cbb487);
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 .15rem .4rem rgba(67,55,38,.28);
}

.punch-mechanism span { background: #211f1b; }

/* Clear acrylic punch pushbuttons use independent fixed button and label rows. */
.punch-unit .paper-tape-switches {
  align-items: start;
  gap: .24rem;
}

.punch-unit .punch-control {
  display: grid;
  grid-template-rows: .58in 1.05rem;
  justify-items: center;
  align-items: start;
  min-width: 3.75rem;
}

.punch-unit .punch-button-cap {
  grid-row: 1;
  display: block;
  width: .43in;
  height: .43in;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  margin: .04in 0 0;
  padding: 0;
  border: 1px solid rgba(109,101,87,.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 24%, rgba(255,255,255,.92) 0 .08in, transparent .085in),
    linear-gradient(rgba(255,255,255,.62), rgba(218,211,191,.24));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.24),
    inset 0 -.08in .08in rgba(117,109,96,.22),
    0 .06in .06in rgba(72,60,42,.28);
}

.punch-unit .punch-button-cap.active {
  border-color: #706650;
  box-shadow:
    inset 0 .05in .08in rgba(87,78,61,.28),
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 .02in .03in rgba(72,60,42,.24);
  transform: translateY(.035in);
}

.punch-unit .punch-button-cap:active { transform: translateY(.035in); }

.punch-unit .punch-button-label {
  grid-row: 2;
  align-self: start;
  display: block;
  line-height: 1;
  padding-top: .08rem;
  color: var(--asr-label);
  text-align: center;
  white-space: nowrap;
}

.reader-unit .paper-tape-switches button,
.paper-tape-actions button {
  border-color: #756d60;
  background: linear-gradient(#a79d89, #81796b);
  color: #fff9e9;
}

.reader-unit .paper-tape-switches button.active {
  border-color: #5f574b;
  background: linear-gradient(#81796b, #6d6559);
}

.paper-tape-actions button {
  background: linear-gradient(#ead8af, #cfb98d);
  color: var(--asr-label);
}

.paper-tape-unit.drop-target {
  border-color: #786b55;
  box-shadow:
    inset 0 0 0 2px rgba(117,105,80,.24),
    0 0 0 2px rgba(250,233,196,.28),
    0 .4rem 1.1rem rgba(75,58,33,.24);
}

/* The selector is a true square. Its dial center is exactly 50%/50%.
   LINE and LOCAL use bounding-box centering on that same horizontal axis. */
.line-mode-selector {
  position: relative;
  align-self: end;
  justify-self: start;
  width: 1.34in;
  aspect-ratio: 1 / 1;
  margin: 0 0 .45rem 0;
  padding: 0;
  border: 1px solid #a18f70;
  border-radius: .08in;
  background: var(--asr-peripheral-beige);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 .14rem .34rem rgba(75,58,33,.24);
  color: var(--asr-label);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  overflow: hidden;
}

.line-mode-selector.dragging { cursor: grabbing; }

.line-mode-label {
  position: absolute;
  z-index: 5;
  margin: 0;
  padding: 0;
  color: var(--asr-label);
  font-size: .49rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.line-mode-label.line {
  left: .045in;
  top: 50%;
  translate: 0 -50%;
}

.line-mode-label.local {
  right: .045in;
  top: 50%;
  translate: 0 -50%;
}

.line-mode-label.off {
  left: 50%;
  top: .07in;
  translate: -50% 0;
}

.line-mode-label.active {
  color: var(--asr-label);
  text-shadow: 0 1px rgba(255,255,255,.36);
}

.line-mode-dial {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: .58in;
  height: .58in;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
}

.line-mode-knob {
  position: absolute;
  inset: 0;
  border: 1px solid #756d60;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -2deg, #a79d89 0 4deg, #81796b 4deg 8deg),
    var(--asr-control-taupe);
  box-shadow:
    inset 0 0 0 .035in rgba(255,255,255,.12),
    0 .055in .085in rgba(72,60,42,.35);
}

.line-mode-cap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .40in;
  height: .40in;
  translate: -50% -50%;
  border: .025in solid #8d8577;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      #eee9de 0deg,
      #b8ad9c 55deg,
      #eee9de 115deg,
      #a89f91 180deg,
      #eee9de 250deg,
      #b8ad9c 315deg,
      #eee9de 360deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 0 0 .018in #b3aa9a;
}

.line-mode-pointer {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 50%;
  width: .095in;
  height: .34in;
  translate: -50% 0;
  transform-origin: 50% 100%;
  transform: rotate(var(--line-mode-angle, 0deg));
  border: 1px solid #6f675a;
  border-radius: .035in .035in .025in .025in;
  background: linear-gradient(90deg, #756d60, #aaa18f 48%, #756d60);
  box-shadow: 0 .02in .04in rgba(58,48,34,.34);
  transition: transform 95ms cubic-bezier(.2,.78,.2,1);
}

.line-mode-pointer span {
  position: absolute;
  left: 50%;
  top: .025in;
  width: .026in;
  height: .235in;
  translate: -50% 0;
  border-radius: 999px;
  background: #eee7d4;
}

.line-mode-selector[data-position="LINE"] { --line-mode-angle: -90deg; }
.line-mode-selector[data-position="OFF"] { --line-mode-angle: 0deg; }
.line-mode-selector[data-position="LOCAL"] { --line-mode-angle: 90deg; }
.line-mode-selector.dragging .line-mode-pointer { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .line-mode-pointer { transition: none; }
}