:root{
  --cream:#ece2ca;
  --plastic:#d8ccb2;
  --paper:#f6efd9;
  --smoke:#343531;
  --smoke-2:#55544d;
  --orange:#df4a2d;
  --brown:#674738;
  --teal:#8bd3b8;
  --ink:#272923;
  --line:#9d9076;
  --shadow:0 18px 0 #b7aa8f,0 28px 50px rgba(54,45,34,.2);
  --display:"Arial Black","Microsoft YaHei UI",sans-serif;
  --body:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --utility:Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;color:var(--ink);background-color:var(--cream);font-family:var(--body);line-height:1.7}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(236,226,202,.94);border-bottom:2px solid var(--ink);backdrop-filter:blur(12px)}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:21px;letter-spacing:.01em;white-space:nowrap}
.brand img{display:block;width:35px;height:35px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:800;white-space:nowrap}
.nav-links a{position:relative;padding:5px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--orange);transition:right .2s ease}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.download-cta{display:inline-flex;align-items:center;justify-content:center;min-width:132px;min-height:48px;padding:0 24px;border:2px solid var(--ink);background:var(--orange);color:#fff9e9;font-weight:900;white-space:nowrap;word-break:keep-all;writing-mode:horizontal-tb;box-shadow:4px 4px 0 var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.download-cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
a:focus-visible{outline:4px solid var(--teal);outline-offset:4px}
.hero{padding:clamp(56px,7vw,96px) 0 clamp(80px,10vw,130px);border-bottom:2px solid var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);align-items:center;gap:clamp(42px,6vw,82px)}
.catalog,.side-mark,.tab,.player-topline,.display-strip,.transport-key,.tape-edge,.final-inner>div>span{font-family:var(--utility);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.catalog{display:inline-block;margin:0 0 26px;padding:6px 10px;border:1px solid var(--ink);background:var(--paper);font-size:11px}
.side-mark{margin:0 0 14px;color:var(--brown);font-size:12px}
.album-notes h1{margin:0;font-family:var(--display);font-size:clamp(48px,6.4vw,82px);line-height:.98;letter-spacing:-.065em}
.album-notes h1 em{color:var(--orange);font-style:normal}
.hero-lead{max-width:610px;margin:28px 0;color:var(--smoke-2);font-size:17px}
.hero-action-row{display:flex;align-items:center;flex-wrap:wrap;gap:24px}
.liner-link{font-weight:900;border-bottom:2px solid var(--ink)}
.liner-link span{display:inline-block;margin-left:8px;color:var(--orange)}
.platform-line{margin:28px 0 0;font:700 12px/1.8 var(--utility);letter-spacing:.03em}
.platform-line span{margin-right:12px;padding:3px 7px;background:var(--brown);color:var(--paper)}
.deck-media{position:relative;align-self:center;height:auto;margin:0;padding:0;overflow:visible;transform:none}
.player-shell{position:relative;padding:22px 24px 25px;border:3px solid var(--ink);border-radius:24px 24px 14px 14px;background:var(--plastic);box-shadow:var(--shadow)}
.player-shell::before,.player-shell::after{content:"";position:absolute;bottom:-24px;width:70px;height:12px;border:3px solid var(--ink);border-top:0;background:var(--smoke)}
.player-shell::before{left:45px}.player-shell::after{right:45px}
.player-topline{display:flex;justify-content:space-between;gap:20px;padding-bottom:11px;border-bottom:2px solid var(--ink);font-size:10px}
.cassette-bay{position:relative;margin-top:21px;padding:24px 38px;border:3px solid var(--ink);border-radius:11px;background:var(--smoke)}
.tape-screw{position:absolute;top:9px;width:9px;height:9px;border:1px solid var(--cream);border-radius:50%;background:var(--ink)}
.screw-a{left:11px}.screw-b{right:11px}
.cassette-label{padding:13px 17px 15px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:inset 0 -8px 0 #ddc59d}
.label-head,.label-rule{display:flex;align-items:center;justify-content:space-between;gap:10px}
.label-head{padding-bottom:7px;border-bottom:1px solid var(--brown);font:700 11px var(--utility)}
.label-head strong{font:900 18px var(--display)}
.product-window{display:grid;grid-template-columns:58px minmax(120px,1fr) 58px;align-items:center;gap:14px;margin:13px 0;padding:0 12px;border:2px solid var(--ink);border-radius:34px;background:var(--brown)}
.product-window img{display:block;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:0;object-fit:contain;object-position:center;clip-path:none;transform:none;background:#f4ecd7}
.reel{display:block;aspect-ratio:1;border:7px dotted var(--paper);border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px var(--brown),0 0 0 7px var(--ink)}
.label-rule{padding-top:6px;border-top:1px solid var(--brown);font:800 10px var(--utility)}
.display-strip{display:grid;grid-template-columns:1fr auto 48px 1fr;align-items:center;gap:10px;margin-top:18px;padding:8px 12px;border:2px solid var(--ink);background:#1f2421;color:var(--teal);font-size:10px}
.display-strip b{font-size:15px;text-shadow:0 0 8px rgba(139,211,184,.65)}
.display-strip i{display:block;height:4px;background:repeating-linear-gradient(90deg,var(--teal) 0 4px,transparent 4px 7px)}
.display-strip span:last-child{text-align:right}
.transport-row{display:flex;align-items:stretch;gap:8px;margin-top:15px}
.transport-key{display:flex;align-items:center;justify-content:center;min-width:80px;min-height:45px;padding:0 12px;border:2px solid var(--ink);border-radius:3px;background:#ede5d1;box-shadow:0 5px 0 #7d776b;font-size:9px}
.key-orange{background:var(--orange);color:white}
.level-slot{flex:1;min-width:40px;border:2px solid var(--ink);background:repeating-linear-gradient(90deg,var(--smoke) 0 5px,var(--plastic) 5px 10px)}
.deck-media figcaption{margin-top:38px;text-align:center;color:var(--smoke-2);font-size:12px}
.manual-fold{background:var(--paper);border-bottom:2px solid var(--ink)}
.fold-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(45px,8vw,110px);padding-block:clamp(80px,10vw,130px);background:linear-gradient(90deg,transparent calc(36% - 1px),rgba(103,71,56,.28) 36%,transparent calc(36% + 1px))}
.tab{display:inline-block;padding:7px 11px;background:var(--orange);color:white;font-size:11px}
.fold-title>p{margin:28px 0 8px;font:800 13px var(--utility);letter-spacing:.1em}
.fold-title h2,.track-heading h2,.platform-copy h2,.button-layout h2,.final-inner h2{margin:0;font-family:var(--display);font-size:clamp(34px,4.6vw,59px);line-height:1.06;letter-spacing:-.045em}
.operation-list{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.operation-list li{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:21px;padding:24px 0;border-bottom:1px solid var(--line)}
.step-no{display:grid;place-items:center;width:48px;aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;font:900 12px var(--utility)}
.operation-list h3{margin:0 0 5px;font-size:21px}.operation-list p{margin:0;color:var(--smoke-2)}
.operation-list b{color:var(--orange);font:900 10px var(--utility);writing-mode:vertical-rl;letter-spacing:.12em}
.track-section{padding:clamp(90px,11vw,150px) 0;background:var(--brown);color:var(--paper)}
.track-wrap{display:grid;grid-template-columns:.68fr 1.32fr;gap:clamp(50px,8vw,120px)}
.track-heading{position:sticky;top:120px;align-self:start}
.track-heading .side-mark{color:var(--teal)}
.track-heading>p:last-child{max-width:410px;color:#d9cbb7}
.track-list{border-top:2px solid var(--paper)}
.track-list article{display:grid;grid-template-columns:52px .6fr 1fr auto;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid rgba(246,239,217,.37)}
.track-list article>span{color:var(--teal);font:900 13px var(--utility)}
.track-list h3{margin:0;font-size:23px}.track-list p{margin:0;color:#e4d7c3}.track-list i{font:700 9px var(--utility);letter-spacing:.08em}
.platform-tape{padding:clamp(85px,11vw,150px) 0;background:var(--smoke);color:var(--paper)}
.platform-layout{display:grid;grid-template-columns:1.18fr .82fr;align-items:center;gap:clamp(45px,7vw,95px)}
.product-spread{position:relative;align-self:center;height:auto;margin:0;padding:0;overflow:visible;transform:none}
.product-spread::before{content:"";position:absolute;inset:-20px 35px -20px -20px;z-index:0;border:2px solid var(--paper);background:var(--orange);transform:rotate(-2deg)}
.product-spread img{position:relative;z-index:1;display:block;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:0;border:2px solid var(--paper);object-fit:contain;object-position:center;clip-path:none;transform:none}
.tape-edge{position:absolute;z-index:2;top:0;right:0;padding:6px 10px;background:var(--paper);color:var(--ink);font-size:9px}
.product-spread figcaption{position:relative;z-index:2;margin-top:28px;color:#cabda7;font-size:12px}
.dark-tab{background:var(--teal);color:var(--ink)}
.platform-copy h2{margin:22px 0}.platform-copy>p{color:#d3c6b0}
.label-stack{list-style:none;margin:30px 0;padding:0;border-top:1px solid #817d73}
.label-stack li{display:grid;grid-template-columns:40px 1fr;padding:9px 0;border-bottom:1px solid #817d73;font-family:var(--utility);font-weight:800}
.label-stack span{color:var(--teal)}
.button-bank{padding:clamp(85px,11vw,145px) 0;background:var(--cream)}
.button-layout{display:grid;grid-template-columns:.65fr 1.15fr;gap:clamp(45px,8vw,115px)}
.mechanical-controls{border:3px solid var(--ink);box-shadow:10px 10px 0 var(--brown)}
.mechanical-controls article{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:25px;padding:23px;border-bottom:2px solid var(--ink);background:var(--plastic)}
.mechanical-controls article:last-child{border-bottom:0}
.control-key{display:grid;place-items:center;min-height:58px;border:2px solid var(--ink);background:var(--paper);box-shadow:0 6px 0 var(--smoke-2);font:900 11px var(--utility)}
.mechanical-controls h3{margin:0 0 4px}.mechanical-controls p{margin:0;color:var(--smoke-2)}
.manual-link{grid-column:2;justify-self:start;font-weight:900;border-bottom:2px solid var(--orange)}
.manual-link span{color:var(--orange)}
.final-strip{padding:44px 0;background:var(--orange);color:#fff6df;border-block:3px solid var(--ink)}
.final-inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:35px}
.final-inner h2{margin:5px 0 2px;font-size:clamp(30px,4vw,50px)}.final-inner p{margin:0}
.final-download{background:var(--paper);color:var(--ink)}
.site-footer{padding:60px 0 28px;background:var(--smoke);color:var(--paper)}
.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr;gap:40px}
.footer-grid h2,.footer-grid h3{margin-top:0}.footer-grid h2{font-family:var(--display);font-size:30px}
.footer-grid p,.footer-grid a{color:#d4c9b7}.footer-grid p{max-width:450px}.footer-grid a{display:block;margin:8px 0}
.footer-grid a:hover{color:var(--teal)}
.copyright{margin-top:35px;padding-top:20px;border-top:1px solid #686962;color:#aaa89f;font:12px var(--utility)}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}.deck-media{max-width:720px;margin-inline:auto}
  .fold-grid,.track-wrap,.platform-layout,.button-layout{grid-template-columns:1fr;background:none}
  .track-heading{position:static}.manual-link{grid-column:1}
  .product-spread{max-width:720px}.track-list article{grid-template-columns:45px .6fr 1fr}.track-list i{display:none}
}
@media(max-width:720px){
  .shell{width:min(100% - 24px,1180px)}
  .nav{padding:12px 0;flex-wrap:wrap}.nav-links{order:3;width:100%;gap:20px;overflow-x:auto;padding-bottom:4px}.nav>.download-cta{display:none}
  .hero{padding-top:45px}.album-notes h1{font-size:clamp(43px,14vw,68px)}
  .player-shell{padding:14px 12px 18px;border-radius:16px}.cassette-bay{padding:18px 15px}.cassette-label{padding:10px}
  .product-window{grid-template-columns:40px minmax(85px,1fr) 40px;gap:9px;margin-block:10px;padding-inline:8px}.reel{border-width:5px;box-shadow:0 0 0 3px var(--brown),0 0 0 5px var(--ink)}
  .display-strip{grid-template-columns:1fr auto}.display-strip i,.display-strip span:last-child{display:none}
  .transport-row{display:grid;grid-template-columns:repeat(3,1fr)}.transport-key{min-width:0;padding:0 5px}.level-slot{display:none}
  .operation-list li{grid-template-columns:48px 1fr}.operation-list b{display:none}
  .track-list article{grid-template-columns:38px 1fr}.track-list p{grid-column:2}
  .mechanical-controls article{grid-template-columns:68px 1fr;padding:17px 14px;gap:15px}
  .final-inner,.footer-grid{grid-template-columns:1fr}.final-download{width:100%}
}
@media(max-width:420px){
  .hero-action-row{align-items:stretch;flex-direction:column}.hero-download{width:100%}
  .player-topline span:last-child,.label-head span{display:none}
  .product-window{grid-template-columns:32px minmax(72px,1fr) 32px}.cassette-bay{padding-inline:10px}
  .mechanical-controls article{grid-template-columns:1fr}.control-key{width:90px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.download-cta,.nav-links a::after{transition:none}}
/* Hero image safety: final authoritative overrides */
.hero-grid{align-items:center}
.deck-media{align-self:center;height:auto;padding:0;margin-top:0;margin-bottom:0;overflow:visible;transform:none}
.deck-media img{display:block;width:100%;height:auto;min-width:0;min-height:0;max-height:none;margin:0;padding:0;object-fit:contain;object-position:center;clip-path:none;transform:none;filter:none;mix-blend-mode:normal}
