:root{--fivehood-wallpaper:none;/* Later: url('background.jpg') */--bg:#080b13;--panel:#111827;--panel2:#172033;--line:#29364b;--text:#f8fafc;--muted:#9aa6b8;--accent:#7c3aed;--blue:#2563eb;--green:#16a34a;--danger:#dc2626}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background-color:#080b13;background-image:linear-gradient(rgba(8,11,19,.90),rgba(8,11,19,.94)),var(--fivehood-wallpaper,none);background-size:cover;background-position:center;background-attachment:fixed}
body{overscroll-behavior:none}.app{max-width:1480px;margin:auto;padding:calc(env(safe-area-inset-top) + 22px) 22px calc(env(safe-area-inset-bottom) + 32px)}
.home,.view{display:none}.active{display:block}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.logo{display:flex;gap:11px;align-items:center}.logoMark{display:none}
h1{font-size:39px;line-height:1;margin:0;font-weight:900;letter-spacing:-1.4px;color:#b8c7da;text-shadow:0 2px 16px rgba(110,135,168,.16)}
.sub{font-size:11px;color:#8f9caf;margin-top:8px;letter-spacing:2.1px;text-transform:uppercase}
.pill{display:none}

.hero{text-align:center;padding:18px 10px 22px}
.hero h1{font-size:clamp(44px,5vw,70px);line-height:.95;margin:0;font-weight:900;letter-spacing:-4px;color:#b8c6d8;text-shadow:0 3px 20px rgba(89,110,140,.20)}
.hero .sub{font-size:clamp(10px,1.2vw,15px);color:#9aa8ba;margin-top:16px;letter-spacing:4px;text-transform:uppercase;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;align-items:stretch;max-width:1040px;margin:0 auto}
.card{position:relative;overflow:hidden;border:1px solid rgba(146,161,181,.42);border-radius:28px;background:linear-gradient(155deg,rgba(48,59,74,.78),rgba(21,29,42,.88));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#eef3f8;padding:15px 14px 14px;text-align:left;min-height:300px;box-shadow:0 18px 42px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 10%,rgba(175,192,214,.11),transparent 36%);pointer-events:none}
.card:hover,.card:focus-visible{transform:translateY(-7px);border-color:rgba(190,205,224,.78);box-shadow:0 20px 48px rgba(0,0,0,.34),0 0 26px rgba(111,134,165,.20),inset 0 1px 0 rgba(255,255,255,.10);outline:none}
.card:active{transform:translateY(-2px) scale(.99)}
.card.wide{grid-column:auto;min-height:300px}
.iconWrap{height:92px;display:grid;place-items:center;margin-bottom:10px}
.ico{width:70px;height:70px;border-radius:20px;display:grid;place-items:center;font-size:34px;background:linear-gradient(145deg,rgba(188,201,218,.15),rgba(73,91,116,.12));border:1px solid rgba(173,190,211,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.20);filter:saturate(.55)}
.card h2{font-size:clamp(16px,1.15vw,20px);line-height:1.08;margin:8px 0 12px;color:#e3eaf2;letter-spacing:-.5px;transition:text-shadow .24s ease,color .24s ease}
.card:hover h2,.card:focus-visible h2{color:#fff;text-shadow:0 0 10px rgba(211,224,240,.50),0 0 22px rgba(112,136,168,.25)}
.card p{font-size:11.5px;line-height:1.45;color:#aab5c4;margin:0 0 22px;min-height:56px}
.cardAction{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(157,176,200,.46);border-radius:999px;padding:9px 11px;background:linear-gradient(145deg,rgba(77,94,116,.44),rgba(38,50,68,.62));color:#e7edf4;font-size:10.5px;font-weight:750;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:background .2s ease,box-shadow .2s ease}
.card:hover .cardAction{background:linear-gradient(145deg,rgba(91,109,133,.58),rgba(43,57,77,.72));box-shadow:0 0 18px rgba(118,143,176,.15)}
.youtubeRow{grid-column:1/-1;display:flex;justify-content:center}
.youtubeRow .card{width:min(100%,430px);min-height:330px}
.youtubeRow .card .iconWrap{height:105px}.youtubeRow .card p{min-height:50px}
.quickbar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.quickItem{border:1px solid rgba(129,146,169,.34);background:rgba(20,29,42,.70);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:20px;padding:14px 16px;display:flex;align-items:center;gap:12px;color:#dce5ef;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.quickIcon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(109,129,156,.12);border:1px solid rgba(151,169,192,.18);font-size:20px}
.quickText b{display:block;font-size:13px}.quickText span{font-size:10px;color:#8997aa}

.toolIcon{width:42px;height:42px;display:block;filter:drop-shadow(0 5px 10px rgba(0,0,0,.24));transition:filter .22s ease,transform .22s ease}
.card:hover .toolIcon{transform:scale(1.06);filter:drop-shadow(0 0 8px currentColor)}
.tone-photo{color:#d5a15f}.tone-edit{color:#86a9cf}.tone-audio{color:#79b8aa}.tone-download{color:#c99486}.tone-convert{color:#9e91c8}.tone-youtube{color:#a98080}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}.youtubeRow{grid-column:1/-1}.quickbar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.app{padding-left:13px;padding-right:13px}.hero{padding:16px 5px 22px}.hero h1{font-size:50px;letter-spacing:-2.5px}.hero .sub{font-size:9px;letter-spacing:2.2px}.grid{grid-template-columns:1fr 1fr;gap:10px}.card,.card.wide{min-height:275px;border-radius:22px;padding:14px 13px}.iconWrap{height:98px}.ico{width:72px;height:72px;border-radius:21px;font-size:34px}.card h2{font-size:16px;margin:5px 0 9px}.card p{font-size:11.5px;min-height:72px;margin-bottom:50px}.cardAction{left:11px;right:11px;bottom:12px;padding:9px 11px;font-size:10px}.youtubeRow .card{width:100%;min-height:260px}.youtubeRow .card .iconWrap{height:80px}.quickbar{grid-template-columns:1fr 1fr;gap:8px}.quickItem{padding:10px;border-radius:16px}.quickIcon{width:34px;height:34px;font-size:16px}.quickText b{font-size:11px}.quickText span{font-size:9px}}
.nav{display:flex;align-items:center;gap:10px;margin-bottom:14px;position:sticky;top:0;z-index:9;padding:5px 0;background:linear-gradient(#080b13 70%,transparent)}.nav h2{font-size:19px;margin:0}.back,.mini{border:1px solid #334155;background:#121a29;color:white;border-radius:12px;padding:9px 11px}
.panel{border:1px solid var(--line);background:#111827e8;border-radius:20px;padding:14px;margin-bottom:12px}.sectionTitle{font-weight:700;margin:0 0 10px}.hint,.status{font-size:11.5px;line-height:1.5;color:var(--muted)}.status{padding:10px;border-radius:12px;background:#0a1120;margin-top:10px}
.tabs{display:flex;gap:7px;overflow:auto;padding-bottom:9px}.tab{white-space:nowrap;border:1px solid #334155;background:#0f172a;color:#cbd5e1;border-radius:999px;padding:9px 12px}.tab.on{background:#26364d;border-color:#60748f;color:#fff;box-shadow:0 0 16px rgba(100,126,160,.18)}
.file{display:block;border:1px dashed #52627a;border-radius:15px;padding:15px;text-align:center;color:#d7deea;margin:9px 0;background:#0b1220}.file input{display:none}
canvas,video{width:100%;border-radius:14px;background:#030712;object-fit:contain;max-height:470px}.reel{aspect-ratio:9/16;max-height:520px;width:auto;max-width:100%;display:block;margin:auto}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.ctrl{border:1px solid #26344a;background:#0b1220;border-radius:13px;padding:9px}.ctrl label{font-size:11px;color:#cbd5e1;display:flex;justify-content:space-between;margin-bottom:6px}.ctrl input[type=range]{width:100%}
.actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.btn{border:1px solid #536985;border-radius:12px;padding:10px 12px;color:#f8fafc;background:linear-gradient(135deg,#31445e,#24344a);font-weight:650;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:box-shadow .2s ease,border-color .2s ease}.btn:hover{border-color:#8196b2;box-shadow:0 0 16px rgba(112,139,175,.20)}.btn.secondary{background:#1e293b;border:1px solid #334155}.btn.good{background:#15803d}.btn.danger{background:#991b1b}.btn:disabled{opacity:.45}
.row{display:flex;gap:8px}.row>*{flex:1;min-width:0}input[type=text],input[type=url],input[type=number],select{width:100%;border:1px solid #334155;background:#0b1220;color:white;border-radius:12px;padding:10px}
.templateGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.template{border:1px solid #334155;background:#0b1220;color:#dbe4f0;border-radius:13px;padding:10px 5px;font-size:11px}.template.on{border-color:#8b5cf6;background:#2e1f56}
.track{display:flex;align-items:center;gap:9px;padding:10px 2px;border-bottom:1px solid #263247}.track:last-child{border:0}.trackName{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.playing{color:#c4b5fd}
.player{position:sticky;bottom:8px;background:#111827f5;border:1px solid #334155;border-radius:18px;padding:11px;box-shadow:0 12px 35px #0008}.player audio{width:100%}.search{margin-bottom:8px}
.statline{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.chip{font-size:10px;border:1px solid #334155;border-radius:999px;padding:5px 8px;color:#cbd5e1}
footer{text-align:center;color:#64748b;font-size:10px;margin:22px 0}.hidden{display:none!important}
@media(max-width:430px){.controls{grid-template-columns:1fr}.templateGrid{grid-template-columns:repeat(2,1fr)}}

/* ================================================================
   FIVEHOOD V12 — REAL RESPONSIVE HOME
   Background and cards are now separate layers.
   Main background always fills the screen; cards resize independently.
   ================================================================ */
.app{max-width:none!important;margin:0!important;padding:0!important}
.home,.view{display:none!important}
.home.active{display:block!important}
.view.active{
  display:block!important;
  width:min(920px,calc(100% - 28px));
  margin:0 auto!important;
  padding:18px 0 34px!important;
}

/* Tool pages: ONLY Home/Back + the selected tool content. */
.view.active .nav{
  position:sticky;top:0;z-index:20;
  margin:0 0 14px!important;padding:8px 0!important;
  background:linear-gradient(#080b13 72%,rgba(8,11,19,0));
}
.view.active .nav .back{display:inline-flex!important}
body{overflow-x:hidden}

#home{
  width:100vw!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  background:
    linear-gradient(rgba(7,17,29,.06),rgba(7,17,29,.18)),
    url("../home-background.jpg") center center/cover no-repeat fixed;
  color:#0c1b35;
}
.homeShell{
  min-height:100vh;
  width:100%;
  padding:clamp(12px,2vh,22px) clamp(14px,2vw,34px) clamp(14px,2vh,22px);
  display:flex;
  flex-direction:column;
}
.homeTop{
  position:relative;
  min-height:clamp(92px,18vh,160px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.homeLogo{
  position:relative;
  margin-top:clamp(4px,1.2vh,12px);
  text-align:center;
}
.brandWord{
  position:relative;
  display:inline-block;
  font-size:clamp(42px,5vw,70px);
  line-height:.95;
  font-weight:900;
  letter-spacing:-3px;
  color:#071a38;
  text-shadow:0 2px 10px rgba(255,255,255,.22);
}
.brandLeaf{
  position:absolute;
  left:55.8%;
  top:-13px;
  width:24px;height:28px;
}
.brandLeaf:before,.brandLeaf:after{
  content:"";position:absolute;width:10px;height:19px;
  background:#2d694f;border-radius:100% 0 100% 0;
  transform-origin:bottom center;
}
.brandLeaf:before{left:3px;top:7px;transform:rotate(-32deg)}
.brandLeaf:after{left:11px;top:0;transform:rotate(27deg)}
.brandStem{position:absolute;left:12px;top:10px;width:2px;height:22px;background:#315c4b;transform:rotate(-5deg)}
.brandSub{
  margin-top:10px;
  font-size:clamp(10px,1.15vw,15px);
  letter-spacing:clamp(2px,.32vw,5px);
  color:#17263a;
  font-weight:500;
}
.brandRule{width:48px;height:2px;background:#24384b;margin:10px auto 0;border-radius:9px}

.circleTool{
  position:absolute;top:0;width:clamp(42px,4.2vw,62px);height:clamp(42px,4.2vw,62px);
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;background:rgba(36,40,48,.50);color:#fff;
  display:grid;place-items:center;font-size:24px;
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  box-shadow:0 7px 18px rgba(0,0,0,.18);
}
.menuCircle{left:0}
.topTools{position:absolute;right:0;top:0;display:flex;gap:12px}
.topTools .circleTool{position:relative;width:clamp(42px,4.2vw,62px);height:clamp(42px,4.2vw,62px)}

.homeCards{
  width:min(1180px,94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(8px,.85vw,14px);
  align-items:stretch;
}
.homeCard{
  position:relative;
  min-width:0;
  height:clamp(270px,48vh,370px);
  padding:clamp(12px,1.15vw,17px);
  border:1px solid rgba(255,255,255,.68);
  border-radius:clamp(20px,1.7vw,28px);
  text-align:left;color:#0b1a34;
  overflow:hidden;cursor:pointer;
  backdrop-filter:blur(20px) saturate(112%);
  -webkit-backdrop-filter:blur(20px) saturate(112%);
  box-shadow:0 13px 28px rgba(10,24,42,.20),inset 0 1px 0 rgba(255,255,255,.62);
  transition:transform .2s ease,box-shadow .2s ease;
}
.homeCard:hover{transform:translateY(-4px);box-shadow:0 17px 34px rgba(10,24,42,.25),0 0 18px rgba(255,255,255,.24)}
.c1{background:linear-gradient(155deg,rgba(255,239,207,.78),rgba(237,214,176,.66))}
.c2{background:linear-gradient(155deg,rgba(224,240,250,.79),rgba(187,217,239,.67))}
.c3{background:linear-gradient(155deg,rgba(231,244,231,.80),rgba(198,229,215,.68))}
.c4{background:linear-gradient(155deg,rgba(255,232,219,.80),rgba(242,201,185,.68))}
.c5{background:linear-gradient(155deg,rgba(239,233,249,.82),rgba(214,201,239,.70))}
.c6{background:linear-gradient(155deg,rgba(248,226,229,.82),rgba(238,196,204,.70))}

.homeIcon{
  height:clamp(82px,15vh,118px);
  display:grid;place-items:center;
}
.homeIcon svg{width:clamp(58px,6vw,88px);height:clamp(58px,6vw,88px);filter:drop-shadow(0 7px 9px rgba(0,0,0,.15))}
.homeCard h2{
  margin:2px 0 8px;
  font-size:clamp(14px,1.25vw,20px);
  line-height:1.05;letter-spacing:-.4px;color:#07172f;
}
.homeCard p{
  margin:0;
  font-size:clamp(9px,.78vw,12px);
  line-height:1.38;color:#26354a;
}
.openPill{
  position:absolute;left:10px;right:10px;bottom:10px;
  min-height:38px;padding:8px 10px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:999px;
  background:rgba(255,255,255,.46);
  display:flex;align-items:center;justify-content:space-between;
  color:#10213a;font-size:clamp(9px,.72vw,11px);font-weight:750;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 5px 12px rgba(0,0,0,.08);
}
.openPill b{font-size:18px;font-weight:500}

.homeBottom{
  width:min(1180px,94vw);
  margin:clamp(10px,1.6vh,18px) auto 0;
  display:grid;grid-template-columns:1.15fr .95fr 1fr 1.05fr;gap:10px;
}
.bottomItem{
  min-height:clamp(54px,9vh,72px);
  border:1px solid rgba(255,255,255,.28);border-radius:20px;
  background:rgba(18,34,51,.78);color:#fff;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  padding:9px 13px;display:flex;align-items:center;gap:10px;
}
.bottomIcon{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);font-size:19px;
}
.bottomText b{display:block;font-size:13px}.bottomText span{font-size:9.5px;color:#c8d2dd}

/* On shorter desktop browser windows, shrink only cards/content — never the page width. */
@media (max-height:700px) and (min-width:800px){
  .homeShell{padding-top:8px;padding-bottom:8px}
  .homeTop{min-height:104px}
  .brandWord{font-size:46px}.brandSub{margin-top:6px;font-size:10px}.brandRule{margin-top:6px}
  .homeCard{height:285px;padding:11px}
  .homeIcon{height:78px}.homeIcon svg{width:62px;height:62px}
  .homeCard h2{font-size:14px;margin-bottom:6px}.homeCard p{font-size:9px}
  .openPill{min-height:34px;bottom:8px;left:8px;right:8px;padding:6px 8px;font-size:9px}
  .homeBottom{margin-top:8px}.bottomItem{min-height:54px;padding:7px 10px}
}

/* Phone/tablet: keep usable rather than forcing six tiny cards. */
@media(max-width:800px){
  #home{background-attachment:scroll}
  .homeTop{min-height:120px}
  .homeCards{grid-template-columns:repeat(2,1fr);width:min(680px,94vw)}
  .homeCard{height:290px}
  .homeBottom{grid-template-columns:1fr 1fr;width:min(680px,94vw)}
}


/* ================================================================
   FIVEHOOD V13
   1) Larger home-card typography
   2) Selected tool opens as a true full-screen app page
   ================================================================ */

/* Home card text: one clear step larger */
.homeCard h2{
  font-size:clamp(16px,1.42vw,22px) !important;
  line-height:1.08 !important;
}
.homeCard p{
  font-size:clamp(11px,.90vw,14px) !important;
  line-height:1.42 !important;
}
.openPill{
  font-size:clamp(10px,.82vw,12.5px) !important;
}

/* Short desktop screens: don't shrink the text back down too much */
@media (max-height:700px) and (min-width:800px){
  .homeCard h2{font-size:16px !important}
  .homeCard p{font-size:11px !important}
  .openPill{font-size:10px !important}
}

/* TOOL PAGE MODE:
   This is a separate full viewport layer, not content below Home. */
body.toolPageOpen{
  overflow:hidden !important;
}
body.toolPageOpen #home{
  display:none !important;
}
body.toolPageOpen .view.active{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:block !important;
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  background:
    radial-gradient(circle at 50% -10%,rgba(74,94,123,.20),transparent 38%),
    #080b13 !important;
}

/* Inner tool content stays comfortably centered */
body.toolPageOpen .view.active > *{
  width:min(920px,calc(100% - 30px));
  margin-left:auto;
  margin-right:auto;
}

/* Only navigation at top + selected tool below it */
body.toolPageOpen .view.active .nav{
  position:sticky !important;
  top:0 !important;
  z-index:30 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 0 16px !important;
  padding:14px max(15px,calc((100vw - 920px)/2)) 12px !important;
  background:rgba(8,11,19,.94) !important;
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body.toolPageOpen .view.active .nav .back{
  display:inline-flex !important;
  align-items:center;
}

/* Give the actual tool a little breathing room at bottom */
body.toolPageOpen .view.active > :last-child{
  margin-bottom:40px;
}


/* ================================================================
   FIVEHOOD V14 — FULL SECOND-PAGE WORKSPACES
   ================================================================ */

body.toolPageOpen{
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 12%,rgba(31,86,143,.30),transparent 34%),
    radial-gradient(circle at 82% 8%,rgba(89,48,126,.22),transparent 30%),
    linear-gradient(145deg,#07101a,#0a1524 58%,#07101a)!important;
}
body.toolPageOpen:before{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:linear-gradient(110deg,rgba(5,11,20,.68),rgba(7,14,25,.46) 52%,rgba(5,10,18,.66));
}
body.toolPageOpen #home{display:none!important}

body.toolPageOpen .view.active{
  position:fixed!important;
  inset:0!important;
  z-index:9999!important;
  display:grid!important;
  grid-template-rows:68px minmax(0,1fr);
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  margin:0!important;
  padding:0 22px 18px!important;
  overflow:hidden!important;
  background:transparent!important;
}

/* Top bar: only Home + selected tool title */
body.toolPageOpen .view.active .nav{
  position:relative!important;
  top:auto!important;
  width:100%!important;
  max-width:1440px!important;
  height:68px;
  margin:0 auto!important;
  padding:12px 0 8px!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
}
body.toolPageOpen .view.active .nav h2{
  margin:0!important;
  font-size:clamp(21px,2vw,30px)!important;
  color:#fff!important;
  text-shadow:0 3px 16px rgba(0,0,0,.48);
}
body.toolPageOpen .view.active .nav .back{
  display:inline-flex!important;align-items:center!important;
  border:1px solid rgba(255,255,255,.30)!important;
  background:rgba(15,25,39,.70)!important;
  color:#fff!important;border-radius:999px!important;
  padding:10px 16px!important;font-weight:750!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}

/* All real tool surfaces become glass workspaces */
body.toolPageOpen .view.active > .panel,
body.toolPageOpen .view.active > .player,
body.toolPageOpen .view.active > .status,
body.toolPageOpen #visual.active > .tabs{
  border:1px solid rgba(255,255,255,.20)!important;
  background:linear-gradient(145deg,rgba(12,23,38,.84),rgba(15,25,42,.72))!important;
  box-shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(22px) saturate(115%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(115%)!important;
}

/* ---------------- Photo / Video / Reels workspace ---------------- */
body.toolPageOpen #visual.active{
  grid-template-rows:68px 48px minmax(0,1fr)!important;
}
body.toolPageOpen #visual.active > .tabs{
  width:min(1120px,100%)!important;
  margin:0 auto 8px!important;
  padding:5px!important;
  border-radius:16px!important;
  justify-content:center!important;
  overflow:hidden!important;
}
body.toolPageOpen #visual.active > .tabs .tab{
  flex:1;max-width:210px;text-align:center;
}
body.toolPageOpen #visual.active > .panel{
  width:min(1320px,100%)!important;
  height:100%!important;
  max-height:none!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:14px!important;
  border-radius:24px!important;
  overflow:hidden!important;
}

/* PHOTO: preview left, tools right */
body.toolPageOpen #photoPane:not(.hidden){
  display:grid!important;
  grid-template-columns:minmax(0,1.65fr) minmax(290px,.72fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:
    "file tools"
    "preview tools"
    "bottom tools";
  gap:12px!important;
}
#photoPane > .file{grid-area:file;margin:0!important;padding:10px!important}
#photoPane > #photoCanvas{
  grid-area:preview;
  width:100%!important;height:100%!important;
  min-height:0!important;max-height:none!important;
  object-fit:contain!important;border-radius:16px!important;
  background:rgba(3,7,18,.76)!important;
}
#photoPane > .controls{
  grid-area:tools;
  display:flex!important;flex-direction:column!important;
  gap:7px!important;margin:0!important;
  overflow:hidden!important;
  padding:4px!important;
}
#photoPane > .controls .ctrl{padding:8px!important}
#photoPane > #photoText{grid-area:bottom;margin:0!important}
#photoPane > .actions{
  grid-area:bottom;
  justify-self:end;align-self:end;
  margin:0 0 0 250px!important;
  z-index:2;
}

/* VIDEO: video left, timing/actions right */
body.toolPageOpen #videoPane:not(.hidden){
  display:grid!important;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.72fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"vfile side" "video side";
  gap:12px!important;
}
#videoPane > .file{grid-area:vfile;margin:0!important;padding:10px!important}
#videoPane > video{
  grid-area:video;width:100%!important;height:100%!important;
  min-height:0!important;max-height:none!important;object-fit:contain!important;
}
#videoPane > .row,#videoPane > .actions,#videoPane > .status{
  grid-column:2!important;
}
#videoPane > .row{grid-row:1;margin:52px 0 0!important}
#videoPane > .actions{grid-row:1;margin:155px 0 0!important;align-self:start}
#videoPane > .status{grid-row:2;margin:0!important;align-self:start}

/* REELS: canvas left, setup/tools right */
body.toolPageOpen #reelsPane:not(.hidden){
  display:grid!important;
  grid-template-columns:minmax(320px,.9fr) minmax(360px,1.1fr);
  grid-template-rows:minmax(0,1fr);
  gap:14px!important;
}
#reelsPane > .reel{
  grid-column:1;grid-row:1 / span 10;
  height:100%!important;width:auto!important;
  max-height:100%!important;max-width:100%!important;
  justify-self:center!important;margin:0!important;
}
#reelsPane > :not(.reel){grid-column:2}
#reelsPane .templateGrid{grid-template-columns:repeat(3,1fr)!important}
#reelsPane .file{padding:9px!important;margin:4px 0!important}
#reelsPane .status{margin-top:4px!important;padding:7px!important}

/* ---------------- Generic editor/downloader pages ---------------- */
body.toolPageOpen #av.active,
body.toolPageOpen #download.active,
body.toolPageOpen #v2a.active,
body.toolPageOpen #youtube.active{
  grid-template-rows:68px minmax(0,1fr)!important;
}
body.toolPageOpen #av.active > .panel,
body.toolPageOpen #download.active > .panel,
body.toolPageOpen #v2a.active > .panel,
body.toolPageOpen #youtube.active > .panel{
  width:min(1180px,100%)!important;
  height:min(620px,100%)!important;
  min-height:0!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  padding:clamp(16px,2vw,26px)!important;
  border-radius:26px!important;
  overflow:hidden!important;
}

/* AV editor: controls become a right-side tool rail */
body.toolPageOpen #av.active > .panel{
  display:grid!important;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr);
  grid-template-rows:auto auto auto minmax(0,1fr);
  gap:12px 16px!important;
}
#av .panel > .file,#av .panel > #avName,#av .panel > #avAudio{grid-column:1}
#av .panel > .row,#av .panel > .controls,#av .panel > .actions,#av .panel > .status{grid-column:2}
#av .panel > .row{grid-row:1}
#av .panel > .controls{grid-row:2;grid-template-columns:1fr!important;margin:0!important}
#av .panel > .actions{grid-row:3;margin:0!important}
#av .panel > .status{grid-row:4;margin:0!important;align-self:start}

/* YouTube: large player, controls compact at top */
#youtube .panel{
  display:grid!important;
  grid-template-columns:1fr auto;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px!important;
}
#youtube .panel > #youtubeUrl{grid-column:1}
#youtube .panel > .actions{grid-column:2;margin:0!important}
#youtube .panel > #youtubeBox{
  grid-column:1/-1;
  width:100%!important;height:100%!important;min-height:0!important;
  aspect-ratio:auto!important;margin:0!important;
}
#youtube .panel > #youtubeStatus{grid-column:1/-1;margin:0!important;padding:7px 10px!important}

/* Downloader pages are centered compact glass boxes */
#download .panel,#v2a .panel{height:auto!important;max-height:360px!important}

/* ---------------- Audio Player: whole player visible, no scroll ---------------- */
body.toolPageOpen #player.active{
  grid-template-columns:minmax(0,1.35fr) minmax(340px,.72fr);
  grid-template-rows:68px minmax(0,1fr) auto;
  column-gap:16px!important;
}
body.toolPageOpen #player.active > .nav{grid-column:1/-1}
body.toolPageOpen #player.active > .panel{
  grid-column:2;grid-row:2 / span 2;
  width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:14px!important;border-radius:24px!important;
  overflow:hidden!important;
  display:flex!important;flex-direction:column!important;
}
#player .panel > .file{padding:10px!important;margin:0 0 8px!important}
#player .panel > .actions{margin:0 0 6px!important}
#player #tracks{overflow:auto!important;min-height:0!important;scrollbar-width:thin}
body.toolPageOpen #player.active > .player{
  grid-column:1;grid-row:2;
  position:relative!important;bottom:auto!important;
  width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:24px!important;border-radius:26px!important;
  display:flex!important;flex-direction:column!important;
  justify-content:center!important;
}
#player .player audio{width:100%!important;margin:18px 0!important}
body.toolPageOpen #player.active > .status{
  grid-column:1;grid-row:3;
  width:100%!important;margin:10px 0 0!important;padding:8px 12px!important;
  border-radius:14px!important;font-size:10px!important;
}

/* Slightly denser controls so everything fits on 768px-ish browser heights */
body.toolPageOpen .panel{font-size:13px}
body.toolPageOpen .file{padding:10px}
body.toolPageOpen .ctrl{padding:7px}
body.toolPageOpen .actions{gap:6px}
body.toolPageOpen .btn{padding:8px 10px}
body.toolPageOpen .status{font-size:10.5px;line-height:1.35}
body.toolPageOpen input[type=text],
body.toolPageOpen input[type=url],
body.toolPageOpen input[type=number],
body.toolPageOpen select{padding:8px}

/* Desktop pages are designed to avoid document scrolling. */
@media(min-width:801px){
  body.toolPageOpen .view.active{overflow:hidden!important}
}

/* On phones, usability wins: allow the selected tool page itself to scroll. */
@media(max-width:800px){
  body.toolPageOpen{overflow:auto!important}
  body.toolPageOpen .view.active{
    position:fixed!important;overflow-y:auto!important;
    display:block!important;padding:0 13px 24px!important;
  }
  body.toolPageOpen .view.active .nav{height:auto!important;min-height:62px!important}
  body.toolPageOpen #photoPane:not(.hidden),
  body.toolPageOpen #videoPane:not(.hidden),
  body.toolPageOpen #reelsPane:not(.hidden),
  body.toolPageOpen #av.active > .panel,
  body.toolPageOpen #youtube.active > .panel{
    display:block!important;height:auto!important;overflow:visible!important;
  }
  body.toolPageOpen #player.active{display:block!important}
  body.toolPageOpen #player.active > .panel,
  body.toolPageOpen #player.active > .player{height:auto!important;margin-bottom:10px!important}
}
body.toolPageOpen #player.active{
  display:grid!important;
  grid-template-rows:88px minmax(0,1fr) 92px!important;
  grid-template-columns:1fr!important;
  padding:0 18px 14px!important;
  overflow:hidden!important;
}
#player .audioTopbar{
  width:100%!important;max-width:1600px!important;margin:0 auto!important;
  display:grid!important;grid-template-columns:auto minmax(220px,1fr) auto!important;
  align-items:center!important;gap:18px!important;padding:10px 0 8px!important;
}
.audioBrand{display:flex;align-items:center;gap:9px;min-width:355px}.audioBrand .back{flex:none}
.audioTitleWrap{display:flex;align-items:center;gap:10px}.audioTitleIcon{font-size:28px;filter:drop-shadow(0 0 10px #00e5d4)}
.audioTitle{font-size:26px;font-weight:850;line-height:1}.audioSubtitle{font-size:11px;color:#d0d8e5;margin-top:5px}
.audioLogo{position:absolute;left:50%;top:4px;transform:translateX(-50%);width:80px;height:80px;object-fit:cover;border-radius:50%;z-index:3;filter:drop-shadow(0 8px 18px rgba(0,0,0,.38)) drop-shadow(0 0 10px rgba(26,133,255,.35))}
.audioSearchWrap{justify-self:end;width:min(440px,36vw);display:flex;align-items:center;gap:9px}
.audioSearch{flex:1;border:1px solid rgba(255,255,255,.22)!important;background:rgba(13,24,40,.68)!important;backdrop-filter:blur(16px);border-radius:18px!important;padding:12px 15px!important;color:#fff!important}
.topRound{width:46px;height:46px;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:rgba(14,25,42,.66);color:#fff;font-size:19px;backdrop-filter:blur(16px)}

.audioWorkspace{width:100%!important;max-width:1600px!important;min-height:0!important;margin:0 auto!important;display:grid!important;grid-template-columns:minmax(210px,.62fr) minmax(460px,1.55fr) minmax(300px,.9fr);gap:16px!important}
.audioGlass{border:1px solid rgba(255,255,255,.20);background:linear-gradient(145deg,rgba(9,18,31,.82),rgba(12,22,37,.66));box-shadow:0 20px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px) saturate(115%);-webkit-backdrop-filter:blur(22px) saturate(115%);border-radius:24px;color:#fff}
.audioSide{padding:14px;min-height:0;overflow:hidden}.libItem{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:14px;color:#eef4ff;font-size:13px;margin:2px 0}.libItem span:first-child{font-size:19px;width:24px;text-align:center}.libItem b{margin-left:auto;color:#aab8cb;font-size:11px}.libItem.active{background:linear-gradient(90deg,#0e83ff,#4b28e8);box-shadow:0 0 18px rgba(24,123,255,.42)}.libRule{height:1px;background:rgba(255,255,255,.13);margin:10px 5px}.createPlaylist{width:100%;margin-top:10px;border:1px solid rgba(255,255,255,.18);border-radius:15px;padding:11px;background:rgba(255,255,255,.09);color:#fff;font-weight:700}

.audioCenter{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px}
.headphoneStage{position:relative;width:min(52vh,480px);aspect-ratio:1/1;margin-top:0;isolation:isolate}
/* Album circle is the master geometry: upper half = volume, lower half = progress. */
.albumDisc{position:absolute;left:12%;top:12%;width:76%;height:76%;border-radius:50%;overflow:hidden;border:3px solid rgba(215,235,255,.62);box-shadow:0 0 0 7px rgba(2,8,17,.76),0 18px 45px rgba(0,0,0,.42);background:url('../home-background.jpg') center/cover;z-index:2}
.albumDisc:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.06) 40%,rgba(0,0,0,.34) 100%)}
.albumTitle{position:absolute;left:8%;right:8%;top:43%;text-align:center;font:italic 700 clamp(28px,3vw,48px) Georgia,'Times New Roman',serif;line-height:.95;color:#fff;text-shadow:0 4px 14px #000,0 1px 2px #000;white-space:nowrap;z-index:2}
.albumArtist{position:absolute;left:8%;right:8%;top:59%;text-align:center;color:#fff;font-weight:650;font-size:14px;text-shadow:0 2px 8px #000;z-index:2}
/* Headband is visual only; it hugs the album but does not steal pointer events. */
.headband{position:absolute;left:7%;top:2%;width:86%;height:53%;border:18px solid #111;border-bottom:0;border-radius:50% 50% 0 0/72% 72% 0 0;box-shadow:inset 0 3px 3px rgba(255,255,255,.25),0 5px 10px #0009;pointer-events:none;z-index:1}
.ear{position:absolute;top:35%;width:14%;height:31%;border-radius:45% 35% 35% 45%;background:linear-gradient(90deg,#111,#434b54 48%,#090b0e);border:2px solid #85909c;box-shadow:inset 0 0 0 5px #0b0d10,0 8px 20px #0008;z-index:5;pointer-events:none}.ear.left{left:2%}.ear.right{right:2%;transform:scaleX(-1)}.ear:after{content:"";position:absolute;inset:14% 18%;border-radius:40%;background:#151515;border:2px solid #262626}
.arcSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:6}.arcBase{fill:none;stroke:#18222d;stroke-width:10;stroke-linecap:round}.arcFill{fill:none;stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 7px currentColor)}.volFill{stroke:#0757a8;color:#0757a8;filter:drop-shadow(0 0 8px rgba(20,96,190,.85))}.progFill{stroke:#25bfff;color:#25bfff}.arcKnob{fill:#fff;stroke:#eaf4ff;stroke-width:2;filter:drop-shadow(0 2px 5px #0008);pointer-events:none}.progressKnob{fill:#eaf8ff;stroke:#25bfff;stroke-width:3;filter:drop-shadow(0 0 7px #25bfff) drop-shadow(0 2px 5px #0008)}.arcHit{fill:none;stroke:rgba(0,0,0,.001);stroke-width:34;pointer-events:stroke;cursor:grab;touch-action:none}.arcHit:active{cursor:grabbing}
.arcLabel{position:absolute;left:50%;top:4.4%;transform:translateX(-50%);font-size:11px;color:#fff;background:rgba(7,15,26,.76);padding:3px 9px;border-radius:999px;pointer-events:none;z-index:8;box-shadow:0 3px 10px #0005}.timeLeft,.timeRight{position:absolute;top:76%;font-size:12px;color:#fff;text-shadow:0 2px 7px #000;z-index:8}.timeLeft{left:3%}.timeRight{right:3%}
.trackMeta{text-align:center;margin-top:-5px}.trackMeta h3{font-size:24px;margin:0}.trackMeta p{font-size:12px;color:#d1d9e5;margin:4px 0 8px}.playControls{display:flex;gap:14px;align-items:center;justify-content:center}.roundControl{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(14,24,39,.68);color:#fff;font-size:20px;box-shadow:0 8px 20px #0005}.roundControl.main{width:66px;height:66px;font-size:26px;border:3px solid #20b7ff;box-shadow:0 0 22px rgba(33,183,255,.65),0 8px 22px #0006}.roundControl.on{color:#3ef0d0;box-shadow:0 0 16px rgba(62,240,208,.28)}

.audioList{padding:15px;min-height:0;display:flex;flex-direction:column}.listHead{display:flex;align-items:center;gap:8px;margin-bottom:8px}.listHead h3{font-size:20px;margin:0}.listHead small{display:block;color:#aeb9c8}.listHead .spacer{flex:1}.listMini{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff}.trackList{overflow:auto;min-height:0;scrollbar-width:thin}.songRow{display:grid;grid-template-columns:30px 42px minmax(0,1fr) auto 26px;align-items:center;gap:8px;padding:8px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:12px}.songRow.playing{background:linear-gradient(90deg,rgba(22,105,238,.56),rgba(35,72,135,.35))}.songArt{width:42px;height:42px;border-radius:9px;background:url('../home-background.jpg') center/cover}.songName{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.songArtist{font-size:10px;color:#aeb8c7;margin-top:2px}.songDur{font-size:10px;color:#dce5ef}.songMore{border:0;background:transparent;color:#fff;font-size:17px}.equalBars{font-size:16px;color:#2de0ff}.emptySongs{padding:22px 8px;text-align:center;color:#aab7c8;font-size:12px}

.audioToolbar{width:100%!important;max-width:1600px!important;margin:10px auto 0!important;display:grid!important;grid-template-columns:repeat(10,1fr);gap:8px!important;padding:8px!important;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:rgba(9,18,31,.74);backdrop-filter:blur(20px);box-shadow:0 12px 30px #0005}.toolBtn{min-width:0;border:0;border-radius:15px;padding:8px 4px;background:linear-gradient(145deg,rgba(35,48,65,.88),rgba(19,29,43,.9));color:#fff;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:4px}.toolBtn span{font-size:19px}.toolBtn.primary{background:linear-gradient(145deg,#0d7cff,#4c27e7);box-shadow:0 0 18px rgba(44,105,255,.45)}
#songs{display:none}.audioToast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%) translateY(15px);z-index:10050;padding:10px 16px;border-radius:999px;background:rgba(5,13,24,.9);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;opacity:0;pointer-events:none;transition:.2s}.audioToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* In-app Back + Home navigation for every tool/subtool page. */
.navActions{display:flex;align-items:center;gap:7px;flex:none}.navActions .back{white-space:nowrap}
@media(max-width:1100px){.audioWorkspace{grid-template-columns:180px minmax(390px,1.4fr) 280px}.audioLogo{width:66px;height:66px}.audioBrand{min-width:250px}.audioToolbar{grid-template-columns:repeat(5,1fr)}body.toolPageOpen #player.active{grid-template-rows:82px minmax(0,1fr) 150px!important}.headphoneStage{width:min(46vh,420px)}}
@media(max-width:800px){body.toolPageOpen #player.active{overflow-y:auto!important;display:block!important;padding:0 10px 18px!important}.audioTopbar{position:sticky;top:0;z-index:20;grid-template-columns:1fr auto!important;background:rgba(5,13,24,.82);backdrop-filter:blur(18px);padding:8px 0!important}.audioBrand{min-width:0}.audioSubtitle{display:none}.audioLogo{position:relative;left:auto;top:auto;transform:none;width:52px;height:52px;justify-self:center}.audioSearchWrap{grid-column:1/-1;width:100%;justify-self:stretch}.audioSearchWrap .topRound{display:none}.audioWorkspace{display:flex!important;flex-direction:column!important;gap:10px!important}.audioCenter{order:1;min-height:520px}.audioSide{order:2;display:flex;gap:5px;overflow:auto;padding:8px}.libItem{min-width:max-content}.libRule,.createPlaylist{display:none}.audioList{order:3;max-height:360px}.headphoneStage{width:min(92vw,430px)}.audioToolbar{display:flex!important;overflow-x:auto!important;position:sticky;bottom:6px;z-index:20;margin-top:10px!important}.toolBtn{min-width:92px}.trackMeta h3{font-size:21px}}


/* ===== Fivehood V17 shared media-studio layout ===== */
body.toolPageOpen .studioView.active{display:grid!important;grid-template-rows:88px minmax(0,1fr) 82px!important;grid-template-columns:1fr!important;padding:0 18px 14px!important;overflow:hidden!important}
.studioTopbar{width:100%;max-width:1600px;margin:0 auto;display:grid;grid-template-columns:minmax(320px,1fr) auto minmax(320px,1fr);align-items:center;gap:16px;padding:10px 0 8px}.studioBrand{display:flex;align-items:center;gap:8px}.studioTitle{margin-left:6px}.studioTitle b{display:block;font-size:23px;line-height:1}.studioTitle span{display:block;font-size:11px;color:#cbd6e4;margin-top:5px}.studioLogo{width:76px;height:76px;border-radius:50%;object-fit:cover;filter:drop-shadow(0 8px 18px #0007) drop-shadow(0 0 10px #176fc655)}.studioTopActions{justify-self:end;display:flex;gap:8px}.studioTopActions button{width:44px;height:44px;border-radius:15px;border:1px solid #ffffff2d;background:#0d1929b8;color:#fff;font-size:18px;backdrop-filter:blur(15px)}
.studioWorkspace{width:100%;max-width:1600px;min-height:0;margin:0 auto;display:grid;grid-template-columns:minmax(205px,.62fr) minmax(450px,1.55fr) minmax(300px,.9fr);gap:16px}.studioGlass{border:1px solid #ffffff31;background:linear-gradient(145deg,#09121fd6,#0c1625b8);box-shadow:0 20px 48px #0005,inset 0 1px 0 #ffffff14;backdrop-filter:blur(22px) saturate(115%);border-radius:24px;color:#fff}.studioLeft,.studioRight{min-height:0;overflow:auto;scrollbar-width:thin;padding:14px}.studioGroup{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8fa4bd;margin:10px 9px 5px}.studioNavBtn{width:100%;border:0;background:transparent;color:#edf5ff;display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:13px;text-align:left;font-size:12px;margin:2px 0}.studioNavBtn span{width:24px;text-align:center;font-size:17px}.studioNavBtn.active,.studioNavBtn:hover{background:linear-gradient(90deg,#0b65c9,#283f91);box-shadow:0 0 16px #0e69cc44}.studioCenter{min-height:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:12px}.studioStage{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}.studioStage canvas,.studioStage video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:18px;box-shadow:0 18px 45px #0008;background:#05090f}.studioStage .reel{height:min(100%,640px);aspect-ratio:9/16}.studioEmpty{color:#aab8c8;text-align:center;font-size:12px;padding:30px}.studioPanel{display:none}.studioPanel.active{display:block}.studioPanel h3{margin:2px 0 4px;font-size:20px}.studioPanel .panelIntro{color:#aebccd;font-size:11px;line-height:1.5;margin-bottom:12px}.studioPanel .ctrl{margin:11px 0}.studioPanel .ctrl label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px}.studioPanel input[type=range]{width:100%}.studioPanel .choiceGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.studioPanel .choiceGrid button,.studioChip{border:1px solid #ffffff25;background:#ffffff10;color:#fff;border-radius:11px;padding:9px 7px;font-size:11px}.studioPanel .choiceGrid button:hover,.studioChip:hover{background:#155aa8}.studioPanel .file{margin:8px 0}.studioPanel input,.studioPanel select{margin-bottom:7px}.studioBottom{width:100%;max-width:1600px;margin:9px auto 0;display:flex;gap:8px;padding:8px;border:1px solid #ffffff2d;border-radius:22px;background:#09121fbd;backdrop-filter:blur(20px);box-shadow:0 12px 30px #0005;overflow-x:auto;scrollbar-width:none}.studioBottom button{flex:1;min-width:105px;border:0;border-radius:14px;padding:9px 8px;background:linear-gradient(145deg,#233041e0,#131d2be8);color:#fff;font-size:10px;white-space:nowrap}.studioBottom button.primary{background:linear-gradient(145deg,#0d70d5,#3135a5);box-shadow:0 0 16px #1b6bd755}.studioBottom button span{display:block;font-size:18px;margin-bottom:2px}.studioStatus{font-size:11px;color:#b9c6d5;background:#07101cb3;border:1px solid #ffffff18;border-radius:12px;padding:9px;margin-top:8px}.templateGridV17{display:grid;grid-template-columns:1fr 1fr;gap:7px}.templateGridV17 .template{min-height:46px;font-size:10px}.trendBadge{font-size:8px;padding:2px 5px;border-radius:99px;background:#145aa5;margin-left:3px}.urlHero{width:min(78%,520px);aspect-ratio:16/10;border:1px solid #ffffff2b;border-radius:26px;background:radial-gradient(circle at 50% 35%,#17497b88,#07101c 68%);display:grid;place-items:center;text-align:center;padding:30px;box-shadow:0 24px 60px #0008}.urlHero .heroIcon{font-size:70px}.urlHero h3{font-size:24px;margin:10px 0 5px}.urlHero p{font-size:11px;color:#b8c6d8;max-width:360px}.waveStage{width:min(86%,650px);padding:28px;border:1px solid #ffffff2b;border-radius:24px;background:#07101caa;text-align:center}.fakeWave{height:110px;display:flex;align-items:center;justify-content:center;gap:4px}.fakeWave i{display:block;width:4px;border-radius:5px;background:linear-gradient(#2e91e8,#29d0e2);height:calc(18px + (var(--h) * 1px));opacity:.9}
@media(max-width:1100px){.studioWorkspace{grid-template-columns:180px minmax(390px,1.35fr) 280px}.studioTopbar{grid-template-columns:minmax(250px,1fr) auto minmax(250px,1fr)}.studioLogo{width:64px;height:64px}}
@media(max-width:800px){body.toolPageOpen .studioView.active{display:block!important;overflow-y:auto!important;padding:0 10px 18px!important}.studioTopbar{position:sticky;top:0;z-index:30;grid-template-columns:1fr auto;background:#07101cd9;backdrop-filter:blur(18px);padding:8px 0}.studioTitle span,.studioTopActions{display:none}.studioLogo{width:52px;height:52px}.studioWorkspace{display:flex;flex-direction:column;gap:10px}.studioCenter{order:1;min-height:54vh}.studioLeft{order:2;display:flex;gap:5px;overflow-x:auto;padding:8px}.studioLeft .studioGroup{display:none}.studioNavBtn{min-width:max-content}.studioRight{order:3;max-height:none}.studioBottom{position:sticky;bottom:6px;z-index:25}.studioBottom button{flex:0 0 96px}}



/* ================================================================
   FIVEHOOD V18 — DESKTOP STUDIO GEOMETRY FIX
   Match the Audio Player: side rails near screen edges, large center
   workspace, fixed bottom action rail. This block intentionally comes
   last so legacy V14 visual-page grid rules cannot squeeze the studio.
   ================================================================ */
@media (min-width:801px){
  body.toolPageOpen #visual.studioView.active,
  body.toolPageOpen #av.studioView.active,
  body.toolPageOpen #download.studioView.active,
  body.toolPageOpen #v2a.studioView.active,
  body.toolPageOpen #youtube.studioView.active,
  body.toolPageOpen #docs.studioView.active{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:88px minmax(0,1fr) 82px!important;
    padding:0 18px 14px!important;
    overflow:hidden!important;
  }

  body.toolPageOpen .studioView.active > .studioTopbar,
  body.toolPageOpen .studioView.active > .studioWorkspace,
  body.toolPageOpen .studioView.active > .studioBottom{
    width:100%!important;
    max-width:1600px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.toolPageOpen .studioView.active > .studioWorkspace{
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(210px,.62fr) minmax(460px,1.55fr) minmax(300px,.9fr)!important;
    gap:16px!important;
    align-self:stretch!important;
  }

  body.toolPageOpen .studioView.active > .studioBottom{
    height:auto!important;
    min-height:0!important;
    margin-top:9px!important;
    margin-bottom:0!important;
    align-self:end!important;
  }

  .studioLeft,.studioRight{
    height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .studioCenter{height:100%!important;min-height:0!important}
  #visual .studioStage{height:100%!important;min-height:0!important}
  #visual #photoCanvas{
    max-width:100%!important;
    max-height:100%!important;
    width:auto!important;
    height:auto!important;
    background:linear-gradient(145deg,rgba(4,10,18,.82),rgba(13,25,43,.76))!important;
    border:1px solid rgba(255,255,255,.12);
  }
  #visual #vid,#visual #reelCanvas{max-width:100%!important;max-height:100%!important}
}

@media (min-width:1601px){
  body.toolPageOpen .studioView.active > .studioTopbar,
  body.toolPageOpen .studioView.active > .studioWorkspace,
  body.toolPageOpen .studioView.active > .studioBottom{max-width:calc(100vw - 36px)!important}
}

/* FIVEHOOD V19 */
.homeTopClean{min-height:clamp(118px,22vh,190px)!important}
.homeCards{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:stretch!important;gap:clamp(8px,.85vw,14px)!important;width:min(1390px,96vw)!important}
.homeCard{flex:0 0 clamp(174px,12.2vw,190px)!important}
.c7{background:linear-gradient(155deg,rgba(226,235,247,.82),rgba(190,207,229,.70))}
.filterGrid19{grid-template-columns:repeat(2,1fr)!important}
.docStage{width:min(86%,760px);min-height:60%;border:1px solid #ffffff2b;border-radius:28px;background:radial-gradient(circle at 50% 30%,#204f7b88,#07101ccc 68%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px;box-shadow:0 24px 60px #0008}
.docHeroIcon{font-size:74px;line-height:1}.docStage h2{margin:8px 0;font-size:28px}.docStage p{max-width:520px;color:#b9c8da;font-size:12px;line-height:1.5}.docFilePreview{margin-top:18px;padding:12px 18px;border:1px solid #ffffff25;border-radius:14px;background:#ffffff0c;color:#d8e4f1;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.formatCloud{display:flex;flex-wrap:wrap;gap:7px}.formatCloud span{padding:7px 9px;border-radius:10px;border:1px solid #ffffff24;background:#ffffff0d;font-size:10px}
@media(max-width:800px){.homeTopClean{min-height:135px!important}.homeCards{display:grid!important;grid-template-columns:repeat(2,1fr)!important}.homeCard{flex:none!important}.docStage{width:96%;min-height:42vh}}

/* ================================================================
   FIVEHOOD V20 — CLEAN WORKSPACES + CLEAR-TOP HOME CARDS
   ================================================================ */
/* Keep seven modules on one desktop row without changing card height. */
.homeCards{width:min(1500px,98vw)!important;flex-wrap:nowrap!important;gap:clamp(7px,.65vw,11px)!important}
.homeCard{flex:1 1 0!important;max-width:190px!important;min-width:0!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important;isolation:isolate}
.homeCard::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:31%;bottom:0;border:1px solid rgba(255,255,255,.68);border-radius:clamp(20px,1.7vw,28px);backdrop-filter:blur(20px) saturate(112%);-webkit-backdrop-filter:blur(20px) saturate(112%);box-shadow:0 13px 28px rgba(10,24,42,.20),inset 0 1px 0 rgba(255,255,255,.62);transition:.2s ease}
.homeCard:hover{box-shadow:none!important}.homeCard:hover::before{box-shadow:0 17px 34px rgba(10,24,42,.25),0 0 18px rgba(255,255,255,.24)}
.c1::before{background:linear-gradient(155deg,rgba(255,239,207,.78),rgba(237,214,176,.66))}.c2::before{background:linear-gradient(155deg,rgba(224,240,250,.79),rgba(187,217,239,.67))}.c3::before{background:linear-gradient(155deg,rgba(231,244,231,.80),rgba(198,229,215,.68))}.c4::before{background:linear-gradient(155deg,rgba(255,232,219,.80),rgba(242,201,185,.68))}.c5::before{background:linear-gradient(155deg,rgba(239,233,249,.82),rgba(214,201,239,.70))}.c6::before{background:linear-gradient(155deg,rgba(248,226,229,.82),rgba(238,196,204,.70))}.c7::before{background:linear-gradient(155deg,rgba(226,235,247,.82),rgba(190,207,229,.70))}
.homeIcon{position:relative;z-index:2;transform:translateY(-4px)}.homeCard h2,.homeCard p,.homeCard .openPill{z-index:2}.homeCard h2,.homeCard p{position:relative}.homeCard h2{margin-top:5px}
@media(max-width:1100px){.homeCards{flex-wrap:wrap!important;width:min(900px,96vw)!important}.homeCard{flex:0 0 min(190px,46vw)!important}}
@media(max-width:800px){.homeCards{display:grid!important;grid-template-columns:repeat(2,1fr)!important}.homeCard{max-width:none!important}}

/* Remove unnecessary second visual layers inside the center workspace. */
#visual .studioStage canvas,#visual .studioStage video{background:transparent!important;border:0!important;box-shadow:none!important}
#visual #photoCanvas:not(.hasMedia),#visual #reelCanvas:not(.hasMedia),#visual #vid:not(.hasMedia){opacity:0!important;pointer-events:none}
.waveStage,.urlHero,.docStage{width:100%!important;max-width:none!important;min-height:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:22px!important}
#youtubeBox{border:0!important;box-shadow:none!important}

/* Document converter: unmistakable 1→2→3 workflow and prominent start action. */
.docSteps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0}.docSteps span{padding:7px 10px;border-radius:999px;background:#ffffff10;border:1px solid #ffffff20;font-size:10px;color:#d9e6f5}.docSteps b{color:#70b9ff;margin-right:4px}.docStart{width:100%;margin-top:10px;border:1px solid #56a8ff!important;background:linear-gradient(135deg,#0a69ca,#293aa4)!important;color:#fff!important;border-radius:13px!important;padding:12px!important;font-weight:800!important;box-shadow:0 0 18px #1675d755}.docStart:hover{filter:brightness(1.12)}
.docModeNote{font-size:10px;line-height:1.45;color:#aebfd2;margin:7px 0}.docModeNote strong{color:#fff}.presTemplateGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;max-height:285px;overflow:auto;padding-right:3px}.presTemplate{position:relative;min-height:58px;border:2px solid transparent!important;border-radius:12px!important;color:#fff!important;font-size:9px!important;font-weight:750!important;text-shadow:0 1px 3px #0008;overflow:hidden}.presTemplate.on{border-color:#70c5ff!important;box-shadow:0 0 14px #1687d966}.presTemplate::after{content:attr(data-name);position:absolute;left:6px;right:6px;bottom:5px;text-align:left}.pt1{background:linear-gradient(135deg,#f7f8fb,#dbe6f3)!important;color:#15243b!important;text-shadow:none}.pt2{background:linear-gradient(135deg,#07172f,#315a91)!important}.pt3{background:linear-gradient(135deg,#f4eadf,#c9b59d)!important;color:#30261f!important;text-shadow:none}.pt4{background:linear-gradient(135deg,#111,#444)!important}.pt5{background:linear-gradient(135deg,#134e5e,#71b280)!important}.pt6{background:linear-gradient(135deg,#172554,#2563eb)!important}.pt7{background:linear-gradient(135deg,#231942,#9f86c0)!important}.pt8{background:linear-gradient(135deg,#0f172a,#38bdf8)!important}.pt9{background:linear-gradient(135deg,#fff7ed,#fb923c)!important;color:#431407!important;text-shadow:none}.pt10{background:linear-gradient(135deg,#e7e5e4,#78716c)!important}.pt11{background:linear-gradient(135deg,#082f49,#0e7490)!important}.pt12{background:linear-gradient(135deg,#fff,#e5e7eb)!important;color:#111827!important;text-shadow:none}.pt13{background:linear-gradient(135deg,#020617,#7c2d12)!important}.pt14{background:linear-gradient(135deg,#fef3c7,#f9a8d4)!important;color:#4a1730!important;text-shadow:none}.pt15{background:linear-gradient(135deg,#312e81,#c026d3)!important}.pt16{background:linear-gradient(135deg,#052e16,#16a34a)!important}.pt17{background:linear-gradient(135deg,#450a0a,#dc2626)!important}.pt18{background:linear-gradient(135deg,#fff,#111)!important}.pt19{background:linear-gradient(135deg,#000,#b08d57)!important}.pt20{background:linear-gradient(135deg,#e0f2fe,#fce7f3)!important;color:#334155!important;text-shadow:none}.pt21{background:linear-gradient(135deg,#f8fafc,#94a3b8)!important;color:#1e293b!important;text-shadow:none}.pt22{background:linear-gradient(135deg,#1e1b4b,#f97316)!important}.pt23{background:linear-gradient(135deg,#0f172a,#0284c7)!important}.pt24{background:linear-gradient(135deg,#78350f,#fef3c7)!important;color:#3f220b!important;text-shadow:none}


/* ================================================================
   FIVEHOOD V21 — TRUE FLOATING MODULE ICONS + TRUE FULL STAGE MEDIA
   ================================================================ */
/* The module icon now lives completely ABOVE the glass body. */
.homeCards{margin-top:34px!important;overflow:visible!important}
.homeCard{padding-top:clamp(54px,5.4vw,70px)!important;overflow:visible!important}
.homeCard::before{top:44px!important}
.homeIcon{
  position:absolute!important;
  z-index:5!important;
  top:-32px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:clamp(74px,5.6vw,88px)!important;
  height:clamp(74px,5.6vw,88px)!important;
  display:grid!important;place-items:center!important;
  border-radius:26px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.42))!important;
  box-shadow:0 14px 28px rgba(8,25,48,.25),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 5px rgba(255,255,255,.10)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
}
.homeIcon::after{content:"";position:absolute;inset:7px;border-radius:20px;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.72),transparent 35%);pointer-events:none}
.homeIcon svg{width:62%!important;height:62%!important;filter:drop-shadow(0 5px 7px rgba(7,25,50,.18))!important;overflow:visible}
.c1 .homeIcon{color:#3b72a9;background:linear-gradient(145deg,rgba(255,248,231,.94),rgba(236,211,169,.72))!important}
.c2 .homeIcon{color:#2469ae;background:linear-gradient(145deg,rgba(235,248,255,.95),rgba(177,215,242,.74))!important}
.c3 .homeIcon{color:#18726f;background:linear-gradient(145deg,rgba(237,255,250,.95),rgba(177,226,210,.74))!important}
.c4 .homeIcon{color:#a64d37;background:linear-gradient(145deg,rgba(255,244,236,.95),rgba(244,196,177,.74))!important}
.c5 .homeIcon{color:#6842a6;background:linear-gradient(145deg,rgba(249,244,255,.96),rgba(211,190,241,.76))!important}
.c6 .homeIcon{color:#d51f43;background:linear-gradient(145deg,rgba(255,241,244,.96),rgba(244,190,202,.76))!important}
.c7 .homeIcon{color:#365e91;background:linear-gradient(145deg,rgba(242,248,255,.96),rgba(185,207,235,.76))!important}
.homeCard h2{margin-top:9px!important}
body.toolPageOpen #visual #photoPane:not(.hidden),
body.toolPageOpen #visual #videoPane:not(.hidden),
body.toolPageOpen #visual #reelsPane:not(.hidden){
  display:flex!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  grid-template-areas:none!important;
  width:100%!important;height:100%!important;
  align-items:center!important;justify-content:center!important;
  padding:0!important;margin:0!important;gap:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
#visual #photoCanvas.hasMedia,
#visual #vid.hasMedia,
#visual #reelCanvas.hasMedia{
  display:block!important;
  max-width:96%!important;max-height:94%!important;
  width:auto!important;height:auto!important;
  margin:auto!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
#visual #photoCanvas.hasMedia{object-fit:contain!important}
#visual #vid.hasMedia{object-fit:contain!important}
#visual #reelCanvas.hasMedia{object-fit:contain!important}
@media(max-width:1100px){.homeCards{margin-top:42px!important}.homeCard{padding-top:58px!important}.homeCard::before{top:46px!important}.homeIcon{top:-30px!important}}

/* HOME — heading, then clear scenic air, then icon, then glass body. */
.homeTopClean{min-height:clamp(132px,23vh,205px)!important}
.homeCards{margin-top:54px!important;overflow:visible!important}
.homeCard{
  height:clamp(270px,48vh,370px)!important;
  padding-top:94px!important;
  overflow:visible!important;
}
.homeCard::before{
  top:82px!important;
  border-radius:26px!important;
}
.homeIcon{
  top:-38px!important;
  width:82px!important;height:82px!important;
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 15px 30px rgba(8,25,48,.22),inset 0 1px 0 rgba(255,255,255,.96),0 0 0 4px rgba(255,255,255,.08)!important;
}
.homeIcon svg{width:58%!important;height:58%!important;stroke-width:5.5!important}
.homeCard h2{margin-top:0!important;margin-bottom:7px!important}
.homeCard p{line-height:1.34!important}
@media(max-width:1100px){
  .homeCards{margin-top:50px!important}
  .homeCard{padding-top:92px!important}
  .homeCard::before{top:80px!important}
  .homeIcon{top:-35px!important}
}

/* AUDIO PLAYER — make the center match the approved reference more closely. */
.audioCenter{padding:0 18px!important}
.headphoneStage{width:min(48vh,450px)!important;max-width:100%;}
.albumDisc{
  left:16%!important;top:16%!important;width:68%!important;height:68%!important;
  border:3px solid rgba(215,235,255,.74)!important;
  box-shadow:0 0 0 6px rgba(2,8,17,.78),0 18px 42px rgba(0,0,0,.40)!important;
}
.albumTitle{
  left:9%!important;right:9%!important;top:44%!important;
  font-size:clamp(22px,2.15vw,34px)!important;
  line-height:1!important;letter-spacing:-.6px!important;
}
.albumArtist{top:59%!important;font-size:12px!important;font-weight:600!important}

/* More realistic headphone band and silver/black ear cups. */
.headband{
  left:10%!important;top:4.5%!important;width:80%!important;height:48%!important;
  border:15px solid #11151a!important;border-bottom:0!important;
  border-radius:50% 50% 0 0/76% 76% 0 0!important;
  background:transparent!important;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.24),0 -1px 0 #68727d,0 7px 14px rgba(0,0,0,.48)!important;
}
.ear{
  top:35.5%!important;width:13.5%!important;height:29%!important;
  border-radius:48% 42% 42% 48%!important;
  background:linear-gradient(90deg,#05070a 0 13%,#d5dbe1 14% 25%,#4e5862 27% 36%,#11161c 38% 100%)!important;
  border:1.5px solid #c6d0da!important;
  box-shadow:inset 0 0 0 3px #0a0d11,0 7px 17px rgba(0,0,0,.55),0 0 0 2px rgba(20,28,36,.72)!important;
}
.ear.left{left:7.1%!important}.ear.right{right:7.1%!important;transform:scaleX(-1)!important}
.ear:before{
  content:"";position:absolute;top:-18%;left:27%;width:45%;height:22%;
  border-radius:5px;background:linear-gradient(90deg,#1a2027,#d7dde2 42%,#626d77 72%,#171c22);
  border:1px solid #8f9aa5;box-shadow:0 2px 5px #0008;
}
.ear:after{
  content:""!important;position:absolute!important;inset:12% 19%!important;
  border-radius:46%!important;background:linear-gradient(90deg,#11151a,#2b3036 48%,#0a0c0f)!important;
  border:2px solid #353b42!important;box-shadow:inset 0 0 12px #000!important;
}

/* Circle boundary controls now follow the smaller album circle exactly. */
.arcBase,.arcFill{stroke-width:9!important}
.arcHit{stroke-width:32!important}
.volFill{stroke:#0a4f91!important;color:#0a4f91!important;filter:drop-shadow(0 0 7px rgba(17,88,157,.82))!important}
.progFill{stroke:#25bfff!important;color:#25bfff!important}
.arcKnob{r:8;fill:#f8fbff!important;stroke:#dcecff!important;stroke-width:2!important}
.progressKnob{fill:#eefaff!important;stroke:#25bfff!important;stroke-width:3!important}
.arcLabel{top:8.1%!important;font-size:10.5px!important;background:rgba(7,15,26,.70)!important}
.volumeSign{position:absolute;top:23.8%;z-index:9;width:28px;height:28px;display:grid;place-items:center;pointer-events:none;filter:drop-shadow(0 2px 5px #0008)}
.volumeSign svg{width:24px;height:24px;fill:#fff;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.volumeLow{left:5.5%}.volumeHigh{right:5.5%}
.timeLeft,.timeRight{top:72.5%!important;font-size:11px!important}.timeLeft{left:7%!important}.timeRight{right:7%!important}
.trackMeta{margin-top:-9px!important}.trackMeta h3{font-size:20px!important}.trackMeta p{font-size:11px!important;margin:3px 0 7px!important}
.playControls{gap:12px!important}.roundControl{width:48px!important;height:48px!important;font-size:18px!important}.roundControl.main{width:62px!important;height:62px!important;font-size:24px!important}

@media(max-width:1100px){.headphoneStage{width:min(44vh,410px)!important}.albumTitle{font-size:28px!important}.volumeSign{top:23%}}
@media(max-width:800px){.headphoneStage{width:min(90vw,420px)!important}.albumTitle{font-size:28px!important}.audioCenter{padding:0 8px!important}}
#player .headphoneStage{width:min(54vh,500px)}
#player .albumDisc{
  left:19%;top:19%;width:62%;height:62%;
  border:3px solid rgba(225,239,255,.86);
  box-shadow:0 0 0 7px rgba(4,11,20,.92),0 0 0 10px rgba(118,158,194,.36),0 18px 42px rgba(0,0,0,.44);
  background:url('../home-background.jpg') center/cover no-repeat;
}
#player .albumDisc:before{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 48%,rgba(0,0,0,.20) 100%)}
#player .albumTitle{top:43%;font-size:clamp(24px,2.45vw,40px);left:7%;right:7%;letter-spacing:-.02em}
#player .albumArtist{top:58%;font-size:12px}
/* Premium outer headband: visual shell only. */
#player .headband{
  left:6.5%;top:5.5%;width:87%;height:48%;border-width:15px;
  border-color:#111820;border-radius:50% 50% 0 0/76% 76% 0 0;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.30),inset 0 -2px 3px rgba(0,0,0,.9),0 5px 12px #0009;
}
/* Premium silver/black ear cups with leather center and cyan accent. */
#player .ear{
  top:35.2%;width:13.2%;height:31.5%;border:0;border-radius:46% 38% 38% 46%;
  background:linear-gradient(90deg,#7d8791 0%,#eef4f8 11%,#9da7b1 20%,#222a31 31%,#080b0e 58%,#252d34 78%,#aab3bc 92%,#eef3f6 100%);
  box-shadow:0 0 0 2px #10151a,0 0 0 4px rgba(208,224,236,.78),inset 0 0 9px #000,0 10px 24px #0009;
  z-index:7;
}
#player .ear.left{left:3.2%}#player .ear.right{right:3.2%}
#player .ear:before{content:"";position:absolute;inset:8% 19%;border-radius:45%;background:linear-gradient(90deg,#07090b,#272c31 48%,#080a0c);box-shadow:inset 0 0 0 3px #050607,inset 0 0 15px #000,0 0 0 1px #68727c}
#player .ear:after{content:"";position:absolute;inset:20% 30%;border-radius:48%;background:radial-gradient(ellipse at center,#252a2f 0%,#111417 60%,#050607 100%);border:1px solid #343a40;box-shadow:inset 0 0 9px #000,0 0 10px rgba(22,208,238,.20)}
#player .ear.left{box-shadow:0 0 0 2px #10151a,0 0 0 4px rgba(208,224,236,.78),inset 0 0 9px #000,0 10px 24px #0009,8px 0 14px rgba(18,220,242,.13)}
#player .ear.right{box-shadow:0 0 0 2px #10151a,0 0 0 4px rgba(208,224,236,.78),inset 0 0 9px #000,0 10px 24px #0009,-8px 0 14px rgba(18,220,242,.13)}
/* Upper volume and lower seek arcs deliberately start/end at different points. */
#player .volFill{stroke:#153f78;color:#153f78;filter:drop-shadow(0 0 7px rgba(35,91,158,.70))}
#player .arcBase{stroke:#111923;stroke-width:9}
#player .arcFill{stroke-width:9}
#player .volumeKnobStyle{fill:#f6fbff;stroke:#cfe2f5;stroke-width:2.5;filter:drop-shadow(0 2px 5px #0009)}
#player .progressKnob{fill:#dff9ff!important;stroke:#25bfff!important;stroke-width:3!important;filter:drop-shadow(0 0 8px #25bfff) drop-shadow(0 2px 5px #0009)}
/* Label and speaker signs sit on one visual row, without a line through them. */
#player .arcLabel{top:4.2%;background:transparent;box-shadow:none;padding:0;font-size:11px;font-weight:700;text-shadow:0 2px 7px #000}
#player .volumeSign{top:2.2%;width:30px;height:30px}
#player .volumeLow{left:22%}#player .volumeHigh{right:22%}
#player .volumeSign svg{width:22px;height:22px}
#player .timeLeft,#player .timeRight{top:73.5%;font-size:11px}
#player .timeLeft{left:8%}#player .timeRight{right:8%}
#player .albumDisc{cursor:pointer}
#player .albumDisc:hover{box-shadow:0 0 0 7px rgba(4,11,20,.92),0 0 0 10px rgba(118,158,194,.48),0 0 24px rgba(37,191,255,.20),0 18px 42px rgba(0,0,0,.44)}
/* Supported Formats is informational: replace fake workflow steps with useful capability cards. */
.docGuideCards{display:none;width:min(96%,780px);grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;text-align:left}
.docGuideCard{border:1px solid rgba(255,255,255,.15);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));border-radius:16px;padding:13px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.docGuideCard b{display:block;font-size:12px;color:#fff;margin-bottom:5px}.docGuideCard span{font-size:10px;color:#b9cbe0;line-height:1.45}.docGuideCard em{font-style:normal;color:#6ec7ff}
.docStage.formatsMode .docSteps,.docStage.formatsMode .docFilePreview{display:none!important}.docStage.formatsMode .docGuideCards{display:grid}.docStage.formatsMode .docHeroIcon{font-size:48px}.docStage.formatsMode h2{margin-top:4px}
@media(max-width:800px){.docGuideCards{grid-template-columns:1fr}#player .volumeLow{left:17%}#player .volumeHigh{right:17%}}
#player .headphoneStage{width:min(54vh,500px)!important;}

/* Separate album disc — inset from the headband and ear cups. */
#player .albumDisc{
  left:20.5%!important;top:23.5%!important;width:59%!important;height:59%!important;
  border:3px solid rgba(218,235,249,.86)!important;
  box-shadow:0 0 0 5px rgba(4,10,18,.90),0 0 0 8px rgba(118,158,194,.26),0 15px 34px rgba(0,0,0,.42)!important;
  background:url('../home-background.jpg') center/cover no-repeat!important;
  z-index:3!important;
}
#player .albumTitle{top:43%!important;left:8%!important;right:8%!important;font-size:clamp(22px,2.25vw,36px)!important;line-height:1!important;}
#player .albumArtist{top:59%!important;font-size:11.5px!important;}

/* Main headphone band.  This is the same black structure the volume arc sits on. */
#player .headband{
  left:10.5%!important;top:8.5%!important;width:79%!important;height:45%!important;
  border:17px solid #0b0f14!important;border-bottom:0!important;
  border-radius:50% 50% 0 0/76% 76% 0 0!important;
  background:transparent!important;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.22),inset 0 -3px 4px rgba(0,0,0,.86),0 -1px 0 rgba(150,164,178,.72),0 6px 12px rgba(0,0,0,.52)!important;
  z-index:4!important;
}
/* Silver hinge / yoke: the light segment between black headband and black ear cup. */
#player .hinge{position:absolute;top:33.7%;width:7.2%;height:10.5%;z-index:6;pointer-events:none;border-radius:9px;
  background:linear-gradient(90deg,#303840 0%,#e9eef2 22%,#9da8b2 47%,#f7fafc 65%,#59636d 100%);
  border:1px solid rgba(235,244,250,.82);box-shadow:inset 0 0 0 2px rgba(24,31,38,.50),0 3px 7px #0008;}
#player .hinge.left{left:9.2%;transform:rotate(7deg)}
#player .hinge.right{right:9.2%;transform:rotate(-7deg) scaleX(-1)}

/* Premium ear cups: narrower outer shell, thick silver yoke and soft black leather center. */
#player .ear{
  top:39.5%!important;width:14.4%!important;height:30.5%!important;border-radius:48% 42% 42% 48%!important;
  border:1px solid rgba(231,239,245,.88)!important;
  background:linear-gradient(90deg,#dce3e8 0 8%,#6d7781 9% 17%,#151b21 19% 33%,#050709 35% 68%,#1b2228 72% 84%,#9ba5ae 87% 94%,#eef2f5 96% 100%)!important;
  box-shadow:0 0 0 2px #0b1015,0 0 0 4px rgba(199,214,225,.72),inset 0 0 8px #000,0 10px 22px #0009!important;
  z-index:8!important;
}
#player .ear.left{left:3.6%!important;transform:none!important}
#player .ear.right{right:3.6%!important;transform:scaleX(-1)!important}
#player .ear:before{content:""!important;position:absolute!important;inset:8% 18%!important;border-radius:48%!important;
  background:linear-gradient(90deg,#0a0d10,#2c3238 47%,#080a0c)!important;border:1px solid #69727a!important;
  box-shadow:inset 0 0 0 3px #050607,inset 0 0 16px #000!important;}
#player .ear:after{content:""!important;position:absolute!important;inset:21% 30%!important;border-radius:50%!important;
  background:radial-gradient(ellipse at 48% 45%,#2d3338 0%,#15191d 53%,#060708 100%)!important;border:1px solid #3d444b!important;
  box-shadow:inset 0 0 9px #000,0 0 8px rgba(28,215,238,.16)!important;}

/* Arc base must not look like a second independent headband. */
#player #volumeArc .arcBase{stroke:rgba(255,255,255,.10)!important;stroke-width:8!important;}
#player #volumeArc .arcFill{stroke-width:8!important;}
#player .volFill{stroke:#123d72!important;color:#123d72!important;filter:drop-shadow(0 0 5px rgba(31,91,155,.60))!important;}
#player .volumeKnobStyle{r:8;fill:#f7fbff!important;stroke:#d5e5f4!important;stroke-width:2.4!important;filter:drop-shadow(0 2px 5px #0009)!important;}

/* Volume text is directly above the headband. Speaker signs sit by the band ends, not at the top of the page. */
#player .arcLabel{top:6.1%!important;background:transparent!important;box-shadow:none!important;padding:0!important;font-size:11px!important;font-weight:700!important;text-shadow:0 2px 6px #000!important;}
#player .volumeSign{top:31.1%!important;width:28px!important;height:28px!important;}
#player .volumeLow{left:7.0%!important}.volumeHigh{right:7.0%!important}
#player .volumeSign svg{width:21px!important;height:21px!important;filter:drop-shadow(0 2px 4px #0009)}

/* Song seek arc: lower than the artwork, from below left ear to below right ear. */
#player #progressArc .arcBase{stroke:#101923!important;stroke-width:9!important;}
#player #progressArc .arcFill{stroke-width:9!important;}
#player .progFill{stroke:#25bfff!important;color:#25bfff!important;filter:drop-shadow(0 0 6px rgba(37,191,255,.60))!important;}
#player .progressKnob{r:9;fill:#f5fbff!important;stroke:#25bfff!important;stroke-width:3!important;filter:drop-shadow(0 0 7px #25bfff) drop-shadow(0 2px 5px #0009)!important;}
#player .timeLeft,#player .timeRight{top:71.2%!important;font-size:11px!important;}
#player .timeLeft{left:7.0%!important}.timeRight{right:7.0%!important}

/* Keep metadata close to the player like the approved reference. */
#player .trackMeta{margin-top:-5px!important}
#player .trackMeta h3{font-size:20px!important;margin-bottom:1px!important}
#player .trackMeta p{font-size:11px!important;margin:2px 0 6px!important}

@media(max-width:1100px){
  #player .headphoneStage{width:min(48vh,430px)!important}
  #player .volumeSign{top:31%!important}
}
@media(max-width:800px){
  #player .headphoneStage{width:min(91vw,420px)!important}
  #player .albumTitle{font-size:27px!important}
}

/* Artwork: large, clearly separate from the headphone hardware. */
#player .albumDisc{
  left:20%!important;top:20%!important;width:60%!important;height:60%!important;
  border:3px solid rgba(224,239,250,.88)!important;
  box-shadow:0 0 0 5px #07101a,0 0 0 8px rgba(80,118,150,.34),0 16px 34px rgba(0,0,0,.42)!important;
  z-index:3!important;background:url('../home-background.jpg') center/cover no-repeat!important;
}
#player .albumDisc:before{background:linear-gradient(180deg,rgba(0,0,0,.00),rgba(0,0,0,.02) 48%,rgba(0,0,0,.23))!important}
#player .albumTitle{top:44%!important;font-size:clamp(22px,2.2vw,36px)!important;line-height:.95!important;}

/* One physical headband.  No extra decorative arc above it. */
#player .headband{
  left:10%!important;top:7.5%!important;width:80%!important;height:42.5%!important;
  border:18px solid #090c10!important;border-bottom:0!important;
  border-radius:50% 50% 0 0/78% 78% 0 0!important;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.22),inset 0 -4px 4px rgba(0,0,0,.9),0 -1px 0 rgba(174,188,200,.72),0 5px 12px rgba(0,0,0,.55)!important;
  z-index:4!important;
}
#player .headband:after{
  content:"";position:absolute;left:-7px;right:-7px;top:8px;height:100%;
  border:2px solid rgba(119,140,158,.38);border-bottom:0;border-radius:50% 50% 0 0/78% 78% 0 0;
  pointer-events:none;
}

/* Short silver joints between the black band and the ear cups. */
#player .hinge{
  top:31.5%!important;width:7.4%!important;height:11.5%!important;border-radius:8px!important;z-index:7!important;
  background:linear-gradient(90deg,#323a42 0%,#f4f7f9 18%,#89949e 39%,#f8fafb 61%,#66717a 82%,#252c33 100%)!important;
  border:1px solid rgba(239,246,250,.88)!important;
  box-shadow:inset 0 0 0 2px rgba(21,27,33,.48),0 4px 8px #0008!important;
}
#player .hinge.left{left:8.7%!important;transform:rotate(8deg)!important}
#player .hinge.right{right:8.7%!important;transform:rotate(-8deg) scaleX(-1)!important}

/* Premium over-ear cups: compact, thick and integrated with the band. */
#player .ear{
  top:37%!important;width:15.5%!important;height:30.5%!important;
  border-radius:48% 43% 43% 48%!important;
  border:1px solid rgba(237,244,248,.95)!important;
  background:linear-gradient(90deg,#e7edf1 0 7%,#7c8790 8% 15%,#1d242a 18% 29%,#06080a 34% 69%,#20272d 73% 84%,#87919a 87% 94%,#f3f6f8 96% 100%)!important;
  box-shadow:0 0 0 2px #080d12,0 0 0 4px rgba(203,219,230,.74),inset 0 0 9px #000,0 9px 22px #0009!important;
  z-index:9!important;
}
#player .ear.left{left:2.7%!important;transform:none!important}
#player .ear.right{right:2.7%!important;transform:scaleX(-1)!important}
#player .ear:before{
  content:""!important;position:absolute!important;inset:7% 17%!important;border-radius:49%!important;
  background:linear-gradient(90deg,#0b0e11,#31383e 45%,#0a0c0f)!important;
  border:1px solid #78828a!important;box-shadow:inset 0 0 0 3px #050607,inset 0 0 17px #000!important;
}
#player .ear:after{
  content:""!important;position:absolute!important;inset:21% 30%!important;border-radius:50%!important;
  background:radial-gradient(ellipse at 48% 44%,#343b41 0%,#171b1f 52%,#060708 100%)!important;
  border:1px solid #414950!important;box-shadow:inset 0 0 10px #000,0 0 7px rgba(34,218,239,.18)!important;
}

/* VOLUME: the coloured control is painted directly on the headband. */
#player #volumeArc{z-index:10!important}
#player #volumeArc .arcBase{stroke:transparent!important;stroke-width:10!important}
#player #volumeArc .arcFill{stroke-width:10!important;stroke-linecap:round!important}
#player .volFill{stroke:#083b70!important;color:#083b70!important;filter:drop-shadow(0 0 5px rgba(12,72,133,.65))!important}
#player .volumeKnobStyle{fill:#f8fbff!important;stroke:#dbe8f3!important;stroke-width:2.2!important;filter:drop-shadow(0 2px 5px #0009)!important}
#player .arcLabel{top:1.6%!important;background:transparent!important;box-shadow:none!important;padding:0!important;font-size:10.5px!important;font-weight:700!important;text-shadow:0 2px 6px #000!important}
#player .volumeSign{top:11.5%!important;width:27px!important;height:27px!important;z-index:11!important}
#player .volumeLow{left:14.2%!important}.volumeHigh{right:14.2%!important}
#player .volumeSign svg{width:20px!important;height:20px!important;filter:drop-shadow(0 2px 4px #0009)!important}

/* SEEK: a separate lower semicircle, beginning below one ear and ending below the other. */
#player #progressArc{z-index:10!important}
#player #progressArc .arcBase{stroke:#101923!important;stroke-width:9!important;stroke-linecap:round!important}
#player #progressArc .arcFill{stroke-width:9!important;stroke-linecap:round!important}
#player .progFill{stroke:#25bfff!important;color:#25bfff!important;filter:drop-shadow(0 0 6px rgba(37,191,255,.62))!important}
#player .progressKnob{fill:#f7fbff!important;stroke:#dbeef8!important;stroke-width:2.5!important;filter:drop-shadow(0 0 6px rgba(37,191,255,.72)) drop-shadow(0 2px 5px #0009)!important}
#player .timeLeft,#player .timeRight{top:67.5%!important;font-size:10.5px!important;font-weight:650!important}
#player .timeLeft{left:4.3%!important}.timeRight{right:4.3%!important}

#player .trackMeta{margin-top:-7px!important}
#player .trackMeta h3{font-size:20px!important;margin:0!important}

@media(max-width:1100px){#player .headphoneStage{width:min(48vh,430px)!important}}
@media(max-width:800px){#player .headphoneStage{width:min(91vw,420px)!important}}
#player .headphoneStage{width:min(55vh,510px)!important}
#player .albumDisc{left:17.5%!important;top:20.5%!important;width:65%!important;height:65%!important;border:2px solid rgba(216,235,248,.92)!important;box-shadow:0 0 0 4px #07101a,0 0 0 6px rgba(78,119,153,.30),0 14px 30px rgba(0,0,0,.38)!important}
#player .albumTitle{top:43%!important;left:7%!important;right:7%!important;font-size:clamp(21px,2vw,33px)!important;white-space:nowrap!important}
#player .albumArtist{top:57.5%!important}
#player .headband{left:10.5%!important;top:7.5%!important;width:79%!important;height:44%!important;border-width:17px!important}
#player .headband:after{display:none!important}
#player .hinge{top:32.5%!important;width:7%!important;height:10%!important}
#player .hinge.left{left:8.8%!important}#player .hinge.right{right:8.8%!important}
#player .ear{top:36%!important;width:16.5%!important;height:34%!important;border-radius:46% 42% 42% 46%!important}
#player .ear.left{left:2.1%!important}#player .ear.right{right:2.1%!important}
#player .ear:before{inset:7% 17%!important}#player .ear:after{inset:20% 29%!important}
/* The volume fill is the colored section of the physical upper band. */
#player #volumeArc .arcBase{stroke:transparent!important}
#player #volumeArc .arcFill{stroke-width:10!important}
#player .volFill{stroke:#0d4b86!important;filter:drop-shadow(0 0 4px rgba(13,75,134,.55))!important}
#player .arcLabel{top:0.2%!important;font-size:10.5px!important}
#player .volumeSign{top:13.2%!important;width:25px!important;height:25px!important}
#player .volumeLow{left:14.8%!important}#player .volumeHigh{right:14.8%!important}
/* Lower seek track begins under left cup, follows the lower circle, ends under right cup. */
#player #progressArc .arcBase{stroke:#101923!important;stroke-width:8!important}
#player #progressArc .arcFill{stroke-width:8!important}
#player .timeLeft,#player .timeRight{top:69.3%!important}.timeLeft{left:3.4%!important}.timeRight{right:3.4%!important}
#player .trackMeta{margin-top:-2px!important}
@media(max-width:1100px){#player .headphoneStage{width:min(49vh,440px)!important}}
@media(max-width:800px){#player .headphoneStage{width:min(92vw,425px)!important}}
#player .albumDisc{
  isolation:isolate!important;
  background-blend-mode:normal!important;
}
#player .albumDisc::after,
#player .albumTitle::before,
#player .albumTitle::after,
#player .albumArtist::before,
#player .albumArtist::after{content:none!important;display:none!important;}
#player .albumTitle,
#player .albumArtist{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  text-decoration:none!important;
}
/* Upper control: visually follows the upper/top edge of the headphone band. */
#player #volumeArc{z-index:12!important;}
#player #volumeArc .arcBase{stroke:rgba(230,240,248,.18)!important;stroke-width:8!important;}
#player #volumeArc .arcFill{stroke-width:9!important;stroke-linecap:round!important;}
#player .volFill{stroke:#123f78!important;color:#123f78!important;filter:drop-shadow(0 0 5px rgba(24,78,142,.58))!important;}
#player .arcLabel{top:0!important;}
#player .volumeSign{top:10.5%!important;}
/* Lower control: clear of the picture and visibly below the album circle. */
#player #progressArc{z-index:12!important;}
#player #progressArc .arcFill{stroke-width:8!important;stroke-linecap:round!important;}
#player .timeLeft,#player .timeRight{top:73.8%!important;}
#player .timeLeft{left:3.3%!important;}
#player .timeRight{right:3.3%!important;}
#player .headphoneStage{width:min(50vh,465px)!important;aspect-ratio:1/1!important;margin:4px auto 0!important;filter:drop-shadow(0 22px 36px rgba(0,0,0,.34));isolation:isolate}
#player .headphoneStage:before{content:"";position:absolute;inset:5.5%;border-radius:50%;background:radial-gradient(circle at 47% 39%,#213b58 0%,#142a42 42%,#0a192c 69%,#071221 100%);border:1px solid rgba(177,216,245,.22);box-shadow:inset 0 0 0 13px rgba(20,39,61,.78),inset 0 0 0 28px rgba(9,25,43,.48),inset 0 0 60px rgba(25,163,240,.12),0 0 34px rgba(9,105,173,.17);z-index:0}
#player .orbitHalo{position:absolute;border-radius:50%;pointer-events:none;z-index:1}
#player .orbitHaloA{inset:12%;border:12px solid rgba(76,101,130,.27);box-shadow:inset 0 0 22px rgba(0,0,0,.48),0 0 0 1px rgba(131,174,209,.10)}
#player .orbitHaloB{inset:20%;border:8px solid rgba(77,106,138,.22);box-shadow:0 0 18px rgba(35,195,255,.10),inset 0 0 18px rgba(0,0,0,.38)}
#player .playerStand{position:absolute;left:24%;top:-1.2%;width:52%;height:10%;z-index:10;border-radius:46% 46% 18% 18%/58% 58% 24% 24%;background:linear-gradient(180deg,#dce9f2 0%,#8aa0b4 7%,#32455d 24%,#16283d 55%,#0b1728 82%,#6f8da7 100%);border:1px solid rgba(220,239,252,.62);box-shadow:inset 0 5px 8px rgba(255,255,255,.22),inset 0 -6px 10px rgba(0,0,0,.55),0 8px 18px rgba(0,0,0,.38);pointer-events:none}
#player .orbitEar{position:absolute;top:37%;width:12.5%;height:31%;z-index:11;border-radius:44%/26%;background:linear-gradient(90deg,#dce7ee 0 6%,#687b8d 8% 14%,#152235 20% 80%,#7f94a6 87% 93%,#e6eef3 95%);border:1px solid rgba(226,239,248,.70);box-shadow:0 0 0 3px #0b1727,0 10px 24px rgba(0,0,0,.48),inset 0 0 13px rgba(0,0,0,.76);pointer-events:none}
#player .orbitEar:after{content:"";position:absolute;inset:10% 23%;border-radius:48%;background:radial-gradient(ellipse,#23354b 0%,#101c2c 56%,#06101d 100%);box-shadow:inset 0 0 15px #000,0 0 0 1px rgba(143,181,209,.24)}
#player .orbitEar.left{left:-.4%}#player .orbitEar.right{right:-.4%;transform:scaleX(-1)}
#player .albumDisc{left:29%!important;top:29%!important;width:42%!important;height:42%!important;border:2px solid rgba(74,210,255,.64)!important;box-shadow:0 0 0 7px rgba(5,18,33,.94),0 0 22px rgba(32,202,255,.24),inset 0 0 28px rgba(0,0,0,.28)!important;z-index:4!important;background-image:url('../home-background.jpg')!important}
#player .albumDisc:before{background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.18))!important}
#player .albumTitle,#player .albumArtist{display:none!important}
#player .discPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:62px;height:62px;border-radius:50%;border:2px solid rgba(255,255,255,.94);background:rgba(5,14,26,.38);color:#fff;font-size:27px;line-height:1;backdrop-filter:blur(7px);box-shadow:0 8px 25px rgba(0,0,0,.34),0 0 20px rgba(43,213,255,.18);cursor:pointer}
#player .headband,#player .ear,#player .hinge,#player .volumeSign{display:none!important}
#player .arcSvg{inset:0!important;z-index:7!important}
#player .arcBase{stroke:#2b4058!important;stroke-width:10!important;opacity:.92}
#player .volFill{stroke:#12efaa!important;color:#12efaa!important;filter:drop-shadow(0 0 8px rgba(18,239,170,.72))!important}
#player .progFill{stroke:#36d8ff!important;color:#36d8ff!important;filter:drop-shadow(0 0 8px rgba(54,216,255,.66))!important}
#player .arcKnob{fill:#fff!important;stroke:#d8f5ff!important;stroke-width:3!important;filter:drop-shadow(0 0 7px rgba(255,255,255,.72)) drop-shadow(0 3px 7px #000)!important}
#player .arcLabel{top:7.2%!important;left:50%!important;background:rgba(8,22,39,.94)!important;border:1px solid rgba(123,201,255,.24)!important;padding:5px 12px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;letter-spacing:.05em!important;box-shadow:0 8px 20px rgba(0,0,0,.28)!important;z-index:12!important;white-space:nowrap}
#player .timePill{position:absolute;left:50%;bottom:4.3%;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.05em;color:#fff;background:rgba(7,19,34,.94);border:1px solid rgba(133,201,244,.22);padding:5px 11px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.26);white-space:nowrap}
#player .timePill .timeSep{color:#9db4c9;font-weight:600}#player .timeLeft,#player .timeRight{position:static!important;background:none!important;border:0!important;padding:0!important;font-size:inherit!important;font-weight:inherit!important}
#player .trackMeta{margin-top:-1px!important}#player .trackMeta h3{font-size:23px!important}#player .trackMeta p{margin-bottom:6px!important}
@media(max-width:1100px){#player .headphoneStage{width:min(46vh,425px)!important}}
@media(max-width:800px){#player .headphoneStage{width:min(89vw,425px)!important}.discPlay{width:58px!important;height:58px!important}#player .orbitEar{width:12%;height:29%;top:38%}}



/* ================================================================
   LEGACY ORBIT PLAYER — geometry lock
   One final visual layer matching the approved ToolsGravity reference.
   This block intentionally wins over every earlier player experiment.
   ================================================================ */
#player .headphoneStage{
  width:min(54vh,500px)!important;
  aspect-ratio:1/1!important;
  margin:0 auto!important;
  isolation:isolate!important;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.30))!important;
}
/* Main round chassis: darker blue, less purple, with four readable rings. */
#player .headphoneStage:before{
  content:""!important;position:absolute!important;inset:7.5%!important;border-radius:50%!important;
  background:radial-gradient(circle at 50% 46%,#263b56 0 31%,#172c47 32% 48%,#11243c 49% 64%,#0b1a2e 65% 78%,#091525 79% 100%)!important;
  border:1px solid rgba(153,195,226,.22)!important;
  box-shadow:inset 0 0 0 12px rgba(57,78,105,.20),inset 0 0 0 30px rgba(4,14,27,.22),inset 0 0 42px rgba(16,174,238,.10),0 0 26px rgba(5,80,142,.12)!important;
  z-index:0!important;
}
#player .orbitHaloA{inset:14.2%!important;border:11px solid rgba(88,111,142,.27)!important;box-shadow:inset 0 0 20px rgba(0,0,0,.42),0 0 0 1px rgba(164,204,235,.08)!important}
#player .orbitHaloB{inset:21.3%!important;border:8px solid rgba(76,103,136,.24)!important;box-shadow:inset 0 0 16px rgba(0,0,0,.38),0 0 14px rgba(26,202,255,.08)!important}
/* The top bridge in the reference is a wide, shallow metallic bar — not an oval cap. */
#player .playerStand{
  left:16%!important;top:-1.5%!important;width:68%!important;height:8.4%!important;z-index:15!important;
  border-radius:42px 42px 9px 9px/28px 28px 9px 9px!important;
  background:linear-gradient(180deg,#d9e6ef 0%,#91a8bc 8%,#3e5770 22%,#1b3048 52%,#0c1a2d 79%,#5d7890 100%)!important;
  border:1px solid rgba(224,240,250,.72)!important;
  box-shadow:inset 0 4px 7px rgba(255,255,255,.24),inset 0 -5px 8px rgba(0,0,0,.48),0 7px 14px rgba(0,0,0,.28)!important;
}
/* Side pods are taller, wider and vertically centered like the reference. */
#player .orbitEar{
  top:35.2%!important;width:14.5%!important;height:34.5%!important;z-index:14!important;
  border-radius:46%/25%!important;
  background:linear-gradient(90deg,#e2edf4 0 6%,#71869a 8% 15%,#1c2c42 21% 79%,#71869a 86% 93%,#e5eef4 95% 100%)!important;
  border:1px solid rgba(229,241,249,.76)!important;
  box-shadow:0 0 0 3px #0b1727,0 8px 20px rgba(0,0,0,.42),inset 0 0 14px rgba(0,0,0,.72)!important;
}
#player .orbitEar.left{left:-1.5%!important}#player .orbitEar.right{right:-1.5%!important;transform:scaleX(-1)!important}
#player .orbitEar:after{inset:10% 23%!important;border-radius:48%!important;background:radial-gradient(ellipse at 48% 48%,#2b3d54 0%,#142238 55%,#07111e 100%)!important;box-shadow:inset 0 0 14px #000,0 0 0 1px rgba(170,204,228,.28)!important}
/* Center artwork is larger than P29 and sits in its own cyan-edged well. */
#player .albumDisc{
  left:29%!important;top:29%!important;width:42%!important;height:42%!important;z-index:5!important;
  border:2px solid rgba(42,211,255,.74)!important;
  box-shadow:0 0 0 6px rgba(5,17,31,.96),0 0 0 8px rgba(39,82,118,.35),0 0 20px rgba(31,207,255,.22),inset 0 0 24px rgba(0,0,0,.24)!important;
}
#player .discPlay{width:64px!important;height:64px!important;font-size:28px!important;border-width:2px!important;background:rgba(5,14,26,.32)!important}
/* Volume: short green upper-right arc with a deliberately large knob. */
#player #volumeArc .arcBase{stroke:#30455e!important;stroke-width:10!important;opacity:.82!important}
#player #volumeArc .arcFill{stroke-width:11!important;stroke-linecap:round!important}
#player .volFill{stroke:#14efa9!important;color:#14efa9!important;filter:drop-shadow(0 0 7px rgba(20,239,169,.62))!important}
#player .volumeKnobStyle{fill:#fff!important;stroke:#12273b!important;stroke-width:2.6!important;filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 2px 4px #0008)!important}
#player .arcLabel{top:8.1%!important;left:50%!important;padding:4px 10px!important;font-size:11px!important;letter-spacing:.04em!important;background:#14243a!important;border:1px solid rgba(139,192,229,.24)!important;box-shadow:0 4px 10px rgba(0,0,0,.25)!important;z-index:16!important}
/* Progress: its own outer cyan route. At 00:00 the knob begins on the LEFT, so it never collides with volume. */
#player #progressArc{z-index:11!important}
#player #progressArc .arcBase{stroke:#19bfe7!important;stroke-width:8!important;opacity:.72!important;filter:drop-shadow(0 0 5px rgba(25,191,231,.28))!important}
#player .progFill{stroke:#2ad7ff!important;color:#2ad7ff!important;filter:drop-shadow(0 0 7px rgba(42,215,255,.55))!important}
#player .progressKnob{fill:#fff!important;stroke:#13273a!important;stroke-width:2.6!important;filter:drop-shadow(0 2px 5px #0009)!important}
/* Time capsule is attached to the bottom of the round body, like the reference. */
#player .timePill{bottom:6.1%!important;padding:4px 10px!important;font-size:11.5px!important;background:#132239!important;border:1px solid rgba(138,194,232,.25)!important;box-shadow:0 4px 10px rgba(0,0,0,.28)!important;z-index:16!important}
#player .trackMeta{margin-top:-3px!important}
@media(max-width:1100px){#player .headphoneStage{width:min(49vh,450px)!important}}
@media(max-width:800px){#player .headphoneStage{width:min(92vw,440px)!important}.discPlay{width:60px!important;height:60px!important}}
#player .audioCenter{justify-content:center!important;overflow:visible!important;padding:2px 8px 0!important}
#player .deckGlow{position:absolute;inset:12% 9% 5%;border-radius:50%;background:radial-gradient(circle,rgba(24,156,245,.18),rgba(5,18,40,.06) 55%,transparent 72%);filter:blur(18px);pointer-events:none}
#player .deckVolume{position:absolute;left:9%;right:9%;top:2.5%;height:64px;padding:25px 44px 0;display:flex;align-items:center;gap:10px;border:1px solid rgba(167,204,233,.22);border-radius:20px;background:linear-gradient(180deg,rgba(14,32,61,.86),rgba(5,17,35,.76));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.28);backdrop-filter:blur(12px);z-index:12}
#player .deckVolumeLabel{position:absolute;top:7px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.02em;color:#f4f8ff;text-shadow:0 2px 8px #000}
#player .deckSpeaker{font-size:20px;color:#b9d9f5;line-height:1;transform:rotate(180deg);text-shadow:0 0 10px rgba(37,191,255,.35)}
#player .deckSpeaker.high{transform:none;color:#eef8ff}
#player .deckRange{appearance:none;-webkit-appearance:none;width:100%;height:7px;border-radius:999px;outline:none;cursor:pointer;background:linear-gradient(90deg,#0a4f9d 0%,#189cf5 55%,#27d8e9 80%,rgba(95,125,160,.28) 80%);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 12px rgba(24,156,245,.16)}
#player .deckRange::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#fff,#d8e8f4);border:2px solid #0b2139;box-shadow:0 2px 8px #0008,0 0 0 3px rgba(24,156,245,.16)}
#player .deckRange::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#f4fbff;border:2px solid #0b2139;box-shadow:0 2px 8px #0008}
#player .albumDisc{position:relative!important;left:auto!important;top:auto!important;width:calc(100% - 30px)!important;height:calc(100% - 30px)!important;border-radius:50%!important;border:1px solid rgba(211,235,250,.62)!important;z-index:4!important;background-image:url('../home-background.jpg')!important;background-position:center!important;background-size:cover!important;box-shadow:inset 0 0 34px rgba(0,0,0,.22),0 7px 22px rgba(0,0,0,.34)!important;overflow:hidden!important}
#player .albumDisc:before{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.12) 58%,rgba(0,0,0,.30))!important}
#player .albumTitle{position:absolute!important;left:8%!important;right:8%!important;top:auto!important;bottom:21%!important;font-family:inherit!important;font-size:clamp(18px,2vw,30px)!important;font-weight:800!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:center!important;text-shadow:0 2px 10px #000!important}
#player .albumArtist{position:absolute!important;left:8%!important;right:8%!important;top:auto!important;bottom:13%!important;font-size:10px!important;text-align:center!important;color:#dbeafe!important;text-shadow:0 2px 7px #000!important}
#player .discPlay{width:66px!important;height:66px!important;border-radius:50%!important;border:1px solid rgba(225,242,255,.62)!important;background:rgba(5,18,36,.52)!important;color:#fff!important;font-size:28px!important;backdrop-filter:blur(8px);box-shadow:0 0 0 7px rgba(8,24,43,.25),0 8px 25px #0007!important;z-index:7!important}
#player .discPlay:hover{transform:translate(-50%,-50%) scale(1.06)!important;background:rgba(13,57,104,.72)!important}
#player .deckTick{position:absolute;width:6px;height:6px;border-radius:50%;background:#a7dfff;box-shadow:0 0 10px #189cf5;z-index:8}.deckTick1{top:7%;left:50%}.deckTick2{right:7%;top:50%}.deckTick3{bottom:7%;left:50%}
#player .deckSeek{position:absolute;left:7%;right:7%;bottom:5%;height:56px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:10px;padding:0 13px;border-radius:18px;border:1px solid rgba(167,204,233,.20);background:linear-gradient(180deg,rgba(10,27,51,.82),rgba(5,15,30,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 9px 24px rgba(0,0,0,.24);backdrop-filter:blur(12px);z-index:12}
#player .deckSeek span{font-size:10px;font-weight:700;color:#dcecff;text-align:center;font-variant-numeric:tabular-nums}
#player .seekRange{height:6px;background:linear-gradient(90deg,#25bfff 0%,#25bfff 0%,rgba(92,122,157,.28) 0%,rgba(92,122,157,.28) 100%)}
#player .playerStand,#player .orbitEar,#player .orbitHalo,#player .headband,#player .ear,#player .hinge,#player .volumeSign,#player .arcLabel,#player .timePill{display:none!important}
#player .trackMeta{margin-top:0!important;min-height:42px!important}.trackMeta h3{font-size:20px!important;margin:0 0 1px!important}.trackMeta p{font-size:11px!important;margin:0!important}
#player .playControls{margin-top:4px!important;gap:12px!important}.roundControl{width:50px!important;height:50px!important}.roundControl.main{width:62px!important;height:62px!important}
@media(max-width:1100px){}
@media(max-width:800px){#player .deckVolume{left:7%;right:7%}#player .deckSeek{left:5%;right:5%}.audioCenter{min-height:550px!important}}
#player .audioCenter{justify-content:center!important;overflow:visible!important;padding:0 8px!important}
#player .orbitWave{position:absolute;left:8%;right:8%;top:39%;height:22%;width:84%;z-index:6;pointer-events:none;filter:drop-shadow(0 0 7px rgba(43,207,255,.35))}
#player .orbitPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:1px solid rgba(226,243,255,.66);background:rgba(3,17,35,.46);backdrop-filter:blur(8px);color:#fff;font-size:27px;z-index:8;box-shadow:0 0 0 7px rgba(3,18,38,.20),0 8px 22px #0007;cursor:pointer}
#player .orbitPlay:hover{transform:translate(-50%,-50%) scale(1.05);background:rgba(9,52,96,.65)}
#player .orbitAlbumText{position:absolute;left:10%;right:10%;bottom:17%;text-align:center;z-index:7;pointer-events:none;text-shadow:0 2px 10px #000}
#player .orbitAlbumText b{display:block;font-size:clamp(17px,1.7vw,25px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#player .orbitAlbumText span{display:block;margin-top:3px;font-size:10px;color:#dcecff}
#player .orbitControls{position:absolute;inset:0;z-index:12;overflow:visible;touch-action:none}
#player .orbitControls .arcTrack{fill:none;stroke:rgba(114,145,183,.30);stroke-width:13;stroke-linecap:round}
#player .orbitControls .arcFill{fill:none;stroke-width:13;stroke-linecap:round;stroke-dasharray:0 100}
#player #volumeFill{stroke:url(#orbitVolGradient)}
#player #progressFill{stroke:url(#orbitSeekGradient)}
#player .orbitControls .arcHit{fill:none;stroke:transparent;stroke-width:38;stroke-linecap:round;cursor:pointer;pointer-events:stroke}
#player .orbitControls .arcKnob{fill:#f7fbff;stroke:#b9d9ef;stroke-width:2.2;filter:drop-shadow(0 2px 5px rgba(0,0,0,.65));pointer-events:none}
#player .orbitVolumeLabel{position:absolute;top:1.2%;left:50%;transform:translateX(-50%);z-index:14;padding:4px 10px;border-radius:999px;background:rgba(4,18,37,.62);border:1px solid rgba(174,215,243,.18);font-size:11px;font-weight:800;color:#f5f9ff;backdrop-filter:blur(8px);white-space:nowrap}
#player .orbitSpeaker{position:absolute;top:19%;z-index:14;font-size:18px;color:#eaf6ff;text-shadow:0 2px 8px #000;pointer-events:none}.orbitSpeaker.low{left:5.2%}.orbitSpeaker.high{right:5.2%}
#player .orbitTimes{position:absolute;left:9%;right:9%;bottom:9%;display:flex;justify-content:space-between;z-index:14;pointer-events:none;font-size:10px;font-weight:800;color:#f1f7ff;text-shadow:0 2px 7px #000;font-variant-numeric:tabular-nums}
#player .orbitHint{position:absolute;left:50%;bottom:1.2%;transform:translateX(-50%);font-size:8px;color:#9bbbd5;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:.72;z-index:14}
#player .trackMeta{margin-top:-2px!important;min-height:39px!important}.trackMeta h3{font-size:19px!important;margin:0!important}.trackMeta p{font-size:10px!important;margin:2px 0 0!important}
#player .playControls{margin-top:3px!important}
@media(max-width:1100px){}
@media(max-width:800px){.audioCenter{min-height:550px!important}}
#player{--player-art:url('../home-background.jpg');position:relative!important;isolation:isolate;overflow:hidden!important}
#player:before{content:"";position:absolute;inset:-48px;z-index:0;background-image:linear-gradient(110deg,rgba(2,9,22,.76),rgba(3,14,34,.58) 46%,rgba(2,9,22,.78)),var(--player-art);background-size:cover;background-position:center;filter:blur(25px) saturate(1.08);transform:scale(1.12);opacity:.72;pointer-events:none}
#player:after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 43%,rgba(12,71,125,.10),rgba(2,8,20,.28) 58%,rgba(2,7,18,.58));pointer-events:none}
#player>*{position:relative;z-index:1}
#player .premiumAudioCenter{justify-content:center!important;overflow:visible!important;padding:0 10px!important}
#player .premiumDiscPlayer{position:relative;width:min(52vh,485px);aspect-ratio:1;margin:0 auto;isolation:isolate;filter:drop-shadow(0 24px 40px rgba(0,0,0,.40));touch-action:none}
#player .premiumGlow{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle,rgba(31,157,245,.17),transparent 64%);filter:blur(18px);z-index:0}
#player .premiumDisc{position:absolute;left:12%;top:12%;width:76%;height:76%;border-radius:50%;overflow:hidden;background-image:url('../home-background.jpg');background-size:cover;background-position:center;z-index:2;box-shadow:0 0 0 7px rgba(5,14,27,.96),0 0 0 9px rgba(205,229,245,.50),0 0 0 14px rgba(4,13,27,.82),inset 0 0 38px rgba(0,0,0,.24),0 18px 38px rgba(0,0,0,.42)}
#player .premiumDisc:before{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(1,9,22,.08) 48%,rgba(1,8,20,.50));z-index:1;pointer-events:none}
#player .discShade{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(230,244,255,.34),inset 0 0 45px rgba(0,0,0,.22);z-index:4;pointer-events:none}
#player .premiumSongText{position:absolute;left:9%;right:9%;top:43%;z-index:5;text-align:center;text-shadow:0 3px 13px rgba(0,0,0,.88);pointer-events:none}
#player .premiumSongText b{display:block;font-size:clamp(20px,2.15vw,32px);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
#player .premiumSongText span{display:block;margin-top:5px;font-size:12px;font-weight:650;color:#f0f7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#player .premiumSongText small{display:block;margin-top:2px;font-size:9px;color:#bcd3e8;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#player .premiumWave{position:absolute;left:9%;right:9%;bottom:14%;width:82%;height:22%;z-index:5;pointer-events:none;filter:drop-shadow(0 0 8px rgba(36,214,255,.48))}
#player .premiumArcs{position:absolute;inset:0;width:100%;height:100%;z-index:8;overflow:visible;touch-action:none}
#player .premiumArcTrack,.premiumArcGhost,.premiumArcFill,.premiumArcHit{fill:none;stroke-linecap:round}
#player .premiumArcTrack{stroke:rgba(106,133,166,.28);stroke-width:12}
#player .premiumArcGhost{stroke:transparent;stroke-width:12}
#player .premiumArcFill{stroke-width:12;stroke-dasharray:0 100;filter:drop-shadow(0 0 6px rgba(38,196,255,.28))}
#player .premiumArcHit{stroke:transparent;stroke-width:38;cursor:pointer;pointer-events:stroke}
#player .premiumKnob{fill:#f8fbff;stroke:#d3e7f5;stroke-width:2.2;filter:drop-shadow(0 2px 5px rgba(0,0,0,.72)) drop-shadow(0 0 5px rgba(132,219,255,.32));pointer-events:none}
#player .premiumVolumeLabel{position:absolute;left:50%;top:4.5%;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid rgba(183,218,242,.18);border-radius:999px;background:rgba(3,14,31,.58);backdrop-filter:blur(10px);font-size:10px;color:#eef8ff;box-shadow:0 5px 16px rgba(0,0,0,.18);white-space:nowrap}
#player .premiumVolumeLabel span{font-size:12px}#player .premiumVolumeLabel b{font-weight:750}
#player .premiumTimes{position:absolute;left:12.5%;right:12.5%;bottom:11.3%;z-index:11;display:flex;justify-content:space-between;font-size:10px;font-weight:750;color:#f0f8ff;text-shadow:0 2px 8px #000;font-variant-numeric:tabular-nums;pointer-events:none}
#player .premiumTrackMeta{margin-top:-3px!important;min-height:42px!important}.premiumTrackMeta h3{font-size:21px!important;margin:0!important}.premiumTrackMeta p{font-size:10px!important;margin:3px 0 0!important;color:#c8d9e9!important}
#player .premiumPlayControls{margin-top:4px!important;gap:12px!important}.premiumPlayControls .roundControl{width:50px!important;height:50px!important}.premiumPlayControls .roundControl.main{width:64px!important;height:64px!important;box-shadow:0 0 0 2px #168fe5,0 0 20px rgba(24,156,245,.55),inset 0 0 20px rgba(24,156,245,.10)!important}
.songInfoOverlay{position:fixed!important;inset:0!important;z-index:9999!important;display:grid;place-items:center;padding:18px;background:rgba(0,5,15,.68);backdrop-filter:blur(12px)}.songInfoOverlay.hidden{display:none!important}
.songInfoCard{width:min(520px,94vw);border:1px solid rgba(163,207,239,.24);border-radius:24px;background:linear-gradient(180deg,rgba(9,26,50,.97),rgba(4,14,30,.98));box-shadow:0 30px 80px #000b,inset 0 1px 0 rgba(255,255,255,.08);padding:18px;color:#fff}
.songInfoHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.songInfoHead b{font-size:20px}.songInfoHead span{display:block;margin-top:3px;font-size:10px;color:#9fb8cf}.songInfoHead button{width:34px;height:34px;border-radius:50%;border:1px solid #ffffff24;background:#ffffff0c;color:#fff;font-size:22px;cursor:pointer}
.songInfoBody{display:grid;grid-template-columns:120px 1fr;gap:12px 16px;margin-top:16px}.songInfoBody label{display:block;font-size:10px;color:#b8cce0}.songInfoBody label input{display:block;width:100%;margin-top:5px;padding:11px 12px;border-radius:12px;border:1px solid #ffffff20;background:#06162a;color:#fff;outline:none}.coverEditor{grid-row:1/4;width:120px;height:145px;padding:0;border:1px solid #ffffff20;border-radius:16px;overflow:hidden;background:#07172b;color:#dcecff;cursor:pointer}.coverEditor div{height:112px;background-size:cover;background-position:center}.coverEditor span{display:block;padding:8px 4px;font-size:9px}
.songInfoActions{display:flex;justify-content:flex-end;gap:9px;margin-top:17px}.songInfoActions button{padding:10px 15px;border-radius:12px;border:1px solid #ffffff20;background:#ffffff0b;color:#fff;cursor:pointer}.songInfoActions .save{background:linear-gradient(135deg,#0753a7,#189cf5);border-color:#45b8ff;box-shadow:0 7px 18px rgba(24,156,245,.22)}
@media(max-width:1100px){#player .premiumDiscPlayer{width:min(47vh,440px)}}
@media(max-width:800px){#player{overflow-y:auto!important}#player .premiumDiscPlayer{width:min(92vw,430px);margin-top:4px}.songInfoBody{grid-template-columns:92px 1fr}.coverEditor{width:92px;height:120px}.coverEditor div{height:90px}}
#player .premiumDiscPlayer{
  width:min(53vh,500px)!important;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.48))!important;
}
/* Three deep concentric layers around the artwork. */
#player .premiumDiscPlayer:before,
#player .premiumDiscPlayer:after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
#player .premiumDiscPlayer:before{
  inset:4.5%;z-index:1;
  background:radial-gradient(circle,transparent 72%,#020a18 72.5% 77%,#06162d 77.5% 82%,#0a2142 82.5% 87%,#031126 87.5% 100%);
  box-shadow:inset 0 0 0 1px rgba(151,196,230,.13),inset 0 0 28px rgba(0,0,0,.72),0 0 0 1px rgba(79,132,180,.12),0 20px 42px rgba(0,0,0,.34);
}
#player .premiumDiscPlayer:after{
  inset:8.2%;z-index:1;
  border:10px solid #071b35;
  box-shadow:0 0 0 5px #0a294d,0 0 0 9px #041226,inset 0 0 0 1px rgba(142,195,232,.14),0 0 24px rgba(3,10,24,.75);
}
#player .premiumGlow{inset:3%!important;background:radial-gradient(circle,rgba(24,156,245,.18),rgba(6,26,55,.10) 54%,transparent 72%)!important;filter:blur(20px)!important}
/* Artwork remains clearly separate from the layered ring. */
#player .premiumDisc{
  left:15%!important;top:15%!important;width:70%!important;height:70%!important;
  box-shadow:0 0 0 3px rgba(3,12,27,.98),0 0 0 5px rgba(191,221,242,.34),0 0 0 9px #06162b,inset 0 0 42px rgba(0,0,0,.25),0 18px 38px rgba(0,0,0,.42)!important;
}
/* Arc track now sits on its own outer ring and is visibly different from the ring colors. */
#player .premiumArcs{z-index:9!important}
#player .premiumArcTrack{stroke:#102d4e!important;stroke-width:15!important;opacity:.98!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.42))}
#player .premiumArcGhost{stroke-width:15!important}
#player .premiumArcFill{stroke-width:12!important;filter:drop-shadow(0 0 8px rgba(42,215,255,.42))!important}
#player #volumeFill{stroke:url(#orbitVolGradient)!important}
#player #progressFill{stroke:url(#orbitSeekGradient)!important}
#player .premiumArcHit{stroke-width:42!important}
#player .premiumKnob{r:10.5;fill:#fbfdff!important;stroke:#cce9fb!important;stroke-width:2.4!important;filter:drop-shadow(0 2px 6px rgba(0,0,0,.72)) drop-shadow(0 0 8px rgba(84,205,255,.34))!important}
#player .premiumVolumeLabel{top:1.1%!important;background:rgba(3,14,31,.72)!important}
#player .premiumTimes{left:9%!important;right:9%!important;bottom:8.1%!important}
/* No rectangle/box behind the waveform — only the waveform itself is visible. */
#player canvas.premiumWave,#player #orbitWave{
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;outline:0!important;mix-blend-mode:screen;
}
#player .premiumWave{left:8%!important;right:8%!important;bottom:13%!important;width:84%!important;height:23%!important;filter:drop-shadow(0 0 8px rgba(36,214,255,.52))!important}
#player .premiumSongText{top:40%!important}
#player .premiumSongText b{font-size:clamp(19px,2vw,30px)!important}
/* Keep metadata and transport compact enough to preserve the large disc. */
#player .premiumTrackMeta{margin-top:-7px!important;min-height:38px!important}
#player .premiumTrackMeta h3{font-size:20px!important}
#player .premiumPlayControls{margin-top:2px!important;gap:10px!important}
#player .premiumPlayControls .roundControl{width:46px!important;height:46px!important;font-size:18px!important}
#player .premiumPlayControls .roundControl.main{width:58px!important;height:58px!important;font-size:23px!important}
/* One fixed dock at the very bottom. All 11 tools stay on one line. */
body.toolPageOpen #player.active{grid-template-rows:82px minmax(0,1fr) 78px!important;padding-bottom:8px!important}
#player .audioToolbar{
  position:fixed!important;left:18px!important;right:18px!important;bottom:8px!important;
  width:auto!important;max-width:none!important;margin:0!important;z-index:70!important;
  display:grid!important;grid-template-columns:repeat(11,minmax(0,1fr))!important;
  gap:6px!important;padding:7px!important;border-radius:20px!important;
  background:rgba(5,14,28,.88)!important;backdrop-filter:blur(24px) saturate(125%)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#player .audioToolbar .toolBtn{min-width:0!important;padding:6px 2px!important;border-radius:13px!important;font-size:9px!important;gap:2px!important;white-space:nowrap!important}
#player .audioToolbar .toolBtn span{font-size:16px!important;line-height:1.05!important}
#player .audioToolbar .toolBtn span[id]{font-size:9px!important}
#player .audioToast{bottom:94px!important}
@media(max-width:1100px){
  #player .premiumDiscPlayer{width:min(48vh,450px)!important}
  #player .audioToolbar{left:8px!important;right:8px!important;gap:4px!important;padding:6px!important}
  #player .audioToolbar .toolBtn{font-size:8px!important;padding:6px 1px!important}
  body.toolPageOpen #player.active{grid-template-rows:76px minmax(0,1fr) 72px!important}
}
@media(max-width:800px){
  #player .premiumDiscPlayer{width:min(92vw,430px)!important}
  #player .audioToolbar{display:flex!important;overflow-x:auto!important;left:6px!important;right:6px!important;bottom:6px!important}
  #player .audioToolbar .toolBtn{flex:0 0 78px!important;min-width:78px!important}
  #player{padding-bottom:82px!important}
}
#player .premiumSongText b{
  font-size:clamp(17px,1.8vw,27px)!important;
}
#player .premiumVolumeLabel{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:3px 7px!important;
}
/* Make the lower seek arc easier to grab, especially at its left/start end. */
#player #progressHit{
  stroke-width:64!important;
  pointer-events:stroke!important;
}
#player .audioToolbar .toolBtn{
  font-size:10px!important;
}
#player .audioToolbar .toolBtn span[id]{
  font-size:10px!important;
}
@media(max-width:1100px){
  #player .audioToolbar .toolBtn{font-size:9px!important;}
  #player .audioToolbar .toolBtn span[id]{font-size:9px!important;}
}
#player .discHeadphones{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:visible}
#player .discHeadband{
  position:absolute;left:18%;right:18%;top:-4.2%;height:36%;
  border:13px solid #071426;border-bottom:0;border-radius:52% 52% 0 0 / 100% 100% 0 0;
  background:transparent;
  box-shadow:inset 0 3px 0 rgba(199,226,245,.20),inset 0 7px 8px rgba(255,255,255,.035),0 -2px 0 #102b4a,0 7px 16px rgba(0,0,0,.34);
}
#player .discHeadband:before{
  content:"";position:absolute;left:7%;right:7%;top:5px;height:5px;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(159,201,232,.18),rgba(220,239,252,.34),rgba(159,201,232,.18),transparent);
}
#player .discEar{
  position:absolute;top:36%;width:9.2%;height:28%;border-radius:42% 48% 48% 42% / 25% 36% 36% 25%;
  background:linear-gradient(90deg,#061121 0%,#0b203b 24%,#173a61 49%,#0b213d 72%,#030a15 100%);
  border:1px solid rgba(177,215,241,.25);
  box-shadow:inset 4px 0 7px rgba(177,218,246,.10),inset -5px 0 9px rgba(0,0,0,.62),0 8px 18px rgba(0,0,0,.46),0 0 0 3px rgba(3,12,25,.72);
}
#player .discEar:before{content:"";position:absolute;inset:13% 17%;border-radius:45%;background:radial-gradient(ellipse at 42% 42%,#173c62,#071426 66%,#020712);box-shadow:inset 0 0 0 1px rgba(181,218,242,.10),inset 0 0 12px rgba(0,0,0,.72)}
#player .discEar:after{content:"";position:absolute;top:-13%;width:46%;height:19%;border-radius:7px;background:linear-gradient(180deg,#24486c,#0b1b31 58%,#040c18);border:1px solid rgba(186,220,244,.20);box-shadow:0 3px 7px rgba(0,0,0,.45)}
#player .discEar.left{left:1.6%}
#player .discEar.left:after{right:5%;transform:rotate(-8deg)}
#player .discEar.right{right:1.6%;transform:scaleX(-1)}
#player .discEar.right:after{right:5%;transform:rotate(-8deg)}
/* Arcs remain above the headphone artwork, so neither control is hidden. */
#player .premiumVolumeLabel{z-index:12!important}

/* Custom equalizer dialog. */
.eqOverlay{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:18px;background:rgba(0,5,15,.70);backdrop-filter:blur(12px)}
.eqOverlay.hidden{display:none!important}
.eqCard{width:min(660px,94vw);border:1px solid rgba(155,207,243,.24);border-radius:24px;background:linear-gradient(180deg,rgba(8,26,50,.98),rgba(3,13,29,.99));box-shadow:0 30px 90px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.08);padding:18px;color:#fff}
.eqHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.eqHead b{font-size:20px}.eqHead small{display:block;margin-top:4px;color:#9fb8cf;font-size:10px}.eqHead button{width:34px;height:34px;border-radius:50%;border:1px solid #ffffff24;background:#ffffff0c;color:#fff;font-size:21px;cursor:pointer}
.eqBands{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:18px;padding:14px 10px;border-radius:18px;background:rgba(3,12,27,.56);border:1px solid rgba(255,255,255,.07)}
.eqBand{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}.eqBand output{font-size:10px;color:#7ddcff;font-variant-numeric:tabular-nums}.eqBand input{width:100%;accent-color:#24d6ff}.eqBand span{font-size:10px;color:#d8e8f5;white-space:nowrap}
.eqActions{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}.eqActions button{padding:9px 14px;border-radius:12px;border:1px solid #ffffff20;background:#ffffff0b;color:#fff;cursor:pointer}.eqActions .save{background:linear-gradient(135deg,#0753a7,#189cf5);border-color:#45b8ff}
@media(max-width:800px){#player .discHeadband{left:19%;right:19%;border-width:10px}.eqBands{grid-template-columns:repeat(3,1fr)}}
#player .discEar{
  top:32.5%!important;
  width:13.8%!important;
  height:35%!important;
  border-radius:46% 52% 52% 46% / 24% 40% 40% 24%!important;
  background:
    linear-gradient(90deg,rgba(180,220,247,.12) 0%,rgba(70,123,166,.04) 12%,transparent 27%,transparent 74%,rgba(0,0,0,.46) 100%),
    linear-gradient(145deg,#102d50 0%,#071a32 23%,#020b18 52%,#06162a 77%,#01050c 100%)!important;
  border:2px solid rgba(139,190,225,.38)!important;
  box-shadow:
    inset 6px 0 12px rgba(115,188,235,.14),
    inset -9px 0 16px rgba(0,0,0,.84),
    inset 0 2px 1px rgba(226,243,255,.12),
    0 0 0 4px rgba(1,7,16,.96),
    0 0 0 6px rgba(49,105,151,.20),
    0 15px 28px rgba(0,0,0,.64),
    0 0 25px rgba(16,82,134,.18)!important;
}
#player .discEar.left{left:-.9%!important}
#player .discEar.right{right:-.9%!important}
#player .discEar:before{
  content:""!important;
  position:absolute!important;
  inset:9% 13%!important;
  border-radius:48% 54% 54% 48% / 30% 44% 44% 30%!important;
  background:
    radial-gradient(ellipse at 38% 30%,rgba(99,168,216,.27) 0%,rgba(27,73,111,.14) 25%,transparent 45%),
    radial-gradient(ellipse at 52% 50%,#143958 0%,#0a213b 38%,#04111f 67%,#01050c 100%)!important;
  border:1px solid rgba(170,213,241,.28)!important;
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,.30),
    inset 4px 0 8px rgba(111,185,231,.11),
    inset -5px 0 12px rgba(0,0,0,.78),
    0 0 0 1px rgba(0,0,0,.68)!important;
}
#player .discEar:after{
  top:-10%!important;
  width:45%!important;
  height:18%!important;
  border-radius:9px 9px 5px 5px!important;
  background:linear-gradient(180deg,#385f82 0%,#173855 30%,#091d32 67%,#020a13 100%)!important;
  border:1px solid rgba(177,216,242,.32)!important;
  box-shadow:inset 0 1px 0 rgba(231,246,255,.18),0 5px 10px rgba(0,0,0,.62)!important;
}
@media(max-width:800px){
  #player .discEar{top:33.2%!important;width:13.5%!important;height:33.5%!important}
  #player .discEar.left{left:-.6%!important}
  #player .discEar.right{right:-.6%!important}
}
/* Earcups sit above the control arcs at the side gaps. This prevents the
   arc/headphone layers from visually drawing through one another. */
#player .discHeadband{z-index:7!important}
#player .discEar{z-index:11!important}
#player .premiumVolumeLabel,#player .premiumTimes{z-index:12!important}
/* Make sure the waveform can never paint a rectangular layer over artwork. */
#player .premiumDisc{isolation:isolate!important}
#player canvas.premiumWave,#player #orbitWave{background:transparent!important;mix-blend-mode:screen!important;opacity:.92!important}
/* 10 tools only; More removed. */
#player .audioToolbar{grid-template-columns:repeat(10,minmax(0,1fr))!important}
/* Edit Info: keep only the compact inner card visually; no large outer page. */
#player .songInfoOverlay{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important}
#player .songInfoCard{pointer-events:auto!important}
/* Every other bottom tool uses the same compact premium card language. */
.audioToolOverlay{position:fixed;inset:0;z-index:10030;display:grid;place-items:center;padding:18px;background:transparent;pointer-events:none}
.audioToolOverlay.hidden{display:none!important}
.audioToolCard{pointer-events:auto;width:min(560px,94vw);max-height:min(74vh,680px);overflow:auto;border:1px solid rgba(155,207,243,.25);border-radius:24px;background:linear-gradient(180deg,rgba(8,26,50,.985),rgba(3,13,29,.99));box-shadow:0 28px 80px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.08);padding:18px;color:#fff}
.audioToolHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.audioToolHead b{font-size:20px}.audioToolHead span{display:block;margin-top:4px;color:#9fb8cf;font-size:10px}.audioToolHead button{width:34px;height:34px;border-radius:50%;border:1px solid #ffffff24;background:#ffffff0c;color:#fff;font-size:21px;cursor:pointer}
.audioToolBody{font-size:12px;color:#d9e7f4}.audioToolBody p{color:#aebfd0;line-height:1.55;margin:0 0 12px}.audioToolGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.audioToolGrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.audioToolChoice,.audioToolAction{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.065);color:#fff;border-radius:13px;padding:10px 9px;cursor:pointer;font-size:11px}.audioToolChoice:hover,.audioToolAction:hover{background:rgba(24,156,245,.18);border-color:rgba(78,187,255,.48)}.audioToolAction.primary{background:linear-gradient(135deg,#0753a7,#189cf5);border-color:#45b8ff}.audioToolSection{margin-top:12px;padding:12px;border-radius:16px;background:rgba(3,12,27,.56);border:1px solid rgba(255,255,255,.07)}.audioToolSection h4{margin:0 0 9px;font-size:12px}.audioInfoRows{display:grid;gap:7px}.audioInfoRow{display:flex;gap:12px;justify-content:space-between;padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.045)}.audioInfoRow span:first-child{color:#94a9bd}.audioInfoRow span:last-child{text-align:right;max-width:68%;overflow-wrap:anywhere}.audioLyrics{width:100%;min-height:150px;resize:vertical;border:1px solid rgba(255,255,255,.15);border-radius:13px;background:#06162a;color:#fff;padding:11px;outline:none}.audioToolEqBands{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:10px}.audioToolEqBand{display:flex;flex-direction:column;align-items:center;gap:7px}.audioToolEqBand input{width:100%;accent-color:#24d6ff}.audioToolEqBand output{font-size:9px;color:#6fdcff}.audioToolEqBand span{font-size:9px;color:#d8e8f5;white-space:nowrap}.audioToolCurrent{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(24,156,245,.14);border:1px solid rgba(70,184,255,.28);color:#9ee2ff;font-size:10px;margin-bottom:10px}
@media(max-width:800px){#player .audioToolbar{display:flex!important}.audioToolEqBands{grid-template-columns:repeat(3,1fr)}.audioToolGrid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Bottom-tool cards now live in the center of the player, safely above
   the fixed bottom dock.  The glass remains translucent so the artwork
   and player can be seen softly behind it. */
#player .audioToolOverlay,
#player .songInfoOverlay,
#player .eqOverlay{
  position:fixed!important;
  inset:0!important;
  z-index:10040!important;
  display:grid!important;
  place-items:center!important;
  padding:clamp(18px,4vh,46px) 18px 110px!important;
  background:rgba(1,8,20,.20)!important;
  backdrop-filter:blur(3px) saturate(105%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(105%)!important;
  pointer-events:auto!important;
}
#player .audioToolOverlay.hidden,
#player .songInfoOverlay.hidden,
#player .eqOverlay.hidden{display:none!important}
#player .audioToolCard,
#player .songInfoCard,
#player .eqCard{
  width:min(560px,92vw)!important;
  max-height:min(68vh,620px)!important;
  overflow:auto!important;
  background:linear-gradient(155deg,rgba(9,28,54,.86),rgba(3,13,29,.80))!important;
  border:1px solid rgba(154,211,247,.31)!important;
  box-shadow:0 30px 85px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.10),0 0 34px rgba(19,108,180,.10)!important;
  backdrop-filter:blur(20px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(120%)!important;
  animation:fhToolSlideIn .28s cubic-bezier(.2,.82,.25,1) both!important;
  transform-origin:50% 60%!important;
}
@keyframes fhToolSlideIn{
  from{opacity:0;transform:translateY(30px) scale(.975)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:800px){
  #player .audioToolOverlay,#player .songInfoOverlay,#player .eqOverlay{padding:18px 10px 96px!important}
  #player .audioToolCard,#player .songInfoCard,#player .eqCard{max-height:66vh!important}
}

/* Headphone crown: a separate premium cover over the top of the disc.
   It no longer reads as another ring belonging to the main circle. */
#player .discHeadband{
  left:15.5%!important;
  right:15.5%!important;
  top:-7.8%!important;
  height:31.5%!important;
  border:0!important;
  border-radius:52% 52% 22% 22% / 100% 100% 26% 26%!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:8!important;
  filter:drop-shadow(0 10px 11px rgba(0,0,0,.42))!important;
}
#player .discHeadband:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  height:auto!important;
  border-radius:52% 52% 18% 18% / 100% 100% 24% 24%!important;
  background:
    linear-gradient(180deg,rgba(112,165,205,.14) 0%,rgba(24,57,91,.05) 18%,transparent 33%),
    radial-gradient(ellipse at 50% 112%,transparent 0 59%,#020914 60% 67%,#07182d 68% 76%,#0c2948 77% 83%,#041225 84% 100%)!important;
  box-shadow:inset 0 -2px 0 rgba(118,171,211,.16),0 0 0 1px rgba(111,164,204,.12)!important;
}
#player .discHeadband:after{
  content:""!important;
  position:absolute!important;
  left:10%!important;right:10%!important;bottom:-1px!important;height:7px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,rgba(1,7,16,.92) 18%,#020a16 50%,rgba(1,7,16,.92) 82%,transparent)!important;
  box-shadow:0 5px 9px rgba(0,0,0,.35)!important;
}
/* Remove the old decorative streak above the Volume text. */
#player .premiumVolumeLabel:before,#player .premiumVolumeLabel:after{display:none!important;content:none!important}
#player .premiumVolumeLabel{top:1.2%!important;z-index:13!important}
/* Earcup connectors belong to the detached crown and stay above the arcs. */
#player .discEar{z-index:12!important}
#player .discHeadband{
  left:4.0%!important;
  right:4.0%!important;
  top:-12.5%!important;
  height:49.5%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  z-index:7!important;
  overflow:visible!important;
}
/* The actual padded headband.  Only the upper arch is drawn, leaving the
   album circle visually independent below it. */
#player .discHeadband:before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:100%!important;
  box-sizing:border-box!important;
  border:18px solid #061426!important;
  border-bottom:0!important;
  border-radius:50% 50% 0 0 / 92% 92% 0 0!important;
  background:transparent!important;
  box-shadow:
    inset 0 4px 0 rgba(169,210,239,.17),
    inset 0 9px 8px rgba(255,255,255,.025),
    0 -2px 0 rgba(43,95,139,.42),
    0 7px 15px rgba(0,0,0,.48)!important;
}
/* Premium blue outer cap on the crown; this is deliberately outside the
   player ring and does not form another circular layer. */
#player .discHeadband:after{
  content:""!important;
  position:absolute!important;
  left:2.2%!important;
  right:2.2%!important;
  top:1.8%!important;
  height:92%!important;
  box-sizing:border-box!important;
  border:6px solid rgba(16,61,108,.82)!important;
  border-bottom:0!important;
  border-radius:50% 50% 0 0 / 92% 92% 0 0!important;
  background:transparent!important;
  box-shadow:inset 0 2px 0 rgba(110,183,231,.12)!important;
}
/* Ear cups remain outside the disc. Their top yokes are lengthened upward
   so each end of the detached crown visibly connects to an ear cup. */
#player .discEar{z-index:12!important;overflow:visible!important}
#player .discEar:after{
  top:-27%!important;
  width:54%!important;
  height:31%!important;
  border-radius:11px 11px 6px 6px!important;
  background:linear-gradient(180deg,#426d91 0%,#214866 27%,#0b2742 62%,#03111f 100%)!important;
  border:1px solid rgba(191,225,247,.40)!important;
  box-shadow:inset 0 2px 0 rgba(235,248,255,.20),0 5px 10px rgba(0,0,0,.62)!important;
}
#player .discEar.left:after{right:3%!important;transform:rotate(-12deg)!important;transform-origin:50% 100%!important}
#player .discEar.right:after{right:3%!important;transform:rotate(-12deg)!important;transform-origin:50% 100%!important}
/* Small joint collars make the band-to-yoke connection intentional. */
#player .discEar.left{box-shadow:inset 6px 0 12px rgba(115,188,235,.14),inset -9px 0 16px rgba(0,0,0,.84),inset 0 2px 1px rgba(226,243,255,.12),0 0 0 4px rgba(1,7,16,.96),0 0 0 6px rgba(49,105,151,.20),0 15px 28px rgba(0,0,0,.64),0 0 25px rgba(16,82,134,.18)!important}
#player .premiumVolumeLabel{z-index:13!important}
@media(max-width:800px){
  #player .discHeadband{left:5%!important;right:5%!important;top:-11.5%!important;height:48%!important}
  #player .discHeadband:before{border-width:15px!important}
  #player .discHeadband:after{border-width:5px!important}
  #player .discEar:after{top:-25%!important;height:29%!important}
}
#player .discHeadband{
  position:absolute!important;
  left:5.8%!important;
  right:5.8%!important;
  top:-1.8%!important;
  height:35.5%!important;
  z-index:8!important;
  overflow:visible!important;
  pointer-events:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.42))!important;
}
/* One substantial curved headphone band. Its ends finish at the same
   vertical zone where the existing left/right earcups begin. */
#player .discHeadband:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  box-sizing:border-box!important;
  border:24px solid #07111f!important;
  border-bottom:0!important;
  border-radius:50% 50% 0 0 / 96% 96% 0 0!important;
  background:transparent!important;
  box-shadow:
    inset 0 5px 0 rgba(210,230,244,.18),
    inset 0 12px 10px rgba(255,255,255,.035),
    inset 0 -5px 8px rgba(0,0,0,.38),
    0 -2px 0 rgba(90,126,155,.42),
    0 5px 10px rgba(0,0,0,.42)!important;
}
/* Restrained metallic highlight only on the headphone hardware. */
#player .discHeadband:after{
  content:""!important;
  position:absolute!important;
  left:1.4%!important;
  right:1.4%!important;
  top:1.2%!important;
  height:96%!important;
  box-sizing:border-box!important;
  border:5px solid #23415f!important;
  border-bottom:0!important;
  border-radius:50% 50% 0 0 / 96% 96% 0 0!important;
  background:transparent!important;
  box-shadow:inset 0 1px 0 rgba(185,218,241,.13)!important;
}
#player .discEar:after{
  display:none!important;
  content:none!important;
}
#player .discEar{
  z-index:12!important;
  overflow:visible!important;
  border-color:rgba(151,181,204,.42)!important;
  background:
    linear-gradient(90deg,rgba(185,215,235,.10) 0%,transparent 23%,transparent 76%,rgba(0,0,0,.50) 100%),
    linear-gradient(145deg,#17283a 0%,#0b1726 27%,#030913 55%,#0b1725 79%,#02060c 100%)!important;
  box-shadow:
    inset 5px 0 10px rgba(159,195,220,.10),
    inset -9px 0 15px rgba(0,0,0,.84),
    inset 0 2px 1px rgba(231,242,250,.10),
    0 0 0 4px rgba(1,6,13,.96),
    0 0 0 6px rgba(82,112,137,.22),
    0 14px 26px rgba(0,0,0,.62)!important;
}
#player .discEar:before{
  background:
    radial-gradient(ellipse at 38% 30%,rgba(126,163,190,.20) 0%,rgba(37,62,83,.12) 27%,transparent 46%),
    radial-gradient(ellipse at 52% 50%,#183149 0%,#0b1d30 39%,#04101d 68%,#01050b 100%)!important;
}
/* Functional arcs stay visually independent from the headphone. */
#player .premiumVolumeLabel,#player .premiumTimes{z-index:13!important}

@media(max-width:800px){
  #player .discHeadband{
    left:6.4%!important;
    right:6.4%!important;
    top:-1.0%!important;
    height:34.5%!important;
  }
  #player .discHeadband:before{border-width:19px!important}
  #player .discHeadband:after{border-width:4px!important}
}
#player .discEar{
  top:31.7%!important;
  width:15.9%!important;
  height:37.2%!important;
  overflow:visible!important;
  border-radius:49% 45% 45% 49% / 25% 43% 43% 25%!important;
  border:2px solid rgba(230,238,244,.82)!important;
  background:
    linear-gradient(90deg,
      #eef3f6 0%,
      #7f8992 7%,
      #e8edf0 13%,
      #5c6670 19%,
      #161a1e 27%,
      #07090c 50%,
      #151a1f 73%,
      #69737c 84%,
      #e4e9ec 94%,
      #89939b 100%)!important;
  box-shadow:
    inset 5px 0 7px rgba(255,255,255,.48),
    inset 11px 0 11px rgba(35,44,52,.38),
    inset -7px 0 10px rgba(0,0,0,.76),
    inset 0 2px 2px rgba(255,255,255,.34),
    0 0 0 3px rgba(4,8,13,.98),
    0 0 0 5px rgba(189,201,210,.78),
    0 0 0 7px rgba(9,15,22,.96),
    0 16px 29px rgba(0,0,0,.64),
    0 0 22px rgba(20,191,224,.13)!important;
}
#player .discEar.left{left:-2.25%!important}
#player .discEar.right{right:-2.25%!important;transform:scaleX(-1)!important}

/* Deep leather cushion inside the silver cup. */
#player .discEar:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:9.5% 22%!important;
  border-radius:48% 45% 45% 48% / 31% 46% 46% 31%!important;
  border:1px solid rgba(116,126,136,.72)!important;
  background:
    radial-gradient(ellipse at 39% 32%,rgba(103,111,119,.24) 0%,rgba(42,47,52,.13) 27%,transparent 47%),
    radial-gradient(ellipse at 51% 52%,#24282c 0%,#111417 38%,#06080a 68%,#020304 100%)!important;
  box-shadow:
    inset 0 0 0 4px #080a0c,
    inset 5px 0 8px rgba(92,100,108,.18),
    inset -7px 0 13px rgba(0,0,0,.86),
    inset 0 9px 13px rgba(255,255,255,.025),
    0 0 0 2px rgba(193,203,211,.23)!important;
}

/* Thin cyan accent on the OUTER shell, like the reference headphone.
   This is a light strip only — not another earcup or connector. */
#player .discEar:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:20%!important;
  bottom:20%!important;
  width:4px!important;
  height:auto!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(69,238,255,.08),#22d8f5 24%,#13b9dc 74%,rgba(39,211,239,.08))!important;
  box-shadow:0 0 8px rgba(30,213,241,.62),0 0 15px rgba(17,155,205,.28)!important;
  transform:none!important;
}
#player .discEar.left:after{left:-8px!important;right:auto!important}
#player .discEar.right:after{left:-8px!important;right:auto!important}
#player .discEar.left{
  filter:drop-shadow(-5px 3px 3px rgba(0,0,0,.30))!important;
}
#player .discEar.right{
  filter:drop-shadow(-5px 3px 3px rgba(0,0,0,.30))!important;
}

@media(max-width:800px){
  #player .discEar{top:32.2%!important;width:15.4%!important;height:35.8%!important}
  #player .discEar.left{left:-1.5%!important}
  #player .discEar.right{right:-1.5%!important}
  #player .discEar:after{width:3px!important}
}

/* Headband geometry: wider than the player circle so its ends meet the
   EXISTING ear cushions outside the circular boundary. */
#player .discHeadband{
  left:-2.8%!important;
  right:-2.8%!important;
  top:-1.0%!important;
  height:39.5%!important;
  z-index:8!important;
  overflow:visible!important;
  pointer-events:none!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 9px 11px rgba(0,0,0,.46))!important;
}

/* Main arch. Ends stay comparatively slim; the arch is independent of
   the blue/cyan player ring and reaches the ear cushions directly. */
#player .discHeadband:before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:100%!important;
  box-sizing:border-box!important;
  border:20px solid #07111f!important;
  border-bottom:0!important;
  border-radius:50% 50% 0 0 / 98% 98% 0 0!important;
  background:transparent!important;
  box-shadow:
    inset 0 4px 0 rgba(210,230,244,.16),
    inset 0 10px 9px rgba(255,255,255,.025),
    inset 0 -5px 8px rgba(0,0,0,.42),
    0 -2px 0 rgba(76,111,141,.38),
    0 5px 10px rgba(0,0,0,.43)!important;
}
#player .discHeadband:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:1.7%!important;
  right:1.7%!important;
  top:1.4%!important;
  height:96.5%!important;
  box-sizing:border-box!important;
  border:7px solid #173552!important;
  border-bottom:0!important;
  border-radius:50% 50% 0 0 / 98% 98% 0 0!important;
  clip-path:none!important;
  background:transparent!important;
  box-shadow:
    inset 0 2px 0 rgba(213,235,250,.16),
    inset 0 6px 7px rgba(255,255,255,.025),
    0 -1px 0 rgba(76,126,165,.22)!important;
  opacity:1!important;
}
#player .discEar.left{left:-2.8%!important}
#player .discEar.right{right:-2.8%!important}

/* Remove the upper black tint/line over the album artwork completely. */
#player .premiumDisc:before{
  background:transparent!important;
  box-shadow:none!important;
}
#player .discShade{
  background:transparent!important;
  box-shadow:inset 0 0 0 1px rgba(230,244,255,.34)!important;
}

@media(max-width:800px){
  #player .discHeadband{left:-1.7%!important;right:-1.7%!important;top:-.3%!important;height:38%!important}
  #player .discHeadband:before{border-width:17px!important}
  #player .discHeadband:after{left:1.8%!important;right:1.8%!important;top:1.4%!important;height:96%!important;border-width:6px!important}
  #player .discEar.left{left:-2.0%!important}
  #player .discEar.right{right:-2.0%!important}
}
/* The line over the artwork was a cast/shadow effect from the detached
   headphone hardware. Keep only internal material shading — no shadow
   is allowed to fall across the album image. */
#player .discHeadband{
  filter:none!important;
}
#player .discHeadband:before{
  box-shadow:
    inset 0 4px 0 rgba(210,230,244,.16),
    inset 0 10px 9px rgba(255,255,255,.025),
    inset 0 -5px 8px rgba(0,0,0,.42),
    0 -2px 0 rgba(76,111,141,.38)!important;
}
#player .premiumDisc:before,
#player .premiumDisc:after{
  background:transparent!important;
  box-shadow:none!important;
}
#player .discEar:after,
#player .discEar.left:after,
#player .discEar.right:after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}
/* Also remove the cyan cast/glow that was baked into the earcup shell. */
#player .discEar.left,
#player .discEar.right{
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.30))!important;
}
.smartPresetGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:10px 0 14px}.smartPreset{padding:6px!important;border-radius:12px!important;overflow:hidden;text-align:left}.smartPreset canvas{width:100%;height:48px;display:block;border-radius:8px;background:linear-gradient(135deg,#172b44,#091321);margin-bottom:6px}.smartPreset span{display:block;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.smartPreset.on{outline:2px solid rgba(60,170,255,.8);background:rgba(25,73,121,.48)!important}.compareRow{display:grid;grid-template-columns:1fr;gap:7px;margin-top:12px;padding:10px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.035)}.compareRow label{font-size:12px;font-weight:800}.compareRow input[type=checkbox]{width:auto;margin-right:7px}.videoLookGrid button.on,.autoReelGrid button.on{outline:2px solid rgba(58,172,255,.78);background:rgba(27,76,124,.55)!important}.autoReelGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.autoReelGrid button{min-height:44px}.autoReelActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}#videoPane{overflow:hidden!important}#vid{transform-origin:center center;transition:filter .25s ease}.motion-slowzoom{animation:fhSlowZoom 7s ease-in-out infinite alternate}.motion-pan{animation:fhPan 7s ease-in-out infinite alternate}.motion-pulse{animation:fhPulse 2.4s ease-in-out infinite}.motion-float{animation:fhFloat 4s ease-in-out infinite}.motion-shake{animation:fhShake .55s linear infinite}@keyframes fhSlowZoom{to{transform:scale(1.10)}}@keyframes fhPan{from{transform:scale(1.08) translateX(-3%)}to{transform:scale(1.08) translateX(3%)}}@keyframes fhPulse{50%{transform:scale(1.045)}}@keyframes fhFloat{50%{transform:translateY(-8px) scale(1.02)}}@keyframes fhShake{0%,100%{transform:translate(0)}25%{transform:translate(-2px,1px)}75%{transform:translate(2px,-1px)}}
@media(max-width:700px){.smartPresetGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.autoReelGrid{grid-template-columns:1fr}}
#visual #photoPane{position:relative!important;overflow:hidden!important}
#visual #photoCanvas{
  position:relative!important;
  z-index:3!important;
  visibility:visible!important;
  transition:opacity .16s ease!important;
}
#visual #photoCanvas.hasMedia{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  max-width:96%!important;
  max-height:94%!important;
  width:auto!important;
  height:auto!important;
  margin:auto!important;
  background:transparent!important;
}
#visual #photoCanvas:not(.hasMedia){opacity:0!important;visibility:hidden!important}
/* Keep LEFT navigation headings consistent with every other heading.
   Only the RIGHT-side option labels below are enlarged. */
.studioNavBtn[onclick*="photo-crop"],
.studioNavBtn[onclick*="photo-advanced"],
.studioNavBtn[onclick*="video-looks"],
.studioNavBtn[onclick*="reel-templates"]{font-size:12px!important;font-weight:400!important;}

.studioPanel[data-studio-panel="photo-advanced"] .choiceGrid button,
.studioPanel[data-studio-panel="photo-crop"] .choiceGrid button,
.studioPanel[data-studio-panel="video-looks"] .choiceGrid button{font-size:13px!important;font-weight:700!important;}
.studioPanel[data-studio-panel="photo-advanced"] .ctrl label,
.studioPanel[data-studio-panel="photo-crop"] .ctrl label,
.studioPanel[data-studio-panel="video-looks"] .ctrl label{font-size:13px!important;}

.studioPanel[data-studio-panel="reel-templates"] .templateGridV17 .template{font-size:13px!important;font-weight:700!important;}
.studioPanel[data-studio-panel="reel-templates"] .trendBadge{font-size:10px!important;}
.reelSteps{display:grid;gap:11px}.reelStep{padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(255,255,255,.04)}
.reelStepTitle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:850;margin-bottom:8px}.reelStepNo{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#0d70d5,#3135a5);font-size:11px}
.reelPickBtn,.createReelBtn{width:100%;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:11px 10px;color:#fff;background:linear-gradient(145deg,#163a62,#182a48);font-weight:800;font-size:13px}.createReelBtn{margin-top:12px;padding:13px;background:linear-gradient(135deg,#0875df,#4537c9);box-shadow:0 8px 22px rgba(25,95,220,.28);font-size:14px}
.reelMediaCount{margin-top:7px;font-size:11px;color:#b9c9dc}.autoReelGrid button{font-size:12px!important;font-weight:750!important}.autoReelActions button{font-size:12px!important}
.beatSyncBox{margin-top:10px;padding:11px;border:1px solid rgba(88,188,255,.22);border-radius:13px;background:rgba(5,28,48,.48)}.beatSyncBox.disabled{opacity:.55}.beatWave{width:100%;height:72px;border-radius:10px;background:#06101d;border:1px solid rgba(255,255,255,.10);display:block;margin:8px 0}.beatTrimGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.beatTrimGrid input{margin:0!important}.beatQuick{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.beatQuick button{border:1px solid rgba(255,255,255,.16);background:#ffffff0d;color:#fff;border-radius:9px;padding:6px 9px;font-size:11px}.beatSyncRow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}.beatSyncRow select{width:auto!important;margin:0!important;padding:6px 8px!important}.beatHint{font-size:10px;color:#9eb2c8;line-height:1.45;margin-top:6px}
.beatWave{cursor:ew-resize;touch-action:none;user-select:none}
.beatSelectionInfo{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:7px 0 3px;padding:7px 9px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(255,255,255,.035);font-size:10px;color:#b9cbe0}
.beatSelectionInfo strong{color:#fff;font-size:11px}.beatSelectionInfo .accent{color:#63cfff}
.mediaCreateBox{margin-top:12px;padding:12px;border:1px solid rgba(76,174,255,.2);border-radius:14px;background:linear-gradient(145deg,rgba(7,38,67,.55),rgba(17,23,47,.52))}
.mediaCreateBox .createReelBtn{margin-top:8px}.mediaCreateHint{font-size:10px;line-height:1.45;color:#9fb4ca}
.templateGridV17 .template.on{outline:2px solid rgba(73,190,255,.72);background:linear-gradient(145deg,#164c78,#253a78)!important;box-shadow:0 0 18px rgba(47,151,255,.22)}
.templateApplyStatus{margin-top:9px;font-size:10px;color:#9fc9ed;line-height:1.45}
.siteCopyright{width:100%;text-align:center;color:rgba(225,235,247,.62);font-size:10px;letter-spacing:.03em;padding:10px 12px 8px;box-sizing:border-box;text-shadow:0 1px 8px rgba(0,0,0,.35)}
#home .siteCopyright{color:rgba(20,39,62,.62);margin-top:auto;padding-top:28px;padding-bottom:4px;flex-shrink:0}
/* Obsolete standalone About-page CSS removed; About Fivehood now uses the glass modal. */
/* Give each reel identity a little more room to feel different. */
.reelIdentityNote{font-size:10px;color:#91b8d8;margin-top:8px;line-height:1.45}
.aboutTopButton{position:absolute;right:0;top:clamp(4px,1.2vh,12px);display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.58);border-radius:999px;padding:9px 14px;background:rgba(18,38,60,.30);color:#10243e;font-size:11px;font-weight:800;letter-spacing:.02em;cursor:pointer;backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);box-shadow:0 8px 22px rgba(11,28,48,.14),inset 0 1px 0 rgba(255,255,255,.48);transition:.2s ease}
.aboutTopButton:hover{transform:translateY(-2px);background:rgba(255,255,255,.30);box-shadow:0 12px 28px rgba(11,28,48,.19)}
.aboutInfoIcon{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(16,36,62,.40);font-family:Georgia,serif;font-size:13px;font-weight:800}
.aboutModal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,9,18,.28);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s ease}
.aboutModal.open{opacity:1;visibility:visible;pointer-events:auto}
.aboutModalPanel{position:relative;width:min(860px,94vw);max-height:min(84vh,760px);overflow:auto;padding:clamp(24px,4vw,42px);border:1px solid rgba(255,255,255,.30);border-radius:28px;color:#eef7ff;background:linear-gradient(145deg,rgba(5,17,31,.83),rgba(9,33,57,.73));backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);box-shadow:0 30px 90px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.16);transform:translateY(24px) scale(.975);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.aboutModal.open .aboutModalPanel{transform:translateY(0) scale(1)}
.aboutModalClose{position:absolute;right:16px;top:14px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.07);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.aboutModalBrand{display:flex;align-items:center;gap:16px;padding-right:42px;margin-bottom:18px}.aboutModalBrand img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.30))}.aboutModalBrand h2{margin:2px 0 3px;font-size:clamp(27px,4vw,42px);line-height:1}.aboutModalBrand p{margin:0;color:#aac5de;font-size:11px;letter-spacing:.10em;text-transform:uppercase}.aboutModalEyebrow{font-size:9px;letter-spacing:.22em;color:#6fc2ff;font-weight:800}
.aboutModalLead{font-size:clamp(14px,1.8vw,17px);line-height:1.72;color:#e5f0fa;margin:0 0 18px}.aboutModalGrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.aboutModalItem{padding:14px 15px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.045)}.aboutModalItem b{display:block;font-size:12px;margin-bottom:6px;color:#fff}.aboutModalItem span{display:block;font-size:11px;line-height:1.55;color:#b9cadd}.aboutModalItem span strong{color:#75c7ff}.aboutCreator{margin-top:18px;padding:16px 2px 4px;border-top:1px solid rgba(255,255,255,.13);display:grid;gap:2px}.aboutCreator span{font-size:10px;color:#9fb5ca;text-transform:uppercase;letter-spacing:.12em}.aboutCreator strong{font-size:18px;color:#fff}.aboutCreator small{font-size:11px;color:#a9c0d5}.aboutModalCopyright{text-align:center;margin-top:18px;padding-top:13px;border-top:1px solid rgba(255,255,255,.09);font-size:9px;color:#8fa5ba;letter-spacing:.04em}
body.aboutModalOpen{overflow:hidden}
@media(max-width:700px){.aboutTopButton{right:2px;top:2px;padding:8px 10px;font-size:10px}.aboutInfoIcon{width:18px;height:18px}.aboutModal{padding:12px}.aboutModalPanel{width:96vw;max-height:88vh;padding:22px 18px;border-radius:22px}.aboutModalGrid{grid-template-columns:1fr}.aboutModalBrand img{width:58px;height:58px}.aboutModalBrand p{font-size:9px;letter-spacing:.07em}}
/* Move the headphone, circle, track info and all five transport buttons
   together. The FH logo and fixed bottom tool dock stay where they are. */
#player .premiumAudioCenter{
  transform:translateY(24px)!important;
}

/* Raise only the crown of the headband: top moves upward while the total
   height grows by the same amount, so the lower ends still meet the
   existing ear cushions at essentially the same point. */
#player .discHeadband{
  top:-7.0%!important;
  height:45.5%!important;
}
#player .discHeadband:before,
#player .discHeadband:after{
  border-radius:50% 50% 0 0 / 100% 100% 0 0!important;
}

/* Homepage Fivehood sprout: both leaves now share the same stem/junction
   instead of looking like two detached pieces. */
.brandLeaf{
  left:55.8%!important;
  top:-14px!important;
  width:25px!important;
  height:29px!important;
}
.brandLeaf:before,.brandLeaf:after{
  width:11px!important;
  height:18px!important;
  border-radius:100% 0 100% 0!important;
  transform-origin:50% 100%!important;
}
.brandLeaf:before{
  left:4px!important;
  top:4px!important;
  transform:rotate(-38deg)!important;
}
.brandLeaf:after{
  left:10px!important;
  top:3px!important;
  transform:rotate(36deg)!important;
}
.brandStem{
  left:12px!important;
  top:16px!important;
  width:2px!important;
  height:13px!important;
  transform:rotate(-2deg)!important;
  border-radius:999px!important;
}

@media(max-width:800px){
  #player .premiumAudioCenter{transform:translateY(14px)!important}
  #player .discHeadband{top:-5.2%!important;height:43.2%!important}
}
.homeLogo .brandO{position:relative!important;display:inline-block!important}
.homeLogo .brandLeaf{
  position:absolute!important;
  left:50%!important;
  top:-20px!important;
  width:30px!important;
  height:34px!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important;
  overflow:visible!important;
}
.homeLogo .brandLeaf:before,
.homeLogo .brandLeaf:after,
.homeLogo .brandStem{content:none!important;display:none!important}
.homeLogo .brandSproutSvg{display:block!important;width:30px!important;height:34px!important;overflow:visible!important}
.homeLogo .brandSproutSvg .sproutLeaf{fill:#2d694f!important;stroke:#244f3e!important;stroke-width:.45!important;stroke-linejoin:round!important}
.homeLogo .brandSproutSvg .sproutStem{fill:none!important;stroke:#315c4b!important;stroke-width:2.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.familyLoginButton{position:absolute;right:142px;top:clamp(4px,1.2vh,12px);display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.58);border-radius:999px;padding:9px 14px;background:linear-gradient(135deg,rgba(3,42,70,.42),rgba(25,73,111,.26));color:#10243e;font-size:11px;font-weight:800;letter-spacing:.02em;cursor:pointer;backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);box-shadow:0 8px 22px rgba(11,28,48,.14),inset 0 1px 0 rgba(255,255,255,.48);transition:.2s ease}
.familyLoginButton:hover{transform:translateY(-2px);background:rgba(255,255,255,.31);box-shadow:0 12px 28px rgba(11,28,48,.19)}
.familyLockIcon{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(16,36,62,.34);font-size:11px}
.familyModal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,9,18,.30);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:.24s ease}
.familyModal.open{opacity:1;visibility:visible;pointer-events:auto}
.familyPanel{position:relative;width:min(480px,94vw);padding:30px;border:1px solid rgba(255,255,255,.28);border-radius:28px;color:#eef7ff;background:linear-gradient(145deg,rgba(4,18,33,.91),rgba(8,38,64,.84));backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.15);transform:translateY(22px) scale(.98);transition:.28s cubic-bezier(.2,.8,.2,1)}
.familyModal.open .familyPanel{transform:translateY(0) scale(1)}
.familyClose{position:absolute;right:14px;top:13px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font-size:23px;cursor:pointer}
.familyBrand{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-right:42px}.familyBrand img{width:62px;height:62px;object-fit:contain}.familyBrand h2{margin:0 0 3px;font-size:26px}.familyBrand p{margin:0;color:#9db9d2;font-size:11px;line-height:1.4}
.familyFields{display:grid;gap:11px}.familyFields label{font-size:10px;color:#b7c9d9;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.familyFields input{width:100%;box-sizing:border-box;margin-top:5px;padding:12px 13px;border-radius:13px;border:1px solid rgba(255,255,255,.16);outline:none;background:rgba(255,255,255,.07);color:#fff;font:inherit}.familyFields input:focus{border-color:#3ecbff;box-shadow:0 0 0 3px rgba(62,203,255,.12)}
.familyLoginAction{margin-top:14px;width:100%;padding:12px 15px;border:0;border-radius:14px;background:linear-gradient(135deg,#0a75d7,#23c8f5);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 10px 26px rgba(12,133,215,.28)}
.familyGuestAction{margin-top:9px;width:100%;padding:11px 15px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.055);color:#dbe9f5;font-weight:800;cursor:pointer}
.familyLoginMsg{min-height:18px;margin-top:10px;color:#ffb8b8;font-size:11px;text-align:center}.familySecurityNote{margin:12px 0 0;color:#7f9bb2;font-size:9px;line-height:1.45;text-align:center}
@media(max-width:700px){.familyLoginButton{right:118px;top:2px;padding:8px 10px;font-size:10px}.familyLockIcon{width:18px;height:18px}.familyPanel{padding:24px 18px;border-radius:22px}.familyBrand img{width:52px;height:52px}.familyBrand h2{font-size:22px}}
@media(max-width:700px){
  body.keyboardFocus .studioTopbar{position:relative!important}
  .keyboardTarget{scroll-margin-top:90px;scroll-margin-bottom:42vh}
  #visual .studioBottom{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
.fhPickerHidden{display:none!important}
.fhProjectsModal{position:fixed;inset:0;z-index:9999;background:#030712dd;display:flex;align-items:center;justify-content:center;padding:18px}
.fhProjectsCard{width:min(620px,96vw);max-height:80vh;overflow:auto;background:#101827;border:1px solid #42516a;border-radius:22px;padding:18px;color:#fff;box-shadow:0 25px 80px #0009}
.fhProjectRow{display:flex;gap:8px;align-items:center;border-top:1px solid #ffffff18;padding:11px 0}.fhProjectRow b{flex:1}.fhProjectRow button{border:1px solid #536985;background:#1e293b;color:#fff;border-radius:10px;padding:8px 10px}
.familyBrand h2{font-size:28px!important}
.familyBrand p{font-size:12px!important}
.familyFields label{font-size:11px!important}
.familyFields input{font-size:16px!important}
.familyLoginAction,.familyGuestAction{font-size:15px!important}
.familyLoginMsg{font-size:12px!important}
@media(max-width:700px){
  .familyBrand h2{font-size:24px!important}
  .familyBrand p{font-size:12px!important}
  .familyFields label{font-size:11px!important}
  .familyFields input{font-size:16px!important}
  .familyLoginAction,.familyGuestAction{font-size:15px!important}
}
#home .familyLoginButton{
  right:58px!important;
  top:4px!important;
  z-index:64!important;
}
#home .aboutTopButton{display:none!important}

.fivehoodMenuWrap{
  position:absolute;
  right:0;
  top:4px;
  z-index:65;
}
.fivehoodMenuButton{
  width:46px;height:40px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.58);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(3,42,70,.42),rgba(25,73,111,.26));
  color:#10243e;
  cursor:pointer;
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 8px 22px rgba(11,28,48,.14),inset 0 1px 0 rgba(255,255,255,.48);
  transition:.2s ease;
}
.fivehoodMenuButton:hover{transform:translateY(-2px);background:rgba(255,255,255,.31)}
.fivehoodMenuIcon{font-size:18px;line-height:1;font-weight:900}
.fivehoodGlassMenu{
  position:absolute;
  right:0;top:49px;
  width:min(310px,86vw);
  padding:9px;
  border:1px solid rgba(255,255,255,.46);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(235,247,255,.76),rgba(190,217,236,.58));
  color:#10243e;
  backdrop-filter:blur(24px) saturate(125%);
  -webkit-backdrop-filter:blur(24px) saturate(125%);
  box-shadow:0 20px 50px rgba(10,30,50,.24),inset 0 1px 0 rgba(255,255,255,.72);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-8px) scale(.98);
  transform-origin:top right;
  transition:.2s ease;
}
.fivehoodGlassMenu.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.fivehoodGlassMenu button{
  width:100%;
  display:grid;
  grid-template-columns:30px 1fr;
  grid-template-rows:auto auto;
  column-gap:8px;
  padding:11px 10px;
  border:0;border-radius:14px;
  background:transparent;color:#10243e;
  text-align:left;cursor:pointer;
}
.fivehoodGlassMenu button:hover{background:rgba(255,255,255,.38)}
.fivehoodGlassMenu button>span{grid-row:1/3;font-size:19px;align-self:center;text-align:center}
.fivehoodGlassMenu b{font-size:12px}
.fivehoodGlassMenu small{font-size:9.5px;color:#48647c;margin-top:2px}

.infoModal{
  position:fixed;inset:0;z-index:100001;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(2,9,18,.30);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:.24s ease;
}
.infoModal.open{opacity:1;visibility:visible;pointer-events:auto}
.infoModalPanel{
  position:relative;
  width:min(820px,94vw);max-height:min(86vh,780px);overflow:auto;
  padding:clamp(24px,4vw,38px);
  border:1px solid rgba(255,255,255,.28);
  border-radius:28px;color:#eef7ff;
  background:linear-gradient(145deg,rgba(4,18,33,.90),rgba(8,38,64,.82));
  backdrop-filter:blur(24px) saturate(125%);
  -webkit-backdrop-filter:blur(24px) saturate(125%);
  box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.15);
  transform:translateY(22px) scale(.98);
  transition:.28s cubic-bezier(.2,.8,.2,1);
}
.infoModal.open .infoModalPanel{transform:translateY(0) scale(1)}
.infoModalClose{
  position:absolute;right:14px;top:13px;width:36px;height:36px;
  border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);color:#fff;font-size:23px;cursor:pointer;
}
.infoModalBrand{display:flex;align-items:center;gap:15px;padding-right:42px;margin-bottom:18px}
.infoModalBrand img{width:66px;height:66px;object-fit:contain}
.infoModalBrand h2{margin:2px 0 3px;font-size:clamp(28px,4vw,40px);line-height:1}
.infoModalBrand p{margin:0;color:#a9c5dc;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.infoEyebrow{font-size:9px;letter-spacing:.20em;color:#6fc2ff;font-weight:800}
.infoLead{font-size:14px;line-height:1.65;color:#dbe9f5}
.versionHero{padding:15px 16px;border-radius:17px;border:1px solid rgba(90,197,255,.25);background:linear-gradient(135deg,rgba(17,93,157,.28),rgba(63,43,148,.18));display:grid;gap:3px;margin:12px 0 14px}
.versionHero b{font-size:9px;letter-spacing:.14em;color:#7fd3ff;text-transform:uppercase}
.versionHero strong{font-size:22px}.versionHero span{font-size:11px;color:#bdd0df}
.infoCards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.infoCard{padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.045)}
.infoCard b{display:block;font-size:12px;margin-bottom:6px}
.infoCard span{display:block;font-size:11px;line-height:1.55;color:#b9cadd}
.versionHistory{margin-top:14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.035);overflow:hidden}
.versionHistory summary{padding:13px 14px;cursor:pointer;font-size:12px;font-weight:800}
.versionHistory div{display:grid;gap:3px;padding:11px 14px;border-top:1px solid rgba(255,255,255,.08)}
.versionHistory b{font-size:11px}.versionHistory span{font-size:10.5px;line-height:1.5;color:#adc0d2}
.infoNote{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);font-size:10.5px;line-height:1.55;color:#aebfd0}
.infoModalCopyright{text-align:center;margin-top:17px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);font-size:9px;color:#8fa5ba}
.feedbackText{width:100%;min-height:180px;resize:vertical;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.16);outline:none;background:rgba(255,255,255,.07);color:#fff;font:inherit;line-height:1.5}
.feedbackText:focus{border-color:#3ecbff;box-shadow:0 0 0 3px rgba(62,203,255,.12)}
.feedbackActions{display:flex;gap:9px;margin-top:11px}
.feedbackActions button{padding:11px 15px;border:0;border-radius:13px;background:linear-gradient(135deg,#0a75d7,#23c8f5);color:#fff;font-weight:800;cursor:pointer}
.feedbackActions .secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13)}
.feedbackStatus{min-height:18px;margin-top:8px;font-size:10px;color:#8de3ff}

@media(max-width:700px){
  #home .familyLoginButton{right:52px!important;top:2px!important;padding:8px 10px!important;font-size:10px!important}
  .fivehoodMenuWrap{right:2px;top:2px}
  .fivehoodMenuButton{width:42px;height:36px}
  .fivehoodGlassMenu{top:44px;width:min(292px,88vw)}
  .infoModal{padding:12px}
  .infoModalPanel{width:96vw;max-height:88vh;padding:22px 18px;border-radius:22px}
  .infoCards{grid-template-columns:1fr}
  .infoModalBrand img{width:56px;height:56px}
}
@media (max-width:800px){
  /* The module icons are absolutely positioned above each card.
     Give each mobile row enough vertical breathing room so the next
     row's floating icons never sit on top of the previous row's buttons. */
  #home .homeCards{
    column-gap:10px!important;
    row-gap:72px!important;
  }
}
@media (max-width:430px){
  #home .homeCards{row-gap:68px!important}
}
.mobilePreviewFull{display:none}
@media(max-width:800px){
  #home .homeTopClean{padding-top:46px!important;min-height:178px!important}
  #home .homeLogo{margin-top:4px!important}
  #home .familyLoginButton{top:4px!important;right:54px!important;z-index:70!important}
  #home .fivehoodMenuWrap{top:4px!important;right:4px!important;z-index:71!important}

  body.toolPageOpen #visual.studioView.active{overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding:0 8px 96px!important}
  #visual .studioTopbar{z-index:80!important}
  #visual .studioWorkspace{display:flex!important;flex-direction:column!important;gap:8px!important;overflow:visible!important}
  #visual .studioCenter{
    order:1!important;position:sticky!important;top:68px!important;z-index:45!important;
    width:100%!important;height:36vh!important;min-height:245px!important;max-height:360px!important;
    padding:8px!important;overflow:hidden!important;border-radius:20px!important;
    background:linear-gradient(145deg,rgba(5,14,25,.96),rgba(10,27,45,.94))!important;
    box-shadow:0 14px 34px rgba(0,0,0,.38)!important
  }
  #visual .studioStage{width:100%!important;height:100%!important;min-height:0!important}
  #visual #photoCanvas.hasMedia,#visual #vid.hasMedia,#visual #reelCanvas.hasMedia{
    max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;
    object-fit:contain!important;margin:auto!important
  }
  #visual #vid.hasMedia{width:100%!important;height:100%!important;object-fit:contain!important;background:#02070d!important}
  #visual .studioLeft{
    order:2!important;display:flex!important;position:relative!important;z-index:20!important;
    gap:6px!important;padding:7px!important;overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch
  }
  #visual .studioNavBtn{min-width:max-content!important;min-height:42px!important;padding:9px 11px!important;touch-action:manipulation}
  #visual .studioRight{order:3!important;overflow:visible!important;max-height:none!important;padding:14px!important}
  #visual .studioPanel .choiceGrid button,#visual .smartPreset,#visual .template,#visual .createReelBtn,#visual .reelPickBtn{
    min-height:44px!important;touch-action:manipulation
  }
  #visual .studioPanel input[type=range]{min-height:34px!important}
  #visual .smartPresetGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #visual .studioBottom{position:sticky!important;bottom:6px!important;z-index:60!important}
  .mobilePreviewFull{
    display:grid;place-items:center;position:absolute;right:10px;top:10px;z-index:70;width:38px;height:38px;
    border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(4,15,27,.74);color:#fff;font-size:20px;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
  }
  #visual.mobilePreviewOpen .studioCenter{
    position:fixed!important;inset:0!important;z-index:100500!important;width:100vw!important;height:100dvh!important;
    max-height:none!important;min-height:0!important;border-radius:0!important;padding:16px!important;background:#030914!important
  }
  #visual.mobilePreviewOpen .mobilePreviewFull{position:fixed!important;right:16px!important;top:calc(14px + env(safe-area-inset-top))!important}
  body.mobilePreviewLocked{overflow:hidden!important}
}
@media (max-width:800px){
  /* Keep Home logo clear of Family Login + menu. */
  #home .homeTopClean{padding-top:58px!important;min-height:188px!important}
  #home .homeLogo{margin-top:0!important}
  #home .familyLoginButton{top:6px!important;right:58px!important;z-index:80!important}
  #home .fivehoodMenuWrap{top:6px!important;right:6px!important;z-index:81!important}

  /* The editor action row behaves like a real mobile app dock. */
  #visual .studioBottom{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    z-index:10020!important;
    padding:7px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    background:rgba(7,18,32,.94)!important;
    box-shadow:0 12px 35px rgba(0,0,0,.58)!important;
  }
  #visual .studioBottom button{flex:0 0 112px!important;min-height:62px!important}
  body.toolPageOpen #visual.studioView.active{padding-bottom:calc(105px + env(safe-area-inset-bottom))!important}

  /* The player surface can scroll normally; only the actual arcs capture drag gestures. */
  #player .premiumDiscPlayer{touch-action:pan-y!important}
  #player .premiumArcs{pointer-events:none!important;touch-action:pan-y!important}
  #player .premiumArcHit,#player #progressStartHit{pointer-events:stroke!important;touch-action:none!important}
  #player #progressStartHit{pointer-events:all!important}

  /* Larger mobile hit targets on the two circular controls. */
  #player .premiumArcHit{stroke-width:54!important}
}
#visual .studioRight .photoGlassDial{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;width:100%!important;height:205px!important;margin:12px 0 2px!important;border-radius:190px 190px 24px 24px!important;background:linear-gradient(180deg,rgba(211,230,244,.14),rgba(16,32,49,.34))!important;backdrop-filter:blur(20px) saturate(122%)!important;-webkit-backdrop-filter:blur(20px) saturate(122%)!important;box-shadow:0 16px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.25)!important}
#visual .studioRight .photoDialArc{top:34px!important;height:145px!important;width:96%!important}.dialToolGrid{grid-template-columns:1fr 1fr!important}.textStyleRow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.textStyleBtn{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;border-radius:10px;padding:8px 10px}.textStyleBtn.on{background:rgba(31,116,196,.30);border-color:rgba(96,187,255,.58)}.textDragHint{font-size:10px;color:#a9c8df;margin:8px 2px}.photoDialSources{display:none!important}#photoCanvas.textMoveReady{cursor:move}
@media(max-width:800px){#visual .studioRight .photoGlassDial{height:210px!important;margin-top:10px!important}.dialToolGrid{grid-template-columns:1fr 1fr!important}#visual .studioRight{background:linear-gradient(145deg,rgba(9,18,31,.90),rgba(12,22,37,.82))!important}#visual .studioPanel.active{overflow:visible!important}}
#home .homeCarouselShell{
  position:relative;
  width:min(1540px,100%);
  height:clamp(390px,56vh,520px);
  margin:clamp(20px,4vh,54px) auto 0;
  perspective:1300px;
  overflow:visible;
}
#home .homeCards{
  position:relative!important;
  display:block!important;
  width:min(1320px,86vw)!important;
  height:100%!important;
  margin:0 auto!important;
  transform-style:preserve-3d;
  overflow:visible!important;
}
#home .homeCard{
  --orbit-x:0px; --orbit-z:0px; --orbit-scale:1; --orbit-opacity:1; --orbit-rotate:0deg;
  position:absolute!important;
  left:50%!important; top:50%!important;
  width:clamp(180px,16vw,250px)!important;
  max-width:none!important; min-width:0!important;
  height:clamp(300px,43vh,390px)!important;
  padding:clamp(82px,7vw,102px) 16px 16px!important;
  transform:translate(-50%,-50%) translateX(var(--orbit-x)) translateZ(var(--orbit-z)) rotateY(var(--orbit-rotate)) scale(var(--orbit-scale))!important;
  opacity:var(--orbit-opacity)!important;
  filter:saturate(calc(.72 + var(--orbit-scale) * .28));
  transition:transform .58s cubic-bezier(.2,.78,.2,1),opacity .48s ease,filter .48s ease!important;
  transform-origin:center center!important;
  pointer-events:auto;
  z-index:var(--orbit-zindex,1)!important;
}
#home .homeCard::before{top:72px!important;border-radius:28px!important}
#home .homeCard .homeIcon{top:-2px!important}
#home .homeCard.is-center{
  --orbit-x:0px;--orbit-z:100px;--orbit-scale:1.10;--orbit-opacity:1;--orbit-rotate:0deg;
  --orbit-zindex:20;
  filter:saturate(1.05) brightness(1.03);
}
#home .homeCard[data-orbit="-1"]{--orbit-x:-250px;--orbit-z:15px;--orbit-scale:.88;--orbit-opacity:.82;--orbit-rotate:9deg;--orbit-zindex:14}
#home .homeCard[data-orbit="1"]{--orbit-x:250px;--orbit-z:15px;--orbit-scale:.88;--orbit-opacity:.82;--orbit-rotate:-9deg;--orbit-zindex:14}
#home .homeCard[data-orbit="-2"]{--orbit-x:-445px;--orbit-z:-80px;--orbit-scale:.72;--orbit-opacity:.58;--orbit-rotate:17deg;--orbit-zindex:9}
#home .homeCard[data-orbit="2"]{--orbit-x:445px;--orbit-z:-80px;--orbit-scale:.72;--orbit-opacity:.58;--orbit-rotate:-17deg;--orbit-zindex:9}
#home .homeCard[data-orbit="-3"]{--orbit-x:-575px;--orbit-z:-160px;--orbit-scale:.58;--orbit-opacity:.34;--orbit-rotate:25deg;--orbit-zindex:5}
#home .homeCard[data-orbit="3"]{--orbit-x:575px;--orbit-z:-160px;--orbit-scale:.58;--orbit-opacity:.34;--orbit-rotate:-25deg;--orbit-zindex:5}
#home .homeCard.is-center::before{box-shadow:0 24px 50px rgba(7,22,43,.28),0 0 0 2px rgba(255,255,255,.24),0 0 28px rgba(67,139,218,.24),inset 0 1px 0 rgba(255,255,255,.75)!important}
#home .homeCard:not(.is-center) .openPill{opacity:.72}
#home .orbitArrow{
  position:absolute;z-index:40;top:50%;transform:translateY(-50%);
  width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.74);
  background:rgba(10,30,55,.54);color:#fff;font-size:36px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.22);
}
#home .orbitArrow:hover{background:rgba(18,61,102,.72);box-shadow:0 0 24px rgba(62,151,240,.34)}
#home .orbitPrev{left:max(8px,1.2vw)} #home .orbitNext{right:max(8px,1.2vw)}
#home .orbitDots{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);z-index:45;display:flex;gap:8px;align-items:center}
#home .orbitDot{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:rgba(8,30,55,.34);box-shadow:0 0 0 1px rgba(255,255,255,.45)}
#home .orbitDot.on{width:12px;height:12px;background:#159cf5;box-shadow:0 0 14px rgba(24,156,245,.75)}
#home .orbitHint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-size:10px;letter-spacing:1.1px;color:rgba(8,27,52,.72);font-weight:800;white-space:nowrap}

@media(max-width:900px){
  #home .homeCarouselShell{height:440px;margin-top:18px;overflow:hidden}
  #home .homeCards{width:100%!important}
  #home .homeCard{width:min(56vw,235px)!important;height:340px!important;padding-top:88px!important}
  #home .homeCard[data-orbit="-1"]{--orbit-x:-43vw;--orbit-scale:.76;--orbit-opacity:.74;--orbit-rotate:9deg}
  #home .homeCard[data-orbit="1"]{--orbit-x:43vw;--orbit-scale:.76;--orbit-opacity:.74;--orbit-rotate:-9deg}
  #home .homeCard[data-orbit="-2"]{--orbit-x:-68vw;--orbit-scale:.57;--orbit-opacity:.34;--orbit-rotate:17deg}
  #home .homeCard[data-orbit="2"]{--orbit-x:68vw;--orbit-scale:.57;--orbit-opacity:.34;--orbit-rotate:-17deg}
  #home .homeCard[data-orbit="-3"]{--orbit-x:-84vw;--orbit-scale:.43;--orbit-opacity:.18;--orbit-rotate:24deg}
  #home .homeCard[data-orbit="3"]{--orbit-x:84vw;--orbit-scale:.43;--orbit-opacity:.18;--orbit-rotate:-24deg}
  #home .orbitArrow{width:48px;height:48px;font-size:30px;top:47%}
  #home .orbitPrev{left:7px}#home .orbitNext{right:7px}
}
@media(max-width:520px){
  #home .homeTopClean{min-height:118px!important}
  #home .homeCarouselShell{height:415px;margin-top:8px}
  #home .homeCard{width:min(62vw,228px)!important;height:325px!important}
  #home .homeCard h2{font-size:17px!important}
  #home .homeCard p{font-size:10.5px!important}
  #home .orbitArrow{width:43px;height:43px;font-size:27px;background:rgba(7,26,49,.68)}
  #home .orbitHint{bottom:21px;font-size:9px}
}
#player .discHeadband:before{
  box-shadow:
    inset 0 4px 0 rgba(210,230,244,.16),
    inset 0 10px 9px rgba(255,255,255,.025),
    0 -2px 0 rgba(76,111,141,.38)!important;
}
/* Do not allow either headband layer to paint a bottom-edge shadow. */
#player .discHeadband,
#player .discHeadband:after{
  box-shadow:none!important;
}
#player .discHeadband:before{
  background:transparent!important;
  border-bottom:0!important;
}
/* Album artwork itself stays completely clear. */
#player .premiumDisc:before,
#player .premiumDisc:after,
#player .discShade:before,
#player .discShade:after{
  content:none!important;
  display:none!important;
}

/* Home wordmark: the sprout now belongs to the letter itself, so the
   leaves/stem cannot float away from the "o" at different widths. */
.homeLogo .brandLeaf{
  left:50%!important;
  top:-17px!important;
  width:24px!important;
  height:29px!important;
  transform:translateX(-50%)!important;
}
.homeLogo .brandLeaf:before,
.homeLogo .brandLeaf:after{
  width:10px!important;
  height:18px!important;
  transform-origin:50% 100%!important;
}
.homeLogo .brandLeaf:before{
  left:2px!important;
  top:6px!important;
  transform:rotate(-38deg)!important;
}
.homeLogo .brandLeaf:after{
  left:12px!important;
  top:3px!important;
  transform:rotate(38deg)!important;
}
.homeLogo .brandStem{
  left:11px!important;
  top:13px!important;
  width:2.5px!important;
  height:18px!important;
  border-radius:999px!important;
  transform:rotate(-2deg)!important;
  transform-origin:50% 100%!important;
}

/* Lower the complete visual/transport assembly as one unit.  This keeps
   the circle, earcups, metadata and all five transport buttons together. */
#player .premiumAudioCenter{
  transform:translateY(28px)!important;
}

/* A taller arch with the SAME lower endpoint: old geometry ended at
   38.5% (-1% + 39.5%); new geometry also ends at 38.5% (-5.5% + 44%).
   Therefore the crown rises relative to the circle without disconnecting
   from the existing earcup zone. */
#player .discHeadband{
  top:-5.5%!important;
  height:44%!important;
}

@media(max-width:1100px){
  #player .premiumAudioCenter{transform:translateY(24px)!important}
}
@media(max-width:800px){
  #player .premiumAudioCenter{transform:translateY(18px)!important}
  /* old mobile endpoint: -.3 + 38 = 37.7; keep it unchanged */
  #player .discHeadband{top:-4.3%!important;height:42%!important}
}
.photoDialTools{display:grid;grid-template-columns:1fr;gap:7px;margin-top:10px}.photoDialTools button{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:11px 12px;background:rgba(255,255,255,.055);color:#eef7ff;font-weight:750;cursor:pointer;text-align:left}.photoDialTools button:hover,.photoDialTools button.on{background:rgba(31,116,196,.26);border-color:rgba(96,187,255,.52)}.photoDialTools button b{font-size:11px;color:#8fd7ff;min-width:42px;text-align:right}
#photoPane{position:relative}.photoGlassDial{position:absolute;z-index:35;left:50%;bottom:16px;transform:translateX(-50%);width:min(92%,470px);height:235px;border:1px solid rgba(255,255,255,.27);border-radius:235px 235px 30px 30px;background:linear-gradient(180deg,rgba(17,31,48,.26),rgba(8,18,31,.42));box-shadow:0 20px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.22);backdrop-filter:blur(18px) saturate(128%);-webkit-backdrop-filter:blur(18px) saturate(128%);overflow:hidden;touch-action:none}.photoGlassDial[hidden]{display:none}.photoDialClose{position:absolute;right:15px;top:13px;z-index:3;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(7,17,28,.34);color:#fff;font-size:20px;line-height:28px}.photoDialHeading{position:absolute;z-index:2;top:17px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}.photoDialHeading span{font-size:12px;font-weight:800;letter-spacing:.03em}.photoDialHeading strong{font-size:25px;line-height:1.15;color:#ffe66b}.photoDialArc{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:min(96%,420px);height:168px;cursor:ew-resize}.photoDialArc svg{width:100%;height:100%;overflow:visible}.dialArcLine{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2}.dialArcGlow{fill:none;stroke:rgba(113,207,255,.42);stroke-width:8;filter:blur(7px)}.photoDialKnob{position:absolute;width:17px;height:17px;border-radius:50%;background:#ffe34f;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 5px rgba(255,224,66,.13),0 3px 12px rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none}.photoDialNeutral{position:absolute;left:50%;top:18px;width:2px;height:14px;background:rgba(255,255,255,.9);border-radius:3px;transform:translateX(-50%)}.photoDialFoot{position:absolute;z-index:2;left:17px;right:17px;bottom:10px;display:flex;align-items:center;justify-content:space-between;color:rgba(238,247,255,.72);font-size:10px}.photoDialFoot button{border:1px solid rgba(255,255,255,.17);border-radius:999px;padding:6px 11px;background:rgba(7,17,28,.30);color:#fff;font-size:10px}.photoDialTick{stroke:rgba(255,255,255,.55);stroke-width:1.5}.photoDialTick.major{stroke:rgba(255,255,255,.92);stroke-width:2.5}
@media(max-width:700px){.photoGlassDial{bottom:10px;width:96%;height:215px}.photoDialArc{top:36px;height:154px}.photoDialHeading{top:12px}.photoDialHeading strong{font-size:22px}.photoDialFoot{bottom:7px}}
#player.active{
  background-image:linear-gradient(rgba(2,8,18,.30),rgba(2,8,18,.48)),url('../audioback.jpg?v=21')!important;
  background-size:cover!important;background-position:center!important;background-attachment:local!important;
}
#player .albumDisc,#player .premiumDisc{
  background-image:url('../audioback.jpg?v=21')!important;background-size:cover!important;background-position:center!important;
}
#player .songArt{background-image:url('../audioback.jpg?v=21')!important;background-size:cover!important;background-position:center!important;}
#visual .studioRight .photoGlassDial{
  position:relative!important;left:auto!important;bottom:auto!important;top:auto!important;transform:none!important;
  width:100%!important;max-width:470px!important;margin:14px auto 2px!important;z-index:3!important;
}
@media(max-width:700px){
  #visual .studioRight .photoGlassDial{width:100%!important;max-width:none!important;margin:10px 0 6px!important;height:215px!important;}
  #visual .studioPanel.active .photoDialTools{scroll-margin-top:90px;}
  #visual .studioPanel.active .photoGlassDial{scroll-margin-top:92px;}
}
#visual .photoGlassDial{
  border-color:rgba(190,225,248,.42)!important;
  background:linear-gradient(180deg,rgba(19,38,60,.72),rgba(5,16,29,.88))!important;
  box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 34px rgba(58,153,220,.08)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;backdrop-filter:blur(22px) saturate(135%)!important;
}
#visual .photoDialArc{touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;cursor:ew-resize!important}
#visual .dialArcLine{stroke:rgba(226,243,255,.58)!important;stroke-width:3!important}
#visual .dialArcGlow{stroke:rgba(66,180,244,.48)!important;stroke-width:10!important;filter:blur(5px)!important}
#visual .photoDialTick{stroke:rgba(225,242,255,.78)!important;stroke-width:1.7!important}
#visual .photoDialTick.major{stroke:#fff!important;stroke-width:3!important}
#visual .photoDialKnob{width:21px!important;height:21px!important;background:#ffe54f!important;border:3px solid #fff!important;box-shadow:0 0 0 6px rgba(255,226,64,.16),0 0 18px rgba(255,224,58,.46),0 4px 12px rgba(0,0,0,.45)!important}
#visual .photoDialHeading span{font-size:13px!important;color:#f4f9ff!important}
#visual .photoDialHeading strong{font-size:28px!important;color:#ffe45c!important;text-shadow:0 0 12px rgba(255,224,65,.20)!important}
#visual .photoDialFoot{font-size:11px!important;color:rgba(241,248,255,.86)!important;gap:7px!important}
#visual .photoDialFoot button{min-height:32px!important;background:rgba(12,29,46,.70)!important;border-color:rgba(255,255,255,.25)!important}
#dialSoundToggle{min-width:72px!important}
#visual .studioBottom button:disabled{opacity:.48!important}
@media(max-width:800px){
  #visual .studioRight .photoGlassDial{height:230px!important;margin-top:12px!important}
  #visual .studioRight .photoDialArc{top:43px!important;height:166px!important;width:100%!important}
  #visual .studioRight .photoDialHeading{top:12px!important}
  #visual .studioRight .photoDialFoot{bottom:7px!important;left:10px!important;right:10px!important}
}
#player.active:before{background:linear-gradient(180deg,rgba(3,9,18,.05),rgba(3,9,18,.18))!important}
@media(max-width:800px){
  /* Keep the selected adjustment and dial visually obvious on a phone. */
  #visual .studioPanel.active .photoDialTools button.on{box-shadow:0 0 0 1px rgba(102,199,255,.28),0 0 20px rgba(41,145,222,.18)!important}
}
#localvideo .localVideoStage{width:100%;height:100%;min-height:420px;display:grid;place-items:center;position:relative;background:#040914;border-radius:18px;overflow:hidden}
#localvideo #localVideo{width:100%;height:100%;max-height:68vh;object-fit:contain;background:#000;display:none}
#localvideo #localVideo.hasMedia{display:block}
#localvideo #localVideo.hasMedia + #localVideoEmpty{display:none}
@media(max-width:800px){#localvideo .localVideoStage{min-height:52vh}#localvideo #localVideo{max-height:60vh}}
/* Slightly clearer audio background while retaining text/control contrast. */
#player.active:before{background:linear-gradient(180deg,rgba(3,9,18,.02),rgba(3,9,18,.12))!important}
#player .premiumDisc{background-image:var(--player-art,url('../audioback.jpg?v=21'))!important}
html,body{max-width:none!important;margin:0!important;width:100%!important;min-height:100%!important}
body{padding:0!important;line-height:normal!important}
#home .homeCarouselShell{left:0!important;right:0!important;margin-left:auto!important;margin-right:auto!important;transform:none!important}
#home .homeCards{left:0!important;right:0!important;margin-left:auto!important;margin-right:auto!important}

/* Audio Player: page can scroll, toolbar stays one line, center circle mirrors page background. */
body.toolPageOpen #player.active{overflow-y:auto!important;overflow-x:hidden!important;min-height:100dvh!important;height:auto!important;grid-template-rows:auto minmax(620px,1fr) auto!important;padding-bottom:18px!important;--player-art:url('../audioback.jpg?v=21')}
#player.active{background-image:linear-gradient(rgba(2,8,18,.14),rgba(2,8,18,.28)),var(--player-art)!important;background-size:cover!important;background-position:center!important;background-attachment:scroll!important}
#player.active:before{opacity:.18!important;filter:blur(10px) saturate(1.02)!important}
#player .premiumDisc,#player .albumDisc{background-image:var(--player-art)!important;background-size:cover!important;background-position:center!important}
#player .audioToolbar{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:6px!important;scrollbar-width:thin!important;padding:7px!important}
#player .audioToolbar .toolBtn{flex:1 1 0!important;min-width:82px!important;max-width:150px!important;padding:7px 5px!important}
#player .premiumVolumeLabel b{white-space:nowrap}
@media(min-width:1101px){#player .audioToolbar .toolBtn{min-width:0!important;font-size:9.5px!important}#player .audioToolbar{position:sticky!important;bottom:4px!important;z-index:35!important}}
@media(max-width:800px){body.toolPageOpen #player.active{padding-bottom:110px!important}.audioCenter{min-height:590px!important}.audioToolbar{position:sticky!important;bottom:6px!important;z-index:40!important}.audioToolbar .toolBtn{flex:0 0 88px!important;min-width:88px!important}.headphoneStage{margin-top:8px!important}}

/* Enhanced local video player. */
#localvideo .localVideoStage{touch-action:pan-x;user-select:none;-webkit-user-select:none}
#localvideo #localVideo{--local-video-rotation:0deg;transform:rotate(var(--local-video-rotation));transform-origin:center;transition:transform .25s ease,filter .12s linear}
#localvideo #localVideo.quarterTurn{max-width:78vh;max-height:78vw}
#localvideo .videoGestureHud{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.94);z-index:8;min-width:120px;text-align:center;padding:11px 16px;border-radius:16px;background:rgba(4,12,24,.74);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(16px);color:#fff;font-weight:800;opacity:0;pointer-events:none;transition:.16s}
#localvideo .videoGestureHud.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#localvideo .videoGestureGuide{position:absolute;left:10px;right:10px;bottom:48px;z-index:7;display:flex;justify-content:space-between;gap:8px;pointer-events:none;opacity:.62;color:#fff;font-size:9px;text-shadow:0 2px 5px #000}
#localvideo .localVideoBottom button{min-width:92px!important}
@media(max-width:800px){#localvideo .videoGestureGuide{bottom:52px;font-size:8px}.localVideoBottom{position:sticky!important;bottom:6px!important;z-index:35!important;flex-wrap:nowrap!important;overflow-x:auto!important}.localVideoBottom button{flex:0 0 88px!important;min-width:88px!important}}
/* VIDEO: large-file playback and pseudo-fullscreen tool surface. */
#localvideo .localVideoCenter{overflow:visible!important}
#localvideo .localVideoStage{position:relative!important;isolation:isolate!important;background:#000!important;touch-action:none!important}
#localvideo #localVideo{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain;background:#000;display:none;transform-origin:center center!important}
#localvideo #localVideo.hasMedia{display:block!important}
#localvideo .localVideoOverlayControls{position:absolute;left:0;right:0;bottom:18px;z-index:16;display:flex;justify-content:center;align-items:center;gap:14px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s}
#localvideo .controlsVisible .localVideoOverlayControls,#localvideo .settingsOpen .localVideoOverlayControls{opacity:1;transform:none;pointer-events:auto}
#localvideo .localVideoOverlayControls button{width:48px;height:42px;border-radius:14px;border:1px solid #ffffff42;background:#07111dc7;color:#fff;font-weight:800;backdrop-filter:blur(16px)}
#localvideo .localVideoOverlayControls .videoBigPlay{width:58px;height:58px;border-radius:50%;font-size:21px}
#localvideo .localVideoOverlayControls .videoSettingsButton{position:absolute;right:18px;width:46px;font-size:22px}
#localvideo .localVideoSettings{position:absolute;top:10px;right:10px;bottom:10px;width:min(360px,84%);z-index:24;padding:14px;overflow-y:auto;overscroll-behavior:contain;border:1px solid #ffffff3d;border-radius:22px;background:linear-gradient(145deg,#07111edb,#0b1b2dd1);backdrop-filter:blur(24px) saturate(130%);box-shadow:-18px 0 45px #0008;transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;transition:.22s ease;color:#fff}
#localvideo .settingsOpen .localVideoSettings{transform:none;opacity:1;pointer-events:auto}
#localvideo .videoSettingsHead{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-14px;margin:-14px -14px 10px;padding:14px;background:#081421e8;backdrop-filter:blur(20px);z-index:2;border-bottom:1px solid #ffffff20}
#localvideo .videoSettingsHead b{display:block;font-size:18px}.videoSettingsHead span{display:block;font-size:9px;color:#aebed0;margin-top:3px}.videoSettingsHead button{width:36px;height:36px;border-radius:12px;border:1px solid #ffffff2c;background:#ffffff10;color:#fff;font-size:20px}
#localvideo .videoSettingGroup{padding:10px 0;border-bottom:1px solid #ffffff17}.videoSettingGroup>label{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;margin-bottom:7px}.videoSettingGroup select,.videoSettingGroup input[type=range]{width:100%;margin:0}.videoSettingGroup small{display:block;color:#b7c6d7;font-size:9px;margin-top:7px}.videoChipRow{display:flex;flex-wrap:wrap;gap:6px}.videoChipRow button{flex:1 1 auto;min-width:66px;border:1px solid #ffffff2b;background:#ffffff0f;color:#fff;border-radius:10px;padding:8px 7px;font-size:10px}.videoChipRow button:hover{background:#155aa8}.videoInfoBox{font-size:10px;line-height:1.55;color:#dce9f6;background:#02081173;border-radius:10px;padding:8px;word-break:break-word}.videoInfoMini{margin-top:9px;padding:9px;border:1px solid #ffffff18;border-radius:11px;background:#06101cb3}.videoInfoMini b,.videoInfoMini span{display:block}.videoInfoMini span{font-size:9px;color:#b9c7d7;margin-top:3px;line-height:1.4}
#localvideo .videoGestureGuide{bottom:84px!important}
#localvideo.pseudoActive,#localvideo .localVideoStage.pseudoFullscreen{border-radius:0!important}
body.videoPseudoOpen{overflow:hidden!important}
#localvideo .localVideoStage.pseudoFullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;z-index:10000!important;background:#000!important}
#localvideo .localVideoStage.pseudoFullscreen #localVideo{max-height:none!important}
#localvideo .localVideoStage.pseudoFullscreen .localVideoSettings{top:max(8px,env(safe-area-inset-top));bottom:max(8px,env(safe-area-inset-bottom));right:max(8px,env(safe-area-inset-right))}
#localvideo video::cue{font-size:var(--fh-subtitle-size,100%);background:rgba(0,0,0,.58);color:white}
@media(max-width:800px){
  #localvideo .localVideoStage{min-height:58vh!important}
  #localvideo .localVideoSettings{width:min(340px,88vw)!important}
  #localvideo .localVideoRight{display:block!important}
  #localvideo .localVideoBottom{position:sticky!important;bottom:6px!important;z-index:35!important}
}
/* Let more of the playing movie remain visible through the Video Tools glass. */
#localvideo .localVideoSettings{
  background:linear-gradient(145deg,rgba(7,17,30,.58),rgba(11,27,45,.50))!important;
  border-color:rgba(255,255,255,.30)!important;
  -webkit-backdrop-filter:blur(14px) saturate(118%)!important;
  backdrop-filter:blur(14px) saturate(118%)!important;
  box-shadow:-12px 0 34px rgba(0,0,0,.42)!important;
}
#localvideo .videoSettingsHead{
  background:rgba(8,20,33,.58)!important;
  -webkit-backdrop-filter:blur(14px) saturate(115%)!important;
  backdrop-filter:blur(14px) saturate(115%)!important;
}
#localvideo .videoSettingGroup{background:rgba(1,8,16,.10);padding-left:4px;padding-right:4px;border-radius:10px}
#localvideo .videoChipRow button,#localvideo .videoSettingGroup select{background:rgba(3,13,25,.52)!important}

/* Restored movie timeline: elapsed — draggable line — remaining. */
#localvideo .localVideoTimeline{
  position:absolute;left:18px;right:18px;bottom:88px;z-index:18;
  display:grid;grid-template-columns:auto minmax(90px,1fr) auto;align-items:center;gap:10px;
  padding:7px 10px;border:1px solid rgba(255,255,255,.20);border-radius:13px;
  background:rgba(3,10,19,.50);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:10px;font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(7px);pointer-events:none;transition:.18s;
}
#localvideo .controlsVisible .localVideoTimeline,#localvideo .settingsOpen .localVideoTimeline{opacity:1;transform:none;pointer-events:auto}
#localvideo .localVideoTimeline input[type=range]{width:100%;margin:0;accent-color:#5bc8ff;cursor:pointer}
#localvideo .localVideoTimeline span{min-width:34px;text-shadow:0 1px 5px #000;text-align:center}
#localvideo .videoGestureGuide{bottom:126px!important}
#localvideo .localVideoOverlayControls{bottom:20px!important}
#localvideo .localVideoStage.pseudoFullscreen .localVideoTimeline{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(88px,calc(env(safe-area-inset-bottom) + 82px))}
#localvideo .localVideoStage.pseudoFullscreen .videoGestureGuide{bottom:max(130px,calc(env(safe-area-inset-bottom) + 124px))!important}

.mediaStopBtn{border-color:rgba(255,126,126,.34)!important;background:rgba(92,18,28,.36)!important;color:#ffdfe2!important}
.mediaStopBtn:hover{background:rgba(132,25,38,.52)!important}
@media(max-width:800px){
  #localvideo .localVideoTimeline{left:10px;right:10px;bottom:82px;gap:7px;padding:7px 8px;font-size:9px}
  #localvideo .videoGestureGuide{bottom:120px!important}
}
/* Gesture instructions are intentionally gone; the gestures themselves remain active. */
#localvideo .videoGestureGuide{display:none!important}
/* Song thumbnails are independent from the Audio Player background.
   No old audioback/background image is allowed to become every song cover. */
#player .songArt{
  background-image:linear-gradient(145deg,#10243b,#071321)!important;
  background-size:cover!important;
  background-position:center!important;
  position:relative!important;
  overflow:hidden!important;
}
#player .songArt:not(.hasCover)::after{
  content:"♪";
  position:absolute;inset:0;display:grid;place-items:center;
  color:#8fdcff;font-size:21px;font-weight:800;
  text-shadow:0 0 12px rgba(58,184,255,.45);
}
#player .songArt.hasCover::after{content:none!important}
#player #editCoverPreview.noCover{
  background:linear-gradient(145deg,#10243b,#071321)!important;
  position:relative!important;
}
#player #editCoverPreview.noCover::after{
  content:"♪";position:absolute;inset:0;display:grid;place-items:center;
  color:#8fdcff;font-size:36px;font-weight:800;
}
@media (min-width:801px){
  body.toolPageOpen #player.active{
    height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;
    display:grid!important;grid-template-rows:78px minmax(0,1fr)!important;
    padding:0 12px 72px!important;box-sizing:border-box!important;gap:0!important;
  }
  #player .audioTopbar{height:78px!important;min-height:78px!important;padding:4px 0!important;position:relative!important;z-index:80!important;overflow:visible!important}
  #player .audioLogo{width:68px!important;height:68px!important;top:5px!important;z-index:90!important}

  /* Side panels: same width, moved down only; finish above the fixed dock. */
  #player .audioWorkspace{height:100%!important;min-height:0!important;overflow:visible!important;align-items:stretch!important;gap:14px!important;margin:0 auto!important}
  #player .audioSide,#player .audioList{
    height:calc(100% - 22px)!important;min-height:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
    scrollbar-width:thin!important;padding-bottom:14px!important;box-sizing:border-box!important;
    transform:translateY(12px)!important;
  }
  #player .audioList{display:flex!important;flex-direction:column!important;overflow:hidden!important}
  #player .audioList .trackList{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding-bottom:18px!important}

  /* Center: preserve P31 geometry. Move it; do NOT resize it. */
  #player .premiumAudioCenter{
    height:100%!important;min-height:0!important;overflow:visible!important;
    display:grid!important;grid-template-rows:minmax(0,1fr) 46px 66px!important;
    align-items:center!important;justify-items:center!important;padding:8px 10px 2px!important;
    box-sizing:border-box!important;transform:translateY(12px)!important;
  }
  #player .premiumDiscPlayer{
    grid-row:1!important;width:470px!important;height:470px!important;
    max-width:100%!important;max-height:none!important;min-width:0!important;min-height:0!important;
    aspect-ratio:1!important;margin:0 auto!important;align-self:center!important;justify-self:center!important;
    transform:none!important;flex:none!important;
  }
  #player .premiumTrackMeta{grid-row:2!important;width:100%!important;height:46px!important;min-height:46px!important;margin:0!important;padding:2px 0!important;overflow:hidden!important;align-self:center!important;position:relative!important;z-index:30!important}
  #player .premiumTrackMeta h3{font-size:21px!important;line-height:1.08!important;margin:0!important}
  #player .premiumTrackMeta p{font-size:10px!important;line-height:1.1!important;margin:3px 0 0!important}
  #player .premiumPlayControls{grid-row:3!important;height:64px!important;min-height:64px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;position:relative!important;z-index:35!important}
  #player .premiumPlayControls .roundControl{width:46px!important;height:46px!important;font-size:18px!important;flex:0 0 auto!important}
  #player .premiumPlayControls .roundControl.main{width:60px!important;height:60px!important;font-size:24px!important}

  /* P31/P32 fixed bottom dock: deliberately unchanged. */
  #player .audioToolbar{position:fixed!important;left:6px!important;right:6px!important;bottom:0!important;width:auto!important;max-width:none!important;height:64px!important;min-height:64px!important;margin:0!important;padding:6px!important;box-sizing:border-box!important;z-index:200!important;display:flex!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;border-radius:18px 18px 0 0!important}
  #player .audioToolbar .toolBtn{flex:1 0 78px!important;min-width:78px!important;max-width:none!important;padding:4px 3px!important}
}
@media (min-width:801px) and (max-height:760px){
  body.toolPageOpen #player.active{grid-template-rows:70px minmax(0,1fr)!important;padding-bottom:62px!important}
  #player .audioTopbar{height:70px!important;min-height:70px!important}
  #player .audioLogo{width:60px!important;height:60px!important}
  #player .premiumAudioCenter{grid-template-rows:minmax(0,1fr) 40px 56px!important;padding-top:4px!important;transform:translateY(10px)!important}
  /* P31 short-window diameter locked at 390px; no percentage-height shrink. */
  #player .premiumDiscPlayer{width:390px!important;height:390px!important;max-width:100%!important;max-height:none!important}
  #player .premiumTrackMeta{height:40px!important;min-height:40px!important}
  #player .premiumPlayControls{height:54px!important;min-height:54px!important}
  #player .premiumPlayControls .roundControl{width:40px!important;height:40px!important}
  #player .premiumPlayControls .roundControl.main{width:52px!important;height:52px!important}
  #player .audioToolbar{height:56px!important;min-height:56px!important}
  #player .audioSide,#player .audioList{height:calc(100% - 20px)!important;transform:translateY(10px)!important}
}
@media (max-width:800px){
  body.toolPageOpen #player.active{height:auto!important;min-height:100dvh!important;display:block!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0 8px 88px!important}
  #player .audioWorkspace{height:auto!important;overflow:visible!important;display:flex!important;flex-direction:column!important}
  #player .premiumAudioCenter{height:auto!important;min-height:0!important;overflow:visible!important;display:flex!important;flex-direction:column!important;padding:8px 4px 4px!important;transform:none!important}
  #player .premiumDiscPlayer{width:min(92vw,430px)!important;height:auto!important;aspect-ratio:1!important;margin:28px auto 0!important}
  #player .audioSide{max-height:210px!important;overflow-y:auto!important;transform:none!important}
  #player .audioList{height:auto!important;min-height:280px!important;max-height:58dvh!important;transform:none!important}
  #player .trackList{min-height:220px!important;overflow-y:auto!important;padding-bottom:24px!important}
  #player .audioToolbar{position:fixed!important;left:6px!important;right:6px!important;bottom:max(0px,env(safe-area-inset-bottom))!important;width:auto!important;margin:0!important;z-index:200!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important}
  #player .audioToolbar .toolBtn{flex:0 0 88px!important;min-width:88px!important}
}

