@import url('dialog.css?v=3');
@font-face { font-family: Room Mono; src: url('assets/space-mono.woff2') format('woff2'); font-display: swap; }
:root {
  --night: #101b26; --cream: #f7e2b4; --gold: #e6ac50; --muted: #b9b5a0;
  --mono: 'Room Mono', monospace; --scene-width: min(100vw, 1600px);
  --green: #80c875; --pink: #ef8fa8; --bird: #8cc8e8; --email: #e8ba6a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #101b26; color: var(--cream); font: 12px/1.6 var(--mono); position:relative;isolation:isolate; }
body.modal-open { overflow: hidden; }
h1,h2,h3,p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
button,a { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline: 2px solid #ffdb91; outline-offset: 5px; }
[hidden] { display: none !important; }
::selection { background: #e8b568; color: #14202a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: -90px; left: 12px; padding: 12px; background: var(--cream); color: var(--night); z-index: 99; }
.skip-link:focus { top: 12px; }
.topbar { position: absolute; top: 0; left:50%;transform:translateX(-50%);width:100%;max-width:1600px;z-index: 20; height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 4%; background: linear-gradient(#06111cbd, transparent); }
.wordmark { font-weight: 700; font-size: 20px; color: #f5ca7e; }
.wordmark span { font-size: 8px; letter-spacing: .1em; }
.topbar nav { display:flex;align-items:center;gap:27px;font-size:10px; }
.topbar nav a,.topbar nav button {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 0;font:inherit;line-height:1;}
.house { max-width: 1600px; margin: auto; }
@media(min-width:1601px){
  body:before {content:'';position:fixed;inset:-30px;z-index:-1;pointer-events:none;background:linear-gradient(#14253682,#142536c9),url('assets/house-v4.webp') center 38%/cover no-repeat;filter:blur(22px) saturate(.65);opacity:.75}
  .house {box-shadow:0 0 55px 22px #08151d8c;border-inline:1px solid #ac945722}
}
.scene-room { position: relative; }
.scene-viewport { width: 100%; overflow: hidden; }
.scene-plane {
  position: relative; width: var(--scene-width); background-image: url('assets/house-v4.webp');
  background-size: var(--scene-width) auto; background-repeat: no-repeat; image-rendering: pixelated;
}
/* One continuous painting at one scale. Adjacent source coordinates meet exactly. */
.home-plane { height: calc(var(--scene-width) * .5859375); background-position: 0 0; }
.workshop-plane { height: calc(var(--scene-width) * .46875); background-position: 0 calc(var(--scene-width) * -.5859375); }
.contact-plane { height: calc(var(--scene-width) * .4453125); background-position: 0 calc(var(--scene-width) * -1.0546875); }
.room-title { position: absolute; top: 7.2%; left: 31%; width: 38%; z-index: 6; text-align: center; pointer-events: none; transition:opacity .25s; }
.peak-mark { width: 32%; height: auto; margin-bottom: 5px; filter: drop-shadow(2px 3px 0 #54291a); }
.room-title h1 { width: 100%; line-height: 1; }
.room-title h1 img { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(3px 4px 0 #0b1320); }
.room-title p { color: #f89139; font-size: clamp(7px, .78vw, 12px); letter-spacing: .12em; line-height: 1.4; margin-top: 9px; text-shadow: 2px 2px #07121d; }
.world { position: absolute; inset: 0; }
.world-layer { position: absolute; inset: 0; pointer-events: none; }
.sprite { display: block; position: absolute; background: url('assets/inhabitants-v2.webp') no-repeat; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(1px 3px 1px #08111c44); }
.person-trigger { position: absolute; aspect-ratio: 512/560; width: 28%; top: 43%; padding: 0; pointer-events: auto; z-index: 2; }
.person-trigger .sprite { inset: 0; background-size: 300% 182.857%; }
.person-life { left: 15%; }
.person-work { left: 49%; }
.person-life .sprite { background-position: 0 0; }
.person-work .sprite { background-position: 50% 0; }
.cat-ginger { width: 10%; aspect-ratio: 512/560; left: 37%; top: 75%; background-size: 300% 182.857%; background-position: 100% 0; }
.cat-perch {position:absolute;width:8%;aspect-ratio:512/464;left:88%;top:28.3%;padding:0;pointer-events:auto;z-index:3}
.cat-bicolor {inset:0;width:100%;height:100%;background-size:300% 220.69%;background-position:0 100%}
.robot { width: 6%; aspect-ratio: 512/464; left: 88%; top: 59%; background-size: 300% 220.69%; background-position: 50% 100%; }
.world-shade { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4; pointer-events: none; backdrop-filter: saturate(.92); transition: backdrop-filter .85s ease, background .85s ease; -webkit-mask-image: linear-gradient(90deg,#000 85%,transparent); mask-image: linear-gradient(90deg,#000 85%,transparent); }
.shade-life { left: 0; }
.shade-work { right: 0; -webkit-mask-image: linear-gradient(90deg,transparent,#000 15%); mask-image: linear-gradient(90deg,transparent,#000 15%); }
.world[data-world=life] .shade-life,.world[data-world=work] .shade-work { backdrop-filter: saturate(1.06); }
.world[data-world=life] .shade-work,.world[data-world=work] .shade-life { backdrop-filter: grayscale(.7) brightness(.8); }

.world[data-world=life] .work-layer .sprite { animation-play-state: paused; }
.world-switch { position: absolute; z-index: 7; left: 7%; right: 7%; bottom: 5%; display: flex; justify-content: space-between; pointer-events: none; }
.world-switch button { pointer-events: auto; font-size: 13px; font-weight: 700; letter-spacing: .15em; padding: 9px 18px; color: #f5dfb2; background: #0d1721bf; border-bottom: 2px solid #ba8643; box-shadow: 3px 3px #07111a99; }
.world-switch button[aria-pressed=true] { color: #ffb859; border-color: #ffb859; }
.object-label { position: absolute; bottom: -6%; left: 50%; transform: translateX(-50%); opacity: 0; background: #0c1721ee; color: #f6d491; padding: 4px 8px; border-bottom: 1px solid #c69b57; font-size: 9px; white-space: nowrap; pointer-events: none; transition: opacity .15s; z-index: 8; }
.person-trigger .object-label { bottom: 0; }
.person-trigger:focus-visible .object-label,.floor-prop:focus-visible .object-label { opacity: 1; }

/* Labels have physical surfaces; clickable drawers follow the illustrated fronts. */
.skills-cabinet { position:absolute;left:20.5%;top:32%;width:27%;height:45%; }
.tent-card { width:max-content; padding:3px 13px 4px; background:#ddc699; color:#493a28; border:1px solid #8d6d41; border-bottom:4px solid #8f714c; box-shadow:3px 3px 1px #151b21a0; font-size:clamp(10px,1.25vw,18px); line-height:1.25; letter-spacing:.12em; font-weight:700; transform:rotate(-3deg) skewX(-4deg); }
.tent-card:after {content:'';position:absolute;right:-6px;top:2px;bottom:-4px;width:5px;background:#8e704c;clip-path:polygon(0 0,100% 100%,0 100%)}
.skills-cabinet h2 {position:absolute;left:35%;bottom:100%;margin-bottom:3px;z-index:3}
.tent-card button {padding:0;font:inherit;color:inherit}
.skill-drawers {position:absolute;left:6%;right:6%;top:8%;bottom:7%;display:grid;grid-template-rows:repeat(4,1fr);gap:1.6%}
.drawer {position:relative;min-width:0;text-align:left;padding:0;transition:background .2s}
.drawer-label {position:absolute;left:2%;top:20%;min-width:25%;padding:1px 4px;line-height:1.4;background:#d7c099;color:#443422;border:2px solid #7a623f;box-shadow:1px 2px #241b13, inset 0 1px #f1dab4;transform:rotate(-1deg);transition:filter .2s}
.drawer b {font-size:clamp(10px,.63vw,11px);letter-spacing:.02em;white-space:nowrap}
.drawer:after {content:'';position:absolute;left:31%;width:32%;height:13%;top:33%;border-radius:2px;box-shadow:0 2px 5px #ffc56300;transition:box-shadow .3s}
.drawer:focus-visible {outline-offset:-3px}
.drawer:focus-visible .drawer-label {filter:brightness(1.2)}
.record-cabinet {position:absolute;left:55%;top:34%;width:30%;height:44%}
.rack-plaque {position:absolute;top:-10%;left:34%;padding:2px 9px;border:2px solid #8a6b40;background:#1e2a2d;color:#d8b47d;box-shadow:2px 3px #18201dd9;font-size:clamp(10px,.85vw,13px);letter-spacing:.1em;transform:rotate(1deg);z-index:3}
.record-shelf {position:absolute;inset:0}
.record-pager {position:absolute;left:29%;top:86%;display:flex;align-items:center;gap:8px;padding:1px 5px;background:#1d292c;color:#e4bd7c;border:2px solid #826441;box-shadow:2px 3px #18201d;font-size:clamp(7px,.6vw,10px);z-index:4}
.record-pager button {padding:0 5px;font-size:1.6em;line-height:1.2}
.record-pager button:disabled {opacity:.3;cursor:default}
.record {position:absolute;left:8%;top:0;width:36%;height:35%;padding:0;isolation:isolate}
.record:nth-child(even) {left:50%}
.record:nth-child(n+3) {top:44%}
.record:before {content:'';position:absolute;left:8%;right:8%;bottom:0;height:8%;background:#21160b99;filter:blur(2px);border-radius:50%}
.record-art {display:block;position:absolute;bottom:-1%;left:50%;width:calc(var(--scene-width)*.084);aspect-ratio:1;background-image:url('assets/objects-v2.webp');background-size:300% 200%;background-position:0 100%;image-rendering:pixelated;transform:translateX(-50%) rotate(-4deg) scaleY(.94);transform-origin:center 92%;filter:drop-shadow(1px 2px 1px #160e0bc9);transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s}
.record:nth-child(2) .record-art {background-position:50% 100%;transform:translateX(-50%) rotate(5deg) scaleY(.94)}
.record:nth-child(3) .record-art {background-position:100% 100%}
.record:nth-child(4) .record-art {background-position:50% 100%;filter:hue-rotate(-28deg) drop-shadow(1px 2px 1px #160e0bc9);transform:translateX(-50%) rotate(3deg) scaleY(.94)}
.record-art svg {position:absolute;width:19%;height:19%;top:40.5%;left:40.5%;color:#34404a}
.record-title {position:absolute;left:50%;top:96%;transform:translateX(-50%);padding:0 5px;background:#d5bd8f;color:#49351f;border:1px solid #886c43;box-shadow:1px 1px #261c11a6;white-space:nowrap;font-size:clamp(10px,.56vw,11px);line-height:1.45;z-index:2}
.record:focus-visible .record-art {transform:translateX(-50%) translateY(-7px) rotate(0) scaleY(1)}
.floor-objects { position: absolute; inset: 0; pointer-events: none; }
.floor-prop { position:absolute;width:5.5%;aspect-ratio:1;top:81.5%;padding:0;pointer-events:auto; }
.camera-prop {left:27%;transform:rotate(-7deg)}
.football-prop {left:51%;width:4.8%;top:82.5%}
.owl-prop {left:75%;width:5.7%;top:81.5%}
.prop-art { display: block; width: 100%; height: 100%; background: url('assets/objects-v2.webp') 0 0/300% 200% no-repeat; image-rendering: pixelated; filter: drop-shadow(2px 4px 1px #080e1799); transition: transform .2s; }
.football-prop .prop-art { background-position: 50% 0; }
.owl-prop .prop-art { background-position: 100% 0; }
.mobile-room-switch { display: none; }
.mobile-swipe-hint {display:none}
.object-cue {position:absolute;right:4px;bottom:4px;width:7px;height:7px;border-right:2px solid #ffe1a0;border-bottom:2px solid #ffe1a0;rotate:-45deg;opacity:0;pointer-events:none;transition:opacity .2s;filter:drop-shadow(1px 1px #342115)}
.drawer .object-cue {right:5%;bottom:40%}
.record .object-cue {bottom:29%;right:3%}
.explorable:focus-visible .object-cue {opacity:1}
.workshop.is-unexplored.has-entered .object-cue {animation:explore-glint 1.8s .4s 2}
@keyframes explore-glint {0%,100%{opacity:0}35%,60%{opacity:.9}}
.hanging-top {position:absolute;left:44%;top:72.2%;width:12%;min-width:86px;height:calc(var(--scene-width)*.085);min-height:72px;z-index:7;display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 0;transition:filter .2s;touch-action:manipulation}
.hanging-top:before,.hanging-top:after {content:'';position:absolute;top:0;bottom:48%;width:4px;background:repeating-linear-gradient(#bd955c 0 3px,#4a3928 3px 6px);box-shadow:1px 0 #0a121d}
.hanging-top:before {left:22%}.hanging-top:after {right:22%}
.sign-board {position:relative;z-index:1;width:100%;height:72%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:5px 9px;background:repeating-linear-gradient(0deg,#614329 0 7px,#6b492d 7px 9px,#614329 9px 15px);border:3px solid #342e28;box-shadow:inset 0 0 0 2px #ac824e,3px 5px #0a131dc9;color:#f2d397;text-shadow:1px 2px #2c241c;font-size:clamp(9px,.65vw,11px);line-height:1.2;letter-spacing:.08em}
.sign-board:before,.sign-board:after {content:'';position:absolute;top:5px;width:5px;height:5px;background:#cfaa6d;box-shadow:1px 1px #282723}
.sign-board:before{left:6px}.sign-board:after{right:6px}
.sign-board svg {width:42px;height:42px;flex:none}

/* Contact is a physical tabletop stage. One actor travels from its actual rear slot. */
#contact-title {position:absolute;left:28%;top:35.3%;font-size:clamp(10px,1.1vw,16px);z-index:3;transform:rotate(-5deg) skewX(-6deg)}
.contact-table {position:absolute;left:17%;right:15%;top:35%;height:34%;isolation:isolate;--channel-color:var(--green)}
.spotlight {position:absolute;left:7%;top:30%;width:29%;height:66%;background:radial-gradient(ellipse at center,#ffe3a349,transparent 68%);pointer-events:none;mix-blend-mode:screen;z-index:-1}
.channel-objects {position:absolute;left:25%;right:15%;top:-8%;display:flex;justify-content:space-between;align-items:start}
.channel {position:relative;flex:0 0 23%;min-height:44px;padding:0;display:flex;flex-direction:column;align-items:center;filter:saturate(.6) brightness(.8);transition:filter .25s}
.channel-art {display:block;width:100%;aspect-ratio:1;background:url('assets/channels-v3.webp') 0 0/200% 200% no-repeat;image-rendering:pixelated;filter:drop-shadow(1px 2px 1px #261b12a6);transform-origin:50% 85%}
.channel > .channel-art {width:calc(var(--scene-width)*.052)}
.channel[data-channel=instagram] .channel-art,.contact-table[data-channel=instagram] .performer .channel-art {background-position:100% 0}
.channel[data-channel=x] .channel-art,.contact-table[data-channel=x] .performer .channel-art {background-position:0 100%}
.channel[data-channel=email] .channel-art,.contact-table[data-channel=email] .performer .channel-art {background-position:100% 100%}
.channel[data-channel=x] .channel-art {translate:0 12%}
.channel[data-channel=email] .channel-art {translate:0 10%}
.channel-name {position:relative;margin-top:3px;padding:2px 6px;color:#32271b;background:#ead2a2;border:1px solid #87653c;box-shadow:1px 2px #38291d;font-size:clamp(10px,.9vw,14px);font-weight:700;line-height:1.4;white-space:nowrap}
.contact-table[data-channel=none] .channel {filter:none}
.contact-table[data-channel=none] .contact-performance,.contact-table[data-channel=none] .contact-result,.contact-table[data-channel=none] .spotlight {visibility:hidden;pointer-events:none}
.channel[aria-pressed=true] {filter:none}
.channel[aria-pressed=true] .channel-art {visibility:hidden}
.channel:focus-visible {outline-offset:1px}
.contact-table[data-channel=wechat] {--channel-color:var(--green)}
.contact-table[data-channel=instagram] {--channel-color:var(--pink)}
.contact-table[data-channel=x] {--channel-color:var(--bird)}
.contact-table[data-channel=email] {--channel-color:var(--email)}
.contact-performance {position:absolute;top:35%;left:25%;width:65%;height:64%;pointer-events:none;color:var(--channel-color);z-index:3}
.performer {position:absolute;left:0;top:0;width:calc(var(--scene-width)*.084);aspect-ratio:1;padding:0;pointer-events:auto;transform-origin:50% 85%;will-change:transform}
.actor-shadow {position:absolute;left:1%;top:calc(var(--scene-width)*.069);width:calc(var(--scene-width)*.067);height:calc(var(--scene-width)*.009);background:#38210c88;border-radius:50%;filter:blur(2px)}
.material-trail {position:absolute;left:calc(var(--scene-width)*.084);width:var(--inscription-width,260px);top:30%;height:60%;pointer-events:none}
.material-trail i {position:absolute;width:6px;height:6px;background:#78af4d;box-shadow:2px 2px #466b2a;opacity:0;left:0;top:10%;--scatter:18px}
.material-trail i:nth-child(2){--scatter:-8px;animation-delay:.82s!important}
.material-trail i:nth-child(3){--scatter:5px;animation-delay:.94s!important}
.material-trail i:nth-child(4){--scatter:24px;animation-delay:1.05s!important}
.material-trail i:nth-child(5){--scatter:-16px;animation-delay:1.16s!important}
.material-trail i:nth-child(6){--scatter:12px;animation-delay:1.27s!important}
.ribbon-roll {position:absolute;inset:0;opacity:0}
.contact-result {position:absolute;left:38%;top:49%;width:58%;color:#2a291b;transform:perspective(700px) rotateX(32deg) skewX(-6deg);transform-origin:left center;z-index:2}
.contact-inscription {position:relative;width:max-content;max-width:100%;padding:4px 16px 6px;transform-origin:left center;min-height:55px}
.contact-inscription:before {content:'';position:absolute;inset:0;z-index:-1;transform-origin:left center}
.result-label {font-size:clamp(5px,.45vw,8px);letter-spacing:.15em;opacity:.75}
.contact-result p {font-size:clamp(12px,1.3vw,21px);font-weight:700;line-height:1.6;white-space:nowrap;text-shadow:0 1px #ffe6a588}
.contact-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px;padding:6px 10px 0;transform:skewX(6deg)}
.contact-actions button,.contact-actions a {display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 9px;background:#51402c;color:#ffe2aa;border:1px solid #997647;box-shadow:1px 2px #332217;transition:filter .2s}
#copy-status {font-size:8px;color:#2e291e;text-shadow:0 1px #f7da9c}
.contact-table[data-channel=wechat] .contact-inscription {color:#364124;text-shadow:0 1px #e9cf8c}
.contact-table[data-channel=wechat] .contact-inscription:before {background:radial-gradient(ellipse,#6c7f332b,transparent 72%)}
.contact-table[data-channel=instagram] .contact-inscription {color:#ffe6b7;text-shadow:0 1px #642433}
.contact-table[data-channel=instagram] .contact-inscription:before {background:repeating-linear-gradient(0deg,#933c49 0 2px,#9c4350 2px 4px);border-block:2px solid #d3a759;box-shadow:2px 3px #572b2290}
.contact-table[data-channel=x] .contact-inscription {color:#3e2b18}
.contact-table[data-channel=x] .contact-inscription:before {border-bottom:2px dashed #886544}
.contact-table[data-channel=email] .contact-inscription {color:#4c3925;transform:rotate(-2deg)}
.contact-table[data-channel=email] .contact-inscription:before {background:#ecd3a2;box-shadow:2px 3px #61432877;border-bottom:2px solid #b99a62}
.contact-table.playing .performer {animation:desk-arrive .62s cubic-bezier(.2,.7,.3,1) both}
.contact-table.playing .actor-shadow {animation:desk-shadow .62s ease both}
.contact-table.playing .spotlight {animation:desk-arrive .62s ease both}
.contact-table.playing .contact-inscription {animation:material-open 1.1s .85s cubic-bezier(.2,.5,.2,1) both}
.contact-table.playing .contact-actions {animation:actions-in .3s 1.6s both}
.contact-table[data-channel=wechat].playing .performer .channel-art {animation:blow .9s .62s ease both}
.contact-table[data-channel=wechat].playing .material-trail i {animation:ink-droplet .65s .7s ease-in both}
.contact-table[data-channel=wechat].playing .contact-result p {animation:engrave 1.25s .85s steps(18) both}
.contact-table[data-channel=instagram].playing .ribbon-roll {background:linear-gradient(90deg,#d7a854,#77303e,#d7a854);width:5%;height:55%;top:0;animation:unroll-spool 1.1s .75s ease both}
.contact-table[data-channel=x].playing .performer {animation:bird-arrive .62s ease-out both,bird-inscribe 1.5s .62s ease-in-out forwards}
.contact-table[data-channel=x].playing .actor-shadow {animation:desk-shadow .62s ease both,bird-shadow 1.5s .62s ease-in-out forwards}
.contact-table[data-channel=x].playing .performer .channel-art {animation:bird-peck .22s .7s steps(2) 6}
.contact-table[data-channel=x].playing .material-trail i {background:#c49b62;box-shadow:none;width:4px;height:2px;animation:wood-chip .65s .85s ease-out both}
.contact-table[data-channel=x].playing .contact-result p {animation:engrave 1.2s .8s steps(14) both}
.contact-table[data-channel=email].playing .contact-inscription {animation:letter-unfold 1s .65s ease both}
@keyframes desk-arrive {0%{transform:translate(var(--from-x),var(--from-y)) scale(var(--from-scale))}45%{transform:translate(calc(var(--from-x)*.45),calc(var(--from-y)*.6 - 22px)) scale(.9)}78%{transform:translateY(-8px)}90%{transform:scale(1.06,.93)}100%{transform:none}}
@keyframes bird-arrive {0%{transform:translate(var(--from-x),var(--from-y)) scale(var(--from-scale)) rotate(-12deg)}50%{transform:translate(calc(var(--from-x)*.3),-65px) rotate(-6deg)}100%{transform:none}}
@keyframes bird-inscribe {0%{transform:none}20%{transform:translate(calc(var(--write-distance)*.15),-34px)}60%{transform:translate(calc(var(--write-distance)*.6),-34px)}80%{transform:translate(var(--write-distance),-34px)}100%{transform:translate(0,0)}}
@keyframes bird-shadow {0%{transform:none;opacity:1}20%{transform:translate(calc(var(--write-distance)*.15),-34px);opacity:.5}60%{transform:translate(calc(var(--write-distance)*.6),-34px);opacity:.5}80%{transform:translate(var(--write-distance),-34px);opacity:.5}100%{transform:none;opacity:1}}
@keyframes bird-peck {0%,100%{transform:rotate(0)}50%{transform:rotate(14deg) translateY(2px)}}
@keyframes desk-shadow {0%{opacity:0;transform:scale(.5)}70%{opacity:.3}100%{opacity:1;transform:scale(1)}}
@keyframes blow {0%,100%{transform:none}30%{transform:scale(.92,1.06) rotate(-4deg)}55%{transform:scale(1.06,.95) rotate(5deg)}}
@keyframes ink-droplet {0%{opacity:0;transform:translate(0,0) scale(.5)}10%{opacity:1}65%{opacity:1;transform:translate(calc(75px + var(--scatter)),-12px)}100%{opacity:0;transform:translate(calc(145px + var(--scatter)),22px) scale(.4)}}
@keyframes wood-chip {0%{opacity:0;transform:translate(80px,15px)}20%{opacity:1}60%{opacity:1;transform:translate(calc(100px + var(--scatter)),-8px) rotate(40deg)}100%{opacity:0;transform:translate(calc(140px + var(--scatter)),28px) rotate(90deg)}}
@keyframes unroll-spool {0%{opacity:1;left:0}90%{opacity:1;left:93%}100%{opacity:0;left:98%}}
@keyframes material-open {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes engrave {from{clip-path:inset(0 100% 0 0);filter:brightness(1.6)}to{clip-path:inset(0);filter:brightness(1)}}
@keyframes letter-unfold {0%{opacity:0;transform:translateX(-32px) rotate(-8deg) scaleX(.1)}30%{opacity:1}100%{opacity:1;transform:rotate(-2deg) scaleX(1)}}
@keyframes actions-in {from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.site-footer { max-width:1600px; margin:auto; display:flex; justify-content:space-between; gap:20px; padding:20px 5%; font-size:8px; color:#b5a27d; }
.site-footer small { font-size:8px; }
.plain-contacts { position:relative; }
.plain-contacts summary { cursor:pointer; }
.plain-contacts ul { position:absolute; bottom:100%; right:0; list-style:none; margin:0 0 10px; min-width:300px; background:#0d1a26f5; border:1px solid #856741; padding:16px; line-height:2.2; z-index:10; }
@media(hover:hover) and (pointer:fine) {
  .explorable:hover .object-cue {opacity:1}
  .hanging-top:hover {filter:brightness(1.2)}
  .person-trigger:hover .object-label,.floor-prop:hover .object-label {opacity:1}
  .drawer:hover {background:#ffc36509}
  .drawer:hover .drawer-label {filter:brightness(1.2)}
  .drawer:hover:after {box-shadow:0 2px 7px #ffc56399}
  .record:hover .record-art {transform:translateX(-50%) translateY(-7px) rotate(0) scaleY(1)}
  .camera-prop:hover .prop-art {transform:rotate(4deg)}
  .football-prop:hover .prop-art {transform:rotate(18deg) translateX(3px)}
  .owl-prop:hover .prop-art {transform:scale(1.08)}
  .channel:hover {filter:none}
  .contact-actions button:hover,.contact-actions a:hover {filter:brightness(1.2)}
  .topbar a:hover,.topbar button:hover {color:#ffbf64}
}
@media(min-width:701px) and (max-width:1024px) {
  .channel-objects {top:-18%}
  .contact-result {top:43%;transform:none}
  .contact-inscription {min-height:0;padding:0 6px}
  .contact-inscription .result-label {display:none}
  .contact-table[data-channel=email] .contact-inscription {transform:none}
  .contact-result p {font-size:12px;line-height:1.5}
  .contact-actions {gap:6px;padding:3px 4px 0;transform:none;flex-wrap:nowrap}
}
@media(max-width:700px) {
  :root { --scene-width:760px; }
  .topbar { height:46px; padding-inline:15px; }
  .wordmark {font-size:18px}
  .wordmark span {display:none}
  .topbar nav {gap:10px;font-size:10px}
  .topbar nav a,.topbar nav button {display:flex;align-items:center;min-height:44px;padding:0 3px}
  .scene-viewport {overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .scene-viewport::-webkit-scrollbar {display:none}
  .room-title {top:9%;left:31%;width:38%}
  .first-room:has(.world[data-world=life]) .room-title,.first-room:has(.world[data-world=work]) .room-title {opacity:0}
  .peak-mark {width:32%;height:auto;margin-bottom:5px}
  .room-title p {font-size:7px;margin-top:7px}
  .world-switch {left:18px;right:18px;bottom:6%}
  .world-switch button {font-size:11px;min-height:44px;padding:7px 12px}
  .drawer-label {top:10%;padding:2px 5px}
  .drawer b {font-size:10px}
  .skills-cabinet h2 {font-size:11px}
  .record-cabinet h2 {font-size:8px}
  .record-title {font-size:10px;top:96%;padding:1px 4px;max-width:120px;overflow:hidden;text-overflow:ellipsis}
  .floor-prop {min-width:44px;min-height:44px}
  .floor-prop,.football-prop,.owl-prop {top:76%}
  .mobile-room-switch {position:absolute;bottom:0;left:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none;z-index:8}
  .mobile-room-switch button {pointer-events:auto;min-height:40px;font-size:10px;padding:5px 9px;background:#0c1722e6;color:#f1d195;border:1px solid #846644}
  .mobile-swipe-hint {position:absolute;left:50%;top:7px;translate:-50% 0;display:block;padding:4px 9px;background:#13252de8;color:#efd09b;border-bottom:1px solid #977341;font-size:10px;letter-spacing:.12em;pointer-events:none;opacity:0;transition:opacity .3s;z-index:6}
  .is-unexplored .mobile-swipe-hint {opacity:1}
  .hanging-top {left:41%;width:18%;min-width:94px;min-height:76px}
  .sign-board {gap:0;padding:3px 6px;font-size:9px}
  .sign-board svg {width:29px;height:29px}
  #contact-title {font-size:10px;left:28%;padding:3px 7px 4px}
  .channel-name {font-size:10px;padding:2px 4px}
  .channel-objects {top:-18%}
  .contact-result {top:42%;transform:none}
  .contact-table[data-channel=email] .contact-inscription {transform:none}
  .contact-inscription {padding:0 5px;min-height:0}
  .contact-inscription .result-label {display:none}
  .contact-result p {font-size:12px;line-height:1.5;color:#2b2b1b;font-weight:700}
  .contact-table[data-channel=instagram] .contact-result p {color:#ffecc7}
  .contact-actions {position:relative;padding:3px 4px 0;gap:6px;flex-wrap:nowrap;font-size:10px;transform:none}
  .contact-actions button,.contact-actions a {min-width:64px;min-height:40px;padding:6px 8px;white-space:nowrap}
  #copy-status {position:absolute;top:calc(100% + 3px);left:4px;max-width:190px;font-size:10px;white-space:normal;line-height:1.4;background:#e1c28d}
  .site-footer {position:relative;font-size:9px;gap:8px 16px;padding:18px 14px;flex-wrap:wrap;align-items:center}
  .site-footer small {font-size:9px}
  .entry-replay,.plain-contacts summary {min-height:44px;display:flex;align-items:center}
  .plain-contacts {position:static}
  .plain-contacts ul {min-width:0;font-size:11px;left:12px;right:12px}
  .plain-contacts li a {display:block;padding-block:6px}
  .object-label {font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*:before,*:after {animation:none!important;transition:none!important}
  .contact-table .contact-result p {clip-path:none!important}
}