:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: 'Fira Code', JetBrains Mono, Consolas, monospace;
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: clamp(1.75rem, 1.5rem + 1vw, 2rem);
    --font-4xl: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
    --font-regular: 400;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --tracking-tighter: -0.02em;
    --tracking-tight: -0.01em;
    --neutral-0: #ffffff;
    --neutral-200: #ebe7e0;
    --neutral-300: #ddd7cd;
    --neutral-400: #b5ada1;
    --neutral-600: #635d56;
    --neutral-700: #4a453f;
    --neutral-900: #1f1c19;
    --delight-50: #fff5f0;
    --delight-600: #e85a2a;
    --info-100: #e0f2fe;
    --info-500: #0ea5e9;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --radius-sm: 0.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;
    --shadow-xs: 0 0 3px 0 rgb(31 28 25 / 0.04);
    --shadow-sm: 0 0 8px -2px rgb(31 28 25 / 0.08);
    --shadow-md: 0 0 20px -4px rgb(31 28 25 / 0.1);
    --shadow-lg: 0 0 25px -5px rgb(31 28 25 / 0.11);
    --duration-fast: 150ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --focus-ring-width: 3px;
    --focus-ring-offset: 3px;
    --accent-50: #f5f3f9;
    --accent-100: #ebe5f3;
    --accent-200: #d4c8e6;
    --accent-300: #b8a4d4;
    --accent-400: #9a7ec0;
    --accent-500: #7c5dac;
    --accent-600: #6b4d9a;
    --accent-700: #5a4082;
    --accent-800: #4a3469;
    --bg-surface: var(--neutral-0);
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-tertiary: var(--neutral-400);
    --text-link: var(--accent-600);
    --text-link-hover: var(--accent-700);
    --accent-primary: var(--accent-600);
    --accent-hover: var(--accent-700);
    --accent-active: var(--accent-800);
    --accent-contrast: var(--neutral-0);
    --action-primary-bg: var(--accent-primary);
    --action-primary-bg-hover: var(--accent-hover);
    --action-primary-bg-active: var(--accent-active);
    --action-primary-text: var(--accent-contrast);
    --action-secondary-bg: #e7e6ea;
    --action-secondary-bg-hover: #d8d6de;
    --action-secondary-bg-active: #cbc8d3;
    --action-secondary-glow: #d8d5e4;
    --action-secondary-text: var(--neutral-700);
    --button-height-xs: 1.75rem;
    --button-height-sm: 2.25rem;
    --button-height-md: 2.75rem;
    --canvas-bg: #f7f7f7;
    --table-header-border: rgba(90, 90, 180, 0.10);
    --interactive-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--canvas-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(
            ellipse 120% 60% at 20% 95%,
            rgba(230, 210, 235, 0.45) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 100% 50% at 80% 95%,
            rgba(255, 220, 210, 0.40) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 80% 40% at 50% 95%,
            rgba(255, 200, 220, 0.35) 0%,
            transparent 50%
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(250, 245, 250, 0.4) 70%,
            rgba(245, 240, 248, 0.6) 100%
        );
}
#Main {
    margin-top: 4rem;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
html {
    overflow-y: scroll;
    scrollbar-color: var(--neutral-300) transparent;
    scrollbar-width: thin;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-400);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}
