:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; }
* { box-sizing: border-box; }
body { margin: 0; min-block-size: 100dvh; color: #142137; background: #f5f7fb; }
.site-header { background: #fff; border-block-end: 1px solid #dce3ee; }
.header-inner, .layout, .footer { inline-size: min(100% - 2rem, 68rem); margin-inline: auto; }
.header-inner { min-block-size: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .7rem; font-size: 1.18rem; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { display: inline-grid; place-items: center; inline-size: 2.15rem; block-size: 2.15rem; border-radius: .65rem; color: white; background: #315eee; }
.region { color: #3b506f; font-size: .875rem; }
.layout { padding-block: clamp(2rem, 5vw, 4rem); }
.intro { max-inline-size: 45rem; margin-block-end: 2rem; }
.eyebrow { margin: 0 0 .5rem; color: #315eee; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.35rem + 2vw, 3rem); line-height: 1.15; letter-spacing: -.035em; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 .55rem; }
p { margin-block: .35rem 1.3rem; }
.card { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #dce3ee; border-radius: 1.25rem; background: #fff; box-shadow: 0 .45rem 2rem #2136580a; }
.account-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
.account-card p { margin-block-end: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
form { display: flex; flex-direction: column; gap: .55rem; }
label { font-weight: 650; }
textarea { inline-size: 100%; min-block-size: 14rem; resize: vertical; border: 1px solid #8798b0; border-radius: .7rem; padding: .85rem; background: #fff; color: inherit; font: inherit; font-size: max(1rem, 1em); }
button { align-self: flex-start; min-block-size: 3rem; padding: .7rem 1.1rem; border: 1px solid #315eee; border-radius: .7rem; background: #315eee; color: #fff; font: inherit; font-weight: 650; cursor: pointer; }
button:hover { background: #224ac7; }
button:disabled { opacity: .6; cursor: wait; }
button.secondary { background: transparent; color: #244abd; }
button.secondary:hover { background: #edf2ff; }
:is(a, button, textarea):focus-visible { outline: 3px solid #f49e22; outline-offset: 3px; }
.status, .error { margin-block-start: 1.5rem; font-weight: 600; }
.retention { color: #6a4151; font-size: .9rem; }
.status { color: #175b42; }
.error { color: #a12a35; }
.footer { padding-block: 1.5rem 2.5rem; color: #52627a; font-size: .875rem; }
.skip { position: absolute; inset-block-start: -4rem; inset-inline-start: 1rem; padding: .55rem .8rem; background: #fff; }
.skip:focus { inset-block-start: .5rem; z-index: 1; }
[hidden] { display: none !important; }
@media (max-width: 48rem) { .settings-grid { grid-template-columns: 1fr; } .account-card { align-items: flex-start; flex-direction: column; } }
@media (prefers-color-scheme: dark) {
  body { color: #e8edf7; background: #101827; }
  .site-header, .card { background: #17243a; border-color: #3d4c63; }
  .region, .footer { color: #b3c0d2; }
  .eyebrow { color: #9db7ff; }
  textarea { color: #edf2fa; background: #111c2d; border-color: #7287a5; }
  button.secondary { color: #b9ccff; }
  button.secondary:hover { background: #253b5e; }
  .status { color: #80dab4; }
  .error { color: #ff9ca3; }
  .retention { color: #f2adbd; }
}