/* =============================================================================
   Arsenal — site styles

   Dark by commitment rather than by default: the product is a control panel that
   lives on a gaming laptop, and the site is built to feel like an instrument
   surface. Two typefaces do the work — Inter for prose, JetBrains Mono for
   anything that is a measurement, a label or a key.
   ========================================================================== */

:root {
    /* Surfaces, darkest first. */
    --bg:            #08090b;
    --bg-raised:     #0e1013;
    --surface:       #131619;
    --surface-2:     #191d21;
    --surface-hover: #1e2328;

    /* Hairlines. The site is built almost entirely out of 1px rules. */
    --line:        rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .13);

    --text:      #e9edf0;
    --text-2:    #9aa4ae;
    --text-3:    #69737d;

    /* The app's accent, unchanged. */
    --accent:      #60cdff;
    --accent-deep: #2e9fe8;
    --accent-dim:  rgba(96, 205, 255, .12);
    --accent-line: rgba(96, 205, 255, .32);

    --warn: #ffc14d;
    --hot:  #ff7a6b;
    --calm:       #60cdff;

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;

    --shell:  1800px;
    --shell-wide: 1800px;

    --ease: cubic-bezier(.4, 0, .2, 1);

    --font: 'Inter', -apple-system, 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"], pre, code, kbd, .code-block { -webkit-user-select: text; user-select: text; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

img, svg { max-width: 100%; }
svg { display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.022em;
    font-weight: 600;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

::selection { background: rgba(96, 205, 255, .26); color: #fff; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 200;
    padding: .6rem 1rem; background: var(--accent); color: #04121c;
    border-radius: var(--r-sm); font-weight: 600;
    transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: clamp(24px, 4vw, 72px);
}
.shell-wide { max-width: var(--shell-wide); }

.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 13px; height: 13px; }

/* --- Page transition -------------------------------------------------------
   Swup swaps #swup and toggles .is-animating on <html> for the duration. The
   header, footer and progress bar sit outside it and never move.             */

.transition-main {
    opacity: 1;
    transform: none;
    transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

html.is-animating .transition-main {
    opacity: 0;
    transform: translateY(10px);
}

/* The guide list fades in and out with everything else when you enter or leave
   the documentation, because there it is part of the page arriving. Moving
   between two guides is the one case where it must not: it is the same element
   either side, it holds its scroll, and fading it would contradict that.

   Deliberately not named transition-*: that is Swup's animationSelector, and an
   element it matches whose transition is then suppressed never fires the
   transitionend Swup waits on, which leaves the visit open forever. This fades
   on the same timing off the same is-animating flag without being awaited. */
.docs-rail-fade {
    opacity: 1;
    transform: none;
    transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

html.is-animating .docs-rail-fade {
    opacity: 0;
    transform: translateY(10px);
}

html.is-docs-internal .docs-rail-fade {
    opacity: 1;
    transform: none;
    transition: none;
}

.progress {
    position: fixed; inset: 0 0 auto; height: 2px; z-index: 120;
    pointer-events: none;
}
.progress span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
    box-shadow: 0 0 12px rgba(96, 205, 255, .6);
    transition: width .3s var(--ease), opacity .3s var(--ease);
}
/* Three states, in this order: the bar climbs while the visit is in flight,
   completes and fades on arrival, then rewinds to zero with transitions off so
   the reset is invisible. .is-loaded must out-rank .is-changing here, because
   Swup still carries is-changing at the moment the visit ends. */
html.is-changing .progress span { width: 72%; opacity: 1; }
html.is-loaded .progress span {
    width: 100%;
    opacity: 0;
    transition: width .2s var(--ease), opacity .26s var(--ease) .14s;
}
html:not(.is-changing):not(.is-loaded) .progress span {
    width: 0;
    opacity: 0;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --- Header ---------------------------------------------------------------- */

.site-header {
    position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
    transition:
        border-bottom-color .24s var(--ease),
        box-shadow .24s var(--ease);
}

/* The header's own material sits on a layer of its own rather than on the
   header box, for two reasons.

   backdrop-filter makes the element it is declared on a backdrop root: every
   descendant that filters its own backdrop then samples this surface instead of
   the page. The mobile menu is a descendant, so with the filter on .site-header
   the menu could only blur an already-blurred header. That is why opening the
   menu used to switch the filter off outright — and switching it off is not
   interpolable, so the header lost its background in a single frame while the
   page-wide overlay behind it was still fading in. That one-frame gap is the
   flash. On its own layer the filter can simply cross-fade with the overlay,
   and .site-header stops being a backdrop root, so the menu samples the page. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(8, 9, 11, .78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: opacity .24s var(--ease);
}

body.is-docs .site-header {
    box-shadow: none;
}

.site-header-inner {
    display: flex; align-items: center; gap: 2rem;
    height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.brand .mark { width: 24px; height: 24px; }
.mark .mark-a { fill: var(--accent); }
.mark .mark-b { fill: var(--accent-deep); }
.brand-name { font-weight: 600; letter-spacing: -.01em; font-size: 1.02rem; }

.site-nav { position: relative; display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.site-nav > .button { margin-left: 1.5rem; }
.site-nav > .site-nav-support { margin-left: 1.25rem; }
.site-nav > .site-nav-download { margin-left: .35rem; }

.site-nav-link {
    position: relative; z-index: 1;
    padding: .45rem .75rem;
    border-radius: var(--r-sm);
    font-weight: 500;
    font-size: .92rem; color: var(--text-2);
    transition: color .22s var(--ease);
    display: inline-flex; align-items: center; gap: .35rem;
    /* A label that broke over two lines would leave the pill, which is one line
       tall, sitting across the middle of it. */
    white-space: nowrap;
}
.site-nav-link:hover { color: var(--text); }
/* Every link keeps the same weight so changing the current page never alters
   the navigation's measured width or shifts neighbouring links. */
.site-nav-link.is-current { color: #fff; }

/* Hover is deliberately not the same gesture as the indicator. The pill belongs
   to the page you are on and travels to it; this is a neutral ghost that swells
   into place under the pointer and goes again, so the two never read as the
   same thing moving. The link you are already on keeps the pill and skips it. */
.site-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .06);
    opacity: 0;
    transition: opacity .18s var(--ease);
}

