:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:#0b1014; color:#e7edf0; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 88% 4%,#123537 0,transparent 30%),#0b1014; min-height:100vh; }
main { max-width:1080px; margin:auto; padding:0 34px 50px; }
header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #27353b; padding:28px 0; gap:18px; }
.mark { font-weight:800; letter-spacing:.1em; font-size:19px; }
.mark span { color:#68e5c2; padding:0 3px; }
.header-side { color:#a5b8bd; font-size:13px; display:flex; align-items:center; gap:10px; }
.dot { width:7px; height:7px; border-radius:50%; background:#72e6b8; box-shadow:0 0 14px #72e6b8; }
.hero { padding:72px 0 54px; max-width:770px; }
.eyebrow,.step { color:#6ee4c3; font-size:12px; font-weight:750; letter-spacing:.14em; }
h1 { font-size:clamp(48px,7vw,88px); letter-spacing:-.075em; line-height:.99; margin:20px 0 24px; }
h1 em { font-style:normal; color:#68e5c2; }
.intro { color:#afc1c6; font-size:18px; line-height:1.65; max-width:670px; margin:0; }
.panel { background:#111b20; border:1px solid #2b4045; border-radius:16px; padding:34px; box-shadow:0 24px 70px #0005; }
.step { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.step span { color:#0d171b; background:#72e6c3; padding:5px 7px; border-radius:3px; letter-spacing:0; }
.picker-row,.fix-row { display:flex; align-items:center; gap:25px; }
button { border:0; border-radius:7px; padding:16px 21px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap; transition:transform .15s,background .15s; }
button:hover:not(:disabled) { transform:translateY(-2px); }
button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.primary { background:#72e6c3; color:#0a1919; }
.primary:hover:not(:disabled) { background:#9cf3d9; }
.primary span { margin-left:18px; }
.secondary { background:#edf7f4; color:#0b191a; }
.secondary:hover:not(:disabled) { background:#fff; }
button:disabled { opacity:.44; cursor:not-allowed; }
.picker-row p,.fix-row p { color:#91a7ad; font-size:14px; line-height:1.55; margin:0; max-width:430px; }
.status { margin:25px 0 0; color:#aac1c6; border-left:3px solid #4e6c72; padding:9px 0 9px 15px; min-height:39px; }
.status[data-kind=good] { color:#7ef1bb; border-color:#7ef1bb; }
.status[data-kind=warn] { color:#f5ca7e; border-color:#f5ca7e; }
.status[data-kind=error] { color:#ff9696; border-color:#ff9696; }
progress { width:100%; height:7px; margin-top:26px; accent-color:#72e6c3; }
.divider { border-top:1px solid #2b4045; margin:32px 0; }
.facts { display:grid; gap:0; margin:0; }
.facts div { display:grid; grid-template-columns:175px minmax(0,1fr); border-bottom:1px solid #223238; padding:13px 0; gap:12px; }
.facts div:last-child { border-bottom:0; }
dt { color:#8fa5aa; font-size:13px; }
dd { margin:0; overflow-wrap:anywhere; font-size:14px; }
.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; }
footer { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:46px 0 10px; color:#839ba1; font-size:13px; line-height:1.6; }
footer strong { display:inline-block; color:#d6e5e6; margin-bottom:5px; }
@media(max-width:700px) { main{padding:0 20px 35px} header{align-items:flex-start;flex-direction:column}.hero{padding:55px 0 40px}.panel{padding:24px}.picker-row,.fix-row{align-items:flex-start;flex-direction:column;gap:15px}.facts div{grid-template-columns:1fr;gap:4px}footer{grid-template-columns:1fr;gap:22px} }