.badge-gallery{row-gap:var(--space-24)}@container g12 (width >= 40rem){.badge-gallery>.badge-variant{grid-column:span 4}}.badge-variant{display:flex;flex-direction:column;gap:var(--space-12)}.badge-preview{display:flex;align-items:center;justify-content:center;box-sizing:border-box;block-size:5.125rem;padding:0 var(--space-16);border:1px solid var(--line);border-radius:var(--radius)}.badge-variant-info{display:flex;flex-direction:column;gap:var(--space-fine-20)}.badge-variant-label{font-size:var(--text-label);font-weight:600;color:var(--ink)}.badge-variant-desc{font-size:var(--text-label);color:var(--muted);line-height:var(--leading-meta)}.badge-variant-dim{font-size:var(--text-label);color:var(--muted-dim);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.badge-snippets{container:badge-snippets/inline-size;display:flex;flex-direction:column;gap:var(--space-32)}.surface-note+.badge-snippets{margin-top:var(--space-24)}.badge-snippet{position:relative;display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--radius);background:var(--mat-reading);box-shadow:var(--elev-1)}.badge-snippet:before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:var(--rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}.badge-snippet-face,.badge-snippet-side{min-width:0;padding:var(--space-8) var(--space-20) var(--space-20)}.badge-snippet-side{display:flex;flex-direction:column;margin:0;border-top:1px solid var(--line-faint)}@container badge-snippets (width >= 64rem){.badge-snippet{grid-template-columns:var(--track-split) minmax(0,1fr)}.badge-snippet-side{border-top:0;border-left:1px solid var(--line-faint)}}.badge-snippet-label{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);min-height:2.75rem;margin:0 0 var(--space-8)}.badge-snippet-name{margin:0;font-family:var(--sans);font-weight:600;letter-spacing:.08em;text-transform:uppercase}.badge-snippet-dim,.badge-snippet-name{font-size:var(--text-label);line-height:1rem;color:var(--muted)}.badge-snippet-dim{font-family:var(--mono);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.badge-snippet-copy{display:inline-flex;align-items:center;justify-content:center;min-width:4.5rem;min-height:2.25rem;padding:0 var(--space-12);border:0;border-radius:var(--radius-sm);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--specular);color:var(--ink);font-family:var(--mono);font-size:var(--text-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}@media (hover:hover){.badge-snippet-copy:hover{background:var(--surface-lifted)}}.badge-snippet-copy:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.badge-snippet-copy.is-copied{color:var(--signal-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--signal) 45%,transparent),var(--specular)}@media (pointer:coarse){.badge-snippet-copy{min-height:2.75rem}}@media (prefers-reduced-motion:reduce){.badge-snippet-copy{transition:none}}.badge-snippet-code{margin:0;padding:var(--space-16);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--paper) 45%,transparent);box-shadow:inset 0 0 0 1px var(--line-faint);white-space:pre;overflow-x:auto;overscroll-behavior-x:contain;font-family:var(--mono);font-size:var(--text-label);line-height:var(--leading-body);color:var(--ink)}.badge-snippet-code code{font:inherit;color:inherit}.badge-snippet-specimen{position:relative;flex:none;align-self:flex-start;display:flex;align-items:center;justify-content:center;box-sizing:border-box;block-size:5rem;min-inline-size:5rem;padding:0 var(--space-24);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--line)}.badge-snippet-specimen:before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:var(--rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}.badge-snippet-specimen img{display:block}.badge-snippet-specimen .badge-live-img{block-size:44px;inline-size:auto;max-inline-size:100%;object-fit:contain}@media (prefers-reduced-motion:no-preference){#badge-live.doctrine-section.fade-up{animation-name:riseUp}}.eg-bar+.badge-live-snippets{margin-top:var(--space-32)}.inline-code{font-family:var(--mono);font-size:inherit;padding:var(--space-fine-10) var(--space-fine-30);background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink)}.badge-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-12);counter-reset:badge-step}.badge-steps li{max-width:66ch;position:relative;padding-left:var(--space-32);font-size:var(--text-body);line-height:var(--leading-body);color:var(--muted);counter-increment:badge-step}.badge-steps li:before{content:counter(badge-step,decimal-leading-zero);position:absolute;left:0;top:.1rem;font-size:var(--text-label);font-weight:600;color:var(--signal-text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.badge-steps strong{color:var(--ink);font-weight:600}.badge-grade-table{display:flex;flex-direction:column;gap:var(--space-fine-40);margin:var(--space-12) 0}.badge-grade-table .badge-grade-row{grid-template-columns:2.5rem minmax(0,1fr);min-height:2.75rem}.badge-grade-letter{font-size:var(--text-lead);font-weight:800;line-height:var(--leading-single);text-align:center}.badge-grade-table .badge-grade-min{font-size:var(--text-body);color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.definition .definition-note{margin-top:var(--space-12);font-size:var(--text-label);line-height:var(--leading-prose);color:var(--muted)}@media (max-width:380px){.badge-preview{padding-inline:var(--space-12)}.badge-steps li{font-size:var(--text-body)}}@media (max-width:720px){.badge-steps li{font-size:var(--text-body);padding-left:var(--space-28)}.badge-snippet-face,.badge-snippet-side{padding-inline:var(--space-16)}.badge-snippet-code{padding:var(--space-12)}}