:root {
  --bench: #e6dfd3;
  --ink: #1d1e20;
  --lilac: #C9A6F7;
  --lime: #D7F24A;
  --orange: #FF6A2B;
  --pink: #FF4FA3;
  --obj-serif: 'Instrument Serif', 'Times New Roman', serif;   /* desk OBJECTS only (name card, index-card note, envelope): not chrome */
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter Tight', system-ui, sans-serif;
  --spring: cubic-bezier(.2, .9, .25, 1.12);
  --out: cubic-bezier(.16, 1, .3, 1);
  --paper: #f5f4f0; --paper2: #f6f1e8; --paper3: #f7f3ea; --tip: rgba(245, 244, 240, .95);
  --dimbg: rgba(206, 205, 202, .84); --scrimbg: rgba(206, 205, 202, .78); --hair: rgba(29, 30, 32, .1);
  --pill-bg: #1d1e20; --pill-fg: #f6f1e8; --btn-on-lilac: #1d1e20;
  --shadow-c: 29, 30, 32;
  --night-ease: cubic-bezier(.3, 1.35, .45, 1);
  /* r31: index-card UI system (rolodex card, project viewer bar, desk chrome) */
  /* chrome tokens, same values as the project pages (--ps-*); ts / accent-ink are darkened for 4.5:1 body contrast */
  --ps-font: 'Inter', system-ui, sans-serif;
  --ps-bg: #EDEAE5; --ps-elev: #E5E2DC; --ps-tp: #111111; --ps-ts: rgba(17,17,17,.64); --ps-accent: #8C7B68; --ps-accent-ink: #6B5B49; --ps-accent-dim: rgba(140,123,104,.55);
  --ps-rule: rgba(17,17,17,.14); --ps-nav: rgba(237,234,229,.9);
  --ps-shadow: 0 1px 0 rgba(17,17,17,.04), 0 18px 40px -22px rgba(60,48,36,.38), 0 3px 8px -4px rgba(60,48,36,.14);
  /* legacy r31 card tokens: only #tv (toyview.css) still reads these */
  --ix-card: #F7F3EA; --ix-card-hi: #FFFDF7; --ix-tab: #EAE3D2; --ix-ink: #22201C; --ix-red: #D9534F; --ix-rule: #9DBBDD; --ix-shadow: 0 2px 4px rgba(30, 20, 10, .28);
}
html.dark {
  --bench: #12141c; --ink: #ece7dc; --paper: #22242d; --paper2: #23252e; --paper3: #262833; --tip: rgba(38, 40, 51, .95);
  --dimbg: rgba(10, 11, 18, .84); --scrimbg: rgba(10, 11, 18, .8); --hair: rgba(236, 231, 220, .14);
  --pill-bg: #f1ebdf; --pill-fg: #1b1c20; --shadow-c: 0, 0, 0;
  --ix-card: #E4DDCB; --ix-card-hi: #EDE6D4; --ix-tab: #D3CAB4; --ix-rule: #8DA6C2; --ix-red: #C94D49; --ix-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  --ps-bg: #080808; --ps-elev: #111111; --ps-tp: #EDE8DB; --ps-ts: rgba(237,232,219,.68); --ps-accent: #C8B9A5; --ps-accent-ink: #C8B9A5; --ps-accent-dim: rgba(200,185,165,.5);
  --ps-rule: rgba(237,232,219,.14); --ps-nav: rgba(8,8,8,.9);
  --ps-shadow: 0 1px 0 rgba(237,232,219,.03), 0 18px 40px -20px rgba(0,0,0,.85), 0 3px 8px -4px rgba(0,0,0,.6);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--bench); color: var(--ink); font-family: var(--sans); overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* grain over everything, very light: the renders are clean, the room is not */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .08; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

#view { position: fixed; inset: 0; contain: strict; overflow: clip; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
#view.panning, #view.panning * { cursor: grabbing !important; }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.plate { position: absolute; max-width: none; display: block; user-select: none; }

