:root{--bg:#070908;--panel:#101411;--panel2:#151a16;--line:#293029;--text:#f4f7f3;--muted:#919b93;--green:#8df56d;--blue:#86cfff;--bad:#ff7d78;--shadow:0 18px 55px #0008}*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;background:radial-gradient(900px 500px at 15% -10%,#18321f 0,transparent 65%),radial-gradient(700px 500px at 95% 10%,#12232b 0,transparent 62%),var(--bg);color:var(--text);font:14px Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.shell{max-width:1380px;margin:auto;padding:0 28px}header{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;position:sticky;top:0;z-index:20;background:#070908dd;backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;letter-spacing:.08em}.brand small,.eyebrow,.muted{color:var(--muted)}.pulse{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}.health{color:var(--green);font-size:11px;letter-spacing:.13em}.workflow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:24px 0}.step{display:flex;align-items:center;gap:10px;color:#667068;border-bottom:2px solid #202620;padding:10px}.step i{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#181e19;font-style:normal}.step.active{color:var(--text);border-color:var(--green)}.step.active i{background:var(--green);color:#071006}.hero{padding:40px 0 26px}.hero h1{font-size:clamp(40px,6vw,74px);line-height:.95;letter-spacing:-.055em;max-width:820px;margin:10px 0}.hero p{font-size:17px;color:var(--muted);max-width:680px;line-height:1.6}.layout{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}.card,.panel{background:linear-gradient(145deg,#151a16eF,#0d100eee);border:1px solid #ffffff12;border-radius:20px;box-shadow:var(--shadow)}.card{padding:22px}.sticky{position:sticky;top:96px}.card h2,.panel h2{font-size:16px;margin:0 0 17px}.drop{min-height:220px;border:1px dashed #465047;border-radius:16px;display:grid;place-content:center;text-align:center;gap:9px;background:#090c0a;cursor:pointer;transition:.2s}.drop:hover{border-color:var(--green);transform:translateY(-2px)}.drop input{display:none}.drop strong{font-size:21px}.drop span{color:var(--muted)}button,.button{border:0;border-radius:11px;padding:12px 15px;background:var(--green);color:#071006;font-weight:800;cursor:pointer;transition:.18s}button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 8px 24px #76ff6020}button.secondary{background:#1d2420;color:var(--text);border:1px solid var(--line)}button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}button:disabled{opacity:.35;cursor:not-allowed;transform:none}.fileMeta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.fileMeta div{background:#090c0a;border-radius:10px;padding:10px}.fileMeta b{display:block}.fileMeta small{color:var(--muted)}canvas{width:100%;height:54px;margin-top:12px;border-radius:9px;background:#090c0a}.controls label{display:flex;flex-direction:column;gap:8px;margin:15px 0;color:#cbd2cc}.controls select,.controls input[type=text],.search{width:100%;background:#090c0a;border:1px solid var(--line);border-radius:11px;color:var(--text);padding:12px}.controls input[type=range]{accent-color:var(--green);width:100%}.browser{min-width:0}.browserHead{padding:22px}.browserTitle{display:flex;justify-content:space-between;gap:12px;align-items:start}.browserTitle h2{font-size:25px;margin:0}.notice{color:var(--muted);font-size:12px;max-width:580px;line-height:1.45}.sectionLabel{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin:22px 0 10px}.sectionLabel:first-of-type{margin-top:18px}
/* Genre chips: wrap onto as many rows as needed -- never scroll, never clip
   a label. This alone is a base rule (no media query), so it behaves
   identically from 390px to 1920px+: the only thing that changes with width
   is how many chips fit per row before wrapping. */
.tabs{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
.tabs button{white-space:nowrap;background:#12160f;color:var(--muted);border:1px solid var(--line);padding:9px 14px;border-radius:999px;font-size:12px;letter-spacing:.02em}
.tabs button:hover{border-color:#4a6c4e;color:#cfd8d1}
.tabs button.on{background:linear-gradient(135deg,#26391f,#1b2a17);color:var(--green);border-color:#5c8a52;box-shadow:0 0 0 1px #8df56d22}
.searchWrap{position:relative;margin-top:4px}.search{font-size:16px;padding:15px 18px}
/* Collection cards: a real responsive grid, not a horizontal rail. minmax(0,..)
   keeps every card inside its track regardless of content length; auto-fill
   picks however many 220px+ columns actually fit the panel's real width, so
   it naturally goes from 1 column on a phone up to 3-4 on a wide desktop
   without a stack of hand-picked breakpoints -- and there is nothing left
   to scroll, so no scrollbar (native or hidden-via-mask) can ever show. */
.collections{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.collection{background:linear-gradient(135deg,#1b241d,#111612);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;min-width:0}
.collection b{display:block;margin-bottom:5px}.collection small{color:var(--muted)}
.contentGrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;padding:0 22px 22px}
/* Reference profile cards: 2 columns is the deliberate desktop default (the
   panel shares its row with a 330px detail sidebar, so 3 columns here would
   mean ~180px cards -- title/tag text would clip). minmax(0,..) is still the
   overflow guard regardless of column count. */
.profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}.profile{background:#0d110e;border:1px solid var(--line);border-radius:15px;padding:15px;min-height:165px;display:flex;flex-direction:column;transition:.2s}.profile:hover{border-color:#506053;transform:translateY(-2px)}.profile.active{border-color:var(--green);box-shadow:0 0 0 1px #8df56d33}.profile h3{margin:5px 0;font-size:16px}.profile .category{color:var(--blue);font-size:11px}.profile p{color:var(--muted);font-size:12px;line-height:1.4;flex:1}.profile footer{display:flex;justify-content:space-between;align-items:center}.label{font-size:9px;color:#dfb96f;background:#332b1d;padding:4px 6px;border-radius:20px}.detail{background:#0b0e0c;border:1px solid var(--line);border-radius:16px;padding:18px;position:sticky;top:100px}.detail h2{font-size:23px}.traitGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.traitGrid div{border-bottom:1px solid #ffffff0d;padding:8px 0}.traitGrid b{display:block;font-size:11px;color:var(--muted);text-transform:uppercase}.traitGrid span{font-size:13px}.tagCloud,.selectedTags,.feedback{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.tag{background:#161b17!important;color:#8e9890!important;border:1px solid #303831!important;padding:8px 10px!important;font-size:10px!important}.tag:hover{border-color:#607264!important;box-shadow:0 5px 18px #0008}.tag.on{background:var(--green)!important;color:#081008!important;border-color:var(--green)!important}.tag.on:before{content:'✓ ';font-weight:900}.miniActions{display:flex;gap:8px}.miniActions button{flex:1}.activeProfile{background:#101a12;border:1px solid #35513a;border-radius:14px;padding:14px;margin-top:14px}.activeProfile dl{display:grid;grid-template-columns:90px 1fr;margin:0;gap:6px}.activeProfile dt{color:var(--muted)}.activeProfile dd{margin:0}.recommend{background:#12191f;border:1px solid #263c4a;border-radius:14px;padding:14px;margin-top:12px}.recommend h3{color:var(--blue);margin:0 0 8px}.recommend p{color:var(--muted);font-size:12px}.actions{display:flex;gap:10px;margin-top:16px}.actions button{flex:1}.results{display:grid;gap:16px;margin:22px 0}.hidden{display:none!important}.resultHead{display:flex;justify-content:space-between}.badge{border:1px solid var(--line);border-radius:20px;padding:7px 10px}.badge.pass{color:var(--green)}.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.metric{background:#090c0a;padding:12px;border-radius:10px}.metric b{display:block;font-size:18px}.metric span{font-size:9px;color:var(--muted);text-transform:uppercase}.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.player{padding:16px}.player audio{width:100%}.solo{background:#1b211c;color:var(--text);padding:7px 10px}.downloads{display:flex;gap:8px;flex-wrap:wrap}.downloads a{color:var(--text);text-decoration:none;padding:9px;border:1px solid var(--line);border-radius:8px}pre{background:#080a09;padding:15px;border-radius:12px;max-height:340px;overflow:auto;color:#bdc6bf;white-space:pre-wrap}.review textarea{width:100%;min-height:70px;background:#090c0a;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:12px}.stars{display:flex;gap:6px}.stars button{background:#1a201b;color:var(--text)}.stars button.on{background:var(--green);color:#071006}footer.siteFooter{padding:30px 0;color:var(--muted);border-top:1px solid #ffffff10;margin-top:30px}@media(max-width:1100px){.profiles{grid-template-columns:repeat(2,1fr)}.contentGrid{grid-template-columns:1fr}.detail{position:static}.layout{grid-template-columns:290px 1fr}}@media(max-width:800px){.shell{padding:0 14px}.workflow{grid-template-columns:repeat(5,auto);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.workflow::-webkit-scrollbar{display:none;height:0}.step span{display:none}.layout{grid-template-columns:1fr}.sticky{position:static}.profiles{grid-template-columns:1fr 1fr}.compare{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.profiles{grid-template-columns:1fr}.contentGrid,.browserHead{padding-left:14px;padding-right:14px}.hero h1{font-size:42px}.metrics{grid-template-columns:repeat(2,1fr)}}
.accountBilling{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:.78rem}.accountBilling a{color:#b8c1bd;text-decoration:none}.accountBilling span{color:#8df56d}
.postRenderActions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding:18px;background:#101513;border:1px solid #28342f;border-radius:16px}.postRenderActions button:first-child{font-size:1.05rem;padding:14px 22px}.versions{margin-top:18px}.version{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,.6fr) auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #29312e}.version small{color:#9ba8a2}.version div{display:flex;gap:7px;flex-wrap:wrap}.step.done i{background:#34513e;color:#8df56d}@media(max-width:760px){.version{grid-template-columns:1fr}.postRenderActions button{width:100%}}
.modalOverlay{position:fixed;inset:0;z-index:1000;background:rgba(2,5,4,.82);backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px}.authModal{position:relative;width:min(460px,100%);max-height:92vh;overflow:auto;background:linear-gradient(155deg,#171d1a,#0d110f);border:1px solid #34423b;border-radius:22px;padding:30px;box-shadow:0 24px 90px rgba(0,0,0,.7),0 0 38px rgba(141,245,109,.08)}.modalClose{position:absolute;right:14px;top:12px;background:transparent;border:0;color:#aab5b0;font-size:1.8rem}.authTabs{display:flex;gap:8px;margin:18px 0}.authTabs button{flex:1;background:#1b221f;color:#9aa69f}.authTabs button.on{background:#8df56d;color:#071007}.authModal form,.authModal label{display:grid;gap:8px}.authModal form{gap:15px}.authModal input{background:#090d0b;border:1px solid #35423c;border-radius:10px;color:#f5faf7;padding:13px}.inlineError{min-height:20px;color:#ff8e8e;font-size:.88rem}.textButton{background:transparent;color:#aebbb4;border:0}.buttonLink{display:inline-block;text-decoration:none;text-align:center;padding:12px 16px;border-radius:10px;margin-left:8px}.previewAllowance{font-size:.75rem;color:#aab6b0;margin-left:8px;align-self:center}.previewAllowance b{color:#8df56d}.previewAllowance.limit,.previewAllowance.limit b{color:#ffb770}.actions button small{margin-left:6px;padding:2px 5px;border:1px solid #8df56d;border-radius:5px;color:#8df56d}.hidden{display:none!important}@media(max-width:620px){.accountBilling{flex-wrap:wrap;justify-content:flex-end}.authModal{padding:24px 18px}.previewAllowance{width:100%;margin:7px 0}.buttonLink{margin:8px 0 0;display:block}}
.planBadge{display:inline-block;margin-left:6px;padding:2px 5px;border:1px solid #8df56d;border-radius:5px;color:#8df56d;font-size:.62rem;letter-spacing:.08em}
.heroActions{margin-top:20px}.heroActions .button{display:inline-block;text-decoration:none;font-size:15px;padding:14px 22px}
.recentProjects{padding:6px 0 30px}.recentProjects h2{font-size:16px;color:var(--muted);letter-spacing:.08em;margin:0 0 14px}
.recentProjectsList{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.recentProject{padding:18px}.recentProject h3{margin:0 0 6px;font-size:15px}.recentProject .buttonLink{margin-top:12px}