/* ============================================================
   CALMING MUSIC & RELAXATION — Design System  (LOCKED v1)
   "Frequency × Drift"  ·  shared across all pages
   ============================================================ */
:root{
  --abyss:#060910; --deep:#0a1018; --deep-2:#0d1622;
  --tide:#0e3138; --indigo:#16213b;
  --aqua:#6fe0d0; --aqua-soft:#9bece0; --gold:#e3c08a;
  --mist:#e8edf2; --haze:#8a98a6; --haze-2:#5d6b78;
  --line:rgba(140,170,185,.13); --glass:rgba(16,28,40,.55);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'Spline Sans Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{background:var(--abyss);color:var(--mist);font-family:var(--sans);font-weight:300;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;letter-spacing:.005em}
::selection{background:rgba(111,224,208,.28);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--abyss)}
::-webkit-scrollbar-thumb{background:#1a2735;border-radius:20px;border:2px solid var(--abyss)}
::-webkit-scrollbar-thumb:hover{background:#26384a}

/* type */
.eyebrow{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--aqua);opacity:.85}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.015em}
.display{font-size:clamp(2.9rem,8.2vw,6.6rem);font-weight:340;letter-spacing:-.03em;line-height:.98}
.display em{font-style:italic;color:var(--aqua-soft)}
h2.section-title{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:360}
h2.section-title em{font-style:italic;color:var(--gold)}
.lede{font-size:clamp(1.05rem,1.7vw,1.32rem);color:#c4ced8;font-weight:300;line-height:1.6}
p{color:#bcc7d2}.muted{color:var(--haze)}

/* layout */
.wrap{position:relative;z-index:5}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative;padding:clamp(80px,12vh,150px) 0}
.section-head{max-width:42rem;margin-bottom:54px}
.section-head .eyebrow{display:block;margin-bottom:18px}
.section-head p{margin-top:18px}

/* ===== background ===== */
#bg-canvas{position:fixed;inset:0;z-index:0;width:100%;height:100%;
  background:radial-gradient(120% 80% at 18% 8%,rgba(22,33,59,.55),transparent 60%),
    radial-gradient(110% 90% at 88% 14%,rgba(14,49,56,.6),transparent 55%),
    radial-gradient(120% 100% at 86% 96%,rgba(227,192,138,.10),transparent 55%),
    radial-gradient(140% 120% at 50% 120%,rgba(14,49,56,.4),transparent 60%),var(--abyss)}
.bg-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 240px 60px rgba(0,0,0,.6)}
#cursor-glow{position:fixed;top:0;left:0;width:380px;height:380px;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(circle,rgba(111,224,208,.10),transparent 65%);transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;mix-blend-mode:screen}

/* ===== loader ===== */
#loader{position:fixed;inset:0;z-index:200;background:var(--abyss);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;transition:opacity 1s var(--ease),visibility 1s var(--ease)}
#loader.done{opacity:0;visibility:hidden}
.loader-mark{width:96px;height:96px}
.loader-mark circle{fill:none;stroke:var(--aqua);stroke-width:2.2;stroke-dasharray:282;stroke-dashoffset:282;opacity:.9;animation:enso 2.1s var(--ease-out) forwards;transform-origin:center;transform:rotate(-90deg)}
.loader-mark path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;animation:wave 1.6s .5s var(--ease-out) forwards}
@keyframes enso{to{stroke-dashoffset:14}}@keyframes wave{to{stroke-dashoffset:0}}
.loader-word{font-family:var(--mono);font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;color:var(--haze);opacity:0;animation:fadein .9s 1s forwards}
.loader-bar{width:160px;height:1px;background:rgba(140,170,185,.15);overflow:hidden;border-radius:2px}
.loader-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--aqua),var(--gold));animation:fill 2.1s var(--ease) forwards}
@keyframes fill{to{width:100%}}@keyframes fadein{to{opacity:1}}
.loader-skip{position:absolute;bottom:34px;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--haze-2);background:none;border:none;cursor:pointer;opacity:0;animation:fadein .6s 1.4s forwards;transition:color .3s}
.loader-skip:hover{color:var(--aqua)}

