* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: var(--tp-bg); color: var(--tp-ink); font-family: var(--tp-font-sans); font-size: var(--tp-font-size-base); line-height: var(--tp-leading); }
.page { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; padding: var(--tp-space-6) var(--tp-gutter-page); overflow: hidden; }
.cloud { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0.3; }
header { padding-bottom: var(--tp-space-7); }
.brand { display: block; width: calc(var(--tp-space-9) * 2); height: auto; }
main { flex: 1; width: 100%; max-width: var(--tp-measure-wide); margin: auto; padding-block: var(--tp-space-7); }
.status { display: inline-block; margin: 0 0 var(--tp-space-5); padding: var(--tp-space-2) var(--tp-space-3); color: var(--tp-accent-strong); background: var(--tp-accent-soft); border-radius: var(--tp-radius-pill); font-family: var(--tp-font-mono); font-size: var(--tp-font-size-xs); font-weight: var(--tp-weight-medium); letter-spacing: var(--tp-tracking-label); text-transform: uppercase; }
h1 { margin: 0; font-size: var(--tp-font-size-hero); font-weight: var(--tp-weight-semibold); line-height: var(--tp-leading-hero); letter-spacing: var(--tp-tracking-hero); }
h1 span { color: var(--tp-accent-strong); }
.lede { max-width: var(--tp-measure-lede); margin: var(--tp-space-6) 0 0; font-size: var(--tp-font-size-lede); line-height: var(--tp-leading-lede); color: var(--tp-ink-2); }
.note { margin: var(--tp-space-5) 0 0; color: var(--tp-ink-2); }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--tp-space-3) var(--tp-space-6); margin-top: var(--tp-space-7); padding-top: var(--tp-space-4); border-top: var(--tp-border) solid var(--tp-line); font-size: var(--tp-font-size-sm); color: var(--tp-ink-2); }
.skip { position: absolute; z-index: 1; top: var(--tp-space-2); left: var(--tp-space-2); transform: translateY(calc(-100% - var(--tp-space-4))); padding: var(--tp-space-3) var(--tp-space-4); min-height: var(--tp-touch-min); background: var(--tp-bg); color: var(--tp-accent-strong); }
.skip:focus { transform: none; }
:focus-visible { outline: var(--tp-focus-width) solid var(--tp-focus); outline-offset: var(--tp-space-hair); }
@media (max-width: 720px) { .page { padding-block: var(--tp-space-5); } header { padding-bottom: var(--tp-space-5); } main { padding-block: var(--tp-space-6); } footer { margin-top: var(--tp-space-6); } }
@media (prefers-contrast: more) { .cloud { display: none; } }