/* ================= Audio Rev — RockRevster Productions =================
   Palette: espresso console + brushed brass. REC red reserved for live states. */
:root{
  --ink:#14100C;
  --panel:#1E1811;
  --panel2:#282016;
  --brass:#D9A441;
  --brass-hi:#F0C978;
  --cream:#F3EADA;
  --muted:#A6957C;
  --rec:#E0492F;
  --line:rgba(217,164,65,.20);
  --radius:14px;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--disp);line-height:1.08;margin:0 0 .4em}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.mono{font-family:var(--mono);font-size:.85em;letter-spacing:.02em}
[hidden]{display:none !important}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,48px);background:rgba(20,16,12,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--cream)}
.brand-mark{width:26px;height:26px;fill:var(--brass);align-self:center}
.brand-name{font-family:var(--disp);font-weight:800;font-size:1.25rem;letter-spacing:.01em}
.brand-by{font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.topnav{display:flex;gap:8px;flex-wrap:wrap}
.nav-btn{background:none;border:none;color:var(--muted);padding:8px 12px;border-radius:8px}
.nav-btn:hover{color:var(--cream)}
.nav-cta{background:var(--brass);color:var(--ink);font-weight:600}
.nav-cta:hover{background:var(--brass-hi);color:var(--ink)}

/* ---------- buttons ---------- */
.btn{border-radius:10px;padding:11px 20px;border:1px solid transparent;font-weight:600;transition:transform .08s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--brass);color:var(--ink)}
.btn-gold:hover{background:var(--brass-hi)}
.btn-line{background:transparent;color:var(--cream);border-color:var(--line)}
.btn-line:hover{border-color:var(--brass)}
.btn-rec{background:var(--rec);color:#fff}
.btn-rec[data-live="1"]{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}

/* ---------- hero ---------- */
.hero{max-width:960px;margin:0 auto;padding:clamp(48px,9vh,110px) 24px 32px;text-align:center}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:0 0 18px}
.hero h1{font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:800}
.hero-sub{max-width:620px;margin:18px auto 28px;color:var(--muted);font-size:1.07rem}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-wave{display:block;width:100%;max-width:860px;height:120px;margin:44px auto 10px}
.hero-note{font-family:var(--mono);font-size:.75rem;color:var(--muted)}

/* ---------- features ---------- */
.features,.how,.faq{max-width:1080px;margin:0 auto;padding:clamp(40px,7vh,80px) 24px}
.features h2,.how h2,.faq h2{font-size:clamp(1.7rem,3.6vw,2.5rem);text-align:center;margin-bottom:36px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.feat{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 18px;color:var(--cream);transition:border-color .15s ease,transform .12s ease}
.feat:hover{border-color:var(--brass);transform:translateY(-2px)}
.feat-k{font-family:var(--mono);font-size:.72rem;color:var(--brass);letter-spacing:.15em}
.feat h3{font-size:1.15rem;margin:.5em 0 .3em}
.feat p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}

/* ---------- how / faq ---------- */
.how-steps{max-width:680px;margin:0 auto;padding-left:1.4em;color:var(--muted)}
.how-steps li{margin-bottom:16px}
.how-steps strong{color:var(--cream)}
.faq details{max-width:680px;margin:0 auto 10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600;color:var(--cream)}
.faq p{color:var(--muted);margin:.6em 0 0}
.footer{border-top:1px solid var(--line);text-align:center;padding:36px 24px 48px;color:var(--muted);font-size:.9rem}
.footer-small{font-size:.78rem}

/* ---------- studio shell ---------- */
.studio-tabs{position:sticky;top:57px;z-index:40;display:flex;gap:4px;overflow-x:auto;padding:10px clamp(12px,3vw,40px);background:var(--panel);border-bottom:1px solid var(--line);scrollbar-width:thin}
.tab{white-space:nowrap;background:none;border:1px solid transparent;color:var(--muted);padding:8px 14px;border-radius:9px;font-weight:500}
.tab:hover{color:var(--cream)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--brass);border-color:var(--line)}
.tab-exit{margin-left:auto;color:var(--muted)}
.room{max-width:900px;margin:0 auto;padding:32px clamp(16px,4vw,40px) 90px}
.room-head h2{font-size:1.9rem}
.room-head p{color:var(--muted);margin-top:0}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.status{font-family:var(--mono);font-size:.82rem;color:var(--brass);min-height:1.4em;margin:10px 0}

/* ---------- producer chat ---------- */
.chat-log{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-height:280px;max-height:52vh;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:85%;padding:12px 16px;border-radius:12px;white-space:pre-wrap;font-size:.95rem;line-height:1.55}
.msg-user{align-self:flex-end;background:var(--brass);color:var(--ink)}
.msg-ai{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}
.msg-ai em{color:var(--brass)}
.chat-input-row{display:flex;gap:10px;margin-top:14px}
.chat-input-row textarea{flex:1;resize:vertical;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--cream);padding:12px 14px;font:inherit}
.chat-input-row textarea::placeholder{color:var(--muted)}

