.solar-scene{background:#050b18}.solar-scene header{border-bottom:1px solid #29364e}.solar-canvas{display:block;width:100%;height:clamp(280px,55vh,520px);height:clamp(280px,55svh,520px);touch-action:pan-y;cursor:grab;background:#050b18}.solar-canvas:active{cursor:grabbing}.solar-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:14px;border-block:1px solid #29364e}.solar-controls button{min-width:44px}.solar-controls [data-play]{background:#3c3872}.solar-scene footer{padding-top:12px;padding-bottom:14px}@media(max-width:600px){.solar-controls{gap:6px;padding:10px}.solar-controls button{font-size:12px;padding:8px 10px}.solar-scene header p{font-size:12px}}
.solar-scene-tabs{display:flex;justify-content:center;gap:10px;padding:12px;background:#091425;border-bottom:1px solid #29364e}.solar-scene-tabs button{min-height:44px;padding:10px 20px;border:1px solid #40526e;border-radius:8px;background:#142239;color:#d7ebff;font:600 14px system-ui;cursor:pointer}.solar-scene-tabs button[aria-pressed=true]{background:#173f54;color:#a9f0ff;border-color:#72dfff;box-shadow:0 0 18px #38b9ea20}.solar-scene-tabs button:focus-visible{outline:3px solid #8ce9ff;outline-offset:3px}.solar-canvas{touch-action:none}
.solar-scene .solar-controls :is([data-wire],[data-play]){position:relative;overflow:hidden;isolation:isolate}
.solar-scene[open]:has([data-scene="droid"][aria-pressed="true"]) .solar-controls :is([data-wire],[data-play][aria-pressed="false"]){background:linear-gradient(115deg,#234759,#413867 55%,#254b60);border-color:#82b6ce;color:#f2faff;box-shadow:inset 0 0 12px #8bcfff12,0 0 12px #77baff15}
.solar-scene[open]:has([data-scene="droid"][aria-pressed="true"]) .solar-controls :is([data-wire],[data-play][aria-pressed="false"])::after{content:'';position:absolute;inset:-35% -70%;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#b4f4ff18 47%,#e5ddff38 50%,#9ddfff18 53%,transparent 60%);transform:translateX(-65%);animation:droid-control-sheen 5.6s ease-in-out infinite}
.solar-scene .solar-controls [data-play]::after{animation-delay:1.4s!important}
@keyframes droid-control-sheen{0%,28%{transform:translateX(-65%)}65%,100%{transform:translateX(65%)}}
@media(prefers-reduced-motion:reduce){.solar-scene .solar-controls :is([data-wire],[data-play])::after{animation:none!important;display:none}}
.solar-scene-tabs{flex-wrap:wrap;gap:7px}.solar-controls [hidden]{display:none!important}@media(max-width:420px){.solar-scene-tabs button{padding:10px 12px;font-size:12px}}