:root {
--space: var(--sr-space);
--space-edge: var(--sr-space-edge);
--ember: var(--sr-ember);
--text: var(--sr-text);
--text-dim: var(--sr-text-dim);
--atmosphere: var(--sr-atmosphere);
--night-lights: var(--sr-night-lights);
--station: var(--sr-station);
--satellite: var(--sr-satellite);
--debris: var(--sr-debris);
--rocket: var(--sr-rocket);
--probe: var(--sr-probe);
--telescope: var(--sr-telescope);
--asteroid: var(--sr-asteroid);
--comet: var(--sr-comet);
--site: var(--sr-site);
--font: var(--sr-font);
--mono: var(--sr-font-mono);
--radius: var(--sr-radius);
--pad: var(--sr-pad);
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--boot-glow: #0e1421;
--boot-earth-lit: #2e6fb8;
--boot-earth: #123255;
--boot-earth-dark: #0c2036;
--boot-halo: rgba(110, 195, 255, 0.28);
--boot-halo-soft: rgba(110, 195, 255, 0.2);
--boot-orbit: rgba(255, 159, 67, 0.75);
--boot-orbit-failed: rgba(154, 164, 178, 0.5);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overflow: hidden;
background: var(--space);
color: var(--text);
font-family: var(--font);
font-size: var(--sr-fs-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overscroll-behavior: none;
}
.sr-hidden-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.sr-sitefoot:not(.sr-sitefoot--shown) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.sr-sitefoot ul {
display: flex;
flex-wrap: wrap;
gap: 0 var(--sp-2);
margin: 0;
padding: 0;
list-style: none;
}
.sr-sitefoot a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--sp-2);
}
.sr-skip {
position: fixed;
top: var(--sp-2);
left: var(--sp-2);
z-index: var(--sr-z-toast);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--sr-line-strong);
border-radius: var(--sr-radius);
background: var(--sr-glass-strong);
color: var(--sr-text);
font-size: var(--sr-fs-label);
text-decoration: none;
}
.sr-skip:not(:focus) {
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
html.sr-render .sr-skip { display: none; }
#stage {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
display: block;
touch-action: none;
}
.num, .clockbar, .card time, .card .chip { font-variant-numeric: tabular-nums; }
.boot {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: radial-gradient(120% 90% at 50% 40%, var(--boot-glow) 0%, var(--space) 55%, var(--space-edge) 100%);
z-index: var(--sr-z-boot);
transition: opacity 600ms ease;
padding: 24px;
}
.boot.gone { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; max-width: 34ch; }
.boot-mark {
width: 64px; height: 64px;
margin: 0 auto 22px;
border-radius: 50%;
background: radial-gradient(circle at 35% 32%, var(--boot-earth-lit), var(--boot-earth) 70%, var(--boot-earth-dark));
box-shadow: 0 0 0 1px var(--boot-halo), 0 0 34px var(--boot-halo-soft);
position: relative;
}
.boot-mark::after {
content: "";
position: absolute;
inset: -16px;
border-radius: 50%;
border: 1.5px dashed var(--boot-orbit);
animation: spin 9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-line { margin: 0; font-size: var(--sr-fs-input); color: var(--text); }
.boot-sub { margin: 8px 0 0; font-size: var(--sr-fs-sm); color: var(--text-dim); }
.boot-failed .boot-mark::after { border-color: var(--boot-orbit-failed); animation: none; }
.boot-failed .boot-line { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
.boot-mark::after { animation: none; }
.boot { transition: none; }
}
.labels { position: fixed; inset: 0; pointer-events: none; z-index: var(--sr-z-labels); }
.labels .label {
position: absolute;
left: 0;
top: 0;
will-change: transform;
font-size: var(--sr-fs-sm);
color: var(--text);
text-shadow: 0 0 2px var(--space), 0 0 2px var(--space), 0 0 4px var(--space), 0 0 8px var(--space);
white-space: nowrap;
pointer-events: none;
}
.labels .label .dot { opacity: .8; margin-right: 5px; display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; }
.labels .label .dot.sr-swatch--dso-galaxy { width: 9px; height: 4px; transform: rotate(-30deg); }
.labels .label .dot.sr-swatch--dso-ring { -webkit-mask: radial-gradient(circle, transparent 1.7px, var(--sr-text) 2.1px); mask: radial-gradient(circle, transparent 1.7px, var(--sr-text) 2.1px); }
.labels .label .dot.sr-swatch--dso-cloud { width: 9px; border-radius: 0; -webkit-mask: radial-gradient(circle at 28% 62%, var(--sr-text) 2.3px, transparent 2.7px), radial-gradient(circle at 72% 62%, var(--sr-text) 2.1px, transparent 2.5px), radial-gradient(circle at 50% 36%, var(--sr-text) 2.6px, transparent 3px); mask: radial-gradient(circle at 28% 62%, var(--sr-text) 2.3px, transparent 2.7px), radial-gradient(circle at 72% 62%, var(--sr-text) 2.1px, transparent 2.5px), radial-gradient(circle at 50% 36%, var(--sr-text) 2.6px, transparent 3px); }
.labels .label .dot.sr-swatch--dso-cluster { border-radius: 0; -webkit-mask: radial-gradient(circle at 50% 18%, var(--sr-text) 1.3px, transparent 1.7px), radial-gradient(circle at 18% 78%, var(--sr-text) 1.3px, transparent 1.7px), radial-gradient(circle at 82% 78%, var(--sr-text) 1.3px, transparent 1.7px); mask: radial-gradient(circle at 50% 18%, var(--sr-text) 1.3px, transparent 1.7px), radial-gradient(circle at 18% 78%, var(--sr-text) 1.3px, transparent 1.7px), radial-gradient(circle at 82% 78%, var(--sr-text) 1.3px, transparent 1.7px); }
.labels .label[data-kind='selection'] { font-weight: 600; }
.labels .label[data-kind='notable'] { opacity: .8; }
#sr-handoff {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
#sr-handoff[hidden] { display: none; }