/* ---------- composer ---------- */
.compose-row{display:flex;gap:10px;flex-wrap:wrap}
.compose-row input{flex:1;min-width:240px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--cream);padding:12px 14px;font:inherit}
.blueprint{margin-top:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.bp-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.bp-head h3{margin:0;font-size:1.3rem}
.bp-head .mono{color:var(--brass)}
.bp-sections{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.bp-sec{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-family:var(--mono);font-size:.78rem}
.bp-sec b{color:var(--brass);font-weight:600}

/* ---------- beat lab ---------- */
.transport{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.ctl{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.ctl input[type=range]{accent-color:var(--brass);width:120px}
.transport select,#seq-preset{background:var(--panel);color:var(--cream);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
.seq-grid{display:grid;grid-template-columns:86px repeat(16,1fr);gap:5px;overflow-x:auto;padding-bottom:6px}
.seq-label{font-family:var(--mono);font-size:.72rem;color:var(--muted);display:flex;align-items:center}
.step{aspect-ratio:1;min-width:22px;border-radius:6px;border:1px solid var(--line);background:var(--panel);padding:0}
.step[data-on="1"]{background:var(--brass);border-color:var(--brass-hi)}
.step[data-beat="1"]{border-color:rgba(217,164,65,.45)}
.step.playhead{box-shadow:0 0 0 2px var(--brass-hi)}

/* ---------- keys ---------- */
.keyboard{position:relative;display:flex;height:190px;max-width:720px;user-select:none;touch-action:none}
.key-w{flex:1;background:var(--cream);border:1px solid #0006;border-radius:0 0 8px 8px;position:relative}
.key-w.down{background:var(--brass-hi)}
.key-b{position:absolute;top:0;width:7%;height:58%;background:#241C12;border:1px solid #000;border-radius:0 0 6px 6px;z-index:2}
.key-b.down{background:var(--brass)}
.key-tag{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.62rem;color:#141010}
.key-b .key-tag{color:var(--muted)}

/* ---------- fx / vocal ---------- */
.fx-panel{display:flex;flex-wrap:wrap;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-top:14px}
input[type=file]{color:var(--muted);font:inherit;margin-top:6px}
input[type=file]::file-selector-button{background:var(--panel2);color:var(--cream);border:1px solid var(--line);border-radius:8px;padding:9px 14px;margin-right:12px;font:inherit;cursor:pointer}

/* ---------- recorder ---------- */
.rec-meter{width:100%;max-width:640px;height:110px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);display:block}
.takes{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.take{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;flex-wrap:wrap}
.take audio{max-width:260px}
.take a{color:var(--brass)}

/* ---------- cover art ---------- */
.art-out{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.art-item{width:min(340px,100%)}
.art-item img{width:100%;border-radius:var(--radius);border:1px solid var(--line);display:block}
.art-item a{display:inline-block;margin-top:8px;color:var(--brass)}

/* ---------- library ---------- */
.lib-list{display:flex;flex-direction:column;gap:10px}
.lib-item{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.lib-item h4{margin:0 0 4px;font-family:var(--disp)}
.lib-item .mono{color:var(--brass)}
.lib-item pre{white-space:pre-wrap;color:var(--muted);font-size:.85rem;max-height:160px;overflow-y:auto}
.lib-item .row-actions{margin-top:8px}
.lib-empty{color:var(--muted);font-style:italic}

@media (max-width:640px){
  .brand-by{display:none}
  .topnav .nav-btn:not(.nav-cta){display:none}
  .seq-grid{grid-template-columns:64px repeat(16,26px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ---------- song mode ---------- */
.mode-row{display:flex;gap:8px;margin-bottom:14px}
.mode-btn{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:9px 16px;font-weight:600}
.mode-btn[aria-checked="true"]{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.song-options{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-top:14px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.song-note{flex-basis:100%;margin:0;color:var(--muted);font-size:.85rem;line-height:1.5}
.song-note strong{color:var(--cream)}
.bp-lyrics{margin-top:14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:16px 18px;white-space:pre-wrap;font-size:.95rem;line-height:1.7;max-height:300px;overflow-y:auto}
.bp-lyrics h4{margin:.8em 0 .2em;color:var(--brass);font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.bp-lyrics h4:first-child{margin-top:0}
.pro-song{margin-top:20px;background:var(--panel);border:1px solid var(--brass);border-radius:var(--radius);padding:18px 20px}
.pro-song h3{margin-top:0}
.pro-song audio{width:100%;max-width:520px;display:block;margin-bottom:10px}
.pro-dl{color:var(--brass)}

/* ---------- video studio ---------- */
.vid-canvas{width:100%;max-width:840px;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:var(--radius);display:block;margin-top:8px}
.vid-out{margin-top:16px}
.vid-out video{width:100%;max-width:840px;border-radius:var(--radius);border:1px solid var(--brass);display:block}
.vid-out a{display:inline-block;margin-top:8px;color:var(--brass)}
.ctl input[type=checkbox]{accent-color:var(--brass)}