/* ─────────────────────────────────────────────────────────────────────────
   rtorrent16.html only. Everything shared (masthead, hero, eyebrow, .isl,
   .sd-get / .arch, .faq, .get-now, .rv, the tray-and-plate construction)
   comes from site.css; this sheet adds the parts no other page has: the
   warning labels, the feature rows, the phone strip, the add-on cards, the
   timeline, the quotes and the spec sheet. Same tokens, same one curve.
   ───────────────────────────────────────────────────────────────────────── */

/* ── the languages, above the hero ─────────────────────────────────────── */
.rt-langs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px;padding-top:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.rt-langs a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .35s var(--ease-seat), border-color .35s var(--ease-seat)}
.rt-langs a:hover,.rt-langs a:focus-visible{color:var(--led)}
.rt-langs a[aria-current]{color:var(--ink);border-bottom-color:var(--led)}

/* the line under the creed */
.rt-sub{margin:14px 0 0;font-family:var(--cond);font-weight:600;font-size:clamp(17px,1.5vw,22px);color:var(--dim);letter-spacing:.005em}

/* ── the hero actions and the stage under it ──────────────────────────── */
.rt-acts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.rt-stage{
  padding-block:clamp(22px,3vw,40px) clamp(40px,5vw,72px);
  background:radial-gradient(90% 60% at 50% 0%, rgba(255,176,32,.06), transparent 65%);
}

/* ── the tray and the plate (a screenshot seated like the showcase cards) ─ */
.rt-tray{
  margin:0;padding:var(--lip);border-radius:var(--tray);
  border:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 42%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset, 0 18px 44px -30px rgba(0,0,0,.9);
  transition:border-color .5s var(--ease-seat), transform .5s var(--ease-seat), box-shadow .5s var(--ease-seat);
}
.rt-plate{
  display:block;position:relative;overflow:hidden;
  border-radius:calc(var(--tray) - var(--lip));
  border:1px solid var(--rule);background:var(--rack);
  color:inherit;text-decoration:none;
}
.rt-plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 40px -18px rgba(0,0,0,.85);
}
/* A cut-out of the panel: its own page in an inert frame, laid out at the width it was cut at (--w, --h)
   and scaled to the column (--k, from the page's script). Nothing in it takes the pointer. */
.rt-live{aspect-ratio:var(--w) / var(--h);background:#050505}
@media (scripting:none){.rt-live{display:none}}   /* the frames get their page from the script */
.rt-live iframe{
  position:absolute;left:0;top:0;display:block;border:0;
  width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);
  transform-origin:0 0;transform:scale(var(--k,1));pointer-events:none;
}

/* ── the warning label ────────────────────────────────────────────────── */
/* A sticker on a rack unit: hazard tape along the top edge, the triangle, the joke. */
.rt-warn{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:start;
  max-width:880px;margin:0 auto;padding:22px 22px 18px 18px;
  border:1px solid rgba(255,176,32,.36);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,176,32,.075),rgba(255,176,32,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.rt-warn::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:repeating-linear-gradient(-45deg,var(--led) 0 9px,#17130A 9px 18px);opacity:.9;
}
.rt-warn svg{width:30px;height:30px;color:var(--led);grid-row:span 2;margin-top:2px}
.rt-warn b{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--led);font-weight:500}
.rt-warn p{margin:0;font-style:italic;color:color-mix(in srgb,var(--ink) 88%,transparent);font-size:clamp(15px,1.15vw,17px);line-height:1.55;text-wrap:pretty}
/* the joke in the label's type (the owner's rule; upright like the label, the paragraph's italic stops here) */
.rt-warn p[data-glitch]{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);font-weight:500;font-style:normal}
.rt-warn-row{padding-block:clamp(16px,2vw,24px) clamp(48px,6vw,88px)}   /* 16 px at least: room for the slab edge on top */

/* The glitch (owner, 2026-09-25): the sticker holds still and, every few seconds, breaks up for a fraction of a
   second: the label and the joke split into two ghost channels (the text again, from data-glitch), horizontal
   slices tear sideways (clip-path), the plate jolts and the hazard tape stutters. Steps, never a smooth curve:
   a glitch is a dropped frame, not an animation. Each plaque runs its own offset, so they never fire together.
   Transform, opacity and clip-path only; nothing moves under reduced motion. */
.rt-warn{--gl:7.2s;--gd:0s;isolation:isolate}
#quick .rt-warn{--gd:-2.6s}
#perf .rt-warn{--gd:-4.9s;--gl:8.4s}
.rt-warn b[data-glitch],.rt-warn p[data-glitch]{position:relative;display:block}
.rt-warn b[data-glitch]{display:inline-block}
.rt-warn [data-glitch]::before,.rt-warn [data-glitch]::after{
  content:attr(data-glitch) / "";position:absolute;inset:0;pointer-events:none;opacity:0;   /* empty alt: a screen reader reads the joke once, not three times */
  font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;white-space:inherit;
}
.rt-warn [data-glitch]::before{color:#ff3d7f;mix-blend-mode:screen}
.rt-warn [data-glitch]::after{color:#2be6ff;mix-blend-mode:screen}
@media (prefers-reduced-motion:no-preference){
  .rt-warn{animation:rt-gl-plate var(--gl) steps(1,end) var(--gd) infinite}
  .rt-warn::before{animation:rt-gl-tape var(--gl) steps(1,end) var(--gd) infinite}
  .rt-warn svg{animation:rt-gl-icon var(--gl) steps(1,end) var(--gd) infinite}
  .rt-warn [data-glitch]::before{animation:rt-gl-red var(--gl) steps(1,end) var(--gd) infinite}
  .rt-warn [data-glitch]::after{animation:rt-gl-cyan var(--gl) steps(1,end) var(--gd) infinite}
  .rt-warn p[data-glitch]{animation:rt-gl-text var(--gl) steps(1,end) var(--gd) infinite}
}
@keyframes rt-gl-plate{
  0%,86%,100%{transform:none}
  87%{transform:translate(-3px,0) skewX(-2deg)}
  88%{transform:translate(2px,-1px)}
  89.5%{transform:none}
  92%{transform:translate(4px,1px) skewX(3deg)}
  92.6%{transform:translate(-1px,0)}
  93.2%{transform:none}
}
@keyframes rt-gl-tape{
  0%,86%,100%{opacity:.9;transform:none}
  87%{opacity:.45;transform:translateX(-12px)}
  88%{opacity:1;transform:translateX(9px)}
  89.5%{opacity:.9;transform:none}
  92%{opacity:.4}
  92.6%{opacity:1;transform:translateX(-5px)}
  93.2%{opacity:.9;transform:none}
}
@keyframes rt-gl-icon{
  0%,86%,100%{opacity:1;transform:none}
  87%{opacity:.35;transform:translate(2px,-1px)}
  88.5%{opacity:1;transform:translate(-2px,1px)}
  89.5%{transform:none}
  92%{opacity:.5;transform:translateX(3px)}
  93.2%{opacity:1;transform:none}
}
@keyframes rt-gl-red{
  0%,86%,100%{opacity:0;transform:none;clip-path:inset(0 0 0 0)}
  87%{opacity:.85;transform:translate(-3px,0);clip-path:inset(8% 0 62% 0)}
  87.8%{opacity:.85;transform:translate(4px,0);clip-path:inset(55% 0 20% 0)}
  88.6%{opacity:.7;transform:translate(-2px,0);clip-path:inset(30% 0 45% 0)}
  89.5%{opacity:0}
  92%{opacity:.9;transform:translate(6px,0);clip-path:inset(70% 0 5% 0)}
  92.6%{opacity:.8;transform:translate(-4px,0);clip-path:inset(15% 0 70% 0)}
  93.2%{opacity:0}
}
@keyframes rt-gl-cyan{
  0%,86%,100%{opacity:0;transform:none;clip-path:inset(0 0 0 0)}
  87%{opacity:.8;transform:translate(3px,0);clip-path:inset(40% 0 35% 0)}
  87.8%{opacity:.75;transform:translate(-5px,0);clip-path:inset(5% 0 80% 0)}
  88.6%{opacity:.6;transform:translate(2px,0);clip-path:inset(62% 0 12% 0)}
  89.5%{opacity:0}
  92%{opacity:.85;transform:translate(-6px,0);clip-path:inset(25% 0 50% 0)}
  92.6%{opacity:.8;transform:translate(3px,0);clip-path:inset(80% 0 2% 0)}
  93.2%{opacity:0}
}
@keyframes rt-gl-text{
  0%,86%,100%{clip-path:inset(0 0 0 0);transform:none}
  87.8%{clip-path:inset(0 0 0 0);transform:translateX(-2px)}
  88.6%{clip-path:inset(0 0 48% 0);transform:none}
  89.5%{clip-path:inset(0 0 0 0)}
  92.6%{clip-path:inset(35% 0 0 0);transform:translateX(3px)}
  93.2%{clip-path:inset(0 0 0 0);transform:none}
}

/* ── the feature rows ─────────────────────────────────────────────────── */
.rt-feats{display:flex;flex-direction:column;gap:clamp(64px,9vw,136px);margin-top:clamp(36px,5vw,72px)}
.rt-feat{display:grid;gap:clamp(18px,2.4vw,44px);align-items:center;scroll-margin-top:90px}
@media (min-width:1000px){
  .rt-feat{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .rt-feat.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .rt-feat.flip .rt-copy{order:2}
}
.rt-copy{min-width:0}
.rt-n{
  display:flex;align-items:center;gap:12px;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--led);
}
.rt-n::after{content:"";height:1px;width:clamp(40px,8vw,120px);background:var(--rule-hi)}
.rt-copy h3{
  font-family:var(--cond);font-weight:700;font-size:clamp(26px,2.9vw,42px);line-height:1.07;
  letter-spacing:-.012em;margin:14px 0 16px;text-wrap:balance;
}
.rt-copy p{color:var(--dim);font-size:clamp(15px,1.1vw,16.5px);line-height:1.64;margin:0 0 14px;max-width:58ch;text-wrap:pretty}
.rt-copy p b{color:var(--ink);font-weight:500}
.rt-copy code{
  font-family:var(--mono);font-size:.86em;background:rgba(255,255,255,.055);
  border:1px solid var(--rule);border-radius:3px;padding:1px 5px;color:var(--ink);white-space:nowrap;
}
.rt-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule-hi);padding-bottom:2px;
  transition:color .35s var(--ease-seat), border-color .35s var(--ease-seat);
}
.rt-go:hover,.rt-go:focus-visible{color:var(--led);border-color:var(--led)}
.rt-feat .rt-warn{margin-top:22px}

