:root{color-scheme:dark;--cream:#ede6d6;--muted:#a6a79d;--accent:#d9b779;--border:rgba(224,216,190,.19);--glass:rgba(16,24,22,.86);font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{background:#202b2c;color:var(--cream)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#scene{display:block;width:100vw;height:100vh;outline:none;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}#vignette{pointer-events:none;position:fixed;inset:0;background:radial-gradient(ellipse 77% 74% at 51% 41%,transparent 42%,rgba(8,16,16,.11) 75%,rgba(6,12,12,.44) 100%);z-index:1}
.topbar{position:fixed;z-index:8;top:0;left:0;right:0;height:73px;display:flex;align-items:center;justify-content:space-between;padding:0 31px;background:linear-gradient(180deg,rgba(12,21,19,.92),rgba(12,21,19,.73));border-bottom:1px solid var(--border);backdrop-filter:blur(14px)}.logo{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:700;letter-spacing:.22em}.logo small{font-size:9px;letter-spacing:.13em;font-weight:500;color:#a9b0aa}.brand-mark{border:1px solid var(--accent);width:34px;height:34px;display:flex;justify-content:center;align-items:center;color:var(--accent);font-size:22px;transform:rotate(45deg)}.brand-mark::first-letter{transform:rotate(-45deg)}.top-center{font-size:9.5px;letter-spacing:.23em;color:#d3d3c6;white-space:nowrap}.top-center span{color:var(--accent);padding:0 11px}.icon-btn{height:33px;width:33px;border:1px solid var(--border);color:var(--cream);background:rgba(255,255,255,.03);border-radius:50%;font-size:15px}
.narrative-panel{position:fixed;z-index:7;top:73px;bottom:39px;left:0;width:337px;padding:35px 29px 22px;background:linear-gradient(90deg,rgba(9,19,18,.965),rgba(12,24,22,.87));border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;box-shadow:10px 0 60px rgba(12,18,17,.09);scrollbar-width:thin}.side-kicker,.eyebrow,.section-caption,.fact-label,.heritage-tag,.card-top,.range-label,.range-extremes,.controls-foot,.footerbar,.scene-compass,.nav-numeral{font-size:9px;letter-spacing:.13em;font-weight:700}.side-kicker{color:#d0c4a6;display:flex;align-items:center;gap:8px;margin-bottom:26px;white-space:nowrap}.dot{height:5px;width:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 11px var(--accent)}.narrative-panel h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:51px;letter-spacing:-.062em;line-height:.95;margin:0;color:#f7f1e4}.narrative-panel h1 em{font-weight:400;color:var(--accent)}.period{color:var(--accent)}.lead{font-size:12.4px;line-height:1.9;color:#bec4ba;margin:22px 0 24px;max-width:268px}.thin-rule{height:1px;background:var(--border);margin:0 0 20px}.section-caption{color:#b5ae94;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.section-caption span{color:#858d85}.nav-items{display:flex;flex-direction:column;gap:3px}.nav-item{border:none;color:#c9cec4;text-align:left;display:flex;align-items:center;gap:13px;padding:13px 7px;background:transparent;width:100%;transition:background .2s,color .2s;border-radius:3px;position:relative}.nav-item:hover,.nav-item.active{color:#fff5d9;background:rgba(211,182,124,.11)}.nav-item.active:before{position:absolute;content:"";height:60%;width:2px;background:var(--accent);left:-7px;top:20%}.nav-numeral{color:var(--accent);opacity:.88;font-size:10px;font-family:Georgia,serif;font-weight:400}.nav-title{font-size:10px;letter-spacing:.11em;font-weight:600;flex:1}.nav-arr{font-size:15px;color:#a99e7e;opacity:0;transform:translateX(-4px);transition:.2s}.nav-item:hover .nav-arr,.nav-item.active .nav-arr{opacity:1;transform:none}.bottom-rule{margin:18px 0 12px}.heritage-tag{margin:0;color:#919d91;font-size:8px;line-height:1.6;letter-spacing:.08em}.tiny-sigil{color:var(--accent);font-size:15px;margin-right:6px}
.scene-compass{z-index:4;position:fixed;left:354px;top:92px;display:flex;align-items:center;gap:11px;color:#35403b;letter-spacing:.17em;text-shadow:0 1px 6px rgba(255,255,255,.7)}.compass-diamond{width:24px;height:24px;border:1px solid rgba(42,54,44,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px}.scene-compass span{font-size:9px}
#hotspot-layer{position:fixed;inset:0;z-index:5;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:8px;border:none;background:transparent;color:#f9f2e2;white-space:nowrap;padding:0;transition:opacity .15s;filter:drop-shadow(0 2px 7px #121b17)}.hotspot-dot{height:31px;width:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(24,32,27,.78);border:1px solid #e4bf7d;font-family:Georgia,serif;font-size:10px;transition:.15s;box-shadow:0 0 0 5px rgba(209,170,104,.11)}.hotspot-title{font-size:8px;letter-spacing:.12em;font-weight:700;color:#fff5df;text-shadow:0 1px 4px rgba(0,0,0,.9);opacity:0;transform:translateX(-5px);transition:.2s;background:rgba(22,29,25,.79);padding:8px 9px;border:1px solid var(--border)}.hotspot:hover .hotspot-title,.hotspot.active .hotspot-title{opacity:1;transform:none}.hotspot:hover .hotspot-dot,.hotspot.active .hotspot-dot{background:#d0a967;color:#17231d}
.story-card{position:fixed;z-index:6;right:26px;top:92px;width:320px;max-height:calc(100vh - 580px);min-height:0;overflow-y:auto;padding:22px 24px 21px;background:rgba(16,27,25,.9);border:1px solid rgba(221,196,153,.28);box-shadow:0 20px 65px rgba(2,13,13,.23);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transform:translateY(-10px);transition:.3s;scrollbar-width:thin}.story-card.open{opacity:1;pointer-events:auto;transform:none}.card-top{color:var(--accent);display:flex;align-items:center;justify-content:space-between}.card-close{border:none;background:transparent;color:var(--cream);font-size:24px;line-height:1}.story-line{height:1px;background:var(--border);margin:12px 0 14px}.story-card h2{font:normal 25px/1.13 Georgia,serif;margin:0 0 10px}.story-card p{font-size:11px;color:#bdc5bd;line-height:1.66;margin:0 0 13px}.fact-label{color:#e2bc7c;font-size:8px;margin:12px 0 5px}.text-button{margin-top:4px;background:transparent;border:none;padding:8px 0;color:#eac994;border-bottom:1px solid #af8d5c;font-size:9px;letter-spacing:.1em;font-weight:700}.text-button span{font-size:15px;margin-left:7px}
.control-panel{position:fixed;z-index:6;right:26px;bottom:65px;width:320px;padding:20px 23px 13px;color:#ebe8dd;background:rgba(15,25,23,.94);border:1px solid rgba(217,192,151,.30);box-shadow:0 20px 67px rgba(7,17,16,.35);backdrop-filter:blur(18px);scrollbar-width:thin}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.panel-heading .eyebrow{font-size:8px;color:var(--accent);letter-spacing:.13em}.panel-heading h2{font:normal 22px/1 Georgia,serif;margin:7px 0 0}.small-icon{width:27px;height:27px;border:1px solid var(--border);background:transparent;color:var(--cream);font-size:19px}.range-label{display:flex;justify-content:space-between;align-items:center;color:#c4c8bd;letter-spacing:.11em;font-size:9px}.range-label output{color:#e9c78c;font-size:10px;font-weight:600}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:linear-gradient(90deg,#c99d5a,#5c635e);margin:20px 0 13px;cursor:pointer;border-radius:1px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:13px;width:13px;border:3px solid #d4b77c;background:#14211d;border-radius:100%;box-shadow:0 0 0 4px rgba(212,183,124,.16)}input[type=range]::-moz-range-thumb{height:9px;width:9px;border:3px solid #d4b77c;background:#14211d;border-radius:100%}.range-extremes{display:flex;justify-content:space-between;font-size:8px;color:#8e998f}.control-divider{height:1px;background:var(--border);margin:16px 0}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:13px 0}.toggle-row b{display:block;font-size:11px;font-weight:500;color:#e2e6d9}.toggle-row small{font-size:9px;color:#99a59a;display:block;margin-top:4px}.switch{position:relative;flex:none;width:31px;height:17px;display:block}.switch input{position:absolute;inset:0;opacity:0;z-index:2;cursor:pointer}.switch span{position:absolute;inset:0;background:#434d45;border-radius:20px;border:1px solid #6a7665;transition:.2s}.switch span:after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#d1cfc5;transition:.2s}.switch input:checked+span{background:#8c744e;border-color:#e1bc78}.switch input:checked+span:after{transform:translateX(14px);background:#f7dc9d}.wide-btn{position:relative;display:flex;align-items:center;gap:12px;justify-content:flex-start;width:100%;padding:13px 15px;border:1px solid #927a52;color:#eed4a1;background:rgba(211,172,100,.09);font-size:9px;letter-spacing:.1em;font-weight:700;transition:.2s;margin-top:17px;text-align:left;flex-wrap:wrap}.wide-btn:hover{background:rgba(211,172,100,.19)}.wide-btn>span:first-child{font-size:14px}.wide-btn .arrow{margin-left:auto;font-size:16px}.motif-text{flex:1 1 100%;text-align:center;display:block;color:#a9ae9c;font-size:8px;letter-spacing:.09em;padding-top:5px}.controls-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;color:#929c91;font-size:7px;letter-spacing:.09em}.controls-foot #fps{color:#c1b696}
.footerbar{position:fixed;z-index:8;bottom:0;left:0;right:0;height:39px;background:rgba(13,22,20,.94);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 30px;color:#9ca69b;letter-spacing:.10em;font-size:8px}.footer-actions{display:flex;gap:14px;align-items:center}.footer-actions button{background:none;border:none;color:#dec496;font-size:8px;letter-spacing:.13em;padding:8px 4px}.footer-actions button:hover{color:#fff}.sep{color:#575f56}
#loading{position:fixed;inset:0;z-index:20;background:#13211c;display:flex;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}#loading.done{opacity:0;visibility:hidden;pointer-events:none}.loading-inner{text-align:center}.loading-ornament{font-size:54px;color:#c8a871;animation:rotate 14s linear infinite}.loading-inner .eyebrow{color:#9eaa9e;text-transform:uppercase;margin:30px 0 12px}.loading-inner h1{font:normal 71px Georgia,serif;letter-spacing:.23em;margin:0 0 20px;color:#eee5d2}.loading-rule{height:1px;width:180px;background:#485a4e;margin:0 auto;overflow:hidden}.loading-rule span{display:block;width:36%;height:100%;background:#ebc17d;animation:sweep 2s infinite}.loading-sub{font-size:11px;color:#adb6a7;letter-spacing:.12em;margin:22px 0}@keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(430%)}}@keyframes rotate{to{transform:rotate(360deg)}}
.modal{position:fixed;inset:0;z-index:15;display:flex;align-items:center;justify-content:center}.modal.hidden{display:none}.modal-shade{position:absolute;inset:0;background:rgba(7,17,15,.78);backdrop-filter:blur(7px)}.modal-window{z-index:1;position:relative;width:min(590px,calc(100vw - 32px));max-height:89vh;overflow-y:auto;background:#192923;border:1px solid #846f4a;padding:40px 43px 30px;box-shadow:0 35px 120px rgba(0,0,0,.48)}.modal-close{position:absolute;right:16px;top:14px;background:transparent;border:0;color:var(--cream);font-size:26px}.modal-window .eyebrow{color:var(--accent)}.modal-window h2{font:normal 37px/1.1 Georgia,serif;margin:12px 0 14px}.modal-window>p,.help-grid p{line-height:1.7;color:#becbbd;font-size:12px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 25px;margin:27px 0}.help-grid strong{font-size:9px;letter-spacing:.13em;color:#e3c08c}.help-grid p{margin:7px 0}
@media(max-height:850px) and (min-width:901px){.narrative-panel{padding-top:19px}.narrative-panel h1{font-size:40px}.side-kicker{margin-bottom:19px}.lead{margin:15px 0}.nav-item{padding:9px 7px}.control-panel{padding:14px 19px 9px;bottom:48px}.panel-heading{margin-bottom:13px}.control-divider{margin:12px 0}.toggle-row{margin:10px 0}.story-card{max-height:calc(100vh - 523px)} }
@media(min-width:1400px){.narrative-panel{width:363px;padding-left:40px;padding-right:36px}.scene-compass{left:382px}.story-card,.control-panel{right:37px}}
@media(max-width:1090px){.narrative-panel{width:277px;padding:25px 19px 17px}.narrative-panel h1{font-size:44px}.nav-item{padding:10px 4px}.scene-compass{left:294px}.control-panel,.story-card{width:287px;right:14px}.control-panel{padding:17px 18px}.top-center{display:none}}
@media(max-width:760px){.topbar{height:56px;padding:0 15px}.logo{font-size:13px}.brand-mark{height:27px;width:27px;font-size:18px}.narrative-panel{top:56px;bottom:auto;width:100%;max-height:213px;padding:13px 16px 10px;background:linear-gradient(180deg,rgba(11,21,19,.94),rgba(14,26,21,.77));border-right:0;border-bottom:1px solid var(--border);overflow:hidden}.side-kicker{margin:0 0 9px;font-size:7px}.narrative-panel h1{font-size:27px;line-height:1.0;letter-spacing:-.03em;white-space:nowrap}.narrative-panel h1 br{display:none}.narrative-panel h1 br:after{content:' '}.narrative-panel h1 em{margin:0 6px}.lead{font-size:10px;margin:8px 0 8px;line-height:1.5;max-width:100%}.thin-rule,.section-caption,.heritage-tag{display:none}.nav-items{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none;padding-bottom:3px}.nav-items::-webkit-scrollbar{display:none}.nav-item{width:auto;white-space:nowrap;flex:none;border:1px solid rgba(215,193,149,.25);padding:8px}.nav-item.active:before{display:none}.nav-title{font-size:8px}.nav-arr{display:none}.scene-compass{top:222px;left:16px;font-size:8px}.hotspot-title{display:none}.hotspot-dot{height:27px;width:27px;font-size:9px}.control-panel{right:9px;left:9px;bottom:42px;width:auto;max-height:34vh;overflow-y:auto;padding:12px 15px 9px}.panel-heading{margin-bottom:12px}.panel-heading h2{font-size:18px}.control-divider{margin:8px 0}.toggle-row{margin:8px 0}.wide-btn{margin-top:8px;padding:8px}.range-label,.toggle-row b{font-size:9px}.range-extremes,.controls-foot{font-size:7px}.story-card{right:9px;left:9px;top:auto;bottom:calc(34vh + 53px);width:auto;max-height:22vh;padding:13px 15px;overflow-y:auto}.story-card h2{font-size:18px}.story-card p{font-size:10px;margin:0 0 6px}.fact-label{margin:8px 0 3px}.footerbar{height:34px;padding:0 12px}.footerbar>span:first-child{display:none}.footer-actions{gap:8px}.footer-actions button{font-size:8px}.modal-window{padding:25px}.modal-window h2{font-size:28px}}
@media(max-width:430px){.narrative-panel{max-height:203px}.narrative-panel h1{font-size:25px}.lead{font-size:9px}.control-panel{max-height:32vh}.story-card{bottom:calc(32vh + 52px);max-height:22vh}.help-grid{grid-template-columns:1fr;gap:8px}.loading-inner h1{font-size:49px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001s!important;transition-duration:.001s!important}}