/* Brand palette lifted from the logo: deep navy, electric blue, cyan. */
:root{
  --navy-900:#03081c;
  --navy-800:#071130;
  --navy-700:#0c1c48;
  --line:#17275a;
  --brand-deep:#001B59;
  --brand-blue:#1553E6;
  --brand-cyan:#00CEFF;
  --text:#eaf2ff;
  --muted:#8ba0c9;
  --ok:#37d9a8;
  --warn:#ffb45c;
  --radius:14px;
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --grad:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan));
}
*{box-sizing:border-box}
body{margin:0;background:var(--navy-900);color:var(--text);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(1.7rem,3.6vw,2.7rem)}
a{color:var(--brand-cyan)}
img{max-width:100%;display:block}
code{background:var(--navy-700);padding:.1em .4em;border-radius:6px;font-size:.9em}

.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--brand-cyan);color:#00142b;padding:.5rem 1rem;border-radius:8px;z-index:20}
:focus-visible{outline:2px solid var(--brand-cyan);outline-offset:3px}

.site-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--navy-800),var(--navy-900))}
.site-head .logo{height:34px;width:auto}
.site-nav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.site-nav a{text-decoration:none;color:var(--muted);font-size:.93rem}
.site-nav a:hover,.site-nav a.is-active{color:var(--text)}
.lang{background:var(--navy-700);border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:.3rem .5rem;font:inherit;font-size:.85rem}
.inline{display:inline}

main{padding:clamp(1.25rem,3.5vw,2.5rem) clamp(1rem,4vw,2.5rem);max-width:1180px;margin:0 auto}
.narrow{max-width:440px;margin:0 auto}
.wide{max-width:1040px;margin:0 auto}
.center{text-align:center}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--brand-cyan);margin:0 0 .5rem}
.lede{color:var(--muted);max-width:58ch}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:.85rem}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.btn{display:inline-block;background:var(--grad);color:#00142b;border:0;cursor:pointer;
  font:600 .95rem/1 var(--body);padding:.75rem 1.2rem;border-radius:99px;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.1)}
.btn[disabled]{opacity:.4;cursor:not-allowed;filter:none}
.btn-sm{padding:.5rem .9rem;font-size:.85rem}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.linkish{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
.linkish:hover{color:var(--brand-cyan)}

.stack{display:flex;flex-direction:column;gap:1rem}
label{display:flex;flex-direction:column;gap:.35rem;font-size:.86rem;color:var(--muted)}
input,select,textarea{background:var(--navy-800);border:1px solid var(--line);color:var(--text);
  padding:.65rem .75rem;border-radius:10px;font:inherit;width:100%}
input[type=color]{padding:.2rem;height:42px}
input[type=checkbox]{width:auto}
.check{flex-direction:row;align-items:center;gap:.5rem}

.errors{background:rgba(255,92,122,.12);border:1px solid #ff5c7a;border-radius:var(--radius);padding:.9rem 1rem .9rem 2rem;margin:0 0 1.2rem}
.flash{border-radius:var(--radius);padding:.75rem 1rem;margin:0 0 1.4rem;border:1px solid var(--line)}
.flash-ok{border-color:var(--ok);color:var(--ok)}
.flash-error{border-color:#ff5c7a;color:#ff5c7a}
.empty{color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);padding:2rem;text-align:center}

/* ---------- Studio ---------- */
.studio{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr) 330px;align-items:start}
@media (max-width:900px){.studio{grid-template-columns:1fr}}
.stage-wrap{background:#01050f;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  position:relative;display:grid;place-items:center;min-height:240px;padding:.6rem}
/* The canvas keeps its export resolution; JS sets its displayed size so that
   9:16 previews stay compact instead of towering over the controls. */
.stage-wrap canvas{display:block;max-width:100%;max-height:min(460px,55vh);height:auto}
.stage-empty{position:absolute;color:var(--muted);font-size:.9rem;margin:0;pointer-events:none}
.panel{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.9rem}
.panel h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0}
.row{display:flex;gap:.75rem;flex-wrap:wrap}
/* min-width:0 is the important part: without it a flex child refuses to shrink
   below its content, and long option text pushes controls out of the panel. */
.row>*{flex:1 1 150px;min-width:0}
.row>label{min-width:0}
.dropzone{position:relative;border:1px dashed var(--line);border-radius:var(--radius);padding:1rem;text-align:center;cursor:pointer;color:var(--text);font-size:.9rem}
.dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dropzone.is-set{border-style:solid;border-color:var(--brand-blue)}

.tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.tpl{position:relative;border:1px solid var(--line);background:var(--navy-700);border-radius:10px;padding:.55rem;cursor:pointer;text-align:left;color:var(--text);font:500 .82rem/1.3 var(--body)}
.tpl:hover{border-color:var(--brand-blue)}
.tpl.is-active{border-color:var(--brand-cyan);box-shadow:0 0 0 1px var(--brand-cyan) inset}
.tpl .pro{position:absolute;top:.3rem;right:.35rem;font-size:.6rem;letter-spacing:.1em;color:var(--navy-900);background:var(--brand-cyan);border-radius:99px;padding:.1rem .35rem}
.tpl small{display:block;color:var(--muted);font-weight:400;font-size:.72rem;margin-top:.15rem}

.progress{height:4px;background:var(--navy-700);border-radius:99px;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--grad);transition:width .2s}