/* ── row 04: the file window (assets/rt16-win.js builds it) ────────────────
   Explorer on Windows 11, dark, looking at the library share: sized in em from the column's width (46em wide),
   the Mica greys pulled a little towards the rack's blue, the selection's pill in the site's amber. */
.rt-win{container-type:inline-size;max-width:600px;margin-top:clamp(24px,2.6vw,38px)}
@media (scripting:none){.rt-win{display:none}}
.w{
  --wm:#1b1f22;--wb:#272b2e;--wbd:#16191b;--wl:rgba(255,255,255,.075);--wt:#eef1f2;--wd:#a3abb0;
  font-family:"Segoe UI Variable Text","Segoe UI",var(--sans);font-size:max(7.2px,calc(100cqi / 46));line-height:1.25;
  color:var(--wt);background:var(--wbd);border:1px solid rgba(255,255,255,.13);border-radius:.75em;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 2.4em 4.6em -1.6em rgba(0,0,0,.92),0 1px 0 rgba(255,255,255,.05) inset;
  pointer-events:none;user-select:none;
}
.w i{font-style:normal}
.w svg{display:block;flex:none;width:1.25em;height:1.25em}
.w .s{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
/* the tab strip */
.w-top{display:flex;align-items:flex-end;height:2.9em;padding-left:.55em;background:var(--wm)}
.w-tab{position:relative;display:flex;align-items:center;gap:.6em;width:min(16em,46%);height:2.4em;padding:0 .75em;
  background:var(--wb);border-radius:.6em .6em 0 0}
.w-tab::before,.w-tab::after{content:"";position:absolute;bottom:0;width:.6em;height:.6em}
.w-tab::before{right:100%;background:radial-gradient(circle at 0 0,transparent .6em,var(--wb) calc(.6em + .5px))}
.w-tab::after{left:100%;background:radial-gradient(circle at 100% 0,transparent .6em,var(--wb) calc(.6em + .5px))}
.w-tabt{flex:1;min-width:0;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-tab .s{width:.95em;height:.95em;color:var(--wd)}
.w-plus{display:grid;place-items:center;width:2.4em;height:2.4em;margin-left:.7em;color:var(--wd)}
.w-plus svg{width:1em;height:1em}
.w-ctl{display:flex;align-self:stretch;margin-left:auto}
.w-ctl i{display:grid;place-items:center;width:3.4em}
.w-ctl svg{width:.95em;height:.95em}
/* the address row and the command bar */
.w-addr{display:flex;align-items:center;gap:.2em;height:3.1em;padding:0 .6em;background:var(--wb)}
.w-nb{display:grid;place-items:center;width:2.3em;height:2.3em}
.w-nb.off{color:#666d71}
.w-crumb,.w-find{display:flex;align-items:center;height:2.25em;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06);border-radius:.4em}
.w-crumb{flex:1;min-width:0;gap:.15em;margin-left:.35em;padding:0 .7em;white-space:nowrap;overflow:hidden}
.w-crumb span{flex:none}
.w-crumb span:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.w-sep svg{width:.85em;height:.85em;color:var(--wd)}
.w-far{display:none}
@container (min-width:540px){.w-far{display:block}}
.w-find{width:6.5em;margin-left:.45em;padding:0 .6em;color:var(--wd)}
.w-cmd{display:flex;align-items:center;gap:.15em;height:2.9em;padding:0 .7em;background:var(--wb);border-bottom:1px solid var(--wl)}
.w-cmd i{display:grid;place-items:center;width:2.3em;height:2.2em}
.w-cmd .w-new{color:var(--led)}
.w-cmd .sep{width:1px;height:1.4em;margin:0 .4em;background:rgba(255,255,255,.12)}
/* the navigation tree and the list */
.w-body{display:grid;grid-template-columns:42% minmax(0,1fr);height:27.9em}
.w-tree{position:relative;margin:0;padding:.35em;list-style:none;overflow:hidden;border-right:1px solid var(--wl)}
.w-tree li[data-i]{position:relative;z-index:1;display:flex;align-items:center;gap:.45em;height:1.95em;
  padding-left:calc(.3em + var(--d) * 1.05em);white-space:nowrap;overflow:hidden;
  transition:height .6s var(--ease-seat),opacity .45s var(--ease-seat) .12s}
.w-tree li.w-hid{height:0;opacity:0;transition-delay:0s}
.w-chev{flex:none;color:var(--wd)}
.w-chev svg{width:.8em;height:.8em;transition:transform .35s var(--ease-seat)}
.w-open .w-chev svg{transform:rotate(90deg)}
.w-leaf .w-chev{visibility:hidden}
.w-tree span{min-width:0;overflow:hidden;text-overflow:ellipsis;transition:color 1.4s var(--ease-seat)}
.w-tree li.w-flash span{color:var(--led);transition-duration:.25s}
.w-sel{position:absolute;left:.35em;right:.35em;top:.35em;height:1.95em;border-radius:.35em;background:rgba(255,255,255,.085);
  transform:translateY(calc(var(--n,0) * 1.95em));transition:transform .65s var(--ease-seat)}
.w-sel::before{content:"";position:absolute;left:0;top:.52em;bottom:.52em;width:.2em;border-radius:.1em;background:var(--led)}
.w-list{min-width:0;padding:.35em .55em 0 .9em}
.w-head,.w-files li{display:grid;grid-template-columns:minmax(0,1fr) 7.4em;align-items:center;column-gap:1em}
.w-head{height:2.15em;margin-bottom:.3em;color:var(--wd);border-bottom:1px solid var(--wl)}
.w-head span+span{padding-left:.7em;border-left:1px solid var(--wl)}
.w-files{margin:0;padding:0;list-style:none}
.w-files li{height:1.95em;padding-left:.15em}
.w-files li span:first-child{display:flex;align-items:center;gap:.6em;min-width:0}
.w-files b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-files li span:last-child{text-align:right;color:var(--wd);font-variant-numeric:tabular-nums;white-space:nowrap}
.w-files.w-go li{animation:w-in .5s var(--ease-seat) both;animation-delay:calc(var(--o) * 130ms + 90ms)}
.w-crumb.w-go,.w-tabt.w-go{animation:w-fade .45s var(--ease-seat) both}
@keyframes w-in{from{opacity:0;transform:translateY(.5em)}}
@keyframes w-fade{from{opacity:.15}}
.w-stat{display:flex;align-items:center;justify-content:space-between;height:2.15em;padding:0 .9em;
  color:var(--wd);border-top:1px solid var(--wl)}
.w-views{display:flex;gap:.3em}
.w-views i{display:grid;place-items:center;width:1.9em;height:1.6em;border-radius:.3em}
.w-views i.on{background:rgba(255,255,255,.08);color:var(--wt)}
.w-views svg{width:1em;height:1em}
@media (prefers-reduced-motion:reduce){.w *{transition:none!important;animation:none!important}}

/* ── the support section at the very bottom (tiers and links as the panel's Support page) ── */
.rt-cut{display:flex;align-items:center;gap:14px;padding-block:clamp(40px,6vw,80px) 0}
.rt-cut::before,.rt-cut::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rule-hi) 30%,var(--rule-hi) 70%,transparent)}
.rt-cut span{width:8px;height:8px;border-radius:50%;background:var(--led);box-shadow:0 0 12px var(--led)}
.rt-support [hidden]{display:none!important}   /* the rows set display:grid or flex, which would outrank the hidden attribute */
.rt-support{padding-block:clamp(32px,5vw,64px) clamp(56px,7vw,110px);scroll-margin-top:90px}
.sup-top{display:grid;gap:clamp(22px,3vw,44px);align-items:start}
@media (min-width:1000px){.sup-top{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.sup-copy h2{font-family:var(--cond);font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.015em;margin:14px 0 18px;text-wrap:balance}
.sup-copy p:not(.rt-n){color:var(--dim);font-size:clamp(15px,1.1vw,16.5px);line-height:1.64;margin:0 0 14px;max-width:62ch;text-wrap:pretty}
.sup-get{border:1px solid var(--rule);border-radius:var(--tray);padding:clamp(18px,2vw,26px);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 50%,transparent)}
.sup-get h3{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:500}
.sup-get ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sup-get li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.sup-get li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:var(--led-soft);
  box-shadow:inset 0 0 0 1px rgba(255,176,32,.35)}
.sup-get li::after{content:"";position:absolute;left:5.5px;top:7px;width:6px;height:3.5px;border-left:1.6px solid var(--led);border-bottom:1.6px solid var(--led);transform:rotate(-45deg)}
.sup-get li b{font-weight:600}
.sup-get p:not(.sup-note){margin:0;font-size:14.5px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.sup-note{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--dim)}
.sup-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin:clamp(28px,4vw,44px) 0 16px}
.sup-bar .cur{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:999px;background:var(--panel)}
.sup-bar button{appearance:none;border:0;background:none;color:var(--dim);font:500 13.5px/1 var(--sans);padding:8px 15px;border-radius:999px;cursor:pointer;
  transition:color .3s var(--ease-seat),background-color .3s var(--ease-seat)}
.sup-bar button:hover{color:var(--ink)}
.sup-bar .cur button[aria-pressed="true"]{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-hi)}
.sup-bar button:focus-visible{outline:2px solid var(--led);outline-offset:2px}
.sup-q{margin:26px 0 0;font-size:13px;color:var(--dim)}
.sup-q a{color:var(--ink)}

