/* Inter, served from this host. The stylesheet used to @import it from rsms.me, which put a
   third-party request - and every visitor's address and referrer - into every page load. The
   file is SIL OFL 1.1; its licence sits beside it in /root/fonts. */
@font-face{font-family:InterVariable;font-style:normal;font-weight:100 900;
  font-display:swap;src:url('/f/InterVariable.woff2') format('woff2')}
:root{
  --bg:#fbfbfa; --fg:#111113; --mut:#76767e; --line:#e7e7e4; --sel:#111113;
  --neg:#e5484d; --hov:rgba(17,17,19,.05); --negbg:rgba(229,72,77,.08);
  /* the one spectrum in this stylesheet, ending on the colour it starts with so a drifting
     background loops without a seam. The scroll bar had it inline; the download row wants it too */
  --spectrum:linear-gradient(90deg,#ff6a3d,#ff3d78,#a855f7,#3db4ff,#2dd4a7,#ff6a3d);
  --btn-p:6px 11px; --btn-r:6px;
  /* one pair of tokens drives every page's width and gutter, so a change here
     moves the shell, the fixed corner links and the mobile step together */
  --page-w:1240px; --page-x:40px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0c0c0d; --fg:#f0f0ef; --mut:#83838c; --line:#212123; --sel:#f0f0ef;
         --hov:rgba(240,240,239,.07); --negbg:rgba(229,72,77,.13) }
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);
  font:400 15px/1.5 InterVariable,Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  font-feature-settings:'cv05','ss01'}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* --sel was declared in both themes and never used anywhere: this is what it was for. The
   browser default is a blue fill that belongs to no palette in this stylesheet. */
::selection{background:var(--sel);color:var(--bg)}
/* and the other blue fill: chrome paints its own background over an autofilled field */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--fg);caret-color:var(--fg);
  -webkit-box-shadow:0 0 0 100px var(--bg) inset;transition:background-color 9999s}

/* One button chrome for the whole app: a hairline box, quiet at rest, filled while it holds
   a state. Everything that acts like a button wears it - sort keys, tag chips, Random and
   Reset, Save, the tag links on a series page, the dropdown buttons - so "can I click
   this" has one answer everywhere instead of five shades of grey text. */
.ctl button,.tg button,.more,.bar .rs,.bar .rnd,.auth button,.cf button,button.sv,
.rz button,.ch button,.tl a,.nx a{
  font:inherit;font-size:14px;line-height:1.25;color:var(--mut);
  border:1px solid var(--line);border-radius:var(--btn-r);padding:var(--btn-p);
  background:none;cursor:pointer;white-space:nowrap;
  transition:color .15s,border-color .15s,background-color .15s}
.ctl button:hover,.tg button:hover,.more:hover,.bar .rs:hover,.bar .rnd:hover,
button.sv:hover,.rz button:hover,.tl a:hover,.nx a:hover{
  color:var(--fg);border-color:var(--mut);background-color:var(--hov)}
/* holding a state: filled, so the live sort key and an included tag are unmistakable */
.ctl button[aria-pressed=true],.ctl button[aria-pressed=true]:hover,
.tg button[data-s=in],.tg button[data-s=in]:hover,button.sv.on,button.sv.on:hover{
  color:var(--bg);background-color:var(--fg);border-color:var(--fg)}
/* excluded: the same chip struck through, in the one negative colour */
.tg button[data-s=ex],.tg button[data-s=ex]:hover{
  color:var(--neg);border-color:var(--neg);background-color:var(--negbg);
  text-decoration:line-through;text-decoration-thickness:1px}
/* the two submits are the primary action on their page, so they are filled from the start */
.auth button,.cf button{color:var(--bg);background-color:var(--fg);border-color:var(--fg);
  font-weight:500;padding:7px 15px}
.auth button:hover,.cf button:hover{color:var(--bg);background-color:var(--fg);
  border-color:var(--fg);opacity:.75}