/* ===== nav ===== */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,4vw,46px);transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent}
header.nav.scrolled{background:rgba(6,9,16,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer}
.brand svg{width:30px;height:30px;flex:none}
.brand-name{display:flex;flex-direction:column;line-height:1.05}
.brand-name b{font-family:var(--serif);font-weight:500;font-size:1.02rem}
.brand-name span{font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--haze)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.9rem;color:#c0cad4;position:relative;transition:color .3s;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--aqua);transition:width .4s var(--ease)}
.nav-links a:hover{color:#fff}.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:14px}
.sound-toggle{display:flex;align-items:center;gap:9px;background:rgba(140,170,185,.07);border:1px solid var(--line);border-radius:40px;padding:8px 15px;cursor:pointer;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--haze);transition:all .35s var(--ease)}
.sound-toggle:hover{border-color:rgba(111,224,208,.4);color:var(--mist)}
.sound-toggle.on{color:var(--aqua);border-color:rgba(111,224,208,.45)}
.eq{display:flex;align-items:flex-end;gap:2px;height:13px}
.eq i{width:2.5px;height:4px;background:currentColor;border-radius:2px;transition:height .2s}
.sound-toggle.on .eq i{animation:eqbar 1s infinite ease-in-out}
.sound-toggle.on .eq i:nth-child(2){animation-delay:.2s}.sound-toggle.on .eq i:nth-child(3){animation-delay:.4s}.sound-toggle.on .eq i:nth-child(4){animation-delay:.1s}
@keyframes eqbar{0%,100%{height:4px}50%{height:13px}}
.nav-burger{display:none;background:none;border:none;color:var(--mist);cursor:pointer;flex-direction:column;gap:5px}
.nav-burger span{width:22px;height:1.6px;background:currentColor;display:block;transition:.3s}

/* ===== buttons ===== */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:44px;font-size:.94rem;font-weight:400;cursor:pointer;border:1px solid transparent;transition:transform .4s var(--ease),box-shadow .4s,background .4s;will-change:transform;font-family:var(--sans)}
.btn-primary{background:linear-gradient(180deg,#7fe9da,#54c6b6);color:#04211d;font-weight:500;box-shadow:0 12px 40px -12px rgba(111,224,208,.6),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary:hover{box-shadow:0 20px 60px -14px rgba(111,224,208,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ghost{background:rgba(140,170,185,.06);border-color:var(--line);color:var(--mist)}
.btn-ghost:hover{border-color:rgba(111,224,208,.4);background:rgba(111,224,208,.07)}
.btn .arrow{transition:transform .4s var(--ease)}.btn:hover .arrow{transform:translateX(4px)}

/* ===== hero ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:60px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-copy .eyebrow{display:inline-block;margin-bottom:24px;opacity:0;transform:translateY(14px);animation:rise .9s .2s var(--ease-out) forwards}
.hero-copy h1{margin-bottom:26px}
.hero-copy h1 .l1,.hero-copy h1 .l2{display:block;opacity:0;transform:translateY(22px)}
.hero-copy h1 .l1{animation:rise 1s .35s var(--ease-out) forwards}
.hero-copy h1 .l2{animation:rise 1s .5s var(--ease-out) forwards}
.hero-copy .lede{max-width:30rem;margin-bottom:36px;opacity:0;transform:translateY(18px);animation:rise 1s .68s var(--ease-out) forwards}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;opacity:0;transform:translateY(18px);animation:rise 1s .82s var(--ease-out) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ===== instrument ===== */
.instrument{position:relative;border-radius:26px;padding:30px 30px 26px;background:linear-gradient(165deg,rgba(18,33,48,.72),rgba(9,15,24,.66));border:1px solid rgba(140,170,185,.16);box-shadow:0 40px 100px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transform:translateY(28px) scale(.98);animation:rise 1.1s .6s var(--ease-out) forwards;overflow:hidden}
.instrument::before{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;background:radial-gradient(120% 80% at 50% 0%,rgba(111,224,208,.10),transparent 55%)}
.inst-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;position:relative}
.inst-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--haze)}
.inst-state{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--aqua);text-transform:uppercase}
.inst-canvas{width:100%;height:150px;display:block;cursor:grab}.inst-canvas:active{cursor:grabbing}
.inst-readout{display:flex;align-items:flex-end;justify-content:space-between;margin-top:6px;position:relative}
.bpm{display:flex;align-items:baseline;gap:9px}
.bpm .num{font-family:var(--mono);font-weight:500;font-size:3.1rem;color:var(--mist);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:color .6s}
.bpm .unit{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--haze)}
.inst-hint{font-family:var(--mono);font-size:.66rem;color:var(--haze-2);letter-spacing:.06em;text-align:right;max-width:11rem}
.breath-ring{position:absolute;right:26px;top:64px;width:54px;height:54px;border-radius:50%;border:1px solid rgba(111,224,208,.5);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua);animation:breathe 11s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{transform:scale(.78);opacity:.5}45%,55%{transform:scale(1.15);opacity:1}}
.resting-badge{position:absolute;left:30px;bottom:84px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua);background:rgba(111,224,208,.08);border:1px solid rgba(111,224,208,.3);border-radius:30px;padding:5px 12px;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s;pointer-events:none}
.resting-badge.show{opacity:1;transform:none}
.scroll-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--haze-2);display:flex;flex-direction:column;align-items:center;gap:9px;opacity:0;animation:fadein 1s 1.4s forwards}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(var(--aqua),transparent);animation:scrolldrop 2.4s infinite}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ===== CALM PICKER (signature) ===== */
.picker-wrap{position:relative}
.picker{position:relative;border-radius:28px;padding:clamp(30px,4vw,52px);overflow:hidden;background:linear-gradient(165deg,rgba(18,33,48,.7),rgba(9,15,24,.74));border:1px solid rgba(140,170,185,.16);box-shadow:0 50px 110px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05)}
.picker::before{content:"";position:absolute;left:50%;top:-50%;width:120%;height:120%;transform:translateX(-50%);background:radial-gradient(45% 40% at 50% 50%,rgba(111,224,208,.10),transparent 70%);pointer-events:none}
.picker-step{position:relative}
.picker h3{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:6px}
.picker .psub{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua);margin-bottom:24px;display:block}
.picker-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.popt{position:relative;text-align:left;background:rgba(6,9,16,.5);border:1px solid var(--line);border-radius:18px;padding:22px 20px;cursor:pointer;color:var(--mist);transition:transform .45s var(--ease),border-color .4s,background .4s}
.popt .pi{width:30px;height:30px;color:var(--aqua);margin-bottom:14px}
.popt b{font-family:var(--serif);font-weight:500;font-size:1.18rem;display:block;margin-bottom:4px}
.popt span{font-size:.84rem;color:var(--haze)}
.popt:hover{transform:translateY(-5px);border-color:rgba(111,224,208,.4);background:rgba(111,224,208,.05)}
.picker-result{position:relative;display:none;animation:rise .8s var(--ease-out)}
.picker-result.show{display:block}
.pr-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.pr-tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pr-title{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:10px}
.pr-body{max-width:46rem;margin-bottom:22px}
.pr-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua-soft);background:rgba(111,224,208,.08);border:1px solid rgba(111,224,208,.2);border-radius:30px;padding:6px 13px}
.pr-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.picker-reset{background:none;border:none;color:var(--haze);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .3s}
.picker-reset:hover{color:var(--aqua)}

