@font-face{font-family:"Antonio";src:url(fonts/antonio.woff2) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(fonts/courier.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(fonts/courier-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Permanent Marker";src:url(fonts/marker.woff2) format("woff2");font-weight:400;font-display:swap}

/* Zine / straatposter: papier, zwarte inkt, één rode stift en een markeerstift */
:root{
  --paper:#ece5d6;--paper-2:#e3dac6;--paper-3:#f6f1e6;
  --ink:#151311;--soft:#3d3833;--dim:#6f675d;
  --line:#151311;--line-soft:rgba(21,19,17,.22);
  --red:#d3241c;--hi:#ffe23d;
  --tape:rgba(232,221,186,.82);
  --poster:"Antonio","Arial Narrow",Impact,sans-serif;
  --type:"Courier Prime","Courier New",Courier,monospace;
  --marker:"Permanent Marker","Comic Sans MS",cursive;
  --gold:var(--red);--line-strong:var(--ink);--surface:var(--paper-3);
  --thin:var(--poster);--ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.05rem/1.65 var(--type);overflow-x:clip}
/* kopieerkorrel over de hele pagina */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
p{margin:0}
strong,b{font-weight:700}
::selection{background:var(--hi);color:var(--ink)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 18px}
.skip:focus{top:12px}
.title{font:700 clamp(2.6rem,7vw,4.6rem)/.9 var(--poster);text-transform:uppercase;letter-spacing:-.005em}
.center{text-align:center}
mark,.hl{background:linear-gradient(transparent 12%,var(--hi) 12%,var(--hi) 88%,transparent 88%);padding:0 .15em}

/* Navigatie: zwarte balk zoals een stuk gaffatape */
.nav{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px;position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.15rem/.95 var(--poster);letter-spacing:.02em;text-transform:uppercase;color:var(--paper)}
.brand-mark{width:34px;height:34px;color:var(--hi);flex:none}
.menu{display:flex;align-items:center;gap:4px}
.menu a{padding:6px 10px;font:400 .95rem var(--type);color:var(--paper);text-decoration:none}
.menu a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.menu a[aria-current]{background:var(--paper);color:var(--ink)}
.menu .menu-cta{margin-left:10px;background:var(--hi);color:var(--ink);font-weight:700;rotate:-2deg}
.menu .menu-cta:hover{text-decoration:none;rotate:0deg}
.burger{display:none;width:44px;height:44px;background:transparent;border:2px solid var(--paper);cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--paper);transition:.2s}
.burger span:first-child{top:15px}
.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{top:20px;rotate:45deg}
.burger[aria-expanded=true] span:last-child{top:20px;rotate:-45deg}

/* Knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;border:2.5px solid var(--ink);background:transparent;color:var(--ink);font:700 1.05rem/1.1 var(--poster);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:translate .15s,box-shadow .15s}
.btn:hover{translate:-2px -2px;box-shadow:4px 4px 0 var(--ink)}
.btn[hidden]{display:none}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{box-shadow:4px 4px 0 var(--red)}
.btn-paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-paper:hover{box-shadow:4px 4px 0 var(--hi)}
.btn-sm{padding:9px 16px;font-size:.92rem}
.btn-big{width:100%;padding:18px;font-size:1.3rem}
.scribble-link{font:400 1.25rem/1.2 var(--marker);color:var(--red);text-decoration:none;rotate:-2deg;display:inline-block}
.scribble-link:hover{text-decoration:underline wavy;text-underline-offset:5px}
.link{font:700 .95rem var(--type);color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.link:hover{background:var(--hi)}

/* Tape */
.tape{position:absolute;top:-14px;left:50%;width:120px;height:30px;translate:-50% 0;rotate:-3deg;background:var(--tape);box-shadow:0 1px 2px rgba(0,0,0,.12);clip-path:polygon(2% 8%,10% 0,22% 7%,35% 1%,50% 6%,64% 0,78% 6%,90% 1%,100% 7%,98% 92%,88% 100%,74% 94%,60% 100%,46% 94%,32% 100%,18% 95%,6% 100%,0 90%)}

/* Hero */
.hero{padding:clamp(40px,7vw,80px) 0 clamp(56px,8vw,96px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.9fr);gap:clamp(30px,5vw,64px);align-items:center}
.hero-main{position:relative}
.stamp{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:132px;height:132px;border:3px solid var(--red);border-radius:50%;color:var(--red);rotate:-14deg;text-align:center;font:700 .82rem/1.15 var(--type);text-transform:uppercase;letter-spacing:.04em;opacity:.88;position:absolute;right:4%;top:-6px;mix-blend-mode:multiply;box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px var(--red)}
.stamp b{font:700 1.35rem/1 var(--poster);letter-spacing:0;margin-top:4px;max-width:96px}
.hero h1{font:700 clamp(4.4rem,15.5vw,11.5rem)/.82 var(--poster);text-transform:uppercase;margin:0}
.hero h1 span{display:block}
.hero .h-1{letter-spacing:-.01em}
.hero .h-2{display:inline-block;background:var(--ink);color:var(--paper);padding:.04em .12em .02em;margin-top:.06em;rotate:-1.5deg;margin-left:-.05em}
.scrawl{font:400 clamp(1.4rem,3.4vw,2.2rem)/1.15 var(--marker);color:var(--red);rotate:-3deg;margin:22px 0 22px 6px}
.hero-txt{max-width:30em;font-size:1.12rem;color:var(--soft)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}

/* Tracklist: een cassettehoesje dat op de muur is geplakt */
.tracklist{position:relative;display:block;background:var(--paper-3);border:2px solid var(--ink);padding:30px 24px 22px;rotate:2deg;text-decoration:none;box-shadow:6px 7px 0 rgba(21,19,17,.85);transition:rotate .25s}
.tracklist:hover{rotate:.5deg}
.tl-head{font:700 1.9rem/1 var(--poster);text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:10px}
.tracklist ol{list-style:none;margin:0;padding:0}
.tracklist li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--line-soft);font-size:1rem}
.tl-n{font-weight:700;color:var(--red);min-width:2ch}
.tl-foot{margin-top:14px;font:400 1.1rem var(--marker);color:var(--red);text-align:right}

