/* ============================================================
   The Coronet No.5 — mechanical typewriter simulator
   Visual system: warm desk, lamp light, enamel + brass machine
   ============================================================ */

@font-face {
  font-family: "Special Elite";
  src: url("../fonts/special-elite.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --desk-w: min(1180px, 98vw);
  --mach-w: min(880px, 92vw, calc((100vh - 130px) * 1.33));
  --unit: calc(var(--mach-w) / 880);            /* machine-relative pixel */
  --paper-w: calc(var(--unit) * 560);
  --paper-h: calc(var(--unit) * 400);
  --col-w: calc(var(--paper-w) / 80);           /* one escapement column */
  --line-h: calc(var(--unit) * 21);

  --enamel: #23282a;
  --enamel-2: #2e3538;
  --enamel-edge: #14181a;
  --brass: #b9902f;
  --brass-hi: #e8c56a;
  --chrome: #cfd4d6;
  --keycap: #ece5d3;
  --keycap-edge: #b6ab90;
  --ink: #20232a;
  --paper: #f5efdc;
  --paper-shadow: #d8d0b4;
  --ribbon-black: #191b22;
  --ribbon-red: #7c1f1f;
  --desk-wood: #6b4a2f;
  --lamp: 255, 214, 150;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "Courier Prime", monospace;
  background: radial-gradient(120% 90% at 30% 0%, #3a2c22 0%, #241a13 55%, #160f0b 100%);
  color: #e8e0cc;
  overflow-x: hidden;
  user-select: none;
}

#app { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; }

/* ---------- light & dust ---------- */
.light-beam {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(58% 46% at 32% -4%, rgba(var(--lamp), .30), rgba(var(--lamp), .07) 46%, transparent 70%),
    radial-gradient(120% 100% at 50% 115%, rgba(0,0,0,.55), transparent 55%);
  mix-blend-mode: screen;
  animation: lampFlicker 7s infinite;
}
@keyframes lampFlicker {
  0%, 100% { opacity: 1; } 92% { opacity: 1; }
  93% { opacity: .93; } 94% { opacity: 1; } 96% { opacity: .97; }
}
#dust-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 2; }

/* ---------- desk ---------- */
.desk {
  position: relative; z-index: 3;
  width: var(--desk-w);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(8px, 2vh, 26px) 0 48px;
  display: flex; flex-direction: column; align-items: center;
}
.desk.shiver { animation: shiver .09s linear; }
@keyframes shiver {
  0% { transform: translate(0,0); }
  30% { transform: translate(.6px, .4px); }
  60% { transform: translate(-.5px, .2px); }
  100% { transform: translate(0,0); }
}
.desk-surface {
  position: fixed; left: 0; right: 0; bottom: 0; height: 26vh; z-index: -1;
  background:
    repeating-linear-gradient(93deg, rgba(0,0,0,.10) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(88deg, rgba(255,255,255,.03) 0 1px, transparent 1px 140px),
    linear-gradient(180deg, #77552f, var(--desk-wood) 30%, #4c3220 100%);
  background-color: #4c3220;
  box-shadow: inset 0 18px 34px rgba(0,0,0,.45);
}

/* ---------- specimen card ---------- */
.specimen {
  position: absolute; left: max(6px, calc(50% - var(--desk-w)/2 + 10px)); top: 5vh;
  width: clamp(120px, 15vw, 168px);
  padding: 12px 12px 10px;
  background: linear-gradient(175deg, #efe8d2, #ddd2b2);
  color: #3a352a;
  font-family: "Special Elite", "Courier Prime", monospace;
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 0 24px rgba(120,100,60,.18);
  transform: rotate(-3.5deg);
  border-radius: 2px;
  z-index: 4;
}
.specimen-pin {
  position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4d47c, #8f6b1d 70%);
  box-shadow: 0 3px 4px rgba(0,0,0,.5);
}
.specimen-title { font-size: clamp(11px, 1.3vw, 14px); text-align: center; letter-spacing: .14em; border-bottom: 1px solid #b1a586; padding-bottom: 6px; margin-bottom: 8px; }
.specimen-abc, .specimen-figs { font-size: clamp(9px, 1.05vw, 12px); line-height: 1.5; opacity: .82; }
.specimen-figs { margin-top: 8px; }
.specimen-foot { margin-top: 8px; font-size: clamp(8px, .9vw, 10px); text-align: center; opacity: .55; }

/* ---------- finished pages stack ---------- */
.pages-stack-wrap {
  position: absolute; right: max(6px, calc(50% - var(--desk-w)/2 + 12px)); top: 6vh;
  z-index: 4;
}
.pages-stack {
  position: relative;
  width: clamp(96px, 12vw, 132px); height: clamp(120px, 15vw, 164px);
  background: none; border: none; cursor: pointer;
  font-family: inherit; color: inherit;
}
.pages-stack-sheets i {
  position: absolute; inset: 0;
  background: linear-gradient(172deg, #f2ebd6, #ded4b6);
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
}
.pages-stack-sheets i:nth-child(1) { transform: rotate(-4deg) translate(-3px, 2px); }
.pages-stack-sheets i:nth-child(2) { transform: rotate(2.5deg) translate(3px, 0); }
.pages-stack-sheets i:nth-child(3) { transform: rotate(-.5deg); }
.pages-stack.has-pages .pages-stack-sheets i { background: linear-gradient(172deg, #f6f0dc, #e2d8ba); }
.pages-stack.has-pages .pages-stack-sheets i:nth-child(3)::after {
  content: ""; position: absolute; inset: 12px 14px;
  background: repeating-linear-gradient(180deg, rgba(30,32,40,.55) 0 1.5px, transparent 1.5px 7px);
  opacity: .5; border-radius: 1px;
}
.pages-stack-count {
  position: absolute; top: -10px; right: -8px;
  min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 13px;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 70%);
  color: #241b06; font-weight: 700; font-size: 14px; line-height: 26px;
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
.pages-stack-label {
  position: absolute; left: 0; right: 0; bottom: -22px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .6;
}
.pages-stack:active { transform: translateY(1px); }

/* ============================================================
   THE MACHINE
   ============================================================ */
.machine {
  position: relative;
  width: var(--mach-w);
  margin-top: clamp(84px, 15vh, 190px);
  height: calc(var(--unit) * 670);
  z-index: 5;
  touch-action: manipulation;
}

/* carriage rail */
.carriage-rail {
  position: absolute; left: calc(var(--unit) * -30); right: calc(var(--unit) * -30);
  top: calc(var(--unit) * 186); height: calc(var(--unit) * 16);
  background: linear-gradient(180deg, #585f62, #2b2f31 55%, #17191b);
  border-radius: calc(var(--unit) * 8);
  box-shadow: 0 2px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
  z-index: 6;
}
.rail-shine { position: absolute; inset: 2px 6px auto; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); }

/* ---------- carriage ---------- */
.carriage {
  position: absolute; top: calc(var(--unit) * 18);
  left: 50%;
  width: calc(var(--paper-w) + var(--unit) * 150);
  height: calc(var(--unit) * 196);
  margin-left: calc((var(--paper-w) + var(--unit) * 150) / -2);
  z-index: 8;
  will-change: transform;
}
.carriage-body {
  position: absolute; left: calc(var(--unit) * 55); right: calc(var(--unit) * 55); top: 0; bottom: calc(var(--unit) * 26);
}
.carriage-ruler {
  position: absolute; left: calc(var(--unit) * -8); right: calc(var(--unit) * -8); top: calc(var(--unit) * 166); height: calc(var(--unit) * 20);
  background: linear-gradient(180deg, #efe8d2 0%, #cfc4a2 100%);
  border: 1px solid #8d8266;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,.55);
  overflow: hidden;
}
.carriage-ruler .tick { position: absolute; bottom: 0; width: 1px; background: #5a5240; }
.carriage-ruler .tick.minor { height: 30%; }
.carriage-ruler .tick.major { height: 62%; }
.carriage-ruler .tick-num { position: absolute; top: 1px; font-size: calc(var(--unit) * 8.5); color: #4c4433; transform: translateX(-50%); font-family: "Courier Prime", monospace; }
.carriage-ruler .margin-flag { position: absolute; top: 0; bottom: 0; width: calc(var(--unit) * 3.5); background: #a13226; box-shadow: 0 0 3px rgba(0,0,0,.5); }

/* platen + paper */
.platen-area { position: absolute; inset: 0; }
.platen {
  position: absolute; left: 0; right: 0; top: calc(var(--unit) * 128); height: calc(var(--unit) * 34);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #3b3f41, #191c1d 55%, #33383a);
  border-radius: calc(var(--unit) * 17) / calc(var(--unit) * 15);
  box-shadow: inset 0 4px 6px rgba(0,0,0,.7), 0 3px 7px rgba(0,0,0,.6);
}
.platen::after {
  content: ""; position: absolute; left: 4%; right: 4%; top: 18%; height: 12%;
  border-radius: 99px; background: rgba(255,255,255,.10);
}
.paper-window {
  position: absolute; left: 50%; top: calc(var(--unit) * -150);
  width: var(--paper-w); height: calc(var(--unit) * 295);
  margin-left: calc(var(--paper-w) / -2);
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.paper-sheet {
  position: absolute; left: 0; top: 0;
  width: var(--paper-w); height: var(--paper-h);
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(0,0,0,0) 78%, rgba(120,105,70,.10) 100%),
    linear-gradient(180deg, #faf5e4, var(--paper) 30%, #efe7cd);
  box-shadow: 0 -3px 10px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25), inset 0 0 40px rgba(150,130,90,.12);
  border-radius: 2px 2px 0 0;
  pointer-events: auto;
  cursor: grab;
  will-change: transform;
  touch-action: none;
}
.paper-sheet::before { /* faint red margin line */
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--col-w) * 6.5);
  width: 1px; background: rgba(180, 60, 50, .28);
}
.paper-sheet.torn { transition: transform .55s cubic-bezier(.5,-.2,.7,.4), opacity .55s; }
.paper-sheet.feeding { transition: transform .3s ease-out; }
.paper-lines { position: absolute; inset: 0; }
.paper-lines .glyph {
  position: absolute;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: calc(var(--line-h) * .82);
  line-height: var(--line-h);
  width: var(--col-w); text-align: center;
  white-space: pre;
  will-change: transform, opacity;
}
.paper-sheet.sheet-shadow { box-shadow: 0 -6px 18px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.25), inset 0 0 40px rgba(150,130,90,.12); }

/* the sheet vanishes around the platen: a soft shadow at the clip line */
.paper-window::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--unit) * 16);
  background: linear-gradient(180deg, transparent, rgba(10,8,6,.5));
  pointer-events: none;
}

.paper-bail {
  position: absolute; left: calc(var(--unit) * 8); right: calc(var(--unit) * 8);
  top: calc(var(--unit) * 112); height: calc(var(--unit) * 7);
  background: linear-gradient(180deg, #d7dcde, #878d90);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
  z-index: 4;
}
.bail-roller {
  position: absolute; top: -3px; width: calc(var(--unit) * 13); height: calc(var(--unit) * 13);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0f3f4, #9aa0a3 75%);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.bail-roller.r1 { left: 22%; } .bail-roller.r2 { right: 22%; }

.print-point {
  position: absolute; left: 50%; top: calc(var(--unit) * 150);
  width: 0; height: 0; margin-left: calc(var(--unit) * -5);
  border-left: calc(var(--unit) * 5) solid transparent;
  border-right: calc(var(--unit) * 5) solid transparent;
  border-bottom: calc(var(--unit) * 7) solid rgba(231, 76, 60, .85);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
  z-index: 5;
}

/* ribbon across platen */
.ribbon-strip {
  position: absolute; left: calc(var(--unit) * 4); right: calc(var(--unit) * 4);
  top: calc(var(--unit) * 138); height: calc(var(--unit) * 13);
  z-index: 6; pointer-events: none;
  overflow: hidden; border-radius: 2px;
}
.ribbon-band {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(90deg, #23252e, var(--ribbon-black) 30%, var(--ribbon-black) 70%, #23252e);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.6);
  transition: background .2s;
}
.ribbon-band.red { background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%), linear-gradient(90deg, #3a2020, var(--ribbon-red) 30%, var(--ribbon-red) 70%, #3a2020); }
.ribbon-band.stencil { background: linear-gradient(180deg, #3c3f45, #26282c); opacity: .55; }
.ribbon-band.vibrate { animation: ribbonVib .12s linear; }
@keyframes ribbonVib { 0%{transform:translateY(0)} 30%{transform:translateY(-1.5px)} 65%{transform:translateY(.8px)} 100%{transform:translateY(0)} }

/* platen knobs */
.platen-knob {
  position: absolute; top: calc(var(--unit) * 122);
  width: calc(var(--unit) * 46); height: calc(var(--unit) * 46);
  border-radius: 50%; border: none; cursor: grab; z-index: 9;
  background: radial-gradient(circle at 34% 30%, #4a5154, #22262a 62%, #101215);
  box-shadow: 0 3px 7px rgba(0,0,0,.65), inset 0 1px 2px rgba(255,255,255,.16);
  touch-action: none;
}
.platen-knob:active { cursor: grabbing; }
.knob-left { left: calc(var(--unit) * -8); }
.knob-right { right: calc(var(--unit) * -8); }
.knob-ridges {
  position: absolute; inset: 6px; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.13) 0deg 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%);
  mask: radial-gradient(circle, transparent 34%, #000 36%);
}
.platen-knob::after {
  content: ""; position: absolute; inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, var(--brass-hi), var(--brass) 72%);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.5);
}

/* return lever */
.return-lever {
  position: absolute; left: calc(var(--unit) * -58); top: calc(var(--unit) * 96);
  width: calc(var(--unit) * 62); height: calc(var(--unit) * 96);
  background: none; border: none; cursor: grab; z-index: 10;
  touch-action: none;
}
.lever-arm {
  position: absolute; left: 78%; top: 8%;
  width: calc(var(--unit) * 9); height: 72%;
  background: linear-gradient(90deg, #cfd4d6, #7d8386 60%, #b9bfc1);
  border-radius: calc(var(--unit) * 5);
  box-shadow: 1px 2px 4px rgba(0,0,0,.6);
  transform-origin: 50% 88%;
  transform: rotate(38deg);
}
.lever-grip {
  position: absolute; left: 26%; top: 0;
  width: calc(var(--unit) * 34); height: calc(var(--unit) * 22);
  border-radius: calc(var(--unit) * 11);
  background: linear-gradient(180deg, #3c4245, #1c2022);
  box-shadow: 0 3px 6px rgba(0,0,0,.65), inset 0 1px 1px rgba(255,255,255,.2);
}
.return-lever.pulled .lever-arm { animation: leverPull .34s ease-in-out; }
.return-lever.pulled .lever-grip { animation: gripPull .34s ease-in-out; }
@keyframes leverPull { 0%{transform:rotate(38deg)} 40%{transform:rotate(-6deg)} 100%{transform:rotate(38deg)} }
@keyframes gripPull { 0%{transform:translate(0,0)} 40%{transform:translate(calc(var(--unit)*34), calc(var(--unit)*26))} 100%{transform:translate(0,0)} }

/* ---------- body shell ---------- */
.body-shell { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.shell-top {
  position: absolute; left: 0; right: 0; top: calc(var(--unit) * 196); height: calc(var(--unit) * 128);
  background:
    radial-gradient(120% 150% at 50% -30%, var(--enamel-2), var(--enamel) 58%, var(--enamel-edge));
  border-radius: calc(var(--unit) * 34) calc(var(--unit) * 34) 0 0;
  box-shadow: inset 0 3px 4px rgba(255,255,255,.10), inset 0 -8px 14px rgba(0,0,0,.5);
}
.shell-top::before { /* speckle wear */
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 12% 42%, rgba(255,255,255,.14) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(255,255,255,.10) 50%, transparent 52%),
    radial-gradient(1px 1px at 55% 68%, rgba(0,0,0,.4) 50%, transparent 52%),
    radial-gradient(2px 1px at 33% 30%, rgba(255,255,255,.08) 50%, transparent 52%),
    radial-gradient(1px 2px at 88% 60%, rgba(0,0,0,.35) 50%, transparent 52%);
}
.shell-front {
  position: absolute; left: calc(var(--unit) * -14); right: calc(var(--unit) * -14); top: calc(var(--unit) * 324); height: calc(var(--unit) * 322);
  background:
    radial-gradient(90% 130% at 50% -20%, var(--enamel-2), var(--enamel) 55%, #101315 100%);
  border-radius: calc(var(--unit) * 30) calc(var(--unit) * 30) calc(var(--unit) * 40) calc(var(--unit) * 40);
  box-shadow: 0 14px 26px rgba(0,0,0,.6), inset 0 2px 3px rgba(255,255,255,.10);
}
.brand-badge {
  position: absolute; left: 50%; top: calc(var(--unit) * 214);
  transform: translateX(-50%);
  padding: calc(var(--unit) * 4) calc(var(--unit) * 18);
  font-size: calc(var(--unit) * 13); letter-spacing: calc(var(--unit) * 5);
  font-weight: 700; color: var(--brass-hi);
  background: linear-gradient(180deg, #2c2312, #191407);
  border: 1px solid rgba(185,144,47,.55);
  border-radius: 3px;
  text-shadow: 0 1px 0 #000;
  box-shadow: 0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  z-index: 8;
}
.shell-screw {
  position: absolute; width: calc(var(--unit) * 10); height: calc(var(--unit) * 10); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #aab0b3, #565c5f 70%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.6);
}
.shell-screw::after { content:""; position:absolute; left:15%; right:15%; top:45%; height:10%; background:#2b2f31; transform:rotate(38deg); }
.shell-screw.s1 { left: calc(var(--unit) * 26); top: calc(var(--unit) * 222); }
.shell-screw.s2 { right: calc(var(--unit) * 26); top: calc(var(--unit) * 222); }
.shell-screw.s3 { left: calc(var(--unit) * 26); top: calc(var(--unit) * 300); }
.shell-screw.s4 { right: calc(var(--unit) * 26); top: calc(var(--unit) * 300); }

/* ---------- basket well & typebars ---------- */
.basket-well {
  position: absolute; left: 50%; top: calc(var(--unit) * 250);
  width: calc(var(--unit) * 560); height: calc(var(--unit) * 108);
  margin-left: calc(var(--unit) * -280);
  background: radial-gradient(80% 120% at 50% 0%, #1c1f23, #08090b 80%);
  border-radius: calc(var(--unit) * 18);
  box-shadow: inset 0 6px 14px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.06);
  z-index: 7; overflow: hidden;
}
.basket {
  position: absolute; left: 50%; bottom: calc(var(--unit) * -78);
  width: calc(var(--unit) * 560); height: calc(var(--unit) * 176);
  margin-left: calc(var(--unit) * -280);
}
.typebar {
  position: absolute; left: 50%; bottom: 0;
  width: calc(var(--unit) * 7); height: calc(var(--unit) * 150);
  margin-left: calc(var(--unit) * -3.5);
  transform-origin: 50% 100%;
  background: linear-gradient(90deg, #6b7076, #33383e 50%, #74797f);
  border-radius: calc(var(--unit) * 3) calc(var(--unit) * 3) 0 0;
  box-shadow: 0 0 2px rgba(0,0,0,.8);
  will-change: transform;
}
.typebar::after { /* type slug */
  content: ""; position: absolute; left: -15%; right: -15%; top: calc(var(--unit) * -8); height: calc(var(--unit) * 12);
  background: linear-gradient(180deg, #cfd4d6, #7e8588);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.typebar.strike { animation: barStrike .16s cubic-bezier(.3,.7,.4,1); }
@keyframes barStrike {
  0% { transform: rotate(var(--rest-rot)) translateY(0); }
  38% { transform: rotate(0deg) translateY(calc(var(--unit) * -34)) scaleY(1.02); }
  60% { transform: rotate(calc(var(--rest-rot) * .3)) translateY(calc(var(--unit) * -8)); }
  100% { transform: rotate(var(--rest-rot)) translateY(0); }
}
.typebar.jammed {
  animation: none;
  transform: rotate(calc(var(--rest-rot) * .22)) translateY(calc(var(--unit) * -26));
  filter: brightness(1.5) drop-shadow(0 0 4px rgba(231,76,60,.7));
}
.basket.jammed { cursor: pointer; }

.ribbon-spool {
  position: absolute; top: calc(var(--unit) * 18);
  width: calc(var(--unit) * 52); height: calc(var(--unit) * 52);
  border-radius: 50%; cursor: pointer; pointer-events: auto;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.08) 0deg 20deg, transparent 20deg 40deg),
    radial-gradient(circle at 40% 35%, #33373c, #141619 70%);
  box-shadow: 0 3px 6px rgba(0,0,0,.7), inset 0 0 0 calc(var(--unit) * 7) #0b0d0f, inset 0 1px 2px rgba(255,255,255,.12);
  z-index: 8;
}
.ribbon-spool::after {
  content: ""; position: absolute; inset: 40%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, var(--brass-hi), var(--brass));
}
.ribbon-spool.spin { animation: spoolSpin .5s linear; }
@keyframes spoolSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.spool-l { left: calc(var(--unit) * 18); }
.spool-r { right: calc(var(--unit) * 18); }

/* ---------- column meter ---------- */
.column-meter {
  position: absolute; right: calc(var(--unit) * 22); top: calc(var(--unit) * 266);
  display: flex; align-items: center; gap: calc(var(--unit) * 8);
  padding: calc(var(--unit) * 5) calc(var(--unit) * 12);
  background: linear-gradient(180deg, #15181a, #0b0d0f);
  border: 1px solid rgba(185,144,47,.4);
  border-radius: 4px;
  z-index: 9;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
}
.meter-label { font-size: calc(var(--unit) * 8.5); letter-spacing: .2em; color: rgba(232,197,106,.75); }
.meter-value {
  font-size: calc(var(--unit) * 16); font-weight: 700; color: var(--brass-hi);
  min-width: calc(var(--unit) * 26); text-align: center;
  text-shadow: 0 0 6px rgba(232,197,106,.4);
}
.meter-page b { color: var(--brass-hi); font-weight: 700; }

/* ---------- levers ---------- */
.levers {
  position: absolute; left: calc(var(--unit) * 22); top: calc(var(--unit) * 244);
  display: flex; flex-direction: column; gap: calc(var(--unit) * 14);
  z-index: 9;
}
.lever-group { display: flex; flex-direction: column; gap: calc(var(--unit) * 4); }
.lever-group-label { font-size: calc(var(--unit) * 8); letter-spacing: .22em; color: rgba(232,197,106,.7); }
.line-space-lever, .ribbon-selector {
  display: flex; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(185,144,47,.4);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
}
.line-space-lever button, .ribbon-selector button {
  appearance: none; border: none; cursor: pointer;
  background: linear-gradient(180deg, #1a1e20, #0d0f11);
  color: #cfc4a2; font-family: inherit;
  font-size: calc(var(--unit) * 11);
  padding: calc(var(--unit) * 5) calc(var(--unit) * 9);
  border-right: 1px solid rgba(185,144,47,.25);
}
.line-space-lever button:last-child, .ribbon-selector button:last-child { border-right: none; }
.line-space-lever button.active, .ribbon-selector button.active {
  background: linear-gradient(180deg, var(--brass), #8a6b20);
  color: #20190a; font-weight: 700;
}
.ribbon-selector .dot { display: inline-block; width: calc(var(--unit) * 11); height: calc(var(--unit) * 11); border-radius: 50%; vertical-align: middle; }
.dot-black { background: #23252e; box-shadow: inset 0 1px 1px rgba(255,255,255,.25), 0 0 0 1px #000; }
.dot-red { background: var(--ribbon-red); box-shadow: inset 0 1px 1px rgba(255,255,255,.25), 0 0 0 1px #300; }
.dot-stencil { background: #9aa0a3; box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 0 1px #333; }

/* ---------- keyboard ---------- */
.keyboard {
  position: absolute; left: 50%; top: calc(var(--unit) * 360);
  transform: translateX(-50%);
  z-index: 9;
  display: flex; flex-direction: column; gap: calc(var(--unit) * 8);
  padding: calc(var(--unit) * 12) calc(var(--unit) * 14) calc(var(--unit) * 18);
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12));
  border-radius: calc(var(--unit) * 18);
}
.krow { display: flex; gap: calc(var(--unit) * 7); justify-content: center; }

.tkey {
  position: relative;
  width: calc(var(--unit) * 44); height: calc(var(--unit) * 44);
  border: none; border-radius: 50%;
  cursor: pointer;
  font-family: "Courier Prime", monospace;
  background:
    radial-gradient(circle at 38% 30%, #fbf6e7, var(--keycap) 58%, #cfc4a6 100%);
  box-shadow:
    0 calc(var(--unit) * 5) 0 var(--keycap-edge),
    0 calc(var(--unit) * 8) calc(var(--unit) * 8) rgba(0,0,0,.55),
    inset 0 0 0 calc(var(--unit) * 3) rgba(35,37,40,.85),
    inset 0 0 0 calc(var(--unit) * 4.5) rgba(251,246,231,.9);
  color: #23252c;
  transition: transform .045s ease, box-shadow .045s ease, filter .2s;
  touch-action: none;
  will-change: transform;
}
.tkey .kcap {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
  pointer-events: none;
}
.tkey .kshift { font-size: calc(var(--unit) * 9); line-height: 1; opacity: .75; }
.tkey .kmain { font-size: calc(var(--unit) * 16); font-weight: 700; line-height: 1.05; }
.tkey.down {
  transform: translateY(calc(var(--unit) * 4));
  box-shadow:
    0 calc(var(--unit) * 1) 0 var(--keycap-edge),
    0 calc(var(--unit) * 3) calc(var(--unit) * 4) rgba(0,0,0,.55),
    inset 0 0 0 calc(var(--unit) * 3) rgba(35,37,40,.85),
    inset 0 0 0 calc(var(--unit) * 4.5) rgba(251,246,231,.9);
  filter: brightness(.94);
}
.tkey.jamflash { animation: jamFlash .3s ease 2; }
@keyframes jamFlash { 50% { filter: brightness(1.25) sepia(.6) hue-rotate(-35deg); } }

/* wide keys */
.tkey.wide { width: calc(var(--unit) * 80); border-radius: calc(var(--unit) * 22); }
.tkey.wider { width: calc(var(--unit) * 100); border-radius: calc(var(--unit) * 22); }
.tkey .klabel { font-size: calc(var(--unit) * 9); font-weight: 700; letter-spacing: .12em; }

.tkey.space {
  width: calc(var(--unit) * 280); height: calc(var(--unit) * 38);
  border-radius: calc(var(--unit) * 19);
}
.tkey.shift-active {
  filter: brightness(1.06) sepia(.35);
  transform: translateY(calc(var(--unit) * 4));
  box-shadow:
    0 calc(var(--unit) * 1) 0 var(--keycap-edge),
    0 calc(var(--unit) * 3) calc(var(--unit) * 4) rgba(0,0,0,.55),
    inset 0 0 0 calc(var(--unit) * 3) rgba(120,60,20,.9),
    inset 0 0 0 calc(var(--unit) * 4.5) rgba(251,246,231,.9);
}

/* margin rack */
.margin-rack { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.margin-stop {
  position: absolute; top: calc(var(--unit) * 178);
  width: calc(var(--unit) * 10); height: calc(var(--unit) * 22);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 60%, #6d5214);
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0,0,0,.6);
}

/* hint */
.hint {
  margin-top: clamp(14px, 3vh, 30px);
  font-size: clamp(10px, 1.4vw, 13px);
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .55; text-align: center; padding: 0 16px;
  transition: opacity 1s;
}

/* ---------- banners ---------- */
.jam-banner, .pagefull-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  z-index: 40;
  background: linear-gradient(180deg, #f6e7c8, #e6d3a6);
  color: #3a2c12;
  border: 1px solid #a88b45;
  box-shadow: 0 8px 22px rgba(0,0,0,.6);
  border-radius: 6px;
  padding: 10px 18px;
  font-size: clamp(12px, 1.6vw, 15px);
  animation: bannerIn .25s ease;
}
.jam-banner { top: 14px; border-color: #a14445; background: linear-gradient(180deg, #f6d3c8, #e6b6a6); color: #481612; }
.pagefull-banner { bottom: 18px; }
@keyframes bannerIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- reader overlay ---------- */
.reader-overlay[hidden] { display: none; }
.reader-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 6, 4, .78);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: bannerIn2 .2s ease;
}
@keyframes bannerIn2 { from { opacity: 0; } to { opacity: 1; } }
.reader {
  width: min(560px, 92vw); max-height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #2b2c28, #1d1e1b);
  border: 1px solid #4a4436;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
}
.reader-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #4a4436;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.reader-head button { background: none; border: none; color: inherit; font-size: 16px; cursor: pointer; opacity: .7; }
.reader-head button:hover { opacity: 1; }
.reader-body { display: flex; align-items: stretch; padding: 14px; gap: 8px; overflow: hidden; }
.reader-page {
  flex: 1; min-height: 380px; max-height: 66vh; overflow-y: auto;
  background: linear-gradient(175deg, #faf5e4, #ece4c8);
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 0 30px rgba(150,130,90,.14);
  padding: 26px 30px;
  color: var(--ink);
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 14px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
  user-select: text;
}
.reader-page .red { color: var(--ribbon-red); }
.reader-nav {
  align-self: center;
  width: 34px; height: 52px; flex: 0 0 auto;
  background: rgba(255,255,255,.06); color: inherit;
  border: 1px solid #4a4436; border-radius: 4px;
  font-size: 22px; cursor: pointer;
}
.reader-nav:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.reader-nav:disabled { opacity: .25; cursor: default; }
.reader-foot { padding: 8px 14px 12px; text-align: center; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .45; }

/* ---------- sound toggle ---------- */
.sound-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 70;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(185,144,47,.5);
  background: linear-gradient(180deg, #24282b, #121518);
  color: var(--brass-hi); cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.6);
}
.sound-toggle.muted .spk-on { display: none; }
.sound-toggle.muted .spk-off { display: block !important; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .specimen { display: none; }
}
@media (max-width: 720px) {
  :root { --mach-w: 96vw; }
  .machine { margin-top: clamp(90px, 16vh, 150px); }
  .pages-stack-wrap { top: 2vh; }
  .hint { display: none; }
}
@media (max-height: 700px) {
  .machine { margin-top: clamp(80px, 14vh, 140px); }
}

/* paper pull progress cue */
.paper-sheet.pulling { box-shadow: 0 -8px 22px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.25), inset 0 0 40px rgba(150,130,90,.12); }

/* torn edge */
.tear-edge {
  position: absolute; left: 0; right: 0; height: 12px; bottom: -6px;
  background: linear-gradient(180deg, var(--paper), transparent);
  clip-path: polygon(0 0, 4% 70%, 9% 15%, 15% 85%, 22% 25%, 29% 95%, 36% 10%, 43% 75%, 51% 20%, 58% 90%, 65% 18%, 72% 80%, 79% 12%, 86% 88%, 93% 30%, 100% 65%, 100% 0);
  pointer-events: none;
}