.site-nav-link:hover::before,
.site-nav-link:focus-visible::before { opacity: 1; }
.site-nav-link.is-current::before { content: none; }

/* One pill for the whole bar, moved to whichever link is current — or hovered —
   rather than an indicator drawn separately under each link. Because it is a
   single element it can travel between them instead of blinking out of one and
   into the next, which is the whole point of it.

   Width and offset arrive as custom properties from the script, which measures
   the link; the pill only animates once it has been placed, so it does not fly
   in from the left edge on first paint. */
.site-nav-pill {
    position: absolute;
    left: 0; top: 50%;
    z-index: 0;
    width: var(--pill-w, 0px);
    /* Height comes from the link it sits behind, so it matches the hover ghost
       exactly and cannot drift if the type size changes. */
    height: var(--pill-h, 32px);
    margin-top: calc(var(--pill-h, 32px) / -2);
    border-radius: var(--r-sm);
    border: 1px solid var(--accent-line);
    background: rgba(96, 205, 255, .11);
    box-shadow: none;
    transform: translate3d(var(--pill-x, 0px), 0, 0);
    opacity: 0;
    pointer-events: none;
    will-change: transform, width;
}

.site-nav-pill.is-placed {
    opacity: 1;
    transition:
        transform .34s var(--ease),
        width .34s var(--ease),
        opacity .2s var(--ease);
}

/* The first placement of a page load, and any placement while the pill is
   hidden, must not be animated from wherever it last happened to sit. */
.site-nav-pill.is-instant { transition: none; }

@media (prefers-reduced-motion: reduce) {
    .site-nav-pill.is-placed { transition: opacity .2s linear; }
}

.header-actions {
    display: none;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--r-sm);
    padding: 0;
    cursor: pointer;
    transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.nav-toggle-open,
.nav-toggle-close {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-toggle-close {
    display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-open {
    display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-close {
    display: flex;
}
.nav-toggle.is-active,
.nav-toggle[aria-expanded="true"] {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
}

.docs-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 38px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--r-sm);
    padding: 0 .75rem;
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 240ms var(--ease), transform 240ms var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.docs-toggle .icon { width: 16px; height: 16px; color: var(--accent); }
.docs-toggle.is-active,
.docs-toggle[aria-expanded="true"] {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
}

.docs-drawer-header { display: none; }

.docs-backdrop { display: none; }

/* Desktop view: hide mobile rich nav items so the navigation remains sleek and text-only with the travelling pill */
.site-nav-icon,
.site-nav-desc,
.site-nav-arrow {
    display: none;
}
.site-nav-copy {
    display: inline;
}
.site-nav-label {
    display: inline;
}

/* --- Buttons --------------------------------------------------------------- */

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .72rem 1.25rem;
    background: var(--accent); color: #04121c;
    border: 1px solid transparent; border-radius: var(--r-md);
    font: inherit; font-weight: 600; font-size: .95rem;
    cursor: pointer; white-space: nowrap;
    transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.button:hover { background: #7ad7ff; transform: translateY(-1px); box-shadow: 0 8px 24px -12px rgba(96, 205, 255, .8); }
.button:active { transform: none; }

.button-ghost {
    background: transparent; color: var(--text);
    border-color: var(--line-strong);
}
.button-ghost:hover { background: var(--surface-2); border-color: var(--text-3); box-shadow: none; }

.button-sm { padding: .5rem .9rem; font-size: .88rem; }
/* There is no large variant. Hero calls to action are the same size as every
   other button on the site; the emphasis comes from where they sit and what
   fills them, not from making them taller than the type around them. */

/* --- Shared type ----------------------------------------------------------- */

.kicker {
    font-family: var(--mono); font-size: .72rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
    display: inline-flex; align-items: center; gap: .6rem;
}
.kicker::before {
    content: ''; width: 18px; height: 1px; background: var(--accent-line);
}

.breadcrumbs {
    color: var(--text-3);
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .045em;
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumbs li + li::before {
    content: '/';
    margin-right: .55rem;
    color: var(--line-strong);
}
.breadcrumbs a {
    color: var(--text-3);
    text-decoration: none;
    transition: color .2s var(--ease);
}
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible { color: var(--text); }
.breadcrumbs [aria-current="page"] { color: var(--accent); }

.section {
    position: relative;
    padding: clamp(4.75rem, 8vw, 7.25rem) 0;
    isolation: isolate;
}
.section + .section { border-top: 1px solid var(--line-strong); }

body:not(.is-docs) #main > .section:nth-of-type(4n + 2) {
    background:
        radial-gradient(55% 130% at 100% 30%, rgba(96, 205, 255, .055), transparent 68%),
        #0b0d10;
}
body:not(.is-docs) #main > .section:nth-of-type(4n + 3) {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .018), transparent 42%),
        var(--bg-raised);
}
body:not(.is-docs) #main > .section:nth-of-type(4n) {
    background:
        radial-gradient(48% 120% at 0% 55%, rgba(46, 159, 232, .05), transparent 72%),
        #090b0d;
}

.section-head { max-width: 720px; margin-bottom: 3.5rem; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 1rem 0 .9rem; }
.section-head p { color: var(--text-2); font-size: 1.06rem; }

.lede { font-size: 1.14rem; color: var(--text-2); line-height: 1.7; }

/* --- Hero ------------------------------------------------------------------ */

.hero { position: relative; padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }

.hero::before {
    content: ''; position: absolute; inset: -30% 0 auto; height: 900px; z-index: -2;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(96, 205, 255, .13), transparent 70%),
        radial-gradient(40% 40% at 82% 12%, rgba(46, 159, 232, .09), transparent 70%);
}
.hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 60% at 50% 20%, #000 0%, transparent 75%);
    opacity: .5;
}

.hero-inner { max-width: 800px; }

