:root {
  color-scheme: light;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #14213b;
  background: #f7faff;
  font-synthesis: none;
  --blue: #326df4;
  --blue-dark: #1f52c9;
  --ink: #14213b;
  --muted: #6e7d98;
  --line: rgba(43, 79, 139, 0.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 85% 8%, #e6dcff 0, transparent 28%), linear-gradient(180deg, #f4f8ff 0, #fff 40%, #f7faff 100%); }
a { color: inherit; text-decoration: none; }

.site-header { height: 76px; padding: 0 clamp(24px, 6vw, 96px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(249, 252, 255, .78); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { position: relative; width: 42px; height: 42px; overflow: hidden; display: grid; place-items: center; color: white; border-radius: 13px; background: linear-gradient(145deg, #69db95, #13b966 62%, #139a7b); box-shadow: 0 8px 20px rgba(16, 176, 101, .25); }
.brand-note { position: relative; z-index: 2; font-size: 24px; font-weight: 800; transform: translateY(-1px); }
.brand-wave { position: absolute; width: 34px; height: 18px; border: 2px solid rgba(255,255,255,.38); border-radius: 50%; transform: rotate(-16deg); }
.brand-copy { display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.brand-copy strong { font-size: 20px; letter-spacing: .08em; }
.brand-copy small { color: var(--muted); font-size: 9px; letter-spacing: .16em; }
nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); color: #4e5e79; font-size: 14px; }
nav a { transition: color .2s ease; }
nav a:hover { color: var(--blue); }

main { overflow: hidden; }
.hero { min-height: 680px; padding: 78px clamp(24px, 8vw, 132px) 88px; display: grid; grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr); align-items: center; gap: clamp(48px, 8vw, 120px); }
.eyebrow { margin: 0 0 18px; color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .2em; }
.hero h1 { margin: 0; color: var(--ink); font-size: clamp(54px, 6vw, 88px); line-height: 1.04; letter-spacing: -.055em; }
.hero h1 span { color: transparent; background: linear-gradient(100deg, #326df4 10%, #7868ed 55%, #e077be); background-clip: text; -webkit-background-clip: text; }
.hero-description { max-width: 510px; margin: 28px 0 0; color: var(--muted); font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.button { min-width: 132px; height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 15px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: linear-gradient(135deg, #326df4, #775eea); box-shadow: 0 12px 28px rgba(57, 99, 224, .28); }
.button-quiet { color: #39506f; border: 1px solid var(--line); background: rgba(255,255,255,.72); }
.release-note { color: #98a3b6; font-size: 12px; margin: 15px 0 0; }

.hero-art { min-height: 500px; position: relative; display: grid; place-items: center; }
.glow { position: absolute; border-radius: 50%; filter: blur(3px); }
.glow-one { width: 430px; height: 430px; background: rgba(79, 135, 255, .25); }
.glow-two { width: 260px; height: 260px; transform: translate(170px, 120px); background: rgba(238, 131, 202, .23); }
.player-card { position: relative; width: min(100%, 510px); padding: 26px 30px 28px; border: 1px solid rgba(255,255,255,.75); border-radius: 34px; background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(239,244,255,.72)); box-shadow: 0 32px 80px rgba(59, 84, 139, .24); backdrop-filter: blur(28px); }
.player-top { display: flex; justify-content: space-between; color: #667690; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #57d692; box-shadow: 0 0 0 5px rgba(87,214,146,.14); }
.record-wrap { position: relative; height: 260px; display: grid; place-items: center; }
.record { width: 228px; height: 228px; display: grid; place-items: center; border: 1px solid #222b38; border-radius: 50%; background: repeating-radial-gradient(circle, #161d2b 0 4px, #252e3c 5px 7px); box-shadow: 0 18px 30px rgba(15, 24, 43, .22); animation: spin 14s linear infinite; }
.record-ring { position: absolute; width: 104px; height: 104px; border: 9px solid #eef4ff; border-radius: 50%; background: linear-gradient(145deg, #79b6ff, #b271e9 55%, #ed87c5); }
.record-label { z-index: 1; width: 45px; height: 45px; display: grid; place-items: center; color: white; font-size: 19px; font-weight: 800; border-radius: 50%; background: rgba(22,32,54,.7); }
.tonearm { position: absolute; top: 20px; right: 84px; width: 10px; height: 165px; border-radius: 8px; background: linear-gradient(90deg, #c7cfda, #fff, #a8b2c1); transform: rotate(-13deg); transform-origin: top; box-shadow: 0 4px 8px rgba(36,50,75,.18); }
.tonearm::before { content: ""; position: absolute; left: -13px; top: -15px; width: 35px; height: 35px; border: 8px solid #e6edf7; border-radius: 50%; background: #536176; }
.tonearm::after { content: ""; position: absolute; left: -7px; bottom: -3px; width: 25px; height: 38px; border-radius: 8px; background: #e5ebf4; transform: rotate(6deg); }
.track-copy { display: flex; flex-direction: column; gap: 7px; text-align: center; }
.track-copy strong { font-size: 20px; }
.track-copy span { color: var(--muted); font-size: 13px; }
.progress { height: 4px; margin: 23px 10px 20px; overflow: hidden; border-radius: 99px; background: #dfe6f3; }
.progress span { display: block; width: 56%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3d78f4, #ad6de5); }
.controls { display: flex; justify-content: center; align-items: center; gap: 28px; color: #68758b; }
.controls b { width: 48px; height: 48px; display: grid; place-items: center; color: white; border-radius: 16px; background: linear-gradient(145deg, #3c76f5, #7d5ee7); box-shadow: 0 9px 22px rgba(60, 105, 225, .27); }
@keyframes spin { to { transform: rotate(360deg); } }

.features, .download-section, .about { max-width: 1180px; margin: 0 auto; padding: 110px 30px; }
.section-heading { max-width: 680px; }
.section-heading h2, .download-copy h2, .about h2 { margin: 0; color: var(--ink); font-size: clamp(36px, 4vw, 52px); letter-spacing: -.04em; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.feature-grid article { min-height: 240px; padding: 34px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.78); box-shadow: 0 14px 36px rgba(57,82,128,.08); }
.feature-icon { width: 50px; height: 50px; display: grid; place-items: center; color: #356bf0; font-size: 24px; border-radius: 15px; background: #e8f0ff; }
.feature-grid h3 { margin: 28px 0 10px; font-size: 21px; }
.feature-grid p { margin: 0; color: var(--muted); line-height: 1.8; }

.download-section { max-width: none; padding-left: max(30px, calc((100vw - 1120px)/2)); padding-right: max(30px, calc((100vw - 1120px)/2)); background: linear-gradient(135deg, #edf4ff, #f6f0ff 54%, #fff1f8); border-block: 1px solid rgba(80,100,160,.1); }
.download-copy { max-width: 650px; }
.download-copy > p:last-child { color: var(--muted); line-height: 1.8; }
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.download-card { min-height: 135px; padding: 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.76); }
.download-card.featured { border-color: rgba(61,109,240,.25); box-shadow: 0 15px 40px rgba(64,91,164,.09); }
.platform-icon { width: 62px; height: 62px; display: grid; place-items: center; color: white; font-size: 27px; border-radius: 19px; background: linear-gradient(145deg, #303d55, #101828); }
.windows-icon { background: linear-gradient(145deg, #4980fa, #2459d7); }
.download-card h3 { margin: 0 0 7px; font-size: 20px; }
.download-card p { margin: 0; color: var(--muted); font-size: 13px; }
.coming-soon { padding: 8px 12px; color: #6e7b91; font-size: 12px; border-radius: 99px; background: #edf1f7; }
.download-ready { padding: 9px 14px; color: white; font-size: 12px; font-weight: 700; border-radius: 99px; background: linear-gradient(135deg, #326df4, #745fe9); box-shadow: 0 7px 18px rgba(53, 101, 229, .22); }
.download-card.featured { transition: transform .2s ease, box-shadow .2s ease; }
.download-card.featured:hover { transform: translateY(-2px); box-shadow: 0 19px 44px rgba(64,91,164,.15); }
.download-tip { margin: 20px 0 0; color: #8995a8; font-size: 12px; }

.about { display: grid; grid-template-columns: 240px 1fr; gap: 80px; align-items: center; }
.about-mark { width: 220px; height: 220px; display: grid; place-items: center; color: white; font-size: 82px; font-weight: 800; border-radius: 65px; background: linear-gradient(145deg, #276cf3, #725eea 55%, #d36fc2); box-shadow: 0 28px 55px rgba(72,93,200,.25); transform: rotate(-5deg); }
.about > div > p:last-child { max-width: 700px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.9; }

footer { min-height: 120px; padding: 0 clamp(24px, 8vw, 132px); display: flex; align-items: center; justify-content: space-between; color: #8a96aa; border-top: 1px solid var(--line); font-size: 12px; }
.footer-brand { color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: .08em; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 58px; }
  .hero-copy { text-align: center; }
  .hero-description { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .feature-grid { grid-template-columns: 1fr; }
  .download-grid { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; text-align: center; }
  .about-mark { width: 140px; height: 140px; margin: 0 auto; border-radius: 42px; font-size: 54px; }
  .about > div > p:last-child { margin-inline: auto; }
}

@media (max-width: 600px) {
  .site-header { height: 66px; }
  nav a:not([href="#download"]) { display: none; }
  .brand-copy small { display: none; }
  .hero { min-height: auto; padding: 54px 20px 70px; }
  .hero h1 { font-size: 48px; }
  .hero-description { font-size: 16px; }
  .hero-art { min-height: 410px; }
  .player-card { padding: 20px 18px 24px; border-radius: 27px; }
  .record-wrap { height: 220px; }
  .record { width: 195px; height: 195px; }
  .tonearm { right: 60px; height: 142px; }
  .features, .download-section, .about { padding-block: 78px; }
  .download-card { grid-template-columns: auto 1fr; }
  .coming-soon, .download-ready { grid-column: 2; justify-self: start; }
  footer { padding-block: 28px; gap: 18px; flex-direction: column; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .record { animation: none; }
}