h1 {
    font-size: var(--font-4xl);
    font-weight: var(--font-extrabold);
    letter-spacing: var(--tracking-tighter);
}
h2 {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
}
h3 {
    font-size: var(--font-2xl);
}
h4 {
    font-size: var(--font-xl);
}
h5 {
    font-size: var(--font-lg);
}
h6 {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
}
p {
    margin: 0;
}
a {
    color: var(--text-link);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--easing-default);
}
a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.shake { animation: shake 0.4s var(--easing-default); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-sm { font-size: var(--font-sm); }
.page { max-width: 1000px; margin: 0 auto; padding: var(--spacing-8); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-6); }
.label-light {
    font-size: var(--font-xs);
    font-family: var(--font-mono);
    color: var(--text-tertiary);
}
.card {
    border-bottom-color: var(--table-header-border);
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--interactive-focus-ring);
}
:root {
    --ob-canvas: #fbfbfd;
    --ob-card: #ffffff;
    --ob-card-head: #f9fafc;
    --ob-line: #e8eaf0;
    --ob-line-in: #eef0f4;
    --ob-ink: #16181d;
    --ob-ink-2: #5f6472;
    --ob-muted: #9a9fad;
    --ob-faint-1: #bcc1cc;
    --ob-faint-2: #c5c8d2;
    --ob-faint-3: #ccd0d9;
    --ob-accent: #5146e8;
    --ob-accent-ink: #3d33c4;
    --ob-accent-bg: #ebe9ff;
    --ob-accent-ring: #cdc8fb;
    --ob-accent-lift: #6359f0;
    --ob-accent-halo-0: rgba(81, 70, 232, 0);
    --ob-accent-halo-1: rgba(81, 70, 232, .13);
    --ob-butter-bg: #fff3cf;  --ob-butter-ink: #8a5a00;
    --ob-rose-bg: #ffe4e6;    --ob-rose-ink: #b91c1c;
    --ob-rose-card: #fff1f2;  --ob-rose-edge: #f6d7da;  --ob-rose-chip: #f5d2d6;
    --ob-mint-bg: #d9f5e5;    --ob-mint-ink: #157347;
    --ob-butter-edge: #f2e2b0;
    --ob-accent-tint: #fbfbff;
    --ob-grey-bg: #f3f4f7;
    --ob-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ob-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --ob-term-ink: #e8eaf1;
    --ob-term-bar: #23262e;
    --ob-term-bar-ink: #a3a8b8;
    --ob-term-btn: #30343e;
    --ob-term-prompt: #6b7184;
    --ob-term-key: #9fe3bd;
    --ob-stage-gap: 18px;
    --ob-stage-face: 44px;
    --ob-stage-av: 44px;
    --ob-stage-row-gap: 12px;
    --ob-stage-spine-gap: 16px;
    --ob-frame-radius: 22px;
    --ob-frame-line: 1.5px;
    --ob-frame-pad-x: 20px;
    --ob-frame-pad-y: 26px;
    --ob-frame-pad-b: 16px;
    --ob-flabel-h: 26px;
    --ob-proposed: #fbfcff;
    --ob-editing: #f5f6fe;
    --ob-editing-spine: #c8cfe4;
    --ob-skel: #e4e7ee;
    --ob-skel-2: #edeff4;
    --ob-skel-face-2: #e0e4ed;
    --ob-spine: #d5d9e3;
    --ob-home-card-gap: 16px;
    --ob-log-h: 38px;
    --ob-log-gap: 11px;
    --ob-on-accent: #ffffff;
    --ob-shadow-on-accent: 0 6px 18px rgba(22, 24, 80, .18);
    --ob-radius: 18px;
    --ob-radius-row: 22px;
    --ob-radius-panel: 16px;
    --ob-radius-tile: 14px;
    --ob-radius-sq: 10px;
    --ob-pill-h: 38px;
    --ob-shadow-modal: 0 24px 80px rgba(22, 24, 29, .35);
    --ob-shadow-menu: 0 18px 44px rgba(22, 24, 29, .14);
    --ob-shade: rgba(22, 24, 29, .55);
}
:root {
    --ob-site-w: 1360px;
    --ob-site-pad: 32px;
    --ob-site-gap: 20px;
    --ob-site-sect: 80px;
    --ob-site-nav-h: 68px;
    --ob-site-nav-bg: rgba(243, 244, 247, .86);
    --ob-site-prose-w: 760px;
    --ob-site-docs-nav-w: 240px;
    --ob-site-dark: #16181d;
    --ob-site-grey: #f3f4f7;
    --ob-site-lav: #58547a;
    --ob-accent-wash: #f1f0fb;
    --ob-site-good: #f5f7ff;
}
.ob-stage {
    container-type: inline-size;
    font-family: var(--ob-font);
}
.ob-stage.labelled { padding-top: calc(var(--ob-flabel-h) / 2 + 2px); }
.ob-stage > .subject {
    padding: 0 calc(var(--ob-frame-pad-x) + var(--ob-frame-line));
}
.ob-srow {
    display: flex;
    gap: var(--ob-stage-row-gap);
    min-width: 0;
    > .col {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 var(--ob-stage-face);
        align-self: stretch;
    }
    .body { min-width: 0; flex: 1 1 auto; }
    .who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
    .name { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .handle { flex: 1 1 0; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ob-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rto { margin-top: 1px; font-size: 13px; font-weight: 500; color: var(--ob-muted); }
    .text {
        margin-top: 3px;
        font-size: 15.5px;
        line-height: 1.5;
        color: var(--ob-ink);
        white-space: pre-wrap;
        word-break: break-word;
    }
    &.dim .name, &.dim .text { color: var(--ob-ink-2); }
    &.dim .text { font-size: 14.5px; }
    .spine { width: 2px; flex: 1 1 auto; min-height: 14px; margin: 8px 0 -2px; background: var(--ob-spine); border-radius: 1px; }
}
.ob-srow .ob-badged > .badge { width: 40%; height: 40%; right: -2px; bottom: -2px; }
.ob-srow.post .body > .text:first-child { margin-top: 11px; }
.ob-srow .sent { margin-top: 6px; font-size: 12.5px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.ob-srow .sent.ok { color: var(--ob-mint-ink); }
.ob-srow .sent.bad { color: var(--ob-rose-ink); }
.ob-srow .sent.warn { color: var(--ob-butter-ink); }
.ob-srow .sent.off { color: var(--ob-muted); }
.ob-srow .sent a { color: var(--ob-accent-ink); font-weight: 600; text-decoration: none; }
.ob-srow .sent a:hover { text-decoration: underline; }
.ob-srow.post.anon > .col { display: none; }
.ob-srow + .ob-srow { margin-top: var(--ob-stage-gap); }
.ob-srow:has(.spine) + .ob-srow { margin-top: 0; }
.ob-srow:has(.spine):not(:last-child) .body { padding-bottom: var(--ob-stage-spine-gap); }
.ob-srow.skel {
    .face {
        width: var(--ob-stage-av);
        height: var(--ob-stage-av);
        border-radius: 50%;
        background: var(--ob-skel-face-2);
        flex: 0 0 auto;
    }
    .who { gap: 8px; padding-top: 6px; }
    & i {
        display: block;
        height: 8px;
        border-radius: 4px;
        background: var(--ob-skel);
    }
    & i.hd { background: var(--ob-skel-2); }
    & i.ln { height: 9px; margin-top: 8px; background: var(--ob-skel); }
    & i.ln:first-of-type { margin-top: 11px; }
    .spine { background: var(--ob-skel); }
}
.ob-frame {
    --ob-ground: var(--ob-proposed);
    --ob-badge-ring: var(--ob-ground);
    position: relative;
    padding: var(--ob-frame-pad-y) var(--ob-frame-pad-x) var(--ob-frame-pad-b);
    border: var(--ob-frame-line) solid var(--ob-accent-ring);
    border-radius: var(--ob-frame-radius);
    background: var(--ob-ground);
    transition: background-color .18s ease, border-color .18s ease;
}
.ob-flabel {
    position: absolute;
    top: calc(-1 * var(--ob-flabel-h) / 2);
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ob-flabel-h);
    padding: 0 11px 0 8px;
    border-radius: 999px;
    background: var(--ob-accent-bg);
    color: var(--ob-accent-ink);
    border: var(--ob-frame-line) solid var(--ob-accent-ring);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    max-width: calc(100% - 36px);
    & svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.ob-frame.done {
    --ob-ground: var(--ob-card);
    border-color: var(--ob-line);
    .ob-flabel { background: var(--ob-card); color: var(--ob-ink-2); border-color: var(--ob-line); }
}
.ob-frame.now {
    border-color: var(--ob-accent);
    animation: ob-frame-attention 2.8s ease-in-out infinite;
    .ob-flabel { border-color: var(--ob-accent); }
}
@keyframes ob-frame-attention {
    0%, 100% { box-shadow: 0 0 0 0 var(--ob-accent-halo-0); }
    50%      { box-shadow: 0 0 0 6px var(--ob-accent-halo-1); }
}
@media (prefers-reduced-motion: reduce) {
    .ob-frame.now { animation: none; }
}
.ob-sfoot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    .tools {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 18px;
        margin-left: 14px;
    }
    .tools:first-child { margin-left: 0; }
    .tool {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 2px;
        border: 0;
        background: none;
        font-family: var(--ob-font);
        font-size: 13px;
        font-weight: 700;
        color: var(--ob-ink-2);
        white-space: nowrap;
        & svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--ob-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    }
}
.ob-frame.editing {
    --ob-ground: var(--ob-editing);
    border-color: var(--ob-accent);
    .ob-flabel { border-color: var(--ob-accent); }
    .ob-srow .spine { background: var(--ob-editing-spine); }
}
.ob-srow .text.ob-ed {
    outline: none;
    cursor: text;
    min-height: 23px;
    -webkit-user-modify: read-write-plaintext-only;
}
.ob-srow .body > .left {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ob-faint-1);
    font-variant-numeric: tabular-nums;
    &.over { color: var(--ob-butter-ink); }
}
.ob-srow .ob-facepick {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    cursor: pointer;
    .ob-circle { display: flex; transition: box-shadow .12s; }
    &:hover .ob-circle, &.open .ob-circle { box-shadow: 0 0 0 3px var(--ob-ground, var(--ob-card)), 0 0 0 4.5px var(--ob-accent); }
    &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 3px; }
    .grip { display: flex; flex-direction: column; gap: 3px; padding: 3px 0; }
    .grip i { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ob-faint-1); transition: background .12s; }
    &:hover .grip i, &.open .grip i { background: var(--ob-accent); }
}
.ob-frame .ob-ederr {
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ob-rose-ink);
}
@media (max-width: 760px) {
    .ob-frame { padding: 24px 14px 14px; }
    .ob-stage > .subject { padding: 0 calc(14px + var(--ob-frame-line)); }
    .ob-srow .text { font-size: 15px; }
    .ob-srow > .col { flex-basis: 36px; }
    .ob-srow .ob-circle.lg { width: 36px; height: 36px; font-size: 15px; }
    .ob-srow.skel .face { width: 36px; height: 36px; }
}
.ob-media { margin-top: 12px; display: grid; gap: 8px; }
.ob-media .m { position: relative; min-height: 0; background: var(--ob-canvas); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ob-line-in); }
.ob-media .m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-media.n1 { grid-template-columns: minmax(0, 1fr); }
.ob-media.n1 .m { border-radius: 16px; aspect-ratio: 16 / 10; }
.ob-media.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 200px; }
.ob-media.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 230px; }
.ob-media.n3 .m:first-child { grid-row: 1 / 3; }
.ob-media.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 250px; }
.ob-media .m.small { width: 96px; height: 72px; aspect-ratio: auto; justify-self: start; align-self: start; border-radius: 10px; }
.ob-media .x {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0;
    border: 0; border-radius: 50%; background: rgba(15, 17, 22, .66); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    & svg { width: 12px; height: 12px; }
}
.ob-media .x:hover { background: var(--ob-rose-ink); }
.ob-media .x:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
.ob-media .gif { position: absolute; left: 8px; bottom: 8px; height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(15, 17, 22, .72); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 20px; }
.ob-media .m.up { animation: ob-media-up 0.9s ease-in-out infinite alternate; }
@keyframes ob-media-up { from { opacity: .95; } to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ob-media .m.up { animation: none; opacity: .6; } }
.ob-dropchip { display: none; }
.ob-stage.over .ob-dropchip { display: inline-flex; z-index: 2; }
.ob-stage.over .ob-flabel:not(.ob-dropchip) { visibility: hidden; }
.ob-dropchip svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ob-stage.over > .ob-frame { border-color: var(--ob-accent); --ob-ground: var(--ob-editing); }
.ob-stage.over > .ob-frame .ob-dropchip { background: var(--ob-accent); color: #fff; border-color: var(--ob-accent); }
.ob-stage > .subject { position: relative; }
.ob-stage.over > .subject { border-radius: 16px; background: var(--ob-editing); box-shadow: 0 0 0 1.5px var(--ob-accent), 0 0 0 8px var(--ob-editing); }
.ob-stage.over > .subject .ob-dropchip { top: calc(-8px - var(--ob-flabel-h) / 2); left: 10px; background: var(--ob-accent); color: #fff; border-color: var(--ob-accent); }
body.ob-site {
    background: var(--ob-canvas);
    font-family: var(--ob-font);
    color: var(--ob-ink);
    -webkit-font-smoothing: antialiased;
}
body.ob-site::before { display: none; }
body.ob-site :is(.ob-h1, .ob-h2, .ob-h3, h1, h2, h3) { text-wrap: balance; }
body.ob-site :is(.ob-copy, .ob-site-sub, .ob-lead, .ob-prose p, .ob-prose li, .sub, .fine) { text-wrap: pretty; }
:is(.ob-plan .promise b, .ob-qa summary) { text-wrap: balance; }
:is(.ob-freewhy li, .ob-srow .text) { text-wrap: pretty; }
html body.ob-site .site-footer { display: none; }
html body.ob-site #Main {
    position: static;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
html body.ob-site {
    max-width: none;
    margin: 0;
    padding: 0;
}
.ob-site {
    max-width: var(--ob-site-w);
    margin: 0 auto;
    padding: 0 var(--ob-site-pad);
    font-family: var(--ob-font);
    color: var(--ob-ink);
}
.ob-sitewrap > [widget="nav"] { display: contents; }
.ob-sitenav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--ob-site-nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ob-line);
    .inner {
        max-width: var(--ob-site-w);
        margin: 0 auto;
        padding: 0 var(--ob-site-pad);
        height: var(--ob-site-nav-h);
        display: flex;
        align-items: center;
        gap: 26px;
    }
    .links {
        display: flex;
        align-items: center;
        gap: 2px;
    }
    .links a {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 13px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ob-ink-2);
        text-decoration: none;
    }
    .links a:hover { background: var(--ob-card); color: var(--ob-ink); text-decoration: none; }
    .links a.on { background: var(--ob-accent-bg); color: var(--ob-accent-ink); font-weight: 700; }
    .right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .ob-pill.face {
        padding-left: 4px;
        gap: 9px;
    }
}
.ob-sitelogo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    --mk-ink: #0f1542;
    --mk-face: #ffffff;
    --mk-sticker: none;
    color: var(--mk-ink);
    .mk {
        display: block;
        flex: none;
        width: 38px;
        height: 36.4px;
        overflow: visible;
        color: var(--mk-ink);
    }
    .name {
        font-family: 'Fredoka', var(--ob-font);
        font-size: 23px;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1;
        color: var(--mk-ink);
    }
    &:hover { color: var(--mk-ink); text-decoration: none; }
}
.ob-eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ob-accent-ink);
}
.ob-h1 {
    margin: 0 0 18px;
    font-family: var(--ob-font);
    font-size: 60px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.02;
    color: var(--ob-ink);
    text-wrap: balance;
}
.ob-h2 {
    margin: 0 0 14px;
    font-family: var(--ob-font);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--ob-ink);
    text-wrap: balance;
}
.ob-h3 {
    margin: 0 0 8px;
    font-family: var(--ob-font);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--ob-ink);
}
.ob-lead {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ob-ink-2);
    max-width: 600px;
}
.ob-copy {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ob-ink-2);
}
.ob-copy + .ob-copy { margin-top: 10px; }
.ob-copy b, .ob-lead b { font-weight: 700; color: var(--ob-ink); }
.ob-copy a, .ob-lead a { color: var(--ob-accent-ink); text-decoration: none; font-weight: 600; }
.ob-copy a:hover, .ob-lead a:hover { text-decoration: underline; }
.ob-site-sub {
    margin: 0 0 40px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ob-ink-2);
    max-width: 640px;
}
.ob-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
    padding: 104px 0 80px;
}
.ob-hero.stack {
    display: block;
    padding: 96px 0 24px;
    .words { max-width: 1120px; margin: 0 auto; text-align: center; }
    .ob-h1 { font-size: 72px; margin-bottom: 14px; }
    .ob-subhead { margin: 0 auto; max-width: 760px; font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: var(--ob-ink-2); }
    .ob-ctas { justify-content: center; }
    .ob-shot { max-width: min(var(--w, 1120px), 1120px); margin: 64px auto 0; }
}
.ob-ctas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
}
.ob-ctas .ob-pill { height: 46px; padding: 0 24px; font-size: 15px; }
.ob-ctas .ob-pill svg { width: 16px; height: 16px; }
.ob-ideas { text-align: center; }
.ob-flow { max-width: 1216px; margin: 36px auto 0; }
.ob-flow-lbls {
    display: grid;
    grid-template-columns: 32fr 300fr 56fr 404fr 56fr 336fr 32fr;
    text-align: left;
    .l { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bandl-ink-2); }
    .a { grid-column: 2; }
    .b { grid-column: 4; }
    .c { grid-column: 6; }
    .n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bandl-n-bg); color: var(--bandl-n-ink); font-size: 13px; letter-spacing: 0; }
}
.ob-ideas .ob-shot { margin: 0 auto; border-radius: 0; background: none; box-shadow: none; }
@media (max-width: 760px) {
    .ob-flow-lbls { display: none; }
}
.ob-sect {
    padding: var(--ob-site-sect) 0;
    border-top: 1px solid var(--ob-line);
}
.ob-sect.tight { padding: 40px 0; }
.ob-sect.first { border-top: 0; }
.ob-belt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 10px 34px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ob-muted);
    .lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-faint-1); margin-right: 6px; }
    .name { color: var(--ob-ink-2); }
    .or { font-weight: 600; color: var(--ob-muted); }
}
.ob-shot {
    position: relative;
    margin: 0;
    max-width: var(--w, none);
    border-radius: 14px;
    background: var(--ob-card);
    box-shadow:
        0 0 0 1px rgba(22, 24, 29, .07),
        0 28px 60px -24px rgba(22, 24, 29, .26),
        0 10px 22px -12px rgba(22, 24, 29, .12);
    & img { display: block; width: 100%; height: auto; border-radius: inherit; }
}
.ob-asks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 40px;
    > .ob-decide { display: flex; }
    > .ob-decide > .ob-stage { flex: 1 1 auto; display: flex; }
    > .ob-decide > .ob-stage > .ob-frame { flex: 1 1 auto; display: flex; flex-direction: column; --ob-ground: var(--ob-card); }
    > .ob-decide > .ob-stage > .ob-frame > .ob-sfoot { margin-top: auto; padding-top: 18px; }
}
.ob-asks.waiting > .ob-decide { opacity: 0; }
.ob-chapter {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 72px;
    align-items: center;
    .words .ob-copy.lg { margin-top: 4px; }
    > .ob-shot { width: 100%; justify-self: center; }
}
.ob-chapter.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.ob-checks {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    & li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ob-ink); }
    & svg { width: 18px; height: 18px; color: var(--ob-mint-ink); flex: 0 0 auto; }
}
.ob-code {
    border-radius: 16px;
    background: var(--ob-site-dark);
    box-shadow: 0 30px 60px -28px rgba(22, 24, 29, .55), 0 0 0 1px rgba(22, 24, 29, .08);
    overflow: hidden;
    .bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .bar .t { font-size: 13.5px; font-weight: 700; color: #fff; }
    & pre {
        margin: 0;
        padding: 20px 22px 24px;
        font-family: var(--ob-mono);
        font-size: 13.5px;
        line-height: 1.75;
        color: #e8eaf1;
        white-space: pre;
        overflow-x: auto;
    }
    .k { color: #a9b6ff; }
    .s { color: #8fe3b0; }
    .p { color: #6b7180; }
}
@media (max-width: 640px) {
    .ob-code pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; font-size: 12.5px; }
}
.ob-planset { max-width: 1080px; margin: 0 auto var(--ob-site-sect); }
.ob-planfoot { margin: 18px 0 0; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ob-ink-2); }
.ob-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: var(--ob-site-gap);
}
.ob-plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; margin-left: auto; margin-right: auto; }
.ob-older.two { max-width: 940px; margin-left: auto; margin-right: auto; }
.ob-pagehead.mid { max-width: 1120px; margin: 0 auto; text-align: center; }
.ob-pagehead.mid .ob-subhead { margin: 0 auto; max-width: 900px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; color: var(--ob-ink-2); text-wrap: balance; }
.ob-pagehead.mid .ob-subhead a { color: var(--ob-accent-ink); text-decoration: none; }
.ob-pagehead.mid .ob-subhead a:hover { text-decoration: underline; }
.ob-pagehead.wait { visibility: hidden; }
.ob-plan .ob-pill.wait { visibility: hidden; }
.ob-older {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px 24px;
    border-radius: var(--ob-radius);
    background: linear-gradient(160deg, var(--ob-accent-lift), var(--ob-accent) 45%, var(--ob-accent-ink));
    color: #fff;
    .w { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
    .t { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
    .n { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .85); }
    .ob-pill { flex: 0 0 auto; background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
    &.quiet {
        background: var(--ob-card);
        border: 1px solid var(--ob-line);
        color: var(--ob-ink);
        .n { color: var(--ob-ink-2); }
        .ob-pill { border-color: var(--ob-faint-2); color: var(--ob-ink); }
    }
}
.ob-plan .promise {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--ob-radius-tile);
    background: var(--ob-grey-bg);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ob-ink-2);
}
.ob-plan .promise svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ob-accent-ink); }
.ob-plan .promise b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 800; color: var(--ob-ink); }
.ob-freewhy {
    text-align: center;
    .glyph { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: rgba(205, 200, 251, .12); color: var(--ob-accent-ring); }
    .glyph svg { width: 26px; height: 26px; }
    & ul { max-width: 640px; margin: 30px auto 0; padding: 0; list-style: none; text-align: left; }
    & li { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 17px; font-weight: 500; line-height: 1.55; color: rgba(255, 255, 255, .86); }
    & li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
    & li a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
    & li a:hover { text-decoration-color: #fff; }
    .ob-pill.primary { background: var(--ob-accent); color: #fff; }
    .ob-pill.primary:hover { background: var(--ob-accent-lift); }
}
@media (max-width: 640px) {
    .ob-freewhy li { font-size: 15.5px; padding: 14px 0; }
}
.ob-card.ob-plan {
    position: relative;
    border: 0;
    display: flex;
    flex-direction: column;
    padding: 34px 34px 30px;
    border-radius: 26px;
    background: var(--ob-card);
    box-shadow: 0 0 0 1px var(--ob-line);
    .top { display: flex; align-items: center; gap: 10px; }
    .tier { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ob-ink); }
    .chip { height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
    .price { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
    .price .n { font-size: 48px; font-weight: 800; letter-spacing: -.03em; color: var(--ob-ink); font-variant-numeric: tabular-nums; line-height: 1; }
    .price .per { font-size: 15px; font-weight: 600; color: var(--ob-muted); }
    .say { margin: 12px 0 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--ob-ink-2); }
    .grp { margin-top: 26px; }
    .grp h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-muted); }
    .ticks { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
    .ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ob-ink); }
    .ticks li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--ob-mint-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
    .ticks li i { font-style: normal; font-weight: 500; color: var(--ob-ink-2); }
    &:not(.free) .ticks li svg { stroke: var(--ob-accent); }
    .promise { margin-top: 26px; }
    .ob-pill { margin-top: auto; }
    .grp:last-of-type, .promise { margin-bottom: 30px; }
    .ob-pill svg { width: 16px; height: 16px; }
    &.lit { box-shadow: 0 0 0 2px var(--ob-accent), 0 24px 60px rgba(60, 50, 140, .14); }
}
.ob-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
    max-width: 1080px;
    margin: calc(-1 * var(--ob-site-sect) + 40px) auto var(--ob-site-sect);
    .fact { flex: 0 1 320px; display: flex; align-items: flex-start; gap: 12px; }
    .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ob-accent-wash); color: var(--ob-accent); }
    .ic svg { width: 18px; height: 18px; }
    b { display: block; margin-top: 1px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ob-ink); }
    p { margin: 3px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--ob-ink-2); }
}
@media (max-width: 960px) {
    .ob-facts .fact { flex-basis: 100%; }
}
.ob-qaprice {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 72px;
    align-items: start;
    .qa .ob-h2 { margin-bottom: 26px; }
}
.ob-qaprice.solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.ob-qa {
    max-width: 880px;
    border-bottom: 1px solid var(--ob-line);
    .q { border-top: 1px solid var(--ob-line); }
    & summary {
        list-style: none;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 0;
        line-height: 1.4;
        cursor: pointer;
        user-select: none;
        font-size: 16.5px;
        font-weight: 800;
        letter-spacing: -.01em;
        color: var(--ob-ink);
        transition: color .15s ease;
    }
    & summary::-webkit-details-marker { display: none; }
    & summary:hover { color: var(--ob-accent); }
    & summary:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 4px; border-radius: 6px; }
    .tog {
        position: relative;
        flex: 0 0 14px;
        height: 1.4em;
        color: var(--ob-muted);
        transition: color .15s ease;
    }
    .tog::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        transition: transform .2s ease;
    }
    & summary:hover .tog { color: var(--ob-accent); }
    .q[open] .tog { color: var(--ob-ink); }
    .q[open] .tog::before { transform: translateY(-25%) rotate(225deg); }
    .a { padding: 0 24px 22px 28px; }
    .ob-copy { font-size: 15px; max-width: 640px; }
}
.ob-qa { interpolate-size: allow-keywords; }
.ob-qa .q::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .25s ease, content-visibility .25s allow-discrete;
}
.ob-qa .q[open]::details-content { block-size: auto; }
.ob-asked {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 72px;
    align-items: start;
    > .ob-h2 { position: sticky; top: calc(var(--ob-site-nav-h) + 24px); margin: 0; }
}
.ob-beside {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.ob-sitefoot {
    border-top: 1px solid var(--ob-line);
    margin-top: 24px;
    padding: 36px 0 48px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px 26px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ob-muted);
    --foot-row: 31px;
    .links { display: flex; flex-wrap: wrap; align-items: center; min-height: var(--foot-row); gap: 4px 20px; }
    .links a { color: var(--ob-ink-2); text-decoration: none; }
    .links a:hover { color: var(--ob-ink); text-decoration: none; }
    .co {
        margin-left: auto; font-weight: 500; font-size: 12px; color: var(--ob-muted); text-align: right;
        line-height: 18px; margin-top: calc((var(--foot-row) - 18px) / 2);
    }
    .co span { display: block; }
    .ob-sitelogo .name { font-size: 19px; }
    .ob-sitelogo .mk { width: 32px; height: 30.7px; }
}
.ob-pagehead {
    padding: 64px 0 36px;
    max-width: 960px;
}
.ob-docs {
    display: grid;
    grid-template-columns: var(--ob-site-docs-nav-w) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    padding-bottom: 40px;
}
.ob-docconnect {
    container-type: inline-size;
    max-width: var(--ob-site-prose-w);
    margin: 6px 0 18px;
    .ob-connectbox .split { border-color: var(--ob-line); }
}
@container (min-width: 560px) {
    .ob-docconnect .ob-connectbox .split { box-shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 8px 24px rgba(22, 24, 29, .05); }
    .ob-docconnect .ob-connectbox .side { background: var(--ob-card-head); }
}
@container (max-width: 559px) {
    .ob-docconnect > div { padding: 14px; background: var(--ob-card); border: 1px solid var(--ob-line); border-radius: var(--ob-radius-panel); }
}
.ob-prose:has(+ .ob-docconnect) { padding-bottom: 0; }
.ob-docconnect + .ob-prose > h2:first-child { margin-top: 24px; }
.ob-docbody { container-type: inline-size; }
.ob-prose .ob-docshot {
    width: min(var(--w, 100%), 100cqi);
    margin: 22px 0 30px;
    border-radius: 14px;
    background: var(--ob-card);
    box-shadow:
        0 0 0 1px rgba(22, 24, 29, .07),
        0 22px 48px -24px rgba(22, 24, 29, .22),
        0 8px 18px -12px rgba(22, 24, 29, .10);
    & img { display: block; width: 100%; height: auto; border-radius: inherit; }
    &.box { box-shadow: 0 0 0 1px var(--ob-line); }
}
.ob-docsnav {
    position: sticky;
    top: calc(var(--ob-site-nav-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    & a {
        display: block;
        padding: 8px 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ob-ink-2);
        text-decoration: none;
    }
    & a:hover { background: var(--ob-card); color: var(--ob-ink); text-decoration: none; }
    & a.on { background: var(--ob-accent-bg); color: var(--ob-accent-ink); font-weight: 700; }
    .kids {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 4px 0 10px 12px;
        padding-left: 10px;
        border-left: 1px solid var(--ob-line);
    }
    .kids a {
        padding: 5px 10px;
        font-family: var(--ob-mono);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: -.01em;
    }
}
.ob-prose {
    max-width: var(--ob-site-prose-w);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--ob-ink-2);
    padding-bottom: 40px;
    > *:first-child { margin-top: 0; }
    & h1 { font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--ob-ink); margin: 0 0 18px; }
    & h2 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ob-ink); margin: 40px 0 12px; }
    & h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ob-ink); margin: 28px 0 8px; }
    & p { margin: 0 0 14px; }
    & ul, & ol { margin: 0 0 14px; padding-left: 22px; }
    & li { margin-bottom: 6px; }
    & li::marker { color: var(--ob-muted); }
    & strong { font-weight: 700; color: var(--ob-ink); }
    & a { color: var(--ob-accent-ink); text-decoration: none; font-weight: 600; }
    & a:hover { text-decoration: underline; }
    & a code { color: inherit; }
    & hr { border: 0; border-top: 1px solid var(--ob-line); margin: 34px 0; }
    & blockquote { margin: 0 0 14px; padding: 2px 0 2px 16px; border-left: 3px solid var(--ob-accent-ring); color: var(--ob-ink-2); }
    & code {
        font-family: var(--ob-mono);
        font-size: .84em;
        font-weight: 500;
        background: var(--ob-card);
        box-shadow: inset 0 0 0 1px var(--ob-line);
        border-radius: 6px;
        padding: .12em .42em;
        color: var(--ob-ink);
    }
    & a code { background: var(--ob-accent-bg); box-shadow: none; }
    & pre {
        margin: 0 0 16px;
        padding: 14px 16px;
        border-radius: var(--ob-radius-tile);
        background: var(--ob-ink);
        color: #e8eaf1;
        font-family: var(--ob-mono);
        font-size: 12.5px;
        line-height: 1.55;
        overflow-x: auto;
    }
    & pre code { background: none; box-shadow: none; padding: 0; color: inherit; font-size: inherit; }
    & table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 18px;
        font-size: 14px;
    }
    & th {
        text-align: left;
        padding: 0 12px 8px 0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ob-muted);
        border-bottom: 1px solid var(--ob-line);
    }
    & td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ob-line-in); vertical-align: top; }
    & tr:last-child td { border-bottom: 0; }
    & td:first-child { color: var(--ob-ink); font-weight: 700; white-space: nowrap; }
    .ob-tablewrap { overflow-x: auto; margin: 0 0 18px; }
    .ob-tablewrap > table { margin: 0; }
    &.legal td:first-child { white-space: normal; font-weight: 600; }
    &.legal table { table-layout: fixed; }
    &.legal th:first-child { width: 50%; }
    > p:first-child > em:only-child { color: var(--ob-muted); font-size: 13.5px; font-style: normal; font-weight: 600; }
}
.ob-prose-loading { padding: 20px 0; font-size: 14px; font-weight: 600; color: var(--ob-muted); }
.ob-prose-error { padding: 20px 0; font-size: 14px; font-weight: 600; color: var(--ob-rose-ink); }
@media (min-width: 1800px) {
    :root { --ob-site-w: 1520px; --ob-site-sect: 96px; --ob-site-prose-w: 840px; --ob-site-docs-nav-w: 260px; }
    .ob-h1 { font-size: 68px; }
    .ob-h2 { font-size: 42px; }
    .ob-lead { font-size: 20px; max-width: 640px; }
    .ob-hero { padding: 128px 0 96px; gap: 96px; }
}
@media (max-width: 960px) {
    :root { --ob-site-pad: 24px; --ob-site-sect: 56px; }
    .ob-hero { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 40px; }
    .ob-h1 { font-size: 42px; }
    .ob-plans { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-left: auto; margin-right: auto; }
    .ob-older { max-width: 440px; margin-left: auto; margin-right: auto; }
    .ob-plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
    .ob-older.two { max-width: 760px; }
    .ob-beside { grid-template-columns: minmax(0, 1fr); }
    .ob-docs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ob-docsnav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .ob-docsnav .kids { flex-direction: row; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; border-left: 0; }
}
@media (max-width: 699px) {
    .ob-sitefoot .links a { display: inline-flex; align-items: center; min-height: 24px; }
    .ob-prose .ob-tablewrap td:first-child a { display: inline-flex; align-items: center; min-height: 24px; }
}
@media (max-width: 640px) {
    :root { --ob-site-pad: 18px; --ob-site-gap: 14px; --ob-site-sect: 44px; }
    .ob-plans.two { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
    .ob-older.two { max-width: 440px; }
    .ob-h1 { font-size: 36px; }
    .ob-h2 { font-size: 28px; }
    .ob-hero { padding: 36px 0 32px; }
    .ob-sect { padding: 40px 0; }
    .ob-sitenav .inner { gap: 12px; }
    .ob-sitenav .links a { height: 40px; padding: 0 9px; font-size: 13px; }
    .ob-sitenav .links a.legal { display: none; }
    .ob-sitenav .right .ob-pill { height: 40px; }
    .ob-sitenav .ob-pill.face { padding-left: 5px; }
    .ob-sitelogo .name { display: none; }
    .ob-sitefoot .co { margin-left: 0; margin-top: 0; text-align: left; }
    .ob-sitefoot .links { gap: 0 8px; margin: 0 -6px; }
    .ob-sitefoot .links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
    @media (max-width: 400px) { .ob-sitefoot .links { display: grid; grid-template-columns: repeat(3, max-content); } }
    .ob-docsnav a { display: flex; align-items: center; min-height: 40px; }
    .ob-sitenav .ob-sitelogo { min-height: 40px; padding: 0 8px; margin: 0 -8px; }
    .ob-sitefoot .ob-sitelogo { min-height: 40px; padding: 0 10px; margin: 0 -10px; }
    .ob-prose:not(.legal) .ob-tablewrap > table,
    .ob-prose:not(.legal) .ob-tablewrap > table > tbody,
    .ob-prose:not(.legal) .ob-tablewrap tr,
    .ob-prose:not(.legal) .ob-tablewrap td { display: block; }
    .ob-prose:not(.legal) .ob-tablewrap thead { display: none; }
    .ob-prose:not(.legal) .ob-tablewrap tr { padding: 10px 0; border-bottom: 1px solid var(--ob-line-in); }
    .ob-prose:not(.legal) .ob-tablewrap tr:last-child { border-bottom: 0; }
    .ob-prose:not(.legal) .ob-tablewrap td { padding: 2px 0; border-bottom: 0; }
    .ob-prose:not(.legal) .ob-tablewrap td:first-child { white-space: normal; padding-bottom: 4px; }
    .ob-prose:not(.legal) .ob-tablewrap td:first-child a { display: inline-flex; align-items: center; min-height: 32px; margin: -4px 0; }
    .ob-prose:not(.legal) .ob-tablewrap td[data-th]::before { content: attr(data-th); display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-muted); }
}
@media (max-width: 440px) {
    .ob-sitenav .ob-pill.face > span:not(.ob-circle) { display: none; }
    .ob-sitenav .ob-pill.face { padding: 0 4px; }
}
.ob-contacthero > [widget="card"] { display: contents; }
.ob-joincard {
    width: 100%;
    max-width: 460px;
    justify-self: end;
    padding: 34px 34px 30px;
    box-shadow: 0 20px 60px rgba(22, 24, 29, .10);
    .ob-cstep .title { font-size: 30px; }
    .ob-cstep .controls { margin-top: 24px; }
}
.ob-cstep .acts { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.ob-cstep .acts .ob-pill.primary { flex: 1 1 auto; }
.ob-band {
    background: var(--ob-site-dark);
    padding: 72px 0 76px;
    .head { max-width: 740px; margin-bottom: 44px; }
    .ob-h2 { color: #fff; }
    .ob-copy { color: var(--ob-faint-1); font-size: 14.5px; }
}
.ob-copy.lg { font-size: 16px; max-width: 560px; }
.ob-copy.lg.wide { max-width: 760px; }
@media (max-width: 960px) {
    .ob-joincard { max-width: none; justify-self: stretch; padding: 26px 22px 22px; box-shadow: none; }
    .ob-band, .ob-bandl, .ob-bandg { padding: 48px 0 52px; }
    .ob-band .head { margin-bottom: 28px; }
}
.ob-contacthero { padding: 96px 0 88px; align-items: start; }
.ob-contacthero .ob-h1 { font-size: 56px; }
.ob-ways {
    margin-top: 36px;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .way {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 14px 14px 16px;
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius-tile);
        background: var(--ob-card);
        color: var(--ob-ink);
        text-decoration: none;
    }
    & a.way { padding-right: 16px; transition: border-color .12s; }
    & a.way:hover { border-color: var(--ob-accent-ring); text-decoration: none; }
    .ic {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
    }
    .ic.quiet { background: var(--ob-canvas); color: var(--ob-ink-2); }
    .ic svg { width: 18px; height: 18px; }
    .w { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .n { font-size: 12.5px; font-weight: 600; color: var(--ob-ink-2); }
    .t { font-size: 16px; font-weight: 700; color: var(--ob-ink); text-decoration: none; overflow-wrap: anywhere; }
    & a.t:hover { text-decoration: underline; }
    .ob-pill { flex: 0 0 auto; height: 34px; padding: 0 14px; font-size: 13px; }
    .go { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ob-faint-3); }
}
.ob-contactcard {
    .ob-cstep .controls { gap: 18px; }
    .err:empty { display: none; }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .lbl { font-size: 13px; font-weight: 700; color: var(--ob-ink-2); }
    & textarea.ob-input.lg {
        height: auto;
        min-height: 150px;
        padding: 14px 18px;
        font-weight: 600;
        line-height: 1.55;
        resize: vertical;
    }
}
.ob-sentmark {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ob-mint-bg);
    color: var(--ob-mint-ink);
    & svg { width: 22px; height: 22px; }
}
.ob-topic {
    position: relative;
    .pick {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 14px 0 10px;
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius-tile);
        background: var(--ob-card);
        font-family: var(--ob-font);
        font-size: 15px;
        font-weight: 700;
        color: var(--ob-ink);
        text-align: left;
        cursor: pointer;
        outline: none;
        transition: border-color .12s, box-shadow .12s;
    }
    .pick.none { padding-left: 18px; font-weight: 600; color: var(--ob-muted); }
    .pick:focus-visible, &.open .pick { border-color: var(--ob-accent); box-shadow: 0 0 0 3px var(--ob-accent-bg); }
    .now { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
    .chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ob-muted); transition: transform .12s; }
    &.open .chev { transform: rotate(180deg); }
    .ic {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
    }
    .ic svg { width: 16px; height: 16px; }
    .menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 20;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 6px;
        background: var(--ob-card);
        border-radius: var(--ob-radius-tile);
        box-shadow: 0 0 0 1px var(--ob-line), var(--ob-shadow-menu);
    }
    .menu button {
        width: 100%;
        min-height: 46px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 12px 0 8px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        font-family: var(--ob-font);
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ob-ink);
        text-align: left;
        cursor: pointer;
        outline: none;
    }
    .menu button:hover, .menu button:focus-visible { background: var(--ob-canvas); }
    .menu button.on { background: var(--ob-site-good); }
    .menu .w { flex: 1 1 auto; min-width: 0; }
    .menu .tick { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ob-accent); }
}
@media (max-width: 960px) {
    .ob-contacthero { padding: 48px 0 40px; }
    .ob-contacthero .ob-h1 { font-size: 40px; }
    .ob-ways { max-width: none; }
}
.ob-bandw {
    background: var(--ob-card);
    padding: 76px 0 80px;
}
.ob-bandl {
    --bandl-ink: var(--ob-ink);
    --bandl-ink-2: var(--ob-ink-2);
    --bandl-n-bg: #ffffff;
    --bandl-n-ink: var(--ob-accent-ink);
    background: var(--ob-site-lav);
    padding: 72px 0 76px;
    .ob-h2, .ob-h3 { color: var(--bandl-ink); }
    .ob-copy { color: var(--bandl-ink-2); }
}
.ob-home { background: var(--ob-site-grey); }
.ob-bandg {
    background: var(--ob-site-grey);
    padding: 72px 0 76px;
}
.ob-bandl[data-tone="dark"] {
    --bandl-ink: #ffffff;
    --bandl-ink-2: rgba(255, 255, 255, .8);
    --bandl-n-bg: rgba(255, 255, 255, .16);
    --bandl-n-ink: #ffffff;
}
.head.mid,
.ob-band .head.mid,
.ob-bandw .head.mid {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.head.mid .ob-site-sub { margin-left: auto; margin-right: auto; margin-bottom: 0; }
.ob-ctas.mid { justify-content: center; margin-top: 38px; }
.ob-band .ob-site-sub { color: var(--ob-faint-1); }
.ob-belt .glyph {
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 9px;
    flex: 0 0 auto;
    object-fit: contain;
}
.ob-belt { align-items: center; }
.ob-belt .name { display: inline-flex; align-items: center; }
.ob-beside.mid { align-items: center; }
.ob-ledger {
    position: relative;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    .r { position: relative; display: flex; align-items: flex-start; gap: 18px; }
    .r:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 17px;
        top: 36px;
        bottom: -26px;
        width: 2px;
        background: var(--ob-accent-bg);
    }
    .n {
        flex: 0 0 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
    }
    .r > div { padding-top: 6px; }
    .ob-h3 { margin: 0 0 4px; }
    .ob-copy { font-size: 14.5px; }
}
.ob-price1 {
    padding: var(--ob-site-sect) 0;
    text-align: center;
    .n { margin: 0 0 12px; font-size: 38px; font-weight: 800; letter-spacing: -.028em; color: var(--ob-ink); }
    .ob-copy { max-width: 560px; margin: 0 auto; }
    .ob-ctas { margin-top: 26px; }
}
.ob-price1.ink {
    .n { color: #fff; }
    .ob-pill.primary { background: var(--ob-accent); color: #fff; }
    .ob-pill.primary:hover { background: var(--ob-accent-lift); }
}
.ob-band.costs { padding: 80px 0 84px; }
.ob-band.closer {
    padding: 84px 0 88px;
    .ob-h2 { font-size: 44px; }
    .ob-pill.primary { background: var(--ob-accent); color: #fff; }
    .ob-pill.primary:hover { background: var(--ob-accent-lift); }
}
@media (max-width: 1280px) {
    .ob-chapter { gap: 48px; }
}
@media (max-width: 960px) {
    .ob-bandw { padding: 52px 0 56px; }
    .ob-band.closer { padding: 56px 0 60px; }
    .ob-band.closer .ob-h2 { font-size: 32px; }
    .ob-band.costs { padding: 52px 0 56px; }
    .ob-price1 .n { font-size: 30px; }
    .ob-price1.ink { padding-top: 48px; margin-top: 44px; }
    .ob-chapter, .ob-chapter.flip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .ob-asks { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .ob-qaprice { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ob-asked { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ob-asked > .ob-h2 { position: static; }
    .ob-chapter.flip > .ob-shot { order: 2; }
    .ob-hero.stack { padding: 48px 0 16px; }
    .ob-hero.stack .ob-h1 { font-size: 46px; }
    .ob-hero.stack .ob-subhead { font-size: 21px; }
    .ob-hero.stack .ob-shot { margin-top: 36px; }
}
@media (max-width: 640px) {
    .ob-hero.stack { padding: 36px 0 12px; }
    .ob-hero.stack .ob-h1 { font-size: 38px; }
    .ob-hero.stack .ob-subhead { font-size: 19px; }
    .ob-pagehead.mid .ob-subhead { font-size: 18px; }
    .ob-shot { border-radius: 10px; }
}
.ob-ceremony {
    --ob-cer-col: 400px;
    display: flex;
    gap: 20px;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    font-family: var(--ob-font);
    color: var(--ob-ink);
    .brand {
        flex: 0 0 40%;
        max-width: 560px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 40px;
        border-radius: var(--ob-radius);
        background: #ebf0fe;
        box-sizing: border-box;
        .ob-sitelogo { align-self: flex-start; }
    }
    .art {
        flex: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .art .robot {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 760px;
        object-fit: contain;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
        mask-composite: intersect;
    }
    .stage {
        flex: 1;
        position: relative;
        display: flex;
        min-width: 0;
    }
    .corner {
        position: absolute;
        top: 24px;
        right: 32px;
        min-height: 20px;
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
        color: var(--ob-muted);
    }
    .corner .ob-clink { margin-left: 4px; }
    .body {
        margin: auto;
        width: var(--ob-cer-col);
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }
    .foot {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 22px;
        font-size: 12.5px;
        font-weight: 600;
    }
    .foot a { color: var(--ob-muted); text-decoration: none; }
    .foot a:hover { color: var(--ob-ink); }
}
.ob-clink {
    color: var(--ob-accent-ink);
    font-weight: 700;
    text-decoration: none;
}
.ob-clink:hover { text-decoration: underline; }
.ob-cstep {
    display: flex;
    flex-direction: column;
    width: 100%;
    .title {
        margin: 0;
        font-size: 40px;
        font-weight: 800;
        letter-spacing: -.035em;
        line-height: 1.05;
        color: var(--ob-ink);
    }
    .title.sm { font-size: 30px; }
    .sub {
        margin-top: 12px;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
        color: var(--ob-ink-2);
    }
    .sub strong { color: var(--ob-ink); font-weight: 700; }
    .sub .ob-clink { margin-left: 6px; font-size: 13.5px; }
    .controls {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .err {
        min-height: 1.5em;
        line-height: 1.5em;
        font-size: 13px;
        font-weight: 600;
        color: var(--ob-rose-ink);
        text-align: center;
    }
    .err.ok { color: var(--ob-mint-ink); }
    .err.note { color: var(--ob-ink-2); }
    .ob-addr { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
    .err.under:empty { display: none; }
    .alt {
        margin-top: 20px;
        text-align: center;
        font-size: 13.5px;
        font-weight: 600;
    }
    .fine {
        margin-top: 22px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.6;
        text-align: center;
        color: var(--ob-muted);
    }
    .fine a { color: var(--ob-ink-2); font-weight: 600; text-decoration: none; }
    .fine a:hover { text-decoration: underline; }
    .ob-or {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 18px 0 14px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ob-muted);
        &::before, &::after { content: ''; flex: 1; height: 1px; background: var(--ob-line); }
    }
    .ob-otherways {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .ob-way {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        & svg { width: 18px; height: 18px; flex: none; }
    }
    .ob-way[hidden] { display: none; }
    .ob-input.lg {
        height: 50px;
        padding: 0 18px;
        font-size: 16px;
        border-radius: var(--ob-radius-tile);
    }
    .ob-input.has-error { border-color: var(--ob-rose-ink); box-shadow: 0 0 0 3px var(--ob-rose-bg); }
    .choices {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .choice {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 14px 16px;
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius-tile);
        background: var(--ob-card);
        text-align: left;
        font-family: inherit;
        cursor: pointer;
        transition: border-color .12s, background .12s;
    }
    .choice:hover { border-color: var(--ob-accent-ring); background: var(--ob-accent-tint); }
    .choice .icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
    }
    .choice .icon svg { width: 18px; height: 18px; }
    .choice .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .choice .t { font-size: 14px; font-weight: 700; color: var(--ob-ink); }
    .choice .n { font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--ob-muted); }
    .choice .go { flex: 0 0 auto; color: var(--ob-faint-3); }
    .choice .go svg { width: 16px; height: 16px; }
    .benefits {
        margin-top: 22px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .benefit {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ob-ink-2);
    }
    .benefit .icon {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
    }
    .benefit .icon svg { width: 14px; height: 14px; }
}
.ob-pill.lg { height: 50px; font-size: 15px; }
.ob-pill.lg svg { width: 20px; height: 20px; }
.ob-otp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 4px;
    .real {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        cursor: text;
        border: none;
        background: transparent;
        font-size: 16px;
    }
    .digit {
        flex: 1 1 0;
        min-width: 0;
        max-width: 40px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ob-line);
        border-radius: 12px;
        background: var(--ob-card);
        font-family: var(--ob-font);
        font-size: 22px;
        font-weight: 800;
        color: var(--ob-ink);
        transition: border-color .12s, box-shadow .12s;
        user-select: none;
        pointer-events: none;
    }
    .sep { width: 10px; height: 2px; border-radius: 2px; background: var(--ob-faint-2); }
    .digit.is-active { border-color: var(--ob-accent); box-shadow: 0 0 0 3px var(--ob-accent-bg); }
    .digit.is-active::after {
        content: '';
        display: inline-block;
        width: 2px;
        height: 22px;
        border-radius: 2px;
        background: var(--ob-accent);
        animation: ob-otp-blink 1s step-end infinite;
    }
    .digit.has-value { border-color: var(--ob-accent-ring); }
    .digit.has-value::after { display: none; }
    &.has-error .digit { border-color: var(--ob-rose-ink); background: var(--ob-rose-card); }
    &.is-disabled .digit { background: var(--ob-canvas); color: var(--ob-muted); }
}
.ob-otp ~ .status,
.ob-unlock {
    .status {
        margin: 0 0 14px;
        min-height: 1.5em;
        text-align: center;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--ob-ink-2);
    }
    [widget-dom="passkey_status"]:empty { display: none; }
    .err {
        min-height: 1.5em;
        line-height: 1.5em;
        font-size: 13px;
        font-weight: 600;
        color: var(--ob-rose-ink);
        text-align: center;
    }
    .err.ok { color: var(--ob-mint-ink); }
}
.ob-tzpick {
    .ob-input.lg { height: 50px; padding: 0 18px; font-size: 16px; border-radius: var(--ob-radius-tile); }
    .tzwrap { display: contents; }
    .tzlist {
        margin-top: 12px;
        height: 46vh;
        min-height: 240px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .tzrow {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 12px;
        border: 0;
        border-radius: var(--ob-radius-tile);
        background: transparent;
        text-align: left;
        cursor: pointer;
        font-family: var(--ob-font);
    }
    .tzrow:hover { background: var(--ob-canvas); }
    .tzrow.on { background: var(--ob-accent-bg); }
    .tzrow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--ob-ink); }
    .tzrow .hm { font-size: 13.5px; font-weight: 600; color: var(--ob-muted); font-variant-numeric: tabular-nums; }
    .tzrow.on .nm,
    .tzrow.on .hm { color: var(--ob-accent-ink); }
}
@keyframes ob-otp-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.ob-signedin {
    > .ob-circle { margin-bottom: 22px; }
    .ob-circle img { width: 100%; height: 100%; object-fit: cover; }
}
.ob-passkeys {
    padding: 8px 22px 16px;
    .row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--ob-line-in);
    }
    .row .icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
    }
    .row .icon svg { width: 18px; height: 18px; }
    .row .text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .row .t { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); }
    .row .n { font-size: 12.5px; font-weight: 500; color: var(--ob-muted); }
    .grow { flex: 1; }
    .row.add {
        border-bottom: 0;
        color: var(--ob-ink-2);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }
    .row.add .icon { background: var(--ob-canvas); color: var(--ob-ink-2); }
    .row.add:hover .icon { background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
}
.ob-psect {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--ob-line-in);
}
.ob-psect.first { margin-top: 0; padding-top: 0; border-top: 0; }
.ob-devices {
    .row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--ob-line-in);
    }
    .row:last-of-type { border-bottom: 0; }
    .icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-canvas);
        color: var(--ob-ink-2);
    }
    .icon svg { width: 18px; height: 18px; }
    .row.here .icon { background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
    .text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .t { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); }
    .n { font-size: 12.5px; font-weight: 500; color: var(--ob-muted); }
    .n .here { font-weight: 700; color: var(--ob-accent-ink); }
    .grow { flex: 1; }
}
.ob-hrow {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto 44px;
    gap: var(--ob-log-gap);
    align-items: center;
    min-height: var(--ob-log-h);
    padding: 0 8px;
    margin: 0 -8px;
    border-radius: 10px;
    color: var(--ob-ink);
    .ico {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ob-canvas);
        color: var(--ob-ink-2);
    }
    .ico svg { width: 12px; height: 12px; }
    .ico.ok { background: var(--ob-mint-bg); color: var(--ob-mint-ink); }
    .ico.bad { background: var(--ob-rose-bg); color: var(--ob-rose-ink); }
    .ico.key { background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
    .act {
        min-width: 0;
        font-size: 13.5px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dev { font-size: 12px; font-weight: 500; color: var(--ob-faint-1); white-space: nowrap; text-align: right; }
    .when { font-size: 12px; font-weight: 600; color: var(--ob-faint-1); text-align: right; font-variant-numeric: tabular-nums; }
    &.fail .act { color: var(--ob-rose-ink); }
}
.ob-history .more {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.ob-psect.ob-history { padding-top: 0; border-top: 0; }
.ob-hday {
    margin: 14px 0 2px;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ob-faint-1);
}
@media (max-width: 900px) {
    .ob-ceremony {
        padding: 0;
        gap: 0;
    }
    .ob-ceremony { position: relative; }
    .ob-ceremony .brand { position: absolute; top: 12px; left: 16px; z-index: 2; flex: none; max-width: none; padding: 0; gap: 0; background: none; border-radius: 0; }
    .ob-ceremony .brand .art { display: none; }
    .ob-ceremony .stage { padding: 64px 20px; }
    .ob-ceremony .corner { top: 10px; right: 16px; }
    .ob-ceremony .corner .ob-clink { display: inline-block; padding: 10px 0; }
    .ob-ceremony .body { width: 100%; max-width: 440px; }
    .ob-cstep .title { font-size: 32px; }
    .ob-otp .digit { max-width: 34px; height: 44px; font-size: 19px; }
}
.ob-cstep .ob-connectacts { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.ob-grantstep {
    .ob-meets {
        display: flex;
        flex-direction: column;
        margin-top: 22px;
        padding: 4px 16px;
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius);
        background: var(--ob-card);
        .side {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
        }
        .ob-square, .ob-circle { width: 36px; height: 36px; }
        .ob-square img { width: 20px; height: 20px; object-fit: contain; }
        .ob-square svg { width: 18px; height: 18px; }
        .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .t { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); overflow-wrap: anywhere; }
        .n { font-size: 12.5px; font-weight: 600; color: var(--ob-ink-2); overflow-wrap: anywhere; }
        .side.unknown {
            margin: 6px -10px;
            padding: 12px 10px;
            border-radius: 12px;
            background: var(--ob-butter-bg);
        }
        .side.unknown .ob-square { background: var(--ob-butter-edge); color: var(--ob-butter-ink); }
        .side.unknown .n { font-weight: 700; color: var(--ob-butter-ink); }
        .to {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--ob-muted);
            & svg { flex: none; width: 36px; height: 14px; }
            &::after { content: ""; flex: 1; height: 1px; background: var(--ob-line-in); }
        }
    }
    .ob-warnacts { margin-top: 28px; }
    > .ob-lbl { margin: 26px 0 0; }
    .choices { margin-top: 10px; gap: 8px; }
    .choice { padding: 11px 14px; gap: 12px; }
    .choice .dot {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid var(--ob-line);
        background: var(--ob-card);
    }
    .choice.on { border-color: var(--ob-accent-ring); background: var(--ob-accent-tint); box-shadow: 0 0 0 3px var(--ob-accent-bg); }
    .choice.on .dot { border: 5px solid var(--ob-accent); }
    .ob-namefield { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
    .ob-namefield .ob-lbl { margin: 0; }
    .err { margin-top: 10px; }
    .ob-connectacts { margin-top: 6px; }
}
.ob-cstep .ob-connectcancel { margin-top: 26px; }
.ob-reconnect {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 var(--ob-home-card-gap);
    .box {
        --ob-badge-ring: var(--ob-on-accent);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
        padding: 18px 18px 18px 22px;
        border-radius: var(--ob-radius-row);
        background: var(--ob-accent);
        color: var(--ob-on-accent);
        font-family: var(--ob-font);
    }
    .words {
        position: relative;
        z-index: 1;
        flex: 1 1 260px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    & b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
    .why { font-size: 14px; font-weight: 600; line-height: 1.5; opacity: .9; }
    .ob-pill {
        position: relative;
        z-index: 1;
        flex: none;
        background: var(--ob-on-accent);
        color: var(--ob-accent-ink);
        font-weight: 800;
        box-shadow: var(--ob-shadow-on-accent);
    }
    .ob-pill:hover { background: var(--ob-accent-bg); }
}
.ob-confirmconn {
    .ob-keytile {
        position: relative;
        z-index: 1;
        flex: none;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .16);
        box-shadow: inset 0 0 0 2px var(--ob-on-accent);
        & svg { width: 22px; height: 22px; }
    }
    .acts {
        position: relative;
        z-index: 1;
        flex: none;
        display: flex;
        gap: 8px;
    }
    .ob-pill.quiet {
        background: transparent;
        color: var(--ob-on-accent);
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6);
    }
    .ob-pill.quiet:hover { background: rgba(255, 255, 255, .12); }
}
.ob-decide { min-width: 0; }
.ob-decide.pop { animation: ob-card-in .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ob-card-in {
    0%   { opacity: 0; transform: scale(.94); }
    100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ob-decide.pop { animation: none; }
}
.ob-slot { display: contents; }
.ob-card {
    background: var(--ob-card);
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-radius);
    padding: 20px 22px;
    font-family: var(--ob-font);
    color: var(--ob-ink);
}
.ob-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--ob-pill-h);
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--ob-font);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    background: var(--ob-card);
    color: var(--ob-ink);
    transition: background .12s, color .12s, border-color .12s, transform .12s;
    & svg { width: 16px; height: 16px; flex: 0 0 auto; }
    &.primary { background: var(--ob-accent); color: #fff; }
    &.primary:hover { background: var(--ob-accent-ink); }
    &.ghost { background: var(--ob-card); border-color: var(--ob-line); color: var(--ob-ink); }
    &.ghost:hover { background: var(--ob-canvas); }
    & svg.out { width: 13px; height: 13px; margin-right: -3px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    &.text { background: transparent; color: var(--ob-ink-2); padding: 0 12px; }
    &.text:hover { color: var(--ob-ink); }
    &.danger { background: var(--ob-rose-bg); color: var(--ob-rose-ink); }
    &.danger:hover { background: #ffd5d9; }
    &.full { width: 100%; }
    &.sm { height: 30px; padding: 0 13px; font-size: 12.5px; }
    &:active { transform: translateY(1px); }
    &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
    &:disabled { opacity: .5; cursor: default; }
    &.busy, &.busy:disabled { opacity: 1; transform: none; }
    &:hover { text-decoration: none; }
}
.ob-spin {
    flex: 0 0 auto;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;
    animation: ob-spin .8s linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ob-spin { animation-duration: 2.4s; }
}
.ob-lbl {
    font-family: var(--ob-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ob-muted);
    margin: 0 0 10px;
}
.ob-square,
.ob-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-family: var(--ob-font);
    font-weight: 700;
    overflow: hidden;
    background: var(--ob-canvas);
    color: var(--ob-ink-2);
    vertical-align: middle;
    & img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
.ob-square {
    border-radius: var(--ob-radius-sq);
    & svg { width: 56%; height: 56%; }
    &.bot {
        background: var(--ob-ink);
        border-radius: 50%;
    }
    &.bot:has(img) { background: transparent; }
    &.bot::after {
        content: "";
        width: 100%;
        height: 100%;
        background: #fff;
        -webkit-mask: url(/images/logo/sendstory-face-mono.svg) center / contain no-repeat;
        mask: url(/images/logo/sendstory-face-mono.svg) center / contain no-repeat;
    }
    &.bot:has(img)::after { content: none; }
    &.md { width: 32px; height: 32px; }
}
.ob-circle {
    border-radius: 50%;
    & svg { width: 50%; height: 50%; }
    &.md { width: 30px; height: 30px; font-size: 12px; }
    &.lg { width: 44px; height: 44px; font-size: 18px; }
    &.xl { width: 56px; height: 56px; font-size: 22px; }
}
.ob-badged {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    vertical-align: middle;
    > .badge {
        position: absolute;
        right: -3px;
        bottom: -3px;
        width: 46%;
        height: 46%;
        border-radius: 50%;
        background: var(--ob-badge-ring, var(--ob-card));
        box-shadow: 0 0 0 2px var(--ob-badge-ring, var(--ob-card));
    }
    &:has(> .ob-circle.xl) > .badge { width: 40%; height: 40%; right: -2px; bottom: -2px; }
}
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ob-empty {
    font-family: var(--ob-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ob-muted);
    padding: 34px 0;
    max-width: 52ch;
}
.ob-note {
    margin: 10px 0 0;
    font-family: var(--ob-font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ob-muted);
    & code {
        font-family: var(--ob-mono);
        font-size: 11.5px;
        padding: 1px 5px;
        border-radius: 5px;
        background: var(--ob-canvas);
        color: var(--ob-ink-2);
    }
    &.mint {
        padding: 9px 12px;
        border-radius: var(--ob-radius-tile);
        background: var(--ob-mint-bg);
        color: var(--ob-mint-ink);
    }
    &.rose {
        padding: 9px 12px;
        border-radius: var(--ob-radius-tile);
        background: var(--ob-rose-bg);
        color: var(--ob-rose-ink);
    }
}
.ob-card .acts {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
    .grow { flex: 1 1 auto; }
}
.ob-input {
    width: 100%;
    height: var(--ob-pill-h);
    padding: 0 13px;
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-radius-tile);
    background: var(--ob-card);
    font-family: var(--ob-font);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ob-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    &::placeholder { color: var(--ob-faint-2); font-weight: 600; }
    &:focus { border-color: var(--ob-accent); box-shadow: 0 0 0 3px var(--ob-accent-bg); }
    &:disabled { background: var(--ob-canvas); color: var(--ob-muted); }
}
.ob-connectbox {
    container-type: inline-size;
    font-family: var(--ob-font);
    .split {
        display: grid;
        grid-template-columns: 184px minmax(0, 1fr);
        border: 1px solid var(--ob-line-in);
        border-radius: var(--ob-radius-panel);
        background: var(--ob-card);
        overflow: hidden;
    }
    .side {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px;
        background: var(--ob-canvas);
        border-right: 1px solid var(--ob-line-in);
    }
    .h {
        display: flex;
        align-items: center;
        gap: 11px;
        height: 40px;
        padding: 0 12px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        font-family: var(--ob-font);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ob-ink-2);
        text-align: left;
        cursor: pointer;
        & img, & svg { flex: 0 0 auto; width: 18px; height: 18px; filter: grayscale(1); opacity: .55; color: var(--ob-ink); }
        &:hover { color: var(--ob-ink); }
        &:hover img, &:hover svg { filter: none; opacity: 1; }
        &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 1px; }
        &.on { background: var(--ob-card); color: var(--ob-ink); font-weight: 700; box-shadow: 0 0 0 1px var(--ob-line); cursor: default; }
        &.on img, &.on svg { filter: none; opacity: 1; }
    }
    .main { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px 20px 20px; }
    .tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--ob-line-in); margin-bottom: 4px; }
    .tabs button {
        padding: 0 0 11px;
        margin-bottom: -1px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        font-family: var(--ob-font);
        font-size: 14px;
        font-weight: 600;
        color: var(--ob-ink-2);
        cursor: pointer;
        &:hover { color: var(--ob-ink); }
        &.on { color: var(--ob-ink); font-weight: 700; border-bottom-color: var(--ob-accent); cursor: default; }
    }
    .win {
        border-radius: var(--ob-radius-tile);
        background: var(--ob-ink);
        color: var(--ob-term-ink);
        font-family: var(--ob-mono);
        font-size: 13px;
        line-height: 1.6;
        overflow: hidden;
    }
    .win + .win { margin-top: -4px; }
    .bar {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 8px 0 16px;
        background: var(--ob-term-bar);
        font-size: 12px;
        font-weight: 500;
        color: var(--ob-term-bar-ink);
        & svg { flex: 0 0 auto; width: 15px; height: 15px; }
        .where { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    }
    .wcopy {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        height: 28px;
        padding: 0 11px;
        border: 0;
        border-radius: 8px;
        background: var(--ob-term-btn);
        font-family: var(--ob-font);
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ob-term-ink);
        cursor: pointer;
        & svg { width: 14px; height: 14px; }
        &:hover { background: var(--ob-ink-2); }
    }
    .body { padding: 14px 18px 16px; }
    .ln { padding-left: 2ch; text-indent: -2ch; white-space: pre-wrap; overflow-wrap: anywhere; }
    .pr { color: var(--ob-term-prompt); user-select: none; }
    .key { color: var(--ob-term-key); }
    .alt { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ob-ink-2); }
    .alt code { font-family: var(--ob-mono); font-size: 12.5px; font-weight: 500; color: var(--ob-ink); background: var(--ob-canvas); border-radius: 6px; padding: 2px 7px; }
    .ob-note { margin: 0; }
    .main > .ob-pill { align-self: flex-start; }
}
@container (max-width: 559px) {
    .ob-connectbox .split { display: block; border: 0; border-radius: 0; background: transparent; overflow: visible; }
    .ob-connectbox .side { flex-direction: row; flex-wrap: wrap; gap: 5px; padding: 0 0 16px; background: transparent; border: 0; }
    .ob-connectbox .h {
        justify-content: center;
        gap: 7px;
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        background: var(--ob-canvas);
        font-size: 13px;
        .nm { display: none; }
        &.on { padding: 0 10px 0 8px; background: var(--ob-card); box-shadow: inset 0 0 0 1.5px var(--ob-accent-ring); }
        &.on .nm { display: inline; }
    }
    .ob-connectbox .main { padding: 0; gap: 12px; }
    .ob-connectbox .tabs { gap: 20px; }
    .ob-connectbox .tabs button { font-size: 13.5px; min-height: 36px; min-width: 36px; padding: 10px 0; }
    .ob-connectbox .win { font-size: 12px; border-radius: 12px; }
    .ob-connectbox .bar { height: 44px; padding: 0 4px 0 14px; font-size: 11.5px; }
    .ob-connectbox .wcopy { height: 36px; padding: 0 12px; font-size: 12.5px; }
    .ob-connectbox .body { padding: 12px 14px 14px; }
    .ob-connectbox .alt { font-size: 12.5px; }
}
.ob-keyonce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ob-mint-ink);
}
html.ob-in [data-guest] { display: none !important; }
html:not(.ob-in) [data-member] { display: none !important; }
body.ob-site [hidden] { display: none !important; }
.ob-topic:not(.open) .menu { display: none; }
.ob-sitenav img[data-face]:not([src]) { visibility: hidden; }
.ob-guide {
    --g-w: 1180px;
    --g-r: 10px;
    --g-r-sm: 7px;
    --g-edge: 0 0 0 1.5px var(--ob-ink);
    --g-violet: #8a82ff;
    --g-ring: 0 0 0 1.5px var(--ob-ink), 0 0 0 5px var(--ob-card), 0 0 0 8.5px var(--g-violet), 0 0 0 10px var(--ob-ink);
    --g-lilac: #ddd9ff;
    --g-ground: var(--g-lilac);
    --g-on-ground: #33363f;
    --g-ink-3: #4a4d57;
    --g-dot: radial-gradient(circle, rgba(22, 24, 29, .17) 1px, transparent 1.3px);
    --g-mark: var(--ob-card);
    display: block;
    color: var(--ob-ink);
    font-family: var(--ob-font);
}
.ob-guide h2 { margin: 0; font-size: clamp(27px, 3vw, 34px); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; color: var(--ob-ink); scroll-margin-top: 90px; }
.ob-guide p.note { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ob-ink-2); }
.ob-guide p.note a, .ob-gqa a { color: var(--ob-accent-ink); font-weight: 700; text-decoration: none; }
.ob-guide p.note a:hover, .ob-gqa a:hover { text-decoration: underline; }
.ob-guide code { font-family: var(--ob-mono); font-size: .88em; background: var(--ob-grey-bg); border-radius: 4px; padding: 1px 5px; }
.ob-guide mark { padding: 0 .08em; border-radius: 2px; color: inherit; background: linear-gradient(transparent 12%, var(--g-lilac) 12%, var(--g-lilac) 92%, transparent 92%); }
.ob-guide .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-guide .in, .ob-gintro, .ob-gstep, .ob-gsec, .ob-gqa, .ob-gfine {
    box-sizing: border-box;
    max-width: var(--g-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ob-site-pad);
    padding-right: var(--ob-site-pad);
}
.ob-ghero, .ob-gband, .ob-gmore { position: relative; isolation: isolate; }
.ob-ghero::before, .ob-gband::before, .ob-gmore::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--g-dot);
    background-size: 12px 12px;
}
.ob-ghero::before { -webkit-mask-image: radial-gradient(ellipse 60% 75% at 26% 45%, transparent 30%, #000 85%); mask-image: radial-gradient(ellipse 60% 75% at 26% 45%, transparent 30%, #000 85%); }
.ob-gband::before, .ob-gmore::before { -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 62%); mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 62%); }
.ob-ghero { background: var(--g-ground); }
.ob-ghero[data-ground="mint"] { --g-ground: #c6efd9; }
.ob-ghero[data-ground="butter"] { --g-ground: #ffe79a; }
.ob-ghero[data-ground="sky"] { --g-ground: #cfe4ff; }
.ob-ghero > .in { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 56px; padding-top: 56px; padding-bottom: 64px; }
.ob-ghero .text { flex: 5 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ob-ghero .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 700; color: var(--g-on-ground); }
.ob-ghero .crumbs a { color: inherit; text-decoration: none; }
.ob-ghero .crumbs a:hover { text-decoration: underline; }
.ob-gh1 { margin: 0; font-size: clamp(34px, 4.2vw, 50px); line-height: 1.04; font-weight: 800; letter-spacing: -.045em; color: var(--ob-ink); }
.ob-gh1 .hl { padding: 0 .08em; background: linear-gradient(transparent 52%, var(--g-mark) 52%, var(--g-mark) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ob-ghero .inshort { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ob-ghero .inshort li { position: relative; padding-left: 24px; font-size: 17px; font-weight: 600; line-height: 1.5; }
.ob-ghero .inshort li::before { content: ""; position: absolute; left: 0; top: .45em; width: 11px; height: 11px; border-radius: 50%; background: var(--ob-card); box-shadow: var(--g-edge); }
.ob-ghero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; font-weight: 600; color: var(--g-on-ground); }
.ob-ghero .meta .mk { width: 26px; height: 25px; }
.ob-ghero .go { padding-top: 6px; }
.ob-ghero .safe { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--g-on-ground); }
.ob-ghero .safe svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ob-gcta { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; background: var(--ob-ink); color: var(--ob-card); font-size: 17px; font-weight: 800; text-decoration: none; box-shadow: 0 0 0 3px var(--ob-card), 0 0 0 4.5px var(--ob-ink); transition: transform .15s; }
.ob-gcta:hover { color: var(--ob-card); transform: translateY(-1px); }
.ob-gcta svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ob-gcta.light { height: 50px; padding: 0 24px; background: var(--ob-card); color: var(--ob-ink); font-size: 16px; box-shadow: var(--g-edge); }
.ob-gcta.light:hover { color: var(--ob-ink); }
.ob-gscene { flex: 6 1 460px; min-width: 0; margin: 0; position: relative; padding: 8px 0 30px; }
.ob-gscene .term { margin-right: 72px; border-radius: var(--g-r); overflow: hidden; background: var(--ob-ink); box-shadow: var(--g-edge), 0 0 0 5px var(--ob-card), 0 0 0 6.5px var(--ob-ink); }
.ob-gscene .term .bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--ob-term-bar); }
.ob-gscene .term .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ob-term-btn); }
.ob-gscene .term .bar span { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--ob-term-bar-ink); }
.ob-gscene .term .lines { padding: 14px 16px 32px; font-family: var(--ob-mono); font-size: 14px; line-height: 1.65; color: var(--ob-term-ink); }
.ob-gscene .term .p { color: var(--g-violet); }
.ob-gscene .term .call { margin-top: 8px; color: var(--ob-term-bar-ink); }
.ob-gscene .term .ok { color: var(--ob-term-key); }
.ob-gscene .post { position: relative; margin: -14px 0 0 64px; padding: 18px 18px 16px; border-radius: var(--g-r); background: var(--ob-card); box-shadow: var(--g-ring); }
.ob-gscene .flag { position: absolute; top: -17px; right: 18px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ob-card); font-size: 13px; font-weight: 800; box-shadow: var(--g-edge); }
.ob-gscene .flag i { width: 8px; height: 8px; border-radius: 50%; background: var(--ob-accent); }
.ob-gscene .who { display: flex; align-items: center; gap: 10px; }
.ob-gscene .who b { display: block; font-size: 15px; }
.ob-gscene .who small { display: block; font-size: 13px; color: var(--ob-ink-2); }
.ob-gscene .post p { margin: 12px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.ob-gscene .said { font-size: 13px; font-weight: 800; color: var(--ob-accent-ink); }
.ob-gscene .foot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ob-gscene .when { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--ob-grey-bg); font-size: 13px; font-weight: 700; }
.ob-gscene .when svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ob-gscene .acts { display: flex; gap: 8px; }
.ob-gscene .toast { position: absolute; right: 6px; bottom: -6px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 14px; border-radius: 999px; background: var(--ob-ink); color: var(--ob-card); font-size: 14px; font-weight: 700; }
.ob-gscene .toast svg { width: 16px; height: 16px; fill: none; stroke: var(--ob-term-key); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ob-gscene .app { margin-right: 90px; padding: 18px; border-radius: var(--g-r); background: var(--ob-canvas); box-shadow: var(--g-edge); }
.ob-gscene .app .kind { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ob-ink-2); }
.ob-gscene .app .kind svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ob-gscene .app p { margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--g-ink-3); }
.ob-gscene .app .lines { margin-top: 12px; display: grid; gap: 6px; }
.ob-gscene .app .lines i { height: 9px; border-radius: 5px; background: var(--ob-skel); }
.ob-gscene .app .lines i:first-child { width: 92%; }
.ob-gscene .app .lines i:last-child { width: 74%; }
.ob-gscene .app + .post { margin: -16px 0 0 72px; }
.ob-gscene .face, .ob-guide .gx-face { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--g-lilac); box-shadow: var(--g-edge); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.ob-gscene .btn, .ob-guide .gx-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--ob-card); box-shadow: inset 0 0 0 1.5px var(--ob-ink); font-size: 14px; font-weight: 700; color: var(--ob-ink); }
.ob-gscene .btn.go, .ob-guide .gx-btn.go { background: var(--ob-accent); color: var(--ob-on-accent); box-shadow: var(--g-edge); font-weight: 800; }
.ob-guide .gx-btn.ink { background: var(--ob-ink); color: var(--ob-card); box-shadow: none; font-weight: 800; }
.ob-gintro { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 56px; padding-top: 56px; }
.ob-gintro .lead { flex: 999 1 560px; min-width: 0; max-width: 680px; display: flex; flex-direction: column; gap: 22px; }
.ob-gintro .lead p { margin: 0; font-size: 21px; line-height: 1.6; }
.ob-gintro .need { padding: 20px 24px; border-radius: var(--g-r); background: var(--ob-accent-wash); box-shadow: var(--g-edge); font-size: 17px; line-height: 1.6; }
.ob-gintro .toc { flex: 1 1 240px; min-width: 0; max-width: 320px; display: grid; gap: 2px; }
.ob-gintro .toc b { margin-bottom: 8px; font-size: 16px; font-weight: 800; }
.ob-gintro .toc a { display: block; padding: 7px 12px; border-radius: var(--g-r-sm); font-size: 15px; font-weight: 600; color: var(--ob-ink-2); text-decoration: none; }
.ob-gintro .toc a:hover { background: var(--ob-grey-bg); color: var(--ob-ink); }
.ob-gstep { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 56px; padding-top: 80px; }
.ob-gstep .txt { flex: 1 1 520px; min-width: 0; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.ob-gstep .kicker { font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ob-accent); }
.ob-gstep .txt > p, .ob-gsec > p:not(.note) { margin: 0; font-size: 18px; line-height: 1.7; }
.ob-gstep blockquote { margin: 0; padding: 16px 20px; border-radius: var(--g-r); background: var(--ob-card); box-shadow: var(--g-edge); font-size: 17px; font-weight: 600; line-height: 1.55; }
.ob-gcode { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--g-r); background: var(--ob-ink); }
.ob-gcode pre { margin: 0; flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--ob-mono); font-size: 14.5px; line-height: 1.75; color: var(--ob-term-ink); }
.ob-gcode .c { color: var(--g-violet); }
.ob-gcode button { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--ob-term-btn); color: var(--ob-term-ink); font: 700 13px var(--ob-font); cursor: pointer; }
.ob-gnum { margin: 0; padding: 0; list-style: none; counter-reset: g; display: grid; gap: 14px; }
.ob-gnum li { counter-increment: g; position: relative; min-height: 32px; padding: 3px 0 0 46px; font-size: 17px; font-weight: 600; line-height: 1.5; }
.ob-gnum li::before { content: counter(g); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--g-lilac); box-shadow: var(--g-edge); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ob-gfig { flex: 1 1 380px; min-width: 0; margin: 0; padding: 28px 24px 0; border-radius: var(--g-r); background: var(--ob-grey-bg); }
.ob-gfig figcaption { padding: 16px 0 20px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--g-ink-3); }
.ob-guide .gx-card { box-sizing: border-box; max-width: 380px; margin: 0 auto; padding: 16px; border-radius: var(--g-r); background: var(--ob-card); box-shadow: var(--g-edge); }
.ob-guide .gx-center { padding: 22px; text-align: center; }
.ob-guide .gx-mark { width: 44px; height: 42px; }
.ob-guide .gx-title { margin-top: 12px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.ob-guide .gx-sub { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ob-ink-2); }
.ob-guide .gx-acts { margin-top: 16px; display: flex; justify-content: center; gap: 8px; }
.ob-guide .gx-acts.sm { margin-top: 7px; justify-content: flex-start; gap: 5px; }
.ob-guide .gx-acts.sm .gx-btn { height: 22px; padding: 0 9px; font-size: 11px; }
.ob-guide .gx-stack { box-sizing: border-box; max-width: 380px; margin: 0 auto; display: grid; gap: 10px; }
.ob-guide .gx-stack > .gx-card { max-width: none; margin: 0; }
.ob-guide .gx-card.gx-stack { gap: 8px; }
.ob-guide .gx-row { display: flex; align-items: center; gap: 12px; }
.ob-guide .gx-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ob-guide .gx-who b { font-size: 15px; }
.ob-guide .gx-who small { font-size: 13px; color: var(--ob-ink-2); }
.ob-guide .gx-tick { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ob-mint-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ob-guide .gx-opts { display: grid; padding: 6px; }
.ob-guide .gx-opt { padding: 10px 12px; border-radius: var(--g-r-sm); font-size: 14px; font-weight: 600; color: var(--ob-ink-2); }
.ob-guide .gx-opt.on { background: var(--g-lilac); box-shadow: inset 0 0 0 1.5px var(--ob-ink); color: var(--ob-ink); font-weight: 800; }
.ob-guide .gx-dash { max-width: 420px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; }
.ob-guide .gx-col { display: grid; gap: 8px; align-content: start; }
.ob-guide .gx-label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-ink-2); }
.ob-guide .gx-item { display: block; padding: 9px; border-radius: var(--g-r-sm); box-shadow: inset 0 0 0 1px var(--ob-faint-3); font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ob-ink-2); }
.ob-guide .gx-item.lit { box-shadow: inset 0 0 0 1.5px var(--ob-ink); color: var(--ob-ink); }
.ob-guide .gx-item.idea { font-style: italic; }
.ob-guide .gx-item .gx-acts { display: flex; }
.ob-guide .gx-cal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ob-guide .gx-day { display: grid; gap: 5px; align-content: start; }
.ob-guide .gx-day span { font-size: 11.5px; font-weight: 800; color: var(--ob-ink-2); }
.ob-guide .gx-day.today span { color: var(--ob-accent); }
.ob-guide .gx-day i { display: block; height: 30px; border-radius: 6px; }
.ob-guide .gx-day i.mint { background: var(--ob-mint-bg); }
.ob-guide .gx-day i.lav { background: var(--g-lilac); }
.ob-guide .gx-day i.dash { box-shadow: inset 0 0 0 1.5px var(--ob-accent); }
.ob-guide .gx-text { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.ob-guide .gx-caret { display: inline-block; width: 2px; height: 16px; margin-left: 1px; background: var(--ob-accent); vertical-align: -3px; }
.ob-guide .gx-gap { margin-top: 12px; flex-wrap: wrap; gap: 8px; }
.ob-guide .gx-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ob-grey-bg); font-size: 12.5px; font-weight: 700; }
.ob-guide .gx-chip.lit { background: var(--g-lilac); box-shadow: inset 0 0 0 1.5px var(--ob-ink); font-weight: 800; }
.ob-guide .gx-btn.push { margin-left: auto; height: 32px; font-size: 13px; }
.ob-gband { margin-top: 96px; background: var(--ob-accent-wash); border-top: 1.5px solid var(--ob-ink); border-bottom: 1.5px solid var(--ob-ink); }
.ob-gband .in { padding-top: 64px; padding-bottom: 64px; }
.ob-gband .sub { max-width: 640px; margin: 10px 0 0; font-size: 18px; color: var(--g-ink-3); }
.ob-gcards { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ob-gcards > div { padding: 18px; border-radius: var(--g-r); background: var(--ob-card); box-shadow: var(--g-edge); }
.ob-gcards b { display: block; font-size: 17px; }
.ob-gcards span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--g-ink-3); }
.ob-gcards .ink { background: var(--ob-ink); color: var(--ob-card); }
.ob-gcards .ink span { color: var(--ob-faint-2); }
.ob-gfit { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.ob-gfit > div { padding: 24px; border-radius: var(--g-r); background: var(--ob-card); box-shadow: var(--g-edge); }
.ob-gfit > .us { box-shadow: var(--g-ring); }
.ob-gfit .tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--ob-grey-bg); box-shadow: var(--g-edge); font-size: 12.5px; font-weight: 800; }
.ob-gfit .us .tag { background: var(--g-lilac); }
.ob-gfit p { margin: 14px 0 0; font-size: 18px; font-weight: 700; line-height: 1.45; }
.ob-gsec { padding-top: 64px; }
.ob-gsec > p.note { margin-top: 12px; }
.ob-gtable { margin-top: 22px; overflow-x: auto; border-radius: var(--g-r); background: var(--ob-card); box-shadow: var(--g-edge); }
.ob-gtable table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.ob-gtable th, .ob-gtable td { padding: 14px 18px; text-align: left; vertical-align: top; }
.ob-gtable thead th { background: var(--ob-grey-bg); font-size: 17px; font-weight: 800; }
.ob-gtable thead th.us { background: var(--g-lilac); }
.ob-gtable tbody tr:nth-child(even) th, .ob-gtable tbody tr:nth-child(even) td:not(.us) { background: var(--ob-canvas); }
.ob-gtable tbody tr:first-child { border-top: 1.5px solid var(--ob-ink); }
.ob-gtable tbody th { width: 28%; font-weight: 800; }
.ob-gtable td.us { background: var(--ob-site-good); }
.ob-gqa { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 56px; padding-top: 80px; }
.ob-gqa .qs { flex: 999 1 560px; min-width: 0; max-width: 680px; display: grid; gap: 22px; }
.ob-gqa h3 { margin: 0; font-size: 18px; font-weight: 800; }
.ob-gqa .qs p { margin: 6px 0 0; font-size: 17px; line-height: 1.65; color: var(--g-on-ground); }
.ob-gcall { flex: 1 1 300px; min-width: 0; max-width: 380px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; border-radius: var(--g-r); background: var(--ob-accent); color: var(--ob-on-accent); box-shadow: 0 0 0 2px var(--ob-ink); }
.ob-gcall h2 { font-size: 28px; line-height: 1.15; color: var(--ob-on-accent); }
.ob-gcall p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ob-accent-bg); }
.ob-gfine { padding-top: 40px; font-size: 13px; color: var(--ob-muted); }
.ob-gmore { margin-top: 96px; background: var(--ob-grey-bg); border-top: 1.5px solid var(--ob-ink); }
.ob-gmore .in { padding-top: 48px; padding-bottom: 56px; }
.ob-gmore .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ob-ink-2); }
.ob-gmore .grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ob-gmore a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--g-r); background: var(--ob-card); box-shadow: var(--g-edge); color: var(--ob-ink); text-decoration: none; transition: transform .15s; }
.ob-gmore a:hover { transform: translateY(-2px); color: var(--ob-ink); }
.ob-gmore b { font-size: 16px; }
.ob-gmore small { font-size: 13px; font-weight: 600; color: var(--ob-ink-2); }
@media (max-width: 959px) {
    .ob-ghero::before { -webkit-mask-image: radial-gradient(ellipse 120% 42% at 30% 22%, transparent 40%, #000 90%); mask-image: radial-gradient(ellipse 120% 42% at 30% 22%, transparent 40%, #000 90%); }
    .ob-gscene .term, .ob-gscene .app { margin-right: 24px; }
    .ob-gscene .post, .ob-gscene .app + .post { margin-left: 20px; }
}
@media (max-width: 640px) {
    .ob-ghero > .in { padding-top: 36px; padding-bottom: 44px; }
    .ob-gintro .lead p { font-size: 19px; }
    .ob-gstep { padding-top: 56px; }
    .ob-gscene .toast { position: relative; right: auto; bottom: auto; margin-top: 18px; }
    .ob-gscene .term .lines { font-size: 12.5px; }
}