/* ===== science cards ===== */
.science{background:linear-gradient(180deg,transparent,rgba(10,16,24,.5),transparent)}
.sci-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.sci-card{position:relative;border-radius:20px;padding:32px 30px;background:linear-gradient(165deg,rgba(15,26,38,.6),rgba(8,13,21,.5));border:1px solid var(--line);overflow:hidden;box-shadow:0 30px 70px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .6s var(--ease),border-color .5s}
.sci-card .figure{font-family:var(--serif);font-size:clamp(2.4rem,4.5vw,3.3rem);font-weight:340;color:var(--aqua);line-height:1;letter-spacing:-.02em;margin-bottom:14px}
.sci-card .figure small{font-size:1.1rem;color:var(--haze);font-family:var(--mono);font-weight:400}
.sci-card h3{font-size:1.32rem;margin-bottom:10px;color:var(--mist)}
.sci-card p{font-size:.96rem}
.sci-card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(111,224,208,.5),transparent);opacity:0;transition:opacity .5s}
.sci-card:hover{transform:translateY(-6px);border-color:rgba(111,224,208,.25)}.sci-card:hover::after{opacity:1}
.disclaimer{margin-top:28px;font-size:.82rem;color:var(--haze-2);font-style:italic}

/* ===== ad band ===== */
.ad-band{padding:40px 0}
.ad-slot{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.ad-inner{border:1px dashed rgba(140,170,185,.22);border-radius:16px;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(10,16,24,.35);text-align:center}
.ad-inner .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--haze-2)}
.ad-inner .note{font-size:.78rem;color:var(--haze-2);max-width:30rem;padding:0 16px}

