*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#04060d;--bg-soft:#ffffff0d;--line:#bacdff24;--text:#eef3ff;--muted:#94a3c8;--accent:#89a9ff;--warm:#ffb15a;--panel:#080c18b3}body{background:radial-gradient(circle at top, #3f60bc38, transparent 34%), radial-gradient(circle at 20% 20%, #ffa25224, transparent 18%), linear-gradient(180deg, #050812 0%, var(--bg) 100%);color:var(--text);flex-direction:column;align-items:center;min-height:100vh;padding:22px 14px 20px;font-family:Segoe UI,sans-serif;display:flex}body:before{content:"";pointer-events:none;opacity:.32;background-image:radial-gradient(circle at 18% 24%,#fffc 0 1px,#0000 1.5px),radial-gradient(circle at 72% 16%,#ffffffa6 0 1px,#0000 1.5px),radial-gradient(circle at 36% 70%,#ffffff8c 0 1px,#0000 1.5px),radial-gradient(circle at 82% 62%,#ffffff73 0 1px,#0000 1.5px);position:fixed;inset:0}.topbar{justify-content:space-between;align-items:flex-start;gap:18px;width:min(1080px,100%);margin-bottom:18px;display:flex}body[data-demo=sun] .topbar{justify-content:flex-start}body[data-demo=sun]{background:radial-gradient(circle at 50% 240px, #ff883a29, transparent 24%), radial-gradient(circle at top, #3f60bc2e, transparent 34%), radial-gradient(circle at 20% 20%, #ffa2521f, transparent 18%), linear-gradient(180deg, #050812 0%, var(--bg) 100%)}.brand-block{flex-direction:column;gap:6px;max-width:560px;display:flex}.eyebrow{letter-spacing:.28em;text-transform:uppercase;color:#8da0ce;font-size:.64rem}h1{letter-spacing:.02em;font-size:clamp(1.5rem,3vw,2.5rem);line-height:.95}.lede{color:var(--muted);max-width:44ch;font-size:.9rem;line-height:1.45}.mode-switch{border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#060a148c;border-radius:999px;gap:8px;padding:4px;display:flex}.mode-link{color:#b8c4e5;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:8px 14px;font-size:.74rem;text-decoration:none;transition:background .2s,color .2s}.mode-link:hover{color:var(--text);background:#89a9ff1f}.mode-link.active{color:var(--text);background:#89a9ff2e}#main{flex-wrap:wrap;justify-content:center;gap:18px;width:100%;max-width:1080px;display:flex}#leftCol{flex-direction:column;align-items:center;gap:14px;display:flex}canvas{flex-shrink:0;display:block}.hero-canvas{filter:drop-shadow(0 0 34px #ffb05a24);width:min(70vw,320px);height:auto}.planet-canvas,.planet-preview{border-radius:50%}.sun-canvas{filter:drop-shadow(0 0 56px #ff842e6b)}body[data-demo=sun] #main{align-items:flex-start;gap:28px}body[data-demo=sun] #leftCol{gap:18px;padding-top:6px}body[data-demo=sun] .hero-canvas{width:min(88vw,430px)}body[data-demo=sun] #previews{background:#0e0e1c6b;border-color:#ffbc7426;padding:14px 18px}#previews{border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff08;border-radius:16px;align-items:flex-end;gap:16px;padding:12px 16px;display:flex}.sun-previews{align-items:center}.pv-wrap{flex-direction:column;align-items:center;display:flex}.pv-label{color:#6e7ba0;text-align:center;letter-spacing:.08em;margin-top:5px;font-size:.6rem}#panel{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:18px;flex-direction:column;gap:8px;width:292px;max-height:calc(100vh - 40px);padding:14px;display:flex;overflow-y:auto}.sec{letter-spacing:.16em;color:#7f92bf;text-transform:uppercase;margin-top:2px;font-size:.6rem}.presets{grid-template-columns:1fr 1fr 1fr;gap:5px;display:grid}.pb{color:#d9e5ff;cursor:pointer;text-align:center;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:9px;padding:6px 4px;font-size:.66rem;transition:background .2s,border-color .2s}.pb:hover{background:#89a9ff29}.pb.active{background:#89a9ff38;border-color:#9ab4ff}#morphRow{flex-direction:column;gap:5px;display:flex}.morph-ends{gap:6px;display:flex}.morph-ends select{color:#d9e5ff;background:#0a0f1d;border:1px solid #ffffff1f;border-radius:8px;flex:1;padding:5px 6px;font-size:.68rem}#morphSlider{accent-color:#8ca8ff;cursor:pointer;width:100%}.morph-labels{color:#6e7ba0;justify-content:space-between;font-size:.6rem;display:flex}#rndBtn{color:#ffd294;cursor:pointer;background:#ffa03c1a;border:1px solid #ffb15c57;border-radius:10px;padding:8px;font-size:.73rem;transition:background .2s,border-color .2s}#rndBtn:hover{background:#ffa03c2e;border-color:#ffb15c80}.row{flex-direction:column;gap:2px;display:flex}label{color:#adb8d5;justify-content:space-between;font-size:.68rem;display:flex}label span{color:var(--text);font-variant-numeric:tabular-nums}input[type=range]{accent-color:#6f96ff;cursor:pointer;width:100%}.color-row{color:#adb8d5;align-items:center;gap:6px;font-size:.68rem;display:flex}.color-row label{color:#adb8d5;flex:1;font-size:.68rem}input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:6px;width:32px;height:22px}.toggle-row{flex-wrap:wrap;gap:8px;display:flex}.tog{color:#a8b3d0;cursor:pointer;text-align:center;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:8px;flex:1;min-width:72px;padding:6px 5px;font-size:.66rem;transition:background .2s,border-color .2s,color .2s}.tog.on{color:#ffd8a0;background:#ffb25629;border-color:#ffb25666}.note{color:#7f8ead;font-size:.67rem;line-height:1.45}#fps{color:#5b698a;text-align:right;font-size:.6rem}@media (width<=760px){body{padding:16px 10px 18px}.topbar{flex-direction:column;align-items:stretch}.mode-switch{align-self:flex-start}h1{font-size:1.6rem}.hero-canvas{width:min(84vw,320px)}#panel{width:min(100%,360px);max-height:none}body[data-demo=sun] #main{gap:14px}body[data-demo=sun] .hero-canvas{width:min(96vw,430px)}body[data-demo=sun] #panel{width:100%}}