:root {
      --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
      --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

      --ruby: #b0161a;
      --ruby-bright: #d21f24;
      --ruby-deep: #7d0f13;
    }

    :root[data-theme="light"] {
      color-scheme: light;
      --canvas: #f7f0e9;
      --canvas-2: #f1e7dd;
      --surface: #fffaf5;
      --surface-2: #fbf3ea;
      --ink: #241211;
      --ink-2: #4c3a34;
      --muted: #7a625a;
      --faint: #a68d82;
      --line: rgb(52 26 22 / 11%);
      --line-2: rgb(52 26 22 / 18%);
      --hairline: rgb(52 26 22 / 7%);
      --code-bg: #241514;
      --code-ink: #f4e9e2;
      --glow-1: rgb(210 31 36 / 12%);
      --glow-2: rgb(184 120 30 / 14%);
      --strata: rgb(125 15 19 / 3.2%);
      --grain-opacity: 0.4;
      --shadow-card: 0 1px 0 rgb(255 255 255 / 60%) inset, 0 14px 32px -18px rgb(52 26 22 / 30%);
      --shadow-panel: 0 40px 90px -40px rgb(52 26 22 / 55%);
      --emblem-lite: #ff6a5f;
    }

    :root[data-theme="dark"] {
      color-scheme: dark;
      --canvas: #150d0e;
      --canvas-2: #1a1012;
      --surface: #1f1416;
      --surface-2: #261a1c;
      --ink: #f6ece7;
      --ink-2: #d8c6bf;
      --muted: #b09a92;
      --faint: #8a736c;
      --line: rgb(255 236 228 / 12%);
      --line-2: rgb(255 236 228 / 20%);
      --hairline: rgb(255 236 228 / 8%);
      --code-bg: #0e0708;
      --code-ink: #f4e9e2;
      --glow-1: rgb(210 31 36 / 20%);
      --glow-2: rgb(224 150 60 / 12%);
      --strata: rgb(255 120 110 / 3.4%);
      --grain-opacity: 0.5;
      --shadow-card: 0 1px 0 rgb(255 255 255 / 5%) inset, 0 20px 44px -22px rgb(0 0 0 / 70%);
      --shadow-panel: 0 50px 120px -40px rgb(0 0 0 / 80%);
      --emblem-lite: #ff8a80;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      scroll-padding-top: 128px;
      overflow-x: clip;
    }

    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.62;
      font-feature-settings: "ss01";
      background: var(--canvas);
      background-image:
        radial-gradient(60rem 40rem at 82% -8%, var(--glow-1), transparent 60%),
        radial-gradient(50rem 34rem at 2% 4%, var(--glow-2), transparent 55%),
        repeating-linear-gradient(0deg, transparent 0 78px, var(--strata) 78px 79px);
      background-attachment: fixed;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: var(--grain-opacity);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
      mix-blend-mode: soft-light;
    }

    .page { position: relative; z-index: 1; isolation: isolate; }

    .container { width: min(100% - 40px, 1220px); margin-inline: auto; }

    a { color: var(--ruby); text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
    :root[data-theme="dark"] a { color: var(--emblem-lite); }
    a:hover { color: var(--ruby-bright); }

    code, pre, .mono { font-family: var(--font-mono); }

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

    /* ---------- Hero ---------- */
    .hero { position: relative; overflow: hidden; padding: 26px 0 54px; border-bottom: 1px solid var(--line); }
    .hero::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
      background: linear-gradient(90deg, var(--ruby-deep), var(--ruby-bright) 22%, #c98a1f 48%, #2f8f6a 70%, #2b6f9a 88%, var(--ruby));
      opacity: 0.9;
    }

    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 46px; }

    .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
    .brand .emblem { width: 34px; height: 34px; flex: 0 0 auto; filter: drop-shadow(0 6px 14px rgb(176 22 26 / 34%)); }
    .brand-word { display: grid; gap: 4px; }
    .brand-word b { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; line-height: 1.05; letter-spacing: -0.01em; }
    .brand-word span { font-family: var(--font-mono); font-size: 0.68rem; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

    .topbar-actions { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .pill {
      display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
      border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklab, var(--surface) 70%, transparent);
      color: var(--muted); font-size: 0.82rem; font-family: var(--font-mono); text-decoration: none; white-space: nowrap;
      backdrop-filter: blur(8px); transition: border-color 0.18s, color 0.18s, transform 0.18s, scale 0.1s ease;
    }
    .pill:hover { border-color: var(--line-2); color: var(--ink); }
    a.pill:hover { transform: translateY(-1px); }
    .pill:active { scale: 0.96; }
    .pill.icon-only { width: 38px; padding: 0; justify-content: center; }
    .pill.icon-only svg { display: block; }
    .theme-toggle { cursor: pointer; }
    .pill .short { display: none; }
    .theme-toggle .t-dark { display: none; }
    :root[data-theme="dark"] .theme-toggle .t-dark { display: inline; }
    :root[data-theme="dark"] .theme-toggle .t-light { display: none; }

    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(330px, 0.9fr); gap: 40px; align-items: center; }
    .hero-copy { min-width: 0; }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
      font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ruby);
    }
    :root[data-theme="dark"] .eyebrow { color: var(--emblem-lite); }
    .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; }

    h1 {
      margin: 0; font-family: var(--font-display); font-optical-sizing: auto;
      font-weight: 600; font-size: clamp(3rem, 8.2vw, 6.4rem); line-height: 0.92; letter-spacing: -0.028em;
      text-wrap: balance;
    }
    h1 .accent {
      font-style: italic; font-weight: 500;
      background: linear-gradient(96deg, var(--ruby-bright), var(--ruby-deep) 62%, #b5651d);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    :root[data-theme="dark"] h1 .accent { background: linear-gradient(96deg, #ff8a80, var(--ruby-bright) 55%, #e0a03c); -webkit-background-clip: text; background-clip: text; }

    .lede { max-width: 54ch; margin: 26px 0 0; color: var(--ink-2); font-size: 1.12rem; line-height: 1.62; text-wrap: pretty; }
    .lede cite { font-style: italic; font-family: var(--font-display); color: var(--ink); }

    .hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
    .hero-meta span {
      display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 13px;
      border: 1px solid var(--line); border-radius: 8px; background: color-mix(in oklab, var(--surface) 55%, transparent);
      font-size: 0.83rem; color: var(--muted);
    }
    .hero-meta b { color: var(--ink); font-weight: 600; }

    /* ---------- Inspector panel ---------- */
    .inspector {
      min-width: 0; border-radius: 16px; overflow: hidden;
      background: linear-gradient(180deg, #2a1a19, var(--code-bg)); color: var(--code-ink);
      border: 1px solid rgb(255 255 255 / 8%); box-shadow: var(--shadow-panel);
    }
    .insp-bar { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid rgb(255 255 255 / 8%); background: rgb(0 0 0 / 18%); }
    .dots { display: inline-flex; gap: 6px; }
    .dots i { width: 11px; height: 11px; border-radius: 50%; background: #e05a52; }
    .dots i:nth-child(2) { background: #e0a63c; }
    .dots i:nth-child(3) { background: #4fae7d; }
    .insp-bar b { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; color: rgb(244 233 226 / 66%); margin-left: 4px; letter-spacing: 0.02em; }
    .insp-body { padding: 18px; }
    .insp-cmd { font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.8; color: rgb(244 233 226 / 92%); min-height: 1.8em; word-break: break-word; }
    .insp-cmd .prompt { color: #ff8a80; }
    .insp-cmd .cursor { display: inline-block; width: 8px; height: 1.05em; translate: 0 0.16em; background: #ff8a80; margin-left: 2px; animation: blink 1.1s step-end infinite; }
    @keyframes blink { 50% { opacity: 0; } }

    .insp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px; border-radius: 12px; overflow: hidden; background: rgb(255 255 255 / 8%); }
    .insp-stats div { padding: 15px 16px; background: rgb(255 255 255 / 4%); }
    .insp-stats b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 2.1rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
    .insp-stats span { display: block; margin-top: 7px; font-size: 0.76rem; letter-spacing: 0.02em; color: rgb(244 233 226 / 60%); }
    .insp-foot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 8%); font-size: 0.76rem; line-height: 1.6; text-wrap: pretty; color: rgb(244 233 226 / 62%); }
    .insp-foot b { color: #fff; font-weight: 600; }

    /* ---------- Toolbar ---------- */
    .toolbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--canvas) 82%, transparent); backdrop-filter: blur(16px) saturate(1.1); }
    .toolbar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 13px 0; }

    .search-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 0 14px; height: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); transition: border-color 0.18s, box-shadow 0.18s; }
    .search-wrap:focus-within { border-color: var(--ruby); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ruby) 18%, transparent); }
    .search-wrap .icon { color: var(--ruby); display: inline-flex; }
    :root[data-theme="dark"] .search-wrap .icon { color: var(--emblem-lite); }
    .search { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.98rem; outline: none; }
    .search::placeholder { color: var(--faint); }
    kbd { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; }

    .segmented { display: inline-flex; padding: 4px; gap: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); }
    .segmented button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.83rem; font-weight: 500; padding: 7px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: color 0.15s, background 0.15s; }
    .segmented button:hover { color: var(--ink); }
    .segmented button[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
    :root[data-theme="dark"] .segmented button[aria-pressed="true"] { background: var(--ruby); color: #fff; }

    .result-count { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); white-space: nowrap; padding: 0 4px; }
    .result-count b { color: var(--ink); }

    .chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 13px; scrollbar-width: thin; scroll-snap-type: x proximity; }
    .chip { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 0.82rem; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s; }
    .chip:hover { border-color: var(--line-2); color: var(--ink); }
    .chip .dot { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--chip-accent, var(--ruby)); }
    .chip[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in oklab, var(--chip-accent, var(--ruby)) 55%, var(--line)); background: color-mix(in oklab, var(--chip-accent, var(--ruby)) 12%, var(--surface)); font-weight: 500; }

    /* ---------- Main ---------- */
    main { padding: 40px 0 30px; }

    .scope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.5fr); gap: 26px; align-items: center; padding: 22px 24px; margin-bottom: 40px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in oklab, var(--surface) 62%, transparent); }
    .scope h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.34rem; letter-spacing: -0.01em; }
    .scope p { margin: 0; color: var(--muted); font-size: 0.95rem; max-width: 70ch; }
    .scope-key { display: grid; gap: 8px; }
    .scope-key div { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--muted); }
    .scope-key .k-star { color: var(--ruby); font-size: 0.8rem; }
    :root[data-theme="dark"] .scope-key .k-star { color: var(--emblem-lite); }
    .scope-key b { color: var(--ink); font-weight: 600; }

    /* ---------- Layer section ---------- */
    .layer { margin-bottom: 52px; scroll-margin-top: 128px; }
    .layer-head { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); position: relative; }
    .layer-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 68px; height: 2px; background: var(--accent); }
    .layer-index { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); font-weight: 600; padding-bottom: 5px; }
    .layer-titles { flex: 1 1 auto; min-width: 0; }
    .layer-titles h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.015em; line-height: 1.05; }
    .layer-titles p { margin: 5px 0 0; color: var(--muted); font-size: 0.94rem; }
    .layer-count { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); padding-bottom: 5px; }
    .layer-count b { color: var(--accent); }

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

    /* ---------- Card ---------- */
    .card {
      --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));
      --accent-text: var(--accent);
      position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px;
      min-width: 0; padding: 20px 20px 16px; border: 1px solid var(--line); border-radius: 15px;
      background: var(--surface); box-shadow: var(--shadow-card);
      transition: transform 0.28s cubic-bezier(.2,.7,.2,1), box-shadow 0.28s, border-color 0.28s;
    }
    :root[data-theme="dark"] .card { --accent-soft: color-mix(in oklab, var(--accent) 24%, var(--surface)); --accent-text: color-mix(in oklab, var(--accent) 55%, #fff); }
    .card::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: 0.85; }
    .card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); box-shadow: 0 22px 46px -24px color-mix(in oklab, var(--accent) 55%, transparent); }
    .card > * { min-width: 0; max-width: 100%; }

    .card.reveal { opacity: 0; transform: translateY(14px); }
    .card.reveal.in { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,.7,.2,1); }

    .c-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .badges { display: inline-flex; gap: 7px; flex-wrap: wrap; }
    .badge { display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 9px; border-radius: 7px; font-size: 0.73rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
    .badge-kind { background: var(--accent-soft); color: var(--accent-text); }
    .badge-kind.callout::before { content: "✦"; font-size: 0.72rem; }
    .badge-area { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--muted); }
    .c-ref { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); white-space: nowrap; }
    .c-ref .pg { color: var(--accent-text); }

    .c-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .c-facet { width: 26px; height: 26px; flex: 0 0 auto; }
    .c-title h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.34rem; letter-spacing: -0.01em; line-height: 1.1; overflow-wrap: anywhere; }

    .c-desc { margin: 0; color: var(--ink-2); font-size: 0.94rem; line-height: 1.6; text-wrap: pretty; }

    .c-code { min-width: 0; border-radius: 11px; overflow: hidden; background: var(--code-bg); border: 1px solid rgb(255 255 255 / 6%); }
    .c-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 8px 11px; border-bottom: 1px solid rgb(255 255 255 / 7%); }
    .c-code-head .ch-gem { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 0.74rem; color: rgb(244 233 226 / 62%); }
    .copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgb(255 255 255 / 12%); background: rgb(255 255 255 / 6%); color: rgb(244 233 226 / 88%); font-family: var(--font-mono); font-size: 0.72rem; padding: 4px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
    .copy:hover { background: rgb(255 255 255 / 12%); color: #fff; }
    .copy[data-copied="true"] { background: rgb(79 174 125 / 22%); border-color: rgb(79 174 125 / 45%); color: #9be7bc; }
    pre { margin: 0; padding: 13px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.795rem; line-height: 1.66; color: var(--code-ink); tab-size: 2; scrollbar-width: thin; overscroll-behavior-x: contain; }
    pre code { white-space: pre; }
    .c-com { color: #9a8c86; font-style: italic; }
    .c-str { color: #f0a58f; }
    .c-sym { color: #d7b45f; }
    .c-ivar { color: #86c6d9; }
    .c-kw { color: #ff8a80; font-weight: 500; }
    .c-const { color: #f2c66d; }
    .c-num { color: #c1a3e6; }
    .c-fn { color: #a7cf9a; }

    .c-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding-top: 4px; }
    .c-foot a { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); text-decoration: none; overflow: hidden; white-space: nowrap; }
    .c-foot a .host { overflow: hidden; text-overflow: ellipsis; }
    .c-foot a:hover { color: var(--accent-text); }
    .c-foot a svg { flex: 0 0 auto; opacity: 0.7; }
    .c-inst { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent-text); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; }

    .empty { display: none; padding: 48px 24px; margin-top: 8px; text-align: center; border: 1px dashed var(--line-2); border-radius: 14px; color: var(--muted); background: color-mix(in oklab, var(--surface) 50%, transparent); }
    .empty.show { display: block; }
    .empty b { color: var(--ink); font-family: var(--font-display); }

    /* ---------- Footer ---------- */
    footer.site { border-top: 1px solid var(--line); padding: 34px 0 46px; margin-top: 20px; background: color-mix(in oklab, var(--surface) 40%, transparent); }
    .foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: start; }
    .foot-grid p { margin: 0 0 8px; color: var(--muted); font-size: 0.88rem; max-width: 58ch; }
    .foot-grid b { color: var(--ink); }
    .foot-agents { font-family: var(--font-mono); font-size: 0.8rem; }
    .foot-agents a { white-space: nowrap; }
    .foot-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 12px; color: var(--ink); }
    .foot-legend { display: grid; gap: 9px; }
    .foot-legend div { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted); }
    .foot-legend .dot { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); }

    /* ---------- Polish: micro-interactions ---------- */
    /* Tabular figures so counters never shift width as they change. */
    .result-count, .layer-count, .hero-meta b, .c-ref, .c-inst, .insp-cmd { font-variant-numeric: tabular-nums; }

    /* Tactile scale-on-press (0.96) on interactive controls. */
    .chip, .segmented button, .copy { transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, scale 0.1s ease; }
    .chip:active, .segmented button:active, .copy:active, .theme-toggle:active { scale: 0.96; }
    .chip:hover { transform: translateY(-1px); }

    /* Copy: clipboard → check with a soft pop on success. */
    .copy .copy-ico { display: inline-flex; }
    .copy .copy-ico svg { display: block; }
    .copy[data-copied="true"] { border-color: rgb(79 174 125 / 45%); background: rgb(79 174 125 / 20%); color: #9be7bc; }
    .copy[data-copied="true"] .copy-ico { animation: icoPop 0.34s cubic-bezier(0.34, 1.35, 0.64, 1); }
    @keyframes icoPop { 0% { scale: 0.25; opacity: 0; filter: blur(4px); } 100% { scale: 1; opacity: 1; filter: blur(0); } }

    /* Result count gets a quick pop when the number changes. */
    .result-count.bump b { animation: countPop 0.32s cubic-bezier(0.34, 1.35, 0.64, 1); display: inline-block; }
    @keyframes countPop { 0% { scale: 0.7; opacity: 0.3; filter: blur(1.5px); } 100% { scale: 1; opacity: 1; filter: blur(0); } }

    /* One-time staggered hero entrance. */
    @keyframes heroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .hero-copy > *, .inspector { animation: heroIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .eyebrow { animation-delay: 0.03s; }
    h1 { animation-delay: 0.1s; }
    .lede { animation-delay: 0.18s; }
    .hero-meta { animation-delay: 0.25s; }
    .inspector { animation-delay: 0.15s; }

    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 1fr; gap: 32px; }
      .inspector { max-width: 560px; }
      .scope { grid-template-columns: 1fr; }
      .toolbar-row { grid-template-columns: 1fr; }
      .toolbar-row .result-count { display: none; }
      .foot-grid { grid-template-columns: 1fr; }
      html { scroll-padding-top: 96px; }
      .layer, .layer-head { scroll-margin-top: 96px; }
    }
    @media (max-width: 560px) {
      .container { width: min(100% - 28px, 1220px); }
      .topbar { gap: 10px; padding-bottom: 32px; }
      .topbar-actions { gap: 8px; }
      .topbar-actions .pill { height: 36px; padding: 0 12px; font-size: 0.78rem; }
      .topbar-actions .pill.icon-only { width: 36px; padding: 0; }
      .pill .full { display: none; }
      .pill .short { display: inline; }
      .brand { min-width: 0; flex: 0 1 auto; }
      .brand-word b { font-size: 1rem; }
      .brand-word span { display: none; }
      .insp-stats { grid-template-columns: 1fr 1fr; }
      .insp-stats b { font-size: 1.8rem; }
      .hero { padding-bottom: 40px; }
      .hero-meta span { font-size: 0.78rem; padding: 6px 11px; }
      .segmented { width: 100%; }
      .segmented button { flex: 1; text-align: center; padding: 8px 6px; }
      .scope { padding: 18px; }
      .grid { grid-template-columns: 1fr; gap: 16px; }
      .card { padding: 16px 16px 14px; border-radius: 13px; }
      .card > .c-title h3 { font-size: 1.22rem; }
      pre { font-size: 0.75rem; padding: 12px; }
    }
    @media (max-width: 380px) {
      h1 { font-size: 2.7rem; }
      .badge { font-size: 0.7rem; }
      .c-title h3 { font-size: 1.16rem; }
      .theme-toggle .lbl { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { scroll-behavior: auto; }
      .card.reveal { opacity: 1 !important; transform: none !important; }
      .insp-cmd .cursor { animation: none; }
      .hero-copy > *, .inspector { animation: none !important; opacity: 1 !important; transform: none !important; }
      .copy[data-copied="true"] .copy-ico, .result-count.bump b { animation: none !important; }
      .chip:hover, a.pill:hover { transform: none; }
    }