/* apricot-shell.css — the light "apricot" shell for index.html.
   Loaded last, so it wins over the inline theme blocks (#studioTheme,
   #topbarSkin) which are themselves !important overrides — hence the
   !important here too. Presentation only: no id, class or DOM-order the
   scripts read is changed. Deeper tool panels (Analyze / Remix / Personas /
   Polish / Generate / Video / Forge output) keep their dark styling and sit
   inside dark cards ("dark islands"), because their canvases, WaveSurfer
   colours and ~100 hard-coded colours in the JS assume a dark background. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --ap-bg:#f8e4d1; --ap-ink:#1a0a06; --ap-ink2:#4a3129; --ap-mute:#7a5a4e; --ap-faint:#9c7f73;
  --ap-line:rgba(26,10,6,.12); --ap-line2:rgba(26,10,6,.22);
  --ap-card:rgba(255,255,255,.55); --ap-card2:rgba(255,255,255,.82);
  --ap-coral:#ff5c35; --ap-dark:#141114;
}
html{background:#f6dcc3}
body{background:linear-gradient(180deg,#fbe9d8 0%,#f6dcc3 100%) !important;background-image:linear-gradient(180deg,#fbe9d8 0%,#f6dcc3 100%) !important;color:var(--ap-ink) !important;font-family:'DM Sans','Inter',sans-serif !important}
body::before,body::after{display:none !important}
.container{max-width:1200px}

/* ── top bar ── */
.hero-top{background:rgba(251,233,216,.88) !important;border-bottom:1px solid var(--ap-line) !important;box-shadow:none !important}
.brand-logo{border-right-color:var(--ap-line) !important;color:var(--ap-ink) !important}
.brand-square{background:var(--ap-coral) !important;box-shadow:none !important;color:#fff !important}
.brand-name{color:var(--ap-ink) !important;font-family:Syne,'Inter',sans-serif !important}
.header-controls .density-toggle,.saved-trigger,.acct-trigger{background:transparent !important;border:1px solid var(--ap-line2) !important;color:var(--ap-ink2) !important;box-shadow:none !important;border-radius:999px !important}
.header-controls .density-toggle:hover,.saved-trigger:hover,.acct-trigger:hover{background:rgba(26,10,6,.06) !important;color:var(--ap-ink) !important;border-color:var(--ap-line2) !important}
#giftBtn{border-color:var(--ap-line2) !important;color:var(--ap-ink2) !important}
#studioBtn,#signinBtn,#heroCtaBtn{background:var(--ap-ink) !important;color:#fff5f0 !important;border:1px solid var(--ap-ink) !important;box-shadow:none !important;border-radius:999px !important}
#studioBtn:hover,#signinBtn:hover,#heroCtaBtn:hover{background:var(--ap-coral) !important;border-color:var(--ap-coral) !important;color:#fff !important}
/* #heroCtaBtn paints its own inline `background:var(--grad) !important`, which
   beats any stylesheet rule - so change what --grad means on that element. */
#heroCtaBtn{--grad:#1a0a06}
#heroCtaBtn:hover{--grad:#ff5c35}
.header-controls .density-toggle,.saved-trigger,.acct-trigger,.credit-pill{font-family:'DM Sans','Inter',sans-serif !important;font-size:13px !important}
.credit-pill b,#creditBalance{color:var(--ap-ink) !important;font-family:'JetBrains Mono',monospace !important}
.credit-pill{background:var(--ap-card2) !important;border:1px solid var(--ap-line2) !important;color:var(--ap-ink) !important}
.acct-trigger .chev,.saved-trigger .chev,.saved-num{color:var(--ap-mute) !important}

/* ── hero ── */
.hero h1{font-family:Syne,'Inter',sans-serif !important;font-weight:800 !important;font-size:clamp(40px,6.2vw,76px) !important;line-height:.94 !important;letter-spacing:-0.045em !important;background:none !important;-webkit-text-fill-color:var(--ap-ink) !important;color:var(--ap-ink) !important;max-width:920px;margin:34px 0 18px}
.hero h1 .hl{color:var(--ap-coral) !important;-webkit-text-fill-color:var(--ap-coral) !important}
.subtitle{color:var(--ap-ink2) !important;font-size:16px !important;line-height:1.6 !important;max-width:640px !important;margin-bottom:26px !important}
.subtitle b{color:var(--ap-ink) !important;font-weight:600 !important}
.hero-showcase{background:var(--ap-card2) !important;border:1px solid var(--ap-line) !important;border-radius:16px !important;margin-bottom:26px !important}
.hero-showcase .gplay{background:var(--ap-ink) !important;box-shadow:none !important}
.hero-showcase-lbl,.hero-showcase .gptime{color:var(--ap-mute) !important}
.hero-showcase-lbl b{color:var(--ap-ink) !important}
.hero-showcase .ghost-btn{background:transparent !important;border:1px solid var(--ap-line2) !important;color:var(--ap-ink2) !important;border-radius:999px !important}

/* ── hero video (replaces the audio showcase; #heroShowcase stays in the DOM
   for initHeroShowcase()/useHeroStyle(), just never shown) ── */
#heroShowcase{display:none !important}
.hero-video{position:relative;max-width:920px;margin:0 0 30px;border-radius:22px;overflow:hidden;background:#141114;border:1px solid var(--ap-line);box-shadow:0 30px 80px rgba(120,60,30,.22);aspect-ratio:16/9}
.hero-video video{display:block;width:100%;height:100%;object-fit:cover;background:#141114}
.hero-video .hv-lbl{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(20,17,20,.72);color:#fff;font-size:12px;font-weight:600;letter-spacing:.01em;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-video .hv-lbl b{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;color:#ffc7b8}

/* ── mode switcher: the four top tabs become explanatory cards ── */
#topTabBar{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;padding:0 !important;background:transparent !important;border:none !important;border-radius:0 !important;margin-bottom:22px !important}
#topTabBar .tab-btn{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left !important;padding:16px 18px !important;border-radius:20px !important;background:var(--ap-card) !important;border:1px solid var(--ap-line) !important;color:var(--ap-ink) !important;font-family:'DM Sans','Inter',sans-serif !important;box-shadow:none !important;min-height:112px;letter-spacing:0 !important}
#topTabBar .tab-btn[hidden]{display:none !important}
#topTabBar .tab-btn:hover{background:var(--ap-card2) !important;border-color:var(--ap-line2) !important;color:var(--ap-ink) !important}
#topTabBar .tab-btn.active{background:var(--ap-coral) !important;border-color:var(--ap-coral) !important;color:#fff !important;box-shadow:0 14px 34px rgba(255,92,53,.28) !important}
#topTabBar .tb-top{display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--ap-coral)}
#topTabBar .tab-btn.active .tb-top{color:#fff}
#topTabBar .tb-ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#topTabBar .tb-t{font-size:16px;font-weight:700;letter-spacing:-0.01em}
#topTabBar .tb-d{font-size:12.5px;line-height:1.4;font-weight:400;color:var(--ap-mute)}
#topTabBar .tab-btn.active .tb-d{color:rgba(255,255,255,.85)}
#topTabBar .tagb{margin-left:0 !important;vertical-align:0 !important}
#topTabBar .tab-btn.active .tagb{color:#fff !important;border-color:rgba(255,255,255,.5) !important;background:rgba(255,255,255,.15) !important}
@media(max-width:820px){#topTabBar{grid-template-columns:repeat(2,minmax(0,1fr))}#topTabBar .tab-btn{min-height:0}}
@media(max-width:480px){#topTabBar{grid-template-columns:1fr}#topTabBar .tab-btn{padding:14px 16px !important}}

/* sub-modes of Match a reference: light pills */
#subTabBar{background:var(--ap-card) !important;border:1px solid var(--ap-line) !important;border-radius:999px !important;padding:4px !important;margin-bottom:16px !important}
#subTabBar .tab-btn{color:var(--ap-mute) !important;background:transparent !important;border-radius:999px !important;padding:10px 12px !important;font-family:'DM Sans','Inter',sans-serif !important;box-shadow:none !important;letter-spacing:0 !important}
#subTabBar .tab-btn:hover{color:var(--ap-ink) !important}
#subTabBar .tab-btn.active{background:var(--ap-ink) !important;color:#fff !important}
#subTabBar .tab-btn.active .tagb{color:#fff !important;border-color:rgba(255,255,255,.4) !important;background:rgba(255,255,255,.12) !important}

/* ── Forge form card ── */
#forgeContent{background:var(--ap-card) !important;border:1px solid var(--ap-line);border-radius:26px;padding:22px 22px 24px;margin-bottom:22px}
#forgeContent .slbl,#forgeContent .flabel{color:var(--ap-mute) !important;font-family:'JetBrains Mono',monospace !important;font-size:10px !important;letter-spacing:.14px !important;letter-spacing:.14em !important}

/* genre grid -> wrapping rows of pills, all 28 visible at once. (Was a
   horizontal snap rail; only ~6 showed and nothing said it scrolled.)
   fitGrid() still writes an inline grid-template-columns; it is inert once
   display is flex. */
#genreGrid{display:flex !important;flex-wrap:wrap !important;grid-template-columns:none !important;gap:8px !important;padding:2px;margin-bottom:18px !important}
#genreGrid .gcard{flex:none !important;display:flex !important;align-items:center !important;gap:8px !important;height:44px !important;padding:0 14px 0 12px !important;border-radius:12px !important;background:var(--ap-card2) !important;border:1px solid var(--ap-line) !important;text-align:left !important;box-shadow:none !important;white-space:nowrap}
#genreGrid .gcard:hover{border-color:var(--ap-coral) !important;background:#fff !important}
#genreGrid .gcard .gi{font-size:15px !important;display:inline-block !important;margin:0 !important;line-height:1 !important;filter:grayscale(1) contrast(1.15);opacity:.7}
#genreGrid .gcard .gl{font-size:13px !important;color:var(--ap-ink) !important;font-weight:600 !important;line-height:1 !important}
#genreGrid .gcard .gsub{display:inline !important;margin:0 !important;font-size:10px !important;color:var(--ap-faint) !important}
#genreGrid .gcard.sel{background:var(--ap-coral) !important;border-color:var(--ap-coral) !important;box-shadow:none !important}
#genreGrid .gcard.sel .gl,#genreGrid .gcard.sel .gsub{color:#fff !important}
#genreGrid .gcard.sel .gi{filter:none;opacity:1}
/* phones: with the "N subgenres" suffix every pill is wider than half the
   card, so 28 pills stacked one per row (~1,450px). Drop the suffix there. */
@media(max-width:600px){#genreGrid{gap:6px !important}#genreGrid .gcard{height:38px !important;padding:0 12px 0 10px !important;gap:6px !important}#genreGrid .gcard .gsub{display:none !important}}

/* fields */
#forgeContent .finput,#forgeContent .fselect,#forgeContent .ftextarea{background:#fff !important;border:1px solid var(--ap-line2) !important;color:var(--ap-ink) !important;border-radius:12px !important;font-family:'DM Sans','Inter',sans-serif !important;font-size:14px !important}
#forgeContent .ftextarea{font-family:'JetBrains Mono',monospace !important;font-size:12.5px !important}
#forgeContent .finput:focus,#forgeContent .fselect:focus,#forgeContent .ftextarea:focus{border-color:var(--ap-coral) !important;box-shadow:0 0 0 3px rgba(255,92,53,.15)}
#forgeContent .finput::placeholder,#forgeContent .ftextarea::placeholder{color:var(--ap-faint) !important}
#forgeContent .fselect option{background:#fff !important;color:var(--ap-ink) !important}
#forgeContent .mode-toggle{background:rgba(26,10,6,.06) !important;border:1px solid var(--ap-line) !important;border-radius:999px !important;padding:3px}
#forgeContent .mode-btn{color:var(--ap-mute) !important;border-radius:999px !important;font-family:'DM Sans','Inter',sans-serif !important;font-size:13px !important;font-weight:600 !important;letter-spacing:0 !important}
#forgeContent .mode-btn.active{background:var(--ap-ink) !important;color:#fff !important}
#forgeContent .mode-btn:not(.active):hover{color:var(--ap-ink) !important}
#forgeContent label,#forgeContent .lock-toggle{color:var(--ap-ink2) !important}
#forgeContent .lock-toggle:hover{color:var(--ap-ink) !important}
#forgeContent .lock-toggle span{color:inherit !important}
#forgeContent .btn-forge{background:var(--ap-ink) !important;color:#fff5f0 !important;border-radius:999px !important;box-shadow:0 16px 40px rgba(26,10,6,.22) !important;font-family:'DM Sans','Inter',sans-serif !important;font-size:15px !important;font-weight:700 !important;letter-spacing:0 !important;padding:17px !important}
#forgeContent .btn-forge:hover{background:var(--ap-coral) !important;opacity:1 !important}
#forgeContent .btn-forge:disabled{background:var(--ap-line2) !important;color:var(--ap-mute) !important;box-shadow:none !important}
#forgeContent .ghost-btn{background:transparent !important;border:1px solid var(--ap-line2) !important;color:var(--ap-ink2) !important;border-radius:999px !important}
#forgeContent .ghost-btn:hover{border-color:var(--ap-coral) !important;color:var(--ap-ink) !important}
#forgeContent .forge-busy{color:var(--ap-coral) !important}
#forgeContent .forge-err{color:#c0392b !important}

/* ── tool panels: same apricot card as the Forge form ──
   Most panel components are written against the theme's custom properties
   (--panel2, --stroke, --text, --dim, --faint, --grad ...), so re-declaring
   those properties ON the panel elements re-skins them without touching each
   class: a property declared on an element beats one inherited from :root,
   even an !important one. The handful of hard-coded hex colours are handled
   below. The raw <canvas> elements (waveform, spectrum, clip editor) are
   painted from JS with dark-background colours, so their wrappers stay dark. */
.forge-out,#tabGenerate,#tabAnalyze,#tabSwap,#tabPersona,#tabPolish,#tabVideo{
  --bg:#fbf1e8;--bg2:#ffffff;--bg3:#fff8f2;--bg-card:#ffffff;
  --text:#1a0a06;--muted:#7a5a4e;--dim:#4a3129;--faint:#9c7f73;
  --border:rgba(26,10,6,.14);--border-soft:rgba(26,10,6,.1);
  --panel:rgba(255,255,255,.75);--panel2:rgba(255,255,255,.72);--panel3:#ffffff;
  --stroke:rgba(26,10,6,.12);--stroke2:rgba(26,10,6,.22);
  --glow:none;--glow-accent:none;--glow-purple:none;
  --grad:#1a0a06;--grad-warm:#1a0a06;--a1:#ff5c35;--a2:#ff5c35;--a3:#c0392b;
  --accent:#ff5c35;--accent-cyan:#ff5c35;--accent2:#ff5c35;--accent3:#ff5c35;--ok:#1f9d5a;--bad:#c0392b;--warn:#b26a00;
  background:var(--ap-card);color:var(--ap-ink);border:1px solid var(--ap-line);border-radius:26px;padding:22px 22px 26px;margin-bottom:22px;font-family:'DM Sans','Inter',sans-serif}
.forge-out{margin-top:22px !important;border-top:1px solid var(--ap-line) !important;padding-top:22px !important;border-radius:0 !important;border-left:none !important;border-right:none !important;border-bottom:none !important;background:transparent !important;padding-left:0 !important;padding-right:0 !important}
/* hard-coded colours inside the panels */
.forge-out .out-text{color:var(--ap-ink) !important}
.forge-out .out-copy,#tabGenerate .gplay,#tabGenerate .srplay,#tabAnalyze .gplay,.browse-pill{color:#fff !important}
#tabGenerate .srtitle,#tabAnalyze .section-content,#tabSwap .prosody-line,#tabSwap .section-content{color:var(--ap-ink) !important}
#tabGenerate .srart{background:#f1e2d3 !important}
#tabGenerate .sricon:hover,#tabAnalyze .sricon:hover{color:var(--ap-ink) !important;border-color:var(--ap-coral) !important}
.studio-upsell{border:1px solid var(--ap-line2) !important;background:#fff !important}
.studio-upsell:hover{border-color:var(--ap-coral) !important}
.su-t2{color:var(--ap-mute) !important}.su-l{color:var(--ap-faint) !important}
.su-ic,.su-go{background:var(--ap-ink) !important;color:#fff !important}
.tab-btn.active .tagb{color:#fff !important;border-color:rgba(255,255,255,.5) !important;background:rgba(255,255,255,.15) !important}
.dropzone{background:#fff !important;border:1px dashed var(--ap-line2) !important;color:var(--ap-ink) !important}
.dropzone:hover,.dropzone.dragover{border-color:var(--ap-coral) !important;box-shadow:0 0 0 4px rgba(255,92,53,.12) !important}
.drop-title{color:var(--ap-ink) !important}.drop-sub,.drop-disclaimer{color:var(--ap-mute) !important}
.browse-pill{background:var(--ap-ink) !important;box-shadow:none !important}
.drop-icon{animation:none !important}
/* canvases keep a dark stage so the JS-painted colours stay legible */
.waveform-wrap,.spectrum-wrap,.clip-wave-wrap{background:#141114 !important;border-radius:14px;padding:10px;border:1px solid rgba(0,0,0,.08)}
.freq-labels{color:#9aa0b4 !important}
/* sub-mode pills sit on the light shell; make the panels under them read as one card */
#subTabBar{margin-bottom:12px !important}
/* Generate: genRenderModes() writes the selected chip as inline `color:#fff`
   (white on the old dark chip). On the light card that is invisible, so the
   selected chip becomes solid ink and the others plain. */
/* (pre-Create engine chips; no longer rendered) */
#genModes .ghost-btn{background:#fff !important;border:1px solid var(--ap-line2) !important;color:var(--ap-ink) !important;border-radius:999px !important;opacity:1 !important}
#genModes .ghost-btn[style*="border-color"]{background:var(--ap-ink) !important;border-color:var(--ap-ink) !important;color:#fff !important;box-shadow:none !important}
#genModes .ghost-btn[style*="opacity"]{color:var(--ap-mute) !important}
/* Polish: the native file input was never hidden the way #fileInput is; the
   dropzone click already forwards to fi.click(), which works while hidden. */
#polishFileInput{display:none}

/* ── Quarry ── */
.quarry{max-width:1024px !important;background:var(--ap-card) !important;border:1px solid var(--ap-line) !important;border-radius:24px !important;font-family:'DM Sans','Inter',sans-serif !important}
.quarry h3{color:var(--ap-ink) !important}
.quarry p,.quarry .qmsg{color:var(--ap-mute) !important}
.quarry .qic{background:var(--ap-ink) !important;color:#fff !important}
.quarry .qsoon{color:var(--ap-coral) !important;border-color:rgba(255,92,53,.45) !important;background:rgba(255,92,53,.08) !important}
.quarry input{background:#fff !important;border:1px solid var(--ap-line2) !important;color:var(--ap-ink) !important;border-radius:999px !important}
.quarry input:focus{border-color:var(--ap-coral) !important}
.quarry button{background:var(--ap-ink) !important;color:#fff !important;border-radius:999px !important}

/* ── footer ── */
.site-foot{max-width:1024px !important;border-top:1px solid var(--ap-line) !important;color:var(--ap-faint) !important;font-family:'DM Sans','Inter',sans-serif !important}
.site-foot a{color:var(--ap-mute) !important}
.site-foot a:hover{color:var(--ap-ink) !important}

/* ── Examples: six real songs with the prompt each came from (markup and its
   own script sit just before the Quarry section in index.html) ── */
.examples{position:relative;z-index:2;max-width:1024px;margin:34px auto 0;font-family:'DM Sans','Inter',sans-serif;color:var(--ap-ink)}
.examples .ex-head{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.examples .ex-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ap-mute)}
.examples h2{margin:0;font-family:Syne,'Inter',sans-serif;font-weight:800;font-size:clamp(30px,4vw,44px);line-height:.95;letter-spacing:-.045em;color:var(--ap-ink)}
.examples .ex-head p{margin:0;max-width:560px;font-size:15px;line-height:1.55;color:var(--ap-ink2)}
.examples .ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.examples .ex-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:20px;background:#fff;border:1px solid var(--ap-line)}
.examples .ex-card.playing{border-color:var(--ap-ink)}
.examples .ex-top{display:flex;align-items:center;gap:12px}
.examples .ex-cover{width:56px;height:56px;border-radius:12px;flex-shrink:0;background:#f1dcc8;object-fit:cover}
.examples .ex-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.examples .ex-title{font-size:15.5px;font-weight:700}
.examples .ex-meta{font-size:12.5px;color:var(--ap-mute)}
.examples .ex-play{width:44px;height:44px;flex-shrink:0;border-radius:99px;border:none;background:var(--ap-ink);color:#fff8f2;display:flex;align-items:center;justify-content:center;cursor:pointer}
.examples .ex-play:hover{background:var(--ap-coral);color:var(--ap-ink)}
.examples .ex-wave{position:relative;display:flex;align-items:center;gap:1px;height:48px;cursor:pointer;touch-action:none;border-radius:8px;outline:none}
.examples .ex-wave:focus-visible{box-shadow:0 0 0 3px rgba(255,92,53,.35)}
.examples .ex-wave span{flex:1;min-width:1px;border-radius:2px;background:rgba(26,10,6,.2);transition:background .08s}
.examples .ex-wave span.on{background:var(--ap-coral)}
.examples .ex-wave .ex-head-hover{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ap-ink);opacity:0;pointer-events:none;transition:opacity .12s}
.examples .ex-wave:hover .ex-head-hover{opacity:.55}
.examples .ex-time{margin-top:-6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ap-mute)}
.examples .ex-style{padding:10px 12px;border-radius:12px;background:#fbf1e8;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.55;color:var(--ap-ink);flex:1}
.examples .ex-use{align-self:flex-start;padding:0;border:none;background:none;color:#b83a1c;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.examples .ex-use:hover{color:var(--ap-ink);text-decoration:underline}
@media(max-width:820px){.examples .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.examples{margin-top:24px}.examples .ex-grid{grid-template-columns:1fr}}


/* ── Create page (#tabForge): Forge + Generate as one flow, Library beside it.
   Markup and its script live in index.html (ck* ids). The side column
   re-declares the theme variables the song rows and player are written
   against, the same trick as the tool panels above. ── */
#tabForge .ck-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
#forgeContent.ck-main{background:transparent !important;border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;min-width:0}
.ck-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ck-intro{display:flex;flex-direction:column;gap:8px;padding:0 4px 4px}
.ck-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ap-mute)}
.ck-h2{margin:0;font-family:Syne,'Inter',sans-serif;font-weight:800;font-size:clamp(32px,4vw,46px);line-height:.95;letter-spacing:-.045em;color:var(--ap-ink)}
.ck-lede{margin:0;font-size:15px;line-height:1.55;color:var(--ap-ink2);max-width:600px}
.ck-step{background:var(--ap-card);border:1px solid var(--ap-line);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:20px}
.ck-step-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ck-step-h h3{margin:0;font-family:Syne,'Inter',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ap-ink)}
.ck-num{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:#b83a1c}
.ck-sub{font-size:13px;color:var(--ap-mute)}
.ck-tag{font-size:12px;color:var(--ap-mute);border:1px solid var(--ap-line2);border-radius:999px;padding:3px 9px}
.ck-tag[hidden]{display:none}
.ck-field{display:flex;flex-direction:column;gap:10px}
.ck-lbl{font-size:13px;font-weight:600;color:var(--ap-ink2)}
.ck-lbl em{font-style:normal;font-weight:400;color:var(--ap-mute);margin-left:4px}
.ck-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ck-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ck-help{font-size:12.5px;color:var(--ap-mute)}
.ck-note{padding:14px 16px;border-radius:14px;border:1px dashed var(--ap-line2);background:rgba(26,10,6,.03);font-size:13.5px;line-height:1.5;color:var(--ap-ink2)}
.ck-note[hidden]{display:none}
.ck-seg{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border-radius:999px;background:rgba(26,10,6,.06);border:1px solid var(--ap-line)}
.ck-segbtn{height:42px;padding:0 20px;border-radius:999px;border:none;background:transparent;color:var(--ap-ink2);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ck-segbtn.on{background:var(--ap-ink);color:#fff8f2}
.ck-chips{display:flex;flex-wrap:wrap;gap:8px}
.ck-chip{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--ap-line2);background:#fff;color:var(--ap-ink);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ck-chip:hover{border-color:var(--ap-coral)}
.ck-chip.on{background:var(--ap-ink);border-color:var(--ap-ink);color:#fff8f2}
.ck-chip-sub{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;opacity:.75}
.ck-custom .finput{flex:1;min-width:0;height:40px;border-style:dashed !important;border-radius:999px !important}
.ck-bpm{flex:0 0 110px !important;font-family:'JetBrains Mono',monospace !important}
.ck-unit{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ap-mute)}
.ck-add{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--ap-ink);background:#fff;color:var(--ap-ink);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ck-voice{margin-top:10px}
.ck-voice[hidden]{display:none}
.ck-select{width:auto !important;min-width:200px;height:40px}
.ck-fine{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--ap-line)}
.ck-fine label{font-size:13px;color:var(--ap-mute)}
.ck-fine .ck-select{min-width:120px}
#tabForge #genreGrid{margin-bottom:4px !important}
#tabForge .mode-toggle{align-self:flex-start}
/* 03 prompt */
.ck-prompt{background:#fff;border:2px solid var(--ap-ink)}
.ck-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ck-tab{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border-radius:16px;border:1px solid var(--ap-line2);background:#fff;color:var(--ap-ink);font-family:inherit;text-align:left;cursor:pointer}
.ck-tab b{font-size:15px}
.ck-tab span{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ap-mute)}
.ck-tab.on{background:var(--ap-ink);border-color:var(--ap-ink);color:#fff8f2}
.ck-tab.on span{color:#ffc7b8}
.ck-panel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;background:#fbf1e8}
.ck-panel[hidden]{display:none}
.ck-panel p{flex:1 1 280px;margin:0;font-size:13.5px;line-height:1.5;color:var(--ap-ink2)}
.ck-dark,.ck-panel .ck-forge{height:40px !important;padding:0 18px !important;border-radius:999px !important;border:none;background:var(--ap-ink) !important;color:#fff8f2 !important;font-family:inherit;font-size:13.5px !important;font-weight:700 !important;cursor:pointer;width:auto !important;margin:0 !important;box-shadow:none !important;letter-spacing:0 !important}
.ck-dark:hover,.ck-panel .ck-forge:hover{background:var(--ap-coral) !important;color:var(--ap-ink) !important}
.ck-ghost{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--ap-line2);background:#fff;color:var(--ap-ink);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ck-flash{flex-basis:100%;font-size:12.5px;color:#b83a1c;min-height:0}
.ck-flash:empty{display:none}
#ckPanelForge .forge-busy,#ckPanelForge .forge-err{flex-basis:100%;margin:0}
#ckPanelForge .forge-out{flex-basis:100%;margin:0 !important;padding:0 !important;border:none !important}
#ckPanelForge .forge-out .out-grid,#toGenBtn{display:none !important}
#ckPanelForge .forge-actions{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.ck-box{display:flex;flex-direction:column;gap:8px}
.ck-box-h{display:flex;align-items:center;gap:10px}
.ck-box-h label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ap-ink2)}
.ck-box-h span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ap-mute);flex:1}
.ck-box-h span.over{color:#b83a1c}
.ck-copy{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ap-line2);background:#fff;color:var(--ap-ink);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
#tabForge #genStyle,#tabForge #genLyrics{background:#fbf1e8 !important;font-family:'JetBrains Mono',monospace !important;font-size:13px !important;line-height:1.65 !important;border-radius:14px !important;border:1px solid var(--ap-line2) !important;color:var(--ap-ink) !important;width:100%;box-sizing:border-box}
#tabForge #genStyle{min-height:96px}
#tabForge #genLyrics{min-height:260px}
/* 04 engine */
#genModes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ck-engine{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:15px 16px;border-radius:16px;border:1px solid var(--ap-line2);background:rgba(255,255,255,.55);color:var(--ap-ink);font-family:inherit;text-align:left;cursor:pointer}
.ck-engine:hover{border-color:var(--ap-ink)}
.ck-engine.sel{background:#fff;border:2px solid var(--ap-ink);padding:14px 15px}
.ck-engine-top{display:flex;align-items:center;gap:9px;width:100%}
.ck-engine-top i{width:13px;height:13px;border-radius:99px;border:2px solid rgba(26,10,6,.3);box-sizing:border-box;flex-shrink:0}
.ck-engine.sel .ck-engine-top i{background:var(--ap-coral);border-color:var(--ap-coral)}
.ck-engine-top b{font-family:Syne,'Inter',sans-serif;font-size:17px;letter-spacing:-.01em}
.ck-beta{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a4b00;border:1px solid rgba(138,75,0,.4);border-radius:5px;padding:1px 5px}
.ck-cost{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500}
.ck-engine-blurb{font-size:13px;line-height:1.45;color:var(--ap-ink2);padding-left:22px}
.ck-engine-name{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ap-mute);padding-left:22px}
#genModeNote{font-size:12.5px;line-height:1.5;color:var(--ap-mute)}
#genEngineAttrib{color:var(--ap-ink2) !important;font-size:13px !important}
#genEngineAttrib a{color:#b83a1c !important}
/* side column */
.ck-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px;min-width:0;
  --bg:#fbf1e8;--bg2:#ffffff;--bg3:#fff8f2;--text:#1a0a06;--muted:#7a5a4e;--dim:#4a3129;--faint:#9c7f73;
  --panel:rgba(255,255,255,.75);--panel2:#fbf1e8;--panel3:#ffffff;--stroke:rgba(26,10,6,.12);--stroke2:rgba(26,10,6,.22);
  --glow:none;--grad:#1a0a06;--accent:#ff5c35;--a1:#ff5c35;--a2:#ff5c35}
.ck-card{background:#fff;border:1px solid var(--ap-line);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px}
.ck-your{box-shadow:0 24px 60px rgba(120,60,30,.14)}
.ck-your-h{display:flex;flex-direction:column;gap:3px}
.ck-your-h b{font-family:Syne,'Inter',sans-serif;font-size:20px;letter-spacing:-.01em}
.ck-your-h span{font-size:13px;color:var(--ap-mute)}
.ck-side #genBtn{height:56px;border-radius:999px !important;font-size:16px !important;margin:0 !important}
.ck-credits{text-align:center;font-size:12.5px;color:var(--ap-ink2)}
.ck-side #genWrap{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--ap-line)}
.ck-side #genWrap[style*="none"]{display:none !important}
.ck-side .wsplayer{background:#fbf1e8;border-color:var(--ap-line)}
.ck-side .gplay,.ck-side .srplay{background:var(--ap-ink) !important;color:#fff8f2 !important;box-shadow:none !important}
.ck-lib-h{display:flex;align-items:baseline;gap:10px}
.ck-lib-h b{font-family:Syne,'Inter',sans-serif;font-size:20px;letter-spacing:-.01em}
.ck-lib-h span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ap-mute)}
.ck-lib #mySongsWrap{margin:0 !important;max-height:560px;overflow-y:auto}
.ck-lib .songrow{background:#fbf1e8 !important;border-color:transparent !important;flex-wrap:wrap;gap:8px}
.ck-lib .songrow:hover{border-color:var(--ap-line2) !important}
.ck-lib .srtitle{color:var(--ap-ink) !important;font-weight:700}
.ck-lib .srart{background:#f1e2d3 !important}
.ck-lib .sricon{width:28px;height:28px;flex-basis:28px;background:#fff !important}
.ck-lib .sricon:hover{color:var(--ap-ink) !important;border-color:var(--ap-coral) !important}
.ck-lib .songrow{flex-wrap:wrap !important;row-gap:6px !important}
.ck-lib .songrow > :has(.srtitle){flex:1 1 calc(100% - 110px) !important;min-width:0 !important}
.ck-lib .songrow .srtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-lib .songrow .srtime{margin-right:auto;padding-left:4px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ap-mute)}
#tabForge .mode-btn{white-space:nowrap}
#tabForge #genreGrid .gcard .gsub{display:none !important}
#tabForge #genreGrid .gcard{height:40px !important}
.ck-lib-empty{padding:18px;border-radius:16px;border:1px dashed var(--ap-line2);background:#fbf1e8;font-size:13.5px;line-height:1.5;color:var(--ap-ink2)}
@media(max-width:1020px){
  #tabForge .ck-grid{grid-template-columns:1fr}
  .ck-side{position:static}
}
@media(max-width:640px){
  .ck-two,.ck-tabs,#genModes{grid-template-columns:1fr}
  .ck-step{padding:18px;border-radius:20px}
  .ck-tabs{gap:8px}
  .ck-tab{flex-direction:row;align-items:baseline;justify-content:space-between;padding:12px 14px}
}
#ckLyricsBody{display:flex;flex-direction:column;gap:16px}
#ckLyricsBody > .ck-field[style*="none"]{display:none !important}
.ck-cr{margin-left:6px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;opacity:.75}