:root{--pr-accent: #ad7bff;--pr-accent-2: #673ab8;--pr-line: rgba(127, 127, 127, .2);--pr-soft: rgba(127, 127, 127, .07);--pr-muted: rgba(127, 127, 127, .9)}.pr{margin:0 auto;max-width:44rem}.pr-card{display:grid;gap:1.25rem;border:1px solid var(--pr-line);border-radius:1rem;background:var(--pr-soft);padding:1.5rem}.pr-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:14rem;border-radius:.75rem;overflow:hidden}@media(max-width:576px){.pr-palette{grid-template-columns:minmax(0,1fr);height:auto}.pr-swatch{min-height:4rem;flex-direction:row!important}}.pr-swatch{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.5rem;padding:1rem .5rem;transition:background .4s;& button{margin:0;width:auto;border:0;background:transparent;color:inherit;padding:.25rem .5rem;border-radius:.4rem}& button:hover{background:#fff3}}.pr-hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:.95rem;text-transform:uppercase}.pr-lock{font-size:1.1rem;opacity:.6;&[aria-pressed=true]{opacity:1}}.pr-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}.pr-hint{color:var(--pr-muted);font-size:.9rem}.pr-btn{margin:0;width:auto;border:0;border-radius:999px;background:linear-gradient(120deg,var(--pr-accent),var(--pr-accent-2));padding:.7rem 1.25rem;color:#fff;font-weight:600}.pr-clocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}.pr-clocks>[data-component]{display:grid}.pr-clock{margin:0;border:1px solid var(--pr-line);border-radius:1rem;background:var(--pr-soft);padding:1.5rem 1rem;text-align:center;& time{display:block;background:linear-gradient(120deg,var(--pr-accent),var(--pr-accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;font-size:2.25rem;font-variant-numeric:tabular-nums}& figcaption{display:grid;margin-top:.5rem}& figcaption span{color:var(--pr-muted);font-size:.85rem}}@media(prefers-reduced-motion:reduce){.pr-swatch{transition:none}}