:root {
  color-scheme: dark;
  --blue: #176bd3;
  --blue-hover: #237be9;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: #111; color: #f5f5f5; }
button, input, select { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button:focus-visible, a:focus-visible { outline: 3px solid #84b6fa; outline-offset: 4px; }
.topbar { background: #000; border-bottom: 3px solid var(--blue); }
.header-inner { max-width: 1200px; min-height: 116px; margin: auto; padding: 0 24px; display: flex; align-items: center; gap: 48px; }
.brand { display: block; flex: 0 0 auto; line-height: 0; }
.brand img { display: block; width: 112px; height: 112px; object-fit: contain; }
nav { display: flex; align-items: center; gap: 32px; font-size: 15px; }
nav a { padding: 12px 0; color: #c4c4c4; }
nav a[aria-current], nav a:hover { color: #fff; }
.header-inner > .button { margin-left: auto; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 29px; border: 1px solid var(--blue); border-radius: 3px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; }
.button:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.button:disabled { opacity: .55; cursor: wait; }
.button.small { min-height: 42px; padding: 10px 22px; font-size: 14px; }
.secondary { background: #252525; border-color: #707070; }
.secondary:hover { background: #393939; border-color: #999; }
.hero { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 570px; height: calc(100svh - 220px); max-height: 920px; overflow: hidden; }
.hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: #0006; }
.hero-copy { padding: 55px 24px 80px; text-align: center; max-width: 780px; }
.hero-label { margin: 0 0 18px; color: #e5e5e5; font-size: 16px; text-shadow: 0 1px 3px #000; }
h1 { margin: 0 0 22px; font-size: clamp(38px, 4vw, 62px); line-height: 1.15; font-weight: 700; text-shadow: 0 2px 4px #0009; }
.hero-description { margin: 0; color: #eee; font-size: 17px; line-height: 1.8; text-shadow: 0 1px 3px #000; }
.hero-actions { display: flex; justify-content: center; gap: 14px; margin-top: 30px; }
.hero-actions .button { min-width: 156px; }
footer { background: #151515; border-top: 1px solid #333; }
.footer-inner { max-width: 1200px; min-height: 101px; margin: auto; padding: 24px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; color: #aaa; font-size: 13px; }
.footer-inner p { margin: 0; }
.footer-inner small { margin-left: auto; font-size: 11px; color: #888; }
dialog { width: min(520px, calc(100% - 28px)); max-height: calc(100svh - 32px); padding: 30px; background: #fafafa; color: #222; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 12px 45px #0006; color-scheme: light; }
dialog::backdrop { background: #000b; }
.close { position: absolute; right: 10px; top: 8px; padding: 5px 10px; border: 0; background: none; color: #555; font-size: 27px; line-height: 1; }
.close:hover { color: #000; }
.panel-brand { padding-bottom: 18px; border-bottom: 1px solid #ddd; font-size: 17px; font-weight: 700; color: #333; }
.eyebrow { margin: 19px 0 7px; font-size: 12px; color: #666; }
dialog h2 { margin: 0 0 23px; font-size: 27px; font-weight: 600; line-height: 1.2; }
form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: grid; gap: 7px; color: #444; font-size: 13px; }
input, select { width: 100%; min-width: 0; min-height: 43px; padding: 11px 12px; background: #fff; color: #222; border: 1px solid #bbb; border-radius: 3px; outline: none; }
input:focus, select:focus { border-color: var(--blue); outline: 2px solid #176bd325; }
input::placeholder { color: #888; }
form .button { width: 100%; margin-top: 4px; }
.fine-print { margin: 2px 0; color: #666; font-size: 12px; line-height: 1.65; }
.panel-switch { margin: 21px 0 0; text-align: center; color: #666; font-size: 13px; }
.panel-switch button, .text-button { padding: 5px 0; border: 0; background: none; color: #1256ad; font-size: 13px; cursor: pointer; }
.panel-switch button:hover, .text-button:hover { text-decoration: underline; }
.intro { color: #555; font-size: 14px; line-height: 1.75; }
.status-list { margin: 20px 0; border-top: 1px solid #ddd; }
.status-list div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #ddd; font-size: 13px; }
.status-list strong { color: #8a5b00; font-weight: 600; }
.status-list .complete { color: #26723c; }
#notice { margin-bottom: 20px; padding: 12px; background: #eaf2ff; border: 1px solid #bbd1ef; border-radius: 3px; color: #234b7c; font-size: 13px; line-height: 1.6; }
#notice.error { background: #fff0f0; border-color: #e5b9b9; color: #9d2929; }
#notice[hidden] { display: none; }
.qr { width: 232px; margin: 20px auto; padding: 15px; background: #fff; border: 1px solid #ddd; }
.qr img, .qr canvas { width: 200px; height: 200px; }
.secret { display: block; padding: 12px; background: #eee; border: 1px solid #ddd; border-radius: 3px; color: #333; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.recovery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; padding: 15px; background: #eee; border: 1px solid #ddd; font: 12px monospace; user-select: all; }
.connection-code { color: #1256ad; font-size: 28px; font-weight: 700; letter-spacing: 2px; }
.stack { display: grid; gap: 13px; margin-top: 16px; }
.stack + form { margin-top: 24px; }
.noscript { position: fixed; bottom: 0; width: 100%; padding: 15px; background: #222; color: #fff; text-align: center; }
@media (max-width: 650px) {
  .header-inner { min-height: 94px; padding: 0 16px; gap: 22px; }
  .brand img { width: 88px; height: 88px; }
  nav { gap: 20px; font-size: 13px; }
  nav a[aria-current] { display: none; }
  .button.small { padding: 10px 14px; font-size: 12px; }
  .hero { height: calc(100svh - 209px); min-height: 490px; max-height: 780px; }
  .hero-image { object-position: 66% center; }
  .hero-copy { padding: 50px 21px; }
  .hero-label { font-size: 13px; }
  h1 { font-size: 39px; }
  .hero-description { font-size: 15px; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { min-width: 0; padding: 12px 25px; font-size: 14px; }
  .footer-inner { min-height: 112px; padding: 22px 20px; gap: 18px; font-size: 12px; }
  .footer-inner small { flex-basis: 100%; margin-left: 0; line-height: 1.6; }
  dialog { padding: 25px 21px; }
  dialog h2 { font-size: 25px; }
  .form-row { gap: 10px; }
}
@media (max-width: 350px) {
  .header-inner { gap: 12px; padding: 0 10px; }
  .brand img { width: 78px; height: 78px; }
  h1 { font-size: 34px; }
}

/* Refined classic header and account forms. */
.topbar { background: #191c21; border-bottom: 1px solid #ffffff12; }
.header-inner { min-height: 98px; gap: 46px; }
.brand { display: flex; align-items: center; gap: 15px; line-height: 1.2; }
.brand:hover { text-decoration: none; }
.brand img { width: 90px; height: 90px; mix-blend-mode: screen; }
.brand-name { color: #f3f3f4; font-size: 17px; font-weight: 600; white-space: nowrap; }
.brand-name small { display: block; margin-top: 6px; color: #9298a2; font-size: 11px; font-weight: 400; }
nav { margin-left: auto; gap: 7px; }
nav a { padding: 11px 17px; border-radius: 5px; font-size: 14px; }
nav a[aria-current] { background: #ffffff0a; }
nav a:hover { background: #ffffff0e; text-decoration: none; }
.header-inner > .button { margin-left: 10px; border-radius: 5px; }
.hero { height: calc(100svh - 200px); }
dialog { width: min(530px, calc(100% - 28px)); padding: 30px 34px 23px; border: 1px solid #e0e3e8; border-radius: 12px; background: #fff; box-shadow: 0 20px 70px #0007; }
dialog[data-view="register"] { width: min(620px, calc(100% - 28px)); }
.close { top: 17px; right: 16px; width: 33px; height: 33px; padding: 0; border-radius: 50%; background: #f0f2f5; color: #6b717c; font-size: 25px; }
.close:hover { background: #e5e9ef; }
.panel-brand { display: flex; align-items: center; gap: 12px; padding: 0 42px 20px 0; border-bottom: 1px solid #edf0f4; font-size: 15px; }
.panel-brand img { width: 49px; height: 49px; border-radius: 8px; }
.panel-brand small { display: block; margin-top: 5px; font-weight: 400; font-size: 11px; color: #818793; }
#panel-kicker { display: none; }
dialog h2 { margin: 25px 0 21px; color: #202b3c; font-size: 29px; letter-spacing: -.5px; }
.form-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 7px; background: #f0f2f6; }
.form-tabs button { padding: 10px; border: 0; border-radius: 5px; background: transparent; color: #737b88; font-size: 13px; }
.form-tabs button[aria-current] { background: #fff; color: #253958; font-weight: 600; box-shadow: 0 1px 3px #1a2b4612; }
.form-description { margin: 19px 0 22px; color: #737b88; font-size: 13px; line-height: 1.7; }
form { gap: 19px; }
fieldset { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 20px 0 0; border: 0; border-top: 1px solid #e9ecf0; }
legend { padding: 0 12px 0 0; color: #39465b; font-size: 13px; font-weight: 600; }
label, .password-field > label { color: #485369; font-size: 12px; font-weight: 600; }
label small, .password-field small { display: block; color: #89909b; font-size: 11px; font-weight: 400; line-height: 1.6; }
input, select { min-height: 47px; padding: 12px 13px; border: 1px solid #dce1e8; border-radius: 6px; background: #fafbfc; color: #263244; font-size: 14px; font-weight: 400; }
input:focus, select:focus { background: #fff; border-color: #7399c9; outline: 3px solid #176bd310; }
input::placeholder { color: #a0a6b0; }
.password-field { display: grid; gap: 7px; }
.password-control { display: flex; align-items: center; position: relative; }
.password-control input { padding-right: 87px; }
.password-control button { position: absolute; right: 8px; padding: 8px; border: 0; background: none; color: #546985; font-size: 11px; font-weight: 600; }
.password-control button:hover { color: #176bd3; }
.field-help { margin: -3px 0 0; color: #89909b; font-size: 11px; line-height: 1.6; }
.session-note, .privacy-note { margin: 0; color: #838b98; font-size: 11px; line-height: 1.7; }
.privacy-note a { color: #365e93; text-decoration: underline; text-underline-offset: 2px; }
.registration-note { padding: 13px 15px; border-radius: 6px; background: #f3f5f8; color: #647085; font-size: 11px; line-height: 1.7; }
.registration-note strong { color: #495871; font-weight: 600; }
.registration-note p { margin: 5px 0 0; }
form .button { min-height: 47px; border-radius: 6px; font-size: 14px; }
.dialog-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 25px; padding-top: 18px; border-top: 1px solid #edf0f4; color: #98a0ad; font-size: 10px; }
.dialog-footer a { color: #778497; }
#notice { border-radius: 6px; }
@media (max-width: 850px) {
  .header-inner { gap: 22px; }
  .brand-name { font-size: 14px; }
  nav a { padding: 10px 12px; }
}
@media (max-width: 650px) {
  .header-inner { min-height: 86px; gap: 13px; }
  .brand img { width: 79px; height: 79px; }
  .brand-name { display: none; }
  nav { margin-left: auto; }
  .header-inner > .button { margin-left: 0; }
  .hero { height: calc(100svh - 199px); }
  dialog, dialog[data-view="register"] { padding: 25px 22px 20px; }
  dialog h2 { margin-top: 22px; font-size: 26px; }
  .form-description { margin: 16px 0 20px; }
  .form-row { gap: 12px; }
}

.legal-page { background: #f3f4f6; color: #424b59; }
.legal-main { max-width: 1000px; margin: 0 auto; padding: 40px 24px 65px; }
.legal-back { display: inline-block; margin-bottom: 25px; color: #657184; font-size: 13px; }
.legal-content { padding: 48px 55px; border: 1px solid #e2e5e9; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.85; }
.legal-heading { padding-bottom: 25px; margin-bottom: 27px; border-bottom: 1px solid #e8ebef; }
.legal-heading > p { color: #7d8795; font-size: 12px; margin: 0 0 8px; }
.legal-heading h1 { margin: 0 0 15px; color: #243146; font-size: 37px; text-shadow: none; overflow-wrap: anywhere; }
.legal-heading > span { color: #8a929e; font-size: 12px; }
.legal-content h2 { margin: 36px 0 14px; color: #2e3c51; font-size: 20px; line-height: 1.4; }
.legal-content p { margin: 12px 0; }
.legal-content address { padding: 18px 22px; border: 1px solid #e6e9ed; border-radius: 5px; background: #f9fafb; font-style: normal; }
.legal-content a { color: #2f619d; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal-content code { padding: 2px 4px; background: #f0f2f5; border-radius: 3px; font-size: 12px; overflow-wrap: anywhere; }
.legal-content ul { padding-left: 21px; }
.legal-content li { padding-left: 3px; margin-bottom: 14px; }
.legal-table-wrap { overflow-x: auto; border: 1px solid #e2e6ec; border-radius: 5px; }
.legal-content table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.75; }
.legal-content th { padding: 14px 16px; text-align: left; background: #f4f6f8; color: #39485e; font-weight: 600; }
.legal-content td { padding: 15px 16px; border-top: 1px solid #e8ebef; vertical-align: top; }
.legal-content td:first-child { width: 31%; color: #35445a; font-weight: 600; }
@media (max-width: 650px) {
  .legal-main { padding: 25px 15px 40px; }
  .legal-content { padding: 25px 20px; font-size: 13px; }
  .legal-heading h1 { font-size: 29px; }
  .legal-content h2 { font-size: 18px; }
  .legal-content table { font-size: 11px; }
  .legal-content td, .legal-content th { padding: 12px 10px; }
  .legal-content td:first-child { width: 34%; overflow-wrap: anywhere; }
  .legal-page nav { display: none; }
  .legal-page .header-inner > .button { margin-left: auto; }
}

dialog[data-view="register"] { width: min(700px, calc(100% - 28px)); }
.access-row { align-items: start; gap: 20px; }
.character-details { grid-template-columns: 1.2fr .8fr 1fr; }
dialog[data-view="register"] form { gap: 16px; }
dialog[data-view="register"] fieldset { gap: 13px; padding-top: 16px; }
dialog[data-view="register"] .form-description { margin: 14px 0 18px; }
.close { position: sticky; top: 0; right: auto; float: right; margin: -13px -17px 0 0; z-index: 2; }
@media (max-width: 650px) {
  .access-row { grid-template-columns: 1fr; gap: 16px; }
  .character-details { grid-template-columns: 1fr 1fr; }
  .character-details > label:last-child { grid-column: 1 / -1; }
  .close { margin: -9px -8px 0 0; }
}

label small, .password-field small, .field-help, .session-note, .privacy-note { color: #667386; }
.form-description, .dialog-footer { color: #687487; }
.legal-heading > span, .legal-heading > p { color: #687487; }

/* Account views use the same charcoal palette as the header. */
dialog { background: #191c21; color: #e4e8ef; color-scheme: dark; border-color: #363c46; }
dialog .panel-brand { color: #f0f2f5; border-color: #323740; }
dialog .panel-brand small, dialog .form-description, dialog .intro { color: #b2bac6; }
dialog h2 { color: #f0f3f8; }
dialog .close { color: #c0c7d1; background: #2b3038; }
dialog .close:hover { color: #fff; background: #383f49; }
dialog .form-tabs { background: #111418; }
dialog .form-tabs button { color: #a7b0be; }
dialog .form-tabs button[aria-current] { color: #fff; background: #343b46; box-shadow: none; }
dialog fieldset { border-color: #363d47; }
dialog legend, dialog label { color: #d0d7e1; }
dialog input, dialog select { background: #242930; border-color: #3a424e; color: #f0f3f8; }
dialog input:focus, dialog select:focus { background: #282e37; border-color: #7898c5; outline-color: #7898c520; }
dialog input::placeholder { color: #98a3b3; }
dialog label small, dialog .password-field small, dialog .field-help, dialog .session-note, dialog .privacy-note, dialog .fine-print { color: #a7b1bf; }
dialog .password-control button, dialog .privacy-note a, dialog .dialog-footer a, dialog .text-button, dialog .panel-switch button { color: #a7c5f0; }
dialog .registration-note { color: #adb8c9; background: #252c35; }
dialog .registration-note strong { color: #d4ddeb; }
dialog .dialog-footer { color: #a3adbc; border-color: #323a46; }
dialog .status-list, dialog .status-list div { border-color: #39414e; }
dialog .status-list strong { color: #ddba78; }
dialog .status-list .complete { color: #86c99e; }
dialog .secret, dialog .recovery { color: #d3deed; background: #242a33; border-color: #3a4453; }
dialog .connection-code { color: #a7c5f0; }
dialog #notice { color: #c7dcf6; background: #223147; border-color: #415c7f; }
dialog #notice.error { color: #f3c0c0; background: #382326; border-color: #71454b; }