:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f6f5f1;
  color: #202723;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }

.page {
  width: min(100% - 96px, 1080px);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.masthead {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #dedfd7;
}

.brand { font-size: 31px; font-weight: 800; letter-spacing: -1.6px; }
.brand-dot, .heading-dot { color: #2361cc; }
.notice-label { font-size: 11px; color: #646b62; letter-spacing: 1.2px; }
.notice-separator { color: #a2a69b; margin: 0 10px; }
.masthead-actions { display: flex; align-items: center; gap: 24px; }
.language-switch { display: flex; align-items: center; padding: 3px; border: 1px solid #dedfd7; border-radius: 7px; gap: 2px; }
.language-switch button { min-height: 32px; padding: 5px 9px; font: inherit; font-size: 12px; border: 0; border-radius: 4px; background: transparent; color: #646b62; cursor: pointer; }
.language-switch button[aria-pressed="true"] { background: #fff; color: #194faa; }
.language-switch button:focus-visible { outline: 2px solid #224ba1; outline-offset: 2px; }

main {
  width: min(100%, 688px);
  padding: 76px 0 64px;
  margin: auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #325546;
  font-size: 13px;
  letter-spacing: 2px;
}

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #327657; }
h1 { font-size: clamp(36px, 5.5vw, 64px); line-height: 1.3; letter-spacing: -2px; margin: 20px 0 12px; font-weight: 650; }
.intro { color: #626961; font-size: 17px; line-height: 1.8; margin: 0; }

.domain-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin: 38px 0 30px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid #dfE2db;
  border-radius: 12px;
}

.domain-label { display: block; color: #6d736c; font-size: 12px; margin-bottom: 10px; }
.domain { display: block; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: clamp(18px, 2.7vw, 24px); letter-spacing: -0.6px; overflow-wrap: anywhere; }
.previous-domain .domain { color: #747b73; }
.current-domain .domain { color: #194faa; font-weight: 650; }
.route-arrow { color: #9aA293; font-size: 27px; text-align: center; }

.retirement-note { margin: 0 0 26px; padding: 18px 20px; border: 1px solid #e7d7b5; border-left: 3px solid #b97b25; border-radius: 8px; background: #fcf7ed; }
.retirement-label { margin: 0 0 7px; color: #855b22; font-size: 12px; font-weight: 650; }
.retirement-copy { margin: 0; color: #6b604d; font-size: 13px; line-height: 1.85; }
.retirement-copy strong { color: #5d421d; font-weight: 650; }

.continue-link {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 8px;
  color: #fff;
  background: #235dca;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease;
}

.continue-link:hover { background: #194ca9; }
.continue-link svg { width: 20px; height: 20px; }
.continue-link:focus-visible, #pause-button:focus-visible { outline: 3px solid #224ba1; outline-offset: 4px; }
.automatic-redirect { margin-top: 16px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; }
#redirect-status { margin: 0; color: #626961; font-size: 13px; line-height: 1.8; }
#countdown { color: #202723; font-variant-numeric: tabular-nums; font-weight: 650; }
#pause-button { font: inherit; font-size: 12px; color: #31599b; padding: 8px 4px; min-height: 36px; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#pause-button:disabled { color: #737970; cursor: default; }
.account-note, .script-fallback { font-size: 12px; color: #727970; line-height: 1.8; text-align: center; margin: 22px 0 0; }

footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #747b72; font-size: 11px; letter-spacing: 0.4px; padding: 23px 0 28px; border-top: 1px solid #dedfd7; }
.geo-attribution { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.geo-attribution:focus-visible { outline: 2px solid #224ba1; outline-offset: 4px; }

@media (max-width: 640px) {
  .page { width: calc(100% - 40px); }
  .masthead { min-height: 82px; gap: 16px; }
  .brand { font-size: 27px; }
  .notice-label { font-size: 9px; letter-spacing: 0.5px; }
  .notice-separator { margin: 0 4px; }
  .masthead-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
  main { padding: 52px 0; }
  h1 { letter-spacing: -1px; }
  .intro { font-size: 14px; }
  .domain-route { padding: 22px 18px; gap: 10px; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1.18fr); margin: 28px 0 24px; }
  .domain { font-size: clamp(14px, 4.1vw, 21px); letter-spacing: -0.4px; }
  .route-arrow { font-size: 22px; }
  .continue-link { min-height: 56px; }
  footer { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .continue-link { transition: none; }
}