/* ─────────────────────────────────────────────────────────────────────────
   rtorrent16.html, #arr: Rtorrent 16 Seerr, Radarr, Sonarr and Prowlarr with Rtorrent 16 (D175), the way into the
   How-to, and a phone with Seerr's Discover page drawn in HTML and CSS (the owner, 2026-10-11: "an elegant picture of
   Seerr, drawn in HTML/CSS"). Nothing in it is a screenshot: the layout follows Seerr on a phone (the search field,
   rows of tall posters with a MOVIE or SERIES pill and a status mark, the five-icon bar), the posters are drawn here,
   and the titles are Blender Studio's films and the series Pioneer One, all under Creative Commons licences. No
   address and no account of anyone's NAS.

   The phone's body is the sibling of the WhatsApp phone in row 06 (assets/rt16-wa.css: the glass tray, the lip, the
   inset highlight, the deep soft shadow, in the same proportions at this width). Its screen takes the page's tokens
   as that phone does (the owner's ruling of 2026-09-26: a drawn app must not look like another site on this page);
   Seerr stays recognisable by its layout, its blue MOVIE and purple SERIES pills and its status marks, whose colours
   carry meaning. It is a fixed 320 x 680 canvas: a phone at its natural size, which fits a 390 px screen as it is.
   One thing moves, once: when the phone is on screen (assets/rt16-seerr.js adds .go), Spring's mark turns from
   Seerr's indigo clock (requested, on its way) to the green tick (available). Elephants Dream keeps its clock, so the
   caption's three marks are always on screen; under prefers-reduced-motion Spring shows its tick and nothing moves.
   ───────────────────────────────────────────────────────────────────────── */

/* ── the section: words on the left, the phone on a quiet plate on the right from 900 px. Below that the phone
   comes first and the words with their links after it, so the links end the section. ──────────────────────────── */
.sr{display:grid;gap:clamp(30px,4vw,64px);align-items:start;margin-top:clamp(28px,4vw,56px)}
@media (min-width:900px){
  .sr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sr .rt-copy{padding-top:clamp(8px,3vw,44px)}
  .sr-fig{padding:clamp(28px,3.4vw,52px) clamp(16px,2.4vw,36px) clamp(22px,2.6vw,36px);border:1px solid var(--rule);
    border-radius:var(--tray);
    background:radial-gradient(70% 52% at 50% 40%,rgba(255,255,255,.05),transparent 72%),
      linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 65%)}
}
@media (max-width:899px){.sr-fig{order:-1}}
/* the phone grows a little on a large screen that is tall enough to show it whole (zoom lays its text out again at
   the new size, as row 06's phone does) */
@media (min-width:1300px) and (min-height:960px){.sr-ph{zoom:1.08}}
@media (min-width:1700px) and (min-height:1060px){.sr-ph{zoom:1.2}}
.sr .rt-copy h3{margin-top:0}
.sr-flow{list-style:none;margin:clamp(20px,2.4vw,30px) 0 clamp(18px,2.2vw,26px);padding:0;max-width:62ch;
  display:grid;gap:0}
.sr-flow li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px}
/* the icons of a step stand in a column that runs the step's whole height; under the last one a rail goes on to the
   next step, so a step with three apps (Radarr, Sonarr, Prowlarr) shows three tiles and the words stay in line */
.sr-ics{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:6px}
.sr-ics img{display:block;flex:none;width:44px;height:44px;border-radius:11px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 10px 22px -12px rgba(0,0,0,.9)}
.sr-flow li:not(:last-child) .sr-ics::after{content:"";flex:1;width:1px;min-height:14px;margin:2px 0 6px;background:var(--rule-hi)}
.sr-flow li > span:last-child{display:flex;flex-direction:column;gap:3px;padding:2px 0 24px;min-width:0}
.sr-flow li:last-child > span:last-child{padding-bottom:0}
.sr-flow b{font-family:var(--cond);font-weight:700;font-size:17px;line-height:1.25;color:var(--ink)}
.sr-flow small{font-size:clamp(14.5px,1vw,15.5px);line-height:1.58;color:var(--dim);text-wrap:pretty}
.sr-flow small 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}
.sr-go{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:baseline}
@media (hover:none){.sr-go .rt-go{padding-top:14px}}   /* a finger's target, not only the underline's */
.sr-go .rt-go{margin-top:0}
.sr-go .rt-go.main{font-size:13px;color:var(--led);border-color:rgba(255,176,32,.5)}
.sr-go .rt-go small{font:inherit;color:var(--dim)}