.hero h1 {
    font-size: clamp(2.5rem, 6.2vw, 4.2rem);
    letter-spacing: -.035em; line-height: 1.03;
    margin: 1.4rem 0 1.4rem;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero-sub { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--text-2); max-width: 620px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; align-items: center; }

.hero-meta {
    display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem;
    font-family: var(--mono); font-size: .78rem; color: var(--text-3);
    letter-spacing: .06em;
}
.hero-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-meta .icon { color: var(--accent); }

.hero-stage { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* --- Proportional application illustration scaling ------------------------ */

.ui-scale {
    position: relative;
    width: 100%;
    min-height: 1px;
}
.ui-scale-canvas {
    display: flow-root;
    max-width: none;
    margin-inline: auto;
    transform-origin: top left;
    will-change: transform;
}
.ui-scale-canvas .quick-panel,
.ui-scale-canvas .app-toast { margin-inline: auto; }

/* --- Stat strip ------------------------------------------------------------ */

.stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--bg-raised); overflow: hidden;
}
.stat { padding: 1.6rem 1.5rem; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat-value { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; }
.stat-label {
    font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
    letter-spacing: .12em; color: var(--text-3); margin-top: .35rem;
}

/* --- Feature grid ---------------------------------------------------------- */

/* The 1px gap over a line-coloured background draws the dividers, and the radius
   plus overflow clips whichever cards end up on the outside. That is what makes
   the corners follow a filtered grid of six, three, two or one card without any
   card knowing where it sits. */
.feature-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    margin-inline: auto;
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
}

@media (min-width: 681px) {
    .feature-grid[data-columns="2"] {
        grid-template-columns: repeat(2, 1fr);
    }
    /* A lone card keeps roughly the width it has in the two-column layout rather
       than stretching the full shell, so switching filters does not rescale the
       card and its lines stay in one column. */
    .feature-grid[data-columns="1"] {
        max-width: 44rem;
        grid-template-columns: minmax(0, 1fr);
    }
}

.feature-card { background: var(--bg-raised); padding: 2rem 1.75rem; transition: background .2s var(--ease); }
.feature-card:hover { background: var(--surface); }

.feature-card-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.25rem; }
.feature-card-head .icon { color: var(--accent); }
.feature-card h3 { font-size: 1.05rem; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.feature-list li {
    position: relative; padding-left: 1.4rem;
    font-size: .93rem; color: var(--text-2); line-height: 1.55;
}
.feature-list li::before {
    content: ''; position: absolute; left: 0; top: .58em;
    width: 7px; height: 7px; border-left: 1.5px solid var(--accent); border-top: 1.5px solid var(--accent);
    transform: rotate(45deg);
}

/* --- Mode cards ------------------------------------------------------------ */

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.mode-card {
    position: relative; padding: 1.9rem 1.6rem 1.7rem;
    background: var(--bg-raised); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
}
.mode-card::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 2px;
    background: linear-gradient(90deg, var(--tone, var(--accent)), transparent);
}
.mode-card[data-accent="calm"] { --tone: var(--calm); }
.mode-card[data-accent="mid"]  { --tone: var(--accent); }
.mode-card[data-accent="hot"]  { --tone: var(--hot); }

.mode-name { font-size: 1.3rem; font-weight: 600; }
.mode-power {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tone, var(--accent)); margin-top: .3rem;
}
.mode-card p { margin-top: 1rem; color: var(--text-2); font-size: .94rem; }
.mode-use {
    margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line);
    font-size: .85rem; color: var(--text-3);
}

/* --- Split rows ------------------------------------------------------------ */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.is-reversed .split-media { order: -1; }
.split + .split { margin-top: clamp(4rem, 8vw, 6.5rem); }
.split-body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 1rem 0 1rem; }
.split-body p { color: var(--text-2); }

.checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--text-2); }
.checklist .icon { color: var(--accent); margin-top: .25em; width: 15px; height: 15px; }

/* Noticeable without becoming a page-width feature card: a capped, solid
   callout with one structural accent and a compact icon aligned to the title. */
.notice {
    position: relative;
    display: block;
    width: fit-content;
    max-width: min(100%, 58rem);
    padding: 1rem 1.15rem;
    background: #10161c;
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.notice > .icon {
    position: absolute;
    top: 1rem;
    left: 1.15rem;
    width: 28px; height: 28px; padding: 5px; margin: 0;
    color: var(--accent);
    background: var(--accent-dim);
    border-radius: 5px;
}
.notice > div { min-width: 0; }
.notice > div > h3 {
    margin: .06rem 0 .25rem;
    font-size: .95rem;
    line-height: 1.4;
}
.notice > .icon + div > h3 {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding-left: 2.25rem;
}
.notice p { color: var(--text-2); font-size: .9rem; line-height: 1.55; }
.notice p + p { margin-top: .5rem; }
.notice > div > :last-child { margin-bottom: 0; }
.notice.is-warn { border-left-color: var(--warn); }
.notice.is-warn > .icon { color: var(--warn); }

/* =============================================================================
   App UI mockups

   Built from the application's own design tokens and layout metrics — the 48px
   title bar, the 220px navigation pane, the accent, the corner radii. Rendering
   them as markup rather than shipping raster screenshots keeps them sharp at any
   density and lets a page point at one control without cropping the interface
   around it.
   ========================================================================== */

.app-figure { margin: 0; }
.app-figure figcaption,
.app-figure-caption {
    margin-top: 1.1rem; font-size: .86rem; color: var(--text-3);
    display: flex; align-items: flex-start; gap: .6rem;
    line-height: 1.55;
}
.app-figure figcaption::before,
.app-figure-caption::before {
    content: ''; flex: none; width: 14px; height: 1px; background: var(--line-strong); margin-top: .75em;
}

.app-frame {
    position: relative;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, #1b1f23, #0f1215);
    border: 1px solid var(--line-strong);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 40px 90px -40px rgba(0, 0, 0, .9),
        0 0 0 1px rgba(0, 0, 0, .4);
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
    color: #f2f4f6;
    user-select: none;
}

.app-glow { position: relative; }
.app-glow::before {
    content: ''; position: absolute; inset: 8% 6% -6%; z-index: -1;
    background: radial-gradient(50% 50% at 50% 50%, rgba(96, 205, 255, .22), transparent 72%);
    filter: blur(48px);
}

/* Title bar ---------------------------------------------------------------- */

.app-titlebar {
    display: flex; align-items: center; gap: .75rem;
    height: 48px; padding-left: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.app-tb-button {
    width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: 5px; color: #d6dbe0;
}
.app-title { font-size: 13px; font-weight: 600; letter-spacing: -.005em; }

.app-pills { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-right: 8px; }
.app-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .03);
    font-family: var(--mono); font-size: 11px; color: #b9c1c9;
    white-space: nowrap;
}
.app-pill.is-accent {
    border-color: var(--accent-line); background: var(--accent-dim); color: var(--accent);
    font-family: var(--font); font-weight: 600; font-size: 11.5px;
}
.app-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.app-caption-buttons { display: flex; }
.app-caption-buttons span {
    width: 46px; height: 48px; display: grid; place-items: center; color: #8b939b; font-size: 11px;
}

