.badges-hero{background:linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 40px 40px, var(--paper);padding-block:clamp(36px,6vw,72px) clamp(44px,6vw,80px)}.badges-hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(28px,5vw,64px);display:grid}.badges-hero-copy{gap:18px;display:grid}.badges-hero-copy>*{animation:rise .85s var(--ease) both}.badges-hero-copy>:nth-child(2){animation-delay:80ms}.badges-hero-copy>:nth-child(3){animation-delay:.16s}.badges-hero-copy>:nth-child(4){animation-delay:.24s}.badges-hero-copy h1{font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:.98}.badges-wings{color:var(--amber);position:relative}@media (max-width:960px){.badges-hero-grid{grid-template-columns:minmax(0,1fr)}}.jacket{background:repeating-linear-gradient(45deg, transparent 0 22px, #ffffff06 22px 23px), repeating-linear-gradient(-45deg, transparent 0 22px, #ffffff06 22px 23px), radial-gradient(80% 70% at 30% 20%, #1c2a44, var(--panel) 75%);min-height:380px;box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--panel-line), inset 0 0 60px #00000080;animation:rise 1s .1s var(--ease) both;border-radius:26px;position:relative;overflow:hidden}.jacket:before{content:"";pointer-events:none;border:1.5px dashed #ffffff1f;border-radius:18px;position:absolute;inset:12px}.jacket-seam{opacity:.8;background:repeating-linear-gradient(#2a3954 0 4px,#10192b 4px 7px);width:6px;position:absolute;top:0;bottom:0;left:82%;box-shadow:0 0 0 1px #0000004d}.jacket-label{color:var(--panel-amber);font:700 .62rem/1 var(--font-mono);letter-spacing:.18em;background:#ffc54d1f;border-radius:6px;padding:5px 9px;position:absolute;bottom:22px;right:22px}.patch{width:min(210px,44%);height:auto;transform:rotate(var(--r));transition:transform .35s var(--ease), box-shadow .35s;animation:sew-on .7s var(--ease) both;animation-delay:calc(var(--i) * .11s + .35s);border-radius:11px;position:absolute;box-shadow:0 10px 22px -8px #0009,0 0 0 3px #ffffff0a}.patch:hover{z-index:2;transform:rotate(0)scale(1.06);box-shadow:0 18px 30px -10px #000000b3,0 0 0 3px #ff5cc059}@keyframes sew-on{0%{opacity:0;transform:rotate(calc(var(--r) * 3)) scale(1.25) translateY(-14px)}}.badge-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-bottom:20px;display:flex}.badge-toolbar p{max-width:60ch;color:var(--ink-2)}.badge-theme{border:1px solid var(--line);background:var(--surface);border-radius:13px;gap:4px;padding:4px;display:inline-flex}.badge-theme button,.badge-format button{color:var(--ink-2);font:600 .9rem/1 var(--font-body);cursor:pointer;background:0 0;border:0;border-radius:9px;align-items:center;gap:7px;padding:8px 13px;display:inline-flex}.badge-theme button svg{width:15px;height:15px}.badge-theme button.on,.badge-format button.on{background:var(--ink);color:var(--paper)}.badge-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:18px;display:grid}.badge-card{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);animation:rise .6s var(--ease) both;animation-delay:calc(var(--i) * 60ms);border-radius:20px;grid-template-rows:auto auto 1fr;display:grid;overflow:hidden}.badge-card-head{padding:20px 22px 16px}.badge-for{background:var(--magenta-soft);color:var(--magenta);font:700 .6rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;border-radius:6px;margin-bottom:8px;padding:4px 8px;display:inline-block}.badge-gold .badge-for{background:var(--amber-soft);color:var(--amber)}.badge-card h3{font-size:1.25rem}.badge-card-head p{color:var(--muted);margin-top:6px;font-size:.92rem}.badge-stage{border-radius:14px;place-items:center;margin:0 22px;padding:28px 16px;transition:background-color .3s;display:grid}.badge-stage img{max-width:100%;height:auto;transition:transform .35s var(--ease)}.badge-card:hover .badge-stage img{transform:translateY(-3px)}.stage-light{background:linear-gradient(#0e1a2b0d 1px,#0000 1px) 0 0/18px 18px,linear-gradient(90deg,#0e1a2b0d 1px,#0000 1px) 0 0/18px 18px,#f3f5f1}.stage-dark{background:linear-gradient(#ffffff0a 1px,#0000 1px) 0 0/18px 18px,linear-gradient(90deg,#ffffff0a 1px,#0000 1px) 0 0/18px 18px,#0a1220}.badge-code{align-content:start;gap:10px;padding:16px 22px 22px;display:grid}.badge-code-bar{align-items:center;gap:8px;display:flex}.badge-format{border:1px solid var(--line);border-radius:11px;gap:2px;margin-right:auto;padding:3px;display:inline-flex}.badge-format button{padding:6px 10px;font-size:.8rem}.badge-icon-btn{border:1px solid var(--line);width:36px;height:36px;color:var(--ink-2);border-radius:10px;place-items:center;display:inline-grid}.badge-icon-btn:hover{border-color:var(--ink);color:var(--ink)}.badge-icon-btn svg{width:16px;height:16px}.badge-copy{background:var(--magenta);height:36px;color:var(--on-magenta);font:700 .86rem/1 var(--font-body);cursor:pointer;transition:background-color .2s, transform .2s var(--ease);border:0;border-radius:10px;align-items:center;gap:7px;padding:0 14px;display:inline-flex}.badge-copy:hover{transform:translateY(-1px)}.badge-copy svg{width:15px;height:15px}.badge-copy.is-copied{background:var(--green);color:#fff}.badge-code pre{background:var(--panel);color:var(--panel-text);font:400 .74rem/1.6 var(--font-mono);white-space:pre-wrap;word-break:break-all;border-radius:12px;margin:0;padding:12px 14px;overflow-x:auto}.badge-rules{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.badge-rules li{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);gap:14px;padding:20px;display:flex}.badge-rules svg{width:22px;height:22px;color:var(--magenta);flex:none}.badge-rules b{font:760 1rem/1.3 var(--font-display);font-stretch:106%;display:block}.badge-rules p{color:var(--ink-2);margin-top:6px;font-size:.92rem}.badges-cta{margin-top:clamp(36px,5vw,56px)}