:root{color-scheme:light dark;--ds-color-primary: #4756d8;--ds-color-on-primary: #ffffff;--ds-color-surface: #f7f7fb;--ds-color-elevated: #ffffff;--ds-color-text: #191a20;--ds-color-muted: #595b68;--ds-color-border: #d8d9e3;--ds-radius-sm: .65rem;--ds-radius-lg: 1.25rem;--ds-space: 1rem;--ds-shadow: 0 1rem 3rem rgb(36 40 80 / 12%)}@media (prefers-color-scheme: dark){:root{--ds-color-primary: #bcc2ff;--ds-color-on-primary: #1d277e;--ds-color-surface: #121318;--ds-color-elevated: #1d1e25;--ds-color-text: #e4e1e9;--ds-color-muted: #c5c5d0;--ds-color-border: #454651}}*{box-sizing:border-box}html{background:var(--ds-color-surface);scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 85% 5%,color-mix(in srgb,var(--ds-color-primary) 15%,transparent),transparent 28rem),var(--ds-color-surface);color:var(--ds-color-text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;line-height:1.5;min-height:100vh}button,input,select{font:inherit}button,select{cursor:pointer}h1,h2,h3,p{margin-block:0}h2:focus-visible{outline:3px solid var(--ds-color-primary);outline-offset:.4rem}main{width:min(76rem,calc(100% - 2rem));margin:0 auto 5rem}.skip-link{position:fixed;left:-9999px}.skip-link:focus{left:1rem;top:1rem;z-index:20;background:var(--ds-color-elevated);color:var(--ds-color-text);padding:.75rem 1rem}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:5rem;border-bottom:1px solid var(--ds-color-border)}.brand{color:var(--ds-color-text);font-size:1.05rem;font-weight:850;text-decoration:none}.environment{background:#fc3;color:#191600;font-size:.72rem;font-weight:900;letter-spacing:.15em;padding:.35rem 1.1rem;transform:rotate(-10deg)}.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(15rem,.7fr);gap:clamp(2rem,6vw,6rem);align-items:end;padding:clamp(3rem,8vw,7rem) 0}.hero h1{font-size:clamp(2.6rem,7vw,5.8rem);letter-spacing:-.055em;line-height:.95;margin:.5rem 0 1.5rem}.hero p:not(.eyebrow){color:var(--ds-color-muted);font-size:1.08rem;max-width:42rem}.eyebrow{color:var(--ds-color-primary);font-size:.78rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.theme-picker{display:grid;gap:.45rem;background:var(--ds-color-elevated);border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow);padding:1.1rem}.theme-picker>span{font-weight:800}.theme-picker small{color:var(--ds-color-muted)}.theme-picker select{width:100%;border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-sm);background:var(--ds-color-surface);color:var(--ds-color-text);padding:.75rem}.section-heading{display:flex;justify-content:space-between;gap:2rem;align-items:end}.section-heading h2,.detail h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1;margin-top:.4rem}.section-heading>p,.detail>div>p{color:var(--ds-color-muted);max-width:30rem}.tabs{display:flex;gap:.5rem;overflow-x:auto;padding-block:.25rem}.tab{flex:none;border:1px solid var(--ds-color-border);border-radius:999px;background:var(--ds-color-elevated);color:var(--ds-color-text);padding:.65rem 1rem}.tab[aria-selected=true]{background:var(--ds-color-primary);color:var(--ds-color-on-primary);border-color:transparent}.component-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--ds-space)}.component-card{display:grid;gap:.85rem;min-height:14rem;text-align:left;border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-lg);background:var(--ds-color-elevated);color:var(--ds-color-text);box-shadow:var(--ds-shadow);padding:1.35rem;transition:transform .16s ease,border-color .16s ease}.component-card:hover{border-color:var(--ds-color-primary);transform:translateY(-3px)}.component-card strong{align-self:end;font-size:1.35rem}.component-card>span:not(:first-child,:last-child){color:var(--ds-color-muted)}.component-link{color:var(--ds-color-primary);font-weight:800}.button{min-height:3.25rem;border-radius:var(--ds-radius-sm);border:2px solid transparent;font-weight:780;padding:.8rem 1.1rem}.button--primary{background:var(--ds-color-primary);color:var(--ds-color-on-primary)}.button--secondary{background:transparent;border-color:var(--ds-color-primary);color:var(--ds-color-primary)}.button--tonal{background:color-mix(in srgb,var(--ds-color-primary) 18%,var(--ds-color-elevated));color:var(--ds-color-text)}.button--danger{background:#b3261e;color:#fff}.button--text{background:transparent;color:var(--ds-color-primary);text-align:left}.button:disabled{cursor:not-allowed;opacity:.48}.button:focus-visible,.component-card:focus-visible,.tab:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--ds-color-primary);outline-offset:3px}.badge{display:inline-flex;width:fit-content;border-radius:999px;background:color-mix(in srgb,var(--ds-color-primary) 15%,var(--ds-color-elevated));color:var(--ds-color-text);font-size:.75rem;font-weight:800;padding:.32rem .68rem}.badge--emphasized{background:var(--ds-color-primary);color:var(--ds-color-on-primary)}.detail{max-width:58rem}.detail>.button--text{width:fit-content;padding-inline:0}.examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));align-items:start}.examples>.button{width:100%}.card{border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-lg);background:var(--ds-color-elevated);box-shadow:var(--ds-shadow);padding:1.25rem}.card p{color:var(--ds-color-muted)}.metric strong{font-size:2rem}.metric progress{accent-color:var(--ds-color-primary);width:100%}.product-card{border-left:.45rem solid var(--ds-color-primary)}.field{display:grid;gap:.4rem}.field>span{font-weight:800}.field input{width:100%;border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-sm);background:var(--ds-color-elevated);color:var(--ds-color-text);padding:.8rem}.field small{color:var(--ds-color-muted)}.field--error input{border:2px solid #b3261e}.field--error small{color:#b3261e}.demo-nav{display:flex;gap:.4rem;background:var(--ds-color-elevated);border-radius:var(--ds-radius-lg);padding:.5rem}.demo-nav a{color:var(--ds-color-text);border-radius:var(--ds-radius-sm);padding:.7rem;text-decoration:none}.demo-nav a[aria-current=page]{background:var(--ds-color-primary);color:var(--ds-color-on-primary)}.stack-sm{display:grid;gap:.6rem}.stack-md{gap:1rem}.stack-lg{display:grid;gap:1.5rem}@media (max-width: 45rem){.hero{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column}.component-grid,.examples{grid-template-columns:1fr}.hero h1{font-size:clamp(2.4rem,14vw,4rem)}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important}}