/* Body: nav pane + content ------------------------------------------------- */

.app-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 430px; }

.app-pane { padding: 8px 4px; border-right: 1px solid rgba(255, 255, 255, .04); }

.app-search {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 8px 10px; padding: 8px 10px; height: 36px;
    border-radius: 5px; background: rgba(255, 255, 255, .045);
    color: #9aa3ac; font-size: 12px;
}
.app-search .kbd {
    margin-left: auto; padding: 1px 5px; border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05);
    font-family: var(--mono); font-size: 10px; color: #7d868f;
}

.app-pane-rule { height: 1px; margin: 0 12px 10px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }

.app-nav-item {
    position: relative; display: flex; align-items: center; gap: 12px;
    height: 36px; margin: 1px 6px; padding: 0 12px;
    border-radius: 5px; color: #c3cad1; font-size: 12.5px;
}
.app-nav-item .icon { width: 17px; height: 17px; color: #a9b2ba; }
.app-nav-item.is-active { background: rgba(255, 255, 255, .06); color: #fff; }
.app-nav-item.is-active .icon { color: var(--accent); }
.app-nav-item.is-active::before {
    content: ''; position: absolute; left: -6px; top: 9px; bottom: 9px;
    width: 3px; border-radius: 2px; background: var(--accent);
}

.app-content { padding: 22px 26px 26px; overflow: hidden; }
.app-page-title { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.app-page-sub { font-size: 12px; color: #8d959d; margin-top: 3px; }

/* Cards and rows ----------------------------------------------------------- */

.app-card {
    margin-top: 16px; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .022);
    overflow: hidden;
}
.app-card-title {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: #7f8891; margin: 20px 0 8px 2px;
}

.app-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; }
.app-row + .app-row { border-top: 1px solid rgba(255, 255, 255, .05); }
.app-row-icon {
    width: 32px; height: 32px; flex: none; display: grid; place-items: center;
    border-radius: 6px; background: var(--accent-dim); color: var(--accent);
}
.app-row-icon .icon { width: 17px; height: 17px; }
.app-row-text { min-width: 0; }
.app-row-label { font-size: 13px; font-weight: 500; }
.app-row-desc { font-size: 11.5px; color: #868f98; margin-top: 1px; }
.app-row-control { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Segmented control -------------------------------------------------------- */

.app-segment { display: flex; padding: 2px; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.app-segment span {
    padding: 5px 14px; border-radius: 4px; font-size: 12px; color: #aeb6bd; white-space: nowrap;
}
.app-segment span.is-on { background: var(--accent); color: #04121c; font-weight: 600; }

.app-toggle {
    width: 38px; height: 20px; border-radius: 999px; padding: 2px;
    background: rgba(255, 255, 255, .12); display: flex;
}
.app-toggle i { width: 16px; height: 16px; border-radius: 50%; background: #cfd6dc; }
.app-toggle.is-on { background: var(--accent); justify-content: flex-end; }
.app-toggle.is-on i { background: #04121c; }

.app-slider { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.app-track { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .13); }
.app-track i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--accent); }
.app-track b {
    position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
    background: var(--accent); transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(8, 9, 11, .9);
}
.app-value { font-family: var(--mono); font-size: 11.5px; color: #b9c1c9; width: 42px; text-align: right; }

/* Telemetry tiles ---------------------------------------------------------- */

.app-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.app-tile {
    padding: 14px; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .022);
}
.app-tile-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: #7f8891;
}
.app-tile-value { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; }
.app-tile-value small { font-size: 12px; font-weight: 500; color: #8d959d; margin-left: 2px; }
.app-tile-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .1); margin-top: 10px; overflow: hidden; }
.app-tile-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.app-tile-bar.is-hot i { background: var(--hot); }
.app-tile-bar.is-calm i { background: var(--calm); }

/* Quick panel -------------------------------------------------------------- */

.quick-panel {
    width: 340px; border-radius: 12px; padding: 16px;
    background: linear-gradient(180deg, #1d2126, #14171a);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95);
    color: #f2f4f6; font-size: 13px;
}
.quick-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.quick-head .mark { width: 16px; height: 16px; }
.quick-title { font-weight: 600; font-size: 13px; }
.quick-live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent);
}
.quick-live .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.quick-readouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.quick-readout { text-align: center; }
.quick-readout .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: #7f8891; }
.quick-readout .v { font-size: 15px; font-weight: 600; margin-top: 2px; }

.quick-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-tile {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px;
    border-radius: 8px; border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .03);
}
.quick-tile .icon { width: 18px; height: 18px; color: #a9b2ba; }
.quick-tile.is-on { background: var(--accent-dim); border-color: var(--accent-line); }
.quick-tile.is-on .icon { color: var(--accent); }
.quick-tile-text .t { font-size: 12px; font-weight: 500; }
.quick-tile-text .s { font-size: 10.5px; color: #868f98; }

.quick-sliders { margin-top: 12px; display: grid; gap: 10px; }
.quick-slider { display: flex; align-items: center; gap: 10px; }
.quick-slider .n { font-size: 11.5px; color: #b9c1c9; width: 78px; }

/* Toast -------------------------------------------------------------------- */

.app-toast {
    width: 330px; display: flex; gap: 12px; padding: 14px;
    border-radius: 12px; background: rgba(29, 31, 32, .97);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .95);
}
.app-toast-accent { width: 3px; border-radius: 2px; background: var(--accent); flex: none; }
.app-toast-icon {
    width: 34px; height: 34px; flex: none; display: grid; place-items: center;
    border-radius: 6px; background: var(--accent-dim); color: var(--accent);
}
.app-toast-body .t { font-size: 15px; font-weight: 600; }
.app-toast-body .s { font-size: 11.5px; color: #8d959d; }

/* Selective focus ---------------------------------------------------------- */

.app-focus { position: relative; }

/* Everything not marked as the subject recedes; the subject keeps full contrast
   and gains a ring, so the control stays in the interface it belongs to.      */
.app-focus[data-focus] .app-dim {
    filter: blur(1.5px) saturate(.5) brightness(.62);
    opacity: .72;
    transition: filter .4s var(--ease), opacity .4s var(--ease);
}
.app-focus[data-focus] .app-subject {
    position: relative; z-index: 3;
    border-radius: 9px;
    box-shadow:
        0 0 0 1.5px var(--accent-line),
        0 0 0 7px rgba(96, 205, 255, .07),
        0 18px 44px -18px rgba(0, 0, 0, .9);
}

.app-callout {
    position: absolute; z-index: 4;
    display: flex; align-items: center; gap: .55rem;
    padding: .45rem .8rem;
    background: var(--accent); color: #04121c;
    border-radius: 999px;
    font-family: var(--mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 10px 30px -10px rgba(96, 205, 255, .7);
}
.app-callout[data-side="top"]    { top: -14px; left: 50%; transform: translateX(-50%); }
.app-callout[data-side="right"]  { top: 50%; right: -12px; transform: translate(100%, -50%); }
.app-callout[data-side="left"]   { top: 50%; left: -12px; transform: translate(-100%, -50%); }
.app-callout[data-side="bottom"] { bottom: -14px; left: 50%; transform: translateX(-50%); }

/* =============================================================================
   Documentation
   ========================================================================== */

/* Both rails stand in the gap between the header above them and the notice bar
   below, measured rather than guessed: --site-header-height comes from the
   header itself and --author-bar-height from the bar, so neither can be left
   running underneath the other when either one changes height. Sticky within
   the layout's own grid area, which is what releases them at the footer.

   The sticky offset is the layout's own top padding, which is where the rails
   already start. Pinning them anywhere higher would make them jump up the
   moment you scrolled, and would size them for a position they do not hold at
   rest, leaving them under the bar until the jump happened. */
.docs-layout {
    --docs-layout-top: 3rem;
    --docs-rail-width: 248px;
    --docs-rail-fade: 1.25rem;
    --docs-rail-gutter: 10px;
    --docs-rail-top: calc(var(--site-header-height, 72px) + var(--docs-layout-top));
    --docs-rail-bottom: calc(var(--author-bar-height, 0px) + 1.25rem);
    --docs-rail-height: calc(100vh - var(--docs-rail-top) - var(--docs-rail-bottom));

    position: relative;
    display: grid;
    grid-template-columns: var(--docs-rail-width) minmax(0, 1fr) 208px;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
    /* No padding along the bottom. It sits under all three columns, which
       shortens the grid row the rails are sticky within, so they would come to
       rest a whole 5rem above the footer with the rule beside them carrying on
       past. The article carries that space itself instead. */
    padding: var(--docs-layout-top) 0 0;
}

/* The rule belongs to the column, not to the list inside it. Drawn on the
   layout it runs the full height of the documentation area, from under the
   header down to the footer; drawn on the sidebar it could only ever be as
   tall as one screen, because that element is sticky and stops with the
   viewport. */
.docs-layout::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--docs-rail-width) - 1px);
    width: 1px;
    background: var(--line-strong);
    pointer-events: none;
}

/* A full-height rail rather than a floating column: it reaches from the underside
   of the header to the top of the notice bar, with no stub of gap at either end.
   The negative top margin cancels the layout's own top padding, which is what
   was holding it below the header; the same value comes back as padding so the
   links keep their breathing room. Flush top and bottom means the sticky offset
   equals the resting position, so it does not shift when you start scrolling. */
/* Placed explicitly rather than by source order. While the notice modal holds
   the page, the rails are pinned out of flow, and with implicit placement the
   article would slide into the column a pinned rail had vacated. */
.docs-sidebar { grid-column: 1; }
.docs-content { grid-column: 2; }
.docs-toc { grid-column: 3; }

.docs-sidebar {
    position: sticky;
    top: var(--site-header-height, 72px);
    height: calc(100vh - var(--site-header-height, 72px) - var(--author-bar-height, 0px));
    margin-top: calc(var(--docs-layout-top) * -1);
    /* The left inset is bought back with an equal negative margin, so nothing
       inside moves: it only widens the box that overflow:auto clips to. Without
       it the search field sits hard against that edge and the left side of its
       focus ring is cut away. */
    margin-left: calc(var(--docs-rail-gutter) * -1);
    padding: var(--docs-layout-top) 1.25rem var(--docs-rail-fade) var(--docs-rail-gutter);
    overflow-y: auto;
    /* Deliberately not `contain`. This rail is a column of the page, not an
       overlay on top of it, and `contain` stops the scroll dead at the end of
       the guide list instead of passing it on: the whole left side of every
       documentation page became a strip where the wheel did nothing at all
       until the pointer was moved off it. `auto` is also what Lenis reads to
       decide when to take the wheel back from an inner scroller — at `contain`
       it hands the gesture over and never reclaims it. The drawer that this
       same element becomes below 860px *is* an overlay, and keeps `contain`. */
    overscroll-behavior: auto;

    /* Enough room that the last guide is not sitting on the floor of the rail,
       and a fade of exactly that depth so the space does not read as the list
       stopping short: anything still to come dissolves into the bottom edge
       instead of being cut off at it. The two match, so scrolled to the end the
       last guide sits level with the top of the fade and stays fully lit. */
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--docs-rail-fade)), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - var(--docs-rail-fade)), transparent 100%);
}
.docs-sidebar::-webkit-scrollbar { width: 6px; }
.docs-sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.docs-group + .docs-group { margin-top: 1.75rem; }
.docs-group-label {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-3); margin-bottom: .6rem; padding-left: .85rem;
}
.docs-link {
    display: block; position: relative;
    padding: .38rem .85rem; border-radius: var(--r-sm);
    font-size: .9rem; color: var(--text-2);
    border-left: 1px solid var(--line);
    transition: color .16s var(--ease), border-color .16s var(--ease);
}
.docs-link:hover { color: var(--text); border-left-color: var(--text-3); }
.docs-link.is-current { color: var(--accent); border-left-color: var(--accent); background: rgba(96, 205, 255, .05); }

