:root{color-scheme:dark;--bg:#171d1e;--pane:#1d2526;--pane2:#222b2b;--border:rgba(219,225,211,.095);--muted:#91a19d;--text:#e9e9df;--accent:#e1a672;--accent2:#bd7858;--mid:#b5c0b9;--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--font);background:var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #e7b17f;outline-offset:3px}[hidden]{display:none!important}
.app{min-height:100svh;display:flex;flex-direction:column}.topbar{height:75px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 29px;border-bottom:1px solid var(--border);background:#192121;gap:20px}.brand{display:flex;align-items:center;gap:12px;min-width:235px}.brand-symbol{display:flex;width:41px;height:41px;border:1px solid #bca786;color:#ecc39c;align-items:center;justify-content:center;font-family:var(--serif);font-size:29px;line-height:1}.brand-symbol span{color:#ab7450}.brand-word{letter-spacing:.16em;font-weight:700;font-size:13px;line-height:1.6}.brand-word small{display:block;font-size:9px;color:var(--accent);letter-spacing:.18em;font-weight:500}.top-meta{font-size:9px;color:#a8b6af;letter-spacing:.18em;display:flex;align-items:center;gap:14px}.live-dot{width:6px;height:6px;background:#b9b174;border-radius:50%;box-shadow:0 0 12px #b4ae64}.edition{border:1px solid var(--border);padding:8px 10px;margin-left:8px;color:#bdbba9}.top-actions{display:flex;gap:10px;align-items:center}.text-button,.icon-button{background:transparent;border:1px solid var(--border);color:var(--text);height:34px}.text-button{font-size:11px;letter-spacing:.1em;padding:0 15px}.text-button span{color:#71807b}.icon-button{width:34px;border-radius:50%;font-size:16px;font-family:var(--serif)}.text-button:hover,.icon-button:hover{border-color:var(--accent)}
.workspace{display:grid;grid-template-columns:310px minmax(0,1fr) 297px;flex:1;min-height:calc(100svh - 75px);max-height:calc(100svh - 75px)}.sidebar{background:var(--pane);display:flex;flex-direction:column;min-height:0;overflow-y:auto}.left-panel{border-right:1px solid var(--border)}.right-panel{border-left:1px solid var(--border);background:#1e2727}.eyebrow-section{padding:43px 27px 26px}.overline{display:flex;align-items:center;gap:9px;letter-spacing:.175em;font-size:9px;color:var(--accent);font-weight:700}.overline .line{display:inline-block;height:1px;width:17px;background:var(--accent)}h1{font-family:var(--serif);font-weight:400;font-size:48px;letter-spacing:-.055em;line-height:.99;margin:29px 0 21px}h1 em{font-style:italic;color:#e5b186}h1 .period{color:var(--accent)}.intro{font-size:11.5px;line-height:1.8;color:#aeb7b1;max-width:250px}.historic-label{display:inline-flex;gap:8px;align-items:center;padding-top:15px;font-size:9px;letter-spacing:.045em;color:#b3c3bd}.diamond{font-size:8px;color:var(--accent)}.panel-section{border-top:1px solid var(--border);padding:24px 26px}.section-head{display:flex;align-items:center;gap:13px;margin-bottom:20px}.section-head>span{color:var(--accent);font-size:10px;font-family:var(--serif)}.section-head h2{font-size:9px;letter-spacing:.14em;font-weight:700;margin:0;color:#d7dcd5}.focus-list{display:flex;flex-direction:column}.focus-item{display:flex;align-items:center;gap:14px;width:100%;border:0;background:transparent;border-bottom:1px solid var(--border);color:#b8c4bd;text-align:left;padding:12px 3px;font-size:11px}.focus-index{color:#667a76;font-family:var(--serif);font-size:11px}.focus-item.selected,.focus-item:hover{color:#f1d0ad}.focus-item.selected .focus-index{color:var(--accent)}.focus-arrow{margin-left:auto;color:#7d8883;font-size:15px}.tour-button{width:100%;height:41px;background:var(--accent);color:#2c2926;border:0;display:flex;align-items:center;gap:10px;justify-content:center;margin-top:22px;padding:0 14px;font-size:10px;font-weight:800;letter-spacing:.085em;transition:background .2s}.tour-button:hover{background:#f2bd8d}.play-icon{font-size:9px}.tour-time{font-size:8px;letter-spacing:.02em;margin-left:auto;opacity:.7;white-space:nowrap}.environment{padding-top:22px}.slider-heading,.mechanic-head{display:flex;align-items:center;justify-content:space-between;color:#aebdb6;font-size:11px;gap:10px}.slider-heading strong,.mechanic-head strong{font-size:12px;font-weight:600;color:#eed1a9;font-variant-numeric:tabular-nums}.range-input{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:#4b5c58;margin:19px 0 8px;cursor:pointer;accent-color:var(--accent)}.range-input::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid #26302d;box-shadow:0 0 0 1px var(--accent)}.range-input::-moz-range-thumb{background:var(--accent);border:1px solid #26302d;border-radius:50%;width:12px;height:12px}.range-ends{display:flex;justify-content:space-between;font-size:9px;color:#80928a;letter-spacing:.04em}.setting-row{margin-top:23px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#b9c5be;gap:9px}.segmented{display:flex;border:1px solid #46534e}.segmented button{border:0;color:#a4b1aa;background:transparent;font-size:10px;padding:7px 13px}.segmented button.active{background:#b99a78;color:#172020}.toggle{width:31px;height:17px;appearance:none;border:1px solid #546660;border-radius:20px;background:#34423d;position:relative;cursor:pointer;flex-shrink:0}.toggle:before{content:"";position:absolute;width:11px;height:11px;border-radius:50%;left:2px;top:2px;background:#a8b5ac;transition:transform .15s}.toggle:checked{background:#a78260;border-color:#cfaa84}.toggle:checked:before{transform:translateX(14px);background:#f3dfc5}.side-footer{font-size:8px;letter-spacing:.13em;color:#72847b;border-top:1px solid var(--border);display:flex;justify-content:space-between;padding:21px 26px;margin-top:auto;gap:8px}
.viewport-shell{position:relative;overflow:hidden;background:#28393a;isolation:isolate;min-height:0}.viewport-shell canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}.viewport-shell canvas.grabbing{cursor:grabbing}.viewport-top{pointer-events:none;position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:23px 23px}.view-flag{display:flex;align-items:center;gap:9px;background:rgba(22,33,33,.81);border:1px solid #ffffff20;backdrop-filter:blur(12px);font-size:9px;letter-spacing:.15em;color:#e4ddd0;padding:12px 14px}.accent-line{width:15px;height:2px;background:var(--accent)}.view-details{font-size:9px;letter-spacing:.09em;color:#e0e7e2;display:flex;gap:10px;text-shadow:0 2px 8px #21302b;background:#1c2a2980;padding:8px 10px}.viewport-bottom{position:absolute;left:20px;right:20px;bottom:21px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}.compass{display:flex;align-items:center;flex-direction:column;color:#e7e5d4;font-family:var(--serif);text-shadow:0 1px 5px #000;font-size:10px;line-height:1}.compass-cross{font-size:24px;margin:4px 0}.viewport-hint{font-size:9px;letter-spacing:.13em;background:#1b2525ad;padding:12px 14px;color:#d4dcd2;text-align:center}.reset-button{pointer-events:auto;background:#1f2a2aee;border:1px solid #ffffff30;color:#f0eee7;white-space:nowrap;display:flex;align-items:center;gap:9px;padding:11px 12px;font-size:9px;letter-spacing:.07em}.reset-button>span:first-child{font-size:18px}.reset-button:hover{background:#37403a}.hotspots{pointer-events:none;position:absolute;inset:0;overflow:hidden}.hotspot{pointer-events:auto;position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;background:transparent;border:0;color:#fcf4e7;white-space:nowrap;padding:7px;filter:drop-shadow(0 2px 4px #0009);font-size:9px;letter-spacing:.07em}.hotspot-bull{width:23px;height:23px;display:grid;place-items:center;border:1px solid #f7d7aa;background:#ad7b50d9;border-radius:50%;box-shadow:0 0 0 5px #cfa66b24}.hotspot:hover .hotspot-bull,.hotspot.current .hotspot-bull{background:#f2c792;color:#202a29;box-shadow:0 0 0 8px #cfa66b2e}.hotspot-label{padding:7px 9px;background:#1e2927d6;border:1px solid #a49a7b77}.error-state{position:absolute;inset:20%;background:#1b2020e8;border:1px solid #bc7f5b;padding:30px;color:#ffdabc;z-index:10;white-space:pre-line}
.right-inner{padding:43px 26px 25px;display:flex;flex-direction:column;flex:1}.note-number{font-family:var(--serif);font-size:12px;letter-spacing:.17em;color:#8c9c95;margin:28px 0}.note-icon{height:67px;width:67px;display:flex;align-items:center;justify-content:center;color:#ddbe99;font-size:41px;border:1px solid #a9a08040;background:#a3a08a0a}.right-panel h2#note-title{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.1;margin:21px 0 13px}.note-location{font-size:9px;letter-spacing:.11em;color:var(--accent)}#note-text{font-size:11.5px;color:#acbab4;line-height:1.86;margin:21px 0 23px;min-height:95px}.note-rule{height:1px;background:var(--border)}.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:19px 0}.fact-grid div{display:flex;flex-direction:column;gap:8px}.fact-grid span{color:#84938b;letter-spacing:.12em;font-size:8px}.fact-grid strong{font-weight:550;font-size:10px;letter-spacing:.04em}.interaction{padding-top:25px}.interaction .section-head{margin-bottom:23px}.secondary-button{width:100%;margin-top:23px;background:transparent;color:#efc5a0;border:1px solid #9a7f64;min-height:38px;font-size:10px;letter-spacing:.13em;font-weight:650}.secondary-button:hover{background:#9a795b21}.source-note{display:flex;gap:11px;margin-top:auto;padding-top:34px;color:#899d91}.source-note p{font-size:10px;line-height:1.65;margin:0}.source-mark{color:var(--accent);font-size:14px}.right-footer{border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:10px;color:#7c9084;padding:20px 25px;font-size:8px;letter-spacing:.08em}.help-dialog{max-width:465px;background:#1e2726;color:#f5efe3;border:1px solid #ba9671;box-shadow:0 20px 80px #000a;padding:35px}.help-dialog::backdrop{background:#101919c9}.help-dialog h2{font:normal 31px/1.1 var(--serif);margin:16px 0}.help-dialog p{font-size:12px;line-height:1.8;color:#c0cbc2}.close-help{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:23px;color:#ddc29e}.help-dialog .tour-button{margin-top:20px}
@media(max-width:1190px){.workspace{grid-template-columns:270px minmax(0,1fr) 270px}.eyebrow-section{padding-left:22px;padding-right:22px}.panel-section{padding-left:22px;padding-right:22px}.right-inner{padding-left:21px;padding-right:21px}h1{font-size:42px}.viewport-hint{display:none}.right-panel h2#note-title{font-size:27px}}
@media(max-width:890px){.topbar{height:63px;padding:0 15px}.brand{min-width:auto}.top-meta{display:none}.workspace{grid-template-columns:240px minmax(0,1fr);max-height:none;min-height:calc(100svh - 63px)}.right-panel{grid-column:1/-1;overflow:visible;min-height:auto}.right-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:25px}.right-inner>.overline,.right-inner>.note-number,.right-inner>.note-icon{grid-column:1}.right-inner>.note-number{margin:10px 0}.right-panel h2#note-title,.right-inner>.note-location,.right-inner>#note-text{grid-column:1}.right-inner>.note-rule,.right-inner>.fact-grid,.right-inner>.interaction,.right-inner>.source-note{grid-column:2}.right-inner>.source-note{padding-top:10px}.right-footer{margin-top:0}.viewport-shell{min-height:650px}.left-panel{min-height:650px}}
@media(max-width:620px){.workspace{display:flex;flex-direction:column}.left-panel{min-height:auto;overflow:visible;order:1}.viewport-shell{height:57svh;min-height:400px;order:0}.right-panel{order:2}.eyebrow-section{padding:24px 20px 14px}h1{font-size:35px;margin:16px 0}.intro{max-width:none}.historic-label{padding:4px 0}.panel-section{padding:18px 20px}.focus-list{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}.focus-item{font-size:10px}.tour-button{margin-top:16px}.side-footer{padding:14px 20px}.right-inner{display:flex;padding:25px 20px}.right-inner>.note-number{margin:15px 0}.right-panel h2#note-title{margin:12px 0}.right-inner>#note-text{min-height:0}.right-inner>.source-note{padding-top:24px}.viewport-top{padding:13px}.viewport-bottom{left:12px;right:12px;bottom:13px}.view-details{display:none}.view-flag{font-size:8px;padding:8px}.hotspot-label{display:none}.reset-button{padding:7px}.edition{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}