@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--paper:#f2eee5;--ink:#f5f0e7;--muted:#c9c0b1;--gold:#d2a76e;--panel:rgba(20,19,17,.88)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#171613;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;touch-action:none}#museum,canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0}
.brand{position:fixed;top:27px;left:34px;z-index:2;font:700 11px 'Manrope',sans-serif;letter-spacing:.2em;text-shadow:0 2px 16px #000}.brand span{color:var(--gold);margin-left:9px;font-weight:500}
.chapter-index{position:fixed;z-index:2;left:50%;top:28px;transform:translateX(-50%);display:flex;align-items:center;gap:13px;color:rgba(245,240,231,.54);font:600 9px 'Manrope',sans-serif;letter-spacing:.16em;white-space:nowrap;text-shadow:0 2px 15px #000}.chapter-index span{transition:color .5s}.chapter-index span.active{color:#f6dbb6}.chapter-index i{height:1px;width:22px;background:rgba(245,240,231,.25)}
.welcome{position:fixed;z-index:3;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:40px 7vw 7vh;background:linear-gradient(0deg,rgba(8,8,7,.74),transparent 75%);transition:opacity .8s,visibility .8s}.welcome.hidden{opacity:0;visibility:hidden;pointer-events:none}.welcome-copy{width:min(560px,75vw);padding:30px 34px 32px;background:rgba(22,21,18,.88);border:1px solid rgba(217,188,146,.26);border-left:2px solid var(--gold);backdrop-filter:blur(18px);box-shadow:0 24px 90px #0007}.eyebrow{font:600 9px 'Manrope',sans-serif;color:var(--gold);letter-spacing:.2em}.welcome h1{font:400 clamp(44px,6vw,78px)/.98 Georgia,serif;letter-spacing:-.055em;margin:19px 0 13px}.welcome h1 em{font-weight:400;color:#d7b481}.welcome p{font-size:15px;color:#d4ccbf;line-height:1.65;margin:0;max-width:420px}.route{margin-top:23px;padding-top:15px;border-top:1px solid #ffffff20;color:#e9dfcf;font:600 9px 'Manrope',sans-serif;letter-spacing:.24em}.route span{padding:0 11px;color:var(--gold)}.button-primary{margin-top:25px;padding:13px 17px;border:1px solid #d9bd94;background:#d2a76e;color:#1e1b16;font:600 11px 'Manrope',sans-serif;letter-spacing:.05em;cursor:pointer;transition:background .2s}.button-primary:hover{background:#ead2ad}.button-primary b{padding-left:24px;font-size:15px}.welcome-note{padding:11px 0 4px;color:#e9dfcf;font:600 9px/1.9 'Manrope',sans-serif;letter-spacing:.16em;text-align:right;text-shadow:0 2px 10px #000}.welcome-note small{font-size:10px;font-weight:400;letter-spacing:.04em;color:#c9c0b1}
.crosshair{position:fixed;z-index:2;left:50%;top:50%;width:5px;height:5px;border:1px solid #fff9;border-radius:50%;opacity:0;transform:translate(-50%,-50%);transition:opacity .3s}.crosshair.active{opacity:1}.room-caption{position:fixed;left:35px;bottom:32px;z-index:2;display:grid;gap:4px;text-shadow:0 2px 12px #000;opacity:0;transition:opacity .5s}.room-caption.visible{opacity:1}.room-caption span{font:600 8px 'Manrope',sans-serif;color:var(--gold);letter-spacing:.18em}.room-caption strong{font:400 24px Georgia,serif;letter-spacing:.04em}.interaction-hint{position:fixed;left:50%;bottom:11vh;transform:translateX(-50%);z-index:3;padding:9px 13px;background:rgba(20,19,17,.83);border:1px solid #e2ca9f55;color:#f0e7da;font:500 10px 'Manrope',sans-serif;letter-spacing:.04em;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}.interaction-hint.visible{opacity:1}.controls-hint{position:fixed;right:30px;bottom:28px;z-index:2;color:#f5f0e7b8;font:600 8px/2 'Manrope',sans-serif;letter-spacing:.12em;text-align:right;text-shadow:0 2px 12px #000;opacity:0;transition:opacity 1s}.controls-hint.visible{opacity:.8}.controls-hint span{color:#c9c0b1;font-weight:400;margin-left:7px}
.artwork-panel{position:fixed;z-index:5;right:32px;bottom:32px;width:min(360px,calc(100vw - 32px));padding:26px 29px 28px;background:rgba(22,21,18,.94);border:1px solid rgba(217,188,146,.32);box-shadow:0 18px 70px #0008;backdrop-filter:blur(20px);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s,transform .35s}.artwork-panel.open{opacity:1;transform:none;pointer-events:auto}.panel-close{position:absolute;right:13px;top:10px;border:0;background:none;color:#d2c8b8;font-size:23px;cursor:pointer}.artwork-panel h2{font:400 29px/1.1 Georgia,serif;margin:14px 22px 8px 0}.panel-credit{font-size:11px;color:#dbc7a8}.artwork-panel p{font-size:12px;line-height:1.7;color:#c9c0b1;margin:18px 0 0}.toast{position:fixed;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(410px,82vw);padding:14px 19px;border:1px solid #d9bd9444;background:#171613e8;color:#ece2d3;text-align:center;font:italic 17px/1.5 Georgia,serif;opacity:0;transition:opacity .6s;pointer-events:none}.toast.visible{opacity:1}.mobile-controls{display:none;position:fixed;z-index:3;left:15px;bottom:16px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:3px;touch-action:none}.mobile-controls button{border:1px solid #e8d7bc77;border-radius:8px;background:#211f1bdb;color:#fff;font-size:20px;touch-action:none}.mobile-controls [data-move=forward]{grid-column:2}.mobile-controls [data-move=left]{grid-column:1;grid-row:2}.mobile-controls [data-move=back]{grid-column:2;grid-row:2}.mobile-controls [data-move=right]{grid-column:3;grid-row:2}.mobile-controls.active{display:grid}.mobile-tip{display:none;position:fixed;right:14px;bottom:20px;z-index:2;padding:9px;background:#171613c9;color:#e8dfd1;font-size:10px;border-radius:5px}.mobile-tip.active{display:block}.loading{position:fixed;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#171613;color:#bbab93;font:600 9px 'Manrope',sans-serif;letter-spacing:.2em;transition:opacity .5s,visibility .5s}.loading.done{opacity:0;visibility:hidden}.loader-mark{font:italic 42px Georgia,serif;color:#d2a76e}
@media(max-width:700px){.brand{left:17px;top:19px;font-size:9px}.brand span{font-size:8px;margin-left:4px}.chapter-index{top:52px;gap:8px;font-size:8px}.chapter-index i{width:11px}.welcome{padding:18px 13px 18px;align-items:flex-end}.welcome-copy{width:100%;padding:21px 20px 22px}.welcome h1{font-size:clamp(42px,12vw,57px);margin:14px 0 9px}.welcome p{font-size:13px}.welcome-note{display:none}.route{margin-top:15px}.button-primary{margin-top:18px}.room-caption{left:15px;bottom:125px}.room-caption strong{font-size:20px}.controls-hint{display:none}.interaction-hint{bottom:112px;font-size:9px}.mobile-controls.active{display:grid}.artwork-panel{left:12px;right:12px;bottom:12px;width:auto;padding:22px 22px 23px}.artwork-panel h2{font-size:25px}.artwork-panel p{font-size:11px;max-height:25vh;overflow:auto}.mobile-tip.active{display:block;right:12px;bottom:18px;max-width:47%;font-size:9px}.crosshair{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}
.sound-toggle{position:fixed;right:28px;top:27px;z-index:2;padding:7px 9px;background:#16151299;border:1px solid #f0e5d033;color:#c9c0b1;font:600 8px 'Manrope',sans-serif;letter-spacing:.11em;cursor:pointer;opacity:0;transition:opacity .5s}.sound-toggle.visible{opacity:.7}
.ending{position:fixed;z-index:4;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#e5dfd4ed;color:#29241e;opacity:0;visibility:hidden;transition:opacity 2.5s,visibility 2.5s}.ending.visible{opacity:1;visibility:visible}.ending p{font:400 clamp(30px,5vw,55px)/1.35 Georgia,serif;letter-spacing:.22em;color:#3e3830;margin:22px 0}.ending>div{font:italic 18px/1.6 Georgia,serif;color:#645b4e}.ending button{margin-top:35px;padding:11px 15px;border:1px solid #86765f;background:transparent;color:#383127;font:600 9px 'Manrope',sans-serif;letter-spacing:.16em;cursor:pointer}
.artwork-panel figure{height:128px;margin:0 0 19px;overflow:hidden;background:#39342d}.artwork-panel figure:empty{display:none}.artwork-panel figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.panel-backdrop{position:fixed;z-index:4;inset:0;background:rgba(8,7,6,.34);opacity:0;pointer-events:none;transition:opacity .25s}.panel-backdrop.active{opacity:1;pointer-events:auto}
@media(max-width:700px){.sound-toggle{top:auto;right:12px;bottom:82px;font-size:7px}.ending>div{max-width:82%;font-size:15px}}
