/* MIDILAB 5 — After Hours. Ink, mineral gray, soft chartreuse and a little heat. */
:root{
  color-scheme:dark;
  --stone:#0c0f14;--paper:#14191e;--ink:#f1f2ef;--muted:#979fa6;
  --forest:#b9e57a;--accent:#b9e57a;--peach:#d9a68e;--stroke:#2a3238;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Inter,'Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
}
html{scroll-padding-top:110px}
body{background:#0b0e12;color:#e9edea;letter-spacing:-.013em}
body::before{content:"";position:absolute;top:0;left:0;right:0;height:950px;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 55% 55% at 76% 22%,#2932345a,transparent 85%),linear-gradient(135deg,#11161b,#0b0e12 62%)}
::selection{background:#b9e57a;color:#0c1513}
button:focus-visible,a:focus-visible{outline-color:#d4f5a1}
.wrap{width:min(1310px,calc(100% - 88px))}
.site-header{height:92px;border-color:#30373e;gap:23px}
.site-brand{color:#f5f8f4;font-size:25px;letter-spacing:-1.35px}
.brand-symbol{background:#b9e57a;color:#111915;border-radius:11px;font:italic 27px/1 var(--serif);box-shadow:0 4px 22px #b9e57a22}
.brand-symbol span,.brand-period{color:#698b47}
.site-links{gap:37px;color:#909aa1;font-size:12px;font-weight:620}
.site-links a:hover,.site-links .current{color:#f5f8f3}
.site-links a.current:after{background:#b9e57a;bottom:-15px;height:2px}
.site-action{background:#b9e57a;color:#0d150e;border:1px solid #b9e57a;border-radius:10px;padding:13px 17px 13px 19px;gap:22px;box-shadow:0 8px 24px #a5c77618}
.site-action:hover,.btn-dark:hover{background:#d1f39d;border-color:#d1f39d;transform:translateY(-2px)}
.hero{min-height:712px;padding-top:74px;padding-bottom:84px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:58px;overflow:visible}
.hero-text{padding:30px 0 0}
.pretitle{color:#b7cfad;font-weight:720;letter-spacing:.19em;font-size:10px}
.pretitle i{background:#b9e57a;box-shadow:0 0 0 4px #b9e57a18}
.hero h1{color:#f2f4ef;letter-spacing:-.077em;font-size:clamp(65px,6.25vw,98px);font-weight:780;line-height:1.035;margin:27px 0 28px}
.hero h1 em{color:#b9e57a;font-weight:400;letter-spacing:-.075em}
.hero-text>p{color:#a2aeb2;font-size:16px;line-height:1.8;max-width:480px}
.hero-buttons{margin-top:37px;gap:11px}
.btn{border-radius:10px;font-weight:740;padding:16px 23px;min-height:55px;letter-spacing:-.01em}
.btn-dark{background:#b9e57a;color:#0e1610;border-color:#b9e57a}
.btn-ghost{border-color:#4a545b;color:#e6ece8;background:#192025}
.btn-ghost:hover{background:#242c32;border-color:#87949a}
.trust-line{margin-top:36px;color:#7c898e;font-size:11px}
.avatar-dots b{border-color:#0d1114;background:#aabf76}.avatar-dots b:nth-child(2){background:#c98e75}.avatar-dots b:nth-child(3){background:#698e9f}
.cover-stage{height:565px;filter:drop-shadow(0 38px 45px #0006)}
.cover-stage:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(ellipse at 55% 50%,#b1d77c0f,transparent 67%);z-index:-1}
.cover-back{border-radius:9px;box-shadow:0 20px 40px #0007;width:80%;max-width:430px}
.cover-back-1{background:#353f42;transform:rotate(12deg) translate(25px,-26px)}
.cover-back-2{background:#81634b;transform:rotate(-9deg) translate(-21px,14px)}
.feature-cover{background:linear-gradient(135deg,#242c33 0%,#131d22 58%,#131817 100%);border:1px solid #56636b66;box-shadow:22px 34px 58px #0009;width:87%;max-width:457px;border-radius:7px;padding:30px;transform:rotate(1.2deg)}
.feature-cover:before{background:repeating-linear-gradient(0deg,transparent 0 25px,#b8d9d304 26px 27px),linear-gradient(135deg,#f5e0b20a,transparent 65%)}
.feature-cover:after{content:'';position:absolute;inset:13px;border:1px solid #bcc9bf13;pointer-events:none;border-radius:2px}
.cover-top,.cover-bottom{color:#cad1c9;font-size:9px;letter-spacing:.14em}
.cover-title{font-size:clamp(46px,5.3vw,76px);line-height:.91;letter-spacing:-.075em;max-width:78%;margin-top:-75px}
.cover-title em{color:#d0f3a1;letter-spacing:-.083em}
.cover-disc{background:repeating-radial-gradient(circle,#0e1518 0 2px,#253037 3px 4px,#0b1114 5px 7px);box-shadow:0 0 0 7px #ffffff05,0 20px 45px #0009;right:-25%;top:19%;width:77%;animation:spin 40s linear infinite}
.disc-center{background:#b9e57a;color:#10201a}
.disc-center:after{background:#0d1612}
.float-stamp{background:#c49c7c;color:#19221f;border:1px solid #f3cbb0;width:105px;height:105px;right:-17px;bottom:7px;animation:bob 7s ease-in-out infinite}
.float-stamp strong{font-size:16px}
.scroll-cue{border-color:#2a3239;color:#718088;padding-bottom:46px}
.manifesto{background:#171d22;color:#f3f5f1;border-top:1px solid #2c3438;border-bottom:1px solid #2c3438}
.manifesto-inner{padding-top:126px;padding-bottom:137px}
.manifesto .section-eyebrow{color:#b9e57a}
.manifesto h2{color:#e9eeea;max-width:1110px;line-height:1.055;font-size:clamp(50px,6.2vw,92px)}
.manifesto h2 em{color:#b9e57a}
.manifesto p{color:#a2afb1;max-width:525px}
.manifesto a{color:#d4f2b2;border-color:#b1da77}
.manifesto-decoration{right:4%;top:-122px;color:#b9e57a06;transform:rotate(16deg)}
.section-eyebrow{color:#b9e57a;letter-spacing:.165em}
.section-top{border-bottom-color:#2b3339}
.section-top>span:last-child{color:#66757c}
.experience{padding-top:132px;padding-bottom:138px}
.exp-intro h2,.section-heading h2,.packs-heading h2{color:#e8ece9;letter-spacing:-.065em;font-weight:750}
.exp-intro h2 em,.section-heading h2 em,.packs-heading h2 em,.closing h2 em{color:#b9e57a}
.exp-intro p{color:#8f9ca2}
.experience-grid{gap:16px;margin-top:56px}
.exp-card{background:#171d23;border:1px solid #303840;min-height:285px;border-radius:14px;box-shadow:inset 0 1px #ffffff06;transition:background .25s,border-color .25s,transform .25s}
.exp-card:hover{transform:translateY(-4px);box-shadow:0 21px 39px #0005;border-color:#667b5d;background:#1c252a}
.exp-no{color:#697d84}
.exp-card h3{color:#e6ece7}
.exp-card p{color:#929da3;font-size:12px}
.exp-music span{color:#b9e57a}
.exp-music i{background:#6b8468}
.exp-beat i{background:#303b40}
.exp-beat i:nth-child(1),.exp-beat i:nth-child(4),.exp-beat i:nth-child(6),.exp-beat i:nth-child(9){background:#b9e57a}
.exp-beat i:nth-child(8){background:#db9c75}
.exp-file{color:#b9e57a;border-color:#678b58}
.samples-section{background:#12171c;border-top:1px solid #30383e;border-bottom:1px solid #30383e;padding:119px 0 125px}
.section-heading p{color:#a3adb2}
.sample-browser{border:1px solid #353f45;background:#1a2026;border-radius:17px;overflow:hidden;box-shadow:0 25px 50px #0005}
.sample-browser-head{background:#1d252a;border-bottom:1px solid #354047}
.sample-browser-name{color:#eaf0e9}
.sample-browser-name i{background:#b9e57a}
.sample-browser-name small{color:#78878e}
.filter-group button{border-color:transparent;background:transparent;color:#99a6aa;border-radius:7px}
.filter-group button:hover{background:#35403c;color:#e6efe4}
.filter-group button.active{background:#b9e57a;color:#162017}
.sample-grid{background:#1a2026}
.sample-item,.sample-item:nth-child(odd){background:transparent;border-color:#303a41}
.sample-item:hover{background:#283239}
.sample-play{background:#303e3c;color:#bfe999;border:1px solid #4a5d50}
.sample-play:hover,.sample-play.is-playing{background:#b9e57a;color:#122116}
.sample-info strong{color:#e4ebe6}
.sample-info span{color:#84949a}
.sample-wave i{background:#73977b}
.sample-dl{background:#272f35;border:1px solid #414b53;color:#c5d1c8}
.sample-dl:hover{background:#b9e57a;color:#142016;border-color:#b9e57a}
.sample-browser-bottom{background:#192127;color:#79888f;border-top:1px solid #344047}
.packs-section{padding-top:135px;padding-bottom:140px}
.packs-heading p{color:#a3afb0}
.packs-grid{gap:26px}
.pack{background:#1b2228;border:1px solid #384148;border-radius:17px;box-shadow:0 26px 48px #0003;overflow:hidden}
.pack:hover{box-shadow:0 34px 65px #0007;border-color:#748466;transform:translateY(-5px)}
.pack-cover{min-height:300px;border-bottom:1px solid #303941}
.pack-night{background:radial-gradient(circle at 78% 35%,#b9e57a28 0,transparent 41%),linear-gradient(135deg,#222d31,#0e171d)}
.pack-slow{background:radial-gradient(circle at 75% 16%,#dcbba450,transparent 48%),linear-gradient(120deg,#675c60,#34343b 65%,#202329)}
.cover-caption{color:#e1e9e5}
.pack-cover strong{color:#f0f4f0;text-shadow:0 5px 25px #0003}
.pack-cover small{color:#bec6c2}
.pack-orbit{border-color:#b9e57a22}
.slow-ripple{border-color:#eadac522}
.pack-copy{background:#1b2228}
.pack-copy h3{color:#f1f3f0}
.pack-price{color:#b9e57a}
.pack-copy p{color:#a4b1b5}
.pack-buttons button{border-radius:8px}
.preview-button{background:#2b3638;color:#d8e8d3;border:1px solid #466052}
.preview-button:hover,.preview-button.is-playing{background:#b9e57a;color:#122017;border-color:#b9e57a}
.soon-button{background:#242a30;color:#849296;border:1px solid #3c444b}
.closing{background:radial-gradient(ellipse at 92% 10%,#6b86541f,transparent 55%),#192127;border-top:1px solid #35433b}
.closing .section-eyebrow{color:#b9e57a}
.closing h2{color:#f1f4ef}
.closing h2 em{color:#b9e57a}
.btn-light{background:#b9e57a;color:#121b15;border-color:#b9e57a}
.btn-light:hover{background:#d0f5a5;color:#152017;border-color:#d0f5a5}
.closing-line{opacity:.13}
.site-footer{border-top:1px solid #2b3338;color:#a0a9ab}
.footer-brand{color:#eaf0e8}
.site-footer>span{color:#74828a}
.site-footer>div a:hover{color:#c6f19c}
/* Keep all motion deliberate, never distract while listening. */
.hero-text{animation:reveal-up .75s cubic-bezier(.22,1,.36,1) both}
.cover-stage{animation:reveal-up .9s .1s cubic-bezier(.22,1,.36,1) both}
.exp-card,.pack,.sample-item{transition:background .25s,border-color .25s,transform .3s,box-shadow .3s}
@keyframes reveal-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.wrap{width:min(100% - 48px,1310px)}.hero{gap:15px}.cover-stage{height:450px}.cover-title{font-size:clamp(36px,6vw,70px)}.exp-card{min-height:260px}}
@media(max-width:640px){
 .wrap{width:calc(100% - 38px)}.site-header{height:75px}.site-brand{font-size:21px}.site-action{padding:11px 13px;font-size:10px;gap:9px}
 .hero{padding-top:30px;min-height:auto;gap:14px;padding-bottom:64px}.hero-text{padding-top:16px}.hero h1{font-size:clamp(55px,12.3vw,77px);margin:20px 0}.hero-text>p{font-size:14px}
 .cover-stage{height:350px}.feature-cover{max-width:305px;width:82%;padding:19px}.cover-title{font-size:clamp(40px,11vw,57px);margin-top:-50px}.cover-top,.cover-bottom{font-size:7px}.float-stamp{width:80px;height:80px;right:1px;bottom:8px;font-size:9px}.float-stamp strong{font-size:12px}
 .scroll-cue{padding-bottom:38px}.manifesto-inner{padding:85px 0 95px}.manifesto h2{font-size:clamp(40px,10vw,64px)}.experience{padding:92px 0}.experience-grid{gap:12px}.exp-card{min-height:165px}.samples-section{padding:90px 0}.sample-browser{border-radius:12px}.sample-browser-head{gap:14px}.packs-section{padding:100px 0}.packs-grid{gap:17px}.pack-cover{min-height:235px}
}
@media(prefers-reduced-motion:reduce){.hero-text,.cover-stage{animation:none!important}.cover-disc,.float-stamp{animation:none!important}.exp-card,.pack,.btn{transition:none!important}}