/* ════════════════════════════════════════════════════════════════════════
   r8p394 — THE MUTOSCOPE: what a phone shows held sideways, behind ?scope
   (src/mutoscope.js; docs/2026-10-25-mutoscope-PROPOSAL.md). The whole view
   is the machine: the walnut hood is the screen, the window its one opening,
   the crank beside it with the porthole on the works under it, the PAT. 1895
   stamp under the window's corner. Shown only by responsive.css's
   phone-sideways query while html.scope-on; the deep view, opened from the
   stamp, is laid out for the sideways screen.
   r8p395 — the reel is a film of printed cards (docs/2026-10-26-mutoscope-
   film.md): cream stock in both skins (a print is paper, seen in
   the lamp), the picture with a paper margin, a hairline edge, its own tone
   and a speck or two, seeded by the card's number in src/mutoscope.js.
   Hood colours: the rails' walnut on paper (#2a1608), the blueprint's ground
   in the dark skin (#0a121b); line-work in the hood's brass (--gold3 / --gold).
   ═══════════════════════════════════════════════════════════════════════ */
#mutoscope{
  --mu-hood:#2a1608; --mu-line:#c8902c; --mu-ink:#f0e2be;
  --mu-leaf:#f4ecd4; --mu-leaf-ink:#1a0c04; --mu-cap:#7a4a12; --mu-rule:rgba(26,12,4,0.22);
  --mu-lamp:rgba(0,0,0,0.26);
  --mu-brass-a:#e8c573; --mu-brass-b:#9a6420; --mu-brass-c:#6a4010;
  display:none; position:fixed; inset:0; z-index:9000;
  background:var(--mu-hood); color:var(--mu-ink);
  font-family:'Space Mono',monospace;
  -webkit-user-select:none; user-select:none; touch-action:none; overflow:hidden;
}
html[data-skin="blueprint"] #mutoscope{
  --mu-hood:#0a121b; --mu-line:#e8c76a; --mu-ink:#ece3cf;
  --mu-leaf:#e8dfc4; --mu-leaf-ink:#1a0c04; --mu-cap:#7a4a12; --mu-rule:rgba(26,12,4,0.26);
  --mu-lamp:rgba(0,0,0,0.38);
}
#mutoscope *{ box-sizing:border-box; }

/* ── the rim: a casting. The outer line 2px, a flat bezel tone to the inner line 5px in, six slotted bolt heads on
   the band; a section line 8px inside the screen edge so the hood reads as a cabinet, not a page. ── */
#mu-rim{ position:absolute; inset:0; pointer-events:none; }
#mu-rim path{ fill:none; stroke:var(--mu-line); vector-effect:non-scaling-stroke; }
#mu-rim .mu-shell{ stroke-width:0.8; opacity:0.35; }
#mu-rim .mu-bezel{ fill:var(--mu-line); fill-opacity:0.12; fill-rule:evenodd; stroke:none; }
#mu-rim .mu-rim1{ stroke-width:2; opacity:0.95; }
#mu-rim .mu-rim2{ stroke-width:0.7; opacity:0.55; }
.mu-bolt{ fill:var(--mu-hood); stroke:var(--mu-line); stroke-width:1; }
.mu-bolt-slot{ stroke:var(--mu-line); stroke-width:0.6; }