:focus-visible{outline:2px solid var(--mut);outline-offset:2px}

.page{max-width:var(--page-w);margin:0 auto;padding:0 var(--page-x)}
/* grid-first pages (catalog, library, a series) drop the reading cap and fit the viewport:
   auto-fill then lays out as many covers as the screen holds instead of five */
.page.full{--page-w:none}

/* header */
.hd{padding:56px 0 0}
.hd h1{font-size:15px;font-weight:600;letter-spacing:-.15px}
.hd p{color:var(--mut);font-size:14px;margin-top:3px}
.q{margin:30px 0 0;position:relative}
.q input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  padding:11px 0;font-size:22px;font-weight:400;letter-spacing:-.5px;color:var(--fg);outline:none}
.q input::placeholder{color:var(--mut);opacity:.55}
.q input:focus{border-color:var(--fg)}

/* sort keys on the left, playback defaults pushed to the right: one row, so the
   preferences read as page furniture rather than another thing to scroll past */
.cbar{display:flex;align-items:center;gap:12px 26px;padding:26px 0 0;flex-wrap:wrap}
.ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf{display:flex;align-items:center;gap:16px;margin-left:auto;flex-wrap:wrap}
.tg{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;max-height:32px;overflow:hidden}
.tg.open{max-height:none}
/* the toggle and the line that explains the third tag state travel together */
.mrow{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.hint{font-size:13px;color:var(--mut)}

.bar{display:flex;align-items:center;gap:14px;margin:44px 0 22px;
  padding-top:16px;border-top:1px solid var(--line)}
.bar b{font-size:14px;font-weight:500}
.bar span{font-size:14px;color:var(--mut)}
.bar .rs{margin-left:auto}

/* grid */
.gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  column-gap:26px;row-gap:44px;padding-bottom:120px}
.it figure{aspect-ratio:2/3;overflow:hidden;background:var(--line);margin-bottom:12px}
.it img{height:100%;object-fit:cover}
.it h2{font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-.15px}
.it p{font-size:13.5px;color:var(--mut);margin-top:3px}

.nil{padding:80px 0 140px;color:var(--mut);font-size:15px}

/* detail + watch */
.bk{display:inline-block;font-size:14px;color:var(--mut);padding:44px 0 0}
.bk:hover{color:var(--fg)}
.ttl{font-size:34px;font-weight:600;letter-spacing:-1.1px;line-height:1.15;margin:26px 0 12px;max-width:22ch}
.mt{font-size:14.5px;color:var(--mut);margin-bottom:22px}
.tl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
/* on the gaps list these chips hold whole titles, and a nowrap chip is a
   horizontal scrollbar on a phone */
.tl a{white-space:normal}
.pl{margin:34px 0 30px;background:#000}
.nx{display:flex;gap:10px;margin-bottom:50px}
.sh{font-size:13px;font-weight:500;color:var(--mut);margin-bottom:20px}
.eg{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));
  column-gap:22px;row-gap:34px;padding-bottom:120px}
.eg a figure{aspect-ratio:16/9;overflow:hidden;background:var(--line);margin-bottom:10px}
.eg a h3{font-size:14.5px;font-weight:500}
.eg a p{font-size:13px;color:var(--mut);margin-top:2px}
.eg a[aria-current=true] h3::after{content:' — playing';color:var(--mut);font-weight:400}
@media(max-width:640px){:root{--page-x:22px}.ttl{font-size:26px}.q input{font-size:19px}}

/* scroll progress: fills across the top, hue drifts along its length */
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:99;pointer-events:none;
  background:var(--spectrum);
  background-size:400% 100%;animation:drift 9s linear infinite;
  transition:width .12s linear}
@keyframes drift{to{background-position:400% 50%}}

