:root{--site-bg:#121016;--site-raised:#1c1922;--site-ink:#f3eef8;--site-quiet:#b6a9c7;--site-primary:#e11d74;--site-accent:#f5b700;--site-edge:#2e2a36;--site-rad:22px;--site-measure:1080px;--site-heading:'Unbounded',system-ui,sans-serif;--site-font-body:'Onest',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--site-bg);color:var(--site-ink);font:16px/1.78 var(--site-font-body);color-scheme:dark}
img{max-width:100%;height:auto} a{color:var(--site-primary);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--site-heading);line-height:1.2;letter-spacing:-.01em;color:var(--site-ink)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.75em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1.25em}
.frame{max-width:var(--site-measure);margin:0 auto;padding:0 1rem} .content{max-width:var(--site-measure);margin:0 auto;padding:1.2rem 1rem 3rem}
.skip{position:absolute;left:-9999px} .skip:focus{left:1rem;top:1rem;background:var(--site-raised);padding:.5rem;z-index:99}
.header-inner{max-width:var(--site-measure);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.wordmark{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--site-heading);color:var(--site-ink);text-decoration:none}
.site-nav{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .site-nav a{color:var(--site-ink);text-decoration:none;font-weight:600;font-size:.95rem}
.page-head{background:transparent;padding-top:.8rem} .header-inner{background:var(--site-raised);border:1px solid var(--site-edge);border-radius:999px;padding:.5rem 1.1rem}  .site-nav a{padding:.3em .8em;border-radius:999px} .site-nav a:hover,.site-nav a[aria-current]{background:color-mix(in srgb,var(--site-primary) 14%,transparent)}
.title-block{margin:1rem 0 1.4rem} .standfirst{font-size:1.12rem;max-width:46em;color:var(--site-quiet)} 
.widget{margin:1.4rem 0 2rem}
.aside-note{margin:1.4em 0;padding:.9em 1.1em;background:var(--site-raised);border-left:4px solid var(--site-accent);border-radius:0 var(--site-rad) var(--site-rad) 0}
.expr{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--site-raised);border:1px dashed var(--site-primary);border-radius:var(--site-rad);overflow-x:auto}
.data-wrap{margin:1.2em 0;overflow-x:auto;border:1px solid var(--site-edge);border-radius:var(--site-rad);background:var(--site-raised)}
.data-table{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .data-table th,.data-table td{padding:.5em .75em;border-bottom:1px solid var(--site-edge);text-align:left}
.data-table thead th{background:color-mix(in srgb,var(--site-edge) 60%,var(--site-raised))}
ol.howto{padding-left:1.3em} ol.howto>li{margin:.5em 0}
.visual{margin:1.6em 0;text-align:center} .visual img{width:100%;max-width:720px;border-radius:var(--site-rad);border:1px solid var(--site-edge);background:#fff} .visual figcaption{font-size:.9em;color:var(--site-quiet)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.link-card{display:block;padding:1.1rem;background:var(--site-raised);border-radius:var(--site-rad);background:color-mix(in srgb,var(--site-edge) 45%,var(--site-raised));border:1px solid transparent;color:var(--site-ink);text-decoration:none}
.link-card b{display:block;font-family:var(--site-heading);margin-bottom:.35rem} .link-card span{color:var(--site-quiet);font-size:.92rem} .link-card:hover{border-color:var(--site-primary)}
.link-card--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .link-card--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--site-ink) 14%,transparent)}
.card-img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .card-txt{display:block;padding:1rem 1.1rem 1.1rem} .card-txt>span{display:block}
.blist a,.brow,.post-kicker{background:none!important}
.card-meta{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--site-primary)}
.tiles--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .tiles--feat>.link-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .tiles--feat>.link-card:first-child b{font-size:1.35rem}
.blist{display:grid;gap:1rem;margin:1.2em 0} .brow{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--site-raised);border:1px solid var(--site-edge);border-radius:var(--site-rad);overflow:hidden;color:var(--site-ink);text-decoration:none}
.brow .card-img{height:100%;aspect-ratio:auto;min-height:126px} .brow b{display:block;font-family:var(--site-heading);font-size:1.12rem;margin-bottom:.3rem} .brow .card-txt>span{color:var(--site-quiet);font-size:.93rem} .brow:hover{border-color:var(--site-primary)}
.blist--min{list-style:none;padding:0;counter-reset:bl;gap:0} .blist--min li{counter-increment:bl;border-top:1px solid var(--site-edge)} .blist--min li:last-child{border-bottom:1px solid var(--site-edge)}
.blist--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--site-ink);text-decoration:none} .blist--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--site-heading);color:var(--site-primary)}
.blist--min b{font-family:var(--site-heading);font-size:1.15rem} .blist--min span{color:var(--site-quiet);font-size:.93rem} .blist--min a:hover b{color:var(--site-primary)}
.post-head--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--site-rad);overflow:hidden} .post-head--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.post-ov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .post-ov h1,.post-ov .post-meta,.post-ov .post-kicker{color:#fff}
.post-head--band{background:var(--site-primary);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--site-rad)} .post-head--band h1,.post-head--band .post-meta,.post-head--band .post-kicker{color:#fff}
.post-head--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .post-head--split .post-cover{margin:0}
.on-this-page--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .on-this-page--chips li{margin:0} .on-this-page--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--site-edge);border-radius:999px;background:var(--site-bg);text-decoration:none;font-size:.88rem}
.on-this-page--rail{background:none;border:0;border-left:3px solid var(--site-accent);border-radius:0;padding:.2rem 0 .2rem 1rem}
.i18n--globe summary{display:flex;align-items:center;gap:.35rem} .langpills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .langpills a{padding:.25rem .7rem;border:1px solid var(--site-edge);border-radius:999px;text-decoration:none} .langpills a[aria-current]{background:var(--site-primary);border-color:var(--site-primary);color:#fff}
@media (max-width:700px){.tiles--feat{grid-template-columns:1fr} .tiles--feat>.link-card:first-child{display:flex} .brow{grid-template-columns:1fr} .brow .card-img{min-height:0;aspect-ratio:1200/630} .post-head--split{grid-template-columns:1fr} .post-ov{position:static;background:var(--site-primary);padding:1.2rem} .post-head--overlay>img{min-height:0}}
.post{max-width:48rem;margin:0 auto} .post-head{margin:.6rem 0 1.2rem} .post-head h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.post-kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--site-primary);text-decoration:none}
.upd{color:var(--site-quiet);font-size:.9rem;margin:2rem 0 0} .sign{font-style:italic;color:var(--site-quiet)} .post-meta{color:var(--site-quiet);font-size:.92rem;margin:0} .post-cover{margin:0 0 1.6rem} .post-cover img{display:block;width:100%;height:auto;border-radius:var(--site-rad)}
.post .standfirst{font-size:1.2rem;color:var(--site-ink)} .post .standfirst::first-letter{font-family:var(--site-heading);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--site-primary)}
.post .on-this-page--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--site-raised);border:1px solid var(--site-edge);border-left:4px solid var(--site-primary);border-radius:var(--site-rad);font-size:.95rem}
.on-this-page--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .on-this-page--post li{margin:.2rem 0}
.post h3{color:var(--site-primary)} .post blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--site-accent);font-size:1.1em}
.qa h3{font-size:1.05rem;margin-top:1.3em}
.path{font-size:.88rem;color:var(--site-quiet);margin:.4rem 0 1rem} .path a{color:var(--site-quiet)}
.action{margin:2.4rem 0;padding:1.4rem;background:var(--site-raised);border-radius:var(--site-rad);background:color-mix(in srgb,var(--site-edge) 45%,var(--site-raised));border:1px solid transparent;text-align:center}
.button{display:inline-block;padding:.7em 1.4em;background:var(--site-primary);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.site-footer{border-top:1px solid var(--site-edge);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--site-quiet);background:var(--site-raised)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .site-footer a{color:var(--site-quiet)} .site-footer{text-align:center} .site-footer nav{justify-content:center}
.chunk>h2{border-top:2px solid var(--site-edge);padding-top:1rem}

.i18n{position:relative} .i18n summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--site-edge);border-radius:999px;font-size:.85rem}
.langs-list{position:absolute;right:0;top:120%;background:var(--site-raised);border:1px solid var(--site-edge);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.langs-list a{padding:.3rem .5rem;text-decoration:none;color:var(--site-ink)} .langs-list a[aria-current]{font-weight:700;color:var(--site-primary)}
.codes{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .codes a{text-decoration:none;color:var(--site-quiet);padding:.1rem .3rem;border-radius:4px} .codes a[aria-current]{color:var(--site-primary);background:color-mix(in srgb,var(--site-primary) 12%,transparent)}
[data-ad]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-ad]:empty{margin:0}
[data-ad="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--site-raised)}
[data-ad="sidebar_left"],[data-ad="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-ad="sidebar_left"]{left:12px} [data-ad="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-ad="sidebar_left"],[data-ad="sidebar_right"]{display:none}}
.adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--site-quiet)}
body{background-image:radial-gradient(color-mix(in srgb,var(--site-primary) 16%,transparent) 1px,transparent 1.5px);background-size:22px 22px}
.button{border-radius:var(--site-rad);box-shadow:0 4px 0 color-mix(in srgb,var(--site-primary) 55%,#000)} .button:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--site-primary) 55%,#000)}
.data-table th,.data-table td{border:1px solid var(--site-edge)} .data-table thead th{background:var(--site-primary);color:#fff}
.chunk>h2::after{content:'';display:block;width:3.2rem;height:4px;margin-top:.45rem;border-radius:2px;background:linear-gradient(90deg,var(--site-primary),var(--site-accent))}
.chunk a:not(.button):not(.link-card){text-decoration-thickness:2px}
.title-block--art{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;text-align:left} .title-block--art .art{width:170px;height:170px;display:grid;place-items:center} .art svg{width:100%;height:100%;filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--site-primary) 35%,transparent))} .art--ring{border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--site-accent) 30%,transparent) 0 38%,transparent 39% 52%,color-mix(in srgb,var(--site-primary) 18%,transparent) 53% 66%,transparent 67%)} .art--ring svg{width:56%;height:56%} @media(max-width:700px){.title-block--art{grid-template-columns:1fr} .title-block--art .art{display:none}}
@media (max-width:640px){.header-inner{gap:.5rem} .site-nav{gap:.8rem}}

