/* Gallery: same tokens and header/footer as the landing (site/neuro/index.html). */
:root{
  --page:#07080a;--bg:#0d0e11;--panel:#14151a;--surface:#1d1f26;--raised:#262932;
  --hair:#282b34;--hair2:#3a3e4a;
  --text:#e4e6eb;--dim:#8c919c;--faint:#5c616c;
  --acc:#e9d05a;--accd:#9e8f4a;--on:#1a180d;--cand:#70b4c2;
  --plotT:#111216;--plotB:#0a0b0e;
  --r4:4px;--r5:5px;--r8:8px;--r10:10px;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --brand:"Stack Sans Notch",Inter,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--page);color:var(--text);font:14px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--accd);color:var(--text)}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.cap{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}

header{border-bottom:1px solid var(--hair);background:var(--bg)}
header .wrap{height:52px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.brand b{font-family:var(--brand);font-weight:700;font-size:16px;letter-spacing:.02em}
.brand span{font-size:11px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase}
nav{margin-left:auto;display:flex;gap:18px;font-size:13px;color:var(--dim)}
nav a{text-decoration:none}nav a:hover,nav a[aria-current]{color:var(--text)}
.btn{display:inline-flex;align-items:center;height:32px;border:0;border-radius:var(--r5);padding:0 14px;font-weight:600;font-size:13px;cursor:pointer;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:inset 0 0 0 1px var(--hair);white-space:nowrap}
.btn:hover{background:var(--raised)}
.btn.primary{background:var(--acc);color:var(--on);box-shadow:none}
.btn.primary:hover{filter:brightness(1.06)}
.btn.play[aria-pressed="true"]{background:var(--acc);color:var(--on);box-shadow:none}
footer{margin-top:56px;border-top:1px solid var(--hair);padding:20px 0 40px;color:var(--faint);font-size:12px}

.gh{padding:44px 0 20px}
.gh h1{font-family:var(--brand);font-size:clamp(30px,4.5vw,44px);line-height:1.05;font-weight:700;letter-spacing:-.01em;margin-top:8px}
.gh p{margin-top:12px;max-width:56ch;color:var(--dim);font-size:15px}

.tools{display:flex;flex-direction:column;gap:12px;padding:14px 0 18px;border-top:1px solid var(--hair)}
.srch{display:flex;flex-direction:column;gap:6px;max-width:520px}
.srow{display:flex;gap:8px}
.srow input{flex:1;min-width:0}
.srow .btn{height:34px;white-space:nowrap}
.srch input{height:34px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r5);padding:0 10px;font-size:14px}
.srch input:focus{outline:none;border-color:var(--hair2)}
.srch input::placeholder{color:var(--faint)}
.row{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:28px;padding:0 12px;border:0;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair);font-size:12px;color:var(--dim);cursor:pointer}
.chip:hover{background:var(--raised);color:var(--text)}
.chip.on{color:var(--acc);box-shadow:inset 0 0 0 1px var(--accd);background:var(--raised)}
.count{font:12px var(--mono);color:var(--faint)}

.grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r8);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card.playing{border-color:var(--accd)}
.thumb{height:64px;border-radius:var(--r4);background:linear-gradient(var(--plotT),var(--plotB));overflow:hidden}
.thumb svg{display:block}
.th-wave{fill:none;stroke:var(--cand);stroke-width:1.4;vector-effect:non-scaling-stroke}
.th-env{fill:none;stroke:var(--acc);stroke-width:1.4;vector-effect:non-scaling-stroke}
.th-rail{fill:var(--surface)}
.th-fc{fill:var(--accd)}
.meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.name{font-family:var(--brand);font-weight:700;font-size:15px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.name:hover{color:var(--acc)}
.catb{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);flex:none}
.tags{display:flex;flex-wrap:wrap;gap:4px;min-height:20px}
.tag{font:11px var(--mono);color:var(--dim);background:var(--surface);border-radius:3px;padding:1px 6px}
.acts{display:flex;gap:6px;margin-top:auto}
.empty{padding:40px 0;color:var(--dim)}
.aud{min-height:20px;margin-top:12px;font-size:12px;color:var(--dim)}

/* one preset */
.crumbs{padding:28px 0 12px;font-size:12px;color:var(--faint)}
.crumbs a{text-decoration:none;color:var(--dim)}.crumbs a:hover{color:var(--text)}
.pp{max-width:640px;padding:20px;gap:12px}
.pp h1{font-family:var(--brand);font-size:clamp(28px,4vw,38px);line-height:1.1;font-weight:700}
.pp .lede{color:var(--dim);font-size:15px}
.thumb.big{height:120px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.facts dt{font-size:9.5px;font-weight:600;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.facts dd{font:12px/1.45 var(--mono)}
.pp .acts{margin-top:4px}
@media (max-width:640px){nav{display:none}.grid{grid-template-columns:1fr}}