:root{color-scheme:dark;--ink:#edf0e6;--muted:#a8b5ab;--gold:#e6bb73;--panel:#15231fdf;--line:#bfc6b230;--edge:clamp(18px,2.35vw,36px)}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden}
body{background:#15201d;color:var(--ink);font-family:'DM Sans',Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #f3cf8f;outline-offset:4px}
#museum-canvas{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none}
.filmgrain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.2;background:repeating-linear-gradient(0deg,transparent 0px,#16251d04 2px,transparent 4px),radial-gradient(ellipse at 48% 50%,transparent 38%,#08110b80 100%)}
.brand-bar{position:absolute;left:var(--edge);right:var(--edge);top:25px;z-index:7;display:flex;align-items:center;gap:15px;pointer-events:none}
.mark{flex:none;border:1px solid #e6bb738a;background:#12201eca;width:46px;height:46px;display:flex;align-items:center;justify-content:center;font:600 29px Georgia,serif;color:var(--gold);letter-spacing:-4px}
.mark span{font-size:19px;align-self:flex-end;margin:0 3px 6px 0}
.brand-bar>div:nth-child(2){display:flex;flex-direction:column;gap:4px}
.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:700;color:var(--gold)}
.brand-bar strong{font-size:15px;letter-spacing:.075em;font-weight:700;color:white}
.thin{font-weight:400;opacity:.82}
.edition{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.15em;color:#fff;opacity:.88}
.icon-btn{background:#142721d9;border:1px solid #f1eee35c;color:#fff;width:36px;height:36px;border-radius:50%;font-size:18px;pointer-events:auto}
.left-column{position:absolute;z-index:4;left:var(--edge);top:106px;width:345px;max-height:calc(100dvh - 250px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a3ab9577 transparent;padding-right:3px}
.vertical-rule{font-size:9px;letter-spacing:.22em;white-space:nowrap;color:#fffad8b9;border-left:2px solid var(--gold);padding:3px 0 3px 12px;margin-bottom:23px}
.hero{padding:0 3px 25px}
.chapter-label,.section-top{display:flex;align-items:center;justify-content:space-between;color:var(--gold);font-size:10px;letter-spacing:.14em;font-weight:700}
.chapter-label{justify-content:flex-start;gap:9px}
.seq{margin-left:auto;color:#f4f3df}
.live-dot{width:7px;height:7px;border-radius:100%;background:#e5ba72;box-shadow:0 0 0 4px #e5ba7227}
h1{font:500 clamp(47px,4.5vw,73px)/.95 'Playfair Display',Georgia,serif;letter-spacing:-.055em;margin:20px 0 17px;text-shadow:0 2px 35px #1a201d9a}
h1 em{font-weight:500;color:var(--gold)}
.hero p{font-size:13px;line-height:1.7;max-width:284px;color:#edf1e8}
.herotags{display:flex;gap:7px;margin-top:18px}
.herotags span{border:1px solid #e2dec469;padding:8px 9px;font-size:9px;letter-spacing:.12em;font-weight:700;background:#12241a3b}
.panel{padding:17px 16px 18px;background:var(--panel);border:1px solid var(--line);box-shadow:0 10px 40px #0a140d36;backdrop-filter:blur(23px)}
.stages-panel{margin-bottom:9px}
.section-top{padding-bottom:13px;border-bottom:1px solid var(--line)}
.muted{color:#b1b9a8;font-weight:500;font-size:9px}
.stage{display:flex;align-items:center;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #c1c6b225;color:#e4e8df;padding:12px 5px;gap:13px;transition:.18s}
.stage:last-child{border:0;padding-bottom:2px}
.stage:hover,.stage.active{color:var(--gold);padding-left:9px;background:linear-gradient(90deg,#e5bb7014,transparent)}
.step-num{width:28px;color:#acb9ad;font-size:11px;font-weight:700}
.stage.active .step-num{color:var(--gold)}
.step-text{display:flex;flex-direction:column;gap:5px;flex:1}
.step-text strong{font-size:11px;letter-spacing:.1em;line-height:1.2}
.step-text small{color:#b2baaa;font-size:11px;font-weight:400}
.step-arrow{color:#eec67c;opacity:0;transition:opacity .15s}
.stage:hover .step-arrow,.stage.active .step-arrow{opacity:1}
.notes-panel{background:#13231ef5}
.notes-panel h2{font:500 20px/1.2 'Playfair Display',Georgia,serif;letter-spacing:-.02em;margin:14px 0 9px;color:#f0e8d8}
.notes-panel p{font-size:11.5px;line-height:1.68;color:#c4cec5;margin:0}
.note-foot{font-size:9px;color:#a4b5a8;letter-spacing:.02em;margin-top:14px;border-top:1px solid var(--line);padding-top:11px;display:flex;gap:9px;align-items:center}
.symbol{color:var(--gold);font-size:19px}
.top-right{position:absolute;right:var(--edge);top:110px;z-index:3;display:flex;align-items:flex-end;flex-direction:column;gap:13px}
.field-label{font-size:9px;letter-spacing:.16em;color:#fff}
.view-switch{border:1px solid #fbf2dd72;background:#0f211ab5;display:flex;padding:4px;gap:3px;backdrop-filter:blur(15px)}
.view-switch button{padding:9px 12px;background:transparent;border:0;color:#e5e5da;font-size:9px;letter-spacing:.13em;font-weight:700}
.view-switch button.active{background:#e7bf7d;color:#20251d}
.compass{position:relative;width:77px;height:77px;border:1px solid #e2deba85;border-radius:50%;display:grid;place-items:center;font-size:34px;color:#fbedd5;margin-top:5px;box-shadow:inset 0 0 0 5px #24352b43}
.compass span{font-size:11px;color:var(--gold);position:absolute;top:1px;font-weight:700}
.compass-cross{transform:rotate(24deg);opacity:.72}
.bottom-hud{position:absolute;bottom:35px;left:calc(var(--edge) + 380px);right:var(--edge);z-index:6;min-width:0}
.bottom-label{display:flex;gap:10px;align-items:center;color:#fff;font-size:10px;letter-spacing:.17em;font-weight:700;margin-bottom:10px;text-shadow:0 1px 9px #111}
.yellow-slash{color:var(--gold);letter-spacing:0}
.keys{margin-left:auto;font-size:9px;color:#d2dccc;letter-spacing:.1em}
.toolbar{display:flex;align-items:stretch;gap:8px;padding:12px;background:#12251fe6;border:1px solid #e0dabc4d;backdrop-filter:blur(24px);box-shadow:0 10px 45px #00180e77}
.control-block{flex:1.4;min-width:145px;padding:6px 5px;display:flex;justify-content:center;flex-direction:column;gap:13px}
.control-label{font-size:10px;letter-spacing:.12em;color:#e2ecdf;font-weight:700;display:flex;justify-content:space-between;gap:16px}
.control-label b{color:var(--gold)}
input[type=range]{appearance:none;width:100%;height:3px;outline:none;cursor:pointer;background:linear-gradient(90deg,#b07d44,#f7c477,#707f72)}
input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#ffe1a1;border:3px solid #735736;box-shadow:0 0 0 2px #f5b76050}
input[type=range]::-moz-range-thumb{width:10px;height:10px;border:2px solid #735736;background:#ffe1a1;border-radius:50%}
.tool-divider{width:1px;background:var(--line);margin:0 4px}
.tool-btn{display:flex;align-items:center;gap:10px;justify-content:center;color:#f1f1e8;border:1px solid #bcbfae36;background:#ffffff05;padding:10px 13px;white-space:nowrap;font-size:10px;font-weight:700;letter-spacing:.075em;min-height:48px;transition:.15s}
.tool-btn:hover,.tool-btn.on{border-color:var(--gold);color:var(--gold);background:#dcb76f17}
.tool-btn.accent{background:var(--gold);color:#263126;border-color:var(--gold)}
.tool-btn.accent:hover{background:#ffdb97}
.tool-icon{font-size:23px;font-family:Georgia,serif;font-weight:400;line-height:1}
kbd{font-size:9px;color:#b1c0b1;font-family:inherit;font-weight:400;border:1px solid #88948766;border-radius:2px;min-width:17px;text-align:center;padding:2px 3px}
.tool-btn.accent kbd{color:#394835;border-color:#3e5a4363}
.credits{position:absolute;bottom:8px;right:var(--edge);z-index:2;color:#f2f2e1;font-size:8px;letter-spacing:.14em;text-shadow:0 1px 7px #000}
.credits span{color:var(--gold)}
#hotspot-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.hotspot{position:absolute;pointer-events:auto;transform:translate(-17px,-50%);display:flex;align-items:center;gap:8px;background:transparent;color:#fff;border:none;text-shadow:0 2px 9px #000;font-size:9px;letter-spacing:.1em;font-weight:700;white-space:nowrap}
.pin-core{font:400 22px/1 Georgia,serif;width:34px;height:34px;border:1px solid #f2e7c7;border-radius:50%;color:#fce9bf;background:#162920d9;display:grid;place-items:center;box-shadow:0 0 0 4px #172e249e,0 0 14px #161f12a6;transition:transform .2s}
.hotspot:hover .pin-core{transform:scale(1.18);background:var(--gold);color:#19281d}
.pin-label{padding:6px 9px;background:#182e27dd;border:1px solid #eaebd24d;backdrop-filter:blur(7px);opacity:.91}
.context-card{position:absolute;z-index:7;right:var(--edge);bottom:142px;width:302px;padding:21px 20px 17px;background:#11201df4;border:1px solid #d4c49a85;backdrop-filter:blur(22px);transform:translateY(12px);opacity:0;pointer-events:none;transition:.23s}
.context-card.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.context-card h3{font:500 26px/1.05 'Playfair Display',Georgia,serif;margin:15px 0 12px;color:#fff4de}
.context-card p{font-size:11.5px;line-height:1.65;color:#c6d0c4}
.close-context,.modal-close{position:absolute;right:15px;top:10px;color:#c4cdbd;background:transparent;border:0;font-size:26px}
.context-action{margin-top:12px;width:100%;border:1px solid #e9bb72;background:#e1bb7a;color:#203027;text-align:left;display:flex;justify-content:space-between;padding:12px 14px;font-size:10px;font-weight:700;letter-spacing:.12em}
.context-action[hidden]{display:none}
.modal-wrap{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:20px}
.modal-wrap[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:#07140fe6;backdrop-filter:blur(12px)}
.modal-dialog{position:relative;background:#1b2b25;border:1px solid #a69d7e;padding:38px 42px;width:min(570px,95vw);max-height:92dvh;overflow-y:auto;box-shadow:0 30px 100px #0008}
.modal-dialog h2{font:500 42px/1.08 'Playfair Display',Georgia,serif;letter-spacing:-.035em}
.modal-dialog em{color:var(--gold)}
.modal-dialog p{font-size:13px;line-height:1.75;color:#d0d9ce}
.modal-keys{display:flex;gap:10px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:20px 0}
.modal-keys span{font-size:11px;display:flex;align-items:center;gap:7px}
.modal-dialog a{font-size:12px;color:#f0cb89;text-decoration:underline;text-underline-offset:3px}
#loading{position:fixed;z-index:50;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#12251f;gap:15px;transition:opacity .65s ease,visibility .65s ease}
#loading.done{opacity:0;visibility:hidden;pointer-events:none}
.load-brand{font:500 47px Georgia,serif;color:#f1d8a8;letter-spacing:.14em}
.load-brand span{font:12px Arial,sans-serif;letter-spacing:.2em;color:#879b8e}
.load-line{height:2px;width:230px;background:#54735d;position:relative;overflow:hidden}
.load-line i{position:absolute;width:36%;height:100%;background:#e7ba71;animation:load 1.1s ease-in-out infinite}
.load-small{font-size:10px;letter-spacing:.2em;color:#b8cab6}
@keyframes load{from{left:-35%}to{left:100%}}
@media(max-width:1250px){.left-column{width:315px}.bottom-hud{left:calc(var(--edge) + 340px)}.tool-btn{padding:9px 9px;gap:7px}.tool-btn kbd{display:none}.keys{display:none}.context-card{bottom:156px}}
@media(max-width:950px){.left-column{top:90px;width:290px;max-height:calc(100dvh - 270px)}.hero h1{font-size:49px}.top-right{top:94px}.bottom-hud{left:var(--edge);right:var(--edge);bottom:26px}.toolbar{gap:6px}.tool-btn{flex:1}.context-card{right:var(--edge);bottom:156px}.edition{display:none}}
@media(max-width:630px){
 :root{--edge:13px}
 .brand-bar{top:12px;gap:9px}.mark{width:36px;height:36px;font-size:22px}.brand-bar .eyebrow{font-size:8px}.brand-bar strong{font-size:11px}.help-btn{margin-left:auto;width:32px;height:32px}
 .left-column{top:66px;width:min(275px,66vw);max-height:calc(100dvh - 240px)}
 .vertical-rule{font-size:8px;white-space:normal;margin-bottom:8px}
 .hero{padding-bottom:10px}.hero h1{font-size:39px;margin:8px 0}.hero p{font-size:10px;line-height:1.45;margin:6px 0}.chapter-label{font-size:8px}.herotags{margin-top:10px}.herotags span{font-size:7px;padding:6px}
 .panel{padding:9px 10px}.section-top{font-size:8px;padding-bottom:7px}.muted{font-size:7px}.stage{padding:9px 3px}.stage .step-num{font-size:9px;width:20px}.step-text strong{font-size:9px}.step-text small{font-size:9px}.notes-panel h2{font-size:17px}.notes-panel p{font-size:10px}
 .top-right{top:72px;right:10px}.field-label,.compass{display:none}.view-switch{flex-direction:column;gap:1px}.view-switch button{padding:7px 8px;font-size:8px}
 .bottom-hud{bottom:26px}.bottom-label{font-size:8px;margin-bottom:5px}.toolbar{padding:7px;flex-wrap:wrap;gap:5px}.control-block{min-width:100%;gap:8px;padding:4px 8px}.control-label{font-size:8px}.tool-divider{display:none}.tool-btn{flex:1;min-width:0;padding:8px 4px;min-height:40px;gap:5px;font-size:8px;letter-spacing:0}.tool-icon{font-size:17px}.tool-btn kbd{display:none}
 .hotspot .pin-core{width:26px;height:26px;font-size:16px}.pin-label{display:none}
 .context-card{width:min(285px,calc(100vw - 26px));bottom:185px;padding:14px}.context-card h3{font-size:22px;margin:9px 0}.context-card p{font-size:10px}.context-action{padding:9px}
 .credits{font-size:6px;left:var(--edge);right:auto;bottom:8px}.modal-dialog{padding:28px 21px}.modal-dialog h2{font-size:31px}
}
@media(max-height:670px) and (min-width:700px){.left-column{top:76px;max-height:calc(100dvh - 205px)}.hero h1{font-size:48px;margin:9px 0}.hero p{font-size:11px}.hero{padding-bottom:10px}.bottom-hud{bottom:18px}.context-card{bottom:116px}.top-right{top:86px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}