:root{color-scheme:dark;--ink:#e8e4d6;--muted:#b3b5aa;--fade:rgba(232,228,214,.54);--gold:#d2b47c;--gold-bright:#f4d7a0;--line:rgba(220,221,208,.19);--panel:rgba(16,25,28,.88);font-family:'DM Sans',Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body,#app{padding:0;margin:0;width:100%;height:100%;min-height:100%;overflow:hidden}
body{background:#152024;color:var(--ink)}
button,a{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
#app{position:relative;isolation:isolate}
#viewport{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 60% 33%,#667b7b,#1c3237 63%,#10191c)}
#viewport canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}
.ambient-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,16,17,.74) 0%,rgba(9,16,17,.20) 29%,transparent 44%,transparent 57%,rgba(9,17,17,.16) 74%,rgba(10,20,20,.60) 100%),linear-gradient(0deg,rgba(9,17,17,.43),transparent 18%)}
#loading{z-index:30;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:19px;position:absolute;inset:0;background:linear-gradient(155deg,#1a2b2c,#10191c);font-size:10px;letter-spacing:.32em;color:var(--gold);transition:opacity .65s ease}
#loading.hidden{pointer-events:none;opacity:0}
.loading-emblem{font-size:64px;line-height:1;color:var(--gold-bright)}
.loading-line{width:145px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:.25;transform:scaleX(.5)}50%{opacity:1;transform:scaleX(1)}}
.topbar{position:absolute;z-index:6;top:0;left:0;right:0;height:83px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(12,23,24,.71),rgba(11,21,23,.09))}
.brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:12px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:22px;letter-spacing:.20em;white-space:nowrap}
.brand-mark{font-size:35px;color:var(--gold);font-weight:400}
.brand small{font-family:'DM Sans',Arial,sans-serif;font-size:8px;letter-spacing:.28em;color:var(--gold);display:block;line-height:2.1}
.top-center{font-size:10px;letter-spacing:.18em;color:var(--fade)}
.top-center b{color:var(--gold);font-weight:600}
.top-divider{padding:0 15px;color:var(--gold)}
#mobile-views-toggle{display:none}
.top-actions{display:flex;align-items:center;gap:10px}
.top-icon{border:1px solid var(--line);background:rgba(16,25,28,.39);color:var(--ink);height:33px;min-width:42px;padding:0 10px;font-size:10px;letter-spacing:.08em;transition:background .25s,border-color .25s}
.top-icon:hover{border-color:var(--gold);background:rgba(205,178,125,.14)}
.left-panel{position:absolute;z-index:4;top:107px;left:35px;bottom:80px;width:316px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(207,176,120,.4) transparent;padding:12px 14px 14px 1px;text-shadow:0 1px 10px rgba(0,0,0,.15)}
.eyebrow{color:var(--gold);font-size:10px;letter-spacing:.18em;font-weight:700;display:flex;align-items:center;gap:12px}
.dash{width:24px;height:1px;background:var(--gold)}
h1{font-size:50px;font-weight:400;line-height:.96;letter-spacing:.012em;font-family:'Cormorant Garamond',Georgia,serif;margin:26px 0 12px;white-space:nowrap}
h1 i{font-weight:400;color:var(--gold-bright)}
.uk-title{font-size:10px;letter-spacing:.21em;color:var(--gold);font-weight:600;line-height:1.5}
.lead{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;line-height:1.25;max-width:260px;margin:28px 0 24px;color:#eeeddf}
.micro-divider{width:100%;height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:15px 0 19px}
.facts{display:flex;flex-direction:column;gap:13px}
.facts>div{display:flex;flex-direction:column;gap:4px}
.facts span{font-size:9px;letter-spacing:.17em;color:var(--fade)}
.facts strong{font-size:12px;font-weight:500;color:#e2dfcf;letter-spacing:.02em}
.panel-title,.panel-section-title{font-size:10px;font-weight:700;letter-spacing:.20em;color:var(--gold)}
.panel-title{display:flex;justify-content:space-between}
.scene-views{display:flex;flex-direction:column;margin-top:10px}
.view-row{width:100%;display:flex;gap:12px;align-items:center;min-height:42px;padding:4px 1px;background:transparent;color:#dedbd1;border:0;border-bottom:1px solid rgba(207,210,201,.10);text-align:left;font-size:12px;transition:color .2s}
.view-row span:nth-child(2){flex:1}.view-row span:last-child{color:var(--fade);font-size:15px}
.view-row:hover,.view-row.active{color:var(--gold-bright)}
.view-row.active span:last-child{color:var(--gold-bright)}
.view-index{font-size:9px;color:var(--fade);font-variant-numeric:tabular-nums}
.disclaimer{margin-top:21px;border-left:2px solid var(--gold);padding-left:10px;font-size:10px;line-height:1.5;color:var(--fade);max-width:265px}
.right-panel{position:absolute;z-index:5;top:119px;right:34px;width:302px;max-height:calc(100% - 206px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(207,176,120,.35) transparent;background:linear-gradient(140deg,rgba(15,26,28,.87),rgba(16,24,27,.62));border:1px solid var(--line);backdrop-filter:blur(22px);padding:23px 23px 20px;box-shadow:0 24px 80px rgba(4,15,19,.23)}
.panel-section-title{font-size:9px;display:flex;justify-content:space-between;gap:12px;line-height:1.45}
.panel-section-title span{color:var(--fade);font-weight:500;letter-spacing:.07em;white-space:nowrap}
.detail-card{margin:19px 0 2px;min-height:205px}
.detail-count{font-size:10px;color:var(--gold);letter-spacing:.12em}
.detail-card h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;font-weight:500;line-height:1;margin:13px 0 12px;letter-spacing:.01em}
.detail-card p{font-size:11px;line-height:1.72;color:#c6c8be;margin:0 0 12px}
.detail-annotation{font-size:9px;letter-spacing:.11em;color:var(--gold)}
.separator{height:1px;background:var(--line);margin:24px 0}
.time-line,.time-label{display:flex;align-items:center;justify-content:space-between}
.time-line{margin:20px 0 8px;color:var(--fade);font-size:10px;font-variant-numeric:tabular-nums}
.time-line output{font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;color:var(--gold-bright)}
#time-slider{width:100%;appearance:none;height:3px;cursor:pointer;background:linear-gradient(90deg,#8c9fa0,#d4b27c,#a67860);outline:none;margin:10px 0}
#time-slider::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;border:2px solid #f6ddb1;background:#a68053;box-shadow:0 0 0 4px rgba(173,151,101,.2)}
#time-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;border:2px solid #f6ddb1;background:#a68053}
.time-label{font-size:8px;letter-spacing:.18em;color:var(--fade)}
.action-stack{display:flex;flex-direction:column;margin-top:13px}
.action-stack button{width:100%;min-height:36px;padding:6px 0;display:flex;gap:11px;align-items:center;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.11);background:transparent;color:#dfdfd3;font-size:11px;transition:color .2s}
.action-stack button:hover,.action-stack button.active{color:var(--gold-bright)}
.action-stack button span:first-child{color:var(--gold);width:17px;text-align:center;font-size:17px}
.action-stack button span:nth-child(2){flex:1}.action-stack button b{font-weight:400;color:var(--fade)}
.material-note{display:flex;gap:13px;align-items:flex-start}
.material-swatches{display:flex;gap:3px}.material-swatches i{width:11px;height:25px;display:block;background:#976e4d}.material-swatches i:nth-child(2){background:#5d5549}.material-swatches i:nth-child(3){background:#81867e}.material-swatches i:nth-child(4){background:#b69b6b}
.material-note p{margin:0;color:var(--fade);font-size:8px;letter-spacing:.06em;line-height:1.8}
.bottom-bar{z-index:5;position:absolute;bottom:0;left:0;right:0;min-height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 35px;background:linear-gradient(0deg,rgba(9,19,21,.94),rgba(9,19,21,.45));border-top:1px solid var(--line)}
.bottom-coordinate{color:var(--fade);font-size:9px;letter-spacing:.15em}.bottom-coordinate span{color:var(--gold);margin:0 8px}
.bottom-controls{display:flex;gap:25px}.bottom-controls button{background:none;border:0;padding:7px 0;color:#dfddd3;letter-spacing:.13em;font-size:10px}.bottom-controls button:hover{color:var(--gold)}
#view-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:75px;max-width:38%;text-align:center;font-size:9px;white-space:nowrap;letter-spacing:.15em;color:rgba(255,251,239,.75);text-shadow:0 1px 7px #111;pointer-events:none}
#hotspot-layer{position:absolute;z-index:3;inset:0;pointer-events:none}
.hotspot{position:absolute;width:28px;height:28px;transform:translate(-50%,-50%);border:1px solid rgba(240,202,135,.9);border-radius:50%;background:rgba(38,32,19,.2);box-shadow:0 0 0 5px rgba(217,180,118,.11),0 0 22px rgba(237,202,130,.28);color:var(--gold-bright);font-size:16px;pointer-events:auto;transition:transform .2s,opacity .2s;display:flex;align-items:center;justify-content:center;padding:0}
.hotspot:hover{transform:translate(-50%,-50%) scale(1.25);background:rgba(162,119,61,.35)}
.hotspot::after{content:attr(data-label);position:absolute;top:-9px;left:29px;color:#f0e8d1;font-size:10px;white-space:nowrap;font-weight:600;opacity:0;transform:translateY(2px);pointer-events:none;transition:opacity .2s,transform .2s;text-shadow:0 1px 6px #111}
.hotspot:hover::after,.hotspot:focus-visible::after{opacity:1;transform:translateY(0)}
.hotspot[hidden]{display:none}
#toast{position:absolute;z-index:20;bottom:92px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 22px;background:rgba(17,28,30,.94);border:1px solid rgba(225,196,141,.48);color:var(--gold-bright);font-size:11px;letter-spacing:.09em;transition:opacity .3s,transform .3s;max-width:85%;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:absolute;z-index:40;inset:0;display:flex;justify-content:center;align-items:center;background:rgba(6,17,21,.80);backdrop-filter:blur(11px);padding:24px}
.modal.hidden{display:none}.modal-body{max-width:540px;width:100%;padding:44px;background:#1b2a2b;border:1px solid rgba(215,183,126,.49);position:relative;box-shadow:0 30px 130px rgba(0,0,0,.7)}
.modal-body h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:35px;font-weight:500;line-height:1.15;margin:16px 0 20px}
.modal-body p{color:#d0d1c6;font-size:13px;line-height:1.7}
.modal-small{font-size:11px!important;color:#a9afa4!important}
.modal-body a{font-size:10px;letter-spacing:.1em;color:var(--gold);text-decoration:none}
.modal-close{position:absolute;top:14px;right:19px;border:0;background:none;color:var(--ink);font-size:27px}
@media(max-width:1370px){.left-panel{left:23px;width:273px}.right-panel{right:22px;width:275px;padding:18px}.topbar{padding:0 23px}h1{font-size:43px}.bottom-bar{padding:0 23px}.lead{font-size:19px}}
@media(max-height:800px) and (min-width:860px){.left-panel{top:87px}.right-panel{top:91px;max-height:calc(100% - 157px)}.separator{margin:16px 0}.topbar{height:72px}.lead{margin:18px 0}.detail-card{min-height:170px}.detail-card h2{margin:8px 0}.bottom-bar{min-height:50px}#view-hint{bottom:55px}}
@media(max-width:1050px){.top-center{display:none}.left-panel{width:255px}.right-panel{width:248px}.brand{font-size:19px}.left-panel h1{font-size:38px}.lead{font-size:19px}.bottom-coordinate{display:none}.bottom-bar{justify-content:center}.right-panel{padding:17px}.detail-card h2{font-size:25px}}
@media(max-width:760px){#mobile-views-toggle{display:block}.left-panel.mobile-open{z-index:19;background:rgba(14,26,27,.95);width:270px;padding:16px;border:1px solid var(--line);backdrop-filter:blur(15px);box-shadow:0 10px 45px #0e171a}.left-panel.mobile-open .scene-views,.left-panel.mobile-open .panel-title{display:flex;pointer-events:auto}.left-panel.mobile-open .scene-views{flex-direction:column}.left-panel.mobile-open .panel-title{margin-top:15px}.left-panel.mobile-open .view-row{pointer-events:auto}html,body,#app{height:100dvh}.topbar{height:61px;padding:0 12px}.brand{font-size:15px;gap:7px}.brand-mark{font-size:27px}.brand small{font-size:6px}.top-actions{gap:5px}.top-icon{height:31px;min-width:31px;padding:0 6px;font-size:9px}.left-panel{top:75px;left:14px;width:calc(100% - 28px);height:auto;bottom:auto;padding:0;pointer-events:none;overflow:visible}.left-panel>*{pointer-events:none}.left-panel .eyebrow{font-size:8px}.left-panel h1{margin:9px 0 4px;font-size:35px}.left-panel .uk-title{font-size:8px}.left-panel .lead,.left-panel .micro-divider,.left-panel .facts,.left-panel .panel-title,.left-panel .scene-views,.left-panel .disclaimer{display:none}.ambient-vignette{background:linear-gradient(180deg,rgba(9,18,20,.45),transparent 45%,rgba(8,19,19,.35))}.right-panel{top:auto;bottom:53px;left:8px;right:8px;width:auto;max-height:clamp(145px,31dvh,264px);display:grid;grid-template-columns:1.15fr 1fr;column-gap:13px;row-gap:0;padding:13px 14px;border-color:rgba(228,210,178,.28);background:rgba(13,23,26,.86)}.right-panel>.panel-section-title:first-child{grid-column:1;grid-row:1}.detail-card{grid-column:1;grid-row:2;margin:7px 0 0;min-height:0}.detail-card h2{font-size:22px;margin:6px 0}.detail-card p{font-size:10px;line-height:1.4;margin:0}.detail-annotation{font-size:7px;line-height:1.3;display:block;margin:6px 0}.right-panel>.separator{display:none}.right-panel>.panel-section-title:nth-child(4){grid-column:2;grid-row:1}.time-line{grid-column:2;grid-row:2;margin:0;align-self:start}.time-line output{font-size:20px}.right-panel #time-slider{grid-column:2;grid-row:3;margin:0 0 8px}.time-label{grid-column:2;grid-row:4}.right-panel>.panel-section-title:nth-child(9){grid-column:2;grid-row:5;margin-top:10px}.action-stack{grid-column:2;grid-row:6;margin:4px 0 0}.action-stack button{min-height:29px;font-size:9px;gap:6px}.action-stack button span:first-child{font-size:14px;width:13px}.material-note{display:none}.bottom-bar{height:53px;min-height:53px;padding:0 10px}.bottom-controls{justify-content:space-between;gap:7px;width:100%}.bottom-controls button{font-size:9px;letter-spacing:.04em}#view-hint{bottom:calc(31dvh + 74px);font-size:8px;max-width:95%;white-space:normal;width:90%}.hotspot{width:24px;height:24px}.hotspot::after{display:none}}
@media(max-width:420px){.right-panel{grid-template-columns:1fr 1fr}.detail-card p{font-size:9px}.detail-card h2{font-size:20px}.panel-section-title{font-size:8px}.right-panel{max-height:34dvh}#view-hint{bottom:calc(34dvh + 75px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}