*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f8f8f7;color:#151618;font-family:var(--dot-font-ui);-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}
a{color:inherit}
:is(button,a,input):focus-visible{outline:2px solid #ff0000;outline-offset:3px}
.page{max-width:1392px;padding:0 42px;margin:auto}
.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dedfdf}
.brand-link img{display:block;width:112px}
.toplinks{display:flex;gap:28px;color:#65696d;font-size:13px;font-weight:600}
.toplinks a{text-decoration:none}.toplinks a:hover{text-decoration:underline;color:#151618}
.intro{display:flex;justify-content:space-between;align-items:end;gap:50px;padding:70px 0 41px}
.eyebrow{font-size:11px;letter-spacing:.17em;font-weight:700;color:#6d7177;margin:0 0 18px}.eyebrow span{color:#ff0000;padding:0 7px}
h1{font-size:clamp(44px,5.5vw,76px);line-height:1.02;letter-spacing:-.065em;margin:0;font-weight:700}
.lead{color:#686d72;max-width:590px;font-size:16px;line-height:1.55;margin:24px 0 0}
.demo-label{align-items:center;display:flex;gap:10px;flex:none;color:#676b70;font-size:12px;padding-bottom:4px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#ff0000}
.workspace{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px;min-height:692px}
.rail{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#17181a;color:#fff;border-radius:26px;padding:28px}
.rail-header{display:flex;justify-content:space-between;color:#a6aaad;font-size:10px;font-weight:700;letter-spacing:.16em}
.step-list{display:grid;gap:7px;margin-top:37px}
.step{width:100%;display:grid;grid-template-columns:32px 1fr 16px;text-align:left;align-items:start;gap:11px;padding:17px 14px;background:transparent;color:#b6b9bc;border:1px solid transparent;border-radius:13px;transition:background .2s,border-color .2s,transform .2s}
.step:hover{background:#27292c;color:#fff;transform:translateX(2px)}
.step.active{background:#282a2d;border-color:#484a4d;color:#fff}
.step.active .step-index{color:#ff0000}
.step-index{font-size:11px;letter-spacing:.05em;padding-top:3px;font-weight:700}
.step strong{font-size:16px;font-weight:600;display:block;line-height:1.2}
.step small{font-size:12px;color:#9a9da1;display:block;margin-top:5px}
.step .arrow{font-size:16px;opacity:.5}.step.active .arrow{opacity:1;color:#ff0000}
.rail-bottom{display:flex;flex-direction:column;justify-content:flex-end;flex:1;min-height:170px;position:relative;font-size:10px;line-height:1.6;font-weight:700;letter-spacing:.13em;color:#999da1}
.oversize-o{position:absolute;width:220px;height:190px;right:-86px;bottom:-76px;opacity:.16;transform:rotate(-19deg)}
.oversize-o img{width:100%}
.stage{background:#edeef0;border:1px solid #e1e2e3;border-radius:26px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.stage-bar{height:66px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;border-bottom:1px solid #dcdedf;background:#f5f5f4;font-size:11px;font-weight:700;letter-spacing:.11em}
.subtle{color:#9ca0a4}.theme-switch,.loader-choice{display:flex;background:#e9eaeb;border-radius:10px;padding:3px;gap:2px}
.theme-switch button,.loader-choice button{border:0;border-radius:8px;background:transparent;color:#676b71;padding:7px 11px;font-size:11px;font-weight:650;letter-spacing:0}
.theme-switch button[aria-pressed=true],.loader-choice button[aria-pressed=true]{background:#fff;color:#151618;box-shadow:0 1px 4px #00000012}
.canvas{display:grid;place-items:center;flex:1;padding:42px 24px;transition:background .2s;background:#f8f8f7}
.auth-card{width:min(100%,458px);min-height:548px;background:#fff;border:1px solid #e3e4e4;border-radius:20px;padding:26px 32px 21px;box-shadow:0 22px 60px #1516180a;color:#151618;display:flex;flex-direction:column}
.auth-top{display:flex;align-items:start;justify-content:space-between;gap:14px;margin-bottom:54px}
.auth-top img{width:145px;height:auto}
.secure-tag{font-size:9px;letter-spacing:.08em;color:#888d91;white-space:nowrap;padding-top:9px;font-weight:700}
.secure-tag span{font-size:9px;color:#4f8c68;margin-right:4px}
.screen{flex:1;animation:enter .22s ease-out}
.screen[hidden],[hidden]{display:none!important}
.mini{color:#df0000;font-size:10px;letter-spacing:.15em;font-weight:700;margin:0 0 10px}
h2{font-size:30px;line-height:1.12;letter-spacing:-.045em;margin:0 0 10px;font-weight:700}
.screen-head>p:last-child{font-size:14px;color:#72777b;line-height:1.5;margin:0 0 27px}
.field{margin-bottom:17px}.field label,.otp-label{font-size:13px;font-weight:650;display:block;margin-bottom:8px}
.field-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.field-label label{margin-bottom:8px}.text-button,.back-button{border:0;background:none;color:#555a60;font-size:12px;font-weight:650;padding:0}
.text-button:hover,.back-button:hover{text-decoration:underline;color:#151618}
.field input,.otp-input{width:100%;height:46px;border:1px solid #a8abad;border-radius:10px;background:#fff;color:#151618;padding:0 13px;outline:none;font-size:14px}
.field input:focus,.otp-input:focus{border-color:#151618;box-shadow:0 0 0 3px #15161812}
.field input::placeholder,.otp-input::placeholder{color:#9b9ea2}
.field input[aria-invalid=true],.otp-input[aria-invalid=true]{border-color:#ba2525}
.password-wrap{position:relative}.password-wrap input{padding-right:94px}
.password-wrap button{position:absolute;right:8px;top:7px;height:32px;border:0;background:transparent;color:#656a70;font-size:11px;font-weight:650;padding:0 6px}
.password-wrap button:hover{text-decoration:underline}
.field-error{display:block;min-height:0;color:#ab2424;font-size:12px;margin-top:5px}
.field-error:empty{display:none}
.primary-button{width:100%;min-height:46px;border:1px solid #ff0000;border-radius:10px;background:#ff0000;color:#111;font-size:14px;font-weight:700;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;transition:background .18s,transform .18s}
.primary-button:hover{background:#ff2525}.primary-button:active{transform:translateY(1px)}
.primary-button span{font-size:18px;font-weight:400}
.form-foot{font-size:12px;line-height:1.5;color:#898d90;margin:19px 0 0}
.auth-bottom{border-top:1px solid #e6e7e7;margin-top:35px;padding-top:14px;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#989c9e}
.auth-bottom span:first-child{font-weight:700;color:#61666a}
.otp-input{font-size:27px;letter-spacing:.43em;font-variant-numeric:tabular-nums;font-weight:600;text-align:center;padding-left:22px}
.hint{color:#81868a;font-size:11px;line-height:1.4;margin:9px 0 18px}
.back-button{display:block;margin-top:22px}
.result{background:#f0f6f2;border:1px solid #d6e9dc;border-radius:11px;padding:13px 15px;font-size:12px;line-height:1.45;margin-top:16px;color:#23553a}
.result p{margin:4px 0 0}
.loader-choice{margin:0 0 24px;max-width:max-content}.loader-choice button{font-size:11px}
.progress-area{display:flex;align-items:center;gap:20px;min-height:116px;background:#f8f8f7;border:1px solid #e8e9e9;border-radius:13px;padding:15px}
.progress-mark{width:88px;height:76px;position:relative;display:grid;place-items:center;flex:none}
.progress-mark img{position:absolute;inset:0;width:88px;height:76px;object-fit:fill}
.progress-base{opacity:.2;filter:grayscale(1)}
.progress-fill{clip-path:inset(var(--unfilled) 0 0 0);transition:clip-path .25s ease}
.progress-mark strong{position:relative;font-size:14px;font-variant-numeric:tabular-nums}
.progress-copy{display:grid;gap:5px}.progress-copy strong{font-size:14px}.progress-copy span{font-size:11px;color:#777c80}
.slider-group{margin-top:21px}.slider-group label{display:flex;justify-content:space-between;font-size:11px;font-weight:650}
.slider-group input{width:100%;margin-top:11px;accent-color:#ff0000}
.progress-area.unknown .progress-fill{animation:sweep 1.65s ease-in-out infinite}
.progress-area.unknown .progress-mark strong{display:none}
.stage-note{padding:17px 24px;display:flex;gap:30px;align-items:baseline;border-top:1px solid #e1e2e3;background:#f5f5f4}
.stage-note span{flex:none;font-size:10px;letter-spacing:.13em;color:#787d81;font-weight:700}
.stage-note p{font-size:11px;color:#7b8083;line-height:1.4;margin:0}
.stage[data-preview-theme=dark] .canvas{background:#17181a}
.stage[data-preview-theme=dark] .auth-card{background:#222427;border-color:#383b3e;color:#f6f6f5;box-shadow:0 22px 60px #0004}
.stage[data-preview-theme=dark] .auth-top img{content:url("../brand-assets/logos/dot-id-dark.svg")}
.stage[data-preview-theme=dark] .screen-head>p:last-child,.stage[data-preview-theme=dark] .form-foot,.stage[data-preview-theme=dark] .hint,.stage[data-preview-theme=dark] .progress-copy span{color:#a9adb3}
.stage[data-preview-theme=dark] .field input,.stage[data-preview-theme=dark] .otp-input{background:#272a2d;color:#f6f6f5;border-color:#777d82}
.stage[data-preview-theme=dark] .field input:focus,.stage[data-preview-theme=dark] .otp-input:focus{border-color:#f6f6f5;box-shadow:0 0 0 3px #ffffff16}
.stage[data-preview-theme=dark] .text-button,.stage[data-preview-theme=dark] .back-button,.stage[data-preview-theme=dark] .password-wrap button{color:#c0c3c6}
.stage[data-preview-theme=dark] .text-button:hover,.stage[data-preview-theme=dark] .back-button:hover{color:#fff}
.stage[data-preview-theme=dark] .auth-bottom{border-color:#383b3e;color:#a9adb3}
.stage[data-preview-theme=dark] .auth-bottom span:first-child{color:#e1e1e1}
.stage[data-preview-theme=dark] .progress-area{background:#292b2e;border-color:#3c3e41}
.stage[data-preview-theme=dark] .result{background:#1d382a;border-color:#2c593d;color:#b9e9ca}
.stage[data-preview-theme=dark] .field-error{color:#ff9b9b}
footer{padding:28px 0 38px;display:flex;justify-content:space-between;font-size:12px;color:#8b9093}
footer a{text-decoration:none}footer a:hover{text-decoration:underline;color:#151618}
@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes sweep{0%,100%{clip-path:inset(100% 0 0)}50%{clip-path:inset(0 0 0)}}
@media(max-width:1000px){.page{padding:0 24px}.workspace{grid-template-columns:270px minmax(0,1fr)}.rail{padding:20px}.canvas{padding:24px 14px}.auth-card{padding:23px}.demo-label{display:none}}
@media(max-width:750px){.page{padding:0 16px}.topbar{height:74px}.brand-link img{width:92px}.toplinks{gap:13px;font-size:11px}.intro{padding:42px 0 28px}.lead{font-size:14px;margin-top:17px}.workspace{display:block}.rail{border-radius:20px 20px 0 0;padding:16px}.rail-header,.rail-bottom,.step small,.step .arrow{display:none}.step-list{display:flex;overflow-x:auto;gap:6px;margin:0}.step{display:flex;align-items:center;gap:6px;flex:none;width:auto;padding:10px 12px}.step-index{padding:0}.step strong{font-size:12px}.stage{border-radius:0 0 20px 20px;border-top:0}.stage-bar{height:56px;padding:0 14px}.canvas{padding:22px 13px}.auth-card{min-height:520px}.stage-note{padding:13px 16px;display:block}.stage-note p{margin-top:6px}footer{font-size:11px}}
@media(max-width:390px){.toplinks a:first-child{display:none}.auth-card{padding:22px 18px}.auth-top{margin-bottom:45px}.auth-top img{width:126px}.secure-tag{font-size:8px}.theme-switch button{padding:7px}.auth-bottom span:last-child{max-width:170px;text-align:right}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.step,.primary-button,.canvas,.progress-fill{transition:none}.screen{animation:none}.progress-area.unknown .progress-fill{animation:none;clip-path:inset(0 0 0)}}

/* Password visibility control */
.password-wrap input{padding-right:54px}.password-wrap button{top:1px;right:1px;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:9px;color:#656a70}.password-wrap button:hover{background:#f2f2f1;text-decoration:none}.password-wrap button svg{width:20px;height:20px}.password-wrap button .eye-closed{display:none}.password-wrap button[aria-pressed=true] .eye-open{display:none}.password-wrap button[aria-pressed=true] .eye-closed{display:block}.stage[data-theme=dark] .password-wrap button:hover{background:#34373a}