/* ===== guides grid ===== */
.guides-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.guide-card{position:relative;border-radius:20px;padding:30px 26px;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;overflow:hidden;background:linear-gradient(180deg,rgba(13,22,34,.5),rgba(8,13,21,.7));border:1px solid var(--line);transition:transform .6s var(--ease),border-color .5s,box-shadow .6s;transform-style:preserve-3d;will-change:transform;box-shadow:0 30px 70px -36px rgba(0,0,0,.7)}
.guide-card .gicon{position:absolute;top:26px;left:26px;width:42px;height:42px;color:var(--aqua);opacity:.85}
.guide-card .gnum{position:absolute;top:30px;right:28px;font-family:var(--mono);font-size:.66rem;color:var(--haze-2);letter-spacing:.1em}
.guide-card h3{font-size:1.46rem;margin-bottom:8px}
.guide-card p{font-size:.9rem;color:var(--haze)}
.guide-card .go{margin-top:16px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);display:flex;align-items:center;gap:7px;transition:.4s var(--ease);opacity:.85}
.guide-card:hover{transform:translateY(-8px);border-color:rgba(111,224,208,.3);box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(111,224,208,.08)}
.guide-card:hover .go{gap:12px;opacity:1}
.guide-card .glow{position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none;background:radial-gradient(80% 60% at 50% 100%,rgba(111,224,208,.14),transparent 70%)}
.guide-card:hover .glow{opacity:1}

/* ===== genres ===== */
.genres{background:linear-gradient(180deg,transparent,rgba(10,16,24,.45),transparent)}
.genre-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.genre{padding:30px 26px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);position:relative;transition:background .5s var(--ease)}
.genre:nth-child(3n){border-right:none}
.genre .gk{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.genre .gk .idx{font-family:var(--mono);font-size:.7rem;color:var(--aqua);letter-spacing:.1em}
.genre h3{font-size:1.28rem}.genre p{font-size:.9rem;color:var(--haze)}
.genre::before{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:var(--aqua);transition:width .5s var(--ease)}
.genre:hover{background:rgba(111,224,208,.035)}.genre:hover::before{width:100%}

/* ===== network ===== */
.net-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:46px}
.net-group-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:42px 0 22px;display:flex;align-items:center;gap:14px}
.net-group-label::after{content:"";flex:1;height:1px;background:var(--line)}
.net-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.net-card{position:relative;border-radius:18px;padding:26px;overflow:hidden;cursor:pointer;background:linear-gradient(165deg,rgba(14,24,36,.6),rgba(8,13,21,.6));border:1px solid var(--line);transition:transform .55s var(--ease),border-color .5s,box-shadow .55s;box-shadow:0 26px 60px -36px rgba(0,0,0,.7)}
.net-card .badge{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border-radius:30px;display:inline-block;margin-bottom:18px}
.badge-own{color:var(--aqua);background:rgba(111,224,208,.1);border:1px solid rgba(111,224,208,.25)}
.badge-fav{color:var(--gold);background:rgba(227,192,138,.08);border:1px solid rgba(227,192,138,.22)}
.net-card h3{font-size:1.3rem;margin-bottom:8px}
.net-card p{font-size:.9rem;color:var(--haze);min-height:3.4em}
.net-card .visit{margin-top:18px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#c4ced8;display:flex;align-items:center;gap:8px;transition:.4s var(--ease)}
.net-card:hover{transform:translateY(-6px);border-color:rgba(111,224,208,.28);box-shadow:0 44px 80px -40px rgba(0,0,0,.85)}
.net-card:hover .visit{gap:13px;color:var(--aqua)}
.net-card.placeholder{border-style:dashed;border-color:rgba(111,224,208,.3)}

/* ===== capture ===== */
.capture-inner{position:relative;border-radius:28px;padding:clamp(40px,6vw,72px);text-align:center;overflow:hidden;background:linear-gradient(165deg,rgba(18,33,48,.72),rgba(9,15,24,.78));border:1px solid rgba(140,170,185,.16);box-shadow:0 50px 110px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05)}
.capture-inner::before{content:"";position:absolute;left:50%;top:-40%;width:120%;height:120%;transform:translateX(-50%);background:radial-gradient(50% 40% at 50% 50%,rgba(111,224,208,.12),transparent 70%);pointer-events:none}
.capture h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:16px;position:relative}
.capture .lede{max-width:34rem;margin:0 auto 32px;position:relative}
.cap-form{display:flex;gap:12px;max-width:480px;margin:0 auto;position:relative;flex-wrap:wrap;justify-content:center}
.cap-form input{flex:1;min-width:240px;background:rgba(6,9,16,.6);border:1px solid var(--line);border-radius:42px;padding:15px 22px;color:var(--mist);font-family:var(--sans);font-size:.95rem;transition:border-color .4s}
.cap-form input::placeholder{color:var(--haze-2)}
.cap-form input:focus{outline:none;border-color:rgba(111,224,208,.5)}
.cap-note{margin-top:16px;font-size:.78rem;color:var(--haze-2);position:relative}

