/* ─────────────────────────────────────────────────────────────────────────────
   FLOORS-BOTTOM — the shared frame for the Workshop, Break Room, Mail Room and
   Basement (fb-*), then the Workshop itself (ws-*). All four floor sheets are
   linked on the home page, so the shared bits live here once.

   A floor:  .fb-floor > .fb-back (far wall, parallax)  .floor-inner > .fb-head + .fb-room
             .fb-front (foreground pipes, parallax).  A room is a fixed-aspect stage
             (--rw × --rh units); props (.fb-p) are placed in those units with --x --y --w (--h).
   ───────────────────────────────────────────────────────────────────────────── */

.fb-floor {
  --fb-wall: var(--night-2);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--fb-wall);
}
.fb-floor .floor-inner.fb-inner { padding-top: clamp(84px, 9vh, 104px); padding-bottom: 0; }
/* Parallax decoration (fb-back / fb-front) stays out of the header text: it lives in the ceiling band
   above the header or in the side margins beside the content column (checked across 360–1920 wide). */
@media (min-width: 761px) {
  .fb-floor .floor-inner.fb-inner {
    width: min(100% - 76px - var(--gutter), var(--maxw));
    margin-left: max(76px, (100% - var(--maxw)) / 2 + 20px); margin-right: auto;
  }
}