/* Holds the space the layout used to reserve beneath all three columns, so the
   gap before the footer is unchanged while the rails keep their full run. */
.docs-content { min-width: 0; padding-bottom: 5rem; }
.docs-eyebrow {
    font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-3);
}
.docs-content h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: .7rem 0 1rem; }
.docs-content > .lede { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }

.docs-content h2 {
    font-size: 1.45rem; margin: 3rem 0 1rem; scroll-margin-top: 96px;
    padding-top: .4rem;
}
.docs-content h3 { font-size: 1.12rem; margin: 2rem 0 .75rem; scroll-margin-top: 96px; }
.docs-content p { color: var(--text-2); }
.docs-content strong { color: var(--text); font-weight: 600; }
.docs-content a:not(.button):not(.docs-link):not(.pager-link) {
    color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line);
    text-underline-offset: .18em;
}
.docs-content a:not(.button):not(.docs-link):not(.pager-link):hover { text-decoration-color: var(--accent); }

.docs-content ul, .docs-content ol { color: var(--text-2); padding-left: 1.3rem; margin: 0 0 1.2rem; }
.docs-content li { margin-bottom: .5rem; }
.docs-content li::marker { color: var(--text-3); }

.docs-content figure { margin: 2rem 0; }

.anchor {
    opacity: 0; margin-left: .5rem; color: var(--text-3); font-weight: 400;
    transition: opacity .15s var(--ease);
}
h2:hover .anchor, h3:hover .anchor { opacity: 1; }

