@layer properties,theme,base;@layer components{.products{gap:var(--htchat-space-4);display:grid}@media (width>=40rem){.products{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=80rem){.products{grid-template-columns:repeat(3,minmax(0,1fr))}}.product>a{height:100%;padding:var(--htchat-space-3) var(--htchat-space-3) var(--htchat-space-4);border:1px solid var(--htchat-border);border-radius:var(--htchat-radius-lg);background:var(--htchat-surface);transition:border-color var(--htchat-duration-surface) var(--htchat-ease-standard), box-shadow var(--htchat-duration-surface) var(--htchat-ease-standard);flex-direction:column;display:flex}@media (hover:hover){.product>a:hover{border-color:var(--htchat-border-strong);box-shadow:var(--htchat-shadow-md)}}.product>a>.logo-plate{height:7.5rem;padding:var(--htchat-space-4) var(--htchat-space-5);border:0}.product>a>.logo-plate img{max-height:5.5rem}.product>a>.logo-plate{background:var(--htchat-canvas)}.product>a>:not(.logo-plate){padding-inline:var(--htchat-space-2)}.product-name{margin-top:var(--htchat-space-4);--type-leading:var(--htchat-text-reading-leading);--type-tracking:var(--htchat-text-reading-tracking);font-size:var(--htchat-text-reading-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);font-weight:600;line-height:var(--type-leading,var(--htchat-text-body-leading));color:var(--htchat-ink);text-underline-offset:.2em}@media (hover:hover){a:hover>.product-name{text-decoration:underline}}@media (width>=40rem){.product-name{--type-leading:var(--htchat-text-reading-leading);--type-tracking:var(--htchat-text-reading-tracking);font-size:var(--htchat-text-reading-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking)}}.product-sum{margin-top:var(--htchat-space-1);--type-leading:var(--htchat-text-small-leading);--type-tracking:var(--htchat-text-small-tracking);font-size:var(--htchat-text-small-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);line-height:var(--type-leading,var(--htchat-text-body-leading))}@media (width>=40rem){.product-sum{--type-leading:var(--htchat-text-small-leading);--type-tracking:var(--htchat-text-small-tracking);font-size:var(--htchat-text-small-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking)}}.product-tags{padding-top:var(--htchat-space-2);--type-leading:var(--htchat-text-small-leading);--type-tracking:var(--htchat-text-small-tracking);font-size:var(--htchat-text-small-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);color:var(--htchat-ink);margin-top:auto;font-weight:600}@media (width>=40rem){.product-tags{padding-top:var(--htchat-space-4);--type-leading:var(--htchat-text-small-leading);--type-tracking:var(--htchat-text-small-tracking);font-size:var(--htchat-text-small-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking)}}.story-points{gap:var(--htchat-space-6);display:grid}@media (width>=48rem){.story-points{grid-template-columns:repeat(3,minmax(0,1fr))}}.story-points>div{padding-top:var(--htchat-space-4);border-top:1px solid var(--htchat-border-strong)}.story-points h3{--type-leading:var(--htchat-text-reading-leading);--type-tracking:var(--htchat-text-reading-tracking);font-size:var(--htchat-text-reading-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking)}.story-points p{margin-top:var(--htchat-space-2);line-height:var(--type-leading,var(--htchat-text-body-leading))}.small-print{gap:var(--htchat-space-6);--type-leading:var(--htchat-text-small-leading);--type-tracking:var(--htchat-text-small-tracking);font-size:var(--htchat-text-small-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);line-height:var(--type-leading,var(--htchat-text-body-leading));display:grid}@media (width>=48rem){.small-print{grid-template-columns:repeat(3,minmax(0,1fr))}}.small-print h2{--type-leading:var(--htchat-text-small-leading);--type-tracking:var(--htchat-text-small-tracking);font-size:var(--htchat-text-small-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);font-weight:600}.small-print p{margin-top:var(--htchat-space-2)}.small-print a{color:var(--htchat-action-text);text-decoration:underline}.search-trigger{align-items:center;gap:var(--htchat-space-3);width:100%;height:3.75rem;padding-inline:var(--htchat-space-4);border:1px solid var(--htchat-border-strong);border-radius:var(--htchat-radius-md);background:var(--htchat-surface);box-shadow:var(--htchat-shadow-md);--type-leading:var(--htchat-text-reading-leading);--type-tracking:var(--htchat-text-reading-tracking);font-size:var(--htchat-text-reading-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);color:var(--htchat-swatch-meta);cursor:text;transition:border-color var(--htchat-duration-hover) var(--htchat-ease-standard);display:flex}.search-trigger>svg{width:1.25rem;height:1.25rem;color:var(--htchat-ink)}@media (hover:hover){.search-trigger:hover{border-color:var(--htchat-action)}}.logo-stage{flex-direction:column;display:flex}.logo-stage>.stage{min-height:13rem;padding:var(--htchat-space-6);border-radius:var(--htchat-radius-lg);border:1px solid var(--htchat-border);place-items:center;display:grid}.logo-stage>.stage img{width:100%;max-width:22rem}.logo-stage h3{margin-top:var(--htchat-space-4);--type-leading:var(--htchat-text-heading-leading);--type-tracking:var(--htchat-text-heading-tracking);font-size:var(--htchat-text-heading-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking)}.logo-stage p{margin-top:var(--htchat-space-1);color:var(--htchat-subtle)}.size-ladder{gap:var(--htchat-space-6);display:grid}.size-ladder li{gap:var(--htchat-space-3);display:grid}.size-ladder .rule{border-inline:1px solid var(--htchat-subtle);height:.75rem;position:relative}.size-ladder .rule:after{content:"";border-top:1px solid var(--htchat-subtle);position:absolute;inset:50% 0 auto}.size-ladder .size-label{--type-leading:var(--htchat-text-small-leading);--type-tracking:var(--htchat-text-small-tracking);font-size:var(--htchat-text-small-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);color:var(--htchat-subtle);justify-content:space-between;display:flex}.clear-space{padding:var(--htchat-space-6);border:1.5px dashed var(--htchat-action);border-radius:var(--htchat-radius-sm);background:var(--htchat-action-subtle);display:inline-grid;position:relative}.clear-space img{background:var(--htchat-surface);width:5rem;height:5rem}.clear-space .gap-label{--type-leading:var(--htchat-text-small-leading);--type-tracking:var(--htchat-text-small-tracking);font-size:var(--htchat-text-small-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);color:var(--htchat-action-text);white-space:nowrap;font-weight:600;position:absolute;top:.5rem;left:50%;translate:-50%}.rule-list li{gap:var(--htchat-space-3);padding-block:var(--htchat-space-3);border-top:1px solid var(--htchat-border);display:flex}.rule-list li svg{width:1.125rem;height:1.125rem;margin-top:var(--htchat-space-1);color:var(--htchat-error);flex-shrink:0}.swatches{gap:var(--htchat-space-1);background:var(--htchat-border);border:1px solid var(--htchat-border);border-radius:var(--htchat-radius-lg);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow:hidden}@media (width>=64rem){.swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}.swatches>li{background:var(--htchat-surface);flex-direction:column;display:flex}.swatches .fill{background:var(--swatch);height:7.5rem}@media (width>=64rem){.swatches .fill{height:9rem}}.swatches .facts{align-content:start;gap:var(--htchat-space-1);padding:var(--htchat-space-4) var(--htchat-space-4) var(--htchat-space-4);display:grid}.swatches h3{--type-leading:var(--htchat-text-body-leading);--type-tracking:var(--htchat-text-body-tracking);font-size:var(--htchat-text-body-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);font-weight:600}.swatches p{--type-leading:var(--htchat-text-small-leading);--type-tracking:var(--htchat-text-small-tracking);font-size:var(--htchat-text-small-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);line-height:var(--type-leading,var(--htchat-text-body-leading));color:var(--htchat-subtle)}.copy-hex{justify-self:start;align-items:center;gap:var(--htchat-space-1);min-height:2.5rem;margin-left:calc(-1 * var(--htchat-space-2));padding-inline:var(--htchat-space-2);border-radius:var(--htchat-radius-sm);--type-leading:var(--htchat-text-small-leading);--type-tracking:var(--htchat-text-small-tracking);font-size:var(--htchat-text-small-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);font-variant-numeric:tabular-nums;cursor:pointer;display:inline-flex}.copy-hex svg{width:.875rem;height:.875rem;color:var(--htchat-subtle)}@media (hover:hover){.copy-hex:hover{background:var(--htchat-canvas)}}.specimen{gap:var(--htchat-space-4) var(--htchat-space-6);padding-block:var(--htchat-space-6);border-top:1px solid var(--htchat-border-strong);display:grid}@media (width>=64rem){.specimen{grid-template-columns:16rem minmax(0,1fr)}}@media (width>=64rem){.specimen[data-variant=example]{grid-template-columns:12rem minmax(0,1.4fr) minmax(0,1fr);align-items:baseline}}.dir-group{gap:var(--htchat-space-4);margin-top:var(--htchat-space-7);padding-top:var(--htchat-space-4);border-top:1px solid var(--htchat-ink);scroll-margin-top:calc(var(--header-h) + 1.5rem);display:grid}@media (width>=64rem){.dir-group{gap:var(--htchat-space-6);scroll-margin-top:calc(var(--header-h) + 6rem);grid-template-columns:minmax(0,3fr) minmax(0,9fr)}.dir-group>header{top:calc(var(--header-h) + 6.5rem);align-self:start;position:sticky}}.dir-group h2{--type-leading:var(--htchat-text-title-leading);--type-tracking:var(--htchat-text-title-tracking);font-size:var(--htchat-text-title-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);line-height:var(--type-leading,var(--htchat-text-body-leading));letter-spacing:var(--type-tracking,var(--htchat-text-body-tracking))}.dir-list{display:grid}@media (width>=48rem){.dir-list{column-gap:var(--htchat-space-6);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.entry{border-bottom:1px solid var(--htchat-border)}.entry>a{gap:var(--htchat-space-4);height:100%;padding-block:var(--htchat-space-5);display:grid}.entry .logo-plate{height:7.5rem;padding:var(--htchat-space-4) var(--htchat-space-5)}.entry .logo-plate img{max-height:5.5rem}.entry .logo-plate{transition:border-color var(--htchat-duration-surface) var(--htchat-ease-standard)}@media (hover:hover){.entry a:hover .logo-plate{border-color:var(--htchat-border-strong)}}}@layer utilities;