:root {
  color-scheme: light;
  --page: #f3f6fb;
  --surface: #ffffff;
  --ink: #172b4d;
  --muted: #53657e;
  --line: #c7d2e3;
  --control-line: #7a8fae;
  --brand: #245fce;
  --on-brand: #fff;
  --wash: #e8effc;
  --warn: #735212;
  --warn-bg: #f8efd9;
  --danger: #ac322b;
  --error-bg: #fbebe6;
}
.dark {
  color-scheme: dark;
  --page: #0c1423;
  --surface: #142137;
  --ink: #edf3ff;
  --muted: #afbdd3;
  --line: #435571;
  --control-line: #6e87ab;
  --brand: #8db5ff;
  --on-brand: #0c234b;
  --wash: #203556;
  --warn: #efce87;
  --warn-bg: #352d1d;
  --danger: #ffb5a5;
  --error-bg: #3b2722;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); font-size: 17px; line-height: 1.6; }
a { color: inherit; text-underline-offset: 4px; }
button, input, textarea { font: inherit; }
button, .button { cursor: pointer; }
button, input, textarea, .button { border-radius: 8px; }
button, .button { min-height: 48px; padding: 11px 20px; border: 1px solid transparent; font-weight: 600; line-height: 1.5; transition: background-color 150ms ease, color 150ms ease; }
button:active, .button:active { transform: translateY(1px); }
button:disabled, fieldset:disabled button { cursor: wait; opacity: .6; }
.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.primary { background: var(--brand); color: var(--on-brand); }
.primary:hover { filter: brightness(.94); }
.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.secondary:hover, .theme-button:hover { background: var(--wash); }
.text-button { background: none; color: var(--muted); padding-inline: 6px; text-decoration: underline; text-underline-offset: 4px; }
.skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 16px; z-index: 3; background: var(--surface); padding: 12px; }
.skip-link:focus { inset-block-start: 12px; }
.site-header, main, .site-footer { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.site-header { min-height: 108px; display: flex; align-items: center; gap: 36px; border-bottom: 1px solid var(--line); }
.wordmark { text-decoration: none; font-size: 23px; letter-spacing: -.6px; font-weight: 750; white-space: nowrap; }
.wordmark span { display: block; font-size: 12px; font-weight: 500; letter-spacing: 2px; color: var(--muted); }
nav { display: flex; align-items: center; gap: 28px; margin-inline-start: auto; }
nav a { display: inline-flex; align-items: center; min-height: 48px; font-size: 15px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
nav a:hover, nav a[aria-current] { color: var(--ink); border-bottom-color: var(--brand); }
.theme-button { color: var(--muted); background: none; font-size: 14px; border-color: var(--line); min-height: 44px; padding: 9px 13px; white-space: nowrap; }
.service-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 25px; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1px; color: var(--muted); }
.service-status { display: flex; align-items: center; gap: 9px; font: 14px/1.5 var(--air-font-sans); letter-spacing: 0; }
.service-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.service-status.online::before { background: var(--brand); }
.service-status.paused::before { background: var(--warn); }
.notice { padding: 14px 18px; margin-block-end: 24px; background: var(--warn-bg); color: var(--warn); border-inline-start: 3px solid var(--warn); font-size: 15px; border-radius: 4px; }
.notice a { font-weight: 600; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr); gap: 64px; align-items: start; padding-block: 22px 44px; }
.intro { padding-block-start: 24px; }
.eyebrow { font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 2px; color: var(--muted); margin: 0 0 20px; }
h1 { margin: 0 0 20px; font-size: clamp(32px, 3.7vw, 48px); line-height: 1.3; letter-spacing: -1.2px; font-weight: 650; text-wrap: balance; }
h1 span { color: var(--brand); display: inline-block; }
.lead { margin: 0; color: var(--muted); max-width: 28em; font-size: 17px; }
.intro-list { margin-block: 36px; padding: 0; list-style: none; display: grid; gap: 16px; }
.intro-list li { display: flex; gap: 15px; align-items: baseline; font-size: 15px; }
.intro-list b { font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--brand); }
.intro-help { color: var(--muted); font-size: 14px; max-width: 29em; }
.intro-help summary { cursor: pointer; padding-block: 12px; color: var(--ink); }
.intro-help p { margin-block: 0 16px; }
.ticket { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px; min-width: 0; }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block-end: 23px; margin-block-end: 28px; border-bottom: 1px dashed var(--line); }
.ticket-head span { font-size: 14px; font-weight: 600; }
.ticket-number { font: 28px/1 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--brand); letter-spacing: -1px; }
.ticket-number small { font-size: 13px; color: var(--muted); letter-spacing: 0; }
.steps { list-style: none; display: flex; justify-content: space-between; gap: 8px; padding: 0; margin: 0 0 30px; font-size: 13px; color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 7px; }
.steps b { display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--wash); border-radius: 50%; font-size: 12px; }
.steps [aria-current] { color: var(--brand); font-weight: 650; }
.steps [aria-current] b { background: var(--brand); color: var(--on-brand); }
h2 { font-size: 23px; line-height: 1.4; margin: 0 0 12px; font-weight: 650; }
h2:focus { outline: none; }
h3 { font-size: 18px; line-height: 1.5; margin: 0; }
.hint { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.hint a { color: var(--brand); }
fieldset { padding: 0; border: 0; margin: 0; min-width: 0; }
.field { margin-block: 22px; }
label { display: block; font-size: 15px; font-weight: 600; margin-block-end: 8px; }
input:not([type=checkbox]), textarea { display: block; width: 100%; background: var(--surface); color: var(--ink); border: 1px solid var(--control-line); padding: 13px 14px; min-height: 52px; font-size: 16px; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
textarea { min-height: 145px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 16px; overflow-wrap: anywhere; }
input:user-invalid, textarea:user-invalid { border-color: var(--danger); }
.check { display: flex; align-items: start; gap: 10px; margin-block: 20px; font-size: 14px; font-weight: 400; }
input[type=checkbox] { flex: 0 0 auto; width: 19px; height: 19px; margin: 3px 0 0; accent-color: var(--brand); }
.actions { display: flex; align-items: center; gap: 12px; margin-block-start: 26px; flex-wrap: wrap; }
.actions .primary { flex: 1; }
.full { width: 100%; }
.privacy-note { margin: 18px 0 0; font-size: 12px; color: var(--muted); }
.error { color: var(--danger); background: var(--error-bg); padding: 13px 15px; margin-block: 20px; border-radius: 6px; font-size: 15px; overflow-wrap: anywhere; }
.facts { margin: 22px 0; }
.facts div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 16px; padding-block: 8px; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; font-weight: 550; }
.account-email { font-size: 19px; margin: 18px 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.account-banner { border-inline-start: 3px solid var(--brand); padding-inline-start: 18px; margin-block: 26px; }
.account-banner p { margin-block: 3px; }
.status-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.status-label { display: inline-block; color: var(--brand); background: var(--wash); padding: 3px 9px; border-radius: 5px; font-size: 13px; white-space: nowrap; }
.status-label.attention { color: var(--warn); background: var(--warn-bg); }
.status-label.failed { color: var(--danger); background: var(--error-bg); }
.task { padding-block: 24px; border-bottom: 1px solid var(--line); }
.task:last-child { border: 0; padding-block-end: 0; }
.task .facts { margin-block-end: 0; }
.code-hint, .task-id { font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); overflow-wrap: anywhere; }
.result-body { margin-block-start: 26px; }
.result-body > p { font-size: 15px; color: var(--muted); }
.timeline { list-style: none; padding: 0; font-size: 14px; }
.timeline li { display: flex; flex-wrap: wrap; gap: 12px; padding-block: 6px; }
.timeline time { color: var(--muted); }
.utilities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; margin-block: 12px 45px; padding-block: 30px; border-top: 1px solid var(--line); }
.utilities a { text-decoration: none; display: block; }
.utilities a:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
.utilities p { color: var(--muted); font-size: 14px; margin: 8px 0; }
.site-footer { border-top: 1px solid var(--line); padding-block: 25px 36px; display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 12px; color: var(--muted); }
.site-footer a { margin-inline-start: auto; }
.loading { padding-block: 50px; }
@media (max-width: 800px) {
  .site-header, main, .site-footer { width: calc(100% - 40px); }
  .site-header { gap: 18px; min-height: 94px; }
  nav { gap: 16px; }
  .wordmark { font-size: 21px; }
  .layout { gap: 28px; }
  .ticket { padding: 24px; }
  .intro-list { gap: 12px; }
}
@media (max-width: 620px) {
  .site-header, main, .site-footer { width: calc(100% - 32px); }
  .site-header { flex-wrap: wrap; gap: 8px; padding-block: 18px 0; }
  .wordmark { font-size: 21px; }
  .wordmark span { display: inline; margin-inline-start: 10px; font-size: 11px; letter-spacing: 0; }
  .theme-button { margin-inline-start: auto; min-height: 44px; padding: 9px; font-size: 12px; }
  nav { order: 3; margin: 0; width: 100%; justify-content: space-between; gap: 10px; }
  nav a { font-size: 14px; padding-inline: 6px; }
  .service-line { padding-block: 18px; font-size: 10px; }
  .service-status { font-size: 13px; }
  .notice { margin-block-end: 14px; padding: 12px 14px; font-size: 14px; }
  .layout { display: flex; flex-direction: column; padding-block: 12px 28px; gap: 24px; }
  .intro { padding: 0; }
  h1 { font-size: 24px; margin-block-end: 12px; letter-spacing: -.5px; }
  .intro .eyebrow { display: none; }
  h1 br { display: none; }
  .eyebrow { margin-block-end: 10px; font-size: 11px; }
  .lead { font-size: 15px; }
  .intro-list, .intro-help { display: none; }
  .ticket { width: 100%; padding: 22px; border-radius: 12px; }
  .ticket-head { margin-block-end: 22px; padding-block-end: 20px; }
  .steps { font-size: 12px; gap: 4px; margin-block-end: 24px; }
  .steps li { gap: 5px; }
  h2 { font-size: 21px; }
  .facts div { grid-template-columns: 78px minmax(0,1fr); gap: 12px; }
  .utilities { grid-template-columns: 1fr; gap: 22px; padding-block: 25px; margin-block: 0 12px; }
  .utilities h3 { font-size: 16px; }
  .utilities p { margin: 4px 0 0; }
  .site-footer { display: grid; gap: 8px; padding-block: 22px; }
  .site-footer a { margin: 0; }
  textarea { font-size: 16px; }
}