/* ---------- objects */
.obj {
  position: absolute; display: block; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit;
  text-align: left; pointer-events: none; transform-origin: 50% 50%;
  transition: transform .7s var(--out);
}
.obj.hot { cursor: pointer; }
.obj.hit .lift { pointer-events: auto; }   /* alpha hit-testing: bench.js sets .hit on the one object whose opaque pixels are under the pointer */
.obj img { display: block; user-select: none; -webkit-user-drag: none; }
.sh { position: absolute; max-width: none; transition: transform .5s var(--spring), opacity .5s var(--out); }
.psh { translate: 4px 6px; opacity: .26; filter: brightness(0) blur(1.6px); }   /* r13: a cup pen's shadow is its own flattened silhouette */
.lift { position: absolute; inset: 0; display: block; transform-origin: 50% 55%; transition: transform .5s var(--spring); }
.cut { position: absolute; inset: 0; width: 100%; height: 100%; }
.q { position: absolute; overflow: hidden; transform-origin: 50% 50%; }
.q-screen { background: #050506; }
.qk { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.q video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.glare {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 27%),
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.07), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 18px rgba(0,0,0,.35);
}
.pv {
  position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto; color: #f3efe6; background: rgba(20,20,24,.5);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 3px 8px rgba(20,16,40,.28); opacity: .72;
  transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .25s;
}
.pv svg { pointer-events: none; width: 12px; height: 12px; fill: currentColor; display: block; }
.pv .pv-b, .pv[aria-pressed="true"] .pv-a { display: none; }
.pv[aria-pressed="true"] .pv-b { display: block; }
.pv-t { bottom: auto; top: 10px; }   /* the laptop screen's lower corner sits under the name card */
.pv:hover { opacity: 1; transform: scale(1.12); }
.pv:focus-visible { opacity: 1; outline: 2px solid #f3efe6; outline-offset: 2px; }
.pv:active { transform: scale(.92); transition-duration: .1s; }
html.dark .pv { background: rgba(14,14,18,.62); box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 3px 8px rgba(0,0,0,.5); }
.ink { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: saturate(1.04); }

/* hover: the object comes up off the bench, its shadow softens and drops away */
.obj.hot:hover .lift, .obj.hot:focus-visible .lift { transform: translate(-3px, -7px) scale(1.012); }
.obj.hot:hover .sh, .obj.hot:focus-visible .sh { transform: translate(5px, 8px) scale(1.025); opacity: .72; }
.obj.hot:active .lift { transform: translate(-1px, -2px) scale(.998); transition-duration: .12s; }
.obj.hot:active .sh { transform: translate(1px, 2px); opacity: .95; transition-duration: .12s; }
.obj:focus { outline: none; }
.obj.hot:focus-visible .lift::after {
  content: ''; position: absolute; inset: 4px; border-radius: 10px; outline: 1.5px dashed var(--ink); outline-offset: 2px; opacity: .55;
}

.obj[data-t]::after {
  content: attr(data-t); position: absolute; left: 12px; top: 0; transform: translateY(-100%) translateY(8px); opacity: 0;
  font: 500 10.5px/1.25 var(--mono); letter-spacing: .02em; color: var(--ink); white-space: pre; pointer-events: none;
  background: var(--tip); padding: 5px 8px 6px; border-radius: 3px; z-index: 5;
  box-shadow: 0 1px 0 rgba(29,30,32,.06), 0 8px 18px -10px rgba(29,30,32,.45);
  transition: transform .45s var(--spring), opacity .25s var(--out);
}
.obj.hot:hover::after, .obj.hot:focus-visible::after { opacity: 1; transform: translateY(-100%) translateY(-2px); }
html.m .obj[data-t]::after, .obj.held::after { display: none; }

/* held: it comes up to the camera */
.obj.held { z-index: 40 !important; transform: var(--pick); transition: transform .75s var(--spring); }
.obj.held .sh { opacity: 0; }
.obj.held .lift { transform: none !important; }
.obj.settling { z-index: 39 !important; }
#dim {
  position: absolute; inset: -4000px; z-index: 30; background: var(--dimbg); opacity: 0; pointer-events: none;
  transition: opacity .5s var(--out);
}
body.holding #dim { opacity: 1; pointer-events: auto; }
body.holding .obj.o-walker { z-index: 8 !important; }   /* the walker rides above props (34) but must sink under the dim while something is held */
body.holding .obj:not(.held) .lift { pointer-events: none; }

/* caption */
#cap {
  position: fixed; z-index: 45; right: 40px; bottom: 36px; width: 330px; padding: 18px 20px 16px;
  background: var(--paper); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(29,30,32,.06), 0 18px 40px -18px rgba(29,30,32,.45), 0 2px 6px -2px rgba(29,30,32,.12);
  opacity: 0; transform: translateY(14px); transition: opacity .35s var(--out), transform .55s var(--spring);
}
#cap.on { opacity: 1; transform: none; }
.cap-meta { margin: 0 0 6px; font: 400 10.5px/1.4 var(--mono); letter-spacing: .02em; opacity: .6; }
.cap-title { margin: 0 0 8px; font: 300 32px/.98 var(--ps-font); letter-spacing: -.02em; }
.cap-short { margin: 0 0 14px; font: 400 13.5px/1.6 var(--sans); }
.cap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cap-link, .cap-close {
  font: 500 11.5px/1 var(--mono); color: var(--ink); text-decoration: none; border: 0; cursor: pointer;
  padding: 9px 11px; border-radius: 4px; transition: transform .3s var(--spring), opacity .2s;
}
.cap-link { background: var(--lilac); color: var(--btn-on-lilac); }
.cap-link[hidden] { display: none; }
.cap-close { background: transparent; opacity: .7; padding-right: 0; }
.cap-close kbd { font: inherit; opacity: .5; margin-left: 4px; }
html.m kbd { display: none; }   /* touch: no Escape key to point at */
.cap-link:hover, .cap-close:hover { transform: translateY(-2px); }
.cap-close:hover { opacity: 1; }
.cap-link:active, .cap-close:active { transform: translateY(0) scale(.97); }
.cap-link:focus-visible, .cap-close:focus-visible, .ic-mail a:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
html.m #cap { left: 12px; right: 12px; bottom: 12px; width: auto; }

