:root{--orange:#F7941D;--ink:#0A0A0A;--green:#106B36;--deep:#0B5A2C;--bark:#9C8679;--sun:#E8C33A;
--cream:#F4E7CE;--cast:rgba(59,36,15,.42)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--orange);color:var(--ink);
  font-family:"Shantell Sans",ui-rounded,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  line-height:1.6}
.wrap{max-width:880px;margin:0 auto;padding:28px 20px 80px}
a{color:var(--ink)}
.home{display:inline-block;margin-bottom:22px;font-size:.85rem;font-style:italic;
  text-decoration:none;border-bottom:2px solid var(--green)}
.home:hover{border-bottom-color:var(--ink)}
.panel{background:var(--ink);color:var(--cream);padding:24px 26px;margin-bottom:22px;
  border:3px solid var(--green);box-shadow:7px 9px 0 var(--cast);
  border-radius:30px 38px 26px 34px/36px 26px 38px 28px}
.panel.alt{border-color:var(--sun);border-radius:38px 26px 36px 28px/28px 36px 26px 38px}
h1{font-size:clamp(1.9rem,6vw,3rem);margin:0 0 .1em;letter-spacing:.04em;color:var(--ink)}
h2{font-size:1.35rem;margin:0 0 .6rem;color:var(--sun);font-style:italic;letter-spacing:.1em}
h3{font-size:1rem;margin:1.2rem 0 .3rem;color:var(--sun)}
p{margin:0 0 .9rem;max-width:68ch}
.panel a{color:var(--sun)}
.lede{font-size:1.05rem;color:var(--ink);max-width:60ch;margin-bottom:1.6rem}
/* A lede on the page stands dark against the orange; inside a panel that same
   ink is the background it is sitting on. Emphasis in there is sun, the way
   the headings and the links in a panel already are. */
.panel .lede{color:var(--sun)}
.cover{width:min(360px,100%);height:auto;display:block;border-radius:20px 26px 18px 24px;
  border:3px solid var(--ink);box-shadow:7px 9px 0 var(--cast)}
.top{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;margin-bottom:26px}
.top .meta{flex:1;min-width:260px}
.facts{list-style:none;padding:0;margin:0;font-size:.9rem}
.facts li{padding:5px 0;border-top:2px dotted rgba(156,134,121,.45);display:flex;gap:10px}
.facts li:first-child{border-top:0}
.facts b{color:var(--bark);font-weight:600;min-width:9em}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:700;
  font-size:.95rem;text-decoration:none;padding:11px 18px;border:3px solid transparent;
  border-radius:16px 10px 17px 9px;cursor:pointer;box-shadow:4px 5px 0 var(--cast)}
