.semantic-colors[data-astro-cid-qprzvkdz]{display:grid;grid-template-columns:auto auto 1fr;gap:var(--space-2xs) var(--space-xs);place-items:center start}.swatch[data-astro-cid-2y2vi5e7]{height:2rem;width:2rem;border-radius:var(--radius-s);border:var(--border-s) solid var(--color-border);flex-shrink:0}strong[data-astro-cid-2y2vi5e7]{text-wrap:nowrap}.colors-container[data-astro-cid-ymwfu5ul]{max-width:100%;overflow-x:auto}.color-row[data-astro-cid-rbmokfwy]{position:relative;display:grid;grid-template-columns:repeat(9,1fr);gap:0;width:auto;margin-block-end:auto;max-width:72rem}.color-row[data-astro-cid-rbmokfwy] .color-name[data-astro-cid-rbmokfwy]{position:absolute;left:4px;bottom:4px;font-family:var(--font-family-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);text-transform:uppercase}.color-row[data-astro-cid-rbmokfwy] .color-cell[data-astro-cid-rbmokfwy]{display:flex;align-items:start;justify-content:end;min-width:5rem;max-width:8rem;aspect-ratio:1;width:100%;padding:4px;font-size:var(--font-size-s);margin:0}.box[data-astro-cid-h7toikkz]{border:var(--border-s) solid var(--color-border);height:4rem;width:12rem;font-family:var(--font-family-mono);border-radius:var(--radius-m);display:flex;align-items:center;justify-content:center;background-color:var(--color-body-alt);margin-bottom:var(--space-m)}.space-example-container[data-astro-cid-hp7d4cym]+.space-example-container[data-astro-cid-hp7d4cym]{margin-block-start:var(--space-m)}.space-name[data-astro-cid-hp7d4cym]{font-weight:var(--font-weight-bold);font-family:var(--font-family-heading);margin-block-end:var(--space-3xs)}.space-example[data-astro-cid-hp7d4cym]{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;margin-block-end:var(--space-s)}.space-example-block[data-astro-cid-hp7d4cym]{display:inline-block;height:1.5rem;width:1.5rem;background-color:var(--color-body-text);flex:none;background-color:var(--color-blue-5)}.space-example-block[data-astro-cid-hp7d4cym]:not(:first-child){background-color:var(--color-red-5)}.space-example-spacer[data-astro-cid-hp7d4cym]{display:inline-block;position:relative;height:var(--border-s);background-color:var(--color-body-text);flex:none;margin:auto 0}.box[data-astro-cid-dfyw6e6q]{border:var(--border-m) solid var(--color-brand-5);height:10rem;width:12rem;font-family:var(--font-family-mono);border-radius:var(--radius-m);display:flex;align-items:center;justify-content:center;background-color:var(--color-body-alt);height:"10rem"}.container[data-astro-cid-3lwznmct]{width:100%;position:relative}.variable-name-wrapper[data-astro-cid-3lwznmct]{margin-block-start:calc(-1 * var(--space-2xs))!important;margin-block-end:var(--space-2xs)!important}.description[data-astro-cid-3lwznmct]{margin-block-end:var(--space-xs)!important}.track-wrapper[data-astro-cid-3lwznmct]{width:100%;height:2rem;position:relative}.track[data-astro-cid-3lwznmct]{width:calc(100% - 1.25rem);height:var(--border-m);background:var(--color-border);position:absolute;top:50%;transform:translateY(-50%);left:.625rem;border-radius:var(--radius-full)}.ball[data-astro-cid-3lwznmct]{width:1.25rem;height:1.25rem;background:var(--color-brand-5);border-radius:50%;position:absolute;top:50%;transform:translateY(-50%);animation:ball-animation 2s infinite}@keyframes ball-animation{0%{left:0}to{left:calc(100% - 1.25rem)}}@keyframes progress{0%{inline-size:0%}to{inline-size:100%}}.box[data-astro-cid-fo3t54k3]{cursor:pointer;border-radius:var(--radius-m);outline:0!important;border:var(--border-s) solid var(--color-blue-7);color:var(--color-blue-2);box-shadow:var(--shadow-s);display:flex;inline-size:10rem;block-size:10rem;font-size:1rem;align-items:center;justify-content:center;background-color:var(--color-blue-8);box-sizing:border-box;overflow:clip;position:relative;transition-property:background-color,border-color,color;transition-duration:var(--duration);transition-timing-function:var(--ease-default);font-weight:var(--font-weight-bold)}.box[data-astro-cid-fo3t54k3]:hover,.box[data-astro-cid-fo3t54k3].clicked{background-color:var(--color-red-8);border-color:var(--color-red-7);color:var(--color-red-2)}