/* Reels media manager — add/remove/reorder without replacing existing media. */
.reelMediaManager{margin-top:9px;min-width:0}.reelMediaEmpty{font-size:10px;color:#8fa4bd;padding:8px 2px}.reelMediaStrip{display:flex;gap:7px;overflow-x:auto;padding:3px 2px 7px;scrollbar-width:thin}.reelMediaThumb{position:relative;flex:0 0 74px;height:92px;border:1px solid #ffffff2b;border-radius:12px;overflow:hidden;background:#07101c;box-shadow:0 7px 18px #0004}.reelMediaThumb img,.reelMediaThumb video{width:100%;height:100%;object-fit:cover;display:block}.reelMediaNum{position:absolute;left:5px;top:5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#07101dcc;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center}.reelMediaDelete{position:absolute;right:4px;top:4px;width:23px;height:23px;border:0;border-radius:50%;background:#a51f37e8;color:#fff;font-size:17px;line-height:1;cursor:pointer}.reelMediaMove{position:absolute;left:4px;right:4px;bottom:4px;display:flex;justify-content:space-between;pointer-events:none}.reelMediaMove button{pointer-events:auto;width:24px;height:22px;border:0;border-radius:7px;background:#07101cce;color:#fff;font-size:17px;padding:0}.reelMediaMove button:disabled{opacity:.28}.reelMediaActions{display:flex;gap:7px}.reelMediaActions button{border:1px solid #ffffff28;background:#ffffff10;color:#fff;border-radius:10px;padding:7px 10px;font-size:10px}.reelMediaThumb[draggable=true]{cursor:grab}.reelMediaThumb:active{cursor:grabbing}
@media (min-width:801px){
  /* Bottom audio dock intentionally unchanged from P33. */
  #player .premiumAudioCenter{
    transform:translateY(20px)!important;
    overflow:visible!important;
  }
  #player .premiumDiscPlayer{
    width:500px!important;
    height:500px!important;
    max-width:none!important;
    max-height:none!important;
    flex:none!important;
  }
  /* Side boxes extend farther downward, while remaining aligned to the page grid. */
  #player .audioSide,#player .audioList{
    height:calc(100% - 18px)!important;
    transform:translateY(14px)!important;
  }

  /* Reels right toolbox is always a real grid column; uploaded media can never widen/push it. */
  #visual .studioWorkspace{
    width:100%!important;
    max-width:1600px!important;
    min-width:0!important;
    grid-template-columns:minmax(205px,.62fr) minmax(0,1.55fr) minmax(300px,.9fr)!important;
    overflow:hidden!important;
  }
  #visual .studioLeft,#visual .studioCenter,#visual .studioRight{min-width:0!important;box-sizing:border-box!important}
  #visual .studioRight{width:100%!important;max-width:100%!important;justify-self:stretch!important;overflow-y:auto!important;overflow-x:hidden!important}
  #visual .studioPanel,#visual .reelMediaManager{min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important}
}
@media (min-width:801px) and (max-height:760px){
  #player .premiumAudioCenter{transform:translateY(16px)!important}
  #player .premiumDiscPlayer{width:410px!important;height:410px!important}
  #player .audioSide,#player .audioList{height:calc(100% - 16px)!important;transform:translateY(12px)!important}
}

