.dsy-hero{padding-block:var(--section-space-l)}.dsy-hero__container{gap:var(--space-xxl);grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;display:grid;@media (width<=900px){gap:var(--space-xl);grid-template-columns:minmax(0,1fr)}}.dsy-hero__copy{align-items:flex-start;gap:var(--space-m);flex-direction:column;display:flex}.dsy-hero__actions{align-items:center;gap:var(--space-s) var(--space-m);flex-wrap:wrap;display:flex}.dsy-hero__swatches{align-items:end;gap:var(--space-s);grid-template-columns:repeat(5,minmax(0,1fr));block-size:22rem;display:grid;@media (width<=900px){block-size:14rem}}.dsy-hero__swatch{block-size:100%;padding:var(--space-s);border-radius:var(--radius-l);box-shadow:var(--panel-shadow);align-items:flex-end;display:flex}.dsy-hero__swatch--primary{background:var(--primary);block-size:100%}.dsy-hero__swatch--tertiary{background:var(--tertiary);block-size:82%}.dsy-hero__swatch--accent{background:var(--accent);block-size:66%}.dsy-hero__swatch--warning{background:var(--warning);block-size:52%}.dsy-hero__swatch--neutral{background:var(--neutral);block-size:40%}.dsy-hero__swatch-name{writing-mode:vertical-rl;color:var(--black);rotate:180deg}.dsy-modules{border-block-start:1px solid var(--hairline)}.dsy-modules__head{gap:var(--space-s);flex-direction:column;display:flex}.dsy-modules__grid{gap:var(--space-s);grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));display:grid}.dsy-modules__item{justify-content:space-between;align-items:center;gap:var(--space-s);padding-block:var(--space-s);padding-inline:var(--space-m);border:1px solid var(--hairline);border-radius:var(--radius-m);background:var(--surface);display:flex}.dsy-modules__item--off{opacity:.5}.dsy-modules__switch{background:var(--tertiary);border-radius:40rem;flex:none;block-size:1.1rem;inline-size:2rem;position:relative;&:after{content:"";background:var(--white);border-radius:50%;block-size:.8rem;inline-size:.8rem;position:absolute;inset-block-start:.15rem;inset-inline-end:.15rem}}.dsy-modules__switch--off{background:var(--hairline-bright);&:after{inset-inline:.15rem auto}}.dsy-shades__container{gap:var(--space-xxl);grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;display:grid;@media (width<=900px){gap:var(--space-l);grid-template-columns:minmax(0,1fr)}}.dsy-shades__copy,.dsy-shades__strips{gap:var(--space-s);flex-direction:column;display:flex}.dsy-shades__strip{border-radius:var(--radius-l);box-shadow:var(--panel-shadow);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:0;display:grid;overflow:hidden}.dsy-shades__strip--alpha{background-size:16px 16px}.dsy-shades__cell{block-size:7rem;padding:var(--space-xs);align-items:flex-end;display:flex}.dsy-shades__cell--100{background:var(--primary-100)}.dsy-shades__cell--200{background:var(--primary-200)}.dsy-shades__cell--300{background:var(--primary-300)}.dsy-shades__cell--400{background:var(--primary-400)}.dsy-shades__cell--500{background:var(--primary-500)}.dsy-shades__cell--600{background:var(--primary-600)}.dsy-shades__cell--a10{background:var(--primary-10);block-size:4rem}.dsy-shades__cell--a20{background:var(--primary-20);block-size:4rem}.dsy-shades__cell--a30{background:var(--primary-30);block-size:4rem}.dsy-shades__cell--a40{background:var(--primary-40);block-size:4rem}.dsy-shades__cell--a50{background:var(--primary-50);block-size:4rem}.dsy-shades__cell--a60{background:var(--primary-60);block-size:4rem}.dsy-shades__cell--a70{background:var(--primary-70);block-size:4rem}.dsy-shades__cell--a80{background:var(--primary-80);block-size:4rem}.dsy-shades__cell--a90{background:var(--primary-90);block-size:4rem}.dsy-shades__cell-label{border-radius:var(--radius-s);background:color-mix(in srgb, var(--black) 55%, transparent);font-size:var(--text-xs);padding-block:.1em;padding-inline:.4em}.dsy-scale{border-block-start:1px solid var(--hairline)}.dsy-scale__head{gap:var(--space-s);flex-direction:column;display:flex}.dsy-scale__list{flex-direction:column;gap:0;display:flex}.dsy-scale__row{align-items:baseline;gap:var(--space-m);padding-block:var(--space-s);border-block-end:1px solid var(--hairline);grid-template-columns:7rem minmax(0,1fr);display:grid}.dsy-scale__sample{overflow-wrap:anywhere}.dsy-scale__sample--h1{font-size:var(--h1)}.dsy-scale__sample--h2{font-size:var(--h2)}.dsy-scale__sample--h3{font-size:var(--h3)}.dsy-scale__sample--h4{font-size:var(--h4)}.dsy-scale__sample--h5{font-size:var(--h5)}.dsy-scale__sample--text-l{font-size:var(--text-l)}.dsy-buttons__head{gap:var(--space-s);flex-direction:column;display:flex}.dsy-buttons__grid{border:1px solid var(--hairline);border-radius:var(--panel-radius);background:var(--hairline);grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;display:grid;overflow:hidden;@media (width<=900px){grid-template-columns:repeat(2,minmax(0,1fr))}@media (width<=480px){grid-template-columns:minmax(0,1fr)}}.dsy-buttons__cell{justify-content:center;align-items:center;gap:var(--space-s);min-block-size:10rem;padding:var(--space-m);background:var(--app-chrome);flex-direction:column;display:flex}.dsy-textures__head{gap:var(--space-s);flex-direction:column;display:flex}.dsy-textures__grid{gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));display:grid}.dsy-textures__tile{min-block-size:14rem;padding:var(--space-m);border:1px solid var(--hairline);border-radius:var(--panel-radius);background:linear-gradient(160deg, var(--tertiary-30), var(--app-chrome) 70%);align-items:flex-end;display:flex;overflow:hidden}.dsy-textures__tile--both{background:linear-gradient(160deg, var(--primary-30), var(--app-chrome) 70%)}.dsy-system__container{align-items:center;gap:var(--space-l)}.dsy-styles{border-block-start:1px solid var(--hairline)}.dsy-styles__container{gap:var(--space-xxl);grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:start;display:grid;@media (width<=900px){gap:var(--space-l);grid-template-columns:minmax(0,1fr)}}.dsy-styles__copy{gap:var(--space-s);flex-direction:column;display:flex;position:sticky;inset-block-start:calc(var(--header-height) + var(--space-l));@media (width<=900px){position:static}}.dsy-styles__answers{gap:var(--space-xs);flex-wrap:wrap;display:flex}.dsy-styles__answer{border:1px solid var(--tertiary-40);background:var(--tertiary-10);font-size:var(--text-xs);border-radius:40rem;padding-block:.25em;padding-inline:.7em}.dsy-styles__list{border:1px solid var(--hairline);border-radius:var(--panel-radius);background:var(--surface);flex-direction:column;gap:0;display:flex;overflow:hidden}.dsy-styles__row{align-items:baseline;gap:var(--space-m);padding-block:var(--space-m);padding-inline:var(--space-l);grid-template-columns:minmax(0,1fr) auto auto;display:grid;&+&{border-block-start:1px solid var(--hairline)}@media (width<=600px){grid-template-columns:minmax(0,1fr) auto;&>.dsy-styles__meta{display:none}}}.dsy-styles__sample{overflow-wrap:anywhere}.dsy-styles__sample--text-xxl{font-size:var(--text-xxl)}.dsy-styles__sample--text-xl{font-size:var(--text-xl)}.dsy-styles__sample--text-l{font-size:var(--text-l)}.dsy-styles__sample--text-m{font-size:var(--text-m)}.dsy-styles__sample--text-s{font-size:var(--text-s)}.dsy-styles__sample--text-xs{font-size:var(--text-xs)}.dsy-styles__meta{font-size:var(--text-s)}.dsy-fonts{border-block-start:1px solid var(--hairline)}.dsy-fonts__head{gap:var(--space-s);flex-direction:column;display:flex}.dsy-fonts__grid{gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));display:grid}.dsy-fonts__card{gap:var(--space-s);padding:var(--space-l);border:1px solid var(--hairline);border-radius:var(--panel-radius);background:var(--surface);flex-direction:column;display:flex}.dsy-fonts__card--google{background:linear-gradient(165deg, var(--tertiary-10), var(--surface) 55%)}.dsy-fonts__label{font-size:var(--text-xs)}.dsy-fonts__specimen{block-size:9rem;font-size:var(--h1);align-items:center;display:flex}.dsy-fonts__specimen--inter{font-family:"Inter", var(--font-primary)}.dsy-fonts__drop{justify-content:center;align-items:center;gap:var(--space-s);border:1px dashed var(--hairline-bright);border-radius:var(--radius-l);background:var(--app-chrome);flex-direction:column;block-size:9rem;display:flex}.dsy-fonts__formats{gap:var(--space-xs);display:flex}.dsy-fonts__format{border-radius:var(--radius-s);background:var(--tertiary-20);font-size:var(--text-xs);padding-block:.15em;padding-inline:.55em}.dsy-fonts__title{font-size:var(--h4)}.dsy-fonts__path{margin-block-start:auto;padding-block-start:var(--space-xs)}.dsy-spacing{border-block-start:1px solid var(--hairline)}.dsy-spacing__container{gap:var(--space-xxl);grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;display:grid;@media (width<=900px){gap:var(--space-l);grid-template-columns:minmax(0,1fr)}}.dsy-spacing__copy{gap:var(--space-s);flex-direction:column;display:flex}.dsy-spacing__facts{gap:var(--space-xs);flex-wrap:wrap;display:flex}.dsy-spacing__fact{border:1px solid var(--hairline);border-radius:var(--radius-s);background:var(--app-chrome);padding-block:.2em;padding-inline:.6em}.dsy-spacing__scale{border:1px solid var(--hairline);border-radius:var(--panel-radius);background:var(--surface);flex-direction:column;gap:0;display:flex;overflow:hidden}.dsy-spacing__row{align-items:center;gap:var(--space-m);padding-block:var(--space-s);padding-inline:var(--space-l);grid-template-columns:8rem minmax(0,1fr);display:grid;&+&{border-block-start:1px solid var(--hairline)}@media (width<=480px){gap:var(--space-xs);grid-template-columns:minmax(0,1fr)}}.dsy-spacing__label{flex-direction:column;gap:.15em;display:flex}.dsy-spacing__px{font-size:var(--text-xs)}.dsy-spacing__demo{align-items:stretch;gap:0;block-size:3rem;display:flex}.dsy-spacing__box{border:1px solid var(--hairline-bright);border-radius:var(--radius-s);background:var(--app-panel);inline-size:4.5rem}.dsy-spacing__gap{border-inline:1px solid var(--tertiary);background:repeating-linear-gradient(-45deg, var(--tertiary-40) 0 2px, transparent 2px 6px);flex:none;margin-block:.4rem}.dsy-spacing__gap--xs{inline-size:var(--space-xs)}.dsy-spacing__gap--s{inline-size:var(--space-s)}.dsy-spacing__gap--m{inline-size:var(--space-m)}.dsy-spacing__gap--l{inline-size:var(--space-l)}.dsy-spacing__gap--xl{inline-size:var(--space-xl)}.dsy-spacing__gap--xxl{inline-size:var(--space-xxl)}.dsy-icons{border-block-start:1px solid var(--hairline)}.dsy-icons__container{gap:var(--space-xxl);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;display:grid;@media (width<=900px){gap:var(--space-l);grid-template-columns:minmax(0,1fr)}}.dsy-icons__copy{gap:var(--space-s);flex-direction:column;display:flex}.dsy-icons__sets{gap:var(--space-xs);flex-wrap:wrap;display:flex}.dsy-icons__set{border:1px solid var(--hairline-bright);font-size:var(--text-xs);border-radius:40rem;padding-block:.25em;padding-inline:.7em;&:first-child{border-color:var(--tertiary-60);background:var(--tertiary-10)}}.dsy-icons__grid{border:1px solid var(--hairline);border-radius:var(--panel-radius);background:var(--hairline);grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;display:grid;overflow:hidden;@media (width<=600px){grid-template-columns:repeat(4,minmax(0,1fr))}}.dsy-icons__tile{aspect-ratio:1;background:var(--app-chrome);font-size:var(--h3);transition:color var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease);place-items:center;display:grid;&:hover{color:var(--tertiary);background:var(--tertiary-10)}@media (prefers-reduced-motion:reduce){transition:none}}.dsy-icons__glyph{fill:none;stroke:currentColor}