@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=Space+Mono:wght@400;700&display=swap');
:root{color-scheme:dark;--ink:#18151f;--paper:#f2e9db;--muted:#a399aa;--gold:#e9bd77;--pink:#d492b2;--blue:#96b8d1;--mono:'Space Mono',monospace;--sans:'DM Sans',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);background-image:radial-gradient(ellipse at 80% 25%,#65475815,transparent 55%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{background:none;border:0}a{color:inherit;text-decoration:none}.site-header,main,.site-footer{width:min(1160px,calc(100% - 80px));margin:auto}.site-header{height:93px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f2e9db17;font:10px var(--mono);letter-spacing:1.5px}.brand{font-weight:700}.brand>span{font-size:23px;color:var(--gold);margin-right:11px}.header-note{color:var(--muted);font-size:9px}.site-header button{font:10px var(--mono);color:#c9bdcc;padding:12px 0}.site-header button span{color:var(--gold);margin-left:12px}
.intro{display:flex;align-items:end;justify-content:space-between;padding:40px 0 32px}.eyebrow{font:9px/1.8 var(--mono);letter-spacing:2px;color:var(--gold);margin:0 0 15px}h1{font:400 clamp(32px,4vw,55px)/1.03 'DM Serif Display',serif;letter-spacing:-1px;margin:0}h1 em{font-weight:400;color:var(--pink)}.intro-copy{font-size:13px;line-height:1.9;color:#b1a5b8;margin:0 15px 2px 30px}
.game-shell{border:1px solid #d8b88a3d;background:#100e18;border-radius:9px;overflow:hidden;box-shadow:0 20px 60px #0004}.room-top{height:41px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;background:#211b29;font:8px var(--mono);letter-spacing:1.6px;color:#b7a8bb;border-bottom:1px solid #ffffff0a}.room-top>span:first-child{color:#e7c58f;display:flex;align-items:center;gap:9px}.room-top i{width:5px;height:5px;background:#b7c58c;box-shadow:0 0 6px #b7c58c80}.room-top button{font:9px var(--mono);letter-spacing:0;color:#d3b894}.canvas-wrap{position:relative;width:100%;height:clamp(370px,42vw,590px);background:#100d19;overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none;cursor:crosshair}#object-hint{position:absolute;pointer-events:none;z-index:1;padding:9px 12px;background:#201725ec;border:1px solid #e9bd7799;font:10px var(--mono);color:#ffe4b5;transform:translate(-50%,-100%);white-space:nowrap;border-radius:3px}.scene-caption{position:absolute;bottom:16px;left:21px;right:21px;display:flex;justify-content:space-between;pointer-events:none;color:#e8cca873;font:8px var(--mono);letter-spacing:2px}.room-bottom{min-height:43px;padding:10px 19px;display:flex;gap:18px;align-items:center;justify-content:space-between;font:9px/1.6 var(--mono);color:#b4a6ba}.keys{color:#7c7089;font-size:8px;white-space:nowrap}.keys b{padding:0 8px;color:var(--gold)}.places{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:24px}.places button{text-align:left;border-right:1px solid #ffffff12;padding:8px 20px;font-size:13px;transition:color .2s}.places button:first-child{padding-left:0}.places button:last-child{border:0}.places button>span{font:9px var(--mono);color:#84748b;display:block;margin-bottom:10px}.places small{font:8px var(--mono);letter-spacing:1.5px;color:#9f8b9e;display:block;margin-top:9px}.places button:hover,.places button:hover small{color:var(--gold)}.site-footer{display:flex;justify-content:space-between;padding:33px 0 28px;font:8px/1.8 var(--mono);color:#807488}.site-footer i{color:var(--gold);font-style:normal;padding:0 10px}
dialog{background:#211b2a;color:var(--paper);border:1px solid #aa815b;border-radius:8px;width:min(490px,calc(100% - 32px));padding:39px;box-shadow:0 24px 100px #0009;max-height:85dvh;overflow:auto}dialog::backdrop{background:#0c0a14b8;backdrop-filter:blur(5px)}#close-panel{position:absolute;right:15px;top:11px;color:#bca8ba;font-size:25px}dialog h2{font:35px/1.1 'DM Serif Display',serif;margin:0 0 20px}#panel-body{font-size:14px;line-height:1.85;color:#c0b2c6}#panel-body a{display:block;margin:20px 0;padding:18px;background:#302535;border:1px solid #75566c;color:var(--gold)}#panel-body a small{display:block;color:#b4a1ba;font-size:11px;margin-top:5px}#return-room{border-top:1px solid #ffffff15;width:100%;text-align:left;margin-top:22px;padding:20px 0 0;font:10px var(--mono);color:var(--gold)}#return-room span{float:right}.instruction-keys{color:var(--gold)}
@media(max-width:700px){.site-header,main,.site-footer{width:calc(100% - 32px)}.site-header{height:70px}.header-note{display:none}.intro{padding:28px 0 23px}.intro-copy{display:none}h1{font-size:37px}.eyebrow{font-size:8px;letter-spacing:1.4px}.room-top{padding:0 11px}.room-top>span:nth-child(2){display:none}.canvas-wrap{height:440px}.room-bottom{padding:12px;font-size:8px}.keys{display:none}.places{grid-template-columns:repeat(2,1fr);gap:20px 0}.places button:nth-child(3){padding-left:0}.places button:nth-child(2){border:0}.site-footer{font-size:7px;gap:20px}.site-footer>span:first-child{max-width:190px}dialog{padding:32px 25px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Finished room surfaces: readable controls and keepsakes that belong to the scene. */
.skip-link{position:fixed;left:16px;top:-100px;z-index:10;padding:12px 18px;background:var(--paper);color:var(--ink)}.skip-link:focus{top:12px}
.site-header{font-size:12px;letter-spacing:1px}.header-note{font-size:11px}.site-header button{font-size:12px;min-height:44px}.eyebrow{font-size:11px}.intro-copy{font-size:15px}.room-top{height:48px;font-size:10px;letter-spacing:1px}.room-top button{font-size:12px;min-height:44px}.room-bottom{font-size:12px;min-height:50px}.keys{font-size:10px}.places button{font-size:16px;min-height:100px;border-radius:4px}.places button>span{font-size:11px}.places small{font-size:11px;letter-spacing:1px}.places button[aria-pressed=true]{color:var(--gold);background:#e9bd7708}.places button[aria-pressed=true] small{color:#d2b38e}.site-footer{font-size:11px;color:#b2a1b9}canvas{touch-action:pan-y}.scene-caption{font-size:9px}#object-hint{font-size:12px}.fallback-note{font-size:16px;line-height:1.8}.fallback-note a{text-decoration:underline;color:var(--gold)}
dialog{width:min(530px,calc(100% - 32px));scrollbar-color:#826680 #211b2a}#panel-body{font-size:16px;color:#cfc2d1}#panel-body a{border-radius:5px;transition:background .2s,border-color .2s}#panel-body a:hover{background:#3b2c40;border-color:var(--gold)}#panel-body a small{font-size:13px}#return-room{font-size:12px;min-height:48px}#close-panel{min-width:44px;min-height:44px;right:5px;top:3px}.panel-art{height:130px;margin:0 0 25px;display:flex;align-items:center;justify-content:center;background:#191622;border:1px solid #91745b50;border-radius:5px;overflow:hidden}.workbench-art{flex-direction:column;background:linear-gradient(140deg,#292033,#172632)}.workbench-art>span{color:var(--gold);font-size:24px}.workbench-art b{font:22px var(--mono);letter-spacing:7px;color:var(--paper);padding-left:7px}.workbench-art small{font:9px var(--mono);letter-spacing:3px;color:#b69ba9;margin-top:8px}.keepsake-art{gap:20px;background:linear-gradient(145deg,#372735,#1d1a28)}.keepsake-art span{display:grid;place-items:center;width:62px;height:76px;border:3px double #bb936d;background:#493448;box-shadow:4px 5px #14101c;font:32px 'DM Serif Display',serif;color:#e2bdb0;transform:rotate(-5deg)}.keepsake-art span:last-child{transform:rotate(5deg);background:#303748;color:#b1c0d0}.keepsake-art i{font-style:normal;color:var(--gold)}.letter-art span{font-size:65px;color:#dbba93;transform:rotate(-8deg)}
@media(max-width:700px){.site-header{font-size:10px}.site-header button{font-size:11px}.eyebrow{font-size:10px}.room-top{font-size:9px}.room-top button{font-size:11px}.room-bottom{font-size:11px}.places button{font-size:15px}.places small{font-size:10px}.site-footer{font-size:10px}.scene-caption{font-size:8px}.canvas-wrap{height:min(440px,58svh);min-height:300px}dialog h2{font-size:31px}.header-note{display:none}}
@media(max-width:360px){.site-header,main,.site-footer{width:calc(100% - 24px)}.brand>span{margin-right:4px}.site-header button span{margin-left:3px}h1{font-size:33px}.room-top{letter-spacing:0}.places button{padding-right:8px}.places small{letter-spacing:.3px}}
@media(prefers-reduced-motion:no-preference){dialog[open]{animation:arrive .2s ease-out}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}