/* Contained recovery layout: one machine-relative unit, bounded carriage travel.
   The machine publishes one --travel number per frame; CSS composes it:
   desktop (--travel-unit:1cqw) slides the carriage, window and knobs together;
   mobile (--travel-unit:0cqw) freezes the assembly and slides the paper behind
   a fixed print point instead, so nothing can overflow the viewport.
   Ink metrics are CSS variables (--cell, --row) with px floors on mobile;
   JS measures rendered pixels so text, caret and marks stay aligned. */
:root{--cell:1.12cqw;--row:2.1cqw;--origin-x:2.6cqw;--origin-y:22cqw;--travel-unit:1cqw;--travel:0;--paper-slide:0;--paper-shift:0cqw;--paper-y:0cqw}
.stage{display:grid;grid-template-columns:minmax(0,900px) 220px;gap:24px 42px;max-width:1260px;margin:auto;padding:30px 32px 64px;align-items:start;overflow:visible}
.workshop-heading{grid-column:1/-1;position:relative;z-index:12;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #baa78945;padding-bottom:20px}
.edition{font-size:10px;letter-spacing:.23em;color:#c3b091}
h1{font:normal 44px/1.1 Georgia,serif;margin:10px 0;color:#f3e8d0;letter-spacing:-1.4px}h1 span{font:12px/1 monospace;letter-spacing:0;margin-left:16px;color:#c4a679}
.workshop-heading p{font:italic 14px Georgia,serif;color:#bfb098;margin:8px 0 0}
.operator-guide{position:relative;width:235px;font-size:12px}.operator-guide summary{cursor:pointer;font-size:10px;letter-spacing:.13em;min-height:44px;display:flex;align-items:center;justify-content:flex-end;color:#ddc49b}.operator-guide summary::after{content:' +';margin-left:12px}.operator-guide[open]{padding:16px;background:#211e18;box-shadow:0 15px 40px #0007;border:1px solid #8e79584d}.operator-guide[open] p{font:12px/1.7 system-ui,sans-serif;color:#d4c7b1}
.machine{width:100%;margin:0;min-width:0;outline:none}.machine:focus-visible{outline:1px solid #c5a76f;outline-offset:12px}
.carriage-zone{height:31cqw;min-height:0;z-index:5;pointer-events:none}
.carriage{width:52cqw;height:31cqw;min-height:0;flex:none;transition:none;pointer-events:auto;touch-action:none;cursor:grab;transform:translateX(calc(var(--travel-unit) * var(--travel)))}
.carriage-frame{width:52cqw;max-width:none;height:7cqw;min-height:0;z-index:3;left:0;right:auto;transform:none;border-radius:4px}
.gauge-rail{left:8%;right:8%;top:1.3cqw;height:3cqw;min-height:0}.gauge-rail .tick{color:#b8aa8b;font:1cqw monospace;padding-top:.7cqw;font-style:normal}
.line-gauge{height:4.5cqw;min-height:0;width:1cqw;min-width:0}.margin-stop{height:4cqw;min-height:0;width:1.4cqw;min-width:10px;top:.3cqw}.margin-stop:focus-visible{background:#e8c589;outline:3px solid #fff}
.paper-bail{left:6%;right:6%;top:-1cqw;height:.65cqw;min-height:0;z-index:6}.paper-bail::before,.paper-bail::after{width:1.7cqw;height:2.1cqw;min-height:0}
.paper-window{width:50cqw;height:27cqw;bottom:5cqw;min-height:0;overflow:hidden;border-radius:2px;cursor:ns-resize;touch-action:none}
.paper{width:50cqw;height:96cqw;min-height:0;left:0;top:0;padding:0;transform:translate(var(--paper-shift),var(--paper-y));transition:opacity .3s;transform-origin:50% 100%;background:var(--paper)}.paper.pulling{animation:pull-sheet .6s ease-in forwards}.paper.seating{animation:seat-sheet .65s ease-out}
@keyframes pull-sheet{to{transform:translate(var(--paper-shift),-90cqw) rotate(-4deg);opacity:.4}}@keyframes seat-sheet{from{transform:translate(var(--paper-shift),30cqw);opacity:.3}to{transform:translate(var(--paper-shift),0);opacity:1}}
.typed-text{inset:0;height:100%;overflow:visible;font-size:1.86cqw;line-height:1;letter-spacing:0}.typed-text .ch{position:absolute;width:var(--cell);display:block}.caret{width:var(--cell);height:var(--row);animation:none;opacity:.6}
.ink-origin{position:absolute;left:var(--origin-x);top:var(--origin-y);width:0;height:0;visibility:hidden}
.window-shade{background:linear-gradient(180deg,#4d39221a,transparent 10% 92%,#0005)}.platen-bar{min-height:0;bottom:-.3cqw;height:2cqw}
.knob{bottom:5cqw;width:5.4cqw;height:5.4cqw;min-width:0;min-height:0;pointer-events:auto;transform:translateX(calc(var(--travel-unit) * var(--travel)))}.knob-left{left:20cqw}.knob-right{right:20cqw}.line-counter{font-size:1.4cqw;top:-3cqw;padding:.3cqw .7cqw}
.mechanism{height:13cqw;min-height:0;border-radius:40% 40% 0 0 / 14% 14% 0 0;margin:0 9cqw}.typebasket{left:50%;margin-left:-23cqw;width:46cqw;top:-1cqw;height:9cqw;transition:none}.typebar{height:11cqw;width:.22cqw;bottom:0;transition:none}.typebar::after{width:.8cqw;height:.8cqw;left:-.3cqw;top:-.4cqw}.ribbon-assembly{width:46cqw;top:4cqw}.ribbon-spool{width:7cqw;height:7cqw;min-width:0;min-height:0;border-width:.8cqw}.ribbon{top:20%;height:1.1cqw;min-height:0}.ribbon-vibrator{top:5%;width:2.4cqw;height:2.4cqw;min-width:0;min-height:0}.typeguide{top:-1cqw;width:5cqw;min-width:0;height:3cqw}.escapement-wheel{right:4cqw;top:4cqw;width:4cqw;height:4cqw;min-width:0;min-height:0}
.maker-plate{position:relative;z-index:5;margin:-1px 9cqw 0;text-align:center;background:#303a2d;color:#c6ad77;font:2.9cqw Georgia,serif;letter-spacing:.22em;padding:0 0 1.6cqw;text-shadow:0 1px #000}.maker-plate span{display:block;font: .72cqw system-ui,sans-serif;letter-spacing:.23em;margin-top:.5cqw}
.machine-status{display:block;position:relative;z-index:6;margin:0 9cqw;background:#20271e;text-align:center;font:1.1cqw monospace;padding:.6cqw;color:#cbb891;letter-spacing:.06em}.machine-status.bell{color:#ffdb80}
.keyboard{margin:0 5cqw;padding:2cqw 3cqw 2.5cqw;border-radius:4px 4px 22px 22px}.keys{max-width:78cqw;gap:.7cqw}.key-row{gap:1.25cqw}.key{border:1px solid #a6a78e6b;flex:1 1 0;max-width:5.1cqw;min-width:0;height:4.5cqw;min-height:0;font-size:1.65cqw;transition:none;box-shadow:0 .55cqw 0 #11150f,0 .8cqw .6cqw #0007,inset 0 1px #e1d8c347}.key.glass{border-radius:50%;background:radial-gradient(ellipse at 45% 30%,#434a3e,#1b211a 90%)}.key .glyph-up{font-size:.85cqw}.spacebar-track{height:4cqw;width:45cqw;min-width:0;min-height:0;border-radius:6px}.spacebar{font-size:.8cqw}
.control-bench{margin:-.4cqw 8cqw 0;padding:1.6cqw;gap:1.5cqw}.ctrl-group{gap:1cqw}.lever,.sheet-btn{font-size:clamp(8px,1cqw,11px);min-height:32px;padding:.6cqw 1cqw}.ribbon-sel-label{font-size:1cqw}.shift-levers{top:46cqw;left:1cqw;right:1cqw}.shift-levers .lever{min-width:6cqw;width:6cqw;font-size:1cqw;padding:.5cqw}
.pages{position:relative;inset:auto;width:220px;flex:none;align-self:start;margin-top:90px;max-height:500px;min-height:280px;padding:18px 14px;border-radius:3px;background:linear-gradient(135deg,#2e251a66,#211c1680);box-shadow:0 15px 35px #0003}.pages-title{font-size:12px}.pages-stack{max-height:350px}.page-thumb{margin:0 auto 12px}.pages-controls{gap:3px}.pages-btn{font-size:9px;padding:8px}.pages-count{font-size:9px}.specimen{right:5vw;top:auto;bottom:5vh;opacity:.8;width:165px}.bench{height:53vh;background:repeating-linear-gradient(2deg,transparent 0 18px,#3b271616 19px 20px),linear-gradient(100deg,#463122,#755037 55%,#432c1e)}
button:disabled{opacity:.35;cursor:not-allowed}.ribbon-selector{min-height:32px}.ribbon-selector:focus-visible,summary:focus-visible{outline:2px solid #d1b780;outline-offset:3px}.paper-window,.carriage,.knob{user-select:none}
.jam-overlay{position:fixed;inset:0}.jam-card{padding:24px}
/* Reader: fixed pixel grid (JS READER_INK: 8px pitch, 24px leading). */
.reader-ink{position:relative;width:336px;height:584px;margin:0 auto}.reader-ink .ch{position:absolute;font:12px/1 'Courier New',monospace;width:8px;color:#3a3d47;white-space:pre}
.page-reader-text{margin-top:18px}.reader-number{font:10px monospace;display:block;margin-bottom:12px}.page-reader-sheet>.pages-btn{background:#383a30;color:#f2e9d5}
@media(min-width:1500px){.stage{padding-top:45px}}
@media(max-width:1000px){.stage{grid-template-columns:minmax(0,1fr);max-width:860px;gap:24px;padding:24px}.pages{margin:0 8%;width:84%;max-height:none;min-height:150px;display:block}.pages-stack{display:flex;align-items:start;gap:15px;min-height:50px;max-height:180px;overflow:auto}.page-thumb{flex:0 0 130px;margin:10px 0}.pages-empty{margin:12px auto}.pages-controls{justify-content:center;gap:20px}.specimen{display:none}}
/* Mobile: print point freezes (paper slides behind it), text and instruments get px floors,
   margin stops and knobs get touch-sized hit areas without distorting the visuals. */
@media(max-width:600px){
 :root{--cell:12px;--row:18px;--origin-x:8px;--origin-y:92px;--travel-unit:0cqw;--paper-slide:1}
 .stage{padding:22px 12px 40px;gap:24px}
 .workshop-heading{align-items:start;gap:14px;padding-bottom:14px}h1{font-size:33px}h1 span{font-size:10px;margin-left:10px}.edition{font-size:8px}.workshop-heading p{font-size:12px;max-width:200px}
 .operator-guide{width:100px;flex:none}.operator-guide summary{font-size:8px;line-height:1.5}.operator-guide[open]{position:absolute;right:0;top:0;width:250px;z-index:20}
 .carriage-zone{height:35cqw}
 .carriage-frame{left:50%;transform:translateX(-50%)}
 .paper-window{width:calc(100vw - 24px);height:37cqw;bottom:7cqw;background:#0a0b09}
 .paper{width:540px;height:850px;left:50%;margin-left:-270px;transform-origin:50% 0}
 .typed-text{font-size:12px}
 .caret{opacity:.75}
 .machine-status{font-size:11px;padding:5px}
 .maker-plate{font-size:3.4cqw}.maker-plate span{font-size:9px}
 .line-counter{font-size:11px;padding:2px 8px}
 .gauge-rail{left:6%;right:6%}.gauge-rail .tick{font-size:8px;padding-top:2px}
 .knob{width:30px;height:30px}.knob-left{left:14px}.knob-right{right:14px}
 .line-gauge{min-width:6px}
 /* touch targets: the trapezoid visual moves to ::after so the parent's clip-path
    no longer clips the hit region; stop paints above rail/ticks/bail so the whole
    expansion actually receives the pointer */
 .margin-stop{width:12px;min-width:12px;z-index:9;clip-path:none;background:transparent}
 .gauge-rail{z-index:1}.paper-bail{z-index:1}
 .margin-stop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#c9c9c4,#7e7f7a);clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}
 .margin-stop::before{content:"";position:absolute;left:-12px;right:-12px;top:-14px;bottom:-14px}
 .key{height:9cqw;font-size:3.1cqw;max-width:none;min-width:0;border-radius:50%}.keys{max-width:none;gap:2cqw}.key-row{gap:.8cqw}.key .glyph-up{font-size:1.7cqw}
 .keyboard{margin:0;padding:3cqw 1.4cqw}.spacebar-track{height:9cqw}.spacebar{font-size:1.8cqw}
 .shift-levers{position:relative;top:auto;left:auto;right:auto;margin:2cqw 4cqw}.shift-levers .lever{width:15cqw;font-size:2.3cqw;min-height:40px}
 .control-bench{margin:0 2cqw;padding:3cqw;gap:3cqw;flex-direction:column;align-items:stretch}.ctrl-group{gap:2cqw;justify-content:center}
 .lever,.sheet-btn{font-size:9px;min-height:44px;padding:8px 11px}
 .ribbon-selector{min-height:44px;padding:8px}.ribbon-sel-label{font-size:9px}.ribbon-sel-dot{width:10px;height:10px}
 .pages{margin:0;width:100%}.page-reader-sheet{padding:25px 18px}.jam-card{max-width:300px}.machine:focus-visible{outline-offset:3px}
}
@media(prefers-reduced-motion:reduce){.paper.pulling,.paper.seating{animation-duration:.03s}.dust{animation:none}}