/* title underline wipes in rather than snapping on */
.it h2{background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size .42s cubic-bezier(.19,1,.22,1)}
.it:hover h2{background-size:100% 1px;text-decoration:none}
.it figure{position:relative}
.it figure::after{content:'';position:absolute;inset:0;background:var(--bg);opacity:.12;
  transition:opacity .42s cubic-bezier(.19,1,.22,1)}
.it:hover figure::after{opacity:0}

/* sign in / sign up - same hairline-underline idiom as the search field and tag buttons,
   so the auth screens read as part of the catalog rather than a bolted-on form */
.auth{max-width:330px;margin:0 auto;padding:19vh 0 140px}
.auth h1{font-size:15px;font-weight:600;letter-spacing:-.15px}
.auth .sub{color:var(--mut);font-size:14px;margin-top:3px}
.auth form{margin-top:40px;display:flex;flex-direction:column;gap:24px}
.auth label{display:block;font-size:13px;color:var(--mut)}
.auth input{width:100%;margin-top:6px;background:none;border:0;
  border-bottom:1px solid var(--line);padding:9px 0;
  font:inherit;font-size:18px;letter-spacing:-.3px;color:var(--fg);outline:none}
.auth input:focus{border-color:var(--fg)}
.auth button{align-self:flex-start;margin-top:2px}
.auth .err{font-size:13.5px;color:var(--neg);margin-top:-6px}
.auth .alt{margin-top:36px;font-size:14px;color:var(--mut)}
.auth .alt a{text-decoration:underline;text-underline-offset:3px}
.auth .alt a:hover{color:var(--fg)}

/* who is signed in - top right, deliberately quiet */
.who{position:fixed;top:0;right:0;z-index:60;padding:20px var(--page-x);
  font-size:13px;color:var(--mut)}
.who a{text-decoration:underline;text-underline-offset:3px}
.who a:hover{color:var(--fg)}
@media(max-width:640px){.who{padding:16px var(--page-x)}.auth{padding-top:13vh}}

/* comments - same hairline-underline idiom as the search field and auth forms */
.eg.tight{padding-bottom:54px}
.cm{border-top:1px solid var(--line);padding-top:26px;padding-bottom:120px;max-width:660px}
.cm .sh{margin-bottom:18px}
.cf{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:38px}
.cf textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  padding:8px 0;font:inherit;font-size:15px;color:var(--fg);outline:none;resize:vertical;
  min-height:44px;letter-spacing:-.1px}
.cf textarea::placeholder{color:var(--mut);opacity:.55}
.cf textarea:focus{border-color:var(--fg)}


.cl{list-style:none}
.cl li{padding:18px 0;border-top:1px solid var(--line)}
.cl li:first-child{border-top:0}
.ch{display:flex;align-items:baseline;gap:12px}
.ch b{font-size:14px;font-weight:500}
.ch time{font-size:13px;color:var(--mut)}
.ch form{margin-left:auto}
.ch button{font-size:12.5px;padding:3px 9px}
.ch button:hover{color:var(--neg);border-color:var(--neg);background-color:var(--negbg)}
.cl p{font-size:14.5px;line-height:1.55;margin-top:5px;white-space:pre-wrap;overflow-wrap:anywhere}
.cnil{font-size:14px;color:var(--mut)}

/* home link on the auth screens, and the Archive / series pair on a watch page */
.auth .bk{padding-top:0;margin-bottom:26px}
.bkrow{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.bkrow .bk{padding-top:44px}
.cgate{font-size:14px;color:var(--mut);margin-bottom:34px}
.cgate a{text-decoration:underline;text-underline-offset:3px}
.cgate a:hover{color:var(--fg)}

/* watch progress - the same 2px hairline as .prog, parked at the foot of the still.
   the width is written inline by the client from locally stored positions, so the rule
   only has to make 0% cost nothing: it is out of flow, so an unwatched card lays out
   exactly as it did before */
.eg a figure{position:relative}
.pb{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--fg);
  transition:width .42s cubic-bezier(.19,1,.22,1)}