/* ==========================================================================
   Band Name Generator — site-native styles
   Colors, radius and fonts come only from the site tokens (--t-*).
   ========================================================================== */

.bng-container {
    --bng-on-prim: var(--site-bg);
    --bng-tint: var(--site-raised);
    --bng-r-in: calc(var(--site-rad) * .6);
    --bng-r-card: calc(var(--site-rad) * .75);
    --bng-r-btn: calc(var(--site-rad) * .45);

    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: var(--site-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--site-ink);
    color-scheme: inherit;
    box-sizing: border-box;
}

/* text on the primary color: black or white picked from the primary's lightness */
@supports (color: lch(from currentColor l c h)) {
    .bng-container,
    .bng-toast {
        --bng-on-prim: lch(from var(--site-primary) calc((52 - l) * 100) 0 0);
    }
}

@supports (background: color-mix(in srgb, currentColor 50%, transparent)) {
    .bng-container {
        --bng-tint: color-mix(in srgb, var(--site-primary) 14%, var(--site-raised));
    }
}

.bng-container *,
.bng-container *::before,
.bng-container *::after {
    box-sizing: border-box;
}

.bng-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Header: only the keyboard-shortcuts button remains visible (title = page H1)
   ========================================================================== */

.bng-header {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 3;
    margin: 0;
}