/* Compact launcher replaces the inline thumbnail strip so the right toolbox never shifts. */
.reelMediaManager{width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin-top:9px}
.reelMediaOpenBtn{width:100%;min-width:0;display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:9px;text-align:left;border:1px solid rgba(255,255,255,.20);background:linear-gradient(145deg,rgba(31,55,82,.72),rgba(9,20,35,.62));color:#fff;border-radius:15px;padding:9px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;overflow:hidden}
.reelMediaOpenBtn:hover{border-color:rgba(94,183,255,.55);background:linear-gradient(145deg,rgba(35,75,116,.78),rgba(11,29,50,.68))}
.reelMediaOpenIcon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#0c6dcc,#27399c);font-size:20px;box-shadow:0 0 18px rgba(34,132,225,.28)}
.reelMediaOpenText{min-width:0;display:block}.reelMediaOpenText b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reelMediaOpenText small{display:block;margin-top:3px;color:#aebfd2;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reelMediaOpenArrow{font-size:24px;color:#bfe4ff;text-align:right}

/* Full uploaded-media glass editor. */
.reelMediaOverlay{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:28px;background:rgba(1,8,16,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.reelMediaOverlay.open{display:flex}.reelMediaGlass{width:min(1050px,94vw);height:min(720px,88dvh);min-height:360px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid rgba(255,255,255,.28);border-radius:26px;background:linear-gradient(145deg,rgba(12,29,48,.91),rgba(5,14,25,.84));box-shadow:0 30px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(28px) saturate(125%);-webkit-backdrop-filter:blur(28px) saturate(125%);color:#fff}
.reelMediaGlassHead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 18px 13px;border-bottom:1px solid rgba(255,255,255,.11)}.reelMediaGlassHead h3{margin:0;font-size:21px}.reelMediaOverlayMeta{margin-top:3px;color:#a9bed3;font-size:10px}.reelMediaGlassClose{width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(255,255,255,.23);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:27px;line-height:1;cursor:pointer}.reelMediaGlassClose:hover{background:rgba(197,48,70,.72)}
.reelMediaOverlayGrid{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));grid-auto-rows:190px;gap:12px;align-content:start;scrollbar-width:thin}.reelMediaOverlayEmpty{grid-column:1/-1;display:grid;place-items:center;min-height:240px;color:#9eb2c7;font-size:12px}
.reelMediaOverlayCard{position:relative;min-width:0;border:1px solid rgba(255,255,255,.16);border-radius:17px;overflow:hidden;background:#07101c;box-shadow:0 12px 28px rgba(0,0,0,.32);cursor:grab;transition:transform .15s ease,border-color .15s ease}.reelMediaOverlayCard:active{cursor:grabbing}.reelMediaOverlayCard.dragOver{border-color:#4fb5ff;transform:scale(.98)}.reelMediaOverlayCard>img,.reelMediaOverlayCard>video{width:100%;height:145px;display:block;object-fit:cover;background:#050a10}.reelMediaOverlayTop{position:absolute;left:7px;right:7px;top:7px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.reelMediaOverlayTop span{min-width:25px;height:25px;padding:0 6px;border-radius:13px;background:rgba(3,12,22,.80);display:grid;place-items:center;font-size:10px;font-weight:800}.reelMediaOverlayTop button{pointer-events:auto;width:28px;height:28px;border:0;border-radius:50%;background:rgba(169,31,55,.92);color:#fff;font-size:20px;line-height:1;cursor:pointer}.reelMediaOverlayFoot{height:45px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px 7px;background:linear-gradient(180deg,rgba(10,22,37,.92),rgba(6,15,26,.98))}.reelMediaOverlayName{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;color:#c8d6e5}.reelMediaOverlayMove{display:flex;gap:4px}.reelMediaOverlayMove button{width:28px;height:28px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(255,255,255,.07);color:#fff;font-size:19px;line-height:1;cursor:pointer}.reelMediaOverlayMove button:disabled{opacity:.25;cursor:default}
.reelMediaGlassActions{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.11)}.reelMediaGlassActions button{border:1px solid rgba(255,255,255,.18);border-radius:12px;background:linear-gradient(145deg,#126cc4,#293b9c);color:#fff;padding:9px 15px;font-size:11px;font-weight:750;cursor:pointer}.reelMediaGlassActions button.danger{background:rgba(119,25,42,.75)}
body.reelMediaOverlayOpen{overflow:hidden!important}
@media(max-width:800px){.reelMediaOverlay{padding:10px}.reelMediaGlass{width:100%;height:88dvh;border-radius:20px}.reelMediaOverlayGrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:175px;padding:10px;gap:9px}.reelMediaOverlayCard>img,.reelMediaOverlayCard>video{height:132px}.reelMediaGlassActions{justify-content:stretch}.reelMediaGlassActions button{flex:1}.reelMediaOpenText small{white-space:normal;line-height:1.25}}
@media (min-width:801px){
  /* Move the WHOLE center assembly lower without changing circle diameter. */
  #player .premiumAudioCenter{
    transform:translateY(38px)!important;
  }
  /* Side toolboxes extend lower; bottom dock itself is untouched. */
  #player .audioSide,#player .audioList{
    height:calc(100% - 8px)!important;
    transform:translateY(16px)!important;
  }
}
@media (min-width:801px) and (max-height:760px){
  #player .premiumAudioCenter{transform:translateY(30px)!important}
  #player .audioSide,#player .audioList{height:calc(100% - 7px)!important;transform:translateY(14px)!important}
}

/* Uploaded Images editor must always render above every Fivehood page/tool. */
.reelMediaOverlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  isolation:isolate!important;
  transform:none!important;
}
.reelMediaOverlay.open{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.reelMediaGlass{position:relative!important;z-index:2147483001!important}
body.reelMediaOverlayOpen .reelMediaOverlay{z-index:2147483000!important}
@media (min-width:801px){
  /* P34→P35 was +18px (20→38). Add twice that movement (+36): 74px. */
  #player .premiumAudioCenter{
    transform:translateY(74px)!important;
  }
  /* P34→P35 side-box bottom advanced ~12px. Advance ~24px more,
     while keeping the fixed bottom dock itself completely unchanged. */
  #player .audioSide,#player .audioList{
    transform:translateY(20px)!important;
    height:calc(100% + 12px)!important;
  }
}
@media (min-width:801px) and (max-height:760px){
  /* P34→P35 short-window was +14px (16→30); add twice that (+28). */
  #player .premiumAudioCenter{transform:translateY(58px)!important}
  #player .audioSide,#player .audioList{transform:translateY(18px)!important;height:calc(100% + 7px)!important}
}
#player.active{
  position:fixed!important;
  isolation:isolate!important;
  background-image:none!important;
  background-color:#07101a!important;
}
#player.active::before{
  content:""!important;
  position:absolute!important;
  inset:-14px!important;
  z-index:-1!important;
  pointer-events:none!important;
  background-image:linear-gradient(180deg,rgba(2,8,18,.18),rgba(2,8,18,.32)),var(--player-art,url('../audioback.jpg?v=37'))!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  filter:blur(6px) saturate(.94)!important;
  transform:scale(1.025)!important;
  transform-origin:center!important;
}
/* Keep the artwork inside the headphone circle crisp. */
#player .premiumDisc,#player .albumDisc{
  filter:none!important;
}
/* Video editing moved into Video Player. Keep the old visual-video DOM internal only
   so older helper code cannot regress while the visible studio is Photo + Reels. */