/* ---------- Content ---------- */
.head-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.cards{list-style:none;padding:0;display:flex;flex-direction:column;gap:.7rem}
.card{display:flex;align-items:center;gap:1rem;background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:.75rem}
.card img{width:60px;height:60px;object-fit:cover;border-radius:8px}
.card h2{font-size:1rem;margin:0}
.card h2 a{text-decoration:none;color:var(--text)}
.card>form{margin-left:auto}
.grid{list-style:none;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid a{text-decoration:none;color:var(--text);display:grid;gap:.35rem}
.grid img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius);width:100%}
.release{display:grid;gap:2rem;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start}
.release-cover{border-radius:var(--radius);aspect-ratio:1;object-fit:cover;width:100%}
.release audio{width:100%;margin:1rem 0}
.services{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem;max-width:280px}
@media (max-width:700px){.release{grid-template-columns:1fr}}

/* ---------- Admin ---------- */
.admin{display:grid;grid-template-columns:210px minmax(0,1fr);gap:1.5rem;max-width:1180px;margin:0 auto;padding:1.5rem clamp(1rem,4vw,2.5rem)}
@media (max-width:800px){.admin{grid-template-columns:1fr}}
.admin-nav{display:flex;flex-direction:column;gap:.2rem}
.admin-nav a{padding:.5rem .7rem;border-radius:8px;text-decoration:none;color:var(--muted);font-size:.92rem}
.admin-nav a:hover{background:var(--navy-800);color:var(--text)}
.admin-nav a.is-active{background:var(--navy-700);color:var(--text)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:1.5rem}
.stat{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.stat b{display:block;font-family:var(--display);font-size:1.9rem;line-height:1.1}
.stat span{color:var(--muted);font-size:.82rem}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:500;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
td form{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
td input,td select{padding:.35rem .45rem;font-size:.85rem;width:auto;min-width:80px}
.chart{width:100%;height:150px}
.trs{display:grid;gap:.5rem}
.trs .tr{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:.6rem;align-items:center}
.trs .tr code{font-size:.75rem;color:var(--muted);background:none;padding:0;overflow-wrap:anywhere}
.trs .tr .src{color:var(--muted);font-size:.78rem}

.site-foot{border-top:1px solid var(--line);padding:2rem clamp(1rem,4vw,2.5rem);color:var(--muted);font-size:.88rem;display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Studio additions ---------- */
.tuning{border-top:1px solid var(--line);padding-top:.7rem}
.tuning summary{cursor:pointer;font-family:var(--display);font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.tuning summary:hover{color:var(--text)}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;padding:0;border:0;height:20px}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:var(--navy-700)}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--navy-700)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--brand-cyan);margin-top:-5px;border:0}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--brand-cyan);border:0}

/* ---------- Discover cards + player ---------- */
.play-card .thumb{position:relative;display:block}
.play-card .play-badge{position:absolute;inset:auto .5rem .5rem auto;width:34px;height:34px;border-radius:50%;
  background:var(--grad);color:#00142b;display:grid;place-items:center;font-size:.85rem;
  opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s}
