:root{--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-canvas:#fff;--color-surface:#f7f7f7;--color-surface-hover:#f0f0f0;--color-text:#1a1a1a;--color-text-secondary:#2e2e2e;--color-text-muted:#6b6b6b;--color-text-disabled:#a8a8a8;--color-border:#dbdbdb;--color-border-control:#c4c4c4;--color-progress-fill:#1d4ed8;--color-progress-track:#e5e7eb;--color-action:#1a1a1a;--color-action-hover:#575757;--color-action-pressed:#2e2e2e;--color-primary-pressed-background:#fff;--color-primary-pressed-text:#575757;--color-text-inverse:#fff;--color-on-action:#f7f7f7;--color-check-fill:#212121;--color-check-outline:#000;--color-error:#575757;--font-brand:"PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;--font-weight-regular:400;--font-weight-button:400;--font-size-small:.875rem;--font-size-body:1rem;--font-size-title:1.5rem;--line-height-body:1.5;--line-height-button:1.875;--letter-spacing-button:.06em;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--radius-control:12px;--radius-selection:12px;--radius-small:4px;--control-height:48px;--button-height-mid:40px;--button-height-large:48px;--button-icon-gap-large:10px;--button-icon-gap-mid:8px;--button-group-gap:16px;--nav-height:96px;--page-gutter:clamp(16px, 4vw, 64px);--duration-state:.16s;--ease-state:ease-out;--status-success-bg:#eaf6ee;--status-success-text:#24613b;--status-success-border:#c7e4d0;--status-warning-bg:#fff5df;--status-warning-text:#855000;--status-warning-border:#f0d8a4;--status-info-bg:#edf3ff;--status-info-text:#29599a;--status-info-border:#ccdbf5;--status-danger-bg:#fff0ee;--status-danger-text:#a13229;--status-danger-border:#f1ccc7;--status-vip-bg:#f3edff;--status-vip-text:#6940a0;--status-vip-border:#ded0f2}
.button{justify-content:center;align-items:center;gap:var(--button-icon-gap-large);border-radius:var(--radius-control);font-family:var(--font-brand);font-size:var(--font-size-body);font-weight:var(--font-weight-button);line-height:var(--line-height-button);letter-spacing:var(--letter-spacing-button);white-space:nowrap;cursor:pointer;border:1px solid #0000;text-decoration:none;display:inline-flex}.button--large{min-height:var(--button-height-large);padding:var(--space-2) 29px var(--space-2) 30px}.button--mid{min-height:var(--button-height-mid);padding:var(--space-1) var(--space-2);gap:var(--button-icon-gap-mid)}.button--primary{background:var(--color-action);color:var(--color-on-action)}.button--primary:hover{background:var(--color-action-hover)}.button--primary:active{background:var(--color-primary-pressed-background);color:var(--color-primary-pressed-text)}.button--secondary{background:var(--color-canvas);color:var(--color-text);border-color:var(--color-border-control)}.button--secondary:hover{background:var(--color-surface-hover);border-color:#0000}.button--secondary:active{background:var(--color-action-pressed);color:var(--color-text-inverse);border-color:#0000}.button--text{color:var(--color-text);background:0 0}.button--text:hover{background:var(--color-surface)}.button--text:active{background:var(--color-action);color:var(--color-text-inverse)}.button:disabled{background:var(--color-surface);color:var(--color-text-disabled);cursor:not-allowed;border-color:#0000}@media (prefers-reduced-motion:no-preference){.button{transition:background-color var(--duration-state) var(--ease-state), color var(--duration-state) var(--ease-state), border-color var(--duration-state) var(--ease-state)}}
.navbar{background:var(--color-canvas);border-bottom:1px solid var(--color-surface-hover);width:100%}.navbar-inner{min-height:calc(var(--nav-height) - 1px);padding-inline:var(--page-gutter);align-items:center;gap:var(--space-4);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);display:grid}.navbar-left{justify-self:start}.navbar-right{justify-self:end}.navbar-logo{justify-content:center;align-items:center;min-height:44px;display:flex}.navbar-logo img{width:122px;height:auto;display:block}.navbar .button{font-size:var(--font-size-small);letter-spacing:0;min-height:44px;padding-inline:var(--space-6)}@media (max-width:600px){.navbar-logo img{width:100px}.navbar .button{padding-inline:var(--space-4)}}@media (max-width:480px){.navbar-inner{padding-block:var(--space-3);justify-content:center;gap:var(--space-2) var(--button-group-gap);grid-template-columns:max-content max-content;grid-template-areas:"logo logo""left right"}.navbar-logo{grid-area:logo}.navbar-left{grid-area:left;justify-self:end}.navbar-right{grid-area:right;justify-self:start}}
.icon{flex-shrink:0;display:block}.button-icon{justify-content:center;align-items:center;display:inline-flex}.button--icon-only.button--large{width:var(--button-height-large);padding-inline:0}.button--icon-only.button--mid{width:var(--button-height-mid);padding-inline:0}.button--primary .icon,.button--secondary:active .icon,.button--text:active .icon{filter:brightness(0)invert()}.button--primary:active .icon{filter:none}.button:disabled .icon{filter:none;opacity:.35}.divider{--divider-color:var(--color-border);align-items:center;gap:var(--space-4);color:var(--color-text-muted);font-size:var(--font-size-small);flex-shrink:0;display:flex}.divider--default{--divider-color:var(--color-border-control)}.divider--strong{--divider-color:var(--color-text)}.divider--horizontal{width:100%;min-height:1px}.divider:before{content:"";background:var(--divider-color);flex:1}.divider:has(.divider-label):after{content:"";background:var(--divider-color);flex:1}.divider--horizontal:before,.divider--horizontal:after{height:1px}.divider--vertical{width:1px;min-height:var(--space-6);flex-direction:column;align-self:stretch}.divider--vertical:before,.divider--vertical:after{width:1px}.divider-label{flex-shrink:0}.text-field{gap:var(--space-2);flex-direction:column;width:100%;max-width:318px;display:flex}.text-field label{font-size:var(--font-size-small)}.text-field input{width:100%;min-width:0;height:var(--control-height);padding:0 var(--space-4);border:1px solid var(--color-border-control);border-radius:var(--radius-control);color:var(--color-text-secondary);background:var(--color-canvas)}.text-field input::placeholder{color:var(--color-text-muted);opacity:1}.text-field input:disabled{color:var(--color-text-disabled);background:var(--color-surface);cursor:not-allowed}.text-field input[aria-invalid=true]{border-color:var(--color-error)}.field-hint,.field-error{font-size:var(--font-size-small)}.field-hint{color:var(--color-text-muted)}.field-error{color:var(--color-error)}.selection-chip{min-height:var(--control-height);min-width:120px;padding:var(--space-2) var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-selection);color:var(--color-text);background:var(--color-canvas);letter-spacing:var(--letter-spacing-button);font-weight:var(--font-weight-regular);line-height:var(--line-height-button);cursor:pointer}.selection-chip:hover{background:var(--color-surface-hover);border-color:#0000}.selection-chip[aria-pressed=true]{color:var(--color-on-action);background:var(--color-action);border-color:#0000}.selection-chip:disabled{color:var(--color-text-disabled);background:var(--color-surface);border-color:var(--color-border);cursor:not-allowed}.checkbox{align-items:center;gap:var(--space-5);padding:var(--space-3);min-height:var(--control-height);border-radius:var(--radius-small);cursor:pointer;display:inline-flex}.checkbox:hover{background:var(--color-surface)}.checkbox input{appearance:none;border:1px solid var(--color-check-outline);background:var(--color-canvas);width:25px;height:25px;cursor:inherit;border-radius:3px;flex-shrink:0;margin:0}.checkbox input:checked{background:var(--color-check-fill) url(/icons/check.svg) center / 17px 17px no-repeat;border-color:var(--color-check-fill);border-radius:var(--radius-small)}.checkbox:has(input:disabled){color:var(--color-text-disabled);cursor:not-allowed}.checkbox input:disabled{opacity:.4}.select-trigger{justify-content:space-between;align-items:center;gap:var(--space-4);min-height:var(--button-height-mid);min-width:144px;padding:var(--space-2) var(--space-4);border:1px solid var(--color-border-control);border-radius:var(--radius-control);background:var(--color-canvas);color:var(--color-text-secondary);font-family:var(--font-brand);font-size:var(--font-size-small);font-weight:var(--font-weight-regular);text-align:left;cursor:pointer;display:inline-flex}.select-trigger>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-trigger>svg{flex-shrink:0;margin-left:auto}.select-trigger:hover{background:var(--color-surface)}.select-trigger[data-state=open]{border-color:var(--color-text)}.select-trigger:disabled{color:var(--color-text-disabled);background:var(--color-surface);cursor:not-allowed}.select-content{z-index:100;min-width:var(--radix-select-trigger-width);max-width:calc(100vw - 24px);max-height:min(320px,var(--radix-select-content-available-height));border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-canvas);color:var(--color-text);font-family:var(--font-brand);font-size:var(--font-size-small);overflow:hidden}.select-viewport{padding:var(--space-2)}.select-option{justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-2) var(--space-3);border-radius:var(--radius-small);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;min-height:40px;display:flex}.select-option[data-highlighted]{background:var(--color-surface-hover)}.select-option[data-disabled]{color:var(--color-text-disabled);pointer-events:none}.select-option[data-state=checked]{color:var(--color-text)}.select-scroll{padding:var(--space-1);background:var(--color-canvas);justify-content:center;align-items:center;display:flex}
.component-page{padding:var(--space-20) var(--page-gutter);margin:0 auto}.component-page h1,.component-page h2{font-weight:var(--font-weight-regular)}.component-page h1{margin:0 0 var(--space-3)}.component-page h2{margin:0}.component-page p{color:var(--color-text-muted)}.button-feedback{min-height:var(--space-6);font-size:var(--font-size-small)}.swatches{gap:var(--space-4);display:grid}.swatch{margin:0}.swatch-color{height:var(--space-20);border:1px solid var(--color-border);border-radius:var(--radius-control)}.swatch figcaption{margin-top:var(--space-2);font-size:var(--font-size-small)}.component-note{font-size:var(--font-size-small);color:var(--color-text-muted)}.component-page{max-width:1320px}.library-heading{margin-bottom:var(--space-16)}.eyebrow{margin-bottom:var(--space-6);color:var(--color-text-muted);letter-spacing:.12em;text-transform:uppercase;font-size:12px;display:block}.library-heading h1{letter-spacing:-.03em;font-size:clamp(36px,4vw,48px);line-height:1.1}.library-heading p{margin-top:var(--space-4)}.library-layout{gap:var(--space-16);grid-template-columns:180px minmax(0,1fr);display:grid}.library-index{top:var(--space-8);align-self:start;gap:var(--space-2);display:grid;position:sticky}.library-index a{gap:var(--space-4);padding:var(--space-2) 0;font-size:var(--font-size-small);text-decoration:none;display:flex}.library-index a span{color:var(--color-text-muted);font-size:12px}.library-index a:hover{text-underline-offset:5px;text-decoration:underline}.library-content{min-width:0}.library-section{scroll-margin-top:var(--space-8);border-top:1px solid var(--color-border);padding-top:var(--space-8);padding-bottom:var(--space-16)}.section-heading{justify-content:space-between;align-items:baseline;display:flex}.section-heading h2{letter-spacing:-.02em;margin-bottom:0;font-size:24px}.section-heading>span{color:var(--color-text-muted);font-size:12px}.library-section>p{margin:var(--space-2) 0 var(--space-8);font-size:var(--font-size-small)}.specimen-grid{gap:var(--button-group-gap);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.specimen{align-items:start;gap:var(--button-group-gap);flex-direction:column;display:flex}.specimen-label{color:var(--color-text-muted);letter-spacing:.1em;text-transform:uppercase;font-size:11px;line-height:1.5;display:block}.specimen-inline{align-items:center;gap:var(--button-group-gap);margin-top:var(--space-8);flex-wrap:wrap;display:flex}.button-feedback{margin-top:var(--space-6)}.divider-examples{gap:var(--space-8);display:grid}.divider-examples .specimen-label{margin-bottom:var(--space-4)}.vertical-example{align-items:center;gap:var(--space-6);min-height:var(--space-10);font-size:var(--font-size-small);display:flex}.control-grid{gap:var(--space-8);grid-template-columns:1fr 1fr;display:grid}.selection-example{border:0;margin:0;padding:0}.selection-example legend{font-size:var(--font-size-small)}.selection-example .specimen-inline{margin-top:var(--space-4)}.check-examples{gap:var(--space-4);flex-wrap:wrap;display:flex}.swatches{grid-template-columns:repeat(5,minmax(0,1fr))}.swatch figcaption span{margin-top:var(--space-1);color:var(--color-text-muted);font-size:11px;display:block}.type-specimen{padding-block:var(--space-10)}.type-specimen p{color:var(--color-text)}.type-specimen .type-display{letter-spacing:-.025em;font-size:clamp(28px,4vw,48px);line-height:1.2}.logo-specimen{padding-block:var(--space-8);justify-content:space-between;align-items:center;display:flex}.spacing-specimen{gap:var(--space-6);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.spacing-specimen>div{gap:var(--space-2);align-content:start;display:grid}.spacing-specimen span{height:var(--space-4);background:var(--color-border-control);display:block}.spacing-specimen small{color:var(--color-text-muted);font-size:11px}@media (max-width:1000px){.library-layout{gap:var(--space-8);grid-template-columns:140px minmax(0,1fr)}}@media (max-width:760px){.library-layout{display:block}.library-index{gap:var(--space-2) var(--space-5);margin-bottom:var(--space-8);flex-wrap:wrap;display:flex;position:static}.library-index a{gap:var(--space-2)}.library-heading{margin-bottom:var(--space-8)}}@media (max-width:480px){.specimen-grid{gap:var(--space-8);grid-template-columns:1fr}.specimen{align-items:center;gap:var(--button-group-gap);flex-flow:wrap}.specimen-label{flex-basis:100%}.control-grid{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--color-canvas);color:var(--color-text);font-family:var(--font-brand);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:var(--line-height-body);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--color-text);outline-offset:4px}.skip-link{top:var(--space-2);left:var(--space-2);z-index:10;padding:var(--space-3) var(--space-4);background:var(--color-canvas);position:fixed;transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}.blank-canvas{min-height:calc(100svh - var(--nav-height))}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:600px){:root{--nav-height:80px}}@media (max-width:480px){:root{--nav-height:121px}}