.cd,.cd-panel,.cd-face,.cd-card,.cd-add{display:grid;gap:var(--sp-4)}
.cd-face,.cd-feat{gap:var(--sp-3);text-align:center}
.cd-time{font-size:clamp(3rem,22cqi,6rem);height:clamp(3rem,22cqi,6rem);display:grid;place-items:center}
.cd-time.is-long{font-size:clamp(2.5rem,16cqi,4.5rem)}
.is-done{color:var(--accent)}
.cd-line,.cd-units span,.cd-pick span,.cd-past b{color:var(--text-2);font-size:var(--fs-sm)}
.cd-presets,.cd-hms,.cd-units{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.cd-presets .chip{padding:0;justify-content:center;border-radius:var(--r-2)}
.cd-hms{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2) var(--sp-3)}
.cd-hms .input{text-align:center;font-size:var(--fs-lg)}
.cd-ctrl{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:var(--sp-2)}
.cd-ctrl .btn{height:var(--control-lg);padding-inline:var(--sp-2);min-width:0}
.cd-side{flex-direction:column;gap:2px;font-size:var(--fs-sm)}
.cd-feat{align-content:center}
.cd-feat:not(.empty){display:grid;min-height:9.5rem}
.cd-feat.empty{padding:var(--sp-4)}
.cd-head{display:grid;grid-template-columns:2.75rem 1fr 2.75rem 2.75rem;align-items:center}
.cd-name{grid-column:2;font-size:var(--fs-lg);font-weight:600}
.cd-units{grid-template-columns:repeat(4,minmax(0,1fr))}
.cd-units p{display:grid;padding:8px 0;background:var(--bg-2);border-radius:var(--r-2)}
.cd-units b{font-size:clamp(1.5rem,9cqi,2.75rem);font-weight:600;line-height:1.1}
.cd-units.is-long [data-u=d]{font-size:clamp(1.125rem,6cqi,2rem)}
.cd-card h2{font-size:var(--fs-md)}
.cd-card>.btn{justify-self:start}
.cd-pick{flex:1;min-width:0;display:grid;gap:2px;text-align:left;border:0;background:none;padding:var(--sp-2);border-radius:var(--r-2)}
.cd-pick[aria-pressed=true]{background:var(--accent-soft)}
.cd-pick b,.cd-name{overflow-wrap:anywhere}
.cd-pick b{font-weight:500}
@container (max-width:20rem){.cd-presets .chip{font-size:var(--fs-xs)}}
@media (max-width:63.99em){[data-mode=timer] .rail.is-empty{display:none}}
.cd-add .two-up{grid-template-columns:4fr 3fr}