/* On this page ------------------------------------------------------------- */

.docs-toc {
    position: sticky;
    top: var(--docs-rail-top);
    max-height: var(--docs-rail-height);
    overflow-y: auto;
    /* A column of the page, so it passes the scroll on at its ends rather than
       swallowing it — the same reasoning as .docs-sidebar above. No guide
       currently has a contents list long enough to overflow this rail, so this
       is closing the trap before one does. */
    overscroll-behavior: auto;
    font-size: .85rem;
}
.docs-toc-label {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-3); margin-bottom: .8rem;
}
.docs-toc a {
    display: block; padding: .28rem 0 .28rem .85rem;
    color: var(--text-3); border-left: 1px solid var(--line);
    transition: color .16s var(--ease), border-color .16s var(--ease);
}
.docs-toc a:hover { color: var(--text-2); }
.docs-toc a.is-current { color: var(--accent); border-left-color: var(--accent); }

/* Pager -------------------------------------------------------------------- */

.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.pager-link {
    text-decoration: none; color: inherit;
    padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--bg-raised); transition: border-color .18s var(--ease), background .18s var(--ease);
}
.pager-link:hover { border-color: var(--line-strong); background: var(--surface); }
.pager-link.is-next { text-align: right; grid-column: 2; }
.pager-dir { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.pager-title { font-weight: 600; margin-top: .25rem; }

/* --- Tables ---------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 1.75rem 0; border: 1px solid var(--line); border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 480px; }
th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
    font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-3); font-weight: 500; background: rgba(255, 255, 255, .015);
}
td { color: var(--text-2); }
tr:last-child td { border-bottom: 0; }
td code, td kbd { white-space: nowrap; }

/* --- Code and keys --------------------------------------------------------- */

code {
    font-family: var(--mono); font-size: .87em;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
    padding: .1em .4em; border-radius: 4px; color: #cfe8f7;
}

pre {
    margin: 1.75rem 0; padding: 1.15rem 1.3rem; overflow-x: auto;
    background: #0b0d10; border: 1px solid var(--line); border-radius: var(--r-md);
    font-family: var(--mono); font-size: .84rem; line-height: 1.7; color: #cbd4dc;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }

kbd {
    font-family: var(--mono); font-size: .8em;
    padding: .15em .45em; border-radius: 4px;
    border: 1px solid var(--line-strong); border-bottom-width: 2px;
    background: var(--surface-2); color: var(--text);
}

/* --- Misc page furniture --------------------------------------------------- */

.page-head { padding: clamp(3rem, 6vw, 4.5rem) 0 0; }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); margin: 1rem 0 1rem; }
.page-head .lede { max-width: 660px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.card {
    padding: 1.6rem; background: var(--bg-raised);
    border: 1px solid var(--line); border-radius: var(--r-lg);
}
.card h3 { font-size: 1.05rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .6rem; }
.card h3 .icon { color: var(--accent); }
.card p { color: var(--text-2); font-size: .93rem; }

.spec-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.spec-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; padding: 1.15rem 1.5rem; background: var(--bg-raised); }
.spec-row + .spec-row { border-top: 1px solid var(--line); }
.spec-key { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; padding-top: .15rem; }
.spec-val { color: var(--text-2); font-size: .95rem; }
.spec-val strong { color: var(--text); }

