here is a command meant to be run. The button is inserted by
* site.js and positioned against a wrapper it also inserts — putting it inside
* the would make it part of what gets copied, and putting it in the
* 's existing parent would anchor it to the section rather than the block.
*
* It only appears on hover or focus, because eight of these down a page is a
* column of buttons competing with the text they belong to. Focus is not a
* nicety: without it the button is reachable by keyboard and invisible. */
.copy-wrap {
position: relative;
}
.copy-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.5rem;
font: 500 0.72rem/1.5 var(--font-body);
color: var(--ink-3);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 5px;
cursor: pointer;
opacity: 0;
transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.copy-wrap:hover .copy-btn,
.copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.copy-btn.is-done { color: var(--good); border-color: var(--good); opacity: 1; }
/* A pointer is not the only way in. On a touch screen there is no hover, so the
* button would never appear at all. */
@media (hover: none) {
.copy-btn { opacity: 1; }
}
/* A card that describes a workspace in five lines and then dead-ends is a page
* the reader leaves. Quiet by default, because nine of these in a grid would
* otherwise be nine competing calls to action. */
.feature-more {
margin: 0.9rem 0 0;
font-size: 0.82rem;
}
.feature-more a {
color: var(--ink-3);
text-decoration: none;
}
.feature-more a:hover {
color: var(--accent);
text-decoration: underline;
}
/* --- cropped screenshots ------------------------------------------------- */
/* A window onto a full-window capture.
*
* A whole 1600x1000 window scaled into a 348 px card is a grey rectangle: the
* point of a screenshot is that you can read what is in it, and at that size
* nobody can. So the image is NOT scaled — it is rendered at 1600 CSS pixels,
* which is the application's own logical width, and the crop box shows one
* region of it at 1:1. The file behind it is the 2000 px rung, so the pixels are
* still denser than the CSS asks for.
*
* --cx/--cy are the top-left of the region in the application's own 1600x1000
* coordinates — the same numbers the scene catalogue uses — so a coordinate here
* can be checked against the interface rather than guessed at.
*
* `max-width: none` is not optional: the global `img { max-width: 100% }` would
* otherwise shrink the image back down to the card and undo all of it. */
.crop {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--paper-3);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.crop img {
position: absolute;
width: 1600px;
max-width: none;
left: calc(var(--cx, 0) * -1px);
top: calc(var(--cy, 0) * -1px);
}
/* The 2px rule is what gives a text-only card its top edge. When there is a
* picture, the picture is the top edge. `:has()` keeps the markup change purely
* additive — insert a .crop and the rule takes itself away. */
.feature > .crop { margin: 0 0 1rem; }
.feature:has(> .crop) { border-top: 0; padding-top: 0; }
/* --- the loop, in four pictures ------------------------------------------ */
.loop {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
/* `ul, ol { max-width: var(--measure) }` above is a reading-width rule for
* prose lists, and it is right for those. This is a grid of pictures, and it
* was being squeezed into 68ch — 587 px, which auto-fit then resolved to two
* columns instead of four. */
max-width: none;
gap: 1.75rem 1.5rem;
list-style: none;
padding: 0;
margin: 0;
counter-reset: loop;
}
.loop li { counter-increment: loop; }
.loop h3 {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin: 0.9rem 0 0.35rem;
font-size: 1rem;
}
/* The step number, from the counter rather than from the markup — so reordering
* the four cannot leave a "3" above the second one. */
.loop h3::before {
content: counter(loop);
font: 600 0.72rem/1 var(--font-mono);
color: var(--accent);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.3rem 0.5rem;
}
.loop p {
margin: 0;
font-size: 0.86rem;
color: var(--ink-2);
}
/* --- clips --------------------------------------------------------------- */
/* Some things a still cannot say: that a flat list and a table are the same 155
* varbinds, or that every address on screen changed at once and consistently.
*
* `preload="none"` and no autoplay until it is on screen — a page that leads
* with pictures still has to load. The poster is the LAST frame, so what stands
* there before playback is the result rather than an empty starting state. */
.clip {
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
background: var(--paper-2);
margin: 0;
}
.clip video {
display: block;
width: 100%;
height: auto;
background: var(--paper-3);
}
.clip figcaption {
border-top: 1px solid var(--line);
padding: 0.6rem 0.9rem;
font-size: 0.8rem;
color: var(--ink-3);
background: var(--paper);
}
/* The same theme pairing as the stills: one clip is in the document, and which
* one depends on the palette around it. */
.clip-light { display: block; }
.clip-dark { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .clip-light { display: none; }
:root:not([data-theme="light"]) .clip-dark { display: block; }
}
:root[data-theme="dark"] .clip-light { display: none; }
:root[data-theme="dark"] .clip-dark { display: block; }
:root[data-theme="light"] .clip-light { display: block; }
:root[data-theme="light"] .clip-dark { display: none; }
/* --- typographic polish -------------------------------------------------- */
/* `balance` on headings, which are short enough for the browser to solve, and
* `pretty` on the running text, which only prevents the last-line orphan. Both
* degrade to nothing at all where they are not supported. */
h1, h2, h3, .lede { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
/* Checkboxes and radios in the reader's accent rather than the browser's. */
:root { accent-color: var(--accent); }
/* Arriving on a deep link should CONFIRM that you arrived. The documentation
* has twenty-three of them and none of it said anything: the page jumped and
* left you looking at a heading identical to every other heading. */
.doc-body > section:target > h2 {
position: relative;
}
.doc-body > section:target > h2::before {
content: "";
position: absolute;
left: -1rem;
top: 0.15em;
bottom: 0.15em;
width: 3px;
border-radius: 2px;
background: var(--accent);
}
/* Only the scrollers that are actually ours. A page-level scrollbar rule
* overrides a choice the reader made in their operating system. */
.doc-toc, .copy-wrap pre, .release-notes {
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
}
/* --- reveal on scroll ---------------------------------------------------- */
/* Deliberately small: 8 px and 240 ms, once, and only on the landing page's
* sections. Anything more on a page of technical writing is decoration, and
* decoration is what the rest of this stylesheet is written to avoid.
*
* The @supports gate is not caution for its own sake — without it, a browser
* that parses `animation-timeline` as invalid keeps the `opacity: 0` and the
* page is BLANK. Inside the gate, a browser that does not support the property
* never applies the rule at all.
*
* `animation-range` stops it at 40 % of the entry so a section is fully solid
* well before it reaches reading position, rather than fading as you read it. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.home .section > .wrap,
.home .hero,
.home .shot {
animation: rise linear both;
animation-timeline: view();
animation-range: entry 5% cover 22%;
}
@keyframes rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
}
}
/* --- zoom ---------------------------------------------------------------- */
/* A screenshot of an interface is a picture whose detail IS the content, and at
* the width of a two-column grid you can see that there is a table but not what
* is in it. Clicking one opens it at the size of the window. */
figure.shot,
figure.clip {
cursor: zoom-in;
}
figure.shot:focus-visible,
figure.clip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.zoom {
width: min(96vw, 1800px);
max-width: none;
max-height: 94vh;
padding: 0;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--paper);
color: var(--ink);
overflow: hidden;
}
.zoom::backdrop {
/* Not a token: ::backdrop is outside the document tree and custom properties
* declared on :root do not reach it in every engine. */
background: rgba(0, 0, 0, 0.72);
}
.zoom-body {
max-height: 94vh;
overflow: auto;
}
.zoom-body img,
.zoom-body video {
display: block;
width: 100%;
height: auto;
}
.zoom-caption {
margin: 0;
max-width: none;
padding: 0.7rem 1rem;
border-top: 1px solid var(--line);
font-size: 0.85rem;
color: var(--ink-3);
background: var(--paper-2);
}
.zoom-close {
position: absolute;
top: 0.6rem;
right: 0.75rem;
z-index: 1;
width: 32px;
height: 32px;
font-size: 1.35rem;
line-height: 1;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
cursor: pointer;
}
.zoom-close:hover { border-color: var(--ink-3); }
/* --- the demo band ------------------------------------------------------- */
/* The one section on the page that asks for something rather than explaining
* something. A tint rather than a border, so it reads as a different KIND of
* block without introducing a second card style to the page. */
.demo-band {
background: var(--accent-wash);
border-block: 1px solid var(--line-soft);
}
/* --- the demo page ------------------------------------------------------- */
/* Full-bleed tint, inset content. The band is the width of the window because
* the frame below it is; a tinted rectangle stopping short of both edges reads
* as a card that failed to lay out. */
.demo-strip {
border-bottom: 1px solid var(--line-soft);
background: var(--accent-wash);
}
.demo-strip-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
padding-block: 1.1rem;
}
.demo-strip p { margin: 0; max-width: 72ch; font-size: 0.9rem; }
/* The frame takes what is left of the viewport rather than a fixed height: the
* application lays itself out against the space it is given, and a short frame
* makes it look cramped in a way the product is not.
*
* `min-height` rather than `height`, so a small laptop still gets a usable
* window and simply scrolls. */
.demo-frame {
display: block;
width: 100%;
height: calc(100vh - 190px);
min-height: 620px;
border: 0;
border-bottom: 1px solid var(--line);
background: var(--paper-2);
}
/* --- a clip that will not play by itself --------------------------------- */
/* Shown when the reader has asked for reduced motion, or when the browser
* declines to start a muted clip. The poster is the last frame — the result —
* so nothing is missing until they press it; this only says that there is more.
*
* Deliberately not `video { controls }`: a row of native player chromes changes
* the look of the section, and someone who asked for less motion did not ask
* for a different page. */
.clip { position: relative; }
.clip-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 56px;
height: 56px;
padding: 0;
color: var(--paper);
background: color-mix(in srgb, var(--ink) 76%, transparent);
border: 0;
border-radius: 999px;
cursor: pointer;
transition: background-color .12s ease, transform .12s ease;
}
.clip-play svg { width: 24px; height: 24px; fill: currentColor; }
.clip-play:hover {
background: var(--ink);
transform: translate(-50%, -50%) scale(1.06);
}
.clip-play:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.clip-play { transition: none; }
.clip-play:hover { transform: translate(-50%, -50%); }
}