:root{
  --pointer-x:50vw;
  --pointer-y:38vh;
  --layer-x:0px;
  --layer-y:0px;
  --theme-glow:rgba(49,192,255,.22);
  --theme-veil:rgba(0,14,33,.62);
  --theme-stars:#b8eaff;
  --theme-stars-soft:#4ac7f6;
}

body{
  background:
    radial-gradient(ellipse 58% 35% at 75% 8%,var(--theme-glow),transparent 70%),
    radial-gradient(ellipse 40% 28% at 8% 68%,rgba(88,34,121,.14),transparent 75%),
    linear-gradient(145deg,#06182a 0%,var(--night) 42%,#020914 100%);
  background-attachment:fixed;
  transition:background-color .5s ease,color .35s ease;
}

.stars{
  opacity:.74;
  overflow:hidden;
  background-image:
    radial-gradient(var(--theme-stars) 1.05px,transparent 1.7px),
    radial-gradient(var(--theme-stars-soft) .8px,transparent 1.6px);
  background-size:43px 43px,117px 117px;
  background-position:0 0,23px 41px;
  transition:opacity .48s ease,filter .48s ease;
}

.stars:before,.stars:after{
  content:"";
  position:absolute;
  inset:-3%;
  pointer-events:none;
}

.stars:before{
  inset:0;
  background:
    radial-gradient(circle 2px at var(--pointer-x) var(--pointer-y),#fff 0 45%,transparent 60%),
    radial-gradient(circle 62px at var(--pointer-x) var(--pointer-y),transparent 0 91%,rgba(105,228,255,.38) 93% 94%,transparent 96%),
    radial-gradient(circle 180px at var(--pointer-x) var(--pointer-y),rgba(65,208,255,.13),transparent 72%);
  opacity:.72;
  transition:opacity .25s ease,filter .25s ease;
}

.stars:after{
  background:radial-gradient(ellipse at 50% 45%,transparent 0 36%,var(--theme-veil) 100%);
  mix-blend-mode:multiply;
  transform:translate3d(var(--layer-x),var(--layer-y),0) scale(1.04);
  transition:transform .14s linear,opacity .35s ease;
}

:root.pointer-down .stars:before{filter:brightness(1.45);opacity:1}
:root.theme-changing .stars{opacity:.18;filter:blur(4px)}

/* Retractable mission console. */
.theme-console{
  position:fixed;
  z-index:25;
  right:0;
  top:50%;
  width:230px;
  display:grid;
  grid-template-columns:44px 186px;
  transform:translate(calc(100% - 44px),-50%);
  border:1px solid var(--line);
  border-right:0;
  border-radius:7px 0 0 7px;
  background:color-mix(in srgb,var(--night) 88%,transparent);
  box-shadow:0 1rem 3rem #0009,-1px 0 18px color-mix(in srgb,var(--cyan) 14%,transparent);
  backdrop-filter:blur(14px);
  transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
}

.theme-console:hover,.theme-console:has(.theme-option:focus-visible),.theme-console[data-pinned="true"]{
  transform:translate(0,-50%);
  border-color:color-mix(in srgb,var(--cyan) 55%,transparent);
  box-shadow:0 1rem 3rem #000b,-4px 0 24px color-mix(in srgb,var(--cyan) 22%,transparent);
}

.theme-console-toggle{
  width:44px;
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  padding:.75rem .45rem;
  border:0;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 11%,transparent),transparent 35% 65%,color-mix(in srgb,var(--pink) 10%,transparent));
  color:var(--ink);
  cursor:pointer;
  font:750 .7rem/1 inherit;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.theme-toggle-label{writing-mode:vertical-rl;transform:rotate(180deg)}
.theme-toggle-icon{font-size:1rem;color:var(--cyan);filter:drop-shadow(0 0 7px var(--cyan));transition:transform .35s ease}
.theme-console:hover .theme-toggle-icon,.theme-console:has(.theme-option:focus-visible) .theme-toggle-icon,.theme-console[data-pinned="true"] .theme-toggle-icon{transform:rotate(135deg) scale(1.15)}
.theme-options{padding:.7rem}
.theme-options>p{margin:.15rem .25rem .65rem;font:700 .58rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);letter-spacing:.11em}
.theme-option{width:100%;display:flex;align-items:center;gap:.55rem;border:1px solid transparent;background:transparent;color:var(--muted);padding:.42rem;border-radius:4px;text-align:left;cursor:pointer;font:600 .72rem/1.15 inherit;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.theme-option:hover,.theme-option[aria-pressed="true"]{color:var(--ink);background:color-mix(in srgb,var(--cyan) 10%,transparent);border-color:color-mix(in srgb,var(--cyan) 33%,transparent)}
.theme-option small{display:block;margin-top:.14rem;color:var(--muted);font-size:.61rem;font-weight:500}
.theme-swatch{width:29px;height:29px;flex:none;border:1px solid #ffffff33;border-radius:50%;background:#14375a;box-shadow:inset 0 0 0 3px #0003}
.theme-swatch-default{background:radial-gradient(circle at 30% 25%,#b8eaff 0 3%,transparent 4%),radial-gradient(circle at 70% 60%,#1ecff3 0 2%,transparent 3%),linear-gradient(145deg,#0f3d67,#07111f)}
.theme-swatch-city{background:linear-gradient(135deg,#0b6d84,#102449 48%,#f854b9)}
.theme-swatch-labyrinth{background:radial-gradient(circle at 55% 40%,#f9bb61 0 3%,transparent 4%),repeating-linear-gradient(45deg,#18291d 0 4px,#0b0b0a 5px 8px)}
.theme-swatch-steampunk{background:repeating-radial-gradient(circle at 50% 50%,#e5a35d 0 2px,#423128 3px 7px,#101a20 8px 10px)}
.theme-swatch-lava{background:radial-gradient(circle at 40% 35%,#ffe07d 0 7%,#ef6135 8% 22%,#631a1a 39%,#16090b 72%)}
.theme-swatch-surface{background:radial-gradient(circle at 30% 38%,#dae7ec 0 5%,#748895 7% 19%,#243542 42%,#0a121b 70%)}

/* City Moon: neon navigation grid and a cursor-controlled search light. */
:root[data-theme="city-moon"]{
  --ink:#e8feff;--muted:#9bc8d5;--night:#061a2a;--night-soft:#082c3b;--line:rgba(88,238,246,.28);--cyan:#64f2ef;--pink:#fb79d2;--theme-glow:rgba(0,241,234,.24);--theme-veil:rgba(1,13,32,.48);--theme-stars:#bbffff;--theme-stars-soft:#f45acc;
}
:root[data-theme="city-moon"] body{
  background:
    radial-gradient(ellipse 65% 48% at 78% 5%,rgba(19,111,154,.5),transparent 66%),
    radial-gradient(ellipse 38% 35% at 10% 85%,rgba(215,48,172,.24),transparent 72%),
    linear-gradient(135deg,#031521,#071b31 50%,#29102f);
}
:root[data-theme="city-moon"] .stars{
  opacity:.86;
  background-image:
    radial-gradient(#d9ffff 1px,transparent 1.7px),
    linear-gradient(rgba(100,242,239,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(251,121,210,.065) 1px,transparent 1px),
    linear-gradient(165deg,transparent 0 48%,rgba(100,242,239,.1) 49%,transparent 50%);
  background-size:83px 83px,48px 48px,48px 48px,190px 190px;
}
:root[data-theme="city-moon"] .stars:before{
  background:
    radial-gradient(circle 3px at var(--pointer-x) var(--pointer-y),#fff 0 45%,transparent 58%),
    radial-gradient(circle 96px at var(--pointer-x) var(--pointer-y),rgba(100,242,239,.26),rgba(77,90,255,.1) 45%,transparent 72%),
    conic-gradient(from 225deg at var(--pointer-x) var(--pointer-y),transparent 0 42%,rgba(251,121,210,.12) 47%,rgba(100,242,239,.18) 50%,transparent 55%);
  mix-blend-mode:screen;
}
:root[data-theme="city-moon"] .stars:after{
  background:
    repeating-linear-gradient(90deg,#020913 0 34px,#07192a 35px 56px,#030c18 57px 78px),
    repeating-linear-gradient(0deg,transparent 0 13px,rgba(100,242,239,.12) 14px 15px,transparent 16px 29px);
  -webkit-mask-image:linear-gradient(to top,#000 0 17%,rgba(0,0,0,.8) 31%,transparent 61%);
  mask-image:linear-gradient(to top,#000 0 17%,rgba(0,0,0,.8) 31%,transparent 61%);
  mix-blend-mode:screen;
}

/* Labyrinth: geometric walls; the pointer behaves like a torch. */
:root[data-theme="labyrinth"]{
  --ink:#f5e8ce;--muted:#c4b99d;--night:#12140f;--night-soft:#252617;--line:rgba(249,190,99,.25);--cyan:#f5bd62;--pink:#d67d5c;--theme-glow:rgba(150,113,39,.25);--theme-veil:rgba(1,5,1,.7);--theme-stars:#f5cf91;--theme-stars-soft:#9d7b40;
}
:root[data-theme="labyrinth"] body{
  background:
    radial-gradient(ellipse 48% 44% at 70% 8%,rgba(134,96,42,.32),transparent 66%),
    linear-gradient(130deg,#172017,#10130d 58%,#2a1a11);
}
:root[data-theme="labyrinth"] .stars{
  opacity:.82;
  background-image:
    repeating-linear-gradient(45deg,rgba(245,189,98,.14) 0 1px,transparent 1px 68px),
    repeating-linear-gradient(-45deg,rgba(159,121,61,.12) 0 1px,transparent 1px 68px),
    radial-gradient(rgba(245,207,145,.45) .8px,transparent 1.5px);
  background-size:96px 96px,96px 96px,121px 121px;
}
:root[data-theme="labyrinth"] .stars:before{
  background:
    radial-gradient(circle 2px at var(--pointer-x) var(--pointer-y),#fff7cf 0 45%,transparent 62%),
    radial-gradient(circle 185px at var(--pointer-x) var(--pointer-y),rgba(255,186,77,.3),rgba(144,79,25,.12) 42%,transparent 72%);
  mix-blend-mode:screen;
}
:root[data-theme="labyrinth"] .stars:after{
  inset:0;
  background:
    radial-gradient(circle 205px at var(--pointer-x) var(--pointer-y),transparent 0 45%,rgba(4,8,3,.14) 70%,rgba(2,5,2,.48) 100%),
    repeating-linear-gradient(90deg,transparent 0 95px,rgba(245,189,98,.045) 96px 98px);
  transform:none;
  mix-blend-mode:multiply;
}

/* Orbital ship: copper instruments and mechanical resonance. */
:root[data-theme="steampunk"]{
  --ink:#f7e9d0;--muted:#c1ad91;--night:#131b20;--night-soft:#253035;--line:rgba(224,158,84,.27);--cyan:#e8a45e;--pink:#d47950;--theme-glow:rgba(209,130,55,.22);--theme-veil:rgba(7,10,11,.57);--theme-stars:#ffe0a7;--theme-stars-soft:#bd8552;
}
:root[data-theme="steampunk"] body{
  background:
    radial-gradient(circle at 75% 12%,rgba(153,102,58,.34),transparent 38%),
    linear-gradient(135deg,#17262d,#131719 55%,#422a1e);
}
:root[data-theme="steampunk"] .stars{
  opacity:.82;
  background-image:
    repeating-radial-gradient(circle at 72% 18%,rgba(232,164,94,.16) 0 2px,transparent 3px 21px),
    repeating-radial-gradient(circle at 18% 78%,rgba(189,133,82,.1) 0 1px,transparent 2px 29px),
    linear-gradient(rgba(255,224,167,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,224,167,.04) 1px,transparent 1px);
  background-size:auto,auto,64px 64px,64px 64px;
}
:root[data-theme="steampunk"] .stars:before{
  background:
    repeating-radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(255,220,155,.34) 0 2px,transparent 3px 15px,rgba(174,102,47,.22) 16px 17px,transparent 18px 31px),
    radial-gradient(circle 175px at var(--pointer-x) var(--pointer-y),rgba(224,158,84,.2),transparent 72%);
  -webkit-mask-image:radial-gradient(circle 185px at var(--pointer-x) var(--pointer-y),#000 0 62%,transparent 100%);
  mask-image:radial-gradient(circle 185px at var(--pointer-x) var(--pointer-y),#000 0 62%,transparent 100%);
}
:root[data-theme="steampunk"] .stars:after{
  background:
    radial-gradient(circle at 72% 18%,transparent 0 78px,rgba(232,164,94,.18) 79px 81px,transparent 82px),
    radial-gradient(circle at 18% 78%,transparent 0 54px,rgba(189,133,82,.14) 55px 57px,transparent 58px),
    radial-gradient(ellipse at 50% 45%,transparent 0 34%,rgba(7,10,11,.62) 100%);
  mix-blend-mode:normal;
}

/* Lava world: flowing cracks, embers and a heat bloom under the pointer. */
:root[data-theme="lava"]{
  --ink:#fff0dc;--muted:#d3a997;--night:#210a0d;--night-soft:#3c1516;--line:rgba(255,133,72,.28);--cyan:#ff9a4f;--pink:#ff5757;--theme-glow:rgba(255,70,24,.34);--theme-veil:rgba(38,1,3,.48);--theme-stars:#ffd184;--theme-stars-soft:#ff5b3d;
}
:root[data-theme="lava"] body{
  background:
    radial-gradient(ellipse 58% 40% at 78% 7%,rgba(231,76,36,.3),transparent 69%),
    radial-gradient(ellipse 45% 35% at 9% 85%,rgba(255,94,31,.16),transparent 72%),
    linear-gradient(130deg,#2b080a,#16070a 55%,#4b140d);
}
:root[data-theme="lava"] .stars{
  opacity:.78;
  background-image:
    repeating-linear-gradient(112deg,transparent 0 46px,rgba(255,78,24,.16) 47px,rgba(255,194,73,.09) 49px,transparent 51px 118px),
    repeating-linear-gradient(24deg,transparent 0 73px,rgba(255,111,42,.1) 74px 75px,transparent 77px 151px),
    radial-gradient(#ffd184 1px,transparent 1.7px),
    radial-gradient(#ff5b3d .9px,transparent 1.7px);
  background-size:210px 260px,280px 190px,91px 91px,147px 147px;
}
:root[data-theme="lava"] .stars:before{
  background:
    radial-gradient(circle 4px at var(--pointer-x) var(--pointer-y),#fff2a8 0 45%,transparent 62%),
    radial-gradient(circle 145px at var(--pointer-x) var(--pointer-y),rgba(255,211,94,.38),rgba(255,74,20,.2) 34%,rgba(127,17,9,.08) 58%,transparent 75%);
  mix-blend-mode:screen;
  filter:blur(2px);
}
:root[data-theme="lava"] .stars:after{
  background:
    radial-gradient(circle,rgba(255,202,93,.55) 0 1px,transparent 2px),
    radial-gradient(circle,rgba(255,80,29,.5) 0 1px,transparent 2px),
    linear-gradient(to top,rgba(74,8,7,.42),transparent 55%);
  background-size:83px 117px,137px 173px,100% 100%;
  background-position:0 20px,42px 71px,0 0;
  mix-blend-mode:screen;
}

/* Lunar surface: crater field and a surveying scanner. */
:root[data-theme="lunar-surface"]{
  --ink:#eff7fb;--muted:#b3c4d0;--night:#0a1520;--night-soft:#182936;--line:rgba(183,226,242,.25);--cyan:#a8e8ff;--pink:#a2bce5;--theme-glow:rgba(137,205,240,.23);--theme-veil:rgba(4,13,24,.54);--theme-stars:#eff9ff;--theme-stars-soft:#88b5cf;
}
:root[data-theme="lunar-surface"] body{
  background:
    radial-gradient(ellipse 72% 52% at 79% 4%,rgba(108,135,154,.32),transparent 65%),
    linear-gradient(145deg,#142938,#09141e 57%,#223541);
}
:root[data-theme="lunar-surface"] .stars{
  opacity:.8;
  background-image:
    radial-gradient(circle at 24% 68%,transparent 0 16px,rgba(202,225,235,.14) 17px 18px,transparent 20px),
    radial-gradient(circle at 72% 32%,transparent 0 27px,rgba(119,154,174,.12) 28px 30px,transparent 32px),
    radial-gradient(circle at 42% 85%,rgba(225,240,247,.12) 0 4px,transparent 5px),
    radial-gradient(rgba(239,249,255,.55) .9px,transparent 1.6px);
  background-size:260px 190px,390px 280px,137px 111px,109px 109px;
}
:root[data-theme="lunar-surface"] .stars:before{
  background:
    radial-gradient(circle 2px at var(--pointer-x) var(--pointer-y),#fff 0 45%,transparent 65%),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),transparent 0 47px,rgba(168,232,255,.58) 49px 50px,transparent 52px 83px,rgba(162,188,229,.28) 85px 86px,transparent 88px),
    radial-gradient(circle 170px at var(--pointer-x) var(--pointer-y),rgba(168,232,255,.12),transparent 72%);
  mix-blend-mode:screen;
}
:root[data-theme="lunar-surface"] .stars:after{
  background:
    radial-gradient(ellipse 105% 42% at 50% 112%,rgba(188,211,222,.25),rgba(79,105,119,.12) 42%,transparent 70%),
    radial-gradient(ellipse at 50% 45%,transparent 0 37%,rgba(4,13,24,.55) 100%);
  mix-blend-mode:normal;
}

@keyframes city-grid{from{background-position:0 0,0 0,0 0,0 0}to{background-position:0 166px,0 96px,96px 0,190px 190px}}
@keyframes labyrinth-shift{from{background-position:0 0,0 0,0 0}to{background-position:96px 96px,-96px 96px,121px 0}}
@keyframes orbital-shift{from{background-position:0 0,0 0,0 0,0 0}to{background-position:42px 21px,-58px 29px,64px 64px,-64px 64px}}
@keyframes lava-flow{from{background-position:0 0,0 0,0 0,0 0}to{background-position:210px 260px,-280px 190px,0 -182px,147px -294px}}
@keyframes ember-rise{from{background-position:0 120px,42px 171px,0 0}to{background-position:18px -231px,0 -448px,0 0}}
@keyframes lunar-drift{from{background-position:0 0,0 0,0 0,0 0}to{background-position:26px 12px,-39px 14px,137px 0,0 218px}}

/* Lightweight click responses: every environment answers in its own visual language. */
.theme-burst{position:fixed;z-index:24;left:var(--burst-x);top:var(--burst-y);width:1px;height:1px;pointer-events:none;animation:burst-life 1.2s linear both}
.theme-burst:before,.theme-burst:after{position:absolute;display:block;pointer-events:none}
.theme-burst-default:before{content:"";left:-38px;top:-38px;width:76px;height:76px;border:1px solid var(--cyan);border-radius:50%;box-shadow:0 0 18px color-mix(in srgb,var(--cyan) 50%,transparent),inset 0 0 18px color-mix(in srgb,var(--cyan) 16%,transparent);animation:deep-signal 1s ease-out both}
.theme-burst-default:after{content:"✦";left:0;top:0;color:#fff;font-size:1.3rem;line-height:1;text-shadow:0 0 9px var(--cyan),0 0 22px var(--pink);animation:deep-star .9s ease-out both}
.theme-burst-city-moon:before{content:"";left:-54px;top:-54px;width:108px;height:108px;border:1px solid #64f2ef;clip-path:polygon(0 0,31% 0,31% 2%,2% 2%,2% 31%,0 31%,0 0,100% 0,100% 31%,98% 31%,98% 2%,69% 2%,69% 0,100% 0,100% 100%,69% 100%,69% 98%,98% 98%,98% 69%,100% 69%,100% 100%,0 100%,0 69%,2% 69%,2% 98%,31% 98%,31% 100%,0 100%);box-shadow:0 0 22px rgba(100,242,239,.55);animation:city-lock .9s cubic-bezier(.2,.8,.2,1) both}
.theme-burst-city-moon:after{content:"";left:-76px;top:-1px;width:152px;height:2px;background:linear-gradient(90deg,transparent,#fb79d2,#fff,#64f2ef,transparent);box-shadow:0 0 10px #64f2ef;animation:city-sweep .85s ease-out both}
.theme-burst-labyrinth:before{content:"";left:-35px;top:-35px;width:70px;height:70px;border:2px dashed #f5bd62;box-shadow:0 0 22px rgba(245,189,98,.4),inset 0 0 25px rgba(245,189,98,.12);animation:labyrinth-rune 1.05s ease-out both}
.theme-burst-labyrinth:after{content:"◇";left:0;top:0;color:#fff2bd;font-size:2rem;line-height:1;text-shadow:0 0 8px #f5bd62,0 0 28px #d67d5c;animation:torch-mark .9s ease-out both}
.theme-burst-steampunk:before{content:"⚙";left:0;top:0;color:#e8a45e;font:2.9rem/1 Georgia,serif;text-shadow:0 0 9px #000,0 0 15px rgba(232,164,94,.65);animation:gear-clockwise 1.1s cubic-bezier(.2,.8,.2,1) both}
.theme-burst-steampunk:after{content:"⚙";left:27px;top:18px;color:#f7e9d0;font:1.35rem/1 Georgia,serif;text-shadow:0 0 8px rgba(232,164,94,.8);animation:gear-counter 1s ease-out both}
.theme-burst-lava:before{content:"";left:-20px;top:-20px;width:40px;height:40px;border:2px solid #ffd184;border-radius:50%;box-shadow:0 0 13px #ff9a4f,0 0 32px rgba(255,87,30,.65),inset 0 0 14px rgba(255,214,100,.55);animation:lava-shock 1s ease-out both}
.theme-burst-lava:after{content:"";left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff4a2;box-shadow:0 0 14px 6px #ff6d2e;animation:lava-core .65s ease-out both}
.theme-burst-lava i{position:absolute;left:-2px;top:-2px;width:4px;height:11px;border-radius:50%;background:#ffd184;box-shadow:0 0 7px #ff5b3d;transform-origin:2px 2px;animation:ember-pop .9s ease-out both;transform:rotate(var(--spark-angle)) translateY(-8px)}
.theme-burst-lunar-surface:before{content:"";left:-48px;top:-48px;width:96px;height:96px;border:1px solid #a8e8ff;border-radius:50%;box-shadow:0 0 0 10px rgba(168,232,255,.06),0 0 0 24px rgba(162,188,229,.05),0 0 24px rgba(168,232,255,.4);animation:lunar-target 1.05s ease-out both}
.theme-burst-lunar-surface:after{content:attr(data-coords);left:18px;top:18px;width:max-content;padding:.22rem .35rem;border-left:1px solid #a8e8ff;color:#dff7ff;background:rgba(4,13,24,.72);font:700 .56rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-shadow:0 0 8px #a8e8ff;animation:lunar-label .9s ease-out both}

@keyframes burst-life{0%,78%{opacity:1}100%{opacity:0}}
@keyframes deep-signal{0%{opacity:0;transform:scale(.2)}45%{opacity:1}100%{opacity:0;transform:scale(1.65)}}
@keyframes deep-star{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}45%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(90deg)}}
@keyframes city-lock{0%{opacity:0;transform:scale(1.5) rotate(-10deg)}55%{opacity:1;transform:scale(.9) rotate(0)}100%{opacity:0;transform:scale(1.05)}}
@keyframes city-sweep{0%{opacity:0;transform:rotate(-35deg) scaleX(.2)}45%{opacity:1}100%{opacity:0;transform:rotate(0) scaleX(1.2)}}
@keyframes labyrinth-rune{0%{opacity:0;transform:scale(.3) rotate(0)}55%{opacity:1}100%{opacity:0;transform:scale(1.5) rotate(135deg)}}
@keyframes torch-mark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}38%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@keyframes gear-clockwise{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}45%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15) rotate(210deg)}}
@keyframes gear-counter{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1) rotate(-240deg)}}
@keyframes lava-shock{0%{opacity:0;transform:scale(.25)}42%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
@keyframes lava-core{0%{opacity:0;transform:scale(.3)}45%{opacity:1}100%{opacity:0;transform:scale(2.6)}}
@keyframes ember-pop{0%{opacity:0;transform:rotate(var(--spark-angle)) translateY(-6px) scale(.4)}28%{opacity:1}100%{opacity:0;transform:rotate(var(--spark-angle)) translateY(-72px) scale(.1)}}
@keyframes lunar-target{0%{opacity:0;transform:scale(1.65)}45%{opacity:1;transform:scale(.82)}100%{opacity:0;transform:scale(1.15)}}
@keyframes lunar-label{0%{opacity:0;transform:translate(-8px,8px)}38%{opacity:1;transform:none}100%{opacity:0;transform:translate(8px,-4px)}}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :root[data-theme="city-moon"] .feature-grid article:hover{background:linear-gradient(135deg,rgba(100,242,239,.09),rgba(251,121,210,.055));text-shadow:0 0 12px rgba(100,242,239,.18)}
  :root[data-theme="city-moon"] .image-frame:hover:before{box-shadow:0 0 12px rgba(100,242,239,.65),0 0 35px rgba(251,121,210,.2)}
  :root[data-theme="labyrinth"] .image-frame:hover:before{border-style:dashed;box-shadow:0 0 18px rgba(245,189,98,.38),inset 0 0 30px rgba(245,189,98,.08)}
  :root[data-theme="labyrinth"] .feature-grid article:hover{background:repeating-linear-gradient(45deg,rgba(245,189,98,.045) 0 1px,transparent 1px 13px)}
  :root[data-theme="steampunk"] .theme-swatch-steampunk{animation:swatch-gear 8s linear infinite}
  :root[data-theme="steampunk"] .feature-grid article:hover{background:repeating-radial-gradient(circle at 50% 50%,rgba(232,164,94,.055) 0 2px,transparent 3px 13px)}
  :root[data-theme="lava"] .image-frame:hover img{filter:brightness(1.15) saturate(1.22) sepia(.08)}
  :root[data-theme="lava"] .feature-grid article:hover{box-shadow:inset 0 -24px 36px rgba(255,71,24,.11),0 8px 28px rgba(84,5,3,.45)}
  :root[data-theme="lunar-surface"] .image-frame:hover img{filter:brightness(1.1) contrast(1.08) saturate(.86)}
  :root[data-theme="lunar-surface"] .feature-grid article:hover{background:radial-gradient(circle at 50% 120%,rgba(168,232,255,.11),transparent 62%)}
  :root.pointer-down[data-theme="city-moon"] .stars:before{filter:brightness(1.65) hue-rotate(12deg)}
  :root.pointer-down[data-theme="labyrinth"] .stars:before{filter:brightness(1.55) blur(1px)}
  :root.pointer-down[data-theme="steampunk"] .stars:before{filter:brightness(1.45) sepia(.25)}
  :root.pointer-down[data-theme="lava"] .stars:before{filter:brightness(1.8) blur(4px)}
  :root.pointer-down[data-theme="lunar-surface"] .stars:before{filter:brightness(1.65) drop-shadow(0 0 12px rgba(168,232,255,.5))}
}

@keyframes swatch-gear{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:no-preference){
  :root[data-theme="city-moon"] .stars{animation:city-grid 30s linear infinite}
  :root[data-theme="labyrinth"] .stars{animation:labyrinth-shift 24s linear infinite}
  :root[data-theme="steampunk"] .stars{animation:orbital-shift 38s linear infinite}
  :root[data-theme="lava"] .stars{animation:lava-flow 28s linear infinite}
  :root[data-theme="lava"] .stars:after{animation:ember-rise 18s linear infinite}
  :root[data-theme="lunar-surface"] .stars{animation:lunar-drift 42s linear infinite}
}

@media (max-width:1080px){
  .theme-console{
    top:auto;
    right:auto;
    bottom:1rem;
    left:1rem;
    width:220px;
    display:block;
    transform:none;
    border:1px solid var(--line);
    border-radius:6px;
  }
  .theme-console:hover,.theme-console:has(.theme-option:focus-visible),.theme-console[data-pinned="true"]{transform:none}
  .theme-console-toggle{width:100%;min-height:0;flex-direction:row;padding:.72rem .9rem;border-right:0;border-bottom:1px solid var(--line)}
  .theme-toggle-label{writing-mode:horizontal-tb;transform:none}
  .theme-options{max-height:54vh;overflow:auto}
  .theme-console:not([data-pinned="true"]) .theme-options{display:none}
}

@media (max-width:520px){
  .theme-console{right:0;bottom:0;left:0;width:100%;border-right:0;border-bottom:0;border-left:0;border-radius:0}
  .theme-console-toggle{justify-content:center}
  .theme-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.15rem;padding:.55rem}
  .theme-options>p{grid-column:1/-1}
  .theme-option{padding:.32rem;font-size:.68rem}
  .theme-swatch{width:24px;height:24px}
  .theme-option small{display:none}
}

@media (prefers-reduced-motion:reduce){
  .stars:before{display:none}
  .theme-console{transition:none}
}