:root{--bg:#313338;--ac:#3e4147;--btn:#5584f2;--bt:#000;--tx:#fff;--grey:#9b9ea4}
*{box-sizing:border-box}
body{margin:0;padding:2rem 0 4rem;background:var(--bg);color:var(--tx);font:16px/1.4 system-ui,sans-serif}
.wrap{width:50%;margin-inline:auto;container-type:inline-size}
@media(max-width:900px){.wrap{width:90%}}
h1{display:flex;align-items:center;justify-content:center;gap:.3em;margin:0;font:400 9cqw/1 system-ui,sans-serif}
h1 img{width:1.5em;height:1.5em;aspect-ratio:1;object-fit:cover}
hr{border:0;border-top:2px solid var(--ac);margin-block:1.5rem}
h2{margin:0 0 .25rem;font-size:1.2rem;font-weight:600}
.note{margin:0 0 .75rem;color:var(--grey);font-size:.9rem}
input,textarea{display:block;width:100%;margin-bottom:.5rem;padding:.7rem;border:0;background:var(--ac);color:var(--tx);font:inherit}
::placeholder{color:var(--grey)}
button{padding:.6rem 1.2rem;border:0;background:var(--btn);color:var(--bt);font:inherit;font-weight:600;cursor:pointer}
.hp{position:absolute;left:-9999px}
#q{margin-top:1.5rem}
#gw{container-type:inline-size;margin-top:2rem}
#grid{--n:4;--g:calc(100cqw/(11*var(--n) + 3));display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--g);padding-inline:calc(var(--g)*2)}
@media(max-width:700px){#grid{--n:1;grid-template-columns:minmax(0,1fr);gap:1.5rem;width:90%;margin-inline:auto;padding-inline:0}}
.box{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.box a{position:absolute;inset:0}
.box img{display:block;width:100%;height:100%;object-fit:contain}
.cp{position:absolute;top:.5rem;right:.5rem;display:none;place-items:center;width:2.2rem;height:2.2rem;padding:0;border-radius:50%}
.box:hover .cp{display:grid}
@media(hover:none){.cp{display:grid}}
.cp svg{width:1.1rem;height:1.1rem}
.box.copied{background:var(--btn)}
.box.copied a,.box.copied .cp{visibility:hidden}
.box.copied::after{content:"copied!";position:absolute;inset:0;display:grid;place-items:center;color:var(--bt);font-weight:600}
.meta{padding-top:.35rem;font-size:.85rem}
.meta div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.k{color:var(--grey)}
#none{text-align:center}#more{height:1px}
.adm{max-width:900px;margin:0 auto;padding:0 1rem}
.tabs{display:flex;gap:.5rem;margin:1rem 0}
.tabs .off{background:var(--ac);color:var(--tx)}
.item{display:grid;grid-template-columns:200px 1fr;gap:1rem;margin:1rem 0;padding:1rem;background:var(--ac)}
.item input{background:var(--bg)}
.item .pv{aspect-ratio:16/9;background:#000}.item .pv img{width:100%;height:100%;object-fit:contain}
.item p{margin:.2rem 0;word-break:break-word}.item a{color:var(--tx)}
.bt{display:flex;gap:.5rem;flex-wrap:wrap}
@media(max-width:600px){.item{grid-template-columns:1fr}}
/* four featured gifs: same grid maths as the main collection; 2x2 at half size on mobile */
#fw{container-type:inline-size;margin-bottom:2rem}
#feat{--n:4;--g:calc(100cqw/(11*var(--n) + 3));display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--g);padding-inline:calc(var(--g)*2)}
@media(max-width:700px){#feat{--n:2;gap:1rem .75rem;width:90%;margin-inline:auto;padding-inline:0}}
.fc{container-type:inline-size;min-width:0}
.ft{display:flex;flex-direction:column;justify-content:flex-end;margin:0 0 .35rem;text-align:center}
.ft span{overflow-wrap:anywhere}
.ti{width:1.5em;height:1.5em;vertical-align:middle;object-fit:cover}
@media(max-width:800px){.ft{min-height:3.4em}}
.box.num{display:grid;place-items:center;background:var(--bg)}
.num span{font-weight:700;color:var(--btn);line-height:1;font-size:26cqw}
.box.none{display:grid;place-items:center;color:var(--grey);font-size:2rem}
.fb{padding-top:.35rem;font-size:.85rem;text-align:center;overflow-wrap:anywhere}
.fb.rn{display:flex;align-items:center;justify-content:center;gap:.5rem}
.fb.rn span{min-width:0}
.dice{flex:none;width:1.5em;height:1.5em;padding:0;display:grid;place-items:center}
.dice svg{width:70%;height:70%}
.dice:disabled{opacity:.6;cursor:default}
/* tag suggestions */
.tw{position:relative}
.tagbox{position:absolute;left:0;right:0;top:100%;z-index:20;margin:0;padding:0;list-style:none;background:var(--ac);border:1px solid var(--grey);box-shadow:0 6px 16px rgba(0,0,0,.45);text-align:left}
.tagbox[hidden]{display:none}
.tagbox li{padding:.5rem .7rem;cursor:pointer;overflow-wrap:anywhere}
.tagbox li.on,.tagbox li:hover{background:var(--btn);color:var(--bt)}