#visual [data-vtab="video"],#visual .studioNavBtn[onclick*="vtab('video'"],#visual .studioGroup:has(+ .studioNavBtn[onclick*="vtab('video'"]){display:none!important}
#visual .studioPanel[data-studio-panel^="video-"]{display:none!important}
.playerEditorGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.playerEditSection{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);border-radius:16px;padding:12px;display:grid;gap:10px}.playerEditSection>b{font-size:13px}.playerEditSection label{display:grid;gap:5px;font-size:10px;color:#b9c9dc}.playerEditSection input,.playerEditSection select{width:100%;box-sizing:border-box}.audioEditStatus{font-size:10px;color:#9fc6e7;line-height:1.4}.playerEditSection .audioToolAction{display:block;text-align:center;cursor:pointer}
.localVideoEditPanel{overflow-y:auto!important}.videoEditSection{display:grid;gap:9px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}.videoEditSection>b{font-size:12px}.videoLocalLookGrid button.on{border-color:#52b8ff!important;box-shadow:0 0 0 1px rgba(82,184,255,.35) inset!important}.localVideoEditPanel .row{grid-template-columns:1fr 1fr}.localVideoEditPanel input,.localVideoEditPanel select{max-width:100%;box-sizing:border-box}
@media(max-width:800px){.playerEditorGrid{grid-template-columns:1fr}.localVideoEditPanel{padding-bottom:90px!important}}
#visual .visualModeChooser{display:none!important}
#visual.mode-photo .modeOnlyVideo,#visual.mode-photo .modeOnlyReels{display:none!important}
#visual.mode-reels .modeOnlyPhoto,#visual.mode-reels .modeOnlyVideo{display:none!important}
#visual.mode-video .modeOnlyPhoto,#visual.mode-video .modeOnlyReels{display:none!important}
#player .playerEditorUnified{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px}
#player .playerEditorUnified .playerEditSection:last-child{grid-column:1/-1}
#player .playerEditorInfo{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:start}
#player .playerEditorCover{display:grid;gap:6px;font-size:10px;color:#b9c9dc}
#player .playerEditCoverPreview{height:104px;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:#06162a center/cover no-repeat;display:grid;place-items:center;font-size:36px;color:#87a8c5}
#player .playerEditorCover>span{display:block;text-align:center;padding:8px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
#player .playerEditorFields{display:grid;gap:8px}
#player .playerEditorFields label{display:grid;gap:5px;font-size:10px;color:#b9c9dc}
#player .playerEditorFields input{width:100%;box-sizing:border-box;padding:9px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#06162a;color:#fff}
@media(max-width:800px){#player .playerEditorUnified{grid-template-columns:1fr}#player .playerEditorUnified .playerEditSection:last-child{grid-column:auto}#player .playerEditorInfo{grid-template-columns:92px minmax(0,1fr)}#player .playerEditCoverPreview{height:86px}}
\n\n/* ================================================================
   FIVEHOOD PROTOTYPE 41 — mobile video editing workspace
   Video stays pinned at the top while edit controls scroll below it.
   ================================================================ */
@media(max-width:800px){
  #localvideo.videoEditingMode .studioWorkspace{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    overflow:visible!important;
  }
  #localvideo.videoEditingMode .localVideoCenter{
    order:1!important;
    position:sticky!important;
    top:68px!important;
    z-index:29!important;
    width:100%!important;
    min-height:0!important;
    height:min(44dvh,380px)!important;
    padding:6px!important;
    border-radius:18px!important;
    background:rgba(4,9,20,.94)!important;
    box-shadow:0 14px 32px rgba(0,0,0,.48)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    backdrop-filter:blur(14px)!important;
  }
  #localvideo.videoEditingMode .localVideoStage{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:14px!important;
  }
  #localvideo.videoEditingMode #localVideo{
    width:100%!important;
    height:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
  }
  #localvideo.videoEditingMode .localVideoRight{
    order:2!important;
    display:block!important;
    width:100%!important;
    max-height:none!important;
    overflow:visible!important;
    padding:10px!important;
  }
  #localvideo.videoEditingMode .localVideoEditPanel{
    display:block!important;
    overflow:visible!important;
    padding-bottom:18px!important;
  }
  #localvideo.videoEditingMode .localVideoEditPanel .videoEditSection{
    scroll-margin-top:calc(min(44dvh,380px) + 82px);
  }
  #localvideo.videoEditingMode .studioLeft{
    order:3!important;
  }
  #localvideo.videoEditingMode .localVideoBottom{
    z-index:40!important;
  }
}
#player .syncLyricLine{height:0;max-width:min(620px,92vw);opacity:0;overflow:hidden;transition:.2s ease;text-align:center;color:#bfeaff;font-size:12px;font-weight:700;text-shadow:0 2px 12px #000;white-space:nowrap;text-overflow:ellipsis}
#player .syncLyricLine.show{height:20px;opacity:1;margin-top:-4px}
#player .p43SmartHero{display:grid;gap:3px;padding:12px;margin-bottom:12px;border:1px solid rgba(83,191,255,.24);border-radius:16px;background:linear-gradient(135deg,rgba(10,79,157,.24),rgba(31,216,233,.08))}
#player .p43SmartHero b{font-size:15px}#player .p43SmartHero span{font-size:10px;color:#9fc6df}
#player .p43InlineActions,#player .p43LyricsActions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
#player .p43LyricsActions>*{flex:1 1 160px;text-align:center}
#player .p43Results{display:grid;gap:6px;margin:9px 0}
#player .p43Result{display:grid;gap:2px;text-align:left;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#fff;border-radius:11px;padding:9px;cursor:pointer}
#player .p43Result span{font-size:9px;color:#9fb8cf}
#player .p43SyncedLyrics{max-height:210px;overflow:auto;display:grid;gap:3px;margin:10px 0;padding:8px;border-radius:14px;background:rgba(2,10,22,.48)}
#player .p43LyricLine{display:grid;grid-template-columns:48px 1fr;gap:8px;padding:7px 8px;border-radius:9px;cursor:pointer;color:#aebfd0}
#player .p43LyricLine time{font-size:9px;color:#67cfff}#player .p43LyricLine span{font-size:11px}
#player .p43LyricLine.active{background:rgba(24,156,245,.2);color:#fff;box-shadow:inset 2px 0 #27d8e9}
#player .p43Queue{display:grid;gap:6px;margin-top:10px}
#player .p43QueueRow{display:grid;grid-template-columns:1fr 34px;gap:6px;align-items:center}
#player .p43QueueRow>button:first-child{display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:center;text-align:left;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);color:#fff;border-radius:11px;padding:8px;cursor:pointer}
#player .p43QueueRow>button:first-child b{color:#64d8ff;font-size:10px}#player .p43QueueRow>button:first-child span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#player .p43Remove{height:34px;border-radius:10px;border:1px solid #ffffff1f;background:#ffffff0b;color:#fff;cursor:pointer}
#player .p43ToggleRow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:10px;padding:11px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04)}
#player .p43ToggleRow div{display:grid;gap:3px}#player .p43ToggleRow span{font-size:9px;color:#9fb8cf}
#player .p43Token{display:grid;grid-template-columns:1fr auto;gap:8px;margin:10px 0}
#player .p43Token input{min-width:0;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:#06162a;color:#fff;padding:10px}
#player .p43IdentifyStatus{margin-top:12px;padding:11px;border-radius:13px;background:rgba(4,15,31,.62);border:1px solid rgba(87,188,255,.16);line-height:1.5;color:#cfe7f7}
#player .p43Privacy{margin-top:10px!important;font-size:9px!important;color:#7891a8!important}
@media(max-width:800px){#player .syncLyricLine{font-size:11px;max-width:88vw}#player .p43Token{grid-template-columns:1fr}#player .p43SyncedLyrics{max-height:180px}}
#visual .photoControlGroup{margin:10px 0 12px;padding:10px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(4,13,23,.28)}
#visual .photoControlGroup h4{margin:0 0 8px;font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:#a9c6df}
#visual .photoCreativeDetails{margin:10px 0;border:1px solid rgba(255,255,255,.10);border-radius:13px;background:rgba(255,255,255,.035);overflow:hidden}
#visual .photoCreativeDetails summary{cursor:pointer;padding:10px 11px;color:#b9cada;font-size:10px;font-weight:750;list-style:none}
#visual .photoCreativeDetails summary::-webkit-details-marker{display:none}
#visual .photoCreativeDetails summary:after{content:'＋';float:right;color:#80c8ff}.photoCreativeDetails[open] summary:after{content:'−'}
#visual .photoCreativeDetails .photoDialTools{padding:0 9px 10px}

/* In Photo Studio a static image has nothing to Stop. The shared Stop
   control is marked modeOnlyReels and appears only when Reels Maker is active. */
#visual.mode-photo .studioBottom .modeOnlyReels{display:none!important}
#visual.mode-reels .studioBottom .modeOnlyReels{display:block!important}

/* Raise only the song metadata. P36/P37 circle, assembly position and fixed
   bottom toolbar geometry remain untouched. */
#player .premiumTrackMeta{transform:translateY(-12px)!important}
@media(max-width:800px){#player .premiumTrackMeta{transform:translateY(-8px)!important}}
/* Song title / artist / album live only inside the premium circle.
   Keep the legacy nodes in the DOM for existing JS bindings, but do not
   render the duplicate title/artist block below the circle. */
#player .premiumTrackMeta{visibility:hidden!important;pointer-events:none!important}

/* Saving song info now gives unmistakable feedback inside the open editor,
   on the Save button, in the existing toast, and with a subtle circle pulse. */
#player .playerEditInfoSaved{
  min-height:0;max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);
  border:1px solid rgba(88,224,180,.30);border-radius:11px;
  background:rgba(18,112,82,.16);color:#bfffe7;font-size:10px;font-weight:750;
  line-height:1.35;padding:0 10px;transition:.22s ease;
}
#player .playerEditInfoSaved.show{min-height:34px;max-height:60px;opacity:1;transform:none;padding:9px 10px;margin-top:2px}
#player #playerEditInfoSaveBtn.saved{box-shadow:0 0 0 1px rgba(112,255,207,.48) inset,0 0 22px rgba(63,226,176,.18)!important}
#player .premiumSongText.infoSavedPulse{animation:p45InfoSavedPulse .9s ease}
@keyframes p45InfoSavedPulse{0%{transform:scale(1)}38%{transform:scale(1.045);text-shadow:0 0 18px rgba(102,224,255,.92)}100%{transform:scale(1)}}
#visual .photoCapcutQuick{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:10px 0;padding:9px;border:1px solid rgba(94,197,255,.13);border-radius:13px;background:linear-gradient(135deg,rgba(21,89,138,.13),rgba(255,255,255,.025))}
#visual .photoCapcutQuick>span{font-size:9px;color:#89a8c1;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-right:2px}
#visual .photoCapcutQuick button,#visual .photoCurveGrid button{border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.055);color:#dcecff;padding:8px 9px;font-size:9px;font-weight:750;cursor:pointer}
#visual .photoCapcutQuick button.active,#visual .photoCurveGrid button.active{border-color:rgba(71,205,255,.55);background:rgba(25,156,231,.19);color:#fff;box-shadow:0 0 16px rgba(36,177,255,.11)}
#visual .photoProDetails .photoHslIntro{padding:0 10px 9px;color:#8fa9be;font-size:9px;line-height:1.45}
#visual .photoHslTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 9px 9px}
#visual .photoHslTabs .hslDot{position:relative;min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.04);color:#d9e7f3;padding:8px 4px 8px 16px;font-size:8px;cursor:pointer}
#visual .photoHslTabs .hslDot:before{content:'';position:absolute;left:6px;top:50%;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);background:#f44}
#visual .photoHslTabs .orange:before{background:#ff8a2a}#visual .photoHslTabs .yellow:before{background:#ffd82f}#visual .photoHslTabs .green:before{background:#46d369}#visual .photoHslTabs .cyan:before{background:#35dbe5}#visual .photoHslTabs .blue:before{background:#4c82ff}#visual .photoHslTabs .purple:before{background:#9d67ff}#visual .photoHslTabs .magenta:before{background:#f05fd2}
#visual .photoHslTabs .hslDot.active{border-color:rgba(97,209,255,.65);background:rgba(40,158,222,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
#visual .hslCurrentTools{padding:0 9px 10px}
#visual .photoCurveGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 9px 10px}
@media(max-width:800px){#visual .photoHslTabs{grid-template-columns:repeat(4,minmax(0,1fr))}#visual .photoControlGroup{padding:9px}#visual .dialToolGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#player .p47LyricsSaveStatus{min-height:0;margin-top:8px;padding:0 10px;border-radius:10px;color:#bfe9ff;font-size:10px;font-weight:800;opacity:0;transform:translateY(3px);transition:.18s ease}
#player .p47LyricsSaveStatus.show{min-height:30px;padding:8px 10px;opacity:1;transform:none;background:rgba(31,142,91,.18);border:1px solid rgba(95,231,164,.28)}
#player #p47SaveLyricsBtn.saved{box-shadow:0 0 0 2px rgba(86,226,157,.24) inset}

/* Eight-card orbit: keep the far opposite card faintly visible instead of stacking at center. */
#home .homeCard[data-orbit="-4"],#home .homeCard[data-orbit="4"]{--orbit-x:0px;--orbit-z:-260px;--orbit-scale:.46;--orbit-opacity:.16;--orbit-rotate:0deg;--orbit-zindex:2}

@media(max-width:800px){
  #localvideo.videoEditingMode{overflow:hidden!important}
  #localvideo.videoEditingMode .studioWorkspace.localVideoWorkspace{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(50%,58%) minmax(0,1fr)!important;
    gap:7px!important;
    height:calc(100dvh - 142px)!important;
    min-height:0!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }
  #localvideo.videoEditingMode .localVideoCenter{
    grid-row:1!important;order:1!important;position:relative!important;top:auto!important;
    width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
    padding:5px!important;border-radius:16px!important;overflow:hidden!important;
  }
  #localvideo.videoEditingMode .localVideoStage{width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;border-radius:12px!important}
  #localvideo.videoEditingMode #localVideo{width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain!important}
  #localvideo.videoEditingMode .localVideoRight{
    grid-row:2!important;order:2!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;padding:9px 10px 90px!important;
  }
  #localvideo.videoEditingMode .localVideoEditPanel{display:block!important;height:auto!important;overflow:visible!important;padding-bottom:24px!important}
  #localvideo.videoEditingMode .localVideoEditPanel .videoEditSection{scroll-margin-top:8px!important}
  #localvideo.videoEditingMode .studioLeft{display:none!important}
  #localvideo.videoEditingMode .localVideoBottom{position:fixed!important;left:6px!important;right:6px!important;bottom:max(6px,env(safe-area-inset-bottom))!important;z-index:60!important}
}

