:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f8fafc;background:#07100d;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 80% 12%,rgba(228,184,99,.24),transparent 26%),linear-gradient(135deg,#07100d,#101814 52%,#050807)}.scene{position:relative;width:100%;height:100%}.scene canvas{display:block}.hud{position:absolute;top:18px;left:18px;width:min(420px,calc(100vw - 36px));padding:18px;border:1px solid rgba(226,197,120,.32);border-radius:8px;background:#050908b8;box-shadow:0 18px 48px #0000005c;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);pointer-events:none}.eyebrow{margin:0 0 7px;color:#e2c578;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}h1{margin:0;font-size:clamp(24px,3.2vw,42px);line-height:1.02}.hud p{margin:10px 0 0;color:#f8fafcd1;font-size:14px;line-height:1.45}.legend{position:absolute;right:18px;bottom:18px;width:min(380px,calc(100vw - 36px));padding:14px;border:1px solid rgba(226,197,120,.28);border-radius:8px;background:#050908b3;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.legend h2{margin:0 0 10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#e2c578}.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.legend-item{display:flex;align-items:center;gap:8px;color:#f8fafcd6;font-size:12px;min-width:0}.swatch{width:12px;height:12px;flex:0 0 12px;border-radius:3px;box-shadow:inset 0 0 0 1px #ffffff47}.controls{position:absolute;left:18px;bottom:18px;display:flex;flex-wrap:nowrap;gap:8px;width:min(980px,calc(100vw - 430px));overflow-x:auto;padding:0 0 4px;scrollbar-color:rgba(226,197,120,.52) rgba(5,9,8,.35);scrollbar-width:thin}.controls button{flex:0 0 auto;white-space:nowrap}.render-toggle{position:absolute;right:18px;top:90px;z-index:3}.quality-toggle{position:absolute;right:18px;top:132px;z-index:3}button{border:1px solid rgba(226,197,120,.38);border-radius:8px;padding:9px 12px;color:#f8fafc;background:#0f1713c7;font:inherit;font-size:12px;font-weight:750;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}button:hover,button.active{color:#07100d;background:#e2c578}.label{max-width:150px;padding:5px 7px;border:1px solid rgba(226,197,120,.42);border-radius:6px;color:#f8fafc;background:#050908b8;box-shadow:0 12px 24px #00000047;font-size:11px;font-weight:800;text-align:center;white-space:normal;pointer-events:none}.caption{position:absolute;right:18px;top:18px;max-width:min(380px,calc(100vw - 36px));padding:12px 14px;border-radius:8px;color:#f8fafcdb;background:#050908a3;border:1px solid rgba(255,255,255,.1);font-size:12px;line-height:1.45;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.presentation .hud,.presentation .legend,.presentation .caption,.presentation .label{opacity:0;visibility:hidden}.presentation .controls{width:min(1100px,calc(100vw - 36px));max-width:calc(100vw - 36px);opacity:.22}.presentation .controls:hover{opacity:1}.presentation .render-toggle,.presentation .quality-toggle{opacity:.36}.presentation .render-toggle:hover,.presentation .quality-toggle:hover{opacity:1}@media(max-width:760px){.hud{padding:14px}.caption{display:none}.legend{right:12px;bottom:12px;width:calc(100vw - 24px)}.legend-grid{grid-template-columns:1fr}.controls{left:12px;bottom:142px;width:calc(100vw - 24px);max-width:calc(100vw - 24px)}.presentation .controls{width:calc(100vw - 24px);max-width:calc(100vw - 24px)}.render-toggle{right:12px;top:112px}.quality-toggle{right:12px;top:154px}button{padding:8px 10px}}