:root{color-scheme:dark;--bg: #0c120e;--panel: #101810ee;--line: #2a3828;--gold: #c5a35a;--cream: #efe6d2;--muted: #9aa890;--green: #6f8f58}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--cream);font-family:Outfit,Segoe UI,sans-serif}button,input{font:inherit}.app{display:grid;grid-template-columns:1fr 360px;grid-template-rows:1fr 76px;height:100%}.stage{position:relative;grid-column:1;grid-row:1;overflow:hidden;background:radial-gradient(circle at 30% 20%,#1a2c20,transparent 28%),#0d1811}.stage canvas{display:block;width:100%;height:100%}.plate{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.stage canvas{position:relative;z-index:1}.hud{position:absolute;left:24px;top:22px;z-index:2;display:flex;gap:12px;align-items:center;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--cream)}.hud em{font-family:Cormorant Garamond,serif;font-style:italic;color:var(--gold);font-size:18px}.hint{position:absolute;left:24px;bottom:18px;z-index:2;margin:0;color:var(--muted);font-size:13px}.panel{grid-column:2;grid-row:1 / span 2;overflow:auto;padding:22px 22px 28px;background:var(--panel);border-left:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand h1{margin:0;font-family:Cormorant Garamond,serif;font-size:42px;font-weight:500;letter-spacing:.12em}.eyebrow{margin:0 0 6px;color:var(--gold);font-size:11px;letter-spacing:.16em;text-transform:uppercase}.lede{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.55}.panel section{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}.panel h2{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}.slider{display:grid;gap:5px;margin-bottom:10px}.slider span{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.slider b{color:var(--cream);font-weight:500}.slider input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:#2c3a2b;border-radius:99px}.slider input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold)}.row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}button{border:1px solid var(--line);background:#172016;color:var(--cream);padding:8px 12px;border-radius:999px;cursor:pointer}button:hover,button.active{border-color:var(--gold);color:var(--gold)}button.primary{width:100%;margin-top:8px;background:var(--gold);color:#16140e;border-color:var(--gold);font-weight:600}button.primary:disabled{opacity:.55;cursor:wait}.drop{display:block;padding:16px 12px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--muted);cursor:pointer}.stats p{margin:0 0 10px;color:var(--cream)}.stats ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;color:var(--muted);font-size:13px}.stats b{color:var(--cream);font-weight:500}.timeline{position:relative;grid-column:1;grid-row:2;display:flex;align-items:center;gap:12px;padding:0 20px;background:#0e1510;border-top:1px solid var(--line)}.timeline .fill{display:none}.timeline input{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#2a3628;border-radius:99px}.timeline input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--cream)}.play{min-width:72px}.clock{width:64px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}.phase{min-width:48px;color:var(--gold);font-size:12px;letter-spacing:.12em;text-transform:uppercase}@media (max-width: 980px){.app{grid-template-columns:1fr;grid-template-rows:1fr auto 72px}.panel{grid-column:1;grid-row:2;max-height:42vh;border-left:0;border-top:1px solid var(--line)}.timeline{grid-column:1;grid-row:3}}