/* OLINoX — WAVES: one page, three left-column views. Edit width values in :root. */
:root {
  --bg: #030305;
  --ink: rgba(255,255,255,.94);
  --muted: rgba(204,207,222,.69);
  --dim: rgba(204,207,222,.42);
  --line: rgba(255,255,255,.11);
  --purple: #a78aff;
  --purple-light: #c1b1ff;
  --purple-dark: #7657e9;
  --content-width: 1320px; /* MAIN WIDTH CONTROL: keep the site centered and not full width */
  --left-width: 500px;    /* Width of the artwork / detail card on desktop */
}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0; background:radial-gradient(ellipse at 48% 38%,rgba(87,43,165,.11),transparent 55%),#030305;
  color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}
button,a { -webkit-tap-highlight-color:transparent; }
button {font:inherit;cursor:pointer}
a {color:inherit;text-decoration:none}
a:hover {color:#fff}
:focus-visible {outline:2px solid #b4a4ff;outline-offset:3px}
[hidden] {display:none!important}
.site {min-height:100vh;display:flex;flex-direction:column}
.topbar {height:70px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,3.4vw,52px);border-bottom:1px solid var(--line);background:rgba(2,2,5,.6)}
.brand-block {display:flex;flex-direction:column;gap:3px}
.brand {font-weight:650;font-size:18px;line-height:1;color:#fff;display:inline-flex;align-items:center;gap:7px}
.brand-icon {font-size:14px;color:#fff}
.tagline {font-size:12px;letter-spacing:.025em;color:var(--muted);padding-left:19px}
.top-nav a {font-size:12px;color:var(--muted)}
.main {flex:1;display:flex;justify-content:center;align-items:center;padding:clamp(38px,6vw,88px) 30px 75px}
.layout {width:100%;max-width:var(--content-width);display:grid;grid-template-columns:minmax(0,var(--left-width)) minmax(0,1fr);
  align-items:start;gap:clamp(40px,4.2vw,64px);margin:0 auto}
.left-column {min-width:0}
/* ALBUM ART (canvas overlay remains interactive only visually; pointer events none) */
.artwork-view {padding-top:40px}
.wave-cover {position:relative;width:100%;aspect-ratio:1;overflow:hidden;border:1px solid rgba(255,255,255,.17);
  border-radius:18px;background:#090514;box-shadow:0 24px 70px rgba(0,0,0,.42)}
.cover-fallback {position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:17%;
  background:radial-gradient(ellipse at 48% 50%,rgba(137,95,249,.2),transparent 43%),
  radial-gradient(ellipse at 70% 60%,rgba(68,62,167,.12),transparent 60%),#090611}
.cover-fallback span {font-size:19px;font-weight:250;letter-spacing:.55em;color:rgba(255,255,255,.73);margin-left:.55em}
.wave-cover img {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wave-cover img.is-missing {display:none}
#waveCanvas {position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.album-meta {margin-top:27px;font-size:13px;color:var(--muted);letter-spacing:.03em}
.album-meta span {color:var(--dim);margin:0 5px}
.album-description {font-size:14px;line-height:1.85;color:var(--muted);max-width:440px;margin:23px 0 0}
/* TRACKLIST */
.tracklist-panel {min-width:0}
.section-title {margin:0 0 10px;letter-spacing:.36em;font-size:15px;font-weight:450;color:#c5c2d6}
.section-description {font-size:13px;font-weight:350;font-style:italic;color:var(--muted);line-height:1.6;margin:0 0 24px}
.tracklist {list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.track {display:grid;grid-template-columns:33px minmax(0,1fr) 37px 34px 112px 153px;gap:12px;
  align-items:center;min-height:51px;padding:7px 12px;margin:0 -12px;
  border:1px solid transparent;border-bottom-color:var(--line);border-radius:10px;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.track:hover,.track:focus-within,.track.is-selected {border-color:rgba(151,118,255,.66);
  background:rgba(124,83,213,.075);box-shadow:0 0 25px rgba(114,71,224,.055)}
.track-number {color:var(--purple);font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.035em}
.track-name {font-size:13px;line-height:1.4;font-weight:400;white-space:normal;overflow-wrap:anywhere;color:#f3f2f7}
.track-duration {color:var(--muted);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.play-btn {height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:transparent;color:#f1efff;transition:.2s}
.play-btn svg {height:15px;width:15px;fill:currentColor}
.play-btn:hover,.play-btn.is-playing {border-color:var(--purple-light);background:rgba(159,123,255,.16)}
.track-division {height:24px;width:1px;background:rgba(255,255,255,.18);margin:0 5px 0 8px}
.detail-action {border:0;background:transparent;color:rgba(244,241,251,.82);padding:7px 3px;
  display:flex;justify-content:center;align-items:center;gap:8px;font-size:11px;white-space:nowrap;transition:color .2s}
.detail-action svg {width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.detail-action:hover,.detail-action.is-current {color:var(--purple-light)}
.player-status {min-height:19px;margin:12px 0 0;color:#c4b7ff;font-size:12px}
/* LEFT PANEL when selected */
.detail-view {border-radius:20px;border:1px solid rgba(157,110,219,.42);padding:17px 24px 17px;
  background:linear-gradient(135deg,rgba(80,39,121,.085),rgba(20,14,26,.18));
  box-shadow:0 12px 46px rgba(0,0,0,.16)}
.detail-topline {display:flex;justify-content:flex-end;min-height:22px;margin-bottom:3px}
.back-art {border:0;background:transparent;color:var(--dim);font-size:11px;padding:0 2px;letter-spacing:.025em}
.back-art:hover {color:var(--purple-light)}
.detail-tabs {display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(255,255,255,.16)}
.detail-tab {appearance:none;border:0;border-bottom:3px solid transparent;background:transparent;
  min-height:52px;color:rgba(246,241,255,.73);font-size:12px;display:flex;align-items:center;
  justify-content:center;gap:11px;white-space:nowrap;padding:5px 7px;letter-spacing:.005em}
.detail-tab svg {width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.detail-tab:hover {color:#fff}
.detail-tab[aria-selected="true"] {color:#fff;font-weight:550;border-bottom-color:var(--purple);
  background:linear-gradient(180deg,rgba(144,80,220,.08),transparent)}
.detail-scroll {max-height:590px;min-height:465px;overflow:auto;padding:27px 10px 8px 5px;scrollbar-width:thin;scrollbar-color:rgba(145,115,215,.45) transparent}
.song-heading {display:flex;align-items:baseline;gap:14px;margin:0 0 27px}
.song-number {font-size:27px;font-weight:350;color:var(--purple)}
.song-title {font-size:26px;letter-spacing:-.018em;font-weight:390;line-height:1.2;margin:0}
.lyrics-group {margin:0 0 25px}
.lyrics-label {color:var(--purple-light);font-size:14px;margin:0 0 7px}
.lyrics-lines {margin:0;white-space:pre-line;color:rgba(255,255,255,.89);line-height:1.72;font-weight:350;font-size:14px}
.empty-message {color:var(--muted);font-size:13px;line-height:1.7}
/* Behind the Scenes */
.behind-block {padding:15px 0;border-top:1px solid var(--line)}
.behind-block:first-of-type {border-top:0;padding-top:0}
.mini-heading {color:rgba(245,244,249,.84);font-size:11px;letter-spacing:.17em;font-weight:580;margin:0 0 12px}
.idea-copy {font-size:14px;line-height:1.65;color:rgba(245,243,249,.92);padding-left:15px;
  border-left:2px solid var(--purple);margin:0 0 9px}
.idea-explainer {font-size:12px;line-height:1.7;color:var(--muted);margin:7px 0 0 17px}
.ai-grid {display:grid;gap:9px}
.ai-row {
  display: grid;
  grid-template-columns: 160px minmax(0,1fr) 38px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.ai-label {color:#ededf1;line-height:1.4; white-space: nowrap;}
.ai-track {height:7px;border-radius:10px;background:rgba(255,255,255,.19);overflow:hidden}
.ai-fill {height:100%;border-radius:10px;background:linear-gradient(90deg,#b779ff,#9c91ff)}
.ai-number {font-size:12px;text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.ai-model {color:var(--muted);font-size:11px;margin:4px 0 0 84px}
.method-table {width:100%;border-collapse:collapse;text-align:left;table-layout:fixed;font-size:11px}
.method-table col:nth-child(1) {width:22%}
.method-table col:nth-child(2) {width:43%}
.method-table col:nth-child(3) {width:35%}
.method-table th {font-size:10px;font-weight:500;color:var(--dim);letter-spacing:.08em;padding:0 5px 10px 0;text-transform:uppercase}
.method-table td {border-top:1px solid rgba(255,255,255,.09);padding:8px 5px 8px 0;vertical-align:top;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.method-table td:first-child {color:#f5f4fb}
.method-table td:last-child {color:#c9bedf}
.mastering-copy {font-size:12px;line-height:1.65;color:rgba(245,244,249,.85);margin:0}
.mastering-steps {font-size:11px;line-height:1.7;color:var(--muted);margin:4px 0 0}
.demo-note {display:inline-block;font-size:10px;color:#d7bdff;background:rgba(157,104,223,.11);border:1px solid rgba(157,104,223,.26);
  border-radius:9px;padding:4px 7px;margin:0 0 12px}
.detail-pager {display:flex;justify-content:space-between;gap:10px;margin:10px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.pager-link {border:0;background:transparent;color:rgba(250,246,255,.83);font-size:11px;text-align:left;padding:7px 0;max-width:50%;line-height:1.5}
.pager-link:last-child {text-align:right}
.pager-link:hover {color:var(--purple-light)}
.pager-link:disabled {visibility:hidden}
/* Footer */
.footer {border-top:1px solid var(--line);min-height:64px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px clamp(20px,3.4vw,52px);color:var(--muted);font-size:12px}
.footer-links {display:flex;flex-wrap:wrap;align-items:center;gap:15px;color:var(--muted);font-size:11px;letter-spacing:.02em}
.footer-links span {opacity:.55}
/* Responsive layout: a single column, switching left details above the tracklist */
@media(max-width:1150px){
  :root{--left-width:420px}
  .layout {gap:33px}
  .main {padding-left:25px;padding-right:25px}
  .track {grid-template-columns:29px minmax(0,1fr) 36px 34px;gap:9px;min-height:66px}
  .track-division {display:none}
  .detail-action {font-size:10px}
  .track .detail-action {grid-row:2}
  .track .lyrics-action {grid-column:2/3;justify-content:flex-start}
  .track .behind-action {grid-column:3/5;justify-content:flex-start}
}
@media(max-width:820px){
  .layout{max-width:570px;grid-template-columns:minmax(0,1fr);gap:55px}
  .artwork-view {padding-top:0}
  .main {align-items:flex-start;padding:44px 22px 60px}
  /* Native page scroll is clearer than a nested scroll panel on tablets/phones. */
  .detail-scroll {max-height:none;min-height:0;overflow:visible}
  .track {grid-template-columns:30px minmax(0,1fr) 40px 34px 112px 145px;min-height:54px}
  .track-division {display:block}
  .track .detail-action {grid-row:auto}
  .track .lyrics-action,.track .behind-action {grid-column:auto}
}
@media(max-width:680px){
  .topbar{padding:0 18px;height:66px}
  .brand{font-size:16px}.tagline{font-size:10px}
  .main{padding:30px 18px 50px}
  .layout{gap:42px}
  .detail-view{padding:12px 15px 14px;border-radius:15px}
  .detail-tab {font-size:11px;gap:7px}
  .detail-tab svg{width:16px;height:16px}
  .detail-scroll {padding:22px 4px 5px;min-height:0;max-height:none;overflow:visible}
  .song-title {font-size:23px}.song-number{font-size:24px}
  .track {grid-template-columns:28px minmax(0,1fr) 39px 33px;gap:6px 10px;min-height:67px;padding:9px 8px;margin:0 -8px}
  .track-division {display:none}
  .track .detail-action {grid-row:2}
  .track .lyrics-action{grid-column:2/3;justify-content:flex-start}
  .track .behind-action{grid-column:3/5;justify-content:flex-end}
  .detail-action{font-size:11px}
  .footer {align-items:flex-start;flex-direction:column;gap:7px;padding:18px}
  .footer-links{gap:10px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}