#units.unitConverterView{overflow-y:auto}
#units .unitConverterShell{width:min(1180px,96vw);margin:18px auto 110px;display:grid;gap:14px}
#units .unitCategoryBar{display:flex;gap:8px;overflow-x:auto;padding:6px 3px 10px;scrollbar-width:thin}
#units .unitCategoryBar button{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:10px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:rgba(8,25,44,.58);color:#d9e9f7;font-size:11px;font-weight:800;backdrop-filter:blur(14px)}
#units .unitCategoryBar button span{font-size:16px;color:#65c7ff}#units .unitCategoryBar button.active{background:linear-gradient(135deg,rgba(19,91,166,.78),rgba(14,139,174,.58));border-color:rgba(112,207,255,.58);color:#fff}
#units .unitConverterCard{padding:clamp(16px,3vw,34px);border-radius:28px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,rgba(7,22,40,.82),rgba(10,31,52,.68));box-shadow:0 24px 60px rgba(0,0,0,.28);backdrop-filter:blur(24px);color:#fff}
#units .unitConverterHead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}#units .unitConverterHead>div{display:flex;align-items:center;gap:12px}#units #unitCategoryIcon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:rgba(61,173,240,.15);border:1px solid rgba(101,199,255,.28);font-size:24px;color:#71d1ff}#units .unitConverterHead b{display:block;font-size:20px}#units .unitConverterHead small{display:block;color:#9eb8cd;font-size:10px;margin-top:4px}#units .unitConverterHead>button{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;border-radius:12px;padding:9px 13px;font-weight:800}
#units .unitTwoSides{display:grid;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);gap:12px;align-items:end}#units .unitSide{display:grid;gap:8px}#units .unitSide label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#9fb8cc;font-weight:800}#units .unitSide input{width:100%;box-sizing:border-box;border:1px solid rgba(114,205,255,.30);background:rgba(1,10,20,.55);color:#fff;border-radius:16px;padding:16px;font-size:clamp(22px,4vw,38px);font-weight:800;outline:none}#units .unitSide input:focus{border-color:#62c8ff;box-shadow:0 0 0 3px rgba(64,178,241,.12)}#units .unitSide select{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.15);background:#0b2136;color:#fff;border-radius:13px;padding:12px;font-size:12px}#units .unitEquals{align-self:center;text-align:center;font-size:24px;color:#6fcfff;font-weight:900}
#units .unitFormula{margin-top:14px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.18);color:#a9c9df;font-size:11px;text-align:center}
#units .goldPriceBox{margin-top:18px;padding:16px;border-radius:18px;border:1px solid rgba(240,197,75,.24);background:linear-gradient(135deg,rgba(106,77,11,.18),rgba(20,31,43,.34))}#units .goldPriceBox.hidden{display:none}#units .goldPriceHead{display:flex;justify-content:space-between;gap:12px;align-items:start}#units .goldPriceHead b{display:block;color:#ffe49a}#units .goldPriceHead span{display:block;color:#b9c6cf;font-size:10px;margin-top:4px;max-width:600px}#units .goldPriceHead select{background:#182535;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:8px}
#units .goldPriceGrid{display:grid;grid-template-columns:1fr 34px 1fr;gap:10px;align-items:end;margin-top:14px}#units .goldPriceGrid label{display:grid;gap:6px;font-size:10px;color:#c9d6df}#units .goldPriceGrid input,#units .goldPriceGrid output{display:block;box-sizing:border-box;width:100%;min-height:48px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:#fff;font-size:18px;font-weight:800}#units .goldPriceArrow{text-align:center;padding-bottom:13px;color:#f0c64e;font-size:20px}#units .goldPriceBox>small{display:block;color:#9faeb9;margin-top:10px;font-size:9px}
#units .unitQuickNote{padding:12px 15px;border-radius:15px;background:rgba(7,23,40,.55);border:1px solid rgba(255,255,255,.12);color:#a9c2d6;font-size:10px;line-height:1.6;backdrop-filter:blur(12px)}#units .unitQuickNote b{color:#fff}
@media(max-width:700px){#units .unitConverterShell{width:94vw;margin-top:10px}#units .unitConverterCard{padding:14px;border-radius:20px}#units .unitConverterHead{margin-bottom:15px}#units .unitConverterHead small{max-width:220px}#units .unitTwoSides{grid-template-columns:1fr;gap:8px}#units .unitEquals{font-size:18px;line-height:1}#units .unitSide input{font-size:26px;padding:13px}#units .goldPriceHead{align-items:center}#units .goldPriceGrid{grid-template-columns:1fr;gap:7px}#units .goldPriceArrow{padding:0;transform:rotate(90deg)}#units .unitCategoryBar button{padding:9px 11px;font-size:10px}}


/* Prototype 52: restore the original pastel translucent home carousel glass.
   Prototype 51's shared dark glass override had covered each card's original
   colored pseudo-element. Keep the existing per-card glass material instead. */

/* Unit Converter has three stacked sections, not the two-row editor grid.
   The editor grid was squeezing the category tabs into a few pixels. */
body.toolPageOpen #units.view.active {
  display:block !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:0 22px 22px !important;
  -webkit-overflow-scrolling:touch;
}
#units .unitConverterShell {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch;
  gap:14px;
  height:auto !important;
  min-height:0;
  width:min(1180px,96vw);
  margin:18px auto 70px;
}
#units .unitCategoryBar {
  display:flex !important;
  flex:0 0 auto !important;
  min-height:58px;
  max-height:none !important;
  align-items:center;
  gap:8px;
  padding:5px 3px 11px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
}
#units .unitCategoryBar button {
  flex:0 0 auto !important;
  min-height:41px;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
}
#units .unitConverterCard {flex:0 0 auto;min-height:0}
/* Smaller input boxes, not the giant desktop fields from Prototype 50. */
#units .unitTwoSides {gap:10px;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)}
#units .unitSide {gap:6px}
#units .unitSide input {
  min-height:58px;
  max-height:64px;
  padding:10px 13px !important;
  font-size:clamp(21px,2.4vw,29px);
  border-radius:13px;
}
#units .unitSide select {min-height:39px;padding:8px 10px !important;font-size:12px}
#units .unitConverterHead {margin-bottom:17px}
@media(max-width:700px) {
  body.toolPageOpen #units.view.active {padding:0 10px 24px !important}
  #units .unitConverterShell {width:100%;margin:10px auto 45px;gap:10px}
  #units .unitCategoryBar {min-height:52px;padding:3px 2px 8px}
  #units .unitCategoryBar button {min-height:37px}
  #units .unitTwoSides {grid-template-columns:1fr;gap:8px}
  #units .unitSide input {min-height:50px;max-height:56px;font-size:23px;padding:8px 12px !important}
  #units .unitSide select {min-height:38px}
}


