.tk-box{border:1.5px solid var(--app-muted);width:17px;height:17px;transition:background-color .2s var(--app-ease), border-color .2s var(--app-ease), transform .2s cubic-bezier(.2, 1.4, .3, 1);background:0 0;border-radius:3px;place-items:center;padding:0;display:grid}.tk-box svg{fill:none;width:12px;height:12px;stroke:var(--tk-on-accent);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24px;transition:stroke-dashoffset .35s cubic-bezier(.2,.9,.1,1)}.tk-box.on{border-color:var(--app-accent);background:var(--app-accent)}.tk-box.on svg{stroke-dashoffset:0}.tk-box.held{opacity:.75;cursor:not-allowed;border-style:dashed}.tk-box.held:hover{border-color:var(--app-muted);transform:none}.tk-box.nope{animation:.36s cubic-bezier(.36,.07,.19,.97) both tk-nope}@keyframes tk-nope{20%,60%{transform:translate(-3px)}40%,80%{transform:translate(3px)}}.tk-pri{flex:none;align-items:flex-end;gap:2px;width:18px;height:18px;padding:2px 1px;display:flex}.tk-pri i{background:var(--app-accent);border-radius:1px;flex:1}.tk-pri i:first-child{height:40%}.tk-pri i:nth-child(2){height:70%}.tk-pri i:nth-child(3){height:100%}.tk-play{border:1px solid var(--app-line-strong);width:30px;height:30px;color:var(--app-ink);transition:background-color .2s var(--app-ease), border-color .2s var(--app-ease), transform .2s cubic-bezier(.2, 1.4, .3, 1);background:0 0;border-radius:3px;place-items:center;padding:0;display:grid}.tk-icon{width:11px;height:11px}.tk-play:active{transform:scale(.92)}.tk-play.on{border-color:var(--app-accent);background:var(--app-accent);color:var(--tk-on-accent)}@media (hover:none),(pointer:coarse){.tk-box{position:relative}.tk-box:after{content:"";position:absolute;inset:-12px 0}.tk-play{width:var(--hit,40px);height:var(--hit,40px)}}@media (hover:hover){.tk-box:hover{border-color:var(--app-ink);transform:scale(1.1)}.tk-play:hover{border-color:var(--app-ink)}}@media (prefers-reduced-motion:reduce){.tk-box.nope{animation:none}.tk-box,.tk-box svg,.tk-play{transition:none}}