@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=M+PLUS+Rounded+1c:wght@400;500;700;800&display=swap');
:root{color-scheme:dark;--ink:#f7f3ff;--muted:#aaa3c0;--deep:#0b0a18;--surface:#17152b;--line:#d3caff26;--purple:#9a7cff;--cyan:#65e3ff;--pink:#ff91c8;--yellow:#ffd86b;font-family:'M PLUS Rounded 1c',sans-serif}
*{box-sizing:border-box}html{min-height:100%;background:var(--deep)}body{min-width:320px;min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 20% 15%,#65e3ff12,transparent 26rem),radial-gradient(circle at 80% 0%,#9a7cff20,transparent 34rem),var(--deep)}button,a{font:inherit}button{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}.site-shell{width:min(1500px,100%);min-height:100vh;margin:auto}.site-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:0 4vw;border-bottom:1px solid var(--line)}.brand{color:var(--ink);font-family:'DM Mono',monospace;font-size:.95rem;letter-spacing:.08em;text-decoration:none}.brand:before{display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan);content:''}.header-actions{display:flex;gap:20px}.header-actions a{color:var(--muted);font:500 .75rem 'DM Mono',monospace;text-decoration:none}.header-actions a:hover{color:var(--ink)}
.experience{position:relative;padding:clamp(28px,5vw,72px) 4vw 64px}.experience-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:48px;align-items:end;margin-bottom:32px}.eyebrow{margin:0 0 12px;color:var(--cyan);font:500 .72rem 'DM Mono',monospace;letter-spacing:.12em}h1,h2,p{margin-top:0}h1{max-width:880px;margin-bottom:0;font-size:clamp(2.25rem,5.8vw,5.6rem);font-weight:800;letter-spacing:-.055em;line-height:1.08}.intro-copy{padding-bottom:4px;color:var(--muted);line-height:1.8}.intro-copy p{margin-bottom:8px}.key-help{color:#77718f;font:400 .72rem 'DM Mono',monospace}.experience-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.discovery-progress{display:flex;gap:9px;align-items:center;color:var(--muted);font:400 .75rem 'DM Mono',monospace}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 14px var(--pink)}.mode-button{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#ffffff0a;cursor:pointer}.mode-button:hover{background:#ffffff14}
.room-frame{position:relative;min-height:clamp(500px,62vw,790px);overflow:hidden;border:1px solid #d3caff2e;border-radius:34px;background:linear-gradient(#17152e,#0f0e20);box-shadow:0 34px 90px #0006;isolation:isolate}.room-glow{position:absolute;top:-40%;left:10%;width:80%;height:80%;border-radius:50%;background:radial-gradient(circle,#9a7cff33,transparent 65%);filter:blur(18px)}.webgl-house-canvas{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none}.room{position:absolute;z-index:2;top:50%;left:50%;width:min(82%,980px);aspect-ratio:1.65;opacity:.52;transform:translate(-50%,-48%) rotateX(58deg) rotateZ(-45deg);transform-style:preserve-3d}.floor-grid{position:absolute;inset:0;border:2px solid #e5deff52;border-radius:5px;background-color:#28244755;background-image:linear-gradient(#ffffff0e 1px,transparent 1px),linear-gradient(90deg,#ffffff0e 1px,transparent 1px);background-size:10% 16.666%;box-shadow:inset 0 0 80px #43357055,40px 50px 80px #0005}.wall{position:absolute;z-index:-1;background:linear-gradient(#37325f88,#211e3e88);box-shadow:inset 0 0 45px #0004;transform-origin:bottom}.wall-left{top:0;bottom:0;left:0;width:29%;transform:rotateY(-90deg)}.wall-right{top:0;right:0;left:0;height:29%;transform:rotateX(90deg)}
.room-object{position:absolute;z-index:4;display:grid;min-width:70px;min-height:70px;padding:8px;border:0;border-radius:12px;place-content:center;background:#4c437c;box-shadow:9px 9px #272143,14px 18px 25px #0005;cursor:pointer;transform:translateZ(38px) rotateZ(45deg) rotateX(-58deg);transition:.18s}.room-object:hover{filter:brightness(1.25);transform:translateZ(44px) rotateZ(45deg) rotateX(-58deg)}.room-object>span{font-size:clamp(1.4rem,3vw,2.4rem);line-height:1}.room-object small{margin-top:5px;color:#ded7ff;font-size:.62rem}.desk{min-width:112px;background:#367793;box-shadow:9px 9px #183e57,14px 18px 25px #0005}.shelf{min-height:120px;background:repeating-linear-gradient(90deg,#be765f 0 12px,#e4b15c 12px 24px,#675088 24px 36px);box-shadow:9px 9px #53364f,14px 18px 25px #0005}.plant{min-width:58px;min-height:58px;color:#7ee7ac;background:#315a50;box-shadow:7px 7px #173831}.cat{min-width:56px;min-height:56px;border-radius:45%;color:#312645;background:var(--yellow);box-shadow:7px 7px #a86f45}
.character{position:absolute;z-index:9;width:58px;height:88px;pointer-events:none;transform:translate(-50%,-68%) translateZ(52px) rotateZ(45deg) rotateX(-58deg);transition:top .18s cubic-bezier(.2,.8,.2,1),left .18s cubic-bezier(.2,.8,.2,1)}.character-shadow{position:absolute;right:5px;bottom:-10px;left:5px;height:18px;border-radius:50%;background:#0006;filter:blur(4px)}.character-body{position:absolute;inset:0;animation:idle 2.3s ease-in-out infinite}.character-face{position:absolute;top:9px;left:8px;display:grid;width:42px;height:38px;border:3px solid #2b2448;border-radius:46%;place-items:center;color:#4c3560;background:#ffd9c5;font:400 .66rem sans-serif}.character-hair{position:absolute;z-index:1;top:4px;left:7px;width:44px;height:23px;border-radius:50% 50% 35% 25%;background:#493e65;transform:rotate(-4deg)}.character-hoodie{position:absolute;top:44px;left:4px;display:grid;width:50px;height:37px;border-radius:12px 12px 8px 8px;place-items:center;color:#162d51;background:var(--cyan);font:700 .62rem 'DM Mono',monospace;box-shadow:inset 0 -7px #0002}.character-legs{position:absolute;top:76px;left:12px;width:34px;height:11px;border-right:11px solid #564d7d;border-left:11px solid #564d7d}
.inspect-prompt{position:absolute;z-index:20;bottom:-88px;left:50%;display:flex;gap:8px;align-items:center;padding:8px 13px;border:1px solid #ffffff40;border-radius:999px;background:#0b0a18e0;cursor:pointer;transform:translateX(-50%) rotateZ(45deg) rotateX(-58deg)}.key{display:grid;width:23px;height:23px;border:1px solid #ffffff40;border-radius:6px;place-content:center;font:400 .68rem 'DM Mono',monospace}.secret-door{position:absolute;top:-12%;right:-3%;z-index:5;display:grid;width:14%;aspect-ratio:.72;border:3px solid var(--pink);border-radius:12px 12px 2px 2px;place-items:center;color:var(--pink);background:#302347;box-shadow:0 0 35px #ff91c859;cursor:pointer;transform:translateZ(70px) rotateZ(45deg) rotateX(-58deg);animation:pulse 1.8s ease-in-out infinite}.movement-controls{position:absolute;right:24px;bottom:24px;z-index:20;display:grid;grid-template:repeat(3,42px)/repeat(3,42px);gap:4px}.movement-controls button{border:1px solid #ffffff21;border-radius:10px;background:#110f23d1;box-shadow:0 7px 16px #0004;cursor:pointer}.movement-controls button:hover{background:#292447}.control-up{grid-area:1/2}.control-left{grid-area:2/1}.control-action{grid-area:2/2;color:var(--cyan);font-family:'DM Mono',monospace}.control-right{grid-area:2/3}.control-down{grid-area:3/2}
.panel-backdrop{position:fixed;z-index:100;display:grid;inset:0;padding:24px;place-items:center;background:#05040eb8;backdrop-filter:blur(14px);animation:fade .15s}.info-panel{position:relative;width:min(560px,100%);padding:clamp(28px,5vw,54px);border:1px solid #d3caff33;border-radius:28px;background:radial-gradient(circle at 90% 0%,#9a7cff33,transparent 18rem),var(--surface);box-shadow:0 30px 90px #0008;animation:panel .26s cubic-bezier(.16,1,.3,1)}.panel-icon{display:block;margin-bottom:26px;font-size:3.2rem}.info-panel h2{margin-bottom:18px;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:-.04em}.info-panel>p:not(.eyebrow){margin-bottom:28px;color:var(--muted);line-height:1.9}.panel-close{position:absolute;top:18px;right:18px;display:grid;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;place-items:center;background:#ffffff0d;cursor:pointer}.panel-link{display:inline-flex;padding:12px 18px;border-radius:999px;color:#16112d;background:var(--cyan);font-size:.84rem;font-weight:700;text-decoration:none}
.list-mode{min-height:600px;padding:clamp(28px,5vw,72px);border:1px solid var(--line);border-radius:34px;background:var(--surface)}.list-mode>h2{margin-bottom:10px;font-size:clamp(2rem,4vw,3.6rem)}.list-mode>p{color:var(--muted)}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:42px}.info-card{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;min-height:150px;padding:26px;border:1px solid var(--line);border-radius:20px;text-align:left;background:#ffffff09;cursor:pointer}.info-card:hover{border-color:#65e3ff6b;background:#65e3ff0f}.info-card>span{grid-row:1/3;font-size:2.2rem}.info-card strong{font-size:1.15rem}.info-card small{color:var(--muted);line-height:1.6}.fallback-panel{max-width:760px;margin:40px auto;padding:32px;border:1px solid var(--line);border-radius:24px}
@keyframes idle{50%{transform:translateY(-3px)}}@keyframes pulse{50%{filter:brightness(1.35)}}@keyframes fade{from{opacity:0}}@keyframes panel{from{opacity:0;transform:translateY(18px) scale(.97)}}
@media(max-width:780px){.site-header{min-height:62px}.header-actions{gap:12px}.header-actions a{font-size:.66rem}.experience-intro{grid-template-columns:1fr;gap:20px}.key-help{display:none}.room-frame{min-height:520px;border-radius:24px}.room{top:46%;width:102%}.movement-controls{right:14px;bottom:14px}.info-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}