:root{color-scheme:light;--ink:#30172b;--cream:#fff5dc;--lime:#e3f44a;--coral:#ff8274;--line:2px solid var(--ink);font:16px 'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--cream)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
button,input,audio{font:inherit}
button,a,input{touch-action:manipulation}
a{color:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.65}
:focus-visible{outline:3px solid #7421bf;outline-offset:4px}
.bar,footer{max-width:1120px;margin:auto;padding:16px clamp(15px,4vw,46px);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bar{border-bottom:var(--line)}
.brand{text-decoration:none;font-weight:950;font-size:1.3rem;letter-spacing:-.05em}.brand span:first-child{color:#8b2f5a}.dot{color:#8b2f5a}.tag{font-weight:800;font-size:.8rem}
main{max-width:950px;margin:auto;padding:25px clamp(14px,4vw,40px) 24px}
h1{font-family:'Archivo Black',system-ui,sans-serif;font-weight:1000;margin:0;text-align:center;font-size:clamp(3rem,10vw,6.2rem);line-height:.88;letter-spacing:-.09em}
h1 em{font-style:normal;color:#882a53} .intro{text-align:center;font-weight:650;margin:16px 0 22px}
.console{border:var(--line);border-radius:16px;overflow:hidden;box-shadow:5px 6px 0 var(--ink);background:#fff9ec}
.meme,.deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.meme{border-bottom:var(--line)}
.panel{display:flex;align-items:end;justify-content:center;min-height:0;aspect-ratio:1.62;background-image:url(./dj.jpg);background-size:200% auto;background-repeat:no-repeat;background-position:left 44%;background-color:var(--coral);padding:7px}
.panel.answer{background-position:right 50%;background-color:var(--lime);border-left:var(--line)}
.panel span{color:white;background:var(--ink);padding:.32em .7em;border-radius:4px;font-size:clamp(.65rem,2.6vw,.95rem);font-weight:950;letter-spacing:.07em}
.deck>form,#output{min-width:0;padding:clamp(12px,3vw,25px)}
#request{display:grid;gap:10px}#request label{display:grid;gap:4px;font-weight:800}
input{border:var(--line);border-radius:7px;background:white;color:inherit;min-width:0;padding:.66rem .75rem}
button,.actions a,#testflight{display:inline-flex;justify-content:center;align-items:center;gap:.4em;padding:.58rem .75rem;min-height:44px;border:var(--line);border-radius:7px;background:#fff9ec;color:inherit;font-weight:850;text-decoration:none}
#play,#listen,#testflight{background:var(--lime)}#play{font-size:1.12rem}
#output{border-left:var(--line);background:#fff1b6}
#status{margin:0 0 10px;font-weight:750;overflow-wrap:anywhere}
.busy::before{content:'◉';display:inline-block;margin-right:.5em;animation:pulse .55s alternate infinite}
@keyframes pulse{to{transform:rotate(75deg) scale(.65);opacity:.35}}
@media(prefers-reduced-motion:reduce){.busy::before{animation:none}}
.track{display:flex;align-items:center;gap:12px;margin:12px 0}.cover{position:relative;width:64px;flex:0 0 64px;aspect-ratio:1;display:grid;place-items:center;background:var(--ink);color:var(--lime);border-radius:7px;font-size:2rem;overflow:hidden}.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.metadata{min-width:0;overflow-wrap:anywhere}.metadata h2,.metadata p{margin:0}.metadata h2{font-size:1.25rem;line-height:1.12}.metadata p{margin-top:4px}#copyright{font-size:.78rem}
audio{width:100%;display:block;margin:8px 0}.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.actions button,.actions a{font-size:.86rem}#manual-link{width:100%}
#campaign{margin-top:28px;border:var(--line);padding:16px;border-radius:12px}#campaign h2{margin:0}
footer{font-size:.78rem}footer div{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}#privacy-open{padding:.2rem;border:0;background:none;min-height:44px;text-decoration:underline;font-weight:inherit}
dialog{max-width:min(92vw,480px);border:var(--line);border-radius:12px;background:var(--cream);color:var(--ink);padding:20px}dialog::backdrop{background:#30172baa}dialog h2{margin-top:0}dialog form{margin-top:14px}
@media(max-width:600px){.deck{grid-template-columns:minmax(0,1fr)}#output{border-left:0;border-top:var(--line)}.panel{aspect-ratio:1.15}}

#meme-dialog{width:min(92vw,470px);max-height:90dvh}
#meme-preview{display:block;width:100%;max-height:54dvh;object-fit:contain}
#meme-status:empty{display:none}