.play-card:hover .play-badge,.play-card:focus-visible .play-badge,.play-card.is-playing .play-badge{opacity:1;transform:none}
.play-card.is-playing strong{color:var(--brand-cyan)}

.player{position:sticky;bottom:0;z-index:15;display:grid;align-items:center;gap:.8rem;
  grid-template-columns:48px minmax(120px,1fr) auto minmax(120px,2fr) auto 90px;
  padding:.6rem clamp(.7rem,3vw,1.2rem);margin:2rem calc(-1 * clamp(1rem,4vw,2.5rem)) -1rem;
  background:rgba(7,17,48,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.player img{width:48px;height:48px;border-radius:8px;object-fit:cover}
.player-meta{display:flex;flex-direction:column;min-width:0}
.player-meta a{color:var(--text);text-decoration:none;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-meta span{font-size:.82rem}
.player-controls{display:flex;align-items:center;gap:.35rem}
.pbtn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.95rem;padding:.35rem}
.pbtn:hover{color:var(--text)}
.pbtn-main{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#00142b;font-size:.8rem;display:grid;place-items:center}
.ptime{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:720px){
  .player{grid-template-columns:44px 1fr auto;grid-template-areas:"art meta ctl" "seek seek seek";row-gap:.4rem}
  .player img{grid-area:art}.player-meta{grid-area:meta}.player-controls{grid-area:ctl}
  .seek{grid-area:seek}.ptime,.vol{display:none}
}

/* ---------- Help popovers ---------- */
.lbl{display:inline-flex;align-items:center;gap:.35rem}
.qmark{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);background:var(--navy-700);
  color:var(--muted);font:600 10px/1 var(--body);cursor:pointer;padding:0;flex:0 0 auto}
.qmark:hover{color:var(--brand-cyan);border-color:var(--brand-cyan)}
/* [hidden] loses to a display rule, so it has to be restated explicitly —
   this is why the help box and the player were stuck on screen. */
.helpbox[hidden],.player[hidden]{display:none}
.helpbox{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:30;max-width:min(520px,92vw);
  background:var(--navy-700);border:1px solid var(--brand-blue);border-radius:var(--radius);
  padding:1rem 1.1rem;box-shadow:0 18px 50px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:.7rem}
.helpbox p{margin:0;font-size:.92rem}
.helpbox button{align-self:flex-start}

/* ---------- Pricing ---------- */
.plans{list-style:none;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.plan{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;display:flex;flex-direction:column;gap:.6rem}
.plan.is-current{border-color:var(--brand-cyan)}
.plan h2{margin:0;font-size:1.2rem}
.price b{font-family:var(--display);font-size:2rem;line-height:1}
.price{margin:0;display:flex;align-items:baseline;gap:.4rem}
.small{font-size:.85rem}
.features{list-style:none;padding:0;margin:.4rem 0 auto;display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}
.features li{padding-left:1.1rem;position:relative;color:var(--muted)}
.features li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--brand-cyan)}
.current-badge{color:var(--brand-cyan);font-size:.85rem;margin:0}

/* ---------- Content pages ---------- */
.prose{max-width:70ch;margin:0 auto}
.prose h2{margin-top:2rem;font-size:1.25rem}
.prose h3{margin-top:1.4rem;font-size:1.05rem}
.prose p,.prose li{color:var(--muted)}
.prose ul,.prose ol{padding-left:1.2rem}
.prose table{margin:1rem 0}

/* ---------- Admin additions ---------- */
.two-col{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2rem}
.meter{display:inline-block;width:90px;height:6px;border-radius:99px;background:var(--navy-700);vertical-align:middle;margin-right:.4rem;overflow:hidden}
.meter span{display:block;height:100%;background:var(--grad)}
.plan-edit{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.7rem}
textarea{font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.admin h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:1.4rem 0 .3rem}
.ad-slot{margin:1.5rem auto;text-align:center;min-height:1px}

.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:center}
.foot-nav a{color:var(--muted);text-decoration:none}
.foot-nav a:hover{color:var(--text)}
.site-foot{align-items:center}

