:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#101219;--ink:#f0f0f5;--muted:#a9aab9;--line:#333545;--accent:#c6b6ff}*{box-sizing:border-box}body{background:radial-gradient(ellipse at 75% 12%,#252041 0%,transparent 47%),var(--bg);color:var(--ink);margin:0;font:16px/1.55 system-ui,Microsoft YaHei,sans-serif}.shell{max-width:1152px;min-height:100vh;margin:auto;padding:0 40px}header{letter-spacing:.13em;border-bottom:1px solid #ffffff18;align-items:center;gap:12px;height:83px;font-size:13px;font-weight:750;display:flex}.logo{color:var(--accent);letter-spacing:0;background:#2e254b;border:1px solid #7564ab;border-radius:11px;place-items:center;width:34px;height:34px;font-size:19px;display:grid}.layout{grid-template-columns:1fr minmax(330px,440px);align-items:start;gap:clamp(36px,7vw,100px);padding:74px 0 64px;display:grid}.intro{padding-top:13px}.eyebrow{color:var(--accent);letter-spacing:.16em;align-items:center;gap:10px;font-size:13px;font-weight:750;display:flex}.eyebrow i{background:var(--accent);border-radius:50%;width:8px;height:8px;box-shadow:0 0 18px #b49fff}h1{letter-spacing:-.05em;margin:18px 0 22px;font-size:clamp(42px,5.8vw,70px);font-weight:780;line-height:1.09}.intro>p{max-width:390px;color:var(--muted);margin:0;font-size:17px}.steps{gap:17px;margin:40px 0 0;padding:0;list-style:none;display:grid}.steps li{align-items:center;gap:13px;display:flex}.steps li>span{border:1px solid var(--line);width:36px;height:36px;color:var(--accent);background:#1a1927;border-radius:10px;place-items:center;font:700 12px ui-monospace,monospace;display:grid}.steps b{font-size:14px;display:block}.steps small{color:var(--muted);font-size:12px;display:block}.panel{background:#1b1d2a;border:1px solid #383a50;border-radius:22px;padding:27px 30px 24px;box-shadow:0 18px 60px #09081266}.panel-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.panel-icon{width:40px;height:40px;color:var(--accent);background:#332950;border-radius:12px;place-items:center;font-size:24px;display:grid}.demo{color:#d4c9ff;background:#252139;border:1px solid #4b416b;border-radius:20px;padding:6px 12px;font-size:12px}h2{margin:18px 0 5px;font-size:27px;line-height:1.2}.muted{color:var(--muted);margin:0 0 22px;font-size:14px}label{margin:14px 0 6px;font-size:14px;font-weight:650;display:block}input{width:100%;font:inherit;color:var(--ink);background:#13151f;border:1px solid #414356;border-radius:9px;padding:12px 13px;font-size:15px}input::placeholder{color:#9899ab}:is(input:focus-visible,button:focus-visible){outline-offset:2px;outline:2px solid #d2c3ff}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.65}.primary,.secondary{border-radius:10px;width:100%;padding:11px 15px;font-weight:750;display:block}.primary{color:#1c1534;background:#c6b6ff;border:1px solid #c6b6ff;margin:21px 0 9px}.primary span{float:right}.primary:hover{background:#d7cbff}.secondary{color:var(--ink);background:0 0;border:1px solid #414356}.secondary:hover,.demo:hover{background:#333048}.result{background:#272237;border:1px solid #51476b;border-radius:11px;margin-top:15px;padding:11px 13px;font-size:13px}.result.success{background:#1b3430;border-color:#3b695f}.result strong,.result small{display:block}.result small{color:#c4c4d4;overflow-wrap:anywhere;margin-top:3px}footer{color:var(--muted);border-top:1px solid #ffffff18;justify-content:space-between;gap:10px;padding:18px 0 26px;font-size:12px;display:flex}@media (max-width:760px){.shell{padding:0 22px}header{height:64px}.layout{grid-template-columns:1fr;gap:28px;padding:37px 0 34px}.intro{padding:0}.steps{margin-top:25px}.panel{padding:22px}.intro>p{font-size:15px}}.secondary-row{gap:8px;display:flex}