@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-cyrillic-ext-wght-normal-IYF56FF6.woff2") format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-cyrillic-wght-normal-JEOLYBOO.woff2") format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-greek-ext-wght-normal-EOVOK2B5.woff2") format("woff2-variations");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-greek-wght-normal-IRE366VL.woff2") format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-vietnamese-wght-normal-CE5GGD3W.woff2") format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-latin-ext-wght-normal-HA22NDSG.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-latin-wght-normal-NRMW37G5.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter Tight Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-tight-cyrillic-ext-wght-normal-STBLBFVS.woff2") format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Tight Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-tight-cyrillic-wght-normal-NRQT7BTR.woff2") format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter Tight Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-tight-greek-ext-wght-normal-R4BDH37S.woff2") format("woff2-variations");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter Tight Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-tight-greek-wght-normal-5SKESFJN.woff2") format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter Tight Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-tight-vietnamese-wght-normal-XGPNBA5A.woff2") format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Tight Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-tight-latin-ext-wght-normal-XVT7XTJY.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Tight Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./media/inter-tight-latin-wght-normal-U5LAIBVI.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.design-page{min-height:100vh;background:linear-gradient(var(--ui-surface-canvas),var(--ui-surface-canvas)) padding-box,var(--ui-surface-canvas);color:var(--ui-text)}.design-header{position:sticky;z-index:var(--ui-z-header);top:0;min-height:4rem;padding:var(--ui-space-2) clamp(1rem,4vw,4rem);border-bottom:1px solid color-mix(in srgb,var(--ui-border) 76%,transparent);background:color-mix(in srgb,white 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-4)}.design-brand,.design-home-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center}.design-brand{gap:var(--ui-space-2);font-family:var(--ui-font-display),sans-serif;font-size:1.05rem;font-weight:720;letter-spacing:-.03em}.design-brand small{padding-left:var(--ui-space-2);border-left:1px solid var(--ui-border);color:var(--ui-text-subtle);font-family:var(--ui-font-body),sans-serif;font-size:.75rem;font-weight:500;letter-spacing:0}.design-brand__mark{width:1.2rem;height:1.2rem;border-radius:.2rem .55rem .55rem;background:var(--ui-brand-gradient);box-shadow:0 5px 13px color-mix(in srgb,var(--ui-magenta) 24%,transparent);transform:rotate(-12deg)}.design-header__actions{display:flex;align-items:center;gap:var(--ui-space-3)}.design-version{color:var(--ui-text-subtle);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.design-home-link{min-height:2rem;gap:var(--ui-space-1);color:var(--ui-text-muted);font-size:.75rem;font-weight:600}.design-home-link:hover{color:var(--ui-action)}.design-page main{overflow:clip}.design-hero{position:relative;width:min(100% - 2rem,90rem);min-height:35rem;margin:0 auto;padding:clamp(5rem,10vw,9rem) clamp(1rem,7vw,6rem) 5rem;border-bottom:1px solid var(--ui-border);display:flex;flex-direction:column;justify-content:center;overflow:hidden}.design-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--ui-border) 32%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ui-border) 32%,transparent) 1px,transparent 1px);background-size:3.5rem 3.5rem;-webkit-mask-image:linear-gradient(90deg,transparent,black 68%,transparent);mask-image:linear-gradient(90deg,transparent,black 68%,transparent);pointer-events:none}.design-hero__eyebrow,.catalog-kicker{color:var(--ui-action);font-size:.6875rem;font-weight:760;letter-spacing:.12em;text-transform:uppercase}.design-hero__eyebrow{position:relative;display:flex;align-items:center;gap:var(--ui-space-2)}.design-hero__eyebrow span{width:1.5rem;height:.18rem;border-radius:var(--ui-radius-pill);background:var(--ui-brand-gradient)}.design-hero h1{position:relative;max-width:58rem;margin:var(--ui-space-5) 0 var(--ui-space-5);font-family:var(--ui-font-display),sans-serif;font-size:clamp(3.25rem,7.5vw,7rem);font-weight:560;letter-spacing:-.072em;line-height:.9}.design-hero h1 span{background:var(--ui-brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.design-hero>p{position:relative;max-width:37rem;margin:0;color:var(--ui-text-muted);font-size:clamp(1rem,1.4vw,1.2rem)}.design-hero__meta{position:relative;margin-top:var(--ui-space-12);display:flex;gap:clamp(1.5rem,5vw,4rem)}.design-hero__meta div{display:grid;gap:.1rem}.design-hero__meta strong{font-family:var(--ui-font-display),sans-serif;font-size:1.35rem;letter-spacing:-.04em}.design-hero__meta span{color:var(--ui-text-subtle);font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.design-hero__orb{position:absolute;right:clamp(-7rem,1vw,3rem);bottom:-11rem;width:min(34vw,29rem);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--ui-violet) 25%,transparent);border-radius:44% 56% 61% 39%/39% 43% 57% 61%;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--ui-coral) 48%,transparent),transparent 38%),radial-gradient(circle at 65% 68%,color-mix(in srgb,var(--ui-violet) 42%,transparent),transparent 45%),color-mix(in srgb,var(--ui-magenta) 8%,white);filter:saturate(1.15);transform:rotate(18deg);animation:design-orb 12s ease-in-out infinite alternate}.catalog-tabs__list{position:sticky;z-index:calc(var(--ui-z-header) - 1);top:4rem;width:min(100% - 2rem,90rem);min-height:4.25rem;margin:0 auto;padding:var(--ui-space-3) clamp(0rem,4vw,3rem);border-bottom:1px solid var(--ui-border);background:color-mix(in srgb,white 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;gap:var(--ui-space-1)}.catalog-tabs__list button{min-height:2.5rem;padding:0 var(--ui-space-5);border:0;border-radius:var(--ui-radius-pill);background:transparent;color:var(--ui-text-muted);cursor:pointer;font-size:.8125rem;font-weight:620;transition:all var(--ui-duration-fast) var(--ui-ease)}.catalog-tabs__list button span{margin-right:var(--ui-space-2);color:var(--ui-text-subtle);font-size:.625rem}.catalog-tabs__list button:hover{background:var(--ui-surface-muted)}.catalog-tabs__list button[aria-selected=true]{background:color-mix(in srgb,var(--ui-violet) 9%,white);color:var(--ui-action)}.catalog-panel[inert]{display:none}.catalog-layout{width:min(100% - 2rem,90rem);margin:0 auto;padding:clamp(3rem,7vw,7rem) clamp(0rem,3vw,3rem) 8rem;display:grid;grid-template-columns:11rem minmax(0,1fr);gap:clamp(2rem,7vw,7rem)}.catalog-rail{position:sticky;top:9.5rem;align-self:start;display:grid;gap:var(--ui-space-2)}.catalog-rail span{margin-bottom:var(--ui-space-3);color:var(--ui-text-subtle);font-size:.625rem;font-weight:720;letter-spacing:.12em;text-transform:uppercase}.catalog-rail a{width:fit-content;padding:.15rem 0;color:var(--ui-text-muted);text-decoration:none;font-size:.8125rem;font-weight:520}.catalog-rail a:hover{color:var(--ui-action)}.catalog-content{min-width:0}.catalog-section{scroll-margin-top:10rem;padding-bottom:clamp(5rem,9vw,8rem)}.catalog-section+.catalog-section{padding-top:clamp(4rem,7vw,6rem);border-top:1px solid var(--ui-border)}.catalog-section__intro{max-width:47rem;margin-bottom:var(--ui-space-8)}.catalog-section__intro h2,.coming-soon h2{margin:var(--ui-space-2) 0 var(--ui-space-3);font-family:var(--ui-font-display),sans-serif;font-size:clamp(2rem,4vw,3.75rem);font-weight:560;letter-spacing:-.055em;line-height:1}.catalog-section__intro p,.coming-soon p{max-width:40rem;margin:0;color:var(--ui-text-muted);font-size:.9375rem}.swatch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ui-space-3)}.swatch-card{padding:var(--ui-space-2);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:#fff}.swatch-card>div{aspect-ratio:1.5;padding:var(--ui-space-3);border-radius:calc(var(--ui-radius-lg) - var(--ui-space-1));color:#fff;display:flex;align-items:flex-end;font-size:.75rem;font-weight:650}.swatch-card code,.swatch-card small{display:block;margin:var(--ui-space-2) var(--ui-space-1) 0;font-size:.6875rem}.swatch-card small{margin-top:.1rem;color:var(--ui-text-subtle)}.semantic-row,.component-canvas--row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ui-space-3)}.semantic-row{margin-top:var(--ui-space-6)}.type-specimen{border:1px solid var(--ui-border);border-radius:var(--ui-radius-xl);overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr)}.type-specimen__display{min-height:27rem;padding:clamp(2rem,5vw,4rem);background:var(--ui-ink-950);color:#fff;font-family:var(--ui-font-display),sans-serif;font-size:clamp(3rem,6vw,6rem);font-weight:520;letter-spacing:-.07em;line-height:.88;display:flex;align-items:flex-end}.type-specimen__details{padding:var(--ui-space-3) var(--ui-space-6);display:grid}.type-specimen__details article{padding:var(--ui-space-4) 0;border-bottom:1px solid var(--ui-border);display:grid;gap:var(--ui-space-1)}.type-specimen__details article:last-child{border:0}.type-specimen__details span,.type-specimen__details code,.density-comparison>article>span{color:var(--ui-text-subtle);font-size:.625rem;letter-spacing:.05em;text-transform:uppercase}.type-specimen__details strong{font-family:var(--ui-font-display),sans-serif;font-size:2.5rem}.type-specimen__details h3,.type-specimen__details p,.type-specimen__details b{margin:0}.type-specimen__details h3{font-family:var(--ui-font-display),sans-serif;font-size:1.6rem;letter-spacing:-.04em}.type-specimen__details p{color:var(--ui-text-muted);font-size:.875rem}.type-specimen__details b{font-size:.7rem;letter-spacing:.08em}.spacing-scale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-space-2)}.spacing-scale>div{min-height:7rem;padding:var(--ui-space-3);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);display:grid;align-content:end;gap:var(--ui-space-1)}.spacing-scale>div>span{height:.4rem;border-radius:var(--ui-radius-pill);background:var(--ui-brand-gradient)}.spacing-scale strong{font-size:.8125rem}.spacing-scale code{color:var(--ui-text-subtle);font-size:.625rem}.density-comparison{margin-top:var(--ui-space-6);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-4)}.density-comparison article{padding:var(--ui-space-5);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-surface-subtle);display:grid;gap:var(--ui-space-4)}.shape-grid,.elevation-grid,.motion-grid,.breakpoints{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-space-3)}.shape-grid article,.elevation-grid article,.motion-grid article,.breakpoints div{min-height:9rem;padding:var(--ui-space-4);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);display:flex;flex-direction:column;justify-content:space-between;color:var(--ui-text-muted);font-size:.75rem}.shape-grid article>div{width:4.25rem;height:4.25rem;background:color-mix(in srgb,var(--ui-violet) 13%,white)}.radius-sm{border-radius:var(--ui-radius-sm)}.radius-md{border-radius:var(--ui-radius-md)}.radius-lg{border-radius:var(--ui-radius-lg)}.shape-grid article .radius-pill{width:6rem;border-radius:var(--ui-radius-pill)}.elevation-grid{margin-top:var(--ui-space-4);grid-template-columns:repeat(3,minmax(0,1fr))}.elevation-grid article{min-height:8rem;background:#fff}.elevation-grid article strong,.motion-grid article strong,.breakpoints strong{color:var(--ui-text)}.elevation-1{box-shadow:var(--ui-shadow-1)}.elevation-2{box-shadow:var(--ui-shadow-2)}.elevation-3{box-shadow:var(--ui-shadow-3)}.icon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-space-2)}.icon-grid article{min-height:7rem;padding:var(--ui-space-4);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);display:flex;flex-direction:column;justify-content:space-between}.icon-grid code{color:var(--ui-text-subtle);font-size:.625rem}.motion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.motion-dot{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--ui-action);animation:motion-sample 1.8s var(--ui-ease) infinite alternate}.motion-dot--base{animation-duration:2.2s}.motion-dot--slow{animation-duration:2.8s}.motion-grid small{color:var(--ui-text-subtle)}.breakpoints{margin-top:var(--ui-space-4)}.breakpoints div{min-height:6.5rem;background:var(--ui-surface-subtle)}.breakpoints strong{font-family:var(--ui-font-display),sans-serif;font-size:1.5rem}.component-card{border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:#fff;overflow:hidden}.component-card+.component-card{margin-top:var(--ui-space-4)}.component-card__header,.component-card__footer{min-height:3.25rem;padding:var(--ui-space-3) var(--ui-space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-4)}.component-card__header{border-bottom:1px solid var(--ui-border)}.component-card__header strong{font-size:.8125rem}.component-card__header code,.component-card__footer{color:var(--ui-text-subtle);font-size:.6875rem}.component-canvas{min-height:10rem;padding:clamp(1.5rem,4vw,3rem);background:linear-gradient(90deg,transparent 49.5%,color-mix(in srgb,var(--ui-border) 25%,transparent) 50%,transparent 50.5%),var(--ui-surface-subtle)}.component-card__footer{border-top:1px solid var(--ui-border)}.demo-tooltip-trigger{width:var(--ui-control-height);height:var(--ui-control-height);padding:0;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:#fff;color:var(--ui-text-muted);cursor:pointer;display:grid;place-items:center}.demo-form{padding:clamp(1.25rem,4vw,3rem);border:1px solid var(--ui-border);border-radius:var(--ui-radius-xl);background:var(--ui-surface-subtle);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-5)}.demo-form__wide{grid-column:1/-1}.demo-form__actions{padding-top:var(--ui-space-4);border-top:1px solid var(--ui-border);display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-4)}.demo-form__actions span{color:var(--ui-text-subtle);font-size:.75rem}.selection-demo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ui-space-6)}.selection-demo>div{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ui-space-3)}.component-grid--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-4)}.component-grid--two .component-card+.component-card{margin-top:0}.menu-demo{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ui-space-4)}.menu-demo>span{color:var(--ui-text-subtle);font-size:.75rem}.alert-stack{display:grid;gap:var(--ui-space-3)}.dialog-demo{margin-top:var(--ui-space-4);padding:var(--ui-space-5);display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-5)}.dialog-demo strong{font-size:.875rem}.dialog-demo p{margin:var(--ui-space-1) 0 0;color:var(--ui-text-muted);font-size:.75rem}.table-state-picker{width:fit-content;margin:0 0 var(--ui-space-4) auto;padding:.2rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface-subtle);display:flex;gap:.1rem}.table-state-picker button{min-height:1.8rem;padding:0 var(--ui-space-3);border:0;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;font-size:.6875rem;font-weight:650}.table-state-picker button.active{background:#fff;color:var(--ui-action);box-shadow:var(--ui-shadow-1)}.coming-soon{width:min(100% - 2rem,76rem);min-height:36rem;margin:0 auto;padding:clamp(4rem,9vw,8rem) clamp(1.5rem,6vw,5rem);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:clamp(2rem,8vw,7rem)}.coming-soon__number{background:var(--ui-brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--ui-font-display),sans-serif;font-size:clamp(6rem,18vw,14rem);font-weight:650;letter-spacing:-.09em;line-height:.75;margin-inline-end:-.09em;padding-inline-end:.09em}.coming-soon__tags{margin-top:var(--ui-space-8);display:flex;flex-wrap:wrap;gap:var(--ui-space-2)}.coming-soon__tags span{padding:var(--ui-space-2) var(--ui-space-3);border:1px solid var(--ui-border);border-radius:var(--ui-radius-pill);color:var(--ui-text-muted);font-size:.75rem}.ui-dialog-panel .mat-mdc-dialog-surface{border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-3);overflow:visible}.ui-dialog-panel .mat-mdc-dialog-content{overflow:visible;max-height:calc(100dvh - 6rem)}@keyframes design-orb{to{border-radius:58% 42% 40% 60%/56% 52% 48% 44%;transform:rotate(28deg) translate3d(-1rem,-1rem,0)}}@keyframes motion-sample{to{transform:translate(calc(100% + 3rem))}}@media(max-width:64rem){.catalog-layout{grid-template-columns:1fr}.catalog-rail{position:static;display:flex;flex-wrap:wrap;gap:var(--ui-space-3)}.catalog-rail span{width:100%;margin:0}.type-specimen{grid-template-columns:1fr}.type-specimen__display{min-height:20rem}.design-hero__orb{opacity:.55}}@media(max-width:48rem){.design-header{padding-inline:var(--ui-space-4)}.design-version,.design-home-link,.design-brand small{display:none}.design-hero{min-height:31rem;padding-inline:var(--ui-space-4)}.design-hero__orb{right:-8rem;width:20rem}.catalog-tabs__list{justify-content:flex-start;overflow-x:auto}.catalog-tabs__list button{flex:0 0 auto;padding-inline:var(--ui-space-4)}.swatch-grid,.spacing-scale,.shape-grid,.icon-grid,.breakpoints{grid-template-columns:repeat(2,minmax(0,1fr))}.density-comparison,.elevation-grid,.motion-grid,.demo-form,.selection-demo,.component-grid--two{grid-template-columns:1fr}.demo-form__wide{grid-column:auto}.coming-soon{grid-template-columns:1fr}}@media(max-width:30rem){.design-hero__meta{gap:var(--ui-space-5)}.catalog-layout{width:min(100% - 1.5rem,90rem)}.swatch-grid,.shape-grid,.icon-grid{grid-template-columns:1fr}.component-card__header,.component-card__footer,.demo-form__actions,.dialog-demo{align-items:flex-start;flex-direction:column}}html{--mat-sys-background: light-dark(#fff7f9, #161215);--mat-sys-error: light-dark(#ba1a1a, #ffb4ab);--mat-sys-error-container: light-dark(#ffdad6, #93000a);--mat-sys-inverse-on-surface: light-dark(#f8eef2, #342f32);--mat-sys-inverse-primary: light-dark(#ffabf3, #a900a9);--mat-sys-inverse-surface: light-dark(#342f32, #e9e0e4);--mat-sys-on-background: light-dark(#1e1a1d, #e9e0e4);--mat-sys-on-error: light-dark(#ffffff, #690005);--mat-sys-on-error-container: light-dark(#93000a, #ffdad6);--mat-sys-on-primary: light-dark(#ffffff, #5b005b);--mat-sys-on-primary-container: light-dark(#810081, #ffd7f5);--mat-sys-on-primary-fixed: light-dark(#380038, #380038);--mat-sys-on-primary-fixed-variant: light-dark(#810081, #810081);--mat-sys-on-secondary: light-dark(#ffffff, #3d2b3a);--mat-sys-on-secondary-container: light-dark(#554151, #f7daef);--mat-sys-on-secondary-fixed: light-dark(#271624, #271624);--mat-sys-on-secondary-fixed-variant: light-dark(#554151, #554151);--mat-sys-on-surface: light-dark(#1e1a1d, #e9e0e4);--mat-sys-on-surface-variant: light-dark(#4e444b, #eedee7);--mat-sys-on-tertiary: light-dark(#ffffff, #42008a);--mat-sys-on-tertiary-container: light-dark(#5f00c0, #ecdcff);--mat-sys-on-tertiary-fixed: light-dark(#270057, #270057);--mat-sys-on-tertiary-fixed-variant: light-dark(#5f00c0, #5f00c0);--mat-sys-outline: light-dark(#80747c, #9a8d95);--mat-sys-outline-variant: light-dark(#d1c2cb, #4e444b);--mat-sys-primary: light-dark(#a900a9, #ffabf3);--mat-sys-primary-container: light-dark(#ffd7f5, #810081);--mat-sys-primary-fixed: light-dark(#ffd7f5, #ffd7f5);--mat-sys-primary-fixed-dim: light-dark(#ffabf3, #ffabf3);--mat-sys-scrim: light-dark(#000000, #000000);--mat-sys-secondary: light-dark(#6e5869, #dabfd2);--mat-sys-secondary-container: light-dark(#f7daef, #554151);--mat-sys-secondary-fixed: light-dark(#f7daef, #f7daef);--mat-sys-secondary-fixed-dim: light-dark(#dabfd2, #dabfd2);--mat-sys-shadow: light-dark(#000000, #000000);--mat-sys-surface: light-dark(#fff7f9, #161215);--mat-sys-surface-bright: light-dark(#fff7f9, #3d383b);--mat-sys-surface-container: light-dark(#f5ebf0, #231e22);--mat-sys-surface-container-high: light-dark(#efe6ea, #2d292c);--mat-sys-surface-container-highest: light-dark(#e9e0e4, #383337);--mat-sys-surface-container-low: light-dark(#fbf1f5, #1e1a1d);--mat-sys-surface-container-lowest: light-dark(#ffffff, #110d10);--mat-sys-surface-dim: light-dark(#e1d7dc, #161215);--mat-sys-surface-tint: light-dark(#a900a9, #ffabf3);--mat-sys-surface-variant: light-dark(#eedee7, #4e444b);--mat-sys-tertiary: light-dark(#7d00fa, #d5baff);--mat-sys-tertiary-container: light-dark(#ecdcff, #5f00c0);--mat-sys-tertiary-fixed: light-dark(#ecdcff, #ecdcff);--mat-sys-tertiary-fixed-dim: light-dark(#d5baff, #d5baff);--mat-sys-neutral-variant20: #372e34;--mat-sys-neutral10: #1e1a1d;--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--mat-sys-body-large: 400 1rem / 1.5rem Inter;--mat-sys-body-large-font: Inter;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: .031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 .875rem / 1.25rem Inter;--mat-sys-body-medium-font: Inter;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: .875rem;--mat-sys-body-medium-tracking: .016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 .75rem / 1rem Inter;--mat-sys-body-small-font: Inter;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: .75rem;--mat-sys-body-small-tracking: .025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Inter;--mat-sys-display-large-font: Inter;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Inter;--mat-sys-display-medium-font: Inter;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Inter;--mat-sys-display-small-font: Inter;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Inter;--mat-sys-headline-large-font: Inter;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Inter;--mat-sys-headline-medium-font: Inter;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Inter;--mat-sys-headline-small-font: Inter;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 .875rem / 1.25rem Inter;--mat-sys-label-large-font: Inter;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: .875rem;--mat-sys-label-large-tracking: .006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 .75rem / 1rem Inter;--mat-sys-label-medium-font: Inter;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: .75rem;--mat-sys-label-medium-tracking: .031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 .688rem / 1rem Inter;--mat-sys-label-small-font: Inter;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: .688rem;--mat-sys-label-small-tracking: .031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Inter;--mat-sys-title-large-font: Inter;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Inter;--mat-sys-title-medium-font: Inter;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: .009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 .875rem / 1.25rem Inter;--mat-sys-title-small-font: Inter;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: .875rem;--mat-sys-title-small-tracking: .006rem;--mat-sys-title-small-weight: 500;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12}:root{color-scheme:light;--ui-font-body: "Inter Variable", "Inter", sans-serif;--ui-font-display: "Inter Tight Variable", "Inter Tight", sans-serif;--ui-ink-950: oklch(19% .012 302);--ui-ink-800: oklch(31% .014 302);--ui-ink-650: oklch(45% .014 302);--ui-ink-500: oklch(58% .012 302);--ui-ink-300: oklch(78% .01 302);--ui-ink-180: oklch(88% .008 302);--ui-ink-100: oklch(94% .006 302);--ui-ink-50: oklch(98% .004 302);--ui-coral: oklch(66% .23 25);--ui-magenta: oklch(62% .25 340);--ui-violet: oklch(53% .25 296);--ui-violet-strong: oklch(43% .23 296);--ui-brand-gradient: linear-gradient( 115deg, var(--ui-coral), var(--ui-magenta) 48%, var(--ui-violet) );--ui-surface-canvas: #ffffff;--ui-surface-subtle: var(--ui-ink-50);--ui-surface-muted: var(--ui-ink-100);--ui-surface-raised: #ffffff;--ui-text: var(--ui-ink-950);--ui-text-muted: var(--ui-ink-650);--ui-text-subtle: var(--ui-ink-500);--ui-border: var(--ui-ink-180);--ui-border-strong: var(--ui-ink-300);--ui-action: var(--ui-violet-strong);--ui-action-hover: oklch(38% .22 296);--ui-focus: oklch(58% .24 296);--ui-danger: oklch(51% .2 25);--ui-danger-soft: oklch(96% .035 25);--ui-success: oklch(44% .13 153);--ui-success-soft: oklch(96% .035 153);--ui-warning: oklch(49% .13 74);--ui-warning-soft: oklch(96% .045 84);--ui-info: oklch(47% .15 250);--ui-info-soft: oklch(96% .035 250);--ui-space-1: .25rem;--ui-space-2: .5rem;--ui-space-3: .75rem;--ui-space-4: 1rem;--ui-space-5: 1.25rem;--ui-space-6: 1.5rem;--ui-space-8: 2rem;--ui-space-10: 2.5rem;--ui-space-12: 3rem;--ui-space-16: 4rem;--ui-radius-sm: .375rem;--ui-radius-md: .625rem;--ui-radius-lg: 1rem;--ui-radius-xl: 1.5rem;--ui-radius-pill: 999px;--ui-shadow-1: 0 1px 2px rgb(23 16 32 / 6%), 0 1px 5px rgb(23 16 32 / 4%);--ui-shadow-2: 0 12px 32px rgb(23 16 32 / 9%);--ui-shadow-3: 0 24px 70px rgb(23 16 32 / 14%);--ui-control-height: 2.5rem;--ui-duration-fast: .12s;--ui-duration: .18s;--ui-ease: cubic-bezier(.2, 0, 0, 1);--ui-z-header: 20;--ui-z-overlay: 1000}[data-density=compact]{--ui-control-height: 2rem}*,*:before,*:after{box-sizing:border-box}html{scrollbar-gutter:stable;min-width:20rem;min-height:100%;scroll-behavior:smooth}body{min-height:100%;margin:0;background:var(--ui-surface-canvas);color:var(--ui-text);font-family:var(--ui-font-body);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}:where(button,a,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}::selection{background:color-mix(in srgb,var(--ui-magenta) 22%,white);color:var(--ui-text)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}