/* Strook tekst: zwarte tape over de pagina */
.strip{background:var(--ink);color:var(--paper);overflow:hidden;rotate:-1deg;margin:0 -12px;border-block:3px solid var(--ink)}
.strip-track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.strip p{display:flex;padding:12px 0;font:700 clamp(1.1rem,2vw,1.5rem)/1 var(--poster);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.strip span{padding:0 22px}
.strip span::after{content:"*";padding-left:44px;color:var(--hi)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Secties */
.sec{padding:clamp(60px,9vw,110px) 0}
.sec-line{border-top:3px solid var(--ink)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px 24px;margin-bottom:clamp(28px,5vw,48px)}
.split{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.6fr);gap:clamp(20px,5vw,70px);align-items:start}
.split-txt{display:grid;gap:1em;font-size:1.12rem;max-width:36em}
.split-txt p:first-child::first-letter{font:700 3.4em/.8 var(--poster);float:left;margin:6px 10px 0 0}
.txt{color:var(--soft);max-width:40em}
.txt-left{margin:16px 0 0}

/* Stappen: gewoon een lijstje, geen kaarten */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:26px}
.step{counter-increment:s;display:grid;grid-template-columns:62px minmax(0,1fr);column-gap:16px}
.step::before{content:counter(s);grid-row:span 3;font:400 3rem/1 var(--marker);color:var(--red)}
.step h3{font:700 1.8rem/1 var(--poster);text-transform:uppercase}
.step p{color:var(--soft)}
.step .step-when{font-weight:700;color:var(--ink);margin-top:4px}
.step-now{font:400 1.1rem var(--marker);color:var(--red);text-transform:none;margin-left:6px}
.step.is-now h3{background:linear-gradient(transparent 55%,var(--hi) 55%);display:inline;justify-self:start}

/* Huisregels: een A4'tje op de muur */
.notice{position:relative;max-width:760px;margin-inline:auto;background:var(--paper-3);border:2px solid var(--ink);padding:clamp(30px,5vw,52px) clamp(22px,5vw,52px) clamp(24px,4vw,40px);rotate:-1deg;box-shadow:5px 6px 0 rgba(21,19,17,.85)}
.notice h2{font:700 clamp(2.4rem,6vw,3.6rem)/.9 var(--poster);text-transform:uppercase;margin-bottom:18px}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rules li{position:relative;padding-left:38px}
.rules li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border:2px solid var(--ink)}
.rules li::after{content:"\2713";position:absolute;left:3px;top:-6px;font:400 1.5rem var(--marker);color:var(--red)}
.notice-foot{margin-top:22px;font:400 1.15rem/1.35 var(--marker);color:var(--red);rotate:-1deg}

