@font-face
{
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root
{
    color-scheme: dark;

    --ground: #0d0e10;
    --rail: #111215;
    --panel: #141518;
    --raised: #1d1f23;
    --raised-hover: #26292e;
    --sunken: #08090a;
    --overlay: #1f2125;

    --ink: #eceef1;
    --ink-2: #babfc8;
    --ink-3: #9096a1;
    --ink-disabled: #5a5f68;

    --line: color-mix(in oklab, var(--ink) 8%, transparent);
    --line-strong: color-mix(in oklab, var(--ink) 14%, transparent);
    --line-control: #737985;
    --rail-edge: #23252a;

    --accent: #4fc3f7;
    --accent-hover: #6fd0fa;
    --accent-pressed: #38b3ea;
    --on-accent: #031420;
    --accent-ink: #66d2ff;
    --focus: var(--accent-ink);

    --wash-hover: color-mix(in oklab, var(--ink) 5%, transparent);
    --wash-pressed: color-mix(in oklab, var(--ink) 8%, transparent);
    --wash-selected: color-mix(in oklab, var(--accent-ink) 11%, transparent);
    --text-selection: color-mix(in oklab, var(--accent-ink) 30%, transparent);
    --scrim: rgb(4 5 6 / 0.62);
    --scrollbar: #6c727c;

    --running: var(--accent-ink);
    --verified: #a2e696;
    --warning: #ffb020;
    --error: #ff6b78;
    --error-fill: #e5484d;
    --stamp-verified: color-mix(in srgb, var(--verified) 8%, var(--ground));
    --stamp-returned: color-mix(in srgb, var(--error-fill) 8%, var(--ground));
    --wash-running: color-mix(in oklab, var(--running) 10%, transparent);
    --wash-warning: color-mix(in oklab, var(--warning) 10%, transparent);
    --wash-error: color-mix(in oklab, var(--error-fill) 10%, transparent);

    --playhead: var(--ink);

    --font-sans: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, 'Helvetica Neue', sans-serif;
    --font-display: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Mono', 'Cascadia Code', Consolas, ui-monospace, 'SF Mono', Menlo, monospace;

    --shadow-well: inset 0 1px 3px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(0 0 0 / 0.5);
    --shadow-overlay: 0 8px 24px -6px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.4);
    --shadow-dialog: 0 24px 64px -8px rgb(0 0 0 / 0.65), 0 4px 12px rgb(0 0 0 / 0.4);
    --glow-readout: 0 0 10px color-mix(in oklab, var(--accent-ink) 35%, transparent);

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fast: 83ms;
    --move: 150ms;

    --wrap: 1280px;
    --gutter: clamp(16px, 4vw, 32px);
}

*,
*::before,
*::after
{
    box-sizing: border-box;
}

html
{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    scrollbar-color: var(--scrollbar) transparent;
    scrollbar-width: thin;
}

/* Native smooth scrolling is the fallback without JavaScript; Lenis (app/smooth.js) scrolls the page when it runs. */
html.lenis
{
    scroll-behavior: auto;
}