/* ── row 10: the disk map (assets/rt16-frag.js builds it) ──────────────────────
   An old defragmenter's map in the panel's fragmentation colours (frag-view.ts: the accent for one piece, then
   amber, red and purple as data breaks up), small squares, free space dark; comic bubbles say what happens. */
.rt-frag{margin-top:clamp(24px,2.6vw,38px);max-width:600px}
@media (scripting:none){.rt-frag{display:none}}
.fr{border:1px solid var(--rule);border-radius:12px;background:#0c1013;overflow:hidden;box-shadow:0 22px 48px -30px rgba(0,0,0,.95)}
.fr-top{display:flex;align-items:center;gap:6px;padding:8px 12px;background:linear-gradient(180deg,#1b232a,#141a1f);border-bottom:1px solid var(--rule)}
.fr-top i{width:9px;height:9px;border-radius:50%;background:#2a3339}
.fr-top i:first-child{background:#e05252}.fr-top i:nth-child(2){background:#ffb020}.fr-top i:nth-child(3){background:#4fb477}
.fr-top b{margin-left:8px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fr-stage{position:relative;padding:12px}
.fr-grid{display:grid;grid-template-columns:repeat(80,1fr);gap:1px;transition:opacity .6s ease,filter .6s ease}
.fr-grid i{aspect-ratio:1;border-radius:1px;background:#1b2227;transition:background-color .2s ease}
.fr-grid i.f{background:#1b2227}
.fr-grid i.h{box-shadow:0 0 0 1px #fff,0 0 8px 2px rgba(255,255,255,.7);position:relative;z-index:1}
.rt-frag.end .fr-grid{opacity:.35;filter:saturate(.7)}
/* the hints (the owner, 20:01: elegant, in the page's style, not comic): dark glass, a hairline, a deep soft
   shadow; a thin leader with a dot runs to the square they talk about; they rise into place and fade */
.fr-bub{position:absolute;z-index:3;padding:10px 14px 11px;border-radius:10px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),rgba(13,17,21,.93);color:var(--ink);
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.55);
  font:500 12.5px/1.45 var(--sans);letter-spacing:.005em;
  opacity:0;transform:translateY(5px);transition:opacity .35s var(--ease-seat),transform .5s var(--ease-seat)}
.fr-bub.below{transform:translateY(-5px)}
.fr-bub.on{opacity:1;transform:none}
.fr-bub::before{content:"";position:absolute;left:var(--tail,30px);top:100%;width:1px;height:12px;background:rgba(255,255,255,.45)}
.fr-bub::after{content:"";position:absolute;left:calc(var(--tail,30px) - 2px);top:calc(100% + 10px);width:5px;height:5px;border-radius:50%;background:#fff}
.fr-bub.below::before{top:auto;bottom:100%}
.fr-bub.below::after{top:auto;bottom:calc(100% + 10px)}
.fr-bub.big{padding:14px 18px 15px;font-size:13.5px;border-color:color-mix(in srgb,#c6ff3d 30%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.6)}
.fr-bub.big::before,.fr-bub.big::after{display:none}
.fr-bub.big b{display:block;margin-bottom:6px;font:600 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#c6ff3d}
.fr-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:0 12px 12px}
.fr-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font:500 11.5px/1.2 var(--sans);color:var(--dim)}
.fr-leg span{display:inline-flex;align-items:center;gap:6px}
.fr-leg i.f{width:10px;height:10px;border-radius:2px;background:#1b2227;box-shadow:inset 0 0 0 1px #34414a}
.fr-ramp em{font-style:normal}
.fr-ramp i{width:84px;height:8px;border-radius:4px;background:linear-gradient(90deg,#c6ff3d 0%,#f5a524 34%,#ef4444 67%,#a855f7 100%)}
.fr-speed{display:flex;align-items:center;gap:8px}
.fr-speed small{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.fr-speed svg{width:120px;height:34px;border-radius:4px;background:#11171b;box-shadow:inset 0 0 0 1px var(--rule)}
.fr-speed .ln{fill:none;stroke:#c6ff3d;stroke-width:1.6;stroke-linejoin:round;transition:stroke .4s ease}
.rt-frag.b .fr-speed .ln{stroke:#ef4444}
@media (prefers-reduced-motion:reduce){.fr *,.fr-bub{transition:none!important}}

/* ── the phone strip ──────────────────────────────────────────────────── */
.rt-phones{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);
  max-width:1060px;margin:clamp(28px,4vw,48px) auto 0;
}
.rt-phones .rt-tray{--tray:30px;--lip:6px}
/* on a phone (the owner, 2026-09-26: "hard to see and it scrolls badly to the right"): one phone at a time, almost
   the width of the screen, centred as it snaps, with a row of names under it that says which one shows and takes
   a tap (assets/rt16-phones.js) */
@media (max-width:760px){
  .rt-phones{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,340px);gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    padding:4px 2px 10px;margin-inline:calc(var(--gut) * -1);padding-inline:calc((100% - min(84%,340px)) / 2 + var(--gut));
  }
  .rt-phones::-webkit-scrollbar{display:none}
  .rt-phones figure{scroll-snap-align:center}
}
.rt-phone-nav{display:none}
@media (max-width:760px){
  .rt-phone-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px}
  .rt-phone-nav button{appearance:none;border:1px solid var(--rule);background:var(--panel);color:var(--dim);font:500 12.5px/1 var(--sans);
    padding:8px 13px;border-radius:999px;cursor:pointer;transition:color .3s var(--ease-seat),background-color .3s var(--ease-seat),border-color .3s var(--ease-seat)}
  .rt-phone-nav button[aria-current="true"]{color:#101507;background:var(--lime);border-color:var(--lime)}
}

/* ── the add-on cards ─────────────────────────────────────────────────── */
.rt-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.4vw,18px);margin-top:clamp(24px,3vw,40px)}
@media (min-width:600px){.rt-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.rt-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rt-card{
  display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;
  font:inherit;color:inherit;text-decoration:none;cursor:pointer;
  padding:16px 16px 15px;border-radius:12px;
  background:var(--panel);border:1px solid var(--rule);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  transition:border-color .45s var(--ease-seat), background-color .45s var(--ease-seat), transform .45s var(--ease-seat);
}
.rt-card:hover,.rt-card:focus-visible{border-color:rgba(255,176,32,.5);background:var(--panel-2);transform:translateY(-2px)}
.rt-card img{width:44px;height:44px;border-radius:10px;flex:0 0 auto}
.rt-card span{display:flex;flex-direction:column;gap:3px;min-width:0}
.rt-card b{font-family:var(--cond);font-weight:700;font-size:16.5px;color:var(--ink)}
.rt-card small{font-size:13.5px;color:var(--dim);line-height:1.45}
.rt-card i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--led);margin-top:4px}

/* row 11 (the owner, 2026-09-26): two settings as a small table, the name on the left and what it does on the right;
   on a phone the name sits above its text */
.rt-kv{margin:clamp(18px,2.2vw,26px) 0 clamp(18px,2.2vw,24px);border-top:1px solid var(--rule)}
.rt-kv>div{display:grid;grid-template-columns:minmax(0,12.5em) minmax(0,1fr);gap:6px 22px;padding:13px 0 14px;border-bottom:1px solid var(--rule)}
.rt-kv dt{font-family:var(--cond);font-weight:700;font-size:15.5px;line-height:1.35;color:var(--ink);text-wrap:balance}
.rt-kv dd{margin:0;color:var(--dim);font-size:14.5px;line-height:1.6;text-wrap:pretty}
@media (max-width:560px){.rt-kv>div{grid-template-columns:1fr}}

/* ── the quotes about the predecessor ─────────────────────────────────── */
/* ── the reviews: engineering-plain cards (the owner, 12:06) ─────────────────
   Deep dark grey, a black drop shadow, no glow. One cool technical gradient per card, and only as a 1 px line
   on the top edge and a 6 % wash: g1 white-grey to cyan, g2 cyan to lime, g3 yellow to cyan. Avatars are one
   flat colour with the first letter (a user glyph where there is no name). */
/* the reviews open their section now (the owner, 2026-09-26: no heading, quote or rating line over them, no margin) */
.rt-revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:0}
/* glass (the owner, 18:08): light comes out of each avatar, one colour per card, and runs on into the next card:
   silver, lime, cyan, then purple-magenta. The glow is drawn from the avatar's centre (40 px, 40 px) across the
   glass; a sheen and a lit top edge make it glass; no backdrop-filter (over a flat page it blurs nothing and only
   adds a compositing layer). */
.rev{--glow:#cbd5e1;--next:#a3e635;position:relative;margin:0;display:flex;flex-direction:column;gap:12px;padding:18px 18px 16px;border-radius:14px;
  background:
    radial-gradient(300px 230px at 40px 40px,color-mix(in srgb,var(--glow) 24%,transparent),color-mix(in srgb,var(--glow) 6%,transparent) 55%,transparent 78%),
    linear-gradient(90deg,transparent 52%,color-mix(in srgb,var(--next) 8%,transparent)),
    linear-gradient(118deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 36%,rgba(255,255,255,0) 58%),
    rgba(22,26,30,.78);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 28px -18px rgba(0,0,0,.85),0 2px 4px rgba(0,0,0,.35);overflow:hidden}
.rev::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--glow) 80%,#fff),rgba(255,255,255,.22) 45%,color-mix(in srgb,var(--next) 45%,transparent))}
.rev.g1{--glow:#cbd5e1;--next:#a3e635}
.rev.g2{--glow:#a3e635;--next:#22d3ee}
.rev.g3{--glow:#22d3ee;--next:#d946ef}
.rev.g4{--glow:#d946ef;--next:#d946ef}
.rev-who{display:flex;align-items:center;gap:11px}
.rev-who > span:not(.rev-mark){flex:1;min-width:0}
.rev-av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:700 15px/1 var(--cond);color:#0b0f12}
.rev-av.c{background:#67e8f9}
.rev-av.y{background:#fde047}
.rev-av svg{width:20px;height:20px;fill:none;stroke:#0b0f12;stroke-width:1.8;stroke-linecap:round}
.rev-who b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.rev-who small{display:block;margin-top:2px;font-size:12px;color:var(--dim)}
.rev blockquote{margin:0;font-size:15px;line-height:1.6;color:#d4d4d8}
.rev-nas{margin:0;padding:0 0 12px;border-bottom:1px solid #27272a;font:500 12px/1.4 var(--mono);color:var(--dim)}
.rev-nas span{margin-right:8px;padding:1px 6px;border-radius:4px;background:#27272a;color:#a1a1aa;font-size:10.5px;letter-spacing:.08em}
/* the forum quotes about rtorrent-Pro, as loose chat bubbles beside the rows they talk about (the owner, 13:05):
   the panel's dark, a hairline, a soft black shadow, a slight tilt each, and a slow float that only moves
   (translate), never under prefers-reduced-motion */
.rt-bub{--tilt:-1deg;position:relative;display:block;width:fit-content;max-width:100%;margin:22px 0 0;
  padding:11px 15px 10px;border-radius:18px 18px 18px 5px;rotate:var(--tilt);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),rgba(21,28,33,.82);
  box-shadow:0 0 0 1px rgba(255,255,255,.075),inset 0 1px 0 rgba(255,255,255,.05),0 16px 30px -18px rgba(0,0,0,.9)}
.rt-bub blockquote{max-width:26ch;margin:0;font:600 15.5px/1.35 var(--cond);color:var(--ink);letter-spacing:.005em;text-wrap:balance}
.rt-bub figcaption{display:flex;align-items:center;gap:8px;margin-top:8px;font:500 11px/1.2 var(--mono);color:var(--dim)}
.rt-bub figcaption b{display:block;font-weight:500;color:#a1a1aa}
.rt-bub figcaption small{display:block;margin-top:2px;font-size:10.5px}
.rt-bub .rev-av{width:18px;height:18px}
.rt-bub .rev-av svg{width:11px;height:11px;stroke-width:2.2}
.rt-bub.b1{--tilt:-1.4deg;margin-top:20px;margin-left:4px}
.rt-bub.b2{--tilt:1.1deg;margin-top:20px;margin-left:10px}
.rt-bub.b3{--tilt:-.8deg;margin:0 0 22px;border-radius:18px 18px 5px 18px}
.rt-bub.b4{--tilt:1.6deg}
.rt-bub.b5{--tilt:-1deg}
/* the one pinned into row 03's free space drifts off to the side, a little fainter */
.rt-bub.drift{margin:clamp(34px,5vw,72px) 0 0 clamp(18px,7vw,110px);opacity:.8;border-radius:18px 18px 5px 18px}
.rt-bub.drift blockquote{font-size:14.5px}
@media (prefers-reduced-motion:no-preference){
  .rt-bub{animation:rt-float 7s cubic-bezier(.45,0,.55,1) infinite}
  .rt-bub.b2{animation-duration:8.2s;animation-delay:-2s}
  .rt-bub.b3{animation-duration:7.6s;animation-delay:-4s}
  .rt-bub.b4{animation-duration:9s;animation-delay:-1s}
  .rt-bub.b5{animation-duration:8s;animation-delay:-3s}
  @keyframes rt-float{50%{translate:0 -4px}}
}
@media (max-width:760px){.rt-bub.drift{margin-left:clamp(12px,8vw,48px)}}
/* each review's header ends with its stars and a small "verified" mark on the right (the owner, 13:34: the reviews
   are real and published with consent); the NAS model sits right under the header */
.rev-mark{flex:none;align-self:flex-start;display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin-left:auto;padding-top:3px}
.rev-ok{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 6px;border-radius:999px;
  font:600 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#bef264;
  background:rgba(163,230,53,.08);box-shadow:0 0 0 1px rgba(163,230,53,.28)}
.rev-ok svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* the last forum quote floats above "Download for free now!", a little to the right of its middle */
.rt-bub.on-get{--tilt:-2deg;left:clamp(0px,calc((100vw - 480px) * .45),190px);margin:0 auto clamp(16px,2.6vw,30px);text-align:left}
/* the FAQ as six open blocks, numbered: three columns, two on a tablet, one on a phone */
#faq-rt16 .faq-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:clamp(18px,2.4vw,28px);counter-reset:q}
@media (min-width:700px){#faq-rt16 .faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){#faq-rt16 .faq-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.faq-card{padding:18px 20px 16px;border-radius:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),#141a1e;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.04),0 14px 28px -20px rgba(0,0,0,.85)}
.faq-card::before{counter-increment:q;content:counter(q,decimal-leading-zero);display:block;margin-bottom:10px;
  font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--led)}
.faq-card h3{margin:0 0 10px;font:600 clamp(17px,1.35vw,19.5px)/1.3 var(--cond);color:var(--ink);text-wrap:balance}
#faq-rt16 .faq-card .a{padding:0;max-width:none;font-size:15px;line-height:1.62}
#faq-rt16 .faq-card .a p:last-child{margin-bottom:0}
/* the reviewers' avatars: our own images (docs/site/stickers, generated with ElevenLabs), a round crop of each head
   with a hairline ring; five gold stars under each name, and one line above the reviews: the avatars stacked,
   the stars, 5.0 and the years the reviews come from (the owner's word, 12:58 UTC) */
img.rev-av{width:44px;height:44px;padding:0;background:#0f1115;object-fit:cover;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--glow,#cbd5e1) 80%,#fff),0 0 16px 2px color-mix(in srgb,var(--glow,#cbd5e1) 60%,transparent),0 0 46px 8px color-mix(in srgb,var(--glow,#cbd5e1) 26%,transparent)}
/* each cat takes its card's colour (a duotone from its own light and dark); the first stays as it is */
.rev.g2 img.rev-av{filter:grayscale(1) contrast(1.15) sepia(1) saturate(4.5) hue-rotate(42deg) brightness(1.05)}
.rev.g3 img.rev-av{filter:grayscale(1) contrast(1.15) sepia(1) saturate(4.5) hue-rotate(148deg) brightness(1.05)}
.rev.g4 img.rev-av{filter:grayscale(1) contrast(1.15) sepia(1) saturate(4.5) hue-rotate(250deg) brightness(1.08)}
.rev-stars{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.55' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M7 .6l1.95 4.02 4.43.55-3.26 3.05.85 4.38L7 10.43 3.03 12.6l.85-4.38L.62 5.17l4.43-.55z'/%3E%3C/svg%3E");position:relative;display:block;width:80px;height:14px;
  background:var(--star) 0 0/16px 14px repeat-x}
.rev-stars.lg{width:110px;height:19px;background-size:22px 19px;overflow:hidden;
  -webkit-mask:var(--star) 0 0/22px 19px repeat-x;mask:var(--star) 0 0/22px 19px repeat-x}

/* ── the spec sheet ───────────────────────────────────────────────────── */
.rt-spec{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin:clamp(24px,3vw,40px) 0 0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
@media (min-width:760px){.rt-spec{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rt-spec div{padding:14px 16px 15px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-width:0}
.rt-spec dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.rt-spec dd{margin:0;font-family:var(--cond);font-weight:600;font-size:16.5px;color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.rt-spec dd small{display:block;font-family:var(--sans);font-weight:400;font-size:13px;color:var(--dim);margin-top:3px}
.rt-spec .big{font-family:var(--mono);font-weight:500;font-size:26px;color:var(--led);font-variant-numeric:tabular-nums}

/* ── install ──────────────────────────────────────────────────────────── */
.rt-steps{margin:0 0 22px;padding:0;list-style:none;counter-reset:st;display:grid;gap:10px;max-width:74ch}
.rt-steps li{counter-increment:st;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:baseline;color:var(--dim);font-size:15px;line-height:1.55}
.rt-steps li::before{
  content:counter(st);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  font-family:var(--mono);font-size:12px;color:var(--led);background:var(--led-soft);border:1px solid rgba(255,176,32,.36);
}
.rt-steps b{color:var(--ink);font-weight:600}
.rt-steps code{font-family:var(--mono);font-size:13px;background:rgba(255,255,255,.055);border:1px solid var(--rule);border-radius:3px;padding:1px 6px;color:var(--ink);overflow-wrap:anywhere}
.rt-by{margin:20px 0 10px;color:var(--dim);font-size:14px}

/* ── the support line ─────────────────────────────────────────────────── */
.rt-give{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.rt-give p{margin:0;max-width:70ch;color:var(--dim);font-size:15px;line-height:1.6}
.rt-give p b{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .rt-tray,.rt-card,.rt-go{transition:none}
  .rt-card:hover{transform:none}
}
/* the hero's three lines never wrap (site.css), which a long German or Japanese line cannot keep on a phone:
   at 320-360 px "Von der Suche auf den Bildschirm." pushed the page 23 px sideways. Below 420 px a line may break */
@media (max-width:420px){h1.creed{text-wrap:balance}}

/* ── measured: build 231 against the other clients ─────────────────────── */
/* An emphasis chart: seconds to finish (shorter is better), bars scaled to the figure's --max, rtorrent16's bar
   in the LED colour and every other in one gray (#5E6E78: 3:1 on the card, ΔE 29 from the LED under CVD, checked
   with the dataviz validator). Text keeps the text tokens; the bar beside a name carries identity. 4px rounded
   data-end, square at the baseline, the value at the tip. Each bar answers hover and keyboard focus with its
   median and the range of the rounds; a table view under each chart holds the same numbers. */
.rt-bench{--rt-bar:#5E6E78}
.rt-bench-lead{max-width:74ch;margin:14px 0 0;color:var(--dim);font-size:15px;line-height:1.6}
.rt-bench{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,22px);margin:clamp(24px,3vw,40px) 0 0}
@media (min-width:980px){.rt-bench{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rt-chart{margin:0;padding:18px 18px 16px;border:1px solid var(--rule);border-radius:var(--tray);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008) 45%,transparent);min-width:0}
.rt-chart figcaption{font-size:14px;color:var(--dim);line-height:1.5}
.rt-chart figcaption b{display:block;font-family:var(--cond);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:.005em}
.rt-chart figcaption span{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim)}
.rt-chart-box{margin-top:14px}
.rt-chart-box h3{margin:0 0 6px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.rt-chart ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.rt-chart li{position:relative;display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:10px;align-items:center;
  min-height:26px;padding:0 4px;border-radius:4px;font-size:13.5px;outline:none}
.rt-chart li span{color:var(--dim);white-space:nowrap}
.rt-chart li em{display:flex;align-items:center;gap:8px;min-width:0;font-style:normal}
.rt-chart li i{display:block;flex:0 0 calc(var(--v) / var(--max) * (100% - 3.2em));min-width:3px;height:10px;
  border-radius:0 4px 4px 0;background:var(--rt-bar);transition:filter .2s var(--ease-seat)}
.rt-chart li b{font-family:var(--sans);font-weight:500;font-size:13px;color:var(--ink)}
.rt-chart li.us span{color:var(--ink);font-weight:600}
.rt-chart li.us i{background:var(--led)}
.rt-chart li.us b{font-weight:700}
.rt-chart li:hover,.rt-chart li:focus-visible{background:rgba(255,255,255,.035)}
.rt-chart li:hover i,.rt-chart li:focus-visible i{filter:brightness(1.2)}
.rt-chart li:focus-visible{box-shadow:0 0 0 1px var(--rule-hi)}
.rt-chart li[data-tip]:hover::after,.rt-chart li[data-tip]:focus-visible::after{
  content:attr(data-tip);position:absolute;right:4px;bottom:calc(100% + 4px);z-index:3;pointer-events:none;
  max-width:min(320px,80vw);padding:6px 10px;border-radius:6px;border:1px solid var(--rule-hi);background:var(--panel-2);
  color:var(--ink);font-family:var(--sans);font-size:12.5px;line-height:1.4;white-space:normal;
  box-shadow:0 10px 24px rgba(0,0,0,.45)}
.rt-res table{width:100%;border-collapse:collapse;font-size:13.5px}
.rt-res th,.rt-res td{padding:6px 8px;text-align:right;border-bottom:1px solid var(--rule)}
.rt-res thead th{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rt-res tbody th{text-align:left;font-weight:400;color:var(--dim);white-space:nowrap}
.rt-res tbody td{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rt-res-wrap{overflow-x:auto;margin-top:12px}
.rt-res tr.us th{color:var(--ink);font-weight:600}
.rt-res tr.us th::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:-1px;
  border-radius:0 4px 4px 0;background:var(--led)}
.rt-bench-side{display:grid;gap:clamp(14px,2vw,22px);align-content:start;min-width:0}
.rt-v6{padding:18px;border:1px solid var(--rule);border-radius:var(--tray);background:rgba(255,255,255,.02)}
.rt-v6-n{margin:0;font-family:var(--sans);font-weight:600;font-size:48px;line-height:1;color:var(--ink)}
.rt-v6-n small{font-size:24px;font-weight:500;color:var(--dim)}
.rt-v6-k{margin:6px 0 0;font-size:13px;color:var(--dim)}
.rt-v6 h3{margin:14px 0 6px;font-family:var(--cond);font-weight:700;font-size:19px;color:var(--ink)}
@media (max-width:560px){.rt-chart li{grid-template-columns:8.6em minmax(0,1fr);gap:8px;font-size:13px}}

/* ── measured: the replay (assets/rt16-race.js) ────────────────────────────── */
/* Lanes fill left to right with the share of the ISO each client had verified at that second (--p, 0..1, scaleX so
   only the compositor works); the readout beside a lane counts MiB, then shows the finish time. rtorrent16's lane in
   the LED colour, the rest in the chart grey. Without JS, or under reduced motion, every lane stays full. */
.rt-race{grid-column:1/-1}
.rt-race .rt-race-ctl{display:flex;align-items:center;gap:14px;margin-top:14px}
.rt-race-go{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:transparent;
  border:1px solid var(--rule-hi);border-radius:999px;padding:8px 14px;cursor:pointer}
.rt-race-go:hover,.rt-race-go:focus-visible{border-color:var(--led);color:var(--led)}
.rt-race-t{font:500 13px/1 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums;min-width:4.5em}
.rt-race.run .rt-race-t{color:var(--ink)}
@media (min-width:980px){.rt-race{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,2.4vw,32px)}
  .rt-race figcaption,.rt-race .rt-race-ctl{grid-column:1/-1}}
.rt-race ol{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.rt-race li{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 5.6em;gap:10px;align-items:center;font-size:13.5px}
.rt-race li span{color:var(--dim);white-space:nowrap}
.rt-race li em{display:block;height:10px;border-radius:2px;background:rgba(255,255,255,.045);overflow:hidden}
.rt-race li i{display:block;height:100%;border-radius:2px;background:var(--rt-bar,#5E6E78);
  transform:scaleX(var(--p,1));transform-origin:0 50%}
.rt-race li b{font:500 13px/1 var(--mono);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rt-race.run li:not(.fin) b{color:var(--dim)}
.rt-race li.us span{color:var(--ink);font-weight:600}
.rt-race li.us i{background:var(--led)}
.rt-race li.us.fin i{box-shadow:0 0 14px -2px rgba(255,176,32,.6)}
.rt-race li.fin b{animation:rt-race-fin .5s var(--ease-seat)}
@keyframes rt-race-fin{from{opacity:.2}}
@media (max-width:560px){.rt-race li{grid-template-columns:8.6em minmax(0,1fr) 5em;gap:8px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.rt-race li.fin b{animation:none}}

/* ── measured: a DHT from an empty table (assets/rt16-dht.js) ─────────────────── */
/* rtorrent16's IPv6 table in the LED colour, its IPv4 table in light grey, plain rtorrent's IPv4 table in the chart grey,
   dashed; each line named at its end. The lines draw on reveal: a clip sweeps left to right. */
.rt-dht-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:4px 18px}
.rt-dht-box{position:relative;outline:none;border-radius:6px}
.rt-dht-box:focus-visible{box-shadow:0 0 0 1px var(--rule-hi)}
.rt-dht-svg{display:block;width:100%;height:auto;overflow:visible}
.rt-dht-grid{stroke:var(--rule);stroke-width:1}
.rt-dht-ax{fill:var(--dim);font:500 9.5px var(--mono)}
.rt-dht-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rt-dht-v6{stroke:var(--led)}
.rt-dht-v4{stroke:#B7C3C9}
.rt-dht-p4{stroke:#5E6E78;stroke-dasharray:5 4}
.rt-dht-end{font:500 10px var(--sans);fill:var(--ink)}
.rt-dht-end.rt-dht-p4{fill:var(--dim);stroke:none}
.rt-dht-x{stroke:var(--ink);stroke-width:1;opacity:0;pointer-events:none}
.rt-dht-tip{margin:4px 0 0;font:500 11.5px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;min-height:1.4em}
.rt-dht-clip{transform-box:fill-box;transform-origin:0 50%}
.rt-dht-wait .rt-dht-clip{transform:scaleX(0)}
.rt-dht-wait .rt-dht-end{opacity:0}
.rt-dht-go .rt-dht-clip{transition:transform 2.4s linear}
.rt-dht-go .rt-dht-end{transition:opacity .4s ease 2.2s}

/* ═══ EXPERIMENT (the owner, 17:43): the WARNING block's deep soft shadow on every box of this page, in three sizes,
   with a faint glass highlight inside the top edge. The slab edges (a plate under the bottom, then a lit strip on top)
   were tried and taken back (18:56): none, top or bottom. To take it back ("cofnij shadowy"): delete
   from this line to END EXPERIMENT; nothing else depends on it. Text chips (code, tags) are left out. ═══ */
:root{
  --xs-l:inset 0 1px 0 rgba(255,255,255,.1),0 40px 90px rgba(0,0,0,.55);
  --xs-m:inset 0 1px 0 rgba(255,255,255,.08),0 26px 60px rgba(0,0,0,.5);
  --xs-s:inset 0 1px 0 rgba(255,255,255,.07),0 16px 36px rgba(0,0,0,.45);
}
.rt-spec,.sup-get,.rt-chart{box-shadow:var(--xs-l)}
/* windows with a glass frame get no slab edge (the owner, 18:30), only the deep shadow: a panel cut-out carries it
   on its tray (the glass frame), not on the panel inside it; the Explorer window and the disk map keep their own
   frame lines under it */
.rt-tray{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px rgba(0,0,0,.55)}
.w{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px rgba(0,0,0,.55)}
.fr{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px rgba(0,0,0,.55)}
.rev,.faq-card,.rt-card,.rt-v6{box-shadow:var(--xs-m)}
.rt-warn{box-shadow:var(--xs-m)}
.rt-bub,.sd-get-core{box-shadow:var(--xs-s)}
/* the two coloured tickets keep their colour glow under the deep shadow */
/* ═══ END EXPERIMENT ═══ */

/* ── the design pass (the owner, 18:56: audit first, then targeted fixes) ───────────────────────────────── */
/* a pressed control sinks a little (the islands, the demo links, the add-on cards, the currency switch):
   down fast, back up at the seat's own pace */
.isl:active,.rt-go:active,.rt-card:active,.sup-bar button:active{transform:translateY(1px) scale(.985);transition-duration:.12s}
/* with motion allowed, in-page links glide and the press itself is animated */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .isl{transition:background-color .45s var(--ease-seat),border-color .45s var(--ease-seat),color .45s var(--ease-seat),transform .45s var(--ease-seat)}
  .rt-go{transition:color .35s var(--ease-seat),border-color .35s var(--ease-seat),transform .35s var(--ease-seat)}
  .sup-bar button{transition:color .3s var(--ease-seat),background-color .3s var(--ease-seat),transform .3s var(--ease-seat)}
}
/* in-page links land 16 px below the sticky header, whatever its height (--mast, from the page's script); on a phone
   the header is two or three lines tall, so the rows and the support section drop their extra 90 px there */
@media (min-width:721px){html{scroll-padding-top:calc(var(--mast,66px) + 16px)}}
@media (max-width:720px){.rt-feat,.rt-support{scroll-margin-top:16px}}

/* row 03 (the owner, 20:01): the two forum quotes close together, one cyan and one yellow; under them the five
   .torrent files that the page's pointer selects, gathers and carries into the Add cut-out (assets/rt16-drop.js) */
#add{position:relative}
#add .rt-bub.b1,#add .rt-bub.b4{--tone:#67e8f9;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 15%,transparent),rgba(255,255,255,.012) 72%),rgba(17,23,28,.9);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tone) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.06),0 18px 34px -18px rgba(0,0,0,.9)}
#add .rt-bub.b4{--tone:#facc15;opacity:1;margin:-4px 0 0 clamp(52px,9vw,132px)}
#add .rt-bub.b1 figcaption b,#add .rt-bub.b4 figcaption b{color:color-mix(in srgb,var(--tone) 70%,#fff)}
#add .rt-bub .rev-av{background:color-mix(in srgb,var(--tone) 20%,transparent);color:var(--tone)}
.rt-files{display:flex;flex-wrap:wrap;gap:4px 2px;max-width:500px;margin:clamp(22px,2.8vw,34px) 0 0}
.rt-file{display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;padding:9px 5px 7px;border-radius:10px;
  transition:background-color .2s ease,box-shadow .2s ease}
.rt-file svg{width:32px;height:38px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.rt-file i{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;
  font:500 10px/1.3 var(--mono);font-style:normal;color:var(--dim);text-align:center}
.rt-file.sel{background:color-mix(in srgb,var(--lime,#a6e22e) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lime,#a6e22e) 36%,transparent)}
.rt-file.sel i{color:var(--ink)}
@media (max-width:560px){
  .rt-files{gap:2px}
  .rt-file{width:calc((100% - 8px) / 5);padding:7px 2px 6px}
  .rt-file svg{width:26px;height:31px}
  .rt-file i{font-size:9px}
}
.rt-dnd{position:absolute;inset:0;z-index:6;pointer-events:none}
.rt-dnd-box{position:absolute;left:0;top:0;width:0;height:0;border-radius:4px;opacity:0;
  border:1px solid color-mix(in srgb,var(--lime,#a6e22e) 80%,transparent);background:color-mix(in srgb,var(--lime,#a6e22e) 9%,transparent)}
.rt-dnd-pack{position:absolute;left:0;top:0}
.rt-dnd-pack .rt-file{position:absolute;left:0;top:0;background:rgba(19,25,30,.94);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lime,#a6e22e) 36%,transparent),0 10px 22px rgba(0,0,0,.4)}
.rt-dnd-n{position:absolute;left:0;top:0;z-index:2;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;opacity:0;
  background:var(--lime,#a6e22e);color:#111214;font:700 12px/1 var(--sans);box-shadow:0 4px 12px rgba(0,0,0,.45)}
/* the pointer: rounded, a heavier outline; its tip is the point it is moved to */
.rt-dnd-cur{position:absolute;left:-5.5px;top:-3.5px;width:28px;height:32px;opacity:0;overflow:visible;filter:drop-shadow(0 5px 9px rgba(0,0,0,.55))}
.rt-dnd-cur path{fill:#fff;stroke:#0d0f12;stroke-width:2.2;stroke-linejoin:round;transform-origin:6px 4px;transition:transform .16s cubic-bezier(.32,.72,0,1)}
.rt-dnd-cur.down path{transform:scale(.86)}
/* row 04 (the owner, 20:01): on a tablet or a phone, where the row is one column, the File Explorer window takes the
   column's whole width */
@media (max-width:999.98px){.rt-win{max-width:none}}
/* row 09 (the owner, 20:01): the owner's "RPC2" sticker (5c, lime band; docs/site/stickers/) slapped on the corner
   of the config window, the way a sticker sits on a laptop lid */
#nat .rt-tray{position:relative}
.rt-slap{position:absolute;z-index:4;right:clamp(-16px,-1.2vw,-6px);top:clamp(-30px,-2.4vw,-14px);width:clamp(72px,8.4vw,120px);height:auto;
  rotate:9deg;pointer-events:none}

/* ── the support tiers (the owner, 2026-09-26; the round of 22:10): a switch beside the currency switch picks
   one-time support, monthly support or no support; each kind's row is a carousel that opens on its largest donation;
   a progress bar sits under the rows. Built by tools/node/site-donation-rows.mjs from docs/site/rtorrent16-support.json
   and moved by assets/rt16-give.js. Every card has one shape (head, amount, footer with the button); the one-time and
   the monthly rows share the monthly cards' three gradients, and each row ends on its own card: the "sharp & glowing"
   one (after LukyVJ's pen YzOXepM) and the sticker pack on frosted glass. */
/* the glowing card's light turns outside the card on purpose; the page clips it at the screen's edges instead of
   growing a sideways scroll (clip makes no scroll container, so nothing sticky breaks) */
main{overflow-x:clip}
@property --gl-hue{syntax:'<number>';inherits:true;initial-value:0}
@property --gl-rotate{syntax:'<number>';inherits:true;initial-value:0}
@property --gl-x{syntax:'<number>';inherits:true;initial-value:0}
@property --gl-y{syntax:'<number>';inherits:true;initial-value:0}
.rt-support{--give-ease:cubic-bezier(.65,0,.35,1)}
/* the kind switch is the currency switch's twin, the same size; "or no support" sits after a thin rule. On a phone
   its three buttons take two lines, "or no support" across the second. */
.sup-bar .kind{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:999px;background:var(--panel)}
.sup-bar .kind button[aria-pressed="true"]{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-hi)}
.sup-bar .kind .or{flex:none;width:1px;height:18px;margin:0 5px;background:var(--rule-hi)}
@media (max-width:620px){.sup-bar .kind{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:18px}
  .sup-bar .kind .or{display:none}.sup-bar .kind button{padding:9px 10px;line-height:1.25;text-wrap:balance}}
.tks-hint{margin:0;max-width:72ch;font-size:14px;line-height:1.6;color:var(--dim);text-wrap:pretty}
/* a row: without script a strip that scrolls sideways; with it (.on) the cards share one spot and stand around it,
   the one in the middle whole and in full colour, the others smaller, darker and paler the further out they are */
.give{--cw:min(300px,76vw);--step:calc(var(--cw) * .78);position:relative}
.give-view{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 4px 34px;scrollbar-width:none}
.give-view::-webkit-scrollbar{display:none}
.give-view>*{flex:0 0 var(--cw);scroll-snap-align:center}
/* the mask that fades the ends also clips: the room above and below keeps the glowing card's blurred light whole */
.give.on .give-view{display:grid;grid-template-columns:var(--cw);justify-content:center;overflow:visible;padding:110px 0 70px;margin:-80px 0 -34px;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 70px,#000 calc(100% - 44px),transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 70px,#000 calc(100% - 44px),transparent);
  mask-composite:intersect}
/* a row of one card (no support) has nothing at its sides to fade */
.give.on.solo .give-view{-webkit-mask-image:linear-gradient(180deg,transparent,#000 70px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(180deg,transparent,#000 70px,#000 calc(100% - 44px),transparent)}
.give-view:focus{outline:0}
.give.on .give-view>*{grid-area:1/1;translate:calc(var(--o,0) * var(--step)) 0;scale:var(--sc,1);opacity:var(--op,1);z-index:var(--z,6);
  transition:translate .64s var(--give-ease),scale .64s var(--give-ease),opacity .64s var(--give-ease),filter .64s var(--give-ease),transform .45s var(--ease-seat)}
.give.on .give-view>[data-d="1"]{--sc:.86;--op:.7;--z:4;filter:saturate(.45) brightness(.72);cursor:pointer}
.give.on .give-view>[data-d="2"]{--sc:.74;--op:.3;--z:3;filter:saturate(.2) brightness(.55);cursor:pointer}
.give.on .give-view>[data-d="3"]{--sc:.66;--op:0;--z:2;pointer-events:none}
.give.on .give-view>:not([data-d="0"]):hover{transform:none;filter:saturate(.7) brightness(.85)}
/* a card that goes round from one end to the other is not seen crossing: it moves hidden and fades in where it lands */
.give.on .give-view>[data-jump],.give.on.still .give-view>*{transition:none!important}
.give.on .give-view>[data-jump]{opacity:0!important}
.give-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:-4px;
  /* above the view: its mask paints it over the nav it overlaps (margin-bottom -34px), which took the arrows' clicks */
  position:relative;z-index:8}
.give-go{appearance:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--rule-hi);background:var(--panel);
  color:var(--ink);cursor:pointer;transition:border-color .3s var(--ease-seat),background-color .3s var(--ease-seat),transform .3s var(--ease-seat)}
.give-go:hover{border-color:var(--led);background:var(--panel-2)}
.give-go:active{transform:scale(.94);transition-duration:.12s}
.give-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.give-dots{display:flex;align-items:center}
.give-dot{appearance:none;position:relative;width:20px;height:28px;padding:0;border:0;background:none;cursor:pointer;transition:width .5s var(--give-ease)}
.give-dot::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:999px;background:var(--rule-hi);translate:-50% -50%;
  transition:width .5s var(--give-ease),background-color .5s var(--give-ease)}
.give-dot:hover::after{background:var(--dim)}
.give-dot[aria-current="true"]{width:36px}
.give-dot[aria-current="true"]::after{width:26px;background:var(--led)}
.give-go:focus-visible,.give-dot:focus-visible,.cb:focus-visible,.gl:focus-visible{outline:2px solid var(--led);outline-offset:4px}
/* the cards */
.cb-h{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:22px}
.cb-chip{padding:3px 9px;border-radius:999px;font:700 10px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#111214;background:var(--c,#ffb741)}
.cb{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:330px;border-radius:2.25rem;text-decoration:none;color:#fff;
  transition:transform .45s var(--ease-seat)}
.cb .cb-h{padding:22px 22px 0 24px}
.cb .cb-chip{--c:rgba(255,255,255,.92)}
.cb .cb-b{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 22px 16px 24px}
.cb b,.gl b{font:700 34px/1 var(--cond);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cb b small,.gl b small{font-size:15px;font-weight:500;color:rgba(255,255,255,.8);margin-left:2px}
.cb .nt{font-size:15px;color:#fff}
.cb .ex{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.86)}
.cb-f{display:flex;justify-content:flex-end;padding:12px 18px 14px 24px;border-top:1px solid rgba(255,255,255,.16);background:rgba(8,8,26,.2);border-radius:0 0 2.25rem 2.25rem}
.cb .pay,.gl .pay{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:2em;background:rgba(10,10,28,.34);color:#fff;font:500 13px/1 var(--sans);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background-color .3s var(--ease-seat),color .3s var(--ease-seat)}
.cb .pay svg,.gl .pay svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cb:hover .pay,.cb:focus-visible .pay,.gl:hover .pay,.gl:focus-visible .pay{background:#fff;color:#111214}
.cb:hover,.gl:hover{transform:translateY(-3px)}
/* the owner's gradients of the monthly cards, now on both rows; a green one of the same cut for the free card */
.gd0,.gd1,.gd2,.gd3{box-shadow:rgba(0,0,0,.17) 0 -23px 25px 0 inset,rgba(0,0,0,.15) 0 -36px 30px 0 inset,rgba(0,0,0,.1) 0 -79px 40px 0 inset,
  rgba(0,0,0,.06) 0 2px 1px,rgba(0,0,0,.09) 0 4px 2px,rgba(0,0,0,.09) 0 8px 4px,rgba(0,0,0,.09) 0 16px 8px,rgba(0,0,0,.09) 0 32px 16px}
.gd1{background-color:#4158d0;background-image:linear-gradient(43deg,#4158d0 0%,#c850c0 46%,#ffcc70 100%)}
.gd2{background:linear-gradient(43deg,#4158d0 0%,#c850c0 46%,#ffcc70 100%);background-size:400% 400%;background-position:0% 50%}
.gd3{background:linear-gradient(43deg,#4158d0 0%,#1888b4 46%,#0f31ca 100%);background-size:400% 400%;background-position:0% 50%}
.gd0{background:linear-gradient(43deg,#0b5f57 0%,#0f9e8e 46%,#7fdcc6 100%)}
/* the largest one-time tier: a near-black card whose rim runs through the hues, with a blurred light turning behind it */
.gl{position:relative;z-index:0;display:flex;min-height:330px;border-radius:2.25rem;text-decoration:none;color:#fff;
  --gl-card:hsl(260 100% 3%);transition:transform .45s var(--ease-seat)}
.gl-in{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:26px 28px;border-radius:calc(2.25rem * .92);background:var(--gl-card)}
.gl-in::before{content:"";position:absolute;left:-1.5px;top:-1.5px;width:calc(100% + 3px);height:calc(100% + 3px);z-index:-1;border-radius:2.25rem;
  mix-blend-mode:color-burn;box-shadow:0 0 20px #000;
  background:hsl(0 0% 16%) radial-gradient(30% 30% at calc(var(--gl-x) * 1%) calc(var(--gl-y) * 1%),hsl(calc(var(--gl-hue) * 1deg) 100% 90%) 0%,
    hsl(calc(var(--gl-hue) * 1deg) 100% 80%) 20%,hsl(calc(var(--gl-hue) * 1deg) 100% 60%) 40%,transparent 100%)}
.gl .cb-chip{--c:hsl(calc(var(--gl-hue) * 1deg) 100% 72%)}
.gl .cb-h{margin-bottom:6px}
.gl .nt{font-size:15px;color:#ddd}
.gl .ex{font-size:12.5px;line-height:1.55;color:#b9b9c0;max-width:52ch}
.gl .pay{align-self:flex-start;margin-top:8px;background:#222127;box-shadow:none}
.gl-glow{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;margin:-17% 0 0 -17%;transform:rotateZ(calc(var(--gl-rotate) * 1deg));pointer-events:none}
.gl-glow::after{content:"";position:relative;display:block;left:-15%;top:-15%;width:130%;height:130%;z-index:-2;border-radius:50%;filter:blur(52px);
  background:hsl(calc(var(--gl-hue) * 1deg) 100% 60%);transform:scaleY(1.36) scaleX(1.8) translateY(-65%);opacity:.9}
/* the sticker pack is on show, not for sale yet: frosted glass over coloured blobs, no link, its button off */
.cb.gcs{background:lightgrey;color:#15161a;overflow:hidden;box-shadow:#d11bff42 0 15px 40px -5px;cursor:default}
.cb.gcs:hover,.cb.gcs:active{transform:none}
.gcs .gc-glass{position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(rgba(255,255,255,.473),rgba(150,150,150,.25));
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.gcs .blob{position:absolute;z-index:0;width:66%;aspect-ratio:1;border-radius:5em}
.gcs .blob:nth-of-type(1){left:-26%;top:-36%;background:#ff930f}
.gcs .blob:nth-of-type(2){left:58%;top:-8%;background:#bf0fff}
.gcs .blob:nth-of-type(3){left:-21%;top:40%;background:#ff1b6b}
.gcs .blob:nth-of-type(4){left:53%;top:70%;background:#0061ff}
.gcs .cb-h,.gcs .cb-b,.gcs .cb-f{position:relative;z-index:2}
.gcs .nt{color:#15161a}
.gcs .ex{color:rgba(21,22,26,.8)}
.gcs .cb-f{background:rgba(255,255,255,.22);border-top-color:rgba(21,22,26,.12)}
.gcs .pay.off{padding:8px 14px;background:rgba(21,22,26,.12);box-shadow:inset 0 0 0 1px rgba(21,22,26,.25);color:#15161a;opacity:.72}
.cb:active,.gl:active{transform:translateY(1px) scale(.985);transition-duration:.12s}
/* the progress bar under the rows: raised so far against the target, from data in the markup (the generator) */
.sup-goal{margin-top:clamp(12px,2vw,22px);padding:clamp(16px,2vw,22px) clamp(16px,2.2vw,26px) clamp(14px,1.8vw,18px);border:1px solid var(--rule);
  border-radius:var(--tray);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01) 60%,transparent),var(--panel);box-shadow:var(--xs-l)}
.sup-goal-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:14px}
.sup-goal-l{font:500 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.sup-goal-n{white-space:nowrap;font-variant-numeric:tabular-nums}
.sup-goal-n b{font:700 clamp(24px,2.4vw,30px)/1 var(--cond);letter-spacing:-.01em;color:var(--ink)}
.sup-goal-n span{margin-left:4px;font:600 15px/1 var(--cond);color:var(--dim)}
.sup-goal-bar{position:relative;height:14px;border-radius:999px;overflow:hidden;background:linear-gradient(180deg,#0a0e11,#121a1f);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7),inset 0 0 0 1px var(--rule)}
.sup-goal-bar::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.07) calc(25% - 1px) 25%)}
.sup-goal-bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);translate:-100% 0}
.sup-goal-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 1%);border-radius:inherit;
  background:linear-gradient(90deg,#4158d0,#c850c0 55%,#ffcc70);box-shadow:0 0 16px rgba(200,80,192,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.sup-goal-foot{display:flex;justify-content:space-between;margin-top:9px;font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
  .gl-in::before{animation:gl-hue 4s linear infinite,gl-bg 4s linear infinite}
  .gl-glow{animation:gl-rotate 4s linear infinite}
  .gl-glow::after,.gl .cb-chip{animation:gl-hue 4s linear infinite}
  .gd2,.gd3{animation:gc-shift 5s ease infinite}
  .sup-goal.rv .sup-goal-bar i{width:0;transition:width 1.4s var(--give-ease) .25s}
  .sup-goal.rv.in .sup-goal-bar i{width:calc(var(--p) * 1%)}
  .sup-goal-bar::after{animation:goal-sheen 3.6s var(--give-ease) infinite}
}
@media (prefers-reduced-motion:reduce){.give.on .give-view>*{transition:none!important}}
@keyframes gl-hue{from{--gl-hue:0}to{--gl-hue:360}}
@keyframes gl-bg{0%{--gl-x:0;--gl-y:0}25%{--gl-x:100;--gl-y:0}50%{--gl-x:100;--gl-y:100}75%{--gl-x:0;--gl-y:100}100%{--gl-x:0;--gl-y:0}}
@keyframes gl-rotate{from{--gl-rotate:-70}to{--gl-rotate:290}}
@keyframes gc-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes goal-sheen{from{translate:-100% 0}62%,to{translate:340% 0}}

/* ── the guards as coloured badges (the owner, 2026-09-26): centred between the dashboard and the WARNING block,
   one colour each, coming in one after another ───────────────────────────────────────────────────────────── */
.rt-badges-row{padding-top:clamp(18px,2.6vw,34px)}
.rt-badges{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1040px}
.rt-badges li{--b:#ffb020;display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 11px;border-radius:999px;
  font:500 13.5px/1.2 var(--sans);color:color-mix(in srgb,var(--b) 28%,#fff);
  background:linear-gradient(180deg,color-mix(in srgb,var(--b) 17%,transparent),color-mix(in srgb,var(--b) 7%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b) 42%,transparent),0 12px 28px -16px var(--b)}
.rt-badges svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--b);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rt-badges li:nth-child(1){--b:#ffb020;--i:0}
.rt-badges li:nth-child(2){--b:#fb7185;--i:1}
.rt-badges li:nth-child(3){--b:#f97316;--i:2}
.rt-badges li:nth-child(4){--b:#25d366;--i:3}
.rt-badges li:nth-child(5){--b:#a78bfa;--i:4}
.rt-badges li:nth-child(6){--b:#22d3ee;--i:5}
.rt-badges li:nth-child(7){--b:#60a5fa;--i:6}
.rt-badges li:nth-child(8){--b:#a3e635;--i:7}
@media (max-width:560px){.rt-badges{gap:8px}.rt-badges li{font-size:12.5px;padding:7px 12px 7px 9px}}
@media (prefers-reduced-motion:no-preference){
  .rt-badges.rv li{opacity:0;translate:0 10px;scale:.96}
  .rt-badges.rv.in li{opacity:1;translate:0 0;scale:1;transition:opacity .5s var(--ease-seat) calc(var(--i) * 60ms),
    translate .6s cubic-bezier(.2,.9,.3,1) calc(var(--i) * 60ms),scale .6s cubic-bezier(.2,.9,.3,1) calc(var(--i) * 60ms)}
}
/* the badges as one moving line (the owner, 2026-09-26 22:10): assets/rt16-marquee.js puts the list on a track with
   copies of itself, so it runs right to left without a seam. The strip fades out at both ends; only its middle shows
   the badges in colour: a second, coloured track runs on top in step with the first, in a window masked to the middle,
   and the track under it is grey. It stops under the pointer and while it has focus. With reduced motion, or without
   script, the list stays as above: centred and wrapped. */
.rt-mq{--g:10px;position:relative;overflow:hidden;padding:6px 0 18px;border-radius:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  transition:opacity .7s var(--ease-seat)}
.rt-mq:has(.rt-badges.rv:not(.in)){opacity:0}
.rt-mq:focus{outline:0}
.rt-mq:focus-visible{box-shadow:inset 0 0 0 2px var(--led)}
.rt-mq-track{display:flex;width:max-content;animation:rt-mq var(--mq-t,60s) linear infinite}
.rt-mq:not(.go) .rt-mq-track{animation:none}
.rt-mq:hover .rt-mq-track,.rt-mq:focus-within .rt-mq-track{animation-play-state:paused}
.rt-mq-track>.rt-badges{flex:none;flex-wrap:nowrap;justify-content:flex-start;gap:var(--g);max-width:none;margin:0;padding:0 var(--g) 0 0}
.rt-mq .rt-badges li{opacity:1!important;translate:none!important;scale:none!important;white-space:nowrap}
.rt-mq>.rt-mq-track{filter:grayscale(1) brightness(.72)}
.rt-mq-win{position:absolute;inset:0;padding:6px 0 18px;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 42%,#000 58%,transparent 74%);mask-image:linear-gradient(90deg,transparent 26%,#000 42%,#000 58%,transparent 74%)}
@media (max-width:560px){.rt-mq{--g:8px}.rt-mq-win{-webkit-mask-image:linear-gradient(90deg,transparent 14%,#000 36%,#000 64%,transparent 86%);
  mask-image:linear-gradient(90deg,transparent 14%,#000 36%,#000 64%,transparent 86%)}}
@keyframes rt-mq{to{transform:translate3d(-50%,0,0)}}

/* the signature and the virus scan as rows of the spec sheet (they were seals under Install); the languages and the
   scan take two columns each, so the sheet ends on a full row */
@media (min-width:760px){.rt-spec .wide{grid-column:span 2}}
.rt-spec dd.txt{font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.55;color:var(--ink)}

/* ── the four reviews, polished (the owner, 2026-09-26, design-taste-frontend): two by two so a quote has room, the
   quote set larger and brighter as the card's main line, the reviewer above it and the NAS as a quiet footer ── */
@media (min-width:900px){.rt-revs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.rev{padding:24px 26px 22px;border-radius:18px;gap:16px}
.rev .rev-who{order:1}
.rev blockquote{order:2;font-size:16.5px;line-height:1.66;color:#e7e7ea;text-wrap:pretty}
.rev .rev-nas{order:3;margin-top:auto;padding:12px 0 0;border-bottom:0;border-top:1px solid rgba(255,255,255,.07)}
.rev img.rev-av{width:48px;height:48px}
.rev .rev-who b{font-size:15.5px}
.rev .rev-who small{font-size:12.5px}
@media (max-width:560px){.rev{padding:20px 18px 18px}.rev blockquote{font-size:15.5px}}
/* the FAQ opens the section of the reviews now (the owner, 2026-09-26), with room before them */
#questions > .faq-cards{margin:0 0 clamp(44px,5vw,68px)}

/* ── #measured, tidied (the owner, 2026-09-26): the cards carry bars and numbers only; what was compared, how, and
   every caveat sit in one folded "How it was measured" under them. The charts come in when they come into view
   (assets/rt16-bench.js adds .anim to the section and .go to each chart): the bars grow one after another,
   rtorrent16's last with a short flash, the numbers count up with them; nothing moves under reduced motion. The replay
   keeps its own motion (assets/rt16-race.js), so these rules pass it by. */
/* the IPv6 figure as one full-width strip: the number, then what it counts */
.rt-bench-side{grid-column:1/-1}
.rt-v6{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(16px,2.4vw,28px)}
.rt-v6-n{grid-row:1/3}
.rt-v6 h3{margin:0 0 3px;align-self:end}
.rt-v6-k{margin:0;align-self:start}
/* each resource figure over a thin bar that grows from the right, under the number */
.rt-res tbody td{background:linear-gradient(270deg,var(--rt-bar) 0 calc(var(--p) * 100%),transparent 0) right bottom/100% 3px no-repeat}
.rt-res tr.us td{background-image:linear-gradient(270deg,var(--led) 0 calc(var(--p) * 100%),transparent 0);color:var(--ink);font-weight:600}
.rt-how{margin:clamp(18px,2.4vw,26px) 0 0;max-width:86ch}
.rt-how summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rt-how summary::after{content:"+";font-size:14px;transition:transform .3s var(--ease-seat)}
.rt-how[open] summary::after{transform:rotate(45deg)}
.rt-how summary:hover,.rt-how summary:focus-visible{color:var(--ink)}
.rt-how ul{margin:14px 0 0;padding:0 0 0 18px;display:grid;gap:8px;color:var(--dim);font-size:13.5px;line-height:1.6}
.rt-how li::marker{color:var(--led)}
.rt-bench.anim .rt-chart:not(.rt-race) li i{transform:scaleX(0);transform-origin:0 50%}
.rt-bench.anim .rt-chart:not(.rt-race) li b{opacity:0}
.rt-bench.anim .rt-res tbody td{background-size:0 3px}
.rt-bench.anim .rt-chart:not(.rt-race).go li i{transform:scaleX(1);transition:transform .9s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.rt-bench.anim .rt-chart:not(.rt-race).go li b{opacity:1;transition:opacity .3s ease var(--d,0ms)}
.rt-bench.anim .rt-res.go tbody td{background-size:100% 3px;transition:background-size .9s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.rt-bench.anim .rt-chart:not(.rt-race).go li.us i{animation:bench-land .9s ease-out calc(var(--d,0ms) + .75s) both}
@keyframes bench-land{0%{box-shadow:0 0 0 0 rgba(255,176,32,0)}35%{box-shadow:0 0 18px 3px rgba(255,176,32,.75)}100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}}

/* the support section, tightened (the owner, 2026-09-26: "the donation drifted off, too much free space there"): on
   a wide screen the copy stays left and "What you get" plus the currency switch stack on the right, so the switch
   no longer sits alone on a row of its own; the two tier rows follow closer */
@media (min-width:1000px){
  .rt-support{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(22px,3vw,44px);align-items:start}
  .rt-support>*{grid-column:1/-1}
  .rt-support .sup-top{display:contents}
  .rt-support .sup-copy{grid-column:1;grid-row:1/span 2}
  .rt-support .sup-get{grid-column:2;grid-row:1}
  .rt-support .sup-bar{grid-column:2;grid-row:2;align-self:start;justify-content:flex-start;margin:18px 0 0}
}

/* section by section (the owner, 2026-09-26): the page settles on the start of a feature row or a section when a
   scroll ends near one; "proximity" never holds a long section back. From 900 px: on a phone the snap would fight
   the header that tucks away on the way down. Only once the reader scrolls (assets/rt16-snap.js adds html.snap):
   snapping from the first paint pulled a page opened at the top down to the dashboard while images loaded */
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  html.snap{scroll-snap-type:y proximity}
  /* the top of the page is a place to rest too, or a page opened at the top would be pulled down to the dashboard */
  main,.rt-stage,#features>.eyebrow,.rt-feat,#phone,#addons,#questions,#measured,#specs,#install,#support{scroll-snap-align:start}
}

/* the walkthroughs under the install steps, with the player (#player) of the site: the install film (moved from the
   front page, the owner, 2026-09-26) and the Gopeed film beside it (2026-10-03); two side by side from 900 px, one
   under the other below that, each wide enough to read the frame */
.rt-films{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(18px,2.4vw,28px)}
@media (max-width:899px){.rt-films{grid-template-columns:minmax(0,1fr)}}
/* the leading film (the owner, 2026-10-03 16:08): his headline and lead in his words, then the Daily usage film the
   full width of the section, under the Install heading and over the install steps; the two smaller films stay under
   the steps */
.rt-lead{margin-top:clamp(22px,2.8vw,40px)}
.rt-lead-h{margin:0;font-family:var(--cond);font-weight:700;font-size:clamp(34px,4.8vw,70px);line-height:1.02;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.rt-lead-p{margin:clamp(12px,1.2vw,18px) 0 0;max-width:60ch;font-size:clamp(17px,1.5vw,21px);line-height:1.5;
  color:color-mix(in srgb,var(--ink) 84%,transparent);text-wrap:pretty}
.rt-films-lead{grid-template-columns:minmax(0,1fr);margin-top:clamp(18px,2.2vw,30px)}
.film-lead .sym{font-size:clamp(18px,1.6vw,22px)}
.film-lead .frame .play{width:64px;height:64px;font-size:22px}
/* the verdict (the owner, 2026-09-26 05:12: after the animation, a plain verdict on which client is faster): one line
   under the replay, the page's accent, in once the replay ends (rt16-bench.js adds .on); standing without motion */
.rt-verdict{grid-column:1/-1;margin:0;padding:18px 22px;border-radius:var(--tray);border:1px solid color-mix(in srgb,var(--led) 38%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--led) 14%,transparent),transparent 70%);
  font:600 clamp(16px,1.5vw,19px)/1.45 var(--sans);color:var(--ink);text-wrap:pretty}
.rt-verdict b{display:inline-block;margin-right:10px;padding:3px 10px;border-radius:999px;background:var(--led);color:#111214;
  font:700 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;vertical-align:3px}
.rt-bench.anim .rt-verdict{opacity:0;transform:translateY(14px) scale(.98)}
.rt-bench.anim .rt-verdict.on{opacity:1;transform:none;transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1)}