/* Victorious Universe — public site. Same HUD look as Vai: deep navy, royal blue, gold, cyan. */
@font-face{font-family:Rajdhani;font-weight:600;font-display:swap;src:url(fonts/rajdhani-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Rajdhani;font-weight:700;font-display:swap;src:url(fonts/rajdhani-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Unbounded;font-weight:700;font-display:swap;src:url(fonts/unbounded-latin-700-normal.woff2) format('woff2')}

:root{
  --bg:#03050d; --bg2:#070b1a; --panel:#0b1226; --panel2:#0e1730; --line:#1b2a52; --line2:#27407a;
  --text:#e9eefc; --mute:#9aa7c9; --dim:#6d7aa0;
  --blue:#2f6bff; --gold:#f4c542; --gold2:#ffdb70; --cyan:#33e1ff;
  --c-music:#f4c542; --c-commercials:#ff9f43; --c-graphics:#b46bff; --c-web:#33e1ff; --c-video:#ff4d6d;
  --display:Unbounded,Rajdhani,system-ui,sans-serif; --hud:Rajdhani,system-ui,sans-serif;
  --body:Barlow,system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:4px; --wrap:1160px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(51,225,255,.035) 0 1px,transparent 1px 3px)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan)}
h1,h2,h3{margin:0;line-height:1.15}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;position:relative;z-index:1}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#000;padding:8px 14px;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:12px 20px;
  background:rgba(3,5,13,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--cyan) 80%,transparent);opacity:.55}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:700 17px/1 var(--hud);letter-spacing:.14em;white-space:nowrap}
.brand b{color:var(--gold)}
.brand img{width:44px;height:auto}
#nav{display:flex;align-items:center;gap:4px;margin-left:auto}
#nav a{color:var(--mute);text-decoration:none;font:600 15px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;padding:10px 12px;border-radius:var(--r)}
#nav a:hover{color:var(--text);background:rgba(47,107,255,.12)}
#nav a[aria-current=page]{color:var(--gold)}
#nav a.cta{margin-left:8px;color:#0a0a0a;background:var(--gold);padding:11px 16px}
#nav a.cta:hover{background:var(--gold2)}
.menu{display:none;margin-left:auto;background:none;border:1px solid var(--line2);border-radius:var(--r);width:44px;height:40px;padding:10px;cursor:pointer}
.menu i{display:block;height:2px;background:var(--text);margin:4px 0;transition:.2s}
.menu[aria-expanded=true] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded=true] i:nth-child(2){opacity:0}
.menu[aria-expanded=true] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--r);
  font:700 16px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent}
.btn.gold{background:var(--gold);color:#0a0a0a;box-shadow:0 0 24px rgba(244,197,66,.25)}
.btn.gold:hover{background:var(--gold2)}
.btn.ghost{border-color:var(--line2);color:var(--text);background:rgba(11,18,38,.6)}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn[disabled]{opacity:.6;cursor:wait}

/* hero */
.hero{position:relative;overflow:hidden;padding:72px 0 80px;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 70% at 18% 40%,rgba(47,107,255,.28),transparent 70%),
             radial-gradient(40% 50% at 85% 20%,rgba(244,197,66,.12),transparent 70%),
             linear-gradient(rgba(51,225,255,.06) 1px,transparent 1px) 0 0/48px 48px,
             linear-gradient(90deg,rgba(51,225,255,.06) 1px,transparent 1px) 0 0/48px 48px}
.hero-in{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:56px;align-items:center}
.hero-logo{filter:drop-shadow(0 0 40px rgba(47,107,255,.45))}
.kicker{font:600 14px/1 var(--mono);letter-spacing:.24em;color:var(--cyan);margin:0 0 16px;text-transform:uppercase}
.hero h1,.page-hero h1{font:700 clamp(30px,4.6vw,54px)/1.08 var(--display);letter-spacing:-.01em}
.lead{color:var(--mute);font-size:clamp(17px,1.6vw,20px);max-width:62ch;margin:20px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.page-hero{position:relative;padding:64px 0 56px;border-bottom:1px solid var(--line);overflow:hidden;
  background:radial-gradient(55% 90% at 10% 0%,color-mix(in srgb,var(--c,var(--blue)) 22%,transparent),transparent 70%),var(--bg2)}
.page-hero::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;max-width:var(--wrap);margin:0 auto;
  background:linear-gradient(90deg,var(--c,var(--gold)),transparent)}
.page-hero .kicker{color:var(--c,var(--cyan))}
.page-hero .btn{margin-top:28px}
.ticks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px;max-width:70ch}
.ticks li{position:relative;padding-left:28px;color:var(--text)}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;border-left:2px solid var(--c,var(--gold));border-bottom:2px solid var(--c,var(--gold));transform:rotate(-45deg)}

/* bands */
.band{padding:72px 0;position:relative}
.band.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-h{display:flex;align-items:baseline;gap:16px;margin-bottom:32px}
.sec-h .idx{font:400 13px/1 var(--mono);color:var(--gold);letter-spacing:.2em;padding:6px 8px;border:1px solid rgba(244,197,66,.4);border-radius:2px}
.sec-h h2{font:700 clamp(24px,3vw,34px)/1.1 var(--hud);letter-spacing:.04em;text-transform:uppercase}
.sub-h{font:700 20px/1.2 var(--hud);letter-spacing:.08em;text-transform:uppercase;margin:40px 0 16px;color:var(--gold)}
.note{color:var(--mute);margin:24px 0 0;font-size:15px}

/* service tiles */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.svc{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;min-height:230px;text-decoration:none;color:var(--text);
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);transition:.2s;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.svc:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.45),0 0 0 1px var(--c) inset}
.svc .k{font:400 12px/1 var(--mono);letter-spacing:.2em;color:var(--c)}
.svc h3{font:700 24px/1.15 var(--hud);letter-spacing:.03em}
.svc p{color:var(--mute);margin:0;font-size:16px}
.svc .from{margin-top:auto;font:700 18px/1 var(--hud);color:var(--gold);letter-spacing:.06em}
.svc .go{position:absolute;right:20px;bottom:18px;font-size:22px;color:var(--c);transition:.2s}
.svc:hover .go{transform:translateX(4px)}

