.badge-page{padding-bottom:85px}.badge-hero{max-width:800px;padding:45px 0 48px}.badge-hero .eyebrow,.badge-explanation .eyebrow,.badge-preview-heading .eyebrow{letter-spacing:.06em;font-size:12px;font-weight:600}.badge-hero h1{letter-spacing:-.05em;font-size:58px;line-height:1.08}.badge-hero>p{color:var(--muted);max-width:59ch;margin-top:23px;font-size:19px;line-height:1.6}.badge-hero-tags{color:var(--muted);flex-wrap:wrap;gap:20px;margin-top:24px;font-size:13px;display:flex}.badge-hero-tags span{align-items:center;gap:8px;display:flex}.badge-hero-tags span:before{content:"";background:var(--blue);border-radius:50%;width:5px;height:5px}.badge-configurator{grid-template-columns:minmax(280px,.85fr) minmax(0,1.4fr);gap:22px;display:grid}.badge-options,.badge-preview-panel,.badge-code-panel{border:1px solid var(--border);background:var(--background);border-radius:24px;min-width:0;padding:30px}.badge-step-heading{align-items:start;gap:14px;margin-bottom:27px;display:flex}.badge-step-heading>span{border:1px solid var(--border);width:32px;height:32px;color:var(--blue);border-radius:50%;flex:none;place-items:center;font-size:12px;font-weight:600;display:grid}.badge-step-heading h2{font-size:23px;line-height:1.25}.badge-step-heading p{color:var(--muted);margin-top:7px;font-size:15px;line-height:1.5}.badge-field{flex-direction:column;gap:9px;font-size:15px;font-weight:550;display:flex}.badge-field select{width:100%;min-height:48px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 13px;font-size:16px}.badge-fieldset{border:0;min-width:0;margin:24px 0 0;padding:0}.badge-fieldset legend{margin-bottom:10px;padding:0;font-size:15px;font-weight:550}.badge-choice-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.badge-choice-row>button{min-height:46px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:9px;font-size:13px;display:flex}.badge-choice-row>button[aria-pressed=true]{background:var(--blue-soft);color:var(--blue);border-color:var(--blue)}.badge-size-row{grid-template-columns:repeat(3,minmax(0,1fr))}.badge-size-row>button{flex-direction:column;gap:3px;padding:10px 4px}.badge-size-row strong{font-size:13px;font-weight:550}.badge-size-row span{white-space:nowrap;font-size:12px}.badge-option-note{color:var(--muted);margin-top:24px;font-size:15px;line-height:1.5}.badge-preview-panel{flex-direction:column;padding:24px;display:flex}.badge-preview-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.badge-preview-heading .eyebrow{margin:0}.badge-preview-heading>span:last-child{color:var(--muted);white-space:nowrap;font-size:13px}.badge-preview-stage{background:radial-gradient(circle at 1px 1px,#c3d9cb 1px,#0000 0) 0 0/14px 14px,#f2f8f4;border:1px solid #dde9e2;border-radius:17px;flex:1;justify-content:center;align-items:center;min-height:334px;margin-top:22px;padding:28px 10px;transition:background .2s;display:flex}.badge-preview-stage.dark{background:radial-gradient(circle at 1px 1px,#2f5040 1px,#0000 0) 0 0/14px 14px,#14281e;border-color:#294836}.badge-preview-stage>iframe{border:0;border-radius:18px;flex:none;max-width:100%;display:block}.badge-preview-stage>iframe[width="240"]{border-radius:14px}.badge-preview-caption{color:var(--muted);justify-content:space-between;align-items:center;gap:15px;margin-top:17px;font-size:13px;display:flex}.badge-preview-caption>a{min-height:44px;color:var(--blue);flex-shrink:0;align-items:center;gap:7px;display:flex}.badge-code-panel{grid-column:1/-1}.badge-code-panel .badge-step-heading{margin-bottom:22px}.badge-code-tabs{flex-wrap:wrap;gap:5px;margin-bottom:15px;display:flex}.badge-code-tabs>button{min-height:44px;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:11px;align-items:center;gap:7px;padding:8px 16px;font-size:13px;display:flex}.badge-code-tabs>button[aria-pressed=true]{background:var(--surface);border-color:var(--border);color:var(--text)}.badge-code-panel textarea{border:1px solid var(--border);width:100%;max-width:100%;min-height:136px;color:var(--text);background:var(--surface);resize:vertical;overflow-wrap:anywhere;word-break:break-all;border-radius:14px;padding:19px 20px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.6;display:block}.badge-copy-row{justify-content:space-between;align-items:center;gap:25px;margin-top:17px;display:flex}.badge-copy-row>p{color:var(--muted);max-width:65ch;font-size:15px;line-height:1.5}.badge-copy-row>.button{flex-shrink:0;font-size:13px}.badge-explanation{border-top:1px solid var(--border);margin-top:80px;padding-top:55px}.badge-explanation>header{max-width:670px}.badge-explanation h2{letter-spacing:-.035em;font-size:37px;line-height:1.15}.badge-explanation>header>p{color:var(--muted);margin-top:20px;font-size:17px;line-height:1.6}.badge-explanation-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:36px;display:grid}.badge-explanation-cards article>svg{color:var(--blue);margin-bottom:20px}.badge-explanation-cards h3{font-size:21px;line-height:1.3}.badge-explanation-cards p{color:var(--muted);margin-top:12px;font-size:15px;line-height:1.5}.badge-explanation-cards strong{color:var(--text);font-weight:550}.badge-configurator-pending{border:1px solid var(--border);background:var(--surface);border-radius:24px;min-height:730px}.badge-empty{border:1px solid var(--border);background:var(--surface);border-radius:24px;padding:36px}.badge-empty h2{font-size:27px}.badge-empty p{color:var(--muted);max-width:65ch;margin-top:15px;font-size:15px;line-height:1.5}.badge-empty .button{margin-top:22px}@media (max-width:900px){.badge-configurator{grid-template-columns:minmax(265px,.95fr) minmax(0,1fr);gap:16px}.badge-options{padding:23px}.badge-preview-panel{padding:19px}.badge-preview-stage{padding-inline:0}.badge-preview-caption{flex-direction:column;align-items:start;gap:2px}.badge-explanation-cards{gap:20px}.badge-hero h1{font-size:49px}}@media (max-width:650px){.badge-hero{padding:30px 0 34px}.badge-hero h1{max-width:9ch;font-size:40px}.badge-hero>p{margin-top:18px;font-size:17px;line-height:1.6}.badge-hero-tags{gap:12px 18px;margin-top:20px}.badge-configurator{grid-template-columns:minmax(0,1fr)}.badge-options,.badge-code-panel{border-radius:20px;padding:23px 20px}.badge-preview-panel{border-radius:20px;padding:20px 12px}.badge-preview-heading{padding-inline:8px}.badge-preview-stage{border-radius:13px;min-height:242px;margin-top:17px;padding-inline:0}.badge-preview-caption{flex-direction:row;align-items:center;gap:10px;padding-inline:8px}.badge-preview-caption>span{max-width:16ch}.badge-code-panel textarea{padding:14px;font-size:13px}.badge-copy-row{flex-direction:column;align-items:stretch;gap:16px}.badge-copy-row>.button{align-self:start}.badge-explanation{margin-top:52px;padding-top:37px}.badge-explanation h2{font-size:31px}.badge-explanation-cards{grid-template-columns:minmax(0,1fr);gap:29px;margin-top:30px}.badge-explanation-cards article>svg{margin-bottom:12px}.badge-empty{padding:25px}.badge-empty h2{font-size:24px}}@media (prefers-reduced-motion:reduce){.badge-preview-stage{transition:none}}