:root {
  --bg:#070b19; --ink:#f2f5ff; --muted:#a6b1ca; --dim:#7987a7;
  --accent:#91e2d9; --accent-rgb:145,226,217;
  --glass:rgba(23,30,57,.75); --border:rgba(158,181,235,.18);
  color-scheme:dark; font-family:Inter,"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;
}
* {box-sizing:border-box}
html {min-height:100%;background:var(--bg)}
body {margin:0;color:var(--ink);min-height:100vh;overflow-x:hidden;background:#070b19;letter-spacing:.025em}
body[data-aura="ruby"] {--accent:#fa85aa;--accent-rgb:250,133,170}
body[data-aura="amber"] {--accent:#ffd18c;--accent-rgb:255,209,140}
body[data-aura="violet"] {--accent:#c3a8ff;--accent-rgb:195,168,255}
button {font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
button, input {touch-action:manipulation}
::selection {background:rgba(var(--accent-rgb),.35);color:white}
[hidden]{display:none!important}

/* Fixed space backdrop: independent of the dice renderer. */
.cosmic-backdrop {position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
 background:radial-gradient(ellipse 73% 60% at 50% 45%,#16234c 0%,#0c1431 42%,transparent 81%),
 radial-gradient(ellipse 40% 60% at 16% 85%,#131b41 0%,transparent 90%),
 radial-gradient(ellipse 50% 50% at 96% 7%,#1b1939 0%,transparent 90%),#070b19}
.cosmic-backdrop:after {content:"";position:absolute;inset:0;opacity:.55;background:radial-gradient(circle at 50% 49%,transparent 15%,rgba(2,5,16,.58) 100%);z-index:4}
.nebula {position:absolute;pointer-events:none;filter:blur(35px);border-radius:50%;transform:translate3d(0,0,0);opacity:.64;will-change:transform}
.nebula-a {width:78vw;height:64vw;min-width:500px;min-height:440px;left:22%;top:12%;background:radial-gradient(ellipse,rgba(44,79,151,.29) 0%,rgba(66,45,115,.13) 37%,transparent 69%);animation:nebula-drift 44s ease-in-out infinite alternate}
.nebula-b {width:65vw;height:45vw;min-width:500px;min-height:320px;left:-25%;bottom:-28%;background:radial-gradient(ellipse,rgba(54,87,135,.22) 0%,rgba(106,44,149,.13) 38%,transparent 71%);animation:nebula-drift 56s ease-in-out -9s infinite alternate-reverse}
.nebula-c {width:38vw;height:33vw;min-width:350px;min-height:350px;right:-11%;top:-14%;background:radial-gradient(ellipse,rgba(105,55,165,.20),transparent 66%);animation:nebula-drift 39s ease-in-out -13s infinite alternate}
#starfield {position:absolute;inset:0;width:100%;height:100%;z-index:3}
.grain {position:absolute;inset:0;z-index:5;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}
@keyframes nebula-drift {to{transform:translate3d(6%,-5%,0) rotate(9deg) scale(1.04)}}

.app {position:relative;z-index:1;max-width:1640px;min-height:100dvh;margin:auto;padding:0 clamp(24px,4.4vw,80px);display:flex;flex-direction:column}
.topbar {height:89px;min-height:89px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(180,202,250,.12);gap:20px}
.brand {display:inline-flex;align-items:center;gap:14px;justify-self:start;color:white;text-decoration:none;font-size:13px;font-weight:650;letter-spacing:.20em;white-space:nowrap}
.brand strong {font-weight:350;letter-spacing:.13em;color:#bdc8e5}
.brand-slash {color:var(--accent);font-weight:350}
.brand-mark {font-size:33px;font-weight:250;color:var(--accent);line-height:1;filter:drop-shadow(0 0 11px rgba(var(--accent-rgb),.45))}
.topbar-center,.topbar-spark {color:#8897bb;font-size:9px;letter-spacing:.33em;white-space:nowrap}
.topbar-spark {color:var(--accent);font-size:8px;padding:0 14px}
.header-actions {justify-self:end;display:flex;align-items:center;gap:24px}
.status {color:#c3dbe4;white-space:nowrap;font-size:9px;letter-spacing:.22em;display:inline-flex;gap:10px;align-items:center}
.status-dot {height:6px;width:6px;border-radius:50%;background:#8ee3d0;box-shadow:0 0 11px 3px rgba(132,237,226,.35)}
.motion-toggle {display:flex;gap:7px;align-items:center;color:#adbbd9;background:rgba(30,40,79,.38);border:1px solid rgba(175,193,241,.15);border-radius:100px;padding:9px 12px;font-size:10px;white-space:nowrap;transition:background .25s,border-color .25s}
.motion-toggle:hover {background:rgba(44,54,104,.5);border-color:rgba(var(--accent-rgb),.45)}
.tiny-star {color:var(--accent);font-size:14px}

.layout {display:grid;grid-template-columns:minmax(200px, .77fr) minmax(390px, 1.48fr) minmax(300px,.91fr);column-gap:clamp(6px,1.7vw,33px);align-items:center;flex:1;min-height:720px;padding:20px 0 25px}
.intro {z-index:2;align-self:center;padding:0 0 9px 0;max-width:360px}
.eyebrow {display:flex;align-items:center;gap:13px;font-size:9px;letter-spacing:.23em;color:#a7c7d6;white-space:nowrap;font-weight:650}
.eyebrow-line {width:27px;height:1px;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.4)}
.intro h1 {margin:35px 0 28px;font-size:clamp(32px,3.25vw,55px);font-weight:670;line-height:1.50;letter-spacing:-.055em;white-space:nowrap}
.intro h1 em {font-style:normal;background:linear-gradient(106deg,#d9effb 5%,var(--accent) 53%,#d4bbff 97%);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 15px rgba(var(--accent-rgb),.17))}
.intro-text {font-size:12px;line-height:2.5;color:#acbcd4;margin:0;letter-spacing:.035em}
.mini-system {display:flex;align-items:center;gap:12px;margin:45px 0 34px;width:230px;color:var(--accent);font-size:12px}
.mini-system-line {height:1px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.5),rgba(var(--accent-rgb),.12));flex:1;position:relative}
.mini-system-line i {width:6px;height:6px;background:var(--accent);position:absolute;top:-2.5px;left:45%;transform:rotate(45deg);box-shadow:0 0 13px rgba(var(--accent-rgb),.6)}
.mini-facts {display:grid;gap:20px}
.mini-facts div {display:flex;flex-direction:column;gap:8px}
.mini-facts span {font-size:9px;letter-spacing:.21em;color:#7280a4}
.mini-facts strong {font-size:10px;font-weight:550;color:#d5dff4;letter-spacing:.13em}
.side-note {margin-top:55px;font-size:9px;letter-spacing:.16em;color:#a5b1cf;line-height:1.6}
.side-note-dot {display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;vertical-align:1px;margin-right:9px}
.side-note small {display:inline-block;margin-top:7px;margin-left:14px;color:#7585a6;font-size:9px;letter-spacing:.06em}

.viewer-section {height:clamp(560px,51vw,765px);min-width:0;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:pan-y}
.viewer-glow {position:absolute;z-index:-3;pointer-events:none;inset:9% -10%;background:radial-gradient(ellipse at center,rgba(var(--accent-rgb),.075),rgba(55,64,127,.075) 31%,transparent 70%);transition:background 1s}
.orbit {pointer-events:none;z-index:-2;position:absolute;left:50%;top:50%;border:1px solid rgba(139,163,216,.19);border-radius:50%;transform-origin:center}
.orbit-a {width:94%;height:59%;transform:translate(-50%,-50%) rotate(-32deg)}
.orbit-b {width:76%;height:88%;border-color:rgba(147,163,214,.15);transform:translate(-50%,-50%) rotate(39deg)}
.orbit-c {width:90%;height:90%;border-color:rgba(140,157,213,.07);transform:translate(-50%,-50%) rotate(12deg)}
.orbit-a:after,.orbit-b:after {content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px 3px rgba(var(--accent-rgb),.52)}
.orbit-b:after {width:4px;height:4px;top:-2px;left:68%;background:#c5adff;box-shadow:0 0 9px #998ae1}
.orbit-a {animation:orbit-a 37s linear infinite}
.orbit-b {animation:orbit-b 53s linear infinite reverse}
@keyframes orbit-a {to{transform:translate(-50%,-50%) rotate(328deg)}}
@keyframes orbit-b {to{transform:translate(-50%,-50%) rotate(399deg)}}
.radial-lines {position:absolute;z-index:-2;inset:11%;border-radius:50%;background:repeating-conic-gradient(from -28deg,rgba(183,198,238,.07) 0deg 0.3deg,transparent .4deg 30deg);mask-image:radial-gradient(circle,transparent 52%,black 76%,transparent 77%);-webkit-mask-image:radial-gradient(circle,transparent 52%,black 76%,transparent 77%);opacity:.6}
.planet {position:absolute;z-index:-3;border-radius:50%;pointer-events:none}
.planet-neptune {width:122px;height:122px;right:5%;top:11%;background:radial-gradient(circle at 31% 26%,#8a7bb6 0%,#4b4c91 22%,#262f71 51%,#111632 80%);box-shadow:inset -17px -15px 24px rgba(2,4,23,.84),0 0 55px 14px rgba(99,71,173,.13);opacity:.87;animation:planet-float 17s ease-in-out infinite alternate}
.planet-neptune:after {content:"";position:absolute;inset:49% -35%;height:20%;border:3px solid rgba(179,167,218,.43);transform:rotate(-26deg);border-radius:50%;box-shadow:0 0 10px rgba(152,128,223,.23)}
.planet-surface {position:absolute;inset:9px;border-radius:50%;opacity:.24;background:repeating-linear-gradient(165deg,transparent 0 14px,rgba(216,203,254,.45) 17px,transparent 21px 31px)}
.planet-moon {width:38px;height:38px;left:7%;bottom:15%;background:radial-gradient(circle at 29% 28%,#cdd4e8 0%,#7383ab 39%,#222b56 78%);box-shadow:inset -7px -8px 12px #0d1434,0 0 22px rgba(189,188,244,.15);opacity:.73;animation:planet-float 11s ease-in-out -3s infinite alternate-reverse}
@keyframes planet-float {to{transform:translate3d(-9px,14px,0)}}
.viewer-meta {position:absolute;z-index:3;top:8%;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.19em;color:#aabbd7;white-space:nowrap;display:flex;align-items:center;gap:10px}
.viewer-meta-light {color:var(--accent);font-size:11px}
.viewer-meta-divider {color:#637596}
.viewer-inner {position:relative;height:79%;width:100%;max-width:630px;display:flex;align-items:center;justify-content:center}
#scene {display:block;width:100%;height:100%;position:relative;z-index:1;touch-action:none;user-select:none;cursor:grab;filter:drop-shadow(0 14px 19px rgba(0,0,0,.17))}
#scene:active{cursor:grabbing}
#cosmic-particles {position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none}
.pulse-ring {position:absolute;z-index:0;left:50%;top:50%;width:180px;height:180px;border:1px solid var(--accent);border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none}
.viewer-section.is-shaking .pulse-a {animation:pulse-out 1.08s ease-out 0s 1}
.viewer-section.is-shaking .pulse-b {animation:pulse-out 1.08s ease-out .18s 1}
@keyframes pulse-out {15%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50%) scale(2.75)}}
.viewer-bottom {position:absolute;z-index:3;bottom:9%;left:50%;transform:translateX(-50%);color:#a8c2d1;font-size:9px;letter-spacing:.23em;white-space:nowrap}
.viewer-bottom>span:first-child{font-size:19px;color:var(--accent);vertical-align:-3px;margin-right:12px}
.bottom-dot {color:var(--accent);margin:0 8px}
.view-decor {position:absolute;z-index:0;color:#adc4ff;opacity:.66;pointer-events:none;animation:twinkle 5s ease-in-out infinite alternate}
.view-decor-one {top:20%;left:10%;font-size:11px;color:var(--accent)}
.view-decor-two {right:2%;top:45%;font-size:17px;animation-delay:-1.8s}
.view-decor-three {left:16%;bottom:22%;font-size:8px;animation-delay:-3s}
@keyframes twinkle {to{opacity:.20;transform:scale(.82)}}
.coordinate-label {position:absolute;left:50%;top:91%;transform:translateX(-50%);white-space:nowrap;font-size:8px;letter-spacing:.23em;color:#6b80aa;opacity:.85}
.coordinate-label span {color:var(--accent)}
.canvas-error {z-index:5;position:absolute;top:45%;left:10%;right:10%;text-align:center;color:#ffd1ad;background:rgba(22,23,45,.8);border-radius:10px;padding:24px;font-size:12px;line-height:1.8}

.control-panel {z-index:4;padding:clamp(21px,2.2vw,32px) clamp(19px,2.1vw,31px);border:1px solid rgba(177,197,240,.20);border-radius:24px;background:linear-gradient(151deg,rgba(31,42,80,.81),rgba(17,25,49,.88) 60%,rgba(29,32,61,.81));box-shadow:0 20px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(221,227,255,.065);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.panel-header {padding-bottom:24px}
.panel-kicker {display:flex;align-items:center;gap:10px;font-size:9px;color:var(--accent);letter-spacing:.22em}
.panel-kicker>span:first-child {font-size:20px}
.panel-seq {margin-left:auto;color:#7b88ac;font-size:9px;letter-spacing:.08em}
.panel-header h2 {font-size:19px;letter-spacing:-.055em;margin:15px 0 10px;font-weight:700}
.panel-header p {font-size:11px;color:#a3b0ce;line-height:1.8;margin:0}
.selection-head {display:flex;align-items:center;gap:11px;font-size:12px;font-weight:700;color:#e4eafa;margin:6px 0 15px}
.step-no {font-size:10px;font-weight:600;color:var(--accent);letter-spacing:.13em}
.selection-head small {margin-left:auto;color:#7788ab;font-size:8px;letter-spacing:.15em;font-weight:500}
.color-list {display:grid;grid-template-columns:1fr 1fr;gap:9px}
.color-item {background:rgba(8,15,35,.36);border:1px solid rgba(142,161,203,.19);border-radius:10px;min-height:49px;padding:10px;display:flex;align-items:center;gap:9px;color:#d8deee;font-size:10px;text-align:left;transition:background .18s,border-color .18s,transform .18s}
.color-item:hover{background:rgba(75,87,137,.17);transform:translateY(-1px)}
.color-item.is-selected{background:rgba(var(--accent-rgb),.10);border-color:rgba(var(--accent-rgb),.75);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.045)}
.swatch {width:14px;height:14px;min-width:14px;border-radius:50%;box-shadow:0 0 13px currentColor}
.swatch.moon{background:#76ddd1;color:#76ddd1}.swatch.ruby{background:#f46a90;color:#f46a90}.swatch.amber{background:#f3c370;color:#f3c370}.swatch.violet{background:#b69aff;color:#b69aff}
.item-check {margin-left:auto;color:var(--accent);opacity:0}.is-selected .item-check{opacity:1}
.separator {height:1px;background:rgba(174,194,239,.14);margin:24px 0}
.slider-wrapper {display:flex;align-items:center;gap:12px}
#power {display:block;min-width:0;flex:1;accent-color:var(--accent);height:5px;cursor:pointer;appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,rgba(var(--accent-rgb),.80),rgba(151,157,199,.45));border-radius:99px}
#power::-webkit-slider-thumb{appearance:none;width:19px;height:19px;background:var(--accent);border:3px solid #dfe8f9;border-radius:50%;box-shadow:0 0 12px rgba(var(--accent-rgb),.45)}
#power::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border:2px solid #dfe8f9;border-radius:50%;box-shadow:0 0 12px rgba(var(--accent-rgb),.45)}
#powerText{font-size:10px;color:#d4e5eb;white-space:nowrap;letter-spacing:.04em}
.power-labels {display:flex;justify-content:space-between;margin:14px 60px 27px 0;color:#7587ab;font-size:9px;letter-spacing:.16em}
.roll-card {display:flex;align-items:center;min-height:96px;gap:12px;padding:17px 16px;margin-bottom:12px;border:1px solid rgba(var(--accent-rgb),.23);background:radial-gradient(ellipse at 95% 50%,rgba(var(--accent-rgb),.11),transparent 60%),rgba(26,48,75,.47);border-radius:12px}
.roll-card-text{flex:1;min-width:0}
.roll-title{font-size:10px;letter-spacing:.19em;color:var(--accent);white-space:nowrap}
.roll-title span {margin-left:7px}
.roll-subtitle {font-size:10px;color:#b0c0d8;margin-top:13px;line-height:1.5}
.roll-result {font-family:Georgia,serif;color:#eafbf8;font-size:49px;line-height:1;font-weight:400;min-width:52px;text-align:right;text-shadow:0 0 18px rgba(var(--accent-rgb),.35)}
.roll-result.flash{animation:number-bloom .65s ease-out}
@keyframes number-bloom {0%{transform:scale(.70);opacity:.4;filter:blur(8px)}55%{transform:scale(1.13);filter:blur(0)}100%{transform:scale(1)}}
.shake-button{width:100%;display:flex;align-items:center;gap:12px;justify-content:center;padding:16px 18px;border:0;border-radius:11px;color:#081e32;background:linear-gradient(110deg,var(--accent),#c4dfef);box-shadow:0 10px 28px rgba(var(--accent-rgb),.12);font-size:13px;font-weight:800;transition:filter .2s,transform .18s}
.shake-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.shake-button:active{transform:translateY(1px) scale(.993)}
.shake-button-icon {font-size:17px}.shake-button-arrow{font-size:18px;margin-left:auto;font-weight:400}
.small-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.ghost-button{border:1px solid rgba(156,179,224,.17);background:rgba(17,26,53,.4);color:#c3cde4;min-height:43px;border-radius:9px;font-size:11px;transition:background .2s,border-color .2s}
.ghost-button:hover{border-color:rgba(var(--accent-rgb),.5);background:rgba(82,107,137,.12)}
.ghost-button span:first-child{margin-right:7px;font-size:15px}
.panel-note{color:#7384a4;text-align:center;font-size:9px;line-height:2.2;margin:18px 0 0}
.footer {display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid rgba(180,202,250,.11);min-height:69px;color:#697a9e;font-size:9px;letter-spacing:.19em}
.footer-star{color:var(--accent);margin-left:5px}

body.motion-off .nebula,body.motion-off .planet,body.motion-off .orbit,body.motion-off .view-decor {animation-play-state:paused!important}
body.motion-off .cosmic-backdrop .nebula{will-change:auto}
@media(min-width:1440px){.layout{min-height:760px}.viewer-section{height:750px}.control-panel{max-width:380px;width:100%;justify-self:end}}
@media(max-width:1170px){
 .app{padding-inline:28px}.topbar-center{display:none}.topbar{grid-template-columns:1fr 1fr}
 .layout{grid-template-columns:220px minmax(310px,1fr) minmax(270px,320px);gap:12px}
 .intro h1{font-size:33px}.intro-text{font-size:11px}.mini-system{width:170px}.side-note{display:none}
 .control-panel{padding:22px 17px}.viewer-section{height:660px}
 .panel-header h2{font-size:16px}.color-item{padding:8px;font-size:9px}
}
@media(max-width:940px){
 .layout{grid-template-columns:minmax(0,1fr) minmax(290px,340px);grid-template-areas:"hero hero" "viewer panel";min-height:0;align-items:center;row-gap:10px;padding:22px 0 33px}
 .intro{grid-area:hero;width:100%;max-width:none;padding-top:13px;display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:center}
 .intro .eyebrow{grid-column:1 / -1}.intro h1{font-size:37px;line-height:1.4;margin:16px 0 7px}.intro-text{justify-self:end;font-size:11px}
 .mini-system,.mini-facts,.side-note{display:none}
 .viewer-section{grid-area:viewer;height:570px}.control-panel{grid-area:panel;justify-self:stretch}
 .planet-neptune{right:0}.viewer-meta{top:3%}.coordinate-label{display:none}.viewer-bottom{bottom:6%}
}
@media(max-width:650px){
 .app{padding:0 16px}.topbar{height:66px;min-height:66px;gap:12px}.brand{font-size:10px;gap:9px;letter-spacing:.14em}.brand-mark{font-size:26px}
 .header-actions{gap:10px}.motion-toggle{padding:7px 8px;font-size:9px}.motion-toggle .tiny-star{font-size:12px}.status{font-size:0;letter-spacing:0;gap:0}.status-dot{height:7px;width:7px}
 .layout{grid-template-columns:1fr;grid-template-areas:"hero" "viewer" "panel";padding-top:20px;row-gap:6px}
 .intro{display:block;text-align:center;padding:0}.eyebrow{justify-content:center;font-size:9px}.intro h1{font-size:38px;margin:17px 0 8px;line-height:1.3}
 .intro h1 br{display:none}.intro h1 em{margin-left:.2em}.intro-text{font-size:11px;line-height:1.9;margin:0 auto;max-width:315px}.intro-text br:nth-child(2){display:none}
 .viewer-section{height:min(115vw,510px);min-height:380px;margin:4px -16px 0}
 .viewer-meta{top:1%;font-size:8px}.viewer-bottom{bottom:1%;font-size:8px}.viewer-inner{height:93%}
 .orbit-a{width:78%;height:61%}.orbit-b{width:69%;height:85%}.planet-neptune{width:75px;height:75px;right:14%;top:8%}.planet-moon{width:28px;height:28px}
 .coordinate-label,.view-decor-three{display:none}
 .control-panel{max-width:540px;margin:0 auto 28px;width:100%;padding:23px 20px 21px;border-radius:18px}
 .panel-header{padding-bottom:17px}.panel-header h2{font-size:20px}
 .color-item{font-size:11px}.footer{min-height:64px;font-size:8px;line-height:1.6}.footer span:first-child{display:none}.footer span:last-child{margin:auto}
}
@media(max-width:380px){.motion-toggle #motionLabel{display:none}.motion-toggle{padding:7px 11px}.intro h1{font-size:33px}.viewer-section{height:405px}.panel-header h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){
 .nebula,.planet,.orbit,.view-decor{animation:none!important}.motion-toggle,.shake-button,.ghost-button,.color-item{transition:none!important}
 .viewer-section.is-shaking .pulse-ring,.roll-result.flash{animation:none!important}
}