:root {
  color-scheme: dark;
  --ink: #fff1df;
  --muted: #b0c6d3;
  --surface: #091f2bef;
  --line: #315766;
  --amber: #ffb66c;
  --teal: #4dd6d4;
  --panel-padding: clamp(20px, 1.9vw, 32px);
  font-family: ui-rounded, 'Segoe UI', sans-serif;
  background: #081923;
  color: var(--ink);
}
:root,
:root * {
  /* The hub behaves like an installed game UI, not a selectable document. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
* {
  box-sizing: border-box;
}
svg {
  display: block;
}
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(#06182318, #05131c25),
    url('/assets/aurora-background.png') center / cover fixed;
}
button,
input,
select {
  font: inherit;
}
button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  background-clip: border-box;
  cursor: pointer;
  --button-hover-edge: #ffffff80;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 14px 24px;
  min-height: 48px;
  font-weight: 700;
  transition:
    filter 0.18s,
    border-color 0.18s;
}
button:hover:not(:disabled) {
  filter: brightness(1.12);
  border-color: var(--button-hover-edge);
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--amber);
}
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 5px;
}
button:focus-visible {
  border-color: var(--button-hover-edge);
  outline: 2px solid var(--button-hover-edge);
  outline-offset: -3px;
}
input:focus-visible,
select:focus-visible {
  border-color: var(--amber);
  outline: 2px solid var(--amber);
  outline-offset: -3px;
}
input,
select {
  border: 1px solid #527783;
  background: #061c29;
  color: var(--ink);
  border-radius: 12px;
  padding: 13px;
  min-width: 0;
}
select {
  color-scheme: dark;
}
select option,
select optgroup {
  color: var(--ink);
  background: #061c29;
}
input {
  width: 100%;
}
label {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 8px;
}
.primary {
  --button-hover-edge: #ffe2c2;
  background: linear-gradient(110deg, #ffc17e, #ff994f);
  color: #201a14;
  box-shadow: 0 5px 22px #ef8f3826;
}
.secondary {
  --button-hover-edge: #a8ffff;
  background: linear-gradient(110deg, #52d5d5, #249bab);
  color: #061d27;
}
.quiet {
  --button-hover-edge: #7ea9b9;
  border-color: var(--line);
  background: #17323e;
  color: var(--ink);
}
h1,
h2,
p {
  margin: 0;
}
h2 {
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.05;
  letter-spacing: -0.6px;
}
.panel h2,
button,
nav a,
.brand,
.utility-icon {
  display: flex;
  align-items: center;
}
.panel h2,
button,
nav a,
.brand {
  gap: 9px;
}
.panel h2 svg {
  width: 1.15em;
  height: 1.15em;
  align-self: center;
  /* Optical alignment with the visible letters, below the line-box centre. */
  transform: translateY(0.08em);
}
button svg {
  width: 1.5em;
  height: 1.5em;
}
nav svg {
  width: 28px;
  height: 28px;
}
nav a[aria-current='page'] svg {
  width: 32px;
  height: 32px;
}
.brand img,
.utility-icon svg {
  flex: 0 0 auto;
}
.panel h2 svg,
button svg,
nav svg {
  flex: 0 0 auto;
}
button {
  justify-content: center;
}
p {
  color: var(--muted);
  line-height: 1.5;
}
.panel {
  --panel-edge: #567f91;
  background: linear-gradient(125deg, #143645f5, #081d2afa);
  border: 1px solid var(--panel-edge);
  border-radius: 24px;
  box-shadow:
    0 12px 36px #0004,
    inset 0 1px #ffffff08;
  padding: 20px var(--panel-padding);
  min-width: 0;
  overflow: hidden;
}
.panel > p {
  margin: 7px 0 10px;
}
.hint {
  font-size: 14px;
  margin: 8px 0 20px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.layout-diagnostic {
  position: fixed;
  z-index: 100;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  color: #fff;
  background: #8b2f2f;
  border: 1px solid #ff9797;
  border-radius: 9px;
  box-shadow: 0 5px 18px #0008;
  font:
    700 12px/1.2 ui-monospace,
    monospace;
}
.layout-diagnostic[data-valid='true'] {
  color: #d9ffe9;
  background: #135f43;
  border-color: #58dfa7;
}
dialog {
  background: #102936;
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--ink);
  max-width: 460px;
  width: calc(100% - 32px);
  padding: 30px;
}
dialog::backdrop {
  background: #020d16cf;
  backdrop-filter: blur(7px);
}
dialog h2 {
  margin-bottom: 12px;
}
dialog label {
  margin-top: 20px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}