/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
.dt{--dt-accent:#1f7a52;--dt-radius:12px;--dt-space:16px}.dt__lead{font-size:var(--step-1);line-height:var(--leading-snug);max-inline-size:60ch;margin-block-end:var(--space-m)}.dt__layout{display:grid;gap:var(--space-l);grid-template-columns:1fr}@media (min-width:38rem){.dt__layout{grid-template-columns:minmax(0,18rem) 1fr;align-items:start}}.dt__card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--dt-radius);overflow:hidden;max-inline-size:18rem}.dt__card-media{block-size:6rem;background:color-mix(in srgb,var(--dt-accent) 22%,var(--surface));border-block-end:1.5px solid var(--line)}.dt__card-body{padding:var(--dt-space);display:flex;flex-direction:column;gap:calc(var(--dt-space) * .5)}.dt__card-tag{align-self:start;font-size:var(--step--1);font-weight:600;color:#fff;background:var(--dt-accent);padding:.15em .6em;border-radius:var(--dt-radius)}.dt__card-title{font-size:var(--step-1);margin:0}.dt__card-text{font-size:var(--step--1);color:var(--muted);margin:0}.dt__card-btn{align-self:start;margin-block-start:calc(var(--dt-space) * 0.25);appearance:none;border:0;background:var(--dt-accent);color:#fff;font-family:var(--font-body);font-weight:600;font-size:var(--step-0);padding:var(--space-2xs) var(--dt-space);border-radius:var(--dt-radius)}.dt__controls{display:flex;flex-direction:column;gap:var(--space-m)}.dt__control{display:flex;flex-direction:column;gap:var(--space-2xs)}.dt__label{font-family:var(--font-display);font-size:var(--step--1);font-weight:500;color:var(--ink)}.dt__label span{color:var(--muted);font-variant-numeric:tabular-nums}.dt__swatches{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}.dt__swatch{inline-size:2.25rem;block-size:2.25rem;border-radius:50%;border:2px solid var(--line);background:var(--sw);padding:0}.dt__swatch.is-active{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--sw)}.dt__slider{inline-size:100%;accent-color:var(--accent);cursor:pointer}.dt__reset{align-self:start}.dt__readout{margin-block-start:var(--space-m);font-size:var(--step-0);color:var(--ink);max-inline-size:60ch;min-block-size:3em}.dt__alt{margin-block-start:var(--space-l);border-block-start:1px solid var(--line);padding-block-start:var(--space-m)}.dt__alt summary{cursor:pointer;font-weight:600;color:var(--accent-strong)}.dt__alt[open] summary{margin-block-end:var(--space-s)}