/* Awards-pagina */
.award-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(12px,4vw,56px);padding:clamp(28px,4vw,44px) 0;border-bottom:2px dashed var(--line-soft);scroll-margin-top:90px}
.award-row:first-child{padding-top:0}
.award-row h2{font:700 clamp(2.2rem,5vw,3.6rem)/.92 var(--poster);text-transform:uppercase}
.award-row:target h2{background:var(--hi);display:inline;align-self:start}
.award-tag{font:400 1.35rem/1.3 var(--marker);color:var(--red);margin-bottom:10px}
.award-row p:not(.award-tag){color:var(--soft);max-width:34em}
.award-row .link{display:inline-block;margin-top:16px}

/* Pagina-kop */
.page-head{padding:clamp(48px,8vw,90px) 0 clamp(32px,5vw,54px);border-bottom:3px solid var(--ink)}
.page-head h1{font:700 clamp(3.6rem,13vw,8.6rem)/.84 var(--poster);text-transform:uppercase;margin-bottom:18px}
.page-head p{max-width:36em;color:var(--soft);font-size:1.15rem}
.page-head .btn{margin-top:24px}

/* Kaarten: geprinte foto's met tape, een beetje scheef */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:40px 26px}
.card{position:relative;display:flex;flex-direction:column;background:var(--paper-3);padding:12px 12px 18px;border:1px solid rgba(21,19,17,.35);box-shadow:3px 4px 0 rgba(21,19,17,.75);text-decoration:none;transition:rotate .2s,translate .2s}
.card::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;translate:-50% 0;rotate:3deg;background:var(--tape);z-index:2}
.card:nth-child(3n+1){rotate:-1.6deg}
.card:nth-child(3n+2){rotate:1.2deg}
.card:nth-child(3n){rotate:-.6deg}
.card:nth-child(2n)::before{rotate:-4deg;left:42%}
.card:hover{rotate:0deg;translate:0 -3px}
.card[hidden]{display:none}
.card .portrait{margin-bottom:14px}
.card h3{font:700 1.7rem/.95 var(--poster);text-transform:uppercase;margin-bottom:6px}
.card-line{color:var(--soft);font-size:.92rem;line-height:1.45}
.card-cat{margin-top:auto;padding-top:12px;font:400 1.02rem/1.3 var(--marker);color:var(--red)}
.card-cat em{font-style:normal;color:var(--dim)}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.card-tags:empty{display:none}
.tag{display:inline-block;padding:1px 7px;border:1.5px solid var(--ink);font:700 .72rem/1.5 var(--type);text-transform:uppercase}
.tag-win{background:var(--hi)}

/* Portret: zwart-wit kopie, of initialen met stift */
.portrait{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:#cfc6b3;background-image:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(21,19,17,.07) 7px 8px)}
.portrait span{font:400 clamp(3rem,7vw,4.6rem)/1 var(--marker);color:var(--ink);rotate:-6deg}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25) brightness(1.04)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.filters[hidden]{display:none}
.filters button{font:400 .95rem var(--type);padding:6px 12px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.filters button:hover{background:var(--paper-3)}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}

.year+.year{margin-top:clamp(56px,8vw,90px)}
.year-n{font:700 clamp(3.2rem,9vw,6rem)/1 var(--poster);margin-bottom:30px;-webkit-text-stroke:2px var(--ink);color:transparent}

