@font-face{font-family:'06express Nummerfont';src:url('/fonts/06express-nummerfont.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('/fonts/makkelijk-bricolage.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-medium.ttf') format('truetype');font-weight:500;font-display:swap}
:root[data-number-font=inter],.number-font-choice[data-number-font-choice=inter]{--number-font:'Inter Logo',Inter,sans-serif;--number-weight:770;--number-spacing:-.045em}
:root[data-number-font=express],.number-font-choice[data-number-font-choice=express]{--number-font:'06express Nummerfont',sans-serif;--number-weight:400;--number-spacing:0}
:root[data-number-font=makkelijk],.number-font-choice[data-number-font-choice=makkelijk]{--number-font:'Bricolage Grotesque',sans-serif;--number-weight:650;--number-spacing:-.025em}
:root[data-number-font=unbounded],.number-font-choice[data-number-font-choice=unbounded]{--number-font:Unbounded,sans-serif;--number-weight:600;--number-spacing:-.025em}
:root[data-number-font=space],.number-font-choice[data-number-font-choice=space]{--number-font:'Space Grotesk',sans-serif;--number-weight:600;--number-spacing:-.015em}
:root[data-number-font=mono],.number-font-choice[data-number-font-choice=mono]{--number-font:'IBM Plex Mono',monospace;--number-weight:500;--number-spacing:-.045em}
:root[data-number-font] :is(.result-card strong,.browse-card strong,.preview-number,#detail-number,.number-format-example){font-family:var(--number-font);font-weight:var(--number-weight);letter-spacing:var(--number-spacing);font-variant-numeric:tabular-nums;min-width:0}
/* A chosen typeface applies to the complete number, including its 06. */
:root[data-number-font] .shop-prefix{display:inline;position:static;width:auto;height:auto;margin:0;background:none;mask:none;-webkit-mask:none}
:root[data-number-font] .shop-prefix-text{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.number-fonts{display:grid;width:100%;grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:740px;margin:0 0 22px;text-align:left}
.number-fonts>.search-options-label{grid-column:1/-1}
.number-font-choice{display:grid;gap:8px;align-content:center;min-width:0;min-height:70px;padding:10px 8px;border:1px solid var(--line);border-radius:13px;background:transparent;color:var(--muted);font-family:inherit;font-size:11px;line-height:1.2;font-weight:600;cursor:pointer}
.number-font-choice>span:first-child{font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:600}
.number-font-example{font-family:var(--number-font);font-weight:var(--number-weight);letter-spacing:var(--number-spacing);font-size:clamp(12px,1.9vw,19px);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.number-font-choice[aria-pressed=true]{border-color:var(--strong-line);background:var(--surface-raised);color:var(--text)}
.number-font-choice:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.more-options .number-fonts{width:100%;margin-top:8px}
@media(max-width:600px){.number-fonts{grid-template-columns:repeat(2,minmax(0,1fr))}.number-font-example{font-size:15px}}
@media(max-width:360px){.number-font-example{font-size:12px}.number-font-choice>span:first-child{font-size:10px}}
.browse-grid{scroll-margin-top:24px}