:root {
            /* Light, brand-tinted neutrals (hue 235 = the same blue-cyan as --accent,
               colorize.md: tint neutrals toward the brand, not a stock warm/cool default). */
            --bg: oklch(97% 0.006 235);
            --surface: oklch(99% 0.003 235);
            --surface-2: oklch(94% 0.01 235);
            --border: oklch(88% 0.012 235);
            --border-strong: oklch(78% 0.02 235);
            --text: oklch(22% 0.02 235);
            --muted: oklch(48% 0.025 235);

            /* Committed accent: one blue-cyan hue owns the page — links, buttons, glow,
               ring stroke, active nav. --accent-solid is the button-fill shade (deeper,
               keeps white text at AA); --accent is the vivid shade for text/icons/strokes/links. */
            --accent: oklch(48% 0.18 235);
            --accent-solid: oklch(44% 0.18 235);
            --accent-tint: oklch(56% 0.19 235 / 8%);

            --good: oklch(46% 0.14 152);
            --good-tint: oklch(46% 0.14 152 / 10%);
            --highlight: oklch(48% 0.15 60);
            --highlight-tint: oklch(48% 0.15 60 / 10%);
            --bad: oklch(50% 0.19 24);
            --bad-tint: oklch(50% 0.19 24 / 10%);
            --bad-border: oklch(50% 0.19 24 / 35%);

            /* Datasheet ink: confident drafted card outlines + a hard offset "print" shadow.
               No blur anywhere — blur reads as screen, hard offset reads as paper. */
            --ink-line: oklch(38% 0.03 235 / 45%);
            --ink-shadow: oklch(56% 0.19 235 / 12%);
            --dot-color: oklch(38% 0.03 235 / 14%);

            --radius: 6px;
            --radius-sm: 4px;
            --radius-xs: 2px;

            /* Exactly two families (typeset.md): the mono IS the brand voice — an IP is data,
               so structure (headings, labels, buttons, values) speaks JetBrains Mono;
               Manrope carries running prose only. */
            --font-display: "JetBrains Mono", ui-monospace, monospace;
            --font-body: "Manrope", system-ui, sans-serif;

            /* Type scale: fixed rem, ~1.125-1.2 ratio (product register, layout.md). */
            --text-2xs: 0.75rem;    /* 12px — micro-meta: lang-chip-label, footer h4 */
            --text-xs: 0.8125rem;   /* 13px — labels/eyebrow/caption */
            --text-sm: 0.875rem;    /* 14px — secondary UI, nav, meta values */
            --text-base: 1rem;      /* 16px — body copy, primary field values */
            --text-md: 1.125rem;    /* 18px — card/section titles */
            --text-lg: 1.375rem;    /* 22px — loc, lang comparison values */
            --text-xl: 1.875rem;    /* 30px — page h1 */
            --text-display: 3.25rem; /* 52px — hero IP value, the one display moment */

            /* Spacing scale: 4pt base (layout.md). */
            --space-3xs: 0.25rem;  /* 4px */
            --space-2xs: 0.5rem;   /* 8px */
            --space-xs: 0.75rem;   /* 12px */
            --space-sm: 1rem;      /* 16px */
            --space-md: 1.5rem;    /* 24px */
            --space-lg: 2rem;      /* 32px */
            --space-xl: 3rem;      /* 48px */
            --space-2xl: 4rem;     /* 64px */
        }
        /* Dark theme: same OKLCH hue (235) throughout, only lightness/chroma inverted —
           One Hue Rule survives the theme switch (see DESIGN.md). The print-shadow is
           now a visible accent-tinted block against the near-black surface instead of
           a light-blue tint against paper; everything else keeps its exact role. */
        :root[data-theme="dark"] {
            --bg: oklch(15% 0.018 235);
            --surface: oklch(19% 0.020 235);
            --surface-2: oklch(25% 0.024 235);
            --border: oklch(31% 0.024 235);
            --border-strong: oklch(42% 0.035 235);
            --text: oklch(95% 0.012 235);
            --muted: oklch(68% 0.03 235);

            --accent: oklch(72% 0.17 235);
            --accent-solid: oklch(56% 0.19 235);
            --accent-tint: oklch(72% 0.17 235 / 14%);

            --good: oklch(76% 0.17 152);
            --good-tint: oklch(76% 0.17 152 / 14%);
            --highlight: oklch(80% 0.15 78);
            --highlight-tint: oklch(80% 0.15 78 / 14%);
            --bad: oklch(72% 0.19 24);
            --bad-tint: oklch(72% 0.19 24 / 14%);
            --bad-border: oklch(72% 0.19 24 / 40%);

            --ink-line: oklch(45% 0.04 235 / 55%);
            --ink-shadow: oklch(72% 0.17 235 / 18%);
            --dot-color: oklch(70% 0.05 235 / 10%);
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        /* The Drafting-Paper Rule: the background is a quiet 1px dot grid — the page reads
           as an engineer's datasheet, not a glossy screen. Replaces the old aurora glow
           (the single biggest "AI-generated site" tell). Fixed ::before layer, not
           background-attachment (iOS Safari jitters the latter on scroll). */
        body {
            background: var(--bg);
            color: var(--text);
            font-family: var(--font-body);
            font-size: var(--text-base);
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
            font-kerning: normal;
            font-optical-sizing: auto;
            min-height: 100vh;
            position: relative;
            transition: background-color .2s ease, color .2s ease;
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -1;
            background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
            background-size: 22px 22px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.35) 70%, rgba(0,0,0,.15));
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.35) 70%, rgba(0,0,0,.15));
            transition: background-image .2s ease;
        }
        a { color: inherit; text-decoration: none; }
        a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
        .v-xs { font-size: var(--text-xs); }

        .wrap { max-width: 960px; margin: 0 auto; padding: 22px 24px 80px; }

        nav.topnav { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
        nav.topnav .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--text); }
        nav.topnav .brand b { color: var(--accent); font-weight: 700; }
        nav.topnav .nav-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
        nav.topnav .links { display: flex; gap: 26px; flex-wrap: wrap; }
        nav.topnav .links a { color: var(--muted); font-weight: 400; font-size: var(--text-sm); position: relative; padding-block: 12px 14px; margin-block: -12px -10px; transition: color .15s; }
        nav.topnav .links a:hover { color: var(--text); }
        nav.topnav .links a.active { color: var(--text); font-weight: 600; }
        nav.topnav .links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--accent); }

        /* Square icon-button shared by the theme toggle and the mobile menu burger.
           Visual box stays 32px; ::before expands the tap target to 44px (a11y, layout.md). */
        .theme-toggle, .nav-burger { position: relative; border: 1px solid var(--ink-line); background: var(--surface-2); border-radius: var(--radius-sm); width: 32px; height: 32px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--ink-shadow); transition: box-shadow .12s, color .15s, border-color .15s; flex-shrink: 0; }
        .theme-toggle::before, .nav-burger::before { content: ''; position: absolute; inset: -6px; }
        .theme-toggle:hover, .nav-burger:hover { border-color: var(--border-strong); box-shadow: 4px 4px 0 var(--ink-shadow); }
        .theme-toggle:active, .nav-burger:active { box-shadow: 1px 1px 0 var(--ink-shadow); }
        .theme-toggle .icon-moon { display: none; }
        :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
        :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

        /* Burger only exists on mobile; inline links carry desktop. */
        .nav-burger { display: none; }
        .nav-burger .icon-close { display: none; }
        nav.topnav.nav-open .nav-burger .icon-open { display: none; }
        nav.topnav.nav-open .nav-burger .icon-close { display: block; }

        @media (max-width: 820px) {
            nav.topnav .links { display: none; }
            .nav-burger { display: inline-flex; }
            /* Drawer: a print-shadow sheet dropping from the burger — links stack vertically,
               so the hero IP and the info card stay above the fold on first load. */
            nav.topnav.nav-open .links {
                display: flex; flex-direction: column; gap: 0;
                position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
                min-width: 220px; padding: 6px;
                background: var(--surface); border: 1px solid var(--ink-line);
                border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink-shadow);
            }
            nav.topnav.nav-open .links a { padding: 11px 14px; margin-block: 0; border-radius: var(--radius-sm); }
            nav.topnav.nav-open .links a:hover { background: var(--surface-2); }
            nav.topnav.nav-open .links a.active::after { display: none; }
            nav.topnav.nav-open .links a.active { color: var(--accent); }
        }

        header.page-head { margin-bottom: var(--space-md); }
        header.page-head.center { text-align: center; }
        /* Comment-Prefix Rule: the `//` eyebrow brand gesture lives on inner tool pages too. */
        header.page-head .eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; margin-bottom: var(--space-2xs); }
        header.page-head .eyebrow::before { content: '// '; opacity: .6; }
        header.page-head h1 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
        header.page-head p { color: var(--muted); font-size: var(--text-base); line-height: 1.5; margin-top: var(--space-2xs); max-width: 62ch; }
        header.page-head.center p { margin-left: auto; margin-right: auto; }
        .error-cta { display: flex; justify-content: center; margin-bottom: var(--space-xl); }

        /* The Anchor Rule: the hero is the only display-scale moment on the page — generous
           air on both sides so it reads as the unambiguous primary element (layout.md hierarchy). */
        .ip-hero { text-align: center; margin-bottom: var(--space-xl); }
        .ip-hero .eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; }
        .ip-hero .eyebrow::before { content: '// '; opacity: .6; }
        .ip-hero .ip-value { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; margin-top: var(--space-2xs); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; }
        .ip-hero .ip-value .flag { width: 34px; height: auto; border-radius: var(--radius-xs); box-shadow: 0 0 0 1px var(--ink-line); vertical-align: middle; }
        .ip-hero .ip-value .mono { word-break: break-all; }
        /* Terminal caret after the IP — the one playful moment on the page. */
        .ip-hero .ip-value .mono::after { content: ''; display: inline-block; width: 0.45ch; height: 0.9em; margin-left: 0.12ch; background: var(--accent); vertical-align: baseline; transform: translateY(0.12em); animation: ckCaret 1.1s steps(1) infinite; }
        @keyframes ckCaret { 50% { opacity: 0; } }
        @media (prefers-reduced-motion: reduce) { .ip-hero .ip-value .mono::after { animation: none; } }
        .ip-hero .ip-value .copy-btn { border: 1px solid var(--ink-line); background: var(--surface); border-radius: var(--radius-sm); width: 40px; height: 40px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--ink-shadow); transition: box-shadow .12s, color .15s, border-color .15s; flex-shrink: 0; }
        .ip-hero .ip-value .copy-btn:hover { border-color: var(--border-strong); box-shadow: 5px 5px 0 var(--ink-shadow); }
        .ip-hero .ip-value .copy-btn:active { box-shadow: 1px 1px 0 var(--ink-shadow); }
        .ip-hero .ip-value .copy-btn.copied { border-color: var(--good); color: var(--good); box-shadow: 3px 3px 0 var(--good-tint); }
        .ip-hero .loc { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; margin-top: var(--space-3xs); color: var(--text); }
        /* IPv4 fits the full display size; IPv6 and small viewports need headroom to avoid overflow. */
        @media (max-width: 640px) { .ip-hero .ip-value { font-size: 2rem; gap: 10px; } .ip-hero .loc { font-size: var(--text-base); } }
        @media (max-width: 420px) { .ip-hero .ip-value { font-size: 1.5rem; } }

        .backlink { font-family: var(--font-display); display: inline-block; border: 1px solid var(--ink-line); background: var(--surface); border-radius: var(--radius-sm); padding: 9px 16px; font-size: var(--text-sm); font-weight: 600; color: var(--accent); margin: 0 auto var(--space-lg); box-shadow: 3px 3px 0 var(--ink-shadow); transition: box-shadow .12s; }
        .backlink:hover { box-shadow: 5px 5px 0 var(--ink-shadow); }
        .backlink:active { box-shadow: 1px 1px 0 var(--ink-shadow); }
        .backlink-wrap { text-align: center; }

        /* Data-cluster rhythm: gauge/lang/field cards group tightly (--space-sm) — they're one
           continuous read, not separate sections (layout.md: tight within, generous between).
           The Print-Shadow Rule: every card sits on a hard offset shadow (no blur) over an inked
           1px outline — a sheet of paper laid on the drafting grid. Hover nudges the sheet up
           and the shadow grows; depth stays tactile, never glossy. */
        .gauge-card { display: flex; align-items: center; gap: 28px; background: var(--surface); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 24px 30px; margin-bottom: var(--space-sm); box-shadow: 5px 5px 0 var(--ink-shadow); }
        @media (max-width: 560px) { .gauge-card { flex-direction: column; text-align: center; gap: 16px; } }
        .gauge { flex-shrink: 0; }
        .gauge-info { flex: 1; }
        .gauge-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-3xs); }
        .gauge-sub { font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-2xs); }
        .gauge-sub.gauge-clean { color: var(--good); font-weight: 600; }
        .gauge-factors { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; }
        @media (max-width: 560px) { .gauge-factors { justify-content: center; } }
        .gauge-factors li { font-size: var(--text-xs); color: var(--text); display: flex; align-items: center; gap: 6px; }
        .gauge-factors .minus { font-family: "JetBrains Mono", monospace; font-size: var(--text-2xs); font-weight: 600; color: var(--bad); background: var(--bad-tint); border-radius: 4px; padding: 1px 6px; }

        .lang-card { background: var(--surface); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 20px 30px; margin-bottom: var(--space-sm); box-shadow: 5px 5px 0 var(--ink-shadow); }
        /* Mismatch is the one alert state on the page — its print shadow turns red,
           like a rejection stamp on the form. */
        .lang-card.bad { border-color: var(--bad-border); background: color-mix(in srgb, var(--bad) 6%, var(--surface)); box-shadow: 5px 5px 0 var(--bad-tint); }
        .lang-card.bad:hover { box-shadow: 8px 8px 0 var(--bad-tint); }
        .lang-title { font-family: var(--font-display); display: flex; align-items: center; gap: 9px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; margin-bottom: var(--space-sm); }
        .lang-compare { display: flex; align-items: center; gap: 20px; }
        @media (max-width: 560px) { .lang-compare { gap: 12px; } }
        .lang-chip { display: flex; flex-direction: column; gap: 3px; }
        .lang-chip-label { font-size: var(--text-2xs); color: var(--muted); }
        .lang-chip-val { font-family: "JetBrains Mono", monospace; font-size: var(--text-lg); font-weight: 600; }
        .lang-vs { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
        .lang-vs.ok { color: var(--good); }
        .lang-vs.bad { color: var(--bad); }
        .lang-verdict { margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
        .lang-verdict.ok { color: var(--good); }
        .lang-verdict.bad { color: var(--bad); font-weight: 700; }

        .field-card { background: var(--surface); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 8px 30px; margin-bottom: var(--space-sm); box-shadow: 5px 5px 0 var(--ink-shadow); }
        /* Datasheet split into four separate cards (network / time / device / anonymity). */
        .field-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); }
        .field-cards .field-card { margin-bottom: 0; padding-bottom: 14px; }
        @media (max-width: 640px) { .field-cards { grid-template-columns: 1fr; } }

        /* Tool bridge: after the visitor sees their IP, offer the next checks. */
        .tool-eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; margin: var(--space-xl) 0 var(--space-sm); }
        .tool-eyebrow::before { content: '// '; opacity: .6; }
        .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); }
        .tool-card { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--ink-line); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--ink-shadow); transition: transform .12s, box-shadow .12s; }
        .tool-card span { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text); }
        .tool-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink-shadow); }
        .tool-card:active { box-shadow: 1px 1px 0 var(--ink-shadow); }
        .group-label { font-family: var(--font-display); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; padding: 16px 0 2px; border-bottom: 1px solid var(--border); }
        .group-label::before { content: '// '; opacity: .6; }
        .field-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--border); }
        .field-row:last-child { border-bottom: 0; }
        .field-row .k { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
        .field-row .k .ico { width: 15px; height: 15px; opacity: .85; flex-shrink: 0; }
        .field-row .v { font-size: var(--text-base); font-weight: 600; text-align: right; word-break: break-word; }
        .field-row .v.mono { font-size: var(--text-sm); }
        .field-row .v.good { color: var(--good); }
        .field-row .v.bad { color: var(--bad); }
        .field-row .v.highlight { color: var(--highlight); }
        .field-row .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; flex-shrink: 0; }
        .field-row .dot.good { background: var(--good); }
        .field-row .dot.bad { background: var(--bad); }
        .field-row .link { color: var(--accent); font-size: var(--text-xs); font-weight: 600; padding-block: 10px; margin-block: -10px; }
        /* On narrow screens key/value stack: label on top, value left-aligned below.
           Keeps long values (time, ISP, ASN) from wrapping ragged-right next to the key. */
        @media (max-width: 640px) {
            .field-row { flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 0; }
            .field-row .v { text-align: left; max-width: 100%; }
        }

        .intro { color: var(--muted); font-size: var(--text-base); line-height: 1.5; margin-bottom: var(--space-sm); max-width: 62ch; }

        /* Static content pages (about/privacy/contacts): quiet prose, mono section heads. */
        .prose { max-width: 68ch; }
        .prose h2 { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; margin: var(--space-lg) 0 var(--space-2xs); }
        .prose p { color: var(--muted); font-size: var(--text-base); line-height: 1.65; margin-bottom: var(--space-sm); }
        .prose a { color: var(--accent); font-weight: 600; }
        .prose ul { list-style: none; margin: 0 0 var(--space-sm); padding: 0; }
        .prose li { color: var(--muted); font-size: var(--text-base); line-height: 1.6; padding-left: 18px; position: relative; margin-bottom: var(--space-2xs); }
        .prose li::before { content: '//'; position: absolute; left: 0; color: var(--accent); opacity: .6; font-family: var(--font-display); font-size: var(--text-xs); }
        .prose .contact-line { font-family: var(--font-display); font-size: var(--text-md); color: var(--text); margin-bottom: var(--space-sm); }

        /* The Press Rule: the button is a physical key — hard offset shadow at rest that
           collapses on press. The shadow moves, the element itself never does: shifting the
           element under the pointer mid-press can swallow the click entirely. */
        .btn { font-family: var(--font-display); display: inline-flex; align-items: center; gap: 8px; background: var(--accent-solid); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; border: none; cursor: pointer; box-shadow: 4px 4px 0 var(--ink-shadow); transition: box-shadow .12s, background .12s; }
        .btn:hover:not(:disabled) { background: var(--accent); box-shadow: 6px 6px 0 var(--ink-shadow); }
        .btn:active:not(:disabled) { box-shadow: 1px 1px 0 var(--ink-shadow); }
        .btn:disabled { opacity: .6; cursor: default; }
        .ip-inline { color: var(--muted); font-size: var(--text-sm); margin-left: 16px; }
        .ip-inline .mono { color: var(--text); font-weight: 600; }

        .scan-status { display: none; align-items: center; gap: 10px; margin-top: 20px; font-size: var(--text-sm); color: var(--text); }
        .scan-status.active { display: flex; }
        .scan-status .spinner {
            width: 16px; height: 16px; border-radius: 50%;
            border: 2px solid var(--border); border-top-color: var(--accent);
            animation: ckSpin .7s linear infinite; flex-shrink: 0;
        }
        @keyframes ckSpin { to { transform: rotate(360deg); } }

        .progress-track { height: 5px; border-radius: 999px; background: var(--border); margin-top: 10px; overflow: hidden; display: none; }
        .progress-track.active { display: block; }
        .progress-track .fill {
            height: 100%; width: 30%; border-radius: 999px; background: var(--accent);
            animation: ckProgressSlide 1.3s ease-in-out infinite;
        }
        @keyframes ckProgressSlide {
            0%   { transform: translateX(-100%); }
            100% { transform: translateX(333.333%); }
        }

        .result-card { background: var(--surface); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 8px 30px; margin-top: var(--space-md); box-shadow: 5px 5px 0 var(--ink-shadow); }
        .result-card h2 { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; padding: 17px 0; border-bottom: 1px solid var(--border); }
        .result-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
        .result-row span:last-child { text-align: right; }
        .result-row:last-child { border-bottom: 0; }
        .result-row .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
        .result-row .dot.good { background: var(--good); }
        .result-row .dot.bad { background: var(--bad); }
        .result-ok { color: var(--good); padding: 14px 0; font-weight: 600; }

        .note { color: var(--muted); font-size: var(--text-xs); line-height: 1.7; margin-top: var(--space-sm); max-width: 62ch; }

        .cta { margin-top: var(--space-md); background: var(--surface); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; box-shadow: 5px 5px 0 var(--ink-shadow); }
        .cta b { font-family: var(--font-display); font-size: var(--text-base); }
        .cta span { color: var(--muted); font-size: var(--text-sm); }

        footer.site-footer { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--border); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-md); }
        @media (max-width: 640px) { footer.site-footer { grid-template-columns: 1fr 1fr; } footer.site-footer > :first-child { grid-column: 1 / -1; } }
        footer.site-footer .brand { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-2xs); }
        footer.site-footer .brand b { color: var(--accent); }
        footer.site-footer p { color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
        footer.site-footer .ft-h { font-family: var(--font-display); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: var(--space-xs); }
        footer.site-footer a { display: block; color: var(--muted); font-size: var(--text-sm); padding-block: 4px; margin-bottom: 2px; }
        footer.site-footer a:hover { color: var(--text); }
        .footer-bottom { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: var(--text-xs); }

        .lang-picker { position: relative; }
        .lang-picker summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--muted); padding: 6px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); transition: border-color .15s; }
        .lang-picker summary:hover { border-color: var(--border-strong); }
        .lang-picker summary::-webkit-details-marker { display: none; }
        .lang-picker summary .car { font-size: 9px; color: var(--muted); margin-left: 2px; }
        .lang-picker .menu { position: absolute; bottom: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--ink-line); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink-shadow); padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 352px; z-index: 40; }
        .lang-picker .menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-xs); color: var(--muted); padding: 8px 9px; border-radius: 6px; margin: 0; }
        .lang-picker .menu a:hover { background: var(--bg); color: var(--text); }
        .lang-picker .menu a.current { color: var(--accent); font-weight: 600; background: var(--accent-tint); }
        .lang-picker .menu .lang-opt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
        .lang-flag { width: 16px; height: 12px; border-radius: var(--radius-xs); box-shadow: 0 0 0 1px var(--ink-line); flex-shrink: 0; object-fit: cover; }
        @media (max-width: 640px) { .lang-picker .menu { width: 260px; grid-template-columns: 1fr; right: 0; left: auto; max-height: min(45vh, 340px); overflow-y: auto; overscroll-behavior: contain; } }