*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:#111419;color:#f5eee3;font:16px system-ui}main{width:min(94vw,560px);padding:28px;border:1px solid #535057;border-radius:20px;background:#24232a;box-shadow:0 20px 60px #0008}small{letter-spacing:.17em;font-weight:700}h1{margin:.2em 0 .7em;font-size:clamp(2.4rem,8vw,4rem);line-height:1}.cassette{background:#e7ae72;color:#261b19;border:8px solid #42312b;border-radius:15px;padding:20px}.cassette:has(#side[data-side=B]){background:#b8a4df}.cassette p{margin:.25em 0 1em}.window{display:flex;align-items:center;justify-content:space-around;background:#29232b;border-radius:12px;padding:10px;margin-bottom:12px}.window i{display:block;width:42px;height:42px;border:8px dotted #f3e7d3;border-radius:50%}.window span{width:24%;height:6px;background:#976c50}.playing i{animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.playing i{animation:none}}.readout,.controls{display:flex;gap:8px;justify-content:space-between;margin-top:14px}.readout{font-variant-numeric:tabular-nums}.controls{display:grid;grid-template-columns:repeat(3,1fr)}button{padding:12px 3px;background:#36333d;color:inherit;border:1px solid #79727f;border-radius:8px;font:inherit;cursor:pointer}button:hover{background:#4a4453}button:focus-visible{outline:3px solid #e7ae72;outline-offset:2px}

.window .reel {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
}
.window .reel:hover { border-color: #e7ae72; }


/* Uneven hub details make the winding direction visible. */
.window .reel i {
  position: relative;
  border: 6px solid #d9cfbd;
  background: repeating-conic-gradient(#302a32 0deg 36deg, #b2a38d 36deg 60deg);
  box-shadow: inset 0 0 0 5px #302a32;
}
.window .reel i::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #242029;
  left: 10px;
  top: 10px;
}
.window .reel i::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background: #ed754b;
  border: 1px solid #302a32;
  border-radius: 2px;
  left: 10px;
  top: -6px;
}
.rewinding .reel i {
  animation: spin .8s linear infinite reverse;
}
.rewinding .window {
  box-shadow: inset 0 0 12px #ed754b55;
}
@media (prefers-reduced-motion: reduce) {
  .rewinding .reel i { animation: none; }
}

h1 {
  font-family: "Avenir Next", "Trebuchet MS", sans-serif;
  letter-spacing: -.055em;
  font-weight: 800;
}
.cassette strong, .cassette p, .readout {
  font-family: "Courier New", monospace;
}
.cassette strong { font-size: 1.25rem; }
.controls button {
  min-height: 48px;
  font-weight: 650;
  border-bottom: 4px solid #15131a;
  box-shadow: 0 3px 0 #08070b;
  transition: transform 100ms ease, background-color 100ms ease, box-shadow 100ms ease;
}
.controls button:hover { background: #514957; }
.controls button:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #08070b;
}
#play-pause { background: #e7ae72; color: #261b19; }
#play-pause:hover { background: #f5c58e; }
@media (prefers-reduced-motion: reduce) {
  .controls button { transition: none; }
  .controls button:active { transform: none; }
}