/* ==============================================================
   FIVEHOOD PROTOTYPE 52 — CONVERTER CATEGORY SIDEBAR
   Desktop: converter at left, vertically stacked category options at right.
   The full page scrolls down to reveal remaining categories (no clipped tabs).
   Mobile: converter first, category box below for usable width.
   =============================================================== */
body.toolPageOpen #units.view.active{
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  height:100%!important;
  -webkit-overflow-scrolling:touch;
}
#units .unitConverterShell{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(220px,23vw,290px)!important;
  grid-template-areas:"converter categories" "note categories"!important;
  gap:16px!important;
  align-items:start!important;
  width:min(1320px,96vw)!important;
  margin:18px auto 120px!important;
  height:auto!important;
}
#units .unitConverterCard{grid-area:converter;min-width:0;align-self:start}
#units .unitQuickNote{grid-area:note;min-width:0}
#units .unitCategorySidebar{
  grid-area:categories;min-width:0;align-self:start;
  padding:17px 13px 19px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(8,30,57,.56),rgba(20,50,81,.40));
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 14px 36px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.16);
}
#units .unitCategorySidebar h3{margin:0 6px 3px;font-size:16px;color:#fff}
#units .unitCategorySidebar p{margin:0 6px 13px;font-size:11px;color:#c4d9ee}
#units .unitCategorySidebar .unitCategoryBar{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:8px!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  padding:0!important;
  scrollbar-width:auto;
}
#units .unitCategorySidebar .unitCategoryBar button{
  display:flex!important;flex:0 0 auto!important;
  width:100%!important;min-height:44px!important;
  white-space:normal!important;
  justify-content:flex-start;
  text-align:left;
  padding:10px 12px!important;
  font-size:12px!important;
  line-height:1.25!important;
  border-radius:12px!important;
}
#units .unitCategorySidebar .unitCategoryBar button.active{
  box-shadow:inset 0 0 0 1px rgba(126,215,255,.22),0 5px 16px rgba(2,19,45,.18);
}
@media(max-width:760px){
  #units .unitConverterShell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"converter" "categories" "note"!important;
    gap:12px!important;
    width:100%!important;
    margin:10px auto 90px!important;
  }
  #units .unitCategorySidebar{padding:14px 12px;border-radius:18px}
  #units .unitCategorySidebar .unitCategoryBar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #units .unitCategorySidebar .unitCategoryBar button{min-width:0!important;min-height:45px!important;font-size:11px!important;padding:9px!important}
}
@media(max-width:370px){
  #units .unitCategorySidebar .unitCategoryBar{grid-template-columns:1fr!important}
}


