:root{color-scheme:dark;font-family:Aptos Display,Segoe UI,sans-serif;background:#05070d;color:#f5f1e8;--panel: rgba(10, 18, 28, .72);--line: rgba(255, 255, 255, .16);--gold: #ffd36a;--blue: #5fb4ff;--ice: #b9e8ff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 18% 12%,rgba(255,166,70,.22),transparent 28rem),radial-gradient(circle at 82% 22%,rgba(42,120,255,.16),transparent 30rem),linear-gradient(145deg,#03040a,#07111d 52%,#0a0d10)}button,input{font:inherit}#app{min-height:100vh;padding:24px}.stage{position:relative;min-height:calc(100vh - 230px);overflow:hidden;border:1px solid var(--line);border-radius:30px;background:linear-gradient(135deg,#03070ec7,#050c1273);box-shadow:0 30px 90px #00000073}#scene{display:block;width:100%;height:calc(100vh - 230px);min-height:520px}.hud,.legend{position:absolute;z-index:2;border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 16px 50px #00000052}.hud{top:22px;left:22px;max-width:430px;padding:24px;border-radius:24px}.eyebrow{margin:0 0 10px;color:var(--gold);font-size:.76rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}h1,h2,p,dl{margin-top:0}h1{margin-bottom:12px;font-size:clamp(2.5rem,7vw,5.8rem);line-height:.82;letter-spacing:-.08em}.hud p{color:#f5f1e8c7;line-height:1.55}dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:0}dt{color:#f5f1e88c;font-size:.74rem;text-transform:uppercase}dd{margin:4px 0 0;font-size:1.12rem;font-weight:800}.legend{right:22px;bottom:22px;display:grid;gap:10px;padding:16px;border-radius:18px;color:#f5f1e8d1}.legend span{display:flex;align-items:center;gap:10px}.legend i{width:10px;height:10px;border-radius:999px}.sun-dot{background:var(--gold)}.earth-dot{background:var(--blue)}.axis-dot{background:#ffefc0}.ray-dot{background:#ff8d5a}.controls,.readout,.incidence-panel,.irradiance-lab{display:grid;gap:14px;margin-top:16px}.controls{grid-template-columns:repeat(4,minmax(0,1fr))}.controls label,.controls button,.readout article,.incidence-panel,.irradiance-lab{border:1px solid var(--line);border-radius:20px;background:#ffffff0e}.controls label{display:grid;gap:12px;padding:16px}.controls span,.panel-controls span{color:#f5f1e8b8;font-size:.9rem;font-weight:700}input[type=range]{width:100%;accent-color:var(--gold)}select{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:#f5f1e8;background:#05090fe6}.controls button{cursor:pointer;color:#19120a;font-weight:900;background:linear-gradient(135deg,#ffe38d,#ff9f42)}button:disabled{cursor:not-allowed;filter:grayscale(.8);opacity:.45}.readout{grid-template-columns:repeat(3,minmax(0,1fr))}.readout article{padding:18px}.readout h2{margin-bottom:8px;font-size:1rem}.readout p{margin-bottom:0;color:#f5f1e8ad;line-height:1.5}.incidence-panel{grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);min-height:430px;overflow:hidden;padding:18px;background:radial-gradient(circle at 72% 18%,rgba(255,211,106,.16),transparent 26rem),linear-gradient(135deg,#ffffff0f,#ffffff06)}.incidence-copy{align-self:stretch;padding:18px}.incidence-copy h2{max-width:11ch;margin-bottom:14px;font-size:clamp(2rem,5vw,4.4rem);line-height:.9;letter-spacing:-.065em}.incidence-copy p{max-width:34rem;color:#f5f1e8b3;line-height:1.55}.incidence-metrics{grid-template-columns:1fr;margin-top:28px}.panel-controls{display:grid;gap:12px;margin-top:20px}.panel-controls label{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#ffffff0b}.panel-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.panel-actions button{min-height:44px;cursor:pointer;border:1px solid var(--line);border-radius:14px;color:#f5f1e8;font-weight:850;background:#ffffff14}.panel-actions button:first-child{color:#17140d;background:linear-gradient(135deg,#b9e8ff,#ffd36a)}#incidence-scene{display:block;width:100%;min-height:390px;border-radius:18px;background:radial-gradient(circle at 50% 35%,#5fb4ff24,#01050a6b 62%)}.irradiance-lab{padding:22px;background:radial-gradient(circle at 18% 24%,rgba(95,180,255,.12),transparent 24rem),radial-gradient(circle at 82% 12%,rgba(255,211,106,.16),transparent 28rem),#ffffff0b}.irradiance-header,.irradiance-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px}.irradiance-header h2{margin-bottom:10px;font-size:clamp(2rem,5vw,4rem);line-height:.92;letter-spacing:-.065em}.irradiance-header p,.example-card p{color:#f5f1e8ad;line-height:1.5}.example-controls,.example-card,.poa-card{border:1px solid var(--line);border-radius:18px;background:#ffffff0b}.example-controls{display:grid;gap:12px;align-self:start;padding:16px}.example-controls label{display:grid;gap:10px}.example-controls span{color:#f5f1e8b8;font-size:.9rem;font-weight:700}.example-controls button{min-height:44px;cursor:pointer;border:0;border-radius:14px;color:#17140d;font-weight:850;background:linear-gradient(135deg,#ffd36a,#ff8d5a)}.example-card,.poa-card{padding:18px}.example-card h3,.poa-card h3{margin:0 0 10px;font-size:1.15rem}.example-card dl,.poa-total{grid-template-columns:repeat(3,1fr);margin-top:18px}.component-bars{display:grid;gap:12px}.component-bars div{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}.component-bars span{color:#f5f1e8b8;font-weight:750}.component-bars strong{color:#f5f1e8}.component-bars i{grid-column:1 / -1;display:block;width:0%;height:10px;border-radius:999px;background:var(--gold);box-shadow:0 0 24px #ffd36a40;transition:width .18s ease}#diffuse-bar{background:var(--blue)}#reflected-bar{background:#7dffbd}@media (max-width: 900px){#app{padding:12px}.stage,#scene{min-height:620px;height:620px}.hud{right:12px;left:12px;top:12px}.legend{right:12px;bottom:12px;left:12px;grid-template-columns:repeat(2,1fr)}.controls,.readout,.incidence-panel,.irradiance-header,.irradiance-grid,.irradiance-lab,dl{grid-template-columns:1fr}.incidence-copy h2{max-width:100%}.panel-actions{grid-template-columns:1fr}}