/* Closet app — "Time to a first saved outfit" race. 11s loop, pure CSS.
   Responsive: lays out for its container width (container query), phone to desktop. */
.closet-race{--mint:#2FB58C;--mint-ink:#1C7E60;--ink:#1F2420;--muted:#6B6F68;--trackbg:#ECE8DF;--bar:#C9C3B6;
  container-type:inline-size;box-sizing:border-box;width:100%;padding:clamp(24px,7cqw,88px) clamp(20px,7cqw,96px);
  background:#F6F4EF;border-radius:clamp(20px,2.4cqw,28px);color:var(--ink);font-family:Inter,system-ui,sans-serif}
.closet-race *{box-sizing:border-box}
.cr-head{margin-bottom:clamp(24px,5cqw,48px)}
.cr-title{font-family:Archivo,Inter,sans-serif;font-stretch:120%;font-weight:650;font-size:clamp(22px,2.6cqw,30px);line-height:1.15;letter-spacing:-.02em}
.cr-sub,.cr-ticks span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cr-sub{margin-top:10px}
.cr-rows{display:grid;gap:clamp(22px,3.4cqw,42px)}
.cr-row,.cr-axis{display:grid;grid-template-columns:clamp(84px,17cqw,200px) 1fr;align-items:center;column-gap:16px}
.cr-name{font-size:clamp(16px,1.8cqw,20px);font-weight:600}
.cr-me .cr-name{color:var(--mint)}
.cr-track{position:relative;height:clamp(32px,3.7cqw,44px);border-radius:12px;background:var(--trackbg)}
.cr-bar{position:absolute;left:0;top:0;bottom:0;border-radius:12px;background:var(--bar);transform-origin:0 50%}
.cr-val{position:absolute;top:50%;margin-top:-.65em;padding-right:12px;font-size:clamp(14px,1.6cqw,18px);font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-saved{width:22px;background:var(--mint)}
.cr-clean{background:repeating-linear-gradient(135deg,rgba(47,181,140,.28) 0 8px,rgba(47,181,140,.14) 8px 16px)}
.cr-moments{grid-column:2;display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;font-size:clamp(13px,1.4cqw,15px);font-weight:600;color:var(--mint-ink)}
.cr-moments span{display:inline-flex;align-items:center;gap:8px}
.cr-dot{width:12px;height:12px;border-radius:4px;background:var(--mint);flex:none}
.cr-dot-stripe{background:repeating-linear-gradient(135deg,rgba(47,181,140,.5) 0 3px,rgba(47,181,140,.2) 3px 6px)}
.cr-axis{margin-top:clamp(18px,3cqw,30px)}
.cr-ticks{position:relative;height:16px}
.cr-ticks span{position:absolute;top:0;transform:translateX(-50%);font-size:11px;letter-spacing:.06em;white-space:nowrap}
.cr-ticks em{font-style:normal}
.cr-ticks span:first-child{transform:none}
.cr-ticks span:last-child{transform:translateX(-100%)}
.cr-note{margin:clamp(20px,4cqw,40px) 0 0;font-size:clamp(14px,1.4cqw,16px);line-height:1.45;color:var(--muted)}
/* phone: names stack above bars, tick unit dropped */
@container (max-width:560px){
  .cr-row,.cr-axis{grid-template-columns:1fr;row-gap:8px}
  .cr-axis .cr-name{display:none}
  .cr-moments{grid-column:1;flex-direction:column;align-items:flex-start}
  .cr-ticks em{display:none}
}
.cr-an{animation-duration:11000ms;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.cr-lin{animation-timing-function:linear}
@media (prefers-reduced-motion:reduce){.cr-an{animation-delay:-10000ms!important;animation-play-state:paused!important}}
@keyframes cr_b0{0.000%{transform:scaleX(0)}10.909%{transform:scaleX(0)}43.636%{transform:scaleX(1)}98.909%{transform:scaleX(1)}99.455%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes cr_v0{0.000%{opacity:0}43.636%{opacity:0}46.364%{opacity:1}98.909%{opacity:1}99.455%{opacity:0}100.000%{opacity:0}}
@keyframes cr_b1{0.000%{transform:scaleX(0)}10.909%{transform:scaleX(0)}54.545%{transform:scaleX(1)}98.909%{transform:scaleX(1)}99.455%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes cr_v1{0.000%{opacity:0}54.545%{opacity:0}57.273%{opacity:1}98.909%{opacity:1}99.455%{opacity:0}100.000%{opacity:0}}
@keyframes cr_b2{0.000%{transform:scaleX(0)}10.909%{transform:scaleX(0)}43.636%{transform:scaleX(1)}98.909%{transform:scaleX(1)}99.455%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes cr_v2{0.000%{opacity:0}43.636%{opacity:0}46.364%{opacity:1}98.909%{opacity:1}99.455%{opacity:0}100.000%{opacity:0}}
@keyframes cr_bm{0.000%{transform:scaleX(0)}10.909%{transform:scaleX(0)}15.455%{transform:scaleX(1)}98.909%{transform:scaleX(1)}99.455%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes cr_vm{0.000%{opacity:0;transform:translateY(4px)}15.455%{opacity:0;transform:translateY(4px)}18.182%{opacity:1;transform:translateY(0)}98.909%{opacity:1;transform:translateY(0)}99.455%{opacity:0;transform:translateY(4px)}100.000%{opacity:0;transform:translateY(4px)}}
@keyframes cr_bm2{0.000%{transform:scaleX(0)}19.091%{transform:scaleX(0)}43.636%{transform:scaleX(1)}98.909%{transform:scaleX(1)}99.455%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes cr_vm2{0.000%{opacity:0;transform:translateY(4px)}43.636%{opacity:0;transform:translateY(4px)}46.364%{opacity:1;transform:translateY(0)}98.909%{opacity:1;transform:translateY(0)}99.455%{opacity:0;transform:translateY(4px)}100.000%{opacity:0;transform:translateY(4px)}}
@keyframes cr_nm{0.000%{opacity:0}70.909%{opacity:0}75.000%{opacity:1}98.909%{opacity:1}99.455%{opacity:0}100.000%{opacity:0}}