/* watched / part-watched - a finished episode steps back and says so in the same voice
   as the [aria-current] marker, and takes its bar down to --mut with it; hovering brings
   the still back, the way .it does on the index */
.seen figure{opacity:.5;transition:opacity .42s cubic-bezier(.19,1,.22,1)}
.seen:hover figure{opacity:1}
.seen .pb{background:var(--mut)}
.seen h3::after{content:' — watched';color:var(--mut);font-weight:400}
.part h3::after{content:' — resume';color:var(--mut);font-weight:400}

/* continue watching - reuses .eg wholesale, so the only thing to undo is the grid's
   page-foot padding: this one sits mid-page, above .bar */
.cw{margin-top:44px}
.cw .eg{padding-bottom:0}

/* random - a sibling of .rs, and the pair travels together at the end of the bar */
.bar .rnd{margin-left:auto}
.bar .rnd+.rs{margin-left:0}

/* resume notice and autoplay, between .mt and the tag list on a watch page */
.rz{font-size:14px;color:var(--mut);margin-bottom:14px}
.rz b{font-size:14px;font-weight:500;color:var(--fg)}
.rz button{font-size:13px;padding:3px 9px;margin-left:4px}
.ap{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--mut);
  margin-bottom:26px;cursor:pointer}
.ap:hover{color:var(--fg)}
.ap input{width:13px;height:13px;accent-color:var(--fg);cursor:pointer}

/* library - the save control borrows the .rs/.rnd tone so it reads as the same family */
form.sv{margin:0 0 20px}

.cnt{color:var(--mut);font-weight:400;margin-left:6px}
.nil2{color:var(--mut);font-size:14px;margin:0 0 36px}

/* Series facts. Quality, the archives a title came from and the subtitle languages used to
   be one run-on sentence in .mt; each is its own labelled row now, and .mt keeps only the
   two facts short enough to sit under the title. */
.facts{display:grid;grid-template-columns:max-content 1fr;gap:0 28px;
  max-width:860px;margin:0 0 38px}
.facts dt{font-size:13px;color:var(--mut);padding:10px 0;border-top:1px solid var(--line)}
.facts dd{font-size:14.5px;line-height:1.5;padding:10px 0;border-top:1px solid var(--line)}
.facts dt:first-child,.facts dt:first-child+dd{border-top:0;padding-top:0}

/* harvested synopsis - readable measure, subordinate to the facts list */
.desc{font-size:14px;line-height:1.55;color:var(--fg);max-width:70ch;margin:2px 0 22px}

/* Filters. Their own line under the sort row: seven of them do not fit beside it, and they
   answer a different question than "how is this ordered". Same dropdown chrome as the two
   playback preferences, so the whole control area reads as one family. */
.fl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 0 0}
.fl label{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}

/* the grid fills a chunk at a time; this is what the observer watches for */
.sentinel{height:1px}

/* related titles sit inside the reading column, so they get their own column count */
.gr.rel{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));row-gap:26px;padding-bottom:40px}

/* save and mark-watched are one row of two equal actions */
.acts{display:flex;align-items:center;gap:10px;margin:0 0 20px}
.acts form.sv{margin:0}
button.mw{font:inherit;font-size:14px;color:var(--mut);background:none;
  border:1px solid var(--line);border-radius:var(--btn-r);padding:6px 12px;cursor:pointer;
  transition:color .15s,border-color .15s,background-color .15s}
button.mw:hover{color:var(--fg);border-color:var(--mut);background-color:var(--hov)}
button.mw.on{color:var(--bg);background-color:var(--fg);border-color:var(--fg)}

/* The download row. Every other control on this page is deliberately quiet, so these get the
   one flourish in the stylesheet: the same spectrum the scroll bar drifts, drawn as the outline
   rather than the fill. Each button carries an --i from the server and offsets the animation by
   it, so at any instant the row is a run of different colours rather than one colour repeated.
   The border is a masked pseudo-element rather than a border-image, which leaves the element's
   own background free for the text to be clipped out of on hover. */
