.badge-page{max-width:1080px}.bp-h1{letter-spacing:-.6px;margin:0 0 14px;font-size:clamp(27px,3.4vw,38px);font-weight:800;line-height:1.15}.bp-lead{color:#475569;max-width:720px;margin:0 0 40px;font-size:16.5px;line-height:1.7}.bp-grid{grid-template-columns:minmax(300px,368px) 1fr;align-items:start;gap:32px;margin-bottom:40px;display:grid}.bp-controls{background:#fff;border:1px solid #e6ebf3;border-radius:18px;padding:26px 24px 28px;box-shadow:0 1px 2px #0f172a0a,0 8px 24px -18px #0f172a47}.bp-lab{text-transform:uppercase;letter-spacing:.7px;color:#64748b;margin:0 0 10px;font-size:11.5px;font-weight:700;display:block}.bp-controls>.bp-lab:not(:first-child){margin-top:28px}.bp-select{color:#0f172a;cursor:pointer;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") right 13px center no-repeat;border:1px solid #dbe2ec;border-radius:12px;width:100%;padding:13px 40px 13px 15px;font-size:15px;transition:all .15s}.bp-select:hover{border-color:#c3cede}.bp-select:focus{border-color:#1d4ed8;outline:none;box-shadow:0 0 0 3px #1d4ed81f}.bp-seg{background:#f1f5f9;border-radius:12px;gap:4px;padding:4px;display:flex}.bp-seg button{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:9px;flex:1;padding:10px 12px;font-size:13.5px;font-weight:600;transition:all .15s}.bp-seg button:hover:not(.on){color:#334155}.bp-seg button.on{color:#1d4ed8;background:#fff;box-shadow:0 1px 3px #0f172a1f}.bp-awards{flex-direction:column;gap:10px;display:flex}.bp-award{text-align:left;cursor:pointer;font:inherit;background:#fff;border:1px solid #dbe2ec;border-radius:13px;flex-direction:column;gap:3px;padding:13px 16px;transition:all .15s;display:flex}.bp-award:hover{background:#fffdf7;border-color:#f0b429}.bp-award.on{background:linear-gradient(135deg,#fffbeb,#fff);border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b29}.bp-award b{color:#0f172a;font-size:14.5px;font-weight:700;line-height:1.35}.bp-award span{color:#64748b;font-size:12.5px;line-height:1.45}.bp-award.plain:hover{background:#fafcff;border-color:#93b4f5}.bp-award.plain.on{background:linear-gradient(135deg,#eff6ff,#fff);border-color:#1d4ed8;box-shadow:0 0 0 3px #1d4ed824}.bp-awardp{color:#64748b;margin:10px 0 0;font-size:12.5px;line-height:1.6}.bp-preview{min-width:0;position:sticky;top:88px}.bp-stage{background:#f8fafc;border:1px solid #e6ebf3;border-radius:18px;justify-content:center;align-items:center;min-height:300px;padding:36px 28px;transition:background .2s,border-color .2s;display:flex}.bp-stage.dark{background:#0b1220;border-color:#1e293b}.bp-stage{position:relative}.bp-stage img{max-width:100%;height:auto;transition:opacity .18s}.bp-stage.busy img{opacity:.25}.bp-spin{border:2.5px solid #64748b40;border-top-color:#1d4ed8;border-radius:50%;width:26px;height:26px;animation:.7s linear infinite bp-rot;position:absolute}.bp-stage.dark .bp-spin{border-color:#60a5fa #94a3b840 #94a3b840}@keyframes bp-rot{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.bp-spin{animation-duration:2s}}.bp-note{color:#64748b;margin:12px 2px 0;font-size:12.5px;line-height:1.6}.bp-codebox{background:#fff;border:1px solid #e6ebf3;border-radius:16px;margin-bottom:44px;overflow:hidden}.bp-codehead{background:#f8fafc;border-bottom:1px solid #e6ebf3;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;display:flex}.bp-codehead .bp-lab{margin:0}.bp-copy{color:#fff;cursor:pointer;background:#1d4ed8;border:none;border-radius:11px;align-items:center;gap:8px;padding:10px 17px;font-size:13.5px;font-weight:700;transition:all .15s;display:inline-flex}.bp-copy:hover{background:#1a43bd}.bp-copy.done{background:#059669}.bp-code{color:#0f172a;white-space:pre;background:#fff;margin:0;padding:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.75;overflow-x:auto}.bp-cols{grid-template-columns:1fr 1fr;gap:36px;margin-bottom:36px;display:grid}.bp-h2{margin:0 0 14px;font-size:19px;font-weight:700}.bp-ol,.bp-ul{flex-direction:column;gap:11px;margin:0;padding-left:22px;display:flex}.bp-ol li,.bp-ul li{color:#334155;font-size:15px;line-height:1.65}.bp-rules{color:#64748b;background:#f8fafc;border-left:3px solid #cbd5e1;border-radius:0 12px 12px 0;margin:0 0 40px;padding:16px 20px;font-size:13.5px;line-height:1.65}.bp-cta{background:linear-gradient(135deg,#eff6ff,#f8fbff);border:1px solid #dbe6fb;border-radius:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:28px 30px;display:flex}.bp-cta h2{margin:0 0 8px;font-size:20px;font-weight:700}.bp-cta p{color:#475569;max-width:560px;margin:0;font-size:15px;line-height:1.65}.bp-cta-btn{color:#fff;white-space:nowrap;background:#1d4ed8;border-radius:12px;align-items:center;gap:9px;padding:14px 24px;font-size:15px;font-weight:700;text-decoration:none;display:inline-flex}.bp-cta-btn:hover{background:#1a43bd}@media (max-width:980px){.bp-grid{grid-template-columns:1fr;gap:26px}.bp-cols{grid-template-columns:1fr;gap:28px}.bp-preview{order:-1;position:static}.bp-stage{min-height:220px;padding:28px 20px}}@media (max-width:560px){.bp-lead{margin-bottom:28px}.bp-controls{border-radius:16px;padding:20px 18px 22px}.bp-stage{min-height:190px;padding:22px 14px}.bp-code{padding:14px;font-size:11.5px}.bp-copy{padding:9px 14px;font-size:13px}.bp-cta{gap:18px;padding:22px 20px}.bp-cta-btn{justify-content:center;width:100%}}