/* rainforsleeping.com: night window, lamp light, fog bands. Fonts: Bricolage Grotesque (display) + DM Sans (body), SIL OFL, self-hosted. */
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dmsans.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dmsans-italic.woff2) format("woff2");font-weight:100 1000;font-style:italic;font-display:swap}
:root{--night:#081116;--deep:#0D1B22;--pane:#12262F;--pane2:#183541;--glass:#1E4452;--mist:#EAF4F2;--mist2:#BCD3D0;--mute:#93AEAB;--lamp:#F5B95F;--lamp2:#FFD58E;--rain:#7DC1E3;--line:rgba(180,215,225,.16);--fogbg:#DFECE9;--fogcard:#F4FAF8;--fogink:#0B1A20;--fogmute:#3D5A5C;--r:16px;--disp:"Bricolage",system-ui,sans-serif;--body:"DM Sans",system-ui,sans-serif;--barh:78px}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--mist);font:400 17px/1.62 var(--body);padding-bottom:calc(var(--barh) + 28px);overflow-x:hidden}
img,svg{max-width:100%}a{color:var(--lamp2)}a:hover{color:#fff}
h1,h2,h3{font-family:var(--disp);line-height:1.04;margin:0;letter-spacing:-.015em;font-weight:700}
p{margin:0 0 1em}.wrap{width:min(1180px,100% - 40px);margin:0 auto}.wrap.narrow,.narrow{max-width:820px}.wrap.narrow{width:min(820px,100% - 40px)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--lamp);color:#1a0f00;padding:.6em 1em;border-radius:8px;z-index:100;font-weight:700}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--lamp);outline-offset:2px;border-radius:6px}
/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(8,17,22,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:22px;min-height:64px}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--mist)}.lg{width:36px;height:36px;flex:none;border-radius:9px}
.wm{font:600 20px/1 var(--disp);letter-spacing:-.02em}.wm b{font-weight:300;color:var(--lamp);padding:0 .12em}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}.nav a{color:var(--mist2);text-decoration:none;padding:.5em .8em;border-radius:99px;font-weight:600;font-size:15px}.nav a:hover,.nav a[aria-current]{background:var(--pane);color:#fff}
.menu{display:none;margin-left:auto;position:relative}.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:12px;background:var(--pane);display:grid;place-content:center;gap:5px}.menu summary::-webkit-details-marker{display:none}.menu summary span{display:block;width:20px;height:2px;background:var(--mist);border-radius:2px}
.menu-p{position:absolute;right:0;top:52px;width:230px;background:var(--pane);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.5)}.menu-p a{display:block;padding:.7em .9em;border-radius:9px;text-decoration:none;color:var(--mist);font-weight:600}.menu-p a:hover{background:var(--pane2)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;border:0;border-radius:99px;padding:.7em 1.2em;font:700 15px/1.1 var(--body);cursor:pointer;text-decoration:none;transition:transform .15s,background .2s}
.btn svg{width:13px;height:13px;fill:currentColor}.btn:hover{transform:translateY(-1px)}.btn.big{padding:.95em 1.5em;font-size:16px}.btn.sm{padding:.55em 1em;font-size:14px}
.lampb{background:var(--lamp);color:#1d1100}.lampb:hover{background:var(--lamp2);color:#1d1100}
.ink{background:var(--mist);color:var(--night)}.ink:hover{background:#fff;color:var(--night)}
.line{background:transparent;color:var(--mist);box-shadow:inset 0 0 0 1.5px rgba(200,225,232,.4)}.line:hover{background:rgba(255,255,255,.08);color:#fff}
.fog .ink{background:var(--fogink);color:#fff}.fog .ink:hover{background:#000;color:#fff}.fog .line{color:var(--fogink);box-shadow:inset 0 0 0 1.5px rgba(11,26,32,.4)}.fog .line:hover{background:rgba(11,26,32,.08);color:var(--fogink)}
/* hero: night window */
.glasshero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#0A171D 0%,#0E2229 60%,#081116 100%)}
.bokeh{position:absolute;inset:-10%;z-index:0;filter:blur(18px);opacity:.9;background:
 radial-gradient(circle at 12% 62%,rgba(245,185,95,.5) 0 5%,transparent 5.5%),radial-gradient(circle at 24% 78%,rgba(255,130,90,.38) 0 4%,transparent 4.5%),radial-gradient(circle at 34% 52%,rgba(125,193,227,.4) 0 6%,transparent 6.5%),
 radial-gradient(circle at 52% 70%,rgba(245,185,95,.45) 0 7%,transparent 7.5%),radial-gradient(circle at 63% 58%,rgba(255,213,142,.35) 0 4.5%,transparent 5%),radial-gradient(circle at 75% 80%,rgba(125,193,227,.35) 0 5%,transparent 5.5%),
 radial-gradient(circle at 88% 55%,rgba(245,185,95,.45) 0 6%,transparent 6.5%),radial-gradient(circle at 92% 82%,rgba(255,110,120,.28) 0 4%,transparent 4.5%),radial-gradient(ellipse at 50% 100%,rgba(30,68,82,.8),transparent 60%)}
.glass{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.glasshero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(8,17,22,0) 55%,var(--night) 100%)}
.hero{min-height:min(88vh,780px);display:flex;align-items:center}.hero.small{min-height:0;padding:56px 0 64px}.hero>.wrap{position:relative;z-index:3}
.hero-in{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:end;padding:70px 0 90px}
.kick{display:flex;align-items:center;gap:.6em;font:600 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--mist2);margin:0 0 20px}.lamp{width:10px;height:10px;border-radius:50%;background:var(--lamp);box-shadow:0 0 14px 3px rgba(245,185,95,.7);animation:lamp 5s ease-in-out infinite}
@keyframes lamp{50%{opacity:.55;box-shadow:0 0 8px 1px rgba(245,185,95,.4)}}
.hero h1{font-size:clamp(52px,9vw,116px);font-weight:800;letter-spacing:-.035em;line-height:.9;text-shadow:0 4px 40px rgba(0,0,0,.4)}.h1a{display:block;font-weight:500;color:var(--mist)}.h1b{display:block;color:var(--lamp)}
.hero.small h1{font-size:clamp(38px,6vw,68px)}.hero.small h1 .h1a,.hero.small h1 .h1b{display:inline}
.lede{font-size:clamp(18px,2vw,21px);max-width:620px;color:var(--mist);margin:24px 0}.lede b{color:var(--lamp2)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0}.cta-row.sm{margin-top:10px}.hero-sub{font-size:15px;color:var(--mist2);margin:18px 0 0}
.badges{list-style:none;display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:22px 0 0}.badges li{font-size:13px;font-weight:600;padding:.4em .9em;border-radius:99px;border:1px solid var(--line);color:var(--mist2);background:rgba(8,17,22,.4)}
.qk-box{background:rgba(10,24,30,.58);border:1px solid var(--line);border-radius:22px;padding:22px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.qk-h{font:700 22px/1 var(--disp);margin:0 0 14px}.qks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qk{border:0;border-radius:14px;padding:.95em 1em;text-align:left;font:700 16px/1.1 var(--disp);color:var(--c);background:var(--pane);cursor:pointer;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 45%,transparent);transition:background .2s,transform .15s}.qk:hover{background:var(--pane2);transform:translateY(-2px)}
/* sections */
section{position:relative}.band{padding:84px 0}.fog{background:var(--fogbg);color:var(--fogink)}.fog a{color:#0A5C7A}.fog a:hover{color:#000}
.fog .eyebrow{color:#0A6B8A}.fog .sec-p,.fog .faq p{color:var(--fogmute)}
.sec-h{margin-bottom:34px;max-width:760px}.sec-h h2{font-size:clamp(32px,4.6vw,54px)}.eyebrow{font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp);margin:0 0 12px}.sec-p{font-size:18px;color:var(--mist2);margin:14px 0 0}
.rooms,.mixes,.free,.faqs,.about-t{padding:84px 0}.mixes{background:linear-gradient(180deg,var(--night),#0C1D24)}
/* mixer */
.mixer{background:var(--deep);color:var(--mist);border-radius:28px;padding:28px;border:1px solid rgba(180,215,225,.12);box-shadow:0 30px 80px rgba(8,25,32,.35)}
.mx-top{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;margin-bottom:22px}.mx-k{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp);margin:0 0 12px}
.rchips{display:flex;flex-wrap:wrap;gap:8px}.rchips.big{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rchip{border:0;border-radius:14px;background:var(--pane);color:var(--mist);font:600 14px/1.2 var(--body);padding:.6em 1em;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(180,215,225,.18);transition:background .2s}.rchip:hover{background:var(--pane2)}
.rchip[aria-pressed=true]{background:color-mix(in srgb,var(--c) 22%,var(--pane));box-shadow:inset 0 0 0 2px var(--c);color:#fff}
.rchips.big .rchip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;text-align:center}.rchips.big .scn{width:42px;height:50px}
.mx-r{display:flex;flex-direction:column;gap:12px}.rn-big{display:flex;align-items:center;justify-content:center;gap:.7em;border:0;border-radius:20px;padding:1.1em 1.2em;font:800 19px/1 var(--disp);background:var(--lamp);color:#1d1100;cursor:pointer;transition:background .2s}.rn-big svg{width:18px;height:18px;fill:currentColor}.rn-big:hover{background:var(--lamp2)}.rn-big[aria-pressed=true]{background:var(--rain);color:#06222e}
.mx-note{font-size:14px;color:var(--mist2);margin:0}.vol{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:10px;font-size:14px;color:var(--mist2)}.vol output{text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;height:28px;background:transparent;width:100%;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--lamp) var(--p,var(--v,50%)),rgba(180,215,225,.22) var(--p,var(--v,50%)))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:rgba(180,215,225,.22)}input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--lamp)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--mist);margin-top:-7px;box-shadow:0 2px 8px rgba(0,0,0,.5);border:0}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--mist);border:0}
.mx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 36px;margin-bottom:22px}.mx{display:grid;grid-template-columns:150px 1fr 34px;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(180,215,225,.1)}
.mx label{display:flex;flex-direction:column}.mx label b{font:700 16px/1.1 var(--disp)}.mx label span{font-size:12.5px;color:var(--mute);line-height:1.3}.mx output{text-align:right;color:var(--mist2);font-variant-numeric:tabular-nums;font-size:14px}
.mx-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}.slopts{display:flex;gap:7px;flex-wrap:wrap}
.slopts button{border:0;border-radius:99px;background:var(--pane);color:var(--mist);font:600 14px/1 var(--body);padding:.7em 1em;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(180,215,225,.18)}.slopts button:hover{background:var(--pane2)}.slopts button[aria-pressed=true]{background:var(--lamp);color:#1d1100;box-shadow:none}
.mx-acts{display:flex;gap:10px}.mixer .ink{background:var(--mist);color:var(--night)}.mixer .line{color:var(--mist);box-shadow:inset 0 0 0 1.5px rgba(200,225,232,.4)}
/* rooms: arched windows */
.arches{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:0;margin:0}
.arch{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%,var(--pane)),var(--deep) 70%);border:1px solid rgba(180,215,225,.14);border-radius:150px 150px 22px 22px;padding:10px 10px 22px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.arch:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.4)}.arch.on{box-shadow:0 0 0 2px var(--c),0 20px 60px color-mix(in srgb,var(--c) 25%,transparent)}
.arch-win{display:grid;place-items:center;border-radius:140px 140px 14px 14px;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--c) 30%,#0b1c23),#081116 80%);border:2px solid color-mix(in srgb,var(--c) 55%,transparent);aspect-ratio:5/4.1;margin-bottom:16px}
.scn{width:56%;height:auto;max-height:84%}.arch-t{padding:0 14px;display:flex;flex-direction:column;flex:1}.no{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin:0 0 8px}
.arch h3{font-size:26px;margin-bottom:8px}.arch h3 a{color:var(--mist);text-decoration:none}.arch h3 a:hover{color:var(--c)}.pl-when{font-size:15px;color:var(--mist2);flex:1}.pl-meta{font-size:13.5px;color:var(--mute);margin:0 0 12px}.pl-btns{display:flex;gap:8px;flex-wrap:wrap}
/* playlist card + steps */
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.pcard{background:var(--deep);color:var(--mist);border-radius:26px;padding:26px;border:1px solid rgba(180,215,225,.12);box-shadow:0 24px 70px rgba(8,25,32,.3)}
.pc-top{display:flex;gap:16px;align-items:center;margin-bottom:18px}.pc-covs{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:92px;flex:none;border-radius:12px;overflow:hidden}.pc-covs img{width:100%;height:auto;display:block}
.pc-k{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp);margin:0 0 6px}.pc-hd h2{font-size:28px}.pc-m{font-size:14px;color:var(--mist2);margin:6px 0 0}.pc-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.pc-more{margin:12px 0 0;font-weight:600}.pcard .pc-more a{color:var(--lamp2)}.pcard .ink{background:var(--mist);color:var(--night)}.pcard .line{color:var(--mist);box-shadow:inset 0 0 0 1.5px rgba(200,225,232,.4)}
.how h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:20px}.fog .eyebrow{margin-bottom:12px}.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 22px;display:grid;gap:12px}.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:2px 14px;background:var(--fogcard);border-radius:16px;padding:14px 16px}
.steps li::before{content:counter(s);grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--fogink);color:var(--lamp2);font:800 20px var(--disp)}.steps b{font:700 18px var(--disp)}.steps span{color:var(--fogmute);font-size:15px}
/* tracks */
.trs{list-style:none;margin:0;padding:0}.tr{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;border-bottom:1px solid rgba(180,215,225,.1)}.tr:last-child{border:0}
.tp{display:grid;grid-template-columns:28px 40px 1fr;align-items:center;gap:12px;text-align:left;background:none;border:0;color:inherit;font:inherit;padding:9px 6px;cursor:pointer;border-radius:10px;min-width:0}.tp:hover{background:rgba(125,193,227,.1)}
.tp .n{font:600 13px var(--body);color:var(--mute);text-align:right;font-variant-numeric:tabular-nums}.tp img{width:40px;height:40px;border-radius:8px;object-fit:cover}.tt{display:flex;flex-direction:column;min-width:0}.tt b{font:600 16px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt span{font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}.dl{font:700 12px var(--body);text-decoration:none;color:var(--mist2);border:1px solid var(--line);border-radius:99px;padding:.35em .8em}.dl:hover{background:var(--pane2);color:#fff}
.tr.on{background:rgba(245,185,95,.1);border-radius:10px}.tr.on .tt b{color:var(--lamp2)}.tr.on .n::before{content:"♪"}.tr.on .n{font-size:0}.tr.on .n::before{font-size:14px;color:var(--lamp)}
.fog .trs .tp:hover{background:rgba(10,92,122,.08)}.pcard .tp .n{color:var(--mute)}
/* mixes */
.mixgrid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0;margin:0 0 26px}
.mix{background:var(--pane);border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px}.mix-len b{display:block;font:800 52px/.95 var(--disp);color:var(--c)}.mix-len span{font-size:13.5px;color:var(--mute)}
.mix h3{font-size:21px}.mix h3 a{color:var(--mist);text-decoration:none}.mix p{font-size:14.5px;color:var(--mist2);flex:1;margin:0}.mix-bar{height:8px;border-radius:8px;overflow:hidden}.mb-in{display:flex;height:100%;gap:2px}.mb-in i{background:var(--c);display:block;opacity:.85}.mix-btns{display:flex;gap:8px;flex-wrap:wrap}.mix-all{margin:0}
/* short answer, rules, faq */
.shortbox{background:var(--fogcard);border-radius:24px;padding:30px;border:1px solid rgba(11,26,32,.08)}.shortbox h2{font-size:clamp(28px,3.2vw,40px);margin-bottom:14px}.gdl h3{font-size:24px;margin-bottom:14px}.gdl ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}.gdl li{background:var(--fogcard);border-radius:14px;padding:14px 16px}.gdl li a{font:700 17px var(--disp);text-decoration:none;display:block}.gdl li span{font-size:14px;color:var(--fogmute)}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.rule{background:var(--pane);border:1px solid var(--line);border-radius:22px;padding:24px}.rule .rn{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}.rule.y .rn{color:#8FCB9B}.rule.z .rn{color:var(--lamp)}.rule.n .rn{color:#FF9A8B}.rule h2,.rule h3{font-size:24px;margin-bottom:12px}.rule ul{margin:0;padding-left:1.1em}.rule li{margin:.3em 0}.rule p{font-size:15.5px}
.fog .rule{background:var(--fogcard);border-color:rgba(11,26,32,.1)}.fog .rule.y .rn{color:#1F7A3A}.fog .rule.z .rn{color:#8A5A00}.fog .rule.n .rn{color:#B02E1E}
.credit{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.cv-tabs{display:flex;gap:6px}.cv-tabs button{border:0;border-radius:99px;padding:.4em .9em;font:600 13px var(--body);background:rgba(180,215,225,.14);color:inherit;cursor:pointer}.cv-tabs button[aria-pressed=true]{background:var(--lamp);color:#1d1100}
.cv-text{display:block;font:500 13.5px/1.5 ui-monospace,Menlo,monospace;background:rgba(0,0,0,.28);padding:.7em .9em;border-radius:10px;word-break:break-word;width:100%}.fog .cv-text{background:rgba(11,26,32,.08)}
.faq details{background:var(--pane);border:1px solid var(--line);border-radius:16px;margin:0 0 10px;padding:0 20px}.fog .faq details{background:var(--fogcard);border-color:rgba(11,26,32,.1)}.faq summary{cursor:pointer;font:700 18px/1.3 var(--disp);padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:24px;color:var(--lamp);line-height:1}.fog .faq summary::after{color:#0A6B8A}.faq details[open] summary::after{content:"–"}.faq p{margin:0 0 18px;color:var(--mist2)}.more-faq{margin-top:18px;font-weight:600}
/* footer */
.foot{border-top:1px solid var(--line);background:#050B0F;padding:56px 0 30px;margin-top:0;font-size:15px}.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px}.fcol h2{font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp);margin:0 0 14px}.fcol h2.mt{margin-top:24px}.fl{list-style:none;margin:0;padding:0;display:grid;gap:7px}.fl a{color:var(--mist2);text-decoration:none}.fl a:hover{color:#fff}.fl i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:8px}.fabout p{color:var(--mist2);margin:14px 0 0;max-width:340px}.fine{font-size:12.5px;color:var(--mute);margin:36px 0 0;max-width:900px}
/* room / mix heads */
.slothead{padding:46px 0 64px}.sh-in{position:relative;z-index:3;display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:center}.slothead h1{font-size:clamp(38px,5.4vw,70px);font-weight:800;letter-spacing:-.03em;line-height:.96}.sh-lede{font-size:19px;color:var(--mist);max-width:660px;margin:18px 0 22px}.sh-meta{font-size:14px;color:var(--mist2);margin:14px 0 0}
.crumbs{font-size:14px;color:var(--mist2);margin:0 0 22px}.crumbs a{color:var(--mist2)}.crumbs span{margin:0 .3em;opacity:.6}.slothead .kick b{color:var(--c)}
.arch.big{width:min(300px,100%);margin:0 auto;border-radius:150px 150px 22px 22px;aspect-ratio:3/4;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--c) 30%,#0b1c23),#081116 80%);border:2px solid color-mix(in srgb,var(--c) 55%,transparent);padding:0}.arch.big .scn{width:62%}.arch.big:hover{transform:none}
.mixart{text-align:center}.mixbig{background:rgba(10,24,30,.6);border:1px solid var(--line);border-radius:26px;padding:26px;backdrop-filter:blur(10px)}.mixbig b{display:block;font:800 clamp(46px,6vw,76px)/.95 var(--disp);color:var(--c)}.mixbig span{color:var(--mist2)}.mixbar2{display:flex;gap:3px;height:10px;border-radius:10px;overflow:hidden;margin:18px 0 8px}.mixbar2 i{background:var(--c);display:block}.sh-tree{font-size:13px;color:var(--mist2);margin:0}
.pg-grid{display:grid;grid-template-columns:1fr 340px;gap:48px;padding:50px 0 70px;align-items:start}.main-col>section{margin-bottom:46px}.main-col h2,.prose h2{font-size:clamp(26px,3vw,36px);margin-bottom:16px}.notes p{font-size:18px;color:var(--mist)}
.qa .faq p{font-size:16px}.pn-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pn{display:block;background:var(--pane);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--mist)}.pn small{display:block;color:var(--mute);font-size:13px}.pn b{font:700 19px var(--disp)}.pn.r{text-align:right}.pn:hover{background:var(--pane2)}
.side{position:sticky;top:84px;display:grid;gap:18px}.label{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%,var(--pane)),var(--pane));border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:22px;padding:22px}.lab-h{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin:0 0 14px}.label dl{margin:0;display:grid;gap:12px}.label dt{font-size:12.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}.label dd{margin:2px 0 0;font-size:15.5px}
.side-b{background:var(--pane);border:1px solid var(--line);border-radius:22px;padding:22px}.side-b h2{font-size:20px;margin:0 0 10px}.side-b h2:not(:first-child){margin-top:18px}.side-b ul{margin:0;padding-left:1.1em;color:var(--mist2);font-size:15px}.side-b li{margin:.35em 0}
.rt,.olist{list-style:none;margin:0;padding:0;display:grid;gap:4px}.rt a{display:flex;align-items:center;gap:10px;padding:.5em .6em;border-radius:10px;text-decoration:none;color:var(--mist2);font-size:15px}.rt a:hover,.rt .cur a{background:var(--pane2);color:#fff}.rt i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}.rt span{color:var(--mute);font-size:12px;font-variant-numeric:tabular-nums}.olist li{display:flex;justify-content:space-between;gap:8px;font-size:15px}.olist a{text-decoration:none}.olist span{color:var(--mute)}.side-l{margin:12px 0 0;font-weight:600}
.grp{display:flex;align-items:center;gap:10px;font-size:20px;margin:26px 0 8px}.grp i{width:12px;height:12px;border-radius:50%;background:var(--c)}.grp a{color:var(--mist);text-decoration:none}.tracks h2{margin-bottom:10px}
/* guides */
.guide-grid{display:grid;grid-template-columns:280px 1fr;gap:56px;padding:48px 0 80px;align-items:start}.toc{position:sticky;top:84px;background:var(--pane);border:1px solid var(--line);border-radius:20px;padding:22px}.toc h2{font-size:18px;margin-bottom:12px}.toc h2.mt{margin-top:22px}.toc ol{margin:0;padding-left:1.2em}.toc li{margin:.4em 0;font-size:15px}.toc a{color:var(--mist2);text-decoration:none}.toc a:hover{color:#fff}.toc-play{margin-top:16px}.toc .olist li{display:block}
.prose{max-width:760px}.prose section{margin-bottom:40px}.prose p,.prose li{font-size:18px}.prose ul,.prose ol{padding-left:1.3em}.prose li{margin:.45em 0}.prose h3{font-size:22px;margin:22px 0 8px}.prose .shortbox{background:var(--pane);border:1px solid var(--line);color:var(--mist)}.prose .shortbox h2{font-size:30px}.try{border-top:1px solid var(--line);padding-top:20px;color:var(--mist2)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px}.tbl table{border-collapse:collapse;width:100%;min-width:620px;font-size:15.5px}.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}.tbl th{font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--lamp);background:var(--pane)}.tbl tr:last-child td{border:0}
.guides-hub{padding:20px 0 90px}.gcards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.gcard{background:var(--pane);border:1px solid var(--line);border-radius:22px;padding:28px}.gcard h2{font-size:26px;margin-bottom:12px}.gcard h2 a{text-decoration:none;color:var(--mist)}.gcard h2 a:hover{color:var(--lamp2)}.gcard p{color:var(--mist2)}.more{font-weight:700;display:inline-flex;gap:.4em;align-items:center;text-decoration:none}.more svg{width:12px;height:12px;fill:currentColor}
.about-t .prose{max-width:none}.about-t h2{margin-top:30px}.about-t code{background:rgba(0,0,0,.35);padding:.15em .5em;border-radius:6px;font-size:.88em;word-break:break-word}
.search{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}.search input{font:500 17px var(--body);background:var(--pane);color:var(--mist);border:1px solid var(--line);border-radius:99px;padding:.8em 1.2em;width:min(420px,100%)}.matches{color:var(--mist2);font-size:14px}
.pg-lib{padding:40px 0 80px}.rec{margin-bottom:40px}.rec-h{display:flex;align-items:center;gap:18px;margin-bottom:10px}.rec-h img{width:80px;height:80px;border-radius:14px}.rec-h h2{font-size:28px}.rec-h p{margin:4px 0 0;color:var(--mute);font-size:14px}.none{padding:40px 0;color:var(--mist2)}
.nf .btn{margin:6px 6px 0 0}
/* persistent bar */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(10,22,28,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(180,215,225,.22);display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:18px;align-items:center;padding:10px max(18px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));min-height:var(--barh)}
.pb-now{display:flex;gap:12px;align-items:center;min-width:0}.pb-now img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none}.pb-tx{display:flex;flex-direction:column;min-width:0}.pb-cap{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pb-tx b{font:600 15.5px/1.25 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-ctl{display:flex;align-items:center;gap:10px;min-width:0}.ib{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--mist);cursor:pointer;text-decoration:none;position:relative;flex:none}.ib:hover{background:rgba(255,255,255,.1)}.ib svg{width:15px;height:15px;fill:currentColor}.ib.sm{width:34px;height:34px}.ib[aria-pressed=true]{color:var(--lamp)}
.pp{width:46px;height:46px;border-radius:50%;border:0;background:var(--lamp);color:#1d1100;display:grid;place-items:center;cursor:pointer;flex:none}.pp svg{width:16px;height:16px;fill:currentColor}.pp:hover{background:var(--lamp2)}
.pb-seek{display:flex;align-items:center;gap:8px;flex:1;min-width:120px;font-size:12px;color:var(--mist2);font-variant-numeric:tabular-nums}.pb-x{display:flex;align-items:center;gap:2px;flex:none}
.ib.rn,.ib.sl{width:auto;border-radius:99px;padding:0 10px;gap:6px;display:inline-flex;align-items:center}.rn-t,.sl-t{font:600 12px var(--body)}.ib.rn.set{color:var(--rain);background:rgba(125,193,227,.14)}.ib.sl.on{color:var(--lamp);background:rgba(245,185,95,.14)}.sl-t:empty{display:none}
.mw{position:relative;display:inline-flex}.menu-pop{position:absolute;right:0;bottom:calc(100% + 18px);width:min(320px,calc(100vw - 24px));background:#12262F;border:1px solid rgba(180,215,225,.25);border-radius:18px;padding:16px;box-shadow:0 18px 60px rgba(0,0,0,.6);z-index:70}
.menu-pop[hidden]{display:none}.mp-h{font:700 16px var(--disp);display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}.mp-f{font-size:12.5px;color:var(--mute);margin:12px 0 0}.rn-toggle{border:0;border-radius:99px;padding:.4em 1em;font:700 13px var(--body);background:var(--pane2);color:var(--mist);cursor:pointer}.rn-toggle[aria-pressed=true]{background:var(--rain);color:#06222e}.sl-left{font:600 13px var(--body);color:var(--lamp)}
.menu-pop .vol{grid-template-columns:100px 1fr}.rn-menu .rchips{margin-bottom:10px}.rn-menu .rchip{font-size:13px;padding:.55em .8em}
input[type=range]#pb-seek{--p:0%}
.toast{position:fixed;left:50%;bottom:calc(var(--barh) + 22px);transform:translate(-50%,16px);background:var(--mist);color:var(--night);padding:.7em 1.2em;border-radius:99px;font:600 14.5px var(--body);opacity:0;pointer-events:none;transition:.25s;z-index:80;max-width:calc(100vw - 30px)}.toast.show{opacity:1;transform:translate(-50%,0)}
.dim{position:fixed;inset:0;z-index:200;overflow:hidden;background:linear-gradient(180deg,#0A171D 0%,#0E2229 60%,#081116 100%);display:grid;place-items:end center;text-align:center;cursor:pointer;color:#9FB4B6}.dim[hidden]{display:none}
.dim-bg{position:absolute;inset:0;z-index:0;filter:brightness(.68) saturate(.85)}.dim-bg::after{content:"";position:absolute;inset:0;background:rgba(2,6,9,.3)}.dim-bg .bokeh{opacity:.55}.dim-glass{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.dim-t{position:relative;z-index:2;font:600 15px var(--body);margin:0;padding:20px 20px calc(34px + env(safe-area-inset-bottom));text-shadow:0 1px 8px #000}.dim-t small{display:block;margin-top:4px;font-weight:400;font-size:13px;color:#7F9598}
/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
/* responsive */
@media (max-width:1060px){.arches{grid-template-columns:repeat(2,1fr)}.mixgrid{grid-template-columns:repeat(2,1fr)}.foot-top{grid-template-columns:1fr 1fr}.hero-in,.sh-in,.two,.mx-top{grid-template-columns:1fr}.pg-grid{grid-template-columns:1fr}.side{position:static}.guide-grid{grid-template-columns:1fr}.toc{position:static}.rules{grid-template-columns:1fr}.qk-box{max-width:520px}}
@media (max-width:760px){body{font-size:16.5px}.nav{display:none}.menu{display:block}.band,.rooms,.mixes,.free,.faqs,.about-t{padding:56px 0}.arches,.gcards{grid-template-columns:1fr}.mixgrid{grid-template-columns:1fr}.mx-grid{grid-template-columns:1fr}.mx{grid-template-columns:110px 1fr 30px}.mixer{padding:18px;border-radius:22px}.rchips.big{grid-template-columns:repeat(2,1fr)}.hero-in{padding:44px 0 70px}.foot-top{grid-template-columns:1fr}.hero{min-height:0}
 .pbar{grid-template-columns:1fr;gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));--barh:112px}.pb-ctl{flex-wrap:wrap;row-gap:4px}.pb-seek{order:5;flex:1 1 100%}.pb-x{margin-left:auto}.pb-now img{width:40px;height:40px}.menu-pop{right:-60px}.ib.rn .rn-t{display:none}.pb-ctl{gap:6px}
 body{--barh:116px}.tr{grid-template-columns:1fr auto}.tr .dl{display:none}.pn-row{grid-template-columns:1fr}.mx-bot{flex-direction:column;align-items:flex-start}.hero h1{font-size:clamp(46px,15vw,70px)}}
:where(a,button)>svg:where(:not(.scn):not(.lg)){width:.85em;height:.85em;fill:currentColor;vertical-align:-.08em;flex:none}

.credits-l{padding-left:1.1em}.credits-l li{margin:.5em 0}