@font-face{font-family:'KB';src:url(fonts/archivo-black.ttf)}
@font-face{font-family:'KP';font-style:italic;font-weight:400 900;src:url(fonts/playfair-italic.ttf)}
@font-face{font-family:'KM';src:url(fonts/spacemono.ttf)}@font-face{font-family:'KM';font-weight:700;src:url(fonts/spacemono-bold.ttf)}
@font-face{font-family:'KS';font-weight:100 1000;src:url(fonts/dmsans.ttf)}
:root{--bg:#070506;--card:#120a0c;--red:#d3123e;--red2:#ff2d5c;--wine:#5a0a1c;--gold1:#f7e3a1;--gold2:#d6a84a;--gold3:#a8772a;--cream:#f6ecd2;--txt:#f4efe9;--mut:#b7a9a6;--line:rgba(247,227,161,.18)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font:16px/1.6 'KS',system-ui,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(60vw 50vh at 22% 18%,rgba(140,12,40,.45),transparent 70%),radial-gradient(50vw 50vh at 90% 85%,rgba(110,8,30,.35),transparent 70%)}
img{display:block;max-width:100%}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.gold{background:linear-gradient(100deg,var(--gold1) 0%,var(--gold2) 30%,#fff3c4 48%,var(--gold2) 62%,var(--gold3) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.redg{background:linear-gradient(100deg,#ff5a7a,var(--red2),#ff9a6a);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes shine{to{background-position:-220% 0}}
h2.t{font:400 clamp(40px,5vw,68px)/1 'KB';letter-spacing:-.01em;text-transform:uppercase}
.sub{color:var(--mut);margin-top:12px;font-size:17px}
.tagm{display:inline-block;font:400 11px/1 'KM';letter-spacing:.14em;text-transform:uppercase;color:var(--red2);border:1px solid rgba(255,45,92,.55);padding:6px 9px;margin:10px 8px 0 0;border-radius:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px/1 'KS';padding:15px 26px;border-radius:999px;text-decoration:none;transition:.2s;white-space:nowrap}
.btn-red{background:linear-gradient(180deg,var(--red2),var(--red));color:#fff;box-shadow:0 8px 30px rgba(211,18,62,.45),inset 0 1px 0 rgba(255,255,255,.3)}.btn-red:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(211,18,62,.6)}
.btn-gold{border:1.5px solid var(--gold2);color:var(--gold1)}.btn-gold:hover{background:rgba(214,168,74,.12)}
.sm{padding:10px 18px;font-size:13px}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(7,5,6,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font:400 24px/1 'KB';text-decoration:none;letter-spacing:.02em}
.nav nav{display:flex;align-items:center;gap:26px}
.nav nav a.l{font:400 12px 'KM';letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-decoration:none}.nav nav a.l:hover{color:var(--gold1)}
.snd{border:1.5px solid var(--gold2);color:var(--gold1);border-radius:999px;padding:9px 16px;font:700 13px 'KS'}
.snd.on{background:var(--gold2);color:#140c06}
/* hero */
.hero{padding:56px 0 0;position:relative}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;min-height:calc(100vh - 68px - 56px - 90px)}
.stage{position:relative;display:grid;place-items:center;padding:20px 0 40px}
.halo{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(211,18,62,.5),transparent 62%);filter:blur(10px);animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08);opacity:.75}}
.logo-mover{animation:bob 3.4s ease-in-out infinite;position:relative}
.logo-sway{animation:sway 5.2s ease-in-out infinite;transform-origin:50% 90%}
.logo{width:440px;height:440px;border-radius:50%;padding:14px;background:#fff;position:relative;box-shadow:0 0 0 4px #0c0708,0 0 0 7px var(--gold2),0 0 70px rgba(211,18,62,.55),0 30px 80px rgba(0,0,0,.6)}
.logo:before{content:"";position:absolute;inset:-22px;border-radius:50%;border:3px dashed var(--red2);animation:spin 26s linear infinite;opacity:.9}
.logo img{width:100%;height:100%;border-radius:50%;animation:wiggle 7s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-16px)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wiggle{0%,86%,100%{transform:rotate(0) scale(1)}89%{transform:rotate(-6deg) scale(1.03)}92%{transform:rotate(5deg) scale(1.04)}95%{transform:rotate(-3deg)}}
.dancing .logo-mover{animation:dance .9s cubic-bezier(.3,.7,.4,1.4) infinite}
.dancing .logo-sway{animation:shimmy .45s ease-in-out infinite alternate}
.dancing .logo img{animation:twirl 1.8s ease-in-out infinite}
@keyframes dance{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-34px) scale(1.04,.97)}50%{transform:translateY(0) scale(.97,1.04)}75%{transform:translateY(-18px) rotate(4deg)}}
@keyframes shimmy{from{transform:rotate(-9deg) translateX(-14px)}to{transform:rotate(9deg) translateX(14px)}}
@keyframes twirl{0%,60%{transform:rotate(0)}80%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
.spark{position:absolute;color:#fff;font-size:18px;animation:tw 2.4s ease-in-out infinite;opacity:0;pointer-events:none}
@keyframes tw{50%{opacity:1;transform:scale(1.3) rotate(45deg)}}
.notes i{position:absolute;font-style:normal;font-size:26px;opacity:0;pointer-events:none}
.dancing .notes i{animation:float 1.8s ease-out infinite}
@keyframes float{0%{opacity:0;transform:translateY(20px)}20%{opacity:1}100%{opacity:0;transform:translateY(-110px) rotate(20deg)}}
.bubble{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);background:var(--cream);color:#1b1012;font:700 16px/1.35 'KS';padding:14px 20px;border-radius:16px;min-width:230px;max-width:340px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:3}
.bubble:before{content:"";position:absolute;left:50%;top:-8px;margin-left:-8px;border:8px solid transparent;border-top:0;border-bottom-color:var(--cream)}
.bubble .cur{display:inline-block;width:2px;height:1.05em;background:#1b1012;vertical-align:-2px;margin-left:2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.copy .kick{font:700 12px 'KM';letter-spacing:.24em;text-transform:uppercase;color:var(--red2)}
.copy h1{font:400 clamp(64px,8.6vw,124px)/.92 'KB';letter-spacing:-.01em;margin:16px 0 4px;filter:drop-shadow(0 6px 30px rgba(214,168,74,.25))}
.copy .by{font:italic 600 clamp(30px,3vw,44px)/1 'KP';color:var(--txt)}
.copy p.tl{font-size:20px;color:#e2d7d3;max-width:30em;margin:24px 0 30px}
.copy .row{display:flex;gap:14px;flex-wrap:wrap}
.copy .fine{font-size:12px;color:var(--mut);margin-top:20px}
.marquee{margin-top:30px;border-block:1px solid rgba(255,45,92,.6);background:linear-gradient(90deg,rgba(90,10,28,.6),rgba(30,4,10,.6));box-shadow:0 0 30px rgba(211,18,62,.35);overflow:hidden;white-space:nowrap;padding:16px 0}
.marquee div{display:inline-block;animation:mq 26s linear infinite;font:400 18px/1 'KB';letter-spacing:.12em;color:var(--red2);text-shadow:0 0 12px rgba(255,45,92,.6)}
.marquee span{margin:0 18px}.marquee b{color:var(--gold1);font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}
section{padding:110px 0}
.div{display:flex;align-items:center;gap:16px;justify-content:center;color:var(--gold1);margin:0 auto;max-width:1160px}
.div:before,.div:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold2),transparent)}
/* countdown */
.drop .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.cd{border:1.5px solid var(--red);border-radius:20px;padding:44px;background:linear-gradient(180deg,rgba(60,6,18,.65),rgba(14,6,8,.8));box-shadow:0 0 50px rgba(211,18,62,.3),inset 0 0 40px rgba(211,18,62,.12);text-align:center;animation:glow 3s ease-in-out infinite}
@keyframes glow{50%{border-color:var(--gold2);box-shadow:0 0 60px rgba(214,168,74,.3),inset 0 0 40px rgba(214,168,74,.08)}}
.pill{display:inline-block;background:var(--red);color:#fff;font:700 10px/1 'KM';letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:3px}
.cd h3{font:400 clamp(34px,3.6vw,50px)/1 'KB';margin:14px 0 26px}
.units{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:520px;margin:0 auto}
.units div{border:1.5px solid var(--gold2);border-radius:12px;padding:16px 0 10px;background:#0b0607}
.units b{font:700 44px/1 'KM';display:block}
.units small{font:400 11px 'KM';letter-spacing:.16em;color:var(--mut);text-transform:uppercase}
.left{font:700 15px 'KM';margin:24px 0 10px}
.bar{height:8px;border-radius:9px;background:#2a1a1d;max-width:520px;margin:0 auto;overflow:hidden}.bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--red),var(--gold2));border-radius:9px;transition:width .6s}
.cd .fine{font-size:12px;color:var(--mut);margin:12px 0 22px}
.drop-copy h2{margin-bottom:16px}
.drop-copy ul{list-style:none;margin-top:28px;display:grid;gap:14px}
.drop-copy li{display:flex;gap:14px;align-items:center;font-size:17px}.drop-copy li b{font:400 13px 'KM';color:var(--gold1);border:1px solid var(--line);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;flex:none}
/* play: cloche + quiz */
.play .grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
.panel{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(26,12,15,.9),rgba(12,7,8,.9));padding:36px}
.cloche{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;margin-top:24px;cursor:pointer;background:#140a0c}
.cloche>img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) blur(3px);transition:1s}
.cloche .dome{position:absolute;left:8%;right:8%;bottom:6%;height:78%;border-radius:50% 50% 10px 10%/62% 62% 10px 10px;background:radial-gradient(ellipse at 34% 22%,#fff 0,#e6e6e9 18%,#a9aab0 52%,#6d6e75 80%,#4a4b50 100%);box-shadow:inset -20px -30px 60px rgba(0,0,0,.35),0 30px 50px rgba(0,0,0,.6);transition:transform 1.1s cubic-bezier(.5,-.3,.3,1),opacity 1.1s;display:grid;place-items:center;font:400 34px 'KB';color:#3a3a40;letter-spacing:.1em}
.cloche .dome:before{content:"";position:absolute;top:-30px;left:50%;width:56px;height:34px;margin-left:-28px;border-radius:30px 30px 6px 6px;background:linear-gradient(180deg,#f4f4f6,#8e8f96)}
.cloche .dome:after{content:"";position:absolute;bottom:-14px;left:-6%;right:-6%;height:22px;border-radius:12px;background:linear-gradient(180deg,#c6c7cc,#5c5d63)}
.cloche .rim{position:absolute;inset:0;display:grid;place-items:center;animation:hint 2s ease-in-out infinite}
@keyframes hint{50%{transform:translateY(-8px)}}
.cloche.open>img{filter:none;transform:scale(1.02)}
.cloche.open .dome{transform:translateY(-120%) rotate(-14deg);opacity:0}
.reveal{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(7,5,6,.82);border:1px solid var(--line);border-radius:12px;padding:14px 18px;opacity:0;transform:translateY(20px);transition:.6s .7s}
.cloche.open .reveal{opacity:1;transform:none}
.reveal b{font:400 22px 'KB';display:block}.reveal span{font-size:14px;color:var(--mut)}
.qcard{margin-top:24px;border:1.5px solid var(--red);border-radius:18px;padding:28px;min-height:300px;box-shadow:0 0 34px rgba(211,18,62,.25)}
.qcard small{font:400 12px 'KM';color:var(--mut);letter-spacing:.1em}
.qcard h3{font:400 30px/1.1 'KB';margin:6px 0 20px;text-transform:uppercase}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt,.pp{border:1.5px solid rgba(246,236,210,.5);border-radius:999px;padding:11px 18px;font:600 15px 'KS';transition:.15s}
.opt:hover,.pp:hover{border-color:var(--gold1);color:var(--gold1)}
.pp.on{background:linear-gradient(180deg,var(--red2),var(--red));border-color:var(--red2);color:#fff}
.qbar{display:flex;gap:6px;margin-bottom:16px}.qbar i{flex:1;height:4px;border-radius:4px;background:#2a1a1d}.qbar i.on{background:var(--red2)}
.res{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;margin-bottom:20px}
.res .ph{width:150px;height:150px;border-radius:14px;object-fit:cover;border:1.5px solid var(--gold2)}
.res b{font:400 26px/1.1 'KB';display:block;margin-bottom:6px}
/* menu */
.menu-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:36px}
.arrows{display:flex;gap:10px}.arrows button{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--gold2);color:var(--gold1);font-size:22px}.arrows button:hover{background:rgba(214,168,74,.15)}
.track{display:flex;gap:22px;scroll-padding-inline:max(40px,calc((100vw - 1160px)/2));overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px max(40px,calc((100vw - 1160px)/2)) 30px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.course{flex:0 0 340px;height:480px;border-radius:20px;overflow:hidden;position:relative;scroll-snap-align:start;cursor:pointer;border:1px solid var(--line);background:#160b0e;transition:transform .3s,box-shadow .3s;text-align:left}
.course:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(211,18,62,.3);border-color:var(--gold2)}
.course img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.course:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(7,5,6,.95) 82%)}
.course .tx{position:absolute;left:22px;right:22px;bottom:22px;z-index:2}
.course .n{font:700 11px 'KM';letter-spacing:.16em;color:var(--red2)}
.course h3{font:400 26px/1.05 'KB';text-transform:uppercase;margin:6px 0 8px}
.course p{font-size:14px;color:#d8ccc9;line-height:1.45}
.siri{display:inline-block;margin-top:12px;font:400 11px 'KM';border:1px dashed var(--cream);padding:4px 8px;letter-spacing:.06em}
.noimg{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#3a0d18,#120809 70%)}
.noimg span{font:400 11px 'KM';letter-spacing:.16em;text-transform:uppercase;color:var(--mut);border:1px dashed rgba(246,236,210,.35);padding:8px 10px;margin-top:-90px}
.noimg:before{content:"";position:absolute;top:22%;width:120px;height:80px;border-radius:60px 60px 6px 6px;background:radial-gradient(ellipse at 34% 22%,#fff,#a9aab0 55%,#55565c);opacity:.5}
/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(5,3,4,.92);backdrop-filter:blur(8px);display:none;place-items:center;padding:30px}
.modal.on{display:grid;animation:fade .25s}@keyframes fade{from{opacity:0}}
.mbox{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:1000px;width:100%}
.mbox .im{border:2px solid var(--gold2);border-radius:18px;overflow:hidden;aspect-ratio:4/5;position:relative;background:#160b0e}
.mbox .im img{width:100%;height:100%;object-fit:cover}
.mbox h3{font:400 44px/1 'KB';text-transform:uppercase;margin:10px 0 14px}
.mbox p{color:#d8ccc9;font-size:18px}
.mbox .row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.x{position:absolute;top:22px;right:28px;font-size:30px;color:#fff}
/* box */
.box .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.box label.k{display:block;font:700 11px 'KM';letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin:22px 0 10px}
.box input,.box textarea,.join input{width:100%;background:#0c0708;border:1px solid rgba(246,236,210,.22);border-radius:10px;padding:14px 16px;color:var(--txt);font:16px 'KS'}
.box input:focus,.box textarea:focus{outline:none;border-color:var(--red2)}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pp{font-size:14px;padding:9px 15px}
.sum{margin-top:24px;padding:18px;border-radius:12px;background:#0c0708;border:1px dashed var(--line);font:400 13px/1.6 'KM';color:var(--mut);white-space:pre-wrap;min-height:90px}
.box .side ul{list-style:none;margin-top:26px;display:grid;gap:12px;color:var(--mut)}.box .side li:before{content:"✦ ";color:var(--gold2)}
/* footer */
footer{border-top:1px solid var(--line);padding:80px 0 120px;margin-top:40px}
footer .grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.join{border:1.5px solid var(--gold2);border-radius:20px;padding:34px}
.join h3,.share h3{font:400 30px 'KB';text-transform:uppercase;margin-bottom:10px}
.join form{display:flex;gap:12px;margin-top:18px}
.share{border:1px solid var(--line);border-radius:20px;padding:34px;display:grid;grid-template-columns:170px 1fr;gap:28px;align-items:center}
.share img{width:170px;border-radius:12px}
.disc{text-align:center;color:var(--mut);font-size:13px;margin-top:50px;line-height:1.8}
.disc b{color:var(--gold1);font-weight:600}
.float{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;transition:.3s}
.float.hide{opacity:0;pointer-events:none;transform:translate(-50%,20px)}
.toast{position:fixed;top:84px;left:50%;transform:translate(-50%,-30px);opacity:0;z-index:120;background:var(--cream);color:#1b1012;font-weight:700;padding:12px 20px;border-radius:999px;transition:.35s;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* responsive */
@media(max-width:980px){
 .wrap{padding:0 20px}.nav nav a.l{display:none}.nav .wrap{height:58px}.brand{font-size:20px}.nav nav{gap:8px}.snd{padding:8px 12px;font-size:12px}.nav .btn{padding:9px 14px}
 .hero{padding-top:24px}.hero .wrap{grid-template-columns:1fr;gap:10px;min-height:0;text-align:center}
 .logo{width:270px;height:270px;padding:9px}.halo{width:340px;height:340px}.stage{padding:10px 0 30px}
 .bubble{font-size:14px;min-width:200px;padding:11px 16px}
 .copy h1{font-size:62px;margin-top:20px}.copy p.tl{font-size:16px;margin:16px auto 22px}.copy .row{justify-content:center}.copy .row .btn{flex:1;min-width:150px;padding:14px 12px}
 .marquee div{font-size:14px}
 section{padding:70px 0}
 .drop .wrap,.play .grid,.box .grid,footer .grid{grid-template-columns:1fr}
 .cd{padding:28px 18px}.units b{font-size:30px}.units{gap:8px}
 .panel{padding:22px}.qcard{padding:20px;min-height:0}
 .menu-head{flex-direction:column;align-items:start}.arrows{display:none}
 .track{padding:6px 20px 24px;gap:14px}.course{flex-basis:78vw;height:420px}
 .mbox{grid-template-columns:1fr;gap:16px}.mbox .im{aspect-ratio:1/1}.mbox h3{font-size:28px}.mbox p{font-size:15px}.mbox .row{margin-top:16px}
 .res{grid-template-columns:96px 1fr}.res .ph{width:96px;height:96px}.res b{font-size:20px}
 .share{grid-template-columns:1fr;text-align:center}.share img{margin:0 auto}
 .join form{flex-direction:column}
}
.panel#vibe{display:flex;flex-direction:column}.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:auto;padding-top:22px}.thumbs img{aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line);width:100%}
@media(max-width:980px){.track{scroll-padding-inline:20px}}