:root{color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#101311;color:#f0eddf}.topbar,footer{padding:22px clamp(16px,4vw,64px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid #39443c}.topbar nav{display:flex;gap:24px;flex-wrap:wrap}a{color:#e8bd7f}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f9d799;outline-offset:4px}.skip{position:absolute;top:-100px;z-index:20}.skip:focus{top:8px}.eyebrow{font:700 11px/1.5 Arial,sans-serif;letter-spacing:.18em;color:#d6b785}.small{font-size:13px;line-height:1.7;color:#c1c6ba}.arrival{min-height:710px;position:relative;isolation:isolate;display:flex;align-items:flex-end;padding:clamp(24px,5vw,76px);overflow:hidden}.arrival>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.arrival:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#09110ee8,transparent 85%),linear-gradient(0deg,#101311,transparent 70%)}.intro-copy{max-width:570px}.intro-copy h1{font:normal clamp(50px,7vw,104px)/1 Georgia,serif;letter-spacing:-.045em;margin:20px 0}.intro-copy em{color:#e8bd7f}.intro-copy>p:not(.eyebrow){max-width:460px;line-height:1.8}.briefing{max-width:860px;margin:auto;padding:64px 24px}.briefing h1{font:normal clamp(32px,5vw,56px)/1.1 Georgia,serif}.briefing p,blockquote{line-height:1.85}.briefing blockquote{border-left:2px solid #d6b785;margin:24px 0;padding-left:24px;color:#e4d5b5}.hamster{float:right;width:220px;height:240px;margin:0 0 24px 28px;overflow:hidden;border-radius:100px 100px 12px 12px}.hamster img{width:650px;height:434px;max-width:none;transform:translate(-423px,-187px)}.mode-options{display:flex;gap:12px;flex-wrap:wrap;clear:both}#play{padding:32px clamp(16px,3vw,52px);max-width:1920px;margin:auto}.room-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.room-heading h1{font:normal clamp(26px,3vw,42px)/1.2 Georgia,serif;margin:8px 0}.clock{text-align:right;display:grid;min-width:140px}.clock span{font-size:12px;color:#c1c6ba}.clock strong{font:40px/1.2 monospace;font-variant-numeric:tabular-nums;color:#f1d5a1}.clock.urgent strong{color:#ffb7b1}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;align-items:start}.scene{position:relative;aspect-ratio:3/2;border:1px solid #4f4937;overflow:hidden;background:#211b14}.scene>img{display:block;width:100%;height:100%;object-fit:contain}.hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:1px solid #e8bd7fa8;border-radius:50%;background:#101311a0;color:transparent;min-height:44px;min-width:44px;width:44px;padding:8px;font:12px/1.3 Arial;overflow:visible;z-index:2}.hotspot:after{content:"+";color:#ffe5b5;position:absolute;left:0;top:0;width:100%;height:100%;display:grid;place-items:center;font:24px Georgia}.hotspot:hover,.hotspot:focus-visible{color:#fff3d9;background:#252014;border-radius:4px;width:max-content;max-width:170px;z-index:4}.hotspot:hover:after,.hotspot:focus-visible:after{display:none}.scene.list{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}.scene.list>img{grid-column:1/-1;aspect-ratio:3/2;height:auto}.scene.list .hotspot{position:static;transform:none;width:100%;height:auto;border-radius:4px;color:#f0eddf;min-height:48px;background:#272c24;font-size:14px}.scene.list .hotspot:after{display:none}.scene.list #uv-glow,.scene.list #safe-reveal,.scene.list #hatch-reveal{display:none!important}.scene-tools{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.scene-tools button{font-size:13px}.notebook{padding:24px;background:#1a211b;border:1px solid #3c483c;border-radius:4px}.notebook h2{font:normal 28px/1.15 Georgia,serif;margin:12px 0 28px}.notebook h3{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:#e8bd7f}.notebook ul{padding-left:20px;font-size:14px;line-height:1.8}.notebook li{margin:8px 0}#status{padding:16px;border-left:2px solid #d6b785;background:#1c211b;min-height:70px;line-height:1.7}#uv-glow{position:absolute;left:19%;top:23%;width:30%;height:24%;background:radial-gradient(ellipse,#7041ef99,transparent 75%);display:grid;place-items:center;color:#d6ffbb;text-shadow:0 0 12px #d6ffbb;font:700 clamp(18px,3vw,44px) monospace;letter-spacing:.2em}.scene>.mechanism{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;border:0;background:none;transform:none}.scene #safe-reveal{clip-path:inset(21% 16% 50% 71%)}.scene #hatch-reveal{clip-path:inset(78% 28% 0 17%)}.scene #lamp-state{clip-path:inset(21% 50% 44% 14%)}.scene #vent-state{clip-path:inset(8% 79% 79% 13%)}.scene.list .mechanism{display:none!important}.scene.destroyed{filter:brightness(.2) sepia(.5);transition:filter 1.5s ease}.scene #uv-glow{z-index:1}.ending{padding:36px;margin-top:28px;background:#1a211b;border:1px solid #665a3d}.ending h2{font:normal 42px/1.1 Georgia,serif}.ending a{display:inline-flex;margin-top:12px}dialog{color:#f0eddf;background:#1b211b;border:1px solid #826f4e;border-radius:8px;padding:28px;width:min(560px,calc(100% - 32px));max-height:85dvh;overflow:auto}dialog::backdrop{background:#050907bd;backdrop-filter:blur(5px)}dialog h2{font:normal 32px/1.2 Georgia,serif;margin-right:30px}dialog p{line-height:1.75}dialog .close{float:right;padding:8px;min-width:44px;font-size:22px}.inspection-actions{display:grid;gap:12px}#keypad{display:grid;gap:12px;margin-top:18px}#keypad input{min-width:0;width:100%;font:28px monospace;letter-spacing:.3em;padding:12px;background:#101813;color:#f0eddf;border:1px solid #5c6b57}.error{color:#ffb7b1}footer{font-size:13px;border-top:1px solid #39443c;border-bottom:0}@media(max-width:1100px){.workspace{grid-template-columns:1fr}.notebook{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.notebook>.eyebrow,.notebook>h2,.notebook>.small{grid-column:1/-1}.notebook h3{grid-row:3}.notebook ul{grid-row:4}.arrival{min-height:640px}}@media(max-width:600px){.topbar,footer{padding:16px}.topbar nav{gap:16px}.arrival{min-height:650px}.arrival>img{object-position:65% center}.intro-copy h1{font-size:56px}.hamster{float:none;margin:auto;width:200px}.room-heading{align-items:start}.room-heading h1{font-size:26px}.clock{min-width:100px}.clock strong{font-size:30px}.hotspot{width:34px;min-width:34px;min-height:34px;padding:4px}.scene:not(.list){min-height:0}.notebook{display:block}.briefing{padding:32px 20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* The room keeps its photographic coordinates while using the whole viewport. */
body.playing > .topbar,
body.playing > footer { display: none; }
body.playing #play {
  max-width: none;
  min-height: 100svh;
  padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
}
body.playing .room-heading { margin: 0 0 12px; gap: 12px; }
body.playing .room-heading h1 { font-size: clamp(20px, 2vw, 28px); margin: 0; }
body.playing .room-heading .eyebrow { margin: 0 0 4px; }
.view-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.view-controls .secondary { font-size: 13px; }
body.playing .clock strong { font-size: 30px; }
body.playing .workspace { display: flex; flex-direction: column; gap: 8px; }
.scene-wrap { width: 100%; min-width: 0; }
body.playing .scene:not(.list) {
  width: min(100%, max(300px, calc((100dvh - 270px) * 1.5)));
  margin-inline: auto;
}
body.playing .scene-tools { margin: 8px 0; gap: 8px; }
body.playing #status { margin: 0; padding: 8px 12px; min-height: 0; line-height: 1.5; }
body.playing .notebook { display: block; width: 100%; padding: 0; }
.notebook summary { cursor: pointer; padding: 12px 16px; color: #e8bd7f; min-height: 48px; }
.notebook summary:focus-visible { outline: 3px solid #f9d799; outline-offset: -4px; }
.notebook-content { padding: 0 20px 16px; }
body.playing .notebook-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
body.playing .notebook-content h3 { grid-row: 1; }
body.playing .notebook-content ul { grid-row: 2; }
body.playing .notebook-content .small { grid-column: 1 / -1; }
/* A finite camera move and mist drift introduce the mansion without flashing. */
.arrival { min-height: calc(100svh - 80px); }
.arrival > img { animation: mansion-arrival 4s ease-out both; transition: transform 1.8s ease, object-position 1.8s ease; }
.arrival.approaching > img { animation: none; transform: scale(1.08); object-position: 42% 65%; }
.arrival::before {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 70% 80%, #a9c6bc26, transparent 55%);
  animation: mansion-mist 4s ease-out both;
}
.intro-copy { animation: mansion-copy 650ms ease-out both; }
#intro-motion { display: block; margin-bottom: 12px; font-size: 13px; }
.briefing:not([hidden]) .hamster { animation: mansion-visitor 750ms ease-out both; }
.still-intro .arrival > img,
.still-intro .arrival::before,
.still-intro .intro-copy,
.still-intro .briefing:not([hidden]) .hamster { animation: none; transition: none; }
@keyframes mansion-arrival { from { transform: scale(1.045); } to { transform: scale(1); } }
@keyframes mansion-mist { from { opacity: 0; transform: translateX(-3%); } to { opacity: 1; transform: translateX(3%); } }
@keyframes mansion-copy { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mansion-visitor { from { opacity: 0; transform: translateY(16px) rotate(-3deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@media (max-width: 700px) {
  body.playing .room-heading { flex-wrap: wrap; }
  body.playing .room-heading > div:first-child { flex: 1; }
  .view-controls { order: 3; width: 100%; margin: 0; }
  body.playing .scene:not(.list) { width: 100%; }
  body.playing .notebook-content { display: block; }
  body.playing .hotspot { width: 44px; min-width: 44px; min-height: 44px; }
  .arrival { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .arrival > img, .arrival::before, .intro-copy, .briefing .hamster { animation: none; transition: none; }
}

.scene:not(.list) .hotspot { height: 44px; }
.scene:not(.list) .hotspot:hover, .scene:not(.list) .hotspot:focus-visible { height: auto; }

/* Objects have physical hit areas, without a visible discovery marker. */
.scene:not(.list) .hotspot,
.scene:not(.list) .hotspot:hover,
.scene:not(.list) .hotspot:focus-visible {
  left: var(--left);
  top: var(--top);
  width: var(--width);
  height: var(--height);
  min-width: 24px;
  min-height: 24px;
  max-width: none;
  transform: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: transparent;
  background: transparent;
  font-size: 0;
  cursor: help;
  z-index: 2;
}
.scene:not(.list) .hotspot::after { display: none; }
.scene:not(.list) .hotspot:hover { outline: none; }
.scene:not(.list) .hotspot:focus-visible { outline: 3px solid #f9d799; outline-offset: -3px; }
.scene:not(.list) [data-object="bust"],
.scene:not(.list) [data-object="switch"] { z-index: 3; }
.scene:not(.list) [data-object="portrait"].moved { left: 65%; top: 60%; width: 15%; height: 24%; }
.scene #portrait-state { clip-path: inset(16% 29% 55% 54%); }
.scene #frame-state { clip-path: inset(60% 20% 16% 65%); }
.scene #drawer-state { clip-path: inset(56% 76% 34% 14%); }
.scene #safe-open-state { clip-path: inset(20% 13% 51% 72%); }
.scene #hatch-open-state { clip-path: inset(77% 24% 0 3%); }
.scene .action-plate { z-index: 1; }
.scene #uv-glow { z-index: 1; pointer-events: none; }
.scene .book-clue {
  position: absolute; left: 2%; top: 36%; width: 11%; padding: 12px 4px;
  background: #e6d5ac; color: #30251d; border: 3px solid #705032;
  font: bold clamp(9px, 1vw, 18px) Georgia, serif; text-align: center; pointer-events: none;
}
.door-ready, .lamp-filter, .released-bolt { display: none; position: absolute; pointer-events: none; }
.token-inserted .door-ready { display: block; left: 92.3%; top: 35.5%; width: 3%; height: 8.5%; border: 2px solid #b4e8a0; box-shadow: 0 0 10px #b4e8a088; }
.filter-fitted .lamp-filter { display: block; left: 21%; top: 39%; width: 5%; height: 2%; border-radius: 50%; background: #7154b999; border: 1px solid #c7b7f3; }
.bolt-released .released-bolt { display: block; left: 43%; top: 83%; width: 4%; height: 1%; background: #c9ba8b; transform: translateX(50%); }
.scene.escaped { box-shadow: inset -24px 0 32px #ffe9b866; }
.scene.list .book-clue, .scene.list .door-ready, .scene.list .lamp-filter, .scene.list .released-bolt { display: none; }
.controls-guide { font-size: 13px; line-height: 1.6; color: #c1c6ba; margin: 8px 0; }
.level-menu { padding: 16px; margin: 20px 0; background: #101713e8; border: 1px solid #65715c; border-radius: 4px; }
.level-menu h2 { font: 24px Georgia, serif; margin: 0 0 16px; }
.level-menu label { display: block; margin-bottom: 8px; font-size: 14px; }
.level-menu select, .level-menu input, #tutorial-tool {
  min-height: 48px; max-width: 100%; width: 100%; padding: 10px;
  color: #f0eddf; background: #101813; border: 1px solid #8b987e; border-radius: 4px; font-size: 16px;
}
.level-menu > button { margin: 12px 0 20px; }
.key-entry { display: flex; flex-wrap: wrap; gap: 8px; }
.key-entry input { flex: 1; min-width: 100px; }
#level-feedback { font-size: 13px; line-height: 1.6; }
.access-key { padding: 12px; background: #252e22; border-left: 2px solid #e8bd7f; }
#tutorial { padding: 20px; max-width: 1440px; margin: auto; }
#tutorial-title { font: 32px Georgia, serif; }
#tutorial-status { min-height: 64px; padding: 12px; line-height: 1.6; background: #1c211b; border-left: 2px solid #d6b785; }
#tutorial-tool { width: auto; min-width: 150px; }
#tutorial .scene-tools { align-items: center; }
.tutorial-scene #window-broken { clip-path: inset(20% 25% 32% 23%); }
.tutorial-scene .collected-stone { clip-path: inset(77% 73% 8% 15%); }
.tutorial-scene .collected-twig { clip-path: inset(81% 42% 8% 40%); }
.tutorial-scene .collected-leaf { clip-path: inset(74% 8% 9% 70%); }
.scene.list .mechanism { display: none !important; }
@media (min-width: 1000px) {
  .arrival { align-items: center; }
  .intro-copy { max-width: 1080px; width: 100%; display: grid; grid-template-columns: 1fr 420px; column-gap: 64px; }
  .intro-copy > * { grid-column: 1; }
  .intro-copy > .level-menu { grid-column: 2; grid-row: 1 / span 7; align-self: center; }
}
@media (max-width: 600px) {
  #tutorial { padding: 12px; }
  .scene.list { grid-template-columns: 1fr; }
}
.scene:not(.list) .hotspot { cursor: url('./inspect-cursor.svg') 12 12, help; }
.scene:not(.list) .hotspot { min-width: 28px; min-height: 28px; }
.scene:not(.list) [data-object="telescope"] { z-index: 3; }
.scene #exit-state { clip-path: inset(7% 0 9% 85%); }
.scene:not(.list) [data-object="lamp"] { z-index: 3; }
.scene #frame-state { z-index: 2; }
.filter-fitted .lamp-filter { top: 41%; height: 1%; }
.lamp-aimed .lamp-filter { display: none; }
.scene #hatch-open-state { clip-path: inset(77% 0 0 0); }