/* ---- THE ROOM (24 Sep 2026) ------------------------------------------
   My Studio as a room, app-room.js. Prefix rm-, checked against every
   class in the site before use (the .gs-row lesson). Written against the
   tokens, so it is on-system by construction: utility glass for the
   controls, the data tier's rim on the viewport and the sheet, change in
   light on hover and never movement. */

.rm-switch-row{display:flex;justify-content:flex-end;align-items:center;gap:var(--s3);margin:0 0 var(--s4)}
.rm-why{font-size:12px;color:var(--t3);max-width:62ch;text-align:right}

.rm-wrap{position:relative}
.rm-stage{
  position:relative;overflow:hidden;isolation:isolate;
  height:calc(100dvh - var(--rm-top,160px) - 24px);min-height:440px;
  border-radius:var(--r-panel);background:var(--glass-viewport);
}
.rm-stage::after{
  content:"";position:absolute;inset:0;z-index:9;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--rim-grad-2);
  -webkit-mask:var(--rim-mask);mask:var(--rim-mask);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* the canvas owns the gestures; the sheet above it keeps its own scrolling */
.rm-gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.rm-load{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  font-size:12.5px;color:var(--t3)}
.rm-load[hidden]{display:none}

/* ---- markers: ghosted, a ring and a dot, brighter when reached ---- */
.rm-rings{position:absolute;inset:0;z-index:3;pointer-events:none}
.rm-ring{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;
  padding:0;margin:0;background:transparent;border:0;pointer-events:auto;cursor:pointer}
.rm-ring[hidden]{display:none}
.rm-ring::before,.rm-ring::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.rm-ring::before{width:16px;height:16px;border:1.25px solid rgba(255,255,255,.4)}
.rm-ring::after{width:4px;height:4px;background:rgba(255,255,255,.6)}
.rm-ring:hover::before,.rm-ring:focus-visible::before{border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.08)}
.rm-ring:hover::after,.rm-ring:focus-visible::after{background:#fff}
.rm-ring:focus-visible{outline:none}
.rm-ring.pulse::before{animation:rm-pulse .9s var(--ease)}
@keyframes rm-pulse{40%{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.1)}}
/* a mouse finds objects by hovering, so the rings are there for the keyboard */
.rm-rings.rm-fine .rm-ring{opacity:0;pointer-events:none}
.rm-rings.rm-fine .rm-ring:focus-visible{opacity:1}

.rm-tag{position:absolute;left:0;top:0;z-index:4;pointer-events:none;white-space:nowrap;
  padding:7px 11px;border-radius:var(--r-ctrl);background:rgba(7,8,10,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rm-tag[hidden]{display:none}
.rm-tag b{display:block;font-weight:500;font-size:13px;line-height:1.25;color:var(--t1)}
.rm-tag span{display:block;margin-top:2px;font:500 10px/1.3 "SST Typewriter",ui-monospace,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}

/* ---- controls: utility glass over the room ---- */
.rm-top{position:absolute;z-index:5;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s2);pointer-events:none}
.rm-set{display:flex;gap:var(--s2);align-items:center}
.rm-bar{position:absolute;z-index:5;left:12px;right:12px;bottom:12px;display:flex;justify-content:center;pointer-events:none}
.rm-top>*,.rm-bar>*{pointer-events:auto}
.rm-top>span:empty{pointer-events:none}

.rm-seg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);
  background:rgba(7,8,10,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rm-seg::after,.rm-chip::after,.rm-acts::after,.rm-sheet::after,.rm-tag::after,.rm-qa::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--rim-grad-3);
  -webkit-mask:var(--rim-mask);mask:var(--rim-mask);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.rm-tag{position:absolute}
.rm-seg button{font:inherit;font-size:12px;font-weight:500;line-height:1;color:var(--t2);padding:8px 13px;border:0;
  border-radius:var(--r-pill);background:transparent;cursor:pointer;transition:color .2s var(--ease),background .2s var(--ease)}
.rm-seg button:hover{color:var(--t1);background:rgba(255,255,255,.035)}
.rm-seg button[aria-pressed="true"]{color:var(--t1);background:rgba(255,255,255,.075)}
.rm-seg button:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:1px}
.rm-switch-row .rm-seg{background:var(--glass-3)}

.rm-chip{position:relative;padding:8px 12px;border-radius:var(--r-pill);background:rgba(7,8,10,.74);
  font:500 10px/1 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}

/* ---- the popup: in the middle of the screen, the room blurred behind ---- */
.rm-scrim{position:absolute;inset:0;z-index:10;background:rgba(4,5,6,.46);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.rm-scrim[hidden]{display:none}
.rm-sheet{position:absolute;z-index:11;left:50%;top:calc(50% + 22px);transform:translate(-50%,-50%);
  width:min(560px,calc(100% - 32px));max-height:calc(100% - 112px);
  display:flex;flex-direction:column;border-radius:var(--r-panel);background:rgba(6,7,9,.94)}
.rm-sheet.rm-sz-sm{width:min(440px,calc(100% - 32px))}
.rm-sheet.rm-sz-lg{width:min(1080px,calc(100% - 48px));height:calc(100% - 112px);max-height:920px}
.rm-sheet[hidden]{display:none}
.rm-sh-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding:16px 14px 8px 20px}
.rm-sh-e{display:block;font:500 10px/1.3 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.rm-sh-t{margin:4px 0 0;font-size:17px;font-weight:500;line-height:1.25;color:var(--t1)}
.rm-sh-x{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  color:var(--t2);background:rgba(255,255,255,.04);transition:color .2s var(--ease),background .2s var(--ease)}
.rm-sh-x svg{width:12px;height:12px}
.rm-sh-x:hover,.rm-sh-x:focus-visible{color:var(--t1);background:rgba(255,255,255,.08);outline:none}
.rm-sh-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px 16px;display:flex;flex-direction:column;gap:var(--s4)}
.rm-sh-b>.panel{margin:0}
/* NOTHING IN A WINDOW SHRINKS (3 Oct 2026, three testers on phones: the feed
   would not scroll, the radar was squashed, My submissions lost its titles).
   The body is a flex column, and a panel clips (overflow:hidden), so its
   automatic minimum height is zero and it was squeezed to fit the window
   instead of the window scrolling */
.rm-sh-b>*{flex-shrink:0}
.rm-card{width:100%;max-width:340px;margin:0 auto}
.rm-kpis{margin:0}