/* ---------- Collapsible studio sections ---------- */
.panel{padding:.5rem;gap:.35rem}
.sect{border:1px solid var(--line);border-radius:10px;background:var(--navy-900);overflow:hidden}
.sect+.sect{margin-top:.35rem}
.sect>summary{cursor:pointer;list-style:none;padding:.7rem .85rem;font:600 .78rem/1 var(--display);
  text-transform:uppercase;letter-spacing:.13em;color:var(--muted);display:flex;align-items:center;gap:.5rem}
.sect>summary::-webkit-details-marker{display:none}
.sect>summary::after{content:"+";margin-left:auto;font-size:1rem;line-height:1;color:var(--muted)}
.sect[open]>summary::after{content:"−"}
.sect[open]>summary{color:var(--text);border-bottom:1px solid var(--line)}
.sect>summary:hover{color:var(--text)}
.sect-body{padding:.85rem;display:flex;flex-direction:column;gap:.85rem}
.sect-note{font:400 .72rem/1 var(--body);text-transform:none;letter-spacing:0;color:var(--brand-cyan)}
.tpl-grid{max-height:340px;overflow-y:auto;padding-right:.2rem}
.studio{align-items:start}



/* ---------- Panel layout corrections ---------- */
.studio{grid-template-columns:minmax(0,1fr) minmax(340px,380px)}
@media (max-width:960px){.studio{grid-template-columns:1fr}}

/* Nothing inside the panel may exceed its column. */
.panel,.panel *{min-width:0;max-width:100%}
.panel select,.panel input,.panel textarea{width:100%;box-sizing:border-box}
.panel select{text-overflow:ellipsis}

/* Labels wrap instead of clipping, and the help button never gets pushed off. */
.lbl{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;line-height:1.35}
.lbl .qmark{flex:0 0 auto}
label{gap:.3rem}
.panel .hint{margin:0;font-size:.78rem;line-height:1.45;overflow-wrap:anywhere}
.check{flex-direction:row;align-items:flex-start;gap:.5rem;line-height:1.4}
.check input{flex:0 0 auto;margin-top:.15rem}

/* Sections scroll as a whole rather than each having its own scrollbar. */
.sect-body{padding:.85rem;gap:.9rem;overflow:visible}
.tpl-grid{max-height:none;overflow:visible}
.tpl{white-space:normal;overflow-wrap:anywhere}
.tpl small{display:block;margin-top:.2rem}

@media (max-width:960px){ .row>*{flex:1 1 100%} }

/* Colour inputs need a floor, or three of them in a row collapse to slivers. */
.panel input[type=color]{min-width:64px;height:40px}

/* Range inputs sit flush with their label on narrow panels. */
.panel input[type=range]{width:100%;margin:0}


/* ---------- Studio layout, final ----------
   The panel no longer scrolls inside itself. A nested scroll area inside a
   sticky box is where the clipping came from: sections were competing for the
   same fixed height and losing. Instead the panel grows to whatever it needs
   and the page scrolls, while the preview stays pinned so it is always visible
   while settings are being changed. */
.panel{position:static;max-height:none;overflow:visible;height:auto}
.sect-body{overflow:visible;max-height:none}
.tpl-grid{max-height:none;overflow:visible}

@media (min-width:961px){
  .studio-preview{position:sticky;top:1rem;align-self:start}
}

/* Template grid: three across on desktop, so a long list stays short. */
.tpl-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.tpl{padding:.5rem .55rem;font-size:.8rem}
.tpl small{font-size:.7rem;line-height:1.35}

/* Template search keeps a 33-item list usable. */
.tpl-search{margin-bottom:.6rem}
.tpl-empty{color:var(--muted);font-size:.85rem;margin:.4rem 0 0}
.tpl[hidden]{display:none}

/* ---------- Account notices ---------- */
.notice{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:space-between;
  background:var(--navy-800);border:1px solid var(--brand-blue);border-radius:var(--radius);
  padding:.9rem 1.1rem;margin-bottom:1.5rem}
.notice p{margin:.2rem 0 0;font-size:.88rem}
.code-input{font:700 1.6rem/1 ui-monospace,monospace;letter-spacing:.6rem;text-align:center}
.codeblock{background:var(--navy-800);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;
  font:13px/1.6 ui-monospace,monospace;color:var(--muted);overflow-x:auto;max-width:520px}