@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--gold:#d3ab69;--gold-dark:#9d7440;--ink:#070a11;--panel:#131821;--muted:#89929f;--text:#ece8e0;--line:#333c45}*{box-sizing:border-box}html,body{margin:0;background:#080c14;color:var(--text);font:13px/1.5 Inter,system-ui,sans-serif}button,input,select{font:inherit}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#10151d;border-bottom:1px solid #343136}.brand{display:flex;gap:14px;align-items:center}.brandmark{font:36px Georgia;color:var(--gold)}.brand strong{font:600 19px Cinzel,serif;letter-spacing:3px}.brand strong em{font-style:normal;color:var(--gold)}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;color:var(--gold)}.brand .eyebrow{font-size:9px;color:#9da4aa}.status{border:1px solid #51432b;border-radius:20px;padding:7px 12px;color:var(--gold);font-size:10px;letter-spacing:1.2px}main{display:grid;grid-template-columns:minmax(0,1fr) 344px;min-height:calc(100vh - 106px)}#viewport{min-height:650px;height:calc(100vh - 106px);position:relative;background:radial-gradient(ellipse 75% 80% at 48% 45%,#1a2734,#080c14 73%);overflow:hidden}#stage{display:block;position:absolute;width:100%;height:100%;inset:0;touch-action:none}#fallbackPreview{width:100%;height:100%;object-fit:contain;position:absolute;z-index:0;opacity:.74}#stage{z-index:1}.top-left{position:absolute;top:32px;left:38px;pointer-events:none;z-index:2}.tag{font-size:10px;letter-spacing:2px;color:#bab3a4}.top-left h1{font:600 clamp(25px,3vw,52px)/1.13 Cinzel,Georgia,serif;letter-spacing:1px;margin:12px 0 11px;max-width:700px;text-shadow:0 3px 18px #000}.top-left h1 span{color:var(--gold)}.subtitle{font:italic 14px Georgia,serif;color:#d1c4b0}.hud-top-right{position:absolute;right:22px;top:30px;z-index:2;display:flex;flex-direction:column;gap:7px;align-items:flex-end}.ticker{background:#080e16a8;border:1px solid #54616a70;color:#9cabb9;font-size:9px;letter-spacing:1.5px;padding:6px 10px}.ticker span{color:#e5d3b1}.bottom-hint{position:absolute;bottom:25px;left:32px;z-index:2;color:#b6bec5;font-size:10px;letter-spacing:1.3px;text-shadow:1px 2px 5px #000}.bottom-hint span{color:var(--gold);margin:0 9px}.panel{background:linear-gradient(160deg,#181c24,#11151d 55%,#0c111a);border-left:1px solid #34383d;overflow-y:auto;padding:32px 24px}.panel-head h2{font:600 26px Cinzel,serif;margin:10px 0 9px;color:#e8dbc6}.panel-head p{color:var(--muted);line-height:1.6;font-size:12px;margin-bottom:30px}.control-group{border-top:1px solid var(--line);padding:19px 0}.control-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.45px;color:#abadaf;font-weight:700;margin-bottom:10px}.control-label span{color:var(--gold)}button{cursor:pointer;border-radius:2px;transition:background .2s,color .2s,filter .2s}button:hover{filter:brightness(1.15)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #dbc080;outline-offset:3px}.primary{background:linear-gradient(130deg,#c99b51,#a57234);color:#10141b;border:1px solid #e0bc7a;width:100%;font-weight:800;letter-spacing:1.1px;padding:13px 8px;font-size:11px}.primary.on{background:linear-gradient(120deg,#6aa7be,#306a83);border-color:#9ac7db;color:white}.secondary{border:1px solid #4b4e4e;background:#1e242c;color:#d1d6d9;padding:11px 8px;font-size:10px;letter-spacing:.5px;flex:1}.secondary.on{border-color:#c2a16b;color:var(--gold)}.button-row{display:flex;gap:9px;margin-top:10px}select{width:100%;padding:11px;background:#202833;border:1px solid #4a515b;color:#ebebeb;outline:0;margin-bottom:10px}input[type=range]{display:block;width:100%;accent-color:var(--gold);cursor:pointer;margin:10px 0 23px}.readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;border-top:1px solid var(--line);padding-top:20px}.readouts span{display:block;font-size:9px;letter-spacing:1px;color:#8c9299}.readouts strong{display:block;font:600 22px Cinzel,serif;color:var(--gold);margin-top:8px}.lore-link{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:24px 0 12px;color:#d6b479;font-size:10px;letter-spacing:1px;text-decoration:none;font-weight:700}.selection{position:absolute;bottom:70px;left:32px;max-width:330px;z-index:3;background:#111a23ee;padding:17px 20px;border-left:2px solid var(--gold);box-shadow:0 8px 35px #0007}.selection strong{display:block;margin:6px 0;color:#fff;font:600 16px Cinzel,serif}.selection div{font-size:11px;color:#b0b9bc}.link-button{border:0;background:none;color:var(--gold);font-size:11px;text-decoration:underline;margin-top:8px;padding:0}.load-error{position:absolute;bottom:70px;left:25px;right:25px;background:#291e1eec;padding:14px 17px;border:1px solid #865b57;color:#eee;z-index:4}footer{border-top:1px solid #29323c;background:#10151d;text-align:center;padding:10px;font-size:9px;color:#818992;letter-spacing:1.2px}@media(max-width:900px){main{display:flex;flex-direction:column}#viewport{height:65vh;min-height:470px}.panel{border-left:0;border-top:1px solid #3d4043}.nav{height:64px;padding:0 16px}.status{display:none}.top-left{top:20px;left:20px}.top-left h1{font-size:30px}.bottom-hint{font-size:8px;left:18px}.hud-top-right{right:10px;top:14px;gap:4px}.ticker{font-size:8px;padding:4px}.selection{bottom:60px;left:15px}.panel{padding:24px 21px}footer{font-size:8px}}@media(max-width:540px){.brand strong{font-size:14px;letter-spacing:1px}.brandmark{font-size:28px}.brand .eyebrow{font-size:7px}.top-left h1{font-size:24px;max-width:270px}.subtitle{font-size:11px;max-width:260px}.hud-top-right{top:112px}.bottom-hint{bottom:14px;letter-spacing:.15px}}