.rm-toast{position:absolute;z-index:8;left:50%;top:60px;transform:translateX(-50%);max-width:calc(100% - 48px);
  padding:9px 15px;border-radius:var(--r-pill);background:rgba(7,8,10,.9);color:var(--t1);font-size:12.5px;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.rm-toast.on{opacity:1}

/* ---- a narrow stage: the popup nearly fills it, the name gives way to the photo ---- */
.rm-narrow .rm-sheet,.rm-narrow .rm-sheet.rm-sz-sm,.rm-narrow .rm-sheet.rm-sz-lg{width:calc(100% - 16px);max-height:calc(100% - 76px);top:calc(50% + 26px)}
.rm-narrow .rm-sheet.rm-sz-lg{height:calc(100% - 76px)}
.rm-narrow .rm-bar{left:8px;right:8px;bottom:8px}
.rm-narrow .rm-top{top:8px;left:8px;right:8px}
.rm-narrow .rm-me-n,.rm-narrow .rm-chip{display:none}
/* THE FOUR VERBS ON A PHONE (3 Oct 2026, Ramz: "can we still do C for
   phones?"): the desk's dock steps aside below 720 px, so its four verbs sit
   along the foot of the Studio in the dock's hues (app-room.js roomQaHtml),
   utility glass like the views switch. They step aside while the Studio is
   off (the disc is the one thing to do), a window is open, a close-up or the
   press holds the screen; above the team's candidate-view bar when it shows */
.rm-qa{position:relative;display:none;gap:2px;padding:6px 6px 7px;border-radius:20px;
  background:rgba(7,8,10,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rm-narrow .rm-qa{display:flex}
.rm-qa[hidden],.rm-pw-off .rm-qa,.rm-hold .rm-qa,.rm-seated .rm-qa,.rm-pv-on .rm-qa{display:none}
.rm-qa-b{display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;padding:2px 0 1px;border:0;border-radius:14px;
  background:none;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
.rm-qa-i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--dkg);background:rgba(var(--dk),.14);
  box-shadow:inset 0 0 0 1px rgba(var(--dk),.55),inset 0 1px 0 rgba(255,255,255,.14);transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.rm-qa-i svg{width:17px;height:17px}
.rm-qa-l{font:500 10px/1 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
.rm-qa-b:hover .rm-qa-i,.rm-qa-b:active .rm-qa-i,.rm-qa-b:focus-visible .rm-qa-i{background:rgba(var(--dk),.22);
  box-shadow:inset 0 0 0 1px rgba(var(--dk),.85),inset 0 1px 0 rgba(255,255,255,.22)}
.rm-qa-b:focus-visible{outline:none}
.rm-qa-b:focus-visible .rm-qa-l{color:var(--t1)}
body:has(#asc-bar) .rm-narrow .rm-bar{bottom:72px}
@media (prefers-reduced-motion:reduce){.rm-qa-i{transition:none}}

@media (prefers-reduced-motion:reduce){
  .rm-ring.pulse::before{animation:none}
}

/* ---- the rendered room (the plate test): the render, its live parts, and a
   hover that is light inside the object, never movement ---- */
.rm-seg[hidden]{display:none}
.rm-pl{position:absolute;left:0;top:0;z-index:1;transform-origin:0 0;pointer-events:none}
.rm-pl>*{position:absolute;left:0;top:0;transform-origin:0 0}
.rm-pl-img{display:block;width:100%;height:100%}
.rm-pl-hi{opacity:0;mix-blend-mode:plus-lighter;filter:blur(1.5px);transition:opacity .2s var(--ease)}
.rm-pl-hi.on{opacity:.12}
.rm-pl-disc{border-radius:50%;overflow:hidden}
.rm-pl-disc img{display:block;width:100%;height:100%;border-radius:50%;filter:brightness(.6) saturate(.9);animation:rm-spin 3s linear infinite}
@keyframes rm-spin{to{transform:rotate(360deg)}}
.rm-pl-hit{position:absolute;inset:0;z-index:2}
@media (prefers-reduced-motion:reduce){.rm-pl-disc img{animation:none}}

/* ---- the room is the whole screen: no rail, no page header ---- */
body.rm-full{overflow:hidden}
body.rm-full .side,body.rm-full .hero,body.rm-full .rail-toggle{display:none}
body.rm-full .app{display:block}
body.rm-full .wrap{padding:0;max-width:none;margin:0}
body.rm-full .rm-stage{position:fixed;inset:0;z-index:5;height:auto;min-height:0;border-radius:0}
body.rm-full .rm-stage::after{display:none}
/* a page moved into the popup keeps its own layout, without the page's gutter */
.rm-sh-b>.pane{padding:0;margin:0}

/* ---- the top bar: the Studio mark, and you ---- */
.rm-top{z-index:20}
.rm-lead{display:flex;align-items:center;gap:var(--s2)}
.rm-home{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:0;border-radius:var(--r-pill);cursor:pointer;
  font:inherit;font-size:14px;font-weight:500;color:var(--t1);background:rgba(7,8,10,.74);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;transition:background .2s var(--ease)}
.rm-home .mark{width:20px;height:20px;display:block}
.rm-home:hover{background:rgba(20,22,26,.8)}
.rm-home:focus-visible,.rm-me:focus-visible,.rm-mi:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:1px}
.rm-beta{font-size:10px}
.rm-me{position:relative;display:inline-flex;align-items:center;gap:10px;padding:4px 4px 4px 13px;border:0;border-radius:var(--r-pill);cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:var(--t1);background:rgba(7,8,10,.74);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s var(--ease)}
.rm-me:hover,.rm-me[aria-expanded="true"]{background:rgba(20,22,26,.84)}
.rm-me::after,.rm-home::after,.rm-menu::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--rim-grad-3);-webkit-mask:var(--rim-mask);mask:var(--rim-mask);-webkit-mask-composite:xor;mask-composite:exclude}
.rm-av{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#1A2027;color:var(--t1);font-size:13px}
.rm-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.rm-dot{position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:var(--cyan);border:2px solid #07080A}
.rm-dot[hidden]{display:none}

/* ---- the menu ---- */
.rm-menu{position:absolute;z-index:21;top:58px;right:12px;width:min(300px,calc(100% - 24px));max-height:calc(100% - 76px);overflow-y:auto;
  padding:6px 6px 8px;border-radius:var(--r-panel);background:rgba(6,7,9,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.rm-menu[hidden]{display:none}
.rm-mh{padding:12px 10px 4px;font:500 10px/1.3 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.rm-mg{display:flex;flex-direction:column}
.rm-mi{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;padding:8px 10px;border:0;
  border-radius:9px;background:transparent;cursor:pointer;font:inherit;font-size:13px;color:var(--t2);transition:color .2s var(--ease),background .2s var(--ease)}
.rm-mi:hover{color:var(--t1);background:rgba(255,255,255,.045)}
.rm-mb{min-width:18px;height:18px;padding:0 6px;border-radius:var(--r-pill);display:inline-grid;place-items:center;
  font-size:11px;color:#06282C;background:var(--cyan-text)}
.rm-mrow{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 6px 10px;font-size:13px;color:var(--t2)}
.rm-mrow .rm-seg{background:rgba(255,255,255,.03)}
.rm-mfoot{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}

/* ---- alerts on the objects, and the room holding still behind a popup ---- */
.rm-pl-alert{opacity:0;mix-blend-mode:plus-lighter;filter:blur(2px);transition:opacity .4s var(--ease)}
.rm-pl-alert.on{opacity:.3}
.rm-hold .rm-pl-disc img{animation-play-state:paused}

/* ---- the look-around: quiet chevrons at the edges while there is more to see ---- */
.rm-gl{cursor:grab}
.rm-gl:active{cursor:grabbing}
.rm-arrow{position:absolute;z-index:6;top:50%;transform:translateY(-50%);width:40px;height:64px;display:grid;place-items:center;
  border:0;border-radius:14px;background:rgba(7,8,10,.38);color:rgba(242,244,245,.7);cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s var(--ease),color .2s var(--ease),opacity .3s var(--ease)}
.rm-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rm-arrow:hover,.rm-arrow:focus-visible{background:rgba(7,8,10,.62);color:#fff;outline:none}
.rm-arrow-l{left:12px}
.rm-arrow-r{right:12px}
.rm-arrow[hidden]{display:none}
.rm-hold .rm-arrow{opacity:0;pointer-events:none}

/* ---- the desk (25 Sep 2026, step 4): the chair plate, square to the
   monitors, with the real panels laid on the two screen faces */
.rm-desk{position:absolute;inset:0;z-index:7;overflow:hidden;background:#050607;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.rm-desk.on{opacity:1;pointer-events:auto}
.rm-desk-in{position:absolute;left:0;top:0;transform-origin:0 0}
.rm-desk-in.rm-glide{transition:transform .38s var(--ease)}
.rm-desk.rm-zoomed{cursor:grab}.rm-desk.rm-zoomed:active{cursor:grabbing}.rm-desk.rm-zoomed .rm-face{cursor:auto}
.rm-desk-hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);font-size:11.5px;color:var(--t3);pointer-events:none;white-space:nowrap;transition:opacity .3s var(--ease)}
.rm-desk.rm-zoomed .rm-desk-hint{opacity:0}
.rm-desk-img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.rm-face{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#0B0D10}
.rm-face-in{height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px;box-sizing:border-box}
/* the dock at the long screen's left edge (26 Sep 2026): four quick routes,
   a hairline between it and the feed, the name beside a button on hover */
.rm-face-feed .rm-face-in{margin-left:56px;width:calc(100% - 56px)}
/* above the screen's own text (z-index 4): a panel's children stand at 2 and
   its rim at 3, so the names beside the buttons were drawn under the feed
   (a tester, 3 Oct 2026); the feed's comment popup (6) still comes over it */
.rm-dock{position:absolute;left:0;top:0;bottom:0;width:56px;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:8px 0;box-sizing:border-box;box-shadow:inset -1px 0 0 rgba(255,255,255,.07)}
.rm-dock-hr{flex:none;width:24px;height:1px;margin:3px 0;background:rgba(255,255,255,.12)}
.rm-dock-b{position:relative;flex:none;width:33px;height:33px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--t2);
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08);
  transition:color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.rm-dock-b svg{width:16px;height:16px}
/* the markers: a count for messages, a dot for the rest, each on its own meaning */
.rm-dock-n{position:absolute;top:-4px;right:-6px;min-width:15px;height:15px;padding:0 3px;box-sizing:border-box;border-radius:8px;
  font:500 9.5px/15px var(--mono,ui-monospace),monospace;text-align:center;color:#06282b;background:#6FDCE6;outline:2px solid #0B0D10}
.rm-dock-dot{position:absolute;top:0;right:0;width:8px;height:8px;border-radius:50%;outline:2px solid #0B0D10}
.rm-dock-cyan{background:#6FDCE6}.rm-dock-amber{background:#C5A469}.rm-dock-gold{background:#E0BE6A}
.rm-dock-b:hover,.rm-dock-b:focus-visible{outline:none;color:var(--t1);background:rgba(255,255,255,.075);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.16)}
.rm-dock-l{position:absolute;left:calc(100% + 10px);top:50%;transform:translate(-4px,-50%);white-space:nowrap;padding:6px 11px;
  border-radius:var(--r-pill);font-size:12px;line-height:1.2;color:var(--t1);background:#1b1e22;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.1);
  opacity:0;pointer-events:none;transition:opacity .15s var(--ease),transform .15s var(--ease)}
.rm-dock-b:hover .rm-dock-l,.rm-dock-b:focus-visible .rm-dock-l{opacity:1;transform:translate(0,-50%)}
/* THE FOUR VERBS WEAR THEIR FORM'S HUE (3 Oct 2026, Ramz, from the testers:
   "make the buttons on the screen for all that stuff colors, at least
   identifiable"): the hue each form's sheet wears, gas cyan, report sage,
   content pink, event violet, as a wash and a rim inside the glass, never a
   glow; the places below the hairline stay neutral */
.rm-dock-v[data-rm-dock=gas],.rm-qa-b[data-rm-qa=gas]{--dk:53,201,214;--dkg:#6FDCE6}
.rm-dock-v[data-rm-dock=report],.rm-qa-b[data-rm-qa=report]{--dk:111,179,151;--dkg:#8FD0B4}
.rm-dock-v[data-rm-dock=content],.rm-qa-b[data-rm-qa=content]{--dk:224,79,180;--dkg:#F08ACF}
.rm-dock-v[data-rm-dock=event],.rm-qa-b[data-rm-qa=event]{--dk:143,127,226;--dkg:#B3A6F0}
.rm-dock-v{color:var(--dkg);background:rgba(var(--dk),.14);box-shadow:inset 0 0 0 1px rgba(var(--dk),.55),inset 0 1px 0 rgba(255,255,255,.14)}
.rm-dock-v:hover,.rm-dock-v:focus-visible{color:var(--dkg);background:rgba(var(--dk),.22);
  box-shadow:inset 0 0 0 1px rgba(var(--dk),.85),inset 0 1px 0 rgba(255,255,255,.22)}
.rm-dock-v .rm-dock-l{box-shadow:inset 0 0 0 1px rgba(var(--dk),.5),inset 0 1px 0 rgba(255,255,255,.1)}
@media (prefers-reduced-motion:reduce){.rm-dock-b,.rm-dock-l{transition:none}}
.rm-face-in .panel{margin:0}
/* a screen scrolls down, never sideways; the rail is a hairline that only
   shows while there is more (Ramz: "the scroll indicator is a bit too
   large"). The WebKit pseudo-elements and the standard properties cancel
   each other in Chromium, so the standard pair is Firefox's only */
/* a ghost of a rail, inset from the screen's edge and clear of its top and
   bottom, shown only while the screen is being scrolled (Ramz: "ghost it a
   bit, not against the edge, and let it disappear if not being used").
   rm-scrolling is set by the scroll listener in app-room.js for a second */
.rm-face-in::-webkit-scrollbar{width:11px;height:0}
.rm-face-in::-webkit-scrollbar-track{background:transparent;margin:14px 0}
.rm-face-in::-webkit-scrollbar-thumb{background:transparent;border-radius:6px;border:solid transparent;border-width:0 5px 0 3px;background-clip:padding-box}
.rm-face-in.rm-scrolling::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.14)}
.rm-face-in.rm-scrolling::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.24)}
@supports not selector(::-webkit-scrollbar){.rm-face-in{scrollbar-width:thin;scrollbar-color:transparent transparent}.rm-face-in.rm-scrolling{scrollbar-color:rgba(255,255,255,.14) transparent}}

/* QUIET SCREENS (25 Sep 2026, Ramz: "too much cyan and magenta ... starting
   to get over bearing"). On the room's screens only, every panel is one
   neutral dark glass: no hue washes, no beam, no tinted rims. What is active
   is white. The status colours stay, because they carry meaning. The
   classic page is untouched. The class is on the desk's screen faces and
   on the tablet and wall screen. */
.rm-face,.rm-quiet{background:#0A0B0D}
.rm-quiet .panel,.rm-quiet .kpi{background:rgba(255,255,255,.024)!important;background-image:none!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.065)!important;--air:transparent!important;--hue:#AEB7BF!important}
.rm-quiet .panel::before,.rm-quiet .panel::after,.rm-quiet .kpi::before,.rm-quiet .kpi::after{opacity:0!important}
.rm-quiet .beamrow::before,.rm-quiet .beamrow::after,.rm-quiet .bloom,.rm-quiet .rec{display:none!important}
.rm-quiet .fd-tab{border-color:rgba(255,255,255,.1)!important;color:#98A3AD!important;background:transparent!important;box-shadow:none!important}
.rm-quiet .fd-tab.on{color:#F2F4F5!important;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important}
.rm-quiet .rd-m{stroke:rgba(242,244,245,.8)!important;fill:rgba(242,244,245,.07)!important}
.rm-quiet .rd-gh{stroke:rgba(255,255,255,.14)!important;fill:none!important}
.rm-quiet .halo{box-shadow:none!important}
.rm-quiet .st-h,.rm-quiet .lab{color:#98A3AD!important}
.rm-quiet .sb-add{border:0!important;background:transparent!important;color:#C9D0D6!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important}   /* the browser's own button border drew a heavy white ring */
.rm-quiet .sb-add:hover{color:#F2F4F5!important;background:rgba(255,255,255,.05)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important}

/* inside a quiet screen every scroll box wears the same ghost rail: the
   opportunity posts and their list carry their own 8px rail from the
   classic board, heavy on a screen (rm-scrolling is set by
   roomGhostScroll on each box as the screen opens) */
.rm-quiet .opp-scroll::-webkit-scrollbar,.rm-quiet .opp-d.opp-box::-webkit-scrollbar{width:9px}
.rm-quiet .opp-scroll::-webkit-scrollbar-track,.rm-quiet .opp-d.opp-box::-webkit-scrollbar-track{background:transparent!important;margin:6px 0}
.rm-quiet .opp-scroll::-webkit-scrollbar-thumb,.rm-quiet .opp-d.opp-box::-webkit-scrollbar-thumb{background:transparent!important;border:solid transparent;border-width:0 4px 0 2px;background-clip:padding-box;border-radius:6px}
.rm-quiet .opp-scroll.rm-scrolling::-webkit-scrollbar-thumb,.rm-quiet .opp-d.opp-box.rm-scrolling::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.14)!important}

/* the opportunities panel keeps a thread of Soneium gold, its invitation
   to act, and no more (Ramz: "keep gold, but dont go too heavy") */
.rm-quiet .panel.h-opps{box-shadow:inset 0 1px 0 rgba(224,190,106,.34),inset 0 0 0 1px rgba(224,190,106,.13)!important}
.rm-quiet .h-opps .st-h{color:rgba(224,190,106,.86)!important}

/* the numbers screen, arranged for its shape: the three figures stacked in
   a column beside the radar, so nothing touches, and the submissions below
   across the full width (Ramz: "the pills are touching in second screen") */
/* max-content rows, and they are load-bearing (26 Sep 2026, Ramz's
   screenshot: the radar's caption cut in half and "My submissions" ending
   under its own header). The screen is a box of fixed height, and a grid
   there sizes auto rows to FIT it; a .panel clips its overflow, which lets
   it shrink below its contents (its automatic minimum is 0), so both
   panels were cut to what the three figures needed: the radar lost the
   caption's lower half, the month slider and Insights, the submissions
   panel everything under its header. Sized to their contents, every panel
   is whole and the screen scrolls, as it was meant to. */
.rm-face-you .rm-face-in{display:grid;grid-template-columns:150px minmax(0,1fr);grid-auto-rows:max-content;gap:10px;align-content:start}
.rm-face-you .rm-kpis{display:flex!important;flex-direction:column;gap:8px;margin:0!important;padding:0!important;align-self:start}
.rm-face-you .rm-kpis .kpi{min-width:0!important;flex:none!important;margin:0!important;padding:9px 12px!important}
.rm-face-you .rm-kpis .lab{left:0!important;top:0!important;font-size:9px!important;letter-spacing:.08em!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* the classic row lifts it 16px left */
.rm-face-you .rm-kpis .val{font-size:20px!important;margin-top:3px!important}
.rm-face-you .rm-kpis .kdelta{font-size:10px!important}
.rm-face-you .h-radar{min-width:0!important}
.rm-face-you .h-radar .rd-svg{zoom:.66}          /* a fixed 310px chart with no viewBox: zoom is the only way it scales */
.rm-face-you .h-subs,.rm-face-you .rm-era{grid-column:1 / -1}
.rm-stand{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:9px 16px;border:0;border-radius:var(--r-pill);cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:var(--t1);background:rgba(8,9,11,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s var(--ease)}
.rm-stand:hover,.rm-stand:focus-visible{background:rgba(20,22,26,.86);outline:none}
.rm-stand:focus-visible{box-shadow:inset 0 0 0 1px rgba(111,220,230,.55)}
.rm-seated .rm-arrow,.rm-seated .rm-tag{display:none}
@media (prefers-reduced-motion:reduce){.rm-desk,.rm-desk-in.rm-glide{transition:none}}

/* ---- the globe zoom (25 Sep 2026, step 4, Ramz's pick C): the close-in
   plate, the Global page's own globe stage stood on the floor stand, the
   figures in a column on the left, the controls bottom right */
.rm-gz{position:absolute;inset:0;z-index:7;overflow:hidden;background:#050607;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.rm-gz.on{opacity:1;pointer-events:auto}
.rm-gz-in{position:absolute;left:0;top:0;transform-origin:0 0}
.rm-gz-img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.rm-gz-hold{position:absolute}
.rm-gz .globe-stage{position:absolute!important;inset:0;min-height:0!important;height:100%;background:transparent!important;border:0!important;border-radius:0!important;
  overflow:visible!important;box-shadow:none!important;margin:0!important}
.rm-gz .globe-stage::before,.rm-gz .globe-stage::after,.rm-gz .globe-stage .limb,.rm-gz #globe-svg,.rm-gz .globe-coord,.rm-gz .globe-foot{display:none!important}
.rm-gz #globe-gl{display:block;width:100%!important}
.rm-gz .globe-ctl{position:fixed!important;right:24px;left:auto;top:auto!important;bottom:26px;z-index:9}
.rm-gz .gs-list{top:auto!important;bottom:calc(100% + 6px)}
/* the figures and the country card are ONE column on the left, top down
   from a fixed line so the figures never move when a card opens; the column
   stops above Back to the room and a long card scrolls inside itself */
.rm-gz-pills .cpop{position:relative!important;inset:auto!important;width:auto;margin:0;flex:0 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  pointer-events:auto;border-radius:18px;padding:14px 16px;
  background:rgba(8,10,12,.52)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07)}
.rm-gz-pills .cpop.hide{display:none}
.rm-gz-pills .cpop::before,.rm-gz-pills .cpop::after{display:none}
.rm-gz-pills .cpop-h{flex:none;padding-right:20px}
.rm-gz-pills .cpop-list{max-height:none;flex:1 1 auto;min-height:0}
.rm-gz-pills .cpop-list::-webkit-scrollbar{width:11px;height:0}
.rm-gz-pills .cpop-list::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.rm-gz-pills .cpop-list::-webkit-scrollbar-thumb{background:transparent;border-radius:6px;border:solid transparent;border-width:0 5px 0 3px;background-clip:padding-box}
.rm-gz-pills .cpop-list.rm-scrolling::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.14)}
@supports not selector(::-webkit-scrollbar){.rm-gz-pills .cpop-list{scrollbar-width:thin;scrollbar-color:transparent transparent}.rm-gz-pills .cpop-list.rm-scrolling{scrollbar-color:rgba(255,255,255,.14) transparent}}
.rm-gz .amb-profile{z-index:9}
.rm-gz-pills{position:absolute;left:64px;top:88px;bottom:84px;width:252px;display:flex;flex-direction:column;gap:12px;z-index:8;pointer-events:none}
.rm-gz-pill{display:flex;flex-direction:column;gap:3px;flex:none;padding:11px 16px 12px;border-radius:18px;
  background:rgba(8,10,12,.52);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07)}
.rm-gz-pill b{font-size:24px;font-weight:500;line-height:1;color:var(--t1);letter-spacing:-.01em}
.rm-gz-pill i{font:500 9.5px/1.2 "SST Typewriter",ui-monospace,monospace;font-style:normal;letter-spacing:.09em;text-transform:uppercase;color:var(--t2);white-space:nowrap}
.rm-gz-c1{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(53,201,214,.28)}
.rm-gz-c2{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(91,159,212,.28)}
.rm-gz-c3{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(224,79,180,.26)}
.rm-gz-back,.rm-nz-back{position:absolute;left:24px;bottom:26px;z-index:9;padding:9px 16px;border:0;border-radius:var(--r-pill);cursor:pointer;font:inherit;font-size:13px;font-weight:500;
  color:var(--t1);background:rgba(8,9,11,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s var(--ease)}
.rm-gz-back:hover,.rm-gz-back:focus-visible,.rm-nz-back:hover,.rm-nz-back:focus-visible{background:rgba(20,22,26,.86);outline:none}
.rm-gz-back:focus-visible,.rm-nz-back:focus-visible{box-shadow:inset 0 0 0 1px rgba(111,220,230,.55)}
@media (prefers-reduced-motion:reduce){.rm-gz{transition:none}}

/* ---- the device faces (25 Sep 2026, step 4): the tablet and the wall
   screen, each as itself in the middle of the room, the room blurred and
   dimmed behind. No outer shadow: the frames are lit by their own rims */
.rm-dv{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;
  background:rgba(3,4,5,.36);-webkit-backdrop-filter:blur(16px) brightness(.62);backdrop-filter:blur(16px) brightness(.62);
  opacity:0;transition:opacity .35s var(--ease)}
.rm-dv.on{opacity:1}
.rm-dv-frame{position:relative;box-sizing:border-box;margin-top:-10px}
.rm-dv-scr{width:100%;height:100%;overflow:hidden;position:relative}
.rm-dv-in{height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:16px 18px}
.rm-dv-in .panel{margin:0}
.rm-dv-in .pane{display:block}
.rm-dv-in::-webkit-scrollbar{width:11px;height:0}
.rm-dv-in::-webkit-scrollbar-track{background:transparent;margin:14px 0}
.rm-dv-in::-webkit-scrollbar-thumb{background:transparent;border-radius:6px;border:solid transparent;border-width:0 5px 0 3px;background-clip:padding-box}
.rm-dv-in.rm-scrolling::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.14)}
@supports not selector(::-webkit-scrollbar){.rm-dv-in{scrollbar-width:thin;scrollbar-color:transparent transparent}.rm-dv-in.rm-scrolling{scrollbar-color:rgba(255,255,255,.14) transparent}}
/* the tablet: gunmetal, a soft catch along the top edge, the camera in the bezel */
.rm-dv-tablet .rm-dv-frame{width:min(900px,74vw,calc((100vh - 170px) * 1.55));aspect-ratio:1.55;border-radius:34px;padding:22px;
  background:linear-gradient(160deg,#5a6168 0%,#343a40 22%,#23272c 60%,#1a1d21 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.6)}
.rm-dv-tablet .rm-dv-frame::before{content:"";position:absolute;left:50%;top:9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#0b0d0f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rm-dv-tablet .rm-dv-scr{border-radius:14px}
/* the wall screen: a slim matte black frame, portrait, as it hangs on the slats */
.rm-dv-wall .rm-dv-frame{height:min(620px,calc(100vh - 170px));aspect-ratio:.66;border-radius:8px;padding:11px;
  background:linear-gradient(180deg,#1b1e22,#0e1012);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.06)}
.rm-dv-wall .rm-dv-scr{border-radius:3px}
.rm-dv-back{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);padding:9px 16px;border:0;border-radius:var(--r-pill);cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:var(--t1);background:rgba(8,9,11,.72);transition:background .2s var(--ease)}
.rm-dv-back:hover,.rm-dv-back:focus-visible{background:rgba(20,22,26,.86);outline:none}
.rm-dv-back:focus-visible{box-shadow:inset 0 0 0 1px rgba(111,220,230,.55)}
@media (prefers-reduced-motion:reduce){.rm-dv{transition:none}}

/* ---- THE PRESS VIEW (28 Sep 2026, stage 2): the press on its own over the
   blurred Studio, from its rendered frames, with the press screen docked on
   the right (disc.css .dc-docked). The lamp and the disc on the bed are
   drawn on the frames (app-room.js pvDraw). No outer shadow: the press is
   lit by its render. A click on the blurred room round it closes it. */
.rm-pv{position:absolute;inset:0;z-index:7;
  background:rgba(3,4,5,.36);-webkit-backdrop-filter:blur(16px) brightness(.62);backdrop-filter:blur(16px) brightness(.62);
  opacity:0;transition:opacity .18s var(--ease)}   /* quick, so the tray slides in full view (app-room.js pvOpen) */
.rm-pv.on{opacity:1}
.rm-pv-stage{position:absolute;left:24px;top:72px;bottom:72px;right:calc(min(420px,38vw) + 48px);display:flex;align-items:center;justify-content:center}
.rm-pv-cv{display:block;max-width:100%;max-height:100%;width:auto;height:auto;-webkit-user-select:none;user-select:none}
.rm-pv-back{position:absolute;left:24px;bottom:24px;padding:9px 16px;border:0;border-radius:var(--r-pill);cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:var(--t1);background:rgba(8,9,11,.72);transition:background .2s var(--ease)}
.rm-pv-back:hover,.rm-pv-back:focus-visible{background:rgba(20,22,26,.86);outline:none}
.rm-pv-back:focus-visible{box-shadow:inset 0 0 0 1px rgba(111,220,230,.55)}
/* the frames are fetched on a phone's first press: until they land, the
   Studio's own loader, only if the wait is felt (app-room.js, 300 ms) */
.rm-pv-wait{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  font-size:12.5px;color:var(--t2)}
.rm-pv-loading .rm-pv-wait{display:flex}
@media (prefers-reduced-motion:reduce){.rm-pv{transition:none}}
/* THE PRESS ON A PHONE (3 Oct 2026, Ramz: "build phone layout for press"):
   the press across the top of the screen and its screen docked under it
   (disc.css), the same two parts the desktop sets side by side. Back to
   Studio sits in the press's own top corner, under the Studio's top bar,
   which stays over the view as it does on a desktop. One height for both
   files, so the screen starts where the press ends: --pv-h */
@media (max-width:719.98px){
  :root{--pv-h:min(30vh,240px)}
  .rm-pv-stage{left:8px;right:8px;top:52px;bottom:auto;height:var(--pv-h)}
  .rm-pv-back{left:16px;top:60px;bottom:auto;padding:8px 14px}
}

/* ---- the badge face (26 Sep 2026): the leather holder, rendered from the
   room's own model (badgeface.py), black leather, the person's live card in
   its window under the leather lip, the clear film's reflection screened
   over the card, and the embossed back it turns to. The strap runs up out of
   the view, fading into the room if a tall window shows its end. Every
   fraction below is badgeface.json's, and the tests compare the two. No
   drawn lanyard any more: the strap and the hook are in the picture */
.rm-dv-badge{--bd-hold:min(56vh,520px)}
/* the holder (tab included) is --bd-hold tall and sits a little above the
   middle; the picture is taller, 1/.46611 of it, and starts 1.09089 holders
   above the holder's top, which is what runs the strap out of the view */
.rm-dv-badge .rm-dv-frame{position:absolute;left:50%;top:calc(50% - var(--bd-hold) * 1.59089 - 22px);margin:0;
  height:calc(var(--bd-hold) / .46611);aspect-ratio:925/2600;transform:translateX(-50%);background:none;padding:0;box-shadow:none;pointer-events:none}
.rm-dv-badge .rm-dv-scr,.rm-dv-badge .rm-dv-in{overflow:visible;background:transparent;height:100%;padding:0}
.rm-bd{position:absolute;inset:0;perspective:1800px}
.rm-bd-turn{position:absolute;inset:0;transform-origin:50% 50%}
.rm-bd-face{position:absolute;inset:0}
.rm-bd-face[hidden]{display:none}
.rm-bd-pic{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%);mask-image:linear-gradient(180deg,transparent 0,#000 8%)}
/* the card: 54 by 86 mm behind a 52 by 80 mm window, so the lip covers its edges */
.rm-bd-card{position:absolute;left:17.857%;top:59.322%;width:64.286%;height:36.441%}
.rm-bd-card .rm-card{width:100%}
/* the film: additive light on black, so it can only lighten the card below */
.rm-bd-film{position:absolute;left:18.452%;top:60.381%;width:63.096%;height:34.322%;background-position:0 0;background-size:100% 100%;background-repeat:no-repeat;mix-blend-mode:screen}
/* only the holder turns it: a press on the blurred room beside the strap still closes the view */
.rm-bd-hit{position:absolute;left:10.714%;top:50.847%;width:78.572%;height:46.611%;pointer-events:auto;cursor:pointer;
  border:0;padding:0;margin:0;background:transparent;border-radius:9%/6%;font:inherit}
.rm-bd-hit:focus-visible{outline:none;box-shadow:inset 0 0 0 1px rgba(111,220,230,.55)}
.rm-dv-edit{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);padding:8px 14px;border:0;border-radius:var(--r-pill);cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--t1);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .2s var(--ease)}
.rm-dv-edit:hover,.rm-dv-edit:focus-visible{background:rgba(255,255,255,.1);outline:none}
/* the i beside it, and its paragraph above the two (29 Sep 2026) */
.rm-dv-acts{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);display:flex;align-items:center;gap:8px}
.rm-dv-acts .rm-dv-edit{position:static;transform:none}
.rm-dv-about{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);width:min(92vw,440px);padding:10px 16px;border-radius:14px;background:rgba(8,9,11,.72)}
.rm-bd-id{position:absolute;left:calc(50% + var(--bd-hold) * .3 + 32px);top:50%;transform:translateY(-62%);width:230px;padding:14px 16px;
  border-radius:14px;background:rgba(8,9,11,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rm-bd-id dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:baseline}
.rm-bd-id dt{font:500 10px/1.6 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.rm-bd-id dd{margin:0;font-size:12.5px;line-height:1.5;color:var(--t1);overflow-wrap:anywhere}
.rm-bd-ag{display:block;margin-top:4px;padding:0;border:0;background:none;font:inherit;font-size:12px;color:var(--cyan-text);cursor:pointer}
.rm-bd-ag:hover,.rm-bd-ag:focus-visible{color:var(--t1);outline:none;text-decoration:underline}
@media (max-width:980px){.rm-bd-id{left:16px;top:auto;bottom:150px;transform:none;width:min(230px,40vw)}}
/* the same verb under the card in the badge popup, in the flow rather than pinned */
.rm-card-edit{display:block;margin:var(--s4) auto 0;padding:8px 14px;border:0;border-radius:var(--r-pill);cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--t1);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .2s var(--ease)}
.rm-card-edit:hover,.rm-card-edit:focus-visible{background:rgba(255,255,255,.1);outline:none}

/* THE NOTEPAD (25 Sep 2026): a close render of the pad, the person's own
   next step written on its blank sheet by hand in Neucha (Ramz's pick of
   six; it keeps the hand in Russian as well as English, and falls back to
   the system face for scripts it does not carry). Self-hosted, never
   Google's servers. SIL Open Font License, the licence beside the files. */
@font-face{font-family:'Neucha';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Neucha-cyrillic.woff2?v=2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Neucha';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Neucha-latin.woff2?v=2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.rm-nz{position:absolute;inset:0;z-index:7;overflow:hidden;background:#050607;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.rm-nz.on{opacity:1;pointer-events:auto}
.rm-nz-in{position:absolute;left:0;top:0;transform-origin:0 0}
.rm-nz-img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
/* the sheet is 400 x 560, the blank texture's own size: its rules sit every
   40 px from 96, so a 40 px line puts each baseline just above a rule */
/* the ink MULTIPLIES into the paper, so the hour's light falls on the
   writing as it does on the sheet under it, rather than the words sitting
   on top of a dim evening pad at noon brightness */
.rm-nz-sheet{position:absolute;left:0;top:0;width:400px;height:560px;transform-origin:0 0;overflow:hidden;
  font-family:'Neucha',cursive;color:#34405c;font-size:28px;line-height:40px;mix-blend-mode:multiply}
/* THE PLAN ON THE PAD (Oct 6, 2026, Ramz: "I like your plan"), as mocked:
   what the form says is printed (SST), small, right above what the person
   writes in the hand (Neucha), a question and its answer to a line. The
   day is the forms' own list, so it prints month first; empty, it is faint */
.rm-nz-h2{position:absolute;left:30px;top:26px;font:500 15px/20px "SST",sans-serif;color:#2A2F33;letter-spacing:.01em}
.rm-nz-w2{position:absolute;left:30px;right:22px;top:58px}
.rm-nz-q{height:16px;margin-top:4px;font:500 12.5px/16px "SST",sans-serif;color:#5E6368}
.rm-nz-a{display:block;width:100%;height:40px;box-sizing:border-box;margin:-4px 0 0;padding:0;border:0;border-radius:4px;background:transparent;
  -webkit-appearance:none;appearance:none;font-family:'Neucha',cursive;font-size:26px;line-height:40px;color:#34405c;outline:none;caret-color:#34405c}
.rm-nz-a:focus{background:rgba(53,201,214,.08)}
textarea.rm-nz-a{resize:none;overflow:hidden;padding:3px 0 3px;line-height:34px;white-space:pre-wrap}
select.rm-nz-a{cursor:pointer}
select.rm-nz-a.is-empty{color:rgba(52,64,92,.45)}
.rm-nz-a option{background-color:#FFFFFF;color:#34405c}
/* THE LINKS READ AS LINKS (29 Sep 2026, option A): on ruled paper an
   underline is one more rule, so each starts with the pen's own doodle of a
   link and its wrapped lines hang under the words. On hover and keyboard
   focus the ink turns a gel-pen blue over a stroke of Studio cyan, like a
   highlighter (Oct 6, 2026, Ramz's B: the ballpoint "doesnt pop enough"),
   never a glow and never an underline */
.rm-nz-go{display:block;width:100%;background:none;border:0;padding:0 0 0 34px;margin:2px 0 0;font:inherit;font-size:26px;line-height:36px;color:inherit;
  cursor:pointer;text-align:left;text-indent:-34px;text-decoration:none}
.rm-nz-a+.rm-nz-go{margin-top:8px}
.rm-nz-lk{display:inline-block;width:25px;height:25px;margin-right:9px;vertical-align:-4px;text-indent:0}
.rm-nz-go .tx{border-radius:6px 10px 7px 11px;padding:0 6px 0 4px;margin-left:-4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background .15s var(--ease),color .15s var(--ease)}
.rm-nz-go:hover .tx,.rm-nz-go:focus-visible .tx{background:rgba(53,201,214,.42);color:#1F55E6}
.rm-nz-go:focus-visible{outline:none}
/* when it opens, while the cohort waits: the program's words, so printed */
.rm-nz-when{display:block;margin:-4px 0 2px;text-indent:0;font:400 11.5px/14px "SST",sans-serif;color:#7A7F84}
.rm-nz-ft{position:absolute;left:30px;bottom:8px;font:400 11.5px/14px "SST",sans-serif;color:#7A7F84}
/* THE ERA RECORD (Oct 6, 2026): an era's own figures, the population named
   in every label, one quiet glass with no hue of its own; four across on
   the desk screen, two by two in the open case's popup */
.rm-era-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:10px}
.rm-era-d{color:var(--t3);letter-spacing:.08em}
.rm-era-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rm-era-f{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rm-era-f b{font-size:20px;font-weight:500;line-height:1.1;color:var(--t1)}
.rm-era-f b.rm-era-nc{font-size:13px;font-weight:400;line-height:1.3;color:var(--t2)}
.rm-era-f span{font-size:11px;line-height:1.35;color:var(--t2)}
.rm-era-n{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--t3)}
.rm-era-all{display:flex;flex-direction:column;gap:18px}
.rm-era-all .rm-era-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.rm-era-all .rm-era-n{margin:0}
.rm-era-lead{margin:0;font-size:13px;line-height:1.5;color:var(--t2)}
@media (max-width:560px){.rm-era-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the popup's plan (phones, or with no close-up picture) */
.rm-plan{display:flex;flex-direction:column;gap:12px}
.rm-plan-lead{margin:0;font-size:13px;line-height:1.5;color:var(--t2)}
.rm-plan-f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--t1)}
.rm-plan-go{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.rm-plan-btn{font:inherit;font-size:14px;font-weight:500;text-align:left;min-height:40px;padding:9px 14px;border:0;border-radius:10px;cursor:pointer;color:var(--t1);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .2s var(--ease)}
.rm-plan-btn:hover,.rm-plan-btn:focus-visible{outline:none;background:rgba(53,201,214,.14);box-shadow:inset 0 0 0 1px rgba(111,220,230,.5)}
.rm-plan-when{display:block;margin-top:2px;font-size:12px;color:var(--t2);font-weight:400}
@media (prefers-reduced-motion:reduce){.rm-nz{transition:none}}

/* ---- THE DESK CALENDAR (26 Sep 2026): a close render of the calendar on
   the shelf with this month printed on its blank page, live, and the day's
   list in a glass column on the left where the globe view keeps its
   figures. The page's ink MULTIPLIES into the render's paper, the notepad's
   rule, so it takes the hour's light; the list is the Calendar page itself,
   mounted compact. */
.rm-cz{position:absolute;inset:0;z-index:7;overflow:hidden;background:#050607;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.rm-cz.on{opacity:1;pointer-events:auto}
.rm-cz-in{position:absolute;left:0;top:0;transform-origin:0 0}
.rm-cz-img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.rm-cz-page{position:absolute;left:0;top:0;width:620px;height:500px;transform-origin:0 0;box-sizing:border-box;padding:30px 38px 22px;
  display:flex;flex-direction:column;color:#24282D;mix-blend-mode:multiply;font-family:"SST",-apple-system,Helvetica,Arial,sans-serif}
.rm-cz-mh{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:10px;border-bottom:1.5px solid #C9CDD1}
.rm-cz-mh b{font-size:40px;font-weight:500;letter-spacing:-.01em;line-height:1}
.rm-cz-mh span{font-size:20px;color:#7B8187}
.rm-cz-dow{display:grid;grid-template-columns:repeat(7,1fr);margin:14px 0 2px;font:500 13px/1 "SST Typewriter",ui-monospace,Menlo,monospace;
  letter-spacing:.08em;color:#80868C;text-align:center}
.rm-cz-days{flex:1 1 auto;display:grid;grid-template-columns:repeat(7,1fr);min-height:0}
.rm-cz-d{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:2px;padding:0;border:0;border-radius:10px;
  background:none;font:inherit;color:#2B3035;cursor:pointer;transition:background .2s var(--ease)}
.rm-cz-d b{font-size:24px;font-weight:400;line-height:1}
.rm-cz-d.today b{font-weight:600}
.rm-cz-d i{width:7px;height:7px;border-radius:50%;background:#A3A9AE;visibility:hidden}
.rm-cz-d i.on{visibility:visible}
.rm-cz-d.att i{width:8px;height:8px;background:#4F9A7D}
/* today is ringed in the notepad's ink, a touch open and off true */
.rm-cz-ring{position:absolute;left:50%;top:50%;width:60px;height:44px;margin-top:-6px;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.rm-cz-ring ellipse{fill:none;stroke:#34405C;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:95 5;stroke-dashoffset:-3}
.rm-cz-d:hover{background:rgba(40,50,70,.06)}
.rm-cz-d.sel{background:rgba(40,50,70,.11)}
.rm-cz-d:focus-visible{outline:none;box-shadow:inset 0 0 0 1.5px rgba(52,64,92,.55)}
.rm-cz-col{position:absolute;left:64px;top:88px;bottom:84px;width:340px;z-index:8;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;padding:16px 14px 14px 16px;
  border-radius:18px;background:rgba(8,10,12,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07)}
.rm-cz-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.rm-cz-list::-webkit-scrollbar{width:9px;height:0}
.rm-cz-list::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.rm-cz-list::-webkit-scrollbar-thumb{background:transparent;border-radius:6px;border:solid transparent;border-width:0 3px;background-clip:padding-box}
.rm-cz-list.rm-scrolling::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.14)}
@supports not selector(::-webkit-scrollbar){.rm-cz-list{scrollbar-width:thin;scrollbar-color:transparent transparent}.rm-cz-list.rm-scrolling{scrollbar-color:rgba(255,255,255,.14) transparent}}
.rm-cz-full{flex:none;align-self:flex-start;padding:8px 14px;border:0;border-radius:var(--r-pill);cursor:pointer;font:inherit;font-size:12.5px;font-weight:500;color:var(--t1);
  background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.08);transition:background .2s var(--ease)}
.rm-cz-full:hover,.rm-cz-full:focus-visible{background:rgba(255,255,255,.09);outline:none}
.rm-cz-full:focus-visible{box-shadow:inset 0 0 0 1px rgba(111,220,230,.55)}
.rm-cz-back{position:absolute;left:24px;bottom:26px;z-index:9;padding:9px 16px;border:0;border-radius:var(--r-pill);cursor:pointer;font:inherit;font-size:13px;font-weight:500;
  color:var(--t1);background:rgba(8,9,11,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s var(--ease)}
.rm-cz-back:hover,.rm-cz-back:focus-visible{background:rgba(20,22,26,.86);outline:none}
.rm-cz-back:focus-visible{box-shadow:inset 0 0 0 1px rgba(111,220,230,.55)}
@media (prefers-reduced-motion:reduce){.rm-cz{transition:none}.rm-cz-d{transition:none}}

/* ---- the ticket rail (25 Sep 2026): your gas requests as paper tickets on
   a steel rail over the blurred room. The paper takes the hour's light
   (--rm-lux, set by the room); the verbs sit under each ticket, on the room,
   in the Gas Station's own text style. Prefix rm-tk, checked free */
.rm-dv-tk{padding:24px}
.rm-tk-in{width:min(1040px,100%);max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:4px 6px 20px}
.rm-tk-hd{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin:0 0 var(--s4)}
.rm-tk-hd h3{margin:0;font-size:15px;font-weight:600;color:var(--t1)}
.rm-tk-blocked{margin:0 0 var(--s4);font-size:12.5px;line-height:1.5;color:var(--amber-text,#C5A469)}
.rm-tk-rail{position:relative;padding-top:12px}
/* the room's rail is black steel with its cyan light strip under it */
.rm-tk-bar{position:absolute;left:-6px;right:-6px;top:0;height:12px;border-radius:3px;
  background:linear-gradient(180deg,#43484e 0%,#1d2023 45%,#0d0f11 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(111,220,230,.45)}
.rm-tk-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);align-items:start}
.rm-tk-slot{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
/* the paper: tucked under the rail's lip, shaded by it at the top */
.rm-tk-t{position:relative;margin:0;padding:22px 16px 12px;min-height:318px;box-sizing:border-box;display:flex;flex-direction:column;
  color:#1C1F22;border-radius:0 0 2px 2px;filter:brightness(var(--rm-lux,1));
  background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,0) 14px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.2 0 0 0 .11'/%3E%3C/filter%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.045 0 0 0 .024'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23m)'/%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"),linear-gradient(180deg,#F4F1EC,#EFEBE4)}
.rm-tk-band{position:absolute;left:0;right:0;top:0;height:7px;background:#C9C4BB}
.rm-tk-s-funded .rm-tk-band,.rm-tk-s-due .rm-tk-band{background:#35C9D6}
.rm-tk-s-overdue .rm-tk-band{background:#C5A469}
.rm-tk-s-declined .rm-tk-band{background:#9A948B}
.rm-tk-lab{margin:0;font:500 10px/1 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#6A6F73}
.rm-tk-t h4{margin:8px 0 0;font-size:18px;line-height:1.22;font-weight:600;color:#1C1F22;overflow-wrap:anywhere}
.rm-tk-when{margin:8px 0 0;font-size:14px;color:#2A2F33}
.rm-tk-meta{margin:3px 0 0;font-size:11.5px;line-height:1.45;color:#6A6F73}
.rm-tk-mid{flex:1 1 auto;display:grid;place-items:center;min-height:18px;padding:10px 0 4px}
.rm-tk-st{margin:0;padding-top:4px;font:500 10.5px/1.3 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#6A6F73}
.rm-tk-s-funded .rm-tk-st,.rm-tk-s-due .rm-tk-st{color:#1B6F77}
.rm-tk-s-overdue .rm-tk-st{color:#7D5F22}
.rm-tk-sent{margin:4px 0 0;font-size:11.5px;color:#2A2F33}
.rm-tk-sent a{color:#1B6F77;text-decoration:underline;text-decoration-color:rgba(27,111,119,.4);text-underline-offset:2px}
.rm-tk-sent a:hover{text-decoration-color:#1B6F77}
.rm-tk-note{margin:8px 0 0;font-size:12px;line-height:1.45;color:#2A2F33}
/* the stamp of approval: ink, pressed at a slant, multiplied into the paper */
.rm-tk-stamp{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 11px 7px;
  color:#2F7A5F;border:2px solid currentColor;outline:1.5px solid currentColor;outline-offset:2px;border-radius:4px;
  transform:rotate(-9deg);opacity:.82;mix-blend-mode:multiply;pointer-events:none}
.rm-tk-stamp b{font:600 13px/1 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.22em;text-transform:uppercase;padding-left:.22em}
.rm-tk-stamp i{font:500 9.5px/1 "SST Typewriter",ui-monospace,Menlo,monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.rm-tk-stamp-new{animation:rm-tk-stamp .42s .32s cubic-bezier(.2,.8,.3,1) both}
@keyframes rm-tk-stamp{0%{opacity:0;transform:rotate(-9deg) scale(1.4)}70%{opacity:.9;transform:rotate(-9deg) scale(.96)}100%{opacity:.82;transform:rotate(-9deg) scale(1)}}
/* the perforation, and the way to ask about this one */
.rm-tk-q{margin:12px -16px 0;padding:9px 16px 0;border:0;border-top:1px dashed #BDB7AC;background:none;cursor:pointer;text-align:left;
  font:inherit;font-size:11.5px;color:#5E6368;transition:color .2s var(--ease)}
.rm-tk-q:hover,.rm-tk-q:focus-visible{outline:none;color:#1C1F22;text-decoration:underline;text-underline-offset:2px}
.rm-tk-verbs{display:flex;gap:14px;flex-wrap:wrap;padding:0 2px}
.rm-tk-body:empty{display:none}
.rm-tk-body .gq-conf{margin-top:0}
.rm-tk-none{grid-column:1/-1;margin:0;padding:28px 2px 8px;font-size:13px;line-height:1.5;color:var(--t2)}
.rm-tk-ft{margin-top:var(--s5)}
.rm-tk-hist{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:12.5px;color:var(--t3);
  text-decoration:underline;text-decoration-color:rgba(122,133,142,.4);text-underline-offset:3px;transition:color .2s var(--ease)}
.rm-tk-hist:hover,.rm-tk-hist:focus-visible{outline:none;color:var(--t1)}
@media (max-width:900px){.rm-tk-row{grid-template-columns:repeat(2,minmax(0,1fr))}.rm-tk-bar{display:none}.rm-tk-rail{padding-top:0}}
@media (max-width:480px){.rm-dv-tk{padding:16px}.rm-tk-row{grid-template-columns:1fr}.rm-tk-t{min-height:0}}
@media (prefers-reduced-motion:reduce){.rm-tk-stamp-new{animation:none}}

/* ---- the Studio skins (25 Sep 2026, rebuilt 26 Sep): a form opened in the
   room wears the object it came from, and the object is real: the sheet
   sits INSIDE it (fm-skinwrap, app-forms.js), so the board, the clip and
   the pump's frame stay put while the sheet scrolls. No field, check or
   send changes. Ramz on the first cut: "looks cheap and fake ... this is a
   state of the art studio". So the pump's frame is the device gunmetal,
   bead-blasted, and paper has a grain. Both take the hour's light through
   --rm-lux */
.fm-scrim.fm-skin-scrim{background:rgba(3,4,5,.36);-webkit-backdrop-filter:blur(16px) brightness(.62);backdrop-filter:blur(16px) brightness(.62)}
.fm-skinwrap{position:fixed;z-index:61;left:50%;top:50%;box-sizing:border-box;transform:translate(-50%,-48%);opacity:0;
  transition:opacity var(--t-hover,.2s),transform var(--t-hover,.2s);filter:brightness(var(--rm-lux,1))}
.fm-skinwrap.in{opacity:1;transform:translate(-50%,-50%)}
.fm-skinwrap .fm-sheet,.fm-skinwrap .fm-sheet.in{position:relative;left:auto;top:auto;transform:none;opacity:1;transition:none;
  width:auto;box-sizing:border-box;z-index:1}
@media (prefers-reduced-motion:reduce){.fm-skinwrap{transition:none;transform:translate(-50%,-50%)}}

/* the pump's screen is THE PAD (26 Sep 2026, Ramz on the stylized pump he
   found: "please note the change in the pad, and transparency. way cooler
   but our gas zoom will have to match. can remove those logos and put words
   GAS on top and soneium logo on bottom lightly in that circular part", and
   of two mocks, A: the glass see-through teal with light text).
   THE FRAME IS RENDERED, NEVER DRAWN (padface.py): the drawn one was refused
   ("this looks like clip art thats made by a kid"), and so was the toy's own
   8 cm pad blown up to screen size ("this is unacceptable": badge and
   speaker bigger than the fields, every facet showing). It is design C of
   three, Ramz's pick: new geometry built at the size it is shown, a slim
   dark steel bezel, the toy's corner bumpers, a small GAS tab and the mark
   faint on a small boss, in the room's own light, laid OVER the form, the
   pointer passing through it. The live glass lies UNDER it at the glass's
   own place, so its edge hides behind the bezel and cannot miss it. The
   form's window keeps clear of the tab, the boss and the bumpers by the
   distances padface.json measured on the picture. A phone keeps the plain
   glass sheet. */
.fm-skinwrap-pump{width:min(940px,calc(100vw - 48px));background:transparent}
.fm-skinwrap-pump .fm-sheet.fm-skin-pump{--fm-hue:111,220,230;max-height:min(calc(88vh - 40px),780px);border-radius:10px;padding:20px 28px 22px;
  background:linear-gradient(160deg,rgba(130,236,240,.26) 0%,rgba(70,196,206,.16) 55%,rgba(40,150,160,.2) 100%);
  -webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(170,245,250,.45),inset 0 0 60px rgba(111,220,230,.16)}
@media (min-width:641px){
  .fm-skinwrap-pump{width:auto;height:min(94vh,640px,calc((100vw - 32px) * 1530 / 2400));aspect-ratio:2400 / 1530}
  /* the holder above is sized for the form, not the screen: at 640 px the
     glass is about 920 px wide and the whole request fits without a scroll */
  .fm-skinwrap-pump::before{content:"";position:absolute;left:4.128%;top:5.18%;width:91.744%;height:89.208%;z-index:0;border-radius:2%/3.2%;
    background:linear-gradient(160deg,rgba(130,236,240,.24) 0%,rgba(70,196,206,.15) 55%,rgba(40,150,160,.19) 100%);
    -webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);box-shadow:inset 0 0 60px rgba(111,220,230,.16)}
  .fm-skinwrap-pump::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:url(/img/room/pad-face.webp?v=3) center/100% 100% no-repeat}
  /* the form's window: below the tab's lowest point and above the boss's
     highest, and inside the tightest the bumpers reach across those rows
     (read from the picture), so nothing sits behind the frame */
  .fm-skinwrap-pump .fm-sheet.fm-skin-pump{position:absolute;left:5.458%;top:7.828%;width:89.084%;height:83.494%;max-height:none;border-radius:0;
    background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:14px 22px 16px}
  /* a window this size is read at a tighter rhythm, and the promise and the
     two buttons share the last row, the promise under the fields it is
     about and the buttons under the plan; the inline rule the buttons' row
     carries elsewhere is overridden here alone */
  .fm-skinwrap-pump .fm-skin-pump .fm-sub{margin-bottom:14px}
  .fm-skinwrap-pump .fm-skin-pump .fm-f{margin-bottom:12px}
  .fm-skinwrap-pump .fm-skin-pump .fm-f>label{margin-bottom:6px}
  .fm-skinwrap-pump .fm-sheet.fm-skin-pump:has([data-f=plan])>.fm-row2{align-self:start}   /* level with the wallet beside it */
  .fm-skinwrap-pump .fm-sheet.fm-skin-pump:has([data-f=plan])>.fm-foot{margin-top:14px;padding-top:12px}
  .fm-skinwrap-pump .fm-sheet.fm-skin-pump:has([data-f=plan])>.fm-foot:has(.fm-consent){grid-column:1}
  .fm-skinwrap-pump .fm-sheet.fm-skin-pump:has([data-f=plan])>.fm-foot:has(.fm-go){grid-column:2;justify-content:flex-end;
    padding-top:12px!important;box-shadow:inset 0 1px 0 rgba(111,220,230,.12)!important}
}
/* THE WINDOW SHOWS THAT IT SCROLLS: the form is taller than the pad's
   window, and an overlay scrollbar (macOS) is drawn only mid-gesture, so
   the Request button would sit below the fold with nothing saying so. A
   track is painted only while a scrollbar exists, so the rail IS the
   signal (the opportunity board's rule, theme.css) */
.fm-sheet.fm-skin-pump::-webkit-scrollbar{width:8px}
.fm-sheet.fm-skin-pump::-webkit-scrollbar-track{background:rgba(111,220,230,.07);border-radius:4px;margin:4px 0}
.fm-sheet.fm-skin-pump::-webkit-scrollbar-thumb{background:rgba(111,220,230,.34);border-radius:4px;border:1px solid transparent;background-clip:padding-box}
.fm-sheet.fm-skin-pump:hover::-webkit-scrollbar-thumb{background-color:rgba(111,220,230,.5)}
@supports not selector(::-webkit-scrollbar){.fm-sheet.fm-skin-pump{scrollbar-width:thin;scrollbar-color:rgba(111,220,230,.34) rgba(111,220,230,.07)}}
.fm-skin-pump .fm-in{background-color:rgba(111,220,230,.045);box-shadow:inset 0 0 0 1px rgba(111,220,230,.16)}
.fm-skin-pump .fm-in:focus{background-color:rgba(111,220,230,.07);box-shadow:inset 0 0 0 2px rgba(111,220,230,.5)}
/* the date picker in the two Studio skins (app-forms.js fmCalOpen; the
   Studio's glass look is in theme.css). The clipboard's is printed paper, a
   typewriter month and the picked day inked in; the pump's is its own teal
   glass, since paper there would be out of place (Ramz, 26 Sep 2026) */
.fm-skin-clip .fm-cal{background:#FCFAF6;border-radius:4px;box-shadow:inset 0 0 0 1px #CFC9BF;color:var(--prn)}
.fm-skin-clip .fm-cal-m{color:var(--prn)}
.fm-skin-clip .fm-cal-ar{color:var(--prn2)}
.fm-skin-clip .fm-cal-ar:hover:not(:disabled){color:var(--prn);background:rgba(0,0,0,.05)}
.fm-skin-clip .fm-cal-w{color:#8A8F93}
.fm-skin-clip .fm-cal-d{color:var(--prn)}
.fm-skin-clip .fm-cal-d:hover:not(:disabled){background:rgba(0,0,0,.05)}
.fm-skin-clip .fm-cal-d:disabled{color:#C4BFB6}
.fm-skin-clip .fm-cal-d.is-tod{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fm-skin-clip .fm-cal-d.is-sel{background:var(--ink);color:#F6F3EE;box-shadow:none}
.fm-skin-clip .fm-cal-d:focus-visible{outline-color:var(--ink)}
.fm-skin-clip .fm-cal-q{box-shadow:inset 0 1px 0 #E4DFD6}
.fm-skin-clip .fm-cal-q button{font-family:'Neucha',"SST",sans-serif;font-size:16px;color:var(--ink)}
.fm-skin-pump .fm-cal{background:linear-gradient(180deg,#0c2d2b,#071d1c);border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(111,220,230,.28),inset 0 1px 0 rgba(111,220,230,.12);color:#D4ECEC}
.fm-skin-pump .fm-cal-m{color:#6FDCE6}
.fm-skin-pump .fm-cal-ar{color:rgba(111,220,230,.7)}
.fm-skin-pump .fm-cal-ar:hover:not(:disabled){color:#6FDCE6;background:rgba(111,220,230,.08)}
.fm-skin-pump .fm-cal-w{color:rgba(111,220,230,.5)}
.fm-skin-pump .fm-cal-d{color:#D4ECEC}
.fm-skin-pump .fm-cal-d:hover:not(:disabled){background:rgba(111,220,230,.08)}
.fm-skin-pump .fm-cal-d:disabled{color:rgba(212,236,236,.22)}
.fm-skin-pump .fm-cal-d.is-tod{box-shadow:inset 0 0 0 1.5px rgba(111,220,230,.55)}
.fm-skin-pump .fm-cal-d.is-sel{background:rgba(111,220,230,.22);color:#EAFBFC;box-shadow:inset 0 0 0 1.5px rgba(111,220,230,.75)}
.fm-skin-pump .fm-cal-q{box-shadow:inset 0 1px 0 rgba(111,220,230,.14)}
.fm-skin-pump .fm-cal-q button{color:#6FDCE6}
/* THE CHOICE LIST (26 Sep 2026, Ramz: "something seems off with the scale
   of the popup choice selector for the clipboard"): the page's own list in
   place of the OS menu in the two skinned forms, at the form's own type size
   (app-forms.js, fmOpt*). Printed on the paper on the clipboard, the chosen
   one ticked in pen; the date picker's teal glass on the pump. No outer
   shadow on either: a rim, as everywhere */
.fm-opt{position:absolute;z-index:7;box-sizing:border-box;margin:0;max-width:calc(100% - 16px);max-height:264px;overflow-y:auto;overscroll-behavior:contain}
/* the pump's sheet is a grid whose every child spans its columns, and an
   absolute child with a grid area is placed inside the padding, 22 px off
   its field (measured); with no area it is placed against the sheet */
.fm-sheet.fm-skin>.fm-opt.fm-opt{grid-column:auto;grid-row:auto}
.fm-opt-o{display:block;width:100%;border:0;background:transparent;text-align:left;cursor:pointer;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-opt-o:disabled{cursor:default;opacity:.45}
.fm-opt-o:focus{outline:none}
.fm-skin-clip .fm-opt{background:#FCFAF6;border-radius:4px;box-shadow:inset 0 0 0 1px #CFC9BF;padding:5px 0}
.fm-skin-clip .fm-opt-o{font:13px/1.35 "SST",sans-serif;color:var(--prn);padding:7px 14px 7px 36px}
.fm-skin-clip .fm-opt-o:hover{background:rgba(0,0,0,.045)}
.fm-skin-clip .fm-opt-o:focus-visible{background:rgba(0,0,0,.045);box-shadow:inset 0 0 0 1.5px var(--ink)}
.fm-skin-clip .fm-opt-o.on::before{content:"";position:absolute;left:10px;top:50%;width:19px;height:17px;margin-top:-10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 12.5c2.2 1.4 3.9 3.6 5 6.2C10.6 11.6 15 6 21.5 2.5' fill='none' stroke='%231F2A44' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.fm-skin-pump .fm-opt{background:linear-gradient(180deg,#0c2d2b,#071d1c);border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(111,220,230,.28),inset 0 1px 0 rgba(111,220,230,.12);padding:6px}
.fm-skin-pump .fm-opt-o{font:14px/1.35 "SST",sans-serif;color:#D4ECEC;padding:8px 14px 8px 36px;border-radius:7px}
.fm-skin-pump .fm-opt-o:hover{background:rgba(111,220,230,.08)}
.fm-skin-pump .fm-opt-o.on{color:#EAFBFC;background:rgba(111,220,230,.14);box-shadow:inset 0 0 0 1px rgba(111,220,230,.45)}
.fm-skin-pump .fm-opt-o:focus-visible{box-shadow:inset 0 0 0 1.5px rgba(111,220,230,.75)}
.fm-skin-pump .fm-opt-o.on::before{content:"";position:absolute;left:11px;top:50%;width:16px;height:16px;margin-top:-8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%236FDCE6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.fm-opt::-webkit-scrollbar{width:8px}
.fm-skin-clip .fm-opt::-webkit-scrollbar-thumb{background:rgba(42,47,51,.28);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
.fm-skin-pump .fm-opt::-webkit-scrollbar-thumb{background:rgba(111,220,230,.34);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){.fm-opt{scrollbar-width:thin}}
.fm-skin-pump select.fm-in option{background-color:#062220;color:#E6F4F5}
.fm-skin-pump .fm-f>label,.fm-skin-pump .fm-sub,.fm-skin-pump .fm-consent{color:#A2C9CC}
.fm-skin-pump .fm-hint,.fm-skin-pump .fm-as{color:#6E9699}
.fm-skin-pump .fm-foot{box-shadow:inset 0 1px 0 rgba(111,220,230,.12)}
.fm-skin-pump .fm-foot+.fm-foot{box-shadow:none}
.fm-skin-pump .fm-warn{background:rgba(197,164,105,.06)}
/* two columns: what, when and the wallet on the left, the plan on the right */
.fm-sheet.fm-skin-pump:has([data-f=plan]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-content:start;grid-auto-flow:row dense}
.fm-sheet.fm-skin-pump:has([data-f=plan])>*{grid-column:1/-1}
.fm-sheet.fm-skin-pump>.fm-f:has([data-f=event]),.fm-sheet.fm-skin-pump>.fm-f:has([data-f=kind]),
.fm-sheet.fm-skin-pump>.fm-f:has([data-f=name]),.fm-sheet.fm-skin-pump:has([data-f=plan])>.fm-row2{grid-column:1}
/* the plan beside the first three, the wallet under it, so the columns come
   out even and the form is a row shorter in the pad's window */
.fm-sheet.fm-skin-pump>.fm-f:has([data-f=plan]){grid-column:2;grid-row:span 3;display:flex;flex-direction:column}
.fm-sheet.fm-skin-pump>.fm-f:has([data-f=wallet]){grid-column:2}
.fm-sheet.fm-skin-pump>.fm-f:has([data-f=plan]) textarea{flex:1 1 auto;min-height:118px}

/* the clipboard's face (26 Sep 2026). A walnut board and a drawn lever clip
   read as clip art however they were shaded (Ramz: "uff looks like clip art
   that clip board"), and the real one in the room is a Sketchfab model whose
   files may not ship to a browser; a render of it may. So from 641px up the
   sheet lies on clipboard-face.webp (see the @media block below). These
   rules are the sheet on its own, which a phone keeps: a grained paper, a
   1px rim and no outer shadow */
.fm-skinwrap-clip{width:min(600px,calc(100vw - 32px))}
.fm-skinwrap-clip .fm-sheet.fm-skin-clip{--fm-hue:31,42,68;--ink:#1F2A44;--prn:#2A2F33;--prn2:#5E6368;--rule:#CFC9BF;
  max-height:min(88vh,860px);border-radius:2px;padding:40px 36px 30px;color:var(--prn);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.2 0 0 0 .11'/%3E%3C/filter%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.045 0 0 0 .024'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23m)'/%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"),linear-gradient(180deg,#F9F7F3 0%,#F4F1EB 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(0,0,0,.07)}
/* THE BOARD IS THE REAL ONE (Ramz: "yes to clipboard render"): a straight-on
   render of the room's clipboard with its sheet blank (clipface.py), and the
   live sheet laid on the picture's paper by the fractions clipface.json
   records: from just under the clip's edge to 2.5% short of the paper's
   foot, the paper's own width. The margin is the page's: flush with the
   foot, a scrolled field hung off the paper's edge. The holder keeps the picture's shape, so the fractions hold at
   any size, and the live sheet goes clear, so the one paper is the rendered
   one and what scrolls up slides under the clip. Re-render and these five
   numbers move with it; gas-corner.test.js compares them */
@media (min-width:641px){
  .fm-skinwrap-clip{width:auto;height:min(94vh,940px,calc((100vw - 32px) * 1600 / 1103));aspect-ratio:1103 / 1600;
    background:url(/img/room/clipboard-face.webp?v=4) center/100% 100% no-repeat}
  .fm-skinwrap-clip .fm-sheet.fm-skin-clip{position:absolute;left:10.32%;top:21.9%;width:79.35%;height:66.63%;max-height:none;
    background:transparent;box-shadow:none;border-radius:0;padding:14px 28px 20px}
}
.fm-clip-top{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin:0 0 18px;box-shadow:inset 0 -1.5px 0 var(--prn);
  font:500 10px/1 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--prn)}
.fm-clip-mk{width:15px;height:15px;color:var(--prn);flex:none}
.fm-skin-clip .fm-title{font-size:21px;font-weight:600;color:var(--prn);letter-spacing:-.01em}
.fm-skin-clip .fm-as,.fm-skin-clip .fm-sub,.fm-skin-clip .fm-hint,.fm-skin-clip .fm-esc button,.fm-skin-clip .fm-cancel,.fm-skin-clip .fm-log div{color:var(--prn2)}
.fm-skin-clip .fm-x{color:var(--prn2)}
.fm-skin-clip .fm-x:hover{color:var(--prn);background:rgba(0,0,0,.05)}
/* ONE PRINTED FACE AND ONE WRITTEN FACE (26 Sep 2026, Ramz: "with the clip
   board, there seems to be lots of different fonts. we should have a set
   list"): what the form says is printed in SST, what the person writes is
   Neucha, and SST Typewriter stays for the letterhead line and what must be
   typed exactly, the code and the wallet. The questions lost their spaced
   typewriter capitals, and the table's header its system mono: those were
   the third and fourth voices on one sheet */
.fm-skin-clip .fm-f>label{font:500 13px/1.4 "SST",sans-serif;color:var(--prn);margin-bottom:5px}
.fm-skin-clip .fm-req{color:#9A4038}
.fm-skin-clip .fm-esc{margin:6px 0 20px}
/* the answers are written, in pen, on the printed rules. background-COLOR
   only: the shorthand wiped the select's arrow and let its gradients fill
   the whole field, which is the giant arrow Ramz caught */
.fm-skin-clip .fm-in{background-color:transparent;box-shadow:none;border-radius:0;border-bottom:1.5px solid var(--rule);padding:2px 22px 1px 2px;
  font-family:'Neucha',"SST",sans-serif;font-size:18px;line-height:30px;color:var(--ink)}
.fm-skin-clip input.fm-in,.fm-skin-clip textarea.fm-in{padding-right:2px}
.fm-skin-clip .fm-in:focus{background-color:rgba(31,42,68,.035);border-bottom-color:var(--ink);box-shadow:none}
.fm-skin-clip .fm-in::placeholder{font-family:"SST",sans-serif;font-size:13px;color:#9A958C}
.fm-skin-clip .fm-in.bad{border-bottom-color:#9A4038;background-color:rgba(154,64,56,.05);box-shadow:none}
.fm-skin-clip select.fm-in{background-image:linear-gradient(45deg,transparent 50%,var(--prn2) 50%),linear-gradient(135deg,var(--prn2) 50%,transparent 50%);
  background-size:5px 5px,5px 5px;background-position:calc(100% - 11px) 15px,calc(100% - 6px) 15px;background-repeat:no-repeat}
.fm-skin-clip select.fm-in option{background-color:#F4F1EB;color:var(--ink)}
.fm-skin-clip textarea.fm-in{border-bottom:0;min-height:120px;padding:0 2px;line-height:30px;resize:vertical;
  background-image:repeating-linear-gradient(180deg,transparent 0,transparent 28.5px,var(--rule) 28.5px,var(--rule) 30px);background-attachment:local}
.fm-skin-clip textarea.fm-in:focus{background-color:rgba(31,42,68,.035)}
.fm-skin-clip .fm-mono,.fm-skin-clip textarea.fm-mono{font-family:"SST Typewriter",ui-monospace,Menlo,monospace;font-size:13px;color:var(--ink)}
.fm-skin-clip .fm-meth{position:relative;background:transparent;box-shadow:none;border-radius:2px;padding:6px 6px 6px 32px;color:var(--prn)}
.fm-skin-clip .fm-meth:hover{background:rgba(0,0,0,.03);color:var(--prn)}
.fm-skin-clip .fm-meth.on{background:transparent;box-shadow:none;color:var(--prn)}
.fm-skin-clip .fm-meth:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fm-skin-clip .fm-meth::before{content:"";position:absolute;left:6px;top:9px;width:15px;height:15px;box-shadow:inset 0 0 0 1.5px var(--prn)}
.fm-skin-clip .fm-meth.on::after,.fm-skin-clip .fm-consent input:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 12.5c2.2 1.4 3.9 3.6 5 6.2C10.6 11.6 15 6 21.5 2.5' fill='none' stroke='%231F2A44' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.fm-skin-clip .fm-meth.on::after{content:"";position:absolute;left:4px;top:3px;width:24px;height:22px}
.fm-skin-clip .fm-meth-s,.fm-skin-clip .fm-meth.on .fm-meth-s{color:var(--prn2)}
.fm-skin-clip .fm-tb{box-shadow:inset 0 0 0 1.5px var(--prn);border-radius:0}
.fm-skin-clip .fm-th{font:500 12px/1.2 "SST",sans-serif;letter-spacing:0;text-transform:none;background:transparent;color:var(--prn);box-shadow:inset 0 -1.5px 0 var(--prn)}
.fm-skin-clip .fm-tr{box-shadow:inset 0 1px 0 var(--rule)}
.fm-skin-clip .fm-tr.same{box-shadow:none}
.fm-skin-clip .fm-tr.grp::before{background:rgba(31,42,68,.35)}
.fm-skin-clip .fm-sel{background-color:transparent;box-shadow:none;color:var(--ink);font-family:'Neucha',"SST",sans-serif;font-size:17px}
.fm-skin-clip .fm-sel:hover,.fm-skin-clip .fm-sel:focus{box-shadow:inset 0 -1.5px 0 var(--ink);color:var(--ink)}
.fm-skin-clip .fm-sel option{background-color:#F4F1EB;color:var(--ink)}
.fm-skin-clip .fm-adr{color:var(--ink);font-family:"SST Typewriter",ui-monospace,Menlo,monospace;font-size:12px}
.fm-skin-clip .fm-adr:hover{box-shadow:inset 0 -1px 0 var(--rule)}
.fm-skin-clip .fm-adr:focus{box-shadow:inset 0 -1.5px 0 var(--ink);color:var(--ink)}
.fm-skin-clip .fm-adr.bad,.fm-skin-clip .fm-adr.own,.fm-skin-clip .fm-why.bad,.fm-skin-clip .fm-count .bad,.fm-skin-clip .fm-log .bad{color:#9A4038}
.fm-skin-clip .fm-adr.warn,.fm-skin-clip .fm-why.warn,.fm-skin-clip .fm-count .warn,.fm-skin-clip .fm-log .warn{color:#7D5F22}
.fm-skin-clip .fm-empty,.fm-skin-clip .fm-count,.fm-skin-clip .fm-count .note{color:var(--prn2)}
.fm-skin-clip .fm-count b{color:var(--prn)}
.fm-skin-clip .fm-addrow{background:transparent;border-top:1px solid var(--rule);color:var(--prn)}
.fm-skin-clip .fm-addrow:hover{background:rgba(0,0,0,.035);color:var(--ink)}
.fm-skin-clip .fm-pastelink,.fm-skin-clip .fm-alsolink{color:var(--prn);text-decoration:underline;text-decoration-color:rgba(42,47,51,.35);text-underline-offset:3px}
.fm-skin-clip .fm-pastelink:hover,.fm-skin-clip .fm-alsolink:hover{color:var(--ink);text-decoration-color:var(--ink)}
.fm-skin-clip .fm-rm{color:var(--prn2)}
.fm-skin-clip .fm-rm:hover{color:#9A4038;background:rgba(154,64,56,.08)}
.fm-skin-clip .fm-btn{background:transparent;box-shadow:inset 0 0 0 1.2px var(--prn2);color:var(--prn)}
.fm-skin-clip .fm-btn:hover{background:rgba(31,42,68,.04);box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.fm-skin-clip .fm-nudge,.fm-skin-clip .fm-warn{background:transparent;box-shadow:inset 0 0 0 1px rgba(125,95,34,.45);color:var(--prn)}
.fm-skin-clip .fm-nudge b,.fm-skin-clip .fm-warn b{color:#7D5F22}
.fm-skin-clip .fm-inh{background:transparent;box-shadow:inset 0 0 0 1.5px var(--prn);border-radius:2px}
.fm-skin-clip .fm-inh h5{font-family:'Neucha',"SST",sans-serif;font-size:22px;font-weight:400;color:var(--ink)}
.fm-skin-clip .fm-inh .sub,.fm-skin-clip .fm-pick .mt{color:var(--prn2)}
.fm-skin-clip .fm-pick label{background:transparent;box-shadow:inset 0 0 0 1px var(--rule);border-radius:2px}
.fm-skin-clip .fm-pick label:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fm-skin-clip .fm-pick .nm{font-family:'Neucha',"SST",sans-serif;font-size:18px;color:var(--ink)}
.fm-skin-clip .fm-pick input{accent-color:var(--ink)}
.fm-skin-clip .fm-foot{box-shadow:inset 0 1px 0 var(--rule)}
.fm-skin-clip .fm-foot+.fm-foot{box-shadow:none}
.fm-skin-clip .fm-consent{color:var(--prn)}
.fm-skin-clip .fm-consent input{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin:1px 0 0;cursor:pointer;background-color:transparent;box-shadow:inset 0 0 0 1.5px var(--prn)}
.fm-skin-clip .fm-consent input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fm-skin-clip .fm-go{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);border-radius:3px;font-weight:600}
.fm-skin-clip .fm-go:hover{background:rgba(31,42,68,.06);box-shadow:inset 0 0 0 1.5px var(--ink)}
.fm-skin-clip .fm-go:focus-visible{box-shadow:inset 0 0 0 2.5px var(--ink)}
.fm-skin-clip .fm-err{color:#8E3A34;background:rgba(154,64,56,.06);box-shadow:inset 0 0 0 1px rgba(154,64,56,.42)}
.fm-skin-clip .fm-ok .tick{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.fm-skin-clip .fm-ok h4{color:var(--prn)}
.fm-skin-clip .fm-ok p{color:var(--prn2)}
.fm-skin-clip::-webkit-scrollbar{width:10px}
.fm-skin-clip::-webkit-scrollbar-thumb{background:rgba(42,47,51,.22);border-radius:5px;border:3px solid transparent;background-clip:padding-box}
@media (max-width:640px){
  /* the dynamic height where there is one: 100vh is the screen with the
     address bar hidden, so with it showing the foot of the form, Send
     included, sat under the bottom of the screen (3 Oct 2026) */
  .fm-skinwrap-pump,.fm-skinwrap-clip{width:100vw;height:100vh;height:100dvh;border-radius:0}
  .fm-skinwrap-pump{padding:12px}
  .fm-skinwrap-pump .fm-sheet.fm-skin-pump{max-height:calc(100vh - 24px);height:calc(100vh - 24px);max-height:calc(100dvh - 24px);height:calc(100dvh - 24px);
    padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .fm-skinwrap-clip .fm-sheet.fm-skin-clip{max-height:100vh;height:100vh;max-height:100dvh;height:100dvh;border-radius:0;
    padding:30px 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .fm-sheet.fm-skin-pump:has([data-f=plan]){display:block}
}

/* model credits (26 Sep 2026): the CC BY licence asks for a visible credit
   wherever the work is shown, so the Studio lists each model it is built
   from, in the menu's Settings. Quiet, like the rest of the menu. */
.rm-cr{display:flex;flex-direction:column;gap:var(--s3)}
.rm-cr-lead,.rm-cr-foot{margin:0;font-size:12.5px;line-height:1.55;color:var(--t2)}
.rm-cr-foot{color:var(--t3)}
.rm-cr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rm-cr-row{padding:8px 0;border-top:1px solid rgba(255,255,255,.06)}
.rm-cr-row:first-child{border-top:0;padding-top:0}
.rm-cr-t{color:var(--t1);font-size:13px;line-height:1.4;text-decoration:none;overflow-wrap:anywhere}
.rm-cr-t:hover,.rm-cr-t:focus-visible{text-decoration:underline;text-underline-offset:3px;outline:none}
.rm-cr-m{margin-top:3px;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:12px;color:var(--t3)}
.rm-cr-l{font:500 9.5px/1.4 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t2);text-decoration:none;padding:1px 6px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
.rm-cr-l:hover,.rm-cr-l:focus-visible{color:var(--t1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);outline:none}

/* the full calendar on the computer (26 Sep 2026): the Calendar page in the
   right half of the desk screen, one column, one verb back to your numbers */
.rm-face.is-cal>.rm-face-in{display:none}
.rm-face-cal{display:none;position:absolute;inset:0;flex-direction:column;background:#0A0B0D}
.rm-face.is-cal>.rm-face-cal{display:flex}
.rm-face-calbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 8px;
  font:500 10px/1.3 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--t2)}
.rm-face-calback{font:inherit;letter-spacing:.08em;padding:4px 12px;border:0;border-radius:var(--r-pill);background:transparent;
  color:#C9D0D6;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:color .2s,background .2s,box-shadow .2s}
.rm-face-calback:hover,.rm-face-calback:focus-visible{color:#F2F4F5;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);outline:none}
.rm-face-calin{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:0 14px 14px}
.rm-face-calin>.pane{padding:0;margin:0}
.rm-face-cal .ev-two{grid-template-columns:1fr}
.rm-face-cal .ev-days{grid-auto-rows:60px}
.rm-face-calin::-webkit-scrollbar{width:11px;height:0}
.rm-face-calin::-webkit-scrollbar-track{background:transparent;margin:14px 0}
.rm-face-calin::-webkit-scrollbar-thumb{background:transparent;border-radius:6px;border:solid transparent;border-width:0 5px 0 3px;background-clip:padding-box}
.rm-face-calin.rm-scrolling::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.14)}

/* the photo frames (26 Sep 2026): one frame at a time over the blurred
   Studio, the room's own walnut frame RENDERED (frameface.py) round the
   person's photo, which sits in its opening under the picture. No outer
   shadow anywhere: the frame is lit by the render, the controls by rims. */
.rm-fr{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(3,4,5,.36);-webkit-backdrop-filter:blur(16px) brightness(.62);backdrop-filter:blur(16px) brightness(.62);
  opacity:0;transition:opacity .35s var(--ease)}
.rm-fr.on{opacity:1}
.rm-fr-box{display:flex;align-items:center;gap:18px;margin-top:-22px}
.rm-fr-hold{position:relative;width:min(56vh,520px,68vw);aspect-ratio:1}
.rm-fr-img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none}
.rm-fr-open{position:absolute;overflow:hidden;background:#15181B}
.rm-fr-photo{position:absolute;inset:0;background-repeat:no-repeat}
.rm-fr-photo[hidden],.rm-fr-empty[hidden]{display:none}
.rm-fr-open.placing{cursor:grab;touch-action:none}
.rm-fr-open.placing:active{cursor:grabbing}
.rm-fr-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(233,237,240,.2)}
.rm-fr-mk{width:42%;height:auto}
.rm-fr-nav{flex:none;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:rgba(8,9,11,.6);color:var(--t2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:color .2s,background .2s,box-shadow .2s}
.rm-fr-nav:hover,.rm-fr-nav:focus-visible{color:var(--t1);background:rgba(20,22,26,.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);outline:none}
.rm-fr-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rm-fr-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;max-width:min(92vw,720px);padding:9px 16px;
  border-radius:18px;background:rgba(8,9,11,.72);font-size:13px;color:var(--t2)}
.rm-fr-n{font:500 10px/1.3 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--t2)}
.rm-fr-note{color:var(--t3);font-size:12.5px}
.rm-fr-who{flex-basis:100%;text-align:center;color:var(--t3);font-size:11.5px}
.rm-fr-v{font:inherit;font-size:13px;padding:5px 12px;border:0;border-radius:var(--r-pill);background:transparent;color:#C9D0D6;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:color .2s,background .2s,box-shadow .2s}
.rm-fr-v:hover,.rm-fr-v:focus-visible{color:#F2F4F5;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);outline:none}
/* THE i ON THE STUDIO'S OWN SCREENS (29 Sep 2026): the press's circle, and
   its paragraph side to side (on the frame, the bar's first row) */
.rm-info{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--t2);
  background:rgba(255,255,255,.06);transition:color .2s var(--ease),background .2s var(--ease)}
.rm-info svg{width:14px;height:14px}
.rm-info:hover,.rm-info:focus-visible{color:var(--t1);background:rgba(255,255,255,.1);outline:none}
.rm-info[aria-expanded="true"]{color:var(--t1);background:rgba(255,255,255,.12)}
.rm-about{margin:0;font-size:12.5px;line-height:1.55;color:var(--t2);text-align:left}
.rm-about[hidden]{display:none}
.rm-fr-bar .rm-about{flex-basis:100%;padding:2px 2px 4px}
.rm-fr-v[disabled]{opacity:.5;cursor:default}
.rm-fr-go{color:#DDF6F8;box-shadow:inset 0 0 0 1px rgba(111,220,230,.42)}
.rm-fr-go:hover,.rm-fr-go:focus-visible{box-shadow:inset 0 0 0 1px rgba(111,220,230,.7)}
.rm-fr-out{color:#C77B7B}
.rm-fr-out:hover,.rm-fr-out:focus-visible{color:#D99393;box-shadow:inset 0 0 0 1px rgba(199,123,123,.45)}
.rm-fr-z{display:flex;align-items:center;gap:8px;color:var(--t2);font-size:12.5px}
.rm-fr-zoom{width:140px;accent-color:#6FDCE6}
.rm-fr-msg{margin:0;min-height:1.3em;font-size:12.5px;color:var(--t2)}
.rm-fr-msg.bad{color:#C77B7B}
.rm-fr-back{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);padding:9px 16px;border:0;border-radius:var(--r-pill);cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:var(--t1);background:rgba(8,9,11,.72);transition:background .2s var(--ease)}
.rm-fr-back:hover,.rm-fr-back:focus-visible{background:rgba(20,22,26,.86);outline:none}
.rm-fr-back:focus-visible{box-shadow:inset 0 0 0 1px rgba(111,220,230,.55)}
@media (prefers-reduced-motion: reduce){.rm-fr{transition:none}}
/* the menu's foot fades while there is more below (roomMenuEdge, 28 Sep 2026) */
#rm-menu.rm-more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 44px),transparent)}


/* touch (28 Sep 2026): the Remastered / Classic switch and the menu's
   light switch take the invisible 40px hit area of theme.css's touch
   block. .rm-seg's own ::after is its rim; the buttons draw none. So do
   the walkthrough's buttons and its close (Oct 6, 2026); the close is
   absolute already, which holds its hit area. */
@media (pointer:coarse){
  .rm-seg button,.rm-wk-btn{position:relative}
  .rm-seg button::after,.rm-wk-btn::after,.rm-wk-x::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,40px);height:max(100%,40px);transform:translate(-50%,-50%)}
}

/* ---- THE WALKTHROUGH (Oct 6, 2026, app-walk.js) ----
   One object lit by the room's own hover light, the rest dimmed by a soft
   pool round it (the Studio sets --wx, --wy, --wrx, --wry from the object's
   box each frame), never a ring or an outline (Ramz: "kinda tacky"); a card
   over the whole Studio dims it evenly. The layer takes the pointer, so
   nothing in the room answers while it runs; the menu (z 20, 21) and the
   forms (60, 61) stand above it. Inset light only, no outer glow. */
.rm-wk{position:absolute;inset:0;z-index:12;pointer-events:auto;
  background:radial-gradient(ellipse var(--wrx,1px) var(--wry,1px) at var(--wx,50%) var(--wy,50%),rgba(5,6,7,0) 0,rgba(5,6,7,0) 70%,rgba(5,6,7,.45) 100%)}
.rm-wk.is-center{background:rgba(5,6,7,.5)}
.rm-stage.rm-walking .rm-bar,.rm-stage.rm-walking .rm-home,.rm-stage.rm-walking .rm-arrow,.rm-stage.rm-walking .rm-tag{visibility:hidden}
.rm-wk-card{position:absolute;left:50%;top:50%;width:350px;box-sizing:border-box;padding:18px 20px 16px;border-radius:14px;
  background:rgba(10,12,14,.8);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--t1);
  opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none}
.rm-wk-card.on{opacity:1;transform:none;pointer-events:auto}
.rm-wk-card::before,.wk-book-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.07) 55%,rgba(255,255,255,.03));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.rm-wk-card.is-wide{width:460px;padding:22px 24px 18px}
.rm-wk-card.is-dock{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto}
.rm-wk-lab{font-family:"SST Typewriter",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;color:color-mix(in srgb,var(--t1) 55%,var(--t2))}
.rm-wk-t{margin:6px 30px 6px 0;font-size:19px;font-weight:500;line-height:1.25;color:var(--t1)}
.rm-wk-card.is-wide .rm-wk-t{font-size:22px}
.rm-wk-b{margin:0;font-size:14px;line-height:1.5;color:#C5CDD3}
.rm-wk-b+.rm-wk-b,.rm-wk-chips+.rm-wk-b{margin-top:10px}
.rm-wk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rm-wk-chips i{font-style:normal;font-family:"SST Typewriter",ui-monospace,monospace;font-size:12px;color:#DDE3E7;padding:4px 9px;border-radius:7px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.rm-wk-row{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.rm-wk-btn{font:inherit;font-size:13px;font-weight:500;min-height:34px;padding:7px 14px;border:0;border-radius:9px;cursor:pointer;color:var(--t1);
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background .2s var(--ease)}
.rm-wk-btn:hover,.rm-wk-btn:focus-visible{outline:none;background:rgba(255,255,255,.08)}
.rm-wk-btn.go{background:rgba(53,201,214,.16);box-shadow:inset 0 0 0 1px rgba(111,220,230,.6);color:#EAFBFD}
.rm-wk-btn.go:hover,.rm-wk-btn.go:focus-visible{background:rgba(53,201,214,.24)}
.rm-wk-note{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--t2)}
.rm-wk-x{position:absolute;top:10px;right:10px;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--t2);background:transparent}
.rm-wk-x svg{width:12px;height:12px}
.rm-wk-x:hover,.rm-wk-x:focus-visible{outline:none;color:var(--t1);background:rgba(255,255,255,.06)}
.rm-wk-dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:8px;pointer-events:none}
.rm-wk-dots i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.rm-wk-dots i.on{background:#F2F4F5}
/* THE BOOK: the same stops as slides (Resources, and the classic pages' walk
   on a device that cannot draw the Studio). Under the forms, so the
   agreement opens over it */
.wk-book{position:fixed;inset:0;z-index:58;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;
  background:rgba(4,5,6,.74);opacity:0;transition:opacity .25s var(--ease)}
.wk-book.on{opacity:1}
.wk-book-in{width:min(860px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.wk-book-pic{flex:none;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#050607}
.wk-book-pic img{display:block;width:100%;height:100%;object-fit:cover}
.wk-book-card{position:relative;flex:none;box-sizing:border-box;padding:18px 20px 16px;border-radius:14px;background:rgba(10,12,14,.9);color:var(--t1)}
@media (max-width:719px){.rm-wk-dots{display:none}}
@media (max-width:640px){.wk-book{padding:12px;align-items:flex-start}.wk-book-in{gap:10px}}
@media (prefers-reduced-motion:reduce){.rm-wk-card{transition:none;transform:none}.wk-book{transition:none}}