/* The video page of a file (Templates/sub_file_video.html in download1.html, static/js/file-video.js): the watch page of a channel itself,
   drawn by channel.css (.ch .chw-*), without the channel's menu, the list beside the player and the channel's block. This file only fits it to
   the file's page: the player of the site under the cover, no list at the right, theater mode, the facts of a file, the card of faster downloads,
   and the Share window (Link and Embed, in the house design). Everything is under .fv. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:local("IBM Plex Sans SemiBold"),local(IBMPlexSans-SemiBold),url(../fonts/ibm-plex-sans/complete/woff2/IBMPlexSans-SemiBold.woff2) format("woff2")}
/* (the download page's own CSS has the 400 and 500 weights only: the channel's semibold text needs this one, as account.min.css gives it to the channel page) */
.fv{--fv-ink:#001737;--fv-text:#596882;--fv-mute:#8392a5;--fv-line:rgba(3,7,18,.08);--fv-frame:rgba(3,7,18,.1);--fv-fill:#f1f3f7;--fv-hover:#fafbfc;--fv-bg:#fff;--fv-page:#fff;--fv-blue:#0168fa;--fv-blue-t:rgba(1,104,250,.07);--fv-amber:#c27c0e;--fv-amber-t:rgba(255,171,0,.14)}
.fv,.fv *,.fv *::before,.fv *::after{border-radius:0!important}
.fv.ch.content{padding:18px 0 48px}
.fv [hidden]{display:none!important}
.fv .fv-hide{position:fixed;top:-100px;left:0;opacity:0}
.fv small{font-size:inherit;color:inherit}   /* (dl.min.css paints every small red) */
.fv .chw-actbar .chw-sz{font-size:12px}
/* the bar's menus (Download, More) open out of it: the bar does not clip them (the file's bar fits from 320px, so it needs no sideways scroll) */
.fv .chw-actbar{overflow:visible}
.fv .chw-actbar .dropdown-menu{z-index:1030}
.fv .chw-dlmenu .chw-dl{width:100%;border:0;text-align:left;cursor:pointer}
/* the likes: the count stays beside the thumb; a visitor's buttons open the line that asks to sign in */
.fv .chw-likes [data-fv-likes]:empty{display:none}
.fv .fv-gate{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;background:#181c22;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.fv .fv-gate .fv-tile{background:rgba(61,139,255,.16);color:#8dbcff}
.fv .fv-gate .fv-rt b{font-size:13.5px;font-weight:600;color:#fff}
.fv .fv-gate .fv-rt small{color:rgba(255,255,255,.6)}
.fv .fv-gate .ch-btn{flex-shrink:0;height:32px}
.fv .fv-gate .fv-gsu{border-color:transparent;background:rgba(255,255,255,.1);color:#fff}
.fv .fv-gate .fv-gsu:hover{background:rgba(255,255,255,.16);color:#fff}
.fv .fv-gate .ch-ib{flex-shrink:0;color:rgba(255,255,255,.6);background:none}
.fv .fv-gate .ch-ib:hover{color:#fff;background:rgba(255,255,255,.1)}
.fv .fv-gate .ch-ib svg{width:16px;height:16px}
.fv .chw-theater > .chw-full .fv-gate{padding-left:max(12px,calc((100% - 1232px) / 2 + 4px));padding-right:max(8px,calc((100% - 1232px) / 2))}
/* the notes and Watch together: a panel over the right of the player (channel.css); on a phone it takes the player's whole width */
.fv .chw-xpanel .chw-plwait{display:flex;justify-content:center;padding:24px}
/* the comment box lines up with the comments under it */
.fv .chw-cform.rd{padding:0}
/* Hide my name: a switch in the comment box's bar; the writer's own hidden comment says so with a tag */
.fv .fv-anon{display:inline-flex;align-items:center;gap:7px;height:30px;margin:0 auto 0 4px;font-size:12.5px;font-weight:500;color:var(--fv-text);white-space:nowrap;cursor:pointer;user-select:none}
.fv .fv-anon input{position:relative;flex-shrink:0;width:30px;height:18px;margin:0;background:#d5dae3;appearance:none;-webkit-appearance:none;cursor:pointer;transition:background-color .15s}
.fv .fv-anon input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.fv .fv-anon input:checked{background:var(--fv-blue)}
.fv .chw-cform .fv-anon input{flex:0 0 30px;width:30px;min-width:0;max-width:30px;height:18px;padding:0;border:0}
.fv .fv-anon input:checked::after{transform:translateX(12px)}
.fv .fv-anon input:focus{outline:0}
.fv .fv-anon input:focus-visible{box-shadow:0 0 0 3px rgba(1,104,250,.2)}
.fv .fv-anon:has(input:checked){color:var(--fv-ink)}
.fv .chw-cbtns .chw-addt + .fv-anon{margin-left:4px}
.fv .chw-cbtns .fv-anon + .chw-ccount{margin-left:0}
.fv .chw-cbtns .chw-addt{margin-right:0}
.fv .fv-anon-t{display:inline-flex;align-items:center;gap:4px;margin-left:6px}
.fv .fv-anon-t svg{width:12px;height:12px}

/* a message of the server, the channel's preview line */
.fv .fv-msg{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;box-shadow:0 0 0 1px var(--fv-frame);font-size:13.5px}

/* no list beside the player: the player and everything under it take the whole width */
@media (min-width:992px){.fv .ch-wrap{max-width:1280px;padding:0 24px}}
.fv .chw-split .chw-cols{grid-template-columns:minmax(0,1fr)}
/* the site's player under the cover: the cover lies over it until Play */
.fv .chw-stage{position:relative;background:#000}
.fv .chw-stage > .chw-hero{position:absolute;inset:0;z-index:3;height:auto;min-height:0;max-height:none;aspect-ratio:auto}
.fv .fv-player{background:#000}
.fv .fv-player .xvp-page{--xvp-max:100%;--xvp-gap:170px}
/* theater mode: the player from edge to edge of the window, the bar under it, the details in the page's width */
html.chw-th-on .fv.ch.content{padding-top:0}
.fv .chw-theater > .chw-full{width:100%}
.fv .chw-theater > .chw-full .fv-player .xvp-page{--xvp-gap:120px}
.fv .chw-theater > .chw-full .chw-actbar{padding-left:max(8px,calc((100% - 1232px) / 2));padding-right:max(8px,calc((100% - 1232px) / 2))}
.fv .chw-theater > .chw-split .chw-cols{margin-top:0}
.fv .chw-theater > .chw-split .chw-info{margin-top:0}

/* the name and the numbers over the description (where a channel has its block) */
.fv .chw-bar .fv-name{flex:1 1 320px;min-width:0;margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--ch-ink,#001737);overflow-wrap:anywhere}
.fv .chw-stats a{color:inherit;text-decoration:none}
/* the facts of a file: the hashes take two columns, with a copy button */
.fv .chw-facts .fv-wide{grid-column:span 2}
.fv .chw-facts dd.fv-mono{display:flex;align-items:flex-start;gap:6px;font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;font-weight:500;overflow-wrap:anywhere;word-break:break-all}
.fv .fv-cp{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;margin:-2px 0;padding:0;border:0;background:none;color:var(--fv-mute);cursor:pointer}
.fv .fv-cp svg{width:14px;height:14px}
.fv .fv-cp:hover,.fv .fv-cp:focus-visible{background:var(--fv-blue-t);color:var(--fv-blue);outline:0}
.fv .fv-cp.done{background:#10b759;color:#fff}

/* a password: in place of the player */
.fv .fv-lock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:min(420px,calc(100vh - 200px));padding:48px 16px;background:#101317;color:#fff;text-align:center}
.fv .fv-lock .fv-tile{width:40px;height:40px;margin-bottom:6px;background:rgba(255,255,255,.1);color:#fff}
.fv .fv-lock b{font-size:16px;font-weight:600}
.fv .fv-lock .fv-hint{color:rgba(255,255,255,.6)}
.fv .fv-pw{display:flex;width:100%;max-width:360px;margin-top:10px}
.fv .fv-pw .fv-in{flex:1;min-width:0;height:38px;border-color:transparent}
.fv .fv-pw .ch-btn{height:38px}

/* the owner's encoding status (static/js/enc-status.js) right under the player and its bar */
.fv .chw-main > .es-page{margin:12px 0 0}

/* free users: one framed row, faster downloads, between the details and the comments */
.fv .fv-up{display:flex;align-items:center;gap:12px;margin-top:20px;padding:10px 12px;box-shadow:0 0 0 1px var(--fv-frame);background:var(--fv-bg)}
.fv .fv-up .fv-tile{background:var(--fv-blue-t);color:var(--fv-blue)}
.fv .fv-up .fv-rt b{font-weight:600}
.fv .fv-up .ch-btn{flex-shrink:0}
.fv .fv-up .ch-btn small{font-weight:500;opacity:.85}

/* the parts the Share window and the card share */
.fv .fv-head{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.fv .fv-head h2{margin:0;font-size:13px;font-weight:600;color:var(--fv-ink)}
.fv .fv-head::after{content:"";flex:1;height:1px;background:var(--fv-line)}
.fv .fv-list{box-shadow:0 0 0 1px var(--fv-frame);background:var(--fv-bg)}
.fv .fv-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px 8px 12px}
.fv .fv-row + .fv-row,.fv .fv-qr + .fv-row,.fv [data-fv-codes]:not(:empty) + .fv-row{border-top:1px solid var(--fv-line)}
.fv .fv-list > .fv-row:hover{background:var(--fv-hover)}
.fv .fv-tile{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;background:var(--fv-fill);color:var(--fv-text)}
.fv .fv-tile svg{width:15px;height:15px}
.fv .fv-tile.warn{background:var(--fv-amber-t);color:var(--fv-amber)}
.fv .fv-rt{display:flex;flex-direction:column;flex:1;min-width:0}
.fv .fv-rt b{font-size:14px;font-weight:500;line-height:19px;color:var(--fv-ink)}
.fv .fv-rt small{font-size:12px;line-height:16px;color:var(--fv-text)}
.fv .fv-mono{font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;overflow-wrap:anywhere}
.fv .fv-txt{font-size:13px;line-height:1.45;color:var(--fv-text)}
.fv .fv-txt strong{color:var(--fv-ink)}
.fv .fv-txt a{color:var(--fv-blue)}
.fv .fv-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 11px;border:1px solid transparent;background:none;font:inherit;font-size:13.5px;font-weight:500;line-height:1;color:inherit;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.fv .fv-btn svg{width:16px;height:16px}
.fv .fv-btn.icon{width:34px;padding:0}
.fv .fv-btn:focus{outline:0}
.fv .fv-btn:focus-visible{box-shadow:0 0 0 3px rgba(1,104,250,.35)}
.fv .fv-btn.primary{background:linear-gradient(180deg,#1f7dff,#0168fa);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(1,104,250,.35),inset 0 1px 0 rgba(255,255,255,.2)}
.fv .fv-btn.primary:hover,.fv .fv-btn.primary:focus-visible{background:linear-gradient(180deg,#0f72fb,#0158d4);color:#fff}
.fv .fv-btn.quiet{height:30px;padding:0 10px;background:var(--fv-fill);color:var(--fv-ink);font-size:13px}
.fv .fv-btn.quiet.icon{width:30px;padding:0;background:none;color:var(--fv-mute)}
.fv .fv-btn.quiet:hover,.fv .fv-btn.quiet:focus-visible{background:var(--fv-blue-t);color:var(--fv-blue)}
.fv .fv-btn.done,.fv .fv-btn.done:hover{background:#10b759;color:#fff}
.fv .fv-tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;background:var(--fv-fill);font-size:11px;font-weight:500;color:var(--fv-text)}
.fv .fv-win svg{flex-shrink:0;width:16px;height:16px}

@media (max-width:991.98px){.fv.ch.content{padding-top:0}.fv .fv-msg{margin:12px 0}}
@media (max-width:575.98px){
  .fv .chw-actbar [data-cw="share"] .ch-l,.fv .chw-actbar [name="add_my_acc"] .ch-l,.fv .chw-actbar .chw-dlbtn .ch-l{display:none}
  .fv .chw-xpanel{width:100%;border-left:0}
  .fv .fv-gate{flex-wrap:wrap;gap:8px 10px;padding:8px 8px 10px 12px}
  .fv .fv-gate .fv-rt{flex:0 0 calc(100% - 80px)}
  .fv .fv-gate .fv-rt small{display:none}
  .fv .fv-gate{position:relative}
  .fv .fv-gate .ch-ib{position:absolute;top:8px;right:8px}
  .fv .fv-gate .ch-btn{order:2;flex:1 1 calc(50% - 5px)}
  .fv .chw-facts .fv-wide{grid-column:1 / -1}
  .fv .fv-up{gap:10px;padding:8px 8px 8px 12px}
  .fv .fv-up .fv-tile,.fv .fv-up .fv-txt{display:none}
  .fv .fv-up .fv-rt b{font-size:13.5px;line-height:1.3}
  .fv .fv-up .ch-btn{height:34px;padding:0 12px;font-size:13px}
  .fv .chw-ctabs{margin-left:auto}
  .fv .chw-cform.rd .chw-cbtns{flex-wrap:wrap;row-gap:2px}
  .fv .chw-cbtns .fv-anon{flex:1 0 100%;order:-1;justify-content:flex-start;margin:0 0 0 4px}
  .fv .chw-cbtns .chw-ccount{display:none}
  .fv .chw-cbtns .chw-addt + .fv-anon{margin-left:4px}
}

/* the Share window */
html.fv-modal{overflow:hidden;scrollbar-gutter:stable}   /* the page does not jump sideways when its scrollbar goes */
.fv .fv-win{position:fixed;z-index:1050;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 16px;overflow-y:auto;background:rgba(3,7,18,.5)}
.fv .fv-box{width:100%;max-width:640px;background:var(--fv-bg);box-shadow:0 24px 60px rgba(3,7,18,.3)}
.fv .fv-whead{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--fv-line)}
.fv .fv-whead .fv-tile{width:32px;height:32px}
.fv .fv-whead .fv-rt b{font-size:15px;font-weight:600}
.fv .fv-whead .fv-rt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv .fv-wbody{padding:14px 16px 16px}
.fv .fv-tabs{display:inline-flex;gap:0;padding:3px;margin-bottom:14px;background:var(--fv-fill)}
.fv .fv-tab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--fv-text);cursor:pointer}
.fv .fv-tab svg{width:14px;height:14px}
.fv .fv-tab:hover{color:var(--fv-ink)}
.fv .fv-tab[aria-selected=true]{background:var(--fv-bg);color:var(--fv-ink);box-shadow:0 1px 3px rgba(3,7,18,.12),0 0 0 1px rgba(3,7,18,.04)}
.fv .fv-tab[aria-selected=true] svg{color:var(--fv-blue)}
.fv .fv-tab:focus{outline:0}
.fv .fv-tab:focus-visible{box-shadow:inset 0 0 0 2px rgba(1,104,250,.45)}
.fv .fv-tab .fv-tag{background:var(--fv-amber-t);color:var(--fv-amber)}
.fv .fv-pane .fv-head{margin-top:18px}
.fv .fv-in{height:34px;padding:0 10px;border:1px solid rgba(3,7,18,.14);background:var(--fv-bg);font:inherit;font-size:13px;color:var(--fv-ink);transition:border-color .15s,box-shadow .15s}
.fv .fv-in:focus{border-color:rgba(1,104,250,.5);outline:0;box-shadow:0 0 0 3px rgba(1,104,250,.12)}
.fv .fv-in:disabled{background:var(--fv-fill);color:var(--fv-mute)}
.fv .fv-in.bad{border-color:#dc3545}
.fv .fv-in.fv-mono{font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}
/* the link: one white bar, the field and Copy link; the whole bar takes the ring */
.fv .fv-field{display:flex;padding:4px;box-shadow:0 0 0 1px var(--fv-frame);background:var(--fv-bg);transition:box-shadow .15s}
.fv .fv-field:focus-within{box-shadow:0 0 0 1px rgba(1,104,250,.5),0 0 0 4px rgba(1,104,250,.12)}
.fv .fv-field .fv-in{flex:1;min-width:0;border-color:transparent;box-shadow:none;color:var(--fv-text)}
.fv .fv-apps{display:flex;flex-wrap:wrap;gap:6px}   /* a row fills: a short last row has wider buttons, not a hole */
.fv .fv-app{flex:1 1 72px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:64px;border:0;background:var(--fv-fill);font:inherit;font-size:12px;font-weight:500;color:var(--fv-ink);text-decoration:none;cursor:pointer}
.fv .fv-app svg{width:18px;height:18px;color:var(--fv-text)}
.fv .fv-app b{font-size:13px;font-weight:700;line-height:18px;color:var(--fv-text)}
.fv .fv-app:hover,.fv .fv-app:focus-visible{background:var(--fv-blue-t);color:var(--fv-blue);outline:0;text-decoration:none}
.fv .fv-app:hover svg,.fv .fv-app:hover b,.fv .fv-app:focus-visible svg{color:var(--fv-blue)}
.fv .fv-pane .fv-row small.fv-mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv .fv-qr{display:flex;align-items:center;gap:14px;padding:4px 12px 12px 52px}
.fv .fv-qr img{width:148px;height:148px;background:#fff;box-shadow:0 0 0 1px var(--fv-frame)}
/* the link's choices and the embed's: rows with a switch at the right; a row that is on has a blue tile */
.fv .fv-lopts{margin-top:12px}
.fv .fv-row.on .fv-tile{background:var(--fv-blue-t);color:var(--fv-blue)}
.fv .fv-rc{display:flex;align-items:center;flex-shrink:0;gap:6px}
.fv .fv-row.fv-off{cursor:not-allowed}
.fv .fv-row.fv-off .fv-rt b{color:var(--fv-text)}
.fv .fv-row.fv-off .fv-switch{pointer-events:none;opacity:.55}
.fv .fv-row .fv-tag{flex-shrink:0}
.fv .fv-row.fv-off .fv-tag{background:var(--fv-amber-t);color:var(--fv-amber)}
.fv .fv-qrt{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* the embed: the preview at the left, the choices at the right; the window is wider for it */
.fv .fv-box.fv-wide{max-width:780px}
.fv .fv-emb{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.fv .fv-prev{position:sticky;top:0;display:flex;flex-direction:column;gap:6px}
.fv .fv-pstage{display:flex;align-items:center;justify-content:center;height:180px;padding:10px;background:var(--fv-fill);background-image:linear-gradient(45deg,rgba(3,7,18,.035) 25%,transparent 25%,transparent 75%,rgba(3,7,18,.035) 75%),linear-gradient(45deg,rgba(3,7,18,.035) 25%,transparent 25%,transparent 75%,rgba(3,7,18,.035) 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.fv .fv-pbox{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-height:100%;aspect-ratio:16/9;overflow:hidden;background:#101317;box-shadow:0 6px 18px rgba(3,7,18,.25);transition:width .2s}
.fv .fv-pbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.fv .fv-pplay{position:relative;color:#fff}
.fv .fv-pplay svg{width:32px;height:32px}
.fv .fv-pat{position:absolute;left:5px;bottom:5px;padding:2px 6px;background:rgba(0,0,0,.65);font-size:11px;color:#fff;white-space:nowrap}
.fv .fv-pcap{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--fv-mute)}
.fv .fv-pcap b{font-size:13px;font-weight:600;color:var(--fv-ink);font-variant-numeric:tabular-nums}
.fv .fv-opts{display:flex;flex-direction:column;min-width:0}
.fv .fv-opts > .fv-head:first-child{margin-top:0}
.fv .fv-opts .fv-head{margin-top:16px}
.fv .fv-chips{display:flex;flex-wrap:wrap;gap:6px}
.fv .fv-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid rgba(3,7,18,.12);background:var(--fv-bg);font:inherit;font-size:12.5px;font-weight:500;color:var(--fv-ink);white-space:nowrap;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s,background-color .15s}
.fv .fv-chip svg{width:13px;height:13px;color:var(--fv-mute)}
.fv .fv-chip b{font-weight:600;color:var(--fv-ink)}
.fv .fv-chip[aria-checked=true] b{color:inherit}
.fv .fv-chip:hover{border-color:rgba(1,104,250,.45)}
.fv .fv-chip:focus{outline:0}
.fv .fv-chip:focus-visible{box-shadow:0 0 0 3px rgba(1,104,250,.2)}
.fv .fv-chip[aria-checked=true]{border-color:var(--fv-blue);background:rgba(1,104,250,.06);color:#0160e0}
.fv .fv-chip[aria-checked=true] svg{color:currentColor}
/* a size of one's own: the width and the height, and Keep the shape */
.fv .fv-custom{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:8px;padding:10px 12px;box-shadow:0 0 0 1px var(--fv-frame);background:var(--fv-bg)}
.fv .fv-wh{display:inline-flex;align-items:center;gap:6px}
.fv .fv-wh label{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:500;color:var(--fv-text)}
.fv .fv-num{width:76px;height:32px;padding:0 6px 0 9px;font-variant-numeric:tabular-nums}
.fv .fv-x,.fv .fv-px{font-size:13px;color:var(--fv-mute)}
.fv .fv-keep{margin-left:auto}
.fv .fv-err{flex:1 0 100%;font-size:12px;color:#dc3545}
.fv .fv-opts > .fv-hint{margin:6px 0 0}
.fv .fv-time{width:76px;height:30px;font-variant-numeric:tabular-nums;text-align:center}
.fv .fv-hint{font-size:12px;line-height:1.4;color:var(--fv-mute)}
/* a box drawn as a switch */
.fv .fv-switch{display:inline-flex;align-items:center;gap:8px;height:30px;margin:0;font-size:13px;font-weight:500;color:var(--fv-text);white-space:nowrap;cursor:pointer;user-select:none}
.fv .fv-switch input{position:relative;flex-shrink:0;width:30px;height:18px;margin:0;background:#d5dae3;appearance:none;-webkit-appearance:none;cursor:pointer;transition:background-color .15s}
.fv .fv-switch input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.fv .fv-switch input:checked{background:var(--fv-blue)}
.fv .fv-switch input:checked::after{transform:translateX(12px)}
.fv .fv-switch input:focus{outline:0}
.fv .fv-switch input:focus-visible{box-shadow:0 0 0 3px rgba(1,104,250,.2)}
.fv .fv-switch:has(input:checked){color:var(--fv-ink)}
.fv .fv-code{display:block;width:100%;height:auto;min-height:74px;padding:8px 10px;resize:vertical;background:var(--fv-fill);border-color:transparent;color:var(--fv-ink);line-height:1.5}
.fv .fv-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.fv .fv-acts .fv-btn{height:36px}
.fv .fv-acts .fv-btn.quiet{height:36px}
/* what can not be done says why, and the way round it */
.fv .fv-note .fv-tag{background:var(--fv-amber-t);color:var(--fv-amber)}
.fv .fv-fix{margin:10px 0 0;font-size:13px;color:var(--fv-text)}
.fv .fv-lnk{padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--fv-blue);cursor:pointer}
.fv .fv-lnk:hover{text-decoration:underline}

/* the note after a copy */
.fv .fv-toast{position:fixed;z-index:1100;left:50%;bottom:24px;display:flex;align-items:center;gap:8px;padding:10px 14px;background:#101317;color:#fff;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .2s,transform .2s}
.fv .fv-toast.show{opacity:1;transform:translate(-50%,0)}
.fv .fv-toast svg{color:#5fd897}
.fv .fv-toast.bad svg{color:#ff8a8a}

/* phones and narrow windows */
@media (max-width:767.98px){
  .fv .fv-emb{grid-template-columns:minmax(0,1fr);gap:12px}
  .fv .fv-prev{position:static;flex-direction:row;align-items:center;gap:12px}
  .fv .fv-pstage{flex:0 0 160px;height:100px;padding:6px}
}
@media (max-width:575.98px){
  .fv .fv-win .fv-hint{display:none}
  .fv .fv-row{min-height:44px}
  .fv .fv-win{padding:8px}
  .fv .fv-wbody{padding:12px}
  .fv .fv-whead{padding:10px 10px 10px 12px}
  .fv .fv-tabs{display:flex}
  .fv .fv-tab{flex:1;justify-content:center}
  .fv .fv-app{flex-basis:calc(25% - 6px)}
  .fv .fv-app{height:56px}
  .fv .fv-pstage{flex-basis:120px;height:76px}
  .fv .fv-rc .fv-btn.quiet{display:none}
  .fv .fv-custom{padding:8px 10px}
  .fv .fv-keep{margin-left:0}
  .fv .fv-chip{padding:0 9px}
  .fv .fv-qr{padding-left:12px}
  .fv .fv-pane .fv-row .fv-rt small:not(.fv-mono){display:none}
  .fv .fv-acts{flex-wrap:wrap}
  .fv .fv-acts .fv-btn{flex:1}
  .fv .fv-acts .fv-btn.primary{flex:1 0 100%;order:-1}
}
@media (max-width:359.98px){.fv .fv-up .ch-btn small{display:none}}
@media (max-width:359.98px){.fv .fv-app span{font-size:11px}.fv .fv-apps{gap:4px}.fv .fv-app{flex-basis:calc(25% - 4px)}.fv .fv-acts .fv-btn.quiet{flex-basis:100%}.fv .fv-num{width:66px}}
/* touch screens: 16px in the fields, so iOS does not zoom */
@media (pointer:coarse){.fv .fv-in{font-size:16px}.fv .fv-mono.fv-in{font-size:16px}}

@media (prefers-color-scheme:dark){
  .fv{--fv-ink:#e8ebf0;--fv-text:#a8b2c1;--fv-mute:#7d8796;--fv-line:rgba(255,255,255,.08);--fv-frame:rgba(255,255,255,.1);--fv-fill:#242424;--fv-hover:#202020;--fv-bg:#1a1a1a;--fv-page:#121212;--fv-blue:#3d8bff;--fv-blue-t:rgba(61,139,255,.12);--fv-amber:#f0b44c;--fv-amber-t:rgba(240,180,76,.14)}
  .fv .fv-in{border-color:rgba(255,255,255,.14)}
  .fv .fv-chip{border-color:rgba(255,255,255,.14)}
  .fv .fv-pstage{background-color:#202020;background-image:linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.03) 75%),linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.03) 75%)}
  .fv .fv-err{color:#ff8a8a}
  .fv .fv-chip[aria-checked=true]{background:rgba(61,139,255,.12);color:#6aa8ff}
  .fv .fv-switch input,.fv .fv-anon input{background:#3a3f47}
  .fv .fv-anon input:checked{background:#3d8bff}
  .fv .fv-switch input:checked{background:#3d8bff}
  .fv .fv-win{background:rgba(0,0,0,.65)}
  .fv .fv-tab[aria-selected=true]{background:#333;box-shadow:none}
  .fv .fv-btn.primary{background:linear-gradient(180deg,#3d8bff,#1f6fe0)}
  .fv .fv-lock{background:#0b0d10}
}
/* Save: saved stays readable, and the playlist menu fits a 320px phone */
.fv .chw-actbar [data-fv-acc][aria-pressed=true]{opacity:1;color:var(--fv-blue);cursor:default}
.fv .chw-actbar [data-fv-acc][aria-pressed=true] svg{fill:currentColor}
@media (max-width:575px){.fv .chw-plmenu{min-width:0;width:min(236px,calc(100vw - 24px))}}
.fv .chw-savew .chw-plbtn:not(.icon){width:auto;padding:0 10px;gap:6px;box-shadow:none}
/* the footer stays at the bottom of the window when the page is shorter (navbar 60px, footer about 47px) */
.fv.content-fixed{min-height:calc(100vh - 107px)}
/* note dots stay inside the player's line, also a note at 0:00 or at the end */
.fv .chw-ntl{height:5px}
.fv .chw-nts{left:6px;right:6px}
.fv .chw-nts button{top:-4px;width:12px;height:12px}
/* Yours: this video's notes and the person's playlists. Wide screens: beside the details and comments; narrower: under the details */
.fv .fv-below{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:1200px){
  .fv .fv-below:has(> .fv-lib:not([hidden])){grid-template-columns:minmax(0,1fr) 340px;column-gap:28px;align-items:start}
  .fv .fv-below > *{grid-column:1}
  .fv .fv-below > .fv-lib{grid-column:2;grid-row:1 / span 4;position:sticky;top:76px;margin-top:0;max-height:calc(100vh - 96px);overflow:auto}
}
.fv .fv-lib{margin-top:18px;color:var(--fv-text)}
.fv .fv-lhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fv .fv-lhead h3{margin:0;font-size:15px;font-weight:600;color:var(--fv-ink)}
.fv .fv-ltabs{display:flex;gap:2px;margin-left:auto;padding:3px;background:var(--fv-fill)}
.fv .fv-ltabs button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--fv-text);cursor:pointer}
.fv .fv-ltabs button span{font-size:11.5px;color:var(--fv-mute)}
.fv .fv-ltabs button[aria-selected=true]{background:var(--fv-bg);color:var(--fv-ink);font-weight:600;box-shadow:0 1px 2px rgba(3,7,18,.1)}
.fv .fv-ltabs button[aria-selected=true] span{color:var(--fv-blue)}
.fv .fv-llist{border:1px solid var(--fv-frame);background:var(--fv-bg)}
.fv .fv-llist > * + *{border-top:1px solid var(--fv-line)}
.fv .fv-lrow{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:7px 10px;border:0;background:none;font:inherit;text-align:left;color:inherit}
.fv button.fv-lrow,.fv .fv-lmain{cursor:pointer}
.fv button.fv-lrow:hover,.fv .fv-lrow:hover{background:var(--fv-hover)}
.fv .fv-lrow > .fv-lmain{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0;border:0;background:none;font:inherit;text-align:left;color:inherit}
.fv .fv-lrow b,.fv .fv-ltxt{font-size:14px;font-weight:500;color:var(--fv-ink)}
.fv .fv-lrow small{font-size:12px;color:var(--fv-mute)}
.fv .fv-ltxt{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fv .fv-ltime{flex:none;min-width:48px;padding:2px 6px;background:var(--fv-blue-t);font-size:12px;font-weight:600;color:var(--fv-blue);font-variant-numeric:tabular-nums;text-align:center}
.fv .fv-ldel{flex:none;width:30px;height:30px}
.fv .fv-ldel:hover{color:#dc3545}
.fv .fv-ladd b{font-weight:500;color:var(--fv-blue)}
.fv .fv-ladd .fv-tile{background:var(--fv-blue-t);color:var(--fv-blue)}
.fv .fv-lrow kbd{margin-left:auto;padding:1px 6px;background:var(--fv-fill);box-shadow:none;font:inherit;font-size:11px;color:var(--fv-mute)}
.fv .fv-tile.on{background:var(--fv-blue-t);color:var(--fv-blue)}
.fv .fv-lpl .ch-tag{background:var(--fv-fill);color:var(--fv-text)}
.fv .fv-lchev{display:inline-flex;flex:none;color:var(--fv-mute);transition:transform .15s}
.fv .fv-lchev svg{width:16px;height:16px}
.fv .fv-lpl.open .fv-lchev{transform:rotate(180deg)}
.fv .fv-lpl.open > .fv-lrow{background:var(--fv-hover)}
.fv .fv-lin{border-top:1px solid var(--fv-line);background:var(--fv-bg)}
.fv .fv-lnext{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--fv-blue-t);color:var(--fv-blue);text-decoration:none}
.fv .fv-lnext:hover{text-decoration:none;filter:brightness(.97)}
.fv .fv-lnext svg{width:16px;height:16px;flex:none}
.fv .fv-lnext span{display:flex;flex-direction:column;min-width:0}
.fv .fv-lnext b{font-size:13px;font-weight:600}
.fv .fv-lnext small{font-size:12px;color:var(--fv-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fv .fv-lvids{margin:0;padding:4px 0;list-style:none;max-height:340px;overflow:auto}
.fv .fv-lvids a{display:flex;align-items:center;gap:10px;padding:6px 12px;color:var(--fv-ink);text-decoration:none}
.fv .fv-lvids a:hover{background:var(--fv-hover)}
.fv .fv-lvids .fv-ltxt{font-size:13px;font-weight:400}
.fv .fv-lvids small{flex:none;font-size:12px;color:var(--fv-mute);font-variant-numeric:tabular-nums}
.fv .fv-lno{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;font-size:12px;color:var(--fv-mute);font-variant-numeric:tabular-nums}
.fv .fv-lno svg{width:12px;height:12px;fill:currentColor}
.fv .fv-lvids li.on a{background:var(--fv-blue-t)}
.fv .fv-lvids li.on .fv-lno,.fv .fv-lvids li.on .fv-ltxt{color:var(--fv-blue);font-weight:600}
.fv .fv-lempty{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--fv-mute)}
.fv .fv-lwait{display:flex;justify-content:center;padding:14px}
.fv .fv-lwait .spinner-border{border-radius:50%!important}
.fv .fv-lnew{gap:6px;margin:0;padding:7px 10px;border-top:1px solid var(--fv-line)}
.fv .fv-lnew input{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid transparent;background:var(--fv-fill);font:inherit;font-size:13.5px;color:var(--fv-ink)}
.fv .fv-lnew input:focus{outline:0;border-color:var(--fv-blue);box-shadow:0 0 0 3px rgba(1,104,250,.12)}
@media (max-width:575px){
  .fv .fv-lrow small,.fv .fv-lrow kbd{display:none}
  .fv .fv-lhead h3{font-size:14px}
  .fv .fv-ltabs button{padding:0 10px}
}
@media (hover:none) and (pointer:coarse){.fv .fv-lnew input{font-size:16px}}
@media (prefers-color-scheme:dark){
  .fv .fv-ltabs button[aria-selected=true]{box-shadow:none;background:#333}
  .fv .fv-lnext:hover{filter:brightness(1.1)}
}
/* the space under the player: the name row sits close under the bar, the description close under the name */
.fv.ch .fv-below,.fv.ch .chw-split .chw-main > .chw-full + .fv-below{margin-top:10px}
.fv .fv-below > .chw-info{margin-top:0}
.fv .chw-info .chw-desc{margin-top:8px}
/* views, comments and downloads: quiet, in one line, no frame and no fill: an icon and the number (its name in the tip); comments open the comments */
.fv .fv-stats{display:inline-flex;align-items:center;gap:16px;margin:0;font-size:13px}
.fv .fv-stats .fv-st{display:inline-flex;align-items:center;gap:5px;color:var(--fv-mute);text-decoration:none;white-space:nowrap}
.fv .fv-stats .fv-sti{display:inline-flex;color:var(--fv-mute)}
.fv .fv-stats .fv-sti svg{width:15px;height:15px}
.fv .fv-stats .fv-stt{display:inline-flex;align-items:baseline;gap:4px}
.fv .fv-stats .fv-stt b{font-weight:600;color:var(--fv-ink);font-variant-numeric:tabular-nums}
.fv .fv-stats a.fv-st:hover,.fv .fv-stats a.fv-st:hover .fv-sti,.fv .fv-stats a.fv-st:hover b{color:var(--fv-blue)}
.fv .fv-stats a.fv-st:focus-visible{outline:2px solid var(--fv-blue);outline-offset:2px}
@media (max-width:767px){
  .fv .chw-bar .fv-stats{margin-top:6px}
}
@media (max-width:575px){
  .fv .fv-stats{gap:14px;font-size:12.5px}
}
/* the Share window is dark in light mode too, like the player it opens from */
.fv .fv-win{--fv-ink:#e8ebf0;--fv-text:#a8b2c1;--fv-mute:#7d8796;--fv-line:rgba(255,255,255,.08);--fv-frame:rgba(255,255,255,.1);--fv-fill:#242424;--fv-hover:#202020;--fv-bg:#1a1a1a;--fv-page:#121212;--fv-blue:#3d8bff;--fv-blue-t:rgba(61,139,255,.12);--fv-amber:#f0b44c;--fv-amber-t:rgba(240,180,76,.14);background:rgba(0,0,0,.65);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color-scheme:dark}
.fv .fv-win .fv-box{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.5)}
.fv .fv-win .fv-in,.fv .fv-win .fv-chip{border-color:rgba(255,255,255,.14)}
.fv .fv-win .fv-pstage{background-color:#202020;background-image:linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.03) 75%),linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.03) 75%)}
.fv .fv-win .fv-err{color:#ff8a8a}
.fv .fv-win .fv-chip[aria-checked=true]{background:rgba(61,139,255,.12);color:#6aa8ff}
.fv .fv-win .fv-switch input{background:#3a3f47}
.fv .fv-win .fv-switch input:checked{background:#3d8bff}
.fv .fv-win .fv-tab[aria-selected=true]{background:#333;box-shadow:none}
.fv .fv-win .fv-btn.primary{background:linear-gradient(180deg,#3d8bff,#1f6fe0)}
/* a visitor's comment box: the same box, a click asks to sign in under it (sign in, create an account) */
.fv .fv-cgate textarea{cursor:pointer}
.fv .fv-cgate.open > div{border-color:var(--fv-blue);box-shadow:0 0 0 3px rgba(1,104,250,.12)}
.fv .fv-cgbox{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-top:1px solid var(--fv-line);background:var(--fv-blue-t)}
.fv .fv-cgbox .fv-tile{background:var(--fv-blue-t);color:var(--fv-blue)}
.fv .fv-cgbox .fv-rt{flex:1;min-width:0}
.fv .fv-cgbox .fv-rt b{font-size:13.5px;font-weight:600;color:var(--fv-ink)}
.fv .fv-cgbox .ch-btn{flex-shrink:0;height:32px}
.fv .fv-cgbox .fv-gsu{border-color:transparent;background:var(--fv-fill);color:var(--fv-ink)}
.fv .fv-cgbox .fv-gsu:hover{background:var(--fv-blue-t);color:var(--fv-blue)}
@media (max-width:575px){
  .fv .fv-cgbox{flex-wrap:wrap;gap:8px}
  .fv .fv-cgbox .fv-rt{flex:1 0 calc(100% - 40px)}
  .fv .fv-cgbox .ch-btn{flex:1 1 calc(50% - 4px)}
}