:root {
  font-family: "Helvetica Neue", Arial, -apple-system, sans-serif;
  color: #161625; background: #f9f8fc; color-scheme: light;
  --muted: #555568; --line: #c8c5d1; --indigo: #3024a3; --violet: #5a2cb9;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
button, input, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.top { min-height: 78px; padding: 12px clamp(22px,2.8vw,44px); display:flex; align-items:center; justify-content:space-between; gap:14px; background:#f4f1fb; border-bottom:1px solid #c3bccf; }
.brand, .header-actions, .panel-heading { display:flex; align-items:center; }
.brand { gap:15px; font-size:clamp(22px,2.1vw,33px); font-weight:750; letter-spacing:-.045em; }
.header-actions { gap:20px; }
.product-area { color:#802c76; font:500 clamp(13px,1.36vw,21px)/1.3 ui-monospace, "SFMono-Regular", monospace; }
.text-action { border:0; background:transparent; color:var(--indigo); cursor:pointer; text-decoration:underline; text-underline-offset:4px; min-height:44px; padding:0 3px; font-size:.94rem; }
.workspace { width:min(76.4%,1212px); margin:auto; padding:clamp(55px,8vw,115px) 0 clamp(45px,5vw,78px); flex:1; display:grid; grid-template-columns: minmax(175px, .28fr) minmax(0,1fr); gap:clamp(30px,3.4vw,55px); align-content:center; align-items:start; }
.progress { padding-top:10px; }
.progress h2 { margin:0 0 36px; font-size:clamp(19px,1.85vw,29px); line-height:1.25; letter-spacing:-.04em; font-weight:690; }
.progress ol { list-style:none; margin:0; padding:0; }
.progress li { position:relative; display:flex; align-items:center; gap:clamp(13px,1.65vw,26px); min-height:42px; color:#373647; font-size:clamp(16px,1.55vw,24px); font-weight:450; line-height:1.15; }
.progress li:not(:last-child) { margin-bottom:clamp(27px,3.2vw,50px); }
.progress li:not(:last-child)::after { content:""; position:absolute; top:100%; height:clamp(27px,3.2vw,50px); left:calc(var(--step-size) / 2 - .5px); width:1px; background:#92909d; }
.progress ol { --step-size:clamp(32px,2.8vw,44px); }
.step-number { display:grid; place-items:center; flex:0 0 var(--step-size); width:var(--step-size); height:var(--step-size); border:1.5px solid #777585; border-radius:50%; color:#464453; background:#faf9fc; font: 540 clamp(16px,1.5vw,24px)/1 ui-monospace, monospace; }
.progress [aria-current="step"] { color:var(--indigo); font-weight:730; }
.progress [aria-current="step"] .step-number { color:#fff; background:var(--violet); border-color:var(--violet); }
.progress .done .step-number { color:var(--indigo); background:#eeebfa; border-color:#b3a6d7; }
.panel { padding:clamp(28px,2.75vw,44px) clamp(29px,3.5vw,56px) clamp(30px,3vw,48px); border:1px solid #bcb8c6; border-radius:clamp(16px,1.6vw,25px); background:#fff; box-shadow:0 2px 0 #28223d1b; min-width:0; }
.panel-heading { gap:clamp(15px,1.75vw,28px); }
.symbol { display:grid; place-items:center; flex:0 0 auto; width:clamp(54px,5.1vw,80px); aspect-ratio:1; background:#e9e3ff; color:var(--indigo); border-radius:clamp(12px,1.05vw,17px); }
.symbol svg { width:57%; height:57%; }
h1 { margin:0; font-size:clamp(31px,3.4vw,54px); line-height:1.08; font-weight:740; letter-spacing:-.034em; overflow-wrap:anywhere; }
h1:focus { outline:none; }
.intro { color:var(--muted); margin:clamp(14px,1.23vw,20px) 0 clamp(28px,2.35vw,37px); font-size:clamp(17px,1.54vw,24px); line-height:1.48; }
#controls { display:grid; gap:17px; }
form { display:grid; gap:clamp(20px,1.9vw,30px); }
.field { display:grid; gap:8px; }
label, .code-label { font-weight:660; font-size:clamp(16px,1.38vw,22px); line-height:1.35; }
.input-wrap { position:relative; display:flex; align-items:center; width:100%; }
input { width:100%; min-width:0; min-height:clamp(49px,3.85vw,61px); padding:9px 48px 9px 15px; border:1px solid #8d8a99; border-radius:10px; color:#171627; background:#fff; font-size:clamp(17px,1.3vw,20px); }
input[aria-invalid="true"] { border-color:#9c244b; }
.reveal { position:absolute; right:3px; top:0; bottom:0; width:44px; display:grid; place-items:center; color:#555363; border:0; background:transparent; cursor:pointer; }
.reveal svg { width:24px; height:24px; }
.hint { color:var(--muted); margin:0; font-size:clamp(14px,1.22vw,19px); line-height:1.45; }
.primary, .secondary { border-radius:10px; display:flex; justify-content:center; align-items:center; gap:12px; min-height:clamp(49px,3.85vw,61px); padding:12px 17px; text-decoration:none; text-align:center; cursor:pointer; line-height:1.25; font-size:clamp(16px,1.45vw,23px); font-weight:660; }
.primary { background:var(--indigo); border:1px solid var(--indigo); color:#fff; }
.primary:hover { background:#241980; }
.primary svg { width:22px; height:22px; flex:none; }
form .primary { margin-top:clamp(5px,1vw,16px); }
.secondary { background:#fff; color:var(--indigo); border:1px solid #b7aecf; font-size:1rem; }
.secondary:hover { background:#f6f4fc; }
button:disabled { opacity:.58; cursor:wait; }
:where(a,button,input):focus-visible { outline:3px solid #7863d5; outline-offset:3px; }
#problem { margin:0 0 18px; padding:12px 15px; background:#fbf0f2; border-left:3px solid #aa3953; color:#75223d; line-height:1.45; overflow-wrap:anywhere; }
.device-code { display:block; width:fit-content; max-width:100%; border:1px solid #ccc4e3; border-radius:8px; background:#f6f3ff; color:#262053; font:650 clamp(22px,2.5vw,36px)/1.15 ui-monospace,monospace; padding:12px 18px; letter-spacing:.06em; overflow-wrap:anywhere; user-select:all; }
.review { list-style:none; padding:0; margin:0; }
.review li { padding:13px 0; display:flex; justify-content:space-between; gap:12px; border-top:1px solid #e6e2eb; }
.review strong { color:#3b3461; }
footer { padding:15px clamp(20px,2vw,32px); min-height:59px; border-top:1px solid #d6d1dd; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:clamp(13px,1.25vw,19px); }
@media(max-width:1000px){ .workspace{width:88%;} }
@media(max-width:720px){
  .top{min-height:64px;padding:8px 18px}.brand{gap:9px}.brand svg{width:31px;height:31px}.product-area{font-size:12px}.header-actions{gap:8px}.top:has(#logout:not([hidden])) .product-area{display:none}
  .workspace{width:min(100% - 32px,560px);display:block;padding:26px 0 38px; margin:0 auto}.progress{padding:0}.progress h2{font-size:16px;letter-spacing:-.015em;margin:0 0 13px}
  .progress ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));--step-size:27px}.progress li{min-height:auto;flex-direction:column;gap:6px;align-items:flex-start;font-size:12px;line-height:1.3}.progress li:not(:last-child){margin-bottom:0}.progress li:not(:last-child)::after{left:var(--step-size);right:0;top:13px;width:auto;height:1px}.step-number{font-size:14px;flex-basis:auto}
  .panel{margin-top:24px;padding:24px 20px;border-radius:18px}.panel-heading{gap:13px}.symbol{width:47px;border-radius:11px}h1{font-size:clamp(26px,7.1vw,36px)}.intro{font-size:16px;margin:15px 0 25px}form{gap:21px}.hint{font-size:14px}
  footer{min-height:46px;padding:10px 16px}
}
@media(max-width:350px){.workspace{width:calc(100% - 24px)}.panel{padding:20px 14px}.symbol{width:39px}.panel-heading{gap:10px}}
.more { color:var(--indigo); font-weight:600; text-underline-offset:4px; padding:8px 0; width:fit-content; }

@media(min-width:1100px){ .workspace{position:relative;left:8px;padding-top:clamp(85px,9.7vw,154px);padding-bottom:clamp(40px,4.1vw,65px)} }