.sr-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.sr-fig figcaption{max-width:40ch;font-size:13.5px;line-height:1.55;color:var(--dim);text-align:center;text-wrap:pretty}
.sr-fig figcaption b{color:var(--ink);font-weight:600}

/* ── the body: glass tray over an opaque back (as row 06's phone) ─────────────────────────────────────────── */
.sr-ph{
  position:relative;flex:none;width:320px;height:680px;padding:6px;border-radius:32px;border:1px solid var(--rule-hi);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 42%,rgba(255,255,255,0)),#0c1115;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 30px 70px rgba(0,0,0,.55),0 70px 120px -40px rgba(0,0,0,.7);
  user-select:none;-webkit-user-select:none;
}
.sr-ph *{box-sizing:border-box}
.sr-scr{position:relative;height:100%;border-radius:26px;overflow:hidden;isolation:isolate;
  background:var(--rack);border:1px solid var(--rule);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}

/* the status bar: the time, the camera hole, signal, Wi-Fi, battery */
.sr-sb{position:relative;display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 16px 0 20px;
  font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--ink);background:var(--panel-2);font-variant-numeric:tabular-nums}
.sr-sb::after{content:"";position:absolute;left:50%;top:8px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:#05080a;box-shadow:inset 0 0 0 1.5px #1a212b}
.sr-sb > span{display:flex;align-items:center;gap:5px}
.sr-sig{display:flex;align-items:flex-end;gap:1.5px;height:9px}
.sr-sig i{display:block;width:2.5px;border-radius:1px;background:#e5e7eb}
.sr-sig i:nth-child(1){height:3px}.sr-sig i:nth-child(2){height:5px}.sr-sig i:nth-child(3){height:7px}
.sr-sig i:nth-child(4){height:9px;opacity:.35}
.sr-sb svg{display:block;width:13px;height:10px;fill:#e5e7eb}
.sr-bat{position:relative;width:21px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(229,231,235,.55);padding:2px}
.sr-bat::before{content:"";display:block;height:100%;width:64%;border-radius:1.5px;background:#e5e7eb}
.sr-bat::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:4px;border-radius:0 1px 1px 0;background:rgba(229,231,235,.55)}

/* Seerr's header: the round search field and the account's avatar */
.sr-top{display:flex;align-items:center;gap:9px;padding:6px 12px 10px;background:var(--panel-2);
  box-shadow:0 1px 0 var(--rule)}
.sr-q{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:36px;padding:0 13px;border-radius:999px;
  background:var(--rack);box-shadow:inset 0 0 0 1px var(--rule-hi);font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden}
.sr-q svg{flex:none;width:15px;height:15px;fill:none;stroke:#d1d5db;stroke-width:2;stroke-linecap:round}
.sr-av{flex:none;width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 50% 39%,#2a2112 0 5.5px,transparent 6px),
    radial-gradient(ellipse 11px 9px at 50% 100%,#2a2112 0 99%,transparent 100%),
    linear-gradient(160deg,#ffcf5a,#f0a21a);
  box-shadow:0 0 0 1.5px var(--panel-2),0 0 0 2.5px rgba(255,255,255,.12)}

/* the rows */
.sr-rows{padding:6px 0 0}
.sr-row + .sr-row{margin-top:15px}
.sr-h{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 13px}
.sr-h b{font-size:16px;font-weight:700;letter-spacing:-.01em;color:#e5e7eb}
.sr-h svg{flex:none;width:16px;height:16px;fill:none;stroke:#d1d5db;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sr-h .sr-pg{margin-left:auto;display:flex;gap:10px}
.sr-h .sr-pg svg{width:14px;height:14px;stroke-width:2}
.sr-h .sr-pg svg:first-child{stroke:#4b5563}
.sr-cards{display:flex;gap:10px;padding:6px 0 0 12px}

/* a poster card: rounded, a hairline ring, the kind's pill on the left, the status mark on the right */
.sr-c{position:relative;flex:none;width:104px;height:156px;border-radius:10px;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 20px -12px rgba(0,0,0,.9)}
.sr-c::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 22%,transparent 54%,rgba(0,0,0,.6) 100%)}
.sr-k{position:absolute;left:6px;top:6px;z-index:3;padding:1px 7px 0;border-radius:999px;font-style:normal;
  font-size:9px;font-weight:600;line-height:14px;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:#2563eb;box-shadow:inset 0 0 0 1px #60a5fa}   /* solid: white on it is 5.2:1 over a light sky too */
.sr-k.tv{background:#7e22ce;box-shadow:inset 0 0 0 1px #a855f7}
.sr-st{position:absolute;right:6px;top:6px;z-index:3;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 1px #4ade80,0 2px 6px rgba(0,0,0,.45)}
.sr-st svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sr-st.proc{background:#6366f1;box-shadow:0 0 0 1px #818cf8,0 2px 6px rgba(0,0,0,.45)}
.sr-st.proc svg{stroke-width:2}
.sr-t{position:absolute;left:8px;right:8px;bottom:9px;z-index:2;margin:0;
  font-family:'Barlow Semi Condensed',var(--cond),sans-serif;font-weight:800;font-size:15px;line-height:1;
  letter-spacing:.005em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);text-wrap:balance}
.sr-c::before{content:"";position:absolute;pointer-events:none}

/* ── the posters, drawn: one gradient sky and a shape or two each ─────────────────────────────────────────── */
/* Big Buck Bunny: a spring meadow, the sun, two long ears over the hill */
.sr-bbb{background:
  radial-gradient(circle at 78% 18%,#fff4bf 0 8px,rgba(255,236,150,.45) 9px,transparent 15px),
  radial-gradient(130% 62% at 18% 104%,#3e8d2b 0 55%,transparent 55.5%),
  radial-gradient(120% 58% at 92% 106%,#62b33c 0 58%,transparent 58.5%),
  linear-gradient(180deg,#6cbcef 0%,#b9e3fa 58%,#e9f7ff 100%)}
.sr-bbb::before{left:33px;bottom:70px;width:13px;height:42px;border-radius:50%;transform:rotate(-9deg);
  background:radial-gradient(ellipse 4px 14px at 50% 46%,#f2b0bf 0 99%,transparent 100%),#f5f4ee;
  box-shadow:17px 3px 0 0 #f5f4ee}
.sr-bbb .sr-t{color:#fffef6;text-shadow:0 1px 0 #2b5a1c,0 2px 6px rgba(0,0,0,.35)}

/* Pioneer One: a capsule under its parachute, a dusk over the desert */
.sr-p1{background:
  radial-gradient(1px 1px at 18% 12%,#fff 99%,transparent),radial-gradient(1px 1px at 64% 8%,#fff 99%,transparent),
  radial-gradient(1.2px 1.2px at 84% 22%,#fff 99%,transparent),radial-gradient(1px 1px at 38% 26%,rgba(255,255,255,.7) 99%,transparent),
  radial-gradient(70% 22% at 50% 64%,rgba(255,164,92,.7),transparent 72%),
  linear-gradient(180deg,#0b1626 0%,#1f3049 42%,#b0593a 63.5%,#3b2016 64%,#1c100b 100%)}
.sr-p1::before{left:31px;top:24px;width:42px;height:19px;border-radius:21px 21px 3px 3px / 19px 19px 3px 3px;
  background:repeating-linear-gradient(90deg,#f1ece2 0 7px,#c95b3b 7px 14px);box-shadow:0 2px 6px rgba(0,0,0,.35)}
/* the shroud lines from the canopy's rim down to the capsule, then the capsule with its glow from the dusk */
.sr-p1 .sr-x{position:absolute;left:33px;top:43px;width:38px;height:22px;
  background:linear-gradient(to bottom right,transparent calc(50% - .6px),rgba(241,236,226,.75) 50%,transparent calc(50% + .6px)) 0 0/50% 100% no-repeat,
    linear-gradient(to bottom left,transparent calc(50% - .6px),rgba(241,236,226,.75) 50%,transparent calc(50% + .6px)) 100% 0/50% 100% no-repeat}
.sr-p1 .sr-x::after{content:"";position:absolute;left:14px;bottom:-11px;width:10px;height:12px;border-radius:5px 5px 3px 3px;
  background:linear-gradient(90deg,#8d8a83,#e9e5dc 45%,#a9a499);box-shadow:0 0 9px rgba(255,190,130,.45)}
.sr-p1 .sr-t{font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.12em;line-height:1.2;text-transform:uppercase}

/* Cosmos Laundromat: a sheep on a floating island, a violet sky */
.sr-cl{background:
  radial-gradient(circle at 74% 20%,#ffd9ef 0 5px,rgba(255,200,230,.35) 6px,transparent 11px),
  radial-gradient(1px 1px at 22% 16%,#fff 99%,transparent),radial-gradient(1px 1px at 46% 30%,rgba(255,255,255,.8) 99%,transparent),
  linear-gradient(172deg,#1b0f33 0%,#4b2066 46%,#c25088 100%)}
.sr-cl::before{left:4px;bottom:56px;width:62px;height:18px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%,#3a2140,#140a18 70%);box-shadow:0 8px 14px -6px rgba(0,0,0,.6)}
/* the sheep: a fleece of three round tufts, a dark face to the left, two thin legs */
.sr-cl .sr-x{position:absolute;left:20px;bottom:68px;width:30px;height:19px;
  background:radial-gradient(circle at 30% 58%,#fff 0 7px,transparent 7.5px),radial-gradient(circle at 55% 38%,#fff 0 8px,transparent 8.5px),
    radial-gradient(circle at 78% 60%,#f1ecf4 0 7px,transparent 7.5px),
    linear-gradient(#2a1b26,#2a1b26) 34% 100%/2px 6px no-repeat,linear-gradient(#2a1b26,#2a1b26) 70% 100%/2px 6px no-repeat}
.sr-cl .sr-x::after{content:"";position:absolute;left:-6px;top:4px;width:9px;height:11px;border-radius:50% 50% 45% 45%;background:#2a1b26;
  box-shadow:inset 2px 2px 0 -1px #4a3242}
.sr-cl .sr-t{font-size:13.5px;line-height:1.02;text-transform:uppercase;letter-spacing:.03em}

/* Spring: a snowy peak, pink blossoms in the air */
.sr-sp{background:
  radial-gradient(circle at 22% 24%,rgba(255,196,214,.95) 0 3px,transparent 3.6px),
  radial-gradient(circle at 70% 14%,rgba(255,206,222,.9) 0 2.2px,transparent 2.8px),
  radial-gradient(circle at 84% 34%,rgba(255,214,228,.9) 0 2.6px,transparent 3.2px),
  radial-gradient(circle at 40% 10%,rgba(255,226,236,.8) 0 1.8px,transparent 2.4px),
  linear-gradient(180deg,#f6cfd8 0%,#d8c9d2 30%,#8fc0b7 58%,#2c5853 100%)}
.sr-sp::before{left:-6px;right:-6px;bottom:30px;height:78px;clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#ffffff 0%,#e8f3f1 26%,#7fb0a8 60%,#355f59 100%)}
.sr-sp .sr-t{font-family:var(--cond);font-weight:600;font-style:italic;font-size:19px;letter-spacing:.01em}

/* Sintel: a cold range of mountains, a small red figure */
.sr-si{background:
  radial-gradient(60% 30% at 50% 0%,rgba(255,255,255,.55),transparent 70%),
  linear-gradient(180deg,#dbe8f0 0%,#a3bccb 36%,#566f82 68%,#1d2b36 100%)}
.sr-si::before{left:0;right:0;bottom:24px;height:84px;
  clip-path:polygon(0 100%,0 54%,16% 30%,28% 46%,46% 12%,60% 40%,74% 22%,100% 50%,100% 100%);
  background:linear-gradient(180deg,#f6fafc 0%,#b9cbd6 30%,#5d7486 70%,#2b3b47 100%)}
.sr-si .sr-x{position:absolute;left:58px;bottom:34px;width:3px;height:9px;border-radius:2px 2px 0 0;background:#c62f2f;
  box-shadow:0 0 6px rgba(198,47,47,.6)}
.sr-si .sr-t{font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.2em;text-align:center;text-transform:uppercase}

/* Tears of Steel: a glowing eye over a dark city */
.sr-ts{background:
  radial-gradient(circle at 50% 36%,#ffd08a 0 5px,#ff8a3d 6px 11px,rgba(255,110,40,.0) 12px),
  radial-gradient(circle at 50% 36%,transparent 0 15px,rgba(255,150,80,.55) 16px 17px,transparent 18px),
  radial-gradient(55% 32% at 50% 36%,rgba(255,120,50,.35),transparent 75%),
  linear-gradient(180deg,#081319 0%,#10303c 52%,#061016 100%)}
.sr-ts::before{left:0;right:0;bottom:30px;height:34px;
  background:linear-gradient(90deg,#0c1d25 0 9%,transparent 9% 12%,#0e222b 12% 26%,transparent 26% 29%,#0b1b22 29% 41%,
    transparent 41% 44%,#0f2530 44% 63%,transparent 63% 66%,#0b1a21 66% 80%,transparent 80% 83%,#0e2029 83% 100%);
  -webkit-mask:linear-gradient(180deg,transparent 0 10%,#000 10%);mask:linear-gradient(180deg,transparent 0 10%,#000 10%);
  box-shadow:0 -1px 0 rgba(120,200,220,.25)}
.sr-ts .sr-t{font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.08em;line-height:1.2;color:#f1f6f8;text-transform:uppercase}

/* Elephants Dream: the machine's gear, dark and brass */
.sr-ed{background:
  radial-gradient(circle at 50% 40%,#140a04 0 12px,#3a1f0c 12.5px 15px,transparent 15.5px),
  radial-gradient(70% 45% at 50% 40%,rgba(214,128,48,.28),transparent 70%),
  linear-gradient(180deg,#2a170a 0%,#160c05 100%)}
.sr-ed::before{left:16px;top:26px;width:72px;height:72px;border-radius:50%;
  background:repeating-conic-gradient(from 4deg,#c27a32 0 9deg,#7d4318 9deg 18deg);
  -webkit-mask:radial-gradient(circle,transparent 0 21px,#000 21.5px 36px);mask:radial-gradient(circle,transparent 0 21px,#000 21.5px 36px)}
.sr-ed .sr-t{font-size:14px;line-height:1.02;color:#f4d7aa;text-transform:uppercase;letter-spacing:.02em}

/* the tab bar: Discover (on), Movies, Series, Requests, More */
.sr-tab{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;justify-content:space-around;align-items:center;
  height:66px;padding:0 6px 14px;background:linear-gradient(180deg,rgba(26,35,41,.94),var(--panel-2) 40%);
  box-shadow:0 -1px 0 var(--rule)}
.sr-tab svg{width:22px;height:22px;fill:none;stroke:#d1d5db;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sr-tab svg.on{fill:#818cf8;stroke:#818cf8;stroke-width:1}
.sr-home{position:absolute;left:50%;bottom:6px;z-index:5;width:100px;height:4px;margin-left:-50px;border-radius:2px;
  background:rgba(229,231,235,.5)}

/* ── the one movement, once: Spring's request arrives (Seerr's indigo clock becomes the green tick) ─────────── */
.sr-c .sr-st.later{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .sr-ph.go .sr-sp .sr-st.proc{animation:sr-proc .6s var(--ease-seat) 1.6s forwards}
  .sr-ph.go .sr-sp .sr-st.later{animation:sr-done .9s var(--ease-seat) 1.9s forwards}
}
@keyframes sr-proc{to{opacity:0;transform:scale(.6)}}
@keyframes sr-done{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sr-sp .sr-st.proc{opacity:0}
  .sr-sp .sr-st.later{opacity:1}
}

/* the page settles on this section too when a scroll ends near it (as rt16.css does for the others) */
@media (prefers-reduced-motion:no-preference) and (min-width:900px){#arr{scroll-snap-align:start}}