.faq-list { display: grid; gap: 1rem; }
.faq-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-raised);
    overflow: clip;
    transition: border-color .22s var(--ease), background .22s var(--ease);
}
.faq-item:hover,
.faq-item[open]:not(.is-closing),
.faq-item.is-open {
    border-color: var(--line-strong);
    background: var(--surface);
}
.faq-item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.4rem;
    cursor: pointer;
    list-style: none;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--accent) inset;
}
.faq-item summary::after {
    content: '+';
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 400;
    transition: transform .22s cubic-bezier(0.2, 0, 0.2, 1), background .22s var(--ease);
}
.faq-item[open]:not(.is-closing) summary::after,
.faq-item.is-open summary::after {
    transform: rotate(45deg);
    background: var(--accent-dim);
}
.faq-body {
    overflow: hidden;
}
.faq-item p,
.faq-body p {
    max-width: 960px;
    margin: 0;
    padding: 1.15rem 1.4rem 1.35rem;
    border-top: 1px solid var(--line);
    color: var(--text-2);
}

.download-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.download-card {
    display: flex; flex-direction: column;
    padding: 2rem; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--bg-raised); position: relative;
}
.download-card.is-primary { border-color: var(--accent-line); }
.download-card .badge {
    position: absolute; top: 1.5rem; right: 1.5rem;
    font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px; padding: .2rem .6rem;
}
.download-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.download-card .size { font-family: var(--mono); font-size: .8rem; color: var(--text-3); margin-bottom: 1rem; }
.download-card p { color: var(--text-2); font-size: .93rem; }
.download-card .button { margin-top: auto; }
.download-card .checklist { margin-bottom: 1.75rem; }

/* --- Footer ---------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); padding: 4rem 0 3rem; margin-top: 2rem; background: var(--bg-raised); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: 2.5rem; padding-bottom: 3rem; }
.footer-blurb { color: var(--text-3); font-size: .9rem; margin-top: 1rem; max-width: 300px; }
.footer-heading { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; font-weight: 500; }
.footer-col { display: flex; flex-direction: column; gap: .55rem; }
.footer-col a { font-size: .9rem; color: var(--text-2); display: inline-flex; align-items: center; gap: .35rem; transition: color .16s var(--ease); }
.footer-col a:hover { color: var(--accent); }

.footer-legal { padding-top: 2.5rem; border-top: 1px solid var(--line); }
.footer-legal p { font-size: .82rem; color: var(--text-3); max-width: 780px; line-height: 1.65; }
.footer-legal a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-strong); }
.footer-meta { display: flex; gap: .75rem; font-family: var(--mono); font-size: .75rem; margin-top: 1.5rem; }

/* --- The bar under the footer ---------------------------------------------
   A full-bleed band rather than a row inside the shell, so it reads as the
   floor of the page instead of one more paragraph of the legal block. The
   footer gives up its bottom padding to it; the legal block above carries that
   spacing instead, so the rhythm is unchanged and the bar sits flush.        */

.footer-bar {
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, .24);
}

.footer-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    padding-block: 1.15rem;
}

.footer-bar-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    min-width: 0;
}

.footer-bar-links a {
    font-size: .82rem;
    color: var(--text-3);
    white-space: nowrap;
    transition: color .16s var(--ease);
}

.footer-bar-links a:hover { color: var(--accent); }

.footer-bar-meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    flex: none;
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--text-3);
    white-space: nowrap;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1080px) {
    /* Two columns now; the rule follows the narrower rail. */
    .docs-layout { --docs-rail-width: 220px; grid-template-columns: var(--docs-rail-width) minmax(0, 1fr); }
    .docs-toc { display: none; }
    .docs-content { grid-column: 2; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The seven labels plus the adjacent Support and Download actions need more room
   beside the wordmark. Below this width the bar becomes the full navigation
   panel before any item can be squeezed or clipped. */
@media (max-width: 1160px) {
    .header-actions {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-left: auto;
    }

    .nav-toggle {
        display: inline-flex;
    }

    /* Fullscreen mobile navigation overlay */
    body.is-menu-open {
        overflow: hidden;
    }

    /* One continuous backdrop layer sits behind both pieces of mobile chrome.
       Keeping the blur out of the header's own stacking context lets the menu
       sample the page beneath it instead of trying to blur an already isolated
       ancestor surface. */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 98;
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        background: rgba(8, 10, 13, .54);
        backdrop-filter: blur(24px) saturate(140%);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        transition: opacity .24s var(--ease), visibility 0s .24s;
    }

    body.is-menu-open::before {
        visibility: visible;
        opacity: 1;
        transition: opacity .24s var(--ease);
    }

    /* The page-wide overlay takes over the header's material. Both sides of the
       hand-off run on the same duration and curve, so the header never shows a
       frame without one or the other behind it. */
    body.is-menu-open .site-header {
        border-bottom-color: transparent;
        box-shadow: none;
    }

    body.is-menu-open .site-header::before {
        opacity: 0;
    }

    .site-nav {
        position: fixed;
        top: var(--site-header-height, 61px);
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100vh - var(--site-header-height, 61px));
        height: calc(100dvh - var(--site-header-height, 61px));
        margin: 0;
        padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 3rem;
        /* The body layer owns the page blur. This slight tint keeps the links
           readable without hiding the softened page underneath them. */
        background: rgba(8, 10, 13, .08);
        backdrop-filter: blur(8px) saturate(120%);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        border-top: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .45rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        transform: translateY(-8px);
        visibility: hidden;
        pointer-events: none;
        transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s .18s;
        z-index: 99;
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        body.is-menu-open::before {
            background: rgba(8, 10, 13, .96);
        }
    }

    .site-nav.is-open {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition: opacity .22s var(--ease), transform .22s var(--ease);
    }

    .site-nav-pill {
        display: none;
    }

    .site-nav-link {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .75rem .95rem;
        border-radius: var(--r-md);
        border: 1px solid rgba(255, 255, 255, .05);
        background: rgba(255, 255, 255, .02);
        color: var(--text);
        text-decoration: none;
        white-space: normal;
        transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
    }

    .site-nav-link:hover,
    .site-nav-link:focus-visible {
        background: rgba(96, 205, 255, .06);
        border-color: rgba(96, 205, 255, .25);
        color: #fff;
    }

    .site-nav-link:active {
        transform: scale(.99);
    }

    .site-nav-link::before {
        display: none;
    }

    .site-nav-link.is-current {
        background: rgba(96, 205, 255, .1);
        border-color: rgba(96, 205, 255, .4);
        box-shadow: 0 0 24px -8px rgba(96, 205, 255, .35);
        color: #fff;
    }

    .site-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 36px;
        height: 36px;
        border-radius: var(--r-sm);
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        color: var(--accent);
        transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
    }

    .site-nav-icon .icon {
        width: 18px;
        height: 18px;
    }

    .site-nav-link:hover .site-nav-icon,
    .site-nav-link.is-current .site-nav-icon {
        background: rgba(96, 205, 255, .18);
        border-color: rgba(96, 205, 255, .35);
        color: #fff;
    }

    .site-nav-copy {
        display: flex;
        flex-direction: column;
        gap: .15rem;
        flex: 1;
        min-width: 0;
    }

    .site-nav-label {
        font-size: .95rem;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1.25;
        color: var(--text);
    }

    .site-nav-link.is-current .site-nav-label,
    .site-nav-link:hover .site-nav-label {
        color: #fff;
    }

    .site-nav-desc {
        display: block;
        font-size: .78rem;
        color: var(--text-3);
        line-height: 1.3;
        font-weight: 400;
    }

    .site-nav-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        color: var(--text-3);
        transition: transform .18s var(--ease), color .18s var(--ease);
    }

    .site-nav-arrow .icon {
        width: 14px;
        height: 14px;
    }

    .site-nav-link:hover .site-nav-arrow {
        color: var(--accent);
    }

    .site-nav-link.is-current .site-nav-arrow {
        color: var(--accent);
    }

    .site-nav-download,
    .site-nav > .button {
        display: inline-flex;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: .6rem;
        padding: .85rem 1.25rem;
        justify-content: center;
        font-size: .95rem;
    }
}