.dl{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 26px;font-size:14px}
.dl span{color:var(--mut)}
.dl a{position:relative;isolation:isolate;font-size:13.5px;color:var(--mut);
  border-radius:var(--btn-r);padding:5px 11px;background:none;
  transition:color .2s,transform .2s cubic-bezier(.19,1,.22,1),box-shadow .25s}
.dl a::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--spectrum);background-size:400% 100%;opacity:.5;
  animation:drift 9s linear infinite;animation-delay:calc(var(--i,0) * -.75s);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .25s;pointer-events:none}
.dl a:hover::before,.dl a:focus-visible::before{opacity:1;animation-duration:2.4s}
/* on hover the label is cut out of the same drifting spectrum, so the text and its outline
   are always showing the same part of it */
.dl a:hover,.dl a:focus-visible{
  transform:translateY(-1px);color:transparent;
  background:var(--spectrum);background-size:400% 100%;
  animation:drift 2.4s linear infinite;animation-delay:calc(var(--i,0) * -.75s);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){
  .dl a::before,.dl a:hover{animation:none}
  .dl a::before{opacity:.85}}

/* history and duplicate groups: one line per row, the label doing the work */
.hist{list-style:none;max-width:860px;margin:0 0 40px}
.hist li{display:flex;align-items:baseline;gap:14px;padding:9px 0;
  border-top:1px solid var(--line);font-size:14px}
