:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  --background: #f4f3ef;
  --surface: rgba(255, 255, 255, 0.8);
  --text: #171715;
  --secondary: #686760;
  --border: rgba(23, 23, 21, 0.11);
  --button: #1a1a18;
  --button-text: #fffef9;
  --success: #19734a;
  --error: #aa3d35;
  --working: #87631d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #11110f;
    --surface: rgba(31, 31, 28, 0.82);
    --text: #f3f2ec;
    --secondary: #aaa89f;
    --border: rgba(255, 255, 255, 0.12);
    --button: #f3f2ec;
    --button-text: #171715;
    --success: #67c495;
    --error: #ef8479;
    --working: #d5ad62;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--background); color: var(--text); }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
}
main { width: min(100%, 520px); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.brand-mark { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 12px; }
.eyebrow { margin: 0 0 10px; color: var(--secondary); font-size: 13px; font-weight: 600; }
h1 { margin: 0; max-width: 470px; font-size: clamp(34px, 9vw, 48px); line-height: 1.05; letter-spacing: -0.045em; text-wrap: balance; }
.intro { margin: 18px 0 0; max-width: 470px; color: var(--secondary); font-size: 17px; line-height: 1.58; text-wrap: pretty; }
#status { display: inline-flex; align-items: center; min-height: 30px; margin-top: 24px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--secondary); background: var(--surface); font-size: 13px; font-weight: 600; }
#status[data-kind="success"] { color: var(--success); }
#status[data-kind="error"] { color: var(--error); }
#status[data-kind="working"] { color: var(--working); }
.panel { margin-top: 26px; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.panel[hidden] { display: none; }
.step { display: inline-block; margin-bottom: 15px; color: var(--secondary); font-size: 12px; font-weight: 650; letter-spacing: 0.02em; }
h2 { margin: 0; font-size: 21px; letter-spacing: -0.025em; text-wrap: balance; }
.panel p { margin: 10px 0 0; color: var(--secondary); font-size: 16px; line-height: 1.58; text-wrap: pretty; }
.steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: install; }
.steps li { counter-increment: install; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; margin-top: 12px; color: var(--secondary); font-size: 15px; line-height: 1.48; }
.steps li::before { content: counter(install); width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--text); font-size: 12px; font-weight: 650; }
button { width: 100%; min-height: 52px; margin-top: 20px; appearance: none; border: 0; border-radius: 13px; padding: 0 18px; background: var(--button); color: var(--button-text); font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; transition: transform 120ms ease, opacity 120ms ease; }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--text) 34%, transparent); outline-offset: 3px; }
button:active:not(:disabled) { transform: scale(0.985); }
button:disabled { cursor: default; opacity: 0.48; }
.secondary-button { border: 1px solid var(--border); background: transparent; color: var(--text); }
.privacy { margin: 22px 2px 0; color: var(--secondary); font-size: 12px; line-height: 1.55; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }