*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#f7f7ff;background:radial-gradient(circle at 70% 10%,rgba(157,124,255,.55),transparent 28%),radial-gradient(circle at 20% 25%,rgba(90,220,255,.22),transparent 25%),linear-gradient(145deg,#03040b,#07142d 50%,#080512)}.wrap{width:min(1100px,calc(100% - 28px));margin:auto;padding:24px 0 54px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:14px}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:900;letter-spacing:.22em}.orb{width:36px;height:36px;border-radius:999px;background:radial-gradient(circle at 35% 30%,#fff,#dce3ff 35%,#6970ff 66%,#101631);box-shadow:0 0 35px rgba(157,124,255,.8)}nav{display:flex;gap:8px;flex-wrap:wrap}nav a,.pill,.download{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.075);color:#fff;border-radius:999px;padding:9px 12px;text-decoration:none;font-size:13px}.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}.card{border:1px solid rgba(255,255,255,.15);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));box-shadow:0 24px 90px rgba(0,0,0,.5);overflow:hidden}.pad{padding:26px}h1{font-size:clamp(42px,7vw,78px);line-height:.92;letter-spacing:-.06em;margin:0 0 14px}h2{font-size:30px;margin:0 0 12px}.sub{color:#aeb6d8;font-size:18px;line-height:1.55}.steps{display:grid;gap:15px}.step{border:1px solid rgba(255,255,255,.13);background:rgba(0,0,0,.25);border-radius:22px;padding:17px}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:block;color:#aeb6d8;font-size:13px;margin:12px 0 7px}input,textarea{width:100%;border:1px solid rgba(255,255,255,.17);background:rgba(0,0,0,.32);color:#fff;border-radius:16px;padding:13px 14px;font:inherit}textarea{min-height:190px}button,.button{display:inline-block;text-align:center;border:0;text-decoration:none;border-radius:18px;padding:16px 18px;font-weight:900;cursor:pointer;color:#050711;background:linear-gradient(135deg,#fff,#b7c9ff 45%,#ff9be1);font-size:16px}.secondary{background:rgba(255,255,255,.09)!important;color:#fff!important;border:1px solid rgba(255,255,255,.15)!important}.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}.moonbox{padding:26px;min-height:560px;display:flex;flex-direction:column;justify-content:space-between;text-align:center}.moon{width:min(320px,72vw);height:min(320px,72vw);border-radius:50%;margin:24px auto;background:radial-gradient(circle at 36% 30%,#fff,#eef2ff 26%,#929dff 54%,#11172f 76%);box-shadow:0 0 60px rgba(255,255,255,.22),0 0 120px rgba(157,124,255,.42),inset -38px -30px 60px rgba(0,0,0,.36);position:relative;overflow:hidden;animation:pulse 2.4s infinite}.moon:after{content:"";position:absolute;inset:-4%;border-radius:50%;background:#050711;animation:eclipse 3.2s infinite}@keyframes eclipse{0%{transform:translateX(115%)}50%{transform:translateX(0)}100%{transform:translateX(-115%)}}@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}.track{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border-top:1px solid rgba(255,255,255,.11);padding:16px 0}.track:first-child{border-top:0}.meta{color:#aeb6d8;font-size:13px}.downloads{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.notice{border:1px solid rgba(149,255,200,.25);background:rgba(149,255,200,.09);padding:14px;border-radius:16px;color:#dcffeb}.err{border-color:rgba(255,155,179,.28);background:rgba(255,155,179,.1);color:#ffe0e8}pre{white-space:pre-wrap;overflow:auto;background:rgba(0,0,0,.35);padding:14px;border-radius:16px;color:#dfe5ff;max-height:520px}@media(max-width:900px){.grid,.row,.btnrow,.track{grid-template-columns:1fr}.downloads{justify-content:flex-start}}

/* Upload gate patch */
button:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
  filter:grayscale(.35);
  box-shadow:none!important;
}
#gateNotice{
  font-weight:800;
}
.uploadStatus.done:before{
  content:"✓ ";
}
.uploadStatus.error:before{
  content:"✕ ";
}
.uploadStatus.uploading:before{
  content:"↥ ";
}

/* Upload gate patch */
button:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
  filter:grayscale(.35);
  box-shadow:none!important;
}
#gateNotice{
  font-weight:800;
}
.uploadStatus.done:before{
  content:"✓ ";
}
.uploadStatus.error:before{
  content:"✕ ";
}
.uploadStatus.uploading:before{
  content:"↥ ";
}

/* Chunked upload gate patch */
.starfield{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.25;background-image:radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1.5px),radial-gradient(circle,rgba(157,124,255,.9) 1px,transparent 1.5px);background-size:42px 42px,77px 77px;background-position:0 0,20px 30px;animation:starDrift 42s linear infinite}
body.starsOn .starfield, body.generating .starfield{opacity:.65;animation-duration:18s}
@keyframes starDrift{from{transform:translateY(0)}to{transform:translateY(-160px)}}
.prism{position:fixed;inset:-30% -80%;pointer-events:none;z-index:1;opacity:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.05),rgba(105,221,255,.18),rgba(157,124,255,.16),rgba(255,141,227,.14),rgba(255,255,255,.06),transparent 66%);mix-blend-mode:screen;transform:translateX(-35%) rotate(3deg);animation:prismSweep 14s ease-in-out infinite}
body.generating .prism{opacity:1;animation-duration:7s}
@keyframes prismSweep{0%,72%,100%{opacity:0;transform:translateX(-35%) rotate(3deg)}82%{opacity:1}92%{opacity:.25;transform:translateX(35%) rotate(3deg)}}
.card, header{position:relative;z-index:2}
.moonUpload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:156px;border:1px dashed rgba(255,255,255,.25);border-radius:22px;background:radial-gradient(circle at 50% 0%,rgba(157,124,255,.18),rgba(255,255,255,.045));cursor:pointer;text-align:center;padding:18px;transition:.2s ease}
.moonUpload:hover,.moonUpload.drag{border-color:rgba(255,255,255,.6);background:radial-gradient(circle at 50% 0%,rgba(105,221,255,.22),rgba(157,124,255,.12));transform:translateY(-1px)}
.moonUpload input{display:none}
.uploadIcon{font-size:36px;filter:drop-shadow(0 0 18px rgba(157,124,255,.8))}
.uploadTitle{font-weight:900;font-size:18px}
.uploadHint{color:#aeb6d8;font-size:13px}
.uploadBar{height:14px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);overflow:hidden;margin-top:12px;box-shadow:inset 0 0 18px rgba(0,0,0,.3)}
.uploadBar span{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#69ddff,#9d7cff,#ff8de3,#fff);box-shadow:0 0 22px rgba(157,124,255,.8);transition:width .18s ease;position:relative}
.uploadBar span:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:barShine 1.2s linear infinite}
@keyframes barShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.uploadStatus{font-size:13px;color:#aeb6d8;margin-top:8px}
.uploadStatus.uploading{color:#dfe5ff}
.uploadStatus.done{color:#95ffc8}
.uploadStatus.error{color:#ff9bb3}
.uploadStatus.done:before{content:"✓ "}
.uploadStatus.error:before{content:"✕ "}
.uploadStatus.uploading:before{content:"↥ "}
button:disabled{opacity:.45!important;cursor:not-allowed!important;filter:grayscale(.35);box-shadow:none!important}
.constellation{display:flex;gap:14px;justify-content:center;margin-top:16px}
.constellation span{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 18px #fff;opacity:.4;animation:twinkle 2.2s ease-in-out infinite}
.constellation span:nth-child(2){animation-delay:.25s}.constellation span:nth-child(3){animation-delay:.5s}.constellation span:nth-child(4){animation-delay:.75s}.constellation span:nth-child(5){animation-delay:1s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.45)}}

/* YouTube waveform reference patch */
.ytRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.ytPanel{margin-top:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.24);border-radius:20px;padding:16px}
.ytTitle{font-weight:900;margin-bottom:10px}
#waveform{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:8px;background:rgba(255,255,255,.04);overflow:hidden}
.ytControls{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.orLine{display:flex;align-items:center;gap:12px;color:#aeb6d8;font-size:13px;margin:18px 0 12px}
.orLine:before,.orLine:after{content:"";height:1px;background:rgba(255,255,255,.14);flex:1}
@media(max-width:700px){.ytRow{grid-template-columns:1fr}.ytRow button{width:100%}}

/* Local waveform + vocal_id fix */
.ytRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.ytPanel{margin-top:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.24);border-radius:20px;padding:16px}
.ytTitle{font-weight:900;margin-bottom:10px}
#youtubeWave,#referenceWave,#voiceWave{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:8px;background:rgba(255,255,255,.04);overflow:hidden}
.ytControls{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.orLine{display:flex;align-items:center;gap:12px;color:#aeb6d8;font-size:13px;margin:18px 0 12px}
.orLine:before,.orLine:after{content:"";height:1px;background:rgba(255,255,255,.14);flex:1}
@media(max-width:700px){.ytRow{grid-template-columns:1fr}.ytRow button{width:100%}}

/* Tygeta Moon Mixer */
.mixerHero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.mixerActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.mixerGrid{display:grid;grid-template-columns:.78fr 1.22fr;gap:24px;align-items:start}
.deckWrap{text-align:center}
.cdj{width:min(310px,76vw);height:min(310px,76vw);border-radius:50%;margin:8px auto 22px;position:relative;background:radial-gradient(circle at 50% 50%,#090b18 0 16%,#dfe7ff 17% 19%,#131a3c 20% 34%,#050711 35% 56%,#9d7cff 57% 58%,#11172f 59% 100%);box-shadow:0 0 70px rgba(157,124,255,.42),inset 0 0 50px rgba(0,0,0,.85);overflow:hidden}
.cdj:before{content:"";position:absolute;inset:10%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.09) 0 4deg,transparent 4deg 12deg);opacity:.55}
.cdj:after{content:"";position:absolute;left:50%;top:4%;width:3px;height:46%;background:linear-gradient(#fff,rgba(255,255,255,0));transform-origin:50% 100%;filter:drop-shadow(0 0 10px #fff)}
.cdj.spinning{animation:spinDeck 2.6s linear infinite}
@keyframes spinDeck{to{transform:rotate(360deg)}}
.cdjGlow{position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#9d7cff 9% 22%,#050711 23% 100%);box-shadow:0 0 36px rgba(255,255,255,.55);z-index:2}
.cdjLabel{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:13px;line-height:1.05;letter-spacing:.16em;color:#050711;text-shadow:0 1px rgba(255,255,255,.35)}
.transport{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.readout{border:1px solid rgba(255,255,255,.13);background:rgba(0,0,0,.28);border-radius:18px;padding:14px;margin:14px 0;color:#dfe5ff}
.master{margin-top:14px;text-align:left}
.master input{width:100%}
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px;margin-top:16px}
.channel{border:1px solid rgba(255,255,255,.13);background:rgba(0,0,0,.25);border-radius:22px;padding:15px}
.chanHead{min-height:58px}
.chanHead b{display:block;font-size:18px}
.chanHead span{display:block;color:#aeb6d8;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.channel label{display:block;color:#aeb6d8;font-size:12px;margin:10px 0 4px}
.channel input[type=range]{width:100%}
.meter{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0;border:1px solid rgba(255,255,255,.1)}
.meter i{display:block;height:100%;width:8%;border-radius:999px;transition:width .08s linear;box-shadow:0 0 18px rgba(157,124,255,.5)}
.chanBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.chanBtns button{padding:10px;font-size:13px}
.chanBtns button.active{background:linear-gradient(135deg,#ff8de3,#9d7cff)!important;color:#050711!important}
@media(max-width:900px){.mixerHero{display:block}.mixerActions{justify-content:flex-start;margin-top:14px}.mixerGrid{grid-template-columns:1fr}}

/* Tygeta Moon Mixer Landscape Wave Fader Mode */
.landscapeHint{display:none;margin-bottom:14px;border:1px solid rgba(255,255,255,.14);background:rgba(157,124,255,.12);color:#dfe5ff;border-radius:18px;padding:12px 14px;font-weight:800}
.waveChannels{display:flex!important;flex-direction:row!important;gap:12px!important;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.waveChannel{min-width:160px;max-width:190px;flex:1 0 170px;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.waveFader{position:relative;height:310px;border-radius:22px;border:1px solid rgba(255,255,255,.15);background:radial-gradient(circle at 50% 0%,rgba(157,124,255,.16),transparent 45%),rgba(0,0,0,.34);overflow:hidden;touch-action:none;cursor:ns-resize;box-shadow:inset 0 0 22px rgba(0,0,0,.35)}
.waveGhost{position:absolute;inset:10px 18px;display:flex;align-items:center;justify-content:center;gap:3px;transform:rotate(90deg) scaleX(1.25);opacity:.45;pointer-events:none}
.waveGhost span{display:block;width:5px;border-radius:999px;background:linear-gradient(to top,rgba(105,221,255,.35),rgba(157,124,255,.95),rgba(255,141,227,.65));box-shadow:0 0 10px rgba(157,124,255,.35)}
.waveFill{position:absolute;left:0;right:0;bottom:0;height:66.7%;background:linear-gradient(to top,rgba(105,221,255,.24),rgba(157,124,255,.34),rgba(255,141,227,.22)),repeating-linear-gradient(to top,rgba(255,255,255,.055) 0 2px,transparent 2px 10px);border-top:1px solid rgba(255,255,255,.35);pointer-events:none}
.waveThumb{position:absolute;left:8px;right:8px;height:4px;bottom:66.7%;transform:translateY(2px);border-radius:999px;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.9),0 0 36px rgba(157,124,255,.75);pointer-events:none}
.waveValue{position:absolute;top:10px;right:10px;font-weight:900;font-size:13px;color:#050711;background:rgba(255,255,255,.86);border-radius:999px;padding:5px 8px;pointer-events:none}
.miniMeter{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.miniMeter i{display:block;height:100%;width:8%;border-radius:999px;transition:width .08s linear;box-shadow:0 0 18px rgba(157,124,255,.5)}
.panRow{margin-top:2px}
.panRow label{display:block;color:#aeb6d8;font-size:12px;margin-bottom:4px}
.panRow input{width:100%}

@media (orientation: landscape) and (max-height: 620px){
  body{overflow:hidden}
  .wrap{width:calc(100% - 18px)!important;padding:8px 0 10px!important}
  header{margin-bottom:8px!important}
  header nav a{padding:7px 9px!important;font-size:12px!important}
  .mixerHero{padding:10px 14px!important;margin-bottom:8px!important;border-radius:20px!important}
  .mixerHero h1{font-size:28px!important;margin-bottom:2px!important}
  .mixerHero .sub{font-size:12px!important;line-height:1.25!important}
  .mixerActions .button,.mixerActions button{padding:9px 10px!important;font-size:12px!important;border-radius:14px!important}
  .mixerGrid{grid-template-columns:230px 1fr!important;gap:10px!important;height:calc(100vh - 126px);overflow:hidden}
  .mixerGrid > .card{border-radius:20px!important}
  .mixerGrid > .card.pad{padding:10px!important}
  .deckWrap{height:100%;display:flex;flex-direction:column;justify-content:space-between}
  .cdj{width:145px!important;height:145px!important;margin:0 auto 8px!important}
  .cdjLabel{font-size:9px!important}
  .transport{gap:6px!important;margin-bottom:6px!important}
  .transport button{padding:10px 9px!important;font-size:12px!important;border-radius:14px!important}
  .readout{padding:8px!important;margin:6px 0!important;font-size:12px!important;border-radius:14px!important}
  .master{margin-top:4px!important}
  .master label{font-size:11px!important}
  .mixerGrid h2{font-size:20px!important;margin-bottom:4px!important}
  #hintText{display:none}
  .channels.waveChannels{height:calc(100vh - 190px);overflow-x:auto;overflow-y:hidden;align-items:stretch;padding-bottom:8px}
  .waveChannel{min-width:122px!important;max-width:140px!important;flex-basis:128px!important;border-radius:18px!important;padding:9px!important;gap:6px!important}
  .chanHead{min-height:42px!important}
  .chanHead b{font-size:13px!important}
  .chanHead span{font-size:10px!important}
  .waveFader{height:calc(100vh - 310px);min-height:165px;border-radius:18px!important}
  .waveGhost{inset:8px 12px;gap:2px}
  .waveGhost span{width:4px}
  .waveValue{font-size:11px;padding:4px 6px}
  .chanBtns{gap:5px!important;margin-top:4px!important}
  .chanBtns button{padding:8px 5px!important;font-size:11px!important;border-radius:12px!important}
  .panRow label{display:none}
  .panRow input{height:24px}
  body > .wrap > section.card.pad:not(.mixerHero){display:none}
}
@media (orientation: portrait){
  .landscapeHint{display:block}
  .waveChannels{padding-bottom:16px}
  .waveChannel{min-width:170px}
}

/* Moon FX popup / performance deck */
.fxModal{position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(14px);z-index:9999;display:none;align-items:center;justify-content:center;padding:18px}
.fxModal.open{display:flex}
.fxPanel{width:min(980px,100%);max-height:92vh;overflow:auto;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:radial-gradient(circle at 80% 0%,rgba(157,124,255,.32),transparent 35%),linear-gradient(145deg,rgba(10,13,30,.96),rgba(3,4,11,.96));box-shadow:0 30px 120px rgba(0,0,0,.7);padding:22px}
.fxTop{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.fxTop h2{margin:0 0 6px}
.fxGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fxBlock{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);border-radius:22px;padding:16px}
.fxBlock h3{margin:0 0 12px;font-size:18px}
.fxBlock label{display:block;color:#aeb6d8;font-size:12px;margin:12px 0 6px}
.fxBlock input{width:100%}
.fxButtons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fxButtons button{padding:12px 10px;font-size:13px;border-radius:14px}
.tiny{color:#aeb6d8;font-size:12px;line-height:1.35}
.fxExplain{margin-top:14px;border:1px solid rgba(149,255,200,.22);background:rgba(149,255,200,.08);color:#dfffea;padding:13px 14px;border-radius:18px;line-height:1.45}
#fxBtn{background:linear-gradient(135deg,#ff8de3,#9d7cff)!important;color:#050711!important}
@media(max-width:760px){.fxGrid{grid-template-columns:1fr}.fxTop{display:block}#closeFx{margin-top:12px}}
@media (orientation: landscape) and (max-height:620px){
  .fxPanel{max-height:94vh;padding:14px;border-radius:22px}
  .fxTop{margin-bottom:10px}
  .fxTop h2{font-size:22px}
  .fxTop .sub{font-size:12px}
  .fxGrid{grid-template-columns:repeat(4,minmax(170px,1fr));gap:10px}
  .fxBlock{padding:12px;border-radius:18px}
  .fxButtons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fxButtons button{padding:10px 8px;font-size:12px}
  .fxExplain{font-size:12px;padding:10px}
}