/* Artiest */
.person{padding:clamp(44px,7vw,80px) 0 clamp(36px,5vw,60px);border-bottom:3px solid var(--ink)}
.person-in{display:grid;grid-template-columns:minmax(180px,300px) minmax(0,1fr);gap:clamp(26px,5vw,60px);align-items:end}
.person .portrait{border:10px solid var(--paper-3);outline:1px solid rgba(21,19,17,.35);box-shadow:4px 5px 0 rgba(21,19,17,.75);rotate:-2deg}
.person-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 1.15rem/1.3 var(--marker);color:var(--red)}
.person h1{font:700 clamp(3.2rem,9vw,7rem)/.86 var(--poster);text-transform:uppercase;margin:12px 0}
.person-line{font-size:1.15rem;line-height:1.45;color:var(--soft);max-width:30em}
.person-city{margin-top:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem}
.person-listen{margin-top:22px}
.story{max-width:720px}
.video{position:relative;aspect-ratio:16/9;margin-bottom:36px;border:3px solid var(--ink);background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.story-body{display:grid;gap:1em;font-size:1.12rem;line-height:1.75}
.story-by{font:400 1.2rem var(--marker);color:var(--red)}
.story-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* Oproep onderaan: zwart vlak */
.cta{background:var(--ink);color:var(--paper);padding:clamp(70px,10vw,120px) 0}
.cta .title{color:var(--paper)}
.cta p{max-width:32em;margin:18px 0 6px;color:#d8d0c0;font-size:1.12rem}
.cta .scribble-link{color:var(--hi)}

/* Formulieren */
.form-wrap{max-width:720px}
.form{display:grid;gap:22px}
.form fieldset{min-width:0;border:2px solid var(--ink);margin:0;padding:clamp(22px,3.4vw,34px);background:var(--paper-3)}
.form legend{float:left;width:100%;margin-bottom:4px;font:700 clamp(1.9rem,3.6vw,2.4rem)/1 var(--poster);text-transform:uppercase}
.form label{display:block;clear:both;font-weight:700;font-size:.98rem;margin:18px 0 6px}
.form label small{font-weight:400;color:var(--dim);font-size:.88rem}
.form input:not([type=checkbox]),.form select,.form textarea{width:100%;font:400 1.05rem/1.4 var(--type);color:var(--ink);padding:11px 13px;background:#fffdf7;border:2px solid var(--ink);border-radius:0}
.form input:not([type=checkbox]):focus,.form select:focus,.form textarea:focus{outline:0;box-shadow:4px 4px 0 var(--hi)}
.form textarea{resize:vertical;min-height:170px}
.form ::placeholder{color:#9c9384}
.form [aria-invalid=true]{border-color:var(--red)!important;background:#fff1ee!important}
.form .check{display:flex;gap:11px;align-items:flex-start;line-height:1.45;font-weight:400}
.form .check-big{margin-top:6px;padding:12px 14px;border:2px dashed var(--ink);font-weight:700;background:var(--hi);rotate:-.5deg}
.form .check input{width:20px;height:20px;flex:none;accent-color:var(--ink);margin:1px 0 0}
.hint{font-size:.88rem;margin-top:6px;color:var(--dim)}
.err{color:var(--red);font-weight:700;font-size:.92rem;margin-top:6px}
.err-form{border:2px solid var(--red);padding:12px 16px;margin:0;background:#fff1ee}
.hp{position:absolute;left:-9999px;height:1px;overflow:hidden}
.note{position:relative;border:2px solid var(--ink);padding:clamp(26px,4vw,44px);display:grid;gap:14px;justify-items:start;background:var(--paper-3);box-shadow:5px 6px 0 rgba(21,19,17,.85)}
.note h2{font:700 clamp(2rem,4vw,2.8rem)/.95 var(--poster);text-transform:uppercase}
.note p{color:var(--soft)}
.note a:not(.btn){color:var(--red);font-weight:700}
.note-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Tekstpagina's */
.prose{max-width:680px}
.prose p+p{margin-top:1em}
.prose h2{font:700 clamp(1.9rem,4vw,2.6rem)/1 var(--poster);text-transform:uppercase;margin:1.6em 0 .5em}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2em;display:grid;gap:.6em}
.prose a{color:var(--red);font-weight:700;text-underline-offset:3px}

/* Voettekst */
.foot{background:var(--ink);color:var(--paper);padding:clamp(48px,7vw,80px) 0 calc(80px + env(safe-area-inset-bottom))}
.f-big{font:700 clamp(3.4rem,12vw,9rem)/.85 var(--poster);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--paper)}
.f-note{max-width:34em;margin:22px 0 40px;color:#cfc7b7}
.f-note a{color:var(--hi)}
.f-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 26px;padding-top:18px;border-top:1px dashed rgba(236,229,214,.4)}
.f-row small{color:#a8a092;font-size:.85rem}
.f-row nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.f-row nav a{color:var(--paper);font-size:.92rem}
.to-top{color:var(--paper);font-size:.9rem}

/* Kleur per categorie wordt niet meer gebruikt: alles is inkt en rode stift */
.a1,.a2,.a3,.a4,.a5,.a6,.a7{--a:var(--red)}

@media (max-width:900px){
  .burger{display:block}
  .menu{position:absolute;top:100%;left:-16px;right:-16px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px;background:var(--ink);border-top:1px dashed rgba(236,229,214,.4)}
  .menu.open{display:flex}
  .menu a{padding:12px 4px;font-size:1.1rem}
  .menu .menu-cta{margin:10px 0 0;text-align:center;rotate:0deg}
  .hero-in{grid-template-columns:1fr}
  .tracklist{max-width:420px;rotate:1.5deg;margin-top:10px}
  .split{grid-template-columns:1fr}
  .award-row{grid-template-columns:1fr}
}
@media (max-width:620px){
  .wrap{width:calc(100% - 32px)}
  .stamp{width:104px;height:104px;font-size:.7rem;right:-4px;top:-20px}
  .stamp b{font-size:1.05rem;max-width:80px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .card{padding:8px 8px 14px}
  .card h3{font-size:1.25rem}
  .card-line{font-size:.82rem}
  .card-cat{font-size:.9rem}
  .person-in{grid-template-columns:1fr}
  .person .portrait{max-width:220px}
  .step{grid-template-columns:44px minmax(0,1fr)}
  .step::before{font-size:2.4rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Achtergrondmuziek */
.bgm-player{position:fixed;left:0;bottom:0;z-index:-5;width:200px;height:200px;overflow:hidden;opacity:0;pointer-events:none}
.bgm-box{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:55;display:flex;align-items:center;gap:8px;animation:bgm-in .8s var(--ease) 1.2s backwards}
.bgm{display:flex;align-items:center;gap:0;height:44px;padding:0 4px;border-radius:999px;border:1px solid var(--line);background:rgba(12,12,12,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);color:#fff;font:inherit;cursor:pointer;box-shadow:0 14px 36px rgba(0,0,0,.4);opacity:.75;transition:opacity .3s,border-color .3s,gap .45s var(--ease)}
.bgm:hover,.bgm:focus-visible{opacity:1;border-color:var(--line-strong);gap:10px}
.bgm-ico{width:34px;height:34px;display:grid;place-items:center;flex:none}
.bgm-eq{display:flex;gap:3px;align-items:flex-end;height:14px}
.bgm-eq i{width:2px;height:35%;background:var(--gold);border-radius:2px;animation:bgm-eq .9s ease-in-out infinite alternate;animation-play-state:paused}
.bgm-eq i:nth-child(2){animation-delay:-.3s;height:70%}.bgm-eq i:nth-child(3){animation-delay:-.6s;height:50%}.bgm-eq i:nth-child(4){animation-delay:-.15s}
.bgm.on .bgm-eq i{animation-play-state:running}
.bgm-off{display:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bgm.off .bgm-eq{display:none}
.bgm.off .bgm-off{display:block}
.bgm.off{opacity:.55}
.bgm-txt{display:grid;max-width:0;overflow:hidden;text-align:left;line-height:1.2;white-space:nowrap;transition:max-width .45s var(--ease),padding .45s var(--ease)}
.bgm-txt small{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--soft)}
.bgm-txt b{font:400 .95rem/1.2 var(--thin);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis}
.bgm:hover .bgm-txt,.bgm:focus-visible .bgm-txt{max-width:240px;padding-right:14px}
@keyframes bgm-eq{to{height:100%}}
@keyframes bgm-in{from{opacity:0;transform:translateY(12px)}}
.bgm-skip{width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(12,12,12,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);color:#fff;cursor:pointer;box-shadow:0 14px 36px rgba(0,0,0,.4);opacity:.75;transition:opacity .3s,border-color .3s,color .3s}
.bgm-skip:hover,.bgm-skip:focus-visible{opacity:1;border-color:var(--line-strong);color:var(--gold)}
.bgm-skip svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.bgm-box.is-off .bgm-skip{display:none}
@media (max-width:640px){.bgm-box{left:12px;bottom:calc(12px + env(safe-area-inset-bottom))}.bgm{height:40px}.bgm-ico{width:30px;height:30px}.bgm-skip{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){.bgm-eq i{animation:none}}
.bgm,.bgm-skip{background:var(--ink);border:2px solid var(--ink);color:var(--paper);opacity:.92;box-shadow:3px 3px 0 rgba(21,19,17,.35)}
.bgm-txt small{color:#bdb4a4}
.bgm-eq i{background:var(--hi)}
.bgm-skip:hover,.bgm-skip:focus-visible{color:var(--hi)}