.hist li:first-child{border-top:0}
.hist li a{font-weight:500}
.hist li a:hover{text-decoration:underline;text-underline-offset:3px}
.hist li span{color:var(--mut);font-size:13.5px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist li b{font-size:13px;font-weight:500;color:var(--mut)}
.hist li time{font-size:13px;color:var(--mut);white-space:nowrap}

/* four numbers that say how much of the archive has actually been watched */
.stats{display:flex;flex-wrap:wrap;gap:34px;margin:0 0 30px}
.stats div{display:flex;flex-direction:column;gap:2px}
.stats b{font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.1}
.stats span{font-size:13px;color:var(--mut)}

/* The dropdown. A native select paints the operating system's menu - its own font, its own
   palette, its own scrollbar - which was the one place this page stopped looking like itself.
   This is the same hairline box as every other control, with the menu drawn in the page. */
.ddw{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}
.dd{position:relative}
.ddb{font:inherit;font-size:14px;line-height:1.25;color:var(--fg);cursor:pointer;
  border:1px solid var(--line);border-radius:var(--btn-r);padding:6px 26px 6px 11px;
  background:none;white-space:nowrap;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
  background-position:calc(100% - 15px) calc(50% - 1px),calc(100% - 11px) calc(50% - 1px);
  transition:color .15s,border-color .15s,background-color .15s}
.ddb:hover,.ddb[aria-expanded=true]{border-color:var(--mut);background-color:var(--hov)}
/* an author display beats the user agent's [hidden] rule no matter the specificity, so
   the closed state has to be spelled out here or the menu never closes at all */
.ddm[hidden]{display:none}
.ddm{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;
  display:flex;flex-direction:column;gap:1px;padding:5px;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 12px 34px rgba(0,0,0,.3);max-height:340px;overflow-y:auto}
.ddm button{display:flex;align-items:center;gap:16px;font:inherit;font-size:14px;
  text-align:left;white-space:nowrap;color:var(--mut);background:none;border:0;
  border-radius:6px;padding:6px 10px;cursor:pointer}
.ddm button:hover,.ddm button:focus{color:var(--fg);background-color:var(--hov);outline:none}
.ddm button.on{color:var(--fg)}
.ddm button.on::after{content:'';margin-left:auto;width:12px;height:12px;flex:none;
  background:currentColor;
  -webkit-mask:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  mask:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E")}

/* the back link says which way it goes */
.bk.home{display:inline-flex;align-items:center;gap:5px}
.bk.home svg{width:15px;height:15px;flex:none}

/* Series header: the cover beside the facts about it, rather than a page of prose about a
   title whose art only ever appeared on the card you clicked to get here. */
/* the grids below run the full width; the header stays a readable block */
.shead{display:flex;gap:36px;align-items:flex-start;margin:26px 0 34px;max-width:1180px}
.cov{flex:0 0 240px;aspect-ratio:2/3;overflow:hidden;background:var(--line);border-radius:3px}
.cov img{width:100%;height:100%;object-fit:cover}
.sinfo{flex:1 1 0;min-width:0}
.sinfo .ttl{margin-top:0}
.sinfo .facts{margin-bottom:26px}
@media(max-width:700px){.shead{flex-direction:column;gap:22px;margin-top:18px}
  .cov{flex-basis:auto;width:min(62%,240px)}}

/* The size is its own tag inside the button, not more words after "Server 3" - two numbers in
   a row read as one number. It keeps its own fill colour so the gradient the label is clipped
   out of on hover cannot swallow it. */
.dl a b{display:inline-block;margin-left:9px;padding:1px 6px;vertical-align:1px;
  font-size:11.5px;font-weight:500;letter-spacing:.01em;
  color:var(--mut);-webkit-text-fill-color:var(--mut);
  background-color:var(--hov);border:1px solid var(--line);border-radius:4px}

/* the note under the player - jwplayer takes the .pl class off the div it takes over, so the
   spacing has to belong to the note itself */
.pnote{font-size:13.5px;line-height:1.5;color:var(--mut);margin:14px 0 4px;max-width:70ch}

/* the filter panel folds behind one button on a phone; on a desktop the button does not exist */
.fbtn{display:none}

@media(max-width:640px){
  /* two covers to a row rather than one enormous one */
  .gr{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));column-gap:14px;row-gap:28px}
  .gr.rel{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .eg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));column-gap:14px;row-gap:24px}
  .it h2{font-size:14px}
  .it p{font-size:12.5px}
  /* the playback defaults belong on the left with everything else once nothing sits beside them */
  .pf{margin-left:0;width:100%;gap:12px}
  .cbar{gap:10px 16px;padding-top:20px}
  .fbtn{display:inline-flex;margin-top:14px;
    font:inherit;font-size:14px;line-height:1.25;color:var(--mut);cursor:pointer;
    border:1px solid var(--line);border-radius:var(--btn-r);padding:var(--btn-p)}
  .fbtn[aria-expanded=true]{color:var(--bg);background-color:var(--fg);border-color:var(--fg)}
  .fl{display:none;padding-top:12px}
  .fl.open{display:flex}
  .ddm{max-height:260px}
  .hd{padding-top:46px}
  .bar{margin:30px 0 18px;gap:10px}
  .stats{gap:22px}
  .stats b{font-size:22px}
  /* four columns of history on a 390px screen is three too many */
  .hist li{flex-wrap:wrap;gap:4px 12px}
  .hist li a{flex-basis:100%}
  .shead{gap:18px}
}

/* touch: the hairline controls are the right size for a cursor and small for a thumb */
@media(pointer:coarse){
  .tg button,.ctl button,.more,.bar .rs,.bar .rnd,.tl a,.dl a,.fbtn,button.sv,button.mw{
    padding:9px 13px}
  /* the dropdown keeps its right gutter, or the caret lands on the last letter */
  .ddb{padding:9px 26px 9px 13px}
  .who{padding:14px var(--page-x);font-size:14px}
  /* padding on the bar does nothing for the thumb - the links are what gets tapped */
  .who a{display:inline-block;padding:5px 2px}
  .bk{padding-bottom:6px}
  .ap{padding:7px 0}
  .ddm button{padding:10px 12px}
  .ap input{width:17px;height:17px}
}