/* ---------- the name card (ref 20): charcoal card, hairline hardware UI, big serif in a lilac box */
.nc { position: absolute; inset: 0; padding: 22px 26px; color: #e9e7e2; }
.nc-ui { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.nc-ui .dots {
  position: absolute; right: 24px; top: 22px; width: 76px; height: 50px;
  background: radial-gradient(circle, transparent 2.2px, #cfcdc8 2.3px, #cfcdc8 2.9px, transparent 3px) 0 0 / 12.6px 12.6px;
}
.nc-ui .knobs { position: absolute; left: 26px; top: 22px; display: flex; gap: 5px; }
.nc-ui .knobs i { width: 15px; height: 15px; border: 1px solid #cfcdc8; border-radius: 50%; position: relative; }
.nc-ui .knobs i::after { content: '+'; position: absolute; inset: 0; font: 400 10px/13px var(--mono); text-align: center; }
.nc-ui .tog { position: absolute; right: 24px; bottom: 26px; width: 30px; height: 15px; border: 1px solid #cfcdc8; border-radius: 8px; }
.nc-ui .tog i { position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.nc-ui .rd { position: absolute; left: 26px; bottom: 22px; font: 400 9.5px/1 var(--mono); letter-spacing: .04em; }
.nc-ui .rd2 { position: absolute; right: 66px; bottom: 25px; font: 400 9.5px/1 var(--mono); border: 1px solid #cfcdc8; padding: 2px 4px; }
.nc-name { position: absolute; left: 24px; top: 50px; margin: 0; font: 400 80px/.95 var(--obj-serif); letter-spacing: -.03em; color: var(--ink); }
.nc-name .hl { position: relative; display: inline-block; background: var(--lilac); padding: 0 12px 3px 7px; margin-bottom: 5px; }
.tile { position: absolute; display: block; width: 15px; height: 15px; }
.tile.t1 { left: -6px; top: -7px; background: var(--lime); }
.tile.t2 { right: 34px; top: -9px; width: 13px; height: 13px; background: var(--orange); }
.tile.t3 { left: 70px; bottom: -6px; width: 11px; height: 11px; background: var(--pink); }

/* ---------- index card */
.ic {
  position: absolute; inset: 0; padding: 18px 18px 12px 20px;
  background:
    linear-gradient(transparent 22px, rgba(255, 79, 163, .5) 22px, rgba(255, 79, 163, .5) 23px, transparent 23px),
    repeating-linear-gradient(transparent 0 26px, rgba(59, 75, 255, .18) 26px 27px);
  background-position: 0 4px, 0 31px;
  mix-blend-mode: multiply; color: #26272a; font: 400 10px/27px var(--mono);
}
.ic p { margin: 0; }
.ic-line { font: 400 20px/27px var(--obj-serif); letter-spacing: -.01em; padding-top: 10px; }
.ic-cl { font: 400 10px/27px var(--sans); letter-spacing: .01em; opacity: .8; white-space: nowrap; }
.ic-mail { font-size: 9.5px; white-space: nowrap; }
.ic-mail a { color: inherit; text-decoration: none; background: linear-gradient(var(--lime), var(--lime)) 0 80% / 100% 7px no-repeat; pointer-events: auto; transition: opacity .2s; }
.ic-mail a:hover { opacity: .7; }
.ic-mail a:active { opacity: .5; }

/* ---------- placeholders */
.soon {
  position: absolute; left: 56%; top: 39%; width: 70px; height: 70px; margin: -35px 0 0 -35px; transform: rotate(var(--r));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 500 9.5px/1.15 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #2a2b20; mix-blend-mode: multiply;
}
.film-note {
  position: absolute; left: 50%; top: 76%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap;
  font: 400 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.env-l {
  position: absolute; left: 20px; bottom: 11px; font: 400 9px/1.45 var(--mono); letter-spacing: .03em; color: #3d2f1f; mix-blend-mode: multiply;
}
.env-l b { font: 400 20px/1.05 var(--obj-serif); letter-spacing: -.01em; }

/* ---------- mobile */

@media (prefers-reduced-motion: reduce) {
  .obj, .lift, .sh, .tag, #cap, #dim, #all, #all-btn, #lamp, #lamp img, #lamp-glow, #lamp-glow-img, .nt, .dk, .find { transition: none !important; animation: none !important; }
}

/* ---------- all work */
#all-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; padding: 10px 16px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--pill-bg); color: var(--pill-fg); font: 500 12px/1 var(--mono); letter-spacing: .02em;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 14px -4px rgba(29,30,32,.45), 0 14px 30px -12px rgba(29,30,32,.4);
  transition: transform .4s var(--spring);
}
#all-btn:hover { transform: translateY(-2px); }
#all-btn:active { transform: translateY(0) scale(.96); }
#all-btn:focus-visible, .all-x:focus-visible, #all a:focus-visible { outline: 1.5px solid var(--lilac); outline-offset: 3px; }
#all {
  position: fixed; right: 16px; bottom: 64px; z-index: 41; width: min(340px, calc(100vw - 32px)); max-height: 62vh; overflow: auto;
  padding: 14px 16px; border-radius: 18px; background: var(--paper2); color: var(--ink);
  box-shadow: 0 1px 0 #fff inset, 0 10px 24px -8px rgba(29,30,32,.4), 0 30px 60px -20px rgba(29,30,32,.35);
  opacity: 0; transform: translateY(10px); transition: transform .4s var(--spring), opacity .3s var(--out);
}
#all.on { opacity: 1; transform: none; }
#all[hidden] { display: none; }
#all ul { list-style: none; margin: 8px 0 0; padding: 0; }
#all a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hair); color: inherit; text-decoration: none; font: 300 17px/1.2 var(--ps-font); }
#all a i { font: 400 10px/1.6 var(--mono); opacity: .55; font-style: normal; white-space: nowrap; }
#all a:hover span { text-decoration: underline; text-underline-offset: 3px; }
#all a:active { opacity: .6; }
.all-x { border: 0; background: none; padding: 0; font: 400 10.5px/1 var(--mono); opacity: .6; cursor: pointer; }
.all-x:hover { opacity: 1; }
.all-x:active { opacity: .4; }

/* ---------- pan (desktop) */

/* ---------- stickers, stuck on the bench (adapted from r3-stickers) */
.pst { position: absolute; aspect-ratio: 1; z-index: 7; transform: rotate(var(--r)); isolation: isolate; pointer-events: none; }
.pst > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; pointer-events: none; user-select: none; }
.pst .art { -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; overflow: hidden; }
.pst .print { position: absolute; inset: 0; display: grid; place-items: center; }
.pst .print svg { width: 100%; height: 100%; display: block; }
.pst .hl { mix-blend-mode: hard-light; }
.pst .peel { opacity: 0; }
.pst.can-peel { pointer-events: auto; cursor: pointer; transition: transform .45s var(--spring); }
.pst.can-peel:hover, .pst.can-peel.lift { transform: rotate(var(--r)) translateY(-2px); }
.pst.can-peel:active { transform: rotate(var(--r)) scale(.97); transition-duration: .12s; }
.pst.can-peel.lift .art { -webkit-mask-image: var(--mp); mask-image: var(--mp); }
.pst.can-peel.lift .peel { opacity: 1; }
.pst.can-peel.lift .rest { opacity: 0; }
.pst.can-peel:focus { outline: none; }
.pst.can-peel:focus-visible::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; outline: 2px dashed var(--ink); outline-offset: 4px; }

/* ================= r8: fixed UI */
#home { position: fixed; left: 40px; top: 14px; z-index: 40; cursor: pointer; }   /* look: nav.css */
#hint {
  position: fixed; left: 50%; bottom: 16px; z-index: 35; margin: 0; transform: translateX(-50%); pointer-events: none;
  padding: 11px 16px; border-radius: 999px; background: var(--pill-bg); color: var(--pill-fg);
  font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: lowercase;
  transition: opacity .8s var(--out);
}
#hint span { display: inline-block; opacity: .85; animation: hint-nudge 2.8s ease-in-out infinite; }
#hint.gone { opacity: 0; }
@keyframes hint-nudge { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
#all-btn { bottom: max(16px, env(safe-area-inset-bottom)); }
#all { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 48px); }
@media (max-width: 760px) { #hint { bottom: 70px; } }

/* ================= stickers: the sheet */
.pst { pointer-events: auto; cursor: pointer; transition: transform .45s var(--spring); text-decoration: none; display: block; z-index: 7; -webkit-user-drag: none; }
.pst:hover, .pst.lift { transform: rotate(var(--r)) translateY(-3px) scale(1.02); }
.pst:active { transform: rotate(var(--r)) scale(.97); transition-duration: .12s; }
.pst:focus { outline: none; }
.pst:focus-visible::after { content: ''; position: absolute; inset: 8%; border-radius: 14px; outline: 2px dashed var(--ink); outline-offset: 4px; }
.pst.can-peel:hover, .pst.can-peel.lift { transform: rotate(var(--r)) translateY(-2px); }
.pst .print img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pst .print .tag { position: absolute; left: 0; right: 0; bottom: 11%; text-align: center; font: 500 10px/1 var(--mono); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.pst .print.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4), transparent 45%); }
.sheet-label { position: absolute; font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(29,30,32,.4); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  #hint span, .pst, #home { animation: none !important; transition: none !important; }
}

/* finds: flat things on the mat */
.find { position: absolute; z-index: 1; pointer-events: none; transform: rotate(var(--r, 0deg)); }
.find.note { width: 140px; height: 140px; padding: 22px 16px; box-sizing: border-box; background: #f6e27a; font-family: var(--obj-serif); font-style: italic; font-size: 25px; line-height: 1.1; color: #3a3320; box-shadow: 0 1px 1px rgba(52,36,20,.35), 0 10px 14px -6px rgba(52,36,20,.3), 0 20px 26px -12px rgba(52,36,20,.2); }
.find.note.b { background: #f6a9c8; width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; }
.find.note.b .si { font-size: 30px; line-height: 1; white-space: nowrap; }
.find.note.b .si-u { width: 84px; height: 18px; margin-top: 3px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-1deg); }
.find.note.b .si-u .u1 { stroke-width: 3.6; }
.find.note.b .si-u .u2 { stroke-width: 1.7; }
.find.ring { width: 96px; height: 96px; border-radius: 50%; border: 7px solid rgba(110,70,40,.28); box-shadow: 0 0 0 2px rgba(110,70,40,.1) inset, 0 0 5px rgba(110,70,40,.2); transform: rotate(var(--r)) scaleY(.94); }
.find.clip { width: 38px; height: 90px; filter: drop-shadow(0 2px 1.5px rgba(40,30,50,.35)) drop-shadow(0 6px 5px rgba(40,30,50,.15)); }
.find.tape { padding: 9px 18px; background: rgba(232,214,160,.9); font-family: 'JetBrains Mono', monospace; font-size: 15px; color: #4a3f22; clip-path: polygon(0 0, 3% 12%, 0 25%, 3% 38%, 0 50%, 3% 62%, 0 75%, 3% 88%, 0 100%, 100% 100%, 97% 88%, 100% 75%, 97% 62%, 100% 50%, 97% 38%, 100% 25%, 97% 12%, 100% 0); filter: drop-shadow(0 3px 3px rgba(52,36,20,.25)); }

/* ================= night: rendered layers crossfade by opacity; DOM things get a dark veil with a clear pool under the lamp */
.nt { opacity: 0; visibility: hidden; transition: opacity 1s ease-in-out; }
.nt.ok { visibility: visible; }
html.dark .nt.ok { opacity: 1; }
.plate.nt { pointer-events: none; }
.sh.nt { transition: transform .5s var(--spring), opacity 1s ease-in-out; }
html.dark .obj.hot:hover .sh.nt, html.dark .obj.hot:focus-visible .sh.nt { opacity: .72; }
html.dark .obj.held .sh.nt { opacity: 0; }
.dk {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(6, 8, 22, 0) 0, rgba(6, 8, 22, .12) 240px, rgba(6, 8, 22, .28) 520px, rgba(6, 8, 22, .36) 900px);
  transition: opacity 1s ease-in-out;
}
html.dark .dk { opacity: 1; }
.dk.off { display: none; }
.o-sketchbook .q-area > .dk { display: none; }
.plate-dk { z-index: 0; border-radius: 0; }
.obj-dk { -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.pst .dk { -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.find .dk { z-index: 2; }
.find.ring, .find.clip { transition: opacity 1s ease-in-out; }
html.dark .find.ring, html.dark .find.clip { opacity: .4; }
html.dark .sheet-label { color: rgba(236, 231, 220, .35); }

/* the lamp: a warm pool of light plus the click target */
#lamp-glow {
  position: absolute; width: 840px; height: 840px; z-index: 9; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .36), rgba(255, 170, 90, .16) 45%, rgba(255, 150, 80, 0) 100%);
  mix-blend-mode: screen; transition: opacity 1s ease-in-out;
}
html.dark #lamp-glow { opacity: 1; }
#lamp-glow-img { position: absolute; z-index: 9; pointer-events: none; opacity: 0; user-select: none; transition: opacity 1s ease-in-out; }
html.dark #lamp-glow-img { opacity: 1; }
#lamp {
  position: absolute; z-index: 37; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; border-radius: 40%;
  -webkit-tap-highlight-color: transparent;
}
#lamp.sw { border-radius: 8px; }
#lamp .sw-off, #lamp .sw-on { position: absolute; inset: 0; overflow: hidden; display: block; pointer-events: none; user-select: none; }
#lamp .sw-off img, #lamp .sw-on img { position: absolute; left: 0; top: 0; width: 1200%; height: 100%; max-width: none; display: block; will-change: transform; }
#lamp .sw-off, #lamp .sw-on { transition: opacity 1s ease-in-out; }
#lamp .sw-on { opacity: 0; }
html.dark #lamp .sw-on { opacity: 1; }
html.dark #lamp .sw-off { opacity: 0; }
/* The switch sprites are opaque 216x88 crops (no alpha), so their rectangle never matches the plate around the housing; clip them to the housing's own rounded shape. */
#lamp.sw { touch-action: none; cursor: grab; }
#lamp.sw.sw-drag { cursor: grabbing; }
#lamp:focus { outline: none; }
/* keyboard focus only: a ring that follows the housing's rounded shape (a shadow ring on the ::after, so nothing is drawn on click) */
#lamp::after { content: ""; position: absolute; inset: 8% 11% 12% 10%; border-radius: 14px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--lilac), 0 0 0 4px rgba(201, 166, 247, .28); transition: opacity .2s; }
#lamp:focus-visible::after { opacity: 1; }
#lamp:focus-visible { outline: none; }

/* ---------- movable: lift feedback lives in script (WAAPI scale / shadow); CSS only sets the cursor and the tidy-up pill */
[data-movable] { cursor: grab; -webkit-user-drag: none; }
.find[data-movable] { pointer-events: auto; }
.mv-carry, .mv-carry * { cursor: grabbing !important; }
.obj.mv-carry .lift { transition: none; }
#tidy {
  position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; padding: 10px 14px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--pill-bg); color: var(--pill-fg); font: 500 11px/1 var(--mono); letter-spacing: .04em; opacity: .8;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 14px -4px rgba(29,30,32,.4);
  transition: transform .4s var(--spring), opacity .2s var(--out);
}
#tidy[hidden] { display: none; }
#tidy:hover { transform: translateY(-2px); opacity: 1; }
#tidy:active { transform: scale(.95); }
#tidy:focus-visible { outline: 1.5px solid var(--lilac); outline-offset: 3px; }

