/* ============================================================
   THE STANDARD — mechanical typewriter
   Palette: warm plaster wall / walnut bench / olive enamel machine /
   brass fittings / cream paper / blue-black ink / red ribbon.
   All machine dimensions use cqw so the whole machine scales as one unit.
   ============================================================ */

:root{
  --wall:#4a4036;
  --wall-deep:#332c24;
  --bench:#6b4a32;
  --bench-dark:#4a3323;
  --bench-edge:#2f2015;
  --machine:#384236;
  --machine-hi:#5a6a52;
  --machine-lo:#171a15;
  --key:#1b1c1a;
  --key-hi:#3a3c38;
  --key-face:#232522;
  --cream:#f4eddc;
  --paper:#f6f0e0;
  --ink:#2a2f45;
  --ink-red:#a63b2f;
  --brass:#b08d57;
  --brass-hi:#e0c084;
  --steel:#9aa0a2;
  --danger:#c2543f;
  --shadow:0 18px 50px rgba(0,0,0,.55);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;
  color:var(--cream);
  background:var(--wall-deep);
  overflow-x:clip;
}

.stage{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(8px,2.5vh,28px) clamp(8px,2vw,36px) 42px;
  gap:26px;
  overflow-x:clip;
}

/* ============ ROOM ============ */
.room{position:fixed;inset:0;pointer-events:none;z-index:0}
.wall-light{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 62% -10%, rgba(242,217,160,.32), rgba(242,217,160,.06) 42%, transparent 68%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.55), transparent 55%),
    linear-gradient(180deg,#55483a 0%, var(--wall) 45%, var(--wall-deep) 100%);
}
.bench{
  position:absolute;left:-4%;right:-4%;bottom:0;height:26vh;min-height:170px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 90px),
    linear-gradient(180deg,#7a5538 0%, var(--bench) 18%, #55391f 92%, var(--bench-edge) 100%);
  border-top:2px solid rgba(255,220,160,.18);
  box-shadow:0 -8px 30px rgba(0,0,0,.35) inset;
  transform-origin:50% 0;
  transition:transform .07s ease-out;
}
.bench-edge{
  position:absolute;left:0;right:0;bottom:0;height:10px;
  background:linear-gradient(180deg,var(--bench-edge),#1c120a);
}
.bench.shiver{transform:translateY(1.4px)}
.dust{
  position:absolute;border-radius:50%;
  background:rgba(255,240,210,.35);
  filter:blur(1px);
  animation:drift 14s linear infinite;
}
.dust-1{width:3px;height:3px;left:18%;top:22%;animation-duration:17s;opacity:.5}
.dust-2{width:2px;height:2px;left:42%;top:12%;animation-duration:22s;opacity:.4}
.dust-3{width:4px;height:4px;left:71%;top:30%;animation-duration:13s;opacity:.35}
.dust-4{width:2px;height:2px;left:85%;top:18%;animation-duration:26s;opacity:.45}
@keyframes drift{
  0%{transform:translate3d(0,-6vh,0);opacity:0}
  12%{opacity:.5}
  85%{opacity:.4}
  100%{transform:translate3d(4vw,58vh,0);opacity:0}
}

/* type specimen pinned to the wall */
.specimen{
  position:absolute;right:4vw;top:6vh;width:190px;padding:12px 14px 16px;
  background:var(--paper);
  color:#3a3a3a;
  transform:rotate(2.4deg);
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.2);
  font-family:"Courier Prime","Courier New",monospace;
  line-height:1.45;
}
.specimen-title{font-size:9px;letter-spacing:.14em;border-bottom:1px solid rgba(0,0,0,.25);padding-bottom:6px;margin-bottom:8px;font-weight:700}
.specimen-body{font-size:11px;white-space:nowrap;overflow:hidden}
.specimen-body::first-line{font-weight:700}
.specimen-stain{
  position:absolute;right:-8px;bottom:-10px;width:52px;height:44px;border-radius:60% 40% 55% 45%;
  background:radial-gradient(closest-side, rgba(122,64,28,.45), rgba(122,64,28,.12) 60%, transparent);
  transform:rotate(-8deg);
}

