:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#152038;background:#f4f6fb}*{box-sizing:border-box}body{margin:0}.hero{background:radial-gradient(circle at 80% 10%,rgba(93,125,255,.24),transparent 34%),linear-gradient(135deg,#11182e,#263d78);color:#fff;padding:0 24px 80px}.hero nav{height:76px;max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{color:#fff;text-decoration:none;font-weight:900;font-size:24px;letter-spacing:-.05em}.brand span{opacity:.62}.nav-right{display:flex;align-items:center;gap:16px}.nav-right a{color:#dfe6ff;text-decoration:none;font-size:13px}.nav-right select,.controls select{appearance:none;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:inherit;border-radius:10px;padding:9px 30px 9px 10px}.controls select{background:#fff;color:#172033;border-color:#d9deea}.hero-copy{max-width:1120px;margin:72px auto 0}.kicker,.eyebrow{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.72}.hero h1{font-size:clamp(38px,6vw,72px);max-width:900px;line-height:1.03;letter-spacing:-.055em;margin:14px 0 20px}.hero-copy>p:last-child{font-size:18px;line-height:1.7;max-width:720px;color:#dce4ff}main{max-width:1120px;margin:-38px auto 0;padding:0 24px 60px}.panel{background:#fff;border:1px solid #e3e7ef;border-radius:20px;box-shadow:0 15px 50px rgba(28,43,79,.08)}.controls{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;padding:18px;align-items:end}.controls label{display:block;font-size:11px;font-weight:800;color:#6b768d;margin-bottom:7px}.controls select{width:100%}.controls button{border:0;background:#203766;color:#fff;font-weight:800;border-radius:11px;padding:11px 16px;cursor:pointer}.preview{margin-top:24px;padding:24px}.section-head{display:flex;justify-content:space-between;align-items:flex-end}.section-head h2,.api h2{margin:4px 0 0;font-size:25px;letter-spacing:-.03em}.section-head #timer{font-size:12px;color:#738099}#frameWrap{margin-top:26px;min-height:180px;border-radius:16px;background:repeating-conic-gradient(#f1f3f7 0 25%,#e9ecf2 0 50%) 50%/18px 18px;display:grid;place-items:center;padding:28px;overflow:auto}iframe{border:0;display:block;background:transparent}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}.how article{background:#fff;border:1px solid #e3e7ef;border-radius:18px;padding:23px}.how span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#edf1fb;color:#36518a;font-size:11px;font-weight:900}.how h3{margin:18px 0 8px;font-size:17px}.how p{margin:0;color:#6e7890;line-height:1.6;font-size:14px}.api{margin-top:24px;padding:24px}.api code{display:block;margin-top:14px;padding:15px 17px;border-radius:12px;background:#11182e;color:#dce5ff;overflow:auto;font-size:12px}footer{text-align:center;color:#8a94a8;padding:30px;font-size:12px}@media(max-width:720px){.hero{padding-bottom:62px}.hero-copy{margin-top:42px}.controls,.how{grid-template-columns:1fr}.controls button{width:100%}.preview{padding:18px}#frameWrap{padding:18px}.section-head{align-items:flex-start;gap:20px}.hero h1{font-size:42px}}