.btn.buy{background:var(--sun);color:var(--ink)}
.btn.free{background:var(--deep);color:var(--sun)}
.btn:hover,.btn:focus-visible{background:var(--orange);color:var(--ink)}
.btn.wait{opacity:.5;pointer-events:none}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0 4px}
.note{font-size:.82rem;color:var(--bark);font-style:italic;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips a{font-size:.82rem;font-weight:600;color:var(--ink);background:var(--sun);
  padding:5px 11px;border-radius:14px 9px 15px 8px;text-decoration:none}
.chips a:hover,.chips a:focus-visible{background:var(--orange)}
.chips .off{background:rgba(156,134,121,.35);color:var(--cream);cursor:default}
.sleeves{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.sleeve{background:var(--ink);color:var(--cream);padding:14px 16px 16px;margin:0;
  border:3px solid var(--green);box-shadow:7px 9px 0 var(--cast);
  border-radius:26px 32px 22px 30px/30px 22px 32px 24px}
.sleeve:nth-child(even){border-color:var(--sun);
  border-radius:32px 22px 30px 24px/24px 30px 22px 32px}
.sleeve-art{display:block;margin-bottom:11px}
/* A hairline rather than the ink border the song page uses: on a black card an
   ink edge disappears, and a dark sleeve then bleeds into the panel. */
.sleeve-art img{display:block;width:100%;height:auto;border:2px solid rgba(244,231,206,.28);
  border-radius:18px 22px 16px 20px}
.share{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.82rem;
  font-weight:600;color:var(--ink);background:var(--sun);border:0;cursor:pointer;
  padding:5px 12px;border-radius:14px 9px 15px 8px}
.share svg{width:13px;height:13px;fill:currentColor}
.share:hover,.share:focus-visible{background:var(--orange)}
.share.done{background:var(--green);color:var(--sun)}
.rail-name .share{margin:2px 0 20px}
.sleeve .share{margin-left:auto;padding:7px;border-radius:50%}
.sleeve .share span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sleeve .share.done span{position:static;width:auto;height:auto}
.sleeve .share.done{border-radius:14px 9px 15px 8px;padding:5px 10px}
.sleeve .track a{color:var(--cream);text-decoration:none}
.sleeve .track a:hover b,.sleeve .track a:focus-visible b{color:var(--sun)}
/* On a phone a full-width sleeve per song pushes every play button but the
   first off the screen. There each song becomes one row instead — a small
   sleeve, play, the name, share — and the whole list fits on the first screen.
   The scrubber still unfolds under the row, across the card's full width. */
@media(max-width:620px){
  .songs-list{grid-template-columns:1fr;gap:12px}
  .songs-list .sleeve{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;
    align-items:center;padding:9px 12px 9px 9px;box-shadow:4px 6px 0 var(--cast);
    border-radius:20px 24px 18px 22px/22px 18px 24px 20px}
  .songs-list .sleeve:nth-child(even){border-radius:24px 18px 22px 20px/20px 22px 18px 24px}
  .songs-list .sleeve-art{margin:0}
  .songs-list .sleeve-art img{border-radius:12px 14px 11px 13px}
  .songs-list .sleeve .track{display:contents}
  .songs-list .sleeve .track-row{min-width:0;gap:10px}
  .songs-list .sleeve .track-row>div{min-width:0}
  .songs-list .sleeve .track-row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .songs-list .sleeve .j1b-player{grid-column:1/-1;margin:8px 2px 0}
  .songs-list .sleeve .play{width:40px;height:40px}
  .songs-list .sleeve .play svg{width:14px;height:14px}
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:10px}
.grid a{display:block;text-decoration:none;color:var(--cream);font-size:.82rem}
.grid img{width:100%;height:120px;object-fit:contain;border-radius:12px 16px 10px 14px;
  display:block;background:rgba(247,148,29,.12);padding:8px;margin-bottom:6px}
.grid span{color:var(--bark)}
.grid.faces img{height:230px;object-fit:cover}
table{border-collapse:collapse;width:100%;font-size:.88rem;margin-top:8px}
td,th{text-align:left;padding:6px 10px 6px 0;border-bottom:2px dotted rgba(156,134,121,.4);
  vertical-align:top;overflow-wrap:anywhere}
/* A label stays on one line while it is a short one ("Written by"); a long one
   — a writer's full name on the release sheet — wraps rather than pushing its
   row out of the box. */
th{color:var(--bark);font-weight:600;white-space:nowrap}
.item th,th.long{white-space:normal;min-width:7em;max-width:14em}
/* On a phone there is no room for a label and a value side by side: each row
   becomes the label with its value underneath. */
@media(max-width:620px){
  table,tbody,tr,th,td{display:block;width:auto}
  tr{border-bottom:2px dotted rgba(156,134,121,.4);padding:4px 0}
  th,td{border-bottom:0;padding:2px 0}
  th{white-space:normal;max-width:none}
}
code{background:rgba(156,134,121,.2);padding:2px 6px;border-radius:5px;font-size:.85em}
.todo{background:rgba(232,195,58,.16);border-left:4px solid var(--sun);padding:8px 12px;
  font-size:.84rem;font-style:italic;color:var(--cream);margin:0 0 14px;border-radius:0 10px 10px 0}
footer{font-size:.82rem;color:var(--brown,#3B240F);max-width:60ch}
footer a{color:var(--ink)}
footer .social{margin-top:11px}
footer .social a{background:var(--ink);color:var(--sun);border:2px solid var(--green);
  box-shadow:3px 4px 0 var(--cast);text-decoration:none}
footer .social a:hover,footer .social a:focus-visible{background:var(--green);color:var(--orange)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* --- /film/: the terms, and the songs to take ---------------------------- */
.terms{margin:0 0 .9rem;padding-left:1.2rem;max-width:68ch}
.terms li{margin:0 0 .45rem}
.sleeve h3{margin:0}
.sleeve h3 a{color:var(--sun);text-decoration:none}
.sleeve .track + .track{margin-top:10px}
.sleeve small{display:block;color:var(--bark)}
.sleeve .chips{margin-top:12px}
.credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.credit{margin:0;font-family:inherit;font-size:.88rem;white-space:pre-wrap;overflow-wrap:anywhere;
  color:var(--cream);background:rgba(156,134,121,.16);padding:12px 14px;
  border-radius:14px 18px 12px 16px}

/* --- a song page: a rail that stays put, a column that moves ------------ */
/* Stacked on a phone exactly as the rest of the site is. Given room, the song
   itself — cover, player, the two buttons — stops scrolling away from you, and
   only the reading matter travels. */
.song{display:grid;gap:22px}
.stream-top{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.stream-top h2{margin:0;font-size:1rem}
.stream-top .chips{margin-top:0}
.stream-top.soon{gap:10px 22px}
.stream-top.soon .signup{flex:1 1 22em;margin:0}
.rail .cover{width:min(320px,100%);margin-bottom:15px}
.rail h1{margin-bottom:.22em}
.rail .lede{font-size:1rem;margin-bottom:1.1rem}
.rail .panel,.col .panel{margin-bottom:0}
.col{display:flex;flex-direction:column;gap:22px}
.now{color:var(--cream);font-size:.9rem}
.sep{border:0;border-top:2px dotted rgba(156,134,121,.4);margin:16px 0 12px}
@media(min-width:1040px){
  .wrap.wide{max-width:1280px}
  .song{grid-template-columns:minmax(340px,400px) minmax(0,1fr);gap:26px;align-items:start}
  /* The rail only stays put if it fits, so up here the sleeve sits beside the
     name rather than above it and the reference material lives in the column. */
  .rail{position:sticky;top:22px}
  .rail-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
  .rail .cover{width:160px;flex:0 0 auto;margin-bottom:0}
  .rail h1{font-size:1.8rem;line-height:1.15}
  .rail .lede{font-size:.9rem;margin-bottom:0}
  /* The words are the only thing long enough to set the page's height, so on a
     wide screen they get a pane of their own and the rest stays where it is.
     It fades out at the foot rather than stopping dead, so it reads as more to
     come; the padding underneath means the fade never eats the last line. */
  .lyric-pane .j1b-sheet{max-height:calc(100vh - 250px);overflow:auto;
    padding-right:10px;padding-bottom:30px;overscroll-behavior:contain;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
}
@media(max-width:620px){.wrap{padding:20px 16px 60px}.panel{padding:18px 18px}}

/* --- the stage: a song's loop ------------------------------------------ */
/* On a phone it comes straight after the name and ahead of the player; on a
   wide screen it heads the column beside the rail. The loop is portrait, so a
   phone fills the stage with it and anything wider stands it in the middle of
   a blurred still of itself. */
.stage{position:relative;overflow:hidden;isolation:isolate;
  height:clamp(400px,66vh,620px);background:var(--ink);
  border:3px solid var(--sun);box-shadow:7px 9px 0 var(--cast);
  border-radius:34px 26px 38px 28px/26px 38px 28px 34px}
.stage::before{content:"";position:absolute;inset:-40px;z-index:-2;
  background:var(--poster) center/cover no-repeat;filter:blur(26px) brightness(.4);
  transition:opacity .3s}
/* its sides feather into the still, which is only the first frame and may be
   lighter or darker than wherever the loop has got to. When the loop's own
   edges go black (Top Muse cutting from the gallery wall to the man), player.js
   marks the stage dark and the still steps aside for the plain black behind */
.stage.dark{background:#000}
.stage.dark::before{opacity:0}
.stage video{position:absolute;top:0;left:50%;height:100%;width:auto;aspect-ratio:9/16;
  transform:translateX(-50%);object-fit:cover;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.song.has-stage .stage{order:1}
@media(max-width:1039.98px){
  /* the rail's two halves become the stack's own, so the stage can sit between */
  .song.has-stage .rail{display:contents}
  .song.has-stage .rail>.panel,.song.has-stage .col{order:2}
  /* and the sleeve steps aside for it: small, beside the name, so the loop is
     on the first screen rather than under a second full-width picture */
  .song.has-stage .rail-head{display:flex;gap:16px;align-items:center}
  .song.has-stage .rail-head .cover{width:clamp(104px,30vw,180px);flex:0 0 auto;margin-bottom:0}
  .song.has-stage .rail-head h1{font-size:clamp(1.6rem,6vw,2.6rem);line-height:1.1}
  .song.has-stage .rail-head .lede{margin-bottom:.6rem}
  .song.has-stage .rail-name .share{margin:0}
}
@media(min-width:1040px){
  .song.has-stage{grid-template-rows:auto auto 1fr}
  .song.has-stage .stream-top{grid-row:1}
  .song.has-stage .rail{grid-column:1;grid-row:2/span 2}
  .song.has-stage .stage{grid-column:2;grid-row:2}
  .song.has-stage .col{grid-column:2;grid-row:3}
}
/* who made the loop: a small button in its corner, opening to a name */
.stage-credit{position:absolute;right:14px;bottom:14px;z-index:1;
  display:flex;flex-direction:row-reverse;align-items:center;gap:8px}
.stage-credit summary{list-style:none;cursor:pointer;width:34px;height:34px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--sun);
  border:2px solid var(--sun);font:italic 700 1.05rem/1 Georgia,serif;opacity:.82}
.stage-credit summary::-webkit-details-marker{display:none}
.stage-credit summary:hover,.stage-credit[open] summary{opacity:1}
.stage-credit summary:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
.stage-credit p{margin:0;padding:6px 12px;background:var(--ink);color:var(--cream);
  border:2px solid var(--sun);border-radius:16px 12px 18px 12px;font-size:.88rem;white-space:nowrap}
.stage-credit a{color:var(--sun)}
@media(max-width:620px){
  .stage{height:auto;aspect-ratio:4/5;max-height:76svh}
  .stage video{left:0;width:100%;aspect-ratio:auto;transform:none;
    -webkit-mask-image:none;mask-image:none}
  .stage::before{display:none}
}
/* A song page on a phone: the play button on the first screen, and the whole
   page about a third shorter. The player comes straight after the name, then
   the streaming links (or, until there are any, the ask for an email), then
   the loop. The words become a pane of their own, as on a wide screen,
   so player.js scrolls the pane rather than the page. */
@media(max-width:620px){
  .song{gap:14px}
  .song .stream-top{order:2;margin-bottom:0}
  .song .rail{order:0}
  .song.has-stage .rail-head{order:0}
  .song.has-stage .rail>.panel{order:1}
  .song.has-stage .stage{order:3}
  .song .col,.song.has-stage .col{order:4;gap:14px}
  .song .panel{box-shadow:4px 6px 0 var(--cast)}
  .song h2{font-size:1.1rem;margin-bottom:.4rem}
  .song .stream-top h2{font-size:.9rem}
  .song .rail-head{display:flex;gap:14px;align-items:center}
  .song .rail-head .cover,.song.has-stage .rail-head .cover{width:88px;margin:0;
    border-radius:14px 18px 12px 16px;box-shadow:4px 5px 0 var(--cast)}
  .song .rail-head h1,.song.has-stage .rail-head h1{font-size:1.7rem;line-height:1.1}
  .song .rail .lede,.song.has-stage .rail-head .lede{font-size:.88rem;line-height:1.4;margin:.15rem 0 .4rem}
  .song .rail-name .share{margin:0;padding:4px 11px}
  .song .rail .row{margin-top:6px}
  .song .rail .play{width:42px;height:42px}
  .song .rail .play svg{width:15px;height:15px}
  .song .rail .note{font-size:.76rem}
  .song .rail .j1b-player+.note{display:none}
  .song .sep{margin:12px 0 10px}
  .song .btn{padding:9px 14px;font-size:.88rem}
  .song .rail .row .btn{flex:1 1 auto;justify-content:center}
  .stage{max-height:58svh}
  .lyric-pane .j1b-sheet{max-height:56svh;overflow:auto;font-size:.88rem;line-height:1.45;
    padding-right:6px;padding-bottom:26px;overscroll-behavior:contain;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
  .lyric-pane .note{margin-top:6px}
  /* the credits read as label and value side by side again: short labels,
     and the long values wrap under themselves rather than under the label */
  .song .col table{font-size:.84rem;margin-top:4px}
  .song .col tr{display:flex;gap:10px;padding:3px 0}
  .song .col th{flex:0 0 7.2em;padding:0}
  .song .col td{flex:1;min-width:0;padding:0}
  .song .col h3{margin:.9rem 0 .3rem}
}

/* --- a release sheet: the distributor's list, one card per item --------- */
.release-head{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;margin-bottom:22px}
.release-head .cover{width:min(260px,100%)}
.release-name{flex:1;min-width:260px}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 .2rem;color:var(--ink)}
.meter{height:12px;max-width:420px;background:rgba(10,10,10,.18);border-radius:8px;overflow:hidden}
.meter span{display:block;height:100%;background:var(--green)}
.meter-note{font-size:.85rem;margin:.35rem 0 .2rem;max-width:60ch}
.listen .row{margin-top:0}
.items{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));align-items:start}
.item{background:var(--ink);color:var(--cream);padding:16px 18px;border:3px solid var(--green);
  box-shadow:5px 7px 0 var(--cast);border-radius:22px 28px 20px 26px/26px 20px 28px 22px;
  min-width:0}
.item.part{border-color:var(--sun)}
.item.none{border-style:dashed;border-color:var(--bark)}
.item-head{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.item-head h2{font-size:1rem;margin:0;flex:1;letter-spacing:.04em}
.item .n{font-size:.8rem;font-weight:700;color:var(--bark);min-width:1.6em}
.item .val{margin:0 0 .5rem;white-space:pre-line;overflow-wrap:anywhere}
.item .val a,.item td a,.item li a,.item p a{color:var(--sun)}
.item table{margin-top:0}
.item ul{margin:.2rem 0 .6rem;padding-left:1.2rem;font-size:.9rem}
.item .todo{margin:6px 0 0}
.item .thumb{width:120px;height:auto;border-radius:10px;display:block;margin-bottom:8px}
.words{font-family:inherit;font-size:.85rem;white-space:pre-wrap;max-height:260px;overflow:auto;
  margin:0 0 6px;padding:10px 12px;background:rgba(156,134,121,.14);border-radius:10px}
.copy{font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;border:0;
  background:var(--sun);color:var(--ink);padding:4px 11px;border-radius:12px 8px 13px 7px}
.copy:hover,.copy:focus-visible{background:var(--orange)}
.copy.done{background:var(--green);color:var(--sun)}
.btn.copy{font-size:.95rem;padding:11px 18px;border-radius:16px 10px 17px 9px}

/* --- /press/: the media library ----------------------------------------- */
.lib-jump{margin:-.6rem 0 1.4rem}
.lib-jump a{background:var(--ink);color:var(--sun)}
.lib-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.lib-head h2{margin:0}
.lib-head .chips{margin:0 0 6px}
.lib-bar{background:var(--ink);margin:14px -8px 16px;
  padding:10px 8px 12px;border-bottom:2px dotted rgba(156,134,121,.45);display:grid;gap:9px}
@media(min-width:761px){.lib-bar{position:sticky;top:0;z-index:5}}
.lib-search{position:relative}
.lib-search input{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--cream);
  border:3px solid var(--sun);border-radius:14px 9px 15px 8px;padding:9px 44px 9px 14px}
.lib-search input:focus{outline:none;border-color:var(--orange)}
.lib-search kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:inherit;
  font-size:.75rem;color:var(--bark);border:1px solid var(--bark);border-radius:5px;padding:0 6px}
.lib-toggles{display:flex;flex-wrap:wrap;gap:6px}
.lib-toggles button,.lib-view button,.lib-clear{font:inherit;font-size:.8rem;font-weight:600;
  cursor:pointer;color:var(--cream);background:transparent;border:2px solid rgba(156,134,121,.6);
  padding:3px 11px;border-radius:12px 8px 13px 7px}
.lib-toggles button small{color:var(--bark);font-weight:400}
.lib-toggles button:hover,.lib-view button:hover,.lib-clear:hover{border-color:var(--sun)}
.lib-toggles button[aria-pressed="true"],.lib-view button[aria-pressed="true"]{
  background:var(--sun);border-color:var(--sun);color:var(--ink)}
.lib-toggles button[aria-pressed="true"] small{color:var(--deep)}
.lib-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:.82rem}
.lib-count{margin:0;color:var(--sun);font-style:italic;flex:1 1 auto}
.lib-tools select{font:inherit;font-size:.8rem;background:var(--cream);color:var(--ink);
  border:0;border-radius:8px;padding:2px 6px}
.lib-view{display:flex;gap:4px}
.lib-clear{border-color:var(--orange);color:var(--orange)}
.lib-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.lib-item{background:rgba(156,134,121,.13);border-radius:14px 10px 15px 9px;overflow:hidden;
  display:flex;flex-direction:column;scroll-margin-top:220px}
.lib-item[hidden]{display:none}
.lib-item:target{outline:3px solid var(--sun)}
.lib-thumb{position:relative;display:grid;place-items:center;aspect-ratio:1;background:
  repeating-conic-gradient(#1a1a1a 0 25%,#141414 0 50%) 0 0/18px 18px;overflow:hidden}
.lib-thumb img,.lib-thumb video{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .25s}
.k-photo .lib-thumb img,.k-video .lib-thumb img,.k-video .lib-thumb video,
.k-meme .lib-thumb img,.k-meme .lib-thumb video{object-fit:cover}
.k-audio .lib-thumb img,.k-words .lib-thumb img,.k-kit .lib-thumb img{opacity:.42;filter:saturate(.6)}
.lib-thumb:hover img,.lib-thumb:focus-visible img{transform:scale(1.04)}
.lib-badge{position:absolute;left:8px;bottom:8px;background:var(--ink);color:var(--sun);
  font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:9px 6px 10px 5px;
  border:1px solid var(--sun);white-space:nowrap}
.k-words .lib-badge,.k-kit .lib-badge,.k-audio .lib-badge{left:50%;top:50%;bottom:auto;
  transform:translate(-50%,-50%);font-size:1rem;padding:6px 14px}
.lib-meta{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.lib-meta b{color:var(--cream);font-size:.92rem;line-height:1.3}
.lib-specs,.lib-credit{font-size:.74rem;color:var(--bark)}
.lib-credit{color:var(--sun);font-style:italic}
.lib-cap{display:none;margin:.2rem 0;font-size:.8rem;color:var(--cream)}
.lib-dl{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:7px}
.lib-dl a{font-size:.72rem;font-weight:700;text-decoration:none;color:var(--ink);
  background:var(--sun);padding:2px 9px;border-radius:9px 6px 10px 5px}
.lib-dl a:first-child{background:var(--orange)}
.lib-dl a:hover,.lib-dl a:focus-visible{background:var(--cream)}
.lib-colours{grid-column:span 1}
.lib-swatches{display:grid;gap:6px;margin-top:8px}
.lib-swatch{display:flex;align-items:center;gap:8px;font:inherit;font-size:.8rem;cursor:pointer;
  color:var(--cream);background:transparent;border:0;padding:0;text-align:left}
.lib-swatch i{width:34px;height:26px;border-radius:8px 5px 9px 4px;background:var(--c);
  border:2px solid rgba(244,231,206,.35);flex:0 0 auto}
.lib-swatch code{margin-left:auto;color:var(--bark)}
.lib-swatch.done code{color:var(--sun)}
.lib-grid.list{grid-template-columns:1fr;gap:8px}
.lib-grid.list .lib-item{flex-direction:row;align-items:stretch}
.lib-grid.list .lib-thumb{width:112px;flex:0 0 112px}
.lib-grid.list .lib-cap{display:block}
.lib-grid.list .lib-colours .lib-swatches{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.lib-empty{text-align:center;color:var(--sun);font-style:italic;padding:30px 0}
.lib-box{max-width:min(1100px,96vw);width:100%;max-height:94vh;padding:0;border:3px solid var(--sun);
  background:var(--ink);color:var(--cream);border-radius:22px 14px 24px 12px;overflow:hidden}
.lib-box[open]{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.lib-box::backdrop{background:rgba(10,10,10,.82)}
.lib-stage{display:grid;place-items:center;min-height:50vh;max-height:94vh;background:
  repeating-conic-gradient(#1a1a1a 0 25%,#141414 0 50%) 0 0/22px 22px}
.lib-stage img,.lib-stage video{max-width:100%;max-height:92vh;object-fit:contain;display:block}
.lib-stage audio{width:86%}
.lib-stage pre{align-self:stretch;justify-self:stretch;margin:0;padding:22px;overflow:auto;
  max-height:92vh;padding-left:60px;white-space:pre-wrap;font:inherit;font-size:.88rem;color:var(--cream)}
.lib-info{padding:44px 20px 20px;overflow:auto;max-height:94vh;display:flex;flex-direction:column;gap:8px}
.lib-info h3{margin:0;color:var(--sun);font-size:1.15rem}
.lib-info p{margin:0;font-size:.86rem}
.lib-info .lib-dl a{font-size:.85rem;padding:5px 12px}
.lib-info .copy{align-self:flex-start;margin-top:4px}
.lib-x,.lib-nav{position:absolute;z-index:2;font:inherit;font-weight:700;cursor:pointer;border:0;
  background:var(--ink);color:var(--sun);width:38px;height:38px;border-radius:50%;
  border:2px solid var(--sun);font-size:1.4rem;line-height:1;display:grid;place-items:center}
.lib-x{top:8px;right:10px}
.lib-nav{top:50%;transform:translateY(-50%)}
.lib-nav.prev{left:10px}
.lib-nav.next{right:310px}
.lib-x:hover,.lib-nav:hover{background:var(--sun);color:var(--ink)}
@media(max-width:760px){
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .lib-bar{margin:12px -4px 14px;padding:8px 4px 10px}
  .lib-toggles{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
  .lib-toggles button{flex:0 0 auto}
  .lib-box[open]{grid-template-columns:1fr;grid-template-rows:auto auto;overflow:auto}
  .lib-stage{min-height:40vh;max-height:62vh}
  .lib-stage img,.lib-stage video{max-height:60vh}
  .lib-info{max-height:none;padding:16px}
  .lib-nav{top:30vh}
  .lib-nav.next{right:10px}
  .lib-grid.list .lib-thumb{width:84px;flex-basis:84px}
}
@media(prefers-reduced-motion:reduce){.lib-thumb img{transition:none}}