/* ===== faq ===== */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;color:var(--mist);font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:360;padding:26px 50px 26px 0;position:relative;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq-q .plus{position:relative;width:16px;height:16px;flex:none}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--aqua);transition:transform .4s var(--ease)}
.faq-q .plus::before{left:0;top:7px;width:16px;height:1.6px}
.faq-q .plus::after{left:7px;top:0;width:1.6px;height:16px}
.faq-item.open .plus::after{transform:rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{padding:0 0 28px;color:var(--haze);font-size:1rem;max-width:64ch}

/* ===== footer ===== */
footer{position:relative;z-index:5;padding:80px 0 40px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(6,9,16,.6))}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px}
.foot-brand .brand{margin-bottom:18px}
.foot-brand p{font-size:.9rem;color:var(--haze);max-width:24rem}
.foot-col h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--haze-2);margin-bottom:18px;font-weight:400}
.foot-col a{display:block;font-size:.92rem;color:#bcc7d2;padding:6px 0;transition:color .3s,padding-left .3s}
.foot-col a:hover{color:var(--aqua);padding-left:5px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:30px;border-top:1px solid var(--line);font-size:.8rem;color:var(--haze-2)}
.foot-bottom .legal{display:flex;gap:22px;flex-wrap:wrap}
.foot-bottom a:hover{color:var(--aqua)}

/* ============================================================
   ARTICLE / GUIDE PAGES
   ============================================================ */
.crumbs{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haze-2);margin-bottom:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--haze)}.crumbs a:hover{color:var(--aqua)}.crumbs span{opacity:.5}
.article-hero{padding-top:140px;padding-bottom:30px}
.article-hero .eyebrow{display:block;margin-bottom:18px}
.article-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:340;letter-spacing:-.025em;margin-bottom:20px;max-width:18ch}
.article-hero h1 em{font-style:italic;color:var(--aqua-soft)}
.article-hero .lede{max-width:44rem}
.article-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--haze-2)}
.article-body{max-width:720px;margin:0 auto;padding:40px 0 20px}
.article-body h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:48px 0 16px;font-weight:360}
.article-body h2 em{font-style:italic;color:var(--gold)}
.article-body h3{font-size:1.32rem;margin:34px 0 12px}
.article-body p{font-size:1.06rem;line-height:1.78;margin-bottom:20px;color:#c4ced8}
.article-body p a,.article-body li a{color:var(--aqua-soft);border-bottom:1px solid rgba(111,224,208,.3);transition:border-color .3s}
.article-body p a:hover,.article-body li a:hover{border-color:var(--aqua)}
.article-body ul,.article-body ol{margin:0 0 24px 4px;padding-left:22px}
.article-body li{font-size:1.05rem;line-height:1.7;margin-bottom:10px;color:#c4ced8}
.article-body li::marker{color:var(--aqua)}
.article-body blockquote{margin:30px 0;padding:22px 28px;border-left:2px solid var(--aqua);background:rgba(111,224,208,.05);border-radius:0 14px 14px 0;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--mist)}
.keybox{margin:30px 0;padding:28px 30px;border-radius:18px;background:linear-gradient(165deg,rgba(15,26,38,.7),rgba(8,13,21,.6));border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
.keybox h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua);margin-bottom:16px;font-weight:400}
.keybox ul{margin:0;padding-left:20px}
.keybox li{font-size:.98rem;margin-bottom:8px}
.refs{max-width:720px;margin:50px auto 0;padding-top:30px;border-top:1px solid var(--line)}
.refs h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--haze-2);margin-bottom:18px;font-weight:400}
.refs ol{padding-left:20px}
.refs li{font-size:.84rem;color:var(--haze);margin-bottom:10px;line-height:1.5}
.related{margin-top:30px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.related-card{border:1px solid var(--line);border-radius:16px;padding:22px;background:rgba(13,22,34,.4);transition:transform .5s var(--ease),border-color .4s}
.related-card .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
.related-card h4{font-family:var(--serif);font-size:1.18rem;font-weight:500;margin-bottom:6px}
.related-card p{font-size:.86rem;color:var(--haze)}
.related-card:hover{transform:translateY(-5px);border-color:rgba(111,224,208,.3)}

/* ============================================================
   SCIENCE LAB (science.html interactive widgets)
   ============================================================ */
.lab{position:relative;border-radius:24px;padding:clamp(26px,3.5vw,44px);overflow:hidden;background:linear-gradient(165deg,rgba(16,28,42,.7),rgba(8,13,21,.7));border:1px solid rgba(140,170,185,.16);box-shadow:0 44px 100px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);margin-bottom:26px}
.lab .lab-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua);margin-bottom:10px;display:block}
.lab h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:8px}
.lab p.lab-d{font-size:.98rem;color:var(--haze);max-width:52rem;margin-bottom:24px}
.dial-wrap{display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.dial{position:relative;width:200px;height:200px;flex:none}
.dial canvas{width:200px;height:200px}
.dial-read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.dial-read .dn{font-family:var(--mono);font-weight:500;font-size:2.6rem;color:var(--mist);line-height:1;font-variant-numeric:tabular-nums}
.dial-read .du{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--haze)}
.dial-controls{flex:1;min-width:240px}
.dial-controls label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haze);display:block;margin-bottom:14px}
.slider{width:100%;-webkit-appearance:none;appearance:none;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--aqua),var(--haze-2));outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--aqua);cursor:pointer;box-shadow:0 0 0 6px rgba(111,224,208,.15),0 6px 18px -4px rgba(111,224,208,.7);transition:box-shadow .3s}
.slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 9px rgba(111,224,208,.2),0 6px 18px -4px rgba(111,224,208,.8)}
.slider::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:var(--aqua);cursor:pointer}
.dial-note{margin-top:18px;font-size:.92rem;color:#c4ced8}
.dial-note b{color:var(--aqua-soft);font-weight:500}
.freq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.freq-btn{position:relative;text-align:left;background:rgba(6,9,16,.5);border:1px solid var(--line);border-radius:16px;padding:20px;cursor:pointer;color:var(--mist);transition:transform .4s var(--ease),border-color .4s,background .4s;overflow:hidden}
.freq-btn b{font-family:var(--serif);font-weight:500;font-size:1.12rem;display:block;margin-bottom:4px}
.freq-btn span{font-size:.8rem;color:var(--haze)}
.freq-btn .fbar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--aqua);transition:width .2s}
.freq-btn:hover{transform:translateY(-4px);border-color:rgba(111,224,208,.4)}
.freq-btn.playing{border-color:var(--aqua);background:rgba(111,224,208,.06)}
.freq-hint{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--haze-2)}
.recovery-chart{width:100%;height:auto;display:block;margin-top:10px}
.legend{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--haze)}
.legend i{display:inline-block;width:18px;height:2px;margin-right:8px;vertical-align:middle}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:46px}.hero{padding-top:130px}
  .sci-grid{grid-template-columns:1fr}.guides-grid{grid-template-columns:repeat(2,1fr)}
  .genre-list{grid-template-columns:repeat(2,1fr)}
  .genre:nth-child(3n){border-right:1px solid var(--line)}.genre:nth-child(2n){border-right:none}
  .net-grid{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .nav-links{display:none}.nav-burger{display:flex}
  .guides-grid,.genre-list,.net-grid{grid-template-columns:1fr}
  .genre{border-right:none!important}.foot-grid{grid-template-columns:1fr}
  .bpm .num{font-size:2.5rem}section{padding:70px 0}
  .display{font-size:clamp(2.6rem,11vw,3.4rem)}
  .dial-wrap{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none}.breath-ring{animation:none}
}