/* clerk.css — the welcome advert ("the patent clerk draws it for you").
   One line weight, one spot colour (brass), things are DRAWN not faded,
   depth by opacity. Everything is scoped to body.clk-* classes that
   src/clerk.js adds while the advert runs and removes when it ends. */

/* ── the page: a sheet long enough to show the whole mess ───────────── */
body.clk-on .wc-paste-field{ min-height:306px; overflow:hidden; }
body.clk-on .wc-paste-caption{ opacity:.8; }
/* the advert owns the cursor: nothing on the page reacts to a parked mouse */
body.clk-on .welcome-card{ pointer-events:none; }

/* A line-for-line copy of the pasted sheet sits over the textarea so each
   line can be struck on its own. Metrics match .wc-paste-field exactly. */
.clk-mirrored .wc-paste-field{ color:transparent; caret-color:transparent; }
.clk-mirror{
  position:absolute; left:0; right:0; top:0; z-index:3;
  padding:19px 19px 17px; box-sizing:border-box;
  font-family:'Space Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;
  font-size:15px; line-height:2.0; letter-spacing:0.4px;
  color:var(--text,#1a0c04); white-space:pre; pointer-events:none;
}
html[data-skin="blueprint"] .clk-mirror{ color:#e6eef3; }
.clk-line{ height:30px; transition:opacity .7s ease; }
.clk-ink{ position:relative; display:inline-block; }
/* the tool's strike: every non-chord line ruled out, top to bottom, fast */
.clk-strike{
  position:absolute; left:-2px; top:50%; height:1.2px; width:0;
  background:var(--gold3,#c8902c);
}
.clk-sift .clk-strike{ width:calc(100% + 6px); transition:width .3s cubic-bezier(.4,0,.2,1); transition-delay:calc(var(--i,0) * 70ms); }
.clk-sift .clk-junk{ opacity:.2; transition:opacity .35s ease; transition-delay:calc(var(--i,0) * 70ms + 260ms); }
/* what survives is the song */
.clk-sift .clk-chord{ color:var(--gold2,#6a4010); font-weight:700; transition:color .3s ease .35s; }

/* a control pressed by the pencil */
.clk-press{ transform:translateY(1.5px); filter:brightness(.9); }

/* ── the drawing ────────────────────────────────────────────────────── */
/* Before the pen starts: a clean sheet. */
body.clk-pre #pianola-inline-host,
body.clk-pre #plate-prog-strip{ opacity:0; }

/* While it draws, everything that isn't the drawing recedes — depth by
   opacity, no scrim. */
body.clk-run .app-header,
body.clk-run .plate-sidebar,
body.clk-run #pedal-strip,
body.clk-run #tools-toggle{ opacity:.28; transition:opacity .9s ease; }

body.clk-draw .pia-card{ opacity:0; transition:opacity .3s ease; }
body.clk-draw .pia-card.clk-card-on{ opacity:1; }
/* the card's lettering (name, caption) waits for the drawing to finish */
body.clk-draw .pia-card > *:not(:has(svg.pc-mini)):not(svg){ opacity:0; transition:opacity .5s ease; }
body.clk-draw .pia-card.clk-card-done > *:not(:has(svg.pc-mini)):not(svg){ opacity:1; }
/* the shared control + chip strip come back only once every card is drawn */
body.clk-draw .pia-grid > *:not(.pia-row),
body.clk-draw #plate-prog-strip{ opacity:0; transition:opacity .8s ease; }
body.clk-draw.clk-drawn .pia-grid > *:not(.pia-row),
body.clk-draw.clk-drawn #plate-prog-strip{ opacity:1; }

/* ── the hand ──────────────────────────────────────────────────────────
   A draftsman's hand in the app's own ink: one line weight, round caps,
   hatching for cloth instead of shading. Skin and cuff are filled with
   paper so the hand sits OVER the page. The pencil is the one brass thing. */
#clk-hand{
  position:fixed; left:0; top:0; z-index:4000; pointer-events:none;
  width:0; height:0; will-change:transform;
}
#clk-hand svg{
  position:absolute; left:-40px; top:-40px; overflow:visible; max-width:none;
  transform-origin:40px 40px;
  transform:scale(var(--hs,1)) rotate(-3deg) translate(1px,-4px);   /* at rest the pencil hovers just off the paper; --hs: life size beside a drawn object (On a tablet) */
  transition:transform .12s ease-out;
}
#clk-hand.clk-down svg{ transform:scale(var(--hs,1)); }
/* A pencil drawing, not an inked cartoon: thin graphite contours, the form
   carried by hatching, and the line pressed harder only where it turns under. */
.clk-h-skin{ fill:#fbf3df; stroke:#2a1c12; stroke-width:.75; stroke-linejoin:round; stroke-linecap:round; }
.clk-h-fill{ fill:#fbf3df; stroke:none; }
.clk-h-edge{ fill:none; stroke:#2a1c12; stroke-width:.75; stroke-linecap:round; stroke-linejoin:round; }
.clk-h-accent{ fill:none; stroke:#2a1c12; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.clk-h-line{ fill:none; stroke:#2a1c12; stroke-width:.7; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.clk-h-shade{ fill:none; stroke:#2a1c12; stroke-width:.5; stroke-linecap:round; opacity:.78; }
.clk-h-shade-lt{ opacity:.45; }
.clk-h-cast{ fill:none; stroke:#2a1c12; stroke-width:.55; stroke-linecap:round; opacity:.4; }
/* cuff and sleeve: the same pencil, in cloth — no ruled outline */
.clk-h-cuff{ fill:#fbf3df; stroke:#2a1c12; stroke-width:.75; stroke-linejoin:round; }
.clk-h-sleeve{ fill:none; stroke:#2a1c12; stroke-width:.7; stroke-linecap:round; opacity:.7; }
.clk-h-cloth{ fill:none; stroke:#2a1c12; stroke-width:.45; stroke-linecap:round; opacity:.3; }
.clk-h-btn{ fill:#fbf3df; stroke:#2a1c12; stroke-width:.8; }
.clk-h-pen{ fill:#d9a441; stroke:#6a4010; stroke-width:1.1; stroke-linejoin:round; }
.clk-h-knurl{ fill:none; stroke:#6a4010; stroke-width:.8; }
.clk-h-lead{ fill:none; stroke:#1a0c04; stroke-width:1.6; stroke-linecap:round; }

/* in use now: the transport comes forward while it plays */
body.clk-run.clk-playing #pedal-strip,
body.clk-run.clk-playing .app-header{ opacity:1; }

/* how to leave it: a quiet close mark, top right where close marks live —
   the same circled x the catalog uses. Present, never competing with the
   drawing. (Any click or key also stops the demonstration.) */
#clk-note{
  position:fixed; right:80px; top:132px; z-index:4100; cursor:pointer;
  display:flex; align-items:center; gap:8px; padding:6px;
  background:none; border:0; color:#3a1c08; opacity:.72;
  font-family:'Space Mono',monospace; text-transform:uppercase;
  transition:opacity .15s;
}
#clk-note:hover{ opacity:1; }
.clk-note-x{
  width:20px; height:20px; border:1px solid currentColor; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; line-height:1;
}
.clk-note-l{ font-size:9px; letter-spacing:1.8px; }

/* the opening line, set on the blank page itself */
.clk-title{
  position:absolute; left:0; right:0; top:0; height:306px; z-index:4;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 44px; box-sizing:border-box; pointer-events:none;
  font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:21px; line-height:1.45;
  color:var(--gold2,#6a4010);
  opacity:0; transform:translateY(4px); transition:opacity .45s ease, transform .45s ease;
}
.clk-title.clk-title-in{ opacity:1; transform:none; }
html[data-skin="blueprint"] .clk-title{ color:#f0d27a; }
/* a drawer the pencil is using comes forward */
body.clk-run.clk-tools .plate-sidebar{ opacity:1; }

/* the way back to the demonstration: a small mark in the card's top-right
   corner. It plays by itself once, so this only needs to be findable. */
.welcome-card{ position:relative; }
.welcome-card .wc-watch{
  position:absolute; top:20px; right:24px; margin:0; padding:4px 2px;
  background:none; border:0; cursor:pointer;
  font-family:'Space Mono',monospace; font-size:9px; font-weight:400; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--gold2,#6a4010); opacity:.6; transition:opacity .15s;
}
.welcome-card .wc-watch:hover{ opacity:1; }
/* r8p335 — with the way-back mark in the corner, the link steps left of it */
.welcome-card:has(.wc-close:not([hidden])) .wc-watch{ right:64px; }
html[data-skin="blueprint"] .welcome-card .wc-watch{ color:#caa84e; }
body.clk-on .wc-watch{ display:none; }

/* ── blueprint ─────────────────────────────────────────────────────────
   The demonstration runs in the visitor's own skin. On the blueprint sheet
   the same drawing is made the way a blueprint is: pale line on the dark
   ground, the form filled with the sheet's own navy so it still sits OVER
   the page, and the shadow it throws drawn darker than the ground. */
html[data-skin="blueprint"] .clk-h-skin,
html[data-skin="blueprint"] .clk-h-cuff,
html[data-skin="blueprint"] .clk-h-btn{ fill:#1c3046; stroke:#d7e6ee; }
html[data-skin="blueprint"] .clk-h-fill{ fill:#1c3046; }
html[data-skin="blueprint"] .clk-h-edge,
html[data-skin="blueprint"] .clk-h-accent,
html[data-skin="blueprint"] .clk-h-line,
html[data-skin="blueprint"] .clk-h-shade,
html[data-skin="blueprint"] .clk-h-sleeve,
html[data-skin="blueprint"] .clk-h-cloth{ stroke:#d7e6ee; }
html[data-skin="blueprint"] .clk-h-shade{ opacity:.6; }
html[data-skin="blueprint"] .clk-h-shade-lt{ opacity:.34; }
html[data-skin="blueprint"] .clk-h-cast{ stroke:#04090f; opacity:.6; }
html[data-skin="blueprint"] .clk-h-pen{ fill:#e8c76a; stroke:#8a6a22; }
html[data-skin="blueprint"] .clk-h-knurl{ stroke:#8a6a22; }
html[data-skin="blueprint"] .clk-h-lead{ stroke:#e6eef3; }
html[data-skin="blueprint"] .clk-strike{ background:#e8c76a; }
html[data-skin="blueprint"] .clk-sift .clk-chord{ color:#f0d27a; }
html[data-skin="blueprint"] #clk-note{ color:#d7e6ee; }


/* ── DEMONSTRATIONS (r8p216): the key to a drawing ─────────────────────
   Patent-drawing callouts: a hairline leader from the mark out to the
   margin, a small dot at the mark, the label in the app's italic hand.
   While one runs, everything except the card being described steps back. */
#clk-legend{ position:fixed; inset:0; z-index:3900; pointer-events:none; }
#clk-legend .clk-leg-svg{ position:absolute; inset:0; overflow:visible; }
.clk-leg-line{ fill:none; stroke:#5a3410; stroke-width:1; stroke-linecap:round; }
.clk-leg-dot{ fill:#5a3410; }
.clk-leg-label{
  position:absolute; transform:translateY(-50%);
  font-family:'Playfair Display',serif; font-style:italic; font-size:15px; line-height:1.3;
  color:#2a1c12; opacity:0; transition:opacity .28s ease;
  padding:4px 8px; background:var(--clk-leg-bg, rgba(245,238,214,.94)); border-radius:1px;
}
.clk-leg-label.is-on{ opacity:1; }
.clk-leg-label b{ font-style:normal; font-family:'Space Mono',monospace; font-size:13px; font-weight:700; }
.clk-leg-L{ text-align:right; }
.clk-leg-R{ text-align:left; }
body.clk-legend-on #pianola-inline-host .pia-card:not(.clk-leg-card){ opacity:.16; transition:opacity .35s ease; }
/* r8p234 — "Other shapes for the same chord": the card in hand and the controls
   under it stay lit; the other cards and the chord strip step back. */
body.clk-shapes-on #pianola-inline-host .pia-card:not(.active){ opacity:.16; transition:opacity .35s ease; }
body.clk-shapes-on #plate-prog-strip-wrap{ opacity:.22; transition:opacity .35s ease; }
body.clk-legend-on .pia-carriage,
body.clk-legend-on .pia-cable,
body.clk-legend-on #plate-prog-strip-wrap{ opacity:.22; transition:opacity .35s ease; }
html[data-skin="blueprint"] .clk-leg-line{ stroke:#caa84e; }
html[data-skin="blueprint"] .clk-leg-dot{ fill:#caa84e; }
html[data-skin="blueprint"] .clk-leg-label{ color:#e8eef2; }

/* r8p228 — one line of words above the cards (the instruments demonstration).
   r8p237 — it is written on the page inside the frame, below the rule, with
   nothing behind it; the cards step down only as far as it needs (_say). */
#pianola-inline-host{ padding-top:var(--clk-say-room,0px); }
.clk-leg-say{
  position:absolute; transform:translate(-50%,-100%); max-width:560px; width:max-content; text-align:center;
  font-family:'Playfair Display',serif; font-style:italic; font-size:17px; line-height:1.3;
  color:#2a1c12; opacity:0; transition:opacity .3s ease;
}
.clk-leg-say.is-on{ opacity:1; }
/* beside the control the pencil is on, level with it (Other shapes) */
.clk-leg-say.clk-leg-say-side{ transform:translateY(-50%); }
.clk-leg-say b{ white-space:nowrap; font-style:normal; font-family:'Space Mono',monospace; font-size:14px; font-weight:700; letter-spacing:.5px; }
html[data-skin="blueprint"] .clk-leg-say{ color:#e8eef2; }

/* r8p237 — the demonstration's words for a screen reader: present, not drawn */
#clk-live{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── a video's link: the welcome card, holding that demonstration ─────
   r8p242. The same card as any first visit; the page in the roller carries
   the demonstration's name and BEGIN reads PLAY. */
.welcome-card-overlay.wc-demo .wc-paste-field{
  text-align:center; cursor:pointer; caret-color:transparent;
  font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:26px; line-height:1.3;
  letter-spacing:0; resize:none; overflow:hidden;
}
.welcome-card-overlay.wc-demo .wc-primary-cta:focus-visible{ outline:2px solid #9a6420; outline-offset:3px; }
html[data-skin="blueprint"] .welcome-card-overlay.wc-demo .wc-primary-cta:focus-visible{ outline-color:#e8c76a; }
.welcome-card-overlay.wc-demo .wc-watch{ display:none; }
.welcome-card .wc-own{
  display:block; margin:12px auto 0; padding:6px 8px; background:none; border:0; cursor:pointer;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1.6px; text-transform:uppercase;
  color:#6a4010; opacity:.85;
}
.welcome-card .wc-own:hover{ opacity:1; text-decoration:underline; }
.welcome-card .wc-own:focus-visible{ outline:2px solid #2a1c12; outline-offset:2px; }
html[data-skin="blueprint"] .welcome-card .wc-own{ color:#caa84e; }
html[data-skin="blueprint"] .welcome-card .wc-own:focus-visible{ outline-color:#e8eef2; }
body.clk-on .wc-own{ display:none; }

/* ── r8p249 · every demonstration's words sit on a paper label (Scott: "neat,
   with proper padding"; labels everywhere, 2026-10-14). The sharing video: the link
   leaving as a postmarked envelope, and the person who opens it drawn as a
   different hand: no pencil, a bare fingertip, a knit sleeve. */
.clk-leg-say{
  padding:9px 18px 10px; background:#f4ecd4; color:#2a1c12;
  border:1px solid rgba(122,74,18,.42); border-radius:2px;
  box-shadow:0 0 0 3px #f4ecd4, 0 0 0 4px rgba(122,74,18,.22), 0 6px 18px rgba(42,28,18,.12);
}
html[data-skin="blueprint"] .clk-leg-say{ background:#1c3046; color:#e8eef2; border-color:rgba(215,230,238,.45); box-shadow:0 0 0 3px #1c3046, 0 0 0 4px rgba(215,230,238,.22); }

/* the other person's hand: the fingertip is the point, the pencil is gone */
#clk-hand.clk-hand-guest svg{ left:-60px; top:-52px; transform-origin:60px 52px; }   /* turns and scales about the fingertip */
#clk-hand.clk-hand-guest .clk-h-pen,
#clk-hand.clk-hand-guest .clk-h-knurl,
#clk-hand.clk-hand-guest .clk-h-lead{ display:none; }
#clk-hand.clk-hand-guest .clk-h-armfill{ fill:#3e5876; }
#clk-hand.clk-hand-guest .clk-h-cloth{ stroke:#c9d6e2; opacity:.55; }
#clk-hand.clk-hand-guest .clk-h-sleeve{ stroke:#1d2c3d; opacity:.9; }
#clk-hand.clk-hand-guest .clk-h-cuff{ fill:#2f4560; stroke:#1d2c3d; }
#clk-hand.clk-hand-guest .clk-h-btn{ display:none; }

/* the envelope */
#clk-env{
  position:fixed; z-index:3990; width:250px; height:150px; pointer-events:none;
  transition:transform .9s cubic-bezier(.55,0,.35,1), opacity .5s ease;
}
#clk-env svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 8px 16px rgba(42,28,18,.22)); }
.clk-env-paper{ fill:#f4ecd4; stroke:#7a4a12; stroke-width:1.2; }
.clk-env-fold{ fill:none; stroke:#7a4a12; stroke-width:1; opacity:.55; }
.clk-env-flap{ fill:#efe3c4; stroke:#7a4a12; stroke-width:1.2; transform-origin:125px 0; transition:transform .45s ease; }
#clk-env.is-open .clk-env-flap{ transform:scaleY(-1); }
.clk-env-mark{ fill:none; stroke:#9a6420; stroke-width:1.1; }
.clk-env-txt{ font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:1.4px; fill:#7a4a12; }
.clk-env-to{ font-family:'Playfair Display',serif; font-style:italic; font-size:15px; fill:#2a1c12; }

/* the recorder holds the recipient's slip back until its envelope arrives */
html.clk-hold-slip #receipt-slip{ opacity:0 !important; }

/* r8p250 — every demonstration is introduced by name: a paper card over the
   softly dimmed app, in the type of the YouTube covers. */
#clk-intro{
  position:fixed; inset:0; z-index:4200; display:flex; align-items:center; justify-content:center;
  background:rgba(42,28,18,.18); opacity:0; transition:opacity .45s ease; pointer-events:none;
}
#clk-intro.is-on{ opacity:1; }
.clk-intro-card{
  padding:40px 72px 38px; text-align:center; background:#f4ecd4; color:#3a2208;
  border:1px solid rgba(122,74,18,.45); border-radius:2px;
  box-shadow:0 0 0 6px #f4ecd4, 0 0 0 7px rgba(122,74,18,.25), 0 18px 48px rgba(42,28,18,.22);
  transform:translateY(6px); transition:transform .45s ease;
}
#clk-intro.is-on .clk-intro-card{ transform:none; }
.clk-intro-k{ font:400 13px/1.2 'Space Mono',monospace; letter-spacing:4px; text-transform:uppercase; color:#7a4a12; }
.clk-intro-t{ margin-top:18px; font:700 46px/1.1 'Playfair Display',serif; letter-spacing:.4px; }
.clk-intro-r{ margin:24px auto 0; width:180px; border-top:1.5px solid rgba(90,52,16,.45); }
.clk-intro-u{ margin-top:18px; font:700 22px/1.2 'Playfair Display',serif; letter-spacing:2px; color:#7a4a12; }
html[data-skin="blueprint"] #clk-intro{ background:rgba(4,9,15,.35); }
/* r8p380 — the title card in the visitor's skin too (Scott: "in dark the demo title page … has the paper
   look"): the same blueprint label as the demonstration's words (.clk-leg-say), gold for the small lines. */
html[data-skin="blueprint"] .clk-intro-card{ background:#1c3046; color:#e8eef2; border-color:rgba(215,230,238,.45);
  box-shadow:0 0 0 6px #1c3046, 0 0 0 7px rgba(215,230,238,.22), 0 18px 48px rgba(0,0,0,.45); }
html[data-skin="blueprint"] .clk-intro-k, html[data-skin="blueprint"] .clk-intro-u{ color:#e8c76a; }
html[data-skin="blueprint"] .clk-intro-r{ border-top-color:rgba(215,230,238,.4); }
@media (prefers-reduced-motion:reduce){ #clk-intro, .clk-intro-card{ transition-duration:0ms; } }
/* r8p337 — IN YOUR POCKET: the phone chord book in a phone outline, the words beside it, the code at the end */
#clk-pocket{ position:fixed; inset:0; z-index:4200; display:flex; align-items:center; justify-content:center;
  background:rgba(232,226,198,.96); opacity:0; transition:opacity .45s ease; pointer-events:none; }
#clk-pocket.is-on{ opacity:1; }
html[data-skin="blueprint"] #clk-pocket{ background:rgba(20,34,49,.96); }
.clk-pk-stage{ display:flex; align-items:center; gap:56px; }
.clk-pk-fig{ display:flex; flex-direction:column; align-items:center; gap:10px; }
/* the scene: a waistcoat (viewBox 760x900) with the phone in a slot that ends inside the pocket */
.clk-pk-scene{ position:relative; height:min(80vh,760px); aspect-ratio:760/900; overflow:hidden; background:#f4ecd4;
  border:1.5px solid #3a2208; box-shadow:inset 0 0 0 6px #f4ecd4, inset 0 0 0 7px rgba(58,34,8,.5), 0 18px 48px rgba(42,28,18,.18); }
.clk-pk-coat{ position:absolute; inset:0; width:100%; height:100%; }
.clk-pk-slot{ position:absolute; left:22.37%; top:3.33%; width:52.63%; height:74.22%; overflow:hidden; }
.clk-pk-welt{ position:absolute; left:18.42%; top:76.67%; width:60.53%; height:2.89%; background:#f4ecd4;
  border:1.8px solid #3a2208; border-radius:2px; box-shadow:inset 0 0 0 3px #f4ecd4, inset 0 0 0 4px rgba(58,34,8,.45); }
.clk-pk-scene .clk-pk-phone{ width:100%; height:98.8%; aspect-ratio:auto; box-sizing:border-box;
  transform:translateY(104%); transition:transform 1s cubic-bezier(.2,.8,.2,1); }
#clk-pocket.is-lifted .clk-pk-phone{ transform:none; }
/* the fob swings a little as the phone comes out, then settles (from its T-bar, in viewBox units) */
.clk-pk-fob{ transform-box:view-box; transform-origin:652px 472px; }
#clk-pocket.is-lifted .clk-pk-fob{ animation:clk-pk-swing 1.8s cubic-bezier(.3,.6,.4,1) .15s both; }
@keyframes clk-pk-swing{ 0%{transform:rotate(0)} 22%{transform:rotate(-9deg)} 46%{transform:rotate(6deg)} 68%{transform:rotate(-3deg)} 86%{transform:rotate(1.2deg)} 100%{transform:rotate(0)} }
/* the phone in the house patent register: an engraved double line on paper, not a glossy device (Scott) */
.clk-pk-phone{ height:min(66vh,620px); aspect-ratio:390/664; padding:14px 11px 22px; border-radius:38px; background:#f4ecd4;
  border:1.5px solid #3a2208; box-shadow:inset 0 0 0 4px #f4ecd4, inset 0 0 0 5px rgba(58,34,8,.55), 0 18px 48px rgba(42,28,18,.22); position:relative; }
.clk-pk-phone::before{ content:""; position:absolute; top:6px; left:50%; width:44px; height:3px; margin-left:-22px; border-radius:2px; background:rgba(58,34,8,.55); }
.clk-pk-figcap{ font:400 12px/1.2 'Space Mono',monospace; letter-spacing:3px; text-transform:uppercase; color:#7a4a12; }
.clk-pk-video{ display:block; width:100%; height:100%; object-fit:cover; border-radius:26px; background:#c8cdb0; box-shadow:0 0 0 1px rgba(58,34,8,.6); }
.clk-pk-side{ width:300px; display:flex; flex-direction:column; gap:28px; }
.clk-pk-say{ padding:18px 22px; background:#f4ecd4; color:#3a2208; border:1px solid rgba(122,74,18,.45);
  box-shadow:0 0 0 5px #f4ecd4, 0 0 0 6px rgba(122,74,18,.22); font:700 26px/1.25 'Playfair Display',serif;
  opacity:0; transition:opacity .3s ease; }
.clk-pk-say.is-on{ opacity:1; }
.clk-pk-code{ padding:20px; text-align:center; background:#f4ecd4; border:1px solid rgba(122,74,18,.45);
  box-shadow:0 0 0 5px #f4ecd4, 0 0 0 6px rgba(122,74,18,.22); opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
#clk-pocket.is-code .clk-pk-code{ opacity:1; transform:none; }
.clk-pk-code img{ display:block; width:180px; height:180px; margin:0 auto; }
.clk-pk-cap{ margin-top:12px; font:400 13px/1.2 'Space Mono',monospace; letter-spacing:3px; text-transform:uppercase; color:#7a4a12; }
@media (prefers-reduced-motion:reduce){ #clk-pocket, .clk-pk-say, .clk-pk-code, .clk-pk-scene .clk-pk-phone{ transition-duration:0ms; } #clk-pocket.is-lifted .clk-pk-fob{ animation:none; } }
/* r8p348 — ON THE STAND: an iPad as a slate in a Victorian music stand, turning inside a brass ring.
   The stand is an SVG (viewBox 760×1000); the slate is laid out upright over it and turned by
   _demoStand (rotate(angle − 90)). Slate 290×426 at the ring's centre (380,330); screen inset 15. */
#clk-stand{ position:fixed; inset:0; z-index:3950; display:flex; align-items:center; justify-content:center;
  background:rgba(232,226,198,.96); opacity:0; transition:opacity .45s ease; pointer-events:none; }
#clk-stand.is-on{ opacity:1; }
/* the life-size hand lives inside the stand's layer so the caption, a paper label laid over the
   drawing, stays on top of the arm that crosses it */
#clk-stand #clk-hand{ z-index:1; }
#clk-stand .clk-pk-side{ position:relative; z-index:2; }
html[data-skin="blueprint"] #clk-stand{ background:rgba(20,34,49,.96); }
.clk-st-stage{ display:flex; align-items:center; gap:56px; }
.clk-st-fig{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.clk-st-scene{ position:relative; height:min(84vh,800px); aspect-ratio:760/1000; background:#f4ecd4;
  border:1.5px solid #3a2208; box-shadow:inset 0 0 0 6px #f4ecd4, inset 0 0 0 7px rgba(58,34,8,.5), 0 18px 48px rgba(42,28,18,.18); }
.clk-st-stand{ position:absolute; inset:0; width:100%; height:100%; }
.clk-st-slate{ position:absolute; left:30.92%; top:11.7%; width:38.16%; height:42.6%; transform-origin:50% 50%; transform:rotate(0deg);
  background:#ece2c6; border:2px solid #3a2208; border-radius:7.3% / 5%; box-sizing:border-box;
  box-shadow:inset 0 0 0 4px #ece2c6, inset 0 0 0 4.7px rgba(58,34,8,.35), 3px 5px 0 rgba(58,34,8,.08); }
.clk-st-screen{ position:absolute; left:5.17%; right:5.17%; top:3.52%; bottom:3.52%; overflow:hidden; border-radius:7px;
  background:#c8cdb0; box-shadow:0 0 0 1px rgba(58,34,8,.6); }
.clk-st-up, .clk-st-side{ position:absolute; display:block; object-fit:cover; transition:opacity .35s ease; }
.clk-st-up{ inset:0; width:100%; height:100%; }
/* the workbench recording is sideways: laid a quarter turn inside the upright screen */
.clk-st-side{ width:152.31%; height:65.66%; left:-26.15%; top:17.17%; transform:rotate(90deg); opacity:0; }
.clk-st-rollers{ position:absolute; left:50%; top:50%; width:206.9%; height:140.85%; transform:translate(-50%,-50%); overflow:visible; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ #clk-stand, .clk-st-up, .clk-st-side{ transition-duration:0ms; } }
/* a tall screen (the YouTube Short, a phone-shaped window): the stand on top, the line beneath */
@media (max-aspect-ratio: 4/5){
  #clk-stand .clk-st-stage{ flex-direction:column; gap:26px; }
  #clk-stand .clk-st-scene{ height:auto; width:min(88vw, 70vh * 0.76); }
  #clk-stand .clk-pk-side{ width:min(84vw, 560px); }
  #clk-stand .clk-pk-say{ text-align:center; font-size:30px; }
}

/* ── r8p381 — EVERY DEMONSTRATION IN THE VISITOR'S SKIN (Scott: "it should all be mode friendly").
   On the blueprint sheet the drawings are made as the hand already is: pale line (#d7e6ee) on the
   sheet's blues; brass stays brass. The pocket and stand drawings carry their paper colours as SVG
   attributes (src/clerk.js POCKET_COAT, _standSvg); CSS outranks an attribute, so each paper colour
   gets its blueprint twin here, keyed on the colour itself. */
html[data-skin="blueprint"] .clk-pk-coat [stroke="#3a2208"], html[data-skin="blueprint"] .clk-pk-coat [stroke="#5a3a12"], html[data-skin="blueprint"] .clk-pk-coat [stroke="#7a4e18"],
html[data-skin="blueprint"] .clk-st-stand [stroke="#3a2208"], html[data-skin="blueprint"] .clk-st-rollers [stroke="#3a2208"]{ stroke:#d7e6ee; }
html[data-skin="blueprint"] .clk-pk-coat [fill="#3a2208"], html[data-skin="blueprint"] .clk-st-stand [fill="#3a2208"], html[data-skin="blueprint"] .clk-st-rollers [fill="#3a2208"]{ fill:#d7e6ee; }
html[data-skin="blueprint"] .clk-pk-coat [fill="#ece2c6"], html[data-skin="blueprint"] .clk-pk-coat [fill="#f4ecd4"]{ fill:#1c3046; }
html[data-skin="blueprint"] .clk-pk-coat [fill="#e2d4ae"]{ fill:#243b53; }
html[data-skin="blueprint"] .clk-pk-coat [fill="#fbf6e6"]{ fill:#2b4560; }
html[data-skin="blueprint"] .clk-st-stand [stroke="#e2d4ae"]{ stroke:#2b4560; }
/* the frames, the slate and the phone in outline */
html[data-skin="blueprint"] .clk-pk-scene, html[data-skin="blueprint"] .clk-st-scene{ background:#1c3046; border-color:#d7e6ee;
  box-shadow:inset 0 0 0 6px #1c3046, inset 0 0 0 7px rgba(215,230,238,.45), 0 18px 48px rgba(0,0,0,.4); }
html[data-skin="blueprint"] .clk-pk-welt{ background:#1c3046; border-color:#d7e6ee; box-shadow:inset 0 0 0 3px #1c3046, inset 0 0 0 4px rgba(215,230,238,.4); }
html[data-skin="blueprint"] .clk-pk-phone{ background:#1c3046; border-color:#d7e6ee; box-shadow:inset 0 0 0 4px #1c3046, inset 0 0 0 5px rgba(215,230,238,.5), 0 18px 48px rgba(0,0,0,.4); }
html[data-skin="blueprint"] .clk-pk-phone::before{ background:rgba(215,230,238,.5); }
html[data-skin="blueprint"] .clk-pk-video, html[data-skin="blueprint"] .clk-st-screen{ background:#0d1a26; box-shadow:0 0 0 1px rgba(215,230,238,.55); }
html[data-skin="blueprint"] .clk-st-slate{ background:#243b53; border-color:#d7e6ee; box-shadow:inset 0 0 0 4px #243b53, inset 0 0 0 4.7px rgba(215,230,238,.35), 3px 5px 0 rgba(0,0,0,.25); }
/* the words beside them and the code at the end: the demonstration's blueprint label */
html[data-skin="blueprint"] .clk-pk-say, html[data-skin="blueprint"] .clk-pk-code{ background:#1c3046; color:#e8eef2; border-color:rgba(215,230,238,.45); box-shadow:0 0 0 5px #1c3046, 0 0 0 6px rgba(215,230,238,.22); }
html[data-skin="blueprint"] .clk-pk-figcap, html[data-skin="blueprint"] .clk-pk-cap{ color:#e8c76a; }
/* the code: the app's own two QR images, one per skin (index.html .sqr-img-paper / .sqr-img-blue) */
/* the sharing demonstration's envelope */
html[data-skin="blueprint"] #clk-env svg{ filter:drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
html[data-skin="blueprint"] .clk-env-paper{ fill:#1c3046; stroke:#d7e6ee; }
html[data-skin="blueprint"] .clk-env-fold{ stroke:#d7e6ee; }
html[data-skin="blueprint"] .clk-env-flap{ fill:#243b53; stroke:#d7e6ee; }
html[data-skin="blueprint"] .clk-env-mark{ stroke:#e8c76a; }
html[data-skin="blueprint"] .clk-env-txt{ fill:#e8c76a; }
html[data-skin="blueprint"] .clk-env-to{ fill:#e8eef2; }