:root {
    color-scheme: dark;
    font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
    background: #0b0e12;
    color: #f8f7f3;
}
* { box-sizing: border-box; }
body {
    min-height: 100dvh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 18% 12%, #f2b13429, transparent 34%),
        radial-gradient(circle at 82% 88%, #4889f42a, transparent 32%),
        #0b0e12;
}
.card {
    width: min(100%, 460px);
    padding: 34px 28px 28px;
    border: 1px solid #ffffff1c;
    border-radius: 28px;
    background: #151a20e8;
    box-shadow: 0 28px 90px #0009;
    backdrop-filter: blur(18px);
}
.brand {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border-radius: 18px;
    background: #f2b134;
    color: #101419;
    font-size: 42px;
    font-weight: 900;
    box-shadow: 0 12px 35px #f2b13433;
}
.eyebrow { margin: 24px 0 8px; color: #f2b134; font-size: 12px; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(32px, 9vw, 47px); line-height: 1.02; letter-spacing: -.04em; }
#intro { margin: 18px 0 26px; color: #b9c0ca; font: 16px/1.55 system-ui, sans-serif; }
.step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid #ffffff14;
}
.step[hidden], .paired[hidden] { display: none; }
.stepNumber {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: #29313b;
    color: #f2b134;
    font-weight: 800;
}
h2 { margin: 3px 0 8px; font-size: 18px; }
.step p, .paired p { margin: 0 0 16px; color: #aeb6c1; font: 14px/1.55 system-ui, sans-serif; }
button {
    min-height: 44px;
    padding: 0 17px;
    border: 1px solid #586270;
    border-radius: 12px;
    background: #242b34;
    color: #fff;
    font: 700 14px system-ui, sans-serif;
}
button.primary { border-color: #f2b134; background: #f2b134; color: #15191e; }
button:disabled { opacity: .55; }
.paired { padding-top: 8px; text-align: center; }
.check {
    display: grid;
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    place-items: center;
    border-radius: 50%;
    background: #31c48d;
    color: #071b13;
    font-size: 40px;
    font-weight: 900;
}
.status { min-height: 1.5em; margin: 18px 0 0; color: #f2b134; font: 13px/1.45 system-ui, sans-serif; }
@media (display-mode: standalone) {
    body { background-color: #0b0e12; }
}