.bng-input-section > .bng-field-group:first-child .bng-label {
    padding-right: 3rem;
}

.bng-shortcuts-wrap {
    position: relative;
    display: inline-flex;
}

.bng-shortcuts-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    padding: .65rem .85rem;
    background: var(--site-bg);
    color: var(--site-ink);
    border: 1px solid var(--site-edge);
    border-radius: var(--bng-r-in);
    font-size: .8125rem;
    white-space: nowrap;
    z-index: 50;
}

.bng-shortcuts-tooltip.is-visible {
    display: block;
}

.bng-tooltip-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 3px 0;
}

.bng-tooltip-row kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--site-raised);
    border: 1px solid var(--site-edge);
    border-radius: var(--bng-r-btn);
    color: var(--site-ink);
    font-family: inherit;
    font-size: .75rem;
    line-height: 1.5;
}

.bng-tooltip-row span {
    margin-left: auto;
    padding-left: 1rem;
    color: var(--site-quiet);
}

/* ==========================================================================
   Panels
   ========================================================================== */

.bng-section {
    min-width: 0;
    margin: 0 0 1rem;
    padding: clamp(1rem, 3vw, 1.6rem);
    background: var(--site-raised);
    border: 1px solid var(--site-edge);
    border-radius: var(--site-rad);
}

/* ==========================================================================
   Fields
   ========================================================================== */

.bng-field-group {
    min-width: 0;
    margin-bottom: 1.15rem;
}

.bng-field-group:last-child {
    margin-bottom: 0;
}

.bng-label {
    display: block;
    margin-bottom: .45rem;
    font-family: var(--site-heading);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--site-quiet);
}

.bng-input,
.bng-select {
    width: 100%;
    min-height: 46px;
    padding: .65rem 1rem;
    background: var(--site-bg);
    color: var(--site-ink);
    border: 1px solid var(--site-edge);
    border-radius: var(--bng-r-in);
    font-family: var(--site-font-body);
    font-size: 1rem;
    transition: border-color 150ms ease;
}

.bng-input::placeholder {
    color: var(--site-quiet);
    opacity: 1;
}

.bng-select {
    cursor: pointer;
    appearance: auto;
}

.bng-select option {
    background: var(--site-raised);
    color: var(--site-ink);
}

.bng-input:hover,
.bng-select:hover {
    border-color: var(--site-quiet);
}

.bng-input:focus,
.bng-select:focus {
    border-color: var(--site-primary);
    outline: 2px solid var(--site-primary);
    outline-offset: 1px;
}

/* ==========================================================================
   Genre + band type row
   ========================================================================== */