/* heading block: real content, always first */
.fb-head { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr; gap: 0 40px; margin-bottom: clamp(14px, 2.4vh, 28px); }
.fb-head h2 { margin: 0 0 .2em; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.fb-head .floor-label { margin-bottom: .5em; }
.fb-lede { margin: 0 0 .7em; color: #D9D6E6; max-width: 44ch; }
.fb-head-side { display: flex; flex-direction: column; align-items: flex-start; }
.fb-real { background: rgba(13, 17, 32, .45); }
@media (min-width: 1000px) {
  .fb-head { grid-template-columns: auto minmax(280px, 440px); align-items: end; }
  .fb-head .floor-label { grid-column: 1 / -1; }
  .fb-head h2 { grid-column: 1; margin-bottom: .1em; }
  .fb-head-side { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* the room: a fixed-aspect stage, props placed in room units */
.fb-room {
  --rw: 1200; --rh: 600; --gh: 60;
  --u: calc(100cqw / var(--rw));
  position: relative; container-type: inline-size;
  aspect-ratio: var(--rw) / var(--rh);
  width: min(100%, (100svh - 240px) * var(--rw) / var(--rh));
  min-width: min(100%, 620px);
  margin-inline: auto;
}
.fb-p {
  position: absolute; z-index: 2; margin: 0;
  left: calc(var(--x) / var(--rw) * 100%);
  top: calc(var(--y) / var(--rh) * 100%);
  width: calc(var(--w) / var(--rw) * 100%);
}
.fb-p > svg { display: block; width: 100%; height: auto; overflow: visible; }
.fb-ground {
  position: absolute; z-index: 0; left: -100vw; right: -100vw; bottom: 0;
  height: calc(var(--gh) / var(--rh) * 100%);
  border-top: 5px solid var(--outline);
}
@media (max-width: 1020px) {
  .fb-room { --rw: 400; width: min(100%, 560px); min-width: 0; }
}

/* toy buttons */
.fb-btn {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; color: inherit;
  cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.fb-btn:focus-visible { outline: 3px solid var(--molten); outline-offset: 4px; border-radius: 14px; }

/* parallax layers */
.fb-back, .fb-front { position: absolute; left: 0; right: 0; pointer-events: none; }
.fb-back { top: -140px; bottom: -140px; z-index: 0; }
.fb-front { top: -110px; bottom: -110px; z-index: 3; }
.fb-deco { position: absolute; display: block; }

/* loops only run while the floor is on screen (JS adds .is-live) */
.fb-floor:not(.is-live) *, .fb-floor:not(.is-live) *::before, .fb-floor:not(.is-live) *::after { animation-play-state: paused !important; }

/* speech bubbles (used when Pivot isn't around to say it) */
.fb-bubble {
  position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  width: max-content; max-width: min(260px, 70vw); padding: .55em .85em; border-radius: 16px;
  background: var(--cream); color: var(--outline); border: 3px solid var(--outline);
  font: 600 1rem/1.25 var(--font-display); text-align: center; box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  pointer-events: none; animation: fb-bubble-in .35s var(--spring) both;
}
.fb-bubble::after { content: ''; position: absolute; left: 50%; top: 100%; width: 14px; height: 14px; background: var(--cream); border: 3px solid var(--outline); border-top: 0; border-left: 0; transform: translate(-50%, -7px) rotate(45deg); }
.fb-bubble.out { animation: fb-bubble-out .3s var(--ease-out) both; }
@keyframes fb-bubble-in { from { transform: translateX(-50%) scale(.4); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes fb-bubble-out { to { transform: translateX(-50%) translateY(-8px); opacity: 0; } }

/* ── glow-in-the-dark doodles (Night Artist) — invisible until the lights go out ── */
.fb-doodle {
  z-index: 1; color: #B8FF9E; opacity: 0; pointer-events: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(140, 255, 120, .9)) drop-shadow(0 0 12px rgba(90, 255, 110, .55));
  transition: opacity .4s;
}
html.fb-dark .fb-doodle { opacity: .95; pointer-events: auto; }
html.fb-dark .fb-doodle.is-found { opacity: 1; animation: fb-doodle-glow 2.4s ease-in-out infinite; }
.fb-doodle:focus-visible { outline: 3px dashed #B8FF9E; outline-offset: 6px; border-radius: 50%; }
@keyframes fb-doodle-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06) rotate(-2deg); } }

/* ── lights out: the dark, the flashlight, the glowing chain ── */
.fb-dark-veil {
  position: fixed; inset: 0; z-index: 68; pointer-events: none;
  background: rgba(3, 5, 12, .965);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: 0; transition: opacity .35s ease;
}
.fb-dark-veil.is-on { opacity: 1; }
.fb-dark-beam {
  position: fixed; inset: 0; z-index: 69; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), rgba(255, 238, 190, .10) 0, rgba(255, 238, 190, .05) 110px, transparent 170px);
}
.fb-dark-beam.is-on { opacity: 1; }
html.fb-dark, html.fb-dark body, html.fb-dark a, html.fb-dark button, html.fb-dark [role="button"], html.fb-dark [role="slider"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-40 16 16)'%3E%3Crect x='12' y='14' width='8' height='15' rx='2' fill='%2339425F' stroke='%230D1120' stroke-width='2'/%3E%3Cpath d='M9 6h14l-3 9h-8z' fill='%23C8A15A' stroke='%230D1120' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 5h12' stroke='%23FFF3DF' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") 8 6, crosshair;
}
.fb-dark-chain {
  position: fixed; z-index: 71; top: 0; right: max(86px, env(safe-area-inset-right)); width: 44px; height: 170px;
  padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; pointer-events: none;
  transform-origin: 50% 0; transition: opacity .3s;
}
.fb-dark-chain.is-on { opacity: 1; pointer-events: auto; animation: fb-sway 3.2s ease-in-out infinite; }
.fb-dark-chain.is-near { opacity: 0; pointer-events: none; }
.fb-dark-chain svg { width: 100%; height: 100%; overflow: visible; }
.fb-dark-chain:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; border-radius: 12px; }
@keyframes fb-sway { 0%, 100% { transform: rotate(2.5deg); } 50% { transform: rotate(-2.5deg); } }
.fb-dark-hint {
  position: fixed; z-index: 71; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  margin: 0; padding: .5em 1em; border-radius: 99px; background: rgba(13, 17, 32, .9); color: #CFE9C8; border: 2px solid #3E5B3A;
  font: 700 .9rem/1.2 var(--font-body); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .4s;
}
.fb-dark-hint.is-on { opacity: 1; }
@media (max-width: 760px) { .fb-dark-chain { right: 12px; } .fb-dark-hint { bottom: auto; top: calc(var(--head-h) + 10px); white-space: normal; width: max-content; max-width: calc(100vw - 120px); text-align: center; } }

/* the Night Artist gallery (in the cabinet) */
.fb-gallery { padding: clamp(16px, 3vw, 28px); background: radial-gradient(80% 60% at 50% 0%, rgba(90, 255, 110, .08), transparent 70%); min-height: 100%; }
.fb-gal-lede { color: #CFE9C8; max-width: 60ch; margin: 0 auto 1.2em; text-align: center; }
.fb-gallery ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fb-gallery li { background: #0A1410; border: 3px solid #1E3A2A; border-radius: 18px; padding: 14px; text-align: center; }
.fb-gallery li.got { border-color: #3E6B4A; box-shadow: inset 0 0 24px rgba(120, 255, 120, .12); }
.fb-gal-art { width: min(120px, 70%); aspect-ratio: 1; margin: 0 auto 8px; display: grid; place-items: center; color: #B8FF9E; filter: drop-shadow(0 0 4px rgba(140, 255, 120, .9)) drop-shadow(0 0 12px rgba(90, 255, 110, .5)); }
.fb-gal-art svg { width: 100%; height: 100%; }
.fb-gallery li p { margin: 0; font: 600 .95rem/1.25 var(--font-display); color: #E6FFD8; }
.toast.fb-doodle-toast { border-color: #3E6B4A; background: linear-gradient(135deg, #10241A, #172130); }
.toast.fb-doodle-toast .toast-k { color: #B8FF9E; }

/* a single, slow dim (DO NOT PRESS, "the lights flicker once") */
.fb-dim { position: fixed; inset: 0; z-index: 67; background: #03050C; pointer-events: none; opacity: 0; }

/* ═════════════════════════════ THE WORKSHOP ═════════════════════════════ */

.floor-workshop {
  --fb-wall: #20263F;
  background:
    radial-gradient(55% 45% at 22% 78%, rgba(255, 170, 80, .16), transparent 70%),
    radial-gradient(40% 40% at 85% 40%, rgba(255, 107, 26, .10), transparent 70%),
    linear-gradient(180deg, #1A1F36 0%, #232A45 55%, #2A2A42 100%);
}
.ws-back {
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(13, 17, 32, .22) 119px 122px),
    linear-gradient(180deg, transparent 0 calc(100% - 330px), rgba(60, 38, 30, .55) calc(100% - 330px), rgba(60, 38, 30, .55) 100%);
}
.ws-truss { top: 130px; left: 0; width: 100%; height: 64px; }
.ws-window { width: 180px; height: auto; opacity: .9; }
.ws-window-l { left: calc((100% - 1200px) / 2 - 196px); top: calc(140px + 16%); }
.ws-window-r { right: calc((100% - 1200px) / 2 - 196px); top: calc(140px + 12%); }
@media (max-width: 1599px) { .ws-window { display: none; } }
.ws-blueprint { width: 140px; left: max(20px, calc(50% - 900px)); top: calc(140px + 52%); transform: rotate(-3deg); opacity: .55; }
.ws-pegboard { width: 170px; right: max(24px, calc(50% - 900px)); top: calc(140px + 50%); opacity: .5; }
@media (max-width: 1599px) { .ws-blueprint, .ws-pegboard { display: none; } }

.ws-front .ws-pipe-r { right: -8px; top: 0; width: 64px; height: 100%; }
.ws-front .ws-bulb { display: none; }
@media (max-width: 1300px) { .ws-front .ws-pipe-r { right: -34px; } }
@media (max-width: 760px) { .ws-front .ws-pipe-r { display: none; } }

.ws-ground {
  background:
    repeating-linear-gradient(90deg, transparent 0 157px, rgba(13, 17, 32, .85) 157px 160px),
    linear-gradient(180deg, #A56A3F 0 5px, #7A4E35 5px, #6B4430 45%, #573524 100%);
}

/* positions: desktop room 1200 × 600 */
.ws-board    { --x: 16;  --y: 6;   --w: 500; aspect-ratio: 500 / 320; }
.ws-clock    { --x: 574; --y: 0;   --w: 170; }
.ws-doodle   { --x: 600; --y: 236; --w: 100; }
.ws-bench    { --x: 12;  --y: 382; --w: 440; }
.ws-robot    { --x: 214; --y: 377; --w: 54; z-index: 3; }
.ws-conveyor { --x: 448; --y: 392; --w: 360; }
.ws-machine  { --x: 750; --y: 90;  --w: 442; z-index: 3; }
.ws-machine-label { --x: 834; --y: 432; --w: 290; --h: 50; z-index: 4; }

/* the corkboard */
.ws-board {
  border-radius: calc(14 * var(--u));
  background:
    radial-gradient(circle at 20% 30%, rgba(90, 50, 20, .35) 0 1.5px, transparent 2px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 60%, rgba(255, 220, 170, .25) 0 1.5px, transparent 2px) 0 0 / 17px 21px,
    radial-gradient(circle at 50% 50%, rgba(90, 50, 20, .25) 0 1px, transparent 1.5px) 0 0 / 11px 13px,
    linear-gradient(160deg, #D59A5E, #C4854B 60%, #B0733E);
  border: calc(4 * var(--u)) solid var(--outline);
  box-shadow: inset 0 0 0 calc(12 * var(--u)) #8A5533, inset 0 0 0 calc(15 * var(--u)) var(--outline), inset 0 calc(22 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .18), 0 calc(8 * var(--u)) 0 rgba(0, 0, 0, .28);
}
.ws-board > .ws-board-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ws-board > .ws-polaroid { position: absolute; left: 5%; top: 50%; width: 21%; height: auto; }
.ws-board > .ws-todo { position: absolute; left: 29%; top: 57%; width: 29%; height: auto; }
.ws-notes { list-style: none; margin: 0; padding: 0; }
.ws-note { position: absolute; width: 27%; }
.ws-note a {
  position: relative; display: block; min-height: calc(118 * var(--u)); padding: calc(20 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  color: var(--outline); text-decoration: none; border: calc(3.5 * var(--u)) solid var(--outline); border-radius: calc(5 * var(--u));
  background: var(--paper, #FFF3DF); box-shadow: calc(3 * var(--u)) calc(5 * var(--u)) 0 rgba(0, 0, 0, .28);
  transform: rotate(var(--rot, 0deg)); transform-origin: 50% 0; transition: transform .35s var(--spring), box-shadow .3s;
}
.ws-note a::after { /* the curled paper corner */
  content: ''; position: absolute; right: -1px; bottom: -1px; width: calc(18 * var(--u)); height: calc(18 * var(--u));
  background: linear-gradient(135deg, var(--paper-2, #EAD7B6) 50%, transparent 50%); border-top-left-radius: 4px;
}
.ws-note a:hover, .ws-note a:focus-visible { transform: rotate(calc(var(--rot, 0deg) * -.6)) scale(1.06); box-shadow: calc(5 * var(--u)) calc(9 * var(--u)) 0 rgba(0, 0, 0, .25); color: var(--outline); }
.ws-note a:focus-visible { outline: 3px solid var(--molten); outline-offset: 3px; }
.ws-note-1 { left: 5%; top: 8%; --rot: -4deg; }
.ws-note-2 { left: 36.5%; top: 11%; --rot: 3deg; }
.ws-note-3 { left: 68%; top: 6%; --rot: -2deg; }
.n-cream { --paper: #FFF3DF; --paper-2: #E4CFA8; }
.n-mint { --paper: #CFF5EF; --paper-2: #9ED8CF; }
.n-pink { --paper: #FFD9EF; --paper-2: #E9A9CC; }
.ws-note-date { display: block; font: 800 calc(11.5 * var(--u))/1.2 var(--font-body); color: #6A5B4A; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .35em; }
.ws-note-date .draft-tag { font-size: calc(9 * var(--u)); padding: .25em .5em; background: rgba(255, 107, 26, .12); color: #B7440B; border-color: rgba(183, 68, 11, .5); }
.ws-note-title { display: block; font: 600 calc(16 * var(--u))/1.2 var(--font-display); text-wrap: balance; }
.ws-pin {
  position: absolute; left: 50%; top: calc(-9 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-left: calc(-9 * var(--u));
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF9A8A 0 20%, #E23D2E 45%, #A92317 100%);
  border: calc(2.5 * var(--u)) solid var(--outline); box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .3);
}
.n-mint .ws-pin { background: radial-gradient(circle at 35% 35%, #B9FFF6 0 20%, #4FD1C5 45%, #238C84 100%); }
.n-pink .ws-pin { background: radial-gradient(circle at 35% 35%, #FFE19A 0 20%, #FFC23D 45%, #B9851A 100%); }
.ws-sticky {
  position: absolute; left: 63.5%; top: 55%; width: 31%; margin: 0; padding: calc(18 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  background: linear-gradient(180deg, #FFE45C, #FFD93A 70%, #F5C823); color: #3A2A00;
  border: calc(3.5 * var(--u)) solid var(--outline); border-radius: calc(3 * var(--u));
  box-shadow: calc(3 * var(--u)) calc(5 * var(--u)) 0 rgba(0, 0, 0, .28);
  transform: rotate(4deg); transition: transform .35s var(--spring);
  font: 700 calc(13 * var(--u))/1.3 var(--font-body); text-align: left; cursor: pointer; appearance: none;
}
.ws-sticky:hover { transform: rotate(-2deg) scale(1.05); }
.ws-sticky b { display: block; font: 600 calc(15 * var(--u))/1.1 var(--font-display); color: var(--outline); }
.ws-words { display: block; font: 700 calc(16 * var(--u))/1.25 var(--font-display); color: #B7440B; margin: .2em 0; }
.ws-sticky-small { display: block; font-size: calc(11.5 * var(--u)); opacity: .8; }
.ws-sticky .ws-pin { background: radial-gradient(circle at 35% 35%, #C9B8FF 0 20%, #7C5CFF 45%, #4A2FC0 100%); }

/* the clock */
.ws-clock { cursor: grab; touch-action: none; border-radius: 50%; }
.ws-clock:active, .ws-clock.is-drag { cursor: grabbing; }
.ws-clock:focus-visible { outline: 3px solid var(--molten); outline-offset: 2px; border-radius: 50%; }
.ws-clock svg { transition: transform .4s var(--spring); transform-origin: 50% 2%; }
.ws-clock:hover svg { transform: rotate(-3deg); }
.ws-clock .ws-hand { transform-box: view-box; }
.ws-clock.is-drag .ws-hand-m path:first-child { stroke: #3A1A08; }

/* the bench, robot and conveyor */
.ws-lamp-glow { animation: ws-flicker 5s steps(1) infinite; }
@keyframes ws-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .9; } 44% { opacity: 1; } 71% { opacity: .94; } }
.ws-steam { animation: ws-steam 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.ws-steam.s2 { animation-delay: -1.5s; }
@keyframes ws-steam { 0% { opacity: 0; transform: translateY(6px) scaleY(.6); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px) scaleY(1.1); } }

.ws-robot svg { transform-origin: 50% 100%; }
.ws-robot-body { transform-box: fill-box; transform-origin: 50% 100%; animation: ws-robot-idle 3.4s ease-in-out infinite; }
@keyframes ws-robot-idle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
.ws-robot-key { transform-box: fill-box; transform-origin: 0 50%; animation: ws-key 2.4s linear infinite; }
@keyframes ws-key { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-.3); } }
.ws-robot.is-walk { animation: ws-robot-walk 1.6s ease-in-out both; }
.ws-robot.is-walk .ws-robot-body { animation: ws-robot-waddle .2s ease-in-out 8 alternate; }
.ws-robot.is-walk .ws-robot-key { animation-duration: .4s; }
@keyframes ws-robot-walk { 0% { transform: none; } 20% { transform: translate(calc(-30 * var(--u)), calc(-8 * var(--u))); } 40% { transform: translate(calc(-55 * var(--u)), 0); } 60% { transform: translate(calc(-30 * var(--u)), calc(-8 * var(--u))) scaleX(-1); } 80% { transform: translate(calc(-5 * var(--u)), 0) scaleX(-1); } 100% { transform: none; } }
@keyframes ws-robot-waddle { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

/* the machine */
.ws-machine { transition: transform .3s var(--spring); transform-origin: 50% 100%; }
.ws-machine:hover { transform: scale(1.015, .99); }
.ws-machine.is-thump { animation: ws-thump .5s var(--spring); }
@keyframes ws-thump { 0% { transform: scale(1); } 25% { transform: scale(1.05, .92); } 55% { transform: scale(.97, 1.04) translateY(-6px); } 100% { transform: scale(1); } }
.ws-piston { animation: ws-piston 1.1s cubic-bezier(.5, 0, .5, 1) infinite; }
.ws-piston-b { animation-delay: -.55s; }
@keyframes ws-piston { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(40px); } }
.ws-gear { transform-box: fill-box; transform-origin: center; animation: ws-spin 6s linear infinite; }
.ws-gear-b { animation-direction: reverse; animation-duration: 4.4s; }
.ws-gear-c { animation-duration: 2.8s; }
@keyframes ws-spin { to { transform: rotate(360deg); } }
.ws-puff { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ws-puff 2.2s ease-out infinite; }
.ws-puff.p2 { animation-delay: -.73s; }
.ws-puff.p3 { animation-delay: -1.46s; }
@keyframes ws-puff { 0% { opacity: 0; transform: translate(0, 24px) scale(.3); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(26px, -60px) scale(1.7); } }
.ws-needle-jit { animation: ws-jit .9s steps(2) infinite; transform-box: view-box; transform-origin: 112px 262px; }
@keyframes ws-jit { 0% { transform: rotate(-1.5deg); } 50% { transform: rotate(2deg); } }
.ws-beacon { animation: ws-beacon 1.4s steps(1) infinite; }
@keyframes ws-beacon { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
.ws-machine.is-thump .ws-lever { transform: rotate(-30deg); }
.ws-lever { transform-box: view-box; transform-origin: 410px 300px; transition: transform .35s var(--spring); }

.ws-machine-label {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 .4em;
  height: calc(var(--h) / var(--rh) * 100%); padding: 0 .4em;
  font: 600 calc(17 * var(--u))/1.1 var(--font-display); color: var(--cream); text-align: center; pointer-events: none;
}
.ws-machine-label b { color: var(--molten); font-weight: 700; }
.ws-ml-dot { opacity: .6; }
.ws-machine-label .draft-tag { font-size: calc(10 * var(--u)); }

/* belt */
.ws-belt { animation: none; }

/* ── the rewind ── */
.ws-vhs { position: absolute; z-index: 9; inset: -4% -2% 0; pointer-events: none; opacity: 0; transition: opacity .2s; overflow: hidden; border-radius: 12px; }
.floor-workshop.is-rewind .ws-vhs { opacity: 1; }
.floor-workshop.is-rewind .fb-room > :not(.ws-vhs):not(.fb-ground) { filter: saturate(1.35) contrast(1.08) hue-rotate(-10deg); }
.ws-vhs-lines { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 5px); mix-blend-mode: screen; }
.ws-vhs-bar { position: absolute; left: 0; right: 0; top: -20%; height: 14%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .12) 40%, rgba(180, 220, 255, .18) 50%, rgba(255, 255, 255, .1) 60%, transparent); }
.floor-workshop.is-rewind .ws-vhs-bar { animation: ws-track 1.7s linear infinite; }
@keyframes ws-track { from { transform: translateY(0); } to { transform: translateY(900%); } }
.ws-vhs-osd { position: absolute; left: 3%; top: 6%; margin: 0; display: flex; align-items: center; gap: .6em; font: 400 clamp(14px, calc(26 * var(--u)), 30px)/1 var(--font-pixel); color: #fff; text-shadow: 2px 0 rgba(255, 60, 90, .8), -2px 0 rgba(60, 220, 255, .8), 0 0 10px rgba(255, 255, 255, .5); }
.ws-vhs-osd svg { width: 1.8em; height: .9em; filter: drop-shadow(2px 0 rgba(255, 60, 90, .8)) drop-shadow(-2px 0 rgba(60, 220, 255, .8)); }
.floor-workshop.is-rewind .ws-vhs-osd svg { animation: ws-blink 1s steps(1) infinite; }
@keyframes ws-blink { 50% { opacity: 0; } }
.ws-vhs-time { position: absolute; right: 3%; top: 6%; margin: 0; font: 400 clamp(11px, calc(18 * var(--u)), 22px)/1 var(--font-pixel); color: #fff; text-shadow: 2px 0 rgba(255, 60, 90, .8), -2px 0 rgba(60, 220, 255, .8); }

/* ── the Workshop on phones and small tablets: room 400 × 800 ── */
@media (max-width: 1020px) {
  .ws-room { --rh: 800; --gh: 70; }
  .ws-board    { --x: 0;   --y: 4;   --w: 400; aspect-ratio: 400 / 420; }
  .ws-note { width: 42%; }
  .ws-note a { min-height: calc(128 * var(--u)); }
  .ws-note-1 { left: 5%; top: 6%; }
  .ws-note-2 { left: 53%; top: 8%; }
  .ws-note-3 { left: 6%; top: 44%; }
  .ws-sticky { left: 52%; top: 45%; width: 43%; }
  .ws-board > .ws-polaroid { left: 58%; top: 76%; width: 20%; }
  .ws-board > .ws-todo, .ws-board > .ws-board-deco { display: none; }
  .ws-note-title { font-size: calc(17 * var(--u)); }
  .ws-note-date { font-size: calc(12 * var(--u)); }
  .ws-clock    { --x: 16;  --y: 446; --w: 150; }
  .ws-doodle   { --x: 86;  --y: 616; --w: 74; }
  .ws-machine  { --x: 168; --y: 494; --w: 232; }
  .ws-machine-label { --x: 180; --y: 440; --w: 214; --h: 44; background: #232A40; border: 3px solid var(--outline); border-radius: 12px; box-shadow: inset 0 0 0 2px var(--brass); font-size: calc(15 * var(--u)); }
  .ws-robot    { --x: 14;  --y: 654; --w: 60; }
  .ws-bench, .ws-conveyor { display: none; }
}