:root{--bg:#14121a;--fg:#ece9f2;--dim:#9b94ad;--line:#2d2838;--card:#1d1926;--accent:#ff5c8a;--low:#38d39f}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
a{color:inherit}
main{max-width:1100px;margin:0 auto;padding:0 16px 64px}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;max-width:1100px;margin:0 auto;padding:16px}
.brand{flex:0 0 auto;white-space:nowrap;font-weight:700;font-size:20px;text-decoration:none}
.bar nav{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:12px 18px}
.bar nav a{color:var(--dim);text-decoration:none;font-size:14px;padding-bottom:3px;border-bottom:2px solid transparent}
.bar nav a.on{color:var(--fg);font-weight:700;border-bottom-color:var(--accent)}
.pr{max-width:1100px;margin:0 auto 16px;padding:8px 16px;font-size:12px;color:var(--dim);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h1{font-size:22px}
.note,.fine{color:var(--dim);font-size:13px}
.note-break{flex-basis:100%;margin-top:10px}
.hero-band{position:relative;overflow:hidden;border-radius:14px;margin:8px 0 14px;min-height:320px;display:grid;background:#241f30}
/* The covers are stacked and dissolved through in turn, each drifting slowly
   sideways while it shows. Scaled slightly larger than the frame so the drift
   never exposes an edge. Each is hidden until its own delay brings it round,
   so one set of keyframes serves every slot. */
/* The covers run on their own loop: a reader who pins a message with a dot
   still gets a changing picture, and the two never lock into one slideshow. */
/* The place in the loop, as a class: an inline style attribute would oblige
   the policy to allow inline styles, and these are the only ones. */
.hero-art .d0{animation-delay:0s}
.hero-slide.d0,.hero-dots .d0{animation-delay:0s} .hero-art .d1{animation-delay:7s}
.hero-slide.d1,.hero-dots .d1{animation-delay:10s} .hero-art .d2{animation-delay:14s}
.hero-slide.d2,.hero-dots .d2{animation-delay:20s} .hero-art .d3{animation-delay:21s}
.hero-slide.d3,.hero-dots .d3{animation-delay:30s} .hero-art .d4{animation-delay:28s}
.hero-slide.d4,.hero-dots .d4{animation-delay:40s}
.hero-shot{position:absolute;inset:0;display:block;opacity:0;pointer-events:none;
  transform:scale(1.08);animation:heroArt 35s linear infinite;
  will-change:opacity,transform}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes heroArt{
  0%{opacity:0;pointer-events:none;transform:scale(1.08) translateX(-0.8%)}
  2.4%{opacity:.55;pointer-events:auto}
  17.6%{opacity:.55;pointer-events:auto}
  20%{opacity:0;pointer-events:none;transform:scale(1.08) translateX(0.8%)}
  100%{opacity:0;pointer-events:none;transform:scale(1.08) translateX(0.8%)}
}
/* Stacked in one grid cell rather than positioned absolutely, so the band is
   as tall as its tallest slide and no text can spill out of it. */
/* Only as wide as its words. Stretched across the cell -- which a grid item
   is by default -- the slide on show swallowed every click meant for the
   cover behind it, and the band stopped opening the work. */
.hero-slide{grid-area:1/1;z-index:2;justify-self:start;display:flex;align-items:center;
  position:relative;opacity:0;pointer-events:none;will-change:opacity}
.hero-pick{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hero-n2 .hero-slide{animation:heroFade2 20s linear infinite}
.hero-n2 .hero-dots label{animation:heroDot2 20s linear infinite}
@keyframes heroDot2{
  0%{background:rgba(255,255,255,.3)}
  6%{background:var(--accent)}
  44%{background:var(--accent)}
  50%{background:rgba(255,255,255,.3)}
  100%{background:rgba(255,255,255,.3)}
}
@keyframes heroFade2{
  0%{opacity:0;pointer-events:none}
  6%{opacity:1;pointer-events:auto}
  44%{opacity:1;pointer-events:auto}
  50%{opacity:0;pointer-events:none}
  100%{opacity:0;pointer-events:none}
} .hero-n3 .hero-slide{animation:heroFade3 30s linear infinite}
.hero-n3 .hero-dots label{animation:heroDot3 30s linear infinite}
@keyframes heroDot3{
  0%{background:rgba(255,255,255,.3)}
  4%{background:var(--accent)}
  29.333%{background:var(--accent)}
  33.333%{background:rgba(255,255,255,.3)}
  100%{background:rgba(255,255,255,.3)}
}
@keyframes heroFade3{
  0%{opacity:0;pointer-events:none}
  4%{opacity:1;pointer-events:auto}
  29.333%{opacity:1;pointer-events:auto}
  33.333%{opacity:0;pointer-events:none}
  100%{opacity:0;pointer-events:none}
} .hero-n4 .hero-slide{animation:heroFade4 40s linear infinite}
.hero-n4 .hero-dots label{animation:heroDot4 40s linear infinite}
@keyframes heroDot4{
  0%{background:rgba(255,255,255,.3)}
  3%{background:var(--accent)}
  22%{background:var(--accent)}
  25%{background:rgba(255,255,255,.3)}
  100%{background:rgba(255,255,255,.3)}
}
@keyframes heroFade4{
  0%{opacity:0;pointer-events:none}
  3%{opacity:1;pointer-events:auto}
  22%{opacity:1;pointer-events:auto}
  25%{opacity:0;pointer-events:none}
  100%{opacity:0;pointer-events:none}
} .hero-n5 .hero-slide{animation:heroFade5 50s linear infinite}
.hero-n5 .hero-dots label{animation:heroDot5 50s linear infinite}
@keyframes heroDot5{
  0%{background:rgba(255,255,255,.3)}
  2.4%{background:var(--accent)}
  17.6%{background:var(--accent)}
  20%{background:rgba(255,255,255,.3)}
  100%{background:rgba(255,255,255,.3)}
}
@keyframes heroFade5{
  0%{opacity:0;pointer-events:none}
  2.4%{opacity:1;pointer-events:auto}
  17.6%{opacity:1;pointer-events:auto}
  20%{opacity:0;pointer-events:none}
  100%{opacity:0;pointer-events:none}
}
/* Picking a dot holds that message. The covers keep going: they are a separate
   loop, and freezing them was not what the dot was pressed for. */
.hero-band:has(.hero-pick:checked) .hero-slide{animation:none;opacity:0;pointer-events:none}
.hero-band:has(.hero-pick:checked) .hero-dots label{animation:none;background:rgba(255,255,255,.3)}
#hero-0:checked ~ .hero-slide-0{opacity:1;pointer-events:auto} #hero-1:checked ~ .hero-slide-1{opacity:1;pointer-events:auto} #hero-2:checked ~ .hero-slide-2{opacity:1;pointer-events:auto} #hero-3:checked ~ .hero-slide-3{opacity:1;pointer-events:auto} #hero-4:checked ~ .hero-slide-4{opacity:1;pointer-events:auto}
.hero-dots{grid-area:1/1;align-self:end;justify-self:start;z-index:2;
  display:flex;gap:10px;margin:0 0 16px 34px}
.hero-dots label{width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);
  cursor:pointer;transition:background .2s}
.hero-dots label:hover{background:rgba(255,255,255,.6)}
#hero-0:checked ~ .hero-dots label:nth-child(1){background:var(--accent)} #hero-1:checked ~ .hero-dots label:nth-child(2){background:var(--accent)} #hero-2:checked ~ .hero-dots label:nth-child(3){background:var(--accent)} #hero-3:checked ~ .hero-dots label:nth-child(4){background:var(--accent)} #hero-4:checked ~ .hero-dots label:nth-child(5){background:var(--accent)}
/* The dots are radio buttons, so they take keyboard focus; the ring has to
   land on the stripe people can see, not on the hidden input. */
.hero-pick:focus-visible ~ .hero-dots label{outline:1px solid var(--line)}
#hero-0:focus-visible ~ .hero-dots label:nth-child(1){outline:2px solid var(--accent);outline-offset:3px} #hero-1:focus-visible ~ .hero-dots label:nth-child(2){outline:2px solid var(--accent);outline-offset:3px} #hero-2:focus-visible ~ .hero-dots label:nth-child(3){outline:2px solid var(--accent);outline-offset:3px} #hero-3:focus-visible ~ .hero-dots label:nth-child(4){outline:2px solid var(--accent);outline-offset:3px} #hero-4:focus-visible ~ .hero-dots label:nth-child(5){outline:2px solid var(--accent);outline-offset:3px}
/* Movement nobody asked for is movement some people cannot use: hold on one. */
@media(prefers-reduced-motion:reduce){
  .hero-dots label{animation:none !important}
  .hero-slide{animation:none !important}
  .hero-shot{animation:none !important;transform:none}
  .hero-band .hero-slide-0{opacity:1;pointer-events:auto}
  .hero-art .hero-shot:first-child{opacity:.55;pointer-events:auto}
}
/* The headline sits over artwork, so it needs its own ground to stay readable
   whatever the cover happens to look like. */
/* Three layers, each stating where it sits: covers, then the veil that keeps
   the words readable over them, then the words. Left to paint order the veil
   ended up over the text on one side and under a cover on the other. */
.hero-art{grid-area:1/1;position:relative;z-index:0}
.hero-veil{grid-area:1/1;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(21,18,28,.98) 0%,rgba(21,18,28,.94) 38%,rgba(21,18,28,.55) 72%,rgba(21,18,28,.3) 100%)}
/* The text column keeps its clicks to itself: only its own button leads
   anywhere. Opening a work from under the headline would be a surprise. */
/* Inherited, so a message that is not on screen cannot take a click meant for
   the cover behind it. The one on screen does take clicks: only its own button
   leads anywhere, and opening a work from under the headline would surprise. */
.hero-in{position:relative;padding:32px 34px 44px;max-width:620px;pointer-events:inherit}
.pill{display:inline-block;background:var(--accent);color:#2a0d18;font-size:12px;font-weight:700;padding:4px 12px;border-radius:14px}
.hero-in .hero-h{font-size:34px;line-height:1.3;margin:14px 0 0;letter-spacing:.01em;font-weight:700}
.hero-lead{margin:14px 0 0;max-width:34em;font-size:15px;color:var(--fg);opacity:.9}
.hero-stat{margin:14px 0 0;font-size:14px;color:var(--dim)}
.hero-stat strong{color:var(--fg);font-size:20px;margin:0 2px}
.hero-in p{margin:18px 0 0}
.go{display:inline-flex;align-items:center;min-height:46px;padding:0 24px;border-radius:9px;background:var(--accent);color:#1a1020;font-weight:700;text-decoration:none;font-size:15px}
.hero-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:18px;font-size:13px;color:var(--dim);text-decoration:none}
.hero-pick .t{color:var(--fg)}
.hero-pick .p s{margin-right:4px}
.hero-pick .p strong{color:var(--accent);font-size:16px}
.statusbar{display:inline-block;margin:0 0 28px;padding:7px 14px;border:1px solid var(--line);border-radius:16px;font-size:12px;color:var(--dim)}
.sect{margin:0 0 36px}
.sect header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin:0 0 14px}
.sect header h2{margin:0;font-size:19px}
.sect header p{margin:4px 0 0;font-size:12px;color:var(--dim)}
.sect header a{font-size:13px;color:var(--dim);white-space:nowrap}
/* Narrow enough that the words sit over the cover rather than beside it, so
   the veil has to darken from the bottom instead of from the left. */
@media(max-width:700px){
  .hero-band{min-height:260px}
  .hero-in{padding:22px 18px 40px}
  .hero-in .hero-h{font-size:27px}
  .hero-slide{justify-self:stretch}
  .hero-veil{background:linear-gradient(0deg,rgba(21,18,28,.97) 42%,rgba(21,18,28,.72) 72%,rgba(21,18,28,.4) 100%)}
}
main h2{font-size:17px;margin:28px 0 8px}
main ul{padding-left:1.3em;line-height:1.9}
main ul li{margin:4px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card .thumb{position:relative;display:block}
/* The move since the last reading, over the corner of the cover. */
.card .move{position:absolute;top:6px;right:6px;background:rgba(21,18,28,.86);color:var(--accent);font-size:12px;font-weight:700;padding:3px 7px;border-radius:5px}
.card .badges{margin:0 0 6px;min-height:19px;display:flex;flex-wrap:wrap;gap:4px}
.card .rate{margin:5px 0 0;font-size:12px;color:var(--dim)}
.card .rate span{color:#f0a23c;letter-spacing:-1px}
.card .meta{flex:1 1 auto}
.buyout{display:block;margin:0 10px 10px;text-align:center;background:var(--accent);color:#1a1020;font-weight:700;font-size:13px;line-height:38px;border-radius:8px;text-decoration:none}
.buyout span{font-size:10px;font-weight:500;opacity:.75;margin-left:4px}
/* 4:3, the ratio DLsite actually serves. object-fit is contain rather than
   cover, so a shop whose ratio differs (FANZA is unverified until its API key
   arrives) letterboxes instead of losing the edges of the artwork. */
.card img,.noimg{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;background:#241f30}
.hero{gap:28px}
.hero>a{flex:1 1 440px;max-width:560px;min-width:0}
.hero img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;border-radius:10px;background:#241f30}
.hero>div{flex:999 1 320px;min-width:0}
.card .meta{padding:10px}
.card h3{font-size:13px;margin:4px 0;line-height:1.4}
.card h3 a{text-decoration:none}
.maker,.shop{color:var(--dim);font-size:12px;margin:2px 0}
/* Shop and category as chips, so the eye sorts a grid of cards by shop without
   reading. The shop carries its own colour; the category stays neutral, or two
   competing colours would say neither is the one to look at. */
.shop{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;line-height:1.5;font-weight:700;white-space:nowrap}
.tag.src-dlsite{background:#1565c0;color:#fff}
.tag.src-fanza{background:#c0185e;color:#fff}
/* The shop is a solid fill, the category a tinted one: both are coloured, but
   they do not compete to be read first. */
.tag.kind{background:rgba(255,255,255,.1);color:var(--fg);font-weight:400}
.tag.kind-game {background:rgba(145,98,255,.18); color:#c4a2ff}
.tag.kind-voice{background:rgba(70,195,230,.18); color:#5ecbe8}
.tag.kind-manga{background:rgba(255,170,60,.18);  color:#ffc477}
.tag.kind-cg   {background:rgba(110,220,105,.18); color:#92e08c}
.tag.kind-movie{background:rgba(255,140,110,.18); color:#ff9f8a}
.tag.kind-music{background:rgba(140,165,255,.18); color:#9fb8ff}
.tag.kind-tool {background:rgba(150,170,195,.18); color:#a8b4c4}
.tag.kind-other{background:rgba(255,255,255,.1);  color:var(--dim)}
/* The sample pages sit over the cover rather than replacing it, and cut
   straight to the next one. Two layers all the same, so the one on screen
   holds until the next file has arrived: swapping a single src would cut to
   blank for as long as the download takes. */
.card .thumb .peeklayer{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#241f30;opacity:0;pointer-events:none}
.price{margin:6px 0 2px}.price strong{color:var(--accent);font-size:16px}.price s{color:var(--dim);font-size:12px}
.badge{display:inline-block;font-size:11px;padding:2px 6px;border-radius:4px}
.badge.off{background:var(--accent);color:#1a1020}
.badge.low{background:var(--low);color:#08231b}
.badge.drop{border:1px solid var(--accent);color:var(--accent)}
.rate{margin-left:6px}
.banner{background:#241f30;border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--fg)}
.hero{display:flex;gap:20px;flex-wrap:wrap}
.buy{display:inline-block;background:var(--accent);color:#1a1020;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:700}
.leave{color:var(--dim);margin-left:16px}
.spark{color:var(--accent)}
.hist{border-collapse:collapse;font-size:13px}.hist th,.hist td{border-bottom:1px solid var(--line);padding:4px 16px 4px 0;text-align:left}
.tags a{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:2px 8px;margin:0 6px 6px 0;font-size:12px;color:var(--fg);text-decoration:none}
.tags a:hover,.tags a:focus-visible{border-color:var(--accent);color:var(--accent)}
.genres .genre-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.genres .genre-row select{flex:1 1 auto;min-width:0}
.rowbtn{flex:0 0 auto;background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:4px;
  padding:4px 9px;font-size:14px;line-height:1;cursor:pointer}
.rowbtn:hover,.rowbtn:focus-visible{border-color:var(--accent);color:var(--accent)}
.rowbtn.add{width:100%;padding:6px;font-size:13px;margin-top:2px}
.rowbtn[hidden]{display:none}
#facet-go[hidden]{display:none}
.listhead{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between}
.listhead>div{min-width:0}
.listhead h1,.listhead h2{margin-bottom:0}
.sortbar{display:flex;gap:8px;align-items:center;flex:0 0 auto;margin-bottom:12px}
.sortbar label{color:var(--dim);font-size:13px;white-space:nowrap}
.sortbar select{font:inherit;font-size:14px;background:var(--card);color:var(--fg);
  border:1px solid var(--line);border-radius:8px;min-height:38px;padding:0 8px}
.sortbar button{font:inherit;font-size:13px;background:var(--card);color:var(--fg);
  border:1px solid var(--line);border-radius:8px;min-height:38px;padding:0 12px;cursor:pointer}
.sortbar button[hidden]{display:none}
.cats{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 20px}
.cats .chip{display:inline-block;padding:6px 13px;border-radius:16px;font-size:13px;
  color:var(--dim);background:var(--card);border:1px solid var(--line);text-decoration:none}
.cats .chip:hover{color:var(--fg);border-color:var(--dim)}
.cats .chip.on{background:var(--accent);border-color:var(--accent);color:#2a0d18;font-weight:700}
.cats .chip.more{border-style:dashed}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0}
/* In the category row it sits right, beside the hand-off link, and that row
   carries the gap below it. On the search page it stands alone, so it has to
   carry its own. */
.pager.top{margin:0 0 0 auto;gap:8px}
.results>.pager.top{margin:0 0 20px auto}
.pager.top a{padding:6px 12px;font-size:13px;border-radius:16px}
.pager.top .at{white-space:nowrap}
.pager.top span:empty{display:none}
.pager a{color:var(--fg);text-decoration:none;font-size:14px;padding:8px 16px;
  border:1px solid var(--line);border-radius:8px;background:var(--card)}
.pager a:hover,.pager a:focus-visible{border-color:var(--accent);color:var(--accent)}
.pager .at{color:var(--dim);font-size:13px}
.faq{margin:20px 0 0}
.faq dt{margin:22px 0 0;font-size:16px;font-weight:700;color:var(--fg)}
.faq dt:first-child{margin-top:0}
.faq dd{margin:8px 0 0;padding:0 0 18px;color:var(--dim);line-height:1.9;
  border-bottom:1px solid var(--line)}
.faq dd:last-child{border-bottom:0}
.work .signals{margin:8px 0 0;color:var(--dim);font-size:14px}
.work .signals .stars{color:#f0a23c;letter-spacing:.06em}
.work .signals .sold{color:var(--fg)}
.savecond{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.savecond button{width:100%;background:transparent;color:var(--fg);border:1px solid var(--accent);
  border-radius:6px;padding:9px;font-size:14px;cursor:pointer}
.savecond button:hover,.savecond button:focus-visible{background:var(--accent);color:#2a0d18}
.savecond .fine{margin:8px 0 0}
.save-hint{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.savedlist{list-style:none;padding:0;margin:0 0 24px}
.savedlist li{display:flex;gap:10px;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);padding:10px 0}
.savedlist a{color:var(--fg);text-decoration:none}
.savedlist a:hover{color:var(--accent)}
.savedlist button{background:transparent;color:var(--dim);border:1px solid var(--line);
  border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer}
.savedlist button:hover,.savedlist button:focus-visible{border-color:var(--accent);color:var(--accent)}
.pager{display:flex;gap:16px;margin-top:24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.findbar{flex:1 1 320px;display:flex;min-width:0}
.findbar select,.findbar input,.findbar button{font:inherit;font-size:14px;min-height:42px;background:var(--card);color:var(--fg);border:1px solid var(--line)}
.findbar select{border-radius:8px 0 0 8px;max-width:11em;padding:0 8px}
.findbar input{flex:1 1 auto;min-width:0;border-left:0;border-right:0;padding:0 12px}
.findbar button{border-radius:0 8px 8px 0;padding:0 16px;font-weight:700;cursor:pointer;white-space:nowrap}
main.wide{max-width:none;margin:0;padding:0 0 64px}
.withside{display:flex;flex-wrap:wrap;align-items:flex-start}
.withside .results{flex:999 1 560px;min-width:0;padding:0 24px}
.facets{flex:1 1 230px;background:var(--card);border:0;border-right:1px solid var(--line);border-radius:0;padding:4px 14px 24px}
.facets>summary{display:none;cursor:pointer;list-style:none;padding:12px 2px;
  font-size:14px;font-weight:700;color:var(--fg)}
.facets>summary::-webkit-details-marker{display:none}
.facets>summary::after{content:"▾";float:right;color:var(--dim)}
.facets[open]>summary::after{content:"▴"}
/* The column is as tall as its contents. It was sticky with its own scrollbar,
   which meant a second bar beside the page's and, when the facets were taller
   than the window, a bottom you could not reach. */
@media(min-width:900px){
  .facets{flex:0 0 230px}
}
.facets h2{font-size:13px;color:var(--dim);margin:14px 0 8px}
.facets fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:12px 0 4px}
.facets legend{font-size:13px;color:var(--dim);padding:0}
.facets input,.facets select{font:inherit;font-size:14px;min-height:40px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:7px;padding:0 10px;max-width:100%}
/* The column is narrow, so a row that will not fit wraps instead of squashing.
   The two price boxes can share a line; the rating selects need a full one each
   for their labels to stay readable. */
.facets .pair{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.facets .pair input{min-width:0;flex:1 1 56px}
.facets .pair select{min-width:0;flex:1 1 100%}
.facets .unit{color:var(--dim);font-size:13px}
.facets .check{display:flex;align-items:center;gap:8px;min-height:36px;font-size:13px}
.facets .check input[type=checkbox]{width:18px;height:18px;min-height:0;flex:0 0 auto}
.facets .check span{flex:1 1 auto}
.facets .check em{font-style:normal;color:var(--dim);font-size:12px}
.facets .check.zero span,.facets .check.zero em{color:#6f6882}
.facets .own select{margin-top:6px}
.facets .fine{margin:6px 0 0}
.facets .facet-actions{margin:16px 0 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.facets button[type=submit]{width:100%;font:inherit;font-weight:700;background:var(--accent);color:#1a1020;border:0;border-radius:8px;min-height:44px;cursor:pointer}
.facets .facet-actions a{font-size:13px;color:var(--dim);min-height:24px}
.facets .current ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.facets .current a{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:5px 10px;font-size:12px;text-decoration:none;min-height:30px}
.facets .current a em{font-style:normal;color:var(--dim)}
.facets .clear{font-size:12px;color:var(--dim)}
.watchbtn{margin:10px 0 0}
.watchbtn button,.restore button{font:inherit;font-size:14px;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:8px;min-height:44px;padding:0 18px;cursor:pointer}
.watched{position:relative;display:flex}
.watched .card{flex:1 1 auto;min-width:0}
.unwatch{position:absolute;top:8px;right:8px;z-index:2;margin:0}
.unwatch button{min-height:32px;min-width:32px;padding:0;font-size:17px;line-height:1;
  border-radius:50%;background:rgba(10,8,14,.72);border:1px solid rgba(255,255,255,.28);color:#fff}
.unwatch button:hover,.unwatch button:focus-visible{background:var(--accent);border-color:var(--accent);color:#2a0d18}
.card .own{display:flex;flex-direction:column;gap:6px;padding:0 11px 12px}
.card .own button{width:100%;font:inherit;font-size:12px;min-height:34px;padding:0 10px;
  cursor:pointer;border-radius:8px;background:transparent;color:var(--dim);border:1px solid var(--line)}
.card .own button:hover,.card .own button:focus-visible{color:var(--fg);border-color:var(--dim)}
/* One look for "this is on", wherever the switch happens to be. */
.card .own button.bell.on,.pushbox button.on{background:rgba(56,211,159,.12);
  border-color:var(--low);color:var(--low);font-weight:700}
.card .own button.bell.on:hover,.pushbox button.on:hover,.pushbox button.on:focus-visible{
  background:rgba(56,211,159,.2);border-color:var(--low);color:var(--low)}
.mailset{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0}
.mailset label{flex:1 1 100%;color:var(--dim);font-size:13px}
.mailset input{flex:1 1 320px;min-width:0;font:inherit;font-size:14px;min-height:44px;
  background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:0 12px}
.mailset button{font:inherit;font-size:14px;min-height:44px;padding:0 18px;cursor:pointer;
  background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:8px}
.mailoff{margin:10px 0 0}
.mailoff button{font:inherit;font-size:12px;min-height:32px;padding:0 12px;cursor:pointer;
  background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:8px}
.note.ok{color:var(--low)}
.pushbox{margin:10px 0 0}
.pushbox button{font:inherit;font-size:14px;min-height:44px;padding:0 18px;cursor:pointer;
  background:var(--card);color:var(--fg);border:1px solid var(--accent);border-radius:8px}
.pushbox button:hover,.pushbox button:focus-visible{background:var(--accent);color:#2a0d18}
.pushbox button[hidden]{display:none}
.pushbox .ios{margin:4px 0 0;line-height:1.7}
.pushbox .ios[hidden]{display:none}
.pushbox button[disabled]{opacity:.5;cursor:progress}
.pushbox button[disabled]:hover{background:var(--card);color:var(--fg)}
.pushbox button.on[disabled]:hover{background:rgba(56,211,159,.12);color:var(--low)}
.deliver{margin:28px 0 8px;padding:18px 20px 20px;background:var(--card);
  border:1px solid var(--line);border-radius:12px}
.deliver h2{margin:0;font-size:18px}
.deliver>.note{margin:6px 0 0}
.deliver .way{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.deliver .way h3{margin:0 0 6px;font-size:15px;color:var(--fg)}
.deliver .way .note{margin:0 0 10px}
.deliver .way .code{background:var(--bg)}
.deliver .way .fine{margin:8px 0 0}
.code{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.code code{flex:1 1 auto;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;letter-spacing:.04em;overflow-wrap:anywhere}
.code .copy{flex:0 0 auto;font:inherit;font-size:13px;min-height:36px;padding:0 14px;cursor:pointer;
  background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:8px}
.code .copy:hover,.code .copy:focus-visible{border-color:var(--accent);color:var(--accent)}
.code .copy.done{border-color:var(--low);color:var(--low)}
.restore{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.restore label{flex:1 1 100%;color:var(--dim);font-size:13px}
.restore input{flex:1 1 320px;min-width:0;font:inherit;font-size:14px;min-height:44px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:0 12px}
footer{max-width:1100px;margin:0 auto;padding:24px 16px;border-top:1px solid var(--line);color:var(--dim);font-size:12px}
body.gate main{max-width:520px;padding-top:80px}
body.gate .actions{margin-top:24px}
@media(max-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}}

/* Phones. Everything that sat in a row beside something else goes onto its
   own line; a row that insists on its width is what pushes a page sideways. */
@media(max-width:620px){
  .bar{gap:10px 16px;padding:12px 16px}
  .findbar{flex:1 1 100%}
  .findbar select{max-width:8.5em}
  .pr{padding:8px 16px}
  main{padding:0 16px 48px}
  .listhead{flex-direction:column;align-items:stretch;gap:10px}
  .sortbar{margin-bottom:0;justify-content:flex-end}
  .sortbar select{flex:1 1 auto;min-width:0}
  /* The categories scroll sideways inside their own row rather than stacking
     into five lines that push the works off the screen. */
  .cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 16px;padding:0 16px 4px}
  .cats::-webkit-scrollbar{display:none}
  .cats .chip{flex:0 0 auto}
  .pager.top{margin-left:8px}
  .deliver{padding:16px 14px 18px}
  .code{flex-wrap:wrap}
  .work .hero{grid-template-columns:1fr}
  .restore input,.mailset input{flex:1 1 100%}
  /* The filters fold away so the works are the first thing on the screen. */
  .facets>summary{display:block}
  .facets{border-right:0;border-bottom:1px solid var(--line);padding:0 16px 8px}
  .facets[open]{padding-bottom:20px}
  /* The wide layout drops the page's side padding so the facet column can
     reach the edge; once it is a fold-away panel the results need it back. */
  .withside .results{padding:16px 16px 0}
}
@media(max-width:380px){
  .bar nav{gap:10px 14px}
  .bar nav a{font-size:13px}
}