.dc{--dc-size:calc(var(--s-7) - 10px);width:var(--dc-size);height:var(--dc-size);background:var(--surface-sunk);color:var(--accent-text);flex:none;display:block}.dc svg{width:100%;height:100%;display:block;overflow:hidden}.dc-off{fill:var(--text);opacity:.12}.dc-lit{fill:currentColor}.dc-run--shut{opacity:0}@keyframes dc-scope{0%,to{transform:translate(0)}20%{transform:translate(1px)}40%{transform:translate(0)}60%{transform:translate(-1px)}80%{transform:translate(0)}}@keyframes dc-open{0%,44%,62%,to{opacity:1}45%,61%{opacity:0}}@keyframes dc-shut{0%,44%,62%,to{opacity:0}45%,61%{opacity:1}}@keyframes dc-record{0%{transform:translateY(0)}to{transform:translateY(-4px)}}@keyframes dc-draw{0%{opacity:0}to{opacity:1}}.dc-host.is-playing .dc-run--scope{animation:dc-scope calc(var(--dur-sheet) * 2) steps(1, end) both}.dc-host.is-playing .dc-run--open{animation:dc-open calc(var(--dur-sheet) * 2) steps(1, end) both}.dc-host.is-playing .dc-run--shut{animation:dc-shut calc(var(--dur-sheet) * 2) steps(1, end) both}.dc-host.is-playing .dc-run--record{animation:dc-record calc(var(--dur-sheet) * 2) steps(4) both}.dc-host.is-playing .dc-run--verify circle{animation:dc-draw var(--dur-fast) steps(1, end) both;animation-delay:calc(var(--dur-fast) * var(--d))}.dc-host.is-playing .dc-run--draw circle{animation:dc-draw var(--stagger) steps(1, end) both;animation-delay:calc(var(--stagger) * var(--d))}@media (prefers-reduced-motion:reduce){.dc-run,.dc-run circle{animation:none!important}}
