/* Scale: space 4 8 12 16 24 32; type 13 caption, 15 body; headings in Silkscreen
   (a pixel font on an 8 px grid: crisp only at 16/24/32 px, weight 400, no
   fractional letter-spacing; geometricPrecision: unhinted, or FreeType
   smears interior edges at 24 px) — 16 title, 24 page.
   Two surfaces: the page (--bg) and a card (--bg2); no card in a card.
   Borders are for inputs, quiet buttons and the rare separator. */
:root{--bg:#0e0f11;--bg2:#16181b;--bg3:#1e2125;--line:#2a2e33;--fg:#dde1e6;--mut:#8b939c;--acc:#f0a030;--ok:#6c6;--bad:#e55;--r:6px;--nav:180px}
@font-face{font-family:Silkscreen;src:url(fonts/silkscreen.woff2) format("woff2");font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
a{color:var(--acc)}
h1,h2,h3,#top strong,.look>summary{font:400 16px/1.25 Silkscreen,system-ui,sans-serif;text-rendering:geometricPrecision;text-wrap:balance;overflow-wrap:break-word}
h1,h2,#top strong,:is(.card,.grp)>h3:first-child{color:var(--acc)}
h2{margin:0 0 12px}
/* A GIF's title or a playlist's name is content: the body face, as in the lists and on Now. */
#lib-d-title,#set-title{font:600 17px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;text-rendering:auto;color:var(--fg)}
h3{margin:16px 0 8px}
p{margin:8px 0}
.muted{color:var(--mut)}.ok{color:var(--ok)}.bad{color:var(--bad)}
#top{position:fixed;top:0;left:0;right:0;height:44px;display:flex;gap:12px;align-items:baseline;padding:12px 16px 0;background:var(--bg2);z-index:5}
#where{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.demo-own{margin-left:auto;align-self:center;margin-top:-12px;flex:none}
#nav{position:fixed;z-index:5;background:var(--bg2);display:flex}
#nav a{display:flex;gap:12px;align-items:center;color:var(--mut);text-decoration:none;padding:12px 16px}
#nav a i{font-style:normal;width:16px;text-align:center;font-variant-emoji:text}
#nav a.on{color:var(--fg);box-shadow:inset 3px 0 var(--acc)}
#main{padding:60px 16px 32px calc(var(--nav) + 16px);max-width:calc(1240px + var(--nav));}
.view{display:none}.view.on{display:block}
@media (min-width:761px){#nav{top:44px;bottom:0;left:0;width:var(--nav);flex-direction:column;padding-top:8px}}
@media (max-width:760px){
  :root{--nav:0px}
  #nav{bottom:0;left:0;right:0;height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line);justify-content:space-around}
  #nav a{flex-direction:column;gap:4px;padding:8px 4px;font-size:13px;flex:1;justify-content:center}
  #nav a.on{box-shadow:inset 0 3px var(--acc)}
  #main{padding:56px 12px 80px}
}
.card{background:var(--bg2);border-radius:var(--r);padding:16px;margin:0 0 16px}
@media (max-width:760px){.card{padding:12px}}
.row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.row.sp{justify-content:space-between}
.grow{flex:1;min-width:0}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:1000px){.cols{grid-template-columns:minmax(0,1fr)}}
button,.btn,select,input[type=text],input[type=number],input[type=password],input[type=search],input[type=time]{font:inherit;color:var(--fg);background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:4px 12px;min-height:36px}
button,.btn{cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:none}
button:hover:not(:disabled),.btn:hover{background:var(--bg3)}
button:disabled{opacity:.4;cursor:default}
button.pri{background:var(--acc);color:#111;border-color:var(--acc);font-weight:600}
button.danger{color:var(--bad)}
button.sm{min-height:28px;padding:4px 8px;font-size:13px}
input[type=text],input[type=search],input[type=password],select{min-width:0}
input[type=time]{padding:4px 8px;color-scheme:dark}
input[type=range]{accent-color:var(--acc);width:160px}
input[type=checkbox]{accent-color:var(--acc);width:16px;height:16px;flex:none}
label{display:inline-flex;gap:8px;align-items:center}
.stack{display:flex;flex-direction:column;align-items:stretch;gap:4px;color:var(--mut);font-size:13px}
.stack>*{color:var(--fg);font-size:15px}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px}
.panel{display:block;width:100%;margin:0 auto;aspect-ratio:4/1;image-rendering:pixelated;background:#000;border-radius:var(--r)}
.cap{font-size:13px;color:var(--mut);margin:4px 0 0}
.cap:empty{display:none}.cap.bad{color:var(--bad)}
p.cap{margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:none;border-radius:99px;padding:4px 12px;font-size:13px;cursor:pointer;color:var(--fg)}
.chip.on,.chip.on:hover{background:var(--acc);border-color:var(--acc);color:#111}
.chip small{font:inherit;color:var(--mut);margin-left:4px}.chip.on small{color:inherit}.chip:disabled{opacity:.45;cursor:not-allowed}
.sys{color:var(--mut)}.tab.sys,.chip.sys{font-style:italic}
.tag{display:inline-block;border-radius:4px;padding:0 8px;font-size:13px;background:#2b3138;color:#b8c2cc;margin-left:8px;white-space:nowrap}
.tag.act{background:var(--acc);color:#111}
.vlist{position:relative;overflow:auto;border-radius:var(--r);background:var(--bg2);height:calc(100dvh - 240px);min-height:240px;contain:strict}
.vlist>div{position:absolute;left:0;right:0;top:0}
.vrow{position:absolute;left:0;right:0;display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:1px solid #1f2226;cursor:pointer;white-space:nowrap}
.vrow:hover{background:var(--bg3)}
.vrow.cur{background:#2a2418}
.vrow .t{overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.list>div{display:flex;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}
button.pl{white-space:nowrap;border:0;justify-content:flex-start;text-align:left;padding:4px 8px;gap:0}
.pl>.n{margin-left:auto;padding-left:12px;color:var(--mut);font-size:13px}
#sets-list .more{width:36px;flex:none}.lbl{font-size:13px;color:var(--mut);margin:16px 0 8px}
button.grip{border:0;padding:0 4px;min-height:28px;cursor:grab;touch-action:none;color:var(--mut)}
.vrow.drag{z-index:2;background:var(--bg3);box-shadow:0 4px 16px #0008}
.list>div:last-child{border-bottom:0}
.list>div.cur{background:#2a2418}
#now-recent>div{min-height:36px;cursor:pointer}#now-recent .grow{min-width:45%}#now-recent .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--acc);width:0}
details>summary{cursor:pointer;color:var(--mut);padding:4px 0}
.selbar{position:sticky;bottom:0;background:var(--bg2);border:1px solid var(--acc);border-radius:var(--r);padding:8px 12px;margin-top:8px}
@media (max-width:760px){.selbar{bottom:66px}}
.log{max-height:200px;overflow:auto;font-size:13px}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:9}
@media (max-width:760px){#toasts{left:12px;right:12px;bottom:74px}}
.toast{background:var(--bg3);border-left:3px solid var(--acc);border-radius:var(--r);padding:8px 12px;max-width:420px;box-shadow:0 4px 16px #0008}
.toast.bad{border-left-color:var(--bad)}.toast.ok{border-left-color:var(--ok)}
.banner{border:1px solid var(--acc);background:#2a2418;border-radius:var(--r);padding:12px;margin:0 0 16px}
[hidden]{display:none!important}
.grow>input,.grow>select,label.stack>input,label.stack>select{width:100%}
.libgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,38%);gap:16px;align-items:start}
.libgrid>.side{position:sticky;top:60px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.chips.scroll>*{flex:none}
.libhead{display:grid;grid-template:"q n f b a" "r r r r r"/minmax(0,1fr) auto auto auto auto;gap:12px;align-items:center}#lib-select{grid-area:b;justify-self:end}#lib-fold{grid-area:f}
.lib-q{grid-area:q;display:flex;align-items:center;background:var(--bg3);border:1px solid var(--line);border-radius:99px}
#lib-search{flex:1;font-size:16px;min-height:42px;padding:8px 16px;border:0;background:none;outline:0}.lib-q:focus-within{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
#lib-count{grid-area:n}#lib-add-btn{grid-area:a}#lib-add{grid-column:1/-1}
.lib-r2{grid-area:r;display:flex;align-items:center;gap:12px;min-width:0}
.lib-r2>*{flex:1 1 0;min-width:0}
.noplat #lib-r2{display:none}
.lib-web{margin:12px 4px;color:var(--mut)}.lib-web b{color:var(--fg)}.lib-web .txt{color:var(--acc)}
@media (max-width:760px){
  .libhead{grid-template:"q q q a" "n n f b" "r r r r"/minmax(0,1fr) auto auto auto;gap:8px 12px}
  #lib-count{font-size:13px}
  .vlist{height:calc(100dvh - 312px)}
  #lib-selbar>span{flex:1 1 50%}#lib-sel-done{order:1}#lib-all,#lib-to-set{order:2}
  #lib-r2{overflow-x:auto;scrollbar-width:none}#lib-r2>*{flex:none;overflow:visible;max-width:none}
  #lib-r2.more{--fr:transparent}#lib-r2.less{--fl:transparent}
  #lib-r2:is(.more,.less){-webkit-mask-image:linear-gradient(to right,var(--fl,#000),#000 48px,#000 calc(100% - 48px),var(--fr,#000));mask-image:linear-gradient(to right,var(--fl,#000),#000 48px,#000 calc(100% - 48px),var(--fr,#000))}
}
.tabs{display:flex;overflow-x:auto;scrollbar-width:none}
.tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--mut);padding:4px 12px;white-space:nowrap;flex:none}
.tab:hover:not(:disabled){color:var(--fg);background:none}
.tab.on{color:var(--fg);border-bottom-color:var(--acc);font-weight:600}
.lib-progress .bar{height:4px}
.dhead{display:flex;gap:8px;align-items:flex-start;margin-top:12px}
#lib-d-title{margin:0 0 4px}#lib-d-meta{margin:0}
.acts,#lib-smooth{margin-top:12px}
.swrow{display:flex;gap:8px;align-items:center;min-height:36px}.swrow>label{flex:1}
input.sw{appearance:none;width:32px;height:18px;border-radius:9px;background:var(--line);position:relative;flex:none;margin:0}
input.sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fg)}
input.sw:checked{background:var(--acc)}input.sw:checked::after{left:16px}
#lib-detail{position:relative}
.file{display:flex;gap:16px;font-size:13px;margin-top:16px}.file>span{min-width:0;overflow-wrap:anywhere}
.close{display:none}
@media (max-width:1000px){
  .libgrid{grid-template-columns:minmax(0,1fr)}
  .libgrid>.side{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:8;max-height:85vh;overflow:auto;overscroll-behavior:contain}
  .libgrid>.side:not(.open){display:none}
  .libgrid>.side>.card{margin:0;border-radius:12px 12px 0 0;box-shadow:0 -8px 28px #000c;padding-top:48px}
  .close{display:inline-flex;position:absolute;right:12px;top:8px}
}
@media (max-width:760px){.libgrid>.side{bottom:calc(58px + env(safe-area-inset-bottom));max-height:calc(100vh - 120px)}}

.ov{display:inline-flex;gap:4px;flex:none;font-style:normal}
.ov i{font-style:normal;font-size:13px;color:var(--acc)}.ov i.hid{color:var(--bad)}.ov i.less{color:var(--mut)}
.vrow.hid .t{opacity:.45;text-decoration:line-through}
button.more{min-height:28px;padding:0 8px;flex:none;border-color:transparent}
.vrow .tag,.vrow .more{margin-left:auto}.vrow .tag{background:none;color:var(--mut);padding:0}.vrow .tag+.more{margin-left:0}
@media (hover:hover){.vrow .more{opacity:0}.vrow:hover .more,.vrow:focus-within .more{opacity:1}}
button.txt{border-color:transparent;color:var(--mut)}
.menu{position:fixed;z-index:20;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 28px #000a;padding:8px;min-width:250px;display:flex;flex-direction:column;gap:4px}
.menu.sheet{left:0;right:0;bottom:0;border-radius:12px 12px 0 0;padding:12px 12px calc(16px + env(safe-area-inset-bottom))}
.menu .mh{padding:4px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu .mi{border:0;justify-content:flex-start;text-align:left}
.menu .ck{width:16px;color:var(--acc)}
.menu .mr{display:flex;gap:8px;align-items:center;padding:4px 8px}.menu .mr>span:first-child{flex:1}
button.on{border-color:var(--acc);color:var(--acc)}
.sub{margin-top:16px}
.q{display:inline-flex;justify-content:center;width:16px;height:16px;line-height:16px;margin-left:8px;border:1px solid var(--line);border-radius:50%;font-size:13px;cursor:help}
.capl{margin-top:8px;align-items:baseline}.capl>.grow{flex:1 1 auto}.capl>label.cap{margin:0 0 0 auto}
#now-ord{white-space:nowrap}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-left:4px}
.tag.fl{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;margin-left:4px}
.f2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.f2{grid-template-columns:minmax(0,1fr)}}
.grp{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.grp>h3:first-child{margin-top:0}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;margin:8px 0 0;font-size:13px}.facts dt{color:var(--mut)}.facts dd{margin:0;overflow-wrap:anywhere}
.tick{font:400 13px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ok);margin-left:12px}.tick.ok{animation:out 2.5s forwards}.tick.bad{color:var(--bad)}
.bri{display:flex;align-items:center;gap:8px}.rng{position:relative;display:flex;flex:1;min-width:160px;max-width:320px}.rng>input{width:100%}
.rng>i{position:absolute;bottom:-6px;width:2px;height:6px;margin-left:-1px;background:var(--mut)}
/* Phone: tap targets 36-44 px. */
@media (max-width:760px){button.sm,button.more,button.grip{min-height:36px}details>summary{padding:8px 0}}
/* Motion: a panel, menu or dialog fades in; the Live dot pulses. */
@keyframes fade{from{opacity:0}}@keyframes out{60%{opacity:1}to{opacity:0}}@keyframes pulse{50%{opacity:.5}}
.menu,.dlg,.side.open{animation:fade .15s}.dot.ok{animation:pulse 2s infinite}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
/* Keyboard focus, everywhere it lands. */
:is(button,.btn,a,summary,.vrow,[tabindex]):focus-visible{outline:2px solid var(--acc);outline-offset:2px}.vrow:focus-visible{outline-offset:-2px}
/* Settings: a title, four tabs, one tab's sections as cards. */
.ptitle{font-size:24px;margin:0 0 8px}
#st-tabs{margin:0 0 16px;border-bottom:1px solid var(--line)}#st-tabs .tab{padding:8px 12px}
.stab{max-width:820px}.stab>.grp{background:var(--bg2);border-radius:var(--r);padding:16px;margin:0 0 16px;border:0}
@media (max-width:760px){.stab>.grp{padding:12px}#st-tabs .tab{padding:8px;flex:1;justify-content:center}}
.menu.wide{width:min(440px,calc(100vw - 16px));max-height:80vh;overflow:auto;overflow-anchor:none;padding:12px}.menu.wide.sheet{width:auto;max-height:85vh}
.menu.wide>*{flex:none}.menu.wide .chips{margin:8px 0}.menu.wide .row{margin-top:8px}.menu.wide>.row:last-child{position:sticky;bottom:-12px;background:var(--bg2);padding:8px 0 12px}.chip.txt{color:var(--acc);border-style:dashed}
/* Now: title, tags and position on lines of their own; Skip first in the transport. */
.nowt{margin-top:8px;display:grid;gap:2px}.nowt>div{overflow:hidden;text-overflow:ellipsis}.nowt b{font-size:17px}
.transport{display:flex;gap:8px;margin-top:12px}.transport>button{flex:1 1 0;justify-content:center;padding:4px;max-width:140px}
/* Playlists: the editor a screen of its own on a phone. */
#view-sets:not(.ed) #set-editor,#view-sets.ed .sehint,.back{display:none}
#set-title{margin:0}.edfoot{position:sticky;bottom:0;background:var(--bg2);padding:12px 0 0;margin-top:4px}
#set-entries{height:calc(100dvh - 380px)}#set-name-row:not([hidden])~#set-entries{height:calc(100dvh - 450px)}
@media (max-width:1000px){.ed .sl,#view-sets:not(.ed) .se{display:none}.back{display:inline-flex}}
@media (max-width:760px){.edfoot{bottom:calc(58px + env(safe-area-inset-bottom))}#set-entries{height:calc(100dvh - 420px)}#set-name-row:not([hidden])~#set-entries{height:calc(100dvh - 490px)}.transport>button{max-width:none}}
/* Six items on a small phone: "Create" (the view's title says Create Art). */
#nav .na{font-weight:inherit}
@media (max-width:420px){#nav .na{display:none}}