:root{color-scheme:dark;
--bg:#0e171c;
--panel:#19232a;
--line:#344048;
--ink:#f3eee1;
--muted:#a3acaf;
--accent:#d6a96d;
--green:#9aaa91;
--gold:#f0c896;
font-family:Inter,"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;
min-height:100%;
background:var(--bg);
color:var(--ink)}
body{font-size:13px}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);
outline-offset:3px}
button:disabled{opacity:.4;
cursor:default}
.app{min-height:100vh;
display:flex;
flex-direction:column}
.app-header{min-height:94px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px clamp(22px,3vw,52px);
border-bottom:1px solid #28373e;
background:#111b21}
.brand{display:flex;
gap:18px;
align-items:center}
.logo-mark{height:52px;
width:52px;
border:1px solid #8b745a;
display:grid;
place-items:center;
color:#f2cf9d;
position:relative}
.logo-mark:before,.logo-mark:after{content:"";
position:absolute;
height:7px;
width:7px;
border:1px solid var(--accent)}
.logo-mark:before{top:-4px;
left:-4px}
.logo-mark:after{bottom:-4px;
right:-4px}
.logo-mark span{font:600 31px Georgia,serif}
.eyebrow,.overline{font-weight:650;
letter-spacing:.22em;
color:var(--accent);
font-size:9px}
.eyebrow-dot{margin:0 5px;
color:#6d7675}
.brand-text h1{font-size:22px;
letter-spacing:.095em;
line-height:1.1;
margin:7px 0 4px;
font-weight:700}
.brand-text h1 i{font-style:normal;
font-weight:300;
color:#bc8b57;
margin:0 3px}
.brand-text p{margin:0;
color:var(--muted);
font-size:11px}
.header-actions{display:flex;
gap:10px;
align-items:center}
.header-chip{font-size:9px;
letter-spacing:.09em;
color:#b7c1bf;
background:#1b292d;
border:1px solid #30413d;
padding:11px 12px;
white-space:nowrap}
.live-dot{display:inline-block;
background:#a8c4a1;
width:5px;
height:5px;
border-radius:50%;
margin-right:7px;
box-shadow:0 0 8px #95c5a8}
.button-lang,.button-icon{height:36px;
color:var(--ink);
background:none;
border:1px solid var(--line);
font-weight:700;
padding:0 13px}
.button-lang:hover,.button-icon:hover{border-color:var(--accent)}
.workspace{display:grid;
grid-template-columns:minmax(0,1fr) 342px;
flex:1;
min-height:650px;
max-height:calc(100vh - 125px)}
.stage{min-width:0;
position:relative;
overflow:hidden;
background:linear-gradient(180deg,#80a3b1,#5f8279);
isolation:isolate}
#viewport{display:block;
width:100%;
height:100%;
touch-action:none;
cursor:grab;
outline:none}
#viewport:active{cursor:grabbing}
.stage-top,.stage-bottom{position:absolute;
left:25px;
right:25px;
display:flex;
align-items:center;
justify-content:space-between;
pointer-events:none;
gap:15px}
.stage-top{top:25px}
.stage-bottom{bottom:21px}
.tag-dark,.camera-tip,.render-stats{color:#f0e8d9;
background:#14252cd4;
border:1px solid #d7cfb43d;
backdrop-filter:blur(8px);
padding:10px 13px;
font-size:10px;
letter-spacing:.10em}
.tag-dark.transparent{background:#14252caa;
color:#e5e3d5;
text-transform:none;
letter-spacing:.02em}
.camera-tip{display:flex;
gap:10px;
align-items:center;
font-size:10px;
letter-spacing:0;
color:#e5e9e6}
.tip-symbol{font-size:16px;
color:var(--accent)}
.render-stats{font-size:10px;
white-space:nowrap}
.divider-vertical{margin:0 11px;
border-left:1px solid #7f8a84}
.hotspot-layer{pointer-events:none;
position:absolute;
inset:0}
.hotspot{position:absolute;
transform:translate(-50%,-50%);
background:transparent;
border:0;
display:flex;
align-items:center;
gap:8px;
color:#fff;
white-space:nowrap;
text-shadow:0 1px 5px #162322b8;
pointer-events:auto;
padding:6px}
.hotspot[hidden]{display:none}
.hotspot-dot{width:28px;
height:28px;
display:grid;
place-items:center;
border:1px solid #fff9;
border-radius:50%;
background:#172626bb;
box-shadow:0 0 0 5px #ede0c82a;
font-size:17px;
font-weight:300}
.hotspot:hover .hotspot-dot,.hotspot:focus-visible .hotspot-dot{background:var(--accent);
color:#182322}
.hotspot-name{font-size:10px;
letter-spacing:.06em;
background:#172626ad;
padding:7px 8px;
border-radius:2px}
.story-panel{position:absolute;
left:25px;
bottom:86px;
width:min(390px,calc(100% - 50px));
padding:19px 21px 16px;
background:#14242aee;
color:#f7efe2;
box-shadow:0 18px 38px #09141a80;
border:1px solid #b9966859;
transform:translateY(17px);
opacity:0;
pointer-events:none;
transition:transform .3s,opacity .3s;
backdrop-filter:blur(18px)}
.story-panel.visible{transform:translateY(0);
opacity:1;
pointer-events:auto}
.story-heading{display:flex;
justify-content:space-between;
align-items:center;
color:var(--accent);
font-weight:700;
letter-spacing:.17em;
font-size:10px}
.story-heading button{border:0;
background:none;
color:#f2e4d0;
font-size:24px;
font-weight:300;
line-height:1}
.story-panel h2{font:normal 25px Georgia,serif;
letter-spacing:.01em;
margin:10px 0}
.story-panel p{line-height:1.68;
color:#cad2cf;
font-size:12px;
margin:0}
.story-bottom{display:flex;
align-items:center;
gap:7px;
color:var(--accent);
font-size:8px;
letter-spacing:.15em;
margin-top:14px}
.small-diamond{width:5px;
height:5px;
background:var(--accent);
transform:rotate(45deg)}
.panel{background:var(--panel);
display:flex;
flex-direction:column;
border-left:1px solid #38444a;
min-height:0;
overflow:hidden}
.panel-intro{padding:29px 26px 18px;
background:radial-gradient(ellipse at top right,#35433f66,transparent 67%),#1b272b;
border-bottom:1px solid var(--line)}
.overline{color:#aaa79b;
font-size:9px;
display:flex;
justify-content:space-between}
.overline em{font-style:normal;
color:var(--accent)}
.panel-intro h2{font:normal 36px/.95 Georgia,'Times New Roman',serif;
letter-spacing:-.032em;
margin:18px 0 11px}
.panel-intro h2 i{font-style:italic;
color:#d5b48c}
.panel-intro p{color:#9da9a9;
line-height:1.5;
margin:0;
font-size:11px}
.panel-content{overflow:auto;
scrollbar-color:#3d4d54 transparent;
flex:1;
padding:0 26px}
.control-section{border-bottom:1px solid var(--line);
padding:21px 0 23px}
.section-heading{display:flex;
align-items:center;
gap:12px;
margin-bottom:20px}
.section-heading span{color:var(--accent);
font:italic 13px Georgia,serif}
.section-heading h3{font-size:10px;
font-weight:700;
letter-spacing:.17em;
margin:0}
.control-group{margin:0 0 20px}
.control-group:last-child{margin-bottom:0}
.field-label{display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:10px;
gap:12px}
.field-label label{color:#d8dfdc;
font-size:11px}
.field-label output{font-variant-numeric:tabular-nums;
color:var(--gold);
font-size:11px;
font-weight:700}
.control-group input[type=range]{width:100%;
appearance:none;
-webkit-appearance:none;
height:3px;
border:0;
border-radius:2px;
background:linear-gradient(90deg,#c5a274,#728780);
cursor:pointer;
margin:4px 0 7px;
accent-color:var(--gold)}
input[type=range]::-webkit-slider-thumb{appearance:none;
width:13px;
height:13px;
background:#e8c390;
border:3px solid #1d292d;
border-radius:50%;
box-shadow:0 0 0 1px #dabb90}
input[type=range]::-moz-range-thumb{width:11px;
height:11px;
background:#e8c390;
border:2px solid #19252c;
border-radius:50%}
.slider-endpoints{display:flex;
justify-content:space-between;
color:#88999c;
font-size:9px;
letter-spacing:.07em}
.segmented{display:flex;
border:1px solid #3b4a4d;
padding:3px;
gap:3px;
background:#121e25}
.segmented button{flex:1;
border:0;
background:transparent;
color:#9ba9a9;
padding:10px 4px;
font-size:11px}
.segmented button.active{background:#42514b;
color:#f7e1ba;
box-shadow:inset 0 0 0 1px #87918355}
.view-grid{display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px}
.view-button{background:#203039;
color:#bdc8c5;
border:1px solid #35434a;
text-align:left;
font-size:11px;
padding:11px}
.view-button:hover{border-color:#b59369}
.view-button.active{background:#34433d;
color:#e9d8ba;
border-color:#97845f}
.tour-button{background:transparent;
border:1px solid #a98f67;
color:#ead6b8;
padding:10px;
margin-top:10px;
width:100%;
font-size:11px;
letter-spacing:.045em}
.tour-button:hover,.tour-button.active{background:#4b493c}
.heritage-section{border:0}
.heritage-open{display:flex;
align-items:center;
width:100%;
text-align:left;
background:#24333b;
border:1px solid #4b594f;
color:#f4e6cb;
padding:12px;
gap:10px}
.heritage-icon{font-size:25px;
color:var(--accent)}
.heritage-open span:nth-child(2){flex:1}
.heritage-open strong{font:normal 15px Georgia,serif;
display:block}
.heritage-open small{font-size:9px;
color:#a2b1b1;
display:block;
margin-top:5px;
line-height:1.3}
.heritage-arrow{font-size:17px;
color:var(--accent)}
.panel-footer{padding:15px 25px;
display:flex;
gap:9px;
border-top:1px solid #39464b;
background:#151f26}
.panel-footer button{padding:12px;
border:1px solid #4b5a5e;
color:#e4e5db;
background:transparent;
flex:1;
font-weight:600;
font-size:11px}
.panel-footer button:last-child{color:#172523;
background:#d5b58b;
border-color:#d5b58b}
.panel-footer button:hover{filter:brightness(1.12)}
.site-footer{display:flex;
justify-content:space-between;
align-items:center;
padding:8px clamp(22px,3vw,52px);
min-height:31px;
background:#0d151a;
color:#85949b;
font-size:9px;
letter-spacing:.08em}
.muted{color:#d1a778}
.loading{position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
background:#14262fe6;
color:#eeddbb;
font-size:13px;
letter-spacing:.08em}
.loading[hidden]{display:none}
.loading.error{background:#482724e8;
color:white}
.spinner{display:inline-block;
width:23px;
height:23px;
border:2px solid #b59b70;
border-top-color:transparent;
border-radius:50%;
animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
dialog{width:min(480px,calc(100vw - 28px));
background:#1d2b33;
color:#f3eee2;
padding:25px;
border:1px solid #a48b66;
box-shadow:0 40px 70px #0009}
dialog::backdrop{background:#08131dc9}
.modal-title{display:flex;
align-items:center;
justify-content:space-between}
.modal-title h2{font:normal 25px Georgia,serif;
margin:0}
.modal-title button{background:none;
border:0;
color:#f5e4c2;
font-size:28px}
.modal-note{font-size:11px;
color:#b4bcb9}
dialog p{line-height:1.75;
color:#d0d8d5}
 @media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr) 300px}
.panel-content{padding:0 18px}
.panel-intro{padding:24px 18px 16px}
.panel-footer{padding:12px 18px}
}
@media(max-width:760px){.app-header{min-height:80px;
padding:13px 15px}
.header-chip{display:none}
.brand{gap:12px}
.logo-mark{width:42px;
height:42px}
.brand-text h1{font-size:16px}
.eyebrow{font-size:8px}
.brand-text p{font-size:10px}
.workspace{grid-template-columns:1fr;
max-height:none}
.stage{height:min(64vh,650px);
min-height:385px}
.panel{overflow:visible;
min-height:0}
.panel-intro{display:none}
.panel-content{display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
overflow:visible;
gap:22px;
padding:0 18px}
.control-section{border-bottom:0}
.heritage-section{grid-column:1/-1;
padding-top:0}
.panel-footer{padding:12px 18px}
.stage-top,.stage-bottom{left:12px;
right:12px}
.stage-top{top:12px}
.stage-bottom{bottom:12px}
.tag-dark.transparent{display:none}
.camera-tip{font-size:9px;
max-width:80%}
.render-stats{display:none}
.story-panel{left:12px;
bottom:57px;
width:min(380px,calc(100% - 24px))}
.site-footer{font-size:8px;
padding:12px 15px;
gap:12px;
flex-wrap:wrap}
}
@media(max-width:440px){.panel-content{grid-template-columns:1fr;
gap:0}
.control-section{padding:18px 0 12px;
border-bottom:1px solid var(--line)}
.panel-intro{display:none}
.brand-text h1{font-size:14px}
.logo-mark{width:38px;
height:38px}
.button-icon{padding:0 8px}
.hotspot-name{font-size:9px;
max-width:100px;
white-space:normal}
.hotspot-dot{width:24px;
height:24px}
.story-panel{padding:13px}
.story-panel h2{font-size:21px}
.stage{height:54vh;
min-height:360px}
}