.bng-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 1.5rem;
}

.bng-genre-group {
    flex: 1 1 220px;
    max-width: 320px;
}

.bng-type-group-wrap {
    flex: 1 1 300px;
}

.bng-type-group {
    display: inline-flex;
    max-width: 100%;
    padding: 3px;
    gap: 3px;
    background: var(--site-bg);
    border: 1px solid var(--site-edge);
    border-radius: var(--site-rad);
}

.bng-type-btn {
    min-height: 40px;
    padding: .45rem 1rem;
    background: transparent;
    color: var(--site-quiet);
    border: 0;
    border-radius: var(--site-rad);
    font-family: var(--site-font-body);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.bng-type-btn:hover {
    color: var(--site-ink);
}

.bng-type-btn.active {
    background: var(--site-primary);
    color: var(--bng-on-prim);
}

/* ==========================================================================
   Vibe pills
   ========================================================================== */

.bng-vibes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.bng-vibe-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 38px;
    padding: .45rem .95rem;
    background: var(--site-bg);
    color: var(--site-ink);
    border: 1px solid var(--site-edge);
    border-radius: var(--site-rad);
    font-family: var(--site-font-body);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.bng-vibe-btn:hover {
    border-color: var(--site-primary);
}

.bng-vibe-btn.active {
    background: var(--site-primary);
    border-color: var(--site-primary);
    color: var(--bng-on-prim);
}

.bng-vibe-emoji {
    font-size: .95rem;
    line-height: 1;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.bng-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .65rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--site-rad);
    font-family: var(--site-font-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, filter 150ms ease;
}

.bng-btn svg {
    flex-shrink: 0;
}

.bng-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.bng-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.bng-btn-primary {
    background: var(--site-primary);
    color: var(--bng-on-prim);
    font-family: var(--site-heading);
    font-weight: 700;
    letter-spacing: .01em;
}

.bng-btn-primary:hover:not(:disabled) {
    filter: brightness(1.08) saturate(1.05);
}

.bng-btn-secondary {
    background: transparent;
    color: var(--site-ink);
    border-color: var(--site-edge);
}

.bng-btn-secondary:hover:not(:disabled) {
    border-color: var(--site-primary);
}

.bng-btn-ghost {
    background: transparent;
    color: var(--site-quiet);
}

.bng-btn-ghost:hover {
    color: var(--site-ink);
}

.bng-btn-sm {
    min-height: 36px;
    padding: .35rem .85rem;
    font-size: .85rem;
}

.bng-copy-all-btn {
    background: var(--bng-tint);
    color: var(--site-ink);
    border-color: var(--site-edge);
}

.bng-copy-all-btn:hover:not(:disabled) {
    border-color: var(--site-primary);
}

.bng-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    color: var(--site-quiet);
    border: 1px solid var(--site-edge);
    border-radius: var(--bng-r-btn);
    cursor: pointer;
}

.bng-btn-icon:hover,
.bng-btn-icon[aria-expanded="true"] {
    color: var(--site-ink);
    border-color: var(--site-quiet);
}

.bng-btn-danger {
    background: transparent;
    color: var(--site-quiet);
    border-color: var(--site-edge);
}

.bng-btn-danger:hover {
    color: var(--site-ink);
    border-color: var(--site-accent);
}

.bng-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 1.4rem;
}

.bng-actions-row .bng-generate-btn {
    order: -1;
}

.bng-actions-row .bng-reset-btn {
    margin-left: auto;
}

/* ==========================================================================
   Results
   ========================================================================== */

.bng-results-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
}

.bng-results-title {
    margin: 0;
    padding: 0;
    font-family: var(--site-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--site-ink);
}

.bng-names-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.bng-name-card {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: .95rem 1rem .85rem;
    background: var(--site-bg);
    border: 1px solid var(--site-edge);
    border-radius: var(--bng-r-card);
    animation: bngFadeIn .35s ease both;
    transition: border-color 150ms ease;
}

.bng-name-card:hover,
.bng-name-card:focus-within {
    border-color: var(--site-primary);
}

.bng-name-text {
    font-family: var(--site-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.005em;
    color: var(--site-ink);
    overflow-wrap: anywhere;
}

.bng-name-genre {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--site-quiet);
}

.bng-name-actions {
    display: flex;
    gap: .35rem;
    margin-top: .55rem;
}

.bng-name-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: var(--site-quiet);
    border: 1px solid var(--site-edge);
    border-radius: var(--bng-r-btn);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.bng-name-action-btn:hover {
    color: var(--site-ink);
    border-color: var(--site-quiet);
}

.bng-name-action-btn.favorited {
    color: var(--site-primary);
    border-color: var(--site-primary);
    background: var(--bng-tint);
}

.bng-name-action-btn.copied {
    color: var(--site-accent);
    border-color: var(--site-accent);
}