/* ── the window: behind the card in view, the next card's stock a shade darker (deeper in the lamp's shadow) ── */
#mu-win{ position:absolute; overflow:hidden; border-radius:14px; background:color-mix(in srgb, var(--mu-leaf) 72%, #000); perspective:720px; perspective-origin:50% 100%; }
/* the lamp: the card is lit from the middle, the corners fall off */
#mu-win::before{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:radial-gradient(ellipse 62% 60% at 50% 46%, transparent 48%, var(--mu-lamp) 100%); }
/* the dip: 6% for 40 ms as a card passes the lamp */
#mu-win::after{ content:""; position:absolute; inset:0; z-index:6; pointer-events:none; background:#000; opacity:0; transition:opacity 40ms linear; }
#mu-win.dip::after{ opacity:0.06; }
/* the pin that holds each card's top (US 549,309: "a transverse pin engages the upper forward end of each card") */
#mu-pin{ position:absolute; left:0; right:0; top:0; height:7px; z-index:7; background:linear-gradient(180deg, var(--mu-brass-a) 0%, var(--mu-brass-b) 70%, var(--mu-brass-c) 100%); box-shadow:0 1px 2px rgba(0,0,0,0.45); }
#mu-pin::after{ content:""; position:absolute; left:0; right:0; top:7px; height:5px; background:linear-gradient(180deg, rgba(0,0,0,0.35), transparent); }

/* ── the cards: hinged at the spool below the window, held at the top by the pin ── */
.mu-leaf{ position:absolute; inset:0; display:none; overflow:hidden; background:var(--mu-leaf); color:var(--mu-leaf-ink); transform-origin:50% 100%; backface-visibility:hidden; pointer-events:none; }
.mu-leaf.cur{ display:block; z-index:3; }
.mu-leaf.under{ display:block; z-index:2; transform:none !important; }
.mu-leaf.over{ display:block; z-index:4; }
/* the card's number: down the right margin beside the print, as a film's edge numbers run (the top margin is the
   pin's — the card in view bows toward the lens, which lifts its top edge ~9px up under the pin, measured — and the
   print keeps its height whatever the phone's text size) */
.mu-no{ position:absolute; right:12px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl;
  font-size:9px; line-height:1; letter-spacing:1.6px; color:var(--mu-cap); opacity:0.8; }
.mu-leaf a{ pointer-events:auto; }
/* the print: the film's frame on the stock, a hairline edge with its paper border a shade off square (--mu-edge, the
   card's own), the card's own tone, a speck or two */
.mu-print{ position:absolute; left:var(--mu-px, 40px); top:var(--mu-py, 16px); width:var(--mu-pw, 400px); height:var(--mu-ph, 200px);
  background-repeat:no-repeat; background-size:var(--mu-sheet, 100% 100%); background-color:color-mix(in srgb, var(--mu-leaf) 88%, #000);
  box-shadow:0 0 0 1px var(--mu-rule), var(--mu-edge, 0 0 0 2px rgba(255,255,255,0.4)); }
.mu-print::after{ content:""; position:absolute; inset:0; background:var(--mu-tone, transparent); pointer-events:none; }
.mu-print.mu-specks::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at var(--mu-s1, 20% 30%), rgba(40,20,5,0.26) 0 0.6px, transparent 1.1px),
             radial-gradient(circle at var(--mu-s2, 70% 60%), rgba(40,20,5,0.2) 0 0.5px, transparent 1px),
             radial-gradient(circle at var(--mu-s3, 45% 80%), rgba(255,255,255,0.5) 0 0.5px, transparent 1px); }
/* the film still arriving: the stock, no picture */
#mutoscope.loading .mu-print{ background-image:none !important; }

/* the last card: the words */
.mu-body{ position:absolute; left:0; right:0; top:var(--mu-top, 16px); bottom:var(--mu-bot, 16px); display:flex; align-items:center; justify-content:center; }
.mu-last{ text-align:center; font-family:'Playfair Display',serif; padding:0 28px; max-width:520px; }
.mu-last-l1{ font-style:italic; font-size:21px; line-height:1.3; color:var(--mu-leaf-ink); }
.mu-last-l2{ margin-top:18px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2.4px; text-transform:uppercase; }
.mu-send{ color:var(--mu-cap); text-decoration:none; border-bottom:1px solid var(--mu-cap); padding-bottom:1px; }

/* ── the crank and the porthole: CAST BRASS, the roll's own material (styles.css .pps-roller::after: the seven-stop
   brass gradient along a cylinder, a highlight, a drop shadow). The stops are classes, so the blueprint skin's brass is
   the roll's blueprint brass. Straight-on, like the hood and the window (we look at the end of the arbor). ── */