/* process */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.steps li{counter-increment:s;position:relative;padding:56px 20px 22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.steps li::before{content:"0" counter(s);position:absolute;top:18px;left:20px;font:400 14px/1 var(--mono);color:var(--cyan);letter-spacing:.15em}
.steps b{display:block;font:700 20px/1.2 var(--hud);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.steps span{color:var(--mute);font-size:15.5px}

/* prices */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.price{padding:22px 22px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.price-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px dashed var(--line2);padding-bottom:12px;margin-bottom:12px}
.price h3{font:700 19px/1.2 var(--hud);letter-spacing:.04em}
.price-top b{font:700 30px/1 var(--hud);color:var(--gold);white-space:nowrap}
.price p{margin:0;color:var(--mute);font-size:15.5px}
.bundles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bundle{display:flex;flex-direction:column;align-items:center;padding:20px 10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);text-align:center}
.bundle b{font:700 40px/1 var(--display);color:var(--text)}
.bundle span{font:600 13px/1 var(--hud);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.bundle em{font:700 24px/1 var(--hud);font-style:normal;color:var(--gold);margin-top:14px}
.bundle small{font:400 12px/1 var(--mono);color:var(--cyan);margin-top:8px}

/* portfolio */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.work-empty{grid-column:1/-1;margin:0;padding:28px;border:1px dashed var(--line2);border-radius:var(--r);color:var(--mute);background:rgba(11,18,38,.5)}
.work-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.work-item img,.work-item video{width:100%;aspect-ratio:1;object-fit:cover;background:#000}
.work-item audio{width:100%;margin-top:10px}
.work-item .wi{padding:14px 16px}
.work-item .wi span{font:400 11px/1 var(--mono);letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}
.work-item h3{font:700 18px/1.2 var(--hud);margin-top:6px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filters button{font:600 14px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;padding:11px 16px;border-radius:var(--r);border:1px solid var(--line2);background:var(--panel);color:var(--mute);cursor:pointer}
.filters button.on,.filters button:hover{color:#0a0a0a;background:var(--gold);border-color:var(--gold)}

/* cta band */
.cta-band{background:linear-gradient(90deg,rgba(47,107,255,.18),rgba(244,197,66,.1));border-top:1px solid var(--line);padding:56px 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-in h2{font:700 clamp(22px,2.6vw,30px)/1.2 var(--hud);letter-spacing:.03em}

/* form */
.form-wrap{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.req fieldset{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:22px 22px 8px;margin:0 0 20px}
.req legend{font:700 15px/1 var(--hud);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding:0 8px}
.req label{display:block;font:600 15px/1.3 var(--hud);letter-spacing:.06em;color:var(--mute);margin-bottom:16px}
.req input:not([type=checkbox]),.req select,.req textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;font:400 17px/1.4 var(--body);color:var(--text);
  background:#060a18;border:1px solid var(--line2);border-radius:var(--r)}
.req textarea{resize:vertical}
.req input:focus,.req select:focus,.req textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(51,225,255,.18)}
.req [aria-invalid=true]{border-color:#ff5a6a!important}
.req input[type=date]{color-scheme:dark}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consent{border-color:rgba(244,197,66,.45)!important}
.check{display:flex!important;gap:12px;align-items:flex-start;color:var(--text)!important;font:500 17px/1.45 var(--body)!important;letter-spacing:0!important;cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:var(--gold)}
.fine{color:var(--dim);font-size:14px;margin:0 0 14px}
.price-hint{margin:-4px 0 16px;color:var(--gold);font:600 16px/1.4 var(--hud);letter-spacing:.04em;min-height:1em}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:1.4em;margin:0 0 14px;font-weight:500}
.form-msg.err{color:#ff7a88}
.form-msg.ok{color:var(--cyan)}
.side{position:sticky;top:88px}
.side h2{font:700 20px/1.2 var(--hud);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.side .steps{grid-template-columns:1fr}

/* footer */
.foot{border-top:1px solid var(--line);background:#02040a;padding:40px 0 24px;position:relative;z-index:1}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-in>div:first-child{display:flex;gap:14px;align-items:flex-start}
.foot-in p{margin:0;color:var(--mute);font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;max-width:520px}
.foot-links a{color:var(--mute);text-decoration:none;font:600 14px/2 var(--hud);letter-spacing:.1em;text-transform:uppercase}
.foot-links a:hover{color:var(--gold)}
.foot .fine{max-width:var(--wrap);margin:28px auto 0;padding:0 20px}

/* responsive */
@media (max-width:1240px){
  .menu{display:block}
  #nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 12px 16px;
    background:rgba(3,5,13,.97);border-bottom:1px solid var(--line);max-height:calc(100dvh - 70px);overflow:auto}
  #nav.open{display:flex}
  #nav a{padding:14px 12px;font-size:17px}
  #nav a.cta{margin:8px 0 0;text-align:center}
}
@media (min-width:761px) and (max-width:1240px){#nav{left:auto;width:340px;border-left:1px solid var(--line)}}
@media (max-width:980px){
  .form-wrap{grid-template-columns:1fr}
  .side{position:static}
}
@media (max-width:760px){
  body{font-size:16px}
  .hero{padding:40px 0 56px}
  .hero-in{grid-template-columns:1fr;gap:28px}
  .hero-logo{max-width:220px}
  .band{padding:52px 0}
  .page-hero{padding:44px 0 40px}
  .bundles{grid-template-columns:repeat(2,1fr)}
  .row2{grid-template-columns:1fr;gap:0}
  .svc-grid,.price-grid{grid-template-columns:1fr}
  .hero-cta .btn{flex:1 1 100%}
  .brand-t>span{font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.c-music{--c:var(--c-music)}.c-commercials{--c:var(--c-commercials)}.c-graphics{--c:var(--c-graphics)}.c-web{--c:var(--c-web)}.c-video{--c:var(--c-video)}
.brand-t{display:flex;flex-direction:column;gap:5px}
.slogan{font:italic 500 13px/1.2 var(--body);letter-spacing:.02em;color:var(--cyan);text-transform:none}
.brand .slogan{white-space:nowrap}
.foot .slogan{display:inline-block;margin:2px 0}
@media (max-width:760px){.brand-t>span{font-size:14px}.brand .slogan{font-size:11.5px}}
@media (max-width:360px){.brand .slogan{white-space:normal}}
/* Home: the slogan is the headline, so the header doesn't repeat it */
body.home .brand .slogan{display:none}
.slogan-h{background:linear-gradient(100deg,var(--text) 30%,var(--gold2) 75%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
/* share the song */
.share{border-top:1px dashed var(--line2);margin:4px 0 18px;padding-top:16px}
.share-h{font:700 16px/1.2 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-bottom:6px}
.share-h span{font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--cyan);margin-left:8px;border:1px solid rgba(51,225,255,.4);padding:3px 6px;border-radius:2px;vertical-align:2px}
.share-why{color:var(--mute);font-size:15px;margin:0 0 14px}
.pick{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start}
.pick .or{font:400 12px/1 var(--mono);letter-spacing:.2em;color:var(--dim);text-transform:uppercase;padding-top:42px}
.req label.file input[type=file]{padding:9px 10px;font-size:14px;cursor:pointer}
.req label.file input[type=file]::file-selector-button{font:700 13px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;background:var(--panel2);color:var(--gold);border:1px solid rgba(244,197,66,.5);border-radius:3px;padding:8px 12px;margin-right:10px;cursor:pointer}
.req label.file small{display:block;margin-top:6px;font:400 12.5px/1.3 var(--body);letter-spacing:0;color:var(--dim)}
@media (max-width:760px){.pick{grid-template-columns:1fr;gap:0}.pick .or{padding:0 0 12px}}

/* ---- quote page (the link in a client's quote email) */
.q-page .wrap{max-width:760px}
.q-flash{margin:14px 0 0;padding:10px 14px;border-left:3px solid var(--cyan);background:rgba(51,225,255,.08);color:var(--text);font:600 16px/1.4 var(--hud);letter-spacing:.03em}
.q-card{margin:26px 0 22px;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 0 40px rgba(47,107,255,.08)}
.q-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px dashed var(--line2)}
.q-head b{display:block;font:700 21px/1.25 var(--hud);letter-spacing:.03em}
.q-total{text-align:right}
.q-total b{font:700 34px/1 var(--hud);color:var(--gold)}
.q-k{display:block;font:600 11px/1 var(--mono);letter-spacing:.22em;color:var(--cyan);margin-bottom:8px}
.q-line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(39,64,122,.45)}
.q-line span{min-width:0}
.q-line span b{display:block;font-weight:600}
.q-line small{display:block;color:var(--mute);font-size:14px}
.q-line em{font-style:normal;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.q-line.sub{color:var(--mute)}
.q-line.tot{font:700 20px/1.2 var(--hud);border-bottom:0;padding-top:14px}
.q-line.tot em{color:var(--gold)}
.q-line.dep{color:var(--mute);border-bottom:0;padding-top:0}
.q-valid{margin:10px 0 0;color:var(--dim);font-size:14px}
.q-answer label{display:block;font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.q-answer label span{text-transform:none;letter-spacing:0;color:var(--dim)}
.q-answer textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);color:var(--text);font:inherit;padding:10px 12px;resize:vertical}
.q-answer textarea:focus{outline:2px solid var(--cyan);outline-offset:1px}
.q-btns{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 8px}
.q-btns .btn{min-width:160px}
.q-state{padding:18px 20px;border:1px solid var(--line2);border-radius:var(--r);background:rgba(11,18,38,.6)}
.q-state.ok{border-color:rgba(244,197,66,.55);box-shadow:0 0 30px rgba(244,197,66,.08)}
.q-state b{display:block;font:700 20px/1.3 var(--hud);letter-spacing:.03em}
.q-state p{margin:6px 0 14px;color:var(--mute)}

/* ---- Shop */
.shop-hero .btn{margin-top:18px}
.cart-n{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:10px;padding:0 6px;border-radius:12px;background:var(--gold);color:#0a0a0a;font:700 13px/1 var(--hud);letter-spacing:0}
.shop-wrap{padding:40px 20px 80px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.shop-empty{color:var(--mute);grid-column:1/-1;text-align:center;padding:40px 0}
.pcard{display:flex;flex-direction:column;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0;cursor:pointer;color:var(--text);font:inherit;overflow:hidden;transition:border-color .2s,transform .2s}
.pcard:hover,.pcard:focus-visible{border-color:var(--gold);transform:translateY(-2px);outline:none}
.pimg{aspect-ratio:1;background:#0d1530;display:block}
.pimg img{width:100%;height:100%;object-fit:cover}
.pinfo{display:flex;flex-direction:column;gap:2px;padding:14px 16px 16px;border-top:1px solid var(--line)}
.pinfo b{font:600 17px/1.3 var(--body)}
.pinfo span{color:var(--gold);font:600 15px/1 var(--mono)}
.shop-dlg{width:min(920px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);color:var(--text)}
.shop-dlg::backdrop{background:rgba(2,3,10,.75)}
.shop-dlg .x,.cart .x{position:absolute;right:10px;top:8px;z-index:2;width:40px;height:40px;background:none;border:0;color:var(--mute);font-size:28px;cursor:pointer}
.pd{display:grid;grid-template-columns:1.05fr 1fr}
.pd-img{background:#0d1530}
.pd-img img{width:100%;aspect-ratio:1;object-fit:cover}
.pd-b{padding:28px 26px;display:flex;flex-direction:column;gap:14px}
.pd-b h2{font:700 24px/1.2 var(--display);padding-right:30px}
.pd-price{margin:0;color:var(--gold);font:600 22px/1 var(--mono)}
.pd-opt>span,.pd-qty>span{display:block;font:600 12px/1 var(--hud);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.pd-opt>div{display:flex;flex-wrap:wrap;gap:8px}
.ov{min-width:44px;min-height:40px;padding:0 12px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);color:var(--text);font:600 14px/1 var(--body);cursor:pointer}
.ov.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.ov.sw{width:40px;min-width:40px;padding:0;border-radius:50%;background:var(--sw,#888);border:2px solid var(--line2)}
.ov.sw.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(244,197,66,.35)}
.pd-qty{display:flex;align-items:center;gap:12px}.pd-qty>span{margin:0}
.pd-qty button,.cl-q button{width:36px;height:36px;background:var(--panel);border:1px solid var(--line2);color:var(--text);font-size:18px;border-radius:var(--r);cursor:pointer}
.pd-desc{color:var(--mute);font-size:15px;line-height:1.55;max-height:160px;overflow:auto}
.shop-dim{position:fixed;inset:0;z-index:60;background:rgba(2,3,10,.6)}
.cart{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(440px,100vw);overflow:auto;background:var(--bg2);border-left:1px solid var(--line2);padding:22px 22px 40px;transform:translateX(100%);transition:transform .25s ease}
.cart.on{transform:none}
.cart-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cart-h h2{font:700 22px/1 var(--display)}.cart-h .x{position:static}
.cl{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.cl img{width:64px;height:64px;object-fit:cover;border-radius:3px;background:#0d1530}
.cl div{display:flex;flex-direction:column;gap:2px;font-size:15px}.cl div span{color:var(--mute);font-size:13px}
.cl>b{font:600 15px/1 var(--mono)}
.cl-q{display:flex;align-items:center;gap:10px;margin-top:4px;color:var(--text)!important}
.cl-q button{width:30px;height:30px;font-size:16px}
.cart-sum{margin:14px 0}
.cart-sum div{display:flex;justify-content:space-between;padding:6px 0;color:var(--mute)}
.cart-sum b{color:var(--text);font-family:var(--mono)}
.cart-sum .tot{border-top:1px solid var(--line2);margin-top:6px;padding-top:12px;color:var(--text)}
.cart-sum .tot b{color:var(--gold);font-size:20px}
.cart-form h3{font:700 16px/1 var(--hud);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:6px 0 4px}
.cart-form{display:flex;flex-direction:column;gap:10px}
.cart-form label{font-size:14px;color:var(--mute)}
.cart-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cart-form .hp{position:absolute;left:-9999px}
.cart-form .err{color:#ff8b9b;min-height:1.2em;margin:0}
.cart-done{display:flex;flex-direction:column;gap:12px}
.cart-done h3{font:700 24px/1 var(--display)}
@media (max-width:760px){.pd{grid-template-columns:1fr}.pd-b{padding:20px 18px 24px}.shop-grid{grid-template-columns:repeat(2,1fr);gap:12px}.pinfo{padding:10px 12px 12px}.pinfo b{font-size:15px}}
.cart [hidden],.shop-wrap [hidden]{display:none!important}

/* ---- Intro (home page, once per visit) */
html.intro-lock,html.intro-lock body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:100;background:#000;display:none;transition:opacity .9s ease,visibility .9s}
.intro.on{display:block}
.intro.out{opacity:0;visibility:hidden;pointer-events:none}
.intro-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);max-width:none;object-fit:cover;filter:blur(28px) brightness(.45);transform:scale(1.05)}
.intro-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-aspect-ratio:4/3){.intro-v{object-fit:contain}}
.intro-skip{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));padding:10px 16px;background:rgba(3,5,13,.55);border:1px solid rgba(255,255,255,.25);border-radius:var(--r);color:#fff;font:700 13px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px)}
.intro-skip:hover{border-color:var(--gold);color:var(--gold)}

/* ---- Vai, the website guide */
.vw{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;font-family:var(--body)}
.vw-fab{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;background:rgba(7,11,26,.92);border:1px solid var(--line2);border-radius:40px;color:var(--text);font:700 14px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 24px rgba(51,225,255,.15);transition:border-color .2s,transform .2s}
.vw-fab:hover{border-color:var(--cyan);transform:translateY(-2px)}
.vw.open .vw-fab{display:none}
.vw-orb{position:relative;width:40px;height:40px;border-radius:50%;flex:none;background:radial-gradient(circle at 40% 36%,#fff6d8,#f4c542 26%,#2f6bff 62%,#03050d 78%);box-shadow:0 0 18px rgba(244,197,66,.55),0 0 34px rgba(51,225,255,.25);animation:vwPulse 2.8s ease-in-out infinite}
.vw-orb i{position:absolute;inset:-5px;border-radius:50%;border:1px dashed rgba(51,225,255,.55);animation:vwSpin 9s linear infinite}
.vw-orb.sm{width:32px;height:32px}
@keyframes vwPulse{50%{box-shadow:0 0 26px rgba(244,197,66,.8),0 0 48px rgba(51,225,255,.35);filter:brightness(1.1)}}
@keyframes vwSpin{to{transform:rotate(360deg)}}
.vw-hello{position:absolute;right:0;bottom:66px;width:260px;padding:14px 32px 14px 16px;background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--gold);border-radius:var(--r);font-size:15px;line-height:1.45;color:var(--text);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:vwIn .35s ease-out}
.vw-hello b{color:var(--gold)}
.vw-hello-x{position:absolute;right:4px;top:2px;background:none;border:0;color:var(--mute);font-size:20px;cursor:pointer;padding:4px 8px}
@keyframes vwIn{from{opacity:0;transform:translateY(8px)}}
.vw-panel{position:absolute;right:0;bottom:0;width:min(380px,calc(100vw - 24px));height:min(580px,calc(100dvh - 40px));display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.6),0 0 30px rgba(51,225,255,.12);animation:vwIn .25s ease-out}
.vw-panel[hidden]{display:none}
.vw-panel header{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(244,197,66,.08),transparent)}
.vw-panel header div{flex:1;display:flex;flex-direction:column}
.vw-panel header b{font:700 16px/1.1 var(--display)}
.vw-panel header span{font-size:12px;color:var(--mute);letter-spacing:.06em}
.vw-x{background:none;border:0;color:var(--mute);font-size:26px;cursor:pointer;width:36px;height:36px}
.vw-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.vw-m{max-width:86%;padding:10px 13px;border-radius:12px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.vw-m.v{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:3px}
.vw-m.u{align-self:flex-end;background:rgba(244,197,66,.14);border:1px solid rgba(244,197,66,.35);border-bottom-right-radius:3px}
.vw-m.t{display:flex;gap:4px;padding:14px}
.vw-m.t i{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:vwDot 1s infinite}
.vw-m.t i:nth-child(2){animation-delay:.15s}.vw-m.t i:nth-child(3){animation-delay:.3s}
@keyframes vwDot{50%{opacity:.25;transform:translateY(-3px)}}
.vw-sum{list-style:none;margin:8px 0 0;padding:0;white-space:normal}
.vw-sum li{padding:5px 0;border-top:1px solid var(--line);font-size:14px}
.vw-sum span{display:block;font:600 11px/1.2 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.vw-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;max-height:150px;overflow:auto}
.vw-chips:empty{display:none}
.vw-chips button{padding:8px 12px;background:transparent;border:1px solid var(--line2);border-radius:18px;color:var(--text);font:600 14px/1 var(--body);cursor:pointer}
.vw-chips button:hover,.vw-chips button:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
.vw-in{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.vw-in input{flex:1;min-width:0;padding:11px 12px;background:var(--panel);border:1px solid var(--line2);border-radius:6px;color:var(--text);font:400 16px/1.3 var(--body)}
.vw-in input:focus{outline:none;border-color:var(--cyan)}
.vw-in button{width:44px;background:var(--gold);border:0;border-radius:6px;color:#0a0a0a;font-size:16px;cursor:pointer}
@media (max-width:560px){
  .vw{right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .vw.open{left:0;right:0;bottom:0}
  .vw-panel{position:fixed;left:0;right:0;bottom:0;width:100%;height:min(86dvh,640px);border-radius:14px 14px 0 0}
  .vw-fab-t{display:none}.vw-fab{padding:7px}
}

/* ================================================================ Catalog (songs) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cat-hero{padding-bottom:70px}
.cat-eq{position:absolute;left:0;right:0;bottom:0;height:60px;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(244,197,66,.55) 0 3px,transparent 3px 9px);
  -webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000);clip-path:polygon(0 70%,4% 40%,8% 75%,12% 20%,16% 60%,20% 45%,24% 80%,28% 30%,32% 65%,36% 15%,40% 55%,44% 70%,48% 35%,52% 60%,56% 25%,60% 75%,64% 40%,68% 85%,72% 30%,76% 55%,80% 20%,84% 65%,88% 45%,92% 75%,96% 35%,100% 60%,100% 100%,0 100%)}
body.is-playing .cat-eq{animation:eqLive 1.2s ease-in-out infinite alternate}
@keyframes eqLive{from{opacity:.35}to{opacity:.75}}
.cat-tools{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px}
.cat-tools .filters{flex:1;min-width:260px}
.cat-tools-r{display:flex;gap:8px}
.cat-search input,.cat-sort select{background:var(--panel);border:1px solid var(--line2);color:var(--text);border-radius:var(--r);padding:11px 12px;font:15px var(--body);min-width:0}
.cat-search input{width:250px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.cat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;transition:border-color .2s,transform .2s;--pulse:0}
.cat-card:hover{border-color:var(--line2);transform:translateY(-3px)}
.cat-card.playing{border-color:var(--gold);box-shadow:0 0 calc(10px + 26px*var(--pulse)) rgba(244,197,66,calc(.15 + .35*var(--pulse)))}
.cat-card.playing.one{box-shadow:0 0 calc(12px + 36px*var(--pulse)) rgba(51,225,255,calc(.18 + .4*var(--pulse)))}
.cc-art{all:unset;display:block;width:100%;aspect-ratio:1;position:relative;cursor:pointer;overflow:hidden;
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--pal,#2f6bff) 65%,#000),#050914 75%)}
.cc-art img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cat-card:hover .cc-art img{transform:scale(1.04)}
.cat-card.playing .cc-art img{transform:scale(calc(1 + .025*var(--pulse)))}
.cc-noart{position:absolute;inset:0;display:grid;place-items:center;font:700 64px var(--display);color:rgba(255,255,255,.15)}
.cc-btn{position:absolute;right:12px;bottom:12px;width:52px;height:52px;border-radius:50%;background:var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.5);opacity:0;transform:translateY(6px);transition:.2s}
.cc-btn::before{content:"";position:absolute;left:21px;top:16px;border-left:16px solid #0a0a0a;border-top:10px solid transparent;border-bottom:10px solid transparent}
.cat-card:hover .cc-btn,.cc-art:focus-visible .cc-btn,.cat-card.playing .cc-btn{opacity:1;transform:none}
body.is-playing .cat-card.playing .cc-btn::before{left:18px;top:17px;width:16px;height:18px;border:0;background:linear-gradient(90deg,#0a0a0a 0 5px,transparent 5px 11px,#0a0a0a 11px)}
.cc-ring{position:absolute;inset:8px;border:2px solid rgba(244,197,66,calc(.65*var(--pulse,0)));border-radius:3px;transform:scale(calc(1 - .03*var(--pulse,0)));pointer-events:none}
.cat-card.one .cc-ring{border-color:rgba(51,225,255,calc(.8*var(--pulse,0)))}
.cc-pv,.cc-ft{position:absolute;left:10px;top:10px;font:600 10px/1 var(--mono);letter-spacing:.14em;padding:5px 7px;background:rgba(3,5,13,.8);color:var(--cyan);border:1px solid rgba(51,225,255,.4)}
.cc-ft{left:auto;right:10px;color:var(--gold);border-color:rgba(244,197,66,.45)}
.cc-b{padding:12px 14px 14px;display:grid;gap:4px}
.cc-t{all:unset;cursor:pointer;font:700 17px/1.2 var(--hud);letter-spacing:.03em;color:var(--text)}
.cc-t:hover,.cc-t:focus-visible{color:var(--gold2)}
.e{font:600 10px/1 var(--mono);font-style:normal;border:1px solid var(--mute);color:var(--mute);padding:2px 4px;vertical-align:middle;margin-left:4px}
.cc-a{color:var(--mute);font-size:14px}
.cc-m{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.cc-m em{font:500 11px/1 var(--mono);font-style:normal;color:var(--cyan);border:1px solid var(--line2);padding:4px 6px;border-radius:2px}
.cat-cta{margin-top:56px;padding:32px;border:1px solid var(--line);border-radius:var(--r);display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(90deg,rgba(244,197,66,.07),transparent)}
.cat-cta h2{font:700 clamp(20px,2.6vw,28px)/1.2 var(--hud);letter-spacing:.02em}
/* the player dock */
body.has-dock{padding-bottom:96px}
body.has-dock .vw{bottom:calc(96px + env(safe-area-inset-bottom))}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(5,8,20,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line2);--pulse:0}
.dock::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--pal,var(--gold)) 30%,var(--cyan) 70%,transparent);opacity:calc(.35 + .65*var(--pulse))}
.dock.one::before{background:linear-gradient(90deg,transparent,var(--cyan) 20%,#fff 50%,var(--cyan) 80%,transparent)}
.dock-in{max-width:var(--wrap);margin:0 auto;padding:10px 20px;display:grid;grid-template-columns:auto minmax(120px,220px) auto 1fr auto;gap:16px;align-items:center}
.dock-art{all:unset;width:56px;height:56px;border:1px solid var(--line2);overflow:hidden;cursor:pointer;background:var(--panel)}
.dock-art img{width:100%;height:100%;object-fit:cover}
.dock-meta{display:grid;min-width:0}
.dock-meta b{font:700 15px/1.25 var(--hud);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-meta span{color:var(--mute);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-beat{font:500 10.5px/1.4 var(--mono);font-style:normal;color:var(--gold);letter-spacing:.12em}
.dock.one .dock-beat{color:var(--cyan)}
.dock-btns{display:flex;gap:6px;align-items:center}
.dock-btns button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--text);cursor:pointer;font-size:13px}
.dock-btns .dock-play{width:48px;height:48px;background:var(--gold);color:#0a0a0a;border-color:var(--gold);font-size:15px;box-shadow:0 0 calc(6px + 18px*var(--pulse)) rgba(244,197,66,.55)}
.dock-wave{position:relative;height:56px;min-width:0}
.dock-wave canvas{width:100%;height:100%;display:block;cursor:pointer;touch-action:none}
.dock-time{position:absolute;right:0;top:-2px;font:500 10.5px var(--mono);color:var(--mute);background:rgba(5,8,20,.8);padding:0 4px}
.dock-cr{font:600 12px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;padding:11px 14px;border:1px solid var(--line2);background:transparent;color:var(--text);border-radius:var(--r);cursor:pointer}
.dock-cr:hover{border-color:var(--gold);color:var(--gold2)}
@media (max-width:760px){
  .dock-in{grid-template-columns:auto 1fr auto;grid-template-areas:"art meta btns" "wave wave wave";gap:8px 12px;padding:8px 14px 10px}
  .dock-art{grid-area:art;width:46px;height:46px}.dock-meta{grid-area:meta}.dock-btns{grid-area:btns}.dock-wave{grid-area:wave;height:40px}.dock-cr{display:none}
  .dock-btns button:not(.dock-play){display:none}
  body.has-dock{padding-bottom:120px} body.has-dock .vw{bottom:calc(120px + env(safe-area-inset-bottom))}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cc-b{padding:10px}.cc-t{font-size:15px}.cc-m em:nth-child(n+4){display:none}
  .cat-search input{width:100%}.cat-tools-r{width:100%}.cat-search{flex:1}
  .cc-btn{opacity:1;transform:none;width:42px;height:42px;right:8px;bottom:8px}.cc-btn::before{left:17px;top:12px;border-left-width:13px;border-top-width:9px;border-bottom-width:9px}
}
/* credits */
.cr-dlg,.gal-dlg{width:min(980px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);color:var(--text);overflow:auto}
.cr-dlg::backdrop,.gal-dlg::backdrop{background:rgba(2,3,10,.82);backdrop-filter:blur(3px)}
.cr-dlg .x,.gal-dlg .x{position:absolute;right:10px;top:8px;z-index:5;width:40px;height:40px;background:rgba(3,5,13,.6);border:0;color:var(--mute);font-size:28px;cursor:pointer}
.cr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.cr-art{padding:24px;display:grid;gap:14px;align-content:start;background:linear-gradient(180deg,rgba(244,197,66,.06),transparent)}
.cr-art img,.cr-art .cc-noart{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line2);position:relative}
.cr-play{width:100%;text-align:center}
.cr-links{display:flex;gap:8px;flex-wrap:wrap}
.cr-links a{font:600 12px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--line2);border-radius:var(--r);text-decoration:none;color:var(--text)}
.cr-links a:hover{border-color:var(--cyan);color:var(--cyan)}
.cr-b{padding:28px 28px 30px}
.cr-b h2{font:700 clamp(24px,3vw,34px)/1.1 var(--display);margin:6px 0}
.cr-by{color:var(--gold2);font:600 17px var(--hud);letter-spacing:.04em;margin:0 0 12px}
.cr-about{color:var(--mute)}
.cr-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin:18px 0}
.cr-facts div{padding:10px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cr-facts dt,.cr-list dt,.gd-facts dt{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cr-facts dd{margin:2px 0 0;font:600 15px var(--hud);letter-spacing:.02em}
.cr-list{display:grid;gap:0;margin:0 0 16px}
.cr-list div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.cr-list dd{margin:0}
.cr-c{font-size:13px;color:var(--dim)}
.cr-ly summary{cursor:pointer;font:600 13px var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);padding:8px 0}
.cr-ly pre{white-space:pre-wrap;font:15px/1.7 var(--body);color:var(--mute);max-height:340px;overflow:auto;margin:6px 0 0}
.cr-req{margin-top:18px}
@media (max-width:760px){.cr{grid-template-columns:1fr}.cr-art{padding:18px 18px 0}.cr-art img,.cr-art .cc-noart{max-width:300px;margin:0 auto}.cr-b{padding:18px 18px 24px}.cr-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.cr-list div{grid-template-columns:1fr;gap:2px}}

/* ================================================================ Gallery (HUD) */
.gal-hero{background:radial-gradient(900px 300px at 70% 0,rgba(180,107,255,.16),transparent),radial-gradient(700px 260px at 10% 100%,rgba(51,225,255,.1),transparent)}
.gal-sys{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;font:500 12px var(--mono);letter-spacing:.16em;color:var(--cyan)}
.gal-sys i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:sysBlink 1.6s steps(2,end) infinite}
@keyframes sysBlink{50%{opacity:.15}}
.gal-grid{columns:280px;column-gap:20px}
.hud{break-inside:avoid;margin:0 0 20px;position:relative;--glow:#33e1ff}
.hud-hit{all:unset;display:block;position:relative;cursor:pointer;padding:10px;border:1px solid rgba(51,225,255,.18);background:linear-gradient(180deg,rgba(11,18,38,.9),rgba(3,5,13,.95));transition:border-color .25s,box-shadow .25s}
.hud-hit:hover,.hud-hit:focus-visible{border-color:rgba(51,225,255,.55);box-shadow:0 0 24px color-mix(in srgb,var(--glow) 35%,transparent)}
.hud-frame{display:block;position:relative;overflow:hidden;background:repeating-linear-gradient(0deg,rgba(51,225,255,.06) 0 1px,transparent 1px 3px),#02040a}
.hud-frame img{width:100%;height:100%;object-fit:cover;opacity:0}
.hud.on .hud-frame img,.gd-frame.on img{opacity:1}
.hud-scan{position:absolute;left:0;right:0;top:-35%;height:35%;background:linear-gradient(180deg,transparent,rgba(51,225,255,.32) 70%,rgba(255,255,255,.55) 72%,transparent 74%);opacity:0;pointer-events:none;z-index:2}
.hud-noise{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 2px),repeating-linear-gradient(90deg,rgba(51,225,255,.07) 0 2px,transparent 2px 5px)}
.hc{position:absolute;width:14px;height:14px;border:0 solid var(--cyan);opacity:.35;z-index:3;transition:border-color .25s,opacity .25s}
.hc.tl{left:-1px;top:-1px;border-width:2px 0 0 2px}.hc.tr{right:-1px;top:-1px;border-width:2px 2px 0 0}.hc.bl{left:-1px;bottom:-1px;border-width:0 0 2px 2px}.hc.br{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.hud-hit:hover .hc{border-color:var(--gold);opacity:1}
.hud-id,.hud-res{position:absolute;z-index:3;font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--cyan);background:rgba(3,5,13,.78);padding:4px 6px;opacity:0;transition:opacity .3s}
.hud-id{left:16px;top:16px}.hud-res{right:16px;bottom:16px;color:var(--mute)}
.hud.on .hud-id,.hud.on .hud-res{opacity:1}
.hud figcaption{display:grid;gap:2px;padding:10px 2px 0}
.hud figcaption b{font:700 16px/1.25 var(--hud);letter-spacing:.03em}
.hud figcaption span{color:var(--dim);font-size:13.5px}
.hud-pal{display:flex!important;gap:3px;margin-top:4px}
.hud-pal i{width:22px;height:5px;display:block}

/* the boot-up flicker: scan line sweeps, the signal breaks up and splits, then locks */
.hud.boot .hud-frame img,.gd-frame.boot img{animation:hudFlick 1.05s steps(1,end) var(--d,0ms) both,hudLock .6s ease-out calc(var(--d,0ms) + 1.05s) both}
.hud.boot .hud-scan,.gd-frame.boot .hud-scan{animation:hudSweep 1.05s cubic-bezier(.4,0,.6,1) var(--d,0ms) both}
.hud.boot .hud-noise,.gd-frame.boot .hud-noise{animation:hudNoise 1.05s steps(1,end) var(--d,0ms) both}
.hud.boot .hc{animation:hudBrk .45s ease-out var(--d,0ms) both}
.hud.boot .hud-id,.hud.boot .hud-res{opacity:1;animation:hudTxt .9s steps(1,end) var(--d,0ms) both}
@keyframes hudFlick{
  0%{opacity:0;filter:brightness(3) saturate(0) contrast(2);clip-path:inset(0 0 100% 0);transform:none}
  6%{opacity:.9;clip-path:inset(0 0 78% 0)}
  10%{opacity:0}
  16%{opacity:.6;filter:brightness(2) hue-rotate(150deg) saturate(2.4);clip-path:inset(34% 0 40% 0);transform:translateX(-6px) skewX(-4deg)}
  21%{opacity:.15;transform:translateX(5px)}
  27%{opacity:.85;filter:brightness(1.6) saturate(.3) contrast(1.4);clip-path:inset(0 0 46% 0);transform:none}
  33%{opacity:.25;clip-path:inset(52% 0 0 0)}
  41%{opacity:1;filter:brightness(1.35) drop-shadow(-3px 0 0 rgba(255,0,90,.8)) drop-shadow(3px 0 0 rgba(0,240,255,.8));clip-path:inset(0 0 18% 0)}
  49%{opacity:.5;transform:translateX(3px)}
  56%{opacity:1;clip-path:inset(0);transform:none;filter:brightness(1.2) drop-shadow(-2px 0 0 rgba(255,0,90,.6)) drop-shadow(2px 0 0 rgba(0,240,255,.6))}
  66%{opacity:.7}
  74%{opacity:1;filter:brightness(1.12) drop-shadow(-1px 0 0 rgba(255,0,90,.45)) drop-shadow(1px 0 0 rgba(0,240,255,.45))}
  86%{opacity:.88}
  100%{opacity:1;filter:brightness(1.06);clip-path:inset(0)}
}
@keyframes hudLock{from{filter:brightness(1.06)}to{filter:none;opacity:1}}
@keyframes hudSweep{0%{opacity:1;top:-35%}85%{opacity:1}100%{opacity:0;top:100%}}
@keyframes hudNoise{0%{opacity:.9}12%{opacity:.2}20%{opacity:.7}35%{opacity:.1}45%{opacity:.45}60%{opacity:0}70%{opacity:.25}80%,100%{opacity:0}}
@keyframes hudBrk{from{opacity:0;transform:scale(2.2)}to{opacity:.35;transform:none}}
@keyframes hudTxt{0%{opacity:0}15%{opacity:1}22%{opacity:0}30%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hud-frame img,.gd-frame img{transition:opacity .4s}}

/* one piece */
.gd{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.gd-stage{position:relative;padding:22px;background:radial-gradient(circle at 50% 40%,rgba(51,225,255,.08),transparent 70%),#02040a;display:grid;place-items:center;min-height:320px}
.gd-frame{position:relative;max-height:calc(100dvh - 120px);overflow:hidden}
.gd-frame img{max-height:calc(100dvh - 120px);width:auto;max-width:100%;object-fit:contain;opacity:0}
.gd-ret{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border:1px solid rgba(51,225,255,.7);border-radius:50%;opacity:0;pointer-events:none;z-index:3}
.gd-ret::before,.gd-ret::after{content:"";position:absolute;background:rgba(51,225,255,.7)}
.gd-ret::before{left:50%;top:-14px;bottom:-14px;width:1px}.gd-ret::after{top:50%;left:-14px;right:-14px;height:1px}
.gd-frame.boot .gd-ret{animation:gdRet 1.1s ease-out both}
@keyframes gdRet{0%{opacity:0;transform:scale(2.4)}30%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(.6)}}
.gd-stage .hc{width:20px;height:20px;opacity:.8}
.gd-stage .hc.tl{left:10px;top:10px}.gd-stage .hc.tr{right:10px;top:10px}.gd-stage .hc.bl{left:10px;bottom:10px}.gd-stage .hc.br{right:10px;bottom:10px}
.gd-read{position:absolute;z-index:3;font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;color:var(--cyan);text-shadow:0 0 6px rgba(51,225,255,.5)}
.gd-read.tl{left:36px;top:30px}.gd-read.br{right:36px;bottom:30px;text-align:right;color:var(--mute)}
.gd-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:1px solid rgba(51,225,255,.3);background:rgba(3,5,13,.6);color:var(--text);font-size:30px;cursor:pointer;z-index:4}
.gd-nav.prev{left:14px}.gd-nav.next{right:14px}
.gd-nav:hover{border-color:var(--gold);color:var(--gold2)}
.gd-b{padding:30px 26px;display:grid;gap:12px;align-content:start}
.gd-b h2{font:700 clamp(22px,2.6vw,30px)/1.15 var(--display)}
.gd-b .btn{justify-self:start}
.gd-facts{display:grid;gap:8px;margin:0}
.gd-facts div{display:grid;grid-template-columns:110px 1fr}
.gd-facts dd{margin:0}
.gd-desc{color:var(--mute);margin:0}
.gd-pal{display:flex;flex-wrap:wrap;gap:10px}
.gd-pal span{display:flex;align-items:center;gap:6px;font:500 11px var(--mono);color:var(--mute)}
.gd-pal i{width:22px;height:22px;border:1px solid rgba(255,255,255,.2);display:block}
.gd-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.gd-tags span{font:500 12px var(--mono);color:var(--cyan)}
@media (max-width:860px){.gd{grid-template-columns:1fr}.gd-stage{padding:14px;min-height:0}.gd-frame,.gd-frame img{max-height:62dvh}.gd-read{display:none}.gd-nav{width:36px;height:52px}.gd-b{padding:20px 18px 26px}}
@media (max-width:560px){.gal-grid{columns:2;column-gap:10px}.hud{margin-bottom:10px}.hud-hit{padding:6px}.hud-id{left:10px;top:10px;font-size:8.5px}.hud-res{display:none}.hud figcaption b{font-size:14px}}

/* ---- VU Radio ---- */
.radio{padding:56px 0 72px;position:relative;overflow:hidden}
.radio::before{content:"";position:absolute;inset:-20% -10% auto;height:520px;background:radial-gradient(ellipse at 50% 30%,rgba(255,77,109,.16),transparent 60%),radial-gradient(ellipse at 30% 60%,rgba(47,107,255,.14),transparent 60%);pointer-events:none}
.r-head{text-align:center;position:relative}
.r-head h1{font-family:var(--display);font-size:clamp(40px,8vw,84px);letter-spacing:.06em;background:linear-gradient(180deg,#fff,var(--gold2) 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;margin:10px 0 6px}
.r-tag{color:var(--mute);margin:0}
.r-state{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);letter-spacing:.28em;color:#fff;background:#d81f3d;padding:7px 12px;box-shadow:0 0 22px rgba(255,45,74,.5)}
.r-state::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:rpulse 1.4s infinite}
.radio.off-air .r-state{background:var(--panel2);box-shadow:none;color:var(--mute)} .radio.off-air .r-state::before{background:var(--dim);animation:none}
@keyframes rpulse{50%{opacity:.25}}
.r-eq{display:flex;width:100%;align-items:flex-end;justify-content:center;gap:3px;height:64px;margin:26px auto 0;max-width:520px}
.r-eq-hz{position:relative;width:100%;max-width:520px;height:16px;margin:4px auto 16px;font:400 10px/1 var(--mono,monospace);color:var(--dim);letter-spacing:.06em}
.r-eq-hz span{position:absolute;top:2px;transform:translateX(-50%);white-space:nowrap}
.r-eq-hz span:first-child{transform:none}.r-eq-hz span:last-child{transform:translateX(-100%)}
.radio.off-air .r-eq-hz{opacity:.3}
.r-eq i{flex:1;height:100%;background:linear-gradient(0deg,var(--blue),var(--cyan) 60%,var(--gold));transform-origin:bottom;transform:scaleY(.1);border-radius:2px 2px 0 0;opacity:.85}
.radio.off-air .r-eq{opacity:.25}
.r-now{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center;max-width:860px;margin:0 auto;padding:22px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line2);border-top:3px solid #ff4d6d;position:relative}
.r-art img{width:200px;height:200px;object-fit:cover;border:1px solid var(--line2);box-shadow:0 0 40px rgba(47,107,255,.25)} .r-art img.r-mark{object-fit:contain;padding:40px;background:var(--bg)}
.r-meta h2{font-family:var(--hud);font-size:clamp(26px,4vw,40px);letter-spacing:.02em;margin:6px 0 4px} .r-meta h2.r-dj{font-family:var(--body);font-size:20px;font-style:italic;font-weight:500;color:var(--gold2);line-height:1.45}
.r-artist{color:var(--mute);margin:0 0 14px}
.r-bar{height:4px;background:var(--line);overflow:hidden} .r-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff4d6d,var(--gold));box-shadow:0 0 10px rgba(255,77,109,.6)}
.r-time{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--dim);margin:6px 0 0}
.r-off{color:var(--mute);text-align:center;grid-column:1/-1;margin:20px 0}
.radio.off-air .r-now{grid-template-columns:1fr}
.r-ctl{display:flex;justify-content:center;align-items:center;gap:26px;flex-wrap:wrap;margin:26px 0}
.r-play{min-width:220px;font-size:16px;letter-spacing:.24em} .radio.off-air .r-play{opacity:.4;pointer-events:none}
.radio.playing .r-play{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.r-vol{display:flex;align-items:center;gap:10px;font:11px var(--mono);letter-spacing:.2em;color:var(--mute)} .r-vol input{accent-color:var(--gold);width:140px}
.r-up{max-width:860px;margin:10px auto 0} .r-up ol{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.r-up li{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:8px;background:var(--panel);border:1px solid var(--line)}
.r-up li span{grid-row:span 2;width:44px;height:44px;background:var(--bg)} .r-up li img{width:44px;height:44px;object-fit:cover}
.r-up li b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .r-up li i{font-style:normal;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-fine{text-align:center;color:var(--dim);font-size:14px;margin-top:30px}
.nav-live{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono)!important;letter-spacing:.18em;color:#fff!important;background:#d81f3d;padding:6px 9px!important;text-decoration:none}
.nav-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:rpulse 1.4s infinite}
@media (max-width:700px){.r-now{grid-template-columns:1fr;text-align:center}.r-art{display:flex;justify-content:center}.r-art img{width:160px;height:160px}}

/* ---- Audio & Visuals: one page each, a tab per category ---- */
.hub-hero{padding-bottom:44px}
.hub-tabs{position:sticky;top:62px;z-index:15;background:rgba(3,5,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hub-tabs-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.hub-tabs-in::-webkit-scrollbar{display:none}
.hub-tabs button{position:relative;flex:1 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px 22px 14px;background:none;border:0;color:var(--mute);cursor:pointer;text-align:left;min-width:170px}
.hub-tabs button b{font:700 17px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase}
.hub-tabs button span{font:400 11.5px/1.2 var(--mono);letter-spacing:.08em;color:var(--dim)}
.hub-tabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.hub-tabs button:hover{color:var(--text)}
.hub-tabs button.on{color:var(--text)}
.hub-tabs button.on b{color:var(--c)}
.hub-tabs button.on::after{transform:scaleX(1);box-shadow:0 0 12px var(--c)}
.hub-tabs button:focus-visible{outline:2px solid var(--c);outline-offset:-4px}
.hub-panel{padding:56px 0 72px}
.hub-intro{margin-bottom:28px}
.hub-intro .kicker,.hub-svc .kicker{color:var(--c,var(--cyan))}
.hub-h{font:700 clamp(26px,3.4vw,40px)/1.1 var(--display);letter-spacing:.01em}
.hub-svc{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start}
.hub-svc .btn{margin-top:28px}
.price-grid.one{grid-template-columns:1fr}
.hub-work-h{margin-top:64px}
.hub-radio{margin:32px 0 0;color:var(--mute)}
.hub-grid{grid-template-columns:repeat(3,1fr)}
.hub-tile{position:relative}
.hub-tile-a{position:absolute;inset:0;z-index:1}
.hub-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px!important;position:relative;z-index:2}
.hub-chips a{font:600 12.5px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--c);text-decoration:none;padding:7px 10px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:var(--r)}
.hub-chips a:hover{background:var(--c);color:#0a0a0a}
@media (max-width:980px){.hub-grid{grid-template-columns:1fr}.hub-svc{grid-template-columns:1fr;gap:32px}}
@media (max-width:760px){.hub-tabs{top:62px}.hub-tabs-in{padding:0 8px;gap:0}.hub-tabs button{flex:1 1 0;min-width:0;padding:13px 8px 11px;align-items:center;text-align:center}.hub-tabs button b{font-size:13px;letter-spacing:.06em;line-height:1.15}.hub-tabs button::after{left:8px;right:8px}.hub-tabs button span{display:none}.hub-panel{padding:36px 0 56px}}

/* ---- Vai: talk to her ---- */
.vw-in .vw-mic{width:44px;flex:none;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line2);border-radius:6px;color:var(--cyan);cursor:pointer}
.vw-in .vw-mic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.vw-in .vw-mic.on{background:#ff2d4a;border-color:#ff2d4a;color:#fff;animation:vwRec 1.2s ease-in-out infinite}
@keyframes vwRec{0%,100%{box-shadow:0 0 0 0 rgba(255,45,74,.55)}50%{box-shadow:0 0 0 8px rgba(255,45,74,0)}}
.vw-in .vw-send{width:44px}
.vw-snd{width:36px;height:36px;display:grid;place-items:center;background:none;border:1px solid var(--line2);border-radius:50%;color:var(--mute);cursor:pointer}
.vw-snd svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vw-snd.on{color:var(--gold);border-color:rgba(244,197,66,.6)}
.vw-m.n{align-self:center;max-width:100%;padding:4px 10px;background:none;border:0;font:600 12px/1.3 var(--mono);letter-spacing:.08em;color:var(--cyan)}
.vw.speaking .vw-panel .vw-orb{animation:vwTalk .5s ease-in-out infinite alternate}
@keyframes vwTalk{from{transform:scale(1);box-shadow:0 0 14px rgba(244,197,66,.5)}to{transform:scale(1.14);box-shadow:0 0 26px rgba(244,197,66,.85),0 0 40px rgba(51,225,255,.4)}}
.vw-panel header{cursor:default}
@media (max-width:760px){
  .vw.peek .vw-panel{height:min(46dvh,420px)}
  .vw-panel header{cursor:pointer}
}
@media (prefers-reduced-motion:reduce){.vw.speaking .vw-panel .vw-orb,.vw-mic.on{animation:none}}
/* VU Radio: artists submit their music */
.r-submit{max-width:860px;margin:34px auto 0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;background:linear-gradient(120deg,rgba(244,197,66,.09),rgba(51,225,255,.05));border:1px solid rgba(244,197,66,.35);border-radius:var(--r)}
.r-submit h2{font:700 22px/1.2 var(--hud);letter-spacing:.06em;text-transform:uppercase;margin:4px 0 6px}
.r-submit p{color:var(--mute);margin:0;font-size:15px}
.r-submit .btn{flex-shrink:0}
@media (max-width:640px){.r-submit{flex-direction:column;align-items:flex-start}}
.up-bar{height:6px;background:var(--panel2);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:4px 0 10px}
.up-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--cyan));transition:width .2s}
.sub-done{padding:34px 30px;background:var(--panel);border:1px solid rgba(244,197,66,.4);border-radius:var(--r)}
.sub-done h2{font:700 30px/1.15 var(--hud);letter-spacing:.04em;margin:6px 0 10px}
.sub-done p{color:var(--mute);margin:0 0 20px}
.req small{display:block;color:var(--dim);font-size:12.5px;margin-top:4px;font-weight:400}
/* Artist Store */
.store-wrap{padding:30px 0 70px}
.store-find{width:100%;max-width:420px;margin:0 0 22px;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:var(--r);font:inherit}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.st-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.st-card.playing,.st-card.lit{border-color:var(--gold)}
.st-art{position:relative;aspect-ratio:1;background:var(--bg2)}
.st-art img{width:100%;height:100%;object-fit:cover;display:block}
.st-play{position:absolute;right:12px;bottom:12px;width:48px;height:48px;border-radius:50%;border:0;background:var(--gold);color:#05070f;font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.st-card.playing .st-play{background:var(--cyan)}
.st-meta{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.st-meta h3{font:700 18px/1.2 var(--hud);letter-spacing:.03em;margin:0}
.st-e{font-style:normal;font-size:10px;border:1px solid var(--dim);color:var(--mute);padding:0 4px;border-radius:2px;vertical-align:middle;margin-left:4px}
.st-artist{color:var(--text);margin:0;font-size:15px}
.st-credits{color:var(--dim);margin:0 0 10px;font-size:13px}
.st-credits a{color:var(--cyan)}
.st-buy{margin-top:auto;width:100%}
.buy-dlg{border:1px solid var(--line2);background:var(--panel);color:var(--text);border-radius:var(--r);padding:0;width:min(440px,calc(100vw - 32px))}
.buy-dlg::backdrop{background:rgba(3,5,13,.78)}
.buy-in{padding:22px;position:relative}
.buy-in .x{position:absolute;right:10px;top:8px;background:none;border:0;color:var(--mute);font-size:26px;cursor:pointer}
.buy-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.buy-head img{width:88px;height:88px;object-fit:cover;border-radius:var(--r)}
.buy-head h3{font:700 20px/1.2 var(--hud);margin:2px 0}
.buy-head p{margin:0;color:var(--mute)}
.buy-price{color:var(--gold)!important;font:700 22px/1.2 var(--hud);margin-top:4px!important}
.buy-pay{margin-top:14px;min-height:60px}
.buy-done h4{font:700 20px/1.2 var(--hud);margin:0 0 12px}
.buy-done .btn{width:100%;margin-bottom:8px}
.price-in{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r)}
.price-in i{font-style:normal;padding:0 0 0 12px;color:var(--gold)}
.price-in input{border:0!important;background:transparent!important}
.pay-box{margin-top:18px;padding:22px;border:1px solid rgba(244,197,66,.4);border-radius:var(--r);background:var(--panel)}
.pay-box h3{font:700 22px/1.2 var(--hud);margin:4px 0}
#x-paypal{margin-top:12px;max-width:420px}

/* Production deal (request form) */
.deal-only { display: grid; gap: 10px; margin: 6px 0 4px; }
.deal-only[hidden] { display: none; }
.deal-only[aria-invalid] .deal { border-color: #ff6b6b; }
.deal { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; cursor: pointer; }
.deal:has(input:checked) { border-color: var(--gold, #e8b84a); background: rgba(232,184,74,.07); }
.deal input { margin-top: 4px; accent-color: var(--gold, #e8b84a); }
.deal span { display: grid; gap: 4px; }
.deal small { opacity: .75; font-size: 13px; line-height: 1.45; }
.req label.deal { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; text-transform: none; letter-spacing: 0; font-size: 15px; margin: 0; }
.req .deal input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 3px 0 0; border: 0; flex: none; background: none; box-shadow: none; }
.req .deal b { color: var(--gold); font-size: 15px; }

/* Production deals (Audio › Production) */
.deal-lead { color: var(--mute); margin: -4px 0 14px; }
.deal-table-wrap { overflow-x: auto; margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--r, 10px); background: var(--panel); }
.deal-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.deal-table th, .deal-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.deal-table thead th { font: 700 13px/1.2 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.deal-table tbody th { color: var(--mute); font-weight: 600; width: 30%; }
.deal-table tbody tr:first-child td { font: 700 22px/1.2 var(--hud); color: var(--gold); }
.deal-table tfoot td { border-bottom: 0; }
.deal-table .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) {
  .deal-table { min-width: 0; table-layout: fixed; }
  .deal-table th, .deal-table td { padding: 10px 8px; font-size: 13px; }
  .deal-table tbody th { width: 34%; }
  .deal-table tbody tr:first-child td { font-size: 18px; }
  .deal-table tfoot td { padding: 10px 6px; }
  .deal-table tfoot .btn { padding: 10px 8px; font-size: 11px; width: 100%; text-align: center; }
}

/* Feedback box (every page) */
.fb-band { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg2), var(--bg)); padding: 56px 0; }
.fb-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: start; }
.fb-l h2 { margin: 6px 0 10px; }
.fb-l p { color: var(--mute); max-width: 42ch; }
.fb-form { display: grid; gap: 12px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-kinds label { cursor: pointer; }
.fb-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.fb-kinds span { display: inline-block; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 999px; font-size: 14px; color: var(--mute); }
.fb-kinds input:checked + span { border-color: var(--gold); color: var(--gold); background: rgba(244,197,66,.08); }
.fb-kinds input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.fb-form textarea, .fb-form input:not([type=radio]) { width: 100%; padding: 12px 14px; font: 400 16px/1.4 var(--body); color: var(--text); background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; }
.fb-form textarea:focus, .fb-form input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(51,225,255,.18); }
.fb-form [aria-invalid] { border-color: #ff6b6b; }
.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fb-go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fb-out { margin: 0; font-size: 14px; color: var(--mute); }
.fb-out.ok { color: #7be0a1; } .fb-out.err { color: #ff8a8a; }
.fb-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.fb-band .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 760px) { .fb-in { grid-template-columns: 1fr; gap: 18px; } .fb-row { grid-template-columns: 1fr; } .fb-band { padding: 40px 0; } }

/* Promo code box (request form, shop checkout) */
.promo-box { margin: 6px 0 14px; }
.promo-box label span:first-of-type { font-weight: 400; opacity: .7; }
.promo-row { display: flex; gap: 8px; margin-top: 6px; opacity: 1 !important; font-weight: 400 !important; }
.req .promo-row input { margin-top: 0; text-transform: uppercase; letter-spacing: .08em; }
.promo-row .btn { padding: 10px 16px; white-space: nowrap; }
.promo-out { margin: 6px 0 0; font-size: 14px; min-height: 1px; }
.promo-out.ok { color: #7be0a1; } .promo-out.err { color: #ff8a8a; }
.cart-sum .promo-line b { color: #7be0a1; }
.q-answer .q-pp{margin-bottom:16px}
.q-answer .q-pp span{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;color:var(--mute)}
.q-answer .q-pp small{letter-spacing:0;text-transform:none;font:400 13px/1.3 var(--body);color:var(--dim)}
.q-answer .q-pp input{display:block;width:100%;max-width:420px;margin-top:8px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);color:var(--text);font:400 16px/1.2 inherit;padding:11px 12px;letter-spacing:0;text-transform:none}
/* reviews */
.rv-stars{border:0;padding:0;margin:0 0 18px}
.rv-stars legend{font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.rv-row{display:inline-flex;flex-direction:row-reverse;gap:4px}
.rv-row input{position:absolute;opacity:0;width:1px;height:1px}
.rv-row label{font-size:40px;line-height:1;color:var(--line2);cursor:pointer;margin:0;letter-spacing:0;transition:color .15s}
.rv-row input:checked~label,.rv-row label:hover,.rv-row label:hover~label{color:var(--gold)}
.rv-row input:focus-visible+label{outline:2px solid var(--gold);outline-offset:2px}
.q-answer .rv-chk{display:flex;gap:10px;align-items:center;text-transform:none;letter-spacing:0;font:400 16px/1.4 var(--body);color:var(--text);margin:14px 0}
.rv-form{margin-top:26px}
.q-answer .rv-name{display:block;width:100%;max-width:320px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);color:var(--text);font:inherit;padding:10px 12px;margin-bottom:16px}
.reviews-band[hidden]{display:none}
.rv-sum{display:flex;align-items:baseline;gap:12px;margin:-6px 0 22px;color:var(--mute)}
.rv-sum b{font-size:34px;color:var(--gold);font-family:var(--display,inherit)}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.rv-card{border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);padding:18px 20px;display:flex;flex-direction:column;gap:10px;margin:0}
.rv-card .rv-s{color:var(--gold);letter-spacing:2px}
.rv-card blockquote{margin:0;color:var(--text);line-height:1.55}
.rv-card figcaption{color:var(--mute);font-size:14px}
.rv-g{margin-top:18px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width:640px){.row3{grid-template-columns:1fr;gap:0}}
/* plans & packages */
.pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:22px}
.pk-card{border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);padding:24px 26px;display:flex;flex-direction:column;gap:10px}
.pk-card h3{margin:0;font:700 26px/1.1 var(--hud);letter-spacing:.02em}
.pk-card .ticks{flex:1}
.pk-card .btn{align-self:flex-start}
.pk-price{display:flex;align-items:baseline;gap:8px;margin:0}
.pk-price b{font:700 40px/1 var(--display);color:var(--gold)}
.pk-price span{color:var(--mute)} .pk-price s{color:var(--dim)}
.pk-form{max-width:760px;margin-top:24px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);padding:22px 24px}
.pk-form h3{margin:0 0 12px}
.pk-form label{display:block;margin-bottom:12px;font:600 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pk-form input:not([type=radio]):not([type=checkbox]),.pk-form textarea{display:block;width:100%;margin-top:6px;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);color:var(--text);font:400 16px/1.4 var(--body);padding:10px 12px;letter-spacing:0;text-transform:none}
.pk-form .check{display:flex;gap:10px;align-items:center;text-transform:none;letter-spacing:0;font:400 16px/1.4 var(--body);color:var(--text)}
.pk-opts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.pk-opts label{margin:0}
.pk-opts input[type=radio]{position:absolute;opacity:0}
.pk-opts label>span{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:var(--r);padding:12px 18px;cursor:pointer;color:var(--text);text-transform:none;letter-spacing:0;font:400 16px/1 var(--body)}
.pk-opts b{font:700 20px/1 var(--hud)} .pk-opts em{font-style:normal;color:var(--gold)}
.pk-opts input:checked+span{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.pk-opts input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.pk-opts span input{width:90px!important;margin:0!important;padding:6px 8px!important}
.gc-code{font-family:var(--mono);color:var(--gold);letter-spacing:.06em}
.bt-buy{display:flex;flex-wrap:wrap;gap:8px}
.bt-terms{font-size:14px;margin:10px 0 14px}
.buy-in label{display:block;margin-bottom:10px;font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.buy-in input:not([type=checkbox]){display:block;width:100%;margin-top:4px;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);color:var(--text);font:400 15px/1.4 var(--body);padding:8px 10px}
.buy-in .check{display:flex;gap:10px;align-items:center;text-transform:none;letter-spacing:0;font:400 15px/1.4 var(--body);color:var(--text)}
.cc-ft.cc-st{top:auto;bottom:10px;left:10px;right:auto;color:var(--cyan);border-color:rgba(51,225,255,.45)}
.cr-buy{display:block;text-align:center;margin-top:10px}
.sell-song { border: 1px solid rgba(255,255,255,.1); padding: 14px 16px 6px; margin: 0 0 14px; border-radius: 4px; background: rgba(255,255,255,.015); }
.sell-song-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sell-song-h b { letter-spacing: .14em; font-size: 12px; text-transform: uppercase; color: var(--gold, #f4c542); }
.sell-x { background: none; border: none; color: inherit; opacity: .7; text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
.sell-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 8px; }
.sell-fee { margin: 0; } .sell-fee b { color: var(--gold, #f4c542); } .sell-fee span { opacity: .8; }

/* ---- VU Radio: live DJs, chat, schedule, video HUD ---- */
.r-live{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;max-width:860px;margin:18px auto 0;padding:12px 16px;background:linear-gradient(90deg,rgba(216,31,61,.22),rgba(11,18,38,.9) 45%,rgba(216,31,61,.22));border:1px solid rgba(255,77,109,.55);box-shadow:0 0 30px rgba(255,45,74,.25)}
.r-live b{font:700 20px/1.1 var(--hud);letter-spacing:.06em;color:#fff}
.r-live-dot{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 var(--mono);letter-spacing:.24em;color:#fff;background:#d81f3d;padding:6px 9px}
.r-live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:rpulse 1.2s infinite}
.r-live-np{color:var(--gold2);font-size:15px}.r-live-hint{font:11px var(--mono);letter-spacing:.14em;color:var(--mute);flex-basis:100%;text-align:center}
.r-watch{padding:8px 16px;font-size:12px;letter-spacing:.2em}
.radio.is-live .r-now{border-top-color:#d81f3d;box-shadow:0 0 60px rgba(216,31,61,.18)}
.r-mono{display:grid;place-items:center;width:200px;height:200px;font:700 64px/1 var(--display);color:var(--gold);background:radial-gradient(circle at 50% 35%,var(--panel2),var(--bg));border:1px solid var(--line2)}
.r-livebits{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin:8px 0 0;font:12px var(--mono);letter-spacing:.12em;color:var(--mute)}
.r-livebits span:first-child{color:#ff6d86}
.r-grid{display:grid;grid-template-columns:1fr;gap:22px;max-width:860px;margin:10px auto 0}
.radio.has-chat .r-grid{max-width:1160px;grid-template-columns:minmax(0,1fr) 360px}
.r-side{min-width:0}.r-side .r-up{max-width:none}
.r-sched{margin-top:24px}.r-sched ol{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.r-sched li{display:flex;flex-direction:column;gap:2px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold)}
.r-sched li span{font:11px var(--mono);letter-spacing:.1em;color:var(--mute)}.r-sched li b{font:600 16px/1.2 var(--hud);letter-spacing:.04em}
.r-sched li.now{border-left-color:#d81f3d;background:linear-gradient(90deg,rgba(216,31,61,.15),var(--panel))}
.r-sched li.none{border-left-color:var(--line2);color:var(--mute);font-size:15px;grid-column:1/-1}
.r-tz{font-size:10px;color:var(--dim);letter-spacing:.14em;margin-left:8px}
.r-djcta{display:inline-block;margin-top:12px;font-size:15px}
.r-chat{display:flex;flex-direction:column;min-height:420px;max-height:560px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line2);border-top:3px solid var(--cyan)}
.r-chat header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.r-chat header b{font:600 12px/1 var(--mono);letter-spacing:.24em;color:var(--cyan)}.r-chat header span{font-size:12px;color:var(--dim)}
.r-chat ol,.bt-chat{list-style:none;margin:0;padding:10px 14px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.r-chat li,.bt-chat li{font-size:15px;line-height:1.4;position:relative}
.r-chat li b,.bt-chat li b{color:var(--gold2);font-weight:600;margin-right:6px}
.r-chat li em,.bt-chat li em{font:600 9.5px/1 var(--mono);letter-spacing:.14em;font-style:normal;padding:3px 5px;margin-right:6px;background:var(--gold);color:#000;vertical-align:2px}
.r-chat li.cm-vai em,.bt-chat li.cm-vai em{background:var(--cyan)}.r-chat li.cm-vai p,.bt-chat li.cm-vai p{color:var(--cyan)}
.r-chat li time{font:10.5px var(--mono);color:var(--dim)}
.r-chat li p,.bt-chat li p{margin:2px 0 0;color:var(--text);overflow-wrap:anywhere}
.r-chat-empty{margin:0;padding:0 14px 10px;color:var(--dim);font-size:14px}
.r-chat-f{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.r-chat-f input{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--text);padding:10px 12px;font:inherit;font-size:15px}
.r-chat-f div{display:flex;gap:8px}.r-chat-f div input{flex:1;min-width:0}.r-chat-f .btn{padding:10px 16px;font-size:12px}
.r-chat-msg{margin:0;font-size:13px;color:#ff8b9d;min-height:1em}
.r-djband{margin-top:14px}
@media (max-width:980px){.radio.has-chat .r-grid{grid-template-columns:1fr}.r-chat{min-height:360px;max-height:480px}}
@media (max-width:700px){.r-mono{width:160px;height:160px;font-size:50px}}

/* the live video pops up as a HUD */
.vhud{position:fixed;left:22px;bottom:22px;z-index:60;width:min(480px,calc(100vw - 32px));background:rgba(3,5,13,.92);border:1px solid rgba(51,225,255,.55);box-shadow:0 0 0 1px rgba(51,225,255,.15),0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(51,225,255,.18);
  transform:translateY(30px) scale(.92);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .25s,width .3s;backdrop-filter:blur(8px)}
.vhud.pop{transform:none;opacity:1}
.vhud.big{width:min(960px,calc(100vw - 32px))}
.vhud video{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:contain}
.vh-top,.vh-bot{display:flex;align-items:center;gap:10px;padding:8px 10px;font:11px/1 var(--mono);letter-spacing:.14em;color:var(--cyan)}
.vh-top b{font:700 15px/1 var(--hud);letter-spacing:.08em;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vh-live{display:inline-flex;align-items:center;gap:6px;background:#d81f3d;color:#fff;padding:4px 7px;font-weight:600}
.vh-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:rpulse 1.2s infinite}
.vh-n{color:var(--mute)}
.vh-top button{width:30px;height:30px;display:grid;place-items:center;background:transparent;border:1px solid var(--line2);color:var(--text);font-size:16px;cursor:pointer}
.vh-top button:hover{border-color:var(--cyan);color:var(--cyan)}
.vh-bot{justify-content:space-between;color:var(--dim);font-size:10px}.vh-np{color:var(--gold2);letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.vh-c{position:absolute;width:16px;height:16px;border:2px solid var(--cyan);pointer-events:none}
.vh-c.tl{left:-3px;top:-3px;border-right:0;border-bottom:0}.vh-c.tr{right:-3px;top:-3px;border-left:0;border-bottom:0}.vh-c.bl{left:-3px;bottom:-3px;border-right:0;border-top:0}.vh-c.br{right:-3px;bottom:-3px;border-left:0;border-top:0}
.vh-scan{position:absolute;left:0;right:0;top:38px;height:2px;background:linear-gradient(90deg,transparent,rgba(51,225,255,.7),transparent);opacity:0;pointer-events:none}
.vhud.pop .vh-scan{animation:vscan 1.1s ease-out 1}
@keyframes vscan{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(270px)}}
@media (max-width:560px){.vhud{right:16px;left:16px;top:74px;bottom:auto;width:auto}.vhud.big{width:auto}}
@media (prefers-reduced-motion:reduce){.vhud{transition:none}.vhud.pop .vh-scan{animation:none}}

/* ---- DJs: join + booth ---- */
.dj-tabs{display:flex;gap:6px;margin-top:22px;flex-wrap:wrap}
.dj-tabs button{padding:12px 20px;background:var(--panel);border:1px solid var(--line2);color:var(--mute);font:600 13px/1 var(--mono);letter-spacing:.2em;cursor:pointer}
.dj-tabs button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#000}
.sg{overflow-x:auto;margin:10px 0 6px;-webkit-overflow-scrolling:touch}
.sg-in{display:grid;grid-template-columns:52px repeat(7,minmax(74px,1fr));gap:3px;min-width:600px}
.sg-h{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--mute);text-align:center;padding:6px 0}
.sg-t{font:11px/1 var(--mono);color:var(--dim);display:flex;align-items:center;justify-content:flex-end;padding-right:6px}
.sg-c{min-height:36px;padding:4px;border:1px solid var(--line);background:var(--bg2);color:var(--dim);font:600 10px/1.15 var(--mono);letter-spacing:.06em;cursor:pointer;overflow:hidden;text-overflow:ellipsis}
.sg-c.open:hover{border-color:var(--cyan);color:var(--cyan)}
.sg-c.picked,.sg-c.mine{background:var(--gold);border-color:var(--gold);color:#000}
.sg-c.taken{background:var(--panel2);color:var(--text);cursor:default;font-family:var(--hud);font-size:12px;letter-spacing:.02em}
.sg-c.held{color:var(--mute);background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 6px,var(--bg2) 6px,var(--bg2) 12px);cursor:default}
.sg-c.now{box-shadow:inset 0 0 0 2px #d81f3d}
.sg-pick{font-size:14px;color:var(--gold2);margin:4px 0 0}
.booth-in{max-width:560px;padding:26px;background:var(--panel);border:1px solid var(--line2)}
.booth-in h2{margin-bottom:6px}.booth-in label{display:block;margin:12px 0 0}
.bt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.bt-when{color:var(--gold2);margin:6px 0 0}
.bt-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px}
.bt-studio,.bt-side{padding:18px;background:var(--panel);border:1px solid var(--line2);min-width:0}
.bt-studio label{display:block;margin:12px 0 0}.bt-studio select,.bt-studio input:not([type=checkbox]){width:100%}
.bt-prev{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line2)}
.bt-prev video{width:100%;height:100%;object-fit:cover;display:block}
.bt-noc{position:absolute;inset:0;display:grid;place-items:center;font:12px var(--mono);letter-spacing:.24em;color:var(--dim)}
.bt-onair{position:absolute;left:10px;top:10px;background:#d81f3d;color:#fff;font:600 12px/1 var(--mono);letter-spacing:.14em;padding:6px 9px}
.bt-meter{height:8px;margin-top:8px;background:var(--bg);border:1px solid var(--line)}.bt-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3ddc84,var(--gold) 75%,#ff4d6d);transition:width .05s}
.bt-meter i.hot{box-shadow:0 0 10px #ff4d6d}
.bt-go{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.bt-go .btn{min-width:200px;letter-spacing:.22em}
body.dj-on-air #bt-live{background:#d81f3d;border-color:#d81f3d;color:#fff}
#bt-stats{font:12px var(--mono);letter-spacing:.1em;color:var(--mute)}
.bt-side h3{font:600 12px/1 var(--mono);letter-spacing:.22em;color:var(--cyan);margin:4px 0 8px}.bt-side h3:not(:first-child){margin-top:20px}
.bt-chat{height:240px;padding:8px 0;border-top:1px solid var(--line)}
.bt-chat li{padding-right:26px}.bt-chat li button{position:absolute;right:0;top:0;width:22px;height:22px;background:none;border:1px solid var(--line2);color:var(--mute);cursor:pointer}
.bt-side .r-chat-f{padding:10px 0 0}
@media (max-width:900px){.bt-grid{grid-template-columns:1fr}}
.r-live[hidden],.r-chat[hidden],.bt-noc[hidden],.r-sched[hidden]{display:none}
.bt-side .sg-in{grid-template-columns:40px repeat(7,minmax(54px,1fr));min-width:440px}
.bt-side .sg-c{min-height:30px;font-size:9px}
.bt-studio select,.bt-studio input:not([type=checkbox]),.booth-in input{background:var(--bg);border:1px solid var(--line2);color:var(--text);padding:10px 12px;font:inherit;font-size:15px;margin-top:6px;border-radius:0}
.bt-studio select:focus,.bt-studio input:focus,.booth-in input:focus{border-color:var(--cyan);outline:none}
.req fieldset{min-width:0}
.form-wrap>*{min-width:0}
.r-sched li.none{display:block}
.radio.is-live .r-up{display:none}
/* Vai shouting out the chat on air */
[data-radio].shouting .r-meta .kicker::after{content:"  ·  🎙 SHOUT-OUT TO THE CHAT";color:var(--gold2);animation:shoutPulse 1.2s ease-in-out infinite}
[data-radio].shouting [data-chat]{box-shadow:0 0 0 1px var(--gold2),0 0 26px -8px var(--gold2);transition:box-shadow .4s}
@keyframes shoutPulse{50%{opacity:.45}}
/* ---------- Build your website (feature checklist) ---------- */
.sb-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.sb{display:flex;flex-direction:column;gap:26px;min-width:0}
.sb-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;padding:12px;border:1px solid var(--line,rgba(51,225,255,.18));background:rgba(0,0,0,.25)}
.sb-pl{font:600 11px/1 var(--mono,monospace);letter-spacing:.24em;color:var(--muted,#8aa);align-self:center;margin-right:4px}
.sb-pk{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 14px;background:rgba(0,0,0,.3);border:1px solid rgba(51,225,255,.25);color:inherit;cursor:pointer;min-width:140px;transition:border-color .15s,background .15s}
.sb-pk b{font-size:15px}.sb-pk span{color:var(--gold2,#ffd77a);font-weight:600}.sb-pk em{font-style:normal;font-size:12px;opacity:.7}
.sb-pk:hover{border-color:#33e1ff}.sb-pk.on{border-color:var(--gold2,#ffd77a);background:rgba(232,184,74,.12);box-shadow:0 0 18px -8px var(--gold2,#ffd77a)}
.sb-pk.clear{min-width:0;justify-content:center;opacity:.75}
.sb-g h3{display:flex;align-items:center;gap:12px;font-size:20px;margin:0 0 12px}.sb-g h3 .idx{font:600 12px var(--mono,monospace);color:#33e1ff;letter-spacing:.2em}
.sb-fs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.sb-f{position:relative;display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:start;padding:14px;border:1px solid rgba(51,225,255,.18);background:rgba(0,0,0,.22);cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.sb-f input{position:absolute;opacity:0;pointer-events:none}
.sb-tick{width:22px;height:22px;border:1.5px solid rgba(51,225,255,.5);display:grid;place-items:center;margin-top:1px;transition:.15s}
.sb-tick::after{content:"";width:10px;height:6px;border:2px solid #03050d;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-3px;transition:transform .15s}
.sb-ft{display:flex;flex-direction:column;gap:4px;min-width:0}.sb-ft b{font-size:15px}.sb-ft em{font-style:normal;font-size:13px;opacity:.72;line-height:1.45}
.sb-fp{font:600 14px var(--mono,monospace);color:#33e1ff;white-space:nowrap}
.sb-f:hover{border-color:rgba(51,225,255,.55);transform:translateY(-1px)}
.sb-f.on{border-color:var(--gold2,#ffd77a);background:linear-gradient(135deg,rgba(232,184,74,.12),rgba(0,0,0,.25))}
.sb-f.on .sb-tick{background:var(--gold2,#ffd77a);border-color:var(--gold2,#ffd77a)}.sb-f.on .sb-tick::after{transform:rotate(-45deg) scale(1)}.sb-f.on .sb-fp{color:var(--gold2,#ffd77a)}
.sb-f:focus-within{outline:2px solid #33e1ff;outline-offset:2px}
.sb-base{padding:16px;border:1px solid rgba(232,184,74,.45);background:linear-gradient(135deg,rgba(232,184,74,.08),rgba(0,0,0,.2))}
.sb-base-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}.sb-base-t b{font-size:17px}.sb-base-t span{font:600 18px var(--mono,monospace);color:var(--gold2,#ffd77a)}
.sb-pages{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(51,225,255,.15);flex-wrap:wrap}.sb-pages em{font-style:normal;opacity:.7;font-size:13px;margin-left:6px}
.sb-step{display:flex;align-items:stretch}.sb-step button{width:36px;background:rgba(0,0,0,.35);border:1px solid rgba(51,225,255,.35);color:#33e1ff;font-size:18px;cursor:pointer}.sb-step input{width:56px;text-align:center;border-left:0;border-right:0}
.sb-sum{position:sticky;top:90px;display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid rgba(51,225,255,.35);background:linear-gradient(180deg,rgba(6,16,28,.95),rgba(3,6,12,.95));box-shadow:0 0 40px -20px #33e1ff}
.sb-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
.sb-lines li{display:flex;justify-content:space-between;gap:10px;font-size:14px;animation:sbIn .25s ease-out both}.sb-lines li b{font-family:var(--mono,monospace);font-weight:500}.sb-lines li.base{font-weight:600}
@keyframes sbIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.sb-save{margin:0;font-size:13px;color:#4dffb0}.sb-save b{font-family:var(--mono,monospace)}
.sb-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;border-top:1px solid rgba(51,225,255,.25)}.sb-total span{font:600 12px var(--mono,monospace);letter-spacing:.2em;opacity:.8}
.sb-total b{font:600 32px var(--mono,monospace);color:var(--gold2,#ffd77a);text-shadow:0 0 18px rgba(232,184,74,.45)}.sb-total b.bump{animation:sbBump .35s ease-out}
@keyframes sbBump{40%{transform:scale(1.08);filter:brightness(1.4)}}
.sb-dep{margin:0;font-size:13px;opacity:.75}
.sb-care{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:10px;border:1px solid rgba(51,225,255,.2);background:rgba(0,0,0,.25);cursor:pointer}.sb-care span{display:flex;flex-direction:column;gap:3px}.sb-care b{font-size:14px}.sb-care em{font-style:normal;font-size:12px;opacity:.7;line-height:1.4}
.sb-go{width:100%}
.sb-step input{width:56px;text-align:center;background:rgba(0,0,0,.35);border:1px solid rgba(51,225,255,.35);border-left:0;border-right:0;color:inherit;font:600 15px var(--mono,monospace);-moz-appearance:textfield}.sb-step input::-webkit-inner-spin-button{-webkit-appearance:none}
.sb-contact{padding:20px;border:1px solid rgba(51,225,255,.18);background:rgba(0,0,0,.2)}
.sb-bar{display:none}
@media (max-width:900px){.sb-wrap{grid-template-columns:1fr}.sb-sum{position:static;scroll-margin-top:80px}.sb-lines{max-height:none}
.sb-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;padding-right:84px!important;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(3,6,12,.96);border-top:1px solid rgba(51,225,255,.4);box-shadow:0 -10px 30px rgba(0,0,0,.5);transition:transform .25s}
.sb-bar span{display:flex;flex-direction:column}.sb-bar i{font:600 10px var(--mono,monospace);letter-spacing:.22em;font-style:normal;opacity:.7}.sb-bar b{font:600 18px var(--mono,monospace);color:var(--gold2,#ffd77a)}.sb-bar .btn{padding:10px 16px}
.sb-bar.away{transform:translateY(110%)}.sb-pk{min-width:0;flex:1 1 40%}.sb-f{grid-template-columns:24px 1fr}.sb-fp{grid-column:2}}
.pk-grid.pk-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pk-card .ticks{align-content:start}
/* ---- Book Studio Time (/studio) */
.ss-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.ss{display:flex;flex-direction:column;gap:26px}
.ss-g h3{display:flex;align-items:center;gap:12px;font-size:20px;margin:0 0 12px}.ss-g h3 .idx{font:600 12px var(--mono);color:var(--cyan);letter-spacing:.2em}
.ss-opt{font:500 11px var(--mono);font-style:normal;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.ss-len{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px;border:1px solid rgba(51,225,255,.18);background:rgba(0,0,0,.22)}
.ss-len .sb-step button{width:44px;height:44px}.ss-len .sb-step input{width:64px;font-size:20px}
.ss-lenl{display:flex;flex-direction:column}.ss-lenl b{font:700 20px/1.2 var(--hud);letter-spacing:.04em}.ss-lenl em{font-style:normal;color:var(--gold2);font-family:var(--mono);font-size:14px}
.ss-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.ss-mo{padding:12px;border:1px solid rgba(51,225,255,.18);background:rgba(0,0,0,.22)}
.ss-mh{margin:0 0 8px;font:700 14px/1 var(--hud);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.ss-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ss-grid>span{font:600 10px var(--mono);color:var(--dim);text-align:center;padding:2px 0}
.ss-d{position:relative;aspect-ratio:1;min-height:36px;border:1px solid rgba(51,225,255,.22);background:rgba(51,225,255,.04);color:var(--text);font:600 14px var(--mono);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;transition:border-color .15s,background .15s}
.ss-d em{font:500 9px var(--mono);font-style:normal;color:var(--cyan);opacity:.8}
.ss-d.shut{opacity:.28;cursor:default;border-style:dashed;background:transparent}
.ss-d.open:hover{border-color:var(--cyan);background:rgba(51,225,255,.1)}
.ss-d.on{border-color:var(--gold2);background:rgba(244,197,66,.16);box-shadow:0 0 14px -6px var(--gold2)}.ss-d.on em{color:var(--gold2)}
.ss-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.ss-dayh{grid-column:1/-1;margin:0 0 2px;font:700 16px var(--hud);letter-spacing:.06em;color:var(--gold2)}
.ss-t{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid rgba(51,225,255,.25);background:rgba(0,0,0,.25);color:var(--text);cursor:pointer;text-align:left}
.ss-t b{font:600 16px var(--mono)}.ss-t em{font-style:normal;font-size:12px;color:var(--mute)}
.ss-t:hover{border-color:var(--cyan)}.ss-t.on{border-color:var(--gold2);background:rgba(244,197,66,.14)}.ss-t.on b{color:var(--gold2)}
.ss-adds{display:grid;gap:10px}
.ss-add{grid-template-columns:24px 1fr auto auto}
.ss-add .ss-q input{position:static;opacity:1;pointer-events:auto;width:64px;padding:6px 8px;background:rgba(0,0,0,.35);border:1px solid rgba(51,225,255,.35);color:var(--text);font:600 14px var(--mono);text-align:center}
.ss-add .sb-fp small{font-size:11px;opacity:.7}
.ss .req{padding:20px;border:1px solid rgba(51,225,255,.18);background:rgba(0,0,0,.2)}
.ss-pol{padding:16px 20px;border:1px solid rgba(244,197,66,.3);background:rgba(244,197,66,.04)}
.ss-poltext p{margin:0 0 8px;font-size:15px;color:var(--mute)}
.ss-agree{display:flex;gap:10px;align-items:center;margin-top:8px;font-weight:600;cursor:pointer}.ss-agree input{width:18px;height:18px;accent-color:var(--gold)}
.ss-when{margin:0;display:flex;flex-direction:column;gap:2px}.ss-when b{font:700 17px/1.25 var(--hud);letter-spacing:.03em}.ss-when span{font:500 14px var(--mono);color:var(--cyan)}
.ss-closed{grid-column:1/-1;padding:16px;border:1px dashed rgba(244,197,66,.45);color:var(--mute);margin:0}
.ss-done,.ss-pcard{grid-column:1/-1;max-width:720px;padding:26px;border:1px solid rgba(51,225,255,.3);background:linear-gradient(180deg,rgba(6,16,28,.95),rgba(3,6,12,.95))}
.ss-done h2,.ss-pcard h2{margin:6px 0 10px}.ss-pcard .q-lines,.ss-done .q-lines{margin:14px 0}
.ss-paybox{margin:18px 0 8px;max-width:420px}
.ss-pd{margin-top:18px;color:var(--mute)}.ss-pd summary{cursor:pointer;font-weight:600;color:var(--text)}
.price-card .pc-unit{font-size:.5em;opacity:.7;margin-left:2px}
@media (max-width:900px){.ss-wrap{grid-template-columns:1fr}.ss-sum{position:static}.ss-add{grid-template-columns:24px 1fr}.ss-add .sb-fp,.ss-add .ss-q{grid-column:2}}
.ss-otbox{margin-top:22px;padding:16px;border:1px solid rgba(51,225,255,.25);background:rgba(0,0,0,.25)}
.ss-otb{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:10px}
.ss-t.off{opacity:.35;cursor:not-allowed}
.ss-otbox .sub-h{margin-top:0}
/* ---- affiliates (session players) */
.aff-sec{margin-top:34px}
.aff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:16px}
.aff-card{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:18px;border:1px solid rgba(244,197,66,.35);background:linear-gradient(135deg,rgba(244,197,66,.07),rgba(0,0,0,.25))}
.aff-av{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);font:700 22px var(--display);letter-spacing:.04em;background:rgba(0,0,0,.35)}
.aff-b h3{font-size:22px;margin:2px 0 6px}.aff-b .kicker{margin:0}
.aff-svc{margin:0 0 6px;color:var(--mute)}.aff-svc b{color:var(--gold2);font-family:var(--mono)}
.aff-bio{margin:0 0 12px;font-size:15px;color:var(--mute)}
.aff-pick{display:grid;gap:10px;margin-bottom:12px}
/* ---- Audio › Production (redesigned) */
.pr{display:flex;flex-direction:column;gap:28px}
.pr-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.pr-head .hub-h{margin:6px 0 10px}.pr-head .lead{margin:0;max-width:720px}
.pr-jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.pr-jump a{font:600 13px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-decoration:none;padding:10px 14px;border:1px solid var(--line2);background:rgba(0,0,0,.25);white-space:nowrap}
.pr-jump a:hover{border-color:var(--gold);color:var(--gold)}
.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.pr-grid:has(.pr-players[hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}
.pr-card{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--bg2));scroll-margin-top:150px}
.pr-card h3{font-size:21px;margin:0 0 4px}.pr-card .kicker{margin:0;color:var(--gold)}
.pr-card .btn{margin-top:auto;align-self:flex-start}
.pr-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(39,64,122,.45)}
.pr-row b{display:block;font-weight:600}.pr-row small{display:block;color:var(--mute);font-size:14px;line-height:1.4;margin-top:2px}
.pr-row em{font:700 20px/1.1 var(--hud);font-style:normal;color:var(--gold2);white-space:nowrap}.pr-row em i,.aff-p i{font:500 12px var(--mono);font-style:normal;color:var(--dim);margin-left:2px}
.pr-more{font-size:14px;color:var(--cyan)}
.pr-bund{margin:0;font-size:14px;color:var(--mute)}.pr-bund b{color:var(--text);margin-right:6px}
.pr-players{border-color:rgba(244,197,66,.45);background:linear-gradient(160deg,rgba(244,197,66,.08),var(--bg2) 60%)}
.pr-note{margin:0;font-size:14px;color:var(--mute);line-height:1.5}
.pr-aff{display:flex;flex-direction:column;gap:10px}
.aff-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid rgba(244,197,66,.25);background:rgba(0,0,0,.25)}
.aff-row .aff-av{width:48px;height:48px;font-size:17px}
.aff-row .aff-b{display:flex;flex-direction:column;min-width:0}.aff-row .aff-b b{font-size:16px}.aff-row .aff-b span{font-size:13px;color:var(--cyan)}.aff-row .aff-b small{font-size:13px;color:var(--mute);line-height:1.35;margin-top:2px}
.aff-p{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.aff-p em{font:700 18px var(--hud);font-style:normal;color:var(--gold2)}.aff-p .btn{padding:8px 16px;margin:0}
.pr-specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pr-specs li{padding:14px 16px;border-left:2px solid var(--cyan);background:rgba(51,225,255,.04)}.pr-specs b{display:block;font:700 15px var(--hud);letter-spacing:.06em}.pr-specs span{font-size:14px;color:var(--mute)}
.pr-terms{scroll-margin-top:150px}.pr-terms .sub-h{margin-top:0}
@media (max-width:980px){.pr-head{grid-template-columns:1fr}.pr-jump{justify-content:flex-start}.pr-grid,.pr-grid:has(.pr-players[hidden]){grid-template-columns:1fr}.pr-specs{grid-template-columns:1fr}.pr-players{order:-1}}
@media (max-width:520px){.aff-row{grid-template-columns:44px minmax(0,1fr)}.aff-p{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}
.pr-head{grid-template-columns:1fr;gap:16px}.pr-jump{justify-content:flex-start}
.pr .pr-head .hub-h{font-size:clamp(28px,3.4vw,42px);max-width:none}
/* ---- session musician tiles (Production tab) */
.pr-afftiles{display:contents}.pr-afftiles[hidden]{display:none}
.pr-grid:has(.pr-afftiles[hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}
.pr-player{border-color:rgba(244,197,66,.45);background:linear-gradient(160deg,rgba(244,197,66,.08),var(--bg2) 60%);scroll-margin-top:150px}
.pr-player.feat{border-color:var(--gold);box-shadow:0 0 34px -18px var(--gold)}
.pp-id{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}.pp-id .aff-av{width:56px;height:56px;font-size:19px}.pp-id h3{margin:0}.pp-id span{font-size:14px;color:var(--cyan)}
.pp-rec{margin:0;font:700 13px/1.3 var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--gold2)}
.pp-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}.pp-btns .btn{margin:0}
@media (max-width:980px){.pr-grid:has(.pr-afftiles[hidden]){grid-template-columns:1fr}.pr-player{order:-1}}
/* ---- a session musician's page (/players/<id>): HUD screen */
.pl-hud{padding:48px 0 64px;position:relative}
.pl-screen{position:relative;padding:28px;border:1px solid rgba(51,225,255,.35);background:linear-gradient(180deg,rgba(6,16,28,.92),rgba(3,6,12,.96));box-shadow:0 0 60px -30px var(--cyan),inset 0 0 80px -50px var(--cyan);opacity:0;transform:scale(.985);clip-path:inset(50% 0 50% 0);transition:clip-path .7s cubic-bezier(.2,.8,.2,1),opacity .4s,transform .7s}
.pl-screen.on{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.pl-c{position:absolute;width:22px;height:22px;border:2px solid var(--gold)}.pl-c.tl{top:-2px;left:-2px;border-right:0;border-bottom:0}.pl-c.tr{top:-2px;right:-2px;border-left:0;border-bottom:0}.pl-c.bl{bottom:-2px;left:-2px;border-right:0;border-top:0}.pl-c.br{bottom:-2px;right:-2px;border-left:0;border-top:0}
.pl-top{display:flex;justify-content:space-between;gap:12px;font:500 12px var(--mono);letter-spacing:.16em;color:var(--cyan);margin-bottom:22px;flex-wrap:wrap}
.pl-rec{color:#ff5a6a;display:flex;align-items:center;gap:6px}.pl-rec i{width:8px;height:8px;border-radius:50%;background:#ff5a6a;animation:plBlink 1.2s infinite}
@keyframes plBlink{50%{opacity:.25}}
.pl-grid{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:32px;align-items:start}
.pl-photo{position:relative;aspect-ratio:4/5;border:1px solid rgba(244,197,66,.45);background:repeating-linear-gradient(0deg,rgba(51,225,255,.05) 0 1px,transparent 1px 4px),radial-gradient(circle at 50% 35%,rgba(244,197,66,.14),transparent 65%);overflow:hidden}
.pl-photo img{width:100%;height:100%;object-fit:cover}
.pl-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.pl-ph b{font:700 72px/1 var(--display);color:var(--gold)}.pl-ph span{font:500 11px var(--mono);letter-spacing:.3em;color:var(--dim)}
.pl-scan{position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(180deg,transparent,rgba(51,225,255,.12),transparent);animation:plScan 3.5s linear infinite;pointer-events:none}
@keyframes plScan{to{top:100%}}
.pl-info h1{font-size:clamp(34px,5vw,58px);margin:6px 0 6px}.pl-info .kicker{color:var(--gold);margin:0}
.pl-role{margin:0 0 10px;color:var(--cyan);font:600 16px var(--hud);letter-spacing:.08em;text-transform:uppercase}
.pl-rec-line{margin:0 0 12px;font:700 14px var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--gold2)}
.pl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0 6px}
.pl-stats div{padding:12px;border:1px solid var(--line2);background:rgba(0,0,0,.3)}.pl-stats span{display:block;font:500 10px var(--mono);letter-spacing:.2em;color:var(--dim)}.pl-stats b{display:block;margin-top:4px;font:700 17px var(--hud);color:var(--gold2)}
.pl-samples{margin-top:30px;padding-top:22px;border-top:1px solid rgba(51,225,255,.2)}
.pl-sh{display:flex;align-items:center;gap:12px;margin-bottom:12px}.pl-sh h2{margin:0;font-size:22px}
.pl-slist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.pl-sample{padding:12px;border:1px solid var(--line2);background:rgba(0,0,0,.3)}.pl-sample b{display:block;margin-bottom:8px}.pl-sample audio{width:100%}
@media (max-width:820px){.pl-grid{grid-template-columns:1fr}.pl-photo{max-width:340px}.pl-stats{grid-template-columns:1fr}.pl-screen{padding:20px}}
@media (prefers-reduced-motion:reduce){.pl-screen{transition:none;clip-path:none}.pl-scan,.pl-rec i{animation:none}}
.pl-stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
/* session player page: photo HUD, floating guitars, the rig */
.pl-hud{overflow:hidden;isolation:isolate}
.pl-fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.pl-screen{background:linear-gradient(180deg,rgba(6,16,28,.84),rgba(3,6,12,.9));backdrop-filter:blur(2px)}
.pl-photo{box-shadow:0 0 0 1px rgba(51,225,255,.12),0 30px 80px -40px rgba(244,197,66,.45)}
.pl-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.08) brightness(1.02);clip-path:inset(0 0 100% 0);transition:clip-path 1.4s cubic-bezier(.2,.8,.2,1) .25s}
.pl-photo.lit>img{clip-path:inset(0 0 0 0)}
.pl-photo.has .pl-ph{display:none}
.pl-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,225,255,.08),transparent 35%,transparent 60%,rgba(3,6,12,.75)),radial-gradient(120% 80% at 50% 20%,transparent 55%,rgba(3,6,12,.55));mix-blend-mode:normal;pointer-events:none}
.pl-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(244,197,66,.18),transparent 45%,rgba(51,225,255,.12));mix-blend-mode:color;pointer-events:none}
.pl-pb{position:absolute;z-index:3;width:18px;height:18px;border:1.5px solid var(--cyan);opacity:.85}
.pl-pb.tl{top:10px;left:10px;border-right:0;border-bottom:0}.pl-pb.tr{top:10px;right:10px;border-left:0;border-bottom:0}.pl-pb.bl{bottom:10px;left:10px;border-right:0;border-top:0}.pl-pb.br{bottom:10px;right:10px;border-left:0;border-top:0}
.pl-ring{position:absolute;z-index:3;top:18px;left:18px;width:74px;height:74px;animation:plSpin 14s linear infinite;opacity:.9}
.pl-ring circle,.pl-ring path{fill:none;stroke-width:1}
.pl-ring .r1{stroke:rgba(244,197,66,.75);stroke-dasharray:3 5}.pl-ring .r2{stroke:rgba(51,225,255,.6);stroke-dasharray:40 20 8 20}.pl-ring .r3{stroke:rgba(51,225,255,.3)}.pl-ring .r4{stroke:rgba(244,197,66,.8)}
.pl-ptag{position:absolute;z-index:3;left:14px;right:14px;bottom:16px;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-left:2px solid var(--gold);background:linear-gradient(90deg,rgba(3,6,12,.85),rgba(3,6,12,.2))}
.pl-ptag b{font:700 18px var(--hud);letter-spacing:.14em;color:#fff}.pl-ptag span{font:500 10px var(--mono);letter-spacing:.2em;color:var(--cyan)}
.pl-scan{z-index:2}
@keyframes plSpin{to{transform:rotate(360deg)}}
@media (max-width:820px){.pl-photo{margin:0 auto;width:100%}}
@media (prefers-reduced-motion:reduce){.pl-ring{animation:none}.pl-photo>img{transition:none;clip-path:none}}
.aff-av{position:relative;overflow:hidden}.aff-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.06);opacity:0;transition:opacity .4s}.aff-av.pic img{opacity:1}.aff-av.pic b{visibility:hidden}.aff-av b{font:inherit}
.pr-player.feat .pp-id{grid-template-columns:84px 1fr}.pr-player.feat .pp-id .aff-av{width:84px;height:84px;border-radius:2px;box-shadow:0 0 24px -10px var(--gold)}
/* a client's finished video (/v/<id>) */
.vd-hero h1{margin-bottom:22px}
.vd-frame{position:relative;max-width:980px;margin:0 0 22px;padding:10px;border:1px solid rgba(51,225,255,.3);background:rgba(3,6,12,.7);box-shadow:0 30px 90px -50px var(--cyan)}
.vd-frame.tall{max-width:440px}.vd-frame.sq{max-width:640px}
.vd-frame video{display:block;width:100%;max-height:78vh;background:#000}
.vd-c{position:absolute;width:18px;height:18px;border:2px solid var(--gold)}.vd-c.tl{top:-2px;left:-2px;border-right:0;border-bottom:0}.vd-c.tr{top:-2px;right:-2px;border-left:0;border-bottom:0}.vd-c.bl{bottom:-2px;left:-2px;border-right:0;border-top:0}.vd-c.br{bottom:-2px;right:-2px;border-left:0;border-top:0}
.vd-msg{max-width:720px;margin:0 0 18px;padding:14px 18px;border-left:2px solid var(--gold);background:rgba(0,0,0,.3)}.vd-msg p{margin:0 0 10px}.vd-msg p:last-child{margin:0}
.vd-act{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.vd-warn{max-width:760px;margin:0 0 12px;padding:12px 16px;border:1px solid rgba(244,197,66,.45);background:rgba(244,197,66,.07);color:var(--text,#e8eefc)}.vd-warn b{color:var(--gold2,#ffd76a)}
.pl-about{margin-top:30px;padding-top:22px;border-top:1px solid rgba(51,225,255,.2)}.pl-about[hidden]{display:none}
.pl-abody{max-width:820px}.pl-abody p{margin:0 0 14px;line-height:1.7;color:var(--text,#e8eefc)}
.pl-credits{list-style:none;margin:4px 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pl-credits li{padding:8px 12px;border:1px solid rgba(244,197,66,.45);background:rgba(244,197,66,.06);font:600 13px var(--hud);letter-spacing:.06em;color:var(--gold2)}
.pl-credits li::before{content:"♪ ";color:var(--cyan)}
/* a client's website page (/yoursite) */
.ys-wrap{max-width:860px}
.ys-steps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 22px}.ys-steps li{padding:6px 12px;border:1px solid var(--line2);font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.ys-steps .done{color:var(--cyan);border-color:rgba(51,225,255,.4)}.ys-steps .now{color:#111;background:var(--gold);border-color:var(--gold)}
.ys-card{margin:0 0 16px;padding:20px 22px;border:1px solid var(--line2);background:rgba(0,0,0,.28)}.ys-card h3{margin:0 0 10px}
.ys-form label{display:grid;gap:6px;margin:0 0 12px;font-size:14px;color:var(--dim)}
.ys-form input:not([type=radio]):not([type=color]),.ys-form textarea,.ys-card textarea{width:100%;padding:11px 12px;border:1px solid var(--line2);background:rgba(0,0,0,.35);color:var(--text,#e8eefc);font:inherit}
.ys-form input[type=color]{width:100%;height:44px;padding:2px;border:1px solid var(--line2);background:none}
.ys-svc{display:grid;grid-template-columns:1fr 1.6fr .8fr;gap:8px;margin:0 0 8px}@media (max-width:640px){.ys-svc{grid-template-columns:1fr}}
.ys-pg{display:grid;gap:8px;margin:0 0 12px}
.ys-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 14px}@media (max-width:640px){.ys-pick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ys-pick label{position:relative;display:grid;gap:4px;margin:0;padding:10px;border:1px solid var(--line2);cursor:pointer}.ys-pick input{position:absolute;opacity:0}.ys-pick label:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.ys-pick b{color:var(--text,#e8eefc);font-size:14px}.ys-pick em{font-style:normal;font-size:12px}
.ys-sw{display:block;height:34px;border:1px solid var(--line2)}.theme-midnight{background:linear-gradient(135deg,#07090f,#1a2440)}.theme-bold{background:linear-gradient(135deg,#000,#2a2a30)}.theme-clean{background:linear-gradient(135deg,#fff,#e9edf3)}.theme-warm{background:linear-gradient(135deg,#fbf7f1,#ead9c2)}
.font-modern::after,.font-bold::after,.font-elegant::after,.font-friendly::after{content:"Aa";display:grid;place-items:center;height:100%;color:var(--gold2);font-size:20px}.font-bold::after{font-weight:800;letter-spacing:.06em}.font-elegant::after{font-family:Georgia,serif;font-style:italic}.font-friendly::after{font-family:"Trebuchet MS",sans-serif}
.ys-prog{height:6px;background:rgba(255,255,255,.08);margin:6px 0}.ys-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .2s}
.ys-done{margin-top:12px;padding:12px 14px;border-left:2px solid var(--gold);background:rgba(244,197,66,.06)}.ys-done p{margin:6px 0 0}
.ys-rev{padding:12px 0;border-top:1px solid var(--line2)}.ys-rev p{margin:6px 0}
/* showcase videos in the work grids */
.work-item video.v-wide{aspect-ratio:16/9;object-fit:contain}.work-item video.v-tall{aspect-ratio:9/16;max-height:520px;object-fit:contain}.work-item video.v-sq{aspect-ratio:1;object-fit:contain}
.work-item .wi-d{margin:8px 0 0;font-size:14px;color:var(--dim)}
.sv-kinds{margin:0 0 14px}
.work-grid{align-items:start}

/* Meet the DJs: the live DJ's logo beside the flashing LIVE light (menu chip and Radio page bar) */
.nav-live-logo{height:20px;width:auto;max-width:70px;object-fit:contain;margin:-6px -3px -6px 2px;filter:drop-shadow(0 0 4px rgba(255,255,255,.45))}
.nav-live b{font:inherit;letter-spacing:.08em;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-live{display:none!important}
@media (max-width:1240px){.top-live{display:inline-flex!important;margin-left:auto;margin-right:12px}.top-live+.menu{margin-left:0}}
.r-live-logo{height:38px;width:auto;max-width:130px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,77,109,.6))}
/* the cards */
.mtd{max-width:1100px;margin:40px auto 0}
.mtd-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.mtd-h h2,.mtd-h h1{font:700 clamp(24px,4vw,34px)/1.1 var(--display);letter-spacing:.02em;margin:6px 0 0}
.mtd-h .lead{max-width:640px}
.mtd-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.mtd-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s}
.mtd-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.mtd-card.live{border-color:#ff4d6d;box-shadow:0 0 24px rgba(216,31,61,.35)}
.mtd-ph{position:relative;aspect-ratio:1;background:radial-gradient(circle at 50% 35%,var(--panel2),var(--bg2));display:grid;place-items:center;overflow:hidden}
.mtd-ph>img:first-child{width:100%;height:100%;object-fit:cover}
.mtd-ph>b{font:700 54px/1 var(--display);color:var(--gold)}
.mtd-logo{position:absolute;right:10px;bottom:10px;height:44px;width:auto;max-width:45%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.mtd-ph .r-live-dot{position:absolute;left:10px;top:10px}
.mtd-tx{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.mtd-tx b{font:700 19px/1.15 var(--hud);letter-spacing:.05em;text-transform:uppercase}
.mtd-tx i{font-style:normal;color:var(--gold);font-size:14px}
.mtd-tx em{font:11px/1.4 var(--mono);font-style:normal;letter-spacing:.06em;color:var(--mute)}
.mtd-none{color:var(--mute);grid-column:1/-1}
.mtd-page{margin-top:0}.mtd-page .r-djband{margin-top:40px}
/* one DJ's page */
.djp-wrap{padding:40px 0 60px}
.djp-hero{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:32px;align-items:center}
.djp-ph{position:relative;aspect-ratio:1;background:radial-gradient(circle at 50% 35%,var(--panel2),var(--bg2));border:1px solid var(--line2);display:grid;place-items:center}
.djp-ph img{width:100%;height:100%;object-fit:cover}
.djp-ph b{font:700 80px/1 var(--display);color:var(--gold)}
.djp-c{position:absolute;width:18px;height:18px;border:2px solid var(--cyan)}
.djp-c.tl{left:-6px;top:-6px;border-right:0;border-bottom:0}.djp-c.tr{right:-6px;top:-6px;border-left:0;border-bottom:0}
.djp-c.bl{left:-6px;bottom:-6px;border-right:0;border-top:0}.djp-c.br{right:-6px;bottom:-6px;border-left:0;border-top:0}
.djp-hero.live .djp-c{border-color:#ff4d6d}
.djp-name{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:6px 0 4px}
.djp-name h1{font:700 clamp(30px,6vw,56px)/1.05 var(--display);margin:0;letter-spacing:.01em}
.djp-logo{height:72px;width:auto;max-width:200px;object-fit:contain}
.djp-gen{color:var(--gold);font:600 18px/1.3 var(--hud);letter-spacing:.06em;margin:0 0 14px}
.djp-live{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.djp-next{color:var(--mute);margin:0 0 14px}.djp-next b{color:var(--text)}
.djp-links{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.djp-links a{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);text-decoration:none;padding:9px 12px;border:1px solid rgba(51,225,255,.4);border-radius:var(--r)}
.djp-links a:hover{background:rgba(51,225,255,.1)}
.djp-body{display:grid;grid-template-columns:1fr 300px;gap:36px;margin-top:40px}
.djp-body h2{font:700 20px/1.2 var(--hud);letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;color:var(--gold)}
.djp-main h2:not(:first-child){margin-top:30px}
.djp-main p{color:var(--text);line-height:1.65;margin:0 0 12px}
.djp-mixes{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.djp-mixes li{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.djp-mixes li.on{border-color:var(--gold)}
.djp-mixes b{display:block;font:600 17px/1.25 var(--hud);letter-spacing:.04em}
.djp-mixes span{font:11px var(--mono);color:var(--mute);letter-spacing:.06em}
.djp-play{width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);background:transparent;cursor:pointer;position:relative}
.djp-play::before{content:"";position:absolute;left:16px;top:12px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--gold)}
.playing .djp-play::before{left:13px;top:12px;width:4px;height:16px;border:0;border-left:5px solid var(--gold);border-right:5px solid var(--gold);box-sizing:content-box}
.djp-bar{height:4px;background:var(--line);margin-top:8px;cursor:pointer;display:none}
.on .djp-bar{display:block}
.djp-bar i{display:block;height:100%;width:0;background:var(--gold)}
.djp-shows{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:6px}
.djp-shows li{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold)}
.djp-shows li.now{border-left-color:#d81f3d}
.djp-shows span{color:var(--mute)}.djp-shows b{font:600 15px var(--hud);letter-spacing:.05em}
.djp-miss{text-align:center;padding:40px 0}
@media (max-width:760px){
  .djp-hero{grid-template-columns:1fr;gap:20px}.djp-ph{max-width:360px;width:100%;margin:0 auto}
  .djp-body{grid-template-columns:1fr}
  .djp-mixes li{grid-template-columns:44px 1fr}.djp-mixes li .btn{grid-column:1/-1;text-align:center}
}
/* the DJ booth: your page */
.bt-page{margin-top:30px;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.bt-page h3{margin-top:0}
.bt-pg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.bt-pics{display:flex;gap:14px;flex-wrap:wrap}
.bt-pic{display:flex;flex-direction:column;align-items:center;gap:8px}
.bt-pic span{width:110px;height:110px;display:grid;place-items:center;background:var(--bg2);border:1px dashed var(--line2);overflow:hidden;font:11px var(--mono);color:var(--dim)}
.bt-pic img{width:100%;height:100%;object-fit:contain}
.bt-links{display:grid;gap:6px;margin:6px 0 10px}
.bt-links div{display:grid;grid-template-columns:110px 1fr;gap:6px}
.bt-ups{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
.bt-ups li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg2);border:1px solid var(--line);font-size:14px}
.bt-ups li b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-ups em{font:10px var(--mono);font-style:normal;letter-spacing:.12em;padding:4px 6px;border:1px solid var(--line2);color:var(--mute)}
.bt-ups em.ok{color:#3ddc97;border-color:rgba(61,220,151,.5)}
.bt-ups button{background:none;border:0;color:var(--dim);cursor:pointer;font-size:18px}
@media (max-width:560px){.top-live{margin-right:8px;padding:6px 7px!important}.top-live .nl-t,.top-live b{display:none}.top-live .nav-live-logo{margin:-4px 0}.top-live:not(:has(img)) .nl-t{display:inline}}
@media (max-width:400px){header.top:has(.top-live) .brand-t{min-width:0;overflow:hidden}header.top:has(.top-live) .brand-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}}
.bt-page label{display:block;margin:12px 0 0;color:var(--mute);font-size:14px}
.bt-page input:not([type=checkbox]):not([type=file]),.bt-page textarea{display:block;width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--text);padding:10px 12px;font:inherit;font-size:15px;margin-top:6px;border-radius:0}
.bt-page input[type=file]:not([hidden]){display:block;margin-top:8px;color:var(--mute);font-size:14px}
.bt-page input:focus,.bt-page textarea:focus{border-color:var(--cyan);outline:none}
.bt-page .bt-links input{margin-top:0;padding:8px 10px;font-size:14px}
.bt-page h3{font:600 12px/1 var(--mono);letter-spacing:.22em;color:var(--cyan);margin:4px 0 10px;text-transform:uppercase}
.bt-page form .btn,.bt-pic .btn{margin-top:12px}
.bt-pic .btn{cursor:pointer;padding:9px 12px;font-size:12px}
.bt-ups li .fine{white-space:nowrap}

/* holo grid page transitions (holo.js). Vai's chat (z 70) stays above. */
.holo{position:fixed;inset:0;z-index:68;pointer-events:none;display:none}
.holo.on{display:block}
html.vu-tin::after{content:"";position:fixed;inset:0;z-index:68;background:#04070f;background-image:linear-gradient(rgba(51,225,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(51,225,255,.14) 1px,transparent 1px);background-size:58px 58px}

/* Vai shows how it's made (vai-show.js) */
.vs{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:69;width:min(400px,calc(100vw - 36px));background:linear-gradient(160deg,rgba(11,18,38,.94),rgba(4,7,18,.96));border:1px solid rgba(51,225,255,.35);box-shadow:0 0 40px rgba(51,225,255,.12),0 20px 60px rgba(0,0,0,.6);backdrop-filter:blur(10px);opacity:0;transform:translateY(24px) scale(.97);transform-origin:left bottom;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.9,.2,1)}
.vs.show{opacity:1;transform:none}.vs.gone{opacity:0;transform:translateY(16px) scale(.98)}
.vs-c{position:absolute;width:14px;height:14px;border:2px solid var(--cyan)}
.vs-c.tl{left:-1px;top:-1px;border-right:0;border-bottom:0}.vs-c.tr{right:-1px;top:-1px;border-left:0;border-bottom:0}.vs-c.bl{left:-1px;bottom:-1px;border-right:0;border-top:0}.vs-c.br{right:-1px;bottom:-1px;border-left:0;border-top:0}
.vs header{display:flex;align-items:baseline;gap:10px;padding:10px 12px 0 14px}
.vs-k{font:600 10px/1 var(--mono);letter-spacing:.22em;color:var(--cyan)}
.vs-title{font:700 15px/1.2 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);flex:1}
.vs-x{background:none;border:0;color:var(--dim);font-size:20px;cursor:pointer;line-height:1}
.vs-stage{position:relative;margin:6px 10px 0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,rgba(51,225,255,.08),transparent 70%);border:1px solid rgba(51,225,255,.12)}
.vs-svg{display:block;width:100%;height:auto}
.vs-scan{position:absolute;left:0;right:0;top:0;height:40px;background:linear-gradient(rgba(51,225,255,0),rgba(51,225,255,.16));border-bottom:1px solid rgba(160,245,255,.5);transform:translateY(-44px);pointer-events:none}
.vs-scan.go{animation:vsscan 1.1s cubic-bezier(.4,0,.2,1)}
@keyframes vsscan{to{transform:translateY(200px)}}
.vs footer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;padding:8px 14px 12px}
.vs-n{font:600 10px/1 var(--mono);color:var(--dim);letter-spacing:.14em}
.vs-cap{margin:0;font:600 16px/1.25 var(--hud);letter-spacing:.04em;color:var(--text);opacity:0;transform:translateY(6px)}
.vs-cap.in{animation:vscap .7s .15s ease forwards}
@keyframes vscap{to{opacity:1;transform:none}}
.vs-dots{grid-column:1/-1;display:flex;gap:5px}.vs-dots i{flex:1;height:3px;background:var(--line)}.vs-dots i.done{background:rgba(51,225,255,.55)}.vs-dots i.on{background:var(--gold);box-shadow:0 0 8px rgba(244,197,66,.6)}
.vs-re{grid-column:1/-1;justify-self:start;background:none;border:1px solid rgba(51,225,255,.4);color:var(--cyan);font:600 10px/1 var(--mono);letter-spacing:.18em;padding:7px 10px;cursor:pointer}
/* scenes crossfade, never cut */
.vs-scene{opacity:0;transform:translateX(14px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.9,.2,1)}
.vs-scene.on{opacity:1;transform:none}.vs-scene.off{opacity:0;transform:translateX(-14px)}
.vs-scene *{transform-box:fill-box;transform-origin:center}
.vs-t{font:500 9px var(--mono);fill:#9aa7c9;letter-spacing:.06em}.vs-t.c{text-anchor:middle}.vs-t.w{fill:#e9eefc}.vs-t.r{fill:#ff4d6d;text-anchor:end}
.vs-big{font:700 30px var(--display);fill:#f4c542;text-anchor:middle}.vs-big.sm{font-size:18px}
.vs-code{font:500 10px var(--mono);fill:#33e1ff;text-anchor:middle}
.vs-wave rect{fill:#33e1ff}.vs-wave.gold rect{fill:#f4c542}.vs-wave.dim rect{fill:#27407a}
.vs-fbox{fill:rgba(11,18,38,.9);stroke:#33e1ff;stroke-width:1.2}.vs-fold{fill:none;stroke:#33e1ff;stroke-width:1.2}.vs-ft{font:700 8px var(--mono);fill:#f4c542;text-anchor:middle}
.vs-file.dim .vs-fbox{stroke:#27407a}
.vs-ok{fill:rgba(61,220,151,.15);stroke:#3ddc97;stroke-width:1.5}.vs-okm{fill:none;stroke:#3ddc97;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vs-mbg{fill:#0e1730;stroke:#1b2a52}.vs-mfill{fill:url(#vsg)}.vs-mark{stroke:#ff4d6d;stroke-width:1.5}
.vs-axis{stroke:#1b2a52;stroke-width:2}.vs-head{stroke:#f4c542;stroke-width:2}
.vs-knob{fill:#0e1730;stroke:#f4c542;stroke-width:1.5}
.vs-eq{fill:none;stroke:#f4c542;stroke-width:2.2;stroke-linecap:round}
.vs-gr{fill:rgba(255,77,109,.75)}
.vs-ring{fill:none;stroke:#33e1ff;stroke-width:1.2}
.vs-bub{fill:rgba(47,107,255,.18);stroke:#2f6bff}
.vs-note{font:20px sans-serif;fill:#f4c542}
.vs-cell{fill:#0e1730;stroke:#1b2a52}.vs-cell.hit{fill:#f4c542}
.vs-play{fill:#33e1ff}
.vs-roll{fill:#33e1ff;stroke:#a0f5ff;stroke-width:.5}
.vs-blk{fill:rgba(51,225,255,.18);stroke:#33e1ff}.vs-blk.gold{fill:rgba(244,197,66,.22);stroke:#f4c542}
.vs-frame{fill:rgba(11,18,38,.6);stroke:#33e1ff;stroke-width:1.2}.vs-wire{fill:none;stroke:#9aa7c9;stroke-width:1.2;stroke-dasharray:4 3}
.vs-art{fill:#1a1140;stroke:#b46bff}.vs-card{fill:rgba(47,107,255,.2);stroke:#2f6bff}
.vs-sun{fill:#f4c542}.vs-sun.glow{animation:vsglow 1.6s ease-in-out infinite alternate}
.vs-shine{fill:rgba(255,255,255,.18);animation:vsshine 1.8s .3s ease-in-out forwards}
.vs-dot{fill:#ff4d6d}.vs-rec{fill:#ff4d6d}.vs-playb{fill:#f4c542}
.vs-string{stroke:#f4c542;stroke-width:1.2;animation:vsstr .18s linear infinite alternate}
.vs-sel{fill:rgba(244,197,66,.16);stroke:#f4c542;stroke-dasharray:3 2}
.vs-grade{fill:#2b3a5c}.vs-grade2{fill:#7a3f8f}
.vs-fader:nth-child(odd) .vs-knob{animation:vsfade 1.4s ease-in-out infinite alternate}
/* entrances, staggered (d0..d8) */
.vs-scene.on .vs-in{animation:vsin .7s ease both}
.vs-scene.on .vs-pop{animation:vspop .65s cubic-bezier(.2,1.4,.4,1) both}
.vs-scene.on .vs-slide{animation:vsslide .8s cubic-bezier(.2,.9,.2,1) both}
.vs-scene.on .vs-draw{stroke-dasharray:600;stroke-dashoffset:600;animation:vsdraw 1.4s ease forwards}
.vs-scene.on .vs-wire.vs-draw{stroke-dasharray:4 3;stroke-dashoffset:0;animation:vsin .9s ease both}
.vs-scene.on .vs-grow{transform-origin:bottom;animation:vsgrow 1.6s cubic-bezier(.3,.8,.3,1) both}
.vs-scene.on .vs-grow-x{transform-origin:left;animation:vsgrowx 2.2s ease-out both}
.vs-scene.on .vs-wipe{transform-origin:left;animation:vsgrowx 1.6s ease-in-out both}
.vs-scene.on .vs-type{animation:vsin .5s steps(6) both}
.vs-scene.on .vs-bounce{transform-origin:top;animation:vsbounce .7s ease-in-out infinite alternate}
.vs-scene.on .vs-ripple{animation:vsripple 2.2s ease-out infinite}
.vs-scene.on .vs-float{animation:vsfloat 2.4s ease-in-out infinite alternate}
.vs-scene.on .vs-blink{animation:vsblink 1s steps(2) infinite}
.vs-scene.on .vs-cell.hit{animation:vshit 1.6s ease both}
.vs-scene.on .vs-play{animation:vsplay 2.6s linear infinite}
.vs-scene.on .vs-lane .vs-wave{animation:vsgrowx 1.2s ease-out both;transform-origin:left}
.vs-scene .d0{animation-delay:.05s!important}.vs-scene .d1{animation-delay:.25s!important}.vs-scene .d2{animation-delay:.45s!important}.vs-scene .d3{animation-delay:.65s!important}.vs-scene .d4{animation-delay:.85s!important}.vs-scene .d5{animation-delay:1.05s!important}.vs-scene .d6{animation-delay:1.25s!important}.vs-scene .d7{animation-delay:1.45s!important}
.vs-scene.on .vs-lane .d0 .vs-wave,.vs-scene.on .vs-lane.d1 .vs-wave{animation-delay:inherit}
@keyframes vsin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes vspop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes vsslide{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes vsdraw{to{stroke-dashoffset:0}}
@keyframes vsgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes vsgrowx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vsbounce{from{transform:scaleY(.15)}to{transform:scaleY(.7)}}
@keyframes vsripple{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.25)}}
@keyframes vsfloat{from{transform:translateY(4px)}to{transform:translateY(-8px)}}
@keyframes vsblink{50%{opacity:.15}}
@keyframes vshit{0%{fill:#0e1730}60%{fill:#f4c542}100%{fill:#f4c542}}
@keyframes vsplay{from{transform:translateX(0)}to{transform:translateX(300px)}}
@keyframes vsglow{to{filter:drop-shadow(0 0 8px #f4c542)}}
@keyframes vsshine{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(190px) skewX(-18deg);opacity:0}}
@keyframes vsstr{from{transform:translateY(-.8px)}to{transform:translateY(.8px)}}
@keyframes vsfade{from{transform:translateY(-14px)}to{transform:translateY(14px)}}
/* pointing at part of the page */
.vs-lock{position:fixed;z-index:67;pointer-events:none;opacity:0;transition:left .9s cubic-bezier(.2,.9,.2,1),top .9s cubic-bezier(.2,.9,.2,1),width .9s cubic-bezier(.2,.9,.2,1),height .9s cubic-bezier(.2,.9,.2,1),opacity .5s}
.vs-lock.on{opacity:1}.vs-lock.off{opacity:0;transition:opacity .6s}
.vs-lock i{position:absolute;width:22px;height:22px;border:2px solid var(--gold);filter:drop-shadow(0 0 6px rgba(244,197,66,.7))}
.vs-lock .tl{left:0;top:0;border-right:0;border-bottom:0}.vs-lock .tr{right:0;top:0;border-left:0;border-bottom:0}.vs-lock .bl{left:0;bottom:0;border-right:0;border-top:0}.vs-lock .br{right:0;bottom:0;border-left:0;border-top:0}
.vs-lock b{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(51,225,255,.9),transparent);opacity:0}
.vs-lock.on b{animation:vslockscan 1.4s .9s ease-in-out 2}
@keyframes vslockscan{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(var(--h,120px))}}
.vs-lock span{position:absolute;left:0;top:-22px;font:600 10px/1 var(--mono);letter-spacing:.18em;color:#0a0a0a;background:var(--gold);padding:5px 7px;opacity:0;transition:opacity .4s .8s}
.vs-lock.on span{opacity:1}
.vs-lit{box-shadow:0 0 0 1px rgba(244,197,66,.5),0 0 34px rgba(244,197,66,.25)!important;transition:box-shadow .6s}
@media (max-width:760px){.vs{left:12px;right:12px;width:auto;top:calc(72px + env(safe-area-inset-top));bottom:auto;transform-origin:top center}.vs-cap{font-size:14px}}
@media (prefers-reduced-motion:reduce){.vs-scene *{animation:none!important}.vs-lock{transition:opacity .3s}}

/* Vai's HUD core in the chat, and her reactions */
.vw-core{position:relative;flex:none;height:108px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 50% 55%,rgba(47,107,255,.16),transparent 70%),repeating-linear-gradient(0deg,rgba(51,225,255,.04) 0 1px,transparent 1px 4px);cursor:pointer}
.vw-core canvas{position:absolute;inset:0;width:100%;height:100%}
.vw-state{position:absolute;left:12px;bottom:8px;font:600 9px/1 var(--mono);letter-spacing:.24em;color:var(--dim)}
.vw[data-core=listening] .vw-state{color:var(--cyan)}.vw[data-core=speaking] .vw-state{color:var(--gold)}.vw[data-core=thinking] .vw-state{color:#b46bff}
.vw-hf{position:absolute;right:10px;bottom:6px;background:rgba(3,5,13,.6);border:1px solid var(--line2);color:var(--dim);font:600 9px/1 var(--mono);letter-spacing:.18em;padding:6px 8px;border-radius:3px;cursor:pointer}
.vw-hf.on{color:#03050d;background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(51,225,255,.5)}
.vw.peek .vw-core{height:72px}
.vw-fab .vw-orb{transform:scale(calc(1 + var(--lvl,0) * .35));transition:transform .08s linear}
.vw.speaking .vw-fab .vw-orb{box-shadow:0 0 calc(18px + var(--lvl,0) * 40px) rgba(244,197,66,.75)}
.vw-hello{animation:none}
.vw.hi .vw-hello:not([hidden]){animation:vwHello .7s cubic-bezier(.2,1.3,.4,1) both}
@keyframes vwHello{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
.vw-hello-t{margin:0}
.vw-hello-a{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.vw-hello-a:empty{display:none}
.vw-hello-a button{background:rgba(51,225,255,.08);border:1px solid rgba(51,225,255,.45);color:var(--cyan);font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border-radius:3px;cursor:pointer}
.vw-hello-a button:first-child{background:var(--gold);border-color:var(--gold);color:#0a0a0a}
@media (max-width:760px){.vw-core{height:84px}}

/* VU Radio song requests */
.r-req{margin-top:24px;padding:14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold)}
.r-req-f input{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--text);padding:10px 12px;font:inherit;font-size:15px;margin-top:8px}
.r-req-f input:focus{border-color:var(--cyan);outline:none}
.r-req-list{list-style:none;margin:6px 0 0;padding:0;max-height:260px;overflow:auto}
.r-req-list button{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);padding:8px 4px;cursor:pointer}
.r-req-list button:hover{background:rgba(51,225,255,.06)}.r-req-list b{font:600 15px/1.2 var(--hud);letter-spacing:.03em}.r-req-list span{font-size:13px;color:var(--mute)}
.r-req-list .none{color:var(--mute);font-size:14px;padding:8px 4px}
.r-req-p{margin:10px 0 0;color:var(--mute)}.r-req-p b{color:var(--gold)}
.r-req-row{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.r-req .btn{margin-top:10px}
.r-req-by{margin:6px 0 0;font:600 11px var(--mono);letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
@media (max-width:600px){.r-req-row{grid-template-columns:1fr}}

/* Website Management: the announcement banner he sets in Vai */
.vu-banner{position:relative;z-index:59;text-align:center;padding:9px 16px;background:linear-gradient(90deg,rgba(244,197,66,.16),rgba(51,225,255,.12));border-bottom:1px solid rgba(244,197,66,.45);color:var(--text);font:600 14px/1.4 var(--body)}
.vu-banner a{color:var(--gold);text-decoration:none}.vu-banner a:hover{text-decoration:underline}
/* DJ booth: the ad-break clock (yellow at 2 minutes, red at 30 seconds) */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bt-ads{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 16px;margin:12px 0 0;padding:12px 16px;border:1px solid rgba(255,255,255,.18);border-left:4px solid #4dffb0;background:rgba(5,10,20,.7);max-width:520px}
.bt-ads[hidden]{display:none}
.bt-ads .bt-ads-k{grid-column:1;font:600 12px/1 var(--mono,monospace);letter-spacing:.14em;color:#a9bccb}
.bt-ads .bt-ads-t{grid-column:1;font:700 44px/1 var(--mono,monospace);font-variant-numeric:tabular-nums;color:#4dffb0}
.bt-ads .bt-ads-n{grid-column:2;grid-row:1/3;font-size:15px;line-height:1.4;color:#d6e6f2}
.bt-ads.warn{border-left-color:#ffd23f;background:rgba(255,210,63,.1)}.bt-ads.warn .bt-ads-t{color:#ffd23f}
.bt-ads.now{border-left-color:#ff3b4e;background:rgba(255,59,78,.14)}.bt-ads.now .bt-ads-t{color:#ff3b4e;animation:btblink 1s steps(2,start) infinite}
.bt-ads.on{border-left-color:#ff3b4e;background:rgba(255,59,78,.2)}.bt-ads.on .bt-ads-t{color:#fff}.bt-ads.on .bt-ads-k{color:#ff8a96}
@keyframes btblink{to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.bt-ads.now .bt-ads-t{animation:none}}
@media (max-width:560px){.bt-ads{grid-template-columns:1fr}.bt-ads .bt-ads-n{grid-column:1;grid-row:auto}}
/* testimonials */
.rv-card .rv-q{color:var(--gold);font-size:40px;line-height:.6;height:18px;font-family:Georgia,serif}
.rv-g{margin-top:22px}
.tm-page .rv-grid .work-empty{grid-column:1/-1}
.tm-cta{margin-top:34px;padding:22px;border:1px dashed var(--line2);border-radius:var(--r);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.tm-cta p{margin:0;color:var(--mute)}
.fb-tm{margin:10px 0 0;font-size:14px;color:var(--mute);border-left:2px solid var(--gold);padding-left:10px}
.fb-tm[hidden]{display:none}
/* profile button (top right of every page) */
.me-btn{flex:none;position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);color:var(--mute);background:rgba(255,255,255,.02)}
.me-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.me-btn:hover,.me-btn[aria-current=page]{color:var(--gold);border-color:var(--gold)}
.me-btn.in{border-color:var(--gold);color:var(--gold)}
.me-btn img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.me-btn .me-dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--gold);color:#0a0a0a;font:700 11px/18px var(--hud);font-style:normal;text-align:center}
@media (max-width:980px){.me-btn{margin-left:4px}}
/* the profile page */
.me-start{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.me-card{border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);padding:22px}
.me-card h2{margin:0 0 8px;font-size:22px}.me-card p{color:var(--mute)}
.me-card form{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.me-card input{flex:1;min-width:180px}
.me-lost{margin-top:16px}.me-lost summary{cursor:pointer;color:var(--cyan)}
.me-rec{margin-bottom:18px;border-color:var(--gold)}
.me-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.me-top b{display:block;font-size:22px}.me-top span{color:var(--mute)}
.me-av{flex:none;width:84px;height:84px;border-radius:50%;border:1px dashed var(--gold);background:var(--bg2);color:var(--gold);font:600 12px var(--hud);letter-spacing:.1em;cursor:pointer;padding:0;overflow:hidden}
.me-av img{width:100%;height:100%;object-fit:cover}
.me-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line2);margin-bottom:18px;overflow-x:auto}
.me-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--mute);font:600 15px var(--hud);letter-spacing:.1em;text-transform:uppercase;padding:12px 14px;cursor:pointer;min-height:44px}
.me-tabs button[aria-selected=true]{color:var(--gold);border-color:var(--gold)}
.me-dl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.me-dl li{display:flex;align-items:center;gap:14px;border:1px solid var(--line2);border-radius:var(--r);padding:14px;background:var(--bg2)}
.me-dl li>div{flex:1;min-width:0}.me-dl b{display:block}.me-dl span{display:block;color:var(--mute);font-size:14px}.me-dl .until{color:var(--gold)}
.me-dl .k{flex:none;font:700 11px var(--hud);letter-spacing:.12em;color:var(--cyan);border:1px solid var(--line2);padding:6px 8px;border-radius:4px}
.me-form fieldset{border:1px solid var(--line2);border-radius:var(--r);padding:16px;margin:0 0 14px}
.me-form legend{font:600 13px var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:0 6px}
.me-form label{display:grid;gap:6px;margin-bottom:10px;font-size:14px;color:var(--mute)}
.me-form small{color:var(--mute)}
.me-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.me-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
@media (max-width:640px){.me-2,.me-3{grid-template-columns:1fr}}
.me-form .chk,.me-chips .chk{display:flex;align-items:center;gap:8px;color:var(--text)}
.me-chips{display:flex;flex-wrap:wrap;gap:8px 18px}
.me-keys{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}.me-keys li{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:var(--r);padding:10px 14px}
.btn.sm{padding:9px 14px;font-size:13px}.btn.danger{background:none;border:1px solid #ff6b6b;color:#ff9a9a}
.me-msg{margin-top:14px}
/* the chat: members */
.chat-as{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--mute);font-size:14px}.chat-as img{width:24px;height:24px;border-radius:50%;object-fit:cover}.chat-as b{color:var(--gold)}
.chat-join{margin:8px 0 0;font-size:13px;color:var(--mute)}
[data-chat-list] .cm-av{width:22px;height:22px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:6px}
[data-chat-list] em.mem{color:var(--gold)}
/* project downloads (music, designs, files) */
.vd-frame.k-audio,.vd-frame.k-files,.vd-frame.k-pdf{padding:22px}
.vd-frame audio{display:block;width:100%}.vd-frame .vd-art{display:block;max-width:320px;width:100%;margin:0 auto 16px;border-radius:6px}
.vd-frame .vd-img{display:block;max-width:100%;max-height:70vh;margin:0 auto}
.vd-files b{display:block;font-size:20px}.vd-files span{color:var(--mute)}
.me-band input:not([type=checkbox]):not([type=file]), .me-band textarea, .me-band select { width: 100%; padding: 12px 14px; font: 400 16px/1.4 var(--body); color: var(--text); background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; }
.me-band input:focus, .me-band textarea:focus, .me-band select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(51,225,255,.18); }
.me-band input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--gold); }
@media (max-width:1440px) and (min-width:981px){#nav a{padding:10px 8px;letter-spacing:.06em}#nav a.cta{padding:11px 12px}.top{gap:12px}}
@media (max-width:1240px) and (min-width:981px){.brand .slogan{display:none}}
/* phones: brand, live chip, menu and profile button all fit on one line */
@media (max-width:520px){
  .top{gap:6px;padding:10px 12px}
  .brand{gap:7px}.brand img{width:36px}
  .brand-t>span{font-size:12.5px;letter-spacing:.08em}
  .brand .slogan{white-space:normal;font-size:10px;max-width:150px;line-height:1.15}
  .top-live{margin-right:4px!important;padding:6px 7px!important;letter-spacing:.1em}
  .menu{width:40px;flex:none}
  .me-btn{width:38px;height:38px;margin-left:0}
}
@media (max-width:520px){
  .top-live{white-space:nowrap;font-size:10px!important;letter-spacing:.06em!important;gap:4px!important}
  .brand-t>span{font-size:12px;letter-spacing:.04em;overflow:visible;text-overflow:clip}
  .brand{min-width:0;flex:1}
}