/* The app preview (index.html, section "preview"; preview.js, called from site.js section 8a).
 *
 * The desktop client's window rebuilt in markup at its own measurements: 1 dp of the Compose Desktop
 * code is 1 CSS px here. The tokens inside .rk-pv__win are the app's (Theme.kt), not the page's, so
 * the window reads as the app even where the page's own palette differs.
 *
 * Deliberate departures from the app, all for the page's rules: surfaces that carry a gradient in
 * the app (the Power pill, the PC avatar, the ring and bar fills, the sparkline area, the auroras and the
 * washes of light on cards, the terminal and the danger rows) are solid here; the phone heroes'
 * artwork is not a picture but light in the background and SVG traces drawn after it;
 * nothing animates but transform and opacity, so the sidebar's colour transitions are instant and
 * the rings step to a new value rather than sweeping. Widths: the full sidebar from 1100px, the 72px
 * rail between 900 and 1100 (the app's own rail threshold), and a tab strip above the pane between
 * 761 and 899px. At 760px and below the window's chrome goes and the same screens are the Android
 * app at the phone's own width (the last block of widths): the computer list, the dashboard with its
 * tiles, the tools.
 */

.rk-pv { position: relative; padding-top: var(--rk-section); }
.rk-pv__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rk-pv__heroart { display: none; }
.rk-pv__lead { max-width: 640px; margin-top: 14px; }
/* "Демо приложения": said before the heading, on every width, so nobody reads the computers below as
   their own. A tag, not a button: the accent's tint on the ground and a dot of the accent. */
.rk-pv__demotag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 5px 12px 5px 10px;
  border-radius: var(--rk-r-pill); background: color-mix(in srgb, var(--rk-accent) 13%, var(--rk-bg));
  color: var(--rk-accent-text); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}
.rk-pv__demotag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rk-accent-ink); }

/* ------------------------------------------------------------------ the window and its tokens */
.rk-pv__win {
  --pv-bg: #0B0F17; --pv-surface: #121826; --pv-low: #0F1420; --pv-high: #1A2233; --pv-highest: #222C40;
  --pv-text: #E5E7EB; --pv-muted: #94A3B8; --pv-outline: #2A3446; --pv-ov: #1E2636;
  --pv-primary: #2DD4BF; --pv-primary-text: #2DD4BF; --pv-primary-fill: #2DD4BF; --pv-on-primary: #00201C;
  --pv-glass: rgba(18, 24, 38, .58); --pv-hover: rgba(229, 231, 235, .08);
  --pv-hair-top: rgba(255, 255, 255, .14); --pv-hair-bot: rgba(255, 255, 255, .04); --pv-inner: rgba(255, 255, 255, .05);
  --pv-g: #22C55E; --pv-y: #FACC15; --pv-o: #F97316; --pv-r: #EF4444;
  --pv-green: #22C55E; --pv-blue: #60A5FA; --pv-indigo: #818CF8; --pv-purple: #A78BFA;
  --pv-orange: #F97316; --pv-red: #EF4444; --pv-grey: #64748B; --pv-yellow: #FACC15;
  --pv-tint: 14%; --pv-track: .14; --pv-ink: 100%;
  --pv-tc: #1E3A5F; --pv-on-tc: #DBEAFE; --pv-glow: rgba(45, 212, 191, .14);
  position: relative; isolation: isolate;
  max-width: 1180px; margin: var(--rk-head-gap) auto 0;
  border: 1px solid var(--pv-outline); border-radius: 8px; overflow: hidden;
  background: var(--pv-bg); color: var(--pv-text);
  font-family: var(--rk-sans); font-size: 14px; line-height: 20px; letter-spacing: .1px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .9), 0 0 90px -40px rgba(45, 212, 191, .22);
}
:root[data-theme="light"] .rk-pv__win {
  --pv-bg: #F4F6FA; --pv-surface: #FFFFFF; --pv-low: #F8FAFC; --pv-high: #EEF2F7; --pv-highest: #E2E8F0;
  --pv-text: #0F172A; --pv-muted: #5B6675; --pv-outline: #CBD5E1; --pv-ov: #E2E8F0;
  --pv-primary: #0F9488; --pv-primary-text: #0B7566; --pv-primary-fill: #0B7566; --pv-on-primary: #FFFFFF;
  --pv-glass: rgba(255, 255, 255, .72); --pv-hover: rgba(15, 23, 42, .07);
  --pv-hair-top: rgba(15, 23, 42, .10); --pv-hair-bot: rgba(15, 23, 42, .06); --pv-inner: rgba(255, 255, 255, .6);
  --pv-g: #15803D; --pv-y: #D97706; --pv-o: #EA580C; --pv-r: #B91C1C;
  --pv-green: #15803D; --pv-blue: #2563EB; --pv-indigo: #4F46E5; --pv-purple: #7C3AED;
  --pv-orange: #C2410C; --pv-red: #DC2626; --pv-grey: #64748B; --pv-yellow: #D97706;
  --pv-tint: 12%; --pv-track: .16; --pv-ink: 76%;
  --pv-tc: #DBEAFE; --pv-on-tc: #1E3A8A; --pv-glow: rgba(15, 148, 136, .08);
  box-shadow: 0 50px 110px -60px rgba(15, 23, 42, .4);
}

/* Colour roles. --c is the one colour a piece draws with; the ramp classes are the nearest stop of
   the app's green-yellow-orange-red ramp until site.js writes the interpolated mix. */
.rk-pv__win .is-g { --c: var(--pv-g); }
.rk-pv__win .is-y { --c: var(--pv-y); }
.rk-pv__win .is-o { --c: var(--pv-o); }
.rk-pv__win .is-r { --c: var(--pv-r); }
.rk-pv__win .is-teal { --c: var(--pv-primary); }
.rk-pv__win .is-indigo { --c: var(--pv-indigo); }
.rk-pv__win .is-blue { --c: var(--pv-blue); }
.rk-pv__win .is-orange { --c: var(--pv-orange); }
.rk-pv__win .is-purple { --c: var(--pv-purple); }
.rk-pv__win .is-green { --c: var(--pv-green); }
.rk-pv__win .is-grey { --c: var(--pv-grey); }
.rk-pv__win .is-red { --c: var(--pv-red); }
.rk-pv__win .rk-i[class*="is-"] { color: var(--c); }
.rk-pv__mono { font-family: var(--rk-mono); }
.rk-pv__muted { font-size: 12px; line-height: 16px; letter-spacing: .2px; color: var(--pv-muted); }

/* ------------------------------------------------------------------ title bar */
.rk-pv__title {
  display: flex; align-items: center; height: 38px; padding-left: 12px;
  background: var(--pv-glass); border-bottom: 1px solid var(--pv-ov);
}
.rk-pv__logo { width: 18px; height: 18px; border-radius: 4px; }
.rk-pv__app { margin-left: 8px; font-weight: 600; }
.rk-pv__demo {
  margin-left: auto; margin-right: 10px; padding: 1px 9px; border-radius: 999px;
  border: 1px solid var(--pv-outline); font-family: var(--rk-mono); font-size: 11px; line-height: 16px;
  color: var(--pv-muted); white-space: nowrap;
}
.rk-pv__caps { display: flex; align-self: flex-start; }
.rk-pv__capb { width: 46px; height: 32px; display: grid; place-items: center; color: var(--pv-text); }
.rk-pv__capb svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1; shape-rendering: crispEdges; }
.rk-pv__capb.is-close svg { shape-rendering: geometricPrecision; }

/* ------------------------------------------------------------------ sidebar */
.rk-pv__body { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: 680px; }
.rk-pv__nav {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 10px;
  background: var(--pv-glass); border-right: 1px solid var(--pv-ov);
}
.rk-pv__navhead, .rk-pv__navcap, .rk-pv__sl {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--pv-muted);
}
.rk-pv__navhead { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 4px 0 10px; }
.rk-pv__small { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.rk-pv__small .rk-i { width: 14px; height: 14px; }
.rk-pv__pc { display: flex; align-items: center; gap: 6px; height: 40px; margin-top: 4px; padding: 0 8px; border-radius: 14px; }
.rk-pv__pc > b { flex: 1; min-width: 0; margin-left: -4px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__pc .rk-pv__ava--rail { display: none; }
.rk-pv__navcap { padding: 10px 0 4px 10px; }
.rk-pv__tabs { display: flex; flex-direction: column; gap: 2px; }
.rk-pv__tab {
  display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 10px; flex: none;
  border-radius: 14px; border: 1px solid transparent;
  font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .1px; color: var(--pv-text);
  text-align: left; white-space: nowrap;
}
.rk-pv__tab .rk-i { width: 20px; height: 20px; color: var(--pv-muted); }
.rk-pv__tab:hover { background: var(--pv-hover); }
.rk-pv__tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--pv-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--pv-primary) 25%, transparent);
  color: var(--pv-primary-text);
}
.rk-pv__tab[aria-selected="true"] .rk-i { color: var(--pv-primary); }
.rk-pv__tab:focus-visible { outline-offset: -1px; border-radius: 14px; }
.rk-pv__tab .rk-pv__lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__tab .rk-pv__pin { width: 12px; height: 12px; opacity: .55; }
.rk-pv__tab[aria-selected="true"] .rk-pv__pin { color: var(--pv-muted); }
.rk-pv__hr { display: block; flex: none; height: 1px; margin: 6px 8px; background: var(--pv-ov); }
.rk-pv__navfoot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.rk-pv__navfoot .rk-pv__hr { margin: 8px 4px; }
.rk-pv__tab.is-inert { cursor: default; }
.rk-pv__tab.is-inert:hover { background: none; }

/* status dot, the pulsing halo */
.rk-pv__dot { position: relative; flex: none; width: 7px; height: 7px; margin: 0 4.9px; border-radius: 50%; background: var(--pv-green); }
.rk-pv__dot--6 { width: 6px; height: 6px; margin: 0 4.2px; }
.rk-pv__dot--10 { width: 10px; height: 10px; margin: 0 7px; }
.rk-pv__dot--8 { width: 8px; height: 8px; margin: 0 5.6px; }
.rk-pv__dot.is-sleep { background: var(--pv-blue); }
.rk-pv__dot.is-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0;
  animation: rk-pv-pulse 1.8s linear infinite;
}
@keyframes rk-pv-pulse { from { transform: scale(1); opacity: .35; } to { transform: scale(2.4); opacity: 0; } }
.rk-pv.is-away .rk-pv__dot.is-pulse::after, .rk-pv.is-away .rk-pv__caret, .rk-pv.is-away .rk-pv__spin { animation-play-state: paused; }

/* rings: MetricRing and the sidebar's MiniRing */
.rk-pv__ring, .rk-pv__mini { position: relative; display: inline-grid; place-items: center; flex: none; --c: var(--pv-g); }
.rk-pv__ring svg, .rk-pv__mini svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.rk-pv__rt, .rk-pv__rf { fill: none; stroke: var(--c); stroke-linecap: round; }
.rk-pv__rt { stroke-opacity: var(--pv-track); }
.rk-pv__rf { stroke-dasharray: var(--v) 100; }
.rk-pv__mini { width: 28px; height: 28px; }
.rk-pv__mini circle { stroke-width: 3.5; }
.rk-pv__mini b { font-size: 8.5px; line-height: 9px; font-weight: 700; letter-spacing: 0; color: color-mix(in srgb, var(--c) var(--pv-ink), #000); }
.rk-pv__ring--76 { width: 76px; height: 76px; }
.rk-pv__ring--76 circle { stroke-width: 7; }
.rk-pv__ring--76 b { font-size: 16px; line-height: 22px; font-weight: 700; }
.rk-pv__ring--44 { width: 44px; height: 44px; }
.rk-pv__ring--44 circle { stroke-width: 5; }
.rk-pv__ring--44 b { font-size: 14px; line-height: 20px; font-weight: 700; color: color-mix(in srgb, var(--c) var(--pv-ink), #000); }
.rk-pv__ring--56 { width: 56px; height: 56px; }
.rk-pv__ring--56 circle { stroke-width: 6; }
.rk-pv__ring--56 b { font-size: 16px; line-height: 22px; font-weight: 600; color: color-mix(in srgb, var(--c) var(--pv-ink), #000); }

/* ------------------------------------------------------------------ pane and panels */
.rk-pv__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; overflow: clip; }
/* No overscroll-behavior: contain here. The overview fits its pane, and a contained scroller that
   has nothing to scroll still swallowed the wheel: a visitor scrolling the page with the pointer
   over the window stopped dead. A panel that does scroll hands the wheel back at its end. */
.rk-pv__panel {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
  padding: 0 16px 20px; opacity: 0;
  scrollbar-width: thin; scrollbar-color: var(--pv-outline) transparent;
}
.rk-pv__panel.is-on { opacity: 1; }
.rk-pv__panel.is-in { transition: opacity .28s var(--rk-ease-out) .05s; }
.rk-pv__panel.is-out { opacity: 0; transition: opacity .18s ease; }
.rk-pv__panel:focus-visible { outline-offset: -3px; border-radius: 0; }
/* The overview is not a scroller at all. It has nothing below, so it fits its pane at every window
   width - where the pane is too narrow for the network card's two readings on one line they stack,
   and the card pays for the extra row with the 36px sparkline and tighter gaps, so the disks card
   keeps its place - and a box that cannot scroll takes neither the wheel nor a swipe from the page.
   The tools scroll only when their content is taller than the pane. */
@media (min-width: 900px) {
  .rk-pv__pane { container-type: inline-size; }
  .rk-pv__panel--ov { overflow: clip; padding-bottom: 0; }
  @container (max-width: 779.98px) {
    .rk-pv__panel--ov .rk-pv__card--net .rk-pv__wrap { gap: 4px; }
    .rk-pv__panel--ov .rk-pv__card--net .rk-pv__stat { padding-top: 4px; padding-bottom: 4px; }
    .rk-pv__panel--ov .rk-pv__card--net .rk-pv__wrap + .rk-pv__sp { height: 36px; margin-top: 8px; --pv-sy: calc(36px / 56); }
    .rk-pv__panel--ov .rk-pv__disk + .rk-pv__disk { margin-top: 10px; }
  }
}

/* RemotekTopBar */
.rk-pv__tb { display: flex; align-items: center; height: 64px; margin: 0 -8px 0 -12px; }
.rk-pv__act { width: 48px; height: 48px; display: grid; place-items: center; flex: none; color: var(--pv-text); }
.rk-pv__act .rk-i { width: 22px; height: 22px; }
.rk-pv__act.is-red { color: var(--pv-red); }
button.rk-pv__act { border-radius: 50%; }
button.rk-pv__act:hover { background: var(--pv-hover); }
button.rk-pv__act:focus-visible { outline-offset: -4px; }
.rk-pv__tt { display: grid; min-width: 0; }
.rk-pv__tt > b { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: 0; }
.rk-pv__sub {
  display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .4px;
  color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-pv__sub .rk-pv__dot { display: inline-block; margin: 0 6px 0 1px; vertical-align: 1px; }
.rk-pv__shield { width: 12px; height: 12px; margin-left: 4px; color: var(--pv-orange); vertical-align: -2px; }
.rk-pv__acts { margin-left: auto; display: flex; }

/* cards */
.rk-pv__card {
  position: relative; overflow: hidden; padding: 16px; border-radius: 22px;
  background: var(--pv-surface); box-shadow: inset 0 1px 0 var(--pv-inner);
}
.rk-pv__card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, var(--pv-hair-top), var(--pv-hair-bot));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.rk-pv__card--teal { --pv-accent: var(--pv-primary); }
.rk-pv__card--purple { --pv-accent: var(--pv-purple); }
.rk-pv__card--green { --pv-accent: var(--pv-green); }
.rk-pv__card > * { position: relative; }
.rk-pv__card > .rk-pv__sl { margin-bottom: 12px; }
.rk-pv__sl { display: flex; align-items: center; }
.rk-pv__trail {
  margin-left: auto; padding-left: 8px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: none;
}

/* StatPill */
.rk-pv__stat {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--c) var(--pv-tint), transparent);
  color: color-mix(in srgb, var(--c) var(--pv-ink), #000);
}
.rk-pv__stat b { font-size: 14px; line-height: 20px; font-weight: 700; }
.rk-pv__stat i { font-style: normal; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .5px; opacity: .85; }

/* ------------------------------------------------------------------ overview */
.rk-pv__strip { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; padding: 14px 0 10px; }
.rk-pv__ava {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 14px;
  background: color-mix(in srgb, var(--pv-primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--pv-primary) 25%, transparent); color: var(--pv-primary);
}
.rk-pv__ava .rk-i { width: 20px; height: 20px; }
.rk-pv__pcname { margin-left: 14px; font-size: 20px; line-height: 28px; font-weight: 700; }
.rk-pv__state {
  order: 1; display: inline-flex; align-items: center; margin-left: 16px; padding: 3px 6px 3px 4px; white-space: nowrap;
  border-radius: 999px; background: color-mix(in srgb, var(--pv-surface) 70%, transparent); border: 1px solid var(--pv-ov);
}
.rk-pv__state .rk-pv__dot { width: 8px; height: 8px; margin: 0 5.6px; }
.rk-pv__ok { margin-left: 2px; font-weight: 600; color: var(--pv-green); }
.rk-pv__ms { margin-left: 4px; font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--pv-muted); }
.rk-pv__tp {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 14px; font-weight: 600;
  color: var(--pv-primary-text); background: color-mix(in srgb, var(--pv-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pv-primary) 25%, transparent);
}
.rk-pv__power {
  order: 2; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px;
  border-radius: 999px; background: var(--pv-primary-fill); color: var(--pv-on-primary);
  font-size: 14px; line-height: 20px; font-weight: 600;
}
.rk-pv__power .rk-i { width: 18px; height: 18px; }

.rk-pv__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.rk-pv__col { display: grid; gap: 12px; min-width: 0; }

.rk-pv__cpu, .rk-pv__gpu { display: flex; align-items: center; gap: 16px; }
.rk-pv__ringcol { display: grid; justify-items: center; gap: 4px; }
.rk-pv__cap { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .5px; color: var(--pv-muted); }
.rk-pv__pills { margin-left: auto; display: grid; justify-items: end; gap: 6px; }
.rk-pv__legend { display: flex; justify-content: flex-end; gap: 12px; margin-top: 14px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--pv-muted); }
.rk-pv__legend > span::before { content: ""; display: inline-block; width: 10px; height: 3px; margin-right: 5px; border-radius: 2px; vertical-align: middle; background: var(--c); }

/* Sparkline: the latest sample sits at the right edge; its dot is a box moved by transform. */
.rk-pv__sp { position: relative; height: 56px; margin-top: 6px; padding-right: 4px; }
.rk-pv__sp--36 { height: 36px; margin-top: 0; }
.rk-pv__sp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rk-pv__line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rk-pv__area { fill: var(--c); fill-opacity: .12; stroke: none; }
.rk-pv__end {
  position: absolute; left: calc(100% - 4px); top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2.4px color-mix(in srgb, var(--c) 25%, transparent);
  transform: translateY(calc(var(--y) * var(--pv-sy, 1px)));
}

.rk-pv__cores { display: flex; gap: 3px; height: 14px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--pv-ov); box-sizing: content-box; }
.rk-pv__cores span { position: relative; flex: 1; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--pv-muted) 12%, transparent); }
.rk-pv__cores i {
  position: absolute; inset: 0; border-radius: 999px; background: var(--c);
  transform-origin: 50% 100%; transform: scaleY(calc(var(--v) / 100)); transition: transform .5s var(--rk-ease-out);
}
.rk-pv__sp + .rk-pv__cores { margin-top: 8px; }

.rk-pv__mem { display: flex; align-items: flex-end; }
.rk-pv__mem .rk-pv__pills { padding-bottom: 4px; }
.rk-pv__big { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -.5px; }
.rk-pv__big small { margin-left: 5px; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--pv-muted); }
.rk-pv__bar {
  position: relative; display: block; height: 8px; margin-top: 12px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--c) var(--pv-tint), transparent);
}
.rk-pv__bar i {
  position: absolute; inset: 0; border-radius: inherit; background: var(--c);
  transform-origin: 0 50%; transform: scaleX(calc(var(--v) / 100)); transition: transform .5s var(--rk-ease-out);
}
.rk-pv__bar--6 { height: 6px; margin-top: 6px; }
.rk-pv__swap { margin-top: 10px; }

.rk-pv__wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-pv__kv { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .5px; color: var(--pv-muted); }
.rk-pv__kv > :first-child { flex: 1; min-width: 0; }
.rk-pv__kv > b { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--pv-text); }
.rk-pv__two { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; }
.rk-pv__two b { display: block; font-size: 16px; line-height: 22px; font-weight: 700; }
.rk-pv__two i { font-style: normal; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--pv-muted); }
.rk-pv__wrap + .rk-pv__sp { margin-top: 14px; }

.rk-pv__disk + .rk-pv__disk { margin-top: 14px; }
.rk-pv__disk .rk-pv__kv { margin-top: 0; font-size: 12px; }
.rk-pv__disk .rk-pv__kv > b { font-size: 14px; line-height: 20px; letter-spacing: 0; }
.rk-pv__diskbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rk-pv__diskbar .rk-pv__bar { flex: 1; margin: 0; }
.rk-pv__diskbar b { width: 40px; text-align: right; font-size: 12px; line-height: 16px; font-weight: 700; color: color-mix(in srgb, var(--c) var(--pv-ink), #000); }

/* ------------------------------------------------------------------ filter rows */
.rk-pv__filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 2px 0 12px; }
.rk-pv__seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--pv-high); }
.rk-pv__segb { padding: 7px 14px; border-radius: 999px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--pv-muted); }
.rk-pv__segb[aria-pressed="true"], .rk-pv__segb.is-on { background: color-mix(in srgb, var(--pv-primary) 20%, transparent); color: var(--pv-primary-text); }
button.rk-pv__segb:hover:not([aria-pressed="true"]) { color: var(--pv-text); }
.rk-pv__vr { width: 1px; height: 22px; margin: 0 8px; background: var(--pv-ov); }
.rk-pv__toggle, .rk-pv__fpill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; line-height: 20px; font-weight: 600;
}
.rk-pv__toggle { padding: 7px 12px; border: 1px solid var(--pv-outline); color: var(--pv-text); }
.rk-pv__toggle .rk-i, .rk-pv__fpill .rk-i { width: 16px; height: 16px; }
.rk-pv__toggle .rk-pv__on, .rk-pv__toggle[aria-pressed="true"] .rk-pv__off { display: none; }
.rk-pv__toggle[aria-pressed="true"] .rk-pv__on { display: block; }
.rk-pv__toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--pv-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--pv-primary) 45%, transparent); color: var(--pv-primary-text);
}
.rk-pv__fpill { padding: 7px 14px; border: 1px solid var(--pv-ov); background: var(--pv-high); color: var(--pv-muted); }
.rk-pv__fpill[aria-pressed="true"], .rk-pv__fpill.is-on {
  background: color-mix(in srgb, var(--pv-primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--pv-primary) 35%, transparent); color: var(--pv-primary-text);
}

/* ------------------------------------------------------------------ processes */
.rk-pv__thead, .rk-pv__prow { display: grid; column-gap: 12px; align-items: center; }
.rk-pv__thead {
  grid-template-columns: minmax(0, 1fr) 62px 54px 80px; padding: 2px 14px 6px 64px;
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--pv-muted);
}
.rk-pv__num { justify-self: end; text-align: right; }
.rk-pv__thead .is-sort { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--pv-primary-text); }
.rk-pv__thead .rk-i { width: 13px; height: 13px; }
.rk-pv__procs { position: relative; border: 2px solid var(--pv-outline); border-radius: 22px; overflow: hidden; background: var(--pv-surface); }
.rk-pv__prow {
  position: relative; grid-template-columns: 40px minmax(0, 1fr) 62px 54px 80px; padding: 9px 12px;
  background: var(--pv-surface); --c: var(--pv-g);
}
.rk-pv__prow + .rk-pv__prow::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--pv-ov); }
/* FLIP (preview.js): the row is drawn --pv-dy away from its new place, then slides to it. */
.rk-pv__prow { transform: translateY(var(--pv-dy, 0px)); }
.rk-pv__prow.is-flip { z-index: 1; transition: transform .45s var(--rk-ease-out); }
.rk-pv__picon {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 16%, var(--pv-high)); color: color-mix(in srgb, var(--c) var(--pv-ink), #000);
  font-family: var(--rk-mono); font-size: 13px; font-weight: 700;
}
.rk-pv__pname { display: grid; min-width: 0; }
.rk-pv__pname b { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.rk-pv__count {
  padding: 1px 7px; border-radius: 999px; font-size: 11px; line-height: 14px; font-weight: 700;
  background: color-mix(in srgb, var(--pv-primary) 16%, transparent); color: var(--pv-primary-text);
}
.rk-pv__pname small { font-family: var(--rk-mono); font-size: 12px; line-height: 16px; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__prow .rk-pv__num { font-weight: 700; color: color-mix(in srgb, var(--c) var(--pv-ink), #000); }
.rk-pv__prow .rk-pv__num.is-idle { font-weight: 500; color: color-mix(in srgb, var(--pv-muted) 70%, transparent); }
.rk-pv__prow .rk-pv__num.is-none { font-weight: 500; color: color-mix(in srgb, var(--pv-muted) 45%, transparent); }
.rk-pv__pmem { justify-self: end; text-align: right; font-size: 12px; font-weight: 500; }
.rk-pv__thead .rk-pv__pmem { font-weight: 600; }

/* ------------------------------------------------------------------ sensors */
.rk-pv__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.rk-pv__tile { padding: 14px; }
.rk-pv__tilerow { display: flex; align-items: center; gap: 10px; }
.rk-pv__tilerow .rk-pv__sp { flex: 1; min-width: 0; }
.rk-pv__tname { margin-top: 10px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__thw { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--pv-muted); white-space: nowrap; overflow: hidden; }
.rk-pv__thw .rk-i { width: 12px; height: 12px; }
.rk-pv__tmm { margin-top: 4px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--pv-muted); }

/* ------------------------------------------------------------------ terminal (always dark) */
.rk-pv__ttabs { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.rk-pv__ttab {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 4px 0 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--pv-primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--pv-primary) 35%, transparent);
  color: var(--pv-primary-text); font-weight: 600;
}
.rk-pv__ttab .rk-pv__dot { margin: 0 4px 0 0; }
.rk-pv__tx { width: 28px; height: 28px; display: grid; place-items: center; }
.rk-pv__tx .rk-i { width: 14px; height: 14px; }
.rk-pv__tplus {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--pv-primary);
  background: color-mix(in srgb, var(--pv-primary) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pv-primary) 35%, transparent);
}
.rk-pv__tplus .rk-i { width: 18px; height: 18px; }
.rk-pv__slab {
  position: relative; height: calc(100% - 116px); min-height: 240px; margin-top: 8px; padding: 14px;
  border-radius: 16px; background: #0B0F17; border: 1px solid rgba(255, 255, 255, .08); overflow: auto;
  scrollbar-width: thin; scrollbar-color: #2A3446 transparent;
}
.rk-pv__pre { position: relative; margin: 0; font-family: var(--rk-mono); font-size: 13px; line-height: 1.45; color: #E5E7EB; white-space: pre; }
.rk-pv__tl { display: block; min-height: 1.45em; }
.rk-pv__ps { color: #2DD4BF; }
.rk-pv__th { color: #94A3B8; }
.rk-pv__caret { display: inline-block; width: 8px; height: 15px; vertical-align: -3px; background: #2DD4BF; animation: rk-pv-blink 1.1s steps(1) infinite; }
@keyframes rk-pv-blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------------ files: the desktop Explorer */
.rk-pv__panel--fi { padding: 0; }
.rk-pv__ex { display: flex; flex-direction: column; height: 100%; }
.rk-pv__extb {
  display: flex; align-items: center; gap: 2px; height: 46px; flex: none; padding: 0 10px;
  background: var(--pv-glass); border-bottom: 1px solid var(--pv-ov);
}
.rk-pv__tool { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 14px; color: var(--pv-text); }
.rk-pv__tool .rk-i { width: 16px; height: 16px; }
.rk-pv__tool.is-off { opacity: .35; }
.rk-pv__path {
  flex: 1; min-width: 0; display: flex; align-items: center; height: 30px; margin: 0 8px; padding: 0 4px; overflow: hidden; white-space: nowrap;
  border-radius: 14px; background: color-mix(in srgb, var(--pv-surface) 50%, transparent); border: 1px solid var(--pv-ov);
}
.rk-pv__crumb { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; font-weight: 600; color: var(--pv-muted); }
.rk-pv__crumb.rk-pv__mono { font-size: 13px; }
.rk-pv__crumb .rk-i { width: 14px; height: 14px; }
.rk-pv__crumb.is-cur { font-weight: 700; color: var(--pv-text); }
.rk-pv__sep { width: 14px; height: 14px; flex: none; color: var(--pv-muted); opacity: .6; }
.rk-pv__pen { margin-left: auto; padding: 0 6px; display: grid; color: var(--pv-muted); }
.rk-pv__pen .rk-i { width: 13px; height: 13px; }
.rk-pv__filter {
  display: flex; align-items: center; gap: 6px; width: 190px; height: 30px; flex: none; margin-right: 6px; padding: 0 10px;
  border-radius: 14px; background: color-mix(in srgb, var(--pv-surface) 50%, transparent); border: 1px solid var(--pv-ov); color: var(--pv-muted);
}
.rk-pv__filter .rk-i { width: 14px; height: 14px; }
.rk-pv__exbody { flex: 1; min-height: 0; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.rk-pv__exside { padding: 8px; background: var(--pv-glass); border-right: 1px solid var(--pv-ov); overflow: hidden; }
.rk-pv__exside .rk-pv__sl { padding: 6px 8px 4px; }
.rk-pv__exside .rk-pv__sl--gap { margin-top: 10px; }
.rk-pv__side { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 3px 8px; border-radius: 14px; border: 1px solid transparent; }
.rk-pv__side .rk-i { width: 16px; height: 16px; }
.rk-pv__side > span { display: grid; min-width: 0; }
.rk-pv__side b { font-weight: 600; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__side small { font-size: 11px; line-height: 14px; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__side.is-on { background: color-mix(in srgb, var(--pv-primary) 14%, transparent); border-color: color-mix(in srgb, var(--pv-primary) 22%, transparent); }
.rk-pv__star { color: var(--pv-yellow); fill: currentColor; }
.rk-pv__exmain { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rk-pv__fhead, .rk-pv__frow { display: grid; grid-template-columns: minmax(0, 1fr) 132px 92px 124px; align-items: center; }
.rk-pv__fhead {
  height: 30px; flex: none; margin-bottom: 2px; padding: 0 12px 0 14px;
  background: var(--pv-glass); border-bottom: 1px solid var(--pv-ov);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .4px; color: var(--pv-muted);
}
.rk-pv__fhead .rk-pv__fname { padding-left: 20px; gap: 4px; }
.rk-pv__sorti { width: 12px; height: 12px; color: var(--pv-primary); }
.rk-pv__files { flex: 1; min-height: 0; padding: 0 6px; overflow: hidden; }
.rk-pv__frow { width: 100%; height: 30px; padding: 0 6px 0 8px; border-radius: 14px; border: 1px solid transparent; text-align: left; }
.rk-pv__frow:hover { background: var(--pv-hover); }
.rk-pv__frow[aria-pressed="true"] { background: color-mix(in srgb, var(--pv-primary) 14%, transparent); border-color: color-mix(in srgb, var(--pv-primary) 22%, transparent); }
.rk-pv__frow:focus-visible { outline-offset: -2px; border-radius: 14px; }
.rk-pv__fname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rk-pv__fname b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__frow .rk-i { width: 16px; height: 16px; }
.rk-pv__ftype, .rk-pv__fsize, .rk-pv__fdate { padding: 0 6px; font-size: 12px; line-height: 16px; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__fsize { text-align: right; }
.rk-pv__exstat {
  height: 28px; flex: none; display: flex; align-items: center; padding: 0 12px;
  background: var(--pv-glass); border-top: 1px solid var(--pv-ov);
  font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--pv-muted); white-space: nowrap; overflow: hidden;
}

/* ------------------------------------------------------------------ network */
.rk-pv__netgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.rk-pv__inet { display: flex; align-items: center; }
.rk-pv__inet .rk-pv__sl { margin-right: 6px; }
.rk-pv__inet b { margin-left: 4px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--pv-green); }
.rk-pv__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.rk-pv__field { display: grid; gap: 2px; }
.rk-pv__sum > .rk-pv__field { margin-top: 10px; }
.rk-pv__field > span { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; color: var(--pv-muted); }
.rk-pv__field > b { font-weight: 500; }
.rk-pv__field > b.rk-pv__muted { font-size: 14px; line-height: 20px; }
.rk-pv__copy { display: inline-flex; align-items: center; gap: 8px; }
.rk-pv__copy .rk-i { width: 16px; height: 16px; color: var(--pv-muted); }
.rk-pv__tag {
  --c: var(--pv-muted); display: inline-flex; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 16%, transparent); color: color-mix(in srgb, var(--c) var(--pv-ink), #000);
  font-style: normal; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .5px; text-transform: none;
}
.rk-pv__ifs { display: grid; gap: 12px; }
.rk-pv__ifs > .rk-pv__sl { padding: 0 4px; }
.rk-pv__if { display: flex; gap: 12px; --c: var(--pv-green); }
.rk-pv__if.is-down { --c: var(--pv-grey); }
.rk-pv__iftile { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.rk-pv__iftile .rk-i { width: 22px; height: 22px; }
.rk-pv__ifcol { flex: 1; min-width: 0; display: grid; }
.rk-pv__ifname { display: flex; align-items: center; font-size: 12px; line-height: 16px; font-weight: 600; color: color-mix(in srgb, var(--c) var(--pv-ink), #000); }
.rk-pv__ifname b { margin-right: 4px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--pv-text); }
.rk-pv__ifname .rk-pv__dot { margin: 0 4px; background: var(--c); }
.rk-pv__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.rk-pv__ifcol > .rk-pv__muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__ip { margin-top: 8px; font-size: 16px; line-height: 22px; }
.rk-pv__mac { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 11px; line-height: 16px; color: var(--pv-muted); }

/* ------------------------------------------------------------------ programs: ProgramsScreen */
.rk-pv__panel--pg { padding-bottom: 0; }
.rk-pv__progs { display: grid; gap: 12px; padding: 4px 0 96px; }
.rk-pv__prog { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.rk-pv__prog.is-running { box-shadow: inset 0 1px 0 var(--pv-inner), inset 0 0 0 1px color-mix(in srgb, var(--pv-primary) 45%, transparent); }
.rk-pv__pgicon { position: relative; flex: none; }
.rk-pv__pgicon .rk-pv__picon { width: 48px; height: 48px; border-radius: 14px; font-size: 15px; }
.rk-pv__elev { position: absolute; top: 2px; right: 2px; display: grid; padding: 3px; border-radius: 999px; background: var(--pv-tc); color: var(--pv-on-tc); }
.rk-pv__elev .rk-i { width: 14px; height: 14px; }
.rk-pv__pgtext { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rk-pv__pgtext b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.rk-pv__pgtext b > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pv__elevi { width: 14px; height: 14px; flex: none; color: var(--pv-blue); }
.rk-pv__pgtext small { font-size: 11px; line-height: 16px; letter-spacing: .4px; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__launch {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--pv-primary) 16%, transparent); color: var(--pv-primary-text);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .3px;
}
:root[data-theme="light"] .rk-pv__launch { background: color-mix(in srgb, var(--pv-primary) 12%, transparent); }
/* Press, as on the page (site.css, "press"): the preview's buttons, tabs and cards scale by the
   `scale` property and dim, in 90 ms and back in 120 ms; the round icon buttons further, the cards and
   rows less. Buttons only - the same class names also dress spans and list items that do nothing. */
button:is(.rk-pv__tab, .rk-pv__card, .rk-pv__disc, .rk-pv__power, .rk-pv__act, .rk-pv__segb, .rk-pv__toggle,
.rk-pv__launch, .rk-pv__snackx, .rk-pv__wmain, .rk-pv__wact, .rk-pv__frow, .rk-pv__sheetx, .rk-pv__fpill, .rk-pv__atile) {
  --rk-press: .96;
  transition: scale .12s var(--rk-ease-out), opacity .12s var(--rk-ease-out);
}
button:is(.rk-pv__act, .rk-pv__disc, .rk-pv__snackx, .rk-pv__sheetx, .rk-pv__wact) { --rk-press: .9; }
button:is(.rk-pv__card, .rk-pv__frow, .rk-pv__wmain) { --rk-press: .985; }
button:is(.rk-pv__tab, .rk-pv__card, .rk-pv__disc, .rk-pv__power, .rk-pv__act, .rk-pv__segb, .rk-pv__toggle,
.rk-pv__launch, .rk-pv__snackx, .rk-pv__wmain, .rk-pv__wact, .rk-pv__frow, .rk-pv__sheetx, .rk-pv__fpill, .rk-pv__atile):is(:active, .is-pressed):not(.is-inert, [disabled]) {
  scale: var(--rk-press); opacity: .84; transition-duration: .09s;
}
/* Framed with a 1px line: dimmed, not shrunk, so the line stays on whole device pixels and the rounded
   ends do not read bolder than the sides (site.css, "press"). */
button:is(.rk-pv__toggle, .rk-pv__fpill, .rk-pv__disc):is(:active, .is-pressed):not(.is-inert, [disabled]),
button.rk-pv__frow[aria-pressed="true"]:is(:active, .is-pressed):not(.is-inert, [disabled]),
button.rk-pv__tab[aria-selected="true"]:is(:active, .is-pressed):not(.is-inert, [disabled]) { scale: none; }
.rk-pv__launch .rk-pv__play { width: 16px; height: 16px; color: var(--pv-primary); }
.rk-pv__spin { display: none; width: 14px; height: 14px; border: 2px solid var(--pv-primary); border-right-color: transparent; border-radius: 50%; animation: rk-pv-spin .8s linear infinite; }
@keyframes rk-pv-spin { to { transform: rotate(360deg); } }
.rk-pv__prog.is-running .rk-pv__play { display: none; }
.rk-pv__prog.is-running .rk-pv__spin { display: block; }
/* The extended FAB and the snackbar Scaffold lifts above it. */
.rk-pv__xfab {
  position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--pv-primary-fill); color: var(--pv-on-primary);
  font-size: 14px; line-height: 20px; font-weight: 600; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
}
.rk-pv__xfab .rk-i, .rk-pv__fab .rk-i { width: 24px; height: 24px; }
.rk-pv__snack {
  position: absolute; left: 16px; right: 16px; bottom: 88px; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 8px 12px 14px; border-radius: 22px; background: var(--pv-high);
  box-shadow: inset 0 1px 0 var(--pv-inner), 0 12px 30px -12px rgba(0, 0, 0, .6);
  opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .2s ease, transform .3s var(--rk-ease-out);
}
.rk-pv__snack.is-on { opacity: 1; transform: none; }
.rk-pv__snackic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--pv-primary) 16%, transparent); color: var(--pv-primary); }
.rk-pv__snackic .rk-i { width: 16px; height: 16px; }
.rk-pv__snacktext { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.rk-pv__snackx { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--pv-muted); }
.rk-pv__snackx:hover { background: var(--pv-hover); }
.rk-pv__snackx .rk-i { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ windows: WindowsScreen */
.rk-pv__wins { margin-top: 8px; border: 2px solid var(--pv-outline); border-radius: 22px; overflow: hidden; background: var(--pv-surface); }
.rk-pv__wrow { position: relative; display: flex; align-items: center; padding-right: 4px; background: var(--pv-surface); transform: translateY(var(--pv-dy, 0px)); }
.rk-pv__wrow + .rk-pv__wrow::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--pv-ov); }
.rk-pv__wrow.is-flip { z-index: 1; transition: transform .45s var(--rk-ease-out); }
.rk-pv__wrow.is-closing { opacity: 0; transition: opacity .18s ease; }
.rk-pv__wmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 4px 8px 12px; text-align: left; }
.rk-pv__wmain:focus-visible, .rk-pv__wact:focus-visible { outline-offset: -3px; border-radius: 14px; }
.rk-pv__wmain .rk-pv__picon, .rk-pv__pgicon { flex: none; }
.rk-pv__wtext { display: grid; min-width: 0; }
.rk-pv__wtext b { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__wrow.is-focus .rk-pv__wtext b { font-weight: 700; }
.rk-pv__wrow.is-min .rk-pv__wtext b { color: var(--pv-muted); }
.rk-pv__wmeta { display: flex; align-items: center; min-width: 0; font-family: var(--rk-mono); font-size: 12px; line-height: 16px; color: var(--pv-muted); }
.rk-pv__wexe { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pv__wpid { flex: none; white-space: pre; }
.rk-pv__badge {
  display: none; flex: none; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--pv-ov);
  font-family: var(--rk-sans); font-style: normal; font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .4px;
  color: var(--pv-muted); white-space: nowrap;
}
.rk-pv__badge--on {
  font-weight: 700; color: var(--pv-primary-text); background: color-mix(in srgb, var(--pv-primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--pv-primary) 35%, transparent);
}
.rk-pv__wrow.is-focus .rk-pv__badge--on, .rk-pv__wrow.is-min .rk-pv__badge--min { display: inline-block; }
.rk-pv__wact { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.rk-pv__wact > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--pv-high); color: var(--pv-muted); }
.rk-pv__wact:hover > span { color: var(--pv-text); }
.rk-pv__wact .rk-i { width: 16px; height: 16px; }
.rk-pv__wact .rk-pv__wmax, .rk-pv__wrow.is-min .rk-pv__wminz { display: none; }
.rk-pv__wrow.is-min .rk-pv__wmax { display: block; }
.rk-pv__empty { display: grid; justify-items: center; gap: 16px; padding: 72px 32px 24px; }
.rk-pv__emptyic { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; background: color-mix(in srgb, var(--pv-primary) 12%, transparent); color: var(--pv-primary); }
.rk-pv__emptyic .rk-i { width: 34px; height: 34px; }
.rk-pv__empty b { font-size: 20px; line-height: 26px; font-weight: 600; text-align: center; }

/* ------------------------------------------------------------------ system: SystemInfoScreen */
.rk-pv__sys { display: grid; gap: 12px; padding: 4px 0 12px; }
.rk-pv__hostrow { display: flex; align-items: center; gap: 14px; }
.rk-pv__ava--56 { width: 56px; height: 56px; }
.rk-pv__ava--56 .rk-i { width: 28px; height: 28px; }
.rk-pv__hosttext { display: grid; min-width: 0; }
.rk-pv__hosttext b { font-size: 20px; line-height: 28px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__hosttext span { font-size: 14px; line-height: 20px; color: var(--pv-muted); }
.rk-pv__rule { display: block; height: 1px; margin: 14px 0 6px; background: var(--pv-ov); }
.rk-pv__kvr { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; }
.rk-pv__kvr > span { flex: .9 1 0; min-width: 0; font-size: 14px; line-height: 20px; color: var(--pv-muted); }
.rk-pv__kvr > b { flex: 1.4 1 0; min-width: 0; text-align: right; font-size: 14px; line-height: 20px; font-weight: 600; }
.rk-pv__kvr > b.rk-pv__mono { padding-top: 2px; font-size: 12px; line-height: 16px; font-weight: 500; }
.rk-pv__syssec > .rk-pv__sl { padding: 4px 0 8px; }
.rk-pv__syssec--list > .rk-pv__sl { padding-bottom: 12px; }
.rk-pv__cpumodel { font-size: 16px; line-height: 22px; font-weight: 600; }
.rk-pv__stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.rk-pv__stats3 b { display: block; font-size: 20px; line-height: 28px; font-weight: 700; white-space: nowrap; }
.rk-pv__stats3 i { font-style: normal; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .4px; color: var(--pv-muted); }
.rk-pv__gpuinfo { display: flex; align-items: center; gap: 12px; padding: 14px; }
.rk-pv__gputile { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--pv-purple) 16%, transparent); color: var(--pv-purple); }
.rk-pv__gputile .rk-i { width: 24px; height: 24px; }
.rk-pv__gpuinfo > b { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.rk-pv__drow { display: flex; align-items: center; gap: 10px; }
.rk-pv__drow > .rk-i { width: 18px; height: 18px; flex: none; color: var(--pv-muted); }
.rk-pv__dtext { flex: 1; min-width: 0; display: grid; }
.rk-pv__dtext b { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__dtext small { font-size: 11px; line-height: 16px; letter-spacing: .4px; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pv__dsize { margin-left: 2px; font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; }
.rk-pv__bar--5 { height: 5px; margin-top: 8px; }
.rk-pv__bar--5 + .rk-pv__drow { margin-top: 14px; }
.rk-pv__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-pv__chips span {
  max-width: 100%; padding: 7px 12px; border-radius: 999px; background: var(--pv-high); border: 1px solid var(--pv-ov);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ power: the bottom sheet */
.rk-pv__sheetwrap { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center; }
.rk-pv__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s ease; }
:root[data-theme="light"] .rk-pv__scrim { background: rgba(15, 23, 42, .32); }
.rk-pv__sheet {
  position: relative; width: min(640px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain;
  padding: 10px 16px 24px; border-radius: 28px 28px 0 0; background: var(--pv-low);
  border: 1px solid var(--pv-ov); border-bottom: 0;
  transform: translate3d(0, 100%, 0); transition: transform .4s var(--rk-ease-out);
}
.rk-pv__sheetwrap.is-open .rk-pv__scrim { opacity: 1; }
.rk-pv__sheetwrap.is-open .rk-pv__sheet { transform: none; }
.rk-pv__handle { display: block; width: 32px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--pv-outline); }
.rk-pv__sheetx { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--pv-muted); }
.rk-pv__sheetx:hover { background: var(--pv-hover); color: var(--pv-text); }
.rk-pv__sheetx .rk-i { width: 20px; height: 20px; }
.rk-pv__sheett { margin-bottom: 16px; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: 0; }
.rk-pv__whens { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.rk-pv__pas { display: grid; gap: 10px; }
.rk-pv__pa {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 12px;
  border-radius: 16px; background: var(--pv-surface); border: 1px solid var(--pv-ov);
}
.rk-pv__patile { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.rk-pv__patile .rk-i { width: 22px; height: 22px; }
.rk-pv__patext { position: relative; flex: 1; min-width: 0; display: grid; }
.rk-pv__patext b { font-size: 16px; line-height: 22px; font-weight: 600; }
.rk-pv__pa.is-danger .rk-pv__patext b { color: var(--pv-red); }
.rk-pv__patext small { font-size: 12px; line-height: 16px; color: var(--pv-muted); }
.rk-pv__pachev { position: relative; width: 20px; height: 20px; color: var(--pv-muted); }

/* ------------------------------------------------------------------ widths */
/* The app's rail: under 1100px the sidebar folds to icons. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .rk-pv__body { grid-template-columns: 72px minmax(0, 1fr); }
  .rk-pv__nav { padding: 10px; }
  .rk-pv__nav .rk-pv__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rk-pv__navhead { justify-content: center; padding: 0; }
  .rk-pv__pc { position: relative; justify-content: center; padding: 0; height: 44px; }
  .rk-pv__pc .rk-pv__ava--rail { display: grid; width: 32px; height: 32px; border-radius: 12px; }
  .rk-pv__pc .rk-pv__ava--rail .rk-i { width: 16px; height: 16px; }
  .rk-pv__pc .rk-pv__dot { position: absolute; top: 3px; right: 6px; width: 6px; height: 6px; margin: 0; }
  .rk-pv__pc .rk-pv__mini { display: none; }
  .rk-pv__navcap { height: 1px; margin: 8px 4px; padding: 0; background: var(--pv-ov); }
  .rk-pv__tab { justify-content: center; height: 38px; padding: 0; }
  .rk-pv__tab .rk-i { width: 22px; height: 22px; }
  .rk-pv__tab .rk-pv__pin { display: none; }
  .rk-pv__exside, .rk-pv__filter { display: none; }
  .rk-pv__exbody { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1099.98px) {
  .rk-pv__tp { display: none; }
}

/* Phones and small tablets: the tools become a strip of tabs above the pane, and the pane grows
   with the section on show. */
@media (max-width: 899.98px) {
  .rk-pv__body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .rk-pv__nav { flex-direction: row; padding: 6px; border-right: 0; border-bottom: 1px solid var(--pv-ov); }
  .rk-pv__navhead, .rk-pv__pc, .rk-pv__navcap, .rk-pv__navfoot, .rk-pv__tabs .rk-pv__hr, .rk-pv__tab .rk-pv__pin { display: none; }
  .rk-pv__tabs { flex: 1; min-width: 0; flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .rk-pv__tabs::-webkit-scrollbar { display: none; }
  /* The strip is a tablet's and a phone's: 44px tabs for a finger, and the Power button below. */
  .rk-pv__tab { gap: 8px; height: 44px; padding: 0 12px; }
  .rk-pv__tab .rk-i { width: 18px; height: 18px; }
  .rk-pv__tab .rk-pv__lbl { flex: none; overflow: visible; }
  .rk-pv__panel { bottom: auto; overflow: visible; }
  .rk-pv__panel.is-on { position: relative; }
  .rk-pv__pane { min-height: 0; }
  .rk-pv__grid, .rk-pv__netgrid { grid-template-columns: minmax(0, 1fr); }
  .rk-pv__slab { height: auto; min-height: 0; }
  .rk-pv__ex { height: auto; }
  .rk-pv__exside, .rk-pv__filter { display: none; }
  .rk-pv__exbody { grid-template-columns: minmax(0, 1fr); }
  .rk-pv__sheet { max-height: none; }
  .rk-pv__power { order: 2; min-height: 44px; }
  .rk-pv__state { order: 3; margin-left: 0; }
}
@media (max-width: 560px) {
  .rk-pv__demo { margin-right: 4px; }
  .rk-pv__capb { width: 36px; }
  .rk-pv__power { padding: 8px 14px; }
  .rk-pv__acts .rk-pv__act:not(:last-child) { display: none; }
  .rk-pv__card--disks { display: none; }
  .rk-pv__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rk-pv__tile { padding: 12px; }
  .rk-pv__vr { display: none; }
  .rk-pv__thead { grid-template-columns: minmax(0, 1fr) 44px 58px; padding-left: 60px; padding-right: 12px; }
  .rk-pv__prow { grid-template-columns: 36px minmax(0, 1fr) 44px 58px; column-gap: 10px; padding: 9px 10px; }
  .rk-pv__prow + .rk-pv__prow::before { left: 56px; }
  .rk-pv__picon { width: 36px; height: 36px; }
  .rk-pv__gpucol { display: none; }
  .rk-pv__pre { font-size: 11px; }
  .rk-pv__tool--x { display: none; }
  .rk-pv__fhead, .rk-pv__frow { grid-template-columns: minmax(0, 1fr) 70px; }
  .rk-pv__ftype, .rk-pv__fdate { display: none; }
  .rk-pv__fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rk-pv__pa { gap: 12px; padding: 10px; }
}

/* ------------------------------------------------------------------ the phone: the Android app */
/* At 760px and below the section is the phone app itself at the phone's own width: no title bar, no
   sidebar, no window edge - the app's ground runs from one side of the screen to the other, with
   ScreenBackground's teal light at its top. The same panels are its screens: the computer list (phone
   only), the dashboard (the overview with DashboardHero and the tiles in place of the strip, the cards
   in the phone's order in one column) and the tools. A screen is as tall as its content and the page
   scrolls it; only the row of tiles and the files' breadcrumbs and sort row move sideways, as in the
   app. The Power sheet is a real bottom sheet over the page. */
@media (max-width: 760px) {
  .rk-pv__win {
    margin: var(--rk-head-gap) calc(var(--rk-gutter) * -1) 0; max-width: none;
    /* No edge at the top: the phone app begins where the lead ends, on the page's own ground, and its
       artwork fades in from the page (.rk-pv__heroart) instead of starting at a line. */
    border-width: 0 0 1px; border-color: var(--pv-ov); border-radius: 0; box-shadow: none; isolation: auto;
    background: var(--pv-bg);
    --pv-art-teal: rgba(45, 212, 191, .30); --pv-art-cyan: rgba(56, 189, 248, .28);
    --pv-art-dot: rgba(191, 219, 254, .26); --pv-art-line: rgba(125, 211, 252, .30);
  }
  :root[data-theme="light"] .rk-pv__win {
    box-shadow: none;
    --pv-art-teal: rgba(20, 184, 166, .20); --pv-art-cyan: rgba(34, 211, 238, .16);
    --pv-art-dot: rgba(255, 255, 255, 0); --pv-art-line: rgba(71, 85, 105, .24);
  }
  .rk-pv__title, .rk-pv__nav { display: none; }
  .rk-pv__body { display: block; height: auto; }
  .rk-pv__pane { min-height: 640px; overflow: visible; }
  .rk-pv__panel { padding: 0 16px 24px; }
  .rk-pv__panel.is-on { min-height: 640px; }

  /* PcListScreen */
  .rk-pv__hero { position: relative; margin: 0 -16px; isolation: isolate; }
  /* GradientHeader's artwork (hero_dark / hero_light) redrawn: the aurora and its bokeh as light in
     the background, the circuit traces as one SVG symbol, and the header's scrim as a mask that
     leaves 1, .45 and 0 of it from top to bottom, so the name and the status row sit on the ground.
     Nothing in it moves and it costs no request. */
  .rk-pv__heroart {
    display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: var(--pv-art-line);
    background:
      radial-gradient(circle at 55% 24%, var(--pv-art-dot) 0 5px, transparent 11px),
      radial-gradient(circle at 63% 37%, var(--pv-art-dot) 0 4px, transparent 10px),
      radial-gradient(circle at 83% 17%, var(--pv-art-dot) 0 4px, transparent 9px),
      radial-gradient(circle at 88% 21%, var(--pv-art-dot) 0 3px, transparent 8px),
      radial-gradient(circle at 38% 41%, var(--pv-art-dot) 0 6px, transparent 13px),
      radial-gradient(ellipse 38% 20% at 70% 4%, var(--pv-art-cyan), transparent),
      radial-gradient(ellipse 36% 24% at 44% 24%, var(--pv-art-cyan), transparent),
      radial-gradient(ellipse 34% 30% at 15% 44%, var(--pv-art-teal), transparent),
      radial-gradient(ellipse 44% 34% at 20% 0%, var(--pv-art-teal), transparent),
      radial-gradient(circle 90vw at 15% -25vw, var(--pv-glow), transparent);
    /* The mask also brings the art in from nothing over its first 64px, so the section after the
       capabilities opens as light rising out of the page, not as a picture cut off at its top. */
    -webkit-mask-image: linear-gradient(transparent, #000 64px, rgba(0, 0, 0, .45) 72%, transparent);
    mask-image: linear-gradient(transparent, #000 64px, rgba(0, 0, 0, .45) 72%, transparent);
  }
  .rk-pv__traces { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .8; }
  .rk-pv__hero--pcs { display: flex; align-items: flex-start; height: 200px; padding: 4px 8px 12px 16px; }
  .rk-pv__herotext { flex: 1; min-width: 0; }
  .rk-pv__hero--pcs .rk-pv__herotext { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-right: 8px; }
  .rk-pv__display { display: block; font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-pv__herosub { font-size: 14px; line-height: 20px; color: var(--pv-muted); }
  .rk-pv__hub {
    align-self: flex-start; display: inline-flex; align-items: center; margin-top: 10px; padding: 4px 12px 4px 1px; border-radius: 999px;
    background: color-mix(in srgb, var(--pv-surface) 70%, transparent); border: 1px solid var(--pv-ov);
    font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .3px; white-space: nowrap;
  }
  :root[data-theme="light"] .rk-pv__hub { background: color-mix(in srgb, var(--pv-surface) 85%, transparent); }
  .rk-pv__hub .rk-pv__dot, .rk-pv__pctext .rk-pv__dot { margin-right: 6.9px; }
  .rk-pv__heroacts { display: flex; gap: 4px; }
  .rk-pv__disc { width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: var(--pv-text); }
  .rk-pv__disc > span {
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
    background: color-mix(in srgb, var(--pv-surface) 50%, transparent); border: 1px solid var(--pv-ov);
  }
  :root[data-theme="light"] .rk-pv__disc > span { background: color-mix(in srgb, var(--pv-surface) 75%, transparent); }
  .rk-pv__disc .rk-i { width: 24px; height: 24px; }
  .rk-pv__pcs { display: grid; gap: 12px; padding: 4px 0 96px; }
  .rk-pv__pccard { width: 100%; display: flex; align-items: center; text-align: left; }
  .rk-pv__ava--52 { width: 52px; height: 52px; }
  .rk-pv__ava--52 .rk-i { width: 26px; height: 26px; }
  .rk-pv__pccard.is-off .rk-pv__ava {
    background: color-mix(in srgb, var(--pv-grey) 16%, transparent); border-color: color-mix(in srgb, var(--pv-grey) 25%, transparent); color: var(--pv-grey);
  }
  .rk-pv__pctext { flex: 1; min-width: 0; display: grid; gap: 2px; margin: 0 12px 0 14px; }
  .rk-pv__pctext b { font-size: 16px; line-height: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-pv__pctext small { display: flex; align-items: center; min-width: 0; font-size: 12px; line-height: 16px; letter-spacing: .1px; color: var(--pv-muted); }
  .rk-pv__pctext small > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-pv__rms { flex: none; display: flex; gap: 10px; }
  .rk-pv__rm { display: grid; justify-items: center; gap: 3px; }
  .rk-pv__rm > i { font-style: normal; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .4px; color: var(--pv-muted); }
  .rk-pv__pccard .rk-pv__fpill { flex: none; padding: 8px 14px; }
  .rk-pv__fab {
    position: absolute; right: 16px; bottom: 16px; width: 56px; height: 56px; display: grid; place-items: center;
    border-radius: 22px; background: var(--pv-primary-fill); color: var(--pv-on-primary); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
  }

  /* DashboardScreen: the hero, the tiles, then the cards in the phone's order */
  .rk-pv__hero--dash { height: 200px; }
  .rk-pv__heroback { position: absolute; top: 4px; left: 8px; }
  .rk-pv__herorow { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; align-items: flex-end; gap: 12px; }
  .rk-pv__statusrow { display: flex; align-items: center; margin-top: 4px; white-space: nowrap; }
  .rk-pv__statusrow .rk-pv__dot { margin-right: 7.6px; }
  .rk-pv__statusrow .rk-pv__ok { margin-left: 0; }
  .rk-pv__statusrow .rk-pv__tp { display: inline-block; }
  .rk-pv__power { flex: none; padding: 10px 16px; }
  .rk-pv__atiles {
    display: flex; gap: 6px; margin: 12px -16px 0; padding: 0 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .rk-pv__atiles::-webkit-scrollbar, .rk-pv__crumbs::-webkit-scrollbar, .rk-pv__sortrow::-webkit-scrollbar { display: none; }
  .rk-pv__atiles.is-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent); }
  .rk-pv__atiles.is-fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px); mask-image: linear-gradient(90deg, transparent, #000 12px); }
  .rk-pv__atiles.is-fade-l.is-fade-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
  .rk-pv__atile {
    flex: none; width: var(--pv-tw, 76px); height: 60px; padding: 0; border-radius: 14px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  }
  .rk-pv__atile:focus-visible { outline-offset: -3px; border-radius: 14px; }
  .rk-pv__atile .rk-i { width: 22px; height: 22px; color: var(--pv-primary); }
  .rk-pv__atl { display: block; max-width: 100%; overflow: hidden; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .4px; color: var(--pv-muted); white-space: nowrap; text-align: center; }
  .rk-pv__atl > span { display: inline-block; }
  .rk-pv__grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 12px; }
  .rk-pv__col { display: contents; }
  .rk-pv__card--cpu { order: 1; }
  .rk-pv__card--mem { order: 2; }
  .rk-pv__card--gpu { order: 3; }
  .rk-pv__card--disks { display: block; order: 4; }
  .rk-pv__card--net { order: 5; }
  .rk-pv__card--sys { order: 6; }
  .rk-pv__kvrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; line-height: 20px; }
  .rk-pv__kvrow + .rk-pv__kvrow { border-top: 1px solid var(--pv-ov); }
  .rk-pv__kvrow > span { flex: 1; color: var(--pv-muted); }
  .rk-pv__kvrow > b { font-weight: 600; text-align: right; }

  /* SystemInfoScreen: a value that wraps stacks under its label */
  .rk-pv__kvr.is-long { flex-direction: column; gap: 2px; }
  .rk-pv__kvr.is-long > span { flex: none; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .3px; }
  .rk-pv__kvr.is-long > b { flex: none; text-align: left; }

  /* FilesScreen: its top bar, the breadcrumb pills, the sort row and a card per entry */
  .rk-pv__panel--fi { padding: 0 16px 24px; }
  .rk-pv__acts--all .rk-pv__act, .rk-pv__acts--all .rk-pv__act:not(:last-child) { display: grid; width: 40px; }
  .rk-pv__starsolid { fill: currentColor; color: var(--pv-primary); }
  .rk-pv__crumbs, .rk-pv__sortrow { display: flex; align-items: center; gap: 8px; margin: 0 -16px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .rk-pv__crumbs { padding: 8px 16px; }
  .rk-pv__crumbs .rk-pv__fpill { flex: none; padding: 8px 14px; }
  .rk-pv__crumbs .rk-pv__sep { flex: none; width: 16px; height: 16px; }
  .rk-pv__sortrow { padding: 4px 16px; }
  .rk-pv__sortrow > * { flex: none; }
  .rk-pv__sortrow .rk-pv__vr { display: block; margin: 0; }
  .rk-pv__sortrow .rk-pv__toggle { color: var(--pv-muted); }
  .rk-pv__fcount { padding: 8px 4px 4px; }
  .rk-pv__ex { height: auto; }
  .rk-pv__extb, .rk-pv__exside, .rk-pv__fhead, .rk-pv__exstat, .rk-pv__filter { display: none; }
  .rk-pv__exbody { display: block; }
  .rk-pv__files { display: grid; gap: 8px; padding: 8px 0 0; overflow: visible; }
  .rk-pv__frow {
    position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-rows: auto auto; align-content: center; column-gap: 12px;
    height: auto; min-height: 60px; padding: 10px 4px 10px 12px; border: 0; border-radius: 16px;
    background: var(--pv-surface); box-shadow: inset 0 1px 0 var(--pv-inner);
  }
  .rk-pv__frow::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(180deg, var(--pv-hair-top), var(--pv-hair-bot));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  .rk-pv__frow:hover { background: var(--pv-surface); }
  .rk-pv__frow[aria-pressed="true"] { background: color-mix(in srgb, var(--pv-primary) 10%, var(--pv-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pv-primary) 35%, transparent); }
  .rk-pv__frow:focus-visible { border-radius: 16px; }
  .rk-pv__fname { display: contents; }
  .rk-pv__frow .rk-pv__fname .rk-i {
    grid-column: 1; grid-row: 1 / span 2; align-self: center; box-sizing: content-box; width: 22px; height: 22px; padding: 9px;
    border-radius: 14px; background: color-mix(in srgb, var(--c) 16%, transparent);
  }
  .rk-pv__fname b { grid-column: 2; grid-row: 1; font-size: 14px; line-height: 20px; font-weight: 600; }
  .rk-pv__fmeta { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 16px; letter-spacing: .1px; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-pv__ftype, .rk-pv__fsize, .rk-pv__fdate { display: none; }
  .rk-pv__frow .rk-pv__ftrail { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: center; width: 24px; height: 24px; color: var(--pv-muted); }

  .rk-pv__sheetwrap { position: fixed; z-index: 45; }
  .rk-pv__sheet { max-height: 88vh; }
}

@media (prefers-reduced-motion: reduce) {
  .rk-pv__dot.is-pulse::after, .rk-pv__caret { animation: none; }
  .rk-pv__panel.is-in, .rk-pv__panel.is-out, .rk-pv__bar i, .rk-pv__cores i, .rk-pv__sheet, .rk-pv__scrim,
  .rk-pv__prow.is-flip, .rk-pv__power, .rk-pv__wrow.is-flip, .rk-pv__wrow.is-closing, .rk-pv__snack, .rk-pv__launch { transition: none; }
  button:is(.rk-pv__tab, .rk-pv__card, .rk-pv__disc, .rk-pv__power, .rk-pv__act, .rk-pv__segb, .rk-pv__toggle,
  .rk-pv__launch, .rk-pv__snackx, .rk-pv__wmain, .rk-pv__wact, .rk-pv__frow, .rk-pv__sheetx, .rk-pv__fpill, .rk-pv__atile) { transition: none; scale: none !important; }
  .rk-pv__spin { animation: none; }
}

/* Values the markup starts with; site.js writes the same properties as they change. */
.rk-pv__v0{--v:0} .rk-pv__v1{--v:1} .rk-pv__v2{--v:2} .rk-pv__v3{--v:3} .rk-pv__v4{--v:4} .rk-pv__v5{--v:5} .rk-pv__v6{--v:6} .rk-pv__v7{--v:7} .rk-pv__v8{--v:8} .rk-pv__v9{--v:9} .rk-pv__v10{--v:10} .rk-pv__v11{--v:11} .rk-pv__v12{--v:12} .rk-pv__v13{--v:13} .rk-pv__v14{--v:14} .rk-pv__v15{--v:15} .rk-pv__v16{--v:16} .rk-pv__v17{--v:17} .rk-pv__v18{--v:18} .rk-pv__v19{--v:19} .rk-pv__v20{--v:20} .rk-pv__v21{--v:21} .rk-pv__v22{--v:22} .rk-pv__v23{--v:23} .rk-pv__v24{--v:24} .rk-pv__v25{--v:25} .rk-pv__v26{--v:26} .rk-pv__v27{--v:27} .rk-pv__v28{--v:28} .rk-pv__v29{--v:29} .rk-pv__v30{--v:30} .rk-pv__v31{--v:31} .rk-pv__v32{--v:32} .rk-pv__v33{--v:33} .rk-pv__v34{--v:34} .rk-pv__v35{--v:35} .rk-pv__v36{--v:36} .rk-pv__v37{--v:37} .rk-pv__v38{--v:38} .rk-pv__v39{--v:39} .rk-pv__v40{--v:40} .rk-pv__v41{--v:41} .rk-pv__v42{--v:42} .rk-pv__v43{--v:43} .rk-pv__v44{--v:44} .rk-pv__v45{--v:45} .rk-pv__v46{--v:46} .rk-pv__v47{--v:47} .rk-pv__v48{--v:48} .rk-pv__v49{--v:49} .rk-pv__v50{--v:50} .rk-pv__v51{--v:51} .rk-pv__v52{--v:52} .rk-pv__v53{--v:53} .rk-pv__v54{--v:54} .rk-pv__v55{--v:55} .rk-pv__v56{--v:56} .rk-pv__v57{--v:57} .rk-pv__v58{--v:58} .rk-pv__v59{--v:59} .rk-pv__v60{--v:60} .rk-pv__v61{--v:61} .rk-pv__v62{--v:62} .rk-pv__v63{--v:63} .rk-pv__v64{--v:64} .rk-pv__v65{--v:65} .rk-pv__v66{--v:66} .rk-pv__v67{--v:67} .rk-pv__v68{--v:68} .rk-pv__v69{--v:69} .rk-pv__v70{--v:70} .rk-pv__v71{--v:71} .rk-pv__v72{--v:72} .rk-pv__v73{--v:73} .rk-pv__v74{--v:74} .rk-pv__v75{--v:75} .rk-pv__v76{--v:76} .rk-pv__v77{--v:77} .rk-pv__v78{--v:78} .rk-pv__v79{--v:79} .rk-pv__v80{--v:80} .rk-pv__v81{--v:81} .rk-pv__v82{--v:82} .rk-pv__v83{--v:83} .rk-pv__v84{--v:84} .rk-pv__v85{--v:85} .rk-pv__v86{--v:86} .rk-pv__v87{--v:87} .rk-pv__v88{--v:88} .rk-pv__v89{--v:89} .rk-pv__v90{--v:90} .rk-pv__v91{--v:91} .rk-pv__v92{--v:92} .rk-pv__v93{--v:93} .rk-pv__v94{--v:94} .rk-pv__v95{--v:95} .rk-pv__v96{--v:96} .rk-pv__v97{--v:97} .rk-pv__v98{--v:98} .rk-pv__v99{--v:99} .rk-pv__v100{--v:100}
.rk-pv__y0{--y:0} .rk-pv__y1{--y:1} .rk-pv__y2{--y:2} .rk-pv__y3{--y:3} .rk-pv__y4{--y:4} .rk-pv__y5{--y:5} .rk-pv__y6{--y:6} .rk-pv__y7{--y:7} .rk-pv__y8{--y:8} .rk-pv__y9{--y:9} .rk-pv__y10{--y:10} .rk-pv__y11{--y:11} .rk-pv__y12{--y:12} .rk-pv__y13{--y:13} .rk-pv__y14{--y:14} .rk-pv__y15{--y:15} .rk-pv__y16{--y:16} .rk-pv__y17{--y:17} .rk-pv__y18{--y:18} .rk-pv__y19{--y:19} .rk-pv__y20{--y:20} .rk-pv__y21{--y:21} .rk-pv__y22{--y:22} .rk-pv__y23{--y:23} .rk-pv__y24{--y:24} .rk-pv__y25{--y:25} .rk-pv__y26{--y:26} .rk-pv__y27{--y:27} .rk-pv__y28{--y:28} .rk-pv__y29{--y:29} .rk-pv__y30{--y:30} .rk-pv__y31{--y:31} .rk-pv__y32{--y:32} .rk-pv__y33{--y:33} .rk-pv__y34{--y:34} .rk-pv__y35{--y:35} .rk-pv__y36{--y:36} .rk-pv__y37{--y:37} .rk-pv__y38{--y:38} .rk-pv__y39{--y:39} .rk-pv__y40{--y:40} .rk-pv__y41{--y:41} .rk-pv__y42{--y:42} .rk-pv__y43{--y:43} .rk-pv__y44{--y:44} .rk-pv__y45{--y:45} .rk-pv__y46{--y:46} .rk-pv__y47{--y:47} .rk-pv__y48{--y:48} .rk-pv__y49{--y:49} .rk-pv__y50{--y:50} .rk-pv__y51{--y:51} .rk-pv__y52{--y:52} .rk-pv__y53{--y:53} .rk-pv__y54{--y:54} .rk-pv__y55{--y:55} .rk-pv__y56{--y:56}

/* Which app's words and pieces show: the window's wider than 760px, the phone's at 760px and below. */
@media (min-width: 760.02px) { .rk-pv .rk-pv__mob { display: none; } }
@media (max-width: 760px) { .rk-pv .rk-pv__desk { display: none; } }