:root {
  --beat-line: #56c8ff;
  --beat-second: #8b7cff;
  --beat-envelope: #6ee7b7;
  --beat-ink: #0f172a;
  --beat-muted: #52647a;
  --beat-border: #dbe4ee;
  --beat-soft: #f3f7fb;
  --beat-dark: #07101f;
}

.beats-wrap { width:min(1180px, calc(100% - 42px)); margin:0 auto; }
.beats-copy { width:min(880px, calc(100% - 42px)); margin:0 auto; }
.beats-center { max-width:820px; margin:0 auto 42px; text-align:center; }
.beats-center h2, .beats-copy h2 { color:var(--beat-ink); font-size:clamp(2rem, 4vw, 3.45rem); line-height:1.08; letter-spacing:-.045em; margin:0 0 18px; }
.beats-center p, .beats-copy p { color:var(--beat-muted); font-size:1.06rem; line-height:1.8; }
.beats-eyebrow { color:#0877bd; text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:800; margin-bottom:12px; }
.beats-eyebrow--light { color:#7dd3fc; }

.beats-hero { padding:72px 0 68px; background:radial-gradient(circle at 75% 16%, rgba(45,140,255,.18), transparent 30%), linear-gradient(180deg, #07101f 0%, #0a1628 100%); color:#fff; overflow:hidden; }
.beats-hero__grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(540px,1.1fr); gap:50px; align-items:center; }
.beats-kicker { color:#7dd3fc; font-size:13px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; margin-bottom:18px; }
.beats-hero h1 { font-size:clamp(3rem, 6vw, 5.6rem); line-height:.97; letter-spacing:-.065em; margin:0 0 24px; color:#fff; }
.beats-hero__lead { color:#b9c9da; font-size:1.12rem; line-height:1.8; max-width:700px; }
.beats-hero__lead strong { color:#fff; }
.beats-pills { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.beats-pills span { padding:8px 12px; border:1px solid rgba(125,211,252,.17); background:rgba(255,255,255,.05); border-radius:999px; color:#d5e9f8; font-size:13px; font-weight:650; }

.beat-lab { border:1px solid rgba(148,163,184,.18); background:linear-gradient(180deg, rgba(14,28,48,.9), rgba(5,14,28,.94)); border-radius:30px; padding:25px; box-shadow:0 34px 80px rgba(0,0,0,.34); }
.beat-lab__head { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:18px; }
.beat-lab__head div { display:grid; gap:5px; }
.beat-lab__head small { color:#7e9ab4; font-size:11px; letter-spacing:.12em; font-weight:800; }
.beat-lab__head strong { font-size:1.45rem; color:#fff; }
.beat-audio-button { display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(110,231,183,.28); border-radius:999px; background:rgba(16,185,129,.11); color:#d1fae5; padding:11px 16px; font-weight:800; cursor:pointer; }
.beat-audio-button:hover, .beat-audio-button.is-playing { background:rgba(16,185,129,.19); }
.beat-audio-icon { width:18px; text-align:center; }
#beatCanvas { display:block; width:100%; height:260px; border:1px solid rgba(148,163,184,.12); border-radius:20px; background:rgba(2,8,19,.68); }
.beat-controls { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
.beat-control { display:grid; gap:10px; }
.beat-control > span { display:flex; justify-content:space-between; gap:12px; font-size:13px; color:#c9d7e6; }
.beat-control output { color:#7dd3fc; font-variant-numeric:tabular-nums; }
.beat-control input { width:100%; accent-color:#39aefa; }
.beat-presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.beat-presets button { border:1px solid rgba(148,163,184,.16); background:rgba(255,255,255,.045); color:#aebfd0; border-radius:999px; padding:8px 11px; font-size:12px; cursor:pointer; }
.beat-presets button:hover, .beat-presets button.is-active { color:#fff; border-color:rgba(86,200,255,.38); background:rgba(86,200,255,.12); }
.beat-lab__note { margin:16px 0 0; color:#71869d; font-size:11px; line-height:1.5; }

.beats-section { padding:86px 0; background:#fff; }
.beats-section--soft { background:var(--beat-soft); }
.beats-section--dark { background:var(--beat-dark); color:#fff; }
.beats-section--dark h2 { color:#fff; font-size:clamp(2rem, 4vw, 3.4rem); line-height:1.08; letter-spacing:-.045em; margin:0 0 20px; }
.beats-section--dark p { color:#a8bed2; line-height:1.82; font-size:1.04rem; }
.beats-section--dark a { color:#7dd3fc; }

.beats-formula { margin:36px 0; display:grid; grid-template-columns:.8fr 1.2fr; gap:22px; align-items:stretch; }
.beats-formula > div { border:1px solid var(--beat-border); background:#fff; border-radius:24px; padding:26px; }
.beats-formula small { display:block; color:#789; font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.beats-formula strong { color:var(--beat-ink); font-size:clamp(1.5rem, 3vw, 2.5rem); letter-spacing:-.04em; }
.beats-formula__example { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; color:#66788c; font-weight:650; }
.beats-formula__example span { padding:9px 12px; border-radius:12px; background:#f5f8fb; }
.beats-formula__example strong { color:#0877bd; font-size:1.15rem; }

.beat-state-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.beat-state-card { position:relative; border:1px solid var(--beat-border); border-radius:25px; padding:24px; overflow:hidden; background:#fff; }
.beat-state-card__number { position:absolute; right:18px; top:12px; color:#dce6ee; font-size:2.6rem; font-weight:800; letter-spacing:-.08em; }
.beat-state-card h3 { position:relative; color:var(--beat-ink); font-size:1.2rem; margin:0 0 18px; }
.beat-state-card strong { display:block; color:#0877bd; font-size:.9rem; margin:16px 0 9px; font-variant-numeric:tabular-nums; }
.beat-state-card p { margin:0; color:#64748b; line-height:1.65; font-size:.92rem; }
.mini-wave { height:72px; border-radius:16px; background-color:#07101f; position:relative; overflow:hidden; }
.mini-wave::before { content:""; position:absolute; inset:13px 8px; background-repeat:repeat-x; background-size:86px 46px; opacity:.9; }
.mini-wave--steady::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='46' viewBox='0 0 86 46'%3E%3Cpath d='M0 23 C10 3 20 3 30 23 S50 43 60 23 S80 3 86 18' fill='none' stroke='%2356c8ff' stroke-width='3'/%3E%3C/svg%3E"); }
.mini-wave--slow::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='46' viewBox='0 0 86 46'%3E%3Cpath d='M0 23 C9 7 18 7 27 23 S45 39 54 23 S72 7 86 24' fill='none' stroke='%236ee7b7' stroke-width='3'/%3E%3C/svg%3E"); animation:miniMove 5s linear infinite; }
.mini-wave--medium::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='46' viewBox='0 0 86 46'%3E%3Cpath d='M0 23 C8 5 16 5 24 23 S40 41 48 23 S64 5 72 23 S84 36 86 29' fill='none' stroke='%238b7cff' stroke-width='3'/%3E%3C/svg%3E"); animation:miniMove 2.7s linear infinite; }
.mini-wave--fast::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='46' viewBox='0 0 86 46'%3E%3Cpath d='M0 23 C5 5 10 5 15 23 S25 41 30 23 S40 5 45 23 S55 41 60 23 S70 5 75 23 S84 38 86 31' fill='none' stroke='%23fb7185' stroke-width='3'/%3E%3C/svg%3E"); animation:miniMove 1.3s linear infinite; }
@keyframes miniMove { to { background-position:86px 0; } }

.beats-split { display:grid; grid-template-columns:1fr 1fr; gap:68px; align-items:center; }
.beats-split--reverse > :first-child { order:2; }
.partials-visual { border:1px solid rgba(148,163,184,.17); background:rgba(255,255,255,.045); border-radius:28px; padding:28px; }
.partials-visual__labels { display:flex; justify-content:space-between; color:#7e9ab4; font-size:11px; font-weight:800; letter-spacing:.1em; margin-bottom:18px; }
.partial-row { position:relative; height:72px; border-top:1px solid rgba(148,163,184,.11); }
.partial-row i { position:absolute; top:22px; left:var(--x); width:3px; height:28px; background:#56c8ff; border-radius:9px; box-shadow:0 0 18px rgba(86,200,255,.4); }
.partial-row i.partial-right { background:#8b7cff; }
.partial-tag { position:absolute; left:0; top:29px; color:#6eaad1; font-size:11px; font-weight:800; }
.partial-tag--right { left:auto; right:0; color:#a69cff; }
.partial-row.is-match { background:linear-gradient(90deg, transparent, rgba(110,231,183,.055), transparent); }
.partial-row.is-match b { position:absolute; left:50%; transform:translateX(-50%); top:6px; color:#6ee7b7; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.partials-visual > p { margin:18px 0 0; font-size:12px; color:#71869d; }

.interval-table-wrap { overflow-x:auto; margin:34px 0; border:1px solid var(--beat-border); border-radius:22px; }
.interval-table { width:100%; border-collapse:collapse; min-width:720px; background:#fff; }
.interval-table th, .interval-table td { padding:18px 20px; text-align:left; border-bottom:1px solid #e7edf3; vertical-align:top; }
.interval-table th { background:#f6f9fc; color:#506176; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.interval-table td { color:#52647a; line-height:1.55; }
.interval-table td:first-child { color:var(--beat-ink); font-weight:800; white-space:nowrap; }
.interval-table tr:last-child td { border-bottom:0; }
.beats-callout { border-left:4px solid #38bdf8; padding:18px 22px; background:#eef9ff; border-radius:0 18px 18px 0; }

.beat-myth-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.beat-myth-grid article { background:#fff; border:1px solid var(--beat-border); border-radius:25px; padding:28px; }
.beat-myth-grid span { color:#0877bd; font-size:11px; font-weight:800; letter-spacing:.11em; }
.beat-myth-grid h3 { color:var(--beat-ink); font-size:1.25rem; margin:12px 0 10px; }
.beat-myth-grid p { color:#64748b; line-height:1.68; margin:0; }

.inharmonic-graphic { border:1px solid rgba(148,163,184,.16); background:rgba(255,255,255,.04); border-radius:28px; padding:30px; display:grid; gap:30px; }
.inharmonic-row strong { display:block; color:#fff; font-size:14px; margin-bottom:16px; }
.inharmonic-row small { display:block; color:#71869d; margin-top:10px; font-size:11px; }
.inharmonic-line { height:58px; position:relative; border-bottom:2px solid rgba(148,163,184,.21); }
.inharmonic-line i { position:absolute; bottom:-7px; width:13px; height:13px; background:#56c8ff; border-radius:50%; box-shadow:0 0 20px rgba(86,200,255,.35); }
.inharmonic-line--real i { background:#6ee7b7; box-shadow:0 0 20px rgba(110,231,183,.35); }

.beats-related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px; }
.beats-related-card { text-decoration:none!important; color:inherit!important; border:1px solid var(--beat-border); background:#fff; border-radius:24px; padding:25px; transition:.18s ease; }
.beats-related-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(15,23,42,.08); border-color:#b6d8ed; }
.beats-related-card span { color:#0877bd; font-size:11px; font-weight:800; letter-spacing:.08em; }
.beats-related-card h3 { color:var(--beat-ink); margin:12px 0 8px; font-size:1.18rem; }
.beats-related-card p { color:#64748b; line-height:1.6; margin:0; font-size:.92rem; }

.beats-faq { max-width:900px; margin:32px auto 0; display:grid; gap:12px; }
.beats-faq details { background:#fff; border:1px solid var(--beat-border); border-radius:18px; padding:0 20px; }
.beats-faq summary { cursor:pointer; list-style:none; color:var(--beat-ink); font-weight:750; padding:20px 34px 20px 0; position:relative; }
.beats-faq summary::-webkit-details-marker { display:none; }
.beats-faq summary::after { content:"+"; position:absolute; right:2px; top:16px; font-size:24px; color:#5594bb; }
.beats-faq details[open] summary::after { content:"−"; }
.beats-faq details p { color:#607286; line-height:1.7; padding:0 0 20px; margin:0; }
.beats-source-note { max-width:900px; margin:30px auto 0; color:#7b8b9d; font-size:12px; line-height:1.7; }
.beats-source-note a { color:#0877bd; }

.beats-section--cta { background:linear-gradient(180deg,#07101f,#040b15); padding:90px 0; }
.beats-cta { max-width:900px; margin:0 auto; text-align:center; padding:0 22px; }
.beats-cta h2 { color:#fff; font-size:clamp(2.5rem,5vw,4.6rem); line-height:1; letter-spacing:-.055em; margin:0 0 20px; }
.beats-cta p { color:#9db3c8; font-size:1.08rem; line-height:1.75; margin:0 auto 30px; max-width:720px; }

@media (max-width:1050px) {
  .beats-hero__grid { grid-template-columns:1fr; }
  .beat-lab { max-width:800px; }
  .beat-state-grid, .beats-related-grid { grid-template-columns:repeat(2,1fr); }
  .beats-split { gap:40px; }
}

@media (max-width:760px) {
  .beats-wrap, .beats-copy { width:min(100% - 28px, 1180px); }
  .beats-hero { padding-top:52px; }
  .beats-hero h1 { font-size:clamp(2.8rem,14vw,4.6rem); }
  .beat-lab { padding:18px; border-radius:24px; }
  .beat-lab__head { align-items:flex-start; flex-direction:column; }
  #beatCanvas { height:220px; }
  .beat-controls, .beats-formula, .beats-split, .beat-myth-grid { grid-template-columns:1fr; }
  .beats-split--reverse > :first-child { order:initial; }
  .beat-state-grid, .beats-related-grid { grid-template-columns:1fr; }
  .beats-section { padding:64px 0; }
  .beats-formula__example { justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .mini-wave::before { animation:none!important; }
  .beat-state-card, .beats-related-card { transition:none; }
}