Vintage Audio Tape Deck Interface

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="tape-563"><div class="title">TAPE DECK</div><div class="counter"><span>0</span><span>4</span><span>2</span></div><div class="reels"><div class="reel"></div><div class="reel"></div></div><div class="line"></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.tape-563 { width: 190px; background: #f1f1eb; border: 1px solid #e2e2dc; border-radius: 12px; padding: 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); font-family: monospace; position: relative; margin: auto; background-image: radial-gradient(#d1d1ca 1px, transparent 0); background-size: 8px 8px; }
.tape-563 .title { font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #52525b; text-align: center; margin-bottom: 10px; }
.tape-563 .counter { display: flex; justify-content: center; gap: 2px; margin-bottom: 12px; }
.tape-563 .counter span { background: #18181b; color: #fff; padding: 2px 5px; border-radius: 2px; font-size: 10px; font-weight: 700; }
.tape-563 .reels { display: flex; justify-content: space-around; position: relative; z-index: 2; }
.tape-563 .reel { width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(#27272a 0deg 90deg, #52525b 90deg 180deg, #27272a 180deg 270deg, #52525b 270deg 360deg); animation: spin-563 4s linear infinite; }
.tape-563 .line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #ef4444; z-index: 1; }
@keyframes spin-563 { 100% { transform: rotate(360deg); } }