.bng-more-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    margin-top: 1.25rem;
}

.bng-names-count {
    font-size: .85rem;
    color: var(--site-quiet);
}

/* ==========================================================================
   Favorites
   ========================================================================== */

.bng-favorites-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 40px;
    padding: 0;
    background: transparent;
    color: var(--site-ink);
    border: 0;
    font-family: var(--site-heading);
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bng-favorites-toggle:hover .bng-fav-chevron {
    color: var(--site-primary);
}

.bng-fav-chevron {
    flex-shrink: 0;
    transition: transform 250ms ease;
}

.bng-favorites-toggle[aria-expanded="true"] .bng-fav-chevron {
    transform: rotate(180deg);
}

/* collapsed panel is also hidden from keyboard and screen readers */
.bng-favorites-content {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .3s ease, visibility 0s linear .3s;
}

.bng-favorites-content.open {
    max-height: 640px;
    overflow-y: auto;
    visibility: visible;
    padding-top: 1rem;
    transition: max-height .3s ease;
}

.bng-favorites-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.bng-fav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
    padding: .45rem .5rem .45rem .9rem;
    background: var(--site-bg);
    border: 1px solid var(--site-edge);
    border-radius: var(--bng-r-in);
    animation: bngFadeIn .25s ease;
}

.bng-fav-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--site-heading);
    font-weight: 600;
    color: var(--site-ink);
}

.bng-fav-item-actions {
    display: flex;
    flex-shrink: 0;
    gap: .35rem;
}

.bng-favorites-empty p {
    margin: .75rem 0;
    text-align: center;
    font-size: .9rem;
    color: var(--site-quiet);
}

.bng-favorites-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--site-edge);
}

.bng-btn-promo {
    width: 100%;
    margin-top: 1rem;
}

/* ==========================================================================
   Toast (appended to <body>, outside the container)
   ========================================================================== */

.bng-toast {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 999999;
    max-width: min(420px, calc(100vw - 2rem));
    padding: .75rem 1.1rem;
    background: var(--site-ink);
    color: var(--site-bg);
    border-left: 4px solid var(--site-quiet);
    border-radius: calc(var(--site-rad) * .6);
    font-family: var(--site-font-body);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
    animation: bngSlideIn .3s ease;
}

.bng-toast-success { border-left-color: var(--site-primary); }
.bng-toast-error { border-left-color: var(--site-accent); }

.bng-toast.fade-out {
    animation: bngFadeOut .3s ease forwards;
}

/* ==========================================================================
   Focus
   ========================================================================== */

.bng-container button:focus-visible,
.bng-container a:focus-visible {
    outline: 2px solid var(--site-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes bngFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bngSlideIn {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes bngFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bng-container *,
    .bng-toast {
        animation: none !important;
        transition: none !important;
    }
}

/* keyboard shortcuts make no sense on touch-only devices */
@media (hover: none) and (pointer: coarse) {
    .bng-header { display: none; }
    .bng-input-section > .bng-field-group:first-child .bng-label { padding-right: 0; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
    .bng-names-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .bng-genre-group {
        flex-basis: 100%;
        max-width: none;
    }

    .bng-type-group-wrap {
        flex-basis: 100%;
    }

    .bng-type-group {
        display: flex;
        width: 100%;
    }

    .bng-type-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        padding: .4rem .45rem;
        font-size: .82rem;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }

    .bng-vibes {
        gap: .4rem;
    }

    .bng-vibe-btn {
        padding: .4rem .75rem;
        font-size: .82rem;
    }

    .bng-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .bng-actions-row .bng-btn {
        width: 100%;
        min-height: 48px;
        white-space: normal;
    }

    .bng-actions-row .bng-reset-btn {
        margin-left: 0;
    }

    .bng-names-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
    }

    .bng-name-card {
        flex-direction: row;
        align-items: center;
        gap: .5rem;
        padding: .55rem .6rem .55rem .85rem;
    }

    .bng-name-card .bng-name-text {
        flex: 1;
        min-width: 0;
        font-size: .95rem;
    }

    .bng-name-card .bng-name-genre {
        display: none;
    }

    .bng-name-card .bng-name-actions {
        flex-shrink: 0;
        margin: 0 0 0 auto;
        gap: .25rem;
    }

    .bng-more-row {
        flex-direction: column;
    }

    .bng-more-row .bng-btn {
        width: 100%;
    }

    .bng-toast {
        left: 1rem;
        right: 1rem;
        bottom: 5rem;
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 379px) {
    .bng-section {
        padding: .8rem;
    }

    .bng-name-action-btn {
        width: 34px;
        height: 34px;
    }

    .bng-name-card .bng-name-text {
        font-size: .875rem;
    }
}

/* ==========================================================================
   STAGE LOOK — gig posters, ticket stubs, coloured chips, setlist
   Every colour is a site token, a color-mix() of tokens, or a hue turned from
   --site-primary (relative colour). Text on coloured fills picks black/white from the
   fill's own lightness, so any token values stay readable.
   ========================================================================== */

.bng-container {
    --bng-card-bg: var(--site-bg);
    --bng-card-ink: var(--site-ink);
    --bng-glow: transparent;
}

/* --- input panel: two soft spotlights ----------------------------------- */
@supports (background: color-mix(in srgb, currentColor 50%, transparent)) {
    .bng-input-section {
        background:
            radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--site-primary) 17%, transparent), transparent 62%),
            radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, var(--site-accent) 11%, transparent), transparent 60%),
            var(--site-raised);
    }

    .bng-results-section {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--site-primary) 9%, var(--site-raised)), var(--site-raised) 220px);
    }

    .bng-btn-primary {
        box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--site-primary) 85%, transparent);
    }

    .bng-btn-primary:hover:not(:disabled) {
        box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--site-primary) 95%, transparent);
    }
}

