/* Gearso — styles. Themes: body[data-theme=brass|silver|iron|crystal] */
:root{
  --l1:#f2b54f; --l2:#8fd8ff;
  --board:#1b2022; --board-hi:#283034;
  --chalk:#ecebe4; --chalk-2:rgba(236,235,228,.62); --chalk-3:rgba(236,235,228,.26);
  --slate:#2f4352; --slate-2:#3d5868;
  --brass:#caa14e; --brass-hi:#f3dc9b; --brass-lo:#6e4f18;
  --copper:#c0703f; --rust:#7b3a1c;
  --ok:#9fe0a8; --warn:#f2b54f; --bad:#ec6a55; --glow:#ffc766;
  --accent:var(--brass); --accent-hi:var(--brass-hi);
  --frame:12px;
  /* blueprint sheets: cyanotype paper, white ink, brass ink for repaired machines, red stamps, wax */
  --bp-paper:#17497c; --bp-paper-hi:#2463a0; --bp-paper-lo:#0c2c52;
  --bp-ink:rgba(228,241,255,.94); --bp-ink-2:rgba(214,232,255,.58); --bp-ink-3:rgba(214,232,255,.26);
  --bp-grid:rgba(200,225,255,.07); --bp-grid-major:rgba(200,225,255,.15); --bp-wash:rgba(200,225,255,.04);
  --bp-brass:#f3d58c; --bp-brass-glow:rgba(255,206,110,.55); --bp-brass-wash:rgba(243,213,140,.1);
  --bp-stamp:#ff6b52;
  --bp-vellum:rgba(214,226,236,.14); --bp-vellum-hi:rgba(236,244,250,.26); --bp-vellum-lo:rgba(170,190,210,.12);
  --bp-wax:#9c2a22; --bp-wax-hi:#e0644f; --bp-wax-lo:#4e100c;
  /* bevel gear: a brass cone, lit from the top left */
  --bevel-tooth:#f1d48c; --bevel-tooth-mid:#c99a45; --bevel-tooth-lo:#8a6420; --bevel-tooth-edge:#6b4a12;
  --bevel-cone:#6e4f18; --bevel-cone-lo:#2e1f05; --bevel-root:#3a2706;
  --rv-steel-lo:#3a434b; --rv-badge:#f1d48c;
  --bevel-light:rgba(255,246,214,.38); --bevel-dark:rgba(20,12,0,.5);
  --frame-grad:linear-gradient(135deg,#8a6424,#f0d48c 18%,#9b7330 35%,#5e4214 55%,#d8b25e 75%,#6e4f18);
}
body[data-theme="silver"]{--board:#1a1f24;--board-hi:#28313b;--accent:#c9d3da;--accent-hi:#f1f6f9;
  --frame-grad:linear-gradient(135deg,#6f7a82,#f4f8fb 18%,#9aa6ae 35%,#4c555c 55%,#dfe7ec 75%,#5c666d)}
body[data-theme="iron"]{--board:#1e1b19;--board-hi:#2e2925;--accent:#d08a55;--accent-hi:#f6c7a4;
  --frame-grad:linear-gradient(135deg,#3f3b38,#9a918a 18%,#57504b 35%,#2a2623 55%,#b0714a 75%,#3a302a)}
body[data-theme="crystal"]{--board:#141b24;--board-hi:#22304a;--accent:#9fe6f5;--accent-hi:#e1fbff;
  --frame-grad:linear-gradient(135deg,#3d6f80,#e1fbff 18%,#7fc4d6 35%,#27505e 55%,#bdefff 75%,#3a6674)}
body[data-theme="clock"]{--board:#1b1716;--board-hi:#2c2421;--accent:#e0b866;--accent-hi:#fbe7ad;
  --frame-grad:linear-gradient(135deg,#2a1c14,#e0b866 18%,#5a3a22 38%,#1e1410 55%,#f3dc9b 75%,#3a2616)}
body[data-theme="brine"]{--board:#11201f;--board-hi:#1c3432;--accent:#6fbfa2;--accent-hi:#c8f2e2;
  --frame-grad:linear-gradient(135deg,#6a3a1e,#e9a577 18%,#3f8c78 38%,#2a4a40 55%,#c9774a 75%,#4b2a16)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;height:100dvh;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;background:var(--board);color:var(--chalk);overflow:hidden;
  font-family:'Special Elite','Courier New',monospace;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;transition:background .8s}
body{--rivet:radial-gradient(circle at 35% 35%,#fff3c8,var(--accent) 45%,#3a2a10 100%)}
button{font:inherit;color:inherit}

/* ---------- chalkboard backdrop ---------- */
#backdrop{position:fixed;inset:0;pointer-events:none;transition:background .8s;
  background:
    radial-gradient(ellipse 60% 45% at 30% 30%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 70%, rgba(255,255,255,.04), transparent 70%),
    radial-gradient(ellipse 35% 25% at 60% 15%, rgba(255,255,255,.035), transparent 70%),
    radial-gradient(ellipse at center, var(--board-hi) 0%, var(--board) 70%, #0f1314 100%);}
#grain{position:fixed;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:screen;background-size:512px 512px}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:50;
  background:radial-gradient(ellipse 85% 75% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%),
             radial-gradient(ellipse 40% 30% at 50% 8%, rgba(255,200,120,.06), transparent 70%)}
#frame{position:fixed;inset:0;pointer-events:none;z-index:60;border:var(--frame) solid transparent;border-image:var(--frame-grad) 1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 50px rgba(0,0,0,.65)}
#frame i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--rivet);box-shadow:0 1px 2px #000}
#frame i:nth-child(1){top:-11px;left:-11px}#frame i:nth-child(2){top:-11px;right:-11px}
#frame i:nth-child(3){bottom:-11px;left:-11px}#frame i:nth-child(4){bottom:-11px;right:-11px}
#bg-deco{position:fixed;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);pointer-events:none;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .35s}
#bg-deco.fading{opacity:0}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
.shared-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- screens ---------- */
.screen{position:fixed;inset:var(--frame);display:flex;flex-direction:column;opacity:0;visibility:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  transform:scale(.94);transition:opacity .55s ease, transform .9s cubic-bezier(.7,0,.2,1), visibility 0s .9s}
.screen.active{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .15s, transform .9s cubic-bezier(.7,0,.2,1), visibility 0s}
.screen.zoomed{transform:scale(3.2);opacity:0;visibility:hidden;transition:opacity .5s ease .25s, transform .9s cubic-bezier(.7,0,.2,1), visibility 0s .9s}

/* ---------- buttons ---------- */
.btn{cursor:pointer;border:0;padding:.55em 1.1em;border-radius:7px;font-size:15px;letter-spacing:.04em;transition:transform .15s, box-shadow .15s, filter .15s}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:focus-visible,.task:focus-visible{outline:2px dashed var(--glow);outline-offset:3px}
.btn.brass{color:#2a1c06;
  background:
    radial-gradient(circle at 8px 8px,#fff3c8 0 1.5px,#6e4f18 2.5px,transparent 3.2px),
    radial-gradient(circle at calc(100% - 8px) 8px,#fff3c8 0 1.5px,#6e4f18 2.5px,transparent 3.2px),
    radial-gradient(circle at 8px calc(100% - 8px),#fff3c8 0 1.5px,#6e4f18 2.5px,transparent 3.2px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#fff3c8 0 1.5px,#6e4f18 2.5px,transparent 3.2px),
    linear-gradient(180deg,#f6de9c 0%,#d2a64f 22%,#a97d2c 60%,#7a5719 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.3), 0 4px 0 #4a3309, 0 8px 18px rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(255,240,200,.6)}
.btn.brass:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.big{font-size:20px;padding:.75em 1.8em}
.btn.ghost{background:rgba(255,255,255,.03);border:1.5px dashed var(--chalk-3);color:var(--chalk)}
.btn.ghost:hover{border-color:var(--chalk-2);background:rgba(255,255,255,.07)}
.btn.icon{width:44px;height:44px;padding:0;display:grid;place-items:center;font-size:18px;flex:none}
.btn.ghost.dark{border-color:rgba(42,28,6,.5);color:#2a1c06;background:rgba(255,255,255,.15)}
.btn.small{font-size:12px;padding:.45em .8em}

/* ---------- title ---------- */
#scr-title{align-items:center;justify-content:center;text-align:center}
#title-train{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;opacity:.95}
.title-card{position:relative;z-index:2;margin-top:-14vh;padding:0 16px}
.eyebrow{font-size:14px;letter-spacing:.4em;text-transform:uppercase;color:var(--brass-hi);opacity:.85}
h1.logo{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:clamp(64px,13vw,150px);margin:.05em 0 .1em;line-height:1;color:var(--chalk);text-shadow:0 0 1px #fff,0 0 18px rgba(255,255,255,.12)}
h1.logo span{display:inline-block;opacity:0;transform:translateY(-14px) rotate(-6deg);animation:letterIn .5s cubic-bezier(.3,1.5,.5,1) forwards}
h1.logo span.o{color:var(--brass);text-shadow:0 0 22px rgba(255,190,90,.35)}
@keyframes letterIn{to{opacity:1;transform:none}}
.tag{max-width:600px;margin:0 auto 28px;font-size:17px;line-height:1.6;color:var(--chalk-2);opacity:0;animation:fadeUp .8s ease 1.1s forwards}
.tag em{color:var(--brass-hi);font-style:normal}
.title-card .btn{opacity:0;animation:fadeUp .8s ease 1.5s forwards}
.hint-row{margin-top:18px;font-size:13px;letter-spacing:.2em;color:var(--chalk-3);opacity:0;animation:fadeUp .8s ease 1.8s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.underline{display:block;margin:0 auto 18px;width:min(420px,80vw);height:14px}
.underline path{fill:none;stroke:var(--chalk-2);stroke-width:3;stroke-linecap:round;stroke-dasharray:500;stroke-dashoffset:500;animation:draw 1s ease .8s forwards}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:10px;padding:12px 16px 6px;position:relative;z-index:3;min-height:60px}
.brand{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:28px;letter-spacing:.02em}
.brand b{color:var(--brass)}
.titleblock{min-width:0;line-height:1.1}
.titleblock.center{flex:1;text-align:center}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-hi);opacity:.85;white-space:nowrap}
.brand-sm{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:26px;color:var(--chalk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{font-size:13px;padding:6px 10px;border-radius:20px;border:1px solid var(--chalk-3);color:var(--glow);white-space:nowrap}
.spacer{flex:1}
.dots{display:inline-flex;gap:4px;vertical-align:middle;margin-left:4px}
.dots i{width:7px;height:7px;border-radius:50%;border:1.3px solid var(--accent-hi);opacity:.7}
.dots i.on{background:var(--ok);border-color:var(--ok)}
.dots i.cur{background:var(--glow);border-color:var(--glow);opacity:1;box-shadow:0 0 6px var(--glow)}

/* ---------- the map: blueprint sheets, five machines each (js/ui/blueprint.js) ---------- */
.map{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 0 18px}
.atlas{position:relative;width:100%;max-width:520px;margin:0 auto}
.bp-tabs{position:sticky;top:0;z-index:5;display:flex;justify-content:center;gap:8px;padding:6px 16px 10px;
  background:linear-gradient(180deg,var(--board) 70%,transparent)}
.bp-tab{display:flex;align-items:baseline;gap:7px;cursor:pointer;padding:6px 12px 7px;border-radius:8px 8px 3px 3px;color:var(--chalk-2);
  background:linear-gradient(180deg,var(--bp-paper-hi),var(--bp-paper-lo));border:1px solid var(--bp-ink-3);border-bottom-width:3px;
  font-size:12px;letter-spacing:.08em;opacity:.62;transition:opacity .25s,transform .25s,box-shadow .25s}
.bp-tab b{font-family:'Cabin Sketch',cursive;font-size:17px;color:var(--bp-ink)}
.bp-tab.on{opacity:1;transform:translateY(2px);box-shadow:0 6px 16px rgba(0,0,0,.4);border-bottom-color:var(--brass)}
.bp-tab.sealed span::after{content:' ⚿';color:var(--bp-wax-hi)}
.bp-tab.approved b{color:var(--brass-hi)}
.bp-tab:focus-visible{outline:2px dashed var(--glow);outline-offset:3px}
.bp-row{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.bp-row::-webkit-scrollbar{display:none}
.bp-panel{flex:0 0 100%;scroll-snap-align:center;padding:4px 16px 8px}
/* the sheet: pinned to the board, a hair crooked, lit from the top left */
.bp-sheet{position:relative;transform:rotate(-.5deg);border-radius:3px;
  box-shadow:0 2px 0 rgba(255,255,255,.04),0 18px 40px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.4)}
.bp-panel:nth-child(even) .bp-sheet{transform:rotate(.45deg)}
.bp-sheet::before,.bp-sheet::after{content:'';position:absolute;top:9px;width:13px;height:13px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 35%,#fff3c8,var(--brass) 45%,#3a2a10 100%);box-shadow:0 3px 4px rgba(0,0,0,.6)}
.bp-sheet::before{left:9px}.bp-sheet::after{right:9px}
.bp-svg{display:block;width:100%;height:auto;border-radius:3px}
/* paper and frame */
.bp-paper{stop-color:var(--bp-paper)}.bp-paper-hi{stop-color:var(--bp-paper-hi)}.bp-paper-lo{stop-color:var(--bp-paper-lo)}
.bp-grid-minor{fill:none;stroke:var(--bp-grid);stroke-width:.6}
.bp-grid-major{fill:none;stroke:var(--bp-grid-major);stroke-width:.9}
.bp-fibre{fill:#fff;mix-blend-mode:screen}
.bp-crease{stroke:rgba(0,0,0,.18);stroke-width:1}.bp-crease.lit{stroke:rgba(255,255,255,.06)}
.bp-border{fill:none;stroke:var(--bp-ink-2);stroke-width:1.6}.bp-border.thin{stroke-width:.7}
.bp-kicker{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;fill:var(--bp-ink-2)}
/* lines: ink, construction and centre lines */
.bp-gear .bp-teeth,.bp-gear .bp-web,.bp-gear .bp-hub,.bp-gear .bp-spoke{fill:none;stroke:var(--bp-ink-2);stroke-width:1.1;stroke-linejoin:round}
.bp-gear .bp-teeth{fill:var(--bp-wash)}
.bp-gear.live .bp-teeth{stroke:var(--bp-ink)}
.bp-centre{fill:none;stroke:var(--bp-ink-3);stroke-width:.7;stroke-dasharray:14 3 2 3}
.bp-pitch{fill:none;stroke:var(--bp-ink-3);stroke-width:.7;stroke-dasharray:14 3 2 3}
.bp-rot{transform-box:view-box;transform-origin:0 0;animation:spin 30s linear infinite;animation-play-state:paused}
.bp-gear.live .bp-rot{animation-play-state:running}
.bp-note{font-size:11px;letter-spacing:.16em;text-transform:uppercase;fill:var(--bp-ink-2)}
.bp-note.mid{text-anchor:middle}
/* a machine detail: the robot drawn as line art inside its gear */
.bp-art *{fill:none !important;stroke:var(--bp-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:none !important}
.bp-detail.done .bp-art *{stroke:var(--bp-brass);filter:drop-shadow(0 0 2px var(--bp-brass-glow)) !important}
.bp-detail.done .bp-art .pt-heart,.bp-detail.done .bp-art .pt-glow{fill:var(--bp-brass-glow) !important}
.bp-detail.done .bp-gear.big .bp-teeth{stroke:var(--bp-brass);fill:var(--bp-brass-wash);filter:drop-shadow(0 0 3px var(--bp-brass-glow))}
.bp-detail.locked .bp-art{opacity:0}
.bp-detail.teaser .bp-art{opacity:.5}
.bp-detail.locked .bp-gear .bp-teeth{stroke:var(--bp-ink-3);stroke-dasharray:3 5;fill:none}
.bp-detail.locked .bp-gear .bp-web{display:none}
.bp-gear.idler:not(.live) .bp-teeth,.bp-gear.idler:not(.live) .bp-spoke,.bp-gear.idler:not(.live) .bp-hub{stroke:var(--bp-ink-3)}
.bp-q{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:44px;text-anchor:middle;fill:var(--bp-ink-3)}
.bp-pencil{fill:none;stroke:var(--glow);stroke-width:1.6;stroke-dasharray:3 6;animation:pencil 9s linear infinite;filter:drop-shadow(0 0 3px var(--glow))}
@keyframes pencil{to{stroke-dashoffset:-90}}
.bp-balloon{fill:var(--bp-paper);stroke:var(--bp-ink);stroke-width:1.2}
.bp-balloon-t{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:15px;text-anchor:middle;fill:var(--bp-ink)}
.bp-detail.done .bp-balloon{stroke:var(--bp-brass)}.bp-detail.done .bp-balloon-t{fill:var(--bp-brass)}
.bp-detail.locked .bp-balloon,.bp-detail.locked .bp-balloon-t{opacity:.45}
.bp-leader{fill:none;stroke:var(--bp-ink-2);stroke-width:.9}
.bp-label{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:24px;fill:var(--bp-ink);letter-spacing:.02em}
.bp-sub{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;fill:var(--bp-ink-2)}
.bp-detail .bp-note{fill:var(--glow)}
.bp-detail.done .bp-label{fill:var(--bp-brass)}
.bp-detail.locked .bp-label{fill:var(--bp-ink-2);letter-spacing:.2em}
.bp-detail.locked .bp-sub{font-style:italic;fill:var(--bp-ink-3)}
.bp-detail{transition:opacity .4s}
.bp-detail.rattle{animation:rattle .45s ease}
/* rubber stamps */
.bp-stamp{opacity:.88;mix-blend-mode:screen}
.bp-stamp-o{fill:none;stroke:var(--bp-stamp);stroke-width:2.6}
.bp-stamp-i{fill:none;stroke:var(--bp-stamp);stroke-width:1}
.bp-stamp-t{font-family:'Special Elite';font-size:12px;letter-spacing:.24em;text-anchor:middle;fill:var(--bp-stamp)}
.bp-stamp.big .bp-stamp-t{font-size:16px;letter-spacing:.3em}
/* title block */
.bp-tb{fill:var(--bp-paper-lo);stroke:var(--bp-ink);stroke-width:1.4}
.bp-tb-line{stroke:var(--bp-ink-2);stroke-width:.8}
.bp-tb-k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;fill:var(--bp-ink-2)}
.bp-tb-name{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:24px;fill:var(--bp-ink)}
/* tap targets over the gears */
.bp-hit{position:absolute;z-index:2;border:0;padding:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bp-hit.locked{cursor:help}
.bp-hit:focus-visible{outline:2px dashed var(--glow);outline-offset:2px}
/* a sealed sheet: vellum over the drawing, a wax seal and the price tag */
.bp-panel.sealed .bp-train,.bp-panel.sealed .bp-detail{opacity:.55}
.bp-vellum{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border-radius:3px;
  background:linear-gradient(160deg,var(--bp-vellum-hi),var(--bp-vellum) 60%,var(--bp-vellum-lo));-webkit-backdrop-filter:blur(1.2px) saturate(.8);backdrop-filter:blur(1.2px) saturate(.8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.bp-seal{position:relative;width:92px;height:92px;border-radius:47% 53% 50% 48%;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 30%,var(--bp-wax-hi),var(--bp-wax) 52%,var(--bp-wax-lo) 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 -4px 10px rgba(0,0,0,.35),inset 0 3px 6px rgba(255,255,255,.18)}
.bp-seal::before{content:'';position:absolute;inset:13px;border-radius:50%;border:2px solid rgba(0,0,0,.28);box-shadow:inset 0 0 0 5px rgba(255,255,255,.06)}
.bp-seal b{position:relative;font-family:'Cabin Sketch',cursive;font-size:32px;color:rgba(40,8,6,.75);text-shadow:0 1px 0 rgba(255,255,255,.18)}
.bp-tag{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 22px 16px;border-radius:10px;text-align:center;color:var(--chalk);
  background:rgba(14,20,26,.86);border:1px solid var(--bp-ink-3);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.bp-tag small{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bp-wax-hi)}
.bp-tag strong{font-family:'Cabin Sketch',cursive;font-size:26px;line-height:1.1}
.bp-tag span{font-size:12px;letter-spacing:.08em;color:var(--chalk-2);margin-bottom:8px}
.bp-seal.small{width:64px;height:64px;flex:none}.bp-seal.small::before{inset:9px}.bp-seal.small b{font-size:22px}
.buy-sheet .sh-blurb{margin-top:10px}
/* the offer card (shop.js): the sheet's robots in silhouette, and a torn page of it */
.by-cast{display:flex;justify-content:space-between;gap:4px;margin:14px 0 2px}
.by-cast svg{width:19%;aspect-ratio:5/4;filter:brightness(0) drop-shadow(0 0 1.5px var(--bp-wax-hi)) drop-shadow(0 0 6px rgba(224,100,79,.35));opacity:.85}
.by-stall{margin:10px 0 0;font-size:13px;color:var(--glow)}
.by-page{position:relative;margin:12px 4px 4px;padding:12px 16px 18px;color:#3b2a14;transform:rotate(-1.2deg);
  background:radial-gradient(ellipse at 30% 20%,#f6ead0,#e8d6ad 70%,#d9c08c);box-shadow:0 8px 18px rgba(0,0,0,.45);
  clip-path:polygon(0 4%,8% 0,22% 3%,37% 0,53% 2.5%,68% 0,84% 3%,100% 0,99% 55%,100% 74%,94% 86%,86% 79%,77% 93%,66% 84%,55% 97%,44% 86%,33% 95%,22% 83%,12% 93%,5% 84%,0 90%)}
.by-page figcaption{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a6a3a}
.by-page p{margin:4px 0 0;font-size:14px;line-height:1.5;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.by-restore{display:block;margin:10px auto 0;border:0;background:none;color:var(--chalk-3);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
/* the edge of a sheet (blueprint.js cliffhanger): the APPROVED stamp thumps down, the next sheet's seal beckons */
.bp-stamp.thump{animation:thump .5s cubic-bezier(.2,1.6,.4,1) both;transform-box:fill-box;transform-origin:center}
@keyframes thump{from{opacity:0;scale:2.4}60%{opacity:1;scale:.92}}
.bp-seal.beckon{animation:beckon 1.1s ease-in-out 2}
@keyframes beckon{50%{transform:scale(1.12);box-shadow:0 0 0 12px rgba(224,100,79,0),0 0 26px 6px rgba(224,100,79,.55),inset 0 -4px 10px rgba(0,0,0,.35)}}
.bp-tab.sealed.ready b{animation:waxGlow 2.4s ease-in-out infinite}
.bp-tab.sealed.beckon b{animation:waxGlow .55s ease-in-out 4}
@keyframes waxGlow{50%{text-shadow:0 0 10px var(--bp-wax-hi),0 0 2px var(--bp-wax-hi)}}
.bp-taste{margin-top:6px;border:0;background:none;color:var(--chalk);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
/* unsealing: the wax cracks in two and the vellum lifts away */
.bp-vellum.breaking{pointer-events:none;animation:vellumLift .9s cubic-bezier(.5,0,.7,.4) .55s both}
.bp-vellum.breaking .bp-tag{animation:fadeOut .25s both}
.bp-vellum.breaking .bp-seal{background:none;box-shadow:none}
.bp-vellum.breaking .bp-seal::before{display:none}
.bp-vellum.breaking .bp-seal b{animation:fadeOut .15s both}
.bp-seal i{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 36% 30%,var(--bp-wax-hi),var(--bp-wax) 52%,var(--bp-wax-lo) 100%)}
.bp-seal i:first-of-type{clip-path:polygon(0 0,58% 0,44% 34%,56% 52%,40% 100%,0 100%);animation:sealL .8s cubic-bezier(.3,0,.6,1) .12s both}
.bp-seal i:last-of-type{clip-path:polygon(58% 0,100% 0,100% 100%,40% 100%,56% 52%,44% 34%);animation:sealR .8s cubic-bezier(.3,0,.6,1) .12s both}
@keyframes sealL{to{transform:translate(-70px,90px) rotate(-38deg);opacity:0}}
@keyframes sealR{to{transform:translate(70px,110px) rotate(44deg);opacity:0}}
@keyframes vellumLift{to{transform:translateY(-14%);opacity:0}}
body.still :is(.bp-stamp.thump,.bp-seal.beckon,.bp-tab.sealed b){animation:none}
body.still :is(.bp-rot,.bp-pencil){animation:none}
/* bottom sheet */
.map-scrim{position:absolute;inset:0;z-index:20;background:rgba(5,7,8,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.map-scrim.show{opacity:1;pointer-events:auto}
.map-sheet{position:absolute;left:50%;bottom:0;z-index:21;width:min(480px,100%);transform:translate(-50%,105%);transition:transform .45s cubic-bezier(.3,1.25,.5,1);
  padding:18px 18px calc(16px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;color:var(--chalk);
  background:linear-gradient(180deg,#232a2e,#171c1f);border:1.5px solid color-mix(in srgb,var(--tint,#caa14e) 75%,#000);border-bottom:0;
  box-shadow:0 -20px 50px rgba(0,0,0,.55)}
.map-sheet.show{transform:translate(-50%,0)}
.sh-x{position:absolute;top:10px;right:10px;width:36px;height:36px;font-size:14px}
.sh-head{display:flex;align-items:center;gap:12px;padding-right:36px}
.sh-head .portrait{width:96px;flex:none;margin:0}
.sh-kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-hi)}
.map-sheet h3{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:32px;line-height:1;margin:4px 0 2px}
.sh-machine{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-2)}
.sh-blurb{font-size:13.5px;color:var(--chalk-2);line-height:1.5;margin:12px 0}
.sh-foot{display:flex;justify-content:space-between;font-size:12.5px;letter-spacing:.08em}
.sh-state{color:var(--chalk-2)}.sh-state.ok{color:var(--ok)}
.sh-btns{display:flex;gap:10px;margin-top:14px}
.sh-btns .btn{flex:1;min-height:46px;white-space:nowrap;font-size:14px}
.sh-btns .btn[hidden]{display:none}
/* journal */
#btn-journal svg,[data-settings] svg{width:22px;height:22px;fill:none;stroke:var(--chalk);stroke-width:1.6;stroke-linejoin:round}
#btn-journal{position:relative}
#btn-journal.unread::after{content:'';position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow);animation:blink 1.4s ease-in-out infinite}
#btn-journal.bump{animation:bump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.3) rotate(-8deg)}}
.journal{position:absolute;inset:0;z-index:25;display:flex;justify-content:center;align-items:stretch;padding:16px;background:rgba(8,10,11,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .35s}
.journal.show{opacity:1;pointer-events:auto}
.jr-book{width:min(480px,100%);display:flex;flex-direction:column;min-height:0;transform:translateY(24px);transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.journal.show .jr-book{transform:none}
.jr-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 12px}
.jr-head h3{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:28px;margin:0;line-height:1}
.jr-head small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--chalk-2)}
.jr-pages{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:6px 6px 30px}
.page{position:relative;flex:none;padding:20px 20px 16px;color:#3b2a14;transform:rotate(var(--tilt));
  background:radial-gradient(ellipse at 30% 20%,#f6ead0,#e8d6ad 70%,#d9c08c);box-shadow:0 10px 24px rgba(0,0,0,.5);
  clip-path:polygon(0 2%,6% 0,14% 1.5%,25% 0,38% 1.2%,52% 0,66% 1.6%,79% 0,90% 1.4%,100% 0,99% 30%,100% 62%,99% 100%,86% 98.6%,71% 100%,57% 98.4%,42% 100%,27% 98.8%,12% 100%,0 98%,1% 60%)}
.page h4{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:23px;margin:4px 0 8px;color:#2a1c06}
.page p{margin:0;font-size:14px;line-height:1.6}
.page.new .pg-where{padding-right:56px}
.pg-where{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a6a3a}
.pg-sign{text-align:right;font-family:'Cabin Sketch',cursive;font-size:18px;margin-top:8px;color:#5a4020}
.pg-new{position:absolute;top:12px;right:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#a33a22;border:2px solid #a33a22;
  padding:2px 7px;border-radius:4px;transform:rotate(8deg);opacity:.85}
.page.new{animation:pageIn .7s cubic-bezier(.3,1.4,.5,1) .2s both}
@keyframes pageIn{from{opacity:0;transform:translateY(20px) rotate(-6deg) scale(.95)}}
.page.torn{background:transparent;box-shadow:none;border:1.5px dashed var(--chalk-3);color:var(--chalk-3);clip-path:none;padding:14px 18px}
.page.torn .pg-where{color:var(--chalk-3)}
.page.lost{border-style:dotted;text-align:center}
.pg-hint{font-style:italic;font-size:13px!important}
.pg-unseal{margin-top:6px;border:0;background:none;color:var(--bp-wax-hi);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
/* a newly found page, alone on the map (journal.js showNote): the journal's paper, a little bigger */
.intro.note{z-index:20}
.note-card{position:relative;width:min(320px,calc(100% - 72px))}
:is(.note-card,.fly) .page{padding:26px 20px 60px}
:is(.note-card,.fly) .page h4{font-size:24px}
:is(.note-card,.fly) .page p{font-size:14px}
.note-kicker{position:absolute;z-index:1;top:-26px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--glow)}
#btn-note{position:absolute;left:20px;bottom:16px;min-height:40px}
.intro.note:not(.show) .page.new{animation:none}
.intro.note.kept .note-card{visibility:hidden}
.fly{position:fixed;left:0;top:0;z-index:80;pointer-events:none;transform-origin:0 0;transform-style:preserve-3d;will-change:transform}
.fly-sheet,.fly-half,.fly-q{position:absolute;left:0;top:0;transform-style:preserve-3d}
.fly-half{transform-origin:0 50%}
.fly-q{transform-origin:50% 0}
.fly-face{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fly-face .page{position:absolute;margin:0;box-shadow:none}
.fly-paper{transform:rotateX(180deg);background:radial-gradient(ellipse at 30% 20%,#f6ead0,#e8d6ad 70%,#d9c08c);box-shadow:inset 0 0 0 1px rgba(90,64,32,.18)}
.fly-half>.fly-q:first-child>.fly-paper{transform:rotateY(180deg);overflow:visible;
  box-shadow:inset 0 0 0 1px rgba(90,64,32,.18),0 0 12px rgba(255,199,102,.55),0 6px 14px rgba(0,0,0,.5)}
.fly-front{margin:0;animation:none!important}
.fly-seal{position:absolute;left:50%;top:50%;margin:-32px 0 0 -32px;opacity:0}
.fly-spark{position:fixed;left:-3.5px;top:-3.5px;z-index:79;width:7px;height:7px;border-radius:50%;pointer-events:none;opacity:0;
  background:#fff3cf;box-shadow:0 0 6px 2px var(--glow),0 0 14px 4px rgba(255,199,102,.45)}
.fly-burst{position:fixed;left:0;top:0;z-index:81;pointer-events:none}
.fly-burst b{position:absolute;left:0;top:0;translate:-50% -50%;border-radius:50%;border:2px solid var(--glow);box-shadow:0 0 12px var(--glow),inset 0 0 8px var(--glow)}
.fly-burst i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#fff3cf;box-shadow:0 0 6px 2px var(--glow)}
body.still :is(.fog-drift,.tv-bob,.node.current::before,.node.done .nd-halo,.jw-edge-q){animation:none}
.portrait{display:block;width:100%;height:auto;max-height:150px;margin:4px 0;overflow:visible}
.pt{filter:url(#chalk)}
.theme-silver .pt-plate{fill:url(#silverGrad)}.theme-iron .pt-plate{fill:url(#ironGrad)}
.pt-plate{fill:url(#slateGrad);stroke:var(--chalk);stroke-width:2}
.pt-copper{fill:url(#copperGrad);stroke:var(--chalk);stroke-width:2}
.pt-brass{fill:url(#brassGrad);stroke:#f3dc9b;stroke-width:1.2}
.pt-line{stroke:var(--chalk-2);stroke-width:2;fill:none;stroke-linecap:round}
.pt-glow{fill:#ffc766;filter:drop-shadow(0 0 4px #ffb34a)}
.pt-heart{fill:url(#heartGrad)}
.pt-crystal{fill:url(#crystalGrad);stroke:#c9f6ff;stroke-width:1.5}
.card-bar,.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:8px}
.card-bar i,.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--glow));border-radius:3px;transition:width .8s}
.card-stars{color:var(--glow)}.card-state{color:var(--chalk-2)}
@keyframes rattle{20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
@keyframes fadeOut{to{opacity:0}}

/* ---------- machine screen (portrait-first) ---------- */
.shop-body{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,46%) minmax(0,1fr);gap:4px;padding:0 12px 10px}
.robot-stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center}
#robot{width:100%;height:100%;max-height:100%;overflow:visible}
.levels-panel{min-height:0;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1.5px dashed var(--chalk-3);border-radius:16px;padding:10px 12px 4px}
.lp-head{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--chalk-2);padding:2px 4px 8px}
.lp-head .bar{flex:1;margin:0}
.levels{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 10px;scroll-snap-type:y proximity}
.fault{padding:6px 2px 10px;border-bottom:1px dashed rgba(236,235,228,.1);scroll-snap-align:start}
.fault:last-child{border-bottom:0}
.fault-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fh-name{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:21px}
.fh-state{font-size:11px;letter-spacing:.16em;color:var(--bad)}
.fault.done .fh-name,.fault.done .fh-state{color:var(--ok)}
.nodes{position:relative;display:flex;justify-content:space-around;align-items:center;height:92px;max-width:420px;margin:0 auto}
.node-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.node-path path{fill:none;stroke:var(--chalk-3);stroke-width:3;stroke-dasharray:3 8;stroke-linecap:round}
.lvl{position:relative;z-index:1;width:60px;height:60px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#3a4a55,#1c2429 70%);border:2px solid var(--chalk-3);color:var(--chalk);
  box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.lvl:nth-child(3){transform:translateY(-14px)}
.lvl .num{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:24px;line-height:1}
.lvl .lst{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--glow);white-space:nowrap;letter-spacing:.05em}
.lvl .lst em{font-style:normal;color:var(--chalk-3)}
.lvl .diff{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:1px;color:var(--chalk-2);white-space:nowrap}
.lvl.master{box-shadow:0 0 0 2px rgba(143,216,255,.35)}
.lvl.master .diff{color:var(--l2)}
.lvl.done{border-color:var(--ok);background:radial-gradient(circle at 35% 30%,#3e5a48,#1b2a22 70%)}
.lvl.current{border-color:var(--glow);background:radial-gradient(circle at 35% 30%,#f6de9c,#b08030 60%,#6e4f18);color:#2a1c06;animation:nodePulse 1.6s ease-in-out infinite}
.lvl.locked{opacity:.45;cursor:not-allowed}
.lvl.locked .lst{bottom:-16px}
.lvl:active{scale:.94}
.lvl.nope{animation:rattle .4s ease}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,199,102,.6),0 6px 14px rgba(0,0,0,.45)}50%{box-shadow:0 0 0 10px rgba(255,199,102,0),0 6px 14px rgba(0,0,0,.45)}}
@keyframes blink{50%{opacity:.35}}

/* ---------- robot shared styling ---------- */
#robot .plate{fill:url(#slateGrad);stroke:var(--chalk);stroke-width:2.4;stroke-linejoin:round}
#robot .silverp{fill:url(#silverGrad);stroke:#f4f7fa;stroke-width:2.2;stroke-linejoin:round}
#robot .ironp{fill:url(#ironGrad);stroke:#c3c9cc;stroke-width:2.2;stroke-linejoin:round}
#robot .brass{fill:url(#brassGrad);stroke:#f3dc9b;stroke-width:1.6}
#robot .copper{fill:url(#copperGrad);stroke:#f6c7a4;stroke-width:1.4}
#robot .thin{fill:none;stroke:var(--chalk-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#robot .fil{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.4;stroke-dasharray:3 5;stroke-linecap:round}
#robot .joint{fill:#1d2529;stroke:var(--chalk);stroke-width:2.2;transition:stroke .6s}
#robot .rivet{fill:url(#rivetGrad)}
#robot .dark{fill:#101518;stroke:var(--chalk-2);stroke-width:1.5}
#robot .port{fill:#0f1417;stroke:url(#brassGrad);stroke-width:7}
#robot .pipe{fill:none;stroke:url(#copperGrad);stroke-width:9;stroke-linecap:round}
#robot .flow{fill:none;stroke:rgba(255,230,190,0);stroke-width:3;stroke-dasharray:5 11;stroke-linecap:round}
#robot .face{fill:#e8e1c8;stroke:url(#brassGrad);stroke-width:4}
#robot .needle{stroke:#b3261e;stroke-width:2.4;stroke-linecap:round}
#robot .shadow{fill:rgba(0,0,0,.45);filter:blur(4px)}
#robot .crack{fill:none;stroke:var(--bad);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .6s}
#robot .wire{fill:none;stroke:#d64a2e;stroke-width:2.2;stroke-linecap:round}
#robot .perch{fill:none;stroke:url(#brassGrad);stroke-width:8;stroke-linecap:round}
#robot .rail{fill:none;stroke:#8d8680;stroke-width:5}
#robot .tie{fill:#3b302a;stroke:rgba(236,235,228,.3);stroke-width:1}
#robot .rod{fill:none;stroke:#b9c0c4;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
#robot .grate{fill:none;stroke:#2a2320;stroke-width:3}
#robot .plate-text{font-family:'Cabin Sketch';font-weight:700;font-size:20px;fill:url(#brassGrad)}
#robot [data-gear] path{fill:#3a3230;stroke:#6f5a50;stroke-width:1.4}
#robot .speech rect{fill:rgba(20,25,28,.92);stroke:var(--brass-hi);stroke-width:2}
#robot .speech .speech-tail{fill:rgba(20,25,28,.92);stroke:var(--brass-hi);stroke-width:2}
#robot .speech text{fill:var(--glow);font-family:'Special Elite',monospace;font-size:17px}
#robot .speech{opacity:0;transform:translateY(8px) scale(.9);transform-box:fill-box;transform-origin:50% 100%;transition:all .5s cubic-bezier(.3,1.6,.5,1)}
#robot.alive .speech.show{opacity:1;transform:none}
.flicker{animation:flicker .23s steps(2) infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes flicker{50%{transform:rotate(2deg)}}
#needle,#jneedle{transform-box:fill-box;transform-origin:50% 100%;transition:transform 1.6s cubic-bezier(.3,1.6,.4,1)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flow{to{stroke-dashoffset:-32}}

/* ===== Otto ===== */
.bot-otto #lens{fill:#12171a;transition:fill .8s}
.bot-otto #iris path{fill:#27313a;stroke:#5c6a74;stroke-width:1}
.bot-otto #eye2{fill:#1a2124;transition:fill .8s}
.bot-otto #bulb{fill:#3a2b1a;stroke:var(--chalk-2);stroke-width:1.5}
.bot-otto #heartGlow{fill:#2c1c19;transition:fill .8s}
.bot-otto #head,.bot-otto #armR,.bot-otto #upper,.bot-otto #hs-upper,.bot-otto #legL,.bot-otto #legR,.bot-otto #armPiston{transition:transform 1.4s cubic-bezier(.35,1.45,.45,1)}
.bot-otto #head{transform-box:fill-box;transform-origin:50% 100%}
.bot-otto:not(.f-optic) #head{transform:rotate(-9deg) translateY(4px)}
.bot-otto #armR{transform-box:fill-box;transform-origin:50% 4%}
.bot-otto:not(.f-arm) #armR{transform:rotate(-8deg)}
.bot-otto:not(.f-arm) #armPiston{transform:translateY(-10px)}
.bot-otto:not(.f-legs) #upper,.bot-otto:not(.f-legs) #hs-upper{transform:translateY(18px)}
.bot-otto #legL,.bot-otto #legR{transform-box:fill-box;transform-origin:50% 0}
.bot-otto:not(.f-legs) #legL{transform:rotate(6deg)}
.bot-otto:not(.f-legs) #legR{transform:rotate(-6deg)}
.bot-otto:not(.f-legs) .knee{stroke:var(--bad)}
.bot-otto.f-optic #lens{fill:url(#lensGrad)}
.bot-otto.f-optic #lensGlow{opacity:1}
.bot-otto.f-optic #eye2{fill:var(--glow)}
.bot-otto.f-optic #lensCrack{opacity:0}
.bot-otto.f-optic #iris{animation:spin 6s linear infinite}
.bot-otto #lensGlow{opacity:0;transition:opacity 1s}
.bot-otto.f-heart #heartGlow{fill:url(#heartGrad);animation:pump 1.05s ease-in-out infinite}
.bot-otto.f-heart #heartCrack{opacity:0}
.bot-otto.f-heart #heartGear{animation:spin 3s linear infinite}
.bot-otto.f-heart #heartGear path{fill:url(#brassGrad);stroke:#f3dc9b}
.bot-otto.f-heart .flow.hf{stroke:rgba(255,220,170,.55);animation:flow .7s linear infinite}
.bot-otto #iris,.bot-otto #heartGear,.bot-otto #heartGlow{transform-box:fill-box;transform-origin:center}
.bot-otto.f-arm #armR{animation:armIdle 3.4s ease-in-out infinite}
.bot-otto:not(.f-arm) #wire{opacity:1}
.bot-otto #wire{opacity:0;transition:opacity .4s}
@keyframes pump{0%,100%{transform:scale(1)}15%{transform:scale(1.13)}30%{transform:scale(.97)}45%{transform:scale(1.07)}}
@keyframes armIdle{0%,100%{transform:rotate(0)}50%{transform:rotate(-3.5deg)}}
.bot-otto.alive #upper,.bot-otto.alive #hs-upper{animation:bob 1.1s ease-in-out infinite}
.bot-otto.alive #armR{animation:wave .9s ease-in-out infinite;transition:none}
.bot-otto.alive #head{animation:look 3.2s ease-in-out infinite}
.bot-otto.alive #bulb{animation:bulb .8s steps(2) infinite}
.bot-otto.alive .flow{stroke:rgba(255,230,190,.75);animation:flow .45s linear infinite}
.bot-otto.alive #legL{animation:stepL 1.1s ease-in-out infinite}
.bot-otto.alive #legR{animation:stepR 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes wave{0%,100%{transform:rotate(-148deg)}50%{transform:rotate(-118deg)}}
@keyframes look{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}65%{transform:rotate(5deg)}}
@keyframes bulb{50%{fill:#ffd36b;filter:drop-shadow(0 0 8px #ffb34a)}}
@keyframes stepL{50%{transform:rotate(-2deg)}}
@keyframes stepR{50%{transform:rotate(2deg)}}

/* ===== Pip ===== (inner groups sit at their pivot: transform-origin 0 0 = pivot) */
.bot-pip .feather,.bot-pip #pipWing,.bot-pip #mbLid,.bot-pip #beakLow,.bot-pip #keyBow,.bot-pip #mbCrank{transform-box:view-box;transform-origin:0 0;transition:transform 1.3s cubic-bezier(.35,1.45,.45,1)}
.bot-pip .feather{transform:rotate(var(--a))}
.bot-pip:not(.f-tail) .feather{transform:rotate(calc(var(--a) * .15 + 14deg))}
.bot-pip:not(.f-wings) #pipWing{transform:rotate(26deg)}
.bot-pip.f-wings #pipWing{animation:wingIdle 2.6s ease-in-out infinite}
.bot-pip:not(.f-key) #keyBow{transform:rotate(24deg)}
.bot-pip.f-key #keyBow{animation:keySpin 1.6s linear infinite}
.bot-pip #mbDrum,.bot-pip .mbPins{opacity:0;transition:opacity .8s}
.bot-pip.f-musicbox #mbDrum,.bot-pip.f-musicbox .mbPins{opacity:1}
.bot-pip.f-musicbox #mbLid{transform:rotate(-6deg)}
.bot-pip.f-musicbox #mbCrank{animation:spin 2s linear infinite}
.bot-pip.f-musicbox .mbPins{animation:pinScroll .4s linear infinite}
.bot-pip #pipEye{fill:#1a2124;transition:fill .8s}
.bot-pip.f-key #pipEye{fill:#9fe6ff;filter:drop-shadow(0 0 6px #9fe6ff)}
.bot-pip #pipGear path{fill:#3a3a3e;stroke:#77838b}
.bot-pip.f-musicbox #pipGear{animation:spin 3s linear infinite;transform-box:fill-box;transform-origin:center}
.bot-pip.f-musicbox #pipGear path{fill:url(#silverGrad);stroke:#fff}
.bot-pip #bird{transform-box:view-box;transform-origin:350px 500px}
.bot-pip:not(.f-wings):not(.f-tail) #bird{transform:rotate(3deg)}
.bot-pip.alive #bird{animation:hop 1s ease-in-out infinite}
.bot-pip.alive #pipWing{animation:flap .5s ease-in-out infinite}
.bot-pip.alive #beakLow{animation:sing .32s ease-in-out infinite}
.bot-pip.alive .feather{animation:fan 1.4s ease-in-out infinite}
@keyframes wingIdle{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes keySpin{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes pinScroll{50%{transform:translateX(-8px)}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}
@keyframes flap{0%,100%{transform:rotate(0)}50%{transform:rotate(-34deg)}}
@keyframes sing{50%{transform:rotate(18deg)}}
@keyframes fan{0%,100%{transform:rotate(var(--a))}50%{transform:rotate(calc(var(--a) * 1.35))}}

/* ===== Iron Mule ===== */
.bot-mule .wheel{transform-box:view-box;transform-origin:0 0}
.bot-mule .rustspot{fill:#8a3c1c;opacity:1;transition:opacity .8s}
.bot-mule.f-wheels .rustspot{opacity:0}
.bot-mule.f-wheels .wheel{animation:spin 2.6s linear infinite}
.bot-mule.f-wheels #rod{animation:crank 2.6s linear infinite}
.bot-mule.f-pistons #prod{animation:pistonX 2.6s linear infinite}
.bot-mule:not(.f-pistons) #cyl .copper{fill:#4a2d1e}
.bot-mule #fireGlow{fill:#1b1512;transition:fill .8s}
.bot-mule.f-firebox #fireGlow{fill:url(#fireGrad);animation:fire .25s steps(2) infinite}
.bot-mule #lamp{fill:#1a2124;transition:fill .8s}
.bot-mule.f-firebox #lamp{fill:var(--glow);filter:drop-shadow(0 0 8px #ffb34a)}
.bot-mule #whistle{transform-box:view-box;transform-origin:0 0}
.bot-mule:not(.f-whistle) #whistle{transform:rotate(-14deg)}
.bot-mule.f-whistle #whistle{transition:transform 1s cubic-bezier(.35,1.45,.45,1)}
.bot-mule.f-firebox .flow.hf{stroke:rgba(255,220,170,.5);animation:flow .7s linear infinite}
.bot-mule.alive .wheel{animation-duration:.9s}
.bot-mule.alive #rod,.bot-mule.alive #prod{animation-duration:.9s}
.bot-mule.alive #ties{animation:ties .45s linear infinite}
.bot-mule.alive #loco{animation:chug .45s ease-in-out infinite}
.bot-mule.alive #whistle{animation:toot 1.9s ease-in-out infinite}
@keyframes crank{0%{transform:translate(0,0)}12.5%{transform:translate(-5.3px,12.7px)}25%{transform:translate(-18px,18px)}37.5%{transform:translate(-30.7px,12.7px)}50%{transform:translate(-36px,0)}62.5%{transform:translate(-30.7px,-12.7px)}75%{transform:translate(-18px,-18px)}87.5%{transform:translate(-5.3px,-12.7px)}100%{transform:translate(0,0)}}
@keyframes pistonX{0%,100%{transform:translateX(0)}50%{transform:translateX(-36px)}}
@keyframes fire{50%{opacity:.8}}
@keyframes ties{to{transform:translateX(-40px)}}
@keyframes chug{50%{transform:translateY(-2px)}}
@keyframes toot{0%,80%,100%{transform:translateY(0)}85%{transform:translateY(-4px)}}
.alive .callout,.alive .hotspot{opacity:0;pointer-events:none}
.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,2px)}40%,60%{transform:translate(6px,-1px)}}

/* ===== Astra ===== */
#robot .glassp{fill:url(#crystalGrad);stroke:#c9f6ff;stroke-width:1.8}
#robot .shine{fill:rgba(255,255,255,.75)}
#robot .orbit-line{fill:none;stroke:rgba(236,235,228,.3);stroke-width:1.6;stroke-dasharray:4 7}
#robot .ringband{fill:none;stroke:#c9f6ff;stroke-width:2.4}
#robot .rays{fill:none;stroke:#ffcf6b;stroke-width:4;stroke-linecap:round}
.bot-astra .orbit{transform-box:view-box;transform-origin:0 0;animation:spin var(--d,8s) linear infinite;animation-play-state:paused}
.bot-astra .orbit-rev{transform-box:view-box;transform-origin:0 0;animation:spin var(--d,8s) linear infinite reverse;animation-play-state:paused}
.bot-astra .o-moons{--d:7s}.bot-astra .o-rings{--d:13s}
.bot-astra.f-moons .o-moons,.bot-astra.f-rings .o-rings{animation-play-state:running}
.bot-astra .glassp{transition:opacity .8s}
.bot-astra:not(.f-moons) .o-moons .glassp,.bot-astra:not(.f-rings) .o-rings .glassp{opacity:.45}
.bot-astra #sunCore{fill:#3b2f1c;stroke:#6e5a38;stroke-width:2;transition:fill .8s}
.bot-astra.f-sun #sunCore{fill:url(#lensGrad);filter:drop-shadow(0 0 18px rgba(255,190,90,.7))}
.bot-astra #corona{opacity:0;transform-box:view-box;transform-origin:0 0;transition:opacity 1s}
.bot-astra.f-sun #corona{opacity:1;animation:spin 14s linear infinite}
.bot-astra #ringFront{fill:none;stroke:rgba(201,246,255,.25);stroke-width:3;stroke-dasharray:6 8;transition:all .8s}
.bot-astra.f-rings #ringFront{stroke:#c9f6ff;stroke-dasharray:none;filter:drop-shadow(0 0 6px #9fe6f5)}
.bot-astra #scope{transform-box:view-box;transform-origin:0 0;transition:transform 1.4s cubic-bezier(.35,1.45,.45,1)}
.bot-astra:not(.f-scope) #scope{transform:rotate(38deg)}
.bot-astra.f-scope #scope{transform:rotate(18deg);animation:scan 6s ease-in-out infinite}
.bot-astra #scopeLens{fill:#1a2124;stroke:#c9f6ff;stroke-width:1.5;transition:fill .8s}
.bot-astra.f-scope #scopeLens{fill:#bff4ff;filter:drop-shadow(0 0 6px #9fe6f5)}
.bot-astra.alive .o-moons{--d:3s}.bot-astra.alive .o-rings{--d:6s}
@keyframes scan{0%,100%{transform:rotate(12deg)}50%{transform:rotate(26deg)}}

/* ===== Nautilus ===== */
#robot .copperp{fill:url(#copperGrad);stroke:var(--chalk);stroke-width:2.2;stroke-linejoin:round}
#robot .wave{fill:none;stroke:rgba(200,240,255,.35);stroke-width:2;stroke-linecap:round}
#robot .weed{fill:none;stroke:rgba(111,191,162,.6);stroke-width:3;stroke-linecap:round}
#robot .skid{fill:none;stroke:#aeb6ba;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
#robot .wheel-rim{fill:none;stroke:url(#brassGrad);stroke-width:5}
#robot .glass{fill:#0f1a1c;stroke:#6fbfa2;stroke-width:1.5;transition:fill .8s}
.bot-nautilus.f-lamp .glass{fill:#6fbfa2;filter:drop-shadow(0 0 6px #6fbfa2)}
.bot-nautilus #prop,.bot-nautilus #hatchWheel{transform-box:view-box;transform-origin:0 0}
.bot-nautilus:not(.f-propeller) #prop .copperp{fill:#4a2d1e}
.bot-nautilus.f-propeller #prop{animation:spin 1.1s linear infinite}
.bot-nautilus:not(.f-hatch) #hatchWheel{transform:rotate(18deg)}
.bot-nautilus:not(.f-hatch) #hatchWheel .wheel-rim{stroke:#7b3a1c}
.bot-nautilus.f-hatch #hatchWheel{animation:spin 7s linear infinite}
.bot-nautilus.f-pump #pumpRod{animation:pumpRod 1s ease-in-out infinite}
.bot-nautilus #beam{fill:url(#softGlow);opacity:0;transition:opacity 1s}
.bot-nautilus.f-lamp #beam{opacity:.9;animation:beam 3s ease-in-out infinite}
.bot-nautilus #lampLens{fill:#1a2124;stroke:#f3dc9b;stroke-width:1.5;transition:fill .8s}
.bot-nautilus.f-lamp #lampLens{fill:var(--glow);filter:drop-shadow(0 0 8px #ffb34a)}
.bot-nautilus #sub{transform-box:view-box;transform-origin:350px 360px}
.bot-nautilus:not(.f-propeller):not(.f-pump) #sub{transform:rotate(4deg) translateY(10px)}
.bot-nautilus #sub{transition:transform 1.4s cubic-bezier(.35,1.45,.45,1)}
.bot-nautilus.alive #sub{animation:float 2.4s ease-in-out infinite}
.bot-nautilus.alive #prop{animation-duration:.35s}
@keyframes pumpRod{50%{transform:translateY(12px)}}
@keyframes beam{50%{opacity:.6}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
.hotspot .hs-hit{fill:transparent}

/* hotspots & callouts */
.hotspot{cursor:pointer;transition:opacity .5s}
.hotspot .hs-wave{fill:none;stroke:var(--bad);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:wave-out 1.6s ease-out infinite}
.hotspot .hs-core{fill:rgba(40,12,8,.85);stroke:var(--bad);stroke-width:2.2}
.hotspot .hs-gear{fill:none;stroke:var(--warn);stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:spin 5s linear infinite}
.hotspot text{fill:var(--warn);font-family:'Cabin Sketch';font-weight:700;font-size:18px;text-anchor:middle}
.hotspot:hover .hs-core{fill:rgba(90,20,10,.9)}
.hotspot:hover{filter:drop-shadow(0 0 8px rgba(236,106,85,.7))}
.hotspot.done .hs-wave{stroke:var(--ok);animation:none;opacity:0}
.hotspot.done .hs-core{stroke:var(--ok);fill:rgba(10,40,20,.8)}
.hotspot.done .hs-gear{stroke:var(--ok);animation-duration:2.5s}
.hotspot.done text{fill:var(--ok)}
@keyframes wave-out{from{transform:scale(.7);opacity:.9}to{transform:scale(1.9);opacity:0}}
.callout{cursor:pointer;transition:opacity .5s}
.callout .c-title{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:25px;fill:var(--chalk)}
.callout .c-sub{font-size:13px;fill:var(--chalk-2);letter-spacing:.06em}
.callout .c-state{font-size:12px;letter-spacing:.2em;fill:var(--bad)}
.callout.done .c-state{fill:var(--ok)}
.callout.done .c-title{fill:var(--ok)}
.callout .lead{fill:none;stroke:var(--chalk-2);stroke-width:1.6;stroke-dasharray:3 6;stroke-linecap:round}
.callout:hover .c-title{fill:var(--glow)}

/* draw-on (first appearance) */
.draw-on .plate,.draw-on .silverp,.draw-on .ironp,.draw-on .copperp,.draw-on .glassp,.draw-on .thin,.draw-on .joint,.draw-on .brass,.draw-on .port,.draw-on .face,.draw-on .copper{
  stroke-dasharray:1600;stroke-dashoffset:1600;fill-opacity:0;animation:drawOn 2.4s cubic-bezier(.5,0,.3,1) forwards, fillIn .9s ease 1.6s forwards}
.draw-on .pipe,.draw-on .perch{stroke-dasharray:600;stroke-dashoffset:600;animation:drawOn 2s ease .8s forwards}
.draw-on .callout .lead{animation:fadeIn .8s ease 2s both}
.draw-on .callout text{animation:fadeIn .8s ease 2.1s both}
.draw-on .hotspot{animation:fadeIn .8s ease 2.2s both}
@keyframes drawOn{to{stroke-dashoffset:0}}
@keyframes fillIn{to{fill-opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- puzzle (portrait-first) ---------- */
.pz-top{padding-bottom:2px}
.goal{text-align:center;font-size:14px;color:var(--brass-hi);padding:0 16px 6px;line-height:1.35}
.board-wrap{flex:1;min-height:0;position:relative;margin:2px 10px 0;border-radius:16px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.04),transparent 72%);
  box-shadow:inset 0 0 0 1.5px rgba(236,235,228,.12), inset 0 0 60px rgba(0,0,0,.45)}
.board-wrap.wipe{animation:wipe .8s cubic-bezier(.6,0,.2,1) .15s both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.tip{position:absolute;left:12px;right:12px;top:10px;font-size:12px;color:var(--chalk-2);pointer-events:none;line-height:1.4}
.tip b{color:var(--brass-hi);font-weight:400}
.tools{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:4}
@media (max-width:560px){.seg button:not([data-view="all"]){font-size:0;gap:0;padding:7px 9px}.seg button .lyr{width:11px;height:11px}.tools{right:8px}}
.seg{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1.5px solid rgba(236,235,228,.25);background:rgba(15,20,22,.82);backdrop-filter:blur(4px)}
.seg[hidden],.seg button[hidden]{display:none}
.seg button,.seg-btn{border:0;background:none;padding:7px 10px;min-width:44px;min-height:44px;font-size:12px;letter-spacing:.06em;color:var(--chalk-2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.seg button+button{border-top:1px solid rgba(236,235,228,.14)}
.seg button.on{background:rgba(255,199,102,.16);color:var(--glow)}
.seg-btn{border:1.5px solid rgba(236,235,228,.25);border-radius:12px;background:rgba(15,20,22,.82);font-size:14px;padding:6px 11px}
.seg-btn.on{border-color:var(--glow);color:var(--glow);background:rgba(255,199,102,.12)}
.lyr{width:9px;height:9px;border-radius:50%;border:2px solid var(--chalk-2)}
.lyr.l1{border-color:var(--l1)}.lyr.l2{border-color:var(--l2)}
#btn-undo:disabled{opacity:.3;cursor:default}
/* first-time mechanic card */
.intro{position:absolute;inset:0;display:grid;place-items:center;z-index:8;opacity:0;pointer-events:none;transition:opacity .3s;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),rgba(0,0,0,.25) 75%)}
.intro.show{opacity:1;pointer-events:auto}
.intro-card{width:min(360px,calc(100% - 32px));text-align:center;padding:16px 20px 18px;border-radius:16px;background:rgba(15,20,22,.95);border:1.5px solid var(--accent);
  box-shadow:0 18px 40px rgba(0,0,0,.6);transform:translateY(14px) scale(.96);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.intro.show .intro-card{transform:none}
.intro-kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--glow)}
#intro-art{width:100%;height:120px;margin:6px 0 2px;overflow:visible}
#intro-art .rot{transform-box:view-box;transform-origin:0 0} /* turning is set per gear, at its true ratio (introTrain) */
.intro-arrow{font-size:30px;fill:var(--glow)}
.intro-needle{animation:needleSweep 2.6s ease-in-out infinite}
@keyframes needleSweep{0%,100%{transform:rotate(-100deg)}45%,60%{transform:rotate(15deg)}}
.intro-card h3{font-family:'Cabin Sketch',cursive;font-size:26px;margin:4px 0 6px;color:var(--chalk)}
.intro-card p{font-size:13.5px;line-height:1.5;color:var(--chalk-2);margin:0 0 14px}
.status{position:absolute;left:50%;bottom:12px;transform:translate(-50%,10px);max-width:calc(100% - 24px);text-align:center;font-size:14px;
  padding:8px 14px;border-radius:20px;background:rgba(12,16,18,.88);border:1px solid var(--chalk-3);color:var(--chalk-2);
  opacity:0;pointer-events:none;transition:opacity .3s, transform .3s, color .3s}
.status.show{opacity:1;transform:translate(-50%,0)}
.status.bad{color:var(--bad);border-color:rgba(236,106,85,.5)}.status.ok{color:var(--ok);border-color:rgba(159,224,168,.5)}.status.warn{color:var(--warn);border-color:rgba(242,181,79,.5)}
.status.pop{animation:statusPop .35s ease}
@keyframes statusPop{from{transform:translate(-50%,0) scale(1.06)}}
.tray{display:flex;gap:12px;padding:14px 12px 12px;overflow-x:auto;overflow-y:visible;touch-action:pan-x;justify-content:safe center;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tray::-webkit-scrollbar{display:none}
.drawer{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:74px;height:78px;padding:4px;border-radius:14px;cursor:grab;touch-action:none;
  background:linear-gradient(180deg,#232c31,#1a2125);border:1.5px solid #6e4f18;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 14px rgba(0,0,0,.4);transition:transform .2s,border-color .2s,opacity .2s}
body[data-theme="silver"] .drawer{border-color:#6c777e}
body[data-theme="iron"] .drawer{border-color:#7a4424}
body[data-theme="crystal"] .drawer{border-color:#3f8fa0}
body[data-theme="brine"] .drawer{border-color:#3f8c78}
body[data-theme="clock"] .drawer{border-color:#8a6a34}
.drawer.sel{border-color:var(--glow);box-shadow:0 0 0 3px rgba(255,199,102,.35),0 8px 18px rgba(0,0,0,.45);transform:translateY(-4px)}
.drawer:hover{transform:translateY(-3px);border-color:var(--accent-hi)}
.drawer:active{transform:scale(.95)}
.drawer:hover svg .rot{animation:spin 3s linear infinite}
.drawer.info{cursor:help}
.drawer svg{width:48px;height:48px;overflow:visible;pointer-events:none}
.drawer svg .rot{transform-box:fill-box;transform-origin:center}
.drawer .dtext{display:none}
.drawer .dn{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:18px;line-height:1}
.drawer .dt{font-size:11px;color:var(--chalk-2);letter-spacing:.06em}
.drawer .tagline{font-size:11px;color:var(--chalk-2);letter-spacing:.06em;margin-top:2px;white-space:nowrap}
.drawer .cnt{position:absolute;top:-9px;right:-9px;min-width:26px;height:26px;border-radius:13px;display:grid;place-items:center;font-size:13px;color:#2a1c06;
  background:radial-gradient(circle at 35% 30%,#fff1c4,#c9a04a 55%,#6e4f18);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.drawer.empty{opacity:.35;cursor:not-allowed;filter:grayscale(.6)}
.drawer.bump{animation:drawerBump .35s ease}
@keyframes drawerBump{50%{transform:scale(1.08)}}

/* ---------- gears: shared ---------- */
.gear .body{stroke-width:2.2;stroke-linejoin:round}
.gear .chalk2{fill:none;stroke-width:1;stroke-dasharray:22 5 9 3;opacity:.5}
.gear .ring{fill:none;stroke-width:1.6}
.gear .rivet{fill:url(#rivetGrad)}
.gear .crank{stroke:#fff3c8;stroke-width:5;stroke-linecap:round}
.gear .knob{fill:url(#copperGrad);stroke:#fff3c8;stroke-width:1.5}
/* skins */
.skin-rings .body{fill:var(--slate);stroke:var(--chalk)}
.skin-rings .chalk2,.skin-rings .ring{stroke:var(--chalk)}
.skin-spokes .body{fill:url(#brassGrad);stroke:var(--brass-hi)}
.skin-spokes .chalk2{stroke:#fff3c8}
.skin-spokes .spoke{fill:none;stroke:url(#brassGrad);stroke-linecap:round}
.skin-spokes .hubdisk{fill:url(#brassGrad);stroke:var(--brass-hi);stroke-width:1.5}
.skin-spokes .axlehole{fill:#1b2022;stroke:#6e4f18}
.skin-filigree .body{fill:url(#silverGrad);stroke:#f4f7fa}
.skin-filigree .chalk2{stroke:#fff}
.skin-filigree .fil{fill:none;stroke:#fff;stroke-width:1.2;stroke-dasharray:2 4;opacity:.75}
.skin-filigree .dot{fill:#fff;opacity:.85}
.skin-iron .body{fill:url(#ironGrad);stroke:#b3bbbf;stroke-width:2.6}
.skin-iron .chalk2{stroke:#cfd6d9}
.skin-iron .ring{stroke:#8a9297}
.skin-iron .hex{fill:#59626a;stroke:#d0d7da;stroke-width:1}
.skin-iron .scratch{stroke:rgba(235,235,235,.35);stroke-width:1;fill:none}
.skin-copper .body{fill:url(#copperGrad);stroke:#f6c7a4}
.skin-copper .chalk2{stroke:#ffe0c8}
.skin-copper .patina{fill:none;stroke:#6fbfa2;stroke-width:2;stroke-dasharray:6 9;opacity:.7}
.skin-crystal .body{fill:url(#crystalGrad);stroke:#c9f6ff}
.skin-crystal .chalk2{stroke:#e8feff}
.skin-crystal .facet{fill:none;stroke:rgba(210,250,255,.55);stroke-width:1}
.skin-crystal .glowcore{fill:url(#crystalGlow)}
.skin-outline .body{fill:rgba(47,67,82,.25);stroke:var(--chalk-2)}
.skin-outline .ring,.skin-outline .chalk2{stroke:var(--chalk-3)}
/* roles */
.role-player{cursor:grab}
.role-rust .body{fill:#4d2714;stroke:#c07a4f;stroke-dasharray:7 3}
.role-rust .ring{stroke:#8a4a2a}.role-rust .chalk2{stroke:#c07a4f}
.role-rust{cursor:pointer}
.role-rust:hover .body{fill:#6a3419}
.role-ratchet .body{stroke:var(--warn)}
/* ebony (clocktower) skin */
.skin-ebony .body{fill:#1d1714;stroke:#e0b866;stroke-width:2.4}
.skin-ebony .chalk2{stroke:#f3dc9b}
.skin-ebony .gilt{fill:none;stroke:url(#brassGrad);stroke-width:2.2}
.skin-ebony .tick{stroke:#e0b866;stroke-width:1.6;stroke-linecap:round}
/* glass: fragile, must stay still */
.skin-glass .body{fill:rgba(200,240,255,.16);stroke:#e8fbff;stroke-width:1.8;stroke-dasharray:none}
.skin-glass .chalk2{stroke:#ffffff;opacity:.35}
.skin-glass .sheen{fill:rgba(220,248,255,.12);stroke:rgba(232,251,255,.5);stroke-width:1}
.skin-glass .shine{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.7}
.skin-glass .crack{fill:none;stroke:#fff;stroke-width:1.4;opacity:0;transition:opacity .2s}
.role-glass{filter:drop-shadow(0 0 6px rgba(190,240,255,.45))}
.gear.shatter .body{fill:rgba(236,106,85,.22);stroke:var(--bad)}
.gear.shatter .crack{opacity:1;stroke:var(--bad)}
.gear.shatter{animation:glassShake .12s linear infinite}
.shatter-demo .crack{opacity:1}
@keyframes glassShake{25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}
.glass-label{fill:#c9f6ff}
/* compounds on the board */
.flip-badge{pointer-events:none}
.flip-badge circle{fill:rgba(20,25,28,.85);stroke:var(--accent-hi);stroke-width:1.2}
.flip-badge text{font-size:11px;fill:var(--accent-hi)}
.rv-badge circle{stroke:var(--rv-badge)}.rv-badge text{fill:var(--rv-badge)}
.rv-bracket{pointer-events:none;filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}
.rv-arm,.rv-pin{fill:url(#silverGrad);stroke:var(--rv-steel-lo);stroke-width:1.1}
.rv-tooth{stroke:var(--rv-steel-lo);stroke-width:1.6}
.flipanim{transform-box:fill-box;transform-origin:center;animation:flipIn .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes flipIn{from{transform:scaleX(-.2) scale(1.12)}}
.gear.top{filter:drop-shadow(0 16px 9px rgba(0,0,0,.65))}
.gear.jam .body{stroke:var(--bad);stroke-width:3}
.gear.high{filter:drop-shadow(0 9px 6px rgba(0,0,0,.6))}
.padlock-badge{pointer-events:none}
.padlock-badge .shackle{stroke-width:2.2}
.pop{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.3,1.7,.5,1) both}
@keyframes pop{from{transform:scale(1.22) translateY(-6px);opacity:.4}}
/* pegs & posts */
.peg .ring{fill:rgba(0,0,0,.18);stroke:var(--chalk-3);stroke-width:1.5;stroke-dasharray:4 5}
.peg .ring2{fill:none;stroke:var(--accent-hi);stroke-width:1.2;stroke-dasharray:2 4;opacity:.7}
.peg-tag{font-size:calc(8.5px * var(--k,1));letter-spacing:.2em;fill:var(--accent-hi);opacity:.8}
.peg .bolt,.post .bolt{fill:url(#rivetGrad);stroke:#3a2a0c;stroke-width:1}
.peg.high .bolt,.post.tall .bolt{filter:drop-shadow(0 5px 3px rgba(0,0,0,.7));stroke-width:2}
.peg .slot{stroke:#3a2a0c;stroke-width:1.6}
.peg.near .ring{stroke:var(--ok);stroke-dasharray:none;fill:rgba(159,224,168,.08)}
.peg-hit{fill:transparent}
.peg.L1 .ring2,.peg.L1 .peg-tag{stroke:var(--l1);fill:var(--l1)}
.peg.L1 .ring2{fill:none}
.peg.L2 .ring2{fill:none;stroke:var(--l2)}
.peg.L2 .peg-tag{fill:var(--l2)}
.peg.L2 .bolt{stroke:#1d4a5c}
.peg.open .ring{stroke:var(--glow);stroke-dasharray:none;animation:hintPulse 1.2s ease-in-out infinite}
.peg.open{cursor:pointer}
/* layer focus view: fade everything not on the chosen layer */
#world .ly-low,#world .ly-high,#world .ly-top,#world .peg{transition:opacity .25s}
#world[data-view="0"] .ly-high,#world[data-view="0"] .ly-top,#world[data-view="0"] .peg:not(.L0){opacity:.12}
#world[data-view="1"] .ly-low,#world[data-view="1"] .ly-top,#world[data-view="1"] .peg:not(.L1){opacity:.12}
#world[data-view="2"] .ly-low,#world[data-view="2"] .ly-high,#world[data-view="2"] .peg:not(.L2){opacity:.12}
#world[data-view] .ly-pulleys,#world[data-view] .ly-links{transition:opacity .25s}
#world[data-view="0"] .ly-pulleys,#world[data-view="1"] .ly-pulleys,#world[data-view="2"] .ly-pulleys{opacity:.3}
/* spin readout + drag preview */
.chip-spin{pointer-events:none}
.chip-spin rect{fill:rgba(15,20,22,.85);stroke:var(--accent-hi);stroke-width:1}
.chip-spin text{font-size:12px;fill:var(--chalk)}
.chip-spin.jam rect{stroke:var(--bad)}.chip-spin.jam text{fill:var(--bad)}
.chip-spin.pv rect{stroke:var(--ok)}
.pv-dot{fill:var(--ok);opacity:.9;filter:drop-shadow(0 0 5px var(--ok));pointer-events:none;animation:hintPulse .9s ease-in-out infinite}
.pv-dot.hi{fill:#d9ffe0}
.peg.hinted .ring,.hinted .body,.pulley.hinted .pl-rim,.pulley.hinted .sp-body{stroke:var(--glow) !important;stroke-width:3.5;stroke-dasharray:none;animation:hintPulse .9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes hintPulse{50%{opacity:.35}}
.peg-in{animation:pegIn .6s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:center}
@keyframes pegIn{from{transform:scale(0);opacity:0}}
/* pulleys & links */
.pulley{cursor:crosshair}
.pulley .pl-rim{fill:#2a2522;stroke:#d8b25e;stroke-width:2.2}
.pulley .pl-groove{fill:none;stroke:rgba(0,0,0,.6);stroke-width:3}
.pulley .pl-disk{fill:url(#brassGrad);stroke:#f3dc9b;stroke-width:1}
.pulley .pl-spoke{stroke:#6e4f18;stroke-width:2.2}
.pulley .pl-hub{fill:#1b2022}
.pulley.sprocket .sp-body{fill:url(#ironGrad);stroke:#d0d7da;stroke-width:1.6}
.pulley:hover .pl-rim,.pulley:hover .sp-body{stroke:var(--glow);stroke-width:3}
.link .link-body{fill:none;stroke-linejoin:round;pointer-events:none}
.link .link-hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke}
.link.belt .link-body{stroke:#3a2a20;stroke-width:6;stroke-dasharray:14 6;filter:drop-shadow(0 0 0 #000)}
.link.belt{filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}

.link.belt .link-body{stroke:#8a5a36}
.link.belt.crossed .link-body{stroke:#a86a3e}
.link.chain .link-body{stroke:#c3c9cc;stroke-width:6;stroke-dasharray:4 4;stroke-linecap:butt}
.link:hover .link-body{stroke:var(--glow)}
.link.snapin{animation:snapin .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes snapin{from{opacity:.2}}
.link-preview{fill:none;stroke:var(--chalk-2);stroke-width:3;stroke-dasharray:8 6;pointer-events:none}
.link-preview.snap{stroke:var(--ok)}.link-preview.bad{stroke:var(--bad)}
.icon-belt{fill:none;stroke:#8a5a36;stroke-width:5;stroke-dasharray:10 4}
.icon-belt.chain{stroke:#c3c9cc;stroke-dasharray:4 4}
/* ghost */
svg .ghost{pointer-events:none}
.ghost .lift{transition:transform .12s ease-out;filter:drop-shadow(0 14px 10px rgba(0,0,0,.55))}
.ghost.snap .body{stroke:var(--ok)}
.ghost.bad .body{stroke:var(--bad);fill:rgba(120,30,20,.6)}
.ghost .body{opacity:.94}
.ghost.raised .lift{filter:drop-shadow(0 20px 10px rgba(0,0,0,.6))}
.ghost-high{filter:drop-shadow(0 8px 5px rgba(0,0,0,.6))}
/* labels, arrows, dials */
.t-label{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:calc(17px * var(--k,1));fill:var(--chalk)}
.t-need{font-size:calc(12px * var(--k,1));fill:var(--brass-hi);letter-spacing:.04em}
.d-label{font-size:calc(10.5px * var(--k,1));fill:var(--brass-hi);letter-spacing:.22em}
.arrow{fill:none;stroke:var(--chalk-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.arrow.ok{stroke:var(--ok)}
.arrow.bad{stroke:var(--bad);animation:blink .5s infinite}
.arrow.oneway{stroke:var(--warn);stroke-dasharray:5 5;opacity:.8}
.dial-arc{fill:none;stroke:var(--chalk-3);stroke-width:4;stroke-linecap:round}
.dial-band{fill:none;stroke:var(--ok);stroke-width:4;stroke-linecap:round;opacity:.8}
.dial-needle{stroke:var(--bad);stroke-width:2.5;stroke-linecap:round;transform-box:view-box;transform-origin:0 0;transition:transform .9s cubic-bezier(.3,1.5,.4,1)}
.dial-pin{fill:url(#brassGrad)}
.dial-txt{font-size:14px;fill:var(--chalk-2)}.dial-txt.ok{fill:var(--ok)}.dial-txt.bad{fill:var(--bad)}
.pawl-arm{fill:url(#brassGrad);stroke:#f3dc9b;stroke-width:1}
.pawl-pin{fill:url(#rivetGrad)}
.pawl.clack .pawl-arm{animation:clack .14s steps(2) infinite;transform-box:view-box;transform-origin:0 0}
@keyframes clack{50%{transform:rotate(14deg)}}
.gate-chain{fill:none;stroke:#b9c0c4;stroke-width:5;stroke-dasharray:5 3;opacity:.85}
.gate-lock{filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.gate.open .gate-lock{animation:lockDrop 1s cubic-bezier(.5,0,.8,.6) forwards}
.gate.open .gate-lock .shackle{animation:shackleUp .3s ease forwards}
.gate.open .gate-chain{animation:fadeOut .6s ease .2s forwards}
@keyframes lockDrop{0%{transform:none}25%{transform:translateY(-8px) rotate(-10deg)}100%{transform:translateY(90px) rotate(30deg);opacity:0}}
@keyframes shackleUp{to{transform:translateY(-6px)}}
.contact{fill:var(--glow);opacity:.85;filter:drop-shadow(0 0 4px var(--glow))}
.contact.hi{fill:#fff3c8}
.jam-x path{fill:none;stroke:var(--bad);stroke-width:4;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .35s ease forwards}
.jam-x path:nth-child(2){animation-delay:.15s}
.wrong-note{font-family:'Cabin Sketch';font-weight:700;font-size:calc(17px * var(--k,1));fill:var(--bad)}
.deco-text{font-family:'Cabin Sketch',cursive;fill:var(--chalk-3);font-size:22px}

/* solved stamp */
.solved{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .3s}
.solved.show{opacity:1;pointer-events:auto;background:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 70%)}
.stamp{text-align:center;padding:20px 24px 20px;max-width:calc(100% - 28px);border-radius:14px;transform:scale(2.2) rotate(-12deg);opacity:0;
  background:
    radial-gradient(circle at 12px 12px,#fff3c8 0 2px,#6e4f18 3px,transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px,#fff3c8 0 2px,#6e4f18 3px,transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px),#fff3c8 0 2px,#6e4f18 3px,transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#fff3c8 0 2px,#6e4f18 3px,transparent 4px),
    linear-gradient(170deg,#f6de9c,#c79a42 35%,#8d6523 75%,#5e4214);
  color:#2a1c06;box-shadow:0 20px 50px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.3)}
.solved.show .stamp{animation:slam .45s cubic-bezier(.5,0,.6,1.4) forwards}
@keyframes slam{0%{transform:scale(2.2) rotate(-12deg);opacity:0}70%{opacity:1}100%{transform:scale(1) rotate(-4deg);opacity:1}}
.stamp .big{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:clamp(40px,11vw,64px);line-height:1;letter-spacing:.05em;text-shadow:0 1px 0 rgba(255,240,200,.7)}
.stamp-stars{font-size:40px;letter-spacing:.15em;margin:4px 0 0}
.stamp-stars span{display:inline-block;color:rgba(42,28,6,.25);transform:scale(.6);transition:all .4s cubic-bezier(.3,2,.5,1)}
.stamp-stars span.on{color:#fff8d8;transform:scale(1.1);text-shadow:0 0 12px #fff0b0,0 2px 0 #6e4f18}
.stamp .sub{font-size:15px;letter-spacing:.2em;margin:6px 0 4px;text-transform:uppercase}
.stamp .note{font-size:12px;margin:0 0 14px;opacity:.75}
.stamp .btn{background:#2a1c06;color:var(--brass-hi);box-shadow:0 3px 0 #000;min-height:44px}
.stamp .btn.ghost.dark{background:rgba(255,255,255,.18);color:#2a1c06;box-shadow:none}
.stamp-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.jolt{animation:shake .35s ease both}

/* finale banner */
#finale{position:fixed;left:50%;bottom:calc(var(--frame) + 18px + env(safe-area-inset-bottom));width:min(360px,calc(100% - 32px));transform:translate(-50%,40px);opacity:0;z-index:30;pointer-events:none;
  text-align:center;padding:16px 22px;border-radius:16px;background:rgba(15,20,22,.93);border:1.5px solid var(--accent);
  box-shadow:0 12px 40px rgba(0,0,0,.6);transition:all .7s cubic-bezier(.3,1.4,.5,1)}
#finale.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#finale h3{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:30px;margin:0 0 4px;color:var(--glow)}
#finale p{margin:0 0 12px;color:var(--chalk-2);font-size:13px;line-height:1.5}
#toast{position:fixed;top:calc(var(--frame) + 70px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-20px);opacity:0;z-index:30;pointer-events:none;
  width:max-content;max-width:calc(100% - 32px);text-align:center;padding:10px 16px;border-radius:12px;background:rgba(15,20,22,.93);border:1.5px dashed var(--chalk-3);font-size:14px;transition:all .5s}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* phones: thinner frame, no callout text on the robot (hotspots only) */
@media (max-width:700px){
  :root{--frame:6px}
  #robot .callout{display:none}
  .brand{font-size:24px}
  .brand-sm{font-size:22px}
  .map-head{font-size:24px}
  #frame i{display:none}
}
/* landscape phones & tablets: robot left, levels right */
@media (min-aspect-ratio:5/4) and (min-width:600px){
  .shop-body{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(300px,380px);padding:0 16px 14px}
  .levels-panel{align-self:stretch}
}
/* tablets and up: roomier board + labelled tray */
@media (min-width:760px){
  .board-wrap{margin:4px 20px 0}
  .goal{font-size:15px}
  .drawer{flex-direction:row;width:auto;height:auto;padding:8px 16px 8px 8px;gap:8px}
  .drawer .dtext{display:block}
  .drawer .tagline{display:none}
  .drawer svg{width:52px;height:52px}
  .tip{font-size:13px;left:18px;top:14px}
}
/* short landscape phones: squeeze vertical chrome */
@media (max-height:480px) and (orientation:landscape){
  .topbar{min-height:48px;padding:6px 12px 2px}
  .goal{font-size:12px;padding-bottom:2px}
  .tray{padding:10px 10px 6px}
  .drawer{flex-direction:column;width:60px;height:60px;padding:4px;gap:0}
  .drawer svg{width:36px;height:36px}
  .drawer .dtext,.drawer .tagline{display:none}
  .tip{display:none}
  .shop-body{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(260px,340px)}
}
body.still :is(.shake,.jolt){animation:none}
body.still #bg-deco{transition:none}

/* ===== Chronos ===== */
#robot .belfry{fill:#120e0c;stroke:var(--chalk);stroke-width:2.2}
#robot #face{fill:#f1e6c8;stroke:#6e4f18;stroke-width:2}
#robot .face-ticks{fill:none;stroke:#2a1c06;stroke-width:2;stroke-linecap:round}
#robot .numeral{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:17px;fill:#2a1c06;text-anchor:middle}
#robot .hand{fill:#1d1714;stroke:#6e4f18;stroke-width:1}
#robot .crack-line{fill:none;stroke:#7b3a1c;stroke-width:2;transition:opacity .8s}
#robot .moon-disc{fill:#f6ecc0;stroke:#fff3c8;stroke-width:1.5}
#robot .moon-disc.dark{fill:#2b3a4a;stroke:#8fd8ff}
#robot .case{fill:#120e0c;stroke:var(--chalk);stroke-width:2.2}
#robot .esc path{fill:url(#brassGrad);stroke:#f3dc9b;stroke-width:1}
#robot .rod-thin{fill:none;stroke:#caa14e;stroke-width:4;stroke-linecap:round}
#robot .anchor{fill:none;stroke:#b9c0c4;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.bot-chronos #hourHand,.bot-chronos #minHand,.bot-chronos #moon,.bot-chronos #pendulum,.bot-chronos #escWheel,.bot-chronos #bell{transform-box:view-box;transform-origin:0 0}
.bot-chronos #bell{transform-origin:0 8px}
.bot-chronos .bird{fill:#20242a;stroke:var(--chalk);stroke-width:1.8;stroke-linejoin:round}
.bot-chronos .bird-eye{fill:#ffc766}
.bot-chronos #bird{transform-box:view-box;transform-origin:0 0}
.bot-chronos.f-chime #bird{animation:birdHop 5s ease-in-out infinite}
.bot-chronos.alive #bird{animation:birdHop 1.3s ease-in-out infinite}
@keyframes birdHop{0%,70%,100%{transform:translateY(0) rotate(0)}78%{transform:translateY(-6px) rotate(-6deg)}86%{transform:translateY(0) rotate(0)}}
.bot-chronos:not(.f-hands) #minHand{transform:rotate(128deg)}
.bot-chronos:not(.f-hands) #hourHand{transform:rotate(200deg)}
.bot-chronos.f-hands #minHand{animation:spin 12s linear infinite}
.bot-chronos.f-hands #hourHand{animation:spin 144s linear infinite}
.bot-chronos.f-hands #faceCrack{opacity:0}
.bot-chronos:not(.f-escapement) #pendulum{transform:rotate(9deg)}
.bot-chronos.f-escapement #pendulum{animation:pend 2s ease-in-out infinite}
.bot-chronos.f-escapement #escWheel{animation:spin 30s steps(60) infinite}
.bot-chronos:not(.f-chime) #bell .brass{fill:#4a3a22}
.bot-chronos.f-chime #bell{animation:bellSwing 4s ease-in-out infinite}
.bot-chronos:not(.f-moondial) #moon{opacity:.4;transform:rotate(60deg)}
.bot-chronos.f-moondial #moon{animation:spin 40s linear infinite}
.bot-chronos.f-moondial .moon-disc:not(.dark){filter:drop-shadow(0 0 8px #fff3c8)}
.bot-chronos.alive #minHand{animation-duration:2s}.bot-chronos.alive #hourHand{animation-duration:24s}
.bot-chronos.alive #bell{animation:bellSwing 1.1s ease-in-out infinite}
.bot-chronos.alive #pendulum{animation-duration:1s}
@keyframes pend{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes bellSwing{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(14deg)}88%{transform:rotate(-10deg)}95%{transform:rotate(4deg)}}
/* ring gear */
.bevel-gear .body{fill:url(#brassGrad);stroke:var(--bevel-tooth-edge)}
.bevel-gear .chalk2{stroke:var(--bevel-tooth)}
.bevel-gear .bv-cone{fill:url(#bevelCone)}
.bevel-gear .bv-teeth{fill:url(#bevelTooth);stroke:var(--bevel-tooth-edge);stroke-width:.8;stroke-linejoin:round}
.bevel-gear .bv-root{stroke:var(--bevel-root);stroke-width:1.2;stroke-linecap:round}
.bevel-gear .bv-toe{fill:none;stroke:var(--bevel-root);stroke-width:1.6}
.bevel-gear .bv-hub{fill:url(#brassGrad);stroke:var(--bevel-tooth);stroke-width:1.5}
.bevel-gear .bv-key{fill:var(--bevel-root)}
.bevel-gear .axlehole{fill:var(--bevel-root);stroke:var(--bevel-tooth-edge)}
.bevel-gear .bv-shade{fill:url(#bevelShade);pointer-events:none}
.bv-tooth-hi{stop-color:var(--bevel-tooth)}.bv-tooth-mid{stop-color:var(--bevel-tooth-mid)}.bv-tooth-lo{stop-color:var(--bevel-tooth-lo)}
.bv-cone-hi{stop-color:var(--bevel-cone)}.bv-cone-lo{stop-color:var(--bevel-cone-lo)}
.bv-light{stop-color:var(--bevel-light)}.bv-clear{stop-color:rgba(0,0,0,0)}.bv-dark{stop-color:var(--bevel-dark)}
.ring-gear .ring.band{fill:none;stroke:rgba(0,0,0,.25);stroke-width:2;stroke-dasharray:3 6}
.intro-spin{transform-box:view-box;transform-origin:0 0} /* about the axle, not the outline's box (odd tooth counts are lopsided) */
.rs-ring{animation:spin 24s linear infinite reverse}.rs-sun{animation:spin 6s linear infinite}.rs-planet{animation:spin 9s linear infinite reverse}
/* worm drive */
.screw-body{fill:url(#brassGrad);stroke:#f3dc9b;stroke-width:1.4}
.screw-thread{stroke:rgba(60,38,8,.75);stroke-width:3.2;stroke-linecap:round;fill:none}
.screw-shine{fill:rgba(255,248,220,.35)}
.screw-cap{fill:#3a3f43;stroke:var(--chalk-2);stroke-width:1.2}
.screw.jam{animation:shake .25s linear infinite}
.gb-plate{fill:rgba(20,26,30,.85);stroke:var(--chalk-3);stroke-width:1.5;stroke-dasharray:5 4}
.gb-shaft{stroke:var(--chalk-2);stroke-width:7;stroke-linecap:round}
.intro-thread{animation:thread 1.2s linear infinite}
@keyframes thread{from{transform:translateX(-9.42px)}to{transform:translateX(0)}}

/* Geneva drive: under the gears on its two axles */
.gv-plate{fill:rgba(20,26,30,.85);stroke:var(--chalk-3);stroke-width:1.5;stroke-dasharray:5 4}
.gv-star{fill:url(#brassGrad);stroke:var(--brass-hi);stroke-width:1.4}
.gv-groove{fill:none;stroke:rgba(60,38,8,.6);stroke-width:1.2}
.gv-crank{fill:url(#brassGrad);stroke:var(--brass-hi);stroke-width:1.2}
.gv-pin{fill:#3a3f43;stroke:var(--chalk-2);stroke-width:1.2}
.gv-hub{fill:#3a3f43;stroke:var(--chalk-3);stroke-width:1.2}
.geneva.jam{animation:shake .25s linear infinite}
.intro-gv-pin{animation:gv-pin 2.333s linear infinite}
.intro-gv-star{animation:gv-star 2.333s linear infinite}
@keyframes gv-pin{from{transform:rotate(180deg)}to{transform:rotate(540deg)}}
@keyframes gv-star{0%,37.5%{transform:rotate(-45deg)}62.5%,100%{transform:rotate(-135deg)}}

/* rack & pinion */
.rack-channel{fill:rgba(20,26,30,.7);stroke:var(--chalk-3);stroke-width:1.5;stroke-dasharray:6 5}
.rack-bracket{fill:#3a3f43;stroke:var(--chalk-2);stroke-width:1.2}
.rack-tooth{fill:url(#brassGrad);stroke:rgba(60,38,8,.7);stroke-width:1}
.rack-bar{fill:url(#brassGrad);stroke:#f3dc9b;stroke-width:1.3}
.rack-plate{fill:url(#ironGrad);stroke:var(--chalk);stroke-width:1.6}
.rack-hatch{stroke:var(--chalk-3);stroke-width:1.2;stroke-linecap:round}
.rack-bolt{fill:#f3dc9b}
.rack.strain{animation:shake .3s linear infinite}
.intro-rack{animation:rackslide .467s linear infinite} /* an M pinion (r 45) turning once per 7s: rim 40.4px/s */
.intro-link .link-body{animation:beltRun 1.49s linear infinite} /* 40px = whole belt (14+6) and chain (4+4) dash periods, at the r 30 pulley's rim speed */
@keyframes beltRun{to{stroke-dashoffset:-40}}

@keyframes rackslide{from{transform:translateX(0)}to{transform:translateX(-18.85px)}}

/* ---------- settings (js/ui/settings.js): a card over every screen, behind the cogs button ---------- */
.settings{position:fixed;inset:var(--frame);z-index:45;display:grid;place-items:center;padding:16px;overflow-y:auto;
  background:rgba(5,7,8,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.settings.show{opacity:1;pointer-events:auto}
.st-card{position:relative;width:min(400px,100%);padding:18px 20px 16px;border-radius:16px;color:var(--chalk);
  background:linear-gradient(180deg,#232a2e,#171c1f);border:1.5px solid var(--accent);box-shadow:0 18px 40px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.96);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.settings.show .st-card{transform:none}
.st-card h3{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:32px;line-height:1;margin:4px 0 6px}
.st-group{margin:16px 0 2px;padding-bottom:6px;border-bottom:1.5px dashed var(--chalk-3);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--glow)}
.st-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;cursor:pointer}
.st-label{font-size:15px;letter-spacing:.04em}
.st-label small{display:block;margin-top:2px;font-size:11.5px;letter-spacing:.04em;color:var(--chalk-2)}
.st-switch{flex:none;position:relative;width:46px;height:26px;padding:0;border-radius:13px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1.5px dashed var(--chalk-3);transition:background .2s,border-color .2s}
.st-switch i{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--rivet);box-shadow:0 1px 2px #000;
  opacity:.55;transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.st-switch[aria-checked="true"]{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 28%,transparent)}
.st-switch[aria-checked="true"] i{transform:translateX(20px);opacity:1}
/* .st-seg: a choice of a few, the picked one dressed like a switch that is on */
.st-row.stack{flex-direction:column;align-items:stretch;gap:8px;padding:6px 0 4px;cursor:default}
.st-seg{display:flex;height:30px;border-radius:15px;overflow:hidden;border:1.5px dashed var(--chalk-3);background:rgba(255,255,255,.03)}
.st-seg button{flex:1;min-width:0;padding:0 4px;border:0;border-radius:13px;background:none;color:var(--chalk-2);font:inherit;font-size:13px;letter-spacing:.04em;cursor:pointer;
  transition:background .2s,color .2s}
.st-seg button[aria-checked="true"]{background:color-mix(in srgb,var(--accent) 28%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--chalk)}
.st-switch:focus-visible,.st-seg button:focus-visible,.st-range:focus-visible{outline:2px dashed var(--glow);outline-offset:3px}
.st-range{flex:0 1 180px;min-width:0;height:22px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.st-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--fill,50%),var(--chalk-3) var(--fill,50%))}
.st-range::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--fill,50%),var(--chalk-3) var(--fill,50%))}
.st-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--rivet);box-shadow:0 1px 3px #000}
.st-range::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--rivet);box-shadow:0 1px 3px #000}
.st-range:disabled{opacity:.35;cursor:default}
.st-reset{width:100%;min-height:46px;margin-top:12px;font-size:14px}
.st-note{margin:8px 0 0;font-size:11.5px;line-height:1.5;color:var(--chalk-2);text-align:center}
.st-links{margin:10px 0 0;font-size:11.5px;letter-spacing:.04em;color:var(--chalk-2);text-align:center}
.st-links a{color:inherit;text-decoration:underline dashed;text-underline-offset:3px}
.st-links a:focus-visible{outline:2px dashed var(--glow);outline-offset:3px}