/* ============ MACHINE CHASSIS ============ */
.machine{
  position:relative;
  z-index:2;
  width:min(1180px,96vw);
  container-type:inline-size;
  margin-top:1vh;
  outline:none;
  transition:transform .07s ease-out;
}
.machine.shiver{transform:translateY(1.2px)}

/* the carriage slides on a rail that extends past the body */
.carriage-zone{
  position:relative;
  height:40cqw;
  min-height:230px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:5;
}
/* the carriage rail is bounded so it never overflows the viewport edge */
.carriage-rail{
  position:absolute;left:calc(50% - 43cqw);bottom:6px;
  width:86cqw;height:10px;border-radius:6px;
  background:linear-gradient(180deg,#20221f,#0d0e0c);
  box-shadow:0 3px 6px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.05) inset;
}
.carriage{
  position:relative;
  width:160cqw;
  height:38cqw;
  min-height:224px;
  will-change:transform;
  transition:transform .16s cubic-bezier(.22,.9,.3,1);
}
/* the carriage sled is 160cqw wide; the visible frame lives in its centre.
   transform:translateX carries the carriage; --carriage-x is JS-driven. */
.carriage-frame{
  position:absolute;left:50%;bottom:0;width:100cqw;max-width:1180px;height:9cqw;min-height:52px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#4c5748 0%, var(--machine) 30%, var(--machine-hi) 47%, #242b22 100%);
  border-radius:10px 10px 4px 4px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), 0 -1px 0 rgba(255,255,255,.12) inset, 0 6px 0 -2px var(--machine-lo,#1c211a);
}
.gauge-rail{
  position:absolute;left:8cqw;right:8cqw;top:1.1cqw;height:3.4cqw;min-height:20px;
  background:linear-gradient(180deg,#101210,#252a24);
  border-radius:4px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
  cursor:pointer;
}
.gauge-rail .tick{
  position:absolute;top:0;bottom:0;width:1px;background:rgba(244,237,220,.28);
}
.gauge-rail .tick.major{background:rgba(244,237,220,.55);top:15%;bottom:15%}
.gauge-rail .tabstop{
  position:absolute;top:-2px;width:2px;height:calc(100% + 4px);
  background:var(--brass-hi);
  box-shadow:0 0 4px rgba(224,192,132,.7);
}
.line-gauge{
  position:absolute;top:-4px;width:1.4cqw;min-width:8px;height:5.4cqw;min-height:26px;
  margin-left:-0.7cqw;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));
  clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%);
  transition:left .05s linear;
  pointer-events:none;
  z-index:3;
}
.margin-stop{
  position:absolute;top:-6px;width:2.2cqw;min-width:12px;height:6.4cqw;min-height:30px;
  background:linear-gradient(180deg,#c9c9c4,#7e7f7a);
  clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);
  cursor:ew-resize;z-index:4;
  touch-action:none;
}
.margin-stop:active{filter:brightness(1.2)}
.margin-stop .flag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font-size:9px;color:var(--cream);opacity:.75;font-family:"Futura","Avenir Next",sans-serif;
}
.paper-bail{
  position:absolute;left:10cqw;right:10cqw;top:-1.4cqw;height:1.1cqw;min-height:6px;
  background:linear-gradient(180deg,#cfd3d4,#6f7476);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.paper-bail::before,.paper-bail::after{
  content:"";position:absolute;top:-1.2cqw;width:2.4cqw;height:3cqw;min-height:14px;
  background:radial-gradient(closest-side,#d9dcdd,#585c5e);
  border-radius:50%;
}
.paper-bail::before{left:-1.6cqw}
.paper-bail::after{right:-1.6cqw}

/* paper window */
.paper-window{
  position:absolute;left:50%;bottom:8.2cqw;transform:translateX(-50%);
  width:46cqw;height:29cqw;min-height:172px;
  background:#0a0b09;
  border-radius:6px;
  box-shadow:
    0 0 0 2px #14161380,
    0 0 0 5px #2b322a,
    0 14px 30px rgba(0,0,0,.5),
    0 -2px 8px rgba(255,240,200,.06) inset;
  overflow:hidden;
}
.paper{
  position:absolute;left:50%;
  width:58cqw;min-height:29cqw;
  transform-origin:50% 0;
  background:
    linear-gradient(94deg, rgba(0,0,0,.05), transparent 12% 88%, rgba(0,0,0,.07)),
    radial-gradient(140% 100% at 50% 0%, #fbf6e8 0%, var(--paper) 55%, #ece4cf 100%);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  padding:14px 0 30px;
  will-change:transform;
}
.paper-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.5), transparent 18%),
             linear-gradient(180deg, transparent 78%, rgba(0,0,0,.16));
}
.typed-text{
  position:absolute;inset:14px 0 auto 0;
  font-family:"Courier Prime","Courier New",Courier,monospace;
  font-size:1.62cqw;
  line-height:2.3cqw;
  letter-spacing:.01em;
  color:var(--ink);
  white-space:pre;
  overflow:hidden;
  height:calc(100% - 28px);
}
.typed-text .ch{display:inline-block;width:1.62cqw}
.typed-text .ch.faded{opacity:.55}
.typed-text .ch.smudge{filter:blur(.4px)}
.typed-text .line{position:absolute;left:0;right:0;height:2.3cqw}
.caret{
  position:absolute;width:1.5cqw;height:2cqw;
  border-bottom:2px solid rgba(60,60,80,.85);
  animation:caret-blink 1.2s steps(1) infinite;
  pointer-events:none;
}
@keyframes caret-blink{50%{opacity:.15}}
.window-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5), transparent 9% 88%, rgba(0,0,0,.55)),
    radial-gradient(90% 60% at 50% 0%, rgba(255,240,200,.10), transparent);
}
.platen-bar{
  position:absolute;left:-2%;right:-2%;bottom:-1.6cqw;height:2.6cqw;min-height:14px;
  background:linear-gradient(180deg,#3b3b39,#191917 60%,#0c0c0b);
  border-radius:4px;
}

/* platen knobs */
.knob{
  position:absolute;bottom:9cqw;
  width:7.6cqw;height:7.6cqw;min-width:44px;min-height:44px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, #4c4f4a, #22241f 62%, #101210);
  box-shadow:0 6px 14px rgba(0,0,0,.55), 0 -2px 4px rgba(255,255,255,.08) inset;
  cursor:grab;touch-action:none;z-index:6;
}
.knob:active{cursor:grabbing}
.knob-face{
  position:absolute;inset:18%;border-radius:50%;
  background:
    conic-gradient(#3a3d38 0 12deg,#262923 12deg 24deg) 0 0/30% 100% repeat,
    radial-gradient(circle at 40% 34%, #565a52, #23261f 70%);
  box-shadow:0 2px 3px rgba(0,0,0,.6) inset;
}
.knob-left{left:calc(50% - 86cqw)}
.knob-right{right:calc(50% - 86cqw)}
.line-counter{
  position:absolute;top:-3.4cqw;left:50%;transform:translateX(-50%);
  font-family:"Futura","Avenir Next",sans-serif;font-size:1.5cqw;letter-spacing:.08em;
  color:var(--brass-hi);
  background:#15170f;border:1px solid #000;border-radius:4px;
  padding:2px 10px;box-shadow:0 2px 5px rgba(0,0,0,.5);
}

/* ============ MECHANISM ============ */
.mechanism{
  position:relative;height:17cqw;min-height:96px;z-index:4;
  background:linear-gradient(180deg,#2c332a 0%, var(--machine) 40%, #20261f 100%);
  border-radius:14px 14px 0 0;
  box-shadow:0 -6px 18px rgba(0,0,0,.4) inset, 0 8px 22px rgba(0,0,0,.35);
  overflow:visible;
}
.mechanism::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(120% 80% at 50% -20%, rgba(255,235,180,.12), transparent 55%);
  pointer-events:none;
}
.typebasket{
  position:absolute;left:50%;top:-7cqw;width:56cqw;height:16cqw;
  transform-origin:50% 100%;
  transition:transform .14s cubic-bezier(.3,1.3,.4,1);
}
.machine.shifted .typebasket{transform:translateY(-1.5cqw)}
.typebar{
  position:absolute;left:50%;bottom:0;width:2px;height:15cqw;
  transform-origin:50% 100%;
  background:linear-gradient(0deg,#3a3d3a, #7c807c 80%);
  opacity:.85;
}
.typebar::after{
  content:"";position:absolute;top:-7px;left:-5px;width:12px;height:9px;
  background:linear-gradient(180deg,#d7d9d4,#8e908c);
  border-radius:2px;
}
.typebar.jammed{background:var(--danger);opacity:1;z-index:3;cursor:pointer}
.ribbon-assembly{position:absolute;left:50%;top:1cqw;transform:translateX(-50%);width:64cqw;height:8cqw}
.ribbon{
  position:absolute;left:12%;right:12%;top:38%;height:1.5cqw;min-height:7px;
  background:linear-gradient(180deg,#191919,#2c2c2c);
  box-shadow:0 2px 3px rgba(0,0,0,.5);
  border-radius:2px;
}
.ribbon-selector-red .ribbon{background:linear-gradient(180deg,#7e2a20,#a63b2f)}
.ribbon-vibrator{
  position:absolute;left:50%;top:26%;width:3cqw;height:3cqw;min-width:14px;min-height:12px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#8f9494,#4c5050);
  border-radius:3px;
  transition:transform .08s ease-out;
  z-index:2;
}
.ribbon-vibrator.up{transform:translateX(-50%) translateY(-1.6cqw)}
.ribbon-spool{
  position:absolute;top:-2cqw;width:8.6cqw;height:8.6cqw;min-width:40px;min-height:40px;
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 32%, #35382f, #14160f 70%),
    conic-gradient(from 20deg, #23261d 0 40deg, #191c15 40deg 80deg) content-box;
  border:1.2cqw solid #262a20;
  box-shadow:0 5px 12px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.04) inset;
  transition:transform .12s ease-out;
}
.spool-hub{
  position:absolute;inset:34%;border-radius:50%;
  background:radial-gradient(circle at 40% 34%, var(--brass-hi), var(--brass) 60%, #6d5426);
  box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.spool-left{left:-1cqw}
.spool-right{right:-1cqw}
.typeguide{
  position:absolute;left:50%;top:-1.2cqw;transform:translateX(-50%);
  width:9cqw;height:5cqw;min-width:40px;
  background:linear-gradient(180deg,#0c0d0b,#1d201b);
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
  box-shadow:0 3px 6px rgba(0,0,0,.5);
}
.escapement-wheel{
  position:absolute;right:7cqw;top:2.4cqw;width:6.4cqw;height:6.4cqw;min-width:30px;min-height:30px;
  border-radius:50%;
  background:
    repeating-conic-gradient(rgba(220,224,222,.85) 0 5deg, transparent 5deg 22deg),
    radial-gradient(circle at 42% 36%, #62666a, #23262a 68%);
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  transition:transform .09s cubic-bezier(.2,1.6,.4,1);
}
.typebars-layer{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none;z-index:6}

/* ============ KEYBOARD ============ */
.keyboard{
  position:relative;z-index:5;
  background:
    linear-gradient(180deg,#3d473b 0%, var(--machine) 30%, #262d24 88%, #171b15 100%);
  border-radius:0 0 26px 8px;
  padding:2.4cqw 3cqw 2.8cqw;
  box-shadow:var(--shadow), 0 -1px 0 rgba(255,255,255,.09) inset;
}
.keyboard::after{ /* brushed wear on the deck */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(60% 40% at 18% 12%, rgba(255,240,200,.07), transparent),
    radial-gradient(40% 30% at 85% 90%, rgba(0,0,0,.28), transparent),
    repeating-linear-gradient(94deg, transparent 0 46px, rgba(255,255,255,.012) 46px 48px);
}
.keys{
  display:flex;flex-direction:column;gap:.7cqw;
  max-width:84cqw;margin:0 auto;
}
.key-row{display:flex;gap:.7cqw;justify-content:center}
.key{
  position:relative;flex:1 1 0;max-width:6.6cqw;min-width:26px;
  height:7.2cqw;min-height:34px;
  border-radius:6px 6px 9px 9px;
  background:linear-gradient(180deg,#2e302c 0%, var(--key-face) 45%, #14151300 140%),
    linear-gradient(180deg,#33352f, var(--key) 70%);
  box-shadow:
    0 0.5cqw 0 #101110,
    0 0.9cqw 1cqw rgba(0,0,0,.45),
    0 -1px 0 rgba(255,255,255,.14) inset;
  color:#e8e2cf;
  font-family:"Futura","Avenir Next","Century Gothic",sans-serif;
  font-size:1.9cqw;
  letter-spacing:.02em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1cqw;
  cursor:pointer;user-select:none;
  transition:transform .045s ease-out, box-shadow .045s ease-out, filter .12s;
  touch-action:manipulation;
}
.key .glyph-up{font-size:1.25cqw;color:#b9b39e;line-height:1}
.key .glyph-lo{line-height:1}
.key:hover{filter:brightness(1.14)}
.key:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.key.down{
  transform:translateY(.5cqw);
  box-shadow:0 0 0 #101110, 0 .2cqw .3cqw rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.06) inset;
}
.key-wide{max-width:9.4cqw}
.key.glass{
  background:linear-gradient(180deg,#3f4a44, #232823 75%);
  border-radius:50% 50% 10px 10px/70% 70% 12px 12px;
}
.spacebar-row{display:flex;justify-content:center;margin-top:1cqw}
.spacebar-track{
  width:52cqw;min-width:220px;height:7.6cqw;min-height:38px;
  background:linear-gradient(180deg,#20261f,#11150f);
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.45) inset, 0 1px 0 rgba(255,255,255,.07);
  padding:.5cqw;
}
.spacebar{
  height:100%;border-radius:8px;
  background:linear-gradient(180deg,#2f312c, var(--key) 80%);
  box-shadow:0 0.5cqw 0 #101110, 0 -1px 0 rgba(255,255,255,.12) inset;
  color:#8f8a76;font-size:1.5cqw;letter-spacing:.5em;text-indent:.5em;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
  transition:transform .05s ease-out, box-shadow .05s;
  touch-action:manipulation;
}
.spacebar.down{transform:translateY(.5cqw);box-shadow:0 0 0 #101110, 0 -1px 0 rgba(255,255,255,.06) inset}
.spacebar:focus-visible,.lever:focus-visible,.knob:focus-visible,.sheet-btn:focus-visible,.pages-btn:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}

/* ============ LEVERS / CONTROL BENCH ============ */
.control-bench{
  position:relative;z-index:5;
  display:flex;flex-wrap:wrap;gap:1.2cqw;justify-content:space-between;align-items:center;
  margin:-1.2cqw 3cqw 0;
  padding:1.4cqw 1.8cqw;
  background:linear-gradient(180deg,#2f362d,#20261f);
  border-radius:0 0 14px 14px;
  box-shadow:0 12px 26px rgba(0,0,0,.5);
}
.ctrl-group{display:flex;gap:1cqw;align-items:center;flex-wrap:wrap}
.lever{
  min-width:5.4cqw;min-height:34px;padding:.6cqw 1.2cqw;
  background:linear-gradient(180deg,#4b5347,#252b23 80%);
  border-radius:7px 7px 10px 10px;
  box-shadow:0 .45cqw 0 #12140f, 0 -1px 0 rgba(255,255,255,.12) inset;
  color:#ded8c2;font-family:"Futura","Avenir Next",sans-serif;font-size:1.35cqw;letter-spacing:.06em;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
  transition:transform .06s ease-out, box-shadow .06s ease-out, background .15s;
  touch-action:manipulation;
  text-align:center;
}
.lever.down{transform:translateY(.45cqw);box-shadow:0 0 0 #12140f, 0 -1px 0 rgba(255,255,255,.06) inset}
.lever-return{background:linear-gradient(180deg,#5d6b52,#2c3527);min-width:11cqw}
.lever.latched{box-shadow:0 0 0 #12140f;transform:translateY(.45cqw);background:linear-gradient(180deg,#6d7a5a,#39442e)}
.ribbon-selector{
  display:flex;align-items:center;gap:.5cqw;
  background:#191d16;border-radius:8px;padding:.5cqw .9cqw;
  box-shadow:0 .4cqw 0 #0d0f0a, 0 1px 0 rgba(255,255,255,.08) inset;
  cursor:pointer;user-select:none;
}
.ribbon-sel-dot{
  width:1.5cqw;height:1.5cqw;min-width:9px;min-height:9px;border-radius:50%;
  background:#2e332b;border:1px solid #000;transition:background .15s, box-shadow .15s;
}
.ribbon-selector .ribbon-sel-dot[data-pos="0"].active{background:#1d1f26;box-shadow:0 0 0 2px var(--brass)}
.ribbon-selector .ribbon-sel-dot[data-pos="1"].active{background:var(--ink-red);box-shadow:0 0 0 2px var(--brass)}
.ribbon-selector .ribbon-sel-dot[data-pos="2"].active{background:#4c4f56;box-shadow:0 0 0 2px var(--brass)}
.ribbon-sel-label{font-size:1.2cqw;color:var(--brass-hi);letter-spacing:.1em;margin-left:.4cqw;font-family:"Futura","Avenir Next",sans-serif}
.spacing-sel{
  display:flex;gap:.3cqw;background:#191d16;border-radius:8px;padding:.4cqw .6cqw;
  box-shadow:0 .4cqw 0 #0d0f0a;cursor:pointer;
}
.spacing-sel .sp{
  width:2.2cqw;min-width:20px;height:2.2cqw;min-height:20px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2cqw;color:#a8a28c;background:#242a20;border:1px solid #0b0d09;
}
.spacing-sel .sp.active{background:var(--brass);color:#1c150a;border-color:var(--brass-hi)}
.sheet-btn{
  border:0;border-radius:8px;padding:.8cqw 1.4cqw;min-height:36px;
  background:linear-gradient(180deg,#7e4034,#54291f);
  box-shadow:0 .45cqw 0 #2c1410, 0 -1px 0 rgba(255,255,255,.15) inset;
  color:#f2e6d4;font-family:"Futura","Avenir Next",sans-serif;font-size:1.35cqw;letter-spacing:.08em;
  cursor:pointer;transition:transform .06s, box-shadow .06s, filter .15s;
  touch-action:manipulation;
}
.sheet-btn:hover{filter:brightness(1.15)}
.sheet-btn:active{transform:translateY(.4cqw);box-shadow:0 0 0 #2c1410}
.sheet-btn-new{background:linear-gradient(180deg,#5d6b4e,#33402b);box-shadow:0 .45cqw 0 #1d2417, 0 -1px 0 rgba(255,255,255,.15) inset}
.sheet-btn-mute{background:linear-gradient(180deg,#4a4f55,#272b30);box-shadow:0 .45cqw 0 #14171a, 0 -1px 0 rgba(255,255,255,.15) inset}

.shift-levers{
  position:absolute;top:-4.2cqw;right:2cqw;left:2cqw;
  display:flex;justify-content:space-between;z-index:7;pointer-events:none;
}
.shift-levers .lever{pointer-events:auto;min-width:7cqw;background:linear-gradient(180deg,#54604e,#2a3126)}

/* ============ PAGES PANEL ============ */
.pages{
  position:relative;z-index:3;
  width:264px;flex:0 0 264px;
  align-self:stretch;
  background:linear-gradient(180deg, rgba(20,17,12,.72), rgba(20,17,12,.55));
  border:1px solid rgba(244,237,220,.12);
  border-radius:14px;
  padding:18px 16px;
  backdrop-filter:blur(3px);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px;
  max-height:calc(100dvh - 60px);
}
.pages-title{
  margin:0;font-family:"Big Caslon","Playfair Display",Georgia,serif;
  font-size:15px;letter-spacing:.18em;color:#e7ddc4;text-align:center;font-weight:600;
}
.pages-title::after{content:"";display:block;height:1px;margin-top:8px;background:linear-gradient(90deg,transparent,rgba(231,221,196,.4),transparent)}
.pages-stack{
  flex:1;min-height:120px;position:relative;overflow-y:auto;overflow-x:clip;
  padding:6px 2px 12px;
}
.pages-empty{font-size:12.5px;color:#b6ac93;line-height:1.6;font-style:italic;text-align:center;margin-top:34px;opacity:.8}
.page-thumb{
  position:relative;display:block;width:150px;margin:0 auto -34px;
  padding:12px 10px 26px;
  background:linear-gradient(180deg,#fbf6e8,var(--paper) 70%,#e9e1cc);
  color:#33343c;border:0;text-align:left;cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.42);
  transform:rotate(var(--tilt,0deg));
  transition:transform .16s ease-out, box-shadow .16s;
  font-family:"Courier Prime","Courier New",monospace;
}
.page-thumb:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 14px 24px rgba(0,0,0,.5);z-index:9}
.page-thumb .thumb-num{
  position:absolute;top:4px;right:8px;font-size:9px;color:#8b8474;letter-spacing:.1em;
}
.page-thumb .thumb-lines{
  height:64px;overflow:hidden;white-space:pre;
  font-size:8.5px;line-height:13px;color:#2c2c30;
}
.pages-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pages-btn{
  border:1px solid rgba(244,237,220,.25);background:rgba(244,237,220,.06);
  color:#e7ddc4;font-family:"Futura","Avenir Next",sans-serif;font-size:11px;letter-spacing:.08em;
  border-radius:8px;padding:8px 10px;cursor:pointer;transition:background .15s;
  min-height:36px;
}
.pages-btn:hover{background:rgba(244,237,220,.14)}
.pages-count{font-size:11.5px;color:#b6ac93;letter-spacing:.06em;white-space:nowrap}

/* page reader modal */
.page-reader{
  position:fixed;inset:0;z-index:60;background:rgba(12,10,7,.72);
  display:flex;align-items:center;justify-content:center;padding:4vh 4vw;
  backdrop-filter:blur(2px);
}
.page-reader-sheet{
  position:relative;width:min(720px,92vw);max-height:88vh;overflow:auto;
  background:linear-gradient(180deg,#fbf6e8,#efe8d3);
  color:#2e2e33;border-radius:4px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  padding:46px 42px 54px;
  transform:rotate(-.6deg);
}
.page-reader-close{position:sticky;top:0;float:right;background:#2e2e33;color:#f2ead6;border:0}
.page-reader-text{
  margin:0;white-space:pre-wrap;font-family:"Courier Prime","Courier New",monospace;
  font-size:14.5px;line-height:1.75;
}

/* ============ JAM / TOAST / TEAR ============ */
.jam-overlay{
  position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(10,9,7,.45);
}
.jam-card{
  background:linear-gradient(180deg,#2c211a,#1d1512);
  border:1px solid rgba(198,84,63,.5);
  border-radius:14px;padding:26px 30px;text-align:center;max-width:340px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:jam-pop .18s cubic-bezier(.2,1.6,.4,1);
}
@keyframes jam-pop{from{transform:scale(.92);opacity:0}}
.jam-title{font-family:"Big Caslon","Playfair Display",Georgia,serif;letter-spacing:.22em;color:var(--danger);font-size:17px;margin-bottom:10px}
.jam-text{font-size:13px;line-height:1.6;color:#d9cdb4;margin-bottom:16px}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:rgba(18,15,11,.92);border:1px solid rgba(224,192,132,.35);
  color:#efe6cd;font-size:13.5px;letter-spacing:.03em;
  padding:10px 20px;border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .25s, transform .25s;z-index:70;
  max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.tear-layer{position:fixed;inset:0;pointer-events:none;z-index:55;overflow:hidden}
.tear-piece{
  position:absolute;width:14px;height:56px;
  background:linear-gradient(180deg,#f8f3e4,#e6dfc9);
  box-shadow:0 4px 8px rgba(0,0,0,.3);
  border-radius:2px 6px 4px 8px;
  opacity:.95;
}

/* ============ OPERATOR CARD ============ */
.op-card{
  position:fixed;left:18px;top:16px;z-index:50;width:280px;
}
.op-toggle{
  width:100%;border:1px solid rgba(244,237,220,.22);background:rgba(18,15,11,.8);
  color:#e7ddc4;font-family:"Futura","Avenir Next",sans-serif;font-size:10.5px;letter-spacing:.22em;
  border-radius:9px;padding:8px 12px;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;
  backdrop-filter:blur(3px);
}
.op-toggle::after{content:"+";font-size:13px;color:var(--brass-hi)}
.op-card.open .op-toggle::after{content:"–"}
.op-body{
  margin-top:8px;border-radius:11px;padding:14px 16px;
  background:rgba(18,15,11,.86);border:1px solid rgba(244,237,220,.16);
  font-size:12px;line-height:1.55;color:#cfc5ab;display:none;
  backdrop-filter:blur(4px);
  box-shadow:var(--shadow);
}
.op-card.open .op-body{display:block}
.op-body dl{margin:0}
.op-body dt{font-family:"Futura","Avenir Next",sans-serif;color:var(--brass-hi);letter-spacing:.08em;font-size:10.5px;margin-top:9px}
.op-body dt:first-child{margin-top:0}
.op-body dd{margin:2px 0 0}

/* ============ RESPONSIVE ============ */
@media (max-width: 1120px){
  .pages{position:fixed;right:14px;top:70px;bottom:auto;max-height:46vh;width:210px;flex-basis:210px}
}
@media (max-width: 900px){
  .stage{flex-direction:column;align-items:center;gap:14px;padding-bottom:60px}
  .pages{
    position:relative;inset:auto;width:min(560px,96vw);flex:none;max-height:none;
  }
  .pages-stack{max-height:180px}
  .specimen{display:none}
  .op-card{position:absolute;width:min(300px,84vw)}
}
@media (max-width: 700px){
  .machine{width:100vw}
  .carriage-zone{height:52cqw}
  .carriage{height:50cqw}
  .paper-window{width:74cqw;height:40cqw;bottom:12cqw}
  .paper{width:96cqw}
  .typed-text{font-size:2.6cqw;line-height:3.7cqw}
  .typed-text .ch{width:2.6cqw}
  .typed-text .line{height:3.7cqw}
  .caret{width:2.4cqw;height:3.2cqw}
  .knob-left{left:calc(50% - 96cqw)}
  .knob-right{right:calc(50% - 96cqw)}
  .mechanism{height:22cqw}
  .typebasket{width:70cqw;height:20cqw;top:-9cqw}
  .typebar{height:19cqw}
  .keyboard{padding:3.4cqw 3cqw 4cqw}
  .key{height:10.5cqw;font-size:2.9cqw;border-radius:7px 7px 10px 10px}
  .key .glyph-up{font-size:2cqw}
  .keys{gap:1cqw}
  .key-row{gap:1cqw}
  .control-bench{margin:-2cqw 3cqw 0;flex-direction:column;align-items:stretch;gap:2cqw;padding:2.4cqw}
  .ctrl-group{justify-content:center}
  .lever{min-height:40px;font-size:2.4cqw;padding:1.2cqw 2cqw}
  .sheet-btn{font-size:2.4cqw;padding:1.4cqw 2.4cqw;min-height:42px}
  .line-counter{font-size:2.6cqw;top:-5cqw}
  .shift-levers{top:-6.4cqw}
  .pages{border-radius:12px}
  .page-reader-sheet{padding:30px 20px 40px}
}
@media (max-width: 420px){
  .pages{padding:14px 10px}
  .page-thumb{width:126px}
  .toast{font-size:12px;width:88vw}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .dust{animation:none;opacity:.25}
  .bench,.machine{transition:none}
  .carriage,.typebasket,.typebar,.escapement-wheel,.ribbon-vibrator{transition:none !important}
  .caret{animation:none}
  .tear{animation-duration:.05s !important}
}