.bng-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* marquee stripe under the results title */
.bng-results-header {
    padding-bottom: .9rem;
    background: repeating-linear-gradient(90deg, var(--site-primary) 0 16px, var(--site-accent) 16px 32px) left bottom / 100% 3px no-repeat;
}

.bng-results-title {
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* --- vibe pills: every vibe has its own colour ---------------------------- */
.bng-vibe-btn { --bng-vibe: var(--site-primary); }

@supports (color: oklch(from currentColor l c h)) {
    .bng-vibe-btn[data-vibe="energetic"]  { --bng-vibe: var(--site-accent); }
    .bng-vibe-btn[data-vibe="dark"]       { --bng-vibe: oklch(from var(--site-primary) l c calc(h - 70)); }
    .bng-vibe-btn[data-vibe="dreamy"]     { --bng-vibe: oklch(from var(--site-primary) l c calc(h - 110)); }
    .bng-vibe-btn[data-vibe="rebellious"] { --bng-vibe: var(--site-primary); }
    .bng-vibe-btn[data-vibe="chill"]      { --bng-vibe: oklch(from var(--site-primary) l c calc(h - 150)); }
    .bng-vibe-btn[data-vibe="mysterious"] { --bng-vibe: oklch(from var(--site-primary) l c calc(h - 40)); }
    .bng-vibe-btn[data-vibe="playful"]    { --bng-vibe: color-mix(in oklch, var(--site-primary) 45%, var(--site-accent)); }
    .bng-vibe-btn[data-vibe="aggressive"] { --bng-vibe: oklch(from var(--site-primary) l c calc(h + 25)); }
    .bng-vibe-btn[data-vibe="epic"]       { --bng-vibe: oklch(from var(--site-accent) l c calc(h - 25)); }
    .bng-vibe-btn[data-vibe="retro"]      { --bng-vibe: oklch(from var(--site-primary) l c calc(h - 190)); }

    .bng-vibe-btn {
        border-color: color-mix(in srgb, var(--bng-vibe) 45%, var(--site-edge));
    }

    .bng-vibe-btn:hover {
        border-color: var(--bng-vibe);
    }

    .bng-vibe-btn.active {
        background: var(--bng-vibe);
        border-color: var(--bng-vibe);
        color: lch(from var(--bng-vibe) calc((52 - l) * 100) 0 0);
        box-shadow: 0 6px 18px -10px var(--bng-vibe);
    }
}

/* --- name cards: gig posters & ticket stubs ------------------------------- */
.bng-name-card {
    position: relative;
    background: var(--bng-card-bg);
    color: var(--bng-card-ink);
    transform: rotate(var(--tilt, 0deg));
    animation: bngDeal .55s cubic-bezier(.2, .9, .25, 1.15) backwards;
    animation-delay: calc(var(--deal, 0) * 45ms);
    transition: transform 200ms ease, border-color 150ms ease, box-shadow 200ms ease;
}

.bng-name-card:hover,
.bng-name-card:focus-within {
    transform: rotate(0deg) translateY(-3px);
}

.bng-name-card .bng-name-text {
    color: var(--bng-card-ink);
}

/* typographic treatments (picked per name) */
.bng-font-0 .bng-name-text { text-transform: uppercase; font-weight: 800; letter-spacing: .03em; }
.bng-font-1 .bng-name-text { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.bng-font-2 .bng-name-text { text-transform: uppercase; font-size: .9rem; font-weight: 600; letter-spacing: .16em; }
.bng-font-3 .bng-name-text { font-family: var(--site-font-body); font-size: 1.2rem; font-style: italic; font-weight: 600; letter-spacing: -.01em; }
.bng-font-4 .bng-name-text { text-transform: uppercase; font-size: 1.12rem; font-weight: 800; font-stretch: 75%; letter-spacing: -.015em; line-height: 1.05; }

/* poster styles without relative colour: neutral card, coloured frames */
.bng-poster-0 { border-color: var(--site-primary); }
.bng-poster-1 { border-color: var(--site-accent); border-style: dashed; }
.bng-poster-2 { border: 2px solid var(--site-primary); }
.bng-poster-3 { border-top: 4px solid var(--site-accent); }
.bng-poster-4 { border-top: 4px solid var(--site-primary); }
.bng-poster-5 { border-left: 4px solid var(--site-accent); }

@supports (color: lch(from currentColor l c h)) and (background: color-mix(in srgb, currentColor 50%, transparent)) {
    .bng-name-card {
        --bng-card-ink: lch(from var(--bng-card-bg) calc((52 - l) * 100) 0 0);
        border-color: transparent;
        box-shadow: 0 12px 26px -18px var(--bng-glow);
    }

    /* 0 headliner: solid primary */
    .bng-poster-0 { --bng-card-bg: var(--site-primary); --bng-glow: var(--site-primary); }
    /* 1 ticket stub: accent paper, notches, perforation */
    .bng-poster-1 { --bng-card-bg: var(--site-accent); --bng-glow: var(--site-accent); border-style: solid; }
    /* 2 neon: dark card, primary outline + glow on the letters */
    .bng-poster-2 { --bng-card-bg: var(--site-bg); --bng-glow: var(--site-primary); border: 2px solid var(--site-primary); }
    .bng-poster-2 .bng-name-text { text-shadow: 0 0 18px color-mix(in srgb, var(--site-primary) 75%, transparent); }
    /* 3 sunset duotone */
    .bng-poster-3 { --bng-card-bg: color-mix(in oklch, var(--site-primary) 55%, var(--site-accent)); --bng-glow: var(--bng-card-bg); border-top: 1px solid transparent; }
    /* 4 late show: deep wine with a striped header */
    .bng-poster-4 { --bng-card-bg: color-mix(in srgb, var(--site-primary) 24%, var(--site-bg)); --bng-glow: var(--site-primary); border-top: 1px solid transparent; padding-top: 1.3rem; }
    .bng-poster-4::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 7px;
        border-radius: var(--bng-r-card) var(--bng-r-card) 0 0;
        background: repeating-linear-gradient(135deg, var(--site-primary) 0 8px, var(--site-accent) 8px 16px);
    }
    /* 5 after-party: primary turned to a neighbouring hue */
    .bng-poster-5 { --bng-card-bg: oklch(from var(--site-primary) calc(l * .8) c calc(h - 70)); --bng-glow: var(--bng-card-bg); border-left: 1px solid transparent; }
}

/* ticket stub: punched notches + perforated tear line (mask uses no colour) */
.bng-poster-1 {
    -webkit-mask:
        radial-gradient(circle 9px at 0 calc(100% - 3.8rem), transparent 8.5px, currentColor 9px) left / 51% 100% no-repeat,
        radial-gradient(circle 9px at 100% calc(100% - 3.8rem), transparent 8.5px, currentColor 9px) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 9px at 0 calc(100% - 3.8rem), transparent 8.5px, currentColor 9px) left / 51% 100% no-repeat,
        radial-gradient(circle 9px at 100% calc(100% - 3.8rem), transparent 8.5px, currentColor 9px) right / 51% 100% no-repeat;
}