#mutoscope .mu-b0{ stop-color:#46280b; } #mutoscope .mu-b1{ stop-color:#7a4e18; } #mutoscope .mu-b2{ stop-color:#b9842f; }
#mutoscope .mu-b3{ stop-color:#e8c76a; } #mutoscope .mu-b4{ stop-color:#c89040; } #mutoscope .mu-b6{ stop-color:#2e1a06; }
#mutoscope .mu-bh{ stop-color:#fff0c0; }
html[data-skin="blueprint"] #mutoscope .mu-b0{ stop-color:#2a1a08; } html[data-skin="blueprint"] #mutoscope .mu-b1{ stop-color:#6a4a10; }
html[data-skin="blueprint"] #mutoscope .mu-b2{ stop-color:#caa84e; } html[data-skin="blueprint"] #mutoscope .mu-b3{ stop-color:#f0d27a; }
html[data-skin="blueprint"] #mutoscope .mu-b4{ stop-color:#d4a94c; } html[data-skin="blueprint"] #mutoscope .mu-b6{ stop-color:#1a1004; }
html[data-skin="blueprint"] #mutoscope .mu-bh{ stop-color:#fff6d0; }
#mu-crank{ position:absolute; touch-action:none; }
#mu-crank svg, #mu-works svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
/* the mounting plate: a casting with a lit upper-left edge */
#mu-crank .mu-plate{ stroke:#2e1a06; stroke-width:0.6; stroke-opacity:0.8; }
#mu-crank .mu-plate-lit{ fill:none; stroke:#fff0c0; stroke-width:0.7; stroke-opacity:0.35; }
/* screws: turned heads, the slot dark with its lit lower edge */
.mu-screw{ stroke:#2e1a06; stroke-width:0.5; stroke-opacity:0.9; }
.mu-slot{ stroke:#2e1a06; stroke-width:0.8; stroke-linecap:round; stroke-opacity:0.95; }
.mu-slot-lit{ stroke:#fff0c0; stroke-width:0.4; stroke-linecap:round; stroke-opacity:0.6; }
/* the boss: a turned collar, two grooves */
#mu-crank .mu-boss{ stroke:#2e1a06; stroke-width:0.6; stroke-opacity:0.85; }
#mu-crank .mu-groove{ fill:none; stroke:#2e1a06; stroke-width:0.55; stroke-opacity:0.55; }
/* the arm: a round bar (the gradient runs across it); the knob end-on with a knurled edge and the pin that holds it */
#mu-crank .mu-arm{ stroke:#2e1a06; stroke-width:0.5; stroke-opacity:0.8; }
#mu-crank .mu-knob{ stroke:#2e1a06; stroke-width:0.6; stroke-opacity:0.9; }
#mu-crank .mu-knurl{ fill:none; stroke:#2e1a06; stroke-width:1.1; stroke-dasharray:0.9 0.9; stroke-opacity:0.5; }
#mu-crank .mu-grip{ stroke:#2e1a06; stroke-width:0.5; stroke-opacity:0.9; }
#mu-crank .mu-arbor{ stroke:#fff0c0; stroke-width:0.4; stroke-opacity:0.5; }
#mu-arm{ transform-box:view-box; transform-origin:48px 48px; }

/* ── the porthole on the works: a brass bezel with four screws round a dark cavity; inside, the crank's arbor comes in
   from the right with its worm, the worm turns the wheel on the reel's spindle, the reel's cards pass the pin — all
   moved by θ. The reel: one card edge in four is drawn (round(N/4) lines at four cards' pitch), the first card marked,
   turning at its true rate — one revolution over the whole film. ── */
#mu-works{ position:absolute; }
#mutoscope .mu-cav0{ stop-color:color-mix(in srgb, var(--mu-hood) 78%, #000); } #mutoscope .mu-cav1{ stop-color:#000; }
#mu-works .mu-works-rim{ stroke-width:4; filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.55)); }
#mu-works .mu-works-lip{ fill:none; stroke:#2e1a06; stroke-width:0.8; stroke-opacity:0.9; }
#mu-works .mu-shaft{ stroke:#2e1a06; stroke-width:0.4; stroke-opacity:0.7; }
#mu-works .mu-worm{ stroke:#2e1a06; stroke-width:0.6; stroke-opacity:0.8; }
#mu-works .mu-threads line{ stroke:#2e1a06; stroke-width:1; opacity:0.6; }
#mu-works .mu-teeth line{ stroke:#b9842f; stroke-width:1.5; stroke-linecap:round; }
html[data-skin="blueprint"] #mu-works .mu-teeth line{ stroke:#caa84e; }
#mu-works .mu-wheel{ stroke:#2e1a06; stroke-width:0.7; stroke-opacity:0.85; }
#mu-works .mu-reel{ fill:#d9cfae; stroke:#5a3a0e; stroke-width:0.6; }
html[data-skin="blueprint"] #mu-works .mu-reel{ fill:#cfc4a4; }
#mu-works .mu-edges line{ stroke:#3a2410; stroke-width:0.3; opacity:0.55; }
#mu-works .mu-first{ stroke:#9a2a1a; stroke-width:1.1; stroke-linecap:round; }
#mu-works .mu-hub{ stroke:#2e1a06; stroke-width:0.5; }
#mu-works .mu-pin-card{ fill:none; stroke:#f4ecd4; stroke-width:1.4; stroke-linecap:round; }
#mu-works .mu-pin-dot{ stroke:#2e1a06; stroke-width:0.5; }

/* ── the stamp: the house .pat-stamp, 8px under the window's bottom-left corner; the only word on the hood ── */
#mu-stamp{ position:absolute; display:flex; line-height:1; }
#mu-stamp .pat-stamp{ margin:0; color:var(--mu-line); }
#mu-stamp .pat-stamp .pat-dot{ background:var(--mu-line); }

@media (prefers-reduced-motion: reduce){
  #mu-win::after{ transition:none; }
  .mu-leaf{ transition:none !important; }
}

/* ── PAT. 1895 on a sideways phone: the house deep view (moved to the body while the machine shows, since #app is
   hidden) fills the screen, the drawing beside the words. ── */
html.scope-patent .deep-view{ padding:10px; z-index:9500; }
html.scope-patent .deep-view-shell{
  max-width:none; max-height:none; width:100%; height:100%; padding:10px 16px 12px; overflow:hidden;
  display:grid; grid-template-columns:46% minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; column-gap:16px; row-gap:6px;
}
html.scope-patent .dv-back{ grid-column:1; grid-row:1; justify-self:start; align-self:center; margin:0; padding:5px 10px; }
html.scope-patent .dv-head{ grid-column:2; grid-row:1; text-align:left; margin:0; }
html.scope-patent .dv-title{ font-size:20px; letter-spacing:0; text-transform:none; line-height:1.1; }
html.scope-patent .dv-sub{ margin-top:3px; font-size:9px; letter-spacing:1.6px; }
html.scope-patent .dv-mechanism{ grid-column:1; grid-row:2 / 4; margin:0; min-height:0; border:1px solid var(--gold2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
html.scope-patent .dv-mechanism svg{ max-height:100%; height:100%; width:100%; }
html.scope-patent .dv-body{ grid-column:2; grid-row:2; min-height:0; overflow-y:auto; max-width:none; margin:0; padding-right:6px; text-align:left; font-size:13px; line-height:1.45; overscroll-behavior:contain; }
html.scope-patent .dv-patents{ grid-column:2; grid-row:3; margin:0; text-align:left; font-size:9px; }
html.scope-patent .dv-listen, html.scope-patent .dv-controls{ display:none; }