/* ==============================================================
   PROTOTYPE 53 — COMPACT, INDEPENDENTLY SCROLLING CATEGORY PANEL
   The converter stays on the LEFT, categories on the RIGHT.
   Only the list inside the sidebar scrolls, not the whole page.
   =============================================================== */
#units .unitConverterShell{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(235px,24vw,310px)!important;
  grid-template-areas:"converter categories" "note categories"!important;
  align-items:start!important;
  gap:14px!important;
  margin:18px auto 26px!important;
  height:auto!important;
}
#units .unitConverterCard{grid-area:converter!important;min-width:0}
#units .unitCategorySidebar{
  grid-area:categories!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  height:min(560px,calc(100dvh - 188px))!important;
  min-height:300px!important;
  max-height:560px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding:14px 12px 12px!important;
}
#units .unitCategorySidebar h3,
#units .unitCategorySidebar p{flex:0 0 auto!important}
#units .unitCategorySidebar .unitCategoryBar{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  align-items:stretch!important;
  gap:7px!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(161,214,255,.68) rgba(255,255,255,.07);
  padding:2px 5px 4px 2px!important;
}
#units .unitCategorySidebar .unitCategoryBar button{
  flex:0 0 45px!important;
  min-height:45px!important;
  width:100%!important;
  box-sizing:border-box!important;
}
#units .unitCategorySidebar .unitCategoryBar::-webkit-scrollbar{width:7px}
#units .unitCategorySidebar .unitCategoryBar::-webkit-scrollbar-thumb{background:rgba(161,214,255,.55);border-radius:9px}
#units .unitCategorySidebar .unitCategoryBar::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:9px}
@media(max-width:760px){
  #units .unitConverterShell{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"converter" "categories" "note"!important;
    margin:10px auto 25px!important;
  }
  #units .unitCategorySidebar{
    height:clamp(260px,42dvh,455px)!important;
    min-height:260px!important;
    max-height:455px!important;
  }
  #units .unitCategorySidebar .unitCategoryBar{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
  }
}