/* reel: full-screen player opened from the tablet */
#reel-pop { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(12, 12, 16, .92); opacity: 0; transition: opacity .3s ease; }
#reel-pop.on { opacity: 1; }
#reel-pop video { width: min(96vw, 177vh); max-height: 92vh; border-radius: 14px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); transform: scale(.94); transition: transform .5s var(--spring); }
#reel-pop.on video { transform: none; }
#reel-pop .reel-x { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); cursor: pointer; transition: transform .25s var(--spring), opacity .2s; }
#reel-pop .reel-x svg { width: 20px; height: 20px; }
#reel-pop .reel-x:hover { transform: scale(1.1); background: rgba(255, 255, 255, .24); }
#reel-pop .reel-x:active { transform: scale(.94); }
#reel-pop .reel-x:focus-visible, #reel-pop video:focus-visible { outline: 2px solid var(--lilac, #c9a6f7); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #reel-pop, #reel-pop video, #reel-pop .reel-x { transition: none; } }

/* toy robots: draggable, hover wiggle (rotate only, damped like a spring), no click action */
.obj.prop { cursor: grab; }
.obj.prop:active { cursor: grabbing; }
.obj.toy { cursor: grab; }
.obj.toy:active { cursor: grabbing; }
.obj.toy .lift { transform-origin: 50% 90%; }
.obj.toy:hover .lift { animation: toy-wig .75s linear 1; }
@keyframes toy-wig { 0% { rotate: 0deg; } 14% { rotate: -5deg; } 30% { rotate: 4deg; } 46% { rotate: -2.6deg; } 62% { rotate: 1.5deg; } 80% { rotate: -.6deg; } 100% { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .obj.toy:hover .lift { animation: none !important; } }

/* prompt machine: the screen is 34x27 css px, so the text is laid out at 3x and scaled down (no minimum-font-size surprises) */
.pm-t { position: absolute; left: 0; top: 0; width: 337px; height: 270px; box-sizing: border-box; padding: 100px 24px 0; transform: scale(.3333); transform-origin: 0 0; font: 500 28px/34px var(--mono); letter-spacing: 0; white-space: pre; color: #d9f58a; text-shadow: 0 0 10px rgba(190, 240, 90, .75); overflow: hidden; pointer-events: none; }
.pm-t i { display: inline-block; width: 14px; height: 28px; margin-left: 2px; vertical-align: -4px; background: #d9f58a; animation: pm-blink 1s steps(1) infinite; }
@keyframes pm-blink { 50% { opacity: 0; } }

/* walker: animated sprite sheet (frames slid by transform inside a clip), fixed-direction contact shadow */
.obj.o-walker:not(.wk-live) .wk, .obj.o-walker:not(.wk-live) .wk-sh, .obj.o-walker:not(.wk-live) .wk-ct { display: none; }
.obj.o-walker.wk-live .cut, .obj.o-walker.wk-live > .sh, .obj.o-walker.wk-live .obj-dk { visibility: hidden !important; }
.wk { position: absolute; pointer-events: none; will-change: transform; }
.wk-clip { position: absolute; inset: 0; overflow: hidden; display: block; }
.wk-strip { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
.wk-strip img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; }
.wk-n { opacity: 0; transition: opacity 1s ease-in-out; }
.wk-d { transition: opacity 1s ease-in-out; }
html.dark .wk-n { opacity: 1; }
html.dark .wk-d { opacity: 0; }
.wk-sh, .wk-ct { position: absolute; pointer-events: none; display: block; transition: translate .5s cubic-bezier(.3,1.7,.5,1), opacity .5s ease; }
.wk-sil { position: absolute; inset: 0; display: block; filter: brightness(0) blur(2.6px); }
.wk-strip .wk-sd { opacity: 1; }
.wk-sh { translate: 13px 18px; opacity: .36; }
.wk-ct { translate: 4px 6px; opacity: .5; }
.wk-ct .wk-sil { filter: brightness(0) blur(1.1px); }
html.dark .wk-sh { opacity: .6; }
html.dark .wk-ct { opacity: .75; }
.obj.mv-carry .wk-sh { translate: 26px 36px; opacity: .24; }
.obj.mv-carry .wk-sh .wk-sil { filter: brightness(0) blur(6px); }
.obj.mv-carry .wk-ct { translate: 12px 17px; opacity: .3; }
.obj.mv-carry .wk-ct .wk-sil { filter: brightness(0) blur(3px); }
html.dark .obj.mv-carry .wk-sh { opacity: .4; }
html.dark .obj.mv-carry .wk-ct { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .wk-n, .wk-d, .wk-sh, .wk-ct { transition: none; } }

/* cranker cycle: animated sheets replace the static sprite and its baked shadow once loaded; shadow reuses the walker silhouette rules */
.obj.o-cranker:not(.ck-live) .ck { display: none; }
.obj.o-cranker.ck-live .cut, .obj.o-cranker.ck-live > .sh, .obj.o-cranker.ck-live .obj-dk { visibility: hidden !important; }
.obj.o-cranker:hover .lift { animation: none; }
.ck { position: absolute; display: block; pointer-events: none; }
.ckv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.ck-cable, .ck-cable-sh { position: absolute; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.ck-cable.on, .ck-cable-sh.on { opacity: 1; }
.ck-cable.away, .ck-cable-sh.away { opacity: 0; }
.ck-cable img, .ck-cable-sh img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; transition: opacity 1s ease-in-out; }
.ck-cable .ck-n, .ck-cable-sh .ck-n { opacity: 0; }
html.dark .ck-cable .ck-n, html.dark .ck-cable-sh .ck-n { opacity: 1; }
html.dark .ck-cable .ck-d, html.dark .ck-cable-sh .ck-d { opacity: 0; }

/* the lamp stays above anything lifted or dragged (carried things sit at 35) */
.obj.o-lamp { z-index: 36 !important; }

/* prompt machine: hover wakes the screen (glow, scanlines, faster cursor), click flashes + bumps it. Opacity and transform only. */
.obj.pm { cursor: pointer; outline: none; }
.obj.pm .lift { transform-origin: 50% 70%; }
.pm-gl, .pm-sc, .pm-fl { position: absolute; inset: 0; display: block; pointer-events: none; opacity: 0; }
.pm-gl { background: radial-gradient(90% 80% at 50% 55%, rgba(190, 240, 90, .42), rgba(190, 240, 90, 0) 75%); mix-blend-mode: screen; transition: opacity .35s ease; }
.pm-sc { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .34) 0 1px, transparent 1px 3px); transition: opacity .35s ease; }
.pm-fl { background: #e9ffb0; mix-blend-mode: screen; }
.obj.pm.hit:hover .pm-gl, .obj.pm:focus-visible .pm-gl { opacity: 1; }
.obj.pm.hit:hover .pm-sc, .obj.pm:focus-visible .pm-sc { opacity: 1; animation: pm-flick 2.4s steps(1) infinite; }
.obj.pm.hit:hover .pm-t i, .obj.pm:focus-visible .pm-t i { animation-duration: .42s; }
.obj.pm.hit:hover .lift, .obj.pm:focus-visible .lift { transform: translate(-2px, -3px) scale(1.004); }
.obj.pm.hit:active .lift { transform: translate(0, 2px) scale(.994); transition-duration: .1s; }
.obj.pm:focus-visible .lift::after { content: ""; position: absolute; inset: 4% 6%; border-radius: 40px; box-shadow: 0 0 0 5px var(--lilac), 0 0 0 10px rgba(201, 166, 247, .28); pointer-events: none; }
.obj.pm.pm-go .pm-fl { animation: pm-flash .5s ease-out 1; }
.obj.pm.pm-go .lift { animation: pm-bump .5s cubic-bezier(.3, 1.7, .5, 1) 1; }
@keyframes pm-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes pm-bump { 0% { transform: translate(0, 3px) scale(.99); } 100% { transform: none; } }
@keyframes pm-flick { 0% { opacity: 1; } 42% { opacity: .7; } 46% { opacity: 1; } 83% { opacity: .82; } 86% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pm-gl, .pm-sc { transition: none; } .obj.pm .pm-sc, .obj.pm .lift, .obj.pm .pm-fl { animation: none !important; } }

/* reel: the iPad expands into a centred player (frame animates by WAAPI: transform + opacity only) */
#reel-pop .reel-fr { display: block; }
#reel-pop .reel-fr video { display: block; transform: none; transition: none; }
.obj.hot[data-key="tablet"]:focus-visible .q-screen { outline: 2px solid var(--lilac); outline-offset: 2px; }


/* r9: player also hosts a Vimeo iframe */
#reel-pop iframe { display: block; width: min(96vw, 177vh); aspect-ratio: 16 / 9; max-height: 92vh; border: 0; border-radius: 14px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
#reel-pop iframe:focus-visible { outline: 2px solid var(--lilac, #c9a6f7); outline-offset: 3px; }
/* the Porsche clip is two 16:9 panels side by side: the small desk screen shows the left panel as a still cover crop */
.o-handheld .q-screen video { object-position: 0 50%; }

/* reel caption: same Inter treatment as the project page / desk caption (Cartier gets an Open project link) */
#reel-pop .reel-cap { width: 340px; padding: 22px 24px 20px; border: 1px solid var(--ps-rule); border-radius: 4px; background: var(--ps-bg); color: var(--ps-tp); box-shadow: var(--ps-shadow); font-family: var(--ps-font); zoom: var(--ui, 1); opacity: 0; transform: translateX(14px); transition: opacity .4s ease .25s, transform .5s var(--spring) .25s; }
#reel-pop.on .reel-cap { opacity: 1; transform: none; }
#reel-pop .reel-meta { display: block; margin: 0 0 14px; font: 400 10px/1.5 var(--ps-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ps-accent-ink); }
#reel-pop .reel-title { display: block; margin: 0 0 14px; font: 300 32px/.98 var(--ps-font); letter-spacing: -.035em; }
#reel-pop .reel-rule { margin: 0 0 22px; border-top: 1px solid var(--ps-rule); }
#reel-pop .reel-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
#reel-pop .reel-link, #reel-pop .reel-back { position: relative; font: 500 13px/1 var(--ps-font); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--ps-tp); background: var(--ps-tp); color: var(--ps-bg); text-decoration: none; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .3s var(--spring); }
#reel-pop .reel-back { font-weight: 400; background: none; border-color: transparent; color: var(--ps-ts); padding-right: 0; }
#reel-pop .reel-back kbd { font: inherit; opacity: .5; margin-left: 4px; }
#reel-pop .reel-back:hover { color: var(--ps-tp); }
#reel-pop .reel-link:hover { background: var(--ps-accent); border-color: var(--ps-accent); color: var(--ps-bg); transform: translateY(-1px); }
#reel-pop .reel-link:active, #reel-pop .reel-back:active { transform: scale(.96); }
#reel-pop .reel-link:focus-visible, #reel-pop .reel-back:focus-visible { outline: 1.5px solid var(--ps-accent); outline-offset: 2px; }
/* with a card: player left, card right (never over the video); stacked on phones */
#reel-pop:has(.reel-cap) { display: flex; align-items: center; justify-content: center; gap: calc(28px * var(--ui, 1)); padding: 0 calc(32px * var(--ui, 1)); box-sizing: border-box; }
#reel-pop:has(.reel-cap) .reel-fr { flex: 0 1 auto; min-width: 0; }
#reel-pop:has(.reel-cap) iframe, #reel-pop:has(.reel-cap) video { width: min(calc(100vw - 340px * var(--ui, 1) - 92px * var(--ui, 1)), 150vh); max-height: 82vh; }
html.m #reel-pop:has(.reel-cap) { flex-direction: column; justify-content: center; padding: 0 12px; gap: 14px; }
html.m #reel-pop:has(.reel-cap) iframe, html.m #reel-pop:has(.reel-cap) video { width: calc(100vw - 24px); }
html.m #reel-pop .reel-cap { width: calc((100vw - 24px) / var(--ui, 1)); box-sizing: border-box; transform: translateY(14px); }
html.m #reel-pop.on .reel-cap { transform: none; }
html.m #reel-pop .reel-link::after, html.m #reel-pop .reel-back::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { #reel-pop .reel-cap { transition: none; } }