:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #e9e4d8;
  background: #111513;
  color-scheme: dark;
  --tone: #a6a6a6;
  --tone-bright: #d1d1d1;
  --tone-rgb: 166 166 166;
  --light-opacity: .08;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-width: 240px; min-height: 100svh; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }

.atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 50% 37%, #232821 0, #151b17 40%, #111513 78%); }
.northern-light { position: absolute; width: 85%; height: 110%; left: 16%; top: -72%; transform: rotate(-29deg); background: radial-gradient(ellipse, #6c806514, transparent 64%); filter: blur(35px); }
.horizon-glow { position: absolute; inset: 48% 10% 0; background: radial-gradient(ellipse at 50% 100%, #9571390d, transparent 68%); }
.landscape { position: absolute; width: 100%; height: 32%; bottom: 0; opacity: .65; }
.far-ridge { fill: #1a201b; }
.near-ridge { fill: #111612; }
.grain { position: absolute; inset: 0; opacity: .17; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.17' filter='url(%23noise)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); pointer-events: none; }

.control-room { min-height: 100svh; display: grid; place-items: center; padding: 20px 0; }
.power-control { position: relative; width: min(360px, calc(100vw - 24px)); aspect-ratio: 1; display: grid; place-items: center; }
.orbit, .startup-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .75s ease; }
.orbit-line { fill: none; stroke: rgb(var(--tone-rgb) / .4); stroke-width: .7; stroke-dasharray: 157 7; transform-origin: center; transform: rotate(3deg); }
.orbit-corners { fill: none; stroke: rgb(var(--tone-rgb) / .7); stroke-width: 1; }
.orbit-runes { fill: none; stroke: rgb(var(--tone-rgb) / .58); stroke-width: .9; }
.orbit-diamonds { fill: rgb(var(--tone-rgb) / .72); }
.startup-track { fill: none; stroke: rgb(var(--tone-rgb) / .1); stroke-width: 1; }
.startup-rotor { transform-origin: 180px 180px; animation: orbit-turn 1.8s linear infinite; animation-play-state: paused; }
.startup-trail, .startup-arc { fill: none; stroke: var(--tone); stroke-linecap: round; transform-origin: center; transform: rotate(-90deg); }
.startup-trail { stroke-width: 1.5; stroke-dasharray: 230 669; stroke-dashoffset: 230; opacity: .2; }
.startup-arc { stroke-width: 2; stroke-dasharray: 115 784; stroke-dashoffset: 115; filter: drop-shadow(0 0 5px rgb(var(--tone-rgb) / .6)); }
.startup-spark { fill: var(--tone-bright); filter: drop-shadow(0 0 7px var(--tone)); }

.power-button { position: relative; width: 66.6667%; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; outline-offset: 14px; background: transparent; cursor: pointer; }
.power-button:focus-visible { outline: 1px solid var(--tone-bright); }
.power-disc { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border: 1px solid rgb(var(--tone-rgb) / .35); border-radius: 50%; background: radial-gradient(circle at 50% 15%, #39393959, transparent 67%), linear-gradient(145deg, #252525, #191919); box-shadow: 0 0 0 7px #131313, 0 0 0 8px rgb(var(--tone-rgb) / .15), inset 0 0 0 8px #17171770, inset 0 0 0 9px rgb(var(--tone-rgb) / .14), 0 15px 45px #0005; transition: opacity .65s ease, box-shadow .75s ease, border-color .75s ease, transform .25s ease; }
.power-disc::after { content: ''; position: absolute; inset: 8.75%; border: 1px solid rgb(var(--tone-rgb) / .17); border-radius: 50%; transition: border-color .75s ease; }
.disc-light { position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle, var(--tone), transparent 72%); opacity: var(--light-opacity); transition: background .75s ease, opacity .75s ease; }
.power-sigil { position: relative; width: 45%; height: 45%; overflow: visible; }
.sigil-line, .sigil-shadow { fill: none; stroke: var(--tone); stroke-width: 4; stroke-linecap: square; stroke-linejoin: bevel; transition: stroke .75s ease, filter .75s ease; }
.sigil-shadow { stroke: #0b0b0b; stroke-width: 6; transform: translateY(2px); }
.sigil-notch { fill: var(--tone); transition: fill .75s ease; }
.disc-dot { position: absolute; width: 3px; height: 3px; background: rgb(var(--tone-rgb) / .4); transform: rotate(45deg); transition: background .75s ease; }
.dot-top { top: 4.58%; left: calc(50% - 1.5px); }
.dot-bottom { bottom: 4.58%; left: calc(50% - 1.5px); }
.dot-left { left: 4.58%; top: calc(50% - 1.5px); }
.dot-right { right: 4.58%; top: calc(50% - 1.5px); }
.power-button:not(:disabled):hover .power-disc { transform: translateY(-2px); border-color: rgb(var(--tone-rgb) / .65); box-shadow: 0 0 0 7px #131313, 0 0 0 8px rgb(var(--tone-rgb) / .3), inset 0 0 0 8px #17171770, inset 0 0 0 9px rgb(var(--tone-rgb) / .27), 0 15px 50px #0006, 0 0 65px rgb(var(--tone-rgb) / .09); }
.power-button:not(:disabled):hover .sigil-line { stroke: var(--tone-bright); filter: drop-shadow(0 0 9px rgb(var(--tone-rgb) / .35)); }
.power-button:not(:disabled):hover .sigil-notch { fill: var(--tone-bright); }
.power-button:not(:disabled):active .power-disc { transform: translateY(1px) scale(.98); }
.power-button:disabled { cursor: default; }

body[data-state='running'], body[data-state='starting'], body[data-state='external'] { --tone: #dfb85e; --tone-bright: #f6db91; --tone-rgb: 223 184 94; --light-opacity: .17; }
body[data-state='running'] .orbit, body[data-state='external'] .orbit { opacity: 1; transition-delay: .15s; }
body[data-state='running'] .power-disc, body[data-state='external'] .power-disc { border-color: rgb(var(--tone-rgb) / .55); box-shadow: 0 0 0 7px #131313, 0 0 0 8px rgb(var(--tone-rgb) / .3), inset 0 0 0 8px #17171770, inset 0 0 0 9px rgb(var(--tone-rgb) / .25), 0 15px 45px #0005, 0 0 90px rgb(var(--tone-rgb) / .08); }
body[data-state='running'] .sigil-line, body[data-state='external'] .sigil-line { filter: drop-shadow(0 0 10px rgb(var(--tone-rgb) / .35)); }
body[data-state='starting'] .startup-ring { opacity: 1; }
body[data-state='starting'] .startup-rotor { animation-play-state: running; }
body[data-state='stopping'] { --tone: #929292; --tone-bright: #bcbcbc; --tone-rgb: 146 146 146; --light-opacity: .06; }
body[data-state='stopping'] .startup-ring { opacity: .65; }
body[data-state='stopping'] .startup-rotor { animation-play-state: running; animation-direction: reverse; }
body[data-state='loading'] { --tone: #858585; --tone-bright: #a9a9a9; --tone-rgb: 133 133 133; --light-opacity: .04; }
body[data-state='loading'] .startup-ring { opacity: .3; }
body[data-state='loading'] .startup-rotor { animation-play-state: running; animation-duration: 2.8s; }
body[data-state='loading'] .power-disc { opacity: .6; }
body[data-state='error'] { --tone: #a67260; --tone-bright: #c49a85; --tone-rgb: 166 114 96; --light-opacity: .045; }
body[data-state='offline'] { --tone: #958272; --tone-bright: #b6a696; --tone-rgb: 149 130 114; --light-opacity: .03; }
body[data-state='error'] .power-disc, body[data-state='offline'] .power-disc { opacity: .65; }
body[data-state='external'] .power-disc { opacity: .75; }
body[data-state='external'] .orbit { opacity: .65; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .power-control { width: min(320px, calc(100vw - 24px)); }
  .power-button { width: 62.5%; }
}
@media (max-height: 400px) {
  .control-room { padding: 12px 0; }
  .power-control { width: min(320px, calc(100svh - 24px), calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}