/* PROTOTYPE 53 — TRANSLUCENT GLASS HOME CARDS
   The prior colored pseudo-layers were too opaque. These light glass
   tints let the scenic wallpaper show through without darkening cards. */
#home .homeCard::before{
  background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(234,245,255,.23))!important;
  border:1px solid rgba(255,255,255,.67)!important;
  -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
  backdrop-filter:blur(12px) saturate(120%)!important;
  box-shadow:0 14px 28px rgba(6,23,48,.14),inset 0 1px 0 rgba(255,255,255,.65)!important;
}
#home .homeCard.c1::before{background:linear-gradient(150deg,rgba(255,247,225,.41),rgba(255,241,223,.23))!important}
#home .homeCard.c2::before{background:linear-gradient(150deg,rgba(234,246,255,.42),rgba(216,239,255,.23))!important}
#home .homeCard.c3::before{background:linear-gradient(150deg,rgba(235,255,243,.40),rgba(219,248,236,.23))!important}
#home .homeCard.c4::before{background:linear-gradient(150deg,rgba(255,240,233,.41),rgba(255,225,216,.23))!important}
#home .homeCard.c5::before{background:linear-gradient(150deg,rgba(247,238,255,.41),rgba(233,220,255,.23))!important}
#home .homeCard.c6::before{background:linear-gradient(150deg,rgba(255,237,243,.40),rgba(255,221,233,.23))!important}
#home .homeCard.c7::before{background:linear-gradient(150deg,rgba(236,248,255,.40),rgba(217,235,255,.23))!important}
#home .homeCard.c8::before{background:linear-gradient(150deg,rgba(246,249,255,.40),rgba(227,238,255,.23))!important}
#home .homeCard.is-center::before{
  box-shadow:0 22px 42px rgba(7,22,43,.17),0 0 0 2px rgba(255,255,255,.20),inset 0 1px 0 rgba(255,255,255,.75)!important;
}

/* Prototype 54 — brighter, more transparent homepage glass.
   Preserve the carousel's geometry and the clear foreground labels. */
#home .homeCard::before {
  background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(235,247,255,.075))!important;
  border-color:rgba(255,255,255,.56)!important;
  backdrop-filter:blur(7px) saturate(108%)!important;
  -webkit-backdrop-filter:blur(7px) saturate(108%)!important;
  box-shadow:0 12px 26px rgba(2,18,36,.13),inset 0 1px 0 rgba(255,255,255,.48)!important;
}
#home .homeCard.c1::before,#home .homeCard.c2::before,
#home .homeCard.c3::before,#home .homeCard.c4::before,
#home .homeCard.c5::before,#home .homeCard.c6::before,
#home .homeCard.c7::before,#home .homeCard.c8::before {
  background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(236,247,255,.075))!important;
}
#home .homeCard.is-center::before {
  box-shadow:0 20px 38px rgba(2,18,36,.19),0 0 0 2px rgba(255,255,255,.19),inset 0 1px 0 rgba(255,255,255,.58)!important;
}

/* Prototype55: YouTube library controls, responsive without affecting other tools */
#youtube .ytNow{margin:12px 0 8px;color:#eaf5ff;font-weight:650;font-size:13px;overflow-wrap:anywhere}
#youtube .ytPlayerActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 16px}
#youtube .ytPlayerActions button,#youtube .ytRemove{border:1px solid rgba(255,255,255,.24);border-radius:11px;padding:9px 12px;background:rgba(12,44,75,.58);color:#fff;cursor:pointer}
#youtube .ytRepeatLabel{display:flex;align-items:center;gap:6px;color:#eaf5ff;font-size:12px}
#youtube .ytListHeader{display:flex;justify-content:space-between;gap:8px;color:#fff;margin:6px 0 9px;font-size:13px}
#youtube .ytListHeader span{opacity:.75}
#youtube .ytList{max-height:260px;overflow:auto;overscroll-behavior:contain;padding:4px 2px;display:grid;gap:7px}
#youtube .ytSavedRow{display:flex;align-items:center;gap:8px;min-width:0}
#youtube .ytSavedPlay{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;border:1px solid rgba(255,255,255,.20);border-radius:11px;padding:11px 12px;background:rgba(12,44,75,.48);color:#fff;cursor:pointer}
#youtube .ytRemove{flex:0 0 36px;padding:9px;font-size:17px}
#youtube .ytEmpty{color:#c4d6e6;font-size:12px;padding:12px}
#youtube .ytSmall{font-size:11px;color:#d3e1ed;line-height:1.5}
#youtube .ytSmall a{color:#a6dfff}
#youtube #ytVideoTitle{margin-top:8px}
@media(max-width:760px){#youtube .ytPlayerActions{gap:6px}#youtube .ytPlayerActions button{padding:8px;font-size:11px}#youtube .ytList{max-height:190px}}

/* Prototype 56 — richer, darker blue glass on the homepage carousel.
   The ocean wave remains visible, while card headings stay readable. */
#home .homeCard::before,
#home .homeCard.c1::before,#home .homeCard.c2::before,
#home .homeCard.c3::before,#home .homeCard.c4::before,
#home .homeCard.c5::before,#home .homeCard.c6::before,
#home .homeCard.c7::before,#home .homeCard.c8::before {
  background:linear-gradient(145deg,rgba(11,39,76,.67),rgba(21,63,104,.53))!important;
  border:1px solid rgba(224,244,255,.60)!important;
  backdrop-filter:blur(15px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(15px) saturate(125%)!important;
  box-shadow:0 15px 32px rgba(0,13,33,.29),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
#home .homeCard h2{color:#fff!important;text-shadow:0 1px 3px rgba(0,10,27,.50)!important}
#home .homeCard p{color:#e3f0fc!important;text-shadow:0 1px 2px rgba(0,10,27,.44)!important}
#home .homeCard.is-center::before{
  box-shadow:0 22px 44px rgba(0,14,36,.35),0 0 0 2px rgba(228,246,255,.28),inset 0 1px 0 rgba(255,255,255,.34)!important;
}

/* Prototype57 — category tools LEFT, converter RIGHT; mobile tools ABOVE. */
#units .unitConverterShell{
  grid-template-columns:clamp(235px,24vw,310px) minmax(0,1fr)!important;
  grid-template-areas:"categories converter" "categories note"!important;
}
@media(max-width:760px){
  #units .unitConverterShell{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"categories" "converter" "note"!important;
  }
}
/* Keep YouTube embed fallback clearly accessible. */
#youtube .ytExternalRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0;color:#dce9ff;font-size:12px}
#youtube .ytExternalRow a:not([hidden]){display:inline-flex;padding:9px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.35);background:rgba(30,84,143,.60);color:#fff;text-decoration:none;font-weight:700}
#youtube .ytExternalRow a:hover{background:rgba(40,108,181,.75)}
#youtube .ytExternalRow [hidden]{display:none!important}
#youtube #ytEmbedHint{line-height:1.5}

/* ================= VERSION 58 — YOUTUBE THEATER =================
   Keep the official iframe unobstructed; our optional shortcuts float
   only at the upper edge, away from YouTube's own bottom controls. */
#youtube.ytCinemaView .ytCinemaWorkspace{
  position:relative!important;display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;gap:0!important;
  width:100%!important;max-width:1600px!important;min-height:0!important;
}
#youtube .ytCinemaCenter{
  min-width:0!important;min-height:0!important;height:100%!important;
  width:100%!important;box-sizing:border-box!important;
  display:flex!important;flex-direction:column!important;
  justify-content:stretch!important;align-items:stretch!important;
  gap:10px!important;padding:12px clamp(10px,2vw,24px)!important;
  overflow:hidden!important;
}
#youtube .ytQuickOpen{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  width:100%;max-width:1250px;margin:0 auto;
}
#youtube .ytUrlLabel{font-size:11px;color:#d3eaff;white-space:nowrap;font-weight:700}
#youtube .ytQuickOpen input{
  flex:1 1 auto;min-width:0;min-height:42px;margin:0!important;
  border-radius:12px;border:1px solid rgba(255,255,255,.30);
  background:rgba(5,21,43,.74);color:#fff;padding:9px 12px;
}
#youtube .ytQuickOpen button,#youtube .ytDrawerHeader button,
#youtube .ytDrawerTabs button,#youtube .ytSettingsActions button{
  min-height:40px;padding:8px 13px;border-radius:12px;
  border:1px solid rgba(220,240,255,.28);color:#fff;
  background:linear-gradient(135deg,rgba(24,89,151,.78),rgba(16,46,86,.82));
  cursor:pointer;white-space:nowrap;
}
#youtube .ytTheaterArea{
  flex:1 1 auto;min-height:0;min-width:0;display:flex;
  align-items:center;justify-content:center;
}
#youtube .ytScreenShell{
  width:min(100%,calc((100dvh - 292px)*16/9));
  max-height:100%;aspect-ratio:16/9;
  position:relative;overflow:hidden;border-radius:17px;
  background:#030712;box-shadow:0 18px 50px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.20);
}
#youtube #youtubeBox.ytVideoFrame{
  width:100%!important;height:100%!important;aspect-ratio:auto!important;
  display:grid;place-items:center;border-radius:0!important;
  overflow:hidden;background:#030712;
}
#youtube #youtubeBox iframe{width:100%!important;height:100%!important;display:block!important}
#youtube .ytFloatingControls{
  position:absolute;z-index:6;left:50%;top:12px;
  transform:translate(-50%,-8px);display:flex;align-items:center;justify-content:center;
  gap:6px;max-width:calc(100% - 86px);width:max-content;
  padding:7px;border:1px solid rgba(240,250,255,.32);
  border-radius:15px;background:rgba(9,27,55,.67);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 10px 28px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .20s ease,transform .20s ease,visibility .20s;
}
#youtube .ytScreenShell:hover .ytFloatingControls,
#youtube .ytScreenShell.ytControlsVisible .ytFloatingControls,
#youtube .ytFloatingControls:focus-within{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
#youtube .ytFloatingControls button{
  border:0;background:rgba(255,255,255,.10);border-radius:9px;
  color:#fff;min-height:34px;padding:6px 10px;cursor:pointer;
  white-space:nowrap;font-size:12px;
}
#youtube .ytFloatingControls button:hover{background:rgba(72,146,219,.45)}
#youtube .ytFloatingControls .ytRepeatLabel{
  color:#fff;font-size:11px;white-space:nowrap;padding:0 6px;
}
#youtube .ytControlsToggle{
  position:absolute;right:10px;top:10px;z-index:7;
  width:37px;height:36px;border-radius:11px;
  border:1px solid rgba(240,250,255,.40);background:rgba(8,29,59,.72);
  color:#fff;font-size:21px;line-height:1;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#youtube .ytUnderScreen{
  flex:0 0 auto;width:100%;max-width:1250px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:32px;
}
#youtube .ytUnderScreen .ytNow{
  margin:0!important;min-width:0;flex:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-size:12px;
}
#youtube .ytUnderScreen .ytExternalRow{
  margin:0!important;flex:0 1 auto;max-width:58%;min-width:0;
}
#youtube .ytUnderScreen #ytEmbedHint{font-size:11px;max-width:460px}
#youtube .ytDrawer{
  position:absolute!important;right:12px;top:10px;bottom:10px;z-index:40;
  width:min(350px,calc(100% - 30px));height:auto!important;
  display:flex;flex-direction:column;gap:11px;
  padding:15px;box-sizing:border-box;
  background:linear-gradient(145deg,rgba(8,28,57,.97),rgba(12,32,59,.96));
  border:1px solid rgba(255,255,255,.27);
  box-shadow:-15px 10px 40px rgba(0,0,0,.38);
  transform:translateX(calc(100% + 32px));opacity:0;visibility:hidden;
  pointer-events:none;transition:transform .23s ease,opacity .23s ease,visibility .23s;
  overflow:hidden;
}
#youtube .ytDrawer.ytDrawerOpen{
  transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto;
}
#youtube .ytDrawerHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}
#youtube .ytDrawerHeader strong{font-size:17px}
#youtube .ytDrawerHeader button{font-size:23px;padding:0;width:38px}
#youtube .ytDrawerTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
#youtube .ytDrawerTabs button{font-size:10px;padding:6px 3px;min-height:35px}
#youtube #ytLibraryPane,#youtube #ytSettingsPane{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain}
#youtube #ytLibraryPane[hidden],#youtube #ytSettingsPane[hidden]{display:none!important}
#youtube .ytList{max-height:none!important}
#youtube .ytInputTitle{display:block;margin:6px 0;font-size:12px;color:#e5f1ff}
#youtube #ytVideoTitle{width:100%;box-sizing:border-box}
#youtube .ytSettingsActions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#youtube .ytSettingsActions button{white-space:normal;font-size:11px}
#youtube .ytBottomRail{flex:0 0 auto!important}
@media(max-width:800px){
  body.toolPageOpen #youtube.ytCinemaView.active{display:block!important;overflow-y:auto!important;padding:0 8px 16px!important}
  #youtube .ytCinemaWorkspace{display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important}
  #youtube .ytCinemaCenter{height:auto!important;min-height:0!important;padding:9px!important;gap:8px!important;overflow:visible!important}
  #youtube .ytQuickOpen{gap:5px;flex-wrap:wrap}
  #youtube .ytUrlLabel{display:none}
  #youtube .ytQuickOpen input{flex:1 1 52%;min-height:39px}
  #youtube .ytQuickOpen button{font-size:11px;padding:7px 9px;min-height:39px}
  #youtube .ytTheaterArea{width:100%;min-height:0!important;flex:none!important}
  #youtube .ytScreenShell{width:100%!important;max-height:none!important;aspect-ratio:16/9}
  #youtube .ytFloatingControls{left:7px;right:48px;top:7px;max-width:none;width:auto;transform:translateY(-6px);padding:5px;gap:3px;justify-content:flex-start;overflow-x:auto}
  #youtube .ytScreenShell:hover .ytFloatingControls,#youtube .ytScreenShell.ytControlsVisible .ytFloatingControls{transform:translateY(0)}
  #youtube .ytFloatingControls button{padding:5px 7px;min-height:29px;font-size:13px}
  #youtube .ytFloatingControls button span{display:none}
  #youtube .ytFloatingControls .ytRepeatLabel{font-size:10px;padding:0 3px}
  #youtube .ytControlsToggle{top:7px;right:7px;width:33px;height:31px}
  #youtube .ytUnderScreen{display:block;min-height:0}
  #youtube .ytUnderScreen .ytNow{white-space:normal;font-size:11px}
  #youtube .ytUnderScreen .ytExternalRow{max-width:100%;margin-top:4px!important}
  #youtube .ytDrawer{position:fixed!important;left:8px;right:8px;top:auto;bottom:74px;
    width:auto;height:min(65dvh,540px)!important;max-height:65dvh;
    transform:translateY(calc(100% + 95px));border-radius:19px;z-index:100}
  #youtube .ytDrawer.ytDrawerOpen{transform:translateY(0)}
  #youtube .ytBottomRail{position:sticky!important;bottom:5px!important;z-index:55!important}
}
@media(prefers-reduced-motion:reduce){#youtube .ytDrawer,#youtube .ytFloatingControls{transition:none!important}}

/* Version 60 — unified, viewport-wide Audio Studio dialog backdrops.
   These dialogs are portaled to <body>, outside transformed player panels. */
body > .audioToolOverlay,
body > .songInfoOverlay,
body > .eqOverlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:10040!important;
  display:grid!important;
  place-items:center!important;
  padding:20px 12px!important;
  box-sizing:border-box!important;
  background:rgba(1,8,20,.54)!important;
  -webkit-backdrop-filter:blur(17px) saturate(75%)!important;
  backdrop-filter:blur(17px) saturate(75%)!important;
  pointer-events:auto!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
body > .audioToolOverlay.hidden,
body > .songInfoOverlay.hidden,
body > .eqOverlay.hidden{display:none!important}
body > .audioToolOverlay .audioToolCard,
body > .songInfoOverlay .songInfoCard,
body > .eqOverlay .eqCard{
  position:relative!important;
  width:min(560px,94vw)!important;
  max-height:min(80dvh,720px)!important;
  overflow-y:auto!important;
  pointer-events:auto!important;
  background:linear-gradient(155deg,rgba(9,28,54,.92),rgba(3,13,29,.91))!important;
  border:1px solid rgba(154,211,247,.38)!important;
  border-radius:24px!important;
  box-shadow:0 30px 85px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.10)!important;
  -webkit-backdrop-filter:blur(20px) saturate(120%)!important;
  backdrop-filter:blur(20px) saturate(120%)!important;
}
@media(max-width:800px){
  body > .audioToolOverlay,body > .songInfoOverlay,body > .eqOverlay{padding:14px 10px 22px!important}
  body > .audioToolOverlay .audioToolCard,body > .songInfoOverlay .songInfoCard,body > .eqOverlay .eqCard{max-height:84dvh!important}
}

/* Prototype71: media controls, pinch zoom and symmetric headphone earcups */
#photoPane{position:relative}#photoPane #photoCanvas{touch-action:none}
.fhMediaClose,.fhVideoFullscreen{position:absolute;top:12px;right:12px;z-index:45;border:1px solid #ffffff99;border-radius:999px;background:#122b42e8;color:#fff;font-size:18px;font-weight:700;cursor:pointer;padding:8px 13px}
#photoPane:not(:has(canvas.hasMedia)) .fhMediaClose{display:none}
#videoPane{position:relative}.fhVideoFullscreen{font-size:13px}
.fhRemoveMusic{border:1px solid #ffb2b2;background:#632b3b;color:#fff;border-radius:9px;padding:8px 12px;margin:7px 0;cursor:pointer}
.fhWatermarkControls{display:grid;gap:6px;padding:12px;border:1px solid #ffffff35;border-radius:12px;margin:12px 0}.fhWatermarkControls label{font-size:13px}.fhWatermarkControls input,.fhWatermarkControls select{max-width:100%}
#player .discEar.left,#player .discEar.right{background:linear-gradient(90deg,#171c22 0%,#353b43 48%,#10151a 100%)!important;filter:drop-shadow(-5px 3px 3px rgba(0,0,0,.30))!important}