:root {
  color-scheme: dark;
  --accent: #ebc56a;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; color: #e8e7de; background: radial-gradient(ellipse at 75% 38%, #34393055, transparent 52%), #171918; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.masthead, footer { width: min(1200px, calc(100% - 100px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.masthead { height: 104px; border-bottom: 1px solid #ffffff12; }
.brand { display: flex; align-items: center; font-size: 26px; font-weight: 700; letter-spacing: -1.4px; }
.brand-dot { color: var(--accent); }
.brand-divider { width: 1px; height: 15px; background: #ffffff26; margin-inline: 20px; }
.brand-caption { color: #b2b5a9; font-size: 12px; font-weight: 400; letter-spacing: 3px; }
.skin-link { font-size: 11px; letter-spacing: 1px; color: #b4b8a8; padding: 12px 0 12px 12px; }
.skin-link span { color: var(--accent); margin-left: 13px; }
.skin-link:hover { color: var(--accent); }
main { width: min(1100px, calc(100% - 100px)); margin: auto; padding-block: 72px 100px; display: grid; grid-template-columns: 1fr 510px; align-items: center; gap: 70px; flex: 1; }
.intro { padding-bottom: 35px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #a0a697; font: 9px/1.5 monospace; letter-spacing: 2px; }
.eyebrow span { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
h1 { font-size: clamp(40px, 4.1vw, 58px); font-weight: 500; line-height: 1.55; letter-spacing: 1px; margin: 24px 0 21px; white-space: nowrap; }
.period { color: var(--accent); }
.intro-copy { font-size: 13px; line-height: 2.2; letter-spacing: 1.5px; color: #a7ab9e; margin: 0; }
.intro-bottom { margin-top: 57px; display: flex; align-items: center; gap: 14px; font-size: 10px; color: #8d9487; letter-spacing: .5px; }
.tiny-tape { font-family: monospace; color: #b5bda7; font-size: 20px; }
.device { position: relative; width: 100%; padding: 32px 33px 20px; border: 1px solid #5a5d53; border-radius: 24px; background: linear-gradient(115deg, #41453e, #30342e 45%, #292d27); box-shadow: inset 0 2px 1px #ffffff24, inset 0 -4px 2px #0005, 0 3px 0 #11150f, 0 25px 50px #0005, 0 50px 90px #0003; }
.screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #161a13; background: linear-gradient(135deg, #555b4e, #24291f); box-shadow: 0 1px 1px #ffffff19; }
.screw::after { content: ""; position: absolute; inset: 3px 1px; background: #10160e; transform: rotate(-40deg); }
.tl { left: 13px; top: 13px; }.tr { right: 13px; top: 13px; }.bl { left: 13px; bottom: 13px; }.br { right: 13px; bottom: 13px; }
.device-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; }
.device-heading strong { font-size: 18px; letter-spacing: 4px; font-weight: 500; color: #e3e4d7; }
.device-heading div:first-child > span { display: block; margin-top: 7px; font: 7px monospace; letter-spacing: 1.7px; color: #b1b6a4; }
.device-model { font-size: 12px; font-weight: 700; color: #b7bdad; letter-spacing: -.5px; }
.device-model b { margin-left: 8px; color: var(--accent); font: 19px monospace; }
.cassette-bay { height: 221px; padding: 16px 19px 20px; background: #141813; position: relative; overflow: hidden; border-radius: 12px; border: 2px solid #191d17; box-shadow: 0 1px 0 #ffffff20, inset 0 5px 12px #000a; }
.cassette { position: relative; height: 100%; padding: 13px 15px 0; background: linear-gradient(135deg, #b1b6a3, #888f7b); border-radius: 9px 9px 13px 13px; box-shadow: 0 3px 10px #0008, inset 0 1px 0 #ffffff70; border: 1px solid #bec5ad; }
.cassette::before, .cassette::after { content: "+"; position: absolute; bottom: 6px; font: 11px monospace; color: #4b5442; }
.cassette::before { left: 9px; }.cassette::after { right: 9px; }
.cassette-label { display: flex; align-items: center; gap: 13px; position: relative; z-index: 2; height: 51px; background: #e7debe; color: #393e32; margin: -1px -2px 0; padding: 8px 12px; border-radius: 3px 3px 0 0; }
.side { font: bold 22px Georgia, serif; }.cassette-label > div { flex: 1; min-width: 0; }.handwriting { display: block; font-family: KaiTi, STKaiti, "Songti SC", serif; font-size: 19px; transform: rotate(-3deg); letter-spacing: 1px; white-space: nowrap; }.label-rule { display: block; height: 1px; background: #87836870; margin-top: 4px; }
.tape-length { font: 11px/1.4 monospace; text-align: right; white-space: nowrap; }.tape-length small { font-size: 6px; }
.tape-window { height: 64px; margin: 0 -2px; background: #232a21; border: 6px solid #c4b77e; border-top-width: 5px; position: relative; display: flex; justify-content: space-around; align-items: center; overflow: hidden; box-shadow: inset 0 2px 5px #0009; }
.reel { position: relative; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: repeating-conic-gradient(#c6cbb8 0 33deg, #647057 33deg 60deg); border: 5px solid #252c22; outline: 7px solid #4a4434; box-shadow: 0 0 0 9px #5b513a; z-index: 1; animation: reel-spin 4s linear infinite; animation-play-state: paused; }
.reel i { position: absolute; width: 17px; height: 17px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #252b21; border: 2px solid #aeb9a0; border-radius: 50%; }
.reel-right { animation-duration: 3.3s; }.tape-bridge { position: absolute; left: 27%; right: 27%; top: 12px; height: 26px; border-top: 1px solid #b1a177; border-bottom: 1px solid #a08a59; background: linear-gradient(#584b3288, #151b1388); }
.cassette-stripes { height: 12px; margin-inline: -2px; background: linear-gradient(#bb803f 0 25%, #d99c48 25% 50%, #e4b563 50% 75%, #e9d498 75%); }
.cassette-bottom { position: absolute; bottom: 0; left: 22%; right: 22%; height: 27px; background: #979e88; clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); border: 1px solid #59654c; display: flex; justify-content: space-around; align-items: center; padding: 0 18px; }
.cassette-bottom span { width: 8px; height: 8px; background: #2a3025; border: 2px solid #c0c7af; border-radius: 50%; }.cassette-bottom i { width: 4px; height: 4px; background: #434b39; border-radius: 50%; }
.glass-glint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, #eaf5d805, transparent 40%, #edf3df0a 40.2%, transparent 67%); }
.display { margin-top: 20px; border-radius: 5px; padding: 13px 17px 8px; border: 2px solid #181d14; background: #242a1b; color: #ddce90; box-shadow: inset 0 3px 8px #0008, 0 1px 0 #ffffff15; }
.display-top { display: flex; justify-content: space-between; font: 9px/1.5 monospace; letter-spacing: 1px; color: #b2b480; }.display-top > span:first-child { display: flex; align-items: center; gap: 6px; }.status-light { width: 5px; height: 5px; border-radius: 50%; background: #70744c; }
.display-center { display: flex; align-items: center; justify-content: space-between; height: 47px; gap: 12px; }.clock { font: 31px/1 monospace; letter-spacing: 1px; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px #dcc77420; white-space: nowrap; }.duration-divider { font-size: 13px; margin-inline: 8px; color: #777c53; }#duration { font-size: 15px; color: #afb47e; letter-spacing: 0; }
.equalizer { display: flex; align-items: end; gap: 3px; height: 23px; opacity: .6; }.equalizer i { width: 4px; height: 3px; background: repeating-linear-gradient(to top, #c3b876 0 3px, transparent 3px 5px); }.playing .equalizer i { animation: bars 700ms steps(4) infinite alternate; }.equalizer i:nth-child(3n) { animation-delay: -180ms; }.equalizer i:nth-child(3n+1) { animation-delay: -430ms; }.equalizer i:nth-child(2n) { animation-duration: 520ms; }
input[type="range"] { --fill: 0%; display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 23px; background: transparent; cursor: pointer; margin: 0; touch-action: pan-y; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 1px; background: linear-gradient(to right, #c6b97a var(--fill), #4d5438 var(--fill)); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 1px; background: linear-gradient(to right, #c6b97a var(--fill), #4d5438 var(--fill)); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 8px; height: 11px; margin-top: -4px; border-radius: 1px; background: #e3ca80; border: 1px solid #f0dda0; box-shadow: 1px 1px 3px #0005; }
input[type="range"]::-moz-range-thumb { width: 8px; height: 11px; border-radius: 1px; background: #e3ca80; border: 1px solid #f0dda0; }
input:disabled { opacity: .45; cursor: default; }
.transport { display: grid; grid-template-columns: 1fr 1.65fr 1fr; gap: 5px; margin-top: 21px; padding: 5px; border-radius: 8px; background: #161b14; box-shadow: 0 1px 0 #ffffff1c; }
.transport-key { position: relative; border: 1px solid #565d4e; border-bottom: 4px solid #1c2319; border-radius: 4px; background: linear-gradient(#53594c, #3e4637); height: 72px; color: #d4d8c6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; box-shadow: inset 0 1px 0 #ffffff17; transition: filter .15s, transform .15s; }
.transport-key span { font: 7px monospace; letter-spacing: 1.3px; }.transport-key svg { width: 23px; height: 23px; }.transport-key:hover { filter: brightness(1.13); }.transport-key:active { transform: translateY(2px); border-bottom-width: 2px; }
.play-key { background: linear-gradient(#e7c773, #cbaa52); color: #303523; border-color: #ebd591; border-bottom-color: #83703c; }.play-key i { position: absolute; right: 9px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: #8c793e; }
.settings { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }.mode-controls { display: flex; align-items: center; gap: 3px; }.icon-button { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #a3ac98; }.icon-button svg { width: 17px; height: 17px; }.icon-button:hover { background: #ffffff09; color: #e9cb79; }.icon-button.active { color: #edcb77; }.icon-button.active::after { content: ""; position: absolute; bottom: 1px; width: 3px; height: 3px; border-radius: 50%; background: #edcb77; }#mode-label { font-size: 9px; color: #bcc2af; letter-spacing: .5px; margin-left: 4px; white-space: nowrap; }
.repeat-one { display: none; position: absolute; left: 15px; top: 13px; font: bold 7px monospace; background: #30362b; }.active .repeat-one { display: block; }
.volume-control { display: flex; align-items: center; gap: 6px; }.volume-control input { width: 72px; }.volume-control .icon-button { width: 28px; }.volume-control input::-webkit-slider-runnable-track { background: linear-gradient(to right, #a9b399 var(--fill), #1d2419 var(--fill)); }.volume-control input::-moz-range-track { background: linear-gradient(to right, #a9b399 var(--fill), #1d2419 var(--fill)); }
.device-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; }.device-foot > span:nth-child(2) { font: 6px monospace; letter-spacing: 1.1px; color: #9da78f; white-space: nowrap; }.speaker-grille { width: 61px; height: 11px; background: repeating-linear-gradient(90deg, #171d12 0 2px, transparent 2px 5px); opacity: .8; }
.listening { position: absolute; top: 100%; left: -10px; right: -10px; margin: 22px 0 0; text-align: center; color: #a3ab98; font-size: 10px; letter-spacing: 1px; line-height: 1.7; }
.playing .reel { animation-play-state: running; }.playing .status-light { background: #e4d789; box-shadow: 0 0 7px #e7d68a70; }.playing .play-key i { background: #394a24; box-shadow: 0 0 5px #52623466; }
footer { min-height: 76px; border-top: 1px solid #ffffff10; color: #8f9787; font-size: 9px; letter-spacing: 1.1px; gap: 20px; }footer > span:last-child { display: flex; align-items: center; gap: 14px; }footer i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
@keyframes reel-spin { to { transform: rotate(360deg); } }
@keyframes bars { from { height: 3px; } to { height: 23px; } }
@media (max-width: 1050px) {
  main { width: calc(100% - 64px); grid-template-columns: 1fr 460px; gap: 30px; }
  h1 { font-size: 40px; }.eyebrow { font-size: 8px; letter-spacing: 1px; }.device { padding-inline: 27px; }.cassette-bay { padding-inline: 13px; }.handwriting { font-size: 17px; }
}
@media (max-width: 820px) {
  .masthead, footer { width: calc(100% - 48px); }.masthead { height: 80px; }
  main { width: min(510px, calc(100% - 44px)); grid-template-columns: 1fr; gap: 31px; padding-block: 40px 76px; }
  .intro { padding: 0; text-align: center; }.eyebrow { justify-content: center; }h1 { font-size: 36px; line-height: 1.4; margin: 18px 0 15px; }h1 br { display: none; }.intro-copy { font-size: 11px; letter-spacing: 1px; }.intro-copy br { display: none; }.intro-bottom { display: none; }.device { padding-inline: 29px; }.cassette-bay { padding-inline: 18px; }
  footer { min-height: 65px; font-size: 7px; letter-spacing: .5px; }footer > span:last-child { font-size: 8px; gap: 8px; }
}
@media (max-width: 440px) {
  .brand { font-size: 24px; }.brand-divider { margin-inline: 13px; }.brand-caption { font-size: 10px; }.skin-link { font-size: 10px; }
  main { width: calc(100% - 32px); padding-top: 31px; gap: 26px; }h1 { font-size: 29px; letter-spacing: 0; }.intro-copy { font-size: 10px; letter-spacing: .4px; }
  .device { padding: 27px 19px 19px; border-radius: 19px; }.device-heading { margin-bottom: 18px; }.device-heading strong { font-size: 16px; }.device-heading div:first-child > span { font-size: 6px; }
  .cassette-bay { height: 190px; padding: 12px 10px 15px; }.cassette { padding: 10px 10px 0; }.cassette-label { height: 43px; padding-inline: 9px; gap: 9px; }.handwriting { font-size: 15px; letter-spacing: 0; }.tape-length { font-size: 9px; }.tape-length small { font-size: 5px; }.side { font-size: 19px; }.tape-window { height: 57px; }.reel { width: 42px; height: 42px; }.cassette-bottom { height: 24px; }.cassette-stripes { height: 10px; }
  .display { margin-top: 17px; padding-inline: 12px; }.display-top { font-size: 8px; letter-spacing: .3px; }.clock { font-size: 28px; }#duration { font-size: 12px; }.duration-divider { margin-inline: 5px; }.equalizer { gap: 2px; }.equalizer i { width: 3px; }
  .transport { margin-top: 17px; }.transport-key { height: 65px; }.settings { gap: 4px; margin-top: 13px; }.mode-controls { gap: 1px; }#mode-label { font-size: 8px; margin-left: 1px; }.volume-control { gap: 3px; }.volume-control input { width: 52px; }.icon-button { width: 32px; }.repeat-one { left: 13px; }.speaker-grille { width: 40px; }.device-foot { gap: 8px; }.device-foot > span:nth-child(2) { font-size: 5px; letter-spacing: .7px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }