/* Remotek landing page.
*
* The page is the product's own interface, rebuilt in markup: the tokens below are the Compose
* app's tokens (mobile/shared/.../ui/theme/Theme.kt) and every panel is the app's panel drawn in
* HTML. The page carries no screenshot and no photograph; the glyphs are Lucide's, as in the app.
*
* Themes. Dark is the identity and the default; "system" resolves to dark (app-theme.js), light is
* an explicit choice and repaints everything, the way the app's light theme does.
*
* No inline styles anywhere: the Content-Security-Policy this page is served under allows no
* 'unsafe-inline', so every state a script sets is a class or a data attribute here - except the
* handful of numbers only a script can know (where the rail's lit segment sits, how tall the
* stacked stage must be), which site.js writes as custom properties through the CSSOM. The policy
* governs style attributes in markup; element.style.setProperty is not one.
*/
/* ========================================================== 1. tokens ==== */
:root {
color-scheme: dark;
--rk-bg: #0B0F17;
--rk-surface: #121826;
--rk-high: #1A2233;
--rk-highest: #222C40;
--rk-text: #E5E7EB;
--rk-muted: #94A3B8;
--rk-faint: #7B8BA1; /* 5.3:1 on the ground, 4.9:1 on a card: AA for the small print */
--rk-accent: #2DD4BF;
--rk-on-accent: #04231D;
--rk-accent-ink: #2DD4BF; /* icons, rings, bars, borders and large text */
--rk-accent-text: #2DD4BF; /* small accent text: a tag, a prompt, a link-sized button */
--rk-accent-fill: #2DD4BF; /* a surface that carries --rk-on-accent text */
--rk-neon: #2DD4BF; /* the dividers and the rail: light, not a surface */
--rk-neon-glow: rgba(45, 212, 191, .55);
--rk-neon-core: #CCFBF1;
--rk-scrim: rgba(0, 0, 0, .38); /* over background art, inside its screen blend: pure dimming */
--rk-desk: #1B3550; /* the remote desktop's wallpaper in the live-screen panel */
--rk-desk-bar: rgba(11, 15, 23, .78);
--rk-cyan: #22D3EE;
--rk-green: #22C55E;
--rk-yellow: #FACC15;
--rk-orange: #F97316;
--rk-red: #EF4444;
--rk-blue: #60A5FA;
--rk-indigo: #818CF8;
--rk-line: rgba(255, 255, 255, .10);
--rk-line-soft: rgba(255, 255, 255, .06);
--rk-inner: rgba(255, 255, 255, .05); /* the 5% inner highlight, dark theme */
--rk-hair-top: rgba(255, 255, 255, .17); /* card hairline, brighter at the top ... */
--rk-hair-bot: rgba(255, 255, 255, .04); /* ... fading down */
--rk-bar-bg: rgba(11, 15, 23, .72);
--rk-r-card: 22px;
--rk-r-sm: 16px;
--rk-r-tile: 14px;
--rk-r-pill: 999px;
--rk-sans: "Geologica", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--rk-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
--rk-page: 1200px;
--rk-gutter: clamp(20px, 4vw, 40px);
--rk-section: clamp(60px, 6vw, 92px);
--rk-head-gap: clamp(24px, 3vw, 40px); /* from a section's heading (and lead) to what it introduces */
--rk-top-h: 64px;
--rk-ease: cubic-bezier(.2, .7, .2, 1);
/* The two curves the motion is measured against: an exponential settle for entrances and state
changes (95 % at about a third of the duration, no overshoot) and easeOutQuart for the list. */
--rk-ease-out: cubic-bezier(.16, 1, .3, 1);
--rk-ease-quart: cubic-bezier(.25, 1, .5, 1);
}
.rk-light-tokens,
:root[data-theme="light"] {
color-scheme: light;
--rk-bg: #F4F6FA;
--rk-surface: #FFFFFF;
--rk-high: #EEF2F7;
--rk-highest: #E2E8F0;
--rk-text: #0F172A;
--rk-muted: #5B6675;
--rk-faint: #5B6675;
/* The accent is the app's own light token, TealDark #0F9488, for accent text, icons, rings, bars
and borders - the owner's decision, so the page and the app are one teal. Where light text
sits ON the accent (the solid button, the skip link, the avatar) white on #0F9488 is 3.7:1 and
fails AA, so those surfaces alone take the darker fill #0B7566, 5.4:1 with white. */
--rk-accent: #0F9488;
--rk-on-accent: #FFFFFF;
--rk-accent-ink: #0F9488;
/* Small teal text is the one place the app token is not enough on a light surface: #0F9488 is
3.3-3.7:1 on the card, the ground and a tag. #0B7566 measures 5.6 on the card, 5.2 on the
ground, 5.0 on a tag and 4.5 on the selected row - AA everywhere it sits. Icons and large
text keep the app's own teal. */
--rk-accent-text: #0B7566;
--rk-accent-fill: #0B7566;
--rk-neon: #0F9488;
--rk-neon-glow: rgba(15, 148, 136, .30);
--rk-neon-core: #5EEAD4;
--rk-scrim: rgba(255, 255, 255, .30);
--rk-desk: #C6DAE6;
--rk-desk-bar: rgba(255, 255, 255, .82);
--rk-blue: #2563EB;
--rk-indigo: #4F46E5;
--rk-green: #15803D;
--rk-orange: #C2410C; /* 4.7:1 on the card's inner surface; #EA580C was 3.2:1 */
--rk-red: #B91C1C;
--rk-line: rgba(15, 23, 42, .12);
--rk-line-soft: rgba(15, 23, 42, .07);
--rk-inner: rgba(255, 255, 255, .60); /* the 60% inner highlight, light theme */
--rk-hair-top: rgba(15, 23, 42, .14);
--rk-hair-bot: rgba(15, 23, 42, .05);
--rk-bar-bg: rgba(244, 246, 250, .78);
}
/* Every face is served out of webui/site/fonts; adding one here means adding the file beside it,
or the page pays a 404 per load and renders that weight in the wrong face.
Geologica, the project face. Every weight names the same variable WOFF2 first (32 KB, Latin and
Cyrillic, wght 400-800, every OpenType feature kept): the browser fetches that one URL once for
all five faces, and index.html preloads it, so the first screen's 800 headline and 400 body arrive
in a single request. Each face declares one weight, which clamps the variation to it - the file's
own default instance is never used. The static TTF of the same weight is the fallback for a
browser without WOFF2. JetBrains Mono is subset to the same ranges plus box drawing. */
@font-face { font-family:"Geologica"; font-weight:400; font-style:normal; font-display:swap;
src:url("/static/fonts/geologica-var.woff2") format("woff2"), url("/static/fonts/geologica_regular.ttf") format("truetype"); }
@font-face { font-family:"Geologica"; font-weight:500; font-style:normal; font-display:swap;
src:url("/static/fonts/geologica-var.woff2") format("woff2"), url("/static/fonts/geologica_medium.ttf") format("truetype"); }
@font-face { font-family:"Geologica"; font-weight:600; font-style:normal; font-display:swap;
src:url("/static/fonts/geologica-var.woff2") format("woff2"), url("/static/fonts/geologica_semibold.ttf") format("truetype"); }
@font-face { font-family:"Geologica"; font-weight:700; font-style:normal; font-display:swap;
src:url("/static/fonts/geologica-var.woff2") format("woff2"), url("/static/fonts/geologica_bold.ttf") format("truetype"); }
@font-face { font-family:"Geologica"; font-weight:800; font-style:normal; font-display:swap;
src:url("/static/fonts/geologica-var.woff2") format("woff2"), url("/static/fonts/geologica_extrabold.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-style:normal; font-display:swap;
src:url("/static/fonts/jetbrainsmono-400.woff2") format("woff2"), url("/static/fonts/jetbrainsmono_regular.ttf") format("truetype"); }
/* ========================================================== 2. basics ==== */
*, *::before, *::after { box-sizing: border-box; }
/* site.js hides rows with the hidden attribute (a hash with no build, the hub line with no hub);
any display rule below would otherwise win over it and draw the empty row. */
[hidden] { display: none !important; }
/* Anchor navigation is the browser's own: a smooth scroll (an instant one under reduced motion,
section 16) that parks a section's heading 24px under the condensed 56px bar. Every section with
an id opens with var(--rk-section) of padding, which the negative scroll margin takes back, so the
same numbers hold for the links on the bar, the drawer, the footer, a typed #hash and JavaScript
off. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 56px; }
main section[id] { scroll-margin-top: calc(24px - var(--rk-section)); }
body {
margin: 0;
background: var(--rk-bg);
color: var(--rk-text);
font-family: var(--rk-sans);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Geologica sets wide and its ExtraBold is dense, so headings are tracked lightly: at -.03em, the
setting of the previous face, the counters of a bold Cyrillic line closed up. */
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.015em; line-height: 1.12; }
p, dd, dt, figure { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* No browser tap highlight - the blue or grey box a phone draws over whatever was tapped. Every
control answers the press itself (buttons, "press"), and the :focus-visible ring below stays. */
html { -webkit-tap-highlight-color: transparent; }
code, .rk-mono { font-family: var(--rk-mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--rk-accent-ink); outline-offset: 3px; border-radius: 6px; }
.rk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rk-skip {
position: fixed; top: 10px; left: 10px; z-index: 60; transform: translateY(-160%);
background: var(--rk-accent-fill); color: var(--rk-on-accent); font-weight: 700;
padding: 10px 16px; border-radius: var(--rk-r-pill);
}
.rk-skip:focus { transform: none; }
.rk-wrap { max-width: var(--rk-page); margin-inline: auto; padding-inline: var(--rk-gutter); }
.rk-i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rk-h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; }
.rk-lead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--rk-muted); line-height: 1.55; }
.rk-label {
font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--rk-muted);
}
/* --- the card: the app's card, hairline brighter at the top, no shadow ------ */
.rk-card {
position: relative;
background: var(--rk-surface);
border-radius: var(--rk-r-card);
padding: 16px;
box-shadow: inset 0 1px 0 var(--rk-inner);
}
.rk-card::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(180deg, var(--rk-hair-top), var(--rk-hair-bot) 55%, var(--rk-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; pointer-events: none;
}
/* --- buttons: flat, no gradient anywhere ---------------------------------- */
/* Hover is a flat layer of one colour over the button (::before, opacity), press is a quick scale:
the page animates nothing but transform and opacity, so no background colour is ever
interpolated. The layer sits between the button's own ground and its label (isolation). */
.rk-btn {
position: relative; isolation: isolate;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 18px; border-radius: var(--rk-r-pill);
font-weight: 700; font-size: .95rem; white-space: nowrap;
background: var(--rk-high); color: var(--rk-text);
border: 1px solid var(--rk-line);
--rk-hover: var(--rk-text);
transition: transform .24s var(--rk-ease-out);
}
.rk-btn::before {
content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
background: var(--rk-hover); opacity: 0; pointer-events: none;
transition: opacity .18s var(--rk-ease);
}
a.rk-btn:hover::before, button.rk-btn:hover::before { opacity: .07; }
.rk-btn--solid { background: var(--rk-accent-fill); color: var(--rk-on-accent); border-color: transparent; --rk-hover: #FFFFFF; }
a.rk-btn--solid:hover::before, button.rk-btn--solid:hover::before { opacity: .12; }
/* Lightening the light theme's fill would take white text under AA again; it darkens instead. */
:root[data-theme="light"] .rk-btn--solid { --rk-hover: #000000; }
.rk-btn--sm { height: 34px; padding: 0 14px; font-size: .875rem; }
.rk-btn--lg { height: 48px; padding: 0 26px; font-size: 1rem; }
.rk-btn--wide { width: 100%; }
.rk-btn.is-pending { opacity: .5; pointer-events: none; }
/* --- press ---------------------------------------------------------------------------------------
Everything a finger presses answers it: in to 97%, a touch dimmer, in 90 ms, and back in 120 ms.
The small round controls go to 93%, where 97% of 36px is a pixel; the rows as wide as a column to
98.5%, where 97% of a column is a lurch. It is the `scale` property, not `transform`, so it never
replaces a transform a control already carries, and nothing next to it moves. :active is the
mouse's; a finger's quick tap is over before a phone paints :active, so site.js holds .is-pressed
on the control from pointerdown for at least 100 ms. The preview's controls press the same way
(preview.css), and so do the sign-in dialog's (auth-modal.css). Under reduced motion only the dim.
A control drawn with a 1px frame - the outlined button, the burger, the round icon button - is the
exception: it dims and lights its hover layer, and does not shrink. Shrunk to 97% around its centre,
the frame's straight edges leave the device-pixel grid (a 48px pill's top edge moves 0.72px) and its
one crisp row of ink is spread over two or three rows at part strength, while the rounded ends,
antialiased at any position, keep theirs: the curves read bolder than the sides for as long as the
finger is down (docs/website.md, "The press and the hairline"). Unscaled, the frame stays on the
rows it is drawn on at rest. */
.rk-btn, .rk-seg__btn, .rk-icon-btn, .rk-burger, .rk-cmd__copy, .rk-copy, .rk-top__nav a, .rk-top__signin,
a.rk-brand, .rk-caps__ix, .rk-cap__btn, .rk-drawer__nav a, .rk-foot__links a, .rk-faq summary {
--rk-press: .97;
transition: scale .12s var(--rk-ease-out), opacity .12s var(--rk-ease-out);
}
.rk-seg__btn, .rk-icon-btn, .rk-burger, .rk-cmd__copy, .rk-copy { --rk-press: .93; }
.rk-cap__btn, .rk-drawer__nav a, .rk-foot__links a, .rk-faq summary { --rk-press: .985; }
:is(.rk-btn, .rk-seg__btn, .rk-icon-btn, .rk-burger, .rk-cmd__copy, .rk-copy, .rk-top__nav a, .rk-top__signin,
a.rk-brand, .rk-caps__ix, .rk-cap__btn, .rk-drawer__nav a, .rk-foot__links a, .rk-faq summary):is(:active, .is-pressed):not([disabled], [aria-disabled="true"]) {
scale: var(--rk-press); opacity: .84; transition-duration: .09s;
}
:is(.rk-btn:not(.rk-btn--solid), .rk-burger, .rk-icon-btn):is(:active, .is-pressed):not([disabled], [aria-disabled="true"]) { scale: none; }
a.rk-btn:not(.rk-btn--solid):is(:active, .is-pressed)::before, button.rk-btn:not(.rk-btn--solid):is(:active, .is-pressed)::before { opacity: .16; }
.rk-burger:is(:active, .is-pressed), .rk-icon-btn:is(:active, .is-pressed) { background: var(--rk-high); }
/* The sign-in link while the dialog it opens is on its way (auth-modal.js): dimmed, and breathing
unless motion is reduced, so a press on a slow network is seen to have landed. */
.rk-top__signin[aria-busy="true"], .rk-drawer__signin[aria-busy="true"], .rk-foot__links a[aria-busy="true"] { opacity: .5; cursor: progress; }
/* The line auth-modal.js shows at the foot of the window when the dialog's files did not come: out of
sight until then, it rises 12px and fades in, and goes after six seconds. */
.rk-notice {
position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70;
width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 12px 18px;
border: 1px solid var(--rk-line); border-radius: var(--rk-r-tile);
background: var(--rk-highest); color: var(--rk-text); font-size: .9rem; line-height: 1.45; text-align: center;
box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
transform: translate(-50%, 12px); opacity: 0; visibility: hidden; pointer-events: none;
transition: transform .24s var(--rk-ease-out), opacity .24s var(--rk-ease-out), visibility 0s linear .24s;
}
.rk-notice.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
.rk-notice { transform: translate(-50%, 0); transition: none; }
}
@keyframes rk-wait { from { opacity: .8; } to { opacity: .35; } }
/* The return from Google's redirect (auth-google.html): the product's tile and a turning ring, on the
ground, for as long as one request takes. The ring turns by transform, and holds still under
reduced motion. */
.rk-gcb { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.rk-gcb__main { display: grid; justify-items: center; gap: 22px; }
.rk-gcb__mark { width: 56px; height: 56px; border-radius: 16px; }
.rk-gcb__spin {
width: 26px; height: 26px; border-radius: 50%;
border: 2px solid var(--rk-line); border-top-color: var(--rk-accent-ink);
}
@media (prefers-reduced-motion: no-preference) {
.rk-gcb__spin { animation: rk-gcb-turn .8s linear infinite; }
}
@keyframes rk-gcb-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
.rk-top__signin[aria-busy="true"], .rk-drawer__signin[aria-busy="true"], .rk-foot__links a[aria-busy="true"] { animation: rk-wait .7s var(--rk-ease) infinite alternate; }
}
/* --- the pointer's light on a card (site.js, section 5b) ------------------------------------------
Mouse and pen only, never under reduced motion. One soft disc per card, moved by transform to
under the cursor, drawn between the card's ground and its content: the host is its own stacking
context and the light has z-index -1. Light behind things, not a fill. */
.rk-card, .rk-dl__row, .rk-strip > div { isolation: isolate; }
.rk-glint {
position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden;
pointer-events: none; opacity: 0; transition: opacity .45s var(--rk-ease-out);
}
.rk-glint.is-on { opacity: 1; transition-duration: .25s; }
.rk-glint__disc {
position: absolute; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(45, 212, 191, .10), rgba(45, 212, 191, .035) 55%, rgba(45, 212, 191, 0));
}
:root[data-theme="light"] .rk-glint__disc {
background: radial-gradient(closest-side, rgba(15, 148, 136, .09), rgba(15, 148, 136, .03) 55%, rgba(15, 148, 136, 0));
}
/* --- small shared pieces of the app's UI ---------------------------------- */
.rk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rk-faint); flex: none; }
.rk-dot--on { background: var(--rk-green); }
.rk-tag {
display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
border-radius: var(--rk-r-pill); background: var(--rk-high); border: 1px solid var(--rk-line);
font-size: .75rem; font-weight: 600; color: var(--rk-muted); white-space: nowrap;
}
.rk-tag--teal { color: var(--rk-accent-text); border-color: color-mix(in srgb, var(--rk-accent) 34%, transparent); }
.rk-tag--red { color: color-mix(in srgb, var(--rk-red) 78%, var(--rk-text)); border-color: color-mix(in srgb, var(--rk-red) 34%, transparent); }
.rk-tag--quiet { color: var(--rk-muted); }
.rk-pill {
display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
border-radius: var(--rk-r-pill); background: var(--rk-high);
font-size: .75rem; font-weight: 600; color: var(--rk-muted);
font-family: var(--rk-mono);
}
.rk-pill .rk-i { width: 13px; height: 13px; }
.rk-next { margin-top: 10px; font-size: .9rem; color: var(--rk-accent-text); min-height: 0; }
.rk-next:empty { display: none; }
/* ========================================================== 3. header ==== */
/* Fixed over the hero. At the top of the page the bar is only its content; from the first scroll a
layer under it fades in - ground, blur, hairline, a soft shadow - and the bar condenses from 64 to
56px. The layer is scaled and the row translated, so the bar's box never changes size and nothing
under it reflows. The class flips once per crossing, not per frame (site.js). */
.rk-top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--rk-top-h); }
.rk-top::before {
content: ""; position: absolute; inset: 0; transform-origin: 50% 0;
background: var(--rk-bar-bg);
box-shadow: inset 0 -1px 0 var(--rk-line), 0 12px 32px -20px rgba(0, 0, 0, .7);
opacity: 0;
transition: opacity .5s var(--rk-ease-out), transform .5s var(--rk-ease-out);
}
:root[data-theme="light"] .rk-top::before { box-shadow: inset 0 -1px 0 var(--rk-line), 0 12px 30px -22px rgba(15, 23, 42, .35); }
/* The blur exists only while the layer is shown. A backdrop filter at opacity 0 is still two render
passes, redrawn on every frame the ambient light moves under the bar at the top of the page. */
.rk-top.is-scrolled::before {
opacity: 1; transform: scaleY(.875);
-webkit-backdrop-filter: saturate(160%) blur(18px);
backdrop-filter: saturate(160%) blur(18px);
}
/* With JavaScript off nothing ever sets .is-scrolled, and the fixed bar sat over the copy with no
ground under it; it keeps its ground from the start there. */
.rk-no-js .rk-top::before {
opacity: 1;
-webkit-backdrop-filter: saturate(160%) blur(18px);
backdrop-filter: saturate(160%) blur(18px);
}
/* Three columns, the outer two equal, so the section links sit on the page's centre line whatever
the brand and the tools measure. Every control on the bar is 34px tall on one centre line. */
.rk-top__row {
position: relative; height: 100%;
max-width: var(--rk-page); margin-inline: auto; padding-inline: var(--rk-gutter);
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 20px;
transition: transform .5s var(--rk-ease-out);
}
.rk-top.is-scrolled .rk-top__row { transform: translateY(-4px); }
/* Page-centred links need the brand's and the tools' columns to be equal, and in Russian the four
links and the tools stop fitting that way below about 1180px: "Свой сервер" ran under RU|EN.
Under 1200px the outer columns size to their content and the links centre in the space left
between them, a little tighter, down to the drawer at 1040px. */
@media (min-width: 1041px) and (max-width: 1199px) {
.rk-top__row { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; }
.rk-top__nav { justify-self: center; }
.rk-top__nav a { padding: 0 11px; }
.rk-top__tools { gap: 8px; }
}
.rk-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
.rk-top .rk-brand { justify-self: start; }
/* The product icon on its own tile. At bar size the full icon's padding left a 1px line drawing,
so the tile is the icon's own ground and the glyph inside it is shown larger: the monitor and
the teal power glyph read at 34px, and a hairline sets the tile off the bar in both themes. */
.rk-mark {
display: inline-block; flex: none; width: 34px; height: 34px; border-radius: 10px;
overflow: hidden; background: #10131A; box-shadow: 0 0 0 1px var(--rk-line);
}
.rk-mark img { width: 100%; height: 100%; transform: scale(1.45); }
.rk-mark--sm { width: 22px; height: 22px; border-radius: 6px; }
.rk-top__nav { position: relative; display: flex; align-items: center; gap: 2px; }
.rk-top__nav a {
display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
border-radius: var(--rk-r-pill); font-size: .9rem; font-weight: 600; color: var(--rk-muted);
}
.rk-top__nav a:hover { color: var(--rk-text); background: color-mix(in srgb, var(--rk-high) 72%, transparent); }
.rk-top__nav a.is-here { color: var(--rk-text); }
/* The scrollspy line: one 100px element under the link text, placed and sized by translateX and
scaleX from two numbers site.js writes when the section changes. It glides; it never reflows. */
.rk-top__ind {
position: absolute; left: 0; bottom: 3px; width: 100px; height: 2px; border-radius: 1px;
background: var(--rk-neon); box-shadow: 0 0 8px var(--rk-neon-glow);
transform-origin: 0 50%;
transform: translateX(var(--rk-ind-x, 0px)) scaleX(var(--rk-ind-s, 0));
opacity: 0; pointer-events: none;
transition: transform .55s var(--rk-ease-out), opacity .3s var(--rk-ease-out);
}
.rk-top__ind.is-on { opacity: 1; }
.rk-top__ind.is-snap { transition: opacity .3s var(--rk-ease-out); }
.rk-top__tools { justify-self: end; display: flex; align-items: center; gap: 12px; }
.rk-top__sep { width: 1px; height: 18px; background: var(--rk-line); }
.rk-top__signin {
display: inline-flex; align-items: center; height: 34px; padding: 0 10px; border-radius: var(--rk-r-pill);
font-size: .9rem; font-weight: 600; color: var(--rk-muted);
}
.rk-top__signin:hover { color: var(--rk-text); background: color-mix(in srgb, var(--rk-high) 72%, transparent); }
/* Language and theme: one small segmented control. The language segments say which one is on
(aria-pressed); the icon segment is a switch and shows the theme it is in. */
.rk-seg {
display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 3px;
border-radius: var(--rk-r-pill); border: 1px solid var(--rk-line);
background: color-mix(in srgb, var(--rk-surface) 55%, transparent);
}
.rk-seg__btn {
display: inline-flex; align-items: center; justify-content: center;
height: 26px; min-width: 34px; padding: 0 8px; border-radius: var(--rk-r-pill);
font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--rk-muted);
}
.rk-seg__btn:hover { color: var(--rk-text); }
.rk-seg__btn[aria-pressed="true"], .rk-seg__btn[aria-current="page"] { color: var(--rk-text); background: var(--rk-high); box-shadow: inset 0 1px 0 var(--rk-inner); }
.rk-seg__btn--icon, .rk-seg__btn--icon[aria-pressed] { width: 28px; min-width: 28px; padding: 0; background: none; box-shadow: none; }
.rk-seg__btn--icon:hover { background: var(--rk-high); }
.rk-seg__btn--icon .rk-i { width: 15px; height: 15px; }
.rk-seg__rule { width: 1px; height: 14px; margin-inline: 3px; background: var(--rk-line); }
.rk-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: var(--rk-r-pill);
border: 1px solid var(--rk-line); color: var(--rk-muted);
}
.rk-icon-btn:hover { color: var(--rk-text); background: var(--rk-high); }
.rk-icon-btn .rk-i { width: 17px; height: 17px; }
.rk-i--sun { display: none; }
:root[data-theme="light"] .rk-i--sun { display: block; }
:root[data-theme="light"] .rk-i--moon { display: none; }
.rk-burger { display: none; width: 36px; height: 36px; align-items: center; justify-content: center;
border-radius: var(--rk-r-pill); border: 1px solid var(--rk-line); color: var(--rk-text); }
.rk-burger .rk-i { width: 20px; height: 20px; }
.rk-drawer {
width: min(420px, 92vw); border: 0; border-radius: var(--rk-r-card); padding: 18px;
background: var(--rk-surface); color: var(--rk-text); box-shadow: inset 0 1px 0 var(--rk-inner);
}
.rk-drawer::backdrop { background: rgba(3, 6, 12, .66); }
.rk-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.rk-drawer__nav { display: grid; gap: 2px; margin: 18px 0; }
.rk-drawer__nav a { padding: 12px 10px; border-radius: var(--rk-r-tile); font-weight: 700; font-size: 1.05rem; }
.rk-drawer__nav a:hover { background: var(--rk-high); }
.rk-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rk-line); }
/* "Войти" in the menu: the filled button across the drawer, between the sections and the language
row, so the one action that is not a place on the page reads as the action. */
.rk-drawer__signin { width: 100%; margin: 0 0 16px; }
/* It keeps .rk-top__signin - what opens the dialog and what the dialog hands focus back to know it by
(auth-modal.js, auth-dialog.js) - so the bar link's quiet look is taken back here. */
.rk-drawer .rk-drawer__signin { height: 48px; padding: 0 26px; font-size: 1rem; font-weight: 700; color: var(--rk-on-accent); }
.rk-drawer .rk-drawer__signin:hover { color: var(--rk-on-accent); background: var(--rk-accent-fill); }
.rk-seg--drawer { height: 40px; }
.rk-seg--drawer .rk-seg__btn { height: 32px; min-width: 42px; font-size: .78rem; }
.rk-seg--drawer .rk-seg__btn--icon { width: 34px; min-width: 34px; }
/* ============================================================ 4. hero ==== */
/* overflow: clip matters: the hero is positioned and the sections after it are not, so anything
that spills out of it paints over their content - the lights used to swallow the first heading
of the next section whole. */
.rk-hero { position: relative; isolation: isolate; overflow: clip; background: var(--rk-bg); }
/* --- the background: light through curved glass ------------------------------------------------
A canvas behind the first screen that hero-bg.js draws with one WebGL fragment shader: a lit fold
in the lower right whose edge bends and swings once every ten seconds, a dark band along that
edge, faint ribbons sweeping round it and a spill of light that swells and fades - the
composition and the pace of termius.com's hero, in the app's teal and indigo. The layer is as tall
as the first screen, and its lower quarter gives way to the ground inside the shader, so nothing
here is masked and the canvas is one opaque layer; the app window rises over that fade. The layer
scrolls with the page, as the reference's does.
The canvas is transparent until its first frame is drawn (.is-live, set by hero-bg.js) and fades
in over it. Under it, the same light as a still in CSS: what shows without JavaScript, without
WebGL, on a machine that would render WebGL in software, and for the moment before the first
frame. Once the canvas is in, the still is no longer drawn. */
.rk-herobg {
position: absolute; left: 0; right: 0; top: 0; z-index: -1;
height: min(100%, max(640px, 94svh));
overflow: hidden; pointer-events: none;
}
.rk-herobg::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(30% 26% at 86% 70%, rgba(45, 212, 191, .50), rgba(15, 148, 136, .20) 55%, rgba(15, 148, 136, 0)),
radial-gradient(26% 50% at 92% 36%, rgba(129, 140, 248, .14), rgba(129, 140, 248, 0) 70%),
radial-gradient(24% 16% at 62% 70%, rgba(15, 148, 136, .26), rgba(15, 148, 136, 0));
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
}
.rk-herobg__canvas {
position: absolute; inset: 0; display: block; width: 100%; height: 100%;
opacity: 0; transition: opacity .9s var(--rk-ease);
}
.rk-herobg.is-live .rk-herobg__canvas { opacity: 1; }
.rk-herobg.is-live::before { visibility: hidden; transition: visibility 0s linear .9s; }
/* On paper the same shapes are pale tints: teal where the fold is lit, a lavender wash above it. */
:root[data-theme="light"] .rk-herobg::before {
background:
radial-gradient(30% 26% at 86% 70%, rgba(45, 212, 191, .34), rgba(94, 234, 212, .14) 55%, rgba(94, 234, 212, 0)),
radial-gradient(26% 50% at 92% 36%, rgba(79, 70, 229, .08), rgba(79, 70, 229, 0) 70%),
radial-gradient(24% 16% at 62% 70%, rgba(45, 212, 191, .16), rgba(45, 212, 191, 0));
}
/* A tint darkens the paper under the lead where the light passes; the body ink the meta line already
takes keeps it well above AA there. */
:root[data-theme="light"] .rk-hero__lead { color: #3F4A5A; }
/* The bar is fixed over the hero, so its height is part of the hero's own top padding. */
.rk-hero__top {
min-height: calc(100svh - 236px);
display: grid; place-items: center;
padding: calc(var(--rk-top-h) + clamp(56px, 8vh, 96px)) var(--rk-gutter) 24px;
}
.rk-hero__text { max-width: 760px; text-align: center; }
.rk-hero__h1 {
/* Geologica's ExtraBold at display size: -.055em, the previous face's setting, made "mo" and "te"
touch at 11rem; -.035em keeps the word one tight shape with air in every join. */
font-size: clamp(3.75rem, 14.5vw, 10.5rem); font-weight: 800; letter-spacing: -.035em; line-height: .94;
}
.rk-hero__lead {
margin: clamp(18px, 2.4vw, 26px) auto 0; max-width: 610px;
font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.55; color: var(--rk-muted);
}
.rk-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.rk-hero__meta { margin-top: 14px; font-size: .875rem; color: var(--rk-muted); }
.rk-hero__next { text-align: center; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.rk-chips li {
display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px;
border-radius: var(--rk-r-pill); border: 1px solid var(--rk-line); background: var(--rk-surface);
font-size: .82rem; font-weight: 600; color: var(--rk-muted);
}
.rk-chips .rk-i { width: 15px; height: 15px; color: var(--rk-accent-ink); }
.rk-chips .is-later { opacity: .62; }
.rk-chips .is-later .rk-i { color: var(--rk-muted); }
.rk-hero__stage { padding-inline: var(--rk-gutter); }
/* --- motion in the first screen ---------------------------------------------------------------
The entrance is CSS alone, so it plays even if site.js never arrives, and it ends in the
element's normal state (fill: backwards) - nothing is left holding a transform. The scroll-linked
pieces are written by site.js on other elements than the ones that animate in: the headline block
drifts (.rk-hero__text) while its children rise in; the window tilts (.rk-win) while its stage
rises in. */
@keyframes rk-in { from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rk-in-soft { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes rk-rise { from { opacity: 0; transform: translate3d(0, 72px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
.rk-js .rk-hero__h1 { animation: rk-in 1s var(--rk-ease-out) .06s backwards; }
.rk-js .rk-hero__lead { animation: rk-in .95s var(--rk-ease-out) .18s backwards; }
.rk-js .rk-hero__cta { animation: rk-in-soft .9s var(--rk-ease-out) .3s backwards; }
.rk-js .rk-hero__meta { animation: rk-in-soft .9s var(--rk-ease-out) .38s backwards; }
.rk-js .rk-chips { animation: rk-in-soft .9s var(--rk-ease-out) .46s backwards; }
.rk-js .rk-hero__stage { animation: rk-rise 1.5s var(--rk-ease-out) .58s backwards; }
/* Before site.js runs, the window rests in the pose it has at the top of the page, so the first
frame the script writes matches what was already drawn. */
.rk-js .rk-win { transform: perspective(1600px) rotateX(16deg) scale(.93); }
}
/* --- the app window rising into the fold ---------------------------------- */
/* A whole window, not a window with its bottom sawn off: the fold is what cuts it, and the first
scroll shows the rest of an object that was always complete. */
.rk-win {
position: relative; transform-origin: 50% 0;
max-width: 1060px; margin-inline: auto;
background: var(--rk-surface); border-radius: var(--rk-r-card);
border: 1px solid var(--rk-line);
box-shadow: inset 0 1px 0 var(--rk-inner);
}
/* No overflow clip on the window: a rounded clip under the tilt's 3D transform is two render passes,
redrawn on every frame the background moves behind it. Nothing in the window reaches past its
rounded edge - the bar rounds its own top corners - except the pointer's light, which is clipped
by a layer of its own below. */
/* The pointer's light: a soft teal disc over the window, moved by transform to under the cursor.
Fine pointers only, never under reduced motion (site.js does not start it there). It is clipped
to the window by .rk-win__light, which holds nothing drawn while the disc is hidden. */
.rk-win__light {
position: absolute; inset: 0; z-index: 3; pointer-events: none;
border-radius: calc(var(--rk-r-card) - 1px); overflow: hidden;
}
.rk-win__glow {
position: absolute; left: 0; top: 0; z-index: 3; width: 620px; height: 620px; margin: -310px 0 0 -310px;
border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(45, 212, 191, .13), rgba(45, 212, 191, .05) 50%, rgba(45, 212, 191, 0));
mix-blend-mode: screen; opacity: 0; visibility: hidden;
transition: opacity .6s var(--rk-ease-out), visibility 0s linear .6s;
}
/* The disc exists for drawing only while it is lit, and for the fade after (the visibility turns
off once the opacity is out). Unlit at opacity 0 its screen blend was still an intermediate
surface inside the tilted window, redrawn on every frame the background moved behind the
window. Its 3D transform is written only while lit too, so no layer outlives the pointer. */
.rk-win.is-lit .rk-win__glow {
opacity: 1; visibility: visible; transition: opacity .6s var(--rk-ease-out);
transform: translate3d(var(--rk-gx, 0px), var(--rk-gy, 0px), 0);
}
:root[data-theme="light"] .rk-win__glow {
mix-blend-mode: multiply;
background: radial-gradient(closest-side, rgba(15, 148, 136, .10), rgba(15, 148, 136, 0));
}
.rk-win__bar {
display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px;
background: var(--rk-high); border-bottom: 1px solid var(--rk-line);
border-radius: calc(var(--rk-r-card) - 1px) calc(var(--rk-r-card) - 1px) 0 0;
}
.rk-win__title { font-weight: 700; font-size: .9rem; }
.rk-win__search {
display: inline-flex; align-items: center; gap: 7px; margin-left: 18px;
height: 26px; padding: 0 12px; border-radius: var(--rk-r-pill);
background: var(--rk-bg); border: 1px solid var(--rk-line);
font-size: .78rem; color: var(--rk-muted);
}
.rk-win__search .rk-i { width: 13px; height: 13px; }
.rk-win__you {
margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
display: grid; place-items: center; font-size: .75rem; font-weight: 800;
background: var(--rk-accent-fill); color: var(--rk-on-accent);
}
.rk-win__body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; padding: 14px; }
.rk-win__side { display: grid; gap: 8px; align-content: start; }
.rk-win__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
/* --- computer row --------------------------------------------------------- */
.rk-pc {
display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--rk-r-sm);
background: var(--rk-high); border: 1px solid transparent;
}
.rk-pc.is-active { border-color: color-mix(in srgb, var(--rk-accent) 42%, transparent); background: var(--rk-highest); }
.rk-pc.is-off { opacity: .68; }
.rk-pc__tile {
width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
background: var(--rk-bg); color: var(--rk-accent-ink);
}
.rk-pc__tile .rk-i { width: 18px; height: 18px; }
.rk-pc__id { display: grid; min-width: 0; }
.rk-pc__id b { font-size: .86rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pc__id small { font-size: .72rem; color: var(--rk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pc__lat { font-family: var(--rk-mono); font-size: .74rem; color: var(--rk-muted); }
/* --- dashboard card ------------------------------------------------------- */
.rk-dash__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rk-dash__row { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.rk-ring { position: relative; width: 96px; height: 96px; flex: none; }
.rk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rk-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.rk-ring__track { stroke: var(--rk-high); }
.rk-ring__fill { stroke: var(--rk-accent); stroke-dasharray: 251.3; stroke-dashoffset: 155.8; }
.rk-ring__fill--61 { stroke: var(--rk-yellow); stroke-dashoffset: 98; }
:root[data-theme="light"] .rk-ring__fill--61 { stroke: #B45309; }
.rk-ring__num {
/* flex on one baseline: as a grid the bare number and the % were two rows. */
position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center;
align-items: baseline; justify-content: center; line-height: 1;
font-size: 1.4rem; font-weight: 800; font-family: var(--rk-mono); letter-spacing: -.04em;
white-space: nowrap;
}
.rk-ring__num i { font-style: normal; font-size: .7em; color: var(--rk-muted); margin-left: 1px; }
.rk-dash__side { display: grid; gap: 10px; min-width: 0; }
.rk-dash__cap { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; color: var(--rk-muted); }
.rk-dash__cap b { font-family: var(--rk-mono); font-size: .85rem; color: var(--rk-text); font-weight: 400; }
.rk-spark { width: 100%; height: 40px; fill: none; stroke: var(--rk-cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
:root[data-theme="light"] .rk-spark { stroke: #0E7490; }
.rk-bar { display: grid; gap: 6px; }
.rk-bar__label { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; color: var(--rk-muted); }
.rk-bar__label b { font-family: var(--rk-mono); font-size: .82rem; color: var(--rk-text); font-weight: 400; }
.rk-bar__track { display: block; height: 7px; border-radius: var(--rk-r-pill); background: var(--rk-high); overflow: hidden; }
.rk-bar__fill { display: block; height: 100%; width: 36%; border-radius: inherit; background: var(--rk-accent); }
.rk-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.rk-metrics p {
display: grid; gap: 2px; padding: 9px 11px; border-radius: var(--rk-r-tile);
background: var(--rk-high); font-size: .74rem; color: var(--rk-muted);
}
.rk-metrics b { font-family: var(--rk-mono); font-size: .85rem; font-weight: 400; color: var(--rk-text); }
.rk-rule {
display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 12px;
border-top: 1px solid var(--rk-line-soft); font-size: .8rem; color: var(--rk-muted);
}
.rk-rule .rk-i { width: 15px; height: 15px; color: var(--rk-accent-ink); }
/* --- terminal card -------------------------------------------------------- */
.rk-term { background: var(--rk-bg); font-family: var(--rk-mono); font-size: .78rem; line-height: 1.75; }
.rk-term__line { color: var(--rk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-term__ps { color: var(--rk-accent-text); }
.rk-term__out { color: var(--rk-muted); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.rk-term__ok { color: var(--rk-green); }
.rk-term__caret { display: inline-block; width: 8px; height: 1.05em; vertical-align: -2px; background: var(--rk-accent); }
.rk-term__keys { margin-top: 12px; }
.rk-term--panel .rk-dash__head { font-family: var(--rk-sans); margin-bottom: 10px; }
/* --- the app's key row, under the terminal and under the live screen ------ */
.rk-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-keys span {
padding: 3px 10px; border-radius: 9px; background: var(--rk-high);
border: 1px solid var(--rk-line); font-family: var(--rk-mono); font-size: .72rem; color: var(--rk-muted);
}
.rk-keys .is-warn { color: var(--rk-orange); border-color: color-mix(in srgb, var(--rk-orange) 36%, transparent); }
/* --- live screen: the app's bar, a small remote desktop, the modifier row -- */
.rk-live { display: grid; gap: 12px; }
.rk-live .rk-dash__head { margin-bottom: 0; }
.rk-live__pc { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.rk-live__pc b { font-weight: 700; letter-spacing: -.01em; }
.rk-desk {
position: relative; aspect-ratio: 16 / 10; border-radius: var(--rk-r-sm); overflow: hidden;
background: var(--rk-desk);
}
.rk-desk__win {
position: absolute; overflow: hidden; border-radius: 9px;
background: var(--rk-surface); border: 1px solid var(--rk-line);
}
.rk-desk__win--back { left: 6%; top: 8%; width: 44%; height: 50%; }
.rk-desk__win--front { left: 30%; top: 22%; width: 62%; height: 58%; }
.rk-desk__bar {
display: flex; justify-content: flex-end; align-items: center; gap: 6px;
height: 18px; padding: 0 8px; background: var(--rk-high); border-bottom: 1px solid var(--rk-line-soft);
}
.rk-desk__bar span { width: 7px; height: 7px; border-radius: 2px; background: var(--rk-highest); }
.rk-desk__bar span:last-child { background: color-mix(in srgb, var(--rk-red) 70%, var(--rk-highest)); }
.rk-desk__lines { display: grid; gap: 7px; align-content: start; padding: 10px; }
.rk-desk__lines span, .rk-desk__side span { display: block; height: 6px; border-radius: 3px; background: var(--rk-highest); }
.rk-desk__lines span:nth-child(1) { width: 72%; }
.rk-desk__lines span:nth-child(2) { width: 92%; }
.rk-desk__lines span:nth-child(3) { width: 56%; }
.rk-desk__lines span:nth-child(4) { width: 80%; }
.rk-desk__cols { display: grid; grid-template-columns: 30% 1fr; height: calc(100% - 18px); }
.rk-desk__side { display: grid; gap: 7px; align-content: start; padding: 10px 8px; background: var(--rk-high); }
.rk-desk__side span:first-child { background: var(--rk-accent); width: 70%; }
.rk-desk__task {
position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px;
background: var(--rk-desk-bar); border-top: 1px solid var(--rk-line-soft);
}
.rk-desk__task span { width: 13px; height: 13px; border-radius: 4px; background: var(--rk-highest); }
.rk-desk__task .is-start { background: var(--rk-accent); }
.rk-desk__task .is-on { box-shadow: inset 0 -2px 0 var(--rk-accent); }
.rk-desk__task i {
position: absolute; right: 10px; font-style: normal; font-family: var(--rk-mono);
font-size: .64rem; color: var(--rk-muted);
}
/* ==================================================== 5. capabilities ==== */
.rk-caps { position: relative; padding-top: var(--rk-section); }
.rk-caps__h2 { margin-bottom: 20px; }
/* Without JavaScript the section is a heading and a plain list, in the flow. With the scroller on,
the heading, the list and the panel are one pinned pane, sized to what it holds (not to the
window) and parked in the middle of the space under the header, so the three read as one unit
with no band of nothing between them. */
.rk-caps__wrap { position: relative; --rk-caps-h: min(580px, calc(100svh - var(--rk-top-h) - 32px)); }
.rk-caps__sticky { max-width: var(--rk-page); margin-inline: auto; padding-inline: var(--rk-gutter); }
.rk-caps__track { display: none; pointer-events: none; }
.rk-caps-on .rk-caps__sticky {
position: sticky;
/* The pane has a fixed height, so parking it in the middle of the space under the header costs
nothing when a description changes length - and at 1440x900 it split what had been 32px above
and 224px of nothing below into two equal margins. */
top: calc(var(--rk-top-h) + max(24px, (100svh - var(--rk-top-h) - var(--rk-caps-h)) / 2));
height: var(--rk-caps-h);
display: grid; grid-template-columns: minmax(260px, 380px) 1fr; grid-template-rows: auto 1fr;
column-gap: clamp(24px, 5vw, 72px);
/* start, not center: centred, the heading moved every time the open description changed length */
align-content: start;
}
.rk-caps-on .rk-caps__h2 { grid-column: 1; grid-row: 1; align-self: start; }
.rk-caps-on .rk-caps__nav { grid-column: 1; grid-row: 2; align-self: start; }
.rk-caps-on .rk-caps__track { display: block; margin-top: calc(-1 * var(--rk-caps-h)); }
.rk-caps__step { height: 46vh; }
.rk-caps__nav { position: relative; }
.rk-caps__list { display: grid; gap: 2px; align-content: start; }
/* --- the rail --------------------------------------------------------------------------------
A hairline beside the names. On it: a faint trail from the top down to the capability on show,
a lit segment beside that capability which grows as its stretch of the section is scrolled, and
a bright head at the segment's leading end. All three are one element each, full rail height,
moved and scaled by transform from three numbers site.js writes (--rk-fill, --rk-beam-y,
--rk-beam-s, --rk-head-y) - never a height, so no frame of the scroll costs layout. */
.rk-rail { display: none; }
.rk-caps-on .rk-caps__nav { padding-left: 20px; }
.rk-caps-on .rk-rail {
display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
border-radius: 1px; background: var(--rk-line);
}
/* 100px tall and scaled from there: the rail itself grows and shrinks with the open description,
and a segment sized as a share of it would stretch while the list moves. */
.rk-rail__fill, .rk-rail__beam {
position: absolute; left: 0; top: 0; width: 100%; height: 100px;
border-radius: inherit; transform-origin: 0 0;
}
.rk-rail__fill {
background: color-mix(in srgb, var(--rk-neon) 32%, transparent);
transform: scaleY(var(--rk-fill, 0));
}
.rk-rail__beam {
background: var(--rk-neon);
box-shadow: 0 0 6px var(--rk-neon-glow), 0 0 14px var(--rk-neon-glow);
transform: translateY(var(--rk-beam-y, 0px)) scaleY(var(--rk-beam-s, 0));
}
.rk-rail__head {
position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px;
border-radius: 50%; background: var(--rk-neon-core);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--rk-neon) 55%, transparent), 0 0 10px 2px var(--rk-neon-glow), 0 0 26px 6px var(--rk-neon-glow);
transform: translateY(var(--rk-head-y, 0px));
opacity: 0;
}
.rk-rail.is-lit .rk-rail__head { opacity: 1; }
/* No CSS transition on the segment: site.js follows its target with a critically damped spring,
which glides from one capability to the next and is never restarted by a scroll frame. */
.rk-rail__head { transition: opacity .3s; }
.rk-cap { border-top: 1px solid var(--rk-line-soft); }
.rk-cap:last-child { border-bottom: 1px solid var(--rk-line-soft); }
/* Side by side the list's closing hairline is its own element, so it follows the names down. */
.rk-caps-on .rk-cap:last-child { border-bottom: 0; }
.rk-caps-on .rk-caps__list::after {
content: ""; height: 1px; margin-top: -2px; background: var(--rk-line-soft);
transform: translate3d(0, var(--rk-open, 0px), 0); transition: transform .42s var(--rk-ease-quart) .1s;
}
.rk-cap__btn { display: block; width: 100%; text-align: left; padding: 14px 4px; }
.rk-cap__t {
font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 700; letter-spacing: -.02em;
color: var(--rk-muted);
}
.rk-cap.is-on .rk-cap__t { color: var(--rk-text); }
/* With the scroller running every name is drawn in the text ink and the ones not on show step back
by opacity - .56 on the dark ground measures 5.1:1 and .66 on paper 5.6:1, so a dimmed name stays
a readable control - and the one on show comes up to full, crossfading rather than recolouring. */
.rk-caps-on .rk-cap__t { color: var(--rk-text); opacity: .56; transition: opacity .3s var(--rk-ease); }
:root[data-theme="light"] .rk-caps-on .rk-cap__t { opacity: .66; }
.rk-caps-on .rk-cap.is-on .rk-cap__t { opacity: 1; text-shadow: 0 0 22px color-mix(in srgb, var(--rk-neon) 38%, transparent); }
:root[data-theme="light"] .rk-caps-on .rk-cap.is-on .rk-cap__t { text-shadow: none; }
.rk-cap__p { font-size: .93rem; color: var(--rk-muted); line-height: 1.55; padding: 0 4px 16px; }
/* With the scroller running, only the active description is open; without JavaScript every one of
them is, and the six panels never render at all - they illustrate text that is already there. */
.rk-caps__stage { display: none; }
.rk-caps-on .rk-caps__stage {
display: block; position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: center;
height: min(560px, var(--rk-caps-h));
}
/* With the scroller running only the active description is open, and opening one costs no layout.
Every description is laid out once, out of the flow, right under its own name; the names under
the open one are moved down by exactly its height (--rk-open, which site.js writes when the
capability changes) with a transform. So a change slides the names and crossfades the text, and
the list's box never changes size. The order is what keeps a name off visible text: the closing
description is gone in 90 ms, the names start sliding at 100 ms, and the opening description
only fades in from 300 ms, once most of its space is open. Visibility follows the slide, so a
closed description leaves the accessibility tree once it has gone. */
.rk-caps-on .rk-cap { position: relative; transition: transform .42s var(--rk-ease-quart) .1s; }
.rk-caps-on .rk-cap.is-on ~ .rk-cap { transform: translate3d(0, var(--rk-open, 0px), 0); }
.rk-caps-on .rk-cap__body {
position: absolute; left: 0; right: 0; top: 100%;
visibility: hidden; transition: visibility 0s linear .52s;
}
.rk-caps-on .rk-cap.is-on .rk-cap__body { visibility: visible; transition: visibility 0s; }
/* The rail's hairline is one element as well, 100px scaled to the list as it is drawn. */
.rk-caps-on .rk-rail { background: none; }
.rk-caps-on .rk-rail::before {
content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100px; border-radius: inherit;
background: var(--rk-line); transform-origin: 0 0; transform: scaleY(var(--rk-rail-s, 0));
transition: transform .42s var(--rk-ease-quart) .1s;
}
.rk-caps__nav.is-snap .rk-cap, .rk-caps__nav.is-snap .rk-rail::before, .rk-caps__nav.is-snap .rk-caps__list::after { transition: none; }
.rk-caps-on .rk-cap__p { opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity .09s linear, transform .2s var(--rk-ease-out); }
.rk-caps-on .rk-cap.is-on .rk-cap__p { opacity: 1; transform: none; transition: opacity .34s var(--rk-ease-out) .3s, transform .5s var(--rk-ease-quart) .26s; }
/* Panels: only their end states live here. site.js moves them with Web Animations (opacity and
transform) from whatever each shows at the moment of a change: the incoming panel (.is-on) is drawn
on top and rises at once, the one that was showing (.is-out) holds under it and fades once it is
covered, and any panel left half-way by a fast wheel (.is-fade) fades quickly under both. Without
an animation running, a panel is either fully on or not drawn at all. */
.rk-panel {
position: absolute; inset: 0; z-index: 0;
opacity: 0; visibility: hidden; pointer-events: none;
}
.rk-panel.is-on { z-index: 3; opacity: 1; visibility: visible; }
.rk-panel.is-fade { z-index: 2; visibility: visible; }
.rk-panel.is-out { z-index: 1; visibility: visible; }
/* Centred by position, not by grid alignment: a scaled card whose layout box is taller than a
short stage was pinned to the stage's top by the grid's safe alignment, and its scaled bottom
fell out of view. translate and the phone's scale compose around the card's own centre. */
.rk-panel > .rk-card {
position: absolute; top: 50%; left: 50%; translate: -50% -50%;
width: 100%; max-width: 560px;
}
/* Side by side, a short card sits level with the list it illustrates instead of floating in the
middle of the stage with empty ground above and below it. */
@media (min-width: 1041px) {
.rk-panel > .rk-card { top: 0; translate: -50% 0; }
}
/* --- files, power, processes --------------------------------------------- */
.rk-files, .rk-proc, .rk-sheet, .rk-list, .rk-setup, .rk-signin, .rk-host { display: grid; gap: 8px; }
.rk-file {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
padding: 9px 11px; border-radius: var(--rk-r-tile); background: var(--rk-high);
}
.rk-file__tile {
width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
background: var(--rk-bg); color: var(--rk-muted);
}
.rk-file__tile .rk-i { width: 16px; height: 16px; }
.rk-file__n { font-family: var(--rk-mono); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-file__m { font-size: .75rem; color: var(--rk-muted); font-family: var(--rk-mono); }
.rk-file__foot { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 6px; }
.rk-sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: var(--rk-highest); margin: 0 auto 4px; }
.rk-act { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--rk-r-tile); background: var(--rk-high); font-size: .9rem; font-weight: 600; }
.rk-act__tile { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--rk-bg); color: var(--rk-muted); }
.rk-act__tile .rk-i { width: 16px; height: 16px; }
.rk-act__tile--red { color: var(--rk-red); }
.rk-act__tile--orange { color: var(--rk-orange); }
.rk-act__tile--blue { color: var(--rk-blue); }
.rk-act__tile--indigo { color: var(--rk-indigo); }
.rk-sheet__note { text-align: center; font-size: .78rem; color: var(--rk-muted); padding-top: 4px; }
.rk-field {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 11px 13px; border-radius: var(--rk-r-tile);
background: var(--rk-high); border: 1px solid var(--rk-line);
font-size: .82rem; color: var(--rk-muted);
}
.rk-field b { font-weight: 600; color: var(--rk-text); font-size: .85rem; }
.rk-field--search { justify-content: flex-start; gap: 9px; }
.rk-field--quiet { border-style: dashed; }
.rk-prow { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 11px; padding: 8px 11px; border-radius: var(--rk-r-tile); background: var(--rk-high); }
.rk-prow.is-sel { background: var(--rk-highest); }
.rk-prow__tile { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: .7rem; font-weight: 800; background: var(--rk-bg); color: var(--rk-muted); }
.rk-prow__tile--blue { color: var(--rk-blue); }
.rk-prow__tile--teal { color: var(--rk-accent-text); }
.rk-prow__tile--indigo { color: var(--rk-indigo); }
.rk-prow__tile--orange { color: var(--rk-orange); }
.rk-prow__n { display: grid; min-width: 0; font-size: .84rem; font-family: var(--rk-mono); }
.rk-prow__n small { font-family: var(--rk-sans); font-size: .7rem; color: var(--rk-muted); }
.rk-prow__pid, .rk-prow__m { font-family: var(--rk-mono); font-size: .75rem; color: var(--rk-muted); }
/* --- tablets and phones: one column to read down ---------------------------------------------
At 1040px and below nothing is pinned and nothing is off to the side: site.js (section 8, FLOW)
sets .rk-caps-flow on the root and moves each panel into its own list item, under its
description, so every capability reads in order - its glyph and name, its description, its live
panel at its own height. On a phone that is one column; from 761px the name and description
stand beside the panel. The only thing pinned is the index: the six glyphs (with their short
names from 761px) in a bar under the header, lit by a pill that slides to the capability on show
- the first whose panel is 66% in view below the header and the index, which keeps the light
while 50% of it stays in view - a tap scrolling to that capability. Only that capability's panel
plays (caps-anim.js). Every rule here carries both root classes, so it
outranks the side-by-side rules above whatever their order. */
.rk-caps__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rk-caps__index, .rk-cap__i { display: none; }
.rk-caps-on.rk-caps-flow .rk-caps__stage,
.rk-caps-on.rk-caps-flow .rk-rail,
.rk-caps-on.rk-caps-flow .rk-caps__track,
.rk-caps-on.rk-caps-flow .rk-caps__list::after { display: none; }
.rk-caps-on.rk-caps-flow .rk-caps__sticky { display: block; position: static; height: auto; }
.rk-caps-on.rk-caps-flow .rk-caps__nav { padding-left: 0; }
/* The index: a bar the page's own ground, full bleed, pinned flush under the header while the
column is in view and let go with the last capability. Six equal cells; the pill under the lit
one is one element moved by transform (--rk-ix, written by site.js), the lit glyph comes up by
opacity - nothing is recoloured over time. */
/* Pinned where the scrolled header's ground ends: that layer is scaled to .875 of the bar (section 2),
and at the bar's full 64px the copy showed through the 8px between the two. */
.rk-caps-on.rk-caps-flow .rk-caps__index {
position: sticky; top: calc(var(--rk-top-h) * .875); z-index: 10;
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 4px;
margin-inline: calc(-1 * var(--rk-gutter)); padding: 6px var(--rk-gutter);
background: var(--rk-bg); border-bottom: 1px solid var(--rk-line-soft);
}
.rk-caps__ixpill {
position: absolute; left: var(--rk-gutter); top: 6px; height: 44px;
width: calc((100% - 2 * var(--rk-gutter) - 20px) / 6);
border-radius: var(--rk-r-pill); background: var(--rk-high);
box-shadow: inset 0 0 0 1px var(--rk-line);
transform: translate3d(calc(var(--rk-ix, 0) * (100% + 4px)), 0, 0);
opacity: 0;
}
.rk-caps__index.is-lit .rk-caps__ixpill { opacity: 1; transition: transform .38s var(--rk-ease-out), opacity .2s linear; }
/* The pill moves by its width plus the 4px gap, from the gutter (4vw): at 768px 30.72px and six
114.42px columns, so every cell but the first put its 1px ring between device pixels and its
rounded ends read heavier. The gutter, the six columns and the pill are whole CSS px here, so each
of its six places is whole device pixels at DPR 2 and 3; the columns give up at most 5px at the end.
+ .01px: a column that divides exactly (390px, 55px) came out a hair under 55 in Chromium's layout
units, and the columns rounded to 54 while the pill stayed 55.
Behind @supports: a declaration with var() in an unknown function would not fall back to the one
before it. */
@supports (width: round(down, 1.5px, 1px)) {
.rk-caps-on.rk-caps-flow .rk-caps__index {
padding-inline: round(var(--rk-gutter), 1px);
grid-template-columns: repeat(6, round(down, (100% - 20px) / 6 + .01px, 1px));
}
.rk-caps__ixpill {
left: round(var(--rk-gutter), 1px);
width: round(down, (100% - 2 * round(var(--rk-gutter), 1px) - 20px) / 6 + .01px, 1px);
}
}
.rk-caps__ix {
position: relative; z-index: 1; min-width: 0; height: 44px;
display: flex; align-items: center; justify-content: center; gap: 7px;
border-radius: var(--rk-r-pill); color: var(--rk-text);
}
.rk-caps__ix .rk-i { width: 20px; height: 20px; opacity: .56; transition: opacity .25s var(--rk-ease); }
:root[data-theme="light"] .rk-caps__ix .rk-i { opacity: .66; }
.rk-caps__ix[aria-current="true"] .rk-i { opacity: 1; color: var(--rk-accent-text); }
.rk-caps__ixl { font-size: .8rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
/* A phone has room for the glyphs only; the short name stays the button's name for a screen reader. */
.rk-caps__ixl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* A capability: glyph and name, description, panel. A tap on the name scrolls it under the index. */
.rk-caps-on.rk-caps-flow .rk-caps__list { gap: 0; }
.rk-caps-on.rk-caps-flow .rk-cap,
.rk-caps-on.rk-caps-flow .rk-cap.is-on ~ .rk-cap {
border: 0; padding: 30px 0 18px; transform: none; transition: none;
scroll-margin-top: calc(var(--rk-top-h) * .875 + 57px);
}
.rk-caps-on.rk-caps-flow .rk-cap + .rk-cap { border-top: 1px solid var(--rk-line-soft); }
.rk-caps-on.rk-caps-flow .rk-cap__btn { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; }
.rk-caps-on.rk-caps-flow .rk-cap__i {
display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px;
background: var(--rk-high); color: var(--rk-accent-text);
}
.rk-caps-on.rk-caps-flow .rk-cap__i .rk-i { width: 19px; height: 19px; }
.rk-caps-on.rk-caps-flow .rk-caps__list .rk-cap .rk-cap__t {
font-size: 1.2rem; color: var(--rk-text); opacity: 1; text-shadow: none; transition: none;
}
.rk-caps-on.rk-caps-flow .rk-cap__body { position: static; visibility: visible; transition: none; }
.rk-caps-on.rk-caps-flow .rk-cap__p { padding: 10px 0 0; opacity: 1; transform: none; transition: none; }
.rk-caps-on.rk-caps-flow .rk-panel {
position: relative; inset: auto; z-index: auto; margin-top: 18px;
opacity: 1; visibility: visible;
}
.rk-caps-on.rk-caps-flow .rk-panel > .rk-card {
position: relative; top: auto; left: auto; translate: none; transform: none;
width: 100%; max-width: none; box-sizing: border-box;
}
@media (min-width: 761px) {
/* Tablets and small laptops: the words beside the panel, as a row of the page, never a scaled
card floating in a band of nothing. The words keep to the top of the row, level with the
panel's head. */
.rk-caps-on.rk-caps-flow .rk-cap {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
column-gap: clamp(28px, 4.5vw, 56px); padding: 36px 0;
}
.rk-caps-on.rk-caps-flow .rk-cap__btn { grid-column: 1; grid-row: 1; margin-top: 6px; }
.rk-caps-on.rk-caps-flow .rk-cap__body { grid-column: 1; grid-row: 2; }
.rk-caps-on.rk-caps-flow .rk-cap__p { max-width: 36ch; }
.rk-caps-on.rk-caps-flow .rk-panel { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
/* ====================================================== 6. install rows == */
/* The clip is on the section, not on the row: a row is the 1200px container, and clipping there
would cut the panel at the container edge instead of letting it run off the screen. */
.rk-rows { padding-top: var(--rk-section); overflow-x: clip; }
.rk-rows .rk-h2 { margin-bottom: calc(var(--rk-head-gap) - clamp(20px, 2.4vw, 34px)); }
.rk-row {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px);
align-items: center; padding-block: clamp(20px, 2.4vw, 34px);
}
.rk-row__text { max-width: 460px; }
.rk-row__text h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); margin-bottom: 12px; }
.rk-row__text p { color: var(--rk-muted); line-height: 1.6; }
.rk-row__art { position: relative; }
/* Exactly the distance from the container's content edge to the edge of the window, so the panel
runs off the screen rather than stopping just short of it or being cut inside the page. */
.rk-row__art > .rk-card {
margin-right: calc((min(100vw, var(--rk-page)) - 100vw) / 2 - var(--rk-gutter));
border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.rk-row--flip .rk-row__text { order: 2; margin-left: auto; }
.rk-row--flip .rk-row__art { order: 1; }
.rk-row--flip .rk-row__art > .rk-card {
margin-right: 0; border-radius: var(--rk-r-card);
margin-left: calc((min(100vw, var(--rk-page)) - 100vw) / 2 - var(--rk-gutter));
border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.rk-opt { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--rk-r-tile); background: var(--rk-high); border: 1px solid transparent; }
.rk-opt.is-sel { border-color: color-mix(in srgb, var(--rk-accent) 46%, transparent); background: var(--rk-highest); }
.rk-opt__dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rk-faint); flex: none; }
.rk-opt.is-sel .rk-opt__dot { border-color: var(--rk-accent); border-width: 5px; }
.rk-opt__t { display: grid; }
.rk-opt__t b { font-size: .88rem; }
.rk-opt__t small { font-size: .75rem; color: var(--rk-muted); }
.rk-switch { display: flex; align-items: center; gap: 11px; padding: 4px 2px; font-size: .85rem; color: var(--rk-muted); }
.rk-switch__ui { width: 36px; height: 21px; border-radius: var(--rk-r-pill); background: var(--rk-accent); position: relative; flex: none; }
.rk-switch__ui::after { content: ""; position: absolute; top: 3px; right: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--rk-on-accent); }
.rk-setup__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.rk-setup__uac { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--rk-muted); }
.rk-setup__uac .rk-i { width: 15px; height: 15px; }
/* Centred in the card, like the app's own code field: the six boxes under a full-width field. */
.rk-code { display: flex; justify-content: center; gap: 7px; }
.rk-code span {
width: 38px; height: 44px; border-radius: 11px; display: grid; place-items: center;
background: var(--rk-high); border: 1px solid var(--rk-line);
font-family: var(--rk-mono); font-size: 1.05rem; font-weight: 700;
}
.rk-code .is-empty { border-color: var(--rk-accent); }
.rk-signin__or { text-align: center; font-size: .78rem; color: var(--rk-faint); }
.rk-signin .rk-btn--wide { cursor: default; }
.rk-list__note { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--rk-muted); padding-top: 4px; }
.rk-list__note .rk-i { width: 15px; height: 15px; color: var(--rk-green); }
/* ====================================================== 7. limitations === */
/* What the product does not protect against, closing the security chapter: after the rules that
say what it does, before the self-hosting guide. */
.rk-sec__limits { margin-top: clamp(36px, 4.4vw, 60px); }
.rk-strip {
display: grid; grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--rk-line); border-radius: var(--rk-r-card); overflow: hidden;
}
.rk-strip > div { position: relative; padding: clamp(22px, 2.6vw, 34px); border-left: 1px solid var(--rk-line); }
.rk-strip > div:first-child { border-left: 0; }
.rk-strip h3 { font-size: 1.05rem; margin-bottom: 9px; }
.rk-strip p { font-size: .9rem; color: var(--rk-muted); line-height: 1.55; }
/* ========================================================= 8. security === */
.rk-sec { padding-top: var(--rk-section); }
/* The heading on its own, then seven rules. In two columns an odd count leaves an empty eighth cell,
so the first rule - no incoming connections, the one the others follow from - runs across both,
and the six under it pair off. Its sentence keeps the measure of a column and a half, so the line
does not run the width of the page. One column on a phone, where the count no longer matters. */
.rk-sec__h2 { margin-bottom: var(--rk-head-gap); }
.rk-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 48px; }
.rk-rules > .rk-sec__rule:first-child { grid-column: 1 / -1; }
.rk-rules > .rk-sec__rule:first-child > p { max-width: 72ch; }
/* From 1300px the padlock (#security::before, in the art below) comes 130px into the column beside the
lower rules. Every rule in the right column keeps a lane of that width and 16px more, so no copy in
either language runs under the picture; the line above each rule still runs the column's width. */
@media (min-width: 1300px) {
.rk-rules > .rk-sec__rule:nth-child(2n+3) { padding-right: calc(130px + 16px); }
}
.rk-sec__rule { padding: 20px 0; border-top: 1px solid var(--rk-line-soft); }
.rk-sec__rule > h3 { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 6px; }
.rk-sec__rule > p { font-size: .92rem; color: var(--rk-muted); line-height: 1.6; }
.rk-rules code { background: var(--rk-high); padding: 1px 6px; border-radius: 6px; }
/* ========================================================= 9. selfhost === */
.rk-self { position: relative; padding-top: var(--rk-section); }
.rk-self__text { max-width: 960px; margin-bottom: var(--rk-head-gap); }
.rk-self__text .rk-lead { margin-top: 16px; }
.rk-self__grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
gap: clamp(20px, 3vw, 40px); align-items: start;
}
.rk-self__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
/* The guide: one card, a segmented switch between the hosts, numbered steps with commands. */
.rk-guide { padding: clamp(16px, 2.2vw, 26px); min-width: 0; }
.rk-guide__tabs { height: 42px; margin-bottom: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rk-guide__tab { height: 34px; padding: 0 16px; font-size: .86rem; letter-spacing: 0; white-space: nowrap; }
.rk-guide__tab[aria-selected="true"] { color: var(--rk-text); background: var(--rk-high); box-shadow: inset 0 1px 0 var(--rk-inner); }
.rk-guide__panel + .rk-guide__panel { margin-top: 36px; }
.rk-guide.is-tabbed .rk-guide__panel + .rk-guide__panel { margin-top: 0; }
.rk-guide__panel { outline-offset: 6px; }
.rk-guide__ph { font-size: 1.15rem; margin: 4px 0 10px; }
.rk-guide.is-tabbed .rk-guide__ph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rk-guide__sum { color: var(--rk-muted); font-size: .95rem; line-height: 1.6; margin: 14px 0 18px; max-width: 64ch; }
/* A closing remark under a host's steps (the router's "if it cannot run containers"): set off by a
hairline, in the muted ink, so it reads as the alternative and not as a fifth step. */
.rk-guide__note {
margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rk-line-soft);
color: var(--rk-muted); font-size: .9rem; line-height: 1.6; max-width: 72ch;
}
/* Five hosts do not fit one row on a phone: the switch wraps onto a second row instead of hiding a
tab behind a sideways scroll. */
@media (max-width: 620px) {
.rk-guide__tabs { height: auto; flex-wrap: wrap; border-radius: 18px; overflow: visible; }
}
.rk-guide code, .rk-self__note code, .rk-wol code {
background: var(--rk-high); padding: 1px 6px; border-radius: 6px; font-size: .84em; overflow-wrap: break-word;
}
.rk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: rk-step; }
.rk-steps > li { position: relative; padding-left: 42px; min-width: 0; counter-increment: rk-step; }
.rk-steps > li::before {
content: counter(rk-step); position: absolute; left: 0; top: -2px;
width: 28px; height: 28px; border-radius: var(--rk-r-pill); display: grid; place-items: center;
background: var(--rk-high); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rk-accent) 40%, transparent);
color: var(--rk-accent-text); font-family: var(--rk-mono); font-size: .8rem; font-weight: 700;
}
.rk-steps p { font-size: .95rem; line-height: 1.6; }
/* A command: a header row says where it runs and holds the copy button, so the button is never
beside or over the command text; the text scrolls sideways in its own box under the row. */
.rk-cmd {
margin-top: 10px; min-width: 0; overflow: hidden;
background: var(--rk-bg); border: 1px solid var(--rk-line); border-radius: var(--rk-r-tile);
}
.rk-cmd__bar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
min-height: 34px; padding: 2px 3px 2px 14px; border-bottom: 1px solid var(--rk-line-soft);
}
.rk-cmd__at { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--rk-muted); }
.rk-cmd pre {
margin: 0; padding: 10px 14px; overflow-x: auto;
font-family: var(--rk-mono); font-size: .78rem; line-height: 1.7; color: var(--rk-text); tab-size: 2;
/* JetBrains Mono joins "--" into one long dash; a command someone may retype shows both hyphens. */
font-variant-ligatures: none;
}
.rk-cmd pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; overflow-wrap: normal; }
.rk-cmd__copy {
position: relative; display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 10px; border-radius: var(--rk-r-pill);
font-size: .74rem; font-weight: 700; color: var(--rk-muted);
}
.rk-cmd__copy:hover { color: var(--rk-text); background: var(--rk-high); }
.rk-cmd__copy .rk-i { width: 14px; height: 14px; }
.rk-cmd__ok { position: absolute; left: 10px; opacity: 0; }
.rk-cmd__copy.is-done { color: var(--rk-accent-text); }
.rk-cmd__copy.is-done .rk-cmd__i { opacity: 0; }
.rk-cmd__copy.is-done .rk-cmd__ok { opacity: 1; }
/* What a step does not need to be read: collapsed under "Подробнее", in the muted ink, with a chevron
that turns. The browser's own , so it opens from the keyboard and without JavaScript. */
.rk-guide__more { margin-top: 8px; }
.rk-guide__more > summary {
display: inline-flex; align-items: center; gap: 8px; min-height: 30px; cursor: pointer; list-style: none;
font-size: .86rem; font-weight: 600; color: var(--rk-accent-text);
}
.rk-guide__more > summary::-webkit-details-marker { display: none; }
.rk-guide__more > summary::after {
content: ""; width: 6px; height: 6px; margin-top: -3px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.rk-guide__more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.rk-guide__more > p { margin-top: 2px; color: var(--rk-muted); font-size: .9rem; line-height: 1.6; max-width: 64ch; }
.rk-self__note { padding-inline: 4px; font-size: .9rem; color: var(--rk-muted); line-height: 1.6; }
/* Wake-on-LAN on the PC: the five things the PC itself needs once, numbered like the guide's steps. */
.rk-wol { padding: 20px; min-width: 0; }
.rk-wol h3 { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; margin-bottom: 8px; letter-spacing: -.01em; }
.rk-wol h3 .rk-i { width: 18px; height: 18px; color: var(--rk-accent-ink); }
.rk-wol__lead { font-size: .9rem; color: var(--rk-muted); line-height: 1.6; margin-bottom: 16px; }
.rk-wol__steps { gap: 14px; }
.rk-wol__steps p { font-size: .9rem; line-height: 1.55; color: var(--rk-muted); }
.rk-wol__steps b { color: var(--rk-text); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
.rk-guide.is-tabbed .rk-guide__panel.is-in { animation: rk-guide-in .28s var(--rk-ease-out) both; }
.rk-cmd__i, .rk-cmd__ok { transition: opacity .18s var(--rk-ease); }
}
@keyframes rk-guide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ========================================================= 10. download == */
.rk-dl { position: relative; padding-top: var(--rk-section); padding-bottom: clamp(40px, 5vw, 72px); }
.rk-dl .rk-h2 { margin-bottom: var(--rk-head-gap); }
.rk-dl__rows { display: grid; gap: 12px; }
.rk-dl__row {
position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
padding: clamp(18px, 2.4vw, 26px); border-radius: var(--rk-r-card);
background: var(--rk-surface); border: 1px solid var(--rk-line);
box-shadow: inset 0 1px 0 var(--rk-inner);
}
.rk-dl__row--quiet { background: transparent; border-style: dashed; }
.rk-dl__what { min-width: 0; }
.rk-dl__what h3 { font-size: 1.15rem; margin-bottom: 6px; }
.rk-dl__meta { font-size: .9rem; color: var(--rk-muted); max-width: 62ch; }
.rk-dl__hash { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.rk-dl__hash code {
font-size: .72rem; color: var(--rk-muted); background: var(--rk-high);
padding: 5px 10px; border-radius: 9px; word-break: break-all;
}
.rk-copy { font-size: .78rem; font-weight: 700; color: var(--rk-accent-text); }
.rk-copy:hover { text-decoration: underline; }
/* ============================================================== 11. faq == */
.rk-faq { padding-top: var(--rk-section); }
.rk-faq .rk-h2 { margin-bottom: var(--rk-head-gap); }
.rk-faq__list { border-top: 1px solid var(--rk-line-soft); }
.rk-faq details { border-bottom: 1px solid var(--rk-line-soft); }
.rk-faq summary {
list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative;
font-weight: 700; font-size: 1.02rem;
}
.rk-faq summary::-webkit-details-marker { display: none; }
.rk-faq summary::after {
content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px;
border-right: 2px solid var(--rk-muted); border-bottom: 2px solid var(--rk-muted);
transform: translateY(-70%) rotate(45deg); transition: transform .42s var(--rk-ease-out);
}
/* The chevron follows where the answer is going, not the attribute: on the way closed [open] stays
until the height is in (site.js, 12c), and .is-closing turns the chevron back at the first frame. */
.rk-faq details[open]:not(.is-closing) summary::after { transform: translateY(-30%) rotate(-135deg); }
.rk-faq details.is-moving { overflow: hidden; }
.rk-faq details p { padding: 0 36px 20px 0; color: var(--rk-muted); font-size: .95rem; max-width: 78ch; }
.rk-faq code { background: var(--rk-high); padding: 1px 6px; border-radius: 6px; }
/* =========================================================== 12. footer == */
.rk-foot { margin-top: var(--rk-section); border-top: 1px solid var(--rk-line); padding-top: 44px; }
.rk-foot__row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
.rk-foot__brand p { font-size: .88rem; color: var(--rk-muted); margin-top: 12px; max-width: 34ch; }
.rk-foot__brand .rk-brand { font-size: 1rem; }
.rk-foot__hub { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--rk-faint); margin-top: 12px; }
.rk-foot__links { display: grid; gap: 9px; align-content: start; }
.rk-foot__links a { font-size: .9rem; color: var(--rk-muted); }
.rk-foot__links a:hover { color: var(--rk-text); }
.rk-foot__legal {
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
border-top: 1px solid var(--rk-line-soft); padding-block: 20px 32px;
font-size: .78rem; color: var(--rk-faint);
}
/* ================================================ 13. light and art ==== */
/* --- the chapter divider ------------------------------------------------------------------
One pixel of teal, brightest in the middle and gone at both ends, with a soft elliptical bloom
around its centre and a hotter core. It is a light: nothing here is a filled surface. Where it
scrolls into view it draws itself out from the centre once, by scaleX alone. */
.rk-neon { position: relative; padding-top: var(--rk-section); pointer-events: none; }
.rk-neon__line {
display: block; position: relative; height: 1px; margin-inline: auto;
width: min(1080px, calc(100% - 2 * var(--rk-gutter)));
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rk-neon) 70%, transparent) 30%, var(--rk-neon) 50%, color-mix(in srgb, var(--rk-neon) 70%, transparent) 70%, transparent);
}
.rk-neon__line::before {
content: ""; position: absolute; left: 18%; right: 18%; top: -9px; height: 19px;
background: radial-gradient(closest-side, var(--rk-neon-glow), transparent);
}
.rk-neon__line::after {
content: ""; position: absolute; left: 38%; right: 38%; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--rk-neon-core), transparent);
box-shadow: 0 0 8px 1px var(--rk-neon-glow);
}
/* The draw: the line opens from its centre, then the bloom and the hot core come up on it. */
.rk-reveal .rk-neon__line { transform: scaleX(0); }
.rk-reveal .rk-neon__line::before, .rk-reveal .rk-neon__line::after { opacity: 0; }
.rk-reveal .rk-neon.is-in .rk-neon__line { transform: scaleX(1); transition: transform 1.3s var(--rk-ease-out); }
.rk-reveal .rk-neon.is-in .rk-neon__line::before,
.rk-reveal .rk-neon.is-in .rk-neon__line::after { opacity: 1; transition: opacity .9s var(--rk-ease) .45s; }
.rk-reveal .rk-neon.is-instant .rk-neon__line,
.rk-reveal .rk-neon.is-instant .rk-neon__line::before,
.rk-reveal .rk-neon.is-instant .rk-neon__line::after { transition: none; }
/* The one divider that carries art: the generated band, its own razor line laid exactly under the
drawn one (the art's line sits at 47.6% of its height, and so does the band's centre line). */
.rk-neon__art {
position: absolute; z-index: -1; left: 0; right: 0; top: var(--rk-section); height: clamp(170px, 20vw, 300px);
transform: translateY(-47.6%);
background: no-repeat center 47.6% / cover;
mix-blend-mode: screen;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
mask-composite: intersect;
}
/* --- background art ------------------------------------------------------------------------
Near-black pictures with one light in them. Each sits behind its section's content, covered
(never an edge), dimmed by a plain black scrim and composited with a screen blend: the picture's
black is darker than the page's ground, and drawn normally it laid a dark rectangle over every
section it sat in; screened, black changes nothing and only the light adds. A mask still fades
the light itself out before any edge of the layer. The image is attached only once site.js sees
the layer coming near (.is-near), or straight away without JavaScript. */
.rk-bg { position: absolute; z-index: -1; pointer-events: none; background: no-repeat center / cover; mix-blend-mode: screen; }
.rk-bg::after { content: ""; position: absolute; inset: 0; background: var(--rk-scrim); }
.rk-caps__wrap, .rk-self__in, .rk-dl .rk-wrap { position: relative; }
/* It fades in from its own top edge as well: at full strength there it met the hero's faded foot in
a hard teal line the moment the window scrolled past it. */
.rk-bg--glow {
left: 0; right: 0; top: 0; height: min(100svh, 860px);
background-position: center top;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 30%, transparent), linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(180deg, transparent, #000 16%, #000 30%, transparent), linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
mask-composite: intersect;
}
.rk-bg--circuit {
right: 0; top: 0; bottom: -40px; width: min(1100px, 82%);
background-position: right center;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
mask-composite: intersect;
}
.rk-bg--rays {
left: 0; right: 0; bottom: 0; height: min(100%, 820px);
background-position: center bottom;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 45%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(180deg, transparent, #000 45%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
mask-composite: intersect;
}
.rk-bg--rays::after { background: rgba(0, 0, 0, .5); }
.rk-no-js .rk-bg--glow, .rk-bg--glow.is-near { background-image: url("/static/assets/bg-glow-top.webp"); }
.rk-no-js .rk-bg--circuit, .rk-bg--circuit.is-near { background-image: url("/static/assets/bg-circuit-indigo.webp"); }
.rk-no-js .rk-bg--rays, .rk-bg--rays.is-near { background-image: url("/static/assets/bg-download-rays.webp"); }
.rk-no-js .rk-neon__art, .rk-neon__art.is-near { background-image: url("/static/assets/bg-neon-divider.webp"); }
/* --- isometric art ---------------------------------------------------------------------------
The app's own illustrations (the Compose drawables iso_*.webp, copied under new names) and nine
drawn in the same style (docs/website.md). A visible part of the page, not a texture: 150-460px
beside a wide layout, a band of their own between the chapters on a stacked one. Where one may
rest is decided by the copy: never under a heading, a paragraph or a question - only in the room
the text leaves, behind a card (every card is a positioned surface, so a layer at z-index -1
passes under it), cut by the window's edge, or rising into the chapter divider above. Each
chapter has its own sides, sizes and heights, so no two repeat the same corner.
Two kinds of host: an element of its own (.rk-iso, install and your own server) and a section's
own pseudo-elements, addressed by id or class, where the markup belongs to another part of the
page. The picture is attached only when site.js sees the host coming near (.is-near on the
element, .rk-art-near on the section), or at once without JavaScript. Where a 2x file exists a
wide layout chooses by density through image-set(); a stacked one always takes the 1x file,
which is already twice the size it is drawn at there. */
:root {
--rk-edge: calc(max(0px, (100vw - var(--rk-page)) / 2) + var(--rk-gutter));
--rk-art-o: .55;
--rk-art-a: 24px; /* how far a picture drifts either way as it crosses the window */
}
/* clip, not hidden: no scroll container, so the pinned capabilities stay pinned, and a picture cut
by the window's edge never widens the document. */
#features, #preview, #install, #security, #selfhost, #download, #faq { position: relative; overflow-x: clip; }
.rk-row { position: relative; }
.rk-iso,
#features::before, #features::after, .rk-caps__wrap::before, .rk-caps__wrap::after,
#preview::before, #preview::after, #install::before, #security::before, #security::after,
#selfhost::before, #selfhost::after, #download::before, #download::after, #faq::before {
position: absolute; z-index: -1; pointer-events: none;
background: no-repeat center / contain;
opacity: var(--rk-art-o);
}
#features::before, #features::after, .rk-caps__wrap::before, .rk-caps__wrap::after,
#preview::before, #preview::after, #security::before, #security::after,
#selfhost::after, #download::before, #download::after, #faq::before { content: ""; }
.rk-no-js #features::before, #features.rk-art-near::before {
background-image: url("/static/assets/art-iso-terminal.webp");
background-image: image-set(url("/static/assets/art-iso-terminal.webp") 1x, url("/static/assets/art-iso-terminal-2x.webp") 2x);
}
.rk-no-js #features::after, #features.rk-art-near::after {
background-image: url("/static/assets/art-iso-power.webp");
background-image: image-set(url("/static/assets/art-iso-power.webp") 1x, url("/static/assets/art-iso-power-2x.webp") 2x);
}
.rk-no-js .rk-caps__wrap::before, #features.rk-art-near .rk-caps__wrap::before { background-image: url("/static/assets/art-iso-cpu.webp"); }
.rk-no-js .rk-caps__wrap::after, #features.rk-art-near .rk-caps__wrap::after { background-image: url("/static/assets/art-iso-temp.webp"); }
.rk-no-js #preview::before, #preview.rk-art-near::before { background-image: url("/static/assets/art-iso-gpu.webp"); }
.rk-no-js #preview::after, #preview.rk-art-near::after { background-image: url("/static/assets/art-iso-ram.webp"); }
.rk-no-js #install::before, #install.rk-art-near::before { background-image: url("/static/assets/art-iso-settings.webp"); }
.rk-no-js .rk-iso--settings, .rk-iso--settings.is-near { background-image: url("/static/assets/art-iso-settings.webp"); }
.rk-no-js .rk-iso--phone, .rk-iso--phone.is-near {
background-image: url("/static/assets/art-iso-phone.webp");
background-image: image-set(url("/static/assets/art-iso-phone.webp") 1x, url("/static/assets/art-iso-phone-2x.webp") 2x);
}
.rk-no-js .rk-iso--network, .rk-iso--network.is-near { background-image: url("/static/assets/art-iso-network.webp"); }
.rk-no-js #security::after, #security.rk-art-near::after { background-image: url("/static/assets/art-iso-account.webp"); }
.rk-no-js #security::before, #security.rk-art-near::before {
background-image: url("/static/assets/art-iso-lock.webp");
background-image: image-set(url("/static/assets/art-iso-lock.webp") 1x, url("/static/assets/art-iso-lock-2x.webp") 2x);
}
.rk-no-js #selfhost::before, #selfhost.rk-art-near::before { background-image: url("/static/assets/art-iso-server.webp"); }
.rk-no-js .rk-iso--server, .rk-iso--server.is-near {
background-image: url("/static/assets/art-iso-server.webp");
background-image: image-set(url("/static/assets/art-iso-server.webp") 1x, url("/static/assets/art-iso-server-2x.webp") 2x);
}
.rk-no-js .rk-iso--disk, .rk-iso--disk.is-near { background-image: url("/static/assets/art-iso-disk.webp"); }
.rk-no-js #selfhost::after, #selfhost.rk-art-near::after {
background-image: url("/static/assets/art-iso-board.webp");
background-image: image-set(url("/static/assets/art-iso-board.webp") 1x, url("/static/assets/art-iso-board-2x.webp") 2x);
}
.rk-no-js #download::after, #download.rk-art-near::after {
background-image: url("/static/assets/art-iso-desktop.webp");
background-image: image-set(url("/static/assets/art-iso-desktop.webp") 1x, url("/static/assets/art-iso-desktop-2x.webp") 2x);
}
.rk-no-js #download::before, #download.rk-art-near::before {
background-image: url("/static/assets/art-iso-files.webp");
background-image: image-set(url("/static/assets/art-iso-files.webp") 1x, url("/static/assets/art-iso-files-2x.webp") 2x);
}
.rk-no-js #faq::before, #faq.rk-art-near::before {
background-image: url("/static/assets/art-iso-relay.webp");
background-image: image-set(url("/static/assets/art-iso-relay.webp") 1x, url("/static/assets/art-iso-relay-2x.webp") 2x);
}
/* Where each one rests beside a wide layout. --rk-edge is the text column's edge measured from the
window's, so a picture is placed against the column, not against a window width; --w is its
width, which the offsets that cut it at the window's edge are worked out from. */
/* Capabilities: the pinned pane holds the names on the left and the stage on the right for several
screens, and where it pins depends on the window's height, so all four rest in the right half,
where the pane has nothing but the stage: they pass under it and show above and below it. */
#features::before { --w: clamp(300px, 26vw, 400px); width: var(--w); aspect-ratio: 496 / 520; top: calc(var(--rk-section) - 90px); right: calc(var(--rk-edge) - 170px); }
#features::after { --w: clamp(220px, 18vw, 260px); width: var(--w); aspect-ratio: 520 / 426; top: calc(var(--rk-section) - 80px); left: 50%; }
.rk-caps__wrap::before { --w: clamp(290px, 26vw, 400px); width: var(--w); aspect-ratio: 512 / 319; top: 60%; right: calc(var(--rk-edge) - 170px); }
.rk-caps__wrap::after { --w: clamp(150px, 12vw, 190px); width: var(--w); aspect-ratio: 342 / 512; top: 84%; right: calc(var(--rk-edge) - 60px); }
/* The Windows app: beside the heading, its foot under the window; and low in the left gutter. */
#preview::before { --w: clamp(320px, 30vw, 440px); width: var(--w); aspect-ratio: 512 / 335; top: calc(var(--rk-section) - 120px); right: calc(var(--rk-edge) - 70px); }
#preview::after { --w: clamp(240px, 21vw, 320px); width: var(--w); aspect-ratio: 489 / 512; top: 44%; left: calc(var(--rk-edge) - 230px); }
/* Install: the gear over the first panel's top edge, the phone in the left gutter beside step 1, its
foot above the sign-in panel, the router under step 3 and into the divider after it. The phone's
right edge stays 8px short of the column; its width is held to 1.8 times the gutter it shows in,
so more than half of it is always inside the window. */
.rk-iso--settings { --w: clamp(250px, 23vw, 340px); width: var(--w); aspect-ratio: 495 / 512; top: calc(-1 * clamp(170px, 15vw, 220px)); right: 2vw; }
.rk-iso--phone { --w: min(clamp(260px, 25vw, 370px), calc(1.8 * (var(--rk-edge) - 8px))); width: var(--w); aspect-ratio: 520 / 370; top: calc(-40px - var(--w) * 370 / 520); left: calc(var(--rk-gutter) - 8px - var(--w)); }
.rk-iso--network { --w: clamp(220px, 19vw, 280px); width: var(--w); aspect-ratio: 487 / 512; top: calc(100% - 60px); left: clamp(290px, 27vw, 420px); }
/* Security: the shield rises out of the divider and ends above the first rules; the padlock rests
in the right gutter, 130px into the right column's lane beside the lower rules, its foot under the
limits. */
#security::after { --w: clamp(180px, 15vw, 208px); width: var(--w); aspect-ratio: 384 / 512; top: -140px; right: calc(var(--rk-edge) + 3vw); }
#security::before { --w: clamp(230px, 19vw, 290px); width: var(--w); aspect-ratio: 402 / 520; top: calc(100% - 485px); right: calc(var(--rk-edge) + 130px - var(--w)); }
/* Your own server: the server right of the lead, the disk in the left gutter under the guide's
edge, the board below the side column and into the divider before download. The lead is at most
960px, so it ends 160px short of the column's right edge; the server's left edge is tied to its
width and stays 130px short of that edge, 30px clear of the lead at every width. The board starts
12px below the section's foot: the side column ends with the plain-text note about the apps'
address, and 110px above the foot it lay under that note's lines (its pins reach its box's top). */
.rk-iso--server { --w: clamp(250px, 21vw, 320px); width: var(--w); aspect-ratio: 520 / 472; top: calc(var(--rk-section) - 60px); right: calc(var(--rk-edge) + 130px - var(--w)); }
.rk-iso--disk { --w: clamp(240px, 20vw, 300px); width: var(--w); aspect-ratio: 512 / 437; top: 44%; left: calc(var(--rk-edge) + 150px - var(--w)); }
#selfhost::after { --w: clamp(270px, 24vw, 360px); width: var(--w); aspect-ratio: 520 / 410; top: calc(100% + 12px); right: calc(var(--rk-edge) + 40px); }
/* Download: a picture in each gutter. The iOS row has no ground of its own (a dashed frame), so the
desktop PC ends 10px outside the column, clear of that frame, and like the phone its width is held
to 1.8 times the gutter, so more than half of it is inside the window. */
#download::after { --w: min(clamp(280px, 25vw, 380px), calc(1.8 * (var(--rk-edge) - 10px))); width: var(--w); aspect-ratio: 520 / 470; top: 175px; left: calc(var(--rk-edge) - 10px - var(--w)); }
#download::before { --w: clamp(260px, 23vw, 340px); width: var(--w); aspect-ratio: 439 / 520; top: 8%; right: calc(var(--rk-edge) + 110px - var(--w)); }
/* Questions: the relay starts in the download chapter's bottom padding (40-72px), below the iOS
row's dashed frame, not inside it, and rests in the right part beside the questions, past the
answers' 78ch measure and short of the chevrons at the column's end. */
#faq::before { --w: clamp(240px, 21vw, 310px); width: var(--w); aspect-ratio: 390 / 520; top: -36px; right: calc(var(--rk-edge) + 40px); }
/* A gutter shows a useful part of a picture only from about 1300px (--rk-edge 90px); narrower, the
four that live in one step out and the rest keep their places. */
@media (min-width: 1040.02px) and (max-width: 1299.98px) {
#preview::after, .rk-iso--disk, #security::before { display: none; }
}
/* The phone and the desktop PC sit in the gutter itself and would be under 260px at the width that
keeps half of them on screen before about 1430px (--rk-edge 155px). The download chapter keeps a
picture of its own there: the folder comes in from the gutter, where it would lie under the rows,
and rests between the heading and the board above it (the heading ends by 320px, the board starts
at 690px or more), its foot tucked 13-43px under the first row. */
@media (min-width: 1040.02px) and (max-width: 1439.98px) {
.rk-iso--phone, #download::after { display: none; }
#download::before { --w: clamp(190px, 17vw, 230px); top: calc(var(--rk-section) - 120px); right: auto; left: calc(50% - var(--w) * .6 - 60px); }
}
/* Below 1240px the lead of your own server runs to the window's edge, and the server would lie
under its end. */
@media (min-width: 1040.02px) and (max-width: 1239.98px) {
.rk-iso--server { display: none; }
}
/* Stacked: one picture before each chapter's heading, --rk-art-h tall, cut by the window's edge, on
alternate sides from chapter to chapter. It ends 10px above the heading and rises through the
chapter's top padding, a band of margin above the chapter, and the empty room above that where
there is some (--rk-rise): a divider's own top padding before install, security and download,
the download chapter's bottom padding before the questions. The band is only what that room
lacks. It is a margin, held from the first paint, so nothing moves when a picture arrives; a
margin lies outside the box an anchor scrolls to, so a link still lands the heading 24px under the
bar, and the chapters' own padding-top and scroll-margin-top rules are left as they are. */
@media (max-width: 1040px) {
#features, #preview, #install, #security, #selfhost, #download, #faq {
--rk-art-h: clamp(180px, 26vw, 260px);
--rk-rise: 0px;
--rk-band: calc(var(--rk-art-h) + 10px - var(--rk-section) - var(--rk-rise));
margin-top: var(--rk-band);
}
#install, #security, #download { --rk-rise: calc(var(--rk-section) - 16px); }
#faq { --rk-rise: 24px; }
:root { --rk-art-a: 12px; --rk-art-o: .5; }
#features::after, .rk-caps__wrap::before, .rk-caps__wrap::after, #preview::after, .rk-iso,
#security::before, #selfhost::after, #download::before { display: none; }
#install::before, #selfhost::before { content: ""; }
#features::before, #preview::before, #install::before, #security::after, #selfhost::before, #download::after, #faq::before {
width: auto; height: var(--rk-art-h);
top: calc(-1 * (var(--rk-band) + var(--rk-rise))); right: auto; left: auto; bottom: auto;
}
#features::before { right: -4vw; }
#preview::before { left: -4vw; }
#install::before { right: -4vw; aspect-ratio: 495 / 512; }
#security::after { left: -2vw; }
#selfhost::before { right: -4vw; aspect-ratio: 520 / 472; }
#download::after { left: -4vw; }
#faq::before { right: -2vw; }
.rk-no-js #features::before, #features.rk-art-near::before { background-image: url("/static/assets/art-iso-terminal.webp"); }
.rk-no-js #download::after, #download.rk-art-near::after { background-image: url("/static/assets/art-iso-desktop.webp"); }
.rk-no-js #faq::before, #faq.rk-art-near::before { background-image: url("/static/assets/art-iso-relay.webp"); }
}
/* The drift: as a picture crosses the window it moves a little against the page, by translate on
a scroll timeline - the compositor's, no script, no work while the page is still, nothing in a
hidden tab. Without scroll timelines, and under reduced motion, the pictures hold still. */
@keyframes rk-art-drift { from { translate: 0 var(--rk-art-a); } to { translate: 0 calc(-1 * var(--rk-art-a)); } }
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.rk-iso,
#features::before, #features::after, .rk-caps__wrap::before, .rk-caps__wrap::after,
#preview::before, #preview::after, #install::before, #security::before, #security::after,
#selfhost::before, #selfhost::after, #download::before, #download::after, #faq::before {
animation: rk-art-drift linear both;
animation-timeline: view();
animation-range: cover;
}
}
}
/* Not on a phone: there a band of art drifts 12px at most, and its scroll timelines cost a style
recalculation on every frame of every scroll - 1 161 over the whole page at 390px and 4x CPU, 823
without the drift. Tablets and wider keep it. */
@media (max-width: 760px) {
.rk-iso,
#features::before, #features::after, .rk-caps__wrap::before, .rk-caps__wrap::after,
#preview::before, #preview::after, #install::before, #security::before, #security::after,
#selfhost::before, #selfhost::after, #download::before, #download::after, #faq::before {
animation: none;
}
}
/* On paper the navy objects are turned over - a pale body with dark teal edges, like a drawing -
and multiplied, so their light parts vanish into the paper and only the lines land. */
:root[data-theme="light"] { --rk-art-o: .55; }
:root[data-theme="light"] .rk-iso,
:root[data-theme="light"] #features::before, :root[data-theme="light"] #features::after,
:root[data-theme="light"] .rk-caps__wrap::before, :root[data-theme="light"] .rk-caps__wrap::after,
:root[data-theme="light"] #preview::before, :root[data-theme="light"] #preview::after,
:root[data-theme="light"] #install::before, :root[data-theme="light"] #security::before,
:root[data-theme="light"] #security::after, :root[data-theme="light"] #selfhost::before,
:root[data-theme="light"] #selfhost::after, :root[data-theme="light"] #download::before,
:root[data-theme="light"] #download::after, :root[data-theme="light"] #faq::before {
filter: invert(1) hue-rotate(180deg); mix-blend-mode: multiply;
}
/* Behind the capabilities panel a wide layout shows the terminal window and the power button large
and nearly whole, and their inverted bodies read as a pale lilac slab beside the panel. On paper
these two - and the processor and the thermometer under the pinned pane - are lifted towards the
paper and paler, so the lines stay and the slab does not. Stacked, each is one small band. */
@media (min-width: 1040.02px) {
:root[data-theme="light"] #features::before, :root[data-theme="light"] #features::after,
:root[data-theme="light"] .rk-caps__wrap::before, :root[data-theme="light"] .rk-caps__wrap::after {
filter: invert(1) hue-rotate(180deg) brightness(1.3) saturate(.5);
opacity: .34;
}
}
/* The light theme turns the line art over - ink for light, paper for night - keeps the light's
own hue (the hue-rotate undoes the inversion's) and multiplies instead of screening, so white
changes nothing and a streak or a trace lands on the paper as a thin tint. The brightness lift
takes the pictures' inverted ambient, a near-white that multiplied into grey haze, to paper. The two pictures that
are a glow rather than a line, the top glow and the rays, inverted into grey fog behind the copy:
they are not drawn on paper at all, and cost no request there. */
:root[data-theme="light"] .rk-bg, :root[data-theme="light"] .rk-neon__art { filter: invert(1) hue-rotate(180deg) brightness(1.3); mix-blend-mode: multiply; }
:root[data-theme="light"] .rk-bg::after { background: rgba(255, 255, 255, .35); }
:root[data-theme="light"] .rk-bg--circuit { opacity: .5; }
:root[data-theme="light"] .rk-neon__art { opacity: .45; }
:root[data-theme="light"] .rk-bg--glow, :root[data-theme="light"] .rk-bg--rays { display: none; }
/* Measured fixes after the neon pass.
- On a stacked layout the circuit picture lands straight under the self-hosting copy (1.15:1 at
390 px); it belongs beside a wide layout only.
- On paper its dark field inverted into a grey patch left of the server card: the fade clears later
and the picture is fainter.
- The line under the hero buttons takes the body ink on paper, where the hero's light tints the
ground under it. */
@media (max-width: 1039.98px) { .rk-bg--circuit { display: none; } }
:root[data-theme="light"] .rk-bg--circuit {
opacity: .32;
-webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 70%), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
mask-image: linear-gradient(90deg, transparent 38%, #000 70%), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
:root[data-theme="light"] .rk-hero__meta { color: #3F4A5A; }
/* ========================================================== 14. reveal === */
/* One IntersectionObserver (site.js, section 5a). What it hides is keyed on .rk-reveal, which only
that script sets, so a page whose script never ran shows everything. An element rises 24px and
fades in once, when its top passes 90% of the window; elements that arrive together are staggered
by 70ms each (--rk-d, at most five steps) in document order, so a section's heading leads and its
rows follow. Scrolling back up never hides anything again. Whatever was already above the window
when the page opened (a reload halfway down) is shown at once, with no transition. */
/* A plain 2D offset while it waits: a 3D one made every hidden element on the page a compositor
layer of its own from the first frame (90 layers under the first screen of a phone, 48 without).
The transition to rest is composited all the same. */
.rk-reveal [data-reveal] { opacity: 0; transform: translateY(24px); }
.rk-reveal [data-reveal].is-in {
opacity: 1; transform: none;
transition: opacity .7s var(--rk-ease) var(--rk-d, 0ms), transform .9s var(--rk-ease-out) var(--rk-d, 0ms);
}
.rk-reveal [data-reveal].is-instant { transition: none; }
/* A number that counts up once when its block comes in (site.js, countUp): a box held at the width
of the final value, so the sentence around it never moves while it counts. Not tabular figures:
a tabular 1 sits in a wide cell, and 120 read as "1 20". */
.rk-num { display: inline-block; text-align: right; white-space: nowrap; }
/* ========================================================== 15. widths === */
@media (max-width: 1040px) {
/* A backdrop blur re-rasterises everything scrolling under the bar on every frame; on a phone
that is the most expensive thing on the page for nothing but a frosted edge. The bar's ground
is opaque instead: at 94 % the key row of the hero window still read through it. */
.rk-top::before, .rk-top.is-scrolled::before, .rk-no-js .rk-top::before {
-webkit-backdrop-filter: none; backdrop-filter: none;
background: var(--rk-bg);
}
/* Brand, the one filled button, the burger; sections, language, theme and sign-in are in the drawer. */
.rk-top__row { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; }
.rk-top__nav, .rk-top__tools .rk-seg, .rk-top__sep, .rk-top__tools .rk-top__signin { display: none; }
.rk-top__dl { height: 36px; }
.rk-burger { display: inline-flex; }
.rk-win__body { grid-template-columns: minmax(0, 1fr); }
/* The window stacks: the computer list becomes a row of two above the dashboard, and the
sleeping machine steps out rather than making a third, half-width column. */
.rk-win__side { grid-template-columns: repeat(2, 1fr); }
.rk-win__side .rk-label, .rk-win__side .rk-pc.is-off { display: none; }
/* Below this the capabilities are one column with an index pinned under the header, which paints
the ground behind itself (site.css section 5): the light spills out from under the hero window
and is gone by the heading, so it never ends in a dark box behind the index. */
.rk-bg--glow { height: calc(var(--rk-section) + 150px); }
.rk-live .rk-keys { flex-wrap: nowrap; gap: 5px; }
.rk-live .rk-keys span { padding: 3px 7px; }
.rk-self__grid { grid-template-columns: minmax(0, 1fr); }
.rk-rules { grid-template-columns: minmax(0, 1fr); gap: 0; }
.rk-strip { grid-template-columns: 1fr; }
.rk-strip > div { border-left: 0; border-top: 1px solid var(--rk-line); }
.rk-strip > div:first-child { border-top: 0; }
.rk-foot__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.rk-row { grid-template-columns: 1fr; }
.rk-row__text { order: 1 !important; max-width: none; }
.rk-row__art { order: 2 !important; }
.rk-row__art > .rk-card {
margin-right: calc(-1 * var(--rk-gutter)); margin-left: 0;
border-radius: var(--rk-r-card); border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.rk-row--flip .rk-row__art > .rk-card {
margin-left: 0; margin-right: calc(-1 * var(--rk-gutter));
border-radius: var(--rk-r-card); border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.rk-foot__row { grid-template-columns: 1fr; gap: 26px; }
}
/* Phones: the install steps are read, not looked at. The app's panels beside them (the role of the
computer, the sign-in form, the computer list) were a screen of pictures between three short
paragraphs; the words and their order stay, the background art stays. */
@media (max-width: 760px) {
.rk-rows .rk-row__art { display: none; }
.rk-rows .rk-row { padding-block: 14px; }
}
@media (max-width: 560px) {
.rk-hero__top { min-height: calc(100svh - 156px); }
.rk-hero__cta { flex-direction: column; align-items: stretch; }
/* The manifest's version and size make this line two lines on a phone; holding them from the
first paint keeps the chips below from jumping when /downloads.json answers. */
.rk-hero__meta { min-height: 3.2em; }
.rk-hero__cta .rk-btn { width: 100%; }
.rk-win__body { min-height: 0; padding: 12px; }
.rk-win__side { display: none; }
.rk-dash__row { grid-template-columns: 1fr; justify-items: center; }
.rk-dash__side { width: 100%; }
.rk-metrics { grid-template-columns: 1fr; }
.rk-dl__row { flex-direction: column; align-items: stretch; }
.rk-guide__tab { padding: 0 12px; font-size: .8rem; }
.rk-steps > li { padding-left: 0; }
.rk-steps > li::before { position: static; margin-bottom: 8px; }
/* The label stays for screen readers (it is the live confirmation); the icon speaks here. */
.rk-cmd__copy { width: 32px; padding: 0; justify-content: center; }
.rk-cmd__copy .rk-cmd__ok { left: 9px; }
.rk-cmd__copy [data-copy-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rk-dl__row .rk-btn { width: 100%; }
/* A capability's sensor panel keeps its phone-app shape - ring beside the numbers, three tiles in
a row - rather than the tall stack the other cards take on a phone. */
.rk-panel .rk-dash__row { grid-template-columns: auto 1fr; justify-items: stretch; }
.rk-panel .rk-metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.rk-term { font-size: .66rem; }
.rk-term__line, .rk-term__out { white-space: pre-wrap; overflow-wrap: anywhere; text-overflow: clip; }
}
/* Touch first at 1040px and below, the drawer's layout: every control a finger uses is at least
44px both ways, and the reading copy is at least 15px. Where the bar's look is the design - the
brand, the download button, the burger - the control keeps its size and its tap area grows
round it, invisibly; everywhere else the control itself is 44px. */
@media (max-width: 1040px) {
.rk-top .rk-brand, .rk-burger { position: relative; }
.rk-top .rk-brand::after, .rk-burger::after, .rk-top__dl::after { content: ""; position: absolute; }
/* Measured from the padding box, and the button and the burger have a border: 6px out is 5px past
the edge that is drawn, 44-46px in all. */
.rk-top .rk-brand::after { inset: -6px 0; }
.rk-burger::after { inset: -6px; }
.rk-top__dl::after { inset: -6px 0; }
.rk-drawer .rk-icon-btn { width: 44px; height: 44px; }
.rk-seg--drawer { height: 52px; }
.rk-seg--drawer .rk-seg__btn { height: 44px; min-width: 48px; }
.rk-seg--drawer .rk-seg__btn--icon { width: 44px; min-width: 44px; }
.rk-drawer .rk-drawer__signin { height: 52px; font-size: 1.02rem; }
.rk-guide__more > summary { min-height: 44px; }
.rk-guide__tabs { height: auto; }
.rk-guide__tab { height: 44px; }
.rk-cmd__bar { min-height: 46px; padding-block: 1px; }
.rk-cmd__copy { height: 44px; min-width: 44px; justify-content: center; }
.rk-cmd__at { font-size: .75rem; }
.rk-foot__links { gap: 0; }
.rk-foot__links a { display: flex; align-items: center; min-height: 44px; }
.rk-hero__meta, .rk-caps-on.rk-caps-flow .rk-cap__p, .rk-sec__rule > p, .rk-strip p,
.rk-self__note, .rk-wol__lead, .rk-wol__steps p, .rk-guide__more > p, .rk-guide__note, .rk-dl__meta, .rk-foot__brand p { font-size: .9375rem; }
}
@media (max-width: 560px) {
.rk-cmd__copy { width: 44px; }
.rk-cmd__copy .rk-cmd__ok { left: 15px; }
}
/* ================================================== 16. reduced motion === */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.rk-reveal [data-reveal] { opacity: 1; transform: none; }
.rk-cap__t, .rk-btn, .rk-top, .rk-faq summary::after { transition: none; }
.rk-rail__fill, .rk-rail__beam, .rk-rail__head, .rk-herobg__canvas, .rk-herobg::before { transition: none; }
.rk-reveal .rk-neon__line { transform: none; }
.rk-caps-on .rk-cap__body, .rk-caps-on .rk-cap.is-on .rk-cap__body, .rk-caps-on .rk-cap__p,
.rk-caps-on .rk-cap.is-on .rk-cap__p,
.rk-top::before, .rk-top__row, .rk-top__ind, .rk-top__nav a { transition: none !important; }
.rk-cmd__copy { transition: none; }
.rk-caps-on .rk-cap__p { transform: none; }
.rk-top.is-scrolled .rk-top__row, .rk-top.is-scrolled::before { transform: none; }
/* A press still answers, by the dim and the hover layer rather than a scale. The press rule's
:not() makes it more specific than this block, hence !important. */
.rk-btn, .rk-seg__btn, .rk-icon-btn, .rk-burger, .rk-cmd__copy, .rk-copy, .rk-top__nav a, .rk-top__signin,
a.rk-brand, .rk-caps__ix, .rk-cap__btn, .rk-drawer__nav a, .rk-foot__links a, .rk-faq summary { transition: none; }
:is(.rk-btn, .rk-seg__btn, .rk-icon-btn, .rk-burger, .rk-cmd__copy, .rk-copy, .rk-top__nav a, .rk-top__signin,
a.rk-brand, .rk-caps__ix, .rk-cap__btn, .rk-drawer__nav a, .rk-foot__links a, .rk-faq summary):is(:active, .is-pressed) { scale: none !important; }
a.rk-btn:is(:active, .is-pressed)::before, button.rk-btn:is(:active, .is-pressed)::before { opacity: .16; }
.rk-caps-on .rk-cap, .rk-caps-on .rk-rail::before, .rk-caps-on .rk-caps__list::after, .rk-caps-on .rk-cap__t, .rk-glint { transition: none; }
.rk-reveal .rk-neon__line::before, .rk-reveal .rk-neon__line::after { opacity: 1; }
.rk-win__glow { display: none; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}