@media (max-width: 860px) {
    body.is-docs .docs-toggle,
    html.is-entering-docs .docs-toggle {
        display: inline-flex;
        opacity: 1;
        transform: none;
    }

    html.is-animating.is-leaving-docs body.is-docs .docs-toggle {
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
    }

    html.is-animating.is-entering-docs .docs-toggle {
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
    }

    body.is-docs .docs-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgba(0, 0, 0, .6);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s var(--ease);
    }
    body.is-docs-drawer-open .docs-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.is-docs-drawer-open {
        overflow: hidden;
    }

    /* One column, so the explicit placement above has to come off or the article
       would demand a second, implicit one. */
    .docs-layout {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 1.5rem;
    }
    .docs-sidebar, .docs-content, .docs-toc { grid-column: auto; }
    /* On mobile, documentation navigation is a dedicated slide-out drawer rather than
       a 16-guide block stacked on top of the article. */
    .docs-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 115;
        width: min(86vw, 320px);
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 1.25rem 1.25rem 2.5rem;
        background: var(--bg-raised);
        border-right: 1px solid var(--line-strong);
        border-bottom: none;
        box-shadow: 0 0 50px rgba(0, 0, 0, .65);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform .28s var(--ease), visibility 0s .28s;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .docs-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform .28s var(--ease);
    }

    .docs-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding-bottom: 1rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid var(--line);
    }
    .docs-drawer-heading {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-family: var(--mono);
        font-size: .8rem;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--accent);
    }
    .docs-drawer-heading .icon { width: 16px; height: 16px; }
    .docs-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid var(--line);
        color: var(--text-2);
        border-radius: var(--r-sm);
        padding: .4rem;
        cursor: pointer;
        transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
    }
    .docs-drawer-close:hover {
        background: var(--surface);
        border-color: var(--line-strong);
        color: var(--text);
    }
    .docs-drawer-close .icon { width: 18px; height: 18px; }

    /* Stacked, so there is no column for a vertical rule to divide. */
    .docs-layout::before { display: none; }

    .split, .split.is-reversed { grid-template-columns: minmax(0, 1fr); }
    .split.is-reversed .split-media { order: 0; }

    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2) { border-right: 0; }
    .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

    .feature-grid, .mode-grid, .download-grid { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .spec-row { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
    .docs-pager { grid-template-columns: minmax(0, 1fr); }
    .docs-pager .pager-link.is-next { grid-column: 1; text-align: left; }
}

@media (max-width: 620px) {
    .shell { padding-inline: 20px; }
    .faq-item summary { padding: 1.1rem; gap: .8rem; }
    .faq-item p { padding: 1rem 1.1rem 1.2rem; }
    .footer-grid { grid-template-columns: minmax(0, 1fr); }

    /* Stacked and centred, links first: they are the part worth tapping, and the
       version belongs at the very foot of the page rather than above them. The
       links keep their own row gap so a wrap reads as two lines rather than as a
       block of text. */
    .footer-bar-inner {
        flex-direction: column;
        align-items: center;
        gap: .9rem;
        padding-block: 1.3rem;
    }

    .footer-bar-links {
        justify-content: center;
        gap: .65rem 1.15rem;
    }

    .footer-bar-links a { font-size: .8rem; }
}

/* --- Code blocks with a copy affordance ------------------------------------ */

.code-block { position: relative; }
.code-block pre { margin: 1.75rem 0; }

.code-copy {
    position: absolute; top: 1.75rem; right: .6rem;
    padding: .3rem .6rem;
    background: var(--surface-2); color: var(--text-2);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
    cursor: pointer; opacity: 0;
    transition: opacity .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.code-block:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--accent); border-color: var(--accent-line); }

/* Touch pointers have no hover, so the control has to be permanently visible. */
@media (hover: none) {
    .code-copy { opacity: 1; }
}

/* A call to action with nowhere to go until the public package is available. */
.button.is-disabled {
    background: var(--surface-2); color: var(--text-3);
    border-color: var(--line); cursor: default;
}
.button.is-disabled:hover { background: var(--surface-2); transform: none; box-shadow: none; }