body
{
    margin: 0;
    background: var(--ground);
    color: var(--ink-2);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    caret-color: var(--accent-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main
{
    flex: 1;
    outline: none;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure
{
    margin: 0;
}

ul,
ol
{
    padding: 0;
    list-style: none;
}

img,
svg,
canvas
{
    display: block;
}

button
{
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

a
{
    color: var(--accent-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover
{
    color: var(--accent-hover);
}

h1,
h2,
h3,
h4
{
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
}

p,
li,
dd
{
    text-wrap: pretty;
}

code,
kbd,
samp,
.mono
{
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'calt' 0, 'liga' 0;
}

strong,
b
{
    font-weight: 600;
}

::selection
{
    background: var(--text-selection);
}

::-webkit-scrollbar
{
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track
{
    background: transparent;
}

::-webkit-scrollbar-thumb
{
    background: var(--scrollbar);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover
{
    background: #949aa5;
}

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

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

.skip
{
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s var(--ease-out);
}

.skip:focus-visible,
.skip:hover
{
    top: 10px;
    color: var(--on-accent);
}

.wrap
{
    width: 100%;
    max-width: calc(var(--wrap) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.ico
{
    display: inline-block;
    vertical-align: -0.15em;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

kbd
{
    display: inline-block;
    min-width: 1.8em;
    padding: 0 6px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--raised);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
}

.nav
{
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--rail);
    border-bottom: 1px solid var(--rail-edge);
    transition: background-color var(--move) var(--ease-out);
}

.nav-row
{
    display: flex;
    align-items: center;
    gap: 28px;
    height: 56px;
}

.brand
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
}

.brand:hover
{
    color: var(--ink);
}

.brand img
{
    width: 26px;
    height: 26px;
}

.brand em
{
    font-style: normal;
    color: var(--accent-ink);
}

.nav-links
{
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.nav-links a
{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--fast), background-color var(--fast);
}

.nav-links a:hover
{
    color: var(--ink);
    background: var(--wash-hover);
}

.nav-links a[aria-current='page']
{
    color: var(--ink);
    font-weight: 600;
}

.nav-links a[aria-current='page']:not(.nav-dl)::after
{
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 3px;
    border-radius: var(--radius-xs);
    background: var(--accent-ink);
    box-shadow: 0 0 10px color-mix(in oklab, var(--accent-ink) 45%, transparent);
}

.nav-links .nav-dl
{
    margin-left: 8px;
    color: var(--on-accent);
    background: var(--accent);
    font-weight: 600;
}

.nav-links .nav-dl:hover,
.nav-links .nav-dl[aria-current='page']
{
    color: var(--on-accent);
    background: var(--accent-hover);
}

.nav-toggle
{
    display: none;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 auto;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    color: var(--ink);
}

@media (hover: hover)
{
    .nav-toggle:hover
    {
        background: var(--wash-hover);
    }
}

.burger line
{
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--move) var(--ease-out), opacity var(--fast) linear;
}

.nav[data-open='true'] .burger .b1
{
    transform: translateY(6px) rotate(45deg);
}

.nav[data-open='true'] .burger .b2
{
    opacity: 0;
}

.nav[data-open='true'] .burger .b3
{
    transform: translateY(-6px) rotate(-45deg);
}

.nav-scrim
{
    display: none;
}

html.menu-open
{
    overflow: hidden;
}

.btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}

.btn-primary
{
    color: var(--on-accent);
    background: var(--accent);
    font-weight: 600;
}

.btn-primary:hover
{
    color: var(--on-accent);
    background: var(--accent-hover);
}

.btn-primary:active
{
    background: var(--accent-pressed);
}

.btn-secondary
{
    color: var(--ink);
    background: var(--raised);
    border-color: var(--line-strong);
}

.btn-secondary:hover
{
    color: var(--ink);
    background: var(--raised-hover);
}

.btn-ghost
{
    color: var(--ink-2);
}

.btn-ghost:hover
{
    color: var(--ink);
    background: var(--wash-hover);
}

.btn-lg
{
    min-height: 48px;
    padding: 0 22px;
    font-size: 1rem;
}

.btn[aria-disabled='true']
{
    opacity: 0.55;
    pointer-events: none;
}

.link-btn
{
    color: var(--accent-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.link-btn:hover
{
    color: var(--accent-hover);
}

.hero
{
    padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 6vw, 72px);
    overflow-x: clip;
}

.hero-grid
{
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.hero h1
{
    font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
}

.hero-pitch
{
    margin-top: 18px;
    max-width: 34em;
    font-size: 1.0625rem;
    color: var(--ink-2);
}

.get
{
    margin-top: 28px;
}

.get-meta
{
    margin-top: 12px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.get-meta b
{
    color: var(--ink-2);
    font-weight: 500;
}

.get-file
{
    margin-top: 12px;
    color: var(--ink-3);
    font-size: 0.8125rem;
}

.get-terms
{
    margin-top: 8px;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.get-more
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 12px;
    font-size: 0.9375rem;
}

.get-note
{
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.get-note strong
{
    color: var(--ink);
}

.get-phone
{
    align-items: center;
    margin-top: 16px;
}

.phone-note
{
    display: grid;
    justify-items: start;
    gap: 12px;
    margin: 0 0 20px;
}

.steps
{
    counter-reset: step;
}

.steps ol > li
{
    counter-increment: step;
    position: relative;
    padding: 4px 0 4px 36px;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.steps ol > li::before
{
    content: counter(step);
    position: absolute;
    left: 0;
    top: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--raised);
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
}

.steps-row
{
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 16px clamp(24px, 4vw, 56px);
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(28px, 4vw, 40px);
    border-top: 1px solid var(--line);
}

.steps-row h2
{
    margin: 2px 0 0;
    font-size: 1.125rem;
}

.steps-row ol
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px clamp(20px, 3vw, 40px);
}

.band
{
    background: var(--panel);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.sec
{
    padding: clamp(56px, 8vw, 104px) 0;
}

.sec-tight
{
    padding-top: 0;
}

.sec h2
{
    font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
    letter-spacing: -0.01em;
}

.lead
{
    margin-top: 16px;
    max-width: 38em;
    font-size: 1.0625rem;
    color: var(--ink-2);
}

.split
{
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.split-flip
{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.split-flip > :first-child
{
    order: 2;
}

.sec-head
{
    max-width: 46rem;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.rows
{
    margin-top: 24px;
    border-top: 1px solid var(--line);
}

.rows li
{
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.rows li > strong
{
    color: var(--ink);
    font-weight: 600;
}

.rows-wide li
{
    grid-template-columns: 180px minmax(0, 1fr);
}

.rows code,
.lead code,
.prose code,
.spec code,
.bullets code,
.plat-help code
{
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--raised);
    color: var(--ink);
    font-size: 0.85em;
}

.more-link
{
    margin-top: 22px;
    font-weight: 500;
}

.more-link a
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.facts
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px clamp(24px, 4vw, 56px);
    margin-top: clamp(28px, 4vw, 44px);
}

.facts h3
{
    margin-bottom: 8px;
    font-size: 1rem;
}

.facts li
{
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
}

.facts li:last-child
{
    border-bottom: 0;
}

.stampcase
{
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--ground);
    padding: 18px 20px;
    font-size: 0.875rem;
}

.stampcase h3
{
    font-size: 0.9375rem;
    margin-bottom: 12px;
}

.stampcase-row
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}

.stampcase-row > span:first-child
{
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stampcase p
{
    margin-top: 12px;
    color: var(--ink-3);
    font-size: 0.8125rem;
}

.stampcase p + p
{
    margin-top: 6px;
}

.stampcase p strong
{
    color: var(--ink-2);
}

.close
{
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.platforms
{
    border-top: 1px solid var(--line-strong);
}

.plat
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 28px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.plat-main
{
    min-width: 0;
}

.plat-name
{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 1.375rem;
}

.plat-you
{
    color: var(--accent-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.plat-spec
{
    margin-top: 6px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plat-purpose
{
    margin-top: 2px;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.plat-actions
{
    display: flex;
    gap: 8px;
}

.plat-help
{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
}

.plat-file
{
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.cmd
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--sunken);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink);
}

.cmd code
{
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0;
    background: none;
    font-size: inherit;
}

.copy
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
}

.copy:hover
{
    background: var(--wash-hover);
    color: var(--ink);
}

.state
{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    font-size: 0.9375rem;
}

.state[data-kind='error']
{
    border-color: color-mix(in srgb, var(--error-fill) 45%, transparent);
}

.state[data-kind='error'] > .ico
{
    color: var(--error);
    margin-top: 3px;
}

.state strong
{
    color: var(--ink);
}

.state-actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 6px;
}

@keyframes pulse
{
    50%
    {
        opacity: 0.35;
    }
}

.skel
{
    display: inline-block;
    height: 0.9em;
    width: var(--w, 12ch);
    border-radius: var(--radius-sm);
    background: var(--raised);
    vertical-align: middle;
    animation: pulse 1.4s ease-in-out infinite;
}

.page-head
{
    padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 40px);
}

.page-head h1,
.nf h1
{
    font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
    letter-spacing: -0.015em;
}

.crumbs
{
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--ink-3);
    font-size: 0.875rem;
}

.crumbs a
{
    color: var(--ink-2);
}

.doc
{
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
    padding-bottom: clamp(56px, 8vw, 104px);
}

.toc
{
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
}

.toc-title
{
    margin-bottom: 8px;
    color: var(--ink-3);
    font-size: 0.8125rem;
}

.toc a
{
    padding: 6px 10px;
    border-left: 2px solid var(--line-strong);
    color: var(--ink-2);
    text-decoration: none;
}

.toc a:hover
{
    color: var(--ink);
    border-left-color: var(--accent-ink);
}

.doc-sec
{
    scroll-margin-top: 80px;
}

.doc-sec + .doc-sec
{
    margin-top: clamp(48px, 6vw, 72px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--line);
}

.doc-sec > h2
{
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
}

.doc-sec > p
{
    margin-top: 12px;
    max-width: 40em;
}

.doc-sec h3
{
    margin: 28px 0 10px;
    font-size: 1.0625rem;
}

.doc-fig
{
    margin-top: 24px;
}

.spec-wrap
{
    margin-top: 16px;
    overflow-x: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
}

.spec-note
{
    margin-top: 10px;
    max-width: 52em;
    color: var(--ink-3);
    font-size: 0.8125rem;
}

.spec
{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.spec th,
.spec td
{
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.spec thead th
{
    height: 36px;
    background: var(--panel);
    color: var(--ink-3);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.spec tbody th
{
    color: var(--ink);
    font-weight: 600;
}

.spec tbody tr:last-child th,
.spec tbody tr:last-child td
{
    border-bottom: 0;
}

.spec .num
{
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--ink);
    white-space: nowrap;
}

.spec .grp th
{
    padding-top: 14px;
    background: var(--rail);
    color: var(--accent-ink);
    font-size: 0.8125rem;
}

.bullets li
{
    position: relative;
    padding: 6px 0 6px 18px;
    max-width: 44em;
}

.bullets li::before
{
    content: '';
    position: absolute;
    left: 2px;
    top: 0.95em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--accent-ink);
}

.bullets strong
{
    color: var(--ink);
}

.keys
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    margin-top: 10px;
}

.keys div
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
}

.keys dd
{
    display: flex;
    gap: 4px;
    flex: none;
}

.index-grid
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 48px);
    padding-bottom: clamp(56px, 8vw, 104px);
}

.index-col h2
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-strong);
    font-size: 1.375rem;
}

.index-col h2 a
{
    color: var(--ink);
    text-decoration: none;
}

.index-col h2 a:hover
{
    color: var(--accent-ink);
}

.index-col .more
{
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.index-col li
{
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.index-col li strong
{
    display: block;
    color: var(--ink);
}

.rel-list
{
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-strong);
    padding-bottom: clamp(56px, 8vw, 104px);
}

.rel
{
    border-bottom: 1px solid var(--line);
}

.rel-sum
{
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 6px 18px;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
}

.rel-sum::-webkit-details-marker
{
    display: none;
}

.rel-sum:hover .rel-title
{
    color: var(--accent-ink);
}

.rel-ver
{
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
}

.rel-sum h2.rel-title
{
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.rel-date
{
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.rel-latest-tag
{
    margin-left: 10px;
    color: var(--verified);
    font-size: 0.8125rem;
    font-weight: 600;
}

.rel-body
{
    padding: 0 0 20px 106px;
}

.rel-links
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
}

.prose
{
    max-width: 42em;
    font-size: 1rem;
}

.prose > * + *
{
    margin-top: 12px;
}

.prose h3
{
    margin-top: 22px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
}

.prose h4
{
    margin-top: 16px;
    font-size: 1rem;
}

.prose ul li
{
    position: relative;
    padding: 3px 0 3px 18px;
}

.prose ul li::before
{
    content: '';
    position: absolute;
    left: 2px;
    top: 0.85em;
    width: 5px;
    height: 5px;
    border-radius: 2px;
    background: var(--ink-3);
}

.prose strong
{
    color: var(--ink);
}

.foot
{
    border-top: 1px solid var(--rail-edge);
    background: var(--rail);
    padding: 44px 0 32px;
    font-size: 0.9375rem;
}

.foot-grid
{
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.foot-grid h2
{
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.foot-grid li
{
    padding: 3px 0;
}

.foot-grid a
{
    color: var(--ink-2);
    text-decoration: none;
}

.foot-grid a:hover
{
    color: var(--ink);
    text-decoration: underline;
}

.foot-about
{
    max-width: 30em;
    margin-top: 12px;
    color: var(--ink-3);
}

.foot-base
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 0.875rem;
}

.foot-base a
{
    color: var(--ink-2);
}

.nf
{
    padding-top: clamp(64px, 10vw, 140px);
    padding-bottom: clamp(64px, 10vw, 140px);
}

.nf p
{
    margin-top: 16px;
    max-width: 36em;
}

.nf .get-more
{
    margin-top: 24px;
}

h1[tabindex='-1']:focus
{
    outline: none;
}

.dl-grid
{
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
    padding-bottom: clamp(56px, 8vw, 104px);
}

.dl-aside h2
{
    margin-bottom: 12px;
    font-size: 1.125rem;
}

.dl-aside > * + *
{
    margin-top: 32px;
}

@media (min-width: 1081px)
{
    .stick
    {
        position: sticky;
        top: 80px;
    }
}

/* Captures of the app from scripts/website-screens.mjs. Phones get a crop of the window at a readable scale. */

.shot
{
    margin-top: clamp(24px, 3vw, 36px);
}

.split > .shot
{
    margin-top: 6px;
}

.shot picture
{
    display: block;
}

.shot img
{
    width: 100%;
    height: auto;
    border: 1px solid var(--rail-edge);
    border-radius: var(--radius-md);
    background: var(--ground);
}

.shot figcaption
{
    margin-top: 10px;
    color: var(--ink-3);
    font-size: 0.8125rem;
}

.shot-open
{
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

.shot-open:focus-visible
{
    outline-offset: 3px;
}

.shot-chip
{
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--overlay);
    color: var(--ink);
    font-size: 0.8125rem;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--fast);
    pointer-events: none;
}

.shot-open:hover .shot-chip,
.shot-open:focus-visible .shot-chip
{
    opacity: 1;
}

@media (hover: none)
{
    .shot-chip
    {
        opacity: 1;
    }
}

.hero-shot
{
    margin-top: 0;
}

.hero-shot img
{
    box-shadow: var(--shadow-dialog);
}

/* The hero window keeps the app's 13 px text near 11 px: it reaches toward the viewport edge, or runs past it. */
@media (min-width: 1081px)
{
    .hero-shot .shot-open
    {
        width: max(952px, min(100% + 160px, 100% + max(var(--gutter), (100vw - var(--wrap)) / 2)));
        max-width: none;
    }
}

/* The screenshot viewer (app/viewer.js): the whole capture on an opaque ground, fitted or at actual pixels. */

html:has(dialog[open])
{
    overflow: hidden;
}

.viewer
{
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--ground);
    color: var(--ink);
}

.viewer[open]
{
    display: flex;
    flex-direction: column;
    animation: viewer-in var(--move) var(--ease-out);
}

.viewer::backdrop
{
    background: var(--ground);
}

@keyframes viewer-in
{
    from
    {
        opacity: 0;
    }
}

.viewer-bar
{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px clamp(12px, 2vw, 24px);
    border-bottom: 1px solid var(--rail-edge);
    background: var(--rail);
}

.viewer-caption
{
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--ink-2);
    font-size: 0.875rem;
    line-height: 1.45;
}

.viewer-controls
{
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
}

.viewer-nav
{
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
}

.viewer-nav[hidden]
{
    display: none;
}

.viewer-count
{
    min-width: 4.5em;
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.viewer-btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-2);
    font: inherit;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--fast), color var(--fast);
}

.viewer-btn:hover
{
    background: var(--wash-hover);
    color: var(--ink);
}

.viewer-icon
{
    width: 36px;
    padding: 0;
}

.viewer-toggle
{
    border-color: var(--line-strong);
    background: var(--raised);
    color: var(--ink);
}

.viewer-toggle:hover
{
    background: var(--raised-hover);
}

.viewer-stage
{
    display: flex;
    flex: 1;
    min-height: 0;
    padding: clamp(12px, 3vw, 32px);
    overflow: auto;
    overscroll-behavior: contain;
}

.viewer-stage picture
{
    display: contents;
}

.viewer-stage img
{
    flex: none;
    height: auto;
    margin: auto;
    border: 1px solid var(--rail-edge);
    border-radius: var(--radius-md);
    background: var(--panel);
    cursor: zoom-in;
}

.viewer-stage[data-actual]
{
    padding: 0;
}

.viewer-stage[data-actual] img
{
    border: 0;
    border-radius: 0;
    cursor: zoom-out;
}

.viewer-stage[data-panning],
.viewer-stage[data-panning] img
{
    cursor: grabbing;
    user-select: none;
}

.viewer-stage:focus-visible
{
    outline-offset: -2px;
}

@media (max-width: 760px)
{
    .viewer-bar
    {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
        padding: 8px 12px 12px;
    }

    .viewer-controls
    {
        justify-content: space-between;
    }

    .viewer-nav
    {
        margin-right: auto;
    }
}

.status
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status[data-status='ready']
{
    color: var(--ink-2);
}

.status[data-status='queued'],
.status[data-status='pending']
{
    color: var(--ink-3);
}

.status[data-status='analyzing'],
.status[data-status='encoding'],
.status[data-status='verifying'],
.status[data-status='finalizing']
{
    color: var(--running);
}

.status[data-status='done']
{
    color: var(--verified);
}

.status[data-status='warning']
{
    color: var(--warning);
}

.status[data-status='error']
{
    color: var(--error);
}

.status[data-status='info']
{
    color: var(--ink-2);
}

.status .spin
{
    animation: spin 1.1s linear infinite;
}

@keyframes spin
{
    to
    {
        transform: rotate(360deg);
    }
}

.stamp
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 22px;
    max-width: 100%;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
}

.stamp .ico
{
    flex: none;
}

.stamp .word
{
    font-family: 'Segoe UI Variable Small', var(--font-sans);
    font-size: 0.6875rem;
    line-height: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.stamp[data-outcome='verified']
{
    background: var(--stamp-verified);
    color: var(--verified);
}

.stamp[data-outcome='returned']
{
    background: var(--stamp-returned);
    color: var(--error);
}

.stamp .vals
{
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-list li
{
    grid-template-columns: 148px minmax(0, 1fr);
}

@media (max-width: 1080px)
{
    .hero-grid,
    .split,
    .split-flip,
    .close
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .split-flip > :first-child
    {
        order: 0;
    }

    .hero-copy
    {
        max-width: 40rem;
    }

    .facts
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .index-grid,
    .doc,
    .dl-grid
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .toc
    {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .toc-title
    {
        display: none;
    }

    .toc a
    {
        padding: 6px 12px;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
    }
}

@media (max-width: 760px)
{
    .nav-toggle
    {
        display: inline-flex;
    }

    .nav[data-open='true']
    {
        background: var(--overlay);
    }

    .nav-links
    {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        max-height: calc(100dvh - 56px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px var(--gutter) 20px;
        border-bottom: 1px solid var(--rail-edge);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        background: var(--overlay);
        box-shadow: var(--shadow-overlay);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 100ms linear, transform 100ms var(--ease-out), visibility 0s linear 100ms;
    }

    .nav[data-open='true'] .nav-links
    {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity var(--move) var(--ease-out), transform var(--move) var(--ease-out), visibility 0s;
    }

    .nav-scrim
    {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: var(--scrim);
        visibility: hidden;
        opacity: 0;
        transition: opacity 100ms linear, visibility 0s linear 100ms;
    }

    .nav[data-open='true'] + .nav-scrim
    {
        visibility: visible;
        opacity: 1;
        transition: opacity var(--move) var(--ease-out), visibility 0s;
    }

    .nav[data-snap] .nav-links,
    .nav[data-snap] .nav-links a,
    .nav[data-snap] + .nav-scrim
    {
        transition: none;
    }

    .nav-links a
    {
        height: 48px;
        padding: 0 14px;
        border: 1px solid transparent;
        font-size: 1rem;
        color: var(--ink);
    }

    .nav-links a[aria-current='page']:not(.nav-dl)
    {
        border-color: var(--accent);
        background: var(--wash-selected);
    }

    .nav-links a[aria-current='page']:not(.nav-dl)::after
    {
        display: none;
    }

    .nav-links .nav-dl
    {
        margin: 12px 0 0;
        justify-content: center;
    }

    .facts,
    .keys,
    .steps-row,
    .steps-row ol
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .rows li,
    .rows-wide li,
    .ops-list li
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .plat
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .plat-spec
    {
        white-space: normal;
    }

    .plat-actions
    {
        flex-wrap: wrap;
    }

    .plat-actions .btn
    {
        flex: 1 1 140px;
    }

    .rel-sum
    {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rel-sum h2.rel-title
    {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .rel-body
    {
        padding: 0 0 18px;
    }

    .foot-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .foot-brand
    {
        grid-column: 1 / -1;
    }

    .stampcase-row
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce)
{
    html
    {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after
    {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}