/* Unbranded portable cassette case. Its motor follows the actual audio events. */
.cassette-window { display: none; }
.hardware[data-style=cassette] {
  --case: #d4d4c6;
  --ink: #283239;
  --accent: #a94b30;
  color-scheme: light;
  color: var(--ink);
  padding: 0 22px 18px;
  border: 1px solid #93998f;
  border-top: 7px solid #162c3c;
  border-radius: 9px 9px 13px 13px;
  background: repeating-linear-gradient(0deg,#ffffff12 0 1px,#424b3810 1px 2px,transparent 2px 4px),
    linear-gradient(112deg,#c4c8bc,#f0f0e3 26%,#d0d1c0 62%,#e0e3da 89%,#adb5ae);
  box-shadow: inset 3px 0 3px #fff9,inset -3px 0 3px #646e6855,inset 0 -5px 2px #91998c,
    0 2px 0 #455450,0 18px 25px -15px #28302e80;
}
.hardware[data-style=cassette]::before,
.hardware[data-style=cassette]::after {
  content: ''; position: absolute; top: 13px; width: 5px; height: 5px;
  border: 1px solid #90968b; border-radius: 50%;
  background: linear-gradient(135deg,#eaede3 40%,#78857c 45% 55%,#d7dbd0 60%);
}
.hardware[data-style=cassette]::before { left: 9px; }
.hardware[data-style=cassette]::after { right: 9px; }
.hardware[data-style=cassette] .deck-top {
  padding: 13px 10px 10px; margin: 0; border: 0; box-shadow: none; color: #374b50;
}
.hardware[data-style=cassette] .deck-top strong { font-size: 10px; font-weight: 500; letter-spacing: 3px; }
.hardware[data-style=cassette] .deck-top > span { font-size: 8px; letter-spacing: 1.2px; }
.hardware[data-style=cassette] .power-led { background: #755a44; box-shadow: inset 0 1px 2px #0007; }
.hardware[data-style=cassette][data-playing=true] .power-led { background: #ee7040; box-shadow: 0 0 5px #df5b34a0; }
.hardware[data-style=cassette] .deck-face { display: block; }
.hardware[data-style=cassette] .lcd {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center;
  min-height: 83px; padding: 12px 16px; margin: 0 8px 16px;
  border: 1px solid #9fa595; border-top-color: #bec4b6; border-bottom: 2px solid #7d877a;
  border-radius: 2px 2px 9px 9px; color: #1b3037;
  background: repeating-linear-gradient(0deg,#ffffff24 0 1px,transparent 1px 3px),linear-gradient(100deg,#e1e2d2,#e9e9d9 45%,#c5cbb9);
  box-shadow: inset 0 1px 2px #fff9,0 1px 1px #fff8;
}
.hardware[data-style=cassette] .lcd .now-playing { min-height: 0; gap: 2px; padding: 0; }
.hardware[data-style=cassette] .lcd h1 { font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: -.4px; margin: 0; }
.hardware[data-style=cassette] .lcd #track-source { font-size: 10px; }
.hardware[data-style=cassette] .lcd .muted { color: #53605b; }
.hardware[data-style=cassette] .lcd #track-number { font-size: 8px; letter-spacing: 2px; }
.hardware[data-style=cassette] .lcd .time-display { margin: 0; display: block; text-align: right; }
.hardware[data-style=cassette] .lcd #elapsed { display: block; font-size: 25px; letter-spacing: -1px; text-shadow: none; }
.hardware[data-style=cassette] .lcd .time-display > .muted { font-size: 9px; }
.hardware[data-style=cassette] .lcd .tape { display: none; }
.hardware[data-style=cassette] .lcd .deck-art { left: 12px; right: auto; top: 18px; width: 44px; height: 44px; filter: none; opacity: .9; border-color: #7f8d7c; }
.hardware[data-style=cassette] .lcd:has(.deck-art:not([hidden])) .now-playing { padding-left: 50px; padding-right: 0; }
.hardware[data-style=cassette] .cassette-window {
  display: block; position: relative; width: 100%; aspect-ratio: 2.5; padding: 12px 7%;
  border: 3px solid #aab3a7; border-bottom-color: #f1f0df; border-right-color: #e7e9da;
  border-radius: 100px; overflow: hidden;
  background: linear-gradient(145deg,#091d2a,#173444 45%,#051724);
  box-shadow: 0 0 0 1px #777f74,inset 0 5px 5px #020d17,0 2px 2px #fff8;
}
.cassette-glass { width: 100%; height: 100%; position: relative; }
.cassette-window::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(113deg,transparent 18%,#d7edf013 28%,transparent 47%,#dae9dc0c 68%,transparent 76%);
  box-shadow: inset 0 8px 10px #07131d99,inset 0 -5px 8px #020e2080;
}
.cassette-shell {
  position: relative; height: 100%; border: 1px solid #81999aa0; border-radius: 14px;
  background: linear-gradient(120deg,#a7b9b54d,#cddcd052 50%,#6f92974d);
  box-shadow: inset 0 0 0 4px #162d3260,inset 0 2px 1px #d9e6db99,0 2px 8px #0009;
}
.cassette-print { position: absolute; top: 7%; left: 7%; right: 7%; display: flex; align-items: center; justify-content: space-between; color: #d7e3d6; font-size: 8px; letter-spacing: 2px; }
.cassette-print > span:first-child { font-size: 11px; border: 1px solid #bfcec085; line-height: 1; padding: 3px 4px; }
.cassette-state { font-size: 7px; letter-spacing: 1px; }
.cassette-reel { position: absolute; width: 37%; aspect-ratio: 1; top: 50%; transform: translateY(-43%); border-radius: 50%; border: 1px solid #adc1b374; background: #0c1e22; box-shadow: 0 0 0 3px #5e7a7670,inset 0 0 10px #02070c; }
.cassette-reel-left { left: 7%; }
.cassette-reel-right { right: 7%; }
.cassette-pack { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle,#584d3c 0 1px,#a2967655 1px 1.6px,#2d322c 1.6px 2.6px); box-shadow: 0 0 0 1px #0b1512; }
.cassette-reel-left .cassette-pack { transform: scale(var(--supply,.88)); }
.cassette-reel-right .cassette-pack { transform: scale(var(--takeup,.52)); }
.cassette-spindle {
  position: absolute; inset: 29%; border: 2px solid #bdc7bda0; border-radius: 50%;
  background: repeating-conic-gradient(from 12deg,#bdcbbd 0deg 24deg,#213b3d 25deg 59deg,#8ea99f 60deg);
  box-shadow: 0 0 0 3px #172e3299,0 1px 5px #000c;
  animation: cassette-turn var(--reel-period,3.6s) linear infinite; animation-play-state: paused;
}
.cassette-spindle::before { content: ''; position: absolute; inset: 22%; border: 1px solid #bac5b28c; border-radius: 50%; background: #0d242c; box-shadow: inset 0 1px 3px #000; }
.cassette-spindle i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #e7e6c0; left: 45%; top: 5%; }
.hardware[data-style=cassette][data-playing=true] .cassette-spindle { animation-play-state: running; }
.cassette-bridge { position: absolute; left: 45%; right: 45%; top: 39%; bottom: 12%; border-left: 1px solid #bed3c845; border-right: 1px solid #bed3c845; background: linear-gradient(90deg,#a3bdba14,#d2e4d72a,#76979514); }
.cassette-bridge::before { content: ''; position: absolute; left: 40%; top: 38%; width: 5px; height: 5px; border: 1px solid #b3c8c280; border-radius: 50%; background: #163138; }
.cassette-bridge span { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 6px; color: #d7e2d2; white-space: nowrap; }
.cassette-tape-path { position: absolute; bottom: 7%; left: 13%; right: 13%; height: 13%; border: 2px solid #342f21; border-top: 0; border-radius: 0 0 8px 8px; box-shadow: 0 1px #acaa8250; }
.cassette-guide { position: absolute; bottom: 5%; width: 5%; aspect-ratio: 1; background: radial-gradient(circle,#1c3335 0 24%,#b9c6b5 28% 47%,#344b49 50%); border-radius: 50%; }
.cassette-guide-left { left: 11%; }.cassette-guide-right { right: 11%; }
.cassette-lower { position: absolute; bottom: 0; left: 33%; right: 33%; height: 8%; border: 1px solid #8faca878; border-bottom: 0; border-radius: 7px 7px 0 0; background: #b6c9c226; }
.hardware[data-style=cassette] .waveform { height: 27px; margin: 16px 3px 7px; border-color: #919b8f; }
.hardware[data-style=cassette] .waveform-unplayed { fill: #9ca795; }
.hardware[data-style=cassette] #waveform-played { fill: #354e55; }
.hardware[data-style=cassette] #waveform-cursor { stroke: #aa4c32; }
.hardware[data-style=cassette] .waveform-status { background: #d6d9cb; color: #4c5c53; }
.hardware[data-style=cassette] .deck-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 26px; margin: 15px 3px 18px; }
.hardware[data-style=cassette] .transport { grid-column: 1/-1; grid-row: 1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); max-width: none; gap: 4px; }
.hardware[data-style=cassette] .transport button {
  grid-column: auto !important; grid-row: auto !important; align-self: stretch; margin: 0 !important;
  min-height: 42px; min-width: 0; padding: 6px 2px; border-radius: 3px 3px 6px 6px;
  color: #24343b; border: 1px solid #8c968e; border-bottom: 4px solid #6d7974;
  background: linear-gradient(#f4f5ea,#c3cbc0 85%,#b1bbaf); box-shadow: inset 0 1px white,0 2px 3px #1d2e3840;
  font-size: 14px;
}
.hardware[data-style=cassette] .transport #play-pause { border-radius: 3px 3px 6px 6px; min-height: 42px; background: linear-gradient(#425963,#213947); color: #f1efda; border-color: #1e343e; border-bottom-color: #102633; box-shadow: inset 0 1px #b1c1be60,0 2px 3px #1d2e3840; font-size: 17px; }
.hardware[data-style=cassette] .transport #mute,.hardware[data-style=cassette] .transport #repeat { font-size: 9px; }
.hardware[data-style=cassette] .transport button:hover:not(:disabled) { background: linear-gradient(#fffef3,#d6ddcc); color: #263c45; }
.hardware[data-style=cassette][data-playing=true] .transport #play-pause { box-shadow: inset 0 3px 5px #04131a; border-bottom-width: 2px; transform: translateY(2px); }
.hardware[data-style=cassette] .dial{width:70px;height:70px;justify-self:start;color:#344a4e;display:flex;gap:0;border:3px solid #9ba995;border-radius:50%;background:radial-gradient(circle,#d5dfca 0 48%,#9aa993 50%,#ecf1df 53% 63%,#96a18b 64%);box-shadow:0 2px 4px #36493955}
.hardware[data-style=cassette] .dial:last-child{justify-self:end}
.hardware[data-style=cassette] .dial>span{font-size:6px;letter-spacing:1px}
.hardware[data-style=cassette] .dial output{font-size:11px;font-weight:400}
.hardware[data-style=cassette] .dial input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.hardware[data-style=cassette] .deck-bottom { padding: 10px 2px 0; border-color: #9ea997; color: #485d5f; box-shadow: 0 -1px #eef1df; letter-spacing: 1px; }
.hardware[data-style=cassette] select { border-radius: 2px; border-color: #939f8f; background: #e2e7d9; color: #344747; box-shadow: inset 0 1px #fff6; }
.hardware[data-style=cassette] .track-actions,.hardware[data-style=cassette] .song-versions { border-color: #9ea997; }
.hardware[data-style=cassette] .muted,.hardware[data-style=cassette] .fine,.hardware[data-style=cassette] .track-message { color: #51605a; }
@keyframes cassette-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .cassette-spindle { animation: none; } }
@media (max-width:600px) {
  .hardware[data-style=cassette] { padding: 0 12px 14px; border-radius: 6px 6px 10px 10px; }
  .hardware[data-style=cassette] .lcd { margin: 0 2px 13px; padding: 10px; min-height: 77px; gap: 6px; }
  .hardware[data-style=cassette] .lcd h1 { font-size: 12px; }
  .hardware[data-style=cassette] .lcd #track-source { font-size: 9px; }
  .hardware[data-style=cassette] .lcd #elapsed { font-size: 20px; }
  .hardware[data-style=cassette] .lcd .deck-art { left: 9px; top: 20px; width: 32px; height: 32px; }
  .hardware[data-style=cassette] .lcd:has(.deck-art:not([hidden])) .now-playing { padding-left: 38px; }
  .hardware[data-style=cassette] .cassette-window { padding: 9px 6%; aspect-ratio: 2.25; border-width: 2px; }
  .cassette-print { font-size: 6px; letter-spacing: 1px; }
  .cassette-print > span:first-child { font-size: 8px; padding: 2px 3px; }
  .cassette-state { font-size: 6px; }
  .cassette-spindle { border-width: 1px; }
  .cassette-spindle i { width: 3px; height: 3px; }
  .cassette-bridge span { font-size: 5px; }
  .hardware[data-style=cassette] .deck-controls { gap: 14px 18px; }
  .hardware[data-style=cassette] .deck-bottom { font-size: 6px; letter-spacing: .5px; }
}