.design-container .intro{font-size:1.2em;color:var(--gloaming);margin-bottom:var(--space-xl)}.design-container .colour-loop{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-3xl);margin:var(--space-4xl) 0;align-items:start}@media(min-width:901px)and (max-width:1300px){.docs-shell .design-container{padding-left:clamp(1.5rem,3vw,3rem);padding-right:clamp(1.5rem,3vw,3rem)}}@media(min-width:1200px){.design-container .colour-loop{grid-template-columns:repeat(4,minmax(0,1fr))}}.design-container .colour-teaser{text-align:center}.design-container .colour-intro{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:auto auto;grid-template-areas:"text mark" "meta mark";gap:var(--space-xl);align-items:start;margin:var(--space-xl) 0 var(--space-3xl)}.design-container .colour-intro-text{grid-area:text}.design-container .colour-intro-note{margin:0;color:var(--gloaming)}.design-container .colour-intro-meta{grid-area:meta;margin-top:var(--space-md);display:grid;gap:var(--space-xs);font-family:var(--font-mono);color:var(--gloaming-pale)}.design-container .colour-intro-meta-item,.design-container .colour-intro-meta-item code{font-family:inherit}.design-container .colour-intro-mark{grid-area:mark;display:grid;justify-items:end;align-self:start}.design-container .colour-intro-circle-button{background:none;border:0;padding:0;cursor:pointer;line-height:0;display:inline-block}.design-container .colour-intro-circle-button:focus-visible{outline:2px solid var(--gloaming);outline-offset:6px;border-radius:999px}.design-container .colour-intro-circle{width:280px;height:280px;display:block;filter:none}.design-container #limestone .colour-intro-circle{filter:drop-shadow(3px 1px 3px rgba(0,0,0,.08))}@media(max-width:1300px){.design-container .colour-intro{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-template-areas:"text text" "mark meta"}.design-container .colour-intro-mark{justify-items:start;align-self:start}.design-container .colour-intro-circle{width:min(280px,100%);height:auto}.design-container .colour-intro-meta{margin-top:0}}.design-container .colour-teaser h3{margin-top:var(--space-xl)}.design-container .colour-teaser h3 a,.design-container .colour-teaser h3 a:hover{color:var(--gloaming)}.design-container .colour-teaser a:hover{border-bottom:none}.design-container .colour-swatch-link{display:inline-block;border-bottom:none}.design-container .colour-swatch{width:180px;height:180px;border-radius:999px;margin:0 auto;background:linear-gradient(-45deg,var(--colour-dark) 50%,var(--colour-base) 50%);box-shadow:none;transition:transform var(--transition-slower),box-shadow var(--transition-fast);transform:rotate(0)}.design-container .colour-teaser:hover .colour-swatch,.design-container .colour-swatch-link:hover .colour-swatch,.design-container .colour-swatch-link:focus-visible .colour-swatch{transform:rotate(45deg);box-shadow:0 2px 8px #0000001f}.design-container .color-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-lg)}.design-container .palette-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--space-sm)}@media(max-width:1300px){.design-container .palette-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:600px){.design-container .palette-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}.design-container .swatch{text-align:center}.design-container .swatch-button{background:none;border:0;padding:0;cursor:pointer;width:100%;text-align:inherit;color:inherit}.design-container .swatch-button:focus-visible{outline:2px solid var(--gloaming);outline-offset:4px;border-radius:var(--border-radius-md)}.design-container .swatch-color{width:100%;height:60px;border-radius:var(--border-radius-md);margin-bottom:var(--space-sm);box-shadow:none}.design-container .swatch:hover .swatch-color{box-shadow:0 2px 8px #0000001f}.copy-toast{position:fixed;left:50%;bottom:var(--space-xl);transform:translate(-50%);background:var(--gloaming-dark);color:var(--limestone-dark);padding:10px 14px;border-radius:var(--border-radius-sm);font-family:var(--font-mono);font-size:12px;opacity:0;transition:opacity var(--transition-fast);z-index:9999;pointer-events:none}.copy-toast.is-visible{opacity:1}.design-container .swatch-label{font-weight:var(--font-weight-medium);color:var(--gloaming-dark);margin-bottom:var(--space-xs);text-transform:capitalize}.design-container .swatch-var{font-family:var(--font-mono);font-size:11px;color:var(--gloaming-pale)}.design-container .swatch-meta{font-family:var(--font-mono);font-size:10px;color:var(--gloaming);margin-top:var(--space-xs)}@media(max-width:900px){.design-container .palette-swatches{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-md)}}@media(max-width:768px){.design-container .colour-loop{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-xl)}.design-container .colour-intro{grid-template-columns:1fr;gap:var(--space-xl)}.design-container .colour-intro-mark{justify-items:start}.design-container .colour-intro-circle{width:200px;height:200px}.design-container .colour-swatch{width:160px;height:160px}.design-container .color-swatches{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-md)}.design-container .palette-swatches{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--space-sm)}.design-container .swatch-color{height:54px}}@media(prefers-reduced-motion:reduce){.design-container .colour-swatch{transition:none}}