/* Generated from index.html by _scripts/build_pages.py - do not edit directly. */

        /* ==========================================================================
           ITInfoByte "Digital Workbench" design system
           Source of assets/site.css (extracted by _scripts/build_pages.py).
           Light theme is the default; dark applies via prefers-color-scheme unless
           the visitor chose a theme (html[data-theme], stored in itb-theme).
           ========================================================================== */

        /* Self-hosted fonts (SIL OFL 1.1 — licences in /assets/fonts/), latin subset.
           The *Fallback faces are local fonts scaled to the web fonts' metrics so
           text doesn't jump when the web font arrives (CLS). */
        @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
        @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-tight-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
        @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
        @font-face { font-family: 'Bricolage Grotesque Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'), local('Helvetica'); size-adjust: 101.5%; ascent-override: 91.6%; descent-override: 26.6%; line-gap-override: 0%; }
        @font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 96.83%; ascent-override: 100.04%; descent-override: 24.91%; line-gap-override: 0%; }
        @font-face { font-family: 'JetBrains Mono Fallback'; src: local('Courier New'); size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 30.00%; line-gap-override: 0%; }

        /* ---- Tokens: light (default) ---- */
        :root {
            color-scheme: light;

            /* Brand palette */
            --navy-900: #0F1B33;
            --navy-800: #14213D;
            --navy-700: #1E2E50;
            --teal-700: #0F766E;
            --teal-800: #0B5F58;
            --teal-300: #5EEAD4;
            --amber-400: #F2A93B;
            --amber-800: #92400E;

            /* Surfaces: warm neutral ground, white work surfaces, soft wells */
            --surface-0: #F5F3EE;      /* page ground */
            --surface-1: #FFFFFF;      /* cards, panels */
            --surface-2: #FAF8F4;      /* wells: inputs, outputs, code */
            --surface-3: #F1EDE5;      /* hover, chips */
            --border: #E3DED3;
            --border-strong: #CFC8BA;
            --field-border: #D6CFC2;

            --text-primary: #0F1B33;
            --text-secondary: #4A5672;
            --text-muted: #5B6479;     /* >= 5:1 on every light surface */

            /* Interactive: deep teal */
            --accent: #0F766E;
            --accent-hover: #0B5F58;
            --accent-ink: #FFFFFF;     /* text on a teal fill */
            --accent-text: #0F766E;    /* teal used as text */
            --accent-wash: rgba(15, 118, 110, 0.08);
            --accent-wash-strong: rgba(15, 118, 110, 0.14);
            --accent-line: rgba(15, 118, 110, 0.38);
            --focus-ring: rgba(15, 118, 110, 0.28);

            /* Highlight: warm amber (favourites, "new", active markers) */
            --amber: #F2A93B;
            --amber-ink: #0F1B33;
            --amber-text: #92400E;
            --amber-wash: #FDF1DC;
            --amber-line: rgba(196, 122, 18, 0.45);

            /* Semantic */
            --ok: #166534;
            --ok-wash: #E8F5EC;
            --warn: #92400E;
            --warn-wash: #FDF1DC;
            --error: #B91C1C;
            --error-wash: #FCECEC;
            --info: #1D4ED8;
            --info-wash: #EAF0FD;

            /* App bar stays midnight navy in both themes */
            --appbar-bg: #14213D;
            --appbar-border: #22335A;
            --appbar-text: #F3F5F9;
            --appbar-muted: #C5CEDC;
            --appbar-hover: rgba(255, 255, 255, 0.08);

            /* Logo mark */
            --mark-tile: #14213D;
            --mark-top: #2DD4BF;
            --mark-legs: #E8ECF3;
            --mark-byte: #F2A93B;

            --shadow-sm: 0 1px 2px rgba(15, 27, 51, 0.06);
            --shadow-md: 0 1px 2px rgba(15, 27, 51, 0.05), 0 8px 24px rgba(15, 27, 51, 0.07);
            --shadow-lg: 0 2px 6px rgba(15, 27, 51, 0.06), 0 24px 56px rgba(15, 27, 51, 0.16);
            --overlay: rgba(15, 27, 51, 0.42);
            --dot: rgba(15, 27, 51, 0.07);
            --checker-a: #E9E5DC;
            --checker-b: #F7F5F0;
            --diff-add: rgba(22, 101, 52, 0.09);
            --diff-del: rgba(185, 28, 28, 0.08);

            /* Legacy aliases so existing tool markup keeps working */
            --bg-deep: var(--surface-2);
            --bg-surface: var(--surface-1);
            --bg-elevated: var(--surface-2);
            --bg-raised: var(--surface-3);
            --glass: var(--surface-2);
            --glass-border: var(--border);
            --accent-dim: var(--accent-text);
            --accent-cyan: var(--accent);
            --accent-lime: var(--accent);
            --accent-magenta: var(--error);
            --accent-orange: var(--warn);
            --gradient-primary: var(--accent);
            --danger: var(--error);

            --font-display: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', 'Inter Tight', system-ui, sans-serif;
            --font-body: 'Inter Tight', 'Inter Tight Fallback', system-ui, -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;

            --radius-lg: 16px;
            --radius: 14px;
            --radius-md: 10px;
            --radius-sm: 8px;
            --appbar-h: 60px;
        }

        /* ---- Tokens: dark (midnight navy, never black) ---- */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                color-scheme: dark;
                --surface-0: #0B1424;
                --surface-1: #111C30;
                --surface-2: #0D1729;
                --surface-3: #1A2840;
                --border: #24324A;
                --border-strong: #33435F;
                --field-border: #2E3D58;
                --text-primary: #E8ECF3;
                --text-secondary: #A9B4C6;
                --text-muted: #8B97AC;
                --accent: #2DD4BF;
                --accent-hover: #5EEAD4;
                --accent-ink: #062A27;
                --accent-text: #2DD4BF;
                --accent-wash: rgba(45, 212, 191, 0.09);
                --accent-wash-strong: rgba(45, 212, 191, 0.16);
                --accent-line: rgba(45, 212, 191, 0.42);
                --focus-ring: rgba(45, 212, 191, 0.32);
                --amber: #F5B544;
                --amber-ink: #1A1205;
                --amber-text: #F5B544;
                --amber-wash: rgba(245, 181, 68, 0.12);
                --amber-line: rgba(245, 181, 68, 0.45);
                --ok: #4ADE80;
                --ok-wash: rgba(74, 222, 128, 0.1);
                --warn: #FBBF24;
                --warn-wash: rgba(251, 191, 36, 0.1);
                --error: #F87171;
                --error-wash: rgba(248, 113, 113, 0.1);
                --info: #60A5FA;
                --info-wash: rgba(96, 165, 250, 0.1);
                --appbar-bg: #0E1930;
                --appbar-border: #22314D;
                --mark-tile: #1B2B4B;
                --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
                --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.28);
                --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 28px 64px rgba(0, 0, 0, 0.5);
                --overlay: rgba(4, 9, 18, 0.66);
                --dot: rgba(232, 236, 243, 0.05);
                --checker-a: #1A2840;
                --checker-b: #111C30;
                --diff-add: rgba(74, 222, 128, 0.1);
                --diff-del: rgba(248, 113, 113, 0.1);
            }
        }

        :root[data-theme="dark"] {
            color-scheme: dark;
            --surface-0: #0B1424;
            --surface-1: #111C30;
            --surface-2: #0D1729;
            --surface-3: #1A2840;
            --border: #24324A;
            --border-strong: #33435F;
            --field-border: #2E3D58;
            --text-primary: #E8ECF3;
            --text-secondary: #A9B4C6;
            --text-muted: #8B97AC;
            --accent: #2DD4BF;
            --accent-hover: #5EEAD4;
            --accent-ink: #062A27;
            --accent-text: #2DD4BF;
            --accent-wash: rgba(45, 212, 191, 0.09);
            --accent-wash-strong: rgba(45, 212, 191, 0.16);
            --accent-line: rgba(45, 212, 191, 0.42);
            --focus-ring: rgba(45, 212, 191, 0.32);
            --amber: #F5B544;
            --amber-ink: #1A1205;
            --amber-text: #F5B544;
            --amber-wash: rgba(245, 181, 68, 0.12);
            --amber-line: rgba(245, 181, 68, 0.45);
            --ok: #4ADE80;
            --ok-wash: rgba(74, 222, 128, 0.1);
            --warn: #FBBF24;
            --warn-wash: rgba(251, 191, 36, 0.1);
            --error: #F87171;
            --error-wash: rgba(248, 113, 113, 0.1);
            --info: #60A5FA;
            --info-wash: rgba(96, 165, 250, 0.1);
            --appbar-bg: #0E1930;
            --appbar-border: #22314D;
            --mark-tile: #1B2B4B;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.28);
            --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 28px 64px rgba(0, 0, 0, 0.5);
            --overlay: rgba(4, 9, 18, 0.66);
            --dot: rgba(232, 236, 243, 0.05);
            --checker-a: #1A2840;
            --checker-b: #111C30;
            --diff-add: rgba(74, 222, 128, 0.1);
            --diff-del: rgba(248, 113, 113, 0.1);
        }

        /* ---- Base ---- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* The hidden attribute always wins over component display rules */
        [hidden] { display: none !important; }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: calc(var(--appbar-h) + 16px);
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: var(--font-body);
            font-size: 1rem;
            background: var(--surface-0);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.2; }

        ::selection {
            background: var(--accent-wash-strong);
            color: var(--text-primary);
        }

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

        a { color: var(--accent-text); text-underline-offset: 2px; }

        /* Line icons (sprite in each page): stroke settings inherit into <use> */
        .ic, .ic-sm, .search-icon {
            fill: none;
            stroke: currentColor;
            stroke-width: 1.75;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .ic { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
        .ic-sm { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

        kbd {
            font-family: var(--font-mono);
            font-size: 0.72rem;
            line-height: 1;
            padding: 0.2rem 0.4rem;
            border: 1px solid var(--border-strong);
            border-bottom-width: 2px;
            border-radius: 6px;
            color: var(--text-secondary);
            background: var(--surface-1);
        }

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

        .skip-link {
            position: absolute;
            left: 1rem;
            top: -100px;
            z-index: 3000;
            background: var(--accent);
            color: var(--accent-ink);
            padding: 0.6rem 1rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            text-decoration: none;
        }
        .skip-link:focus { top: 0.75rem; }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ---- Page shell ---- */
        .shell {
            position: relative;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            max-width: 100%;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* ---- App bar ---- */
        .app-bar {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: var(--appbar-bg);
            border-bottom: 1px solid var(--appbar-border);
            color: var(--appbar-text);
        }

        .app-bar-inner {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            height: var(--appbar-h);
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            text-decoration: none;
            color: var(--appbar-text);
            flex-shrink: 0;
            border-radius: var(--radius-sm);
        }

        .brand-mark { width: 32px; height: 32px; flex-shrink: 0; display: block; }
        .brand-mark .bm-tile { fill: var(--mark-tile); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
        .brand-mark .bm-top { fill: var(--mark-top); }
        .brand-mark .bm-byte { fill: var(--mark-byte); }
        .brand-mark .bm-legs { stroke: var(--mark-legs); fill: none; }

        .brand-word {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 1.14rem;
            letter-spacing: -0.025em;
            line-height: 1;
        }
        .brand-word b { font-weight: 700; color: var(--teal-300); }

        .app-nav {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            margin-left: 0.5rem;
        }

        .app-nav > a, .nav-menu > summary {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.45rem 0.7rem;
            border-radius: var(--radius-sm);
            color: var(--appbar-muted);
            font-size: 0.9rem;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
            list-style: none;
            min-height: 38px;
        }
        .nav-menu > summary::-webkit-details-marker { display: none; }
        .app-nav > a:hover, .nav-menu > summary:hover, .nav-menu[open] > summary { background: var(--appbar-hover); color: #FFFFFF; }
        .app-nav > a[aria-current="page"] { color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--amber); border-radius: 0; }
        .nav-menu > summary .ic-sm { transition: transform 0.15s ease; }
        .nav-menu[open] > summary .ic-sm { transform: rotate(180deg); }

        .nav-menu { position: relative; }

        .menu-panel {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 260px;
            background: var(--surface-1);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            padding: 0.5rem;
            display: grid;
            gap: 2px;
            z-index: 1100;
        }

        .menu-panel a {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.55rem 0.65rem;
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 500;
        }
        .menu-panel a:hover { background: var(--surface-3); }
        .menu-panel a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-text); }
        .menu-panel .menu-ic {
            width: 30px; height: 30px;
            border-radius: 8px;
            display: grid; place-items: center;
            background: var(--surface-2);
            border: 1px solid var(--border);
            color: var(--text-primary);
            flex-shrink: 0;
        }
        .menu-panel hr { border: 0; border-top: 1px solid var(--border); margin: 0.35rem 0.25rem; }
        .menu-panel .menu-only-mobile { display: none; }

        .app-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .app-search {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            min-width: 220px;
            height: 38px;
            padding: 0 0.5rem 0 0.75rem;
            border-radius: var(--radius-md);
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.06);
            color: var(--appbar-muted);
            font-family: var(--font-body);
            font-size: 0.875rem;
            text-decoration: none;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .app-search:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); color: #FFFFFF; }
        .app-search span { flex: 1; text-align: left; }
        .app-search kbd { background: transparent; color: var(--appbar-muted); border-color: rgba(255, 255, 255, 0.22); }

        .icon-btn {
            width: 38px;
            height: 38px;
            display: inline-grid;
            place-items: center;
            border-radius: var(--radius-md);
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: transparent;
            color: var(--appbar-text);
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .icon-btn:hover { background: var(--appbar-hover); border-color: rgba(255, 255, 255, 0.28); }
        .app-bar :focus-visible { outline-color: var(--teal-300); }

        /* Theme toggle shows the icon for the current preference */
        .theme-toggle .ic { display: none; }
        :root[data-theme-pref="light"] .theme-toggle .t-light,
        :root[data-theme-pref="dark"] .theme-toggle .t-dark,
        :root[data-theme-pref="system"] .theme-toggle .t-system,
        :root:not([data-theme-pref]) .theme-toggle .t-system { display: inline-block; }

        .menu-toggle { display: none; }

        /* ---- Buttons ---- */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-height: 42px;
            padding: 0.6rem 1.1rem;
            border-radius: var(--radius-md);
            font-family: var(--font-body);
            font-size: 0.92rem;
            font-weight: 600;
            text-decoration: none;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
            cursor: pointer;
            border: 1px solid transparent;
            line-height: 1.2;
            text-align: center;
        }

        .btn:active { transform: translateY(1px); }
        .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

        .btn-primary {
            background: var(--accent);
            color: var(--accent-ink);
            box-shadow: var(--shadow-sm), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
        }

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

        .btn-secondary {
            background: var(--surface-1);
            color: var(--text-primary);
            border-color: var(--border-strong);
            box-shadow: var(--shadow-sm);
        }

        .btn-secondary:hover {
            background: var(--surface-3);
            border-color: var(--text-muted);
        }

        .btn-amber {
            background: var(--amber);
            color: var(--amber-ink);
            box-shadow: var(--shadow-sm), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
        }
        .btn-amber:hover { filter: brightness(1.05); }

        .btn-ghost {
            background: transparent;
            color: var(--text-secondary);
            border-color: var(--border);
        }
        .btn-ghost:hover { background: var(--surface-3); color: var(--text-primary); }

        .btn-tiny {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.3rem 0.65rem;
            min-height: 30px;
            font-family: var(--font-body);
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: var(--radius-sm);
            background: var(--surface-1);
            border: 1px solid var(--border-strong);
            color: var(--text-secondary);
            cursor: pointer;
            text-decoration: none;
            transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
        }

        .btn-tiny:hover {
            border-color: var(--accent-line);
            color: var(--accent-text);
            background: var(--accent-wash);
        }

        /* A button that looks like a link (e.g. "Cookie settings") */
        .link-btn {
            background: none;
            border: 0;
            padding: 0;
            font-family: inherit;
            font-size: inherit;
            color: var(--accent-text);
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        /* ---- Homepage: workbench hero ---- */
        .bench-hero {
            position: relative;
            z-index: 5;   /* keeps the search results above the cards below */
            padding: 3rem 0 2.25rem;
            background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
            background-size: 22px 22px;
            background-position: -11px -11px;
            border-bottom: 1px solid var(--border);
        }

        .bench-hero::after {
            /* fade the dot texture out towards the content below */
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, var(--surface-0) 100%);
            pointer-events: none;
        }

        .bench-hero > .container { position: relative; z-index: 1; }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
            gap: 2.5rem;
            align-items: start;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 0.3rem 0.8rem 0.3rem 0.6rem;
            margin-bottom: 1.1rem;
            box-shadow: var(--shadow-sm);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent);
            flex-shrink: 0;
            box-shadow: 0 0 0 3px var(--accent-wash-strong);
        }

        .bench-hero h1 {
            font-size: clamp(1.85rem, 3.4vw, 2.7rem);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.03em;
            max-width: 22ch;
            text-wrap: balance;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }

        .bench-hero h1 .accent {
            color: var(--accent-text);
            background: linear-gradient(transparent 72%, var(--amber-wash) 72%);
        }

        .bench-hero .lede {
            font-size: 1.05rem;
            color: var(--text-secondary);
            max-width: 60ch;
            margin-bottom: 1.5rem;
        }

        .hero-links { margin-top: 0.85rem; font-size: 0.85rem; color: var(--text-muted); display: flex; gap: 0.4rem 1.1rem; flex-wrap: wrap; align-items: center; }
        .hero-links a { color: var(--text-secondary); text-decoration: none; font-weight: 500; border-bottom: 1px dashed var(--border-strong); }
        .hero-links span { font-weight: 600; }
        .hero-links a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

        /* ---- Command search ---- */
        .cmd-search { position: relative; }

        .cmd-field {
            position: relative;
            display: flex;
            align-items: center;
            background: var(--surface-1);
            border: 1.5px solid var(--border-strong);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .cmd-field:focus-within {
            border-color: var(--accent);
            box-shadow: var(--shadow-md), 0 0 0 4px var(--focus-ring);
        }

        .cmd-field .search-icon {
            position: absolute;
            left: 1rem;
            color: var(--text-muted);
            pointer-events: none;
            width: 22px;
            height: 22px;
        }

        .cmd-field input {
            flex: 1;
            min-width: 0;
            height: 58px;
            padding: 0 1rem 0 3.1rem;
            background: transparent;
            border: 0;
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 1.06rem;
            font-weight: 500;
        }

        .cmd-field input:focus { outline: none; }
        .cmd-field input::placeholder { color: var(--text-muted); font-weight: 400; }
        .cmd-field input::-webkit-search-cancel-button { cursor: pointer; }

        .search-kbd {
            display: flex;
            gap: 0.3rem;
            padding-right: 1rem;
            pointer-events: none;
            flex-shrink: 0;
        }

        .cmd-results {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            z-index: 900;
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
        }

        .cmd-list { max-height: min(420px, 60vh); overflow-y: auto; padding: 0.4rem; }

        .cmd-option {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.55rem 0.65rem;
            border-radius: var(--radius-md);
            cursor: pointer;
            color: var(--text-primary);
            text-decoration: none;
        }

        .cmd-option[aria-selected="true"] { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--amber); }
        .cmd-option:hover { background: var(--surface-3); }
        .cmd-option[aria-selected="true"]:hover { background: var(--accent-wash-strong); }

        .cmd-option .opt-ic {
            width: 34px; height: 34px;
            border-radius: 9px;
            display: grid; place-items: center;
            background: var(--surface-2);
            border: 1px solid var(--border);
            flex-shrink: 0;
        }
        .cmd-option[aria-selected="true"] .opt-ic { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
        .cmd-option .opt-main { flex: 1; min-width: 0; }
        .cmd-option .opt-title { display: block; font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
        .cmd-option .opt-meta { display: block; font-size: 0.78rem; color: var(--text-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .cmd-option .net-flag { flex-shrink: 0; }

        .cmd-empty { padding: 1rem; color: var(--text-muted); font-size: 0.9rem; }

        .cmd-foot {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0.55rem 0.9rem;
            border-top: 1px solid var(--border);
            background: var(--surface-2);
            font-size: 0.76rem;
            color: var(--text-muted);
        }
        .cmd-foot span { display: inline-flex; gap: 0.35rem; align-items: center; }
        .cmd-foot button { font: inherit; font-weight: 600; color: var(--accent-text); background: none; border: 0; cursor: pointer; padding: 0; }

        /* ---- Your bench (pinned + recent) ---- */
        .bench-card {
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            padding: 1.15rem 1.25rem 1.25rem;
        }

        .bench-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.9rem;
        }

        .bench-title h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
        .bench-title p { font-size: 0.78rem; color: var(--text-muted); }

        .bench-group + .bench-group { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--border); }

        .bench-label {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            margin-bottom: 0.55rem;
        }
        .bench-label .ic-sm.star { color: var(--amber); fill: var(--amber); }

        .recent-strip, .pin-strip { display: block; }

        .recent-chips, .pin-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

        .recent-chips a, .pin-chips a {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            max-width: 100%;
            font-size: 0.84rem;
            font-weight: 500;
            color: var(--text-primary);
            text-decoration: none;
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 0.3rem 0.75rem 0.3rem 0.4rem;
            min-height: 36px;
            transition: border-color 0.15s ease, background 0.15s ease;
        }

        .recent-chips a span, .pin-chips a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .recent-chips a .chip-ic, .pin-chips a .chip-ic {
            width: 26px; height: 26px;
            border-radius: 50%;
            display: grid; place-items: center;
            background: var(--surface-1);
            border: 1px solid var(--border);
            flex-shrink: 0;
        }
        .pin-chips a .chip-ic { color: var(--amber-text); background: var(--amber-wash); border-color: var(--amber-line); }
        .recent-chips a:hover, .pin-chips a:hover { border-color: var(--accent-line); background: var(--accent-wash); }

        .bench-empty {
            font-size: 0.84rem;
            color: var(--text-muted);
            line-height: 1.5;
        }
        .bench-empty .ic-sm { color: var(--amber-text); margin-top: -2px; }

        /* ---- Stat strip (quiet) ---- */
        .stats-section { padding-bottom: 3rem; }
        .stats-bar {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1rem;
        }

        .stat {
            padding: 1rem 1.1rem;
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }

        .stat-value {
            font-family: var(--font-display);
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--text-primary);
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.03em;
            line-height: 1.1;
        }

        .stat-value .unit {
            font-size: 0.95rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .stat-label {
            font-size: 0.82rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }

        /* ---- Tools ---- */
        .tools-section {
            position: relative;
            padding-top: 2.25rem;
            padding-bottom: 3.5rem;
        }

        .section-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }

        .section-head h2 {
            font-size: 1.4rem;
            font-weight: 700;
            letter-spacing: -0.025em;
        }

        .section-head .section-sub { color: var(--text-secondary); font-size: 0.92rem; margin-top: 0.15rem; }

        .result-count {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 0.2rem 0.7rem;
        }

        .toolbar { margin-bottom: 1.5rem; }

        /* Category tiles double as the filter control */
        .filter-tabs {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 0.6rem;
        }

        .filter-tab {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            min-height: 52px;
            padding: 0.5rem 0.75rem 0.5rem 0.55rem;
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 0.9rem;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
        }

        .filter-tab .ft-ic {
            width: 34px; height: 34px;
            border-radius: 9px;
            display: grid; place-items: center;
            background: var(--surface-2);
            border: 1px solid var(--border);
            color: var(--text-primary);
            flex-shrink: 0;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }

        .filter-tab .ft-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .filter-tab .ft-count {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
        }

        .filter-tab:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

        .filter-tab.active {
            border-color: var(--accent);
            background: var(--accent-wash);
            box-shadow: inset 0 0 0 1px var(--accent);
        }

        .filter-tab.active .ft-ic { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
        .filter-tab.active .ft-count { color: var(--accent-text); }
        .filter-tab[data-filter="fav"] .ft-ic { color: var(--amber-text); background: var(--amber-wash); border-color: var(--amber-line); }
        .filter-tab[data-filter="fav"] .ft-ic .ic { fill: var(--amber); stroke: var(--amber-text); }
        .filter-tab[data-filter="fav"].active .ft-ic { background: var(--amber); border-color: var(--amber); }
        .filter-tab[data-filter="fav"].active .ft-ic .ic { fill: var(--amber-ink); stroke: var(--amber-ink); }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
            gap: 0.9rem;
        }

        .tool-card {
            position: relative;
            background: var(--surface-1);
            padding: 1.1rem 1.15rem 1rem;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            min-height: 188px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            text-align: left;
            width: 100%;
            font-family: inherit;
            color: inherit;
            text-decoration: none;
            transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        .tool-card:hover {
            border-color: var(--accent-line);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .tool-card:focus-visible { outline-offset: 3px; }

        .tool-header {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin-bottom: 0.75rem;
            padding-right: 2.2rem;
        }

        .tool-icon {
            width: 38px; height: 38px;
            border-radius: 10px;
            display: grid; place-items: center;
            background: var(--surface-2);
            border: 1px solid var(--border);
            color: var(--text-primary);
            flex-shrink: 0;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }

        .tool-card:hover .tool-icon { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

        .tool-index { display: none; }

        .tool-tag {
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .tool-card h3 {
            font-family: var(--font-display);
            font-size: 1.05rem;
            font-weight: 650;
            letter-spacing: -0.015em;
            color: var(--text-primary);
            margin-bottom: 0.3rem;
            line-height: 1.3;
        }

        .tool-card p {
            color: var(--text-secondary);
            font-size: 0.875rem;
            line-height: 1.5;
            margin-bottom: 0.9rem;
        }

        .tool-foot {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
        }

        .tool-arrow {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-muted);
            transition: color 0.15s ease, gap 0.15s ease;
        }

        .tool-card:hover .tool-arrow { color: var(--accent-text); gap: 0.45rem; }

        /* Processing badge: whether a tool needs the network */
        .net-flag {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.72rem;
            font-weight: 600;
            padding: 0.18rem 0.55rem 0.18rem 0.45rem;
            border-radius: 999px;
            border: 1px solid var(--border-strong);
            color: var(--text-secondary);
            background: var(--surface-1);
            white-space: nowrap;
            line-height: 1.4;
        }

        .net-flag .ic-sm { width: 14px; height: 14px; }

        .net-flag.local {
            color: var(--accent-text);
            border-color: var(--accent-line);
            background: var(--accent-wash);
        }

        .net-flag.lib {
            color: var(--info);
            border-color: color-mix(in srgb, var(--info) 40%, transparent);
            background: var(--info-wash);
        }

        .net-flag.api {
            color: var(--amber-text);
            border-color: var(--amber-line);
            background: var(--amber-wash);
        }

        /* Favourite star on tool cards */
        .fav-btn {
            position: absolute;
            top: 0.7rem;
            right: 0.7rem;
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 50%;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0;
            transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
            z-index: 2;
        }

        .fav-btn .ic { width: 19px; height: 19px; fill: transparent; transition: fill 0.15s ease; }
        .fav-btn:hover { color: var(--amber-text); background: var(--amber-wash); }
        .tool-card.faved .fav-btn { color: var(--amber-text); }
        .tool-card.faved .fav-btn .ic { fill: var(--amber); }
        .tool-card.faved { border-color: var(--amber-line); }

        .empty-state {
            grid-column: 1 / -1;
            background: var(--surface-1);
            border: 1px dashed var(--border-strong);
            border-radius: var(--radius);
            padding: 2.5rem 1.5rem;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.92rem;
        }

        /* ---- How it works / FAQ (quieter, lower on the page) ---- */
        .features-section {
            position: relative;
            padding-top: 3rem;
            padding-bottom: 3rem;
            border-top: 1px solid var(--border);
        }

        .features-intro { color: var(--text-secondary); max-width: 75ch; margin: -0.25rem 0 1.5rem; font-size: 0.95rem; }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .feature {
            padding: 1.15rem 1.25rem;
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }

        .feature h3 {
            font-size: 1rem;
            font-weight: 650;
            margin-bottom: 0.4rem;
        }

        .feature p {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .feature a { color: var(--accent-text); }

        .feature code {
            font-family: var(--font-mono);
            font-size: 0.82em;
            color: var(--text-primary);
            background: var(--surface-3);
            padding: 0.1em 0.35em;
            border-radius: 5px;
        }

        /* ---- Closing note ---- */
        .cta-section {
            position: relative;
            padding-top: 1rem;
            padding-bottom: 3.5rem;
        }

        .cta-box {
            background: var(--appbar-bg);
            color: var(--appbar-text);
            border-radius: var(--radius-lg);
            padding: 1.75rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            flex-wrap: wrap;
            background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.2px);
            background-size: 18px 18px;
        }

        .cta-box h2 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.3rem;
        }

        .cta-box p {
            color: var(--appbar-muted);
            font-size: 0.95rem;
            max-width: 56ch;
        }

        /* ---- Footer ---- */
        footer, .site-footer {
            position: relative;
            margin-top: auto;
            background: var(--surface-1);
            border-top: 1px solid var(--border);
            padding: 2.25rem 0 0;
        }

        .footer-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; color: var(--text-primary); }
        .footer-brand .brand-word b { color: var(--accent-text); }
        .footer-brand p { color: var(--text-muted); font-size: 0.85rem; margin-left: 0.5rem; }

        .footer-cats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 1.5rem 2rem;
            padding: 0 0 1.75rem;
        }

        .footer-cat-title {
            font-family: var(--font-body);
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            margin-bottom: 0.55rem;
        }

        .footer-cat-title a { color: var(--text-primary); text-decoration: none; }
        .footer-cat-title a:hover { color: var(--accent-text); }

        .footer-cat-links {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .footer-cat-links a {
            color: var(--text-secondary);
            font-size: 0.84rem;
            text-decoration: none;
            line-height: 1.45;
        }

        .footer-cat-links a:hover { color: var(--accent-text); text-decoration: underline; }

        .footer-legal {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 0.75rem 1.5rem;
            border-top: 1px solid var(--border);
            padding: 1.1rem 0 1.75rem;
            font-size: 0.82rem;
            color: var(--text-muted);
        }

        .footer-legal-links {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem 1.1rem;
        }

        .footer-legal-links a, .footer-legal-links .link-btn {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: inherit;
        }

        .footer-legal-links a:hover, .footer-legal-links .link-btn:hover { color: var(--accent-text); text-decoration: underline; }

        /* ---- Modal = workspace sheet ---- */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: var(--overlay);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 2000;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal {
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            width: 100%;
            max-width: 560px;
            max-height: 90vh;
            overflow-y: auto;
            transform: translateY(10px) scale(0.99);
            opacity: 0;
            transition: transform 0.2s ease, opacity 0.2s ease;
            box-shadow: var(--shadow-lg);
        }

        .modal:focus { outline: none; }

        .modal-overlay.active .modal {
            transform: none;
            opacity: 1;
        }

        .modal-header {
            padding: 0.85rem 0.85rem 0.85rem 1.4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--surface-1);
            z-index: 5;
        }

        .modal-header::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.9rem;
            bottom: 0.9rem;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: var(--amber);
        }

        .modal-header h3 {
            font-size: 1.08rem;
            font-weight: 700;
            letter-spacing: -0.015em;
            display: flex;
            align-items: baseline;
            gap: 0.6rem;
        }

        .modal-header h3 .modal-index { display: none; }

        .modal-tools { display: flex; align-items: center; gap: 0.4rem; }

        .modal-close, .modal-page-link {
            width: 38px;
            height: 38px;
            border-radius: var(--radius-md);
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
            font-size: 1.3rem;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            text-decoration: none;
        }

        .modal-close:hover, .modal-page-link:hover {
            background: var(--surface-3);
            color: var(--text-primary);
        }

        .modal-body {
            padding: 1.4rem;
        }

        .modal.modal-wide { max-width: 1000px; }
        .modal.modal-md { max-width: 760px; }

        /* ---- Form elements ---- */
        .form-group {
            margin-bottom: 1.15rem;
        }

        /* Field labels only — not labels that are styled as buttons or checkbox chips */
        .form-group > label:not(.btn):not(.checkbox-item) {
            display: block;
            margin-bottom: 0.4rem;
            font-family: var(--font-body);
            font-size: 0.84rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .form-input {
            width: 100%;
            min-height: 42px;
            padding: 0.6rem 0.8rem;
            background: var(--surface-2);
            border: 1px solid var(--field-border);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-family: var(--font-mono);
            font-size: 0.875rem;
            line-height: 1.5;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        }

        .form-input:hover { border-color: var(--border-strong); }

        .form-input:focus {
            outline: none;
            border-color: var(--accent);
            background: var(--surface-1);
            box-shadow: 0 0 0 3px var(--focus-ring);
        }

        .form-input::placeholder { color: var(--text-muted); opacity: 1; }
        .form-input:disabled { opacity: 0.6; cursor: not-allowed; }

        textarea.form-input {
            min-height: 140px;
            resize: vertical;
            line-height: 1.55;
        }

        select.form-input {
            cursor: pointer;
            font-family: var(--font-body);
            font-size: 0.92rem;
            -webkit-appearance: none;
            appearance: none;
            padding-right: 2.2rem;
            background-image:
                linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
            background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
            background-size: 5px 5px, 5px 5px;
            background-repeat: no-repeat;
        }

        input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
        input[type="color"].form-input { padding: 0.25rem; cursor: pointer; }

        .slider-container {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .slider {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            background: var(--surface-3);
            border: 1px solid var(--border);
            border-radius: 999px;
            outline: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: var(--accent);
            border-radius: 50%;
            cursor: pointer;
            border: 3px solid var(--surface-1);
            box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
        }

        .slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: var(--accent);
            border-radius: 50%;
            cursor: pointer;
            border: 3px solid var(--surface-1);
            box-shadow: 0 0 0 1px var(--accent);
        }

        .slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus-ring); }

        .slider-value {
            font-family: var(--font-mono);
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--accent-text);
            min-width: 40px;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            min-height: 38px;
            padding: 0.4rem 0.8rem;
            background: var(--surface-1);
            border: 1px solid var(--field-border);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease;
            font-size: 0.86rem;
            font-weight: 500;
            color: var(--text-secondary);
        }

        .checkbox-item:hover { border-color: var(--border-strong); }

        /* Chips draw their own tick; tools that want the native box override display inline */
        .checkbox-item input { display: none; }
        .checkbox-item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

        .checkbox-item:has(input:checked) {
            border-color: var(--accent-line);
            background: var(--accent-wash);
            color: var(--text-primary);
        }

        .checkbox-item input:checked + span { color: var(--text-primary); }

        .checkbox-item input:checked ~ .check-icon {
            background: var(--accent);
            border-color: var(--accent);
        }

        .check-icon {
            width: 17px;
            height: 17px;
            border-radius: 5px;
            background: var(--surface-1);
            border: 1.5px solid var(--border-strong);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s ease, border-color 0.15s ease;
            flex-shrink: 0;
            /* The tick is drawn with borders below, never a colour-emoji glyph */
            box-sizing: border-box;
        }

        .check-icon::after {
            content: '';
            width: 4px;
            height: 8px;
            border: solid transparent;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg) translate(-0.5px, -1px);
            transition: border-color 0.15s ease;
        }

        .checkbox-item input:checked ~ .check-icon::after {
            border-color: var(--accent-ink);
        }

        .result-box {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.9rem 1rem;
            font-family: var(--font-mono);
            font-size: 0.92rem;
            font-weight: 500;
            min-height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            overflow-wrap: anywhere;
            color: var(--text-primary);
            margin-bottom: 1rem;
            line-height: 1.5;
        }

        .action-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
        }

        .action-buttons .btn {
            flex: 1 1 auto;
        }

        .form-group > .action-buttons { margin-top: 0.75rem; }

        /* Two-column split used by diff, CSV/JSON, curl converter */
        .split-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 1.25rem;
        }

        .field-row {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            align-items: flex-end;
            margin-bottom: 1.15rem;
        }

        .field-row .form-group {
            flex: 1;
            min-width: 160px;
            margin-bottom: 0;
        }

        /* Code output block with its own scroll */
        .code-out {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.9rem 1rem;
            font-family: var(--font-mono);
            font-size: 0.82rem;
            line-height: 1.6;
            color: var(--text-primary);
            white-space: pre;
            overflow-x: auto;
            max-height: 340px;
            overflow-y: auto;
            margin-bottom: 1rem;
            tab-size: 2;
        }

        .code-out.plain { color: var(--text-primary); }

        .hint {
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-top: 0.4rem;
            line-height: 1.5;
        }

        .status-line {
            font-size: 0.84rem;
            font-weight: 500;
            margin-bottom: 1rem;
            min-height: 1.3rem;
            line-height: 1.45;
        }

        .status-line.ok { color: var(--ok); }
        .status-line.err { color: var(--error); }
        .status-line.info { color: var(--text-secondary); }

        /* Generic tables inside tool panels */
        .modal-body table { border-collapse: collapse; }
        .modal-body th, .modal-body td { border-color: var(--border); }
        .modal-body thead tr { color: var(--text-secondary); }
        .modal-body h3 { font-family: var(--font-display); font-weight: 650; }

        /* Diff viewer */
        .diff-pane {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-family: var(--font-mono);
            font-size: 0.8rem;
            line-height: 1.65;
            max-height: 440px;
            overflow: auto;
            margin-bottom: 1rem;
        }

        .diff-row {
            display: flex;
            white-space: pre;
        }

        .diff-gutter {
            flex: 0 0 3.2rem;
            padding: 0 0.6rem;
            text-align: right;
            color: var(--text-muted);
            background: var(--surface-1);
            border-right: 1px solid var(--border);
            user-select: none;
            position: sticky;
            left: 0;
            font-variant-numeric: tabular-nums;
        }

        .diff-text {
            padding: 0 0.75rem;
            flex: 1;
        }

        .diff-row.add { background: var(--diff-add); }
        .diff-row.add .diff-text { color: var(--ok); }
        .diff-row.del { background: var(--diff-del); }
        .diff-row.del .diff-text { color: var(--error); }
        .diff-row.same .diff-text { color: var(--text-secondary); }
        .diff-row.gap {
            background: var(--surface-1);
            color: var(--text-muted);
            font-size: 0.72rem;
        }

        /* Social preview cards for meta tag generator (deliberately mimic the real platforms) */
        .preview-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 1rem;
            font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
            color: #111;
        }

        .preview-card .pv-img {
            width: 100%;
            aspect-ratio: 1.91 / 1;
            object-fit: cover;
            background: #e3e3e8;
            display: block;
        }

        .preview-card .pv-body { padding: 0.75rem 1rem; }
        .preview-card .pv-site {
            font-size: 0.72rem;
            color: #606770;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .preview-card .pv-title {
            font-size: 0.95rem;
            font-weight: 600;
            margin: 0.15rem 0;
            line-height: 1.3;
        }
        .preview-card .pv-desc {
            font-size: 0.82rem;
            color: #606770;
            line-height: 1.4;
        }

        .preview-card.google {
            background: #fff;
            padding: 1rem;
        }
        .preview-card.google .pv-url { font-size: 0.8rem; color: #202124; }
        .preview-card.google .pv-title {
            color: #1a0dab;
            font-size: 1.1rem;
            font-weight: 400;
        }
        .preview-card.google .pv-desc { color: #4d5156; }

        .preview-label {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 0.5rem;
        }

        /* Drop zone for image/file tools */
        .drop-zone {
            border: 1.5px dashed var(--border-strong);
            border-radius: var(--radius);
            padding: 2rem 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.15s ease, background-color 0.15s ease;
            margin-bottom: 1.25rem;
            background-color: var(--surface-2);
            background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
            background-size: 16px 16px;
        }

        .drop-zone:hover,
        .drop-zone.dragover {
            border-color: var(--accent);
            background-color: var(--accent-wash);
        }

        .drop-zone:focus-visible { outline-offset: 3px; }

        .drop-zone-icon {
            font-size: 1.4rem;
            width: 48px;
            height: 48px;
            margin: 0 auto 0.6rem;
            display: grid;
            place-items: center;
            border-radius: 12px;
            background: var(--surface-1);
            border: 1px solid var(--border);
            color: var(--accent-text);
            box-shadow: var(--shadow-sm);
        }

        .drop-zone-text {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .drop-zone-text strong { color: var(--text-primary); }

        .drop-zone input[type="file"] { display: none; }

        /* Icon result tiles for favicon generator */
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .icon-tile {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.9rem;
            text-align: center;
        }

        .icon-tile canvas {
            image-rendering: auto;
            border-radius: 4px;
            background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 50% / 10px 10px;
            max-width: 100%;
        }

        .icon-tile .icon-size {
            font-family: var(--font-mono);
            font-size: 0.72rem;
            color: var(--text-secondary);
            margin: 0.5rem 0;
            font-variant-numeric: tabular-nums;
        }

        /* Before/after comparison stats */
        .compare-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .compare-stat {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.85rem 0.75rem;
            text-align: center;
        }

        .compare-stat .cs-value {
            font-family: var(--font-display);
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--text-primary);
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        .compare-stat .cs-label {
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-top: 0.25rem;
            line-height: 1.3;
        }

        .compare-stat.saving {
            background: var(--accent-wash);
            border-color: var(--accent-line);
        }

        .compare-stat.saving .cs-value { color: var(--accent-text); }

        /* Chips (presets, quick picks) */
        .chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            margin-bottom: 1.25rem;
        }

        .chip {
            min-height: 34px;
            padding: 0.35rem 0.8rem;
            background: var(--surface-1);
            border: 1px solid var(--field-border);
            border-radius: 999px;
            font-family: var(--font-body);
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
        }

        .chip:hover {
            border-color: var(--accent-line);
            color: var(--accent-text);
            background: var(--accent-wash);
        }

        .cron-display {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-left: 3px solid var(--amber);
            border-radius: var(--radius-md);
            padding: 1.1rem 1.25rem;
            margin-bottom: 1.25rem;
        }

        .cron-expr {
            font-family: var(--font-mono);
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--accent-text);
            letter-spacing: 0.12em;
            word-break: break-all;
        }

        .cron-english {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-top: 0.5rem;
        }

        .next-runs {
            list-style: none;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
        }

        .next-runs li {
            padding: 0.4rem 0;
            border-bottom: 1px solid var(--border);
        }

        .next-runs li:last-child { border-bottom: none; }

        /* Hash tool rows */
        .hash-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.7rem 0.9rem;
            margin-bottom: 0.5rem;
        }

        .hash-algo {
            flex: 0 0 4.8rem;
            font-family: var(--font-mono);
            font-size: 0.74rem;
            color: var(--accent-text);
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        .hash-value {
            flex: 1;
            min-width: 0;
            font-family: var(--font-mono);
            font-size: 0.76rem;
            color: var(--text-primary);
            word-break: break-all;
            line-height: 1.5;
        }

        .match-banner {
            border-radius: var(--radius-md);
            padding: 0.85rem 1rem;
            font-size: 0.86rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .match-banner.match {
            background: var(--ok-wash);
            border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
            color: var(--ok);
        }

        .match-banner.nomatch {
            background: var(--error-wash);
            border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
            color: var(--error);
        }

        .progress-track {
            height: 6px;
            background: var(--surface-3);
            border-radius: 999px;
            overflow: hidden;
            margin-bottom: 1rem;
        }

        .progress-fill {
            height: 100%;
            width: 0;
            background: var(--accent);
            border-radius: 999px;
            transition: width 0.2s ease;
        }

        /* Toast replaces blocking alert() for copy feedback */
        .toast {
            position: fixed;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%) translateY(200%);
            background: var(--appbar-bg);
            border: 1px solid var(--appbar-border);
            color: var(--appbar-text);
            padding: 0.7rem 1.1rem 0.7rem 0.9rem;
            border-radius: var(--radius-md);
            font-size: 0.88rem;
            font-weight: 500;
            z-index: 3000;
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.25s;
            box-shadow: var(--shadow-lg);
            visibility: hidden;   /* parked off-screen; never shows as an empty box */
            max-width: calc(100vw - 2rem);
            display: flex;
            align-items: center;
            gap: 0.55rem;
        }

        .toast::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--teal-300);
            flex-shrink: 0;
        }

        .toast.show { transform: translateX(-50%) translateY(0); visibility: visible; transition-delay: 0s; }

        /* PDF tool file lists */
        .pdf-file-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.55rem 0.8rem;
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            margin-bottom: 0.4rem;
        }

        .pdf-file-name {
            font-family: var(--font-mono);
            font-size: 0.8rem;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pdf-file-controls {
            display: flex;
            gap: 0.3rem;
            flex-shrink: 0;
        }

        /* GPA calculator rows */
        .gpa-row {
            display: grid;
            grid-template-columns: 1fr 90px 130px 36px;
            gap: 0.5rem;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        /* Regex tester */
        .rx-highlight {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.8rem 0.95rem;
            font-family: var(--font-mono);
            font-size: 0.82rem;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 240px;
            overflow-y: auto;
            margin-bottom: 1rem;
        }

        .rx-mark {
            background: var(--amber-wash);
            color: var(--text-primary);
            box-shadow: inset 0 -2px 0 var(--amber);
            border-radius: 3px;
            padding: 0 1px;
        }

        .rx-flags { display: flex; gap: 1.1rem; flex-wrap: wrap; }
        .rx-flags label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--text-secondary); cursor: pointer; }

        /* JWT decoder */
        .jwt-pre {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.75rem 0.9rem;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            color: var(--text-primary);
            white-space: pre-wrap;
            word-break: break-word;
            margin: 0;
            max-height: 220px;
            overflow-y: auto;
        }

        /* Markdown preview */
        .md-preview {
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.9rem 1.1rem;
            min-height: 300px;
            max-height: 440px;
            overflow-y: auto;
            font-size: 0.92rem;
            line-height: 1.6;
            color: var(--text-primary);
        }

        .md-preview h1, .md-preview h2, .md-preview h3 { margin: 0.8em 0 0.4em; line-height: 1.25; }
        .md-preview h1:first-child, .md-preview h2:first-child { margin-top: 0; }
        .md-preview p, .md-preview ul, .md-preview ol, .md-preview blockquote, .md-preview pre { margin: 0 0 0.8em; }
        .md-preview ul, .md-preview ol { padding-left: 1.4em; }
        .md-preview code { font-family: var(--font-mono); font-size: 0.82em; background: var(--surface-3); border-radius: 4px; padding: 0.1em 0.3em; }
        .md-preview pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.7em 0.9em; overflow-x: auto; }
        .md-preview pre code { background: none; padding: 0; }
        .md-preview blockquote { border-left: 3px solid var(--amber); padding-left: 0.9em; color: var(--text-secondary); }
        .md-preview a { color: var(--accent-text); text-decoration: underline; }
        .md-preview img { max-width: 100%; }
        .md-preview table { border-collapse: collapse; margin-bottom: 0.8em; }
        .md-preview th, .md-preview td { border: 1px solid var(--border-strong); padding: 0.3em 0.7em; }

        /* Chmod calculator */
        .chmod-grid {
            display: grid;
            grid-template-columns: 70px repeat(3, 1fr);
            gap: 0.6rem 0.5rem;
            align-items: center;
            justify-items: center;
        }

        .chmod-grid input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
        .chmod-head { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
        .chmod-who { font-size: 0.88rem; color: var(--text-secondary); justify-self: start; }

        /* Signature pad (paper-white on purpose: the signature is drawn in ink) */
        .sg-pad {
            width: 100%;
            height: 180px;
            background: #FFFFFF;
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-md);
            cursor: crosshair;
            touch-action: none;
            display: block;
        }

        /* ---- Responsive ---- */
        @media (max-width: 1080px) {
            .container, .app-bar-inner { padding: 0 1.5rem; }
            .filter-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .app-search { min-width: 0; }
            .app-search span { display: none; }
            .app-search kbd { display: none; }
            .app-search { width: 38px; padding: 0; justify-content: center; }
        }

        @media (max-width: 900px) {
            .hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
            .bench-hero { padding-top: 2rem; }
            .features-grid { grid-template-columns: 1fr; }
            .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

            /* Category tiles become one swipeable row */
            .filter-tabs {
                display: flex;
                overflow-x: auto;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
                padding: 2px 2px 0.4rem;
                margin: 0 -2px;
                scroll-snap-type: x proximity;
            }

            .filter-tabs::-webkit-scrollbar { display: none; }
            .filter-tab { flex: 0 0 auto; min-height: 44px; padding: 0.35rem 0.75rem 0.35rem 0.4rem; scroll-snap-align: start; }
            .filter-tab .ft-ic { width: 30px; height: 30px; }
            .filter-tab .ft-label { overflow: visible; }

            /* App bar: nav collapses into the menu */
            .app-nav > a { display: none; }
            .menu-panel .menu-only-mobile { display: flex; }
        }

        @media (max-width: 780px) {
            .split-grid { grid-template-columns: 1fr; }
            .compare-stats { grid-template-columns: 1fr; }
            .modal-overlay { padding: 1rem; }
        }

        @media (max-width: 340px) {
            .nav-menu > summary .nav-menu-label { display: none; }
        }

        @media (max-width: 640px) {
            .container, .app-bar-inner { padding: 0 1rem; }
            .app-bar-inner { gap: 0.5rem; }
            .app-nav { margin-left: 0; }
            .nav-menu > summary { padding: 0.45rem 0.55rem; }
            .menu-panel { position: fixed; top: calc(var(--appbar-h) + 6px); left: 0.75rem; right: 0.75rem; min-width: 0; max-height: calc(100vh - var(--appbar-h) - 24px); overflow-y: auto; }
            .brand-word { font-size: 1.05rem; }

            .bench-hero h1 { font-size: 1.75rem; }
            .bench-hero .lede { font-size: 0.98rem; margin-bottom: 1.1rem; }
            .cmd-field input { height: 52px; font-size: 1rem; padding-left: 2.9rem; }
            .search-kbd { display: none; }
            .cmd-foot .cmd-keys { display: none; }

            /* Compact list rows on phones: icon left, two-line description */
            .tools-grid { grid-template-columns: 1fr; gap: 0.55rem; }
            .tool-card { min-height: 0; padding: 0.8rem 2.9rem 0.75rem 4.05rem; }
            .tool-card:hover { transform: none; }
            .tool-header { position: absolute; left: 0.8rem; top: 0.85rem; margin: 0; padding: 0; }
            .tool-icon { width: 36px; height: 36px; }
            .tool-tag, .tool-arrow { display: none; }
            .tool-card h3 { font-size: 1rem; margin-bottom: 0.15rem; }
            .tool-card p { font-size: 0.84rem; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
            .fav-btn { top: 0.45rem; right: 0.4rem; }
            .hero-links a:last-child { display: none; }

            .cron-expr { font-size: 1.05rem; letter-spacing: 0.06em; }
            .hash-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
            .hash-algo { flex: none; }

            .cta-box { padding: 1.4rem; flex-direction: column; align-items: flex-start; }

            /* The workspace sheet rises from the bottom on phones */
            .modal-overlay { padding: 0; align-items: flex-end; }
            .modal, .modal.modal-wide, .modal.modal-md {
                max-width: 100%;
                max-height: 94vh;
                border-radius: var(--radius-lg) var(--radius-lg) 0 0;
                border-bottom: 0;
                transform: translateY(24px);
            }
            .modal-body { padding: 1.1rem; }
            .action-buttons .btn { flex: 1 1 calc(50% - 0.3rem); }
        }

        @media (max-width: 560px) {
            .gpa-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 36px; margin-bottom: 0.9rem; }
            .gpa-row > :first-child { grid-column: 1 / -1; }
        }