:root {
  color-scheme: dark;
  --paper:#eee5d6;--muted:#a9ada6;--dim:#7b8581;--gold:#e4b879;--orange:#db754a;
  --panel:#101b20;--panel2:#172328;--edge:rgba(245,235,213,.14);
  font-family: 'Avenir Next',Avenir,'Segoe UI',Helvetica,Arial,sans-serif;
  font-synthesis:none; font-optical-sizing:auto;
}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0;min-height:490px;}
body{overflow:hidden;background:#172429;color:var(--paper)}
button,input,a{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
button:disabled{opacity:.35;cursor:default}
[hidden]{display:none!important}
.museum-app{position:relative;isolation:isolate;overflow:hidden;background:#8c948c}
.viewport{position:absolute;inset:0;overflow:hidden}
.world-canvas{display:block;width:100%;height:100%;touch-action:none}
.grade-overlay{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(12,24,28,.83) 0%,rgba(13,26,30,.52) 21%,transparent 42%,transparent 61%,rgba(10,22,27,.44) 78%,rgba(8,18,23,.82) 100%),linear-gradient(0deg,rgba(13,24,29,.57),transparent 17%,transparent 81%,rgba(8,21,25,.28))}
.topbar{position:absolute;z-index:12;top:0;left:0;right:0;height:83px;display:flex;align-items:center;justify-content:space-between;padding:0 37px;border-bottom:1px solid rgba(245,231,211,.17);background:linear-gradient(180deg,rgba(13,26,29,.68),rgba(13,26,29,0));}
.identity{display:flex;align-items:center;gap:12px;color:var(--paper);text-decoration:none;flex-shrink:0}
.identity-mark{width:43px;height:43px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font:italic 30px/1 Georgia,serif;color:var(--paper);position:relative}
.identity-mark span{font:700 8px/1 'Segoe UI',sans-serif;position:absolute;bottom:3px;right:3px;letter-spacing:0}
.identity-text{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.identity-text strong{font-size:11px;letter-spacing:.22em;font-weight:750}
.identity-text small{font-size:8px;letter-spacing:.23em;color:var(--muted)}
.topbar-center{display:flex;gap:18px;align-items:center;color:#dfd0ba;font-size:9px;letter-spacing:.22em;white-space:nowrap}
.topbar-line{width:22px;height:1px;background:rgba(232,206,169,.52)}
.topbar-right{font-size:9px;letter-spacing:.17em;display:flex;align-items:center;gap:11px;white-space:nowrap;color:#eadcc9}
.live-dot{background:#c2d5bd;width:5px;height:5px;border-radius:50%;box-shadow:0 0 0 4px rgba(194,213,189,.1)}
.topbar-seed{margin-left:9px;padding:8px 11px;background:rgba(13,26,29,.55);border:1px solid var(--edge);color:var(--dim)}
.topbar-seed b{color:var(--paper);font-weight:650;margin-left:3px}
.left-shell{position:absolute;z-index:6;top:calc(50% - 248px);left:clamp(26px,3.3vw,64px);width:min(380px,28vw);max-height:calc(100% - 155px);overflow-y:auto;scrollbar-width:none}
.left-shell::-webkit-scrollbar{display:none}
.hero-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.21em;color:var(--gold);padding:0 0 17px;border-bottom:1px solid rgba(235,226,210,.28)}
.hero-index{color:var(--muted);font-size:9px}
.eyebrow{font-size:9px;letter-spacing:.21em;color:#e2d6c8;margin:34px 0 13px}
h1{margin:0;color:var(--paper);font-family:Georgia,'Iowan Old Style',Cambria,serif;font-size:clamp(44px,4.1vw,72px);font-weight:400;letter-spacing:-.076em;line-height:.92;white-space:nowrap;text-shadow:0 3px 32px rgba(0,0,0,.09)}
h1 em{font-weight:400;color:#f0d6b1;letter-spacing:-.071em}
.title-stop{color:var(--orange)}
.hero-copy{font-size:13px;line-height:1.88;letter-spacing:.006em;color:#cbd0c7;margin:25px 0 27px;max-width:348px}
.hero-rule{width:30px;height:2px;background:var(--gold);margin-bottom:27px}
.facts{display:flex;flex-direction:column;gap:13px}
.facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(244,232,211,.13)}
.facts span{font-size:9px;letter-spacing:.15em;color:var(--muted)}
.facts strong{font-size:11px;font-weight:550;text-align:right;color:#f1e9d9}
.hero-button{width:100%;margin-top:26px;padding:0 17px 0 17px;height:54px;border:1px solid rgba(245,223,182,.75);background:var(--gold);color:#182326;display:flex;align-items:center;gap:16px;transition:background .25s,transform .25s}
.hero-button:hover{background:#f1d2a7;transform:translateY(-1px)}
.hero-button span:nth-child(2){font-size:10px;font-weight:750;letter-spacing:.13em;flex:1;text-align:left}
.play-symbol{font-size:11px;letter-spacing:0}
.hero-button-arrow{font-size:19px}
.context-warning{font-size:9px;line-height:1.7;color:#aeb5ad;margin-top:16px;max-width:340px}
.context-warning span{color:var(--gold);margin-right:7px}
.control-panel{position:absolute;z-index:8;top:99px;bottom:57px;right:22px;width:342px;background:rgba(12,23,28,.91);border:1px solid rgba(245,231,212,.2);box-shadow:0 18px 75px rgba(0,0,0,.27);padding:0 20px 18px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5d685e transparent;backdrop-filter:blur(21px)}
.panel-cap{display:flex;align-items:center;justify-content:space-between;height:57px;border-bottom:1px solid var(--edge)}
.panel-heading{font-size:9px;letter-spacing:.19em;color:var(--paper);display:flex;gap:11px;align-items:center;font-weight:750}
.tiny-square{width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.icon-close{display:none;border:0;background:transparent;color:var(--paper);font-size:24px}
.panel-title{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 15px;gap:10px}
.panel-title>span{font:19px/1.2 Georgia,serif;white-space:nowrap;color:#f0dfc7;letter-spacing:-.025em}
.panel-title small{font-size:7px;letter-spacing:.10em;color:var(--dim);text-align:right}
.mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mode{background:rgba(234,227,210,.035);border:1px solid rgba(245,232,212,.13);height:43px;color:#afb8b2;font-size:8px;font-weight:650;letter-spacing:.06em;white-space:nowrap;padding:0 4px;transition:.2s}
.mode span{font-size:15px;display:inline-block;vertical-align:-1px;margin-right:4px;font-weight:400}
.mode.active{background:#e7c38c;border-color:#e7c38c;color:#1c2a2b}
.mode:not(.active):hover{border-color:rgba(232,196,149,.55);color:#fff}
.mode-description{font-size:10px;line-height:1.65;min-height:47px;color:#b9c1bb;margin:12px 0 8px}
.load-control{padding:11px 13px 7px;background:rgba(228,188,132,.09);border:1px solid rgba(231,189,133,.21);margin:7px 0 8px}
.load-control p{font-size:9px;line-height:1.55;color:#b9aa93;margin:5px 0 1px}
.section-title{margin:21px 0 16px;padding-top:17px;border-top:1px solid var(--edge);display:flex;justify-content:space-between;font-size:9px;letter-spacing:.18em;color:var(--gold);font-weight:700}
.section-title small{color:var(--dim);font-size:9px;font-weight:450}
.control-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.control-label-row label{font-size:9px;letter-spacing:.11em;color:#e8e2d4}
.value-output{font-size:12px;color:#e9c68b;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:2px;border:0;outline:none;background:linear-gradient(90deg,#e5bb82,rgba(234,226,212,.32));cursor:pointer;margin:7px 0 8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#efcf9d;border:3px solid #24343a;box-shadow:0 0 0 1px #dfad73}
input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#e8c38d;border:1px solid #21343c}
.range-captions{display:flex;justify-content:space-between;color:#8d9690;font-size:8px;letter-spacing:.1em;padding-bottom:2px}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid rgba(241,226,206,.085)}
.toggle-row>div{display:flex;flex-direction:column;gap:4px}
.toggle-row strong{font-size:11px;color:#eee9de;font-weight:550}
.toggle-row small{font-size:9px;color:#82908b}
.switch{display:inline-block;position:relative;width:34px;height:19px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;z-index:2}
.switch span{position:absolute;inset:0;background:#415057;border-radius:12px;transition:.2s}
.switch span:before{content:'';position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#ccd0cc;transition:transform .2s}
.switch input:checked+span{background:#cfa777}
.switch input:checked+span:before{background:#18272c;transform:translateX(15px)}
.feature-list{display:flex;flex-direction:column}
.feature-item{background:none;border:0;border-bottom:1px solid rgba(241,226,206,.09);display:flex;align-items:center;text-align:left;padding:10px 3px;gap:12px;color:#c4cdc3;transition:color .2s,background .2s}
.feature-item:hover,.feature-item.active{color:#f4d6ae;background:rgba(232,200,157,.07)}
.feature-index{font-size:9px;font-family:ui-monospace,monospace;color:#c7ab82;width:17px}
.feature-name{font-size:11px;flex:1}
.feature-arrow{font-size:14px;color:#6c8684}
.feature-item.active .feature-arrow{color:#e8c38d}
.selected-info{margin:16px 0;padding:14px 13px 14px;border-left:2px solid var(--gold);background:rgba(228,201,161,.075);min-height:115px}
.selected-kicker{display:block;color:#eac38e;font-size:8px;letter-spacing:.17em;margin-bottom:8px}
.selected-info strong{display:block;color:#f4e7d6;font:18px/1.25 Georgia,serif;font-weight:400}
.selected-subtitle{font-size:10px;margin-top:5px;color:#c9ad88}
.selected-info p{font-size:10px;line-height:1.7;color:#b6c0b9;margin:8px 0 0}
.selected-info .selected-caveat{color:#9caaa5;border-top:1px solid rgba(245,229,206,.12);padding-top:8px;margin-top:10px;font-style:italic}
.utility-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.utility-row button{background:rgba(241,230,205,.035);border:1px solid rgba(232,215,189,.24);color:#e8dfd1;height:39px;font-size:9px;letter-spacing:.12em}
.utility-row button:hover{background:rgba(236,206,157,.14)}
.utility-row button span{font-size:16px;margin-right:7px;vertical-align:-2px}
.footer-controls{display:flex;justify-content:space-between;align-items:center;margin-top:15px;gap:7px}
.footer-controls button{border:0;background:none;color:#acb7b1;font-size:8px;letter-spacing:.1em;padding:7px 0}
.footer-controls button:hover{color:#f5d6a4}
#quality-button{color:#bfcda8}
.bottom-bar{position:absolute;z-index:9;bottom:0;left:0;right:0;height:58px;border-top:1px solid rgba(246,229,203,.22);display:flex;justify-content:space-between;align-items:center;padding:0 37px;background:linear-gradient(0deg,rgba(10,20,24,.94),rgba(11,23,28,.68));gap:14px}
.bottom-instructions{display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:.10em;color:#bac4bf;white-space:nowrap}
.bottom-instructions strong{font-size:9px;font-weight:700;color:#f4dfc0}
.orbit-icon{font-size:23px;color:#d6ad72}
.bottom-center{font:italic 12px Georgia,serif;color:#c9ad87;white-space:nowrap}
.bottom-status{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.12em;color:#aab6af;white-space:nowrap}
.fps{font-family:ui-monospace,monospace;color:#d8ccae}
.bottom-separator{height:18px;width:1px;background:rgba(241,226,198,.32)}
.hotspot-layer{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.hotspot-layer.hidden{display:none}
.hotspot{position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);width:35px;height:35px;padding:0;border:1px solid rgba(252,227,185,.9);border-radius:50%;background:rgba(13,26,29,.84);color:#f6e6cc;box-shadow:0 0 0 5px rgba(251,226,181,.10),0 9px 29px rgba(0,0,0,.3);backdrop-filter:blur(7px);transition:background .2s,transform .2s,border-color .2s}
.hotspot:hover,.hotspot.active{background:#e4b879;color:#1b292e;transform:translate(-50%,-50%) scale(1.14)}
.hotspot-ring{position:absolute;inset:-7px;border:1px solid rgba(245,207,151,.28);border-radius:50%;animation:hotspot-breathe 4s ease-in-out infinite}
.hotspot-index{font:600 10px ui-monospace,Consolas,monospace}
@keyframes hotspot-breathe{50%{transform:scale(1.17);opacity:.24}}
#mobile-toggle-wrapper{display:none}
.story-overlay{position:absolute;inset:0;z-index:35;display:flex;align-items:center;justify-content:center}
.story-backdrop{position:absolute;inset:0;background:rgba(8,16,18,.83);backdrop-filter:blur(17px)}
.story-modal{position:relative;width:min(590px,calc(100vw - 32px));max-height:min(85vh,840px);overflow:auto;background:#19262a;border:1px solid rgba(243,219,176,.28);box-shadow:0 20px 100px rgba(0,0,0,.5);padding:31px 39px;color:#e8e1d3}
.story-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid rgba(237,220,192,.22);font-size:9px;letter-spacing:.22em;color:#d7b789}
.story-top button{border:0;background:none;font-size:27px;color:#d3c9ba}
.story-number{display:block;font-size:9px;letter-spacing:.2em;color:#dcac77;margin-top:27px}
.story-modal h2{font:normal 43px/1.07 Georgia,serif;letter-spacing:-.045em;max-width:450px;margin:12px 0 20px}
.story-modal p{font-size:13px;line-height:1.85;color:#b9c5bf}
.story-modal p b{font-weight:650;color:#e9d9c3}
.source-heading{font-size:10px;letter-spacing:.17em;color:#edc78f;margin-top:29px;padding-top:18px;border-top:1px solid rgba(235,219,189,.2)}
.source-links{display:flex;flex-direction:column;gap:0;margin-top:13px}
.source-links a{color:#e6d9c6;text-decoration:none;font-size:11px;padding:10px 0;border-bottom:1px solid rgba(235,220,192,.10)}
.source-links a:after{content:' ↗';color:#dfaa71}
.source-links a:hover{color:#f3c98c}
.story-footer{font-size:9px;color:#7f918c;letter-spacing:.08em;margin-top:25px}
.loading-screen{position:absolute;inset:0;z-index:50;background:#121e22;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;transition:opacity .8s ease,visibility .8s}
.loading-screen.done{opacity:0;visibility:hidden;pointer-events:none}
.loading-brand{width:83px;height:83px;display:flex;align-items:center;justify-content:center;border:1px solid #bca578;font:italic 54px Georgia,serif;position:relative;color:#f0dfc9}
.loading-brand span{position:absolute;font:600 12px sans-serif;right:8px;bottom:8px}
.loading-title{font-size:14px;letter-spacing:.42em;font-weight:700;margin-top:15px}
.loading-copy{font-size:9px;letter-spacing:.21em;color:#98a7a1}
.loading-line{width:115px;height:2px;background:linear-gradient(90deg,#e9c48e 50%,#4d5855 50%);animation:loading 2s ease-in-out infinite}
@keyframes loading{50%{width:190px}}
.error-screen{position:absolute;z-index:60;inset:0;background:#18282d;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:25px}
.error-screen h2{font:normal 33px Georgia,serif}.error-screen p{max-width:480px;line-height:1.6;color:#c5bcb2}
@media(max-height:790px) and (min-width:900px){
  .left-shell{top:111px;max-height:calc(100vh - 176px)}
  .eyebrow{margin-top:20px}.hero-copy{margin:17px 0}.hero-rule{margin-bottom:18px}.facts{gap:5px}
  .hero-button{margin-top:16px}.context-warning{margin-top:10px}
}
@media(min-width:1550px){.left-shell{width:405px;top:calc(50% - 266px)}.control-panel{width:361px;right:30px}.topbar{padding:0 49px}.bottom-bar{padding:0 49px}}
@media(max-width:1250px){
  .left-shell{left:25px;width:305px}
  h1{font-size:46px}
  .hero-copy{font-size:12px}
  .control-panel{right:14px;width:322px}
  .topbar-center{display:none}
  .bottom-center{display:none}
  .bottom-instructions{font-size:8px}
}
@media(max-width:930px){
  .topbar{height:68px;padding:0 20px}
  .identity-mark{width:38px;height:38px;font-size:27px}
  .topbar-right{font-size:8px}
  .left-shell{top:89px;width:286px;left:22px;max-height:calc(100% - 150px)}
  h1{font-size:42px}
  .eyebrow{margin-top:21px}
  .control-panel{width:289px;right:13px;top:80px;bottom:54px;padding:0 15px 16px}
  .panel-title{flex-direction:column;gap:4px}
  .mode{font-size:7px}
  .panel-title small{text-align:left}
  .bottom-bar{padding:0 20px;height:54px}
  .bottom-instructions>span:nth-child(n+4){display:none}
}
@media(max-width:730px){
  html,body,#app{min-height:0}
  .topbar{height:61px;padding:0 15px}
  .identity-mark{width:34px;height:34px;font-size:25px}
  .identity-text strong{font-size:9px}.identity-text small{font-size:7px}
  .topbar-right{gap:8px}.topbar-right>span:nth-child(2){display:none}
  .topbar-seed{padding:7px 8px;margin:0}
  .grade-overlay{background:linear-gradient(180deg,rgba(9,21,26,.87) 0%,rgba(12,25,31,.42) 28%,transparent 53%,rgba(8,20,25,.24) 85%,rgba(9,18,24,.86) 100%)}
  .left-shell{top:78px;left:19px;width:min(310px,calc(100vw - 38px));max-height:42vh;overflow:hidden}
  .hero-meta{font-size:9px;padding-bottom:8px}
  .eyebrow{font-size:8px;margin:12px 0 7px}
  h1{font-size:clamp(37px,9vw,57px);line-height:.94}
  .hero-copy{font-size:10px;line-height:1.5;max-width:255px;margin:11px 0}
  .hero-rule,.facts,.context-warning{display:none}
  .hero-button{width:216px;height:40px;margin-top:13px;padding:0 11px;gap:8px}
  .hero-button span:nth-child(2){font-size:8px}
  .hero-button-arrow{font-size:16px}
  .bottom-bar{height:45px;padding:0 14px}
  .bottom-instructions{gap:8px}
  .bottom-instructions>span:nth-child(n+3){display:none}
  .bottom-status{font-size:7px;gap:8px}
  .bottom-status>span:last-child{display:none}
  #mobile-toggle-wrapper{position:absolute;display:block;right:14px;bottom:57px;z-index:16}
  #mobile-panel-button{border:1px solid rgba(239,218,182,.75);height:42px;padding:0 15px;background:#e3bd88;color:#16282b;font-size:10px;letter-spacing:.12em;font-weight:750;box-shadow:0 8px 24px rgba(0,0,0,.15)}
  #mobile-panel-button span{font-size:16px;margin-left:14px}
  .control-panel{z-index:18;top:auto;right:8px;left:8px;bottom:106px;width:auto;max-height:min(67vh,650px);border:1px solid rgba(242,226,202,.32);transform:translateY(calc(100% + 160px));opacity:0;pointer-events:none;transition:transform .35s ease,opacity .35s ease;}
  .control-panel.mobile-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .icon-close{display:block}
  .panel-title{flex-direction:row}
  .mode{font-size:8px}
  .hero-meta{max-width:260px}
  .hotspot{width:30px;height:30px}
  .story-modal{padding:24px 22px;max-height:87vh}
  .story-modal h2{font-size:35px}
  .story-modal p{font-size:12px}
}
@media(max-height:620px) and (max-width:730px){
  .left-shell{top:65px;max-height:40vh}
  .hero-meta,.hero-copy{display:none}
  .eyebrow{margin-top:4px}
  h1{font-size:39px}
  .hero-button{margin-top:11px}
  #mobile-toggle-wrapper{bottom:51px}
  .control-panel{bottom:96px;max-height:67vh}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