.bng-poster-1 .bng-name-actions {
    padding-top: .6rem;
    border-top: 2px dashed currentColor;
    border-top-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* headliner star */
.bng-poster-0::after {
    content: "\2605";
    position: absolute;
    top: .55rem;
    right: .8rem;
    font-size: .9rem;
    line-height: 1;
    opacity: .55;
    color: var(--bng-card-ink);
}

/* genre chip with its own colour */
.bng-name-genre {
    --bng-genre: var(--site-accent);
    align-self: flex-start;
    margin-top: .3rem;
    padding: .12rem .55rem;
    border-radius: var(--site-rad);
    background: var(--site-raised);
    color: var(--site-ink);
    border: 1px solid var(--site-edge);
    font-size: .66rem;
    font-weight: 700;
}

@supports (color: oklch(from currentColor l c h)) {
    .bng-name-card[data-genre="any"]         .bng-name-genre { --bng-genre: color-mix(in oklch, var(--site-primary), var(--site-accent)); }
    .bng-name-card[data-genre="rock"]        .bng-name-genre { --bng-genre: oklch(from var(--site-primary) l c calc(h + 20)); }
    .bng-name-card[data-genre="metal"]       .bng-name-genre { --bng-genre: oklch(from var(--site-primary) calc(l * .75) calc(c * .5) calc(h - 90)); }
    .bng-name-card[data-genre="pop"]         .bng-name-genre { --bng-genre: oklch(from var(--site-primary) calc(l * 1.15) c calc(h - 20)); }
    .bng-name-card[data-genre="jazz"]        .bng-name-genre { --bng-genre: oklch(from var(--site-accent) calc(l * .8) c calc(h - 30)); }
    .bng-name-card[data-genre="hiphop"]      .bng-name-genre { --bng-genre: var(--site-accent); }
    .bng-name-card[data-genre="electronic"]  .bng-name-genre { --bng-genre: oklch(from var(--site-primary) l c calc(h - 160)); }
    .bng-name-card[data-genre="punk"]        .bng-name-genre { --bng-genre: oklch(from var(--site-accent) l c calc(h + 45)); }
    .bng-name-card[data-genre="indie"]       .bng-name-genre { --bng-genre: oklch(from var(--site-primary) l c calc(h - 120)); }
    .bng-name-card[data-genre="country"]     .bng-name-genre { --bng-genre: oklch(from var(--site-accent) calc(l * .85) c calc(h - 15)); }
    .bng-name-card[data-genre="alternative"] .bng-name-genre { --bng-genre: oklch(from var(--site-primary) l c calc(h - 60)); }

    .bng-name-genre {
        background: var(--bng-genre);
        color: lch(from var(--bng-genre) calc((52 - l) * 100) 0 0);
        border-color: color-mix(in srgb, var(--bng-card-ink) 40%, transparent);
    }
}

/* card buttons follow the card's own ink */
.bng-name-card .bng-name-action-btn {
    color: inherit;
    border-color: color-mix(in srgb, currentColor 35%, transparent);
}

.bng-name-card .bng-name-action-btn:hover {
    color: inherit;
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.bng-name-card .bng-name-action-btn.favorited {
    background: var(--bng-card-ink);
    border-color: var(--bng-card-ink);
    color: var(--bng-card-bg);
}

.bng-name-card .bng-name-action-btn.copied {
    background: color-mix(in srgb, currentColor 18%, transparent);
    border-color: currentColor;
    color: inherit;
}

.bng-name-card .bng-name-action-btn:focus-visible {
    outline-color: currentColor;
}

/* --- favorites as a setlist ------------------------------------------------ */
.bng-favorites-toggle::after {
    content: "";
    flex: 1;
    height: 3px;
    margin-left: .5rem;
    border-radius: var(--site-rad);
    background: repeating-linear-gradient(90deg, var(--site-edge) 0 6px, transparent 6px 12px);
}

.bng-favorites-list {
    position: relative;
    counter-reset: setlist;
    gap: 0;
    padding: 1.4rem 1rem .6rem;
    background: var(--site-bg);
    border: 1px solid var(--site-edge);
    border-radius: var(--bng-r-in);
    transform: rotate(-.4deg);
}

.bng-favorites-list:empty {
    display: none;
}

/* strip of tape holding the setlist */
.bng-favorites-list::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    width: 92px;
    height: 20px;
    transform: translateX(-50%) rotate(-3deg);
    background: var(--site-accent);
    opacity: .75;
    border-radius: calc(var(--site-rad) / 10);
}

.bng-fav-item {
    counter-increment: setlist;
    padding: .5rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px dashed var(--site-edge);
    border-radius: 0;
}

.bng-fav-item:last-child {
    border-bottom: 0;
}

.bng-fav-item::before {
    content: counter(setlist, decimal-leading-zero);
    flex-shrink: 0;
    min-width: 2.1rem;
    font-family: var(--site-heading);
    font-size: .85rem;
    font-weight: 800;
    color: var(--site-accent);
}

.bng-fav-item-name {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
}

@keyframes bngDeal {
    0% { opacity: 0; transform: translate(var(--dx, 0), -22px) rotate(calc(var(--tilt, 0deg) * -7)) scale(.9); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}

@media (max-width: 600px) {
    .bng-name-card { --tilt: 0deg !important; }
    .bng-name-card .bng-name-text { font-size: 1rem; letter-spacing: .01em; }
    .bng-font-2 .bng-name-text { font-size: .85rem; letter-spacing: .1em; }
    .bng-poster-4 { padding-top: .8rem; }
    .bng-poster-0::after { display: none; }
    .bng-poster-1 {
        -webkit-mask: none;
        mask: none;
    }
    .bng-poster-1 .bng-name-actions {
        padding-top: 0;
        padding-left: .5rem;
        border-top: 0;
        border-left: 2px dashed currentColor;
        border-left-color: color-mix(in srgb, currentColor 45%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bng-name-card,
    .bng-name-card:hover,
    .bng-name-card:focus-within {
        transform: none;
    }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .bng-btn,
    .bng-header,
    .bng-name-actions,
    .bng-actions-row,
    .bng-favorites-section,
    .bng-more-row,
    .bng-results-actions,
    .bng-btn-promo {
        display: none !important;
    }
}