.design-system{--design-ease:cubic-bezier(.22, 1, .36, 1);scroll-margin-top:100px}.design-demo{flex-direction:column;flex:1;gap:12px;width:100%;min-width:0;display:flex;container-type:inline-size}.design-demo [data-theme],.design-demo[data-theme]{--check-scale:1;--switch-scale:1;--button-px:13px;--button-py:10px;--control-radius:8px;--type-size:6.5cqi;--type-weight:800;--type-tracking:-.055em;--type-style:normal;--type-case:none;--secondary-size:4.8cqi}.design-demo [data-theme=violet],.design-demo[data-theme=violet]{--check-scale:.68;--switch-scale:.76;--button-px:8px;--button-py:6px;--control-radius:3px;--type-size:5.2cqi;--type-weight:500;--type-tracking:-.07em;--type-case:uppercase;--secondary-size:4cqi}.design-demo [data-theme=mint],.design-demo[data-theme=mint]{--check-scale:1.2;--switch-scale:1.18;--button-px:20px;--button-py:14px;--control-radius:20px;--type-size:7.1cqi;--type-weight:500;--type-tracking:-.055em;--type-style:italic;--secondary-size:5.4cqi}.design-demo [data-theme=rose],.design-demo[data-theme=rose]{--check-scale:.9;--switch-scale:.94;--button-px:15px;--button-py:11px;--control-radius:12px;--type-size:6.4cqi;--type-weight:800;--type-tracking:-.065em;--secondary-size:5cqi}.design-demo__header{justify-content:space-between;align-items:center;gap:12px;display:flex}.design-demo__eyebrow,.design-demo__edition,.design-demo__control-label,.design-demo__type-label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);font-family:JetBrains Mono,monospace;font-size:9px;font-weight:500}.design-demo__eyebrow{align-items:center;gap:7px;display:flex}.design-demo__edition{font-variant-numeric:tabular-nums}.design-demo__status{background:var(--a);border-radius:50%;width:6px;height:6px;transition:background-color .5s}.design-demo__palette{gap:10px;display:flex}.design-demo__swatch{border-radius:var(--r);background:var(--a);min-width:0;height:64px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--foreground) 5%, transparent);transition:flex-grow .8s var(--design-ease), border-radius .75s var(--design-ease), background-color .6s;flex:1;position:relative;overflow:hidden}.design-demo__swatch:first-child{flex-grow:1.55}.design-demo[data-theme=violet] .design-demo__swatch:first-child{flex-grow:1}.design-demo[data-theme=mint] .design-demo__swatch:first-child{flex-grow:2}.design-demo[data-theme=rose] .design-demo__swatch:first-child{flex-grow:1.25}.design-demo__swatch:nth-child(2){background:color-mix(in oklch, var(--a) 48%, var(--background));transition-delay:45ms}.design-demo__swatch:nth-child(3){background:color-mix(in oklch, var(--a) 16%, var(--background));transition-delay:90ms}.design-demo__swatch span{color:color-mix(in srgb, var(--foreground) 60%, transparent);font:9px JetBrains Mono,monospace;position:absolute;bottom:9px;left:12px}.design-demo__swatch:first-child span{color:#241814}.design-demo__controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.design-demo__control{border:1px solid color-mix(in srgb, var(--a) 24%, var(--border));border-radius:var(--r);background:color-mix(in srgb, var(--a) 3%, var(--card));height:100px;transition:border-radius .75s var(--design-ease), border-color .6s, background-color .6s;justify-content:center;align-items:center;padding-bottom:17px;display:flex;position:relative}.design-demo__control-label{letter-spacing:.06em;font-size:8px;position:absolute;bottom:10px}.design-demo__checks{transform:scale(var(--check-scale));transition:transform .8s var(--design-ease) 50ms;gap:10px;display:flex}.design-demo__check{border:2px solid color-mix(in srgb, var(--a) 40%, var(--border));border-radius:var(--control-radius);background:var(--card);color:#fff;width:28px;height:28px;transition:border-radius .75s var(--design-ease) 50ms, background-color .5s 50ms, border-color .5s 50ms;justify-content:center;align-items:center;display:flex}.design-demo__check[data-checked=true]{background:var(--a);border-color:var(--a)}.design-demo__check svg{stroke-dasharray:24;stroke-dashoffset:24px;width:17px;height:17px;transition:stroke-dashoffset .45s var(--design-ease) .18s}.design-demo__check[data-checked=true] svg{stroke-dashoffset:0}.design-demo__switch{border-radius:calc(var(--control-radius) * 2);background:color-mix(in srgb, var(--a) 20%, var(--border));width:62px;height:34px;transform:scale(var(--switch-scale));transition:transform .8s var(--design-ease) .1s, border-radius .75s var(--design-ease) .1s, background-color .6s .1s;display:block;position:relative;box-shadow:inset 0 1px 3px #0000000a}.design-demo__switch[data-on=true]{background:var(--a)}.design-demo__thumb{border-radius:max(2px, calc(var(--control-radius) * 2 - 4px));width:26px;height:26px;transition:transform .7s cubic-bezier(.34, 1.3, .3, 1) .14s, border-radius .75s var(--design-ease) .1s;background:#fff;position:absolute;top:4px;left:4px;transform:translate(0);box-shadow:0 2px 4px #00000024}.design-demo__switch[data-on=true] .design-demo__thumb{transform:translate(28px)}.design-demo__button{padding:var(--button-py) var(--button-px);border-radius:var(--control-radius);background:var(--a);color:#fff;font:700 12px var(--f);box-shadow:0 4px 9px -5px color-mix(in srgb, var(--a) 65%, transparent);transition:padding .8s var(--design-ease) .15s, border-radius .75s var(--design-ease) .15s, background-color .6s .15s;justify-content:center;align-items:center;gap:6px;line-height:1;display:flex}.design-demo__button svg{width:13px;height:13px}.design-demo__type{isolation:isolate;border:1px solid color-mix(in srgb, var(--a) 18%, var(--border));border-radius:var(--r);background:linear-gradient(125deg, color-mix(in srgb, var(--a) 5%, var(--card)), var(--card) 75%);height:clamp(148px,32cqi,180px);transition:border-radius .75s var(--design-ease) .15s, border-color .6s;position:relative;overflow:hidden}.design-demo__specimen{font-family:var(--f);flex-direction:column;justify-content:center;gap:12px;padding:20px;display:flex;position:absolute;inset:0}.design-demo__type-row{align-items:baseline;gap:14px;min-width:0;display:flex}.design-demo__type-label{letter-spacing:0;flex-shrink:0;width:16px;font-size:8px}.design-demo__h1{font-size:var(--type-size);font-weight:var(--type-weight);letter-spacing:var(--type-tracking);line-height:.98;font-style:var(--type-style);text-transform:var(--type-case);white-space:nowrap;color:var(--foreground)}.design-demo__h1>span{color:var(--a)}.design-demo__h2{white-space:nowrap;font-size:var(--secondary-size);letter-spacing:-.035em;color:var(--foreground);font-weight:700;line-height:1.15}.design-demo__h3{white-space:nowrap;color:var(--muted-foreground);font-size:clamp(11px,2.8cqi,15px);font-weight:500;line-height:1.3}.design-system__picker{transition:transform .18s var(--design-ease), border-color .2s, background-color .2s, color .2s, box-shadow .2s}.design-system__cta{transition:transform .18s var(--design-ease), background-color .5s, border-radius .7s var(--design-ease), box-shadow .5s}.design-system__picker:active,.design-system__cta:active{transform:scale(.96)}.design-system__picker:focus-visible,.design-system__cta:focus-visible{outline:2px solid var(--foreground);outline-offset:4px}@media (hover:hover) and (pointer:fine){.design-system__picker:hover,.design-system__cta:hover{transform:translateY(-2px)}}@container (width<=360px){.design-demo__specimen[data-theme=mint]{--type-size:6.6cqi}.design-demo__controls{gap:7px}.design-demo__control{height:88px}.design-demo__checks{gap:7px}.design-demo__check{width:23px;height:23px}.design-demo__switch{width:52px;height:30px}.design-demo__thumb{width:22px;height:22px}.design-demo__switch[data-on=true] .design-demo__thumb{transform:translate(22px)}.design-demo__button{padding:calc(var(--button-py) * .8) calc(var(--button-px) * .6);gap:3px;font-size:10px}.design-demo__button svg{display:none}.design-demo__specimen{padding:14px}.design-demo__type-row{gap:8px}.design-demo__palette{gap:7px}.design-demo__swatch{height:52px}}@media (prefers-reduced-motion:reduce){.design-system *,.design-system :before,.design-system :after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}}