:root{--bt-focus-offset:2px;--bt-focus-width:2px;--bt-font-code:'Space Mono';--bt-font-mono:'Space Mono';--bt-font-mono-fallback:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--bt-font-sans:'Space Grotesk Variable';--bt-font-sans-fallback:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--bt-layout-code-max-height:480px;--bt-layout-container:960px;--bt-layout-gutter:24px;--bt-layout-label-column:160px;--bt-layout-nav-height:64px;--bt-layout-prose:700px;--bt-layout-scrubber-min:160px;--bt-layout-search:260px;--bt-layout-tabmenu-max-height:44vh;--bt-layout-tabstrip-row-min:2.325em;--bt-measure-narrow:44ch;--bt-measure-prose:68ch;--bt-measure-title:22ch;--bt-motion-base:180ms;--bt-motion-ease:cubic-bezier(.2,0,.2,1);--bt-motion-fast:120ms;--bt-motion-slow:320ms;--bt-numeric-features:tabular-nums lining-nums;--bt-opacity-not-run:0.82;--bt-radius-full:100px;--bt-radius-lg:12px;--bt-radius-md:8px;--bt-radius-sm:6px;--bt-radius-xl:16px;--bt-radius-xs:4px;--bt-rhythm-group:48px;--bt-rhythm-section:100px;--bt-rhythm-stack:24px;--bt-space-2xl:48px;--bt-space-2xs:4px;--bt-space-3xl:60px;--bt-space-3xs:2px;--bt-space-4xl:100px;--bt-space-lg:24px;--bt-space-md:16px;--bt-space-sm:12px;--bt-space-xl:32px;--bt-space-xs:8px;--bt-stroke-hairline:1px;--bt-stroke-thick:2px;--bt-type-body-line:1.6;--bt-type-body-size:16px;--bt-type-body-sm-line:1.55;--bt-type-body-sm-size:14px;--bt-type-body-sm-weight:400;--bt-type-body-weight:400;--bt-type-caption-line:1.45;--bt-type-caption-size:12px;--bt-type-caption-weight:400;--bt-type-code-line:1.65;--bt-type-code-size:14px;--bt-type-code-weight:400;--bt-type-display-line:1.1;--bt-type-display-size:40px;--bt-type-display-tracking:-0.022em;--bt-type-display-weight:700;--bt-type-eyebrow-line:1.3;--bt-type-eyebrow-size:12px;--bt-type-eyebrow-tracking:0.14em;--bt-type-eyebrow-weight:700;--bt-type-h1-line:1.15;--bt-type-h1-size:32px;--bt-type-h1-tracking:-0.02em;--bt-type-h1-weight:700;--bt-type-h2-line:1.25;--bt-type-h2-size:24px;--bt-type-h2-tracking:-0.015em;--bt-type-h2-weight:700;--bt-type-h3-line:1.3;--bt-type-h3-size:20px;--bt-type-h3-tracking:-0.01em;--bt-type-h3-weight:700;--bt-type-identifier-lead-line:1.4;--bt-type-identifier-lead-size:16px;--bt-type-identifier-lead-tracking:-0.015em;--bt-type-identifier-lead-weight:400;--bt-type-identifier-line:1.5;--bt-type-identifier-size:14px;--bt-type-identifier-tracking:-0.01em;--bt-type-identifier-weight:400;--bt-type-label-line:1.4;--bt-type-label-size:12px;--bt-type-label-tracking:0.06em;--bt-type-label-weight:500;--bt-type-numeric-line:1.5;--bt-type-numeric-size:14px;--bt-type-numeric-weight:400;--bt-density-body-size:16px;--bt-density-card-pad:32px;--bt-density-cell-x:24px;--bt-density-cell-y:6px;--bt-density-control-x:24px;--bt-density-control-y:12px;--bt-density-data-size:14px;--bt-density-line:1.6;--bt-accent-default:#4f46e5;--bt-accent-subtle:#6366f1;--bt-action-bg:#4f46e5;--bt-action-bg-active:#3730a3;--bt-action-bg-hover:#4338ca;--bt-action-disabled-bg:#dddddd;--bt-action-disabled-border:#c8c8c8;--bt-action-disabled-fg:#565656;--bt-action-fg:#ffffff;--bt-action-ghost-bg:#ffffff;--bt-action-ghost-bg-active:#dddddd;--bt-action-ghost-bg-hover:#f3f3f3;--bt-action-ghost-border:#a2a2a2;--bt-action-ghost-border-hover:#4f46e5;--bt-action-ghost-fg:#101010;--bt-border-accent:#4f46e5;--bt-border-default:#a2a2a2;--bt-border-strong:#818181;--bt-border-subtle:#c8c8c8;--bt-elevation-overlay:0 8px 28px rgba(16,16,16,.14);--bt-elevation-raised:0 1px 2px rgba(16,16,16,.06), 0 2px 8px rgba(16,16,16,.05);--bt-focus-ring:#3b82f6;--bt-mark-changed:#854d0e;--bt-mark-executable:#0e7490;--bt-mark-not-taken:#484848;--bt-mark-position:#164e63;--bt-mark-position-surface:#a5f3fc;--bt-mark-track:#919191;--bt-mark-track-elapsed:#155e75;--bt-mark-view:#101010;--bt-status-danger-bg:#fee2e2;--bt-status-danger-border:#dc2626;--bt-status-danger-fg:#991b1b;--bt-status-info-bg:#dbeafe;--bt-status-info-border:#2563eb;--bt-status-info-fg:#1e40af;--bt-status-neutral-bg:#f3f3f3;--bt-status-neutral-border:#c8c8c8;--bt-status-neutral-fg:#565656;--bt-status-success-bg:#dcfce7;--bt-status-success-border:#16a34a;--bt-status-success-fg:#166534;--bt-status-warning-bg:#ffedd5;--bt-status-warning-border:#ea580c;--bt-status-warning-fg:#9a3412;--bt-surface-canvas:#ececeb;--bt-surface-code:#ececeb;--bt-surface-hover:#f3f3f3;--bt-surface-overlay:#ffffff;--bt-surface-raised:#ffffff;--bt-surface-selected:#e0e7ff;--bt-surface-sunken:#dddddd;--bt-syntax-comment:#166534;--bt-syntax-function:#713f12;--bt-syntax-keyword:#1d4ed8;--bt-syntax-number:#6d28d9;--bt-syntax-plain:#242424;--bt-syntax-punctuation:#484848;--bt-syntax-string:#9a3412;--bt-syntax-type:#155e75;--bt-text-code:#242424;--bt-text-default:#242424;--bt-text-disabled:#727272;--bt-text-link:#4f46e5;--bt-text-link-hover:#4338ca;--bt-text-muted:#484848;--bt-text-on-accent:#ffffff;--bt-text-strong:#101010;--bt-text-subtle:#565656;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bt-accent-default:#818cf8;--bt-accent-subtle:#a5b4fc;--bt-action-bg:#4f46e5;--bt-action-bg-active:#818cf8;--bt-action-bg-hover:#6366f1;--bt-action-disabled-bg:#202020;--bt-action-disabled-border:#282828;--bt-action-disabled-fg:#919191;--bt-action-fg:#ffffff;--bt-action-ghost-bg:#1b1b1b;--bt-action-ghost-bg-active:#242424;--bt-action-ghost-bg-hover:#202020;--bt-action-ghost-border:#565656;--bt-action-ghost-border-hover:#6366f1;--bt-action-ghost-fg:#f3f3f3;--bt-border-accent:#6366f1;--bt-border-default:#565656;--bt-border-strong:#727272;--bt-border-subtle:#282828;--bt-elevation-overlay:0 10px 30px rgba(0,0,0,.62);--bt-elevation-raised:0 1px 2px rgba(0,0,0,.55);--bt-focus-ring:#60a5fa;--bt-mark-changed:#fcd34d;--bt-mark-executable:#06b6d4;--bt-mark-not-taken:#919191;--bt-mark-position:#67e8f9;--bt-mark-position-surface:#334155;--bt-mark-track:#727272;--bt-mark-track-elapsed:#22d3ee;--bt-mark-view:#f3f3f3;--bt-status-danger-bg:#202020;--bt-status-danger-border:#dc2626;--bt-status-danger-fg:#f87171;--bt-status-info-bg:#202020;--bt-status-info-border:#2563eb;--bt-status-info-fg:#60a5fa;--bt-status-neutral-bg:#202020;--bt-status-neutral-border:#3a3a3a;--bt-status-neutral-fg:#919191;--bt-status-success-bg:#202020;--bt-status-success-border:#16a34a;--bt-status-success-fg:#4ade80;--bt-status-warning-bg:#202020;--bt-status-warning-border:#ea580c;--bt-status-warning-fg:#fb923c;--bt-surface-canvas:#000000;--bt-surface-code:#000000;--bt-surface-hover:#333333;--bt-surface-overlay:#202020;--bt-surface-raised:#1b1b1b;--bt-surface-selected:#312e81;--bt-surface-sunken:#282828;--bt-syntax-comment:#22c55e;--bt-syntax-function:#fbbf24;--bt-syntax-keyword:#93c5fd;--bt-syntax-number:#c4b5fd;--bt-syntax-plain:#f3f3f3;--bt-syntax-punctuation:#c8c8c8;--bt-syntax-string:#fdba74;--bt-syntax-type:#67e8f9;--bt-text-code:#dddddd;--bt-text-default:#dddddd;--bt-text-disabled:#727272;--bt-text-link:#818cf8;--bt-text-link-hover:#a5b4fc;--bt-text-muted:#a2a2a2;--bt-text-on-accent:#ffffff;--bt-text-strong:#f3f3f3;--bt-text-subtle:#919191;}}
[data-theme="light"]{--bt-accent-default:#4f46e5;--bt-accent-subtle:#6366f1;--bt-action-bg:#4f46e5;--bt-action-bg-active:#3730a3;--bt-action-bg-hover:#4338ca;--bt-action-disabled-bg:#dddddd;--bt-action-disabled-border:#c8c8c8;--bt-action-disabled-fg:#565656;--bt-action-fg:#ffffff;--bt-action-ghost-bg:#ffffff;--bt-action-ghost-bg-active:#dddddd;--bt-action-ghost-bg-hover:#f3f3f3;--bt-action-ghost-border:#a2a2a2;--bt-action-ghost-border-hover:#4f46e5;--bt-action-ghost-fg:#101010;--bt-border-accent:#4f46e5;--bt-border-default:#a2a2a2;--bt-border-strong:#818181;--bt-border-subtle:#c8c8c8;--bt-elevation-overlay:0 8px 28px rgba(16,16,16,.14);--bt-elevation-raised:0 1px 2px rgba(16,16,16,.06), 0 2px 8px rgba(16,16,16,.05);--bt-focus-ring:#3b82f6;--bt-mark-changed:#854d0e;--bt-mark-executable:#0e7490;--bt-mark-not-taken:#484848;--bt-mark-position:#164e63;--bt-mark-position-surface:#a5f3fc;--bt-mark-track:#919191;--bt-mark-track-elapsed:#155e75;--bt-mark-view:#101010;--bt-status-danger-bg:#fee2e2;--bt-status-danger-border:#dc2626;--bt-status-danger-fg:#991b1b;--bt-status-info-bg:#dbeafe;--bt-status-info-border:#2563eb;--bt-status-info-fg:#1e40af;--bt-status-neutral-bg:#f3f3f3;--bt-status-neutral-border:#c8c8c8;--bt-status-neutral-fg:#565656;--bt-status-success-bg:#dcfce7;--bt-status-success-border:#16a34a;--bt-status-success-fg:#166534;--bt-status-warning-bg:#ffedd5;--bt-status-warning-border:#ea580c;--bt-status-warning-fg:#9a3412;--bt-surface-canvas:#ececeb;--bt-surface-code:#ececeb;--bt-surface-hover:#f3f3f3;--bt-surface-overlay:#ffffff;--bt-surface-raised:#ffffff;--bt-surface-selected:#e0e7ff;--bt-surface-sunken:#dddddd;--bt-syntax-comment:#166534;--bt-syntax-function:#713f12;--bt-syntax-keyword:#1d4ed8;--bt-syntax-number:#6d28d9;--bt-syntax-plain:#242424;--bt-syntax-punctuation:#484848;--bt-syntax-string:#9a3412;--bt-syntax-type:#155e75;--bt-text-code:#242424;--bt-text-default:#242424;--bt-text-disabled:#727272;--bt-text-link:#4f46e5;--bt-text-link-hover:#4338ca;--bt-text-muted:#484848;--bt-text-on-accent:#ffffff;--bt-text-strong:#101010;--bt-text-subtle:#565656;}
[data-theme="dark"]{--bt-accent-default:#818cf8;--bt-accent-subtle:#a5b4fc;--bt-action-bg:#4f46e5;--bt-action-bg-active:#818cf8;--bt-action-bg-hover:#6366f1;--bt-action-disabled-bg:#202020;--bt-action-disabled-border:#282828;--bt-action-disabled-fg:#919191;--bt-action-fg:#ffffff;--bt-action-ghost-bg:#1b1b1b;--bt-action-ghost-bg-active:#242424;--bt-action-ghost-bg-hover:#202020;--bt-action-ghost-border:#565656;--bt-action-ghost-border-hover:#6366f1;--bt-action-ghost-fg:#f3f3f3;--bt-border-accent:#6366f1;--bt-border-default:#565656;--bt-border-strong:#727272;--bt-border-subtle:#282828;--bt-elevation-overlay:0 10px 30px rgba(0,0,0,.62);--bt-elevation-raised:0 1px 2px rgba(0,0,0,.55);--bt-focus-ring:#60a5fa;--bt-mark-changed:#fcd34d;--bt-mark-executable:#06b6d4;--bt-mark-not-taken:#919191;--bt-mark-position:#67e8f9;--bt-mark-position-surface:#334155;--bt-mark-track:#727272;--bt-mark-track-elapsed:#22d3ee;--bt-mark-view:#f3f3f3;--bt-status-danger-bg:#202020;--bt-status-danger-border:#dc2626;--bt-status-danger-fg:#f87171;--bt-status-info-bg:#202020;--bt-status-info-border:#2563eb;--bt-status-info-fg:#60a5fa;--bt-status-neutral-bg:#202020;--bt-status-neutral-border:#3a3a3a;--bt-status-neutral-fg:#919191;--bt-status-success-bg:#202020;--bt-status-success-border:#16a34a;--bt-status-success-fg:#4ade80;--bt-status-warning-bg:#202020;--bt-status-warning-border:#ea580c;--bt-status-warning-fg:#fb923c;--bt-surface-canvas:#000000;--bt-surface-code:#000000;--bt-surface-hover:#333333;--bt-surface-overlay:#202020;--bt-surface-raised:#1b1b1b;--bt-surface-selected:#312e81;--bt-surface-sunken:#282828;--bt-syntax-comment:#22c55e;--bt-syntax-function:#fbbf24;--bt-syntax-keyword:#93c5fd;--bt-syntax-number:#c4b5fd;--bt-syntax-plain:#f3f3f3;--bt-syntax-punctuation:#c8c8c8;--bt-syntax-string:#fdba74;--bt-syntax-type:#67e8f9;--bt-text-code:#dddddd;--bt-text-default:#dddddd;--bt-text-disabled:#727272;--bt-text-link:#818cf8;--bt-text-link-hover:#a5b4fc;--bt-text-muted:#a2a2a2;--bt-text-on-accent:#ffffff;--bt-text-strong:#f3f3f3;--bt-text-subtle:#919191;}
[data-register="debugger"]{--bt-density-body-size:16px;--bt-density-card-pad:12px;--bt-density-cell-x:8px;--bt-density-cell-y:4px;--bt-density-control-x:12px;--bt-density-control-y:4px;--bt-density-data-size:12px;--bt-density-line:1.35;--bt-accent-default:#818cf8;--bt-accent-subtle:#a5b4fc;--bt-action-bg:#4f46e5;--bt-action-bg-active:#818cf8;--bt-action-bg-hover:#6366f1;--bt-action-disabled-bg:#202020;--bt-action-disabled-border:#282828;--bt-action-disabled-fg:#919191;--bt-action-fg:#ffffff;--bt-action-ghost-bg:#1b1b1b;--bt-action-ghost-bg-active:#242424;--bt-action-ghost-bg-hover:#202020;--bt-action-ghost-border:#565656;--bt-action-ghost-border-hover:#6366f1;--bt-action-ghost-fg:#f3f3f3;--bt-border-accent:#6366f1;--bt-border-default:#565656;--bt-border-strong:#727272;--bt-border-subtle:#282828;--bt-elevation-overlay:0 10px 30px rgba(0,0,0,.62);--bt-elevation-raised:0 1px 2px rgba(0,0,0,.55);--bt-focus-ring:#60a5fa;--bt-mark-changed:#fcd34d;--bt-mark-executable:#06b6d4;--bt-mark-not-taken:#919191;--bt-mark-position:#67e8f9;--bt-mark-position-surface:#334155;--bt-mark-track:#727272;--bt-mark-track-elapsed:#22d3ee;--bt-mark-view:#f3f3f3;--bt-status-danger-bg:#202020;--bt-status-danger-border:#dc2626;--bt-status-danger-fg:#f87171;--bt-status-info-bg:#202020;--bt-status-info-border:#2563eb;--bt-status-info-fg:#60a5fa;--bt-status-neutral-bg:#202020;--bt-status-neutral-border:#3a3a3a;--bt-status-neutral-fg:#919191;--bt-status-success-bg:#202020;--bt-status-success-border:#16a34a;--bt-status-success-fg:#4ade80;--bt-status-warning-bg:#202020;--bt-status-warning-border:#ea580c;--bt-status-warning-fg:#fb923c;--bt-surface-canvas:#000000;--bt-surface-code:#000000;--bt-surface-hover:#333333;--bt-surface-overlay:#202020;--bt-surface-raised:#1b1b1b;--bt-surface-selected:#312e81;--bt-surface-sunken:#282828;--bt-syntax-comment:#22c55e;--bt-syntax-function:#fbbf24;--bt-syntax-keyword:#93c5fd;--bt-syntax-number:#c4b5fd;--bt-syntax-plain:#f3f3f3;--bt-syntax-punctuation:#c8c8c8;--bt-syntax-string:#fdba74;--bt-syntax-type:#67e8f9;--bt-text-code:#dddddd;--bt-text-default:#dddddd;--bt-text-disabled:#727272;--bt-text-link:#818cf8;--bt-text-link-hover:#a5b4fc;--bt-text-muted:#a2a2a2;--bt-text-on-accent:#ffffff;--bt-text-strong:#f3f3f3;--bt-text-subtle:#919191;}
[data-register="debugger"][data-theme="light"]{--bt-accent-default:#4f46e5;--bt-accent-subtle:#6366f1;--bt-action-bg:#4f46e5;--bt-action-bg-active:#3730a3;--bt-action-bg-hover:#4338ca;--bt-action-disabled-bg:#dddddd;--bt-action-disabled-border:#c8c8c8;--bt-action-disabled-fg:#565656;--bt-action-fg:#ffffff;--bt-action-ghost-bg:#ffffff;--bt-action-ghost-bg-active:#dddddd;--bt-action-ghost-bg-hover:#f3f3f3;--bt-action-ghost-border:#a2a2a2;--bt-action-ghost-border-hover:#4f46e5;--bt-action-ghost-fg:#101010;--bt-border-accent:#4f46e5;--bt-border-default:#a2a2a2;--bt-border-strong:#818181;--bt-border-subtle:#c8c8c8;--bt-elevation-overlay:0 8px 28px rgba(16,16,16,.14);--bt-elevation-raised:0 1px 2px rgba(16,16,16,.06), 0 2px 8px rgba(16,16,16,.05);--bt-focus-ring:#3b82f6;--bt-mark-changed:#854d0e;--bt-mark-executable:#0e7490;--bt-mark-not-taken:#484848;--bt-mark-position:#164e63;--bt-mark-position-surface:#a5f3fc;--bt-mark-track:#919191;--bt-mark-track-elapsed:#155e75;--bt-mark-view:#101010;--bt-status-danger-bg:#fee2e2;--bt-status-danger-border:#dc2626;--bt-status-danger-fg:#991b1b;--bt-status-info-bg:#dbeafe;--bt-status-info-border:#2563eb;--bt-status-info-fg:#1e40af;--bt-status-neutral-bg:#f3f3f3;--bt-status-neutral-border:#c8c8c8;--bt-status-neutral-fg:#565656;--bt-status-success-bg:#dcfce7;--bt-status-success-border:#16a34a;--bt-status-success-fg:#166534;--bt-status-warning-bg:#ffedd5;--bt-status-warning-border:#ea580c;--bt-status-warning-fg:#9a3412;--bt-surface-canvas:#ececeb;--bt-surface-code:#ececeb;--bt-surface-hover:#f3f3f3;--bt-surface-overlay:#ffffff;--bt-surface-raised:#ffffff;--bt-surface-selected:#e0e7ff;--bt-surface-sunken:#dddddd;--bt-syntax-comment:#166534;--bt-syntax-function:#713f12;--bt-syntax-keyword:#1d4ed8;--bt-syntax-number:#6d28d9;--bt-syntax-plain:#242424;--bt-syntax-punctuation:#484848;--bt-syntax-string:#9a3412;--bt-syntax-type:#155e75;--bt-text-code:#242424;--bt-text-default:#242424;--bt-text-disabled:#727272;--bt-text-link:#4f46e5;--bt-text-link-hover:#4338ca;--bt-text-muted:#484848;--bt-text-on-accent:#ffffff;--bt-text-strong:#101010;--bt-text-subtle:#565656;}
@font-face{font-family:'Space Grotesk Variable';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-Regular.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk Variable';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-Medium.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk Variable';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-Bold.woff2) format('woff2');}
@font-face{font-family:'Space Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/SpaceMono-Regular.ttf) format('truetype');}
/* ── reset ──────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bt-surface-canvas);color:var(--bt-text-default);font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:var(--bt-density-body-size);line-height:var(--bt-density-line)}
body{overflow-x:hidden}
/* The user agent gives <button> and <input> their own font and a ButtonFace
   background. Both are inherited here rather than left to the UA, which is
   the class of defect that made the primary action 1.04:1. */
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
img,svg{max-width:100%;display:block}
::selection{background:var(--bt-surface-selected);color:var(--bt-text-strong)}
a{color:inherit;text-decoration:none}

/* ── focus, hover, active: one treatment, both registers ────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--bt-focus-width) solid var(--bt-focus-ring);
  outline-offset:var(--bt-focus-offset)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}

/* ── type scale ─────────────────────────────────────────────────────────── */
.display{font-size:var(--bt-type-display-size);font-weight:var(--bt-type-display-weight);line-height:var(--bt-type-display-line);letter-spacing:var(--bt-type-display-tracking);color:var(--bt-text-strong);max-width:var(--bt-measure-title)}
.h1{font-size:var(--bt-type-h1-size);font-weight:var(--bt-type-h1-weight);line-height:var(--bt-type-h1-line);letter-spacing:var(--bt-type-h1-tracking);color:var(--bt-text-strong);max-width:var(--bt-measure-title)}
.h1.identifier{font-size:var(--bt-type-h1-size);line-height:var(--bt-type-h1-line);letter-spacing:var(--bt-type-h1-tracking);color:var(--bt-text-strong);max-width:none;word-break:normal}
.h2{font-size:var(--bt-type-h2-size);font-weight:var(--bt-type-h2-weight);line-height:var(--bt-type-h2-line);letter-spacing:var(--bt-type-h2-tracking);color:var(--bt-text-strong)}
.sec-title{font-size:var(--bt-type-h2-size);font-weight:var(--bt-type-h2-weight);line-height:var(--bt-type-h2-line);letter-spacing:var(--bt-type-h2-tracking);color:var(--bt-text-strong);margin-bottom:var(--bt-space-xs)}
.sec-title.next{margin-top:var(--bt-rhythm-section);border-top:var(--bt-stroke-hairline) solid var(--bt-border-default);padding-top:var(--bt-rhythm-stack)}
.sec-title.sibling{margin-top:var(--bt-rhythm-group);border-top:0;padding-top:0}
.lead{font-size:var(--bt-type-body-size);line-height:var(--bt-type-body-line);color:var(--bt-text-muted);max-width:var(--bt-measure-prose);margin-top:var(--bt-rhythm-stack)}
/* A link inside running prose has to LOOK like one. The reset at the top of
   this sheet is `a{color:inherit;text-decoration:none}`, so every context
   opts in — `.crumbs a`, `.dl dd a`, `.footlinks a`, `.footcredit a`,
   `.linklist a` — and `.lead` had no rule because no lead had ever carried a
   link. The About page's opening paragraph now links CodeTracer, and without
   this it rendered as body text: present in the markup, invisible to a
   reader, which is the same as not linking it at all.
   Identical declarations to `.dl dd a` rather than a new treatment; this is
   the site's one prose-link look, and a second one would be a second thing
   to keep in step. */
.lead a{color:var(--bt-text-link);text-decoration:underline;text-underline-offset:var(--bt-space-3xs);transition:color var(--bt-motion-fast) var(--bt-motion-ease)}
.lead a:hover{color:var(--bt-text-link-hover)}
.muted{color:var(--bt-text-muted)}
.subtle{color:var(--bt-text-subtle)}
.accent{color:var(--bt-accent-default)}
.eyebrow{font-size:var(--bt-type-eyebrow-size);font-weight:var(--bt-type-eyebrow-weight);line-height:var(--bt-type-eyebrow-line);letter-spacing:var(--bt-type-eyebrow-tracking);text-transform:uppercase;color:var(--bt-text-subtle);display:flex;align-items:center;gap:var(--bt-space-sm);margin-bottom:var(--bt-space-sm)}
.eyebrow::before{content:'';width:var(--bt-space-lg);height:var(--bt-stroke-hairline);background:var(--bt-border-strong)}

/* ── machine values: the product's actual surface area ──────────────────── */
/* Mono marks a copyable machine value and nothing else. */
code,.mono,.identifier{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);font-size:var(--bt-type-identifier-size);line-height:var(--bt-type-identifier-line);letter-spacing:var(--bt-type-identifier-tracking);font-variant-numeric:var(--bt-numeric-features)}
.identifier{color:var(--bt-text-code);word-break:break-all;display:inline-block}
.identifier.lead{font-size:var(--bt-type-identifier-lead-size);font-weight:var(--bt-type-identifier-lead-weight);line-height:var(--bt-type-identifier-lead-line);letter-spacing:var(--bt-type-identifier-lead-tracking);color:var(--bt-text-strong)}
/* Every digit that sits in a column is tabular, so heights and amounts do not
   ripple against each other (rubric A5). `.tnum` is tabular figures ALONE, for
   digits inside a heading or a sentence where the face must not change; `.num`
   and `.numeric` are the full numeric treatment for data. */
.tnum,.num,.numeric,td.num,.stat .v{font-variant-numeric:var(--bt-numeric-features)}
.num,.numeric,td.num{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);font-size:var(--bt-type-numeric-size);line-height:var(--bt-type-numeric-line)}

/* ── the explorer shell: the footer ENDS the page ───────────────────────── */
/* `pageLayout` renders nav + `main.pagebody` + `footer.foot` as three
   in-flow blocks, so on a page shorter than the viewport the footer stopped
   wherever the content did and the canvas continued below it. Measured at
   1440x1000 on `/{chain}/address/{addr}/code` for an account with no code
   binding: the strip ran 571..767 with 233px of empty canvas under it, so the
   raised surface that closes the page read as a band floating in the middle of
   one. Eleven of the published routes are shorter than a 1200px viewport.
   It is not a footer treatment — the strip is correct — it is that nothing
   made the body fill the viewport.

   `height:100%` down the chain rather than a viewport unit, for the reason
   `debugger_css.nim` gives at its own shell: `vh` is a raw length and the
   chain says the same thing.

   The scope is `:has(.foot)` and NOT the register attribute, for two reasons
   and neither is style. It is the precondition itself — "make the body fill
   the viewport so the footer is pushed to the bottom of it" is a statement
   about a page that HAS a footer, and `debugLayout` renders none, so the
   debugger's shell (already `height:100%;overflow:hidden`) cannot acquire a
   second, contradictory one however the registers are later rearranged. And
   this stylesheet is INLINED into every page, so a selector keyed on the
   explorer register would carry that attribute's own text into the bytes of
   the DEBUG page, where `test_debug_route` reads the served document to prove
   the explorer register is gone — the same "naming it puts it back in the
   served bytes" trap `debugger_css.nim` calls out at its narrow rules, which
   is why this paragraph does not spell the attribute out either.

   `.nav` is `position:fixed`, so making the body a flex column moves nothing
   that was in flow except the two blocks this rule is about. */
html:has(.foot){height:100%}
body:has(> .foot){min-height:100%;display:flex;flex-direction:column}

/* ── layout primitives: ONE grid for the header and the body ────────────── */
.inner{max-width:var(--bt-layout-container);margin:0 auto;padding:0 var(--bt-layout-gutter);width:100%}
.sec{padding:var(--bt-rhythm-group) 0;position:relative}
/* `flex:1 0 auto` and not `1 1 auto`: the body takes the slack a short page
   leaves, and never gives up height on a long one. */
.pagebody{flex:1 0 auto;padding-top:calc(var(--bt-layout-nav-height) + var(--bt-rhythm-group))}
.stack{margin-top:var(--bt-rhythm-stack)}
.tight{margin-top:var(--bt-space-sm)}
/* ── the hero's copyable full value (§7.2 s1 "hash with copy", §13) ─────── */
/* The MECHANISM is `.copyable` in the debugger stylesheet, which layout.nim
   concatenates into every page; `user-select:all` is all a page with no script
   can offer and it is not a lie about being a clipboard button. What is added
   here is a RESTING appearance, because that mechanism has none: the hover
   treatment cannot be seen in a still image, and six reviewers of this page
   reported the affordance absent while it was already present.
   A border and a raised surface, so the value reads as one object that can be
   taken — which is exactly what one click does to it — and a caption naming
   the gesture, aligned to the value's baseline rather than stacked under it so
   the pair reads as one line of the hero. `align-items:baseline` and not
   `center`: the value is 18px mono and the caption is a 12px label, and
   centring two type sizes puts neither on the page's grid. */
.copyfield{display:flex;align-items:baseline;gap:var(--bt-space-sm);
  flex-wrap:wrap;margin-top:var(--bt-space-sm)}
.copyfield .lead.tight{margin-top:0;
  padding:var(--bt-space-3xs) var(--bt-space-xs);
  border:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  border-radius:var(--bt-radius-xs);background:var(--bt-surface-raised)}
.copyhint{font-size:var(--bt-type-label-size);
  line-height:var(--bt-type-label-line);
  letter-spacing:var(--bt-type-label-tracking);color:var(--bt-text-subtle)}

/* ── §13's copy CONTROL, and the result of pressing it ──────────────────────
   The three classes `hydrate.nim`'s `bindCopy` adds, none of which the
   stylesheet drew until now. They exist ONLY on the build a visitor loads, so
   no capture and no reviewer could ever have seen them missing; H2 of
   `check-hydration-divergence.mjs` is the assertion that found them, and it
   found them undrawn.

   THE FAILURE CASE IS THE ONE THAT MATTERS. `bindCopy`'s own comment says the
   result "is SHOWN, both ways … a copy control that silently failed would be
   the affordance-that-lies defect wearing a tick" — and then it only adds a
   class. `writeText` rejects in a non-secure context and when the document is
   not focused, both of which happen to real visitors, so the page was
   asserting a copy had been offered and then saying nothing at all about
   whether it happened.

   NOT COLOUR ALONE, AND DELIBERATELY NOT COLOUR FIRST. Each result carries a
   GLYPH and a WORD; the colour is the third channel, not the only one. Two
   contrast defects have already shipped here that made a state invisible in
   one theme, and a tick that is green-on-green in dark is the same defect
   again. Read with colour removed entirely, `✓ copied` and `✗ copy failed`
   still say different things.

   `nowrap` on the marker, which is the OPPOSITE of the rule the provenance
   badge needed, and for the reason that one was wrong: this text is a fixed
   literal written here, not producer-supplied prose of unbounded length. It is
   short, it is known, and it must not break mid-word inside an `.identifier`,
   whose `word-break:break-all` would otherwise cut it.

   `.copybtn` gets a RESTING appearance, for the reason recorded above
   `.copyfield`: six reviewers reported that affordance absent while it was
   present, because its only signal was hover. Hydration turns a static value
   into `role="button" tabindex="0"`, and a control that gives no sign it
   became one is the same defect one size smaller. Focus needs nothing here —
   `:where(…,[tabindex]):focus-visible` above already rings it. */
.copybtn{cursor:pointer;border-radius:var(--bt-radius-xs);
  text-decoration:underline dotted;
  text-decoration-color:var(--bt-border-strong);
  text-underline-offset:var(--bt-space-3xs)}
.copybtn:hover{background:var(--bt-surface-hover);color:var(--bt-text-strong)}
.copied::after,.copyfailed::after{
  margin-left:var(--bt-space-2xs);white-space:nowrap;
  /* The marker is a REPORT, not part of the value. Without this it inherits
     `.copybtn`'s dotted underline and reads as more copyable text — the
     control's label and its result wearing one treatment. */
  text-decoration:none;
  font-family:var(--bt-font-sans);
  font-size:var(--bt-type-label-size);
  line-height:var(--bt-type-label-line);
  letter-spacing:var(--bt-type-label-tracking)}
.copied::after{content:'✓ copied';color:var(--bt-status-success-fg)}
.copyfailed::after{content:'✗ copy failed';color:var(--bt-status-danger-fg)}

.group{margin-top:var(--bt-rhythm-group)}
.titlerow{display:flex;gap:var(--bt-space-sm);align-items:center;flex-wrap:wrap}
.badgerow{display:inline-flex;gap:var(--bt-space-xs);align-items:center;flex-wrap:wrap}

/* ── nav ────────────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--bt-layout-nav-height);display:flex;align-items:center;border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);background:var(--bt-surface-raised)}
.nav .inner{display:flex;justify-content:space-between;align-items:center;gap:var(--bt-space-lg)}
.brand{font-size:var(--bt-type-h3-size);font-weight:var(--bt-type-h1-weight);letter-spacing:var(--bt-type-h2-tracking);color:var(--bt-text-strong);display:flex;align-items:center;gap:var(--bt-space-xs);flex:0 0 auto}
.brand .sq{width:var(--bt-space-md);height:var(--bt-space-md);border:var(--bt-stroke-thick) solid var(--bt-accent-default);border-radius:var(--bt-radius-xs);position:relative;flex:0 0 auto}
.brand .sq::after{content:'';position:absolute;inset:var(--bt-space-3xs);background:var(--bt-accent-default);border-radius:var(--bt-radius-xs)}
.nav .links{display:flex;gap:var(--bt-space-lg);align-items:center;font-size:var(--bt-type-body-sm-size);flex:1 1 auto;justify-content:flex-end}
.nav .links a.opt{color:var(--bt-text-muted);transition:color var(--bt-motion-fast) var(--bt-motion-ease)}
.nav .links a.opt:hover{color:var(--bt-text-strong)}
.nav form{flex:0 1 var(--bt-layout-search);min-width:0}
.nav input{width:100%;background:var(--bt-surface-sunken);border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-sm);color:var(--bt-text-default);font-size:var(--bt-type-body-sm-size);padding:var(--bt-space-xs) var(--bt-space-sm);transition:border-color var(--bt-motion-fast) var(--bt-motion-ease),color var(--bt-motion-fast) var(--bt-motion-ease)}
.nav input::placeholder{color:var(--bt-text-subtle)}
.nav input:hover{border-color:var(--bt-border-strong);color:var(--bt-text-strong)}

/* ── THE INPUT STATE LADDER (CodeTracer `components/input.styl`) ───────────── */
/* An input in CodeTracer is not one appearance with a focus ring bolted on. It
   is a ladder of four states — resting, hovered, FILLED, disabled — and the
   rung the explorer had never drawn is the third:

     &:not(:placeholder-shown):not(:disabled)
       border-color: colors-ui-border-action
       background:   colors-ui-surface-input-default
       color:        colors-ui-text-primary-body

   A field with something in it takes the ACTION border and strengthens its
   text, so a form tells you at a glance which of its inputs carry a value.
   Both of the explorer's two inputs are resolver fields — the nav's and the
   hero's — and both of them looked identical empty and full.

   `:not(:placeholder-shown)` and not `:valid`, `:not(:empty)` or a script:
   it is CodeTracer's own selector, it is the only pure-CSS test for "this
   field has content", and both fields already carry a placeholder so it can
   never be stuck true. There is no `:disabled` arm here because neither field
   is ever disabled — a rule for a state the markup cannot reach is the orphan
   this file's own §3.2 note argues against.

   TWO OF THE THREE DECLARATIONS ARE ADOPTED AND THE THIRD IS DECLINED.
   `border-action` is `--bt-border-accent` and `text-primary-body` is
   `--bt-text-strong` against these surfaces, so those port exactly.
   `surface-input-default` has no counterpart in the web lineage: the two
   fields sit on DIFFERENT surfaces (the nav's on sunken inside the bar, the
   hero's on raised against the canvas), so one filled-surface token would have
   to be wrong for one of them. Keeping each field's own surface is the honest
   port, and the border plus the text carry the state on their own.

   THE PLACEHOLDER IS PART OF THE LADDER, which is the half that is easy to
   miss: CodeTracer strengthens `::placeholder` on hover and on focus as well,
   so the prompt comes forward with the field rather than staying at its
   resting weight while everything around it brightens. */
.nav input:not(:placeholder-shown){border-color:var(--bt-border-accent);color:var(--bt-text-strong)}
.nav input:hover::placeholder,.nav input:focus-visible::placeholder{color:var(--bt-text-muted)}

/* ── breadcrumbs (sans: navigation is prose, not a machine value) ───────── */
.crumbs{font-size:var(--bt-type-caption-size);line-height:var(--bt-type-caption-line);color:var(--bt-text-subtle);display:flex;gap:var(--bt-space-xs);flex-wrap:wrap;margin-bottom:var(--bt-rhythm-stack)}
.crumbs a{color:var(--bt-text-link);text-decoration:underline;text-underline-offset:var(--bt-space-3xs);transition:color var(--bt-motion-fast) var(--bt-motion-ease)}
.crumbs a:hover{color:var(--bt-text-link)}
.crumbs .sep{color:var(--bt-text-subtle)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding:var(--bt-rhythm-section) 0}
.search{margin-top:var(--bt-rhythm-stack);display:flex;gap:var(--bt-space-sm);max-width:var(--bt-measure-prose)}
.search input{flex:1 1 auto;min-width:0;background:var(--bt-surface-raised);border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-sm);color:var(--bt-text-default);font-size:var(--bt-type-body-size);padding:var(--bt-density-control-y) var(--bt-density-control-x);transition:border-color var(--bt-motion-fast) var(--bt-motion-ease),color var(--bt-motion-fast) var(--bt-motion-ease)}
.search input::placeholder{color:var(--bt-text-subtle)}
.search input:hover{border-color:var(--bt-border-strong);color:var(--bt-text-strong)}
/* The same ladder, on the hero field — see the note at `.nav input`. */
.search input:not(:placeholder-shown){border-color:var(--bt-border-accent);color:var(--bt-text-strong)}
.search input:hover::placeholder,.search input:focus-visible::placeholder{color:var(--bt-text-muted)}
.chainstrip{display:flex;gap:var(--bt-space-md);flex-wrap:wrap;margin-top:var(--bt-rhythm-group)}
.chaincard{display:block;border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-md);padding:var(--bt-space-lg) var(--bt-space-xl);background:var(--bt-surface-raised);transition:border-color var(--bt-motion-fast) var(--bt-motion-ease),background var(--bt-motion-fast) var(--bt-motion-ease)}
.chaincard:hover{border-color:var(--bt-border-accent);background:var(--bt-surface-hover)}
.chaincard:active{background:var(--bt-surface-selected)}
.chaincard .name{font-size:var(--bt-type-h3-size);font-weight:var(--bt-type-h3-weight);color:var(--bt-text-strong)}
.chaincard .meta{color:var(--bt-text-muted);font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);font-size:var(--bt-type-caption-size);font-variant-numeric:var(--bt-numeric-features);margin-top:var(--bt-space-2xs)}

/* ── headline stat row ──────────────────────────────────────────────────── */
.stats{display:flex;gap:var(--bt-rhythm-group);flex-wrap:wrap;margin-top:var(--bt-rhythm-stack)}
.stat .k{font-size:var(--bt-type-label-size);font-weight:var(--bt-type-label-weight);line-height:var(--bt-type-label-line);letter-spacing:var(--bt-type-label-tracking);text-transform:uppercase;color:var(--bt-text-muted)}
.stat .v{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);font-size:var(--bt-type-h2-size);line-height:var(--bt-type-h2-line);color:var(--bt-text-strong);margin-top:var(--bt-space-2xs)}
.stat .v.mono{font-size:var(--bt-type-h3-size)}

/* ── definition grid (block / tx detail) ────────────────────────────────── */
/* NO `box-shadow`. This grid is the transaction details PANEL, and a panel in
   this product is held by its hairline and its header tone — that is what the
   debugger register does for its panes, and radii and elevation are primitives
   Design-System.md §2 says the two registers SHARE. It carried
   `--bt-elevation-raised` as well, which beside a `--bt-border-default` edge
   adds nothing a reader can name and makes a structural container read as a
   floating card: measured, the shadow it dropped peaks at 1.24:1 against the
   light canvas and at 1.00:1 against the dark one, where it is a black shadow
   on a black page.

   THAT CARVE-OUT IS NOW GONE TOO. This used to end "the shadow tokens are not
   removed and not orphaned — `.chaincard` and the stacked mobile rows still
   take `raised`, because those two ARE lifted: they are the interactive
   surfaces a pointer picks up." The measurement above is what retired it: a
   shadow at 1.00:1 against the dark canvas is not a weak signal of lift, it
   is no signal at all, so it cannot be what tells a reader those rows are
   pickable. What tells them is the hover treatment they already carry —
   `.chaincard` transitions its border and its background under the pointer,
   and that works in both themes. The operator's report was that gradients and
   drop shadows are not what the other products spend, and across all eight
   vendored CodeTracer component stylesheets the only soft shadow of any kind
   is `0 0.25em 0.5em rgba(0,0,0,0.2)` on a tooltip — an overlay. Every
   CodeTracer surface that merely RESTS is held by a hairline and a tone.

   So `--bt-elevation-raised` is now read by no rule. It is deliberately left
   in the token set rather than deleted: it is a primitive Design-System.md §2
   says the registers SHARE, and the rung is still the right answer the day
   something genuinely floats one step above the page. `--bt-elevation-
   overlay` is still spent, on the debugger's three real overlays.
   See docs/EXPLORER-TINT.md §2 T-2. */
.dl{display:grid;grid-template-columns:var(--bt-layout-label-column) minmax(0,1fr);gap:0;border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-md);overflow:hidden;background:var(--bt-surface-raised)}
.dl dt{padding:var(--bt-density-cell-y) var(--bt-density-cell-x);font-size:var(--bt-type-label-size);font-weight:var(--bt-type-label-weight);line-height:var(--bt-space-lg);letter-spacing:var(--bt-type-label-tracking);text-transform:uppercase;color:var(--bt-text-muted);background:var(--bt-surface-sunken);border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle)}
/* `overflow-wrap:anywhere` and NOT `word-break:break-all`. Both stop a 66-char
   hash from blowing out the value column, and `anywhere` is the one that also
   contributes to min-content sizing, so the grid track is still sized as if
   the break were available. The difference is what they do to PROSE, and this
   list carries both: `break-all` breaks at whatever character the line ends on
   whether or not the word would have fitted, which produced "trace op / ens
   anonymously", "not yet i / mplemented", "nothing switc / hed on" and "any
   other third part / y." in one screen. `anywhere` breaks a word only when it
   cannot fit, which is the case the rule is for.

   The measurement was taken on /settings at 375px. That route no longer
   exists — the page was removed — and the rule is unchanged by that: /about
   carries the same prose-bearing `.dl` at the same width, which is where the
   case now lives. The example strings are kept verbatim rather than re-taken,
   because what they demonstrate is the difference between the two properties
   and not the content of any one page. */
.dl dd{padding:var(--bt-density-cell-y) var(--bt-density-cell-x);border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);min-width:0;overflow-wrap:anywhere;font-size:var(--bt-type-body-sm-size);line-height:var(--bt-space-lg);font-variant-numeric:var(--bt-numeric-features)}
.dl dd .identifier,.dl dd code{font-size:inherit;line-height:inherit}
/* THE SAME DEFECT `debugger_css.nim` ALREADY FIXED, ONE SELECTOR OVER.
   `.badge` is `white-space:nowrap` globally (line ~540), which is right for a
   status word — `Yes`, `Safe`, `Pending` — and wrong for producer-supplied
   text, which nothing bounds. In a `<dd>` the overflow is clipped by the cell
   and the reader gets a phrase cut mid-word with no ellipsis saying so.

   `debugger_css.nim` scoped `white-space:normal` to `.mddl dd .badge` after
   `check-badge-legibility.mjs` found 22 clipped badges across three chains,
   and recorded that none of it was found by reading CSS — it was found by
   photographing a chain nobody had looked at. That fix stopped at the
   debugger's metadata list. The explorer's `<dd>` renders the same badges from
   the same data and was never covered, so the same gate caught the same two
   rows here:

     AGE      `No timestamp published`  overflows by 14px @laptop
     SOURCES  `Instruction level`       overflows by 19px @laptop

   `normal` PERMITS wrapping, it does not force it: the short status words have
   room and still sit on one line. Scoped to `.dl dd .badge` so a `.muted`
   suffix elsewhere keeps its nowrap — `mana (FeeJuice)` must not come apart. */
.dl dd .badge{white-space:normal}
.dl dt:last-of-type,.dl dd:last-of-type{border-bottom:0}
.dl dd a{color:var(--bt-text-link);text-decoration:underline;text-underline-offset:var(--bt-space-3xs);transition:color var(--bt-motion-fast) var(--bt-motion-ease)}
.dl dd a:hover{color:var(--bt-text-link-hover)}

/* ── tables ─────────────────────────────────────────────────────────────── */
/* The right-edge fade, and it is the SAME declaration `.src` and `pre.raw`
   carry in `debugger_css.nim` — deliberately copied rather than adapted,
   because that file states the rule this one has to obey: "ONE overflow
   treatment, and it is the fade". Round 5 already rejected a page that masked
   one scroll container and hard-clipped another.

   What it fixes here is worse than the case it was invented for. `.tablewrap`
   scrolls (`overflow-x:auto`), but a scrollbar is the only thing that said so,
   and the transactions table is wider than `--bt-layout-container` on every
   route that renders it — so the Fee column was cut at the wrap's rounded edge
   with the header label already out of frame. A truncated hash is recognisably
   truncated; `42000 / 100000` cut to `42000 / 10` is a DIFFERENT NUMBER, read
   as a fact about the chain. That is why this is the one overflow in the
   explorer that had to stop being silent.

   The fade is paired with the last-cell padding below and neither works alone:
   the mask dims the final `--bt-space-2xl` of the scroll port whether or not
   anything is scrolled, so without a gutter to land on it would dim the last
   digits of a table that FITS and manufacture the defect it removes. */
/* No `box-shadow`, for the reason given at `.dl`: the transactions table is a
   pane, not a card.

   `mask-clip:BORDER-box`, and it is a correction rather than a preference.
   A mask clips everything the element paints outside its clip box, and
   `padding-box` puts the BORDER outside it — so the hairline declared on the
   line below had never once been painted, on any route, in either theme. Five
   independent reviewers reading before/after captures of this container all
   named the same thing as the weakest element on the page: a table held by a
   fill step alone, sitting beside a `.dl` on the same page that keeps its
   hairline. They were right, and the cause was here rather than in the
   elevation pass that was blamed for it.

   That also means the `box-shadow` this rule dropped was already being
   discarded by the same clip — so removing it changed no pixel, and the case
   made for removing it was made about a declaration with no rendered effect.
   The removal still stands: the shadow is wrong for a pane. What was missing
   is the edge the removal's own argument assumed.

   `border-box` restores the hairline and does NOT restore the shadow, which
   paints outside the border box and stays clipped. The fade is unaffected:
   its stop is a percentage of the clip box, so it still dissolves the right
   edge over the last `--bt-space-2xl`, which is the whole point of it. Nothing
   moves — `border` is already in this element's box model, so this changes
   what is painted and not what is laid out. */
.tablewrap{overflow-x:auto;border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-md);background:var(--bt-surface-raised);
}
/* ── NO SCROLL-EDGE FADE: CODETRACER HAS NO GRADIENT ANYWHERE ─────────────
   Measured across all eight vendored CodeTracer component stylesheets:
   ZERO occurrences of `gradient` of any kind. This repository had six, and
   all six were this one idea — a `mask-image` dissolving the last
   `--bt-space-2xl` (or `lg`) of a scroller to say "the content continues".
   It is a real affordance and it is not upstream's; a reader with both
   products open sees BlockTracer's panes dissolve at an edge where
   CodeTracer's end on a hard line, and the fade is the most visible of the
   differences because it is in motion whenever anything scrolls.

   Removed rather than tokenised. What replaces it is the browser's own
   scrollbar and the hard edge upstream uses, which is the whole of
   CodeTracer's answer to the same question. */
/* The gutter the fade lands on when there is nothing to scroll. Applied to the
   last column in BOTH rows so the header label and its values keep sharing an
   edge — `th.num`/`td.num` are right-aligned, so a gutter on one and not the
   other would misalign the column that is hardest to misread. */
table.tbl th:last-child,table.tbl td:last-child{padding-right:var(--bt-space-2xl)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--bt-density-data-size)}
table.tbl th{text-align:left;font-size:var(--bt-type-label-size);font-weight:var(--bt-type-label-weight);line-height:var(--bt-type-label-line);letter-spacing:var(--bt-type-label-tracking);text-transform:uppercase;color:var(--bt-text-muted);padding:var(--bt-density-cell-y) var(--bt-density-cell-x);background:var(--bt-surface-sunken);border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-default);white-space:nowrap}
table.tbl th.num{text-align:right}
table.tbl td{padding:var(--bt-density-cell-y) var(--bt-density-cell-x);border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);white-space:nowrap;vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr{transition:background var(--bt-motion-fast) var(--bt-motion-ease)}
table.tbl tbody tr:hover{background:var(--bt-surface-hover)}
table.tbl td.hash a,table.tbl td a.addr{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);color:var(--bt-text-link);transition:color var(--bt-motion-fast) var(--bt-motion-ease)}
table.tbl td.hash a:hover,table.tbl td a.addr:hover{color:var(--bt-text-link-hover);text-decoration:underline;text-underline-offset:var(--bt-space-3xs)}
table.tbl td.num{text-align:right}
/* ── the empty state (CodeTracer `components/empty_states.styl`) ──────────── */
/* That file exists to make "nothing here yet" ONE treatment across a dozen
   panels, and its header is explicit about which of its declarations are the
   shared treatment and which are each panel's own. Three are portable and are
   adopted; two are not and the reasons are below.

   `overflow-wrap:break-word` — the messages this cell carries are the pages'
   own sentences and several of them contain an address or a hash, which is one
   unbreakable token wider than a column. CodeTracer states it for the same
   reason.

   `br{display:none}` — CodeTracer's note is worth quoting because it is the
   non-obvious one: "these messages read as one continuous sentence. Where the
   line falls is the panel's decision, not the author's: a hard break chosen
   for one panel width lands in the wrong place at every other width." The
   emptyNote strings are passed in by seven different pages and this table
   reflows from `wide` to `mobile`, so the rule is enforced here rather than
   trusted at seven call sites.

   `text-align:center` — already present, and it is the same declaration.

   NOT ADOPTED, both from the same rule. `opacity:0.6` is how CodeTracer dims
   the message; this cell uses `--bt-text-muted`, which is a MEASURED role
   (7.74:1 on the light canvas, 8.23:1 on the dark) where an opacity multiplier
   is a number nothing checks — and stacking the two would dim a measured
   colour by an unmeasured factor. And the `display:flex` centring is declined
   for the reason CodeTracer's own file declines it for `.dt-empty`: "it is a
   table cell, and `display:flex` would take it out of the table layout". This
   is that cell. */
.empty{padding:var(--bt-rhythm-group) var(--bt-density-cell-x);color:var(--bt-text-muted);text-align:center;overflow-wrap:break-word}
.empty br{display:none}

/* ── badges: colour never carries the meaning alone (rubric A7) ─────────── */
/* `vertical-align:middle` is CodeTracer's, from `.ct-origin-badge`
   (`components/button.styl`), and it is the one declaration of that component
   the explorer's badge was missing. An `inline-flex` box in a run of text is
   still an INLINE box to the line it sits on, so it aligns on its baseline —
   which for a bordered chip is the baseline of the text INSIDE it, putting the
   chip's own descender-and-border below the sentence's baseline. The badge sat
   low beside the value it qualifies in every `.dl dd`, every `.titlerow` and
   every `.badgerow` on the site.
   The same component's `user-select:none` is deliberately NOT adopted: it is a
   control in CodeTracer and a LABEL here, and several of these badges carry
   the producer's own provenance words, which a reader may well want to copy. */
.badge{display:inline-flex;align-items:center;vertical-align:middle;font-size:var(--bt-type-label-size);font-weight:var(--bt-type-label-weight);line-height:var(--bt-type-label-line);letter-spacing:var(--bt-type-label-tracking);padding:var(--bt-space-3xs) var(--bt-space-xs);border-radius:var(--bt-radius-xs);border:var(--bt-stroke-hairline) solid var(--bt-status-neutral-border);background:var(--bt-status-neutral-bg);color:var(--bt-status-neutral-fg);white-space:nowrap}
.badge.ok{color:var(--bt-status-success-fg);border-color:var(--bt-status-success-border);background:var(--bt-status-success-bg)}
.badge.bad{color:var(--bt-status-danger-fg);border-color:var(--bt-status-danger-border);background:var(--bt-status-danger-bg)}
.badge.warn{color:var(--bt-status-warning-fg);border-color:var(--bt-status-warning-border);background:var(--bt-status-warning-bg)}
.badge.info{color:var(--bt-status-info-fg);border-color:var(--bt-status-info-border);background:var(--bt-status-info-bg)}
.badge.muted{color:var(--bt-status-neutral-fg);border-color:var(--bt-status-neutral-border);background:var(--bt-status-neutral-bg)}
.badge.lg{font-size:var(--bt-type-body-sm-size);line-height:var(--bt-type-body-sm-line);padding:var(--bt-space-2xs) var(--bt-space-sm)}
.badge.coverage{border-radius:var(--bt-radius-full);background:none;gap:var(--bt-space-2xs)}
.badge.coverage::before{content:'';width:var(--bt-space-xs);height:var(--bt-space-xs);border-radius:var(--bt-radius-full);background:currentColor;flex:0 0 auto}
/* `.dl dd .badge:only-child` and no longer `dd > .badge` — the value now sits
   one element deeper, inside the wrapper `metaValue` returns. The wrapper
   exists because the `data-provenance` attribute has to be conditional at the
   `dd` and the isonim DSL emits an empty attribute rather than omitting one, so
   the row body could not be written twice. `:only-child` means the same thing
   at either depth: a badge that is the whole of its cell. Worth stating because
   the breakage was SILENT — a descendant selector losing its subject drops an
   optical correction with nothing to report it. */
.dl dd .badge:only-child{margin-left:calc(-1 * (var(--bt-space-xs) + var(--bt-stroke-hairline)))}

/* ── buttons: every variant sets its own background ─────────────────────── */
/* `white-space:nowrap` is CodeTracer's, and it is the first declaration in
   `components/button.styl`'s base `button` rule. A control's label is its
   IDENTITY: "Debug this transaction" broken across two lines is a different
   shape from the same control in the row above it, and in the transactions
   table the Debug cell is `position:sticky` at a fixed column width, which is
   exactly the place a two-word label wraps. CodeTracer states it once on the
   element; so does this. */
.btn{font-size:var(--bt-type-body-sm-size);font-weight:var(--bt-type-h3-weight);line-height:var(--bt-type-body-sm-line);padding:var(--bt-density-control-y) var(--bt-density-control-x);border-radius:var(--bt-radius-sm);display:inline-flex;gap:var(--bt-space-xs);align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;border:var(--bt-stroke-hairline) solid transparent;background:var(--bt-action-ghost-bg);color:var(--bt-action-ghost-fg);transition:background var(--bt-motion-fast) var(--bt-motion-ease),border-color var(--bt-motion-fast) var(--bt-motion-ease),color var(--bt-motion-fast) var(--bt-motion-ease)}
.btn.primary{background:var(--bt-action-bg);color:var(--bt-action-fg);border-color:var(--bt-action-bg)}
.btn.primary:hover{background:var(--bt-action-bg-hover);border-color:var(--bt-action-bg-hover)}
.btn.primary:active{background:var(--bt-action-bg-active);border-color:var(--bt-action-bg-active)}
.btn.ghost{background:var(--bt-action-ghost-bg);color:var(--bt-action-ghost-fg);border-color:var(--bt-action-ghost-border)}
.btn.ghost:hover{background:var(--bt-action-ghost-bg-hover);border-color:var(--bt-action-ghost-border-hover)}
.btn.ghost:active{background:var(--bt-action-ghost-bg-active)}
/* CODETRACER'S `pointer-events:none` IS DECLINED HERE, AND THE REASON IS A
   PROPERTY OF THIS PRODUCT'S MARKUP RATHER THAN A PREFERENCE.
   `components/button.styl` gives `button:disabled` both `cursor:not-allowed`
   and `pointer-events:none`, and adopting the pair looks free. It is not:
   every one of this product's three inert controls carries a `title` whose
   entire job is to name WHY it refuses — "the oldest block this generation
   indexes", "the head of the chain at this generation", and the share
   control's unanchored label. `pointer-events:none` removes the element from
   hit testing, which suppresses the native tooltip, so the rule would delete
   the only statement each of those controls makes. It would also delete
   `cursor:not-allowed`'s effect in the same stroke, since the pointer then
   belongs to whatever is underneath.
   CodeTracer can afford it because its disabled buttons are `<button>`
   elements that the UA already blocks, and none of them explains itself in a
   `title`. The explorer's are `<span>`s that never navigated in the first
   place. Adopted from this component instead: `white-space:nowrap`, above. */
.btn.disabled{background:var(--bt-action-disabled-bg);color:var(--bt-action-disabled-fg);border-color:var(--bt-action-disabled-border);cursor:not-allowed}
.btn.disabled:hover{background:var(--bt-action-disabled-bg);border-color:var(--bt-action-disabled-border)}

/* ── tx-detail debug panel ──────────────────────────────────────────────── */
/* NO `box-shadow` AT ALL NOW, which settles an argument this comment used to
   have with itself. It read "`--bt-elevation-raised` and NOT
   `--bt-elevation-overlay`… the card is still the most raised thing on the
   transaction page — it keeps a shadow, one rung down", and the half of it
   that still stands is the half about `overlay`: that is the modal rung, this
   card is IN FLOW, it is the first thing under the transaction hero, it
   displaces the page and nothing is drawn beneath it, and wearing a modal
   shadow made the page's primary call to action read as a dialog that had
   failed to open.

   What does not stand is the conclusion that it therefore keeps `raised`. The
   definition grid's comment measured that rung at 1.24:1 on the light canvas
   and 1.00:1 on the dark one; a shadow nobody can see does not make this the
   most raised thing on the page, it just costs a declaration. Being first
   under the hero is what makes it prominent, and it keeps the hairline, the
   radius and the raised SURFACE that say so in both themes.
   See docs/EXPLORER-TINT.md T-2. */
.debugcard{max-width:var(--bt-layout-prose);border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-md);padding:var(--bt-density-card-pad) var(--bt-density-cell-x);background:var(--bt-surface-raised)}
.debugcard .row{display:flex;align-items:center;gap:var(--bt-space-md);flex-wrap:wrap}
.debugcard .note{color:var(--bt-text-default);font-size:var(--bt-type-body-sm-size);line-height:var(--bt-type-body-sm-line);margin-top:var(--bt-rhythm-stack);max-width:var(--bt-measure-prose)}
.debugcard .note.spec{max-width:none;margin-top:var(--bt-rhythm-stack);padding-top:var(--bt-space-sm);border-top:var(--bt-stroke-hairline) solid var(--bt-border-subtle);color:var(--bt-text-default)}
/* The producer's own words, one rung quieter than the sentence above them and
   tightened to it, so the pair reads as statement-then-evidence rather than as
   two paragraphs. Same relationship `.notice .reason` gives the explorer's §14
   treatments, which is where the rule is written down. */
.debugcard .note.reason{color:var(--bt-text-muted);margin-top:var(--bt-space-2xs)}
/* A REFUSAL IS NOT AN ABSENCE, AND IT MUST NOT LOOK LIKE ONE (ING-3). Both
   arrive as `absent` — the chain never published the execution, or this
   pipeline declined it and named the condition — and until the overlay carried
   `refusalReason` a reader could tell them apart only by interpreting the
   sentence. So a refusal draws the same one rung quieter as `.reason`, and
   then LABELS itself: the word comes before any styling, which is rubric A7's
   rule that a state is named in a badge before it is painted, and it is the
   half a reader who cannot see the tone still gets. Never colour alone. */
.debugcard .note.refusal{color:var(--bt-text-muted);margin-top:var(--bt-space-2xs)}
.refusal-label{font-weight:var(--bt-type-h3-weight);color:var(--bt-text-default)}
.execlist{list-style:none;margin-top:var(--bt-rhythm-stack);display:flex;flex-direction:column;gap:var(--bt-space-sm)}
.execlist li{display:flex;align-items:center;gap:var(--bt-space-sm);flex-wrap:wrap}
.execlist .sel{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);font-size:var(--bt-type-identifier-size);color:var(--bt-text-muted);min-width:var(--bt-space-3xl)}
.execlist .reason{color:var(--bt-text-muted);font-size:var(--bt-type-body-sm-size);max-width:var(--bt-measure-prose)}
/* The Aztec split is where the two statements sit on one page, one above the
   other, so this is the pair that has to be legible side by side. */
.execlist .refusal{color:var(--bt-text-muted);font-size:var(--bt-type-body-sm-size);max-width:var(--bt-measure-prose)}

/* ── deferred / notice callouts ─────────────────────────────────────────── */
.stub{max-width:var(--bt-layout-prose);border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-sm);padding:var(--bt-space-md) var(--bt-density-cell-x);margin-top:var(--bt-rhythm-stack);background:var(--bt-surface-raised);color:var(--bt-text-default);font-size:var(--bt-type-body-sm-size);line-height:var(--bt-type-body-sm-line)}
.stub b{color:var(--bt-text-default);font-weight:var(--bt-type-h3-weight)}
.measure{max-width:var(--bt-measure-prose)}

/* ── raw json ───────────────────────────────────────────────────────────── */
pre.raw{max-height:var(--bt-layout-code-max-height);overflow:auto;background:var(--bt-surface-code);border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-md);padding:var(--bt-space-md) var(--bt-density-cell-x);overflow-x:auto;font-family:var(--bt-font-code),var(--bt-font-mono-fallback);font-size:var(--bt-type-code-size);line-height:var(--bt-type-code-line);color:var(--bt-text-code);font-variant-numeric:var(--bt-numeric-features)}

/* ── §14 degraded-state notice ──────────────────────────────────────────── */
/* One block, one tone from the status vocabulary, and never colour alone: the
   row is named in a badge before it is painted (rubric A7). */
/* No `box-shadow`: this callout already carries a `--bt-stroke-thick` status
   rail down its left edge, which is a stronger and more specific signal than a
   shadow, and it is in flow. Three channels for one notice — rail colour, rail
   weight and a drop shadow — was two more than the thing needs. */
/* ── THE TONE RUNS ROUND THE BOX, NOT DOWN ITS LEFT EDGE ────────────────────
   CodeTracer's `components/notifications.styl` is the counterpart of this
   callout, and it draws a toned notice in exactly one way:

     .status-notification.ct-notification.ct-notification-warning-primary
       border-color:     colors-ui-border-warning
       background-color: colors-ui-surface-primary-default
       color:            colors-ui-text-primary-body

   — a uniform hairline border in the status hue, on the ordinary panel
   surface. Four tones, four rules, one shape. There is no rail in the
   component, and there is no rail anywhere in CodeTracer: a thick coloured
   strip down the left edge of a box is a different design system's idiom that
   this file had inherited from nowhere in particular.

   WHAT IS GAINED AND WHAT IS SPENT, because it is not free in both directions.
   Gained: the tone is now on all four edges instead of one, so it is visible
   whichever corner of the notice a reader's eye lands on, and it is visible at
   the width the notice actually is rather than only at its left margin — on a
   full-bleed provenance band that left edge is off at the page gutter, tens of
   ems from the sentence it qualifies. Spent: the rail was a WEIGHT channel as
   well as a colour one, and a uniform hairline is colour only.

   THAT SPEND IS WHY THE BADGE RULE IS NOT NEGOTIABLE HERE. Rubric A7 is "the
   row is named in a badge before it is painted", and both callers satisfy it
   in markup — `components/degraded.nim` and `components/provenance.nim` each
   open with a `.noticehead` carrying a `.badge` whose text states the tone in
   words. Read with colour removed entirely, every notice on this site still
   says what it is. The rail was never the channel that carried that.

   `--bt-border-default` stays as the untoned default, so a `.notice` with no
   tone class is a plain panel edge — which is what `ct-notification` with no
   tone modifier is. */
.notice{margin-top:var(--bt-rhythm-stack);border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-sm);padding:var(--bt-space-md) var(--bt-density-cell-x);background:var(--bt-surface-raised)}
.notice.bad{border-color:var(--bt-status-danger-border)}
.notice.warn{border-color:var(--bt-status-warning-border)}
.notice.info{border-color:var(--bt-status-info-border)}
.notice.muted{border-color:var(--bt-status-neutral-border)}
.notice .noticehead{display:flex;align-items:center;gap:var(--bt-space-sm);flex-wrap:wrap;margin-bottom:var(--bt-space-sm)}
.notice p{font-size:var(--bt-type-body-sm-size);line-height:var(--bt-type-body-sm-line);color:var(--bt-text-default)}
.notice .reason{color:var(--bt-text-muted);margin-top:var(--bt-space-2xs)}
/* THE ACTION INSIDE A NOTICE IS A PILL, AND IT IS THE NOTICE'S OWN COLOUR.
   CodeTracer gives the action inside a notification its own shape rather than
   reusing the page's button — `.notification-action-button` in
   `components/notifications.styl`:

     border:        0.0625rem solid currentColor
     border-radius: 999px
     background:    transparent
     color:         inherit

   Three properties and each one says something. `currentColor` + `inherit`
   take the control out of the button vocabulary entirely: it is drawn in the
   text colour of the block it sits in rather than in `--bt-action-ghost-*`, so
   it belongs to the notice instead of being site chrome that landed there. Be
   precise about what that is and is not — in CodeTracer's PRIMARY variant, the
   one this callout matches, the notice's own colour is the ordinary body text
   colour, so the pill is NOT tinted by the tone. The tone stays on the border
   of the box. `transparent` means the control never competes with the page's
   primary action — §14's remedies are "here is what would fix this", not calls
   to action. And the full radius is what separates it at a glance from the
   `--bt-radius-sm` buttons everywhere else.

   This is NOT a third button style invented here: it is the component
   CodeTracer ships for exactly this position, and it appears nowhere else.
   What is deliberately NOT adopted is its SIZE (`min-height:1.75rem;
   padding:0 0.75rem`) — Design-System.md §2 makes density the thing the two
   registers do not share, so the control keeps the explorer's control rung and
   changes only its shape and its colour.

   Declared after `.btn.ghost` and at matching specificity, so source order
   decides and neither rule needs a weight it has not earned. */
.notice .btn{border-radius:var(--bt-radius-full);border-color:currentColor;background:none;color:inherit}
.notice .btn:hover{background:var(--bt-surface-hover);border-color:currentColor}
.notice .btn:active{background:var(--bt-surface-selected)}

/* ── provenance, in its ordinary-case form ──────────────────────────────── */
/* The chip a chain-scoped page carries when its data is REAL — see
   `components/provenance.nim` for why the band is now reserved for the
   abnormal case. It is deliberately not a `.notice`: no border, no raised
   surface, no left rail, no full-bleed row. It is one badge, inset to the
   page's own column, sitting directly above the breadcrumb it qualifies.

   `margin-bottom` and no `margin-top`: it is the first thing in `.pagebody`,
   and the section beneath it already opens with `.sec`'s own padding, so a top
   margin here would push the whole page down by a rhythm step to no purpose. */
.provchip{display:inline-flex;align-items:center;
  margin-bottom:var(--bt-space-sm)}

/* A producer's own sentences beneath a fact's VALUE — `MetaRow.note`, which
   today only the provenance row carries. Rendered inside the `dd`, because a
   `dl` may hold nothing but `dt`/`dd` and a paragraph between them is markup a
   browser has to recover from rather than render.

   One rung quieter than the value it qualifies, which is the same relationship
   `.notice .reason` above gives the §14 treatments and `.nostate
   .btnote.reason` gives the debugger's no-session prose. Three places, one
   relationship. `measure` caps it at the prose width so a three-sentence
   capture account does not set a 900px line inside a two-column grid. */
/* The note row spans the grid — see `debugger_css`'s `.mddl dd.rownote` for
   why. The explorer's `.dl` does not right-align its values, so this side never
   had the alignment defect; it spans for the measure alone, and for the two
   surfaces to render one row the same way. */
.dl dd.rownote{grid-column:1/-1;padding-top:0}
.dl dd .reason{color:var(--bt-text-muted);margin-top:var(--bt-space-2xs);
  font-size:var(--bt-type-body-sm-size);line-height:var(--bt-type-body-sm-line)}

/* ── cursor pager (§2.2: no ordinal pages, so no page numbers) ───────────── */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--bt-space-md);flex-wrap:wrap;margin-top:var(--bt-rhythm-stack)}
.pager .pagerwhere{color:var(--bt-text-muted);font-size:var(--bt-type-body-sm-size);font-variant-numeric:var(--bt-numeric-features)}
.pager .pagerbtns{display:flex;gap:var(--bt-space-sm)}
.btn.sm{font-size:var(--bt-type-caption-size);line-height:var(--bt-type-caption-line);padding:var(--bt-space-2xs) var(--bt-space-sm)}
.linkrow{display:flex;gap:var(--bt-space-sm);flex-wrap:wrap}
.linklist{list-style:none;display:flex;flex-direction:column;gap:var(--bt-space-2xs);margin-top:var(--bt-rhythm-stack)}
.linklist a{color:var(--bt-text-link);text-decoration:underline;text-underline-offset:var(--bt-space-3xs)}

/* ── the shared transactions table (§6) ─────────────────────────────────── */
/* The Debug column is first and never scrolls out of view horizontally: it is
   the primary action, and a table that scrolls it away is the anti-goal rule 1
   names. */
table.txtbl th.act,table.txtbl td.act{position:sticky;left:0;z-index:1;background:var(--bt-surface-raised)}
table.txtbl th.act{background:var(--bt-surface-sunken)}
table.txtbl tbody tr:hover td.act{background:var(--bt-surface-hover)}
/* The source badge sits UNDER the Debug action, in the same cell: what a visitor
   can do, then what they get when they do it. A rung quieter than the control
   above it, so it cannot read as a second action. It lays itself out rather than
   being wrapped — a wrapper would have changed every row in the tree, including
   the ones that show no badge — and the `td` stays a table cell, because it is
   `position:sticky` and a `display` change there takes the column with it. */
table.txtbl td.act .srcbadge{display:flex;width:fit-content;gap:var(--bt-space-2xs);margin-top:var(--bt-space-2xs);font-size:var(--bt-type-caption-size)}
table.txtbl td.act .srcbadge .mono{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback)}
table.txtbl td .reason{display:inline-block;margin-left:var(--bt-space-xs);color:var(--bt-text-muted);font-size:var(--bt-type-caption-size)}
/* Reverted rows are visually distinct — they are the population this product
   exists for — and the distinction is a tinted row plus a leading rule, so it
   survives a greyscale render and a colour-vision deficiency alike. */
table.txtbl tbody tr.reverted td{background:var(--bt-status-danger-bg)}
table.txtbl tbody tr.reverted td.act{border-left:var(--bt-stroke-thick) solid var(--bt-status-danger-border)}
table.txtbl tbody tr.reverted:hover td{background:var(--bt-surface-hover)}
table.txtbl tbody tr.partial td.act{border-left:var(--bt-stroke-thick) solid var(--bt-status-warning-border)}
table.tbl td a.addr{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);color:var(--bt-text-link)}
table.tbl td .reason{white-space:normal;max-width:var(--bt-measure-narrow)}

/* ── verified-source browser (§10) ──────────────────────────────────────── */
/* ── THE ONE TAB STRIP IN THE EXPLORER REGISTER ─────────────────────────────
   `.filetree` is the row of file names above a verified bundle's sources. It
   is a tab strip by every property that matters — a horizontal row of named
   documents of which one is the one you are looking at, each a control that
   takes you to it — and it was drawn as a row of bordered pills, which is the
   one shape in this stylesheet that resembled nothing in CodeTracer.

   CodeTracer's tab is `components/tab.styl`:

     .ct-tab
       background:    transparent
       border:        none
       border-bottom: 0.125em solid colors-ui-border-primary
       border-radius: 0.375em
       transition:    background-color .12s, border-color .12s, color .12s
     &:hover:not([data-disabled]):not([data-selected])
       background:          colors-ui-surface-primary-secondary-hover
       border-bottom-color: colors-ui-border-contrast
     &[data-selected="true"]
       background:          colors-ui-surface-primary-secondary-hover
       border-bottom-color: colors-ui-border-action
       color:               colors-ui-text-primary-active

   The shape is a RAIL, not a box: no side or top edges at all, a
   two-hairline underline that is always drawn, and the state lives in that
   underline's colour plus a fill that appears on hover. That is the same
   component `debugger_css.nim` already carries as `.srctab` and `.stacktab`,
   one register over — so this rule makes the two surfaces draw one tab, which
   is the whole of what "tab bars look like CodeTracer's" can mean in a product
   that has one tab strip per register.

   The mappings, each one a role and not a colour: `text-primary-body` is
   `--bt-text-strong`, `border-primary` is `--bt-border-default`,
   `border-contrast` is `--bt-border-strong`,
   `surface-primary-secondary-hover` is `--bt-surface-hover`, the `0.125em`
   rail is `--bt-stroke-thick` and the `0.375em` corner is `--bt-radius-xs`,
   which is the chip rung both registers share after EXPLORER-TINT.md T-1.

   FIVE OF THOSE SIX ARE CONFIRMED AGAINST AN INDEPENDENT DERIVATION, and one
   of them was wrong until it was. The branch porting CodeTracer's component
   layer into the DEBUGGER register carries a `Bridge` table that maps
   CodeTracer's role names onto `--bt-*` roles by reading both products'
   generated token layers, and it agrees with this rule on `border-primary`,
   `border-action`, `surface-primary-secondary-hover` and the status borders.
   It disagreed on the tab's RESTING colour, and it was right: `.ct-tab` rests
   at `colors-ui-text-primary-body`, which resolves to `--bt-text-strong`, and
   this rule had `--bt-text-muted`. That is `text-primary-body-subtle` — and
   `.ct-tab[data-disabled="true"]` is muted text over a `border-primary` rail,
   so every resting tab was wearing very nearly the component's DISABLED
   appearance: a strip of four files, none of them looking reachable, on the
   page whose whole subject is the source.

   So the tab rests at full strength and hover changes no colour at all, which
   is `.ct-tab` exactly — the state is the rail and the fill and nothing else.
   `border-contrast` is the one role that table does not carry, because
   `tab.styl` is not among the files it vendors; `--bt-border-strong` is where
   its sibling `border-primary-hover` lands, which is the same
   one-rung-up-on-hover move.

   NO SELECTED STATE, AND THAT IS NOT AN OMISSION. Every file in the bundle is
   rendered, stacked, on this one page; the strip jumps to them rather than
   switching between them, so at rest no tab is "the one open". The selected
   rung of the component is therefore spent where the selection actually is —
   on the PANEL, at `.codefile:target` below — which is also where CodeTracer
   puts it (`components/golden_layout.styl`, `SELECTED_PANEL_BORDER`).

   The padding, the gap and the wrap are unchanged, so the strip occupies the
   same box it did. */
.filetree{display:flex;gap:var(--bt-space-sm);flex-wrap:wrap;margin-bottom:var(--bt-rhythm-stack)}
.filetree a{border:0;border-bottom:var(--bt-stroke-thick) solid var(--bt-border-default);border-radius:var(--bt-radius-xs);padding:var(--bt-space-3xs) var(--bt-space-xs);color:var(--bt-text-strong);background:none;font-size:var(--bt-type-caption-size);transition:background var(--bt-motion-fast) var(--bt-motion-ease),border-color var(--bt-motion-fast) var(--bt-motion-ease)}
.filetree a:hover{background:var(--bt-surface-hover);border-bottom-color:var(--bt-border-strong)}

/* ── a source file is a PANE ────────────────────────────────────────────────
   `.codefile` + `.codehead` + `.codeview` is a pane, a pane header and a pane
   body, and it is the only structure in the explorer register that already had
   all three. What it did not have was the product register's declarations for
   them, which `debugger_css.nim` writes as `.panehead` / `.panetitle` and
   CodeTracer writes as `.lm_content` / `.lm_title`:

     .panehead   padding: cell-y cell-x; align-items: center; gap: xs;
                 background: sunken; border-bottom: hairline border-SUBTLE
     .panetitle  label size / weight / tracking, uppercase, text-muted

   Three differences, all adopted. The header sat on `--bt-space-xs` rather
   than the register's own `--bt-density-cell-y`, so the one pane header on the
   site was the one strip not on the rhythm every table header and every `.dl`
   row sits on. It separated itself with `--bt-border-default`, a full-strength
   edge, where a pane's internal division is `--bt-border-subtle` — the head is
   part of the pane, and a boundary as strong as the pane's own outline reads
   as two stacked boxes. And it had no `align-items`, so a mono path and a
   proportional count aligned on their box tops rather than their centres.

   THE COUNT BECOMES A PANE LABEL. `.panetitle`'s job is to say what the strip
   is in the quietest type the system has; here the left half is the file's
   path, which is a machine value and stays mono, and the right half is the
   pane's own metadata. Giving it the label treatment is what turns the strip
   from "two pieces of caption text" into a header with a title and a label,
   which is what the product register's panes look like.

   Scoped to `.codehead .muted` rather than restyling `.muted`: that utility is
   a colour and nothing else, in ninety places. */
.codefile{margin-top:var(--bt-rhythm-stack);border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-md);overflow:hidden;background:var(--bt-surface-code);transition:border-color var(--bt-motion-fast) var(--bt-motion-ease)}
/* THE SELECTED PANE, and it is deliberately not a hue. CodeTracer marks the
   panel you are in with a full-strength neutral outline and says why at
   `SELECTED_PANEL_BORDER` in `components/golden_layout.styl`: "the outline is
   now the *only* selection cue — the panel surface no longer changes — and a
   sub-pixel stroke is antialiased down to roughly half strength, which read as
   no indicator at all". So the mark is `--bt-border-strong` against the
   `--bt-border-default` every other pane carries: same weight, one rung up in
   contrast, no colour spent. That also keeps it out of the five-meanings-on-
   one-token problem `debugger_css.nim` records at `.stacktab` — "this is the
   pane you jumped to" is not "this is a link".
   `:target` is what makes it reachable with no script: the strip's hrefs are
   `#file-<slug>` and this is the file at that fragment. */
.codefile:target{border-color:var(--bt-border-strong)}
.codehead{display:flex;justify-content:space-between;align-items:center;gap:var(--bt-space-xs);padding:var(--bt-density-cell-y) var(--bt-density-cell-x);background:var(--bt-surface-sunken);border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);font-size:var(--bt-type-caption-size)}
.codehead .muted{font-size:var(--bt-type-label-size);font-weight:var(--bt-type-label-weight);line-height:var(--bt-type-label-line);letter-spacing:var(--bt-type-label-tracking);text-transform:uppercase;color:var(--bt-text-muted);white-space:nowrap}
.codeview{max-height:var(--bt-layout-code-max-height);overflow:auto;padding:var(--bt-space-sm) 0}
.codeline{display:flex;gap:var(--bt-space-sm);font-family:var(--bt-font-code),var(--bt-font-mono-fallback);font-size:var(--bt-type-code-size);line-height:var(--bt-type-code-line)}
.codeline .gutter{flex:0 0 var(--bt-space-3xl);text-align:right;color:var(--bt-text-subtle);user-select:none;font-variant-numeric:var(--bt-numeric-features)}
.codeline .t{white-space:pre;color:var(--bt-syntax-plain);padding-right:var(--bt-density-cell-x)}
/* The same lexical palette the debugger's source pane uses, in the explorer
   register. One set of roles, so a keyword is the same colour in both. */
.codeview .tk-comment{color:var(--bt-syntax-comment)}
.codeview .tk-keyword{color:var(--bt-syntax-keyword)}
.codeview .tk-type{color:var(--bt-syntax-type)}
.codeview .tk-function{color:var(--bt-syntax-function)}
.codeview .tk-string{color:var(--bt-syntax-string)}
.codeview .tk-number{color:var(--bt-syntax-number)}
.codeview .tk-punct{color:var(--bt-syntax-punctuation)}

/* ── footer links ───────────────────────────────────────────────────────── */
.footlinks{display:flex;gap:var(--bt-space-md);margin-top:var(--bt-space-xs)}
.footlinks a{color:var(--bt-text-link);text-decoration:underline;text-underline-offset:var(--bt-space-3xs)}

/* ── inline marks ───────────────────────────────────────────────────────── */
/* The site's one icon convention (components/icons.nim). Every rule here is a
   consequence of what an inline SVG is, not a look:

   * `currentColor` on the mark means the COLOUR is whatever the surrounding
     text is, so a mark is themed by the token that themes its sentence and
     there is no second colour to keep in step. The heart is the one that
     opts out, below.
   * `display:inline-block`, overriding the `img,svg{display:block}` reset at
     the top of this file. A block-level SVG in a run of text starts its own
     line box; `vertical-align` needs an inline box to have anything to align
     TO, and without it a 16px mark on a 14px line sits low by its descender.
   * `flex:0 0 auto`, because two of the three callers are flex containers
     (`.ctcredit`, `.repolink`) and a mark that shrinks is a mark that
     distorts — an SVG has no intrinsic minimum the way an image does. */
.svgicon{width:var(--bt-space-md);height:var(--bt-space-md);display:inline-block;vertical-align:text-bottom;flex:0 0 auto}
/* The heart is smaller than the logos beside it and it is the accent rather
   than the text colour. Both because it is a WORD in the sentence and not a
   logo at the end of one: at the logos' size it outweighs the clause it sits
   in, and in the text colour it reads as a dingbat someone typed. The accent
   is the site's own colour, and deliberately not `--bt-status-danger-*`: the
   red in this token layer means "this went wrong", and borrowing it for
   affection would make the one red on a page mean two things. */
.svgicon.heart{width:var(--bt-space-sm);height:var(--bt-space-sm);color:var(--bt-accent-default);vertical-align:baseline}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{border-top:var(--bt-stroke-hairline) solid var(--bt-border-subtle);margin-top:var(--bt-rhythm-group);padding:var(--bt-rhythm-group) 0;color:var(--bt-text-subtle);font-size:var(--bt-type-body-sm-size);background:var(--bt-surface-raised)}
.foot .inner{display:flex;justify-content:space-between;gap:var(--bt-rhythm-stack);flex-wrap:wrap}
.foot code{color:var(--bt-text-code)}

/* ── footer: the provenance strip ───────────────────────────────────────── */
/* Who built it, what it runs on, and where the source is — one column, because
   the three statements are one claim and a reader who has found the first has
   found all three. */
.footcredit{display:flex;flex-direction:column;align-items:flex-start;gap:var(--bt-space-xs)}
.footcredit a{color:var(--bt-text-link);text-decoration:underline;text-underline-offset:var(--bt-space-3xs)}
.footcredit a:hover{color:var(--bt-text-link-hover)}
/* The credo is ordinary running text, NOT a flex row: "Built with ♥ by …" is a
   sentence, and a flex container turns each run between two marks into an
   anonymous item that can be broken and re-gapped independently of the words
   around it. Only the two pieces that are a name PLUS a mark are flex, and
   only so the mark cannot be separated from the name it belongs to. */
.ctcredit,.repolink{display:inline-flex;align-items:center;gap:var(--bt-space-2xs);white-space:nowrap}
.repolink{text-decoration:underline;text-underline-offset:var(--bt-space-3xs)}

/* ── §13: below 900px the transactions table becomes stacked cards ───────── */
/* "All tables virtualised; below 900 px they become stacked cards with the
   primary action (Debug) and status retained." Debug leads each card and the
   status closes it, which is the pair §13 names — and the horizontal scroll
   that would otherwise hide the far columns is gone rather than tightened. */
@media (max-width:900px){
  /* The fade goes with the scroll it annotates. In the card layout there is no
     horizontal overflow at all — `overflow-x:visible`, `thead` gone, every
     value on its own row — so a mask here would dim the right edge of cards
     that have nothing hidden, which is a fade that means nothing and trains a
     reader to ignore the one that does. The last-cell gutter goes with it: a
     card row is a flex line with its label at the left and its value at the
     right, and 32px of dead space would push that value out of alignment with
     every row above it. */
  .tablewrap:has(table.txtbl){overflow-x:visible;border:0;background:none;box-shadow:none;
    -webkit-mask-image:none;mask-image:none}
  table.txtbl th:last-child,table.txtbl td:last-child{padding-right:0}
  table.txtbl{display:block;font-size:var(--bt-type-body-sm-size)}
  table.txtbl thead{display:none}
  table.txtbl tbody{display:block}
  table.txtbl tbody tr{display:block;border:var(--bt-stroke-hairline) solid var(--bt-border-default);border-radius:var(--bt-radius-md);background:var(--bt-surface-raised);padding:var(--bt-space-sm) var(--bt-density-cell-x);margin-bottom:var(--bt-space-sm)}
  table.txtbl tbody tr.reverted{border-color:var(--bt-status-danger-border)}
  table.txtbl td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bt-space-md);white-space:normal;border-bottom:0;padding:var(--bt-space-3xs) 0;text-align:left}
  table.txtbl td.num{text-align:left}
  table.txtbl td::before{content:attr(data-label);color:var(--bt-text-muted);font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:var(--bt-type-label-size);font-weight:var(--bt-type-label-weight);letter-spacing:var(--bt-type-label-tracking);text-transform:uppercase;flex:0 0 auto}
  /* Debug leads the card at full width, so the primary action is the first
     thing in every card rather than a value in a labelled row. */
  table.txtbl td.act{position:static;display:block;background:none;padding-bottom:var(--bt-space-sm);border-left:0}
  table.txtbl td.act::before{content:none}
  table.txtbl td.act .btn{width:100%}
  table.txtbl tbody tr.reverted td,table.txtbl tbody tr.reverted:hover td{background:none}
  /* The desktop treatment marks a non-successful row with a rule down the LEFT
     EDGE of its Debug cell. In card mode that cell is a full-width block and
     the rule became a stub above the button; the card's own border carries the
     status instead, so the rule is reset at matching specificity. */
  table.txtbl tbody tr.reverted td.act,table.txtbl tbody tr.partial td.act{border-left:0}
  table.txtbl tbody tr.partial{border-color:var(--bt-status-warning-border)}
  /* A revert reason is prose containing one long unbreakable token — the
     failing expression. As a flex item beside its badge it could not shrink
     below that token's width, so at 375px "assert(did_survive_positive" and
     "satisfied at src/main.nr:35" ran past the card's own border, which on a
     REVERTED row is the red border that carries the status. `min-width:0`
     lets the item shrink; `overflow-wrap:anywhere` gives the token somewhere
     to break when it still does not fit. `max-width:none` is unchanged: the
     44ch measure is for the desktop table's reason column. */
  table.txtbl td .reason{margin-left:0;max-width:none;min-width:0;overflow-wrap:anywhere}
}

/* Breakpoints are written as literals because CSS cannot read a custom
   property in a media condition. */
@media (max-width:720px){
  .dl{grid-template-columns:1fr}
  .dl dt{border-bottom:0;padding-bottom:0}
  .dl dd{padding-top:var(--bt-space-2xs)}
  .hero{padding:var(--bt-rhythm-group) 0}
  .sec-title.next{margin-top:var(--bt-rhythm-group)}
  .nav .links a.opt{display:none}
}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/button.styl ── */
[data-register="debugger"] button{font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);border-radius:0.5em !important;display:inline-flex;outline:none;border-width:0em;transition:background-color 250ms ease 100ms, color 250ms ease 100ms, border-color 250ms ease 100ms;flex:0 0 1.75em !important;box-sizing:border-box;white-space:nowrap;}
[data-register="debugger"] button:hover:not(:disabled){color:var(--bt-text-strong);}
[data-register="debugger"] button:focus-visible:not(:disabled){outline:none !important;box-shadow:inset 0 0 0 0.125em var(--bt-focus-ring) !important;color:var(--bt-text-strong);}
[data-register="debugger"] button:disabled{color:var(--bt-text-disabled) !important;opacity:0.5;pointer-events:none;cursor:not-allowed;}
[data-register="debugger"] [class*="ct-button-xl-"],[data-register="debugger"] [class*="ct-button-text-xl-"]{height:2.125rem;padding:0 0.875em;align-items:center;border-radius:0.375rem !important;}
[data-register="debugger"] [class*="ct-button-lg-"],[data-register="debugger"] [class*="ct-button-text-lg-"]{height:1.75rem;padding:0 0.875em;align-items:center;}
[data-register="debugger"] [class*="ct-button-md-"],[data-register="debugger"] [class*="ct-button-text-md-"]{height:1.625rem;padding:0 0.75em;align-items:center;}
[data-register="debugger"] [class*="ct-button-sm-"],[data-register="debugger"] [class*="ct-button-text-sm-"]{height:1.5rem;padding:0 0.625em;align-items:center;}
[data-register="debugger"] [class*="ct-button-xs-"],[data-register="debugger"] [class*="ct-button-text-xs-"]{height:1.25rem;padding:0 0.5em;align-items:center;}
[data-register="debugger"] [class*="-button-"][class*="-primary"]{background-color:var(--bt-action-bg);color:var(--bt-action-fg);}
[data-register="debugger"] [class*="-button-"][class*="-primary"]:hover{background-color:var(--bt-action-bg-hover) !important;}
[data-register="debugger"] [class*="-button-"][class*="-tertiary"]{background-color:var(--bt-surface-hover);color:var(--bt-text-muted);}
[data-register="debugger"] [class*="-button-"][class*="-tertiary"]:disabled{border:0.03125em solid var(--bt-action-disabled-border);}
[data-register="debugger"] [class*="-button-"][class*="-primary"]:hover,[data-register="debugger"] [class*="-button-"][class*="-tertiary"]:hover{background-color:var(--bt-surface-hover);}
[data-register="debugger"] [class*="-button-"][class*="-primary"]:disabled,[data-register="debugger"] [class*="-button-"][class*="-tertiary"]:disabled{background-color:var(--bt-action-disabled-bg);}
[data-register="debugger"] [class*="-button-"][class*="-secondary"]{background-color:var(--bt-surface-raised);border:0.03125em solid var(--bt-border-default);color:var(--bt-text-muted);}
[data-register="debugger"] [class*="-button-"][class*="-secondary"]:hover{background-color:var(--bt-surface-overlay);}
[data-register="debugger"] [class*="-button-"][class*="-secondary"]:focus-visible:not(:disabled){background-color:var(--bt-surface-sunken);}
[data-register="debugger"] [class*="ct-button-sm-secondary"]{border:0em !important;}
[data-register="debugger"] [class*="ct-button-image-"]{background-position:center;background-size:auto 1em !important;background-repeat:no-repeat;border-radius:0.375em !important;align-items:center;justify-content:center;}
[data-register="debugger"] [class*="ct-button-image-xl-"]{width:2.125rem;max-width:2.125rem;height:2.125rem;max-height:2.125rem;}
[data-register="debugger"] [class*="ct-button-image-lg-"]{width:1.75rem;max-width:1.75rem;height:1.75rem;max-height:1.75rem;}
[data-register="debugger"] [class*="ct-button-image-md-"]{width:1.625rem;max-width:1.625rem;height:1.625rem;max-height:1.625rem;}
[data-register="debugger"] [class*="ct-button-image-sm-"]{width:1.5rem;max-width:1.5rem;height:1.5rem;max-height:1.5rem;}
[data-register="debugger"] [class*="ct-button-image-xs-"]{width:1.25rem;max-width:1.25rem;height:1.25rem;max-height:1.25rem;}
[data-register="debugger"] .ct-control-mark{width:auto;height:1em;flex:0 0 auto;pointer-events:none;}
[data-register="debugger"] .ct-control-mark path,[data-register="debugger"] line,[data-register="debugger"] polyline,[data-register="debugger"] polygon,[data-register="debugger"] circle,[data-register="debugger"] rect,[data-register="debugger"] ellipse{vector-effect:non-scaling-stroke;}
[data-register="debugger"] #category-image{background-size:1em auto !important;border:0.0625rem solid var(--bt-border-subtle) !important;background-color:var(--bt-surface-sunken);}
[data-register="debugger"] #category-image:hover{border-color:var(--bt-border-strong) !important;background-color:var(--bt-surface-sunken);}
[data-register="debugger"] #category-image.open{border-color:var(--bt-border-accent) !important;background-color:var(--bt-surface-sunken);}
[data-register="debugger"] #close-element{background-size:0.5em 0.5em !important;}
[data-register="debugger"] #backward-loop{background-size:0.5em !important;z-index:10;height:1.3em !important;width:1.3em !important;max-width:1.3em !important;max-height:1.3em !important;}
[data-register="debugger"] #forward-loop{background-size:0.5em !important;z-index:10;height:1.3em !important;width:1.3em !important;max-width:1.3em !important;max-height:1.3em !important;}
[data-register="debugger"] #trace-run-button{background-size:1.75em 1.75em !important;z-index:100;}
[data-register="debugger"] #hamburger-dropdown{z-index:100;}
[data-register="debugger"] .value-history-button{background-image:none !important;padding:0;position:relative;}
[data-register="debugger"] .value-history-button::before{content:'';display:block;flex:0 0 auto;width:0.75rem;height:0.75rem;background-color:var(--bt-text-default);mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTEuNTAxIDAuNUgxMi4wMDFWMTEuNTAxSDExLjUwMVYxMi4wMDFIMC41VjExLjUwMUgwVjAuNUgwLjVWMEgxMS41MDFWMC41Wk0xIDExLjAwMUg1LjVWNi41MzIyM0gxVjExLjAwMVpNNi41IDExLjAwMUgxMS4wMDFWNi41MzIyM0g2LjVWMTEuMDAxWk0xIDUuNTMyMjNINS41VjFIMVY1LjUzMjIzWk02LjUgNS41MzIyM0gxMS4wMDFWMUg2LjVWNS41MzIyM1oiIGZpbGw9IiNEREREREQiLz4KPC9zdmc+Cg==");mask-size:contain;mask-repeat:no-repeat;mask-position:center;}
[data-register="debugger"] .value-history-button:hover > .custom-tooltip{opacity:1;visibility:visible;}
[data-register="debugger"] .value-history-button .custom-tooltip{top:50%;left:calc(100% + 0.5rem);transform:translateY(-50%);z-index:1;}
[data-register="debugger"] .value-history-button .custom-tooltip:after{content:'';position:absolute;left:-1em;top:calc(50% - 0.5em);bottom:auto;border-width:0.5em;border-style:solid;border-color:transparent var(--bt-surface-raised) transparent transparent;}
[data-register="debugger"] .value-history-button[class*="ct-button-image-"]:hover > .custom-tooltip{top:50%;}
[data-register="debugger"] .ct-button-no-border{border:none !important;}
[data-register="debugger"] .custom-tooltip{display:block;position:absolute;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);top:100%;background-color:var(--bt-surface-raised);color:var(--bt-text-strong);padding:0.3125em 0.625em;font-size:0.75em;border-radius:0.25em;white-space:nowrap;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.2);opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;pointer-events:none;text-align:start;line-height:1em;}
[data-register="debugger"] .custom-tooltip.active{opacity:1;visibility:visible;top:-100%;height:1.5em;right:0.25em;}
[data-register="debugger"] .custom-tooltip.active:after{content:'';position:absolute;top:100%;left:unset;right:0.25em;border-width:0.5em;border-style:solid;border-color:var(--bt-surface-raised) transparent transparent transparent;}
[data-register="debugger"] .custom-tooltip:after{content:'';position:absolute;bottom:100%;left:calc(50% - 0.5em);border-width:0.5em;border-style:solid;border-color:transparent transparent var(--bt-surface-raised) transparent;}
[data-register="debugger"] [class*="ct-button-image-"]:hover > .custom-tooltip{opacity:1;visibility:visible;top:calc(100% + 0.3125em);}
[data-register="debugger"] .isonim-debug-controls button:disabled{pointer-events:auto;}
[data-register="debugger"] .ct-origin-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:1.25rem;min-width:1.25rem;padding:0 0.375rem;gap:0.25rem;border-radius:0.375rem !important;font-family:inherit;font-size:0.75rem;line-height:1;cursor:pointer;user-select:none;transition:background-color 250ms ease 100ms, color 250ms ease 100ms, border-color 250ms ease 100ms;vertical-align:middle;margin-left:0.5rem;background-color:var(--bt-surface-raised);border:0.0625rem solid var(--bt-border-subtle);color:var(--bt-text-muted);}
[data-register="debugger"] .ct-origin-badge:hover{background-color:var(--bt-surface-overlay);border-color:var(--bt-border-strong);}
[data-register="debugger"] .ct-origin-badge:focus-visible{outline:none;box-shadow:0 0 0 0.125em var(--bt-focus-ring);}
[data-register="debugger"] .ct-origin-badge:has(.ct-origin-badge-text:empty){width:1.25rem;max-width:1.25rem;padding:0;}
[data-register="debugger"] .ct-origin-badge .ct-origin-badge-icon{display:inline-block;width:1rem;height:1rem;background-color:var(--bt-text-default);mask-size:contain;mask-repeat:no-repeat;mask-position:center;flex:0 0 auto;}
[data-register="debugger"] .ct-origin-badge .ct-origin-badge-text{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
[data-register="debugger"] .ct-origin-badge .ct-origin-badge-text:empty{display:none;}
[data-register="debugger"] .ct-origin-badge.ct-origin-badge-icon-only{padding:0;width:1.25rem;max-width:1.25rem;}
[data-register="debugger"] .ct-origin-badge.ct-origin-badge-icon-only .ct-origin-badge-text{display:none;}
[data-register="debugger"] .ct-origin-badge.ct-origin-badge-placeholder{border-style:dashed;background-color:transparent;color:var(--bt-text-muted);padding:0.2em 0.5em;}
[data-register="debugger"] .ct-origin-badge.ct-origin-badge-placeholder .ct-origin-badge-icon{display:none;}
[data-register="debugger"] .ct-origin-icon-sigma .ct-origin-badge-icon{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJDb21wdXRhdGlvbmFsIG9yaWdpbiI+CiAgPHRpdGxlPkNvbXB1dGF0aW9uYWwgb3JpZ2luPC90aXRsZT4KICA8cGF0aCBkPSJNMyAyIEgxMSBMNyA3IEwxMSAxMiBIMyIgLz4KPC9zdmc+Cg==");}
[data-register="debugger"] .ct-origin-icon-quotation .ct-origin-badge-icon{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJjdXJyZW50Q29sb3IiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iTGl0ZXJhbCBvcmlnaW4iPgogIDx0aXRsZT5MaXRlcmFsIG9yaWdpbjwvdGl0bGU+CiAgPHBhdGggZD0iTTIgNCBINSBWNyBRNSA5IDMgOSBWOCBRNCA4IDQgNyBIMiBaIE05IDQgSDEyIFY3IFExMiA5IDEwIDkgVjggUTExIDggMTEgNyBIOSBaIiAvPgo8L3N2Zz4K");}
[data-register="debugger"] .ct-origin-icon-door .ct-origin-badge-icon{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJQYXJhbWV0ZXIgYXQgcmVjb3JkaW5nIHN0YXJ0Ij4KICA8dGl0bGU+UGFyYW1ldGVyIGF0IHJlY29yZGluZyBzdGFydDwvdGl0bGU+CiAgPHJlY3QgeD0iMyIgeT0iMiIgd2lkdGg9IjYiIGhlaWdodD0iMTAiIC8+CiAgPGNpcmNsZSBjeD0iNyIgY3k9IjciIHI9IjAuNiIgZmlsbD0iY3VycmVudENvbG9yIiAvPgogIDxwYXRoIGQ9Ik05IDcgSDEyIE0xMC41IDUuNSBMMTIgNyBMMTAuNSA4LjUiIC8+Cjwvc3ZnPgo=");}
[data-register="debugger"] .ct-origin-icon-globe .ct-origin-badge-icon{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJSZWFkIGZyb20gZXh0ZXJuYWwiPgogIDx0aXRsZT5SZWFkIGZyb20gZXh0ZXJuYWw8L3RpdGxlPgogIDxjaXJjbGUgY3g9IjciIGN5PSI3IiByPSI1IiAvPgogIDxwYXRoIGQ9Ik0yIDcgSDEyIE03IDIgUTQgNyA3IDEyIE03IDIgUTEwIDcgNyAxMiIgLz4KPC9zdmc+Cg==");}
[data-register="debugger"] .ct-origin-icon-clock-rewind .ct-origin-badge-icon{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJSZWNvcmRpbmcgc3RhcnQiPgogIDx0aXRsZT5SZWNvcmRpbmcgc3RhcnQ8L3RpdGxlPgogIDxjaXJjbGUgY3g9IjciIGN5PSI3IiByPSI1IiAvPgogIDxwYXRoIGQ9Ik03IDQgVjcgTDUgOCIgLz4KICA8cGF0aCBkPSJNMiAzIEwyIDYgTDUgNiIgLz4KPC9zdmc+Cg==");}
[data-register="debugger"] .ct-origin-icon-question .ct-origin-badge-icon{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJVbmtub3duIG9yaWdpbiI+CiAgPHRpdGxlPlVua25vd24gb3JpZ2luPC90aXRsZT4KICA8Y2lyY2xlIGN4PSI3IiBjeT0iNyIgcj0iNSIgLz4KICA8cGF0aCBkPSJNNSA1LjUgUTUgNCA3IDQgUTkgNCA5IDUuNSBROSA2LjggNyA3LjUgVjguNSIgLz4KICA8Y2lyY2xlIGN4PSI3IiBjeT0iMTAuNSIgcj0iMC41NSIgZmlsbD0iY3VycmVudENvbG9yIiBzdHJva2U9Im5vbmUiIC8+Cjwvc3ZnPgo=");}
[data-register="debugger"] .ct-origin-icon-hourglass .ct-origin-badge-icon{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJCdWRnZXQgb3IgZGVwdGggbGltaXQiPgogIDx0aXRsZT5CdWRnZXQgb3IgZGVwdGggbGltaXQ8L3RpdGxlPgogIDxwYXRoIGQ9Ik0zIDIgSDExIiAvPgogIDxwYXRoIGQ9Ik0zIDEyIEgxMSIgLz4KICA8cGF0aCBkPSJNMyAyIEwxMSAxMiIgLz4KICA8cGF0aCBkPSJNMTEgMiBMMyAxMiIgLz4KICA8cGF0aCBkPSJNNSA2IEg5IiAvPgo8L3N2Zz4K");}
[data-register="debugger"] [class*="ct-button-image-"][class*="ct-button-image-"]:not(:where(#isonim-debug-controls *)){border:0.0625rem solid var(--bt-border-subtle) !important;border-radius:0.375rem !important;}
[data-register="debugger"] [class*="ct-button-image-"][class*="ct-button-image-"]:not(:where(#isonim-debug-controls *)):hover:not(:disabled){border-color:var(--bt-border-strong) !important;}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/input.styl ── */
[data-register="debugger"] input{font-family:var(--bt-font-sans),var(--bt-font-sans-fallback) !important;font-size:0.875rem !important;padding:0.25em 0.75em 0.25em 0.75em;outline:none;color:var(--bt-text-default) !important;}
[data-register="debugger"] input:hover{color:var(--bt-text-strong) !important;}
[data-register="debugger"] input:focus,[data-register="debugger"] input:focus-visible{outline:none !important;box-shadow:none !important;border-color:var(--bt-border-accent) !important;color:var(--bt-text-strong) !important;}
[data-register="debugger"] input:not(:placeholder-shown):not(:disabled){border-color:var(--bt-border-accent);background:var(--bt-surface-sunken);color:var(--bt-text-strong) !important;}
[data-register="debugger"] input:disabled{border:0.0625rem solid var(--bt-action-disabled-border);background:var(--bt-action-disabled-bg);color:var(--bt-text-disabled) !important;pointer-events:none;cursor:not-allowed;}
[data-register="debugger"] input::placeholder{color:var(--bt-text-subtle);}
[data-register="debugger"] input:hover::placeholder,[data-register="debugger"] input:focus-visible::placeholder,[data-register="debugger"] input:not(:placeholder-shown):not(:disabled)::placeholder{color:var(--bt-text-strong);}
[data-register="debugger"] input:disabled::placeholder{color:var(--bt-text-disabled) !important;}
[data-register="debugger"] .ct-input-search-image{padding-left:1.875em !important;background-repeat:no-repeat !important;background-position:0.5em center !important;background-size:1em !important;}
[data-register="debugger"] .ct-input-form{height:2.125rem;max-height:2.125rem;border-radius:0.375rem;background:var(--bt-surface-sunken);border:0.0625rem solid var(--bt-border-subtle);}
[data-register="debugger"] .ct-input-form:hover{border-color:var(--bt-border-strong);}
[data-register="debugger"] .ct-input-com-pal{height:1.75rem;max-height:1.75rem;width:-moz-available;width:-webkit-fill-available;width:stretch;max-width:-moz-available;max-width:-webkit-fill-available;max-width:stretch;border-radius:0.375rem;border:0.0625rem solid var(--bt-border-subtle);background:var(--bt-surface-sunken);}
[data-register="debugger"] .ct-input-com-pal:hover{border-color:var(--bt-border-strong);color:var(--bt-text-strong);}
[data-register="debugger"] .ct-input-small,[data-register="debugger"] .ct-input-panel{border-radius:0.375rem;background:var(--bt-surface-sunken);}
[data-register="debugger"] .ct-input-small:hover,[data-register="debugger"] .ct-input-panel:hover{border:0.0625rem solid var(--bt-surface-raised);border-color:var(--bt-border-strong);color:var(--bt-text-strong);}
[data-register="debugger"] .ct-input-small{height:1.5rem;max-height:1.5rem;border:0.0625rem solid var(--bt-border-subtle);}
[data-register="debugger"] .ct-input-panel{width:-moz-available;width:-webkit-fill-available;width:stretch;height:1.625rem;max-height:1.625rem;border:0.0625rem solid var(--bt-border-subtle);}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/checkmark.styl ── */
[data-register="debugger"] .ct-checkmark{--ct-checkmark-size:1.5em;--ct-checkmark-radius:0.25em;--ct-checkmark-border-width:0.0625em;--ct-checkmark-icon-stroke:0.125em;--ct-checkmark-check-width:0.625em;--ct-checkmark-check-height:0.375em;--ct-checkmark-minus-width:0.625em;--ct-checkmark-minus-height:0.125em;--ct-checkmark-bg:transparent;--ct-checkmark-bg-hover:var(--bt-surface-overlay);--ct-checkmark-bg-disabled:var(--bt-surface-sunken);--ct-checkmark-border:var(--bt-border-default);--ct-checkmark-border-hover:var(--bt-border-strong);--ct-checkmark-border-focus:#2f81ff;--ct-checkmark-border-error:var(--bt-status-danger-border);--ct-checkmark-border-disabled:transparent;--ct-checkmark-icon:var(--bt-text-default);--ct-checkmark-icon-disabled:var(--bt-text-disabled);--ct-checkmark-icon-error:#f7b0b4;position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--ct-checkmark-size);block-size:var(--ct-checkmark-size);min-inline-size:var(--ct-checkmark-size);min-block-size:var(--ct-checkmark-size);flex:0 0 var(--ct-checkmark-size);box-sizing:border-box;margin:0;padding:0;border:var(--ct-checkmark-border-width) solid var(--ct-checkmark-border);border-radius:var(--ct-checkmark-radius);background:var(--ct-checkmark-bg);vertical-align:middle;pointer-events:none;transition:background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;}
[data-register="debugger"] .ct-checkmark::before{content:'';position:absolute;box-sizing:border-box;opacity:0;transition:opacity 0.14s ease, border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;}
[data-register="debugger"] .ct-checkmark[data-state="checked"]::before{inline-size:var(--ct-checkmark-check-width);block-size:var(--ct-checkmark-check-height);border-left:var(--ct-checkmark-icon-stroke) solid var(--ct-checkmark-icon);border-bottom:var(--ct-checkmark-icon-stroke) solid var(--ct-checkmark-icon);transform:translateY(-0.0625em) rotate(-45deg);opacity:1;}
[data-register="debugger"] .ct-checkmark[data-state="indeterminate"]::before{inline-size:var(--ct-checkmark-minus-width);block-size:var(--ct-checkmark-minus-height);border-radius:999em;background:var(--ct-checkmark-icon);opacity:1;}
[data-register="debugger"] .ct-checkmark[data-error="true"]{border-color:var(--ct-checkmark-border-error);}
[data-register="debugger"] .ct-checkmark[data-error="true"][data-state="checked"]::before{border-left-color:var(--ct-checkmark-icon-error);border-bottom-color:var(--ct-checkmark-icon-error);}
[data-register="debugger"] .ct-checkmark[data-error="true"][data-state="indeterminate"]::before{background:var(--ct-checkmark-icon-error);}
[data-register="debugger"] .ct-checkmark[data-size="sm"]{--ct-checkmark-size:1.25em;--ct-checkmark-check-width:0.5em;--ct-checkmark-check-height:0.3125em;--ct-checkmark-minus-width:0.5em;}
[data-register="debugger"] .ct-checkmark[data-size="md"]{--ct-checkmark-size:1.5em;}
[data-register="debugger"] .ct-checkmark[data-size="lg"]{--ct-checkmark-size:1.75em;--ct-checkmark-check-width:0.75em;--ct-checkmark-check-height:0.4375em;--ct-checkmark-minus-width:0.75em;}
[data-register="debugger"] .ct-checkmark-field{position:relative;display:inline-flex;align-items:center;gap:0.5em;cursor:pointer;user-select:none;margin-bottom:0em !important;padding-top:0.25em;padding-bottom:0.25em;}
[data-register="debugger"] .ct-checkmark-field[data-disabled="true"]{cursor:not-allowed;}
[data-register="debugger"] .ct-checkmark-input{position:absolute;opacity:0;inline-size:0.0625em;block-size:0.0625em;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
[data-register="debugger"] .ct-checkmark-label{font:inherit;color:inherit;line-height:1.2;}
[data-register="debugger"] .ct-checkmark-input:hover + .ct-checkmark,[data-register="debugger"] .ct-checkmark-field:hover .ct-checkmark{background:var(--ct-checkmark-bg-hover);border-color:var(--ct-checkmark-border-hover);}
[data-register="debugger"] .ct-checkmark-input:focus-visible + .ct-checkmark{border-color:var(--ct-checkmark-border-focus);box-shadow:0 0 0 0.0625em rgba(47, 129, 255, 0.18);}
[data-register="debugger"] .ct-checkmark-input:disabled + .ct-checkmark,[data-register="debugger"] .ct-checkmark-field[data-disabled="true"] .ct-checkmark{background:var(--ct-checkmark-bg-disabled);border-color:var(--ct-checkmark-border-disabled);}
[data-register="debugger"] .ct-checkmark-input:disabled + .ct-checkmark[data-state="checked"]::before,[data-register="debugger"] .ct-checkmark-field[data-disabled="true"] .ct-checkmark[data-state="checked"]::before{border-left-color:var(--ct-checkmark-icon-disabled);border-bottom-color:var(--ct-checkmark-icon-disabled);}
[data-register="debugger"] .ct-checkmark-input:disabled + .ct-checkmark[data-state="indeterminate"]::before,[data-register="debugger"] .ct-checkmark-field[data-disabled="true"] .ct-checkmark[data-state="indeterminate"]::before{background:var(--ct-checkmark-icon-disabled);}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/menu_item.styl ── */
[data-register="debugger"] .ct-menu-item{display:flex;align-items:center;gap:0.5em;padding:0 0.5em;height:2.25rem;width:100%;box-sizing:border-box;cursor:pointer;user-select:none;background:var(--bt-surface-overlay);color:var(--bt-text-strong);font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:inherit;line-height:1.25em;border:none;border-radius:0;outline:none;text-align:start;transition:background-color 0.12s ease;}
[data-register="debugger"] .ct-menu-item .ct-menu-item-icon{flex:0 0 1em;width:1em;height:1em;display:flex;align-items:center;justify-content:center;color:var(--bt-text-default);}
[data-register="debugger"] .ct-menu-item .ct-menu-item-label{font-size:0.875em;font-weight:400;color:var(--bt-text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-register="debugger"] .ct-menu-item .ct-menu-item-sublabel{font-size:0.875em;color:var(--bt-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-register="debugger"] .ct-menu-item .ct-menu-item-trailing{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:0.5em;height:0.75em;background-image:url("data:image/svg+xml,%3Csvg width='5' height='9' viewBox='0 0 5 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.353516 8.35352L4.35352 4.35352L0.353515 0.353516' stroke='%23DDDDDD' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:contain;}
[data-register="debugger"] .ct-menu-item:hover:not(.ct-menu-item--disabled){background:var(--bt-surface-hover);}
[data-register="debugger"] .ct-menu-item.ct-menu-item--active:not(.ct-menu-item--disabled){outline:none;background:var(--bt-focus-ring);}
[data-register="debugger"] .ct-menu-item.ct-menu-item--active:not(.ct-menu-item--disabled) .ct-menu-item-sublabel{color:var(--bt-text-muted);}
[data-register="debugger"] .ct-menu-item.ct-menu-item--disabled{cursor:not-allowed;pointer-events:none;}
[data-register="debugger"] .ct-menu-item.ct-menu-item--disabled .ct-menu-item-icon{color:var(--bt-text-disabled);}
[data-register="debugger"] .ct-menu-item.ct-menu-item--disabled .ct-menu-item-label,[data-register="debugger"] .ct-menu-item.ct-menu-item--disabled .ct-menu-item-sublabel{color:var(--bt-text-disabled);}
[data-register="debugger"] .ct-menu-item.ct-menu-item--disabled .ct-menu-item-trailing{opacity:0.3;}
[data-register="debugger"] .ct-menu-item.ct-menu-item--disabled .ct-checkmark{--ct-checkmark-border:var(--bt-action-disabled-border);--ct-checkmark-icon:var(--bt-text-disabled);}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/tab.styl ── */
[data-register="debugger"] .ct-tab{display:inline-flex;align-items:center;justify-content:center;padding:0.5em 0.75em;box-sizing:border-box;background:transparent;color:var(--bt-text-strong);font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:inherit;line-height:1.2;border:none;border-bottom:0.125em solid var(--bt-border-default);border-radius:0.375em;outline:none;cursor:pointer;user-select:none;text-align:center;transition:background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;}
[data-register="debugger"] .ct-tab:hover:not([data-disabled="true"]):not([data-selected="true"]){background:var(--bt-surface-hover);border-bottom-color:var(--bt-text-strong);}
[data-register="debugger"] .ct-tab[data-selected="true"]{background:var(--bt-surface-hover);border-bottom-color:var(--bt-border-accent);color:var(--bt-accent-default);}
[data-register="debugger"] .ct-tab:focus-visible:not([data-disabled="true"]),[data-register="debugger"] .ct-tab[data-focused="true"]:not([data-disabled="true"]){outline:none;border-bottom:none;}
[data-register="debugger"] .ct-tab[data-disabled="true"]{cursor:not-allowed;pointer-events:none;color:var(--bt-text-disabled);border-bottom-color:var(--bt-border-default);}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/notifications.styl ── */
[data-register="debugger"] .status-notification.ct-notification{display:flex;flex-direction:column;align-items:stretch;width:29.125rem;max-width:calc(100vw - 1rem);position:relative;box-sizing:border-box;border:0.0625rem solid transparent;border-radius:0.5rem;padding:0.75rem 0.875rem;gap:0.75rem;background-color:var(--bt-surface-raised);color:var(--bt-text-strong);}
[data-register="debugger"] .status-notification.ct-notification[class*="-tertiary"]{width:auto;max-width:29.125rem;margin:0;padding:0;gap:0.375rem;border-color:transparent;border-radius:0;background-color:transparent;}
[data-register="debugger"] .status-notification.ct-notification .notification-wrapper{display:flex;align-items:flex-start;width:100%;gap:0.625rem;}
[data-register="debugger"] .status-notification.ct-notification .notification-icon{width:1.125rem;min-width:1.125rem;height:1.125rem;min-height:1.125rem;background-repeat:no-repeat;background-size:1.125rem;background-position:center;margin-top:0.125rem;}
[data-register="debugger"] .status-notification.ct-notification .notification-message{flex:1;min-width:0;color:inherit;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:0.875rem;font-weight:400;letter-spacing:-0.01em;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}
[data-register="debugger"] .status-notification.ct-notification .notification-button{flex:0 0 auto;width:1.125rem;min-width:1.125rem;height:1.125rem;min-height:1.125rem;cursor:pointer;user-select:none;opacity:0.72;background-repeat:no-repeat;background-position:center;background-size:0.875rem;border-radius:0.25rem;}
[data-register="debugger"] .status-notification.ct-notification .notification-button:hover{opacity:1;}
[data-register="debugger"] .status-notification.ct-notification .notification-action-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;padding-left:1.75rem;}
[data-register="debugger"] .status-notification.ct-notification .notification-action-button{display:inline-flex;align-items:center;justify-content:center;width:fit-content;min-height:1.75rem;padding:0 0.75rem;border:0.0625rem solid currentColor;border-radius:999px;background-color:transparent;color:inherit;cursor:pointer;user-select:none;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:0.8125rem;line-height:1.2;}
[data-register="debugger"] .status-notification.ct-notification .notification-action-button:hover{opacity:0.85;}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-info-primary{border-color:var(--bt-status-info-border);background-color:var(--bt-surface-raised);color:var(--bt-text-strong);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-warning-primary{border-color:var(--bt-status-warning-border);background-color:var(--bt-surface-raised);color:var(--bt-text-strong);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-error-primary{border-color:var(--bt-status-danger-border);background-color:var(--bt-surface-raised);color:var(--bt-text-strong);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-success-primary{border-color:var(--bt-status-success-border);background-color:var(--bt-surface-raised);color:var(--bt-text-strong);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-info-secondary{border-color:var(--bt-status-info-bg);background-color:var(--bt-status-info-bg);color:var(--bt-text-strong);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-warning-secondary{border-color:var(--bt-status-warning-bg);background-color:var(--bt-status-warning-bg);color:var(--bt-text-strong);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-error-secondary{border-color:var(--bt-status-danger-bg);background-color:var(--bt-status-danger-bg);color:var(--bt-text-strong);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-success-secondary{border-color:var(--bt-status-success-bg);background-color:var(--bt-status-success-bg);color:var(--bt-text-strong);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-info-tertiary{color:var(--bt-status-info-fg);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-warning-tertiary{color:var(--bt-status-warning-fg);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-error-tertiary{color:var(--bt-status-danger-fg);}
[data-register="debugger"] .status-notification.ct-notification.ct-notification-success-tertiary{color:var(--bt-status-success-fg);}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/shared_widgets.styl ── */
[data-register="debugger"] ::-webkit-scrollbar{width:0.5rem;height:0.5rem;background-color:transparent;}
[data-register="debugger"] ::-webkit-scrollbar-corner{background-color:var(--bt-surface-sunken);}
[data-register="debugger"] ::-webkit-scrollbar:hover{background-color:transparent;}
[data-register="debugger"] ::-webkit-scrollbar-thumb:vertical,[data-register="debugger"] ::-webkit-scrollbar-thumb:horizontal{background-color:var(--bt-surface-hover);}
[data-register="debugger"] ::-webkit-scrollbar-thumb:vertical:hover,[data-register="debugger"] ::-webkit-scrollbar-thumb:horizontal:hover,[data-register="debugger"] ::-webkit-scrollbar-thumb:vertical:active,[data-register="debugger"] ::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--bt-surface-hover);}
[data-register="debugger"] input::-webkit-input-placeholder{color:var(--bt-text-default);}
[data-register="debugger"] input:-moz-placeholder{color:var(--bt-text-default);}
[data-register="debugger"] input::-moz-placeholder{color:var(--bt-text-default);}
[data-register="debugger"] .hidden{display:none !important;}
[data-register="debugger"] .chart-line{width:100%;height:100%;position:relative;}
[data-register="debugger"] .chart-results-container{height:inherit;width:inherit;position:relative;}
[data-register="debugger"] .chart-results-container .view-inactive{display:none;visibility:hidden;}
[data-register="debugger"] .chartjs-render-monitor{width:100% !important;height:100% !important;min-height:170px;}
[data-register="debugger"] :root{accent-color:var(--bt-focus-ring);}
[data-register="debugger"] *:focus:not(:focus-visible){outline:none !important;box-shadow:none !important;}
[data-register="debugger"] [data-focus-mode="mouse"] *:focus{outline:none !important;box-shadow:none !important;}
[data-register="debugger"] html,[data-register="debugger"] body{overflow:hidden;}
[data-register="debugger"] html,[data-register="debugger"] body{padding:0;margin:0;}
[data-register="debugger"] body{font-family:var(--bt-font-sans),var(--bt-font-sans-fallback), sans-serif !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bt-surface-raised) !important;}
[data-register="debugger"] [data-tippy-root]{max-width:calc(100vw - 0.625em);}
[data-register="debugger"] .tippy-box{border-radius:0.25em;font-size:inherit;}
[data-register="debugger"] .tippy-box[data-placement^="top"] > .tippy-arrow::before{bottom:-0.4375em;border-width:0.5em 0.5em 0;}
[data-register="debugger"] .tippy-box[data-placement^="bottom"] > .tippy-arrow::before{top:-0.4375em;border-width:0 0.5em 0.5em;}
[data-register="debugger"] .tippy-box[data-placement^="left"] > .tippy-arrow::before{right:-0.4375em;border-width:0.5em 0 0.5em 0.5em;}
[data-register="debugger"] .tippy-box[data-placement^="right"] > .tippy-arrow::before{left:-0.4375em;border-width:0.5em 0.5em 0.5em 0;}
[data-register="debugger"] .tippy-arrow{width:1em;height:1em;}
[data-register="debugger"] .tippy-content{padding:0.3125em 0.5625em;}
[data-register="debugger"] .separate-bar{width:0px;height:1em;border-left:0.031em solid var(--bt-border-subtle);}
[data-register="debugger"] :root{--caption-bar-height:2.125rem;--caption-bar-padding-bottom:0.125rem;}
[data-register="debugger"] :root:has(> body > #welcomeScreen:not([style*="display: none"]):not([style*="display:none"]) > *){--caption-bar-height:2.375rem;--caption-bar-padding-bottom:0.375rem;}
[data-register="debugger"] #root-container{position:fixed;height:"calc(100vh - %s - 2rem)" % unquote("var(--caption-bar-height)");top:unquote("var(--caption-bar-height)");left:0;right:0;z-index:0;padding-left:0;padding-right:0;display:flex;flex-direction:column;min-height:0;}
[data-register="debugger"] #ROOT{background-color:var(--bt-surface-raised) !important;color:var(--bt-text-strong);height:100%;flex:1;min-width:0;min-height:0;position:relative;overflow:hidden;box-sizing:border-box;padding-right:0.25em;padding-left:0.25em;}
[data-register="debugger"] #main{font-size:20px;display:flex;flex-wrap:wrap;flex-direction:row;width:100%;}
[data-register="debugger"] #dock{height:80%;}
[data-register="debugger"] .highlight{animation:ct-line-flash 2s ease-out forwards;background-color:var(--bt-surface-sunken) !important;}
[data-register="debugger"] .value-expanded-compound::before{content:'';position:absolute;left:0.72em;top:1.25em;bottom:0;width:0.0625em;background-color:var(--bt-text-strong);opacity:0.2;}
[data-register="debugger"] .value-load-more-button{width:100%;}
[data-register="debugger"] .component-container{font-family:var(--bt-font-sans),var(--bt-font-sans-fallback) !important;font-size:inherit !important;line-height:1.5em !important;font-weight:400 !important;width:100%;height:100%;}
[data-register="debugger"] .component-container:focus{outline:0px;}
[data-register="debugger"] .hovered{opacity:0.6;}
[data-register="debugger"] .panel{font-size:18px;border-color:var(--bt-text-strong);border-width:1px;border-style:solid;overflow:hidden;display:flex;}
[data-register="debugger"] .r{opacity:1;}
[data-register="debugger"] .panel-width{flex-basis:100%;flex-direction:column;display:flex;width:100%;}
[data-register="debugger"] .absolute-panel{position:absolute;}
[data-register="debugger"] .unselectable{user-select:none;}
[data-register="debugger"] .unselectable #trace-query{height:18px;font-size:16px;}
[data-register="debugger"] .dataTables_filter{display:none;}
[data-register="debugger"] #trace-q{width:100%;}
[data-register="debugger"] .indeterminate-checkmark{border:1px solid var(--bt-border-subtle);border-radius:2.5px;display:flex;position:absolute;top:5px;left:0;width:15px;height:15px;background-color:var(--bt-surface-hover);}
[data-register="debugger"] .indeterminate-checkmark::after{content:"-";display:flex;position:relative;align-items:center;transform:translateX(4px);}
[data-register="debugger"] .checkbox{display:none;width:20px !important;margin-left:0 !important;margin-right:5;}
[data-register="debugger"] .checkbox::after{content:"";position:absolute;display:none;}
[data-register="debugger"] .checkmark::after{content:"";position:absolute;display:none;}
[data-register="debugger"] input:checked ~ .checkmark:after{display:block;}
[data-register="debugger"] .code-tooltip{display:block;padding-left:4px;padding-right:4px;width:fit-content;font-size:14px;line-height:24px;overflow-wrap:normal;max-width:calc(100% - 8px);position:absolute;background-color:var(--bt-surface-hover);z-index:3;font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);margin-bottom:0;list-style-type:none;opacity:0;visibility:hidden;transition:opacity 0.3s ease-in-out;white-space:normal;pointer-events:none;border-radius:6px;}
[data-register="debugger"] .code-tooltip .active-line .excerpt-code{color:var(--bt-text-strong) !important;}
[data-register="debugger"] .code-tooltip .active-line{background:var(--bt-surface-raised);border-radius:4px;width:fit-content;padding-right:4px;}
[data-register="debugger"] .code-tooltip li{padding-left:4px;}
[data-register="debugger"] .checkmark{border:0.5px solid var(--bt-border-default);border-radius:2.5px;display:block;position:absolute;top:6px;left:0;width:14px;height:14px;background-color:var(--bt-surface-hover);}
[data-register="debugger"] .checkmark::after{left:3.6px;}
[data-register="debugger"] .checkmark::after else{top:1.6px;}
[data-register="debugger"] .checkmark::after{width:6px;height:8px;border:solid var(--bt-status-success-fg);border-width:0 2px 2px 0;border-radius:2px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
[data-register="debugger"] .dropdown-list{border-radius:0.375rem;background:var(--bt-surface-overlay);color:var(--bt-surface-sunken);display:flex;flex-direction:column;margin-top:0.375rem;right:0;min-width:fit-content;position:relative;z-index:50 + 7;user-select:none;}
[data-register="debugger"] .dropdown-list-item{position:relative;color:var(--bt-text-strong);user-select:none;list-style-type:none;width:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:bold;display:flex;align-items:center;justify-content:center;}
[data-register="debugger"] .hamburger-dropdown + .dropdown-list.active{width:fit-content;}
[data-register="debugger"] .run-trace-button .custom-tooltip{right:0px;}
[data-register="debugger"] .run-trace-button .custom-tooltip:after{left:90%;}
[data-register="debugger"] .eventLog-medium-control-button .custom-tooltip{overflow-wrap:normal;white-space:normal;}
[data-register="debugger"] .custom-noir-icon::before{content:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0MDAgNDAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDAgNDAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNS40LDEyMnYtMTguNmw4NC4zLTM0LjZsMTIuMSw1LjJ2NDIuNWMwLDAsMzkuNS00OC40LDkxLjItNDguNHM3MC42LDQ0LjUsNzAuNiw2NC40CgljNy4yLTE0LjQsMjAuOS0zNS42LDI1LjItNDAuNUMzMDguOSw4MC4xLDMyMi41LDY5LDM0Ny40LDY5YzI1LjUsMCw0MS44LDE1LjQsNDEuOCwzOS41YzAsMjMuNy0xOS42LDMzLjctMzYuMywzMy43CgljLTE3LjMsMC0yOS4xLTEwLjUtNDEuMi0yMi45Yy00LjQsNC4xLTIxLjIsMTQuNy0zNCw0OWMwLDMyLjQsMCwxMzQuMiwwLDEzNC4ybDMzLjcsNy40djIyLjZIMTc1LjhWMzEwbDMzLjQtNy40di0xNjIKCWMwLDAtMi4zLTI1LjgtMzEtMjUuOHMtNjYuMywyNS44LTY2LjMsMjUuOHYxNjJsMzMuNyw3LjR2MjIuNmgtMTMwVjMxMGwzMy45LTcuNFYxMjYuOUwxNS40LDEyMnoiLz4KPC9zdmc+Cg==");display:block;width:1em;height:1em;position:absolute;transform:translate(0.24em, 0.24em);}
[data-register="debugger"] .empty-overlay{display:flex;width:inherit;height:inherit;justify-content:center;align-items:center;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:0.875rem;opacity:0.6;line-height:1.25rem;box-sizing:border-box;padding-left:2.5rem;padding-right:2.5rem;text-align:center;overflow-wrap:break-word;}
[data-register="debugger"] .jstree-default-contextmenu{display:none !important;visibility:hidden !important;}
[data-register="debugger"] .ct-picker{position:relative;flex-shrink:0;}
[data-register="debugger"] .ct-picker-trigger{display:flex;align-items:center;height:1.625rem;max-height:1.625rem;padding:0 0.625em;cursor:pointer;gap:0.375em;user-select:none;border-radius:0.5em;border:0.03125em solid var(--bt-border-default);background:var(--bt-surface-raised);font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:0.75rem;color:var(--bt-text-muted);white-space:nowrap;min-width:7.5em;}
[data-register="debugger"] .ct-picker-trigger:hover{background:var(--bt-surface-overlay);color:var(--bt-text-strong);}
[data-register="debugger"] .ct-picker-trigger.ct-picker-trigger--open{border-color:var(--bt-border-accent);color:var(--bt-text-strong);}
[data-register="debugger"] .ct-picker-chevron{display:flex;align-items:center;flex-shrink:0;opacity:0.6;}
[data-register="debugger"] .ct-picker-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
[data-register="debugger"] .ct-picker-dropdown{background:var(--bt-surface-raised);border:0.03125rem solid var(--bt-border-default);border-radius:0.375rem;box-shadow:none;}
[data-register="debugger"] .ct-picker-dropdown::-webkit-scrollbar,[data-register="debugger"] .ct-picker-dropdown ::-webkit-scrollbar{width:0.375rem;height:0.375rem;}
[data-register="debugger"] .ct-picker-dropdown{overflow:hidden;animation:ct-dropdown-reveal 120ms ease-out;}
[data-register="debugger"] .ct-picker-dropdown{position:absolute;top:"calc(100% + %s)" % 0.375rem;left:0;right:0;z-index:100;padding:0.25em;max-height:12.5em;overflow-y:auto;}
[data-register="debugger"] .ct-picker--chevron-left .ct-picker-trigger{flex-direction:row;}
[data-register="debugger"] .ct-picker--chevron-right .ct-picker-trigger{flex-direction:row-reverse;}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/text_editor.styl ── */
[data-register="debugger"] #context-menu-container{width:fit-content;display:none;flex-direction:column;position:fixed;}
[data-register="debugger"] #context-menu-container{background:var(--bt-surface-raised);border:0.03125rem solid var(--bt-border-default);border-radius:0.375rem;box-shadow:none;}
[data-register="debugger"] #context-menu-container::-webkit-scrollbar,[data-register="debugger"] #context-menu-container ::-webkit-scrollbar{width:0.375rem;height:0.375rem;}
[data-register="debugger"] #context-menu-container{overflow:hidden;animation:ct-dropdown-reveal 120ms ease-out;}
@media (prefers-reduced-motion: reduce){
[data-register="debugger"] #context-menu-container{animation:none;}
}
[data-register="debugger"] #context-menu-container{font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:0.875em;z-index:1000;}
[data-register="debugger"] .context-menu-item-container:first-child .context-menu-item{border-radius:0.375rem 0.375rem 0 0;}
[data-register="debugger"] .context-menu-item-container:last-child .context-menu-item{border-bottom:none;border-radius:0 0 0.375rem 0.375rem;}
[data-register="debugger"] .context-menu-item-container:has(+ .context-menu-hint) .context-menu-item{border-bottom:none;border-radius:0;}
[data-register="debugger"] .context-menu-item,[data-register="debugger"] .context-menu-hint{pointer-events:none;cursor:default;user-select:none;padding:0.375rem 0.75rem;font-size:0.6875rem;line-height:1.4;white-space:nowrap;color:var(--bt-text-muted);opacity:0.72;border-top:0.0625rem solid var(--bt-border-subtle);border-radius:0 0 0.375rem 0.375rem;}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/event_log.styl ── */
[data-register="debugger"] .eventLogComponent-columns{position:relative;}
[data-register="debugger"] .eventLog-switch{display:none;}
[data-register="debugger"] .eventLog-categories{display:inherit;flex-wrap:wrap;}
[data-register="debugger"] .eventLog-medium-control-button{user-select:none;border-radius:6px;color:var(--bt-text-strong);white-space:nowrap;cursor:pointer;height:28px;margin-left:10px;background-color:var(--bt-surface-sunken);text-align:center;transform:rotate(0deg);width:fit-content;position:relative;z-index:1;display:flex;align-items:center;justify-content:start;padding-left:8px;padding-right:8px;font-weight:400;}
[data-register="debugger"] .eventLog-medium-control-button:hover{background-color:var(--bt-surface-sunken);color:var(--bt-text-strong);}
[data-register="debugger"] .eventLog-medium-control-button:active{background-color:var(--bt-surface-hover);}
[data-register="debugger"] .eventLog-medium-control-button.active{background-color:var(--bt-surface-hover);}
[data-register="debugger"] .eventLog-medium-control-button .custom-tooltip{width:200px;text-align:start;font-size:12px;line-height:16px;right:-46px;}
[data-register="debugger"] #eventLog-category-filter{z-index:4;}
[data-register="debugger"] #eventLog-category-onlytrace{z-index:3;}
[data-register="debugger"] #eventLog-category-only-recorded-event{z-index:2;}
[data-register="debugger"] .hamburger-dropdown-container{position:relative;display:flex;flex-direction:column;align-items:start;}
[data-register="debugger"] .hamburger-dropdown{border-radius:6px;color:var(--bt-text-strong);cursor:pointer;height:24px;background-color:var(--bt-surface-hover);right:0;width:24px;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;}
[data-register="debugger"] .hamburger-dropdown .fa-bars{height:100%;width:100%;display:flex;justify-content:center;align-items:center;}
[data-register="debugger"] .hamburger-dropdown:focus{outline:none !important;box-shadow:none !important;cursor:pointer;background-color:var(--bt-surface-sunken);}
[data-register="debugger"] .hamburger-dropdown:focus-visible{outline:none !important;box-shadow:inset 0 0 0 0.125em var(--bt-focus-ring) !important;cursor:pointer;background-color:var(--bt-surface-sunken);}
[data-register="debugger"] .hamburger-dropdown:hover{background-color:var(--bt-surface-sunken);color:var(--bt-text-strong);}
[data-register="debugger"] .dropdown-container{position:absolute;display:flex;flex-direction:column;width:unquote("min(40em, calc(100vw - 2em))");max-width:unquote("calc(100vw - 2em)");border-radius:0.375rem;border:0.0625em solid var(--bt-border-subtle);background:var(--bt-surface-raised);color:var(--bt-text-strong);z-index:50 + 7;user-select:none;transform-origin:top left;overflow:hidden;box-shadow:0 1em 2.5em rgba(0, 0, 0, 0.32);top:100%;font-size:0.875rem;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);}
[data-register="debugger"] .dropdown-container::-webkit-scrollbar,[data-register="debugger"] .dropdown-container ::-webkit-scrollbar{width:0.375rem;height:0.375rem;}
[data-register="debugger"] .dropdown-list{display:flex;flex-direction:column;width:100%;margin:0 !important;padding:0;list-style:none;background:var(--bt-surface-overlay);}
[data-register="debugger"] .dropdown-list .dropdown-list-item{width:fit-content;min-width:0;display:flex;align-items:center;}
[data-register="debugger"] .dropdown-list .dropdown-list-item .ct-checkmark-field{width:100%;min-width:0;align-items:center;gap:0.625em;color:var(--bt-text-strong);line-height:1.15;}
[data-register="debugger"] .dropdown-list .dropdown-list-item .ct-checkmark{--ct-checkmark-size:1rem;--ct-checkmark-border:var(--bt-border-default);--ct-checkmark-border-hover:var(--bt-border-strong);--ct-checkmark-bg-hover:var(--bt-surface-overlay);}
[data-register="debugger"] .dropdown-list .dropdown-list-item .ct-checkmark-label{min-width:0;white-space:nowrap;}
[data-register="debugger"] table.dataTable tbody tr:not(.active):hover{background-color:var(--bt-surface-hover);}
[data-register="debugger"] .dropdown-list-row{display:grid;grid-template-columns:9em minmax(0, 1fr);align-items:stretch;min-height:2em;border-top:0.0625em solid var(--bt-border-subtle);list-style:none;}
[data-register="debugger"] .dropdown-list-row:first-child{border-top:none;}
[data-register="debugger"] .dropdown-list-row:hover,[data-register="debugger"] .dropdown-list-row:hover > .ct-checkmark-field{background:var(--bt-surface-hover);}
[data-register="debugger"] .dropdown-list-row > .ct-checkmark-field{padding:0.25em 0.5em;align-items:center;gap:0.375em;color:var(--bt-text-muted);font-weight:500;line-height:1.15;border-right:0.0625em solid var(--bt-border-subtle);background:var(--bt-surface-overlay);}
[data-register="debugger"] .dropdown-list-row > .ct-checkmark-field .ct-checkmark{--ct-checkmark-size:1rem;--ct-checkmark-border:var(--bt-border-default);--ct-checkmark-border-hover:var(--bt-border-strong);--ct-checkmark-bg-hover:var(--bt-surface-overlay);}
[data-register="debugger"] .dropdown-kind-items{display:flex;flex-wrap:wrap;align-items:center;gap:0.125em 0.75em;padding:0.25em 0.625em;}
[data-register="debugger"] .dropdown-kind-items .ct-checkmark-field{align-items:center;gap:0.375em;color:var(--bt-text-strong);line-height:1.15;white-space:nowrap;}
[data-register="debugger"] .dropdown-kind-items .ct-checkmark-field .ct-checkmark{--ct-checkmark-size:1rem;--ct-checkmark-border:var(--bt-border-default);--ct-checkmark-border-hover:var(--bt-border-strong);--ct-checkmark-bg-hover:var(--bt-surface-overlay);}
[data-register="debugger"] .toggle-buttons{display:grid;grid-template-columns:max-content max-content 1fr max-content;column-gap:0.125rem;padding:0 0.5rem;background:var(--bt-surface-raised);align-items:center;min-height:2.3125rem;border-bottom:0.0625rem solid var(--bt-border-subtle);}
[data-register="debugger"] .toggle-buttons::before{content:"";grid-row:1;grid-column:1 / 3;height:1.625rem;box-sizing:border-box;background-color:var(--bt-surface-overlay);border:0.0625rem solid var(--bt-border-subtle);border-radius:0.375rem;}
[data-register="debugger"] .toggle-buttons .toggle-enabled-wrapper{grid-row:1;grid-column:4;display:flex;align-items:center;gap:0.375em;padding-right:0.25em;}
[data-register="debugger"] .toggle-buttons .ct-tab{grid-row:1;}
[data-register="debugger"] .toggle-buttons .ct-tab{display:flex;align-items:center;height:1.25rem;flex:0 0 auto !important;padding:0 0.625rem;border:none;border-radius:0.3125rem !important;background-color:transparent;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-weight:400;font-size:0.75rem;line-height:1rem;white-space:nowrap;color:var(--bt-text-muted);cursor:pointer;}
[data-register="debugger"] .toggle-buttons .ct-tab.active,[data-register="debugger"] .toggle-buttons .ct-tab[data-selected="true"]{background-color:var(--bt-surface-sunken);color:var(--bt-text-strong);}
[data-register="debugger"] .toggle-buttons .ct-tab{transition:none;}
[data-register="debugger"] .toggle-buttons .ct-tab:nth-of-type(1){grid-column:1;margin-left:0.1875rem;}
[data-register="debugger"] .toggle-buttons .ct-tab:nth-of-type(2){grid-column:2;margin-right:0.1875rem;}
[data-register="debugger"] .toggle-buttons .ct-tab:hover:not([data-disabled="true"]):not([data-selected="true"]){background:transparent;color:var(--bt-text-muted);}
[data-register="debugger"] .toggle-buttons .ct-tab[data-selected="true"]{background:var(--bt-surface-sunken);color:var(--bt-text-strong);}
[data-register="debugger"] .eventLog{font-family:Arial, Helvetica, sans-serif;height:100%;display:flex;flex-direction:column;}
[data-register="debugger"] .eventLog > .ct-flex{padding-left:0.5rem;padding-right:0.5rem;}
[data-register="debugger"] .eventLog > .data-tables-footer{padding-left:0.5rem;padding-right:0.5rem;flex:0 0 auto;min-height:2.75em;align-items:center;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:0.75rem;line-height:1.1;color:var(--bt-text-strong);}
[data-register="debugger"] .eventLog > .data-tables-footer .data-tables-footer-info{margin-right:0;gap:0.25em;align-items:center;font-variant-numeric:tabular-nums;}
[data-register="debugger"] .eventLog > .data-tables-footer .data-tables-footer-info .data-tables-footer-end-row,[data-register="debugger"] .eventLog > .data-tables-footer .data-tables-footer-info .data-tables-footer-rows-count{padding-left:0;padding-right:0;}
[data-register="debugger"] .eventLog > .data-tables-footer .data-tables-footer-input{width:4.5em;min-width:4.5em;max-width:4.5em;height:1.25rem;max-height:1.25rem;margin:0em 0em !important;padding:0 0.75em;border-radius:0.5em;border:0.0625rem solid var(--bt-border-subtle);background:var(--bt-surface-sunken);color:var(--bt-text-strong) !important;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:1em !important;line-height:1;text-align:left;box-sizing:border-box;}
[data-register="debugger"] .eventLog > .data-tables-footer .data-tables-footer-input:hover{border-color:var(--bt-border-strong);background:var(--bt-surface-sunken);}
[data-register="debugger"] .eventLog > .data-tables-footer .data-tables-footer-input:focus-visible{outline:none !important;background:var(--bt-surface-sunken);}
[data-register="debugger"] .eventLog .eventLog-detailed-table{display:none;}
[data-register="debugger"] .eventLog .eventLog-columns{flex-basis:15%;}
[data-register="debugger"] .eventLog .eventLog-columns .eventLog-button{width:50px !important;}
[data-register="debugger"] .eventLog .eventLog-index{min-width:5ch;max-width:5ch;padding-left:0.5em;text-align:center;}
[data-register="debugger"] .eventLog .eventLog-event{background-repeat:no-repeat;width:1.125em;position:relative;cursor:pointer;min-width:2.3ch !important;max-width:2.3ch !important;height:1.5em;display:flex;align-items:center;}
[data-register="debugger"] .eventLog .eventLog-event .row-expander{background-size:2ch !important;height:1.125em !important;background-position:center !important;min-width:2.3ch !important;max-width:2.3ch !important;}
[data-register="debugger"] .eventLog .eventLog-text{margin-left:0.9375em;flex:auto;margin-right:0.9375em;display:flex;overflow:visible;padding-right:0.5em;}
[data-register="debugger"] .eventLog .eventLog-fullpath{min-width:20%;max-width:20%;flex:auto;}
[data-register="debugger"] .eventLog .eventLog-lowlevellocation{min-width:25%;max-width:25%;flex:auto;}
[data-register="debugger"] .eventLog .eventLog-events{display:flex;flex-basis:50%;}
[data-register="debugger"] .eventLog .eventLog-events .dropdown{width:auto;}
[data-register="debugger"] .eventLog .eventLog-button{width:150px;margin-left:10px;margin-right:10px;margin-top:14px;margin-bottom:14px;padding:0;font-size:15px;font-weight:bold;height:32px;line-height:20px;text-align:center;border-radius:10px;border:0;cursor:pointer;background-color:var(--bt-surface-hover);color:var(--bt-text-muted);}
[data-register="debugger"] .eventLog .eventLog-normal-color-button,[data-register="debugger"] .eventLog-selected-kind,[data-register="debugger"] .eventLog-selected-category{color:var(--bt-surface-sunken);}
[data-register="debugger"] .eventLog .eventLog-button i{margin-left:5px;vertical-align:-2px;color:var(--bt-text-default);}
[data-register="debugger"] .eventLog .eventLog-header{position:relative;z-index:1;height:fit-content;display:flex;}
[data-register="debugger"] .eventLog .eventLog-detailed-index{width:calc(20%) !important;color:black;}
[data-register="debugger"] .eventLog .eventLog-detailed-event{width:calc(10%) !important;}
[data-register="debugger"] .eventLog .eventLog-detailed-location{width:calc(70%) !important;height:0.125em;}
[data-register="debugger"] .eventLog .eventLog-detailed-text{width:calc(100%) !important;float:left;}
[data-register="debugger"] .eventLog .eventLog-detailed-table > :nth-child(1){display:none;}
[data-register="debugger"] .eventLog .eventLog-detailed-table > :nth-child(1) tr{display:flex;flex-direction:column;background-color:var(--bt-surface-sunken);width:100%;border:0.0625em var(--bt-text-strong) solid;margin-bottom:1.25em;}
[data-register="debugger"] .eventLog .eventLog-detailed-table > :nth-child(1) thead tr{height:1.25em;}
[data-register="debugger"] label{text-align:start;min-width:110px;color:var(--bt-text-strong);font-weight:400;}
[data-register="debugger"] .eventLog-cell{text-overflow:ellipsis;white-space:pre;overflow:hidden;color:var(--bt-text-strong);font-weight:bold;padding-right:0.625em;}
[data-register="debugger"] .eventLog-index,[data-register="debugger"] .eventLog-event,[data-register="debugger"] .eventLog-fullpath{padding-top:0 !important;padding-bottom:0 !important;}
[data-register="debugger"] .eventLog-text{padding-top:0.1em !important;line-height:1.1em !important;padding-bottom:0.1em !important;max-height:1.5em;overflow:visible;}
[data-register="debugger"] .dropdown-list-tag{display:flex;align-items:center;padding:0.25em 0 0.25em 1em;}
[data-register="debugger"] .dropdown-list-tag .ct-checkmark-field{font-weight:500;}
[data-register="debugger"] .dropdown-list-kind{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:0.25em 1em;align-items:center;padding:0.25em 1em 0.25em 1.25em;}
[data-register="debugger"] .paging-menu{display:flex;}
[data-register="debugger"] .paging-menu .paging-page{background-color:blue;color:white;cursor:pointer;margin-left:2px;margin-right:2px;}
[data-register="debugger"] .paging-menu .paging-active-page{background-color:yellow;}
[data-register="debugger"] .eventLog .data-table .eventLog-column-header{display:flex;align-items:center;min-height:1.75rem;background:transparent;border-bottom:1px solid var(--bt-border-subtle);user-select:none;}
[data-register="debugger"] .eventLog .data-table .eventLog-column-header .eventLog-cell{color:var(--bt-text-default);overflow:hidden;cursor:pointer;display:flex;align-items:center;align-self:stretch;padding-top:0 !important;padding-bottom:0 !important;max-height:none !important;line-height:normal !important;}
[data-register="debugger"] .eventLog .data-table .eventLog-column-header .eventLog-index{justify-content:center;}
[data-register="debugger"] .eventLog .data-table .eventLog-column-header .eventLog-column-label{font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:0.6875rem;font-weight:500;line-height:1.125rem;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;}
[data-register="debugger"] .eventLog .data-table tr{border-top:none !important;align-items:center !important;}
[data-register="debugger"] .eventLog .data-table .direct-location-rr-ticks{overflow:visible !important;max-height:none !important;transform:none !important;padding-left:0.5em !important;padding-right:0.75em !important;}
[data-register="debugger"] .eventLog .data-table .eventLog-cell.direct-location-rr-ticks{overflow:visible !important;}
[data-register="debugger"] .eventLog .eventLog-dense-table{display:flex;flex-direction:column;position:relative;}
[data-register="debugger"] .eventLog .eventLog-scroll-body{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;}
[data-register="debugger"] .eventLog > .eventLog-dense-table > .dt-empty{position:absolute;top:2em;left:0;right:0;pointer-events:none;}
[data-register="debugger"] .eventLog .eventLog-scroll-space{position:relative;min-height:100%;}
[data-register="debugger"] .eventLog .eventLog-rows{position:absolute;top:0;left:0;right:0;border-collapse:collapse;}
[data-register="debugger"] .eventLog .eventLog-row{cursor:pointer;}
[data-register="debugger"] .eventLog .eventLog-row.event-selected,[data-register="debugger"] .eventLog .eventLog-row.selected{background-color:var(--bt-surface-hover);}
[data-register="debugger"] .eventLog .eventLog-row.eventLog-expanded .eventLog-text{max-height:20ch;overflow:auto;white-space:pre-wrap;}
[data-register="debugger"] .eventLog .row-expander-none{display:none;}
[data-register="debugger"] .paging-content{display:flex;flex-direction:column;}
[data-register="debugger"] .paging-content .paging-child{display:flex;}
[data-register="debugger"] .paging-content .paging-child .paging-view{flex-basis:80%;}
[data-register="debugger"] .paging-content .paging-child .paging-expand{color:green;flex-basis:20%;}
[data-register="debugger"] .paging-content .paging-child .paging-collapse{color:red;flex-basis:20%;}
[data-register="debugger"] .dt-empty{font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);padding-left:0.5em;padding-top:1em;}
[data-register="debugger"] .eventLog-columns-button{margin-left:auto;white-space:nowrap;font-size:0.75em;padding:0.125em 0.5em;cursor:pointer;}
[data-register="debugger"] .eventLog-columns-menu{position:absolute;right:0.5em;top:2.25em;z-index:20;min-width:12em;padding:0.25em 0;background-color:var(--bt-surface-sunken);border:0.0625em solid var(--bt-border-subtle);border-radius:0.375em;color:var(--bt-text-strong);}
[data-register="debugger"] .eventLog-columns-menu .eventLog-column-option{display:flex;align-items:center;gap:0.5em;padding:0.125em 0.625em;}
[data-register="debugger"] .eventLog-columns-menu .eventLog-column-option .eventLog-column-check{cursor:pointer;width:1em;}
[data-register="debugger"] .eventLog-columns-menu .eventLog-column-option .eventLog-column-title{flex:1;}
[data-register="debugger"] .eventLog-columns-menu .eventLog-column-option .eventLog-column-left,[data-register="debugger"] .eventLog-column-right{cursor:pointer;background:transparent;border:none;color:inherit;font-size:0.75em;}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/data_tables.styl ── */
[data-register="debugger"] .dts_label{display:none !important;}
[data-register="debugger"] .data-table{font-size:inherit !important;font-weight:400 !important;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);letter-spacing:-0.00875em !important;flex:1 1 auto;overflow:hidden;min-height:0;color:var(--bt-text-strong);}
[data-register="debugger"] .data-table .rr-ticks-line-container{position:relative;height:0.3em;}
[data-register="debugger"] .data-table .rr-ticks-line-container .rr-ticks-line{display:inline-block;background:var(--bt-accent-default);height:0.1875em !important;}
[data-register="debugger"] .data-table .rr-ticks-empty-remaining{display:inline-block;height:0.1875em !important;position:absolute;z-index:2;}
[data-register="debugger"] .data-table .rr-ticks-time-container{width:100%;height:1.25em;line-height:2em;position:relative;}
[data-register="debugger"] .data-table .rr-ticks-time-container .rr-ticks-time{position:unset;text-indent:-50%;}
[data-register="debugger"] .data-table .direct-location-rr-ticks{display:inline-block;position:relative;min-width:10%;max-width:35%;padding-left:3ex;padding-right:3ex;max-height:1.5em;transform:translateY(-0.24em);}
[data-register="debugger"] .data-table .event-rr-ticks-line{height:0.125em;width:100%;display:inline-block;position:absolute;z-index:0;}
[data-register="debugger"] .data-table .paging_simple_numbers{display:none;}
[data-register="debugger"] .data-table .dataTables_length{display:none;}
[data-register="debugger"] .data-table table{max-width:-moz-available;max-width:-webkit-fill-available;max-width:stretch;display:block;}
[data-register="debugger"] .data-table table tbody{display:block;cursor:pointer;}
[data-register="debugger"] .data-table tr{font-size:inherit;font-weight:400;display:flex;border-top:0.0625em solid var(--bt-border-subtle);color:var(--bt-text-strong);align-items:start;}
[data-register="debugger"] .data-table tr td{cursor:normal;}
[data-register="debugger"] .data-table tr .dataTables_empty{cursor:normal;}
[data-register="debugger"] .data-table tr.future{opacity:0.5;}
[data-register="debugger"] .data-table tr.future:hover{opacity:1;}
[data-register="debugger"] .data-table tr.odd.past:hover{background-color:var(--bt-surface-hover);opacity:1;}
[data-register="debugger"] .data-table tr.even.past:hover{background-color:var(--bt-surface-hover);opacity:1;}
[data-register="debugger"] .data-table tr.odd.future:hover{background-color:var(--bt-surface-hover);opacity:1;}
[data-register="debugger"] .data-table tr.even.future:hover{background-color:var(--bt-surface-hover);opacity:1;}
[data-register="debugger"] .data-table tr td{display:grid;color:var(--bt-text-strong);font-weight:400;}
[data-register="debugger"] .data-table td{text-overflow:clip;}
[data-register="debugger"] .data-table thead{display:none;}
[data-register="debugger"] .dt-container{height:100%;display:flex;flex-direction:column;min-height:0;}
[data-register="debugger"] .dt-container .dt-length{display:none;}
[data-register="debugger"] .dt-container .dt-scroll{flex:1 1 auto;min-height:0;}
[data-register="debugger"] .dt-container .dt-scroll-body{min-height:0;}
[data-register="debugger"] .dt-container .dt-scroll-head{height:0 !important;}
[data-register="debugger"] .dt-container .dt-info{padding-left:0.625em;}
[data-register="debugger"] .data-tables-footer{position:relative;padding-left:0.25rem;height:1.5em;font-size:0.75em;line-height:1.5em;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);color:var(--bt-text-strong);display:flex;}
[data-register="debugger"] .data-tables-footer .data-tables-footer-info{position:relative;margin-right:0.625em;display:flex;align-items:center;}
[data-register="debugger"] .data-tables-footer .data-tables-footer-info .data-tables-footer-end-row{padding-left:0.5ex;padding-right:0.5ex;}
[data-register="debugger"] .data-tables-footer .data-tables-footer-info .data-tables-footer-rows-count{padding-left:0.5ex;padding-right:0.5ex;}
[data-register="debugger"] .data-tables-footer .data-tables-footer-input{margin-bottom:0em !important;}
[data-register="debugger"] .data-tables-footer .data-tables-footer-checkbox-container{position:relative;height:100%;padding-left:1.25em;}
[data-register="debugger"] .dt-scroll-body:focus,[data-register="debugger"] .dt-scroll-body:focus-visible,[data-register="debugger"] .data-table table:focus,[data-register="debugger"] .data-table table:focus-visible,[data-register="debugger"] .data-table tbody:focus,[data-register="debugger"] .data-table tbody:focus-visible,[data-register="debugger"] .data-table tr:focus,[data-register="debugger"] .data-table tr:focus-visible{outline:none !important;box-shadow:none !important;}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/calltrace.styl ── */
[data-register="debugger"] .local-calltrace-view{flex-grow:1;overflow:auto;padding-top:0.5em;margin-top:0.5rem;}
[data-register="debugger"] .calltrace-loading{position:absolute;left:0;top:0;width:100%;height:2px;pointer-events:none;background:linear-gradient(90deg, transparent 0%, var(--bt-text-default) 50%, transparent 100%);opacity:0.45;animation:calltrace-loading-sweep 1.4s ease-in-out infinite;}
@keyframes calltrace-loading-sweep{0%{opacity:0.12;}50%{opacity:0.5;}100%{opacity:0.12;}}
@media (prefers-reduced-motion: reduce){
[data-register="debugger"] .calltrace-loading{animation:none;opacity:0.35;}
}
[data-register="debugger"] .calltrace-view{width:100%;display:flex;flex-direction:column;}
[data-register="debugger"] .calltrace-view .calltrace-lines{display:flex;flex-direction:column;position:relative;}
[data-register="debugger"] .calltrace-view .calltrace-child{white-space:nowrap;width:100%;float:left;display:inline;}
[data-register="debugger"] .calltrace-view .calltrace-call-line{position:relative;}
[data-register="debugger"] .calltrace-view .calltrace-svg-line{position:absolute;overflow:visible;z-index:1;pointer-events:none;}
[data-register="debugger"] .calltrace-view line{stroke:var(--bt-text-default);}
[data-register="debugger"] .calltrace-view .call-offsets{display:inline-flex;}
[data-register="debugger"] .calltrace-view .empty-offset{width:0.625em;margin:0;}
[data-register="debugger"] .calltrace-view .empty-offset-bottom-border{border-bottom:0.0625em solid var(--bt-text-default);}
[data-register="debugger"] .calltrace-view .empty-offset-top-border{border-top:0.0625em solid var(--bt-text-default);}
[data-register="debugger"] .calltrace-view .empty-offset-right-border{width:0.6875em;border-right:0.0625em solid var(--bt-text-default);}
[data-register="debugger"] .calltrace-view .offset-top-border{width:0.625em;border-top:0.0625em solid var(--bt-text-default);}
[data-register="debugger"] .calltrace-view .offset-top-and-bottom-border{width:0.625em;border-top:0.0625em solid var(--bt-text-default);border-bottom:0.0625em solid var(--bt-text-default);}
[data-register="debugger"] .calltrace-view .call-offset{background-size:1.25em;white-space:pre;float:left;background-image:linear-gradient(to right, rgba(0, 0, 0, 0.2), 0.0625em, transparent 0.0625em, transparent);width:0.625em;height:1.625em;}
[data-register="debugger"] .calltrace-view .call-offset-icon{background-color:var(--bt-surface-sunken);width:0.625em;height:1.625em;position:relative;}
[data-register="debugger"] .calltrace-view .call-offset-icon-1{width:0.3125em;height:0.3125em;position:absolute;background-color:var(--bt-text-default);content:"";left:0.1875em;top:0.625em;border-radius:0.09375em;}
[data-register="debugger"] .calltrace-view .call-offset-icon-2{width:0.0625em;height:100%;position:absolute;background-color:var(--bt-text-default);content:"";left:0;top:0;}
[data-register="debugger"] .calltrace-view .call-offset-icon-3{width:0.125em;height:0.0625em;position:absolute;background-color:var(--bt-text-default);content:"";left:0.0625em;top:0.75em;}
[data-register="debugger"] .calltrace-view .call-offset-icon-4{width:0.3125em;height:0.625em;position:absolute;background-color:var(--bt-status-warning-fg);border-radius:0.125em;content:"";left:-0.125em;top:0;}
[data-register="debugger"] .calltrace-view .call-offset-icon-5{width:0.3125em;height:0.3125em;position:absolute;background-color:var(--bt-status-warning-fg);border-radius:0.09375em;content:"";left:0.1875em;top:0.625em;}
[data-register="debugger"] .calltrace-view .call-offset-icon-6{width:0.0625em;height:50%;position:absolute;background-color:var(--bt-text-default);content:"";left:0;top:0;}
[data-register="debugger"] .calltrace-view .calltrace-filter{margin-bottom:0.625em;color:var(--bt-text-strong);}
[data-register="debugger"] .calltrace-view .calltrace-row{padding-left:0.3125em;min-height:1.55em;line-height:1.55em;}
[data-register="debugger"] .calltrace-view .calltrace-row,[data-register="debugger"] .calltrace-view .call-name{cursor:pointer;display:inline-flex;color:var(--bt-text-strong);float:left;}
[data-register="debugger"] .calltrace-view .calltrace-row:hover,[data-register="debugger"] .calltrace-view .call-name:hover{background-color:var(--bt-surface-hover);}
[data-register="debugger"] .calltrace-view .call-text{padding-left:0.125em;display:inline;z-index:2;}
[data-register="debugger"] .calltrace-view .end-of-program-text{color:var(--bt-status-warning-fg);}
[data-register="debugger"] .calltrace-view .end-of-program-error{color:var(--bt-status-danger-fg);}
[data-register="debugger"] .calltrace-view .call-current{color:var(--bt-text-strong);font-weight:500;}
[data-register="debugger"] .calltrace-view .call-expanded-value{width:100%;display:flex;overflow:visible;position:relative;background-color:var(--bt-surface-sunken);border-radius:0.625em;padding-left:0.9375em;padding-bottom:0.15625em;padding-right:0.3125em;margin-left:0.625em;margin-right:0.625em;margin-bottom:0.1875em;}
[data-register="debugger"] .calltrace-view .call-expanded-value .view-active{border-radius:0.625em;padding-left:0;position:relative;}
[data-register="debugger"] .calltrace-view .call-expanded-value .view-active .value-expanded-text{background-color:var(--bt-surface-sunken) !important;}
[data-register="debugger"] .calltrace-view .call-expanded-value .view-active .value-expanded-default{background-color:var(--bt-surface-sunken) !important;}
[data-register="debugger"] .calltrace-view .call-expanded-value.return-value .value-expanded-name-text{color:var(--bt-syntax-string);}
[data-register="debugger"] .calltrace-view .value-expanded-name{color:var(--bt-status-success-fg);}
[data-register="debugger"] .calltrace-view .value-expanded-view{background-color:var(--bt-surface-sunken) !important;font-size:1em;}
[data-register="debugger"] .calltrace-view .value-expanded-text{background-color:var(--bt-surface-sunken) !important;}
[data-register="debugger"] .calltrace-view .remove-expanded-value{padding-right:0.3125em;font-size:1em;font-weight:bold;color:var(--bt-text-strong);cursor:pointer;}
[data-register="debugger"] .calltrace-view .call-previous{color:var(--bt-text-strong);}
[data-register="debugger"] .calltrace-view .call-next{color:var(--bt-text-strong);}
[data-register="debugger"] .calltrace-view .macro-expansion{color:green;}
[data-register="debugger"] .calltrace-view .call-tooltip{display:block;padding-left:0.3125em;padding-right:0.625em;padding-top:0.3125em;padding-bottom:0.3125em;width:fit-content;border-radius:0.375em;background-color:var(--bt-surface-sunken);position:fixed;z-index:3;font-weight:400;}
[data-register="debugger"] .calltrace-view .call-tooltip .value-expand-button{display:none;}
[data-register="debugger"] .calltrace-view .call-tooltip .toggle-value-history{display:none;}
[data-register="debugger"] .calltrace-view .call-args{color:var(--bt-status-success-fg);position:relative;display:inline;margin-left:0.3125em;margin-right:0.3125em;}
[data-register="debugger"] .calltrace-view .call-args-list{list-style:none;padding:0.3125em;margin:0;}
[data-register="debugger"] .calltrace-view .call-arg{display:inline-flex;flex-direction:column;color:var(--bt-status-success-fg);}
[data-register="debugger"] .calltrace-view .call-arg .call-arg-header{display:flex;}
[data-register="debugger"] .calltrace-view .call-arg-tooltip-value{word-wrap:break-word;white-space:break-spaces;color:var(--bt-text-strong);}
[data-register="debugger"] .calltrace-view .call-arg-text{text-overflow:ellipsis;overflow:hidden;}
[data-register="debugger"] .calltrace-view .return{z-index:2;}
[data-register="debugger"] .calltrace-view .return-arrow{color:var(--bt-status-info-fg);}
[data-register="debugger"] .calltrace-view .return-text{color:var(--bt-status-info-fg);}
[data-register="debugger"] .calltrace-view .hidden-calls-button{background-color:var(--bt-surface-sunken);border-radius:0.625em;padding-left:0.625em;padding-right:0.625em;}
[data-register="debugger"] .calltrace-view .expanded-call-args{display:flex;}
[data-register="debugger"] .calltrace-view .summary-graph{background-color:var(--bt-surface-overlay);}
[data-register="debugger"] .calltrace-view .expand-callstack,[data-register="debugger"] .expand-summary{color:var(--bt-text-strong);font-size:0.75em;text-decoration:underline;margin-left:1.25em;}
[data-register="debugger"] .calltrace-view .collapse-callstack{color:var(--bt-text-strong);}
[data-register="debugger"] .calltrace-view .call-child-box{display:flex;align-items:center;z-index:2;min-width:max-content;}
[data-register="debugger"] .calltrace-view .collapse-call{z-index:2;background-color:var(--bt-status-success-bg);padding-left:0.3125em;padding-right:0.3125em;font-size:0.875em;line-height:1.125em;padding-top:0.125em;border-radius:0.25em;}
[data-register="debugger"] .calltrace-view .toggle-call{width:0.875em;height:1.5625em;display:block;margin-right:0.25em;z-index:2;}
[data-register="debugger"] .calltrace-view .toggle-call .collapse-call-img{width:0.875em;height:0.875em;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIDM4Ij4KPHJlY3QgaWQ9IlJlY3RhbmdsZSAyNyIgeD0iMC41IiB5PSItMC41IiB3aWR0aD0iOSIgaGVpZ2h0PSI5IiByeD0iMS41IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDkpIiBmaWxsPSIjM0EzQTNBIiBzdHJva2U9IiNFOEU4RTgiLz4KPHBhdGggaWQ9IlZlY3RvciAxMDciIGQ9Ik0yLjUgNUw3LjUgNSIgc3Ryb2tlPSIjRThFOEU4Ii8+CjwvZz4KPC9zdmc+Cg==");background-size:cover;background-position:center;display:inline-block;position:relative;top:0.25em;left:-0.125em;cursor:pointer;}
[data-register="debugger"] .calltrace-view .toggle-call .collapse-call-img.active{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIDM4Ij4KPHJlY3QgaWQ9IlJlY3RhbmdsZSAyNyIgeD0iMC41IiB5PSItMC41IiB3aWR0aD0iOSIgaGVpZ2h0PSI5IiByeD0iMS41IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDkpIiBmaWxsPSIjM0EzQTNBIiBzdHJva2U9IiNGQ0QzNEQiLz4KPHBhdGggaWQ9IlZlY3RvciAxMDciIGQ9Ik0yLjUgNUw3LjUgNSIgc3Ryb2tlPSIjRkNEMzREIi8+CjwvZz4KPC9zdmc+Cg==") !important;}
[data-register="debugger"] .calltrace-view .toggle-call .expand-call-img{width:0.875em;height:0.875em;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIDQwIj4KPHJlY3QgaWQ9IlJlY3RhbmdsZSAyNyIgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHJ4PSIxLjUiIGZpbGw9IiMzQTNBM0EiIHN0cm9rZT0iI0U4RThFOCIvPgo8cGF0aCBpZD0iVmVjdG9yIDEwNyIgZD0iTTIuNSA1TDcuNSA1IiBzdHJva2U9IiNFOEU4RTgiLz4KPHBhdGggaWQ9IlZlY3RvciAxMDgiIGQ9Ik01IDcuNUw1IDIuNSIgc3Ryb2tlPSIjRThFOEU4Ii8+CjwvZz4KPC9zdmc+Cg==");background-size:cover;background-position:center;display:inline-block;position:relative;top:0.25em;left:-0.125em;cursor:pointer;}
[data-register="debugger"] .calltrace-view .toggle-call .expand-call-img.active{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIDQwIj4KPHJlY3QgaWQ9IlJlY3RhbmdsZSAyNyIgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHJ4PSIxLjUiIGZpbGw9IiMzQTNBM0EiIHN0cm9rZT0iI0ZDRDM0RCIvPgo8cGF0aCBpZD0iVmVjdG9yIDEwNyIgZD0iTTIuNSA1TDcuNSA1IiBzdHJva2U9IiNGQ0QzNEQiLz4KPHBhdGggaWQ9IlZlY3RvciAxMDgiIGQ9Ik01IDcuNUw1IDIuNSIgc3Ryb2tlPSIjRkNEMzREIi8+CjwvZz4KPC9zdmc+Cg==") !important;}
[data-register="debugger"] .calltrace-view .toggle-call .dot-call-img{width:0.25em;height:0.25em;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0iUmVjdGFuZ2xlIDIyNSIgZD0iTTAgMUMwIDAuNDQ3NzE1IDAuNDQ3NzE1IDAgMSAwSDNDMy41NTIyOCAwIDQgMC40NDc3MTUgNCAxVjNDNCAzLjU1MjI4IDMuNTUyMjggNCAzIDRIMUMwLjQ0NzcxNSA0IDAgMy41NTIyOCAwIDNWMVoiIGZpbGw9IiNFOEU4RTgiLz4KPC9zdmc+Cg==");background-size:cover;background-position:center;display:block;position:relative;bottom:-0.625em;left:0.1875em;}
[data-register="debugger"] .calltrace-view .toggle-call .dot-call-img.active{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0iUmVjdGFuZ2xlIDIyNSIgZD0iTTAgMUMwIDAuNDQ3NzE1IDAuNDQ3NzE1IDAgMSAwSDNDMy41NTIyOCAwIDQgMC40NDc3MTUgNCAxVjNDNCAzLjU1MjI4IDMuNTUyMjggNCAzIDRIMUMwLjQ0NzcxNSA0IDAgMy41NTIyOCAwIDNWMVoiIGZpbGw9IiNGQ0QzNEQiLz4KPC9zdmc+Cg==") !important;}
[data-register="debugger"] .calltrace-view .toggle-call .end-of-program-img{width:0.25em;height:0.25em;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0iUmVjdGFuZ2xlIDIyOCIgZD0iTTAgMUMwIDAuNDQ3NzE1IDAuNDQ3NzE1IDAgMSAwSDNDMy41NTIyOCAwIDQgMC40NDc3MTUgNCAxVjNDNCAzLjU1MjI4IDMuNTUyMjggNCAzIDRIMUMwLjQ0NzcxNSA0IDAgMy41NTIyOCAwIDNWMVoiIGZpbGw9IiNGRUQ3QUEiLz4KPC9zdmc+Cg==");background-size:cover;background-position:center;display:block;position:relative;bottom:-0.625em;left:0.2em;}
[data-register="debugger"] .calltrace-view .toggle-call .end-of-program-error{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0iUmVjdGFuZ2xlIDIyOCIgZD0iTTAgMUMwIDAuNDQ3NzE1IDAuNDQ3NzE1IDAgMSAwSDNDMy41NTIyOCAwIDQgMC40NDc3MTUgNCAxVjNDNCAzLjU1MjI4IDMuNTUyMjggNCAzIDRIMUMwLjQ0NzcxNSA0IDAgMy41NTIyOCAwIDNWMVoiIGZpbGw9IiNGODcxNzEiLz4KPC9zdmc+Cg==");}
[data-register="debugger"] .calltrace-view .call-space{width:0.125em;float:left;}
[data-register="debugger"] .calltrace-view .collapsed-callstack{color:var(--bt-text-link);cursor:pointer;}
[data-register="debugger"] .calltrace-view .duration{margin-left:1.25em;padding-left:0.25em;padding-right:0.125em;padding-top:0.125em;font-size:0.75em;height:1em;}
[data-register="debugger"] .calltrace-view .code-duration{display:inline-flex;}
[data-register="debugger"] .calltrace-view{height:100%;color:var(--bt-text-strong);}
[data-register="debugger"] .step-list{background-color:var(--bt-surface-sunken);color:var(--bt-text-strong);font-family:var(--bt-font-mono),var(--bt-font-mono-fallback), monospace;font-size:13px;line-height:1.5em;overflow:auto;height:100%;}
[data-register="debugger"] .step-list .step-list-lines-box,[data-register="debugger"] .step-list .step-lines{min-height:100%;}
[data-register="debugger"] .step-list .step-line-pre{display:inline;margin:0;font:inherit;white-space:pre;background-color:transparent;}
[data-register="debugger"] .step-list .active-step-line-pre{background-color:transparent;color:var(--bt-text-strong) !important;}
[data-register="debugger"] .step-list .inactive-step-line-pre{background-color:transparent;color:var(--bt-text-strong);}
[data-register="debugger"] .step-list .step-line{display:grid;grid-template-columns:3em 13em minmax(18em, 1fr) minmax(14em, 24em);align-items:center;column-gap:0.75em;margin-left:0;min-height:1.625em;width:100%;box-sizing:border-box;border-top:0.0625em solid var(--bt-border-subtle);padding:0 0.75em;cursor:pointer;}
[data-register="debugger"] .step-list .step-line:hover{background-color:var(--bt-surface-hover);}
[data-register="debugger"] .step-list .active-step-line{background-color:var(--bt-surface-hover);color:var(--bt-text-strong) !important;}
[data-register="debugger"] .step-list .step-line-column{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
[data-register="debugger"] .step-list .step-line-delta{width:auto;color:var(--bt-text-strong);}
[data-register="debugger"] .step-list .step-line-location{width:auto;color:var(--bt-status-info-fg);}
[data-register="debugger"] .step-list .step-line-source-code{width:auto;}
[data-register="debugger"] .step-list .step-line-call{grid-template-columns:minmax(0, 1fr) minmax(14em, 24em);background-color:rgba(210, 153, 34, 0.12);color:var(--bt-text-strong);}
[data-register="debugger"] .step-list .step-line-return{grid-template-columns:minmax(0, 1fr) minmax(14em, 24em);background-color:rgba(251, 146, 60, 0.16);color:var(--bt-text-strong);}
[data-register="debugger"] .step-list .step-line-description{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto;}
[data-register="debugger"] .step-list .step-line-args,[data-register="debugger"] .step-line-return-value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto;color:var(--bt-text-strong);}
[data-register="debugger"] .step-list .step-line-flow-values{width:auto;background-color:transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
[data-register="debugger"] .step-list .step-line-flow-values .step-line-flow-value{margin-left:0.625em;}
[data-register="debugger"] .step-list .step-line-flow-values .step-line-flow-value:first-child{margin-left:0;}
[data-register="debugger"] .step-list .step-line-flow-values .step-line-flow-value-repr{margin-left:0.3125em;color:var(--bt-status-warning-fg);background-color:transparent;}
[data-register="debugger"] .excerpt-code{color:var(--bt-text-strong);}
[data-register="debugger"] .code-state-line{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback), monospace;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
[data-register="debugger"] .code-state-line:hover .code-tooltip{display:block;opacity:1;visibility:visible;}
[data-register="debugger"] .active-trace2,[data-register="debugger"] .active-history,[data-register="debugger"] .active-dialog{display:block;height:100%;width:100%;background-color:var(--bt-surface-raised);color:var(--bt-text-strong);overflow-y:scroll;}
[data-register="debugger"] .inactive-trace,[data-register="debugger"] .inactive-dialog{display:none;}
[data-register="debugger"] .active-state{display:flex;flex-direction:column;}
[data-register="debugger"] .active-state .select-kind-button-container{position:absolute;margin-left:0.625em;}
[data-register="debugger"] #dialog{display:flex;flex-direction:column;background-color:var(--bt-surface-canvas);color:var(--bt-text-strong);}
[data-register="debugger"] .expandable-value{text-align:center;font-size:1.25em;}
[data-register="debugger"] .expandable-child{width:100%;float:left;font-size:1.25em;margin-left:0.625em;}
[data-register="debugger"] .border-value-0{border:0;}
[data-register="debugger"] .expanded for i in 0..100-{i}{float:left;width:99%;margin-left:0.625em * i;display:inline-flex;}
[data-register="debugger"] .value-expanded-atom{position:relative;display:flex;padding-left:0.625em;}
[data-register="debugger"] .value-expanded-atom-parent{display:flex;flex-direction:row;align-items:center;width:fit-content;}
[data-register="debugger"] .value-expanded-compound-parent{display:flex;flex-direction:column;}
[data-register="debugger"] .value-expanded-compound{display:flex;flex-direction:column;}
[data-register="debugger"] .value-expanded else{width:100%;}
[data-register="debugger"] .value-expanded{display:flex;flex-direction:column;overflow:visible;position:relative;}
[data-register="debugger"] .atom-even{color:var(--bt-text-strong);}
[data-register="debugger"] .atom-odd{color:var(--bt-text-strong);}
[data-register="debugger"] .chevron{color:var(--bt-text-strong);cursor:pointer;position:absolute;}
[data-register="debugger"] .chevron::before{border-style:solid;border-width:0.1em 0.1em 0 0;content:'';display:inline-block;height:0.45em;left:-0.3125em;position:absolute;top:0.15em;transform:rotate(135deg);vertical-align:top;width:0.45em;}
[data-register="debugger"] #chevron-container{margin-bottom:0.625em;margin-left:0.625em;margin-right:0.625em;position:relative;}
[data-register="debugger"] .value-components-container{position:relative;height:100%;overflow:auto;margin-top:0.25em;}
[data-register="debugger"] .value-components-container .line-chart{height:12.5em;}
[data-register="debugger"] .value-expanded-text,[data-register="debugger"] .value-expand{color:var(--bt-status-warning-fg);cursor:pointer;display:contents;position:absolute;width:95%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
[data-register="debugger"] .list-name{width:50%;float:left;}
[data-register="debugger"] .calltrace-editor-call{border:0.0625em solid var(--bt-text-strong);height:7.5em;color:var(--bt-text-strong);}
[data-register="debugger"] .calltrace-editor-call .code-editor{height:6.25em;}
[data-register="debugger"] .local-calltrace-view .event-selected{padding-right:0.5em;}
[data-register="debugger"] .event-selected{background:var(--bt-surface-selected) !important;}
[data-register="debugger"] .code-state-line{color:var(--bt-text-strong);margin-bottom:.5em;}
[data-register="debugger"] .call-search-results{max-height:5.5em;overflow:scroll;background-color:var(--bt-surface-sunken);margin-left:0;margin-bottom:0.25em;}
[data-register="debugger"] .call-search-results,[data-register="debugger"] .search-result{color:var(--bt-text-strong) !important;cursor:pointer;text-decoration:none;padding-left:0.5em;line-height:1.45em;}
[data-register="debugger"] .call-search-results .search-result:hover{background-color:var(--bt-surface-hover);}
[data-register="debugger"] .empty-search-result{color:red;text-align:center;white-space:break-spaces;}
[data-register="debugger"] .active-call-location{width:0.25em;height:0.25em;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0iUmVjdGFuZ2xlIDIyNSIgZD0iTTAgMUMwIDAuNDQ3NzE1IDAuNDQ3NzE1IDAgMSAwSDNDMy41NTIyOCAwIDQgMC40NDc3MTUgNCAxVjNDNCAzLjU1MjI4IDMuNTUyMjggNCAzIDRIMUMwLjQ0NzcxNSA0IDAgMy41NTIyOCAwIDNWMVoiIGZpbGw9IiNGQ0QzNEQiLz4KPC9zdmc+Cg==") !important;background-size:cover;background-position:center;display:block;position:relative;bottom:-0.625em;left:0.1875em;top:1.125em;}
[data-register="debugger"] .isonim-calltrace .calltrace-search{padding-left:0.25em;padding-right:0.25em;}
[data-register="debugger"] .isonim-calltrace .local-calltrace-view .calltrace-call-line{padding-left:0.5em;}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/list_scrubber.styl ── */
[data-register="debugger"] .ct-scrubbed::-webkit-scrollbar{width:0;}
[data-register="debugger"] .ct-list-scrubber{position:absolute;right:0;width:0.5rem;z-index:30;cursor:pointer;background:transparent;}
[data-register="debugger"] .ct-list-scrubber-thumb{position:absolute;left:0;right:0;background:var(--bt-surface-hover);}
[data-register="debugger"] .ct-list-scrubber-thumb:hover,[data-register="debugger"] .ct-list-scrubber:active .ct-list-scrubber-thumb{background:var(--bt-surface-hover);}
[data-register="debugger"] .ct-list-scrubber-mark{position:absolute;left:0;right:0;background:var(--bt-status-warning-fg);}
[data-register="debugger"] .ct-hscrubbed::-webkit-scrollbar{height:0;}
[data-register="debugger"] .ct-hscrubber{position:absolute;height:0.5rem;z-index:30;cursor:pointer;background:transparent;}
[data-register="debugger"] .ct-hscrubber-thumb{position:absolute;top:0;bottom:0;background:var(--bt-surface-hover);}
[data-register="debugger"] .ct-hscrubber-thumb:hover,[data-register="debugger"] .ct-hscrubber:active .ct-hscrubber-thumb{background:var(--bt-surface-hover);}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/golden_layout.styl ── */
[data-register="debugger"] .lm_goldenlayout{background:var(--bt-surface-raised) !important;}
[data-register="debugger"] .lm_header{background-color:transparent !important;color:var(--bt-text-default) !important;position:relative;box-shadow:2px 0 0 0 var(--bt-surface-hover) !important;z-index:3 !important;}
[data-register="debugger"] .lm_splitter{background:var(--bt-surface-raised) !important;opacity:unset !important;transition:background 150ms ease !important;z-index:4 !important;cursor:col-resize;}
[data-register="debugger"] .lm_splitter.lm_vertical{cursor:row-resize;}
[data-register="debugger"] .lm_splitter:hover{background:var(--bt-border-accent) !important;}
[data-register="debugger"] .lm_stack{overflow:hidden !important;}
[data-register="debugger"] .lm_tabs{width:100%;display:flex;gap:0.25em;}
[data-register="debugger"] .lm_tab{font-family:var(--bt-font-sans),var(--bt-font-sans-fallback) !important;font-size:inherit !important;font-style:normal;font-weight:600 !important;letter-spacing:-0.14px !important;background-color:var(--bt-surface-sunken) !important;color:var(--bt-text-default) !important;margin:0 !important;border:0 !important;padding:0 0.5em !important;box-shadow:none !important;line-height:normal !important;overflow:hidden;border-radius:0.375rem;margin-right:0 !important;margin-bottom:0px !important;flex:1;text-align:center;display:flex !important;align-items:center !important;}
[data-register="debugger"] .lm_tabdropdown::before{vertical-align:text-top !important;}
[data-register="debugger"] .lm_item{background-color:transparent !important;z-index:3 !important;}
[data-register="debugger"] .lm_items{border-radius:0.375rem;}
[data-register="debugger"] .lm_content{background-color:var(--bt-surface-sunken) !important;border:0 !important;border-radius:0.375rem;font-size:inherit;padding:0.5rem 0 0 0;}
[data-register="debugger"] .lm_content:has(> .code-editor){padding-top:0.25rem;}
[data-register="debugger"] .lm_items{background-color:transparent;}
[data-register="debugger"] .lm_splitter.lm_horizontal{width:4px !important;}
[data-register="debugger"] .lm_splitter.lm_vertical{height:4px !important;}
[data-register="debugger"] .lm_splitter.lm_vertical .lm_drag_handle{top:0 !important;height:2px !important;background-color:var(--bt-surface-raised);}
[data-register="debugger"] .lm_splitter.lm_horizontal .lm_drag_handle{left:0 !important;width:4px !important;background-color:var(--bt-surface-raised);}
[data-register="debugger"] .lm_title{color:var(--bt-text-disabled) !important;font-size:0.875rem !important;font-weight:400 !important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;margin-right:0.5rem;padding-top:0em !important;text-align:start !important;}
[data-register="debugger"] .lm_active{background-color:var(--bt-surface-sunken) !important;color:var(--bt-text-default) !important;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom-right-radius:0em;border-bottom-left-radius:0em;box-shadow:0em 0.48em 0em 0em var(--bt-surface-sunken) !important;overflow:visible !important;}
[data-register="debugger"] .lm_active::before{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;left:-1.625em;border-radius:0 0 0.625em 0;opacity:1;box-shadow:0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_active::after{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;right:-1.625em;border-radius:0 0 0 0.625em;opacity:1;box-shadow:-0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_header .lm_active .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_header .lm_tab:not(.lm_active) .lm_title{transition:color 150ms ease;}
[data-register="debugger"] .lm_header .lm_tab:not(.lm_active):hover .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_header .lm_controls{height:100% !important;align-items:center !important;}
[data-register="debugger"] .lm_controls > *{opacity:1 !important;background-color:var(--bt-surface-raised) !important;border:0.03125em solid var(--bt-border-subtle) !important;border-radius:0.375em !important;background-position:center !important;background-repeat:no-repeat !important;background-size:1em 1em !important;width:1.5em !important;height:1.5em !important;cursor:pointer;}
[data-register="debugger"] .lm_controls > *:focus{outline:none !important;box-shadow:none !important;}
[data-register="debugger"] .lm_controls > *:focus-visible{outline:none !important;box-shadow:inset 0 0 0 0.125em var(--bt-focus-ring) !important;}
[data-register="debugger"] .lm_controls > *:hover{background-color:var(--bt-surface-overlay) !important;}
[data-register="debugger"] .lm_popout{display:none !important;}
[data-register="debugger"] .lm_header .lm_tab{height:1.5rem !important;margin-top:0.25rem !important;}
[data-register="debugger"] .lm_column > .lm_splitter ~ .lm_stack:not(.lm_maximised),[data-register="debugger"] .lm_column > .lm_splitter ~ .lm_item .lm_stack:not(.lm_maximised){display:flex;flex-direction:column;}
[data-register="debugger"] .lm_column > .lm_splitter ~ .lm_stack:not(.lm_maximised) > .lm_header,[data-register="debugger"] .lm_column > .lm_splitter ~ .lm_item .lm_stack:not(.lm_maximised) > .lm_header{flex:none;margin-top:-(0.25rem);}
[data-register="debugger"] .lm_column > .lm_splitter ~ .lm_stack:not(.lm_maximised) > .lm_items,[data-register="debugger"] .lm_column > .lm_splitter ~ .lm_item .lm_stack:not(.lm_maximised) > .lm_items{flex:1 1 0;min-height:0;height:auto !important;}
[data-register="debugger"] .lm_column > .lm_splitter ~ .lm_stack:not(.lm_maximised) > .lm_items > *,[data-register="debugger"] .lm_column > .lm_splitter ~ .lm_stack:not(.lm_maximised) > .lm_items > * > .lm_content,[data-register="debugger"] .lm_column > .lm_splitter ~ .lm_item .lm_stack:not(.lm_maximised) > .lm_items > *,[data-register="debugger"] .lm_column > .lm_splitter ~ .lm_item .lm_stack:not(.lm_maximised) > .lm_items > * > .lm_content{height:100% !important;}
[data-register="debugger"] .lm_stack:has(> .lm_header .lm_tabs > .lm_tab.lm_active:last-child) > .lm_items,[data-register="debugger"] .lm_stack:has(> .lm_header .lm_tabs > .lm_tab.lm_active:last-child) > .lm_items .lm_content{border-top-right-radius:0;}
[data-register="debugger"] .lm_stack:has(> .lm_header .lm_tabs > .lm_tab.lm_active:last-child) > .lm_header .lm_tabs > .lm_tab.lm_active:last-child::after{display:none;}
[data-register="debugger"] .lm_stack:has(> .lm_header .lm_tabs > .lm_tab.lm_active:first-child) > .lm_items,[data-register="debugger"] .lm_stack:has(> .lm_header .lm_tabs > .lm_tab.lm_active:first-child) > .lm_items .lm_content{border-top-left-radius:0;}
[data-register="debugger"] .lm_stack:has(> .lm_header .lm_tabs > .lm_tab.lm_active:first-child) > .lm_header .lm_tabs > .lm_tab.lm_active:first-child::before{display:none;}
[data-register="debugger"] .ct-selected-outline{position:absolute;top:0;left:0;pointer-events:none;z-index:250;overflow:visible;}
[data-register="debugger"] .ct-selected-outline path,[data-register="debugger"] .ct-docked-outline path,[data-register="debugger"] .ct-overlay-outline path{fill:none;stroke:var(--bt-border-default);stroke-width:0.0625rem;stroke-linejoin:round;border-top-left-radius:0.375em;}
[data-register="debugger"] [data-scope-kind="pane"]:focus{outline:none;}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/state.styl ── */
[data-register="debugger"] .state-component{font-family:var(--bt-font-sans),var(--bt-font-sans-fallback) !important;}
[data-register="debugger"] .isonim-state .code-state-line,[data-register="debugger"] .isonim-state #gdb-evaluate,[data-register="debugger"] .isonim-state .state-tabs,[data-register="debugger"] .isonim-state .loading-indicator,[data-register="debugger"] .isonim-state .value-components-container{padding-left:0.5rem;padding-right:0.5rem;}
[data-register="debugger"] .isonim-state .value-components-container{padding-right:0;overflow-x:hidden;}
[data-register="debugger"] .isonim-state .value-view{flex-wrap:nowrap;}
[data-register="debugger"] .isonim-state.state-component{display:grid;grid-template-columns:max-content minmax(0, 1fr);grid-template-rows:auto auto auto minmax(0, 1fr);grid-template-areas:"tabs field" "code code" "loading loading" "values values";column-gap:0.375rem;align-items:center;}
[data-register="debugger"] .isonim-state.state-component > .state-tabs{grid-area:tabs;}
[data-register="debugger"] .isonim-state.state-component > #gdb-evaluate{grid-area:field;padding-left:0;}
[data-register="debugger"] .isonim-state.state-component > .code-state-line{grid-area:code;margin-top:0.5rem;}
[data-register="debugger"] .isonim-state.state-component > .loading-indicator{grid-area:loading;}
[data-register="debugger"] .isonim-state.state-component > .value-components-container{grid-area:values;align-self:stretch;height:auto;min-height:0;position:relative;}
[data-register="debugger"] .isonim-state.state-component > .value-components-container > .empty-overlay{position:absolute;top:0;left:0;right:0;bottom:0;}
[data-register="debugger"] .isonim-state .state-tabs{display:flex;gap:0.125rem;width:fit-content;padding:0.125rem;background-color:var(--bt-surface-overlay);border:0.0625rem solid var(--bt-border-subtle);border-radius:0.375rem;}
[data-register="debugger"] .isonim-state .state-tabs > button{display:flex;align-items:center;height:1.25rem;flex:0 0 auto !important;padding:0 0.625rem;border:none;border-radius:0.3125rem !important;background-color:transparent;font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-weight:400;font-size:0.75rem;line-height:1rem;white-space:nowrap;color:var(--bt-text-muted);cursor:pointer;}
[data-register="debugger"] .isonim-state .state-tabs > button.active,[data-register="debugger"] .isonim-state .state-tabs > button[data-selected="true"]{background-color:var(--bt-surface-sunken);color:var(--bt-text-strong);}
[data-register="debugger"] .isonim-state .state-tabs{margin-left:0.5rem;}
[data-register="debugger"] .isonim-state .code-state-line{display:flex;align-items:baseline;height:1.5rem;line-height:1.5rem;background-color:var(--bt-surface-selected);text-overflow:clip;}
[data-register="debugger"] .isonim-state .code-state-arrow{flex:none;align-self:center;width:0.4375rem;height:0.625rem;margin-right:0.375rem;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxMSIgdmlld0JveD0iMCAwIDggMTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJHcm91cCI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xLjExOTAxZS0wNiAtMC4wMDAyNDQxNDFMOCA1LjA2NjQyTDEuNDE3NDFlLTA2IDEwLjEzMzEiIGZpbGw9IiNGQ0QzNEQiLz4KPC9nPgo8L3N2Zz4K");background-repeat:no-repeat;background-position:center;background-size:contain;}
[data-register="debugger"] .isonim-state .code-state-number{flex:none;}
[data-register="debugger"] .isonim-state .code-state-number{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);font-weight:300;line-height:inherit;font-size:0.875rem !important;padding-top:0.0625em !important;}
[data-register="debugger"] .isonim-state .code-state-number{padding-top:0 !important;color:var(--bt-text-default);}
[data-register="debugger"] .isonim-state .code-state-separator{display:none;}
[data-register="debugger"] .isonim-state .code-state-source{flex:1 1 auto;min-width:0;margin-left:0.75rem;font-family:var(--bt-font-mono),var(--bt-font-mono-fallback), monospace;font-size:1rem;font-weight:400;color:var(--bt-text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
[data-register="debugger"] .events-bottom{height:12.5em;float:left;}
[data-register="debugger"] .code-state-line.no-code{display:none;margin-bottom:0;}
[data-register="debugger"] .value-expanded-type{padding-right:0.625em;white-space:nowrap;}
[data-register="debugger"] .value-expanded-name{font-size:inherit;padding-left:0.5em;color:var(--bt-text-strong);}
[data-register="debugger"] .value-expand-button{display:inline-block;min-width:0.9375em;max-width:0.9375em;float:left;}
[data-register="debugger"] .value-expand-button i{font-size:inherit;}
[data-register="debugger"] .value-non-expanded{color:var(--bt-status-warning-fg);}
[data-register="debugger"] .value-error{color:var(--bt-status-danger-fg);}
[data-register="debugger"] .value-non-expanded,[data-register="debugger"] .value-error{position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:95%;background:var(--bt-surface-sunken);}
[data-register="debugger"] .value-watch{font-style:italic;}
[data-register="debugger"] .value-selected{opacity:0.5;}
[data-register="debugger"] .value-name{color:var(--bt-accent-default);white-space:nowrap;}
[data-register="debugger"] .value-type{margin-left:0.5em;color:var(--bt-text-strong);white-space:nowrap;}
[data-register="debugger"] .value-annotation{margin-left:0.3125em;color:var(--bt-text-strong);opacity:0.5;white-space:nowrap;}
[data-register="debugger"] .value-view{display:flex;align-items:center;flex-wrap:wrap;}
[data-register="debugger"] .value-view .value-error{margin-left:1.0625em !important;position:inherit;}
[data-register="debugger"] .value-name-container{display:flex;align-items:center;}
[data-register="debugger"] .value-name-container .caret-collapse{display:block;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0wLjM1MzUxNiA4LjM1MzUyTDQuMzUzNTIgNC4zNTM1MkwwLjM1MzUxNSAwLjM1MzUxNiIgc3Ryb2tlPSIjREREREREIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");background-position:center;background-repeat:no-repeat;width:0.5em;height:0.5em;}
[data-register="debugger"] .value-name-container .caret-expand{display:block;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgOSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0wLjM1MzUxNiAwLjM1MzUxNkw0LjM1MzUyIDQuMzUzNTJMOC4zNTM1MiAwLjM1MzUxNSIgc3Ryb2tlPSIjREREREREIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");background-position:center;background-repeat:no-repeat;width:0.5em;height:0.5em;}
[data-register="debugger"] .value-line-view-text{display:flex;white-space:nowrap;text-overflow:visible;}
[data-register="debugger"] .value-expanded-view-text{display:flex;flex-direction:column;white-space:nowrap;text-overflow:visible;}
[data-register="debugger"] .value-expanded-name-text-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
[data-register="debugger"] .value-expanded-view{color:var(--bt-text-strong);position:relative;margin-left:0.625em;background:var(--bt-surface-sunken);}
[data-register="debugger"] .right-value .simple-value{text-align:right;}
[data-register="debugger"] .edit{height:calc(100% - 0.5em);width:100%;font-size:0;overflow:hidden;}
[data-register="debugger"] .ct-history-inline-container{background-color:var(--bt-surface-raised);font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);padding:0.25em 0;max-height:5em;overflow-y:auto;}
[data-register="debugger"] .ct-history-inline-row{display:flex;align-items:baseline;line-height:1.5em;justify-content:flex-start;gap:1em;}
[data-register="debugger"] .ct-history-inline-row .history-location{color:var(--bt-text-strong);min-width:4em;text-align:right;}
[data-register="debugger"] .ct-history-inline-row .history-value{color:var(--bt-status-warning-fg);text-align:left;}
[data-register="debugger"] .state-component .value-expanded-text.value-changed{color:var(--bt-status-info-fg);}
/* ── ported verbatim from CodeTracer src/frontend/styles/components/empty_states.styl ── */
[data-register="debugger"] .empty-overlay,[data-register="debugger"] .filesystem-empty-overlay,[data-register="debugger"] .filesystem-loading-overlay,[data-register="debugger"] .filesystem-error-overlay,[data-register="debugger"] .problems-empty,[data-register="debugger"] .search-results-empty,[data-register="debugger"] .fif-empty-prompt,[data-register="debugger"] .unified-diff-empty,[data-register="debugger"] .dt-empty,[data-register="debugger"] .dataTables_empty,[data-register="debugger"] .event-log-marker-empty,[data-register="debugger"] .trace-log-empty,[data-register="debugger"] .point-list-empty,[data-register="debugger"] .flow-steps-empty,[data-register="debugger"] .frame-viewer-empty,[data-register="debugger"] .frame-viewer-draw-calls-empty,[data-register="debugger"] .pixel-history-empty,[data-register="debugger"] .shader-debug-empty,[data-register="debugger"] .shader-debug-values-empty,[data-register="debugger"] .video-player-empty,[data-register="debugger"] .agent-workspace-empty,[data-register="debugger"] .ct-counterexample-closed,[data-register="debugger"] .ct-counterexample:has(> .ct-counterexample-closed) > .ct-counterexample-provenance{font-family:var(--bt-font-sans),var(--bt-font-sans-fallback);font-size:0.875rem;font-style:normal;opacity:0.6;line-height:1.25rem;text-align:center;box-sizing:border-box;padding-left:2.5rem;padding-right:2.5rem;overflow-wrap:break-word;}
[data-register="debugger"] .empty-overlay br,[data-register="debugger"] .filesystem-empty-overlay br,[data-register="debugger"] .filesystem-loading-overlay br,[data-register="debugger"] .filesystem-error-overlay br,[data-register="debugger"] .problems-empty br,[data-register="debugger"] .search-results-empty br,[data-register="debugger"] .fif-empty-prompt br,[data-register="debugger"] .unified-diff-empty br,[data-register="debugger"] .dt-empty br,[data-register="debugger"] .dataTables_empty br,[data-register="debugger"] .event-log-marker-empty br,[data-register="debugger"] .trace-log-empty br,[data-register="debugger"] .point-list-empty br,[data-register="debugger"] .flow-steps-empty br,[data-register="debugger"] .frame-viewer-empty br,[data-register="debugger"] .frame-viewer-draw-calls-empty br,[data-register="debugger"] .pixel-history-empty br,[data-register="debugger"] .shader-debug-empty br,[data-register="debugger"] .shader-debug-values-empty br,[data-register="debugger"] .video-player-empty br,[data-register="debugger"] .agent-workspace-empty br,[data-register="debugger"] .ct-counterexample-closed br,[data-register="debugger"] .ct-counterexample:has(> .ct-counterexample-closed) > .ct-counterexample-provenance br{display:none;}
[data-register="debugger"] .filesystem-empty-overlay,[data-register="debugger"] .filesystem-loading-overlay,[data-register="debugger"] .filesystem-error-overlay,[data-register="debugger"] .problems-empty,[data-register="debugger"] .search-results-empty,[data-register="debugger"] .fif-empty-prompt,[data-register="debugger"] .event-log-marker-empty,[data-register="debugger"] .trace-log-empty,[data-register="debugger"] .point-list-empty,[data-register="debugger"] .flow-steps-empty,[data-register="debugger"] .frame-viewer-empty,[data-register="debugger"] .frame-viewer-draw-calls-empty,[data-register="debugger"] .pixel-history-empty,[data-register="debugger"] .shader-debug-empty,[data-register="debugger"] .shader-debug-values-empty,[data-register="debugger"] .video-player-empty,[data-register="debugger"] .agent-workspace-empty{display:flex;width:100%;height:100%;justify-content:center;align-items:center;}
[data-register="debugger"] .ct-counterexample:has(> .ct-counterexample-closed){display:flex;flex-direction:column;justify-content:center;height:100%;}
[data-register="debugger"] .fif-empty:not(:has(> .fif-recent-label)){height:100%;box-sizing:border-box;}
[data-register="debugger"] table:has(> tbody > tr > .dt-empty),[data-register="debugger"] table:has(> tbody > tr > .dataTables_empty){height:100%;}
[data-register="debugger"] table:has(> tbody > tr > .dt-empty) tbody,[data-register="debugger"] table:has(> tbody > tr > .dataTables_empty) tbody{height:100%;}
[data-register="debugger"] table:has(> tbody > tr > .dt-empty) tr,[data-register="debugger"] table:has(> tbody > tr > .dataTables_empty) tr{height:100%;}
[data-register="debugger"] .dt-empty,[data-register="debugger"] .dataTables_empty{place-items:center;width:100%;height:100%;}
[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)) .lm_tab.btdefault{background-color:var(--bt-surface-sunken) !important;color:var(--bt-text-default) !important;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom-right-radius:0em;border-bottom-left-radius:0em;box-shadow:0em 0.48em 0em 0em var(--bt-surface-sunken) !important;overflow:visible !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target) .lm_tab:nth-child(1){background-color:var(--bt-surface-sunken) !important;color:var(--bt-text-default) !important;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom-right-radius:0em;border-bottom-left-radius:0em;box-shadow:0em 0.48em 0em 0em var(--bt-surface-sunken) !important;overflow:visible !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target) .lm_tab:nth-child(2){background-color:var(--bt-surface-sunken) !important;color:var(--bt-text-default) !important;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom-right-radius:0em;border-bottom-left-radius:0em;box-shadow:0em 0.48em 0em 0em var(--bt-surface-sunken) !important;overflow:visible !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target) .lm_tab:nth-child(3){background-color:var(--bt-surface-sunken) !important;color:var(--bt-text-default) !important;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom-right-radius:0em;border-bottom-left-radius:0em;box-shadow:0em 0.48em 0em 0em var(--bt-surface-sunken) !important;overflow:visible !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target) .lm_tab:nth-child(4){background-color:var(--bt-surface-sunken) !important;color:var(--bt-text-default) !important;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom-right-radius:0em;border-bottom-left-radius:0em;box-shadow:0em 0.48em 0em 0em var(--bt-surface-sunken) !important;overflow:visible !important;}
[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)) .lm_tab.btdefault::before{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;left:-1.625em;border-radius:0 0 0.625em 0;opacity:1;box-shadow:0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target) .lm_tab:nth-child(1)::before{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;left:-1.625em;border-radius:0 0 0.625em 0;opacity:1;box-shadow:0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target) .lm_tab:nth-child(2)::before{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;left:-1.625em;border-radius:0 0 0.625em 0;opacity:1;box-shadow:0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target) .lm_tab:nth-child(3)::before{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;left:-1.625em;border-radius:0 0 0.625em 0;opacity:1;box-shadow:0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target) .lm_tab:nth-child(4)::before{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;left:-1.625em;border-radius:0 0 0.625em 0;opacity:1;box-shadow:0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)) .lm_tab.btdefault::after{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;right:-1.625em;border-radius:0 0 0 0.625em;opacity:1;box-shadow:-0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target) .lm_tab:nth-child(1)::after{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;right:-1.625em;border-radius:0 0 0 0.625em;opacity:1;box-shadow:-0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target) .lm_tab:nth-child(2)::after{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;right:-1.625em;border-radius:0 0 0 0.625em;opacity:1;box-shadow:-0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target) .lm_tab:nth-child(3)::after{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;right:-1.625em;border-radius:0 0 0 0.625em;opacity:1;box-shadow:-0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target) .lm_tab:nth-child(4)::after{content:" ";pointer-events:none;position:absolute;display:block;height:80%;width:1.625em;bottom:0em;z-index:1;right:-1.625em;border-radius:0 0 0 0.625em;opacity:1;box-shadow:-0.625em 0.34em 0 -0.25em var(--bt-surface-sunken);transform:translate(0em, 0.25625em);}
[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)) .lm_header .lm_tab.btdefault .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target) .lm_header .lm_tab:nth-child(1) .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target) .lm_header .lm_tab:nth-child(2) .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target) .lm_header .lm_tab:nth-child(3) .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target) .lm_header .lm_tab:nth-child(4) .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)) .lm_header .lm_tab:not(.lm_tab.btdefault) .lm_title{transition:color 150ms ease;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target) .lm_header .lm_tab:not(.lm_tab:nth-child(1)) .lm_title{transition:color 150ms ease;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target) .lm_header .lm_tab:not(.lm_tab:nth-child(2)) .lm_title{transition:color 150ms ease;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target) .lm_header .lm_tab:not(.lm_tab:nth-child(3)) .lm_title{transition:color 150ms ease;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target) .lm_header .lm_tab:not(.lm_tab:nth-child(4)) .lm_title{transition:color 150ms ease;}
[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)) .lm_header .lm_tab:not(.lm_tab.btdefault):hover .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target) .lm_header .lm_tab:not(.lm_tab:nth-child(1)):hover .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target) .lm_header .lm_tab:not(.lm_tab:nth-child(2)):hover .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target) .lm_header .lm_tab:not(.lm_tab:nth-child(3)):hover .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target) .lm_header .lm_tab:not(.lm_tab:nth-child(4)):hover .lm_title{color:var(--bt-text-default) !important;}
[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)):has(> .lm_header .lm_tabs > .lm_tab.lm_tab.btdefault:last-child) > .lm_items,[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)):has(> .lm_header .lm_tabs > .lm_tab.lm_tab.btdefault:last-child) > .lm_items .lm_content{border-top-right-radius:0;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(1):last-child) > .lm_items,[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(1):last-child) > .lm_items .lm_content{border-top-right-radius:0;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(2):last-child) > .lm_items,[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(2):last-child) > .lm_items .lm_content{border-top-right-radius:0;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(3):last-child) > .lm_items,[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(3):last-child) > .lm_items .lm_content{border-top-right-radius:0;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(4):last-child) > .lm_items,[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(4):last-child) > .lm_items .lm_content{border-top-right-radius:0;}
[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)):has(> .lm_header .lm_tabs > .lm_tab.lm_tab.btdefault:last-child) > .lm_header .lm_tabs > .lm_tab.lm_tab.btdefault:last-child::after{display:none;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(1):last-child) > .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(1):last-child::after{display:none;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(2):last-child) > .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(2):last-child::after{display:none;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(3):last-child) > .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(3):last-child::after{display:none;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(4):last-child) > .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(4):last-child::after{display:none;}
[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)):has(> .lm_header .lm_tabs > .lm_tab.lm_tab.btdefault:first-child) > .lm_items,[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)):has(> .lm_header .lm_tabs > .lm_tab.lm_tab.btdefault:first-child) > .lm_items .lm_content{border-top-left-radius:0;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(1):first-child) > .lm_items,[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(1):first-child) > .lm_items .lm_content{border-top-left-radius:0;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(2):first-child) > .lm_items,[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(2):first-child) > .lm_items .lm_content{border-top-left-radius:0;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(3):first-child) > .lm_items,[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(3):first-child) > .lm_items .lm_content{border-top-left-radius:0;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(4):first-child) > .lm_items,[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(4):first-child) > .lm_items .lm_content{border-top-left-radius:0;}
[data-register="debugger"] .lm_stack:not(:has(> .lm_items > .lm_content:target)):has(> .lm_header .lm_tabs > .lm_tab.lm_tab.btdefault:first-child) > .lm_header .lm_tabs > .lm_tab.lm_tab.btdefault:first-child::before{display:none;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(1):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(1):first-child) > .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(1):first-child::before{display:none;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(2):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(2):first-child) > .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(2):first-child::before{display:none;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(3):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(3):first-child) > .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(3):first-child::before{display:none;}
[data-register="debugger"] .lm_stack:has(> .lm_items > .lm_content:nth-child(4):target):has(> .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(4):first-child) > .lm_header .lm_tabs > .lm_tab.lm_tab:nth-child(4):first-child::before{display:none;}
/* ── the shell ──────────────────────────────────────────────────────────── */
/* Full viewport with no page scroll. `height:100%` down the chain rather than
   a viewport unit: `vh` is a raw length, and the chain says the same thing.

   THE BODY IS A FLEX COLUMN AND THE SHELL TAKES THE REMAINDER, which is the
   whole of the fix for an overhang of exactly the banner's height. `debugLayout`
   emits the provenance banner as a SIBLING before `.dbg` (deliberately — §8's
   one admitted full-width band, and the register where a reader is most likely
   to forget which chain they are on). The shell then asked for `height:100%`,
   which is 100% of the BODY and not of what the banner left of it, so the
   document came to banner + viewport: measured 1281px of content in a 1080px
   box at `wide`, and the body's own `overflow:hidden` then CLIPPED the last
   201px of the pane column with no scrollbar to say so
   (round vd8-r1, reviews/rounds/vd8-r1/debugger--testnet__wide__light__L2.json,
   filed P1 — not cited by ledger id, because round vd8-r2 replaced that
   triple's reviews and the id now names a different finding).

   `flex:1 1 0` and not `height:calc(100% - …)`: the banner's height is content,
   it differs per chain and per theme's wrapping, and a subtraction would be a
   second place that has to know it. The flex column derives it.

   WHY IT SURVIVED FIVE ROUNDS OF REVIEW. Every other debugger view in the
   matrix is captured `fullPage: false` — 22 of them — so the camera was cropped
   to exactly the 1080px box the defect overflows, and the missing 201px was
   outside every frame anyone had ever been shown. `debugger--testnet` is the
   one debugger view captured full-page, and three reviewers filed the band on
   first sight of it. A defect that only a full-page capture can see is worth
   naming as such: the matrix is mostly clipped, and clipped captures cannot
   report overflow. That view stays full-page for this reason — it is now the
   regression witness, and cropping it to hide the band would be deleting the
   only instrument that showed it. */
html[data-register="debugger"],
[data-register="debugger"] body{height:100%;overflow:hidden}
[data-register="debugger"] body{display:flex;flex-direction:column}
/* The banner keeps its content height; only the shell is elastic. */
[data-register="debugger"] body > .notice{flex:0 0 auto}
[data-register="debugger"] .dbg{display:flex;flex-direction:column;flex:1 1 0;min-height:0}

/* ── identity bar ───────────────────────────────────────────────────────── */
/* It carries the stepping controls now, so it is `min-height` and wraps rather
   than a fixed height that would clip them. At `wide` the whole bar is one
   row; at `laptop` the control group wraps to a second, which is a designed
   reduction and not an overflow — nothing is hidden and nothing is cut. */
/* The gaps are a LADDER, not one value. Round 5 measured six of the bar's
   seven boundaries at the same 16-17px, so proximity did no grouping work at
   all and the densest strip on the page read as a run of unrelated objects
   (round 5, reviews/rounds/vd5-round5/debugger__wide__light__L4.md and
   reviews/rounds/vd5-round5/debugger__wide__dark__L2.md). Three steps from the
   scale now rank the three levels of the bar's structure: `space-xs` (8px)
   INSIDE the identity cluster, `space-md` (16px) between the sub-groups of the
   control cluster (`.dc`), `space-lg` (24px) plus a rule between the two
   top-level groups (`.dbgctl`). The ROW gap is separate and small: when the
   bar wraps at laptop the two rows are one object, and 32px of air between
   them read as two unrelated strips (round 5,
   reviews/rounds/vd5-round5/debugger__laptop__dark__L2.md). The
   vertical padding exists for the same reason — the wrapped row used to butt
   straight into the divider rule with nothing under it. */
.dbgbar{flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--bt-space-2xs) var(--bt-space-xs);
  min-height:var(--bt-layout-nav-height);
  padding:var(--bt-space-2xs) var(--bt-layout-gutter);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-default);
  background:var(--bt-surface-raised)}
.dbgback{color:var(--bt-text-link);font-size:var(--bt-type-body-sm-size);
  white-space:nowrap;transition:color var(--bt-motion-fast) var(--bt-motion-ease)}
.dbgback:hover{color:var(--bt-text-link-hover);text-decoration:underline;
  text-underline-offset:var(--bt-space-3xs)}
.dbgid{color:var(--bt-text-strong);font-size:var(--bt-type-identifier-size);
  word-break:normal}
.dbgblock{color:var(--bt-text-muted);font-size:var(--bt-type-caption-size);
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-variant-numeric:var(--bt-numeric-features);white-space:nowrap}
.dbglang{color:var(--bt-text-subtle);font-size:var(--bt-type-label-size);
  letter-spacing:var(--bt-type-label-tracking);text-transform:uppercase}
.dbgspacer{flex:1 1 auto}
.btn.sm{font-size:var(--bt-type-label-size);line-height:var(--bt-type-label-line);
  padding:var(--bt-space-3xs) var(--bt-space-xs)}
/* The page's two actions, as ONE group. They wrap together or not at all —
   `Share` alone on a row with `Download` above it is the failure mode the bar
   spent a forced full-width break avoiding. */
.dbgacts{flex:0 0 auto;display:flex;align-items:center;gap:var(--bt-space-xs)}
/* An icon-only control is SQUARE: equal padding on all four sides around a
   mark that is as wide as it is tall. `.btn.sm`'s asymmetric padding is sized
   for a word, and inherited unchanged it produced a lozenge with a logo in it.
   The mark is `--bt-space-md` (styles.nim sizes it), so the control is
   16 + 2x4 + 2 borders = 26px — shorter than the 32px `.dcbtn` that sets the
   bar's line box, so the two actions do not change the bar's height. */
.dbgacts .btn.icon{padding:var(--bt-space-2xs);gap:0}
/* The control group inside the bar. It takes the width its contents need and
   no more — the slack goes to `.dbgspacer` after it, NOT into the scrubber.
   That is deliberate: a uniform-step scrubber over `step / totalSteps` carries
   almost no information (nobody in this category ships one — WinDbg's timeline
   is event-typed lanes, Chrome's is a CPU chart for range selection), and an
   element that absorbs every spare pixel becomes the largest thing in the bar
   by accident rather than by rank. It is capped below and stays a readout.
   A rule separates the group from the identity to its left, because eight
   glyph buttons abutting a hash reads as one undifferentiated strip. */
.dbgctl{flex:0 1 auto;min-width:0;display:flex;
  align-items:center;gap:var(--bt-space-lg);
  padding-left:var(--bt-space-lg);
  border-left:var(--bt-stroke-hairline) solid var(--bt-border-default)}
/* Fixed, never shrinking: `flex:0 1` let it collapse to a couple of pixels at
   laptop width, which turned 48 ticks and a playhead into a single dash. A
   readout that cannot be read is worse than one that costs width. */
.dbgctl .dctl{flex:0 0 var(--bt-layout-search)}

/* ── banners: one component, two severities ─────────────────────────────── */
/* The LEFT RAIL is what makes this a band in both themes, and it is not
   decoration. VD.6 measured the dark theme: both banners rendered at the
   surface one step off the identity bar — 1.06:1 against the strip above them,
   and BYTE-IDENTICAL to each other, because `theme.dark.status.{danger,warning,
   success,info,neutral}-bg` all resolve to the one neutral `{colors.neutral
   .850}`. So in dark a divergence band and a truncation band were the same
   surface, and neither was a surface: severity was carried by the text colour
   alone, which is exactly what `degraded.noticeTone` says must never happen
   ("so colour never carries the meaning alone").

   The fix is the explorer register's own, copied rather than invented:
   `.notice` in `styles.nim` paints its body with a SURFACE token and states
   its severity on a thick left border in the status BORDER colour — which is
   hued in both themes. This is that, in the debugger's density. The status
   background stays, because in light it is a real tint and worth having; the
   rail is what survives when it is not.

   The bottom hairline is not the answer and was already there: one pixel at
   the far edge of a 1920px band is not a boundary anybody reads. */
.dbgbanner{flex:0 0 auto;display:flex;align-items:baseline;
  gap:var(--bt-space-sm);padding:var(--bt-density-cell-y) var(--bt-layout-gutter);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-default);
  border-left:var(--bt-stroke-thick) solid var(--bt-border-strong);
  font-size:var(--bt-type-body-sm-size);line-height:var(--bt-type-body-sm-line)}
.dbgbanner.bad{background:var(--bt-status-danger-bg);color:var(--bt-status-danger-fg);
  border-bottom-color:var(--bt-status-danger-border);
  border-left-color:var(--bt-status-danger-border)}
.dbgbanner.warn{background:var(--bt-status-warning-bg);color:var(--bt-status-warning-fg);
  border-bottom-color:var(--bt-status-warning-border);
  border-left-color:var(--bt-status-warning-border)}
/* The QUALIFIER tone. It is a `.dbgbanner` — same position, same undismissable
   shape, same rail — because it is the same kind of page-level statement about
   the trace, which is the precedent the divergence banner sets and the reason a
   second treatment was not invented for it. What differs is that nothing is
   wrong: the replay reproduced every published effect and its sparse trees'
   roots cannot equal a full block's. So it takes the INFORMATIONAL status
   surface rather than danger or warning, and it reads as narrowing a claim
   rather than as reporting a fault. Both channels move together — a reader with
   colour removed still sees a distinct rail weight and a distinct title. */
.dbgbanner.info{background:var(--bt-status-info-bg);color:var(--bt-status-info-fg);
  border-bottom-color:var(--bt-status-info-border);
  border-left-color:var(--bt-status-info-border)}
.dbgbanner .bannertitle{font-weight:var(--bt-type-h3-weight);white-space:nowrap}
/* THE BAND IS FULL-BLEED AND THE PROSE WAS NOT, so the width the band spent
   was mostly empty and its HEIGHT never fell. Measured at 1440x900: a 1440px
   band, 183px tall, holding a 610px column of 8 lines — 654px of painted
   surface with nothing in it, and at 1920 the band grew to 1920px while the
   column stayed 610px, so the waste rose to 1134px and the height did not
   move. 183px is 20% of the viewport, taken from the IDE below it, which got
   601px of 900.

   `max-width: var(--bt-measure-prose)` is why, and it is not wrong: a line of
   prose 1200px long is unreadable, which is the whole reason the measure
   token exists. So the cap moves from the COLUMN to the LINE — `columns`,
   which keeps every line inside a measure and spends the leftover width on
   more lines side by side instead of on emptiness.

   THE COLUMN WIDTH IS `--bt-measure-narrow` (44ch) AND NOT `--bt-measure-
   prose` (68ch), and that is the whole of the trick rather than a detail.
   `columns:<width>` is a MINIMUM, and the count the browser derives is
   `floor((available + gap) / (width + gap))`. The band's text area is 1240px
   at 1440 viewport; with the 68ch prose measure that is floor(1264/634) = 1,
   so it yields a SINGLE column 1240px wide — the unreadable line the measure
   exists to prevent, arrived at by asking for the measure. Tried, measured,
   rejected. At 44ch (~395px) the same arithmetic gives 3 columns of ~397px at
   1440, 2 of ~528px at 1280 and 4 of ~412px at 1920 — every one of them
   inside the prose measure, at every width, and never one column.

   `column-fill:balance` so two short columns are equal rather than one full
   and one with a single line in it, and `orphans`/`widows` so a column never
   ends on one line of a sentence.

   NOT A CHANGE TO WHAT THE BANNER SAYS OR WHO SEES IT. It is still page
   level, still undismissable, still carries the rail and the title that the
   rules above argue for. Only the shape of the paragraph changed. The length
   of the copy is the other half of this and is NOT settled here: eight lines
   of prose above an IDE is a lot, and CodeTracer puts none there at all. */
.dbgbanner .bannertext{color:inherit;flex:1 1 auto;min-width:0;
  columns:var(--bt-measure-narrow);column-gap:var(--bt-rhythm-stack);
  column-fill:balance;orphans:2;widows:2}

/* §6.0a's landing notice: where a deep link actually put the session, when
   that is not where it asked to be.

   Deliberately NOT a `.dbgbanner`. The two banners above are page-level
   verdicts about the TRACE — divergent, truncated — and one of them cannot be
   dismissed because what it says stays true for as long as the page is open.
   This says something about the LINK, once, on arrival, and nothing is wrong:
   a recovered position is the mechanism working. So it gets the informational
   surface rather than a severity, and the same left-rail treatment the panes
   use for "this is the position", because that is what it is a statement
   about. Sharing `.dbgbanner`'s rules would have made a working recovery look
   like a defect the first time anyone shared a link. */
.dbgnotices:empty{display:none}
.dbgnotice{flex:0 0 auto;display:flex;align-items:baseline;
  gap:var(--bt-space-sm);padding:var(--bt-density-cell-y) var(--bt-layout-gutter);
  background:var(--bt-status-info-bg);color:var(--bt-status-info-fg);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-status-info-border);
  border-left:var(--bt-stroke-thick) solid var(--bt-mark-position);
  font-size:var(--bt-type-body-sm-size);line-height:var(--bt-type-body-sm-line)}
.dbgnotice .noticetitle{font-weight:var(--bt-type-h3-weight);white-space:nowrap;
  font-size:var(--bt-type-label-size);
  letter-spacing:var(--bt-type-label-tracking);text-transform:uppercase}
.dbgnotice .noticetext{color:inherit;max-width:var(--bt-measure-prose)}

/* The engine-loading band — a full-width row of prose above the session
   explaining that the buttons below it could not act yet — is GONE, with both
   rules that styled it. It was hydration's absence rendered as a paragraph,
   and what it said is now said by the controls' own status, the phase rail
   beside them and each inert button's title. A rule kept for an element that
   no longer exists is a standing invitation to re-add it; this stylesheet is
   INLINED into the page, so the selectors — or a comment spelling them —
   would keep the removed band's names in the served bytes, which
   `test_debug_route` asserts against. Same reasoning as the pane-header
   dismiss rule below. The engine-ORIGIN rule survives because the disclosure
   does: it moved into the phase rail. */
.engineorigin{color:var(--bt-text-subtle);
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-size:var(--bt-type-label-size);word-break:break-all}

/* ── the pane region ────────────────────────────────────────────────────── */
/* `gap` IS GONE FROM BOTH, and its absence is the point. A CSS gap is empty
   canvas between two boxes; CodeTracer separates panels with a drawn element,
   `.lm_splitter`, and `renderLayout` now emits one between every pair. Keeping
   the gap as well would have put 4px of canvas either side of a 4px separator
   and made the frame read as three lines where CodeTracer draws one. */
/* The surface is `.lm_goldenlayout`'s now, not this rule's: `pages/debug.nim`
   puts that class on this element and the port binds it to
   `--bt-surface-raised`, which is the frame CodeTracer's panels float in. It
   is a LIGHTER surface than the panels sit on in BlockTracer's old drawing and
   a DARKER one than the panels themselves, and that inversion — panel lighter
   than frame — is the single most recognisable thing about a CodeTracer
   window. No background is declared here, so there is only one rule to read. */
/* `color` IS HERE BECAUSE `#ROOT` IS INERT, and that is the whole of the last
   text-colour divergence from CodeTracer. Upstream draws its panels in TWO
   text tiers, deliberately: `shared_widgets.styl`'s `#ROOT` rule sets
   `colors-ui-text-primary-body` (neutral-50) and every panel inherits it,
   while `golden_layout.styl`'s `.lm_header` sets
   `colors-ui-text-primary-label` (neutral-150) with `!important`, so the pane
   CHROME is dimmer than the pane CONTENT. Confirmed against upstream's own
   computed styles, where `.lm_content`, `.component-container` and
   `.terminal-line` all resolve to neutral-50 while `.lm_header`, `.lm_tabs`,
   `.lm_tab` and `.lm_controls` all resolve to neutral-150. (No colour is
   spelled literally anywhere in this comment, for the reason given below.)
   BlockTracer had only ONE tier. The `.lm_header` half was never missing — it
   is vendored, emitted and LIVE. The CONTENT half was, because the only
   element upstream hangs it on is `#ROOT`, its application mount point, and
   `ct_css_reach.txt` classifies that id INERT for the honest reason that this
   site mounts nothing of the kind: the rule is compiled and served and matches
   zero elements. With nothing claiming the content tier, every panel fell back
   to inheriting `html,body`'s `--bt-text-default` from `styles.nim`, which is
   the same token `.lm_header` resolves to — so chrome and content arrived at
   ONE colour, neutral-100, and the two-tier relationship was lost. (Every
   colour here is named by its ramp rung rather than spelled: this stylesheet
   is INLINED into every page, so a comment is shipped bytes —
   `test_static_export`'s shipped-rules scan reads comments too, and
   `ct_components_css.nim`'s `Dropped` list declines to quote upstream's one
   raw hex for the same reason.)
   This is the carrier `#ROOT` would have been. `.dbgmain` is the element
   `pages/debug.nim` puts `.lm_goldenlayout` on and the ancestor of every
   `.lm_stack` the walk emits, which is exactly `#ROOT`'s structural position
   upstream, so the inheritance reaches the same set of panels and the
   vendored `!important` on `.lm_header` still wins over it for the chrome —
   the same two-rule cascade, expressed in the vocabulary this route has.
   Declared in BlockTracer's own layer rather than the Bridge because the
   SELECTOR is BlockTracer's; the VALUE is the port's. `--bt-text-strong` is
   neutral-50 in dark — the SAME rung upstream's `colors-ui-text-primary-body`
   resolves to — so this is an EXACT match and not a role binding. The chrome
   stays a role binding, because `colors-ui-text-primary-label` is neutral-150
   upstream and the Bridge binds it to `--bt-text-default`, neutral-100 here;
   that `->` is deliberate and predates this rule. In light the pair is
   neutral-1000 for content against neutral-800 for the chrome, so the tiering
   holds its DIRECTION — content at higher contrast than chrome — on a light
   surface too, which upstream, having one dark theme, never had to answer
   for. */
.dbgmain{flex:1 1 0;display:flex;min-height:0;min-width:0;
  padding:var(--bt-space-2xs);color:var(--bt-text-strong)}
.ln{display:flex;min-width:0;min-height:0}
.ln.row{flex-direction:row}
.ln.col{flex-direction:column}

/* The weight ladder. `defaultReplayLayout()` uses 1, 2, 3 and 9. */
.w1{flex:1 1 0;min-width:0;min-height:0}
.w2{flex:2 1 0;min-width:0;min-height:0}
.w3{flex:3 1 0;min-width:0;min-height:0}
.w4{flex:4 1 0;min-width:0;min-height:0}
.w5{flex:5 1 0;min-width:0;min-height:0}
.w6{flex:6 1 0;min-width:0;min-height:0}
.w7{flex:7 1 0;min-width:0;min-height:0}
.w8{flex:8 1 0;min-width:0;min-height:0}
.w9{flex:9 1 0;min-width:0;min-height:0}
.w10{flex:10 1 0;min-width:0;min-height:0}
.w11{flex:11 1 0;min-width:0;min-height:0}
.w12{flex:12 1 0;min-width:0;min-height:0}

/* ── one pane: CodeTracer's chrome, and the four rules it does not carry ─── */
/*
   EVERY HAND-WRITTEN PANE RULE THAT HAD A CODETRACER COUNTERPART IS GONE, and
   this comment is the record of what replaced it. The rules that draw a pane
   now arrive from `components/ct_components_css`, compiled out of the `.styl`
   sources vendored at `client/src/debugger/vendor/frontend/styles/components/`
   and byte-identical to the CodeTracer commit `ci/embed-sdk-pin.env` pins.

   The deleted class names are written below WITHOUT their leading dot, on
   purpose and for the reason this file gives twice already: it is inlined into
   every served page, so a comment spelling a retired selector puts that
   selector's text back into the served bytes a suite asserts over. Written
   this way, a `notin` assertion over the dotted spelling of any of them stays
   true — and `test_ct_components_css` makes exactly that assertion, over
   `debugRouteCss`, in "the retired BlockTracer pane vocabulary is gone from
   the served CSS".

     deleted (no longer a selector anywhere)   replaced by
     ───────────────────────────────────────   ──────────────────────────────
     pane                                      .lm_stack + .lm_items
                                                 + .lm_content
     panehead                                  .lm_header
     panetitle                                 .lm_title
     panebody                                  .lm_content
     panenote                                  .empty-overlay for a pane's
                                                 WHOLE-body message
                                                 (empty_states.styl), .btnote
                                                 for a note INSIDE a strip —
                                                 upstream's own header excludes
                                                 the second from the first
     ln stack                                  .lm_stack
     ln stack > pane                           .lm_content
     ln stack > pane > panehead                (nothing: a stacked panel never
                                                had a header of its own)
     stacktabs                                 .lm_tabs
     stacktab                                  .lm_tab + .lm_title
     stacktab:first-child                      .lm_active
     stackpanel def/alt                        .lm_content + the `:has()`
                                                 block below

   What survives below is the set with NO CodeTracer counterpart, and each one
   says why it has none. Three of the four exist because this route has no
   JavaScript and GoldenLayout's do not: GoldenLayout SIZES `.lm_stack`,
   `.lm_content` and every splitter from script, on absolute coordinates, so
   its stylesheet declares no layout for them at all. A static page has to
   declare that layout itself, and flexbox is how.
*/

/* The weight ladder. `defaultReplayLayout()` uses 1, 2, 3 and 9.
   No counterpart: GoldenLayout stores a weight in its own JSON model and
   resolves it to pixels in JavaScript. */
.w1{flex:1 1 0;min-width:0;min-height:0}
.w2{flex:2 1 0;min-width:0;min-height:0}
.w3{flex:3 1 0;min-width:0;min-height:0}
.w4{flex:4 1 0;min-width:0;min-height:0}
.w5{flex:5 1 0;min-width:0;min-height:0}
.w6{flex:6 1 0;min-width:0;min-height:0}
.w7{flex:7 1 0;min-width:0;min-height:0}
.w8{flex:8 1 0;min-width:0;min-height:0}
.w9{flex:9 1 0;min-width:0;min-height:0}
.w10{flex:10 1 0;min-width:0;min-height:0}
.w11{flex:11 1 0;min-width:0;min-height:0}
.w12{flex:12 1 0;min-width:0;min-height:0}

/* No counterpart: the flex geometry GoldenLayout does in script. The COLOURS,
   radii, tab shape, splitter weight and panel edges are all upstream's; what
   is declared here is only which box grows and which box scrolls. */
/* ── what GoldenLayout's BASE stylesheet provides, and this site does not ── */
/* `golden_layout.styl` is CodeTracer's THEME for GoldenLayout. It is loaded on
   top of the library's own `goldenlayout-base.css`, and it assumes the
   structural rules that file declares. golden-layout is not a dependency here —
   there is no `package.json` entry for it and the two Nim modules that mention
   it do so by name only — so the handful of base rules the theme actually
   depends on are declared here instead, each with what it is standing in for.

   `.lm_tab{position:relative}` is the load-bearing one and it is easy to miss.
   The active tab's curved connectors are `::before`/`::after` boxes at
   `position:absolute; left:-1.625em` / `right:-1.625em`, so they anchor to the
   nearest positioned ancestor. Base CSS gives `.lm_tab` `position:absolute`;
   without any positioning on the tab they would anchor to `.lm_header`
   instead — which the theme DOES position — and both curves would pile up at
   the left edge of the strip regardless of which tab is active. */
.lm_tab{position:relative}
.lm_tabs{position:relative}
/* THE GAP UNDER THE TAB, which is load-bearing and which nothing upstream can
   give us. CodeTracer sets the header to 32px from JavaScript (`headerHeight`,
   `ui/layout.nim`) and the theme's geometry is tuned to it: the tab is
   `1.5rem` tall with `0.25rem` above, so 32px leaves ~4px UNDER the tab, and
   that is exactly where the active tab's bridge shadow and its `::before` /
   `::after` connectors are aimed. A header left at content height has no gap
   at all and the connectors float clear of the panel's edge.

   Stated as PADDING on a token rung rather than as a height, for two reasons.
   A height would be a raw length — `tools/design/check-tokens.mjs` A2 rejects
   one in a view, and rightly, since 32px is CodeTracer's number and not a rung
   of this product's scale. And padding states the thing that actually matters:
   the gap. `--bt-space-2xs` is 4px, which is the gap CodeTracer's arithmetic
   arrives at. */
.lm_header{padding-bottom:var(--bt-space-2xs)}

.lm_stack{display:flex;flex-direction:column;min-width:0;min-height:0}
.lm_stack > .lm_header{flex:0 0 auto}
.lm_stack > .lm_items{flex:1 1 0;display:flex;flex-direction:column;
  min-height:0;min-width:0;overflow:hidden}
.lm_tabs{list-style:none;margin:0;padding:0 0 0 var(--bt-space-3xs)}
/* A tab's label is an `<a>` in a stack and a `<span>` alone, and `.lm_title`
   already sizes and truncates both; this only makes the link fill the tab so
   the whole tab is the hit target, which is what a GoldenLayout tab is. */
a.lm_title{display:block;line-height:inherit}

/* ── the one BlockTracer-only thing a pane body does ────────────────────── */
/* THE FADE IS THE OVERFLOW TREATMENT ON BOTH AXES, NOT JUST THE HORIZONTAL ONE.
   `.src` and `pre.raw` carry a `to right` mask so a listing that runs past the
   pane's right edge says so instead of ending mid-glyph. The VERTICAL axis had
   no equivalent, and every pane scrolls vertically — `overflow:auto`, right
   here — so a pane whose content ran past the bottom of the viewport simply
   stopped, with nothing to distinguish "this is the end" from "there is more".

   The Transaction pane is where that bites, because it is the narrowest column
   (the top-level split is Code 3 / middle 2 / Transaction 1, so it takes a
   sixth of the width and its RAW chain-native JSON is the tallest content on
   the page). Five reviewers across three triples filed it in vd9-r1 — L2 and L4
   on `debugger/wide/dark`, L2 on `debugger/wide/light`, L2 and L4 on
   `debugger--testnet/wide/light` — all reporting the pane "clipping mid-JSON at
   y≈1075" with `effectsMatched`/`effectsMismatched` below the cut. They were
   right about what they saw and wrong about the cause: the content was never
   clipped, it was scrollable and said nothing about it. A scroll region with no
   edge treatment is indistinguishable in a still image from a hard clip, and a
   reader at the page has only slightly more to go on.

   NO CODETRACER COUNTERPART, and the reason is structural rather than an
   oversight upstream: a GoldenLayout panel's scroller is the component inside
   `.lm_content`, not `.lm_content` itself, so there is no one element upstream
   could have hung this on. It stays, on `.lm_content`, which is this route's
   scroller.

   `reviews/QUEUED-DECISIONS.md` Q11 carries what the ramp costs at this line
   pitch: L3 measured the last fully-inside-the-box line at 2.19-2.22:1 against
   the floor, so the ramp stays at `lg` rather than lengthening, and the next
   move is a different treatment rather than a different number. */
.lm_content{flex:1 1 0;min-height:0;overflow:auto}

/* ── a note INSIDE a panel, which is not an empty panel ─────────────────── */
/* NO CODETRACER COUNTERPART, and upstream says so itself. `empty_states.styl`
   opens by stating its scope as panel-level messages and excluding "inline
   'no rows yet' lines that sit *within* a list alongside real rows … the side
   inset would indent them out of line with the rows around them". FIVE notes
   on this route are that kind: the `.srcrung` caption above the instruction
   listing, the decoded-input note beside the payload rows, the no-session
   prose (whose BLOCK is centred while the prose is deliberately left-aligned),
   and the attribution and coverage notes in the `.srcattr` / `.srccause`
   strips, which were the last two users of the retired pane-note class.
   `.empty-overlay` centres its text and insets it 2.5rem a side, which is
   right for "this panel is empty" and wrong for every one of them — measured
   on `debugger--metadata-pane`, where the decoded-input paragraph came out
   centred over four lines.

   So they keep BlockTracer's own treatment, under a name that says whose it
   is. This is the same treatment the retired pane-note class carried, and it
   is unchanged — the strip notes override the padding and the size, for the
   reason their own rule gives, and nothing here moved to accommodate them. */
.btnote{padding:var(--bt-density-card-pad) var(--bt-density-cell-x);
  color:var(--bt-text-muted);font-size:var(--bt-type-body-sm-size);
  line-height:var(--bt-type-body-sm-line);max-width:var(--bt-measure-prose)}

/* ── the splitter, without a drag ───────────────────────────────────────── */
/* `golden_layout.styl` gives `.lm_splitter` its colour, its 4px weight, its
   drag handle and a `col-resize` / `row-resize` cursor with a hover highlight.
   All of that arrives; the last two are switched off HERE, because
   GoldenLayout makes the element draggable from JavaScript and this route has
   none. A resize cursor over something that cannot resize is the
   affordance-that-lies defect the review brief names by that name, and it
   would be a new one — the old `gap` promised nothing.

   `flex:0 0 auto` is the same no-counterpart case as `.lm_stack` above:
   upstream positions splitters absolutely from script. */
.ln > .lm_splitter,.dbgmain > .lm_splitter{flex:0 0 auto}
/* Both carry the register prefix because both ANSWER a ported rule, and the
   port scopes every selector it emits with `[data-register="debugger"]`. An
   unprefixed `.lm_splitter{cursor:default}` is one class against two and loses
   on specificity — measured: `col-resize` still computed on the splitter. Rules
   in this file that answer nothing upstream stay unprefixed, as the rest of the
   file does. */
[data-register="debugger"] .lm_splitter{cursor:default}
[data-register="debugger"] .lm_splitter:hover{
  background:var(--bt-surface-raised) !important}

/* ── tabs without JavaScript ────────────────────────────────────────────── */
/* The ONE mechanism in this file that CodeTracer has no counterpart for at
   all, because upstream toggles `.lm_active` and shows one `.lm_content` from
   JavaScript. Every DECLARATION for an active tab still comes from upstream:
   `ct_components_css` re-emits its own `.lm_active` rules under the `:has()`
   selectors below rather than anything being re-typed here, so the curved
   connectors, the bridge shadow and the squared bottom corners are upstream's
   bytes under a different selector. What is written here is only which panel
   is SHOWN.

   Why `:has()` and not the forward-sibling chain this file used to carry: the
   tab strip and the panels are now in two different subtrees
   (`.lm_header` and `.lm_items`), which no sibling combinator crosses. `:has()`
   also removed the reason `renderStack` used to emit its panels in reverse. */
/* `flex-direction:column` on the hidden rule as well as the shown ones, so the
   axis is stated once. A panel stacks its rows; the block element this
   replaced got that for nothing, and a bare `display:flex` laid every panel's
   contents out in a ROW — measured: the source listing and the loop rail side
   by side, the transaction pane's rows running off the right edge.

   (The retired element is not named here. This stylesheet is inlined into
   every served page, so a comment spelling a dead selector puts its text back
   into the bytes — which `test_ct_components_css` asserts against, and which
   this comment failed when it was first written.) */
.lm_stack > .lm_items > .lm_content{display:none;flex-direction:column}
.lm_stack:not(:has(> .lm_items > .lm_content:target))
  > .lm_items > .lm_content.btdefault{display:flex}
.lm_stack:has(> .lm_items > .lm_content:nth-child(1):target)
  > .lm_items > .lm_content:nth-child(1){display:flex}
.lm_stack:has(> .lm_items > .lm_content:nth-child(2):target)
  > .lm_items > .lm_content:nth-child(2){display:flex}
.lm_stack:has(> .lm_items > .lm_content:nth-child(3):target)
  > .lm_items > .lm_content:nth-child(3){display:flex}
.lm_stack:has(> .lm_items > .lm_content:nth-child(4):target)
  > .lm_items > .lm_content:nth-child(4){display:flex}


/* ── source pane ────────────────────────────────────────────────────────── */
/* `height:100%` and not `flex:1` alone: `.srcwrap` is a BLOCK child of
   `.lm_content`, so it has no flex parent to grow into, and a chain of
   `flex:1 1 0` items under an auto-height ancestor resolves to zero — which
   renders the pane empty rather than short. The explicit height gives the
   chain a definite one to divide. */
/* ── THE CODE IS THE PANE'S FLOOR, NOT ITS REMAINDER ──────────────────────
   `min-height:0` used to sit where the floor below is, and it let the one
   thing the pane exists to show be the one thing squeezed out of it.

   MEASURED at 1280x720 on `/aztec-testnet-frames/tx/0x0a807e4e…/debug`, a
   capture that resolves source for 86 of its 459 steps and therefore carries
   every explanatory band at once: pane 435px, and above `.srcwrap` sit
   `.srcpos` 29, `.srcrung` 99, `.srccause` 195, `.srcattr` 139 and `.srcnone`
   121 — 583px of prose in a 435px pane. `.srccause` and `.srcattr` are
   `flex:0 0 auto` and cannot give, so the whole 583px deficit landed on the
   one child that could: `.srcwrap` resolved to 0px, `.src` inside it to 8px,
   and the listing rendered ZERO rows. The reader was shown five notes
   explaining a listing that was not on the screen.

   WHY A FLOOR AND NOT A SHRINK ORDER. The bands cannot be shrunk into
   usefulness — they are 583px of sentences — so the question is not how to
   divide 435px but which way the pane overflows. `.lm_content` is already
   `overflow-y:auto`, so a floor here makes the pane scroll and the reader
   reaches the notes by scrolling past them, in the order the page states
   them.

   THE VALUE IS DERIVED, NOT CHOSEN, like `.srcstrip`'s directly below. It is
   that same strip row — the tab box plus the list's `3xs` padding and the
   row's hairline — plus eight rows of code at the code type's own size and
   line height, and it resolves to 222px. Eight because the pane has to show a
   position IN CONTEXT: the marked line, and enough either side of it to read
   what it is doing.

   WHAT THE FLOOR ACTUALLY PUTS ON THE SCREEN IS SIX ROWS, NOT EIGHT, and the
   difference is not slack in the number. The floor is on `.srcwrap`, and the
   active `.srcdoc` inside it carries its OWN tab strip — 33 files on this
   subject — whose height depends on how those tabs wrap. Measured on the same
   subject, `.srcwrap` at the floor both times: 1280x720 gives `.src` 139px
   and six rows, 1440x900 gives 158px and six. A floor on `.srcwrap` can
   promise the listing a definite share of the pane; it cannot promise a row
   count, because what sits above the listing INSIDE it is width-dependent.
   Six rows of context is the measurement, and it is the one to re-read if
   this number is ever raised.

   AT A HEALTHY VIEWPORT THIS CHANGES NOTHING, which is the other half of the
   claim. Measured at 1920x1080 on the same subject, before and after: pane
   797px, `.srcwrap` 336px, `.src` 289px, 12 rows, `scrollHeight ==
   clientHeight` — identical readings. The floor is 222px, under the 336 the
   layout already gives it, so it does not bind. At 1280x720 and 1440x900 it
   does, and the pane scrolls (813 over 435, and 757 over 617). */
.srcwrap{display:flex;flex-direction:column;height:100%;
  min-height:calc(var(--bt-layout-tabstrip-row-min) +
    2 * var(--bt-space-3xs) + var(--bt-stroke-hairline) +
    8 * var(--bt-type-code-size) * var(--bt-type-code-line))}
/* One panel per document, switched by `:target`. The ACTIVE document is
   emitted last so every alternate can reach forward and hide it — CSS has
   only a forward sibling combinator. Each panel carries its OWN tab strip
   with its own tab marked, which is what makes the active tab correct for any
   number of documents without a per-document rule. */
.srcdoc{display:flex;flex-direction:column;min-height:0;flex:1 1 0}
.srcdoc.alt{display:none}
.srcdoc.alt:target{display:flex}
.srcdoc.alt:target ~ .srcdoc.def{display:none}
/* IT NO LONGER WRAPS — IT IS ONE ROW THAT SCROLLS, AND THE OVERFLOW IS A
   DROPDOWN MENU.

   The strip wrapped, and capping its height only bounded how much of the
   document it could take rather than stopping it taking it: on the 32-file
   FeeJuice bundle it wrapped to SEVEN rows at 1280 (172px of a 672px pane),
   six at 1440 and five at 1920. A tab strip is a way IN to the source, so a
   strip that displaces the source has inverted its own purpose, and the honest
   fix is for it to stop occupying the document's height at all rather than to
   occupy a bounded share of it.

   THE ROW IS THE RESTING STATE AND A MENU IS THE OPENED ONE, AND THAT SECOND
   HALF IS THE CHANGE. It used to unfold — the wrapped grid came back IN FLOW,
   measured at EIGHT rows and 196px at 1280, which is more than the seven rows
   and 172px that were reported as the bug. A disclosure whose open state
   exceeds the defect gives the reader the layout they complained about and
   calls it a choice. A menu is the treatment that does not: it leaves the flow
   entirely, so the row keeps its height, the document keeps its position, and
   the list is drawn over the source rather than in place of it.

   THE SURFACE, THE BORDER AND THE PADDING SIT ON `.srcstrip`, which is the
   row's outer box and holds the tabs and the trigger side by side, and is the
   POSITIONED ancestor the open menu hangs from. The list itself keeps its name
   — four suites match its class attribute as an exact string, so it may not
   gain a modifier — and it is the SAME element in both states: a scrolling row
   at rest, an overlay column when open.

   AND THAT SENTENCE MAY NOT SPELL THE ATTRIBUTE OUT, which is not pedantry:
   this comment SHIPS. Stylesheet comments are inlined into every page, two of
   those four suites assert that the attribute does not occur on an
   instruction-listing page, and an earlier draft of this paragraph quoted it
   literally — which put one occurrence on every listing page in the build and
   turned a comment into a red suite. */
/* THE ROW'S HEIGHT IS ITS OWN, NOT ITS TALLEST CHILD'S, and that is what the
   paragraph above promises: "it leaves the flow entirely, so the row keeps its
   height, the document keeps its position". It did not. MEASURED at 1280 and
   1440 on three subjects: opening the list took 5px out of the row and pulled
   the source up with it, because the tab row IS the tallest child and taking
   it out of flow leaves the trigger — five pixels shorter — setting the
   height on its own.

   THE FLOOR IS IN THE SAME UNITS THE TAB IS BUILT FROM, so it cannot drift
   from it. `.srctab` carries the design system's `ct-tab`, whose box is
   em-relative all the way down — `padding:0.5em 0.75em`, `line-height:1.2`,
   `border-bottom:0.125em` — which is the 2.325em of vertical box that
   `--bt-layout-tabstrip-row-min` holds. Add the list's own `3xs` padding top
   and bottom and this row's hairline, and the floor is the closed row,
   expressed as the same arithmetic rather than as the 36.8px it comes to.

   THE EM LIVES IN THE TOKEN AND NOT HERE, and A2 is why: a Layer 2 view may
   carry no raw length, and it caught this one — `debugger_css.nim:632
   2.325em`. The rule is right and the token is the better home anyway: the
   quantity is the design system's tab box, which is Layer 1's to state.

   It is a FLOOR and deliberately a hair above the natural height: a rounded
   border makes the exact natural height a fraction smaller, and a floor that
   can sit below it would let the two states diverge again on a platform whose
   font metrics differ. Above it, both states resolve to the floor and the row
   cannot move. */
.srcstrip{position:relative;display:flex;align-items:stretch;flex:0 0 auto;
  min-width:0;
  min-height:calc(var(--bt-layout-tabstrip-row-min) +
    2 * var(--bt-space-3xs) + var(--bt-stroke-hairline));
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  background:var(--bt-surface-sunken)}
.srctabs{display:flex;gap:var(--bt-space-3xs);flex-wrap:nowrap;
  flex:1 1 auto;min-width:0;
  overflow-x:auto;overscroll-behavior:contain;
  padding:var(--bt-space-3xs) var(--bt-density-cell-x)}
/* A tab is a real link to its document, so it gets a real hit area and a real
   hover — the strip used to be four inert `<span>`s naming four files of which
   one was reachable. `flex:0 0 auto` and `nowrap` because a flex item in a
   scrolling row shrinks to nothing rather than overflowing by default, which
   would turn 32 tabs into 32 slivers instead of a row that scrolls. */
.srctab{flex:0 0 auto;white-space:nowrap;
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-size:var(--bt-type-label-size);color:var(--bt-text-subtle);
  padding:var(--bt-space-3xs) var(--bt-space-xs);
  border-radius:var(--bt-radius-xs);
  border-bottom:var(--bt-stroke-thick) solid transparent;
  transition:color var(--bt-motion-fast) var(--bt-motion-ease)}
.srctab:hover{color:var(--bt-text-default);background:var(--bt-surface-hover)}
/* THE ACTIVE TAB IS STICKY, AND THAT IS THE WHOLE GUARANTEE THAT THE FILE YOU
   ARE READING IS NAMED ON SCREEN.

   A one-row strip that merely scrolls is a WORSE defect than the wrap it
   replaces: each panel carries its own strip, a freshly revealed panel starts
   at `scrollLeft:0`, and the active tab of a 32-file bundle is then somewhere
   off to the right — measured off-screen for the 18th tab onward. Three CSS-only
   remedies were tried against a real browser and two of them fail:
   `scroll-snap-type:x mandatory` with the active tab as the only snap area DOES
   position it, but it then TRAPS the scroll — the wheel moves nothing and every
   other tab becomes unreachable; `proximity`, and snapping every tab, do not
   position it at all.

   Sticky is the only one that touches no scroll mechanics. The tab sits in its
   natural place while it is in view and pins itself to whichever edge it would
   otherwise leave, so it is on screen at EVERY scroll position rather than only
   at the one the panel opened on — a stronger property than the snap that was
   rejected. It needs the strip's own surface to occlude the tabs sliding under
   it, which is `--bt-surface-sunken` and not a new colour: it is the same
   surface it is already sitting on, so a tab in its natural position looks
   exactly as it did.

   THE HALO IS WHAT MAKES THE PIN READ AS DELIBERATE. A sticky chip with a flat
   background butts against the tab sliding under it and cuts it mid-glyph,
   which looks like a rendering fault rather than a control — and on this
   contract at 1280 that is the FIRST thing the pane shows, because the marked
   file is the fifth tab and the row holds four. The shadow is the strip's own
   surface rather than a colour of its own, so it is not a shadow in the visual
   sense at all: it is a soft mask that fades the text approaching the chip
   instead of clipping it, and it is invisible when the tab is in its natural
   position with nothing underneath to fade.

   IT IS NOW THE ONLY MASK OF ITS KIND ON THE PAGE. This used to read "same
   idiom as the code pane's right-edge fade"; that fade, and the five other
   `mask-image` fades this repository carried, were removed because
   CodeTracer's own chrome spends no gradients and the operator's report was
   that they are what BlockTracer does and the product does not. So the
   sentence naming a sibling was left pointing at a rule that no longer
   exists. All six that went were `mask-image`; the `box-shadow` below was
   never one of them, which is why it is still here to be explained.

   IT SURVIVES ON DIFFERENT GROUNDS from the ones that went. Those were
   decoration over a scroll edge. This is the occlusion a sticky chip needs in
   order not to cut the tab passing beneath it mid-glyph. If that need goes
   away — a tab strip that cannot overflow, or a pin that is not sticky — this
   goes with it rather than becoming a house style. */
.srctab.on{position:sticky;left:0;right:0;z-index:1;
  background:var(--bt-surface-sunken);
  box-shadow:0 0 var(--bt-space-xs) var(--bt-space-3xs) var(--bt-surface-sunken);
  color:var(--bt-text-strong);border-bottom-color:var(--bt-mark-view)}
/* THE TRIGGER. The checkbox is the state and the label is the control; the
   input is zero-sized rather than `display:none` because a hidden input is not
   focusable and this has to stay operable from the keyboard. Bare `0` is not a
   length, so this stays inside A2 without inventing a token for "no size". */
.srcallt{appearance:none;-webkit-appearance:none;
  width:0;height:0;margin:0;padding:0;border:0;background:none;flex:0 0 auto}
/* The label carries the focus ring, because the ring the global
   `:focus-visible` rule puts on the input itself would be drawn around nothing.
   No new tokens — the same three the global rule uses. */
.srcallt:focus-visible ~ .srcall{outline:var(--bt-focus-width) solid var(--bt-focus-ring);
  outline-offset:var(--bt-focus-offset)}
/* IT STRETCHES, AND ITS VERTICAL PADDING IS THE ROW'S HEIGHT WHEN THE LIST IS
   OUT OF FLOW. This is the one place the menu form costs something the
   disclosure did not: the open list is absolutely positioned, so it stops
   contributing height, and the trigger is then the ONLY thing holding the row
   open. `2xs` is exactly the `3xs` the list's own padding spends plus the `3xs`
   a tab spends — the two boxes the row's 26px used to come from — so the row is
   the same height open and closed and the source below it does not shift by a
   pixel when the menu appears. That is the whole property the report asked for,
   and it is worth stating that it rests on a padding rung and not on a
   coincidence. `align-self` is left alone for the same reason: stretched, the
   trigger's own left border becomes the row's full-height divider rather than a
   stub that stopped where a two-pixel padding did.

   AND IT RESERVES A TAB'S OWN TRANSPARENT UNDERLINE, the last two pixels of
   that sum and measured rather than reasoned: a tab's box is its padding PLUS
   the `thick` rule it holds for the active mark, and a trigger without one shrank
   the row 27px to 25px the moment the list left flow — a 2px jump of the whole
   document, on the one interaction whose entire claim is that it moves nothing.

   `margin-left:auto` PINS IT TO THE END OF THE ROW IN BOTH STATES, also caught
   in the screenshots. Closed, the list is a `1 1 auto` item that fills the row
   and pushes the trigger right on its own; open, the list is out of flow and the
   trigger is the row's only item, so it fell back to the start and JUMPED to the
   left edge under a menu still anchored right. Neither position may depend on a
   sibling that is sometimes there. */
.srcall{flex:0 0 auto;margin-left:auto;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;
  font-size:var(--bt-type-label-size);color:var(--bt-text-subtle);
  padding:var(--bt-space-2xs) var(--bt-density-cell-x);
  border-left:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  border-bottom:var(--bt-stroke-thick) solid transparent;
  transition:color var(--bt-motion-fast) var(--bt-motion-ease)}
.srcall:hover{color:var(--bt-text-default);background:var(--bt-surface-hover)}
/* Open, the trigger is a pressed control rather than an idle one — the menu it
   opened is drawn OVER the source, so the one thing on screen that says where
   that overlay came from is the chip it came out of. */
.srcallt:checked ~ .srcall{color:var(--bt-text-strong);
  background:var(--bt-surface-hover)}
/* Which of the two words the control shows is the toggle's only other job. */
.srcallless{display:none}
.srcallt:checked ~ .srcall > .srcallmore{display:none}
.srcallt:checked ~ .srcall > .srcallless{display:inline}
/* OPENED: THE SAME LIST, DRAWN AS A MENU OVER THE SOURCE.

   Not a second list — the same one, so the menu costs no markup and cannot
   disagree with the row about which tab is marked. `tabStrip` in debugger.nim
   carries that argument; it is about the MARKUP and its home is there, which
   also keeps it out of a stylesheet that ships inlined into every page.

   `position:absolute` IS THE FIX, not a detail of it. Out of flow, the list
   cannot push the document down, which is precisely what the disclosure it
   replaces did — 196px of it at 1280. `top:100%` hangs it off the row's bottom
   border and `right:0` aligns it under the trigger it came from rather than at
   the far end of the pane; `width:max-content` with `max-width:100%` sizes it to
   the longest filename it holds and clamps it to the pane.

   THE CAP'S SUBJECT CHANGED WITH THE CONTROL — see D-11. It used to bound how
   much of the DOCUMENT an in-flow list could take, so it had to be small; an
   overlay takes none of the document, so what is left to bound is only whether
   the menu outruns the screen, and 22vh showed six files of thirty-two. The list
   scrolls past the cap, so no file is ever removed from it.

   The sticky pin is released here: its halo is a mask for tabs sliding under it,
   which in a column is nothing. The marked file is named the way a menu names
   its current item — a filled row with a leading mark — and every item reserves
   the same transparent leading border so that mark costs no alignment. */
.srcallt:checked ~ .srctabs{position:absolute;top:100%;right:0;z-index:2;
  flex-direction:column;flex-wrap:nowrap;align-items:stretch;
  width:max-content;max-width:100%;
  max-height:var(--bt-layout-tabmenu-max-height);
  overflow-x:hidden;overflow-y:auto;
  padding:var(--bt-space-3xs);
  background:var(--bt-surface-overlay);
  border:var(--bt-stroke-hairline) solid var(--bt-border-default);
  border-radius:var(--bt-radius-sm);
  box-shadow:var(--bt-elevation-overlay)}
.srcallt:checked ~ .srctabs > .srctab{position:static;box-shadow:none;
  background:none;border-bottom-color:transparent;
  border-left:var(--bt-stroke-thick) solid transparent;
  border-radius:var(--bt-radius-xs);
  overflow:hidden;text-overflow:ellipsis}
.srcallt:checked ~ .srctabs > .srctab:hover{color:var(--bt-text-default);
  background:var(--bt-surface-hover)}
.srcallt:checked ~ .srctabs > .srctab.on{color:var(--bt-text-strong);
  background:var(--bt-surface-selected);
  border-left-color:var(--bt-mark-view)}
/* THE INSTRUCTION LISTING'S CAPTION — the strip a listing gets where source
   gets its tab strip.

   A tab strip answers "which of these files", and an instruction listing is one
   bytecode object: the strip would be a control with a single option. What a
   listing actually raises is "what are these columns, and what are these
   numbers offsets into", and that is what this says.

   It takes `.srctabs`'s own surface, border and label size rather than a set of
   its own, because it occupies that position and a reader should not have to
   learn that the strip above a listing is a different kind of thing from the
   strip above a file. Not monospace: it is a sentence, and the rows below it
   are the monospace part. It WRAPS — the caption names the recorded object,
   which on a chain is a 66-character path, and a one-line clip would take the
   half of it that identifies the object. */
.instrcap{flex:0 0 auto;
  padding:var(--bt-space-2xs) var(--bt-density-cell-x);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  background:var(--bt-surface-sunken);
  color:var(--bt-text-muted);font-size:var(--bt-type-label-size);
  line-height:var(--bt-type-body-sm-line);overflow-wrap:anywhere}
/* A listing's rows are not source, and the one place that has to show is the
   column a reader scans: the gutter holds a STEP ordinal here, not a line
   number, and the marker cell holds the same `·` on every row because every row
   IS a recorded step. Nothing is re-coloured and no glyph is redefined — the
   position mark, the `.p` cell it lives in and the `.m` cell beside it are the
   source pane's, unchanged, which is the whole reason the listing goes through
   that renderer. `tabular-nums` is the only addition: a column of ordinals that
   changes width at 100 is a column that shifts under the eye. */
.src.instr .n{font-variant-numeric:var(--bt-numeric-features)}
/* The pane opens part-way into the file, and says so rather than leaving the
   reader to infer it from a first line number that is not 1. */
.srcfrom{padding:var(--bt-space-2xs) var(--bt-density-cell-x);
  color:var(--bt-text-muted);font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-size:var(--bt-type-label-size);line-height:var(--bt-type-body-sm-line);
  background:var(--bt-surface-sunken);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle)}
/* The code body is the pane's own scroll container on BOTH axes, so a long
   line scrolls the code and not the tab strip above it.
   `--bt-surface-raised` and not `--bt-surface-code`: the Code pane is a pane
   BODY, and it was the only one on the page that was not — it took the code
   well's surface, which in dark was byte-identical to the page canvas, so the
   flagship pane was the one pane with no elevation (round 5,
   reviews/rounds/vd5-round5/debugger__laptop__dark__L3.md and
   reviews/rounds/vd5-round5/debugger__wide__dark__L3.md).
   `--bt-surface-code` is now
   only what its name says: the recessed WELL an embedded listing sits in
   (`pre.raw`, the explorer's source blocks), and it recesses to the page's own
   surface in both themes.
   ONE overflow treatment, and it is the fade — round 5 found two on one page,
   the Code pane masking its right edge while the RAW (chain-native) box
   hard-clipped a hex address mid-glyph against its own border — filed by
   three reviewers of that round
   (reviews/rounds/vd5-round5/debugger__wide__light__L2.md,
   reviews/rounds/vd5-round5/debugger__wide__light__L4.md,
   reviews/rounds/vd5-round5/debugger__wide__dark__L1.md).
   It is a MASK rather than the
   overlay element it replaces, for two reasons: an overlay needs a positioned
   ancestor, and the only one available spanned the tab strip and the position
   note as well as the code, so chrome faded too; and a mask is a property of
   the scroll container itself, so the identical declaration can be given to
   `pre.raw`, which has no wrapper to hang an overlay on. `mask-clip` keeps the
   border out of it, so the pane's own edge stays solid while the text under it
   goes. `currentColor` is the opaque stop because a mask reads ALPHA — the
   colour is never painted, and inheritance is not a design value. The lines
   are NOT wrapped: a wrapped listing costs rows, and rows are information. */
.src{font-family:var(--bt-font-code),var(--bt-font-mono-fallback);
  font-size:var(--bt-type-code-size);line-height:var(--bt-type-code-line);
  color:var(--bt-text-code);background:var(--bt-surface-raised);
  padding:var(--bt-space-2xs) 0;min-width:0;flex:1 1 0;overflow:auto}
/* ── NO SCROLL-EDGE FADE: CODETRACER HAS NO GRADIENT ANYWHERE ─────────────
   Measured across all eight vendored CodeTracer component stylesheets:
   ZERO occurrences of `gradient` of any kind. This repository had six, and
   all six were this one idea — a `mask-image` dissolving the last
   `--bt-space-2xl` (or `lg`) of a scroller to say "the content continues".
   It is a real affordance and it is not upstream's; a reader with both
   products open sees BlockTracer's panes dissolve at an edge where
   CodeTracer's end on a hard line, and the fade is the most visible of the
   differences because it is in motion whenever anything scrolls.

   Removed rather than tokenised. What replaces it is the browser's own
   scrollbar and the hard edge upstream uses, which is the whole of
   CodeTracer's answer to the same question. */
/* `min-width:max-content` stops a row being narrower than its own text, so a
   long line is not wrapped or squeezed by the pane it scrolls inside.

   IT DOES NOT DO WHAT THIS COMMENT USED TO SAY, and the correction is a
   measurement rather than a re-reading. It claimed the declaration "makes the
   rows as wide as the widest line, so the current-line fill and the
   executed-line stripe extend across the whole scrolled width instead of
   stopping at the pane edge". `max-content` is resolved PER ROW, so each row is
   as wide as ITS OWN text: `debugger/wide/dark` has four distinct `.srcline`
   widths (911.3, 939.2, 1141.5, 1166.9) and `debugger/laptop/light` has
   thirteen. Driving the pane to `scrollLeft = scrollWidth` puts the
   `.srcline.cur` fill's painted right edge at x=660.3 against a visible edge at
   x=916 (wide) and at x=199.9 against x=686 (laptop) — the highlight stops
   256px and 486px short, which is precisely the "rendering fault once the pane
   is scrolled" the old comment said this prevented.

   The behaviour is real but has never been photographed: every capture is taken
   at `scrollLeft:0`, where the fill covers the scrollport and nothing looks
   wrong. Making it true needs the ROWS' containing block to be `max-content`
   sized, which `.src` cannot be without a wrapper element it does not have — a
   markup change, not a declaration. Queued as Q17 rather than guessed at.

   The declaration stays because the narrower claim above IS what it does and is
   worth having. What is removed is a comment that read as evidence for a
   behaviour the page does not have. */
.srcline{display:flex;align-items:flex-start;gap:var(--bt-space-xs);
  padding:0 var(--bt-density-cell-x);white-space:pre;
  min-width:max-content;position:relative;
  border-left:var(--bt-stroke-thick) solid transparent}
/* THE POSITION COLUMN. Leftmost, immediately inside the current-position rail,
   which is where a debugger's marker gutter goes and where a reader's eye
   already is when it follows that rail down the pane.

   It is a SEPARATE flex item and that is the whole point of it. `.m` next to it
   holds `.mg`/`.mn`/`.mt` — steppable, ran-in-this-pass, did-not-run — and
   every branch rule in this sheet selects one of those three. None of them can
   reach `.p`, so the position cannot be hidden by a branch claim the way `.mg`
   is by `.srcline.ntnow .mg{display:none}` and `.srcline.rnnow .mg{...}`. That
   suppression is why the measurement further down this file records "`▶` is
   never painted anywhere in the corpus": the current line is structurally also
   the arm that ran, so the row that most needs the glyph is exactly the row
   that hid it.

   Fixed width, on every row, so the code text starts at the same x on all of
   them. `--bt-space-sm` and not `.m`'s `--bt-space-md`: `▶` is a solid
   triangle roughly two thirds the advance of `⊙`, and the gutter should not
   grow more than the mark needs.

   NO COLOUR of its own. Non-current rows put a space here, so there is nothing
   to ink, and the current row takes the position ink from the rule below with
   `.n` and `.m` — one declaration for everything on the band, at the 7.14:1
   (dark) / 7.30:1 (light) pair that rule already measures. */
.srcline .p{flex:0 0 var(--bt-space-sm);text-align:center;user-select:none}
/* THE LEAD-IN, AS A SCROLL OFFSET RATHER THAN AS DELETED LINES.
   `source_document.SourceLeadIn = 6` used to open the pane six lines above the
   position by DROPPING everything above that — the reader got six lines of
   context and lost the rest of the program, and `.srcfrom` announced the loss.
   The six lines were the right instinct and the mechanism was the wrong one.
   `scroll-margin-block-start` gets the same six rows of context out of the same
   number, from whichever of the two scrolls arrives first — `autofocus` on `.p`
   on a page with no script, or `hydrate.scrollToCurrentLine` on every stop once
   the bundle is running — and it costs nothing above the window because there is
   no longer a window. Six times the code row pitch, computed from the two tokens
   that DEFINE that pitch rather than from a px number that would drift away from
   them the first time either moved.
   BOTH SELECTORS, because the two scrolls name two different elements: focus
   scrolls `.p` into view, `scrollIntoView` is called on `.srcline.cur`, and
   `scroll-margin` is read off the element being scrolled to. One value, so they
   cannot land two rows apart.
   `outline:none` ONLY on `.p`. It is `tabindex="-1"`, so it is unreachable by
   Tab and the ring can never be the "where am I" a keyboard reader needs — it
   would only be a box drawn around a 12px glyph at page load, on a row that is
   already filled, railed and inked as the position. Nothing else on this page
   loses its focus ring. */
.srcline.cur,.srcline .p{
  scroll-margin-block-start:calc(6 * var(--bt-type-code-size) * var(--bt-type-code-line))}
.srcline .p:focus{outline:none}
.srcline .n{flex:0 0 var(--bt-space-2xl);text-align:right;
  color:var(--bt-text-subtle);font-variant-numeric:var(--bt-numeric-features);
  user-select:none}
.srcline .m{flex:0 0 var(--bt-space-md);color:var(--bt-text-subtle);
  text-align:center;user-select:none}
.srcline .t{font:inherit;color:var(--bt-syntax-plain);white-space:pre;min-width:0}
/* A STEPPABLE line is marked in the GUTTER and nowhere else. It used to carry
   a row fill as well, and that fill was the page's second banding signal:
   round 5 read it as the explorer's zebra-striped data table imported into the
   listing, noted that it did not even run on a clean two-row cycle (26 and 27
   both shaded, 30 and 31 both clear — because it is keyed to executability and
   not to parity, which is exactly why it must not LOOK like parity), and
   measured it at 1.05:1 against the code surface in both themes, where it
   carried nothing anyway — four reviewers of round 5
   (reviews/rounds/vd5-round5/debugger__laptop__light__L5.md,
   reviews/rounds/vd5-round5/debugger__laptop__light__L3.md,
   reviews/rounds/vd5-round5/debugger__wide__light__L3.md,
   reviews/rounds/vd5-round5/debugger__wide__dark__L3.md).
   NO information is dropped: the
   executable/non-executable distinction is a required must-show and the `·`
   marker still carries it, now at 5.09:1 (light) and 6.66:1 (dark) in the
   position family — "you can stop here" is the same question as "you are here"
   asked one step quieter — instead of the accent it shared with hyperlinks. */
.srcline.hit .m{color:var(--bt-mark-executable)}
/* A POSITION THE COMPILER KEYED HERE, marked as a qualification of the gutter
   dot rather than as a replacement for it — see
   `session_view.SourceLine.compilerAttributed`.

   TWO CHANNELS, NEITHER OF THEM COLOUR ALONE. A dotted underline on the line's
   number cell, plus the `?` badge below — so the mark survives colour removal
   and survives a theme, which is the rule every other mark on this row follows
   (`.ntbar`/`.rnbar` are an edge, `.m`'s glyphs are shapes). It is deliberately
   quiet: the step IS real and the line IS executable, so a loud treatment would
   read as an error on a row that carries a correct measurement.

   It does not touch `.m`, `.p`, `.ntbar` or `.rnbar`. Those four cells are
   already contended for by the executable marker, the position and the two
   branch rails — the contention `.p` was split out to end — and adding a fifth
   claimant to any of them would reintroduce exactly that defect. The number
   cell `.n` carries nothing but the ordinal and is free. */
/* The pane-level sentence for the `?` marks. `.srcrung`'s position and weight —
   it is the same kind of statement, one rung finer: that header says which
   fidelity the position is at, this says how much to trust the position itself.
   It is emitted on BOTH sides of the rung boundary and never replaces the rung
   header, so a pane can carry both and they read as two facts rather than as one
   contradicting the other. */
/* `.srccause` — WHICH CONTRACT the steps with no line ran in and why none is
   published — shares these rules rather than getting its own, and the sharing is
   the design decision. It sits directly under `.srcrung`, which states the RATIO
   it explains; the two are one thought, and giving the explanation a second
   surface colour or a second border weight would present them as two unrelated
   advisories and invite a reader to skip one. No new declaration and no new
   token: the note that says "how much" and the note that says "why" are the same
   kind of statement at the same volume. See `session_view.EditorPane.coverageNote`. */
.srcattr,.srccause{flex:0 0 auto;
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  background:var(--bt-surface-sunken)}
/* The note inside either strip is a `.btnote` — the class whose own comment
   above states this exact case, and the class the `.srcrung` caption directly
   beneath these two already uses. It was the retired pane-note class until
   this change: the retirement table below had listed that class as deleted and
   replaced by `.empty-overlay` while it was still live here and in two
   renderers, and `.empty-overlay` was never the right answer for it — a note
   inside a strip is precisely what `empty_states.styl`'s own header excludes.

   THE RENDERING IS UNCHANGED, which is why the three overrides are here.
   `.btnote`'s own rule is written for a note in a pane BODY: card padding, the
   body-small size, and the prose measure. A strip is one sentence in a
   bordered band the width of the pane, so it keeps the tighter padding and the
   label size it has always had, and declines the measure — a 68ch cap inside a
   full-width band would leave a ragged right edge against a border that runs
   the whole way. `color` and `line-height` are NOT restated: `.btnote` already
   declares the same two values, and a second copy is a second thing to keep in
   step. */
.srcattr .btnote,.srccause .btnote{
  padding:var(--bt-space-2xs) var(--bt-density-cell-x);
  font-size:var(--bt-type-label-size);max-width:none}
.srcline.cattr .n{text-decoration:underline dotted;
  text-decoration-thickness:var(--bt-stroke-hairline);
  text-underline-offset:var(--bt-space-3xs)}
/* The `?` is its OWN element, emitted only on a marked row — see the renderer
   for why it is not a `data-` attribute on every row. It sits in the rail column
   beside `.ntbar`/`.rnbar` rather than in `.m`, `.p` or `.n`, so it contends
   with no existing mark: `.m` already answers "what does the recording say about
   this line", `.p` answers "are you here", and the two rails answer "which way
   did it go". This answers a fourth question and gets a fourth channel. */
.srcline .cattrmark{position:absolute;right:var(--bt-space-2xs);top:0;
  font-size:var(--bt-type-label-size);line-height:var(--bt-type-body-sm-line);
  font-weight:var(--bt-type-h3-weight);
  color:var(--bt-status-warning-fg);pointer-events:none}
/* The current line RAISES contrast. It used to lower it: the line number and
   the ▶ marker were accent-on-accent — the accent foreground on the accent's
   own tint — which measured 3.83:1 in dark and 5.10:1 in light against 6.61:1
   for every OTHER line number on the page, so the two glyphs whose only job is
   to say "you are
   here" were the least legible marks on the row they identified (round 5,
   reviews/rounds/vd5-round5/debugger__laptop__dark__L3.md and
   reviews/rounds/vd5-round5/debugger__wide__light__L3.md).
   The fill and the mark are now
   a designed PAIR rather than two rungs of one ramp: 7.14:1 in dark and 7.30:1
   in light, and the fill itself is a 1.66:1 / 1.25:1 step off the listing where
   the old one was 1.23:1. Every syntax role was re-checked against it — 16
   pairs, weakest 4.54:1 (dark comment) — because a token keeps its hue here. */
.srcline.cur{background:var(--bt-mark-position-surface);
  border-left-color:var(--bt-mark-position)}
.srcline.cur .n,.srcline.cur .m,.srcline.cur .p{color:var(--bt-mark-position)}
.srcline.cur .t{color:var(--bt-text-strong)}
/* THE BREAKPOINT, ON THE LINE NUMBER, AND WHY IT IS THERE AND NOT IN `.m`.
   `.m` is the cell this stylesheet already spent a long comment splitting
   apart: it was one glyph slot answering two questions ("what does the
   recording say about this line" and "is the session standing here") and CSS
   resolved the collision by hiding one of them, so the position glyph was
   never painted anywhere in the corpus. Putting a third question — "will
   Continue stop here" — into that same cell would rebuild the defect that
   `.p` was carved out to fix.
   The line number has no such contention. It is also the thing a reader
   already points at to mean "this line", which is why it is the click target
   (`components/debugger.renderSource`), and a filled number IS the
   conventional gutter breakpoint.
   NO NEW TOKEN. A breakpoint is a STOP, and the stop family is already
   `--bt-mark-position` — the same family whose quieter rung `.hit .m` uses for
   "you can stop here". This is "you WILL stop here", so it takes the family at
   full strength, on the fill rather than on the ink, which distinguishes it
   from the current line without a second hue. Reusing `--bt-mark-changed`
   (amber, "this value changed at this step") was the alternative and would
   have been a third meaning on a token that already has one. */
.srcline.bp .n{background:var(--bt-mark-position);color:var(--bt-text-on-accent);
  border-radius:var(--bt-radius-sm)}
/* The current line CAN carry a breakpoint, and on that row `.srcline.cur .n`
   above would otherwise repaint the number in the position ink — on a fill of
   the same hue, which is the ink-on-its-own-tint failure this file records at
   3.83:1. One extra class outranks it. */
.srcline.cur.bp .n{background:var(--bt-mark-position);
  color:var(--bt-text-on-accent)}
/* The gutter says it is clickable only where it IS clickable: these attributes
   are emitted on a live pane alone, so the static export keeps a plain,
   non-interactive number with no pointer and no focus ring. */
.srcline .n[role="button"]{cursor:pointer}
.srcline .n[role="button"]:hover{background:var(--bt-surface-hover)}
.srcline.bp .n[role="button"]:hover{background:var(--bt-mark-position)}
/* The lexical palette (Design-System.md §7: "syntax highlighting comes from the
   product lineage's editor tokens in BOTH themes"). One rule per TokenKind that
   `debugger.tokenClass` can return; `tkPlain` has none, because it is emitted
   as a bare text node and takes `.t`'s colour above.

   These sit on the SPAN, so they win over `.srcline.cur .t` by inheritance
   rather than by specificity — a token keeps its hue on the current line,
   where the background is `--bt-mark-position-surface` rather than the pane
   body. A source line now has exactly TWO backgrounds, not three: the listing
   itself and the current-position fill. The third was the executed-line tint,
   removed above because the gutter marker already carried it and a second
   banding signal read as zebra striping. Every role was re-checked against
   both, in both themes — 32 pairs, and the weakest is 4.54:1 (dark comment on
   the current line). Colour is the only channel: the text is fully legible
   without it, so unlike a status badge this needs no redundant glyph. */
/* ── a branch that was evaluated and NOT taken ───────────────────────────── */
/* The desktop app's `flow-not-taken` / `line-flow-skip` pair, carried over with
   two changes.

   It is not RED. Desktop paints an untaken branch in a translucent crimson
   (`FLOW_CONDITION_NOT_TAKEN`, a red in both its themes), which is
   defensible in an editor and is not defensible here: on this product the
   danger family means a reverted execution, and a transaction that succeeded
   while three of its blocks were painted the failure colour would say the
   wrong thing louder than the right one. Not taking a branch is ordinary
   control flow.

   And it is not a dim alone. Three channels, and the GLYPH is the primary one:
   `⊘` in the not-taken role, at 9.15:1 (light) and 5.47:1 (dark), replacing the
   line's ordinary gutter marker in exactly the passes where the claim holds. A
   column of them down consecutive lines is also what makes the region read as a
   BLOCK rather than as a run of unrelated dim lines, which is the whole content
   of the desktop feature. `⊘` is distinct from the event log's `✕` — a revert,
   which DID happen — for the same reason the colour is.

   The RAIL is the second: a 2px edge down the left of every claimed line, so
   consecutive ones draw one continuous mark and the region reads as a block.
   It is an absolutely positioned child and not a border, because `.srcline`'s
   border is the current-position rail and one line can carry both facts. Two
   adjacent edges say two things; one border fought over by two rules says
   whichever was written last.

   The recession is the third, and it is an OPACITY so that every
   syntax hue inside the region survives at reduced strength: the dimming
   composes with the highlighting instead of contesting the same spans, which a
   `color` override on `.t` and its descendants would do, flattening a
   classified line into one wash.

   It is deliberately GENTLE — 0.82, against desktop's 0.5. Three reasons, and
   the first is measured: at 0.82 the weakest syntax role in the listing is
   4.62:1 (light keyword) and 5.47:1 (dark comment), with plain code text at
   8.67:1 and 8.88:1, so nothing in an untaken block drops below the text floor.
   At desktop's 0.5 the light keyword would be 2.62:1. Second, the claim does
   not depend on it — a reader who cannot resolve an 18% alpha step loses no
   information, because the glyph carries the fact (rubric A7). Third, a heavier
   dim reads as DISABLED, and that is the wrong sentence: an untaken branch is
   not inert, it is a statement that did not run.

   The one pair that does drop is a comment inside an untaken block ON the
   current line — 3.57:1 in dark, from a full-strength 4.54:1 that this
   stylesheet already records as its weakest. It is one line, it needs the
   session's position, an untaken claim in the displayed pass and a comment on
   that same line all at once, and it is stated here rather than discovered.

   `.mn` sets its own colour rather than inheriting `.m`'s, so the glyph keeps
   the not-taken role on the current line, where `.srcline.cur .m` would
   otherwise repaint it in the position hue — the same reason the syntax spans
   set theirs. A line CAN be both: the demo's line 32 is where the session
   stands AND is the arm that passes 0 and 1 did not take, and both facts are
   true at once. */
.srcline .mn{display:none;color:var(--bt-mark-not-taken)}
.srcline .ntbar{display:none;position:absolute;left:0;top:0;bottom:0;
  width:var(--bt-stroke-thick);background:var(--bt-mark-not-taken)}
.srcline.ntnow .mg{display:none}
.srcline.ntnow .mn{display:inline}
.srcline.ntnow .ntbar{display:block}
.srcline.ntnow .t{opacity:var(--bt-opacity-not-run)}

/* ── a branch arm that DID run, in this pass ─────────────────────────────── */
/* The affirmative half, added because there were three states and two
   renderings. An untaken arm was dimmed and everything else was left alone, so
   "this ran" and "the ladder cannot tell" were drawn identically — and the
   second is common: an arm the recorder never instrumented, a branch the
   session has not reached, a chain that went two ways in one pass. The absence
   of a dim was carrying both meanings.

   IT IS EARNED, NOT DEFAULTED. Nothing is marked because it was not dimmed;
   `flow_view.branchPasses` requires a recorded step on THAT line in THAT pass,
   which is at least as strong as the three positive facts the dimming needs.
   The fixture holds the proof: `shield.nr:35` is an arm interior that never
   ran and was never instrumented, and it takes neither mark.

   Two channels, and the GLYPH is the primary one, exactly as it is for the
   negative claim. `⊙` and `⊘` are the same circle with and without a stroke
   through it, so the pair reads as one question answered two ways. The rail is
   the second, and it shares `.ntbar`'s position deliberately: a line cannot run
   and not run in the same pass, and one pass is displayed at a time, so the two
   are mutually exclusive by construction and never contend for the edge.

   THERE IS NO THIRD CHANNEL, and that is the asymmetry. The negative claim also
   recedes the code to `--bt-opacity-not-run`; the positive one leaves it at full
   strength, because full strength is what an ordinary line already is. Adding a
   brightening would mean every unmarked line had been dimmed by comparison —
   the claim inverted, made about the lines the pane knows least about.

   The colour is `--bt-mark-executable`, the same role the gutter's `·` carries,
   and not a new hue. Both say "this executed"; the dot says it of the whole
   window and `⊙` says it of this pass, so they are one family at two
   resolutions. A fourth hue on a surface where reviewers have repeatedly filed
   one-hue-many-roles findings would buy a distinction the glyph already makes. */
.srcline .mt{display:none;color:var(--bt-mark-executable)}
.srcline .rnbar{display:none;position:absolute;left:0;top:0;bottom:0;
  width:var(--bt-stroke-thick);background:var(--bt-mark-executable)}
.srcline.rnnow .mg{display:none}
.srcline.rnnow .mt{display:inline}
.srcline.rnnow .rnbar{display:block}
/* THE CURRENT LINE'S ARM GLYPH TAKES THE POSITION INK, and this restores a pair
   that was designed, measured, documented and then silently defeated by cascade
   order — it is not a new decision.

   `.srcline.cur .n,.srcline.cur .m` above sets the position ink and its comment
   claims the result as "a designed PAIR rather than two rungs of one ramp:
   7.14:1 in dark and 7.30:1 in light". That is true of the LINE NUMBER. It has
   never been true of the mark on the flagship view. `.srcline .mt` and
   `.srcline .mn` carry equal specificity (0,2,1) and come LATER in this sheet,
   so they win, and the mark on the current line keeps executable/not-taken ink
   against the position band.

   What that costs, measured on the built page in all four size/theme
   combinations (they are pixel-identical for every gutter glyph):

     `⊙` on the band   4.26:1 dark / 4.29:1 light — a hard CEILING; ring flanks
                       2.67 and 2.35 (dark), 2.13 and 1.92 (light), i.e. the
                       ring that is the mark's whole silhouette is under 3:1
     `⊘` on the band   3.29:1 dark / 7.33:1 light, on
                       `debugger--omniscience-earlier-pass`, which is the same
                       defect with the other glyph and WORSE in the default theme
     with this rule    7.14:1 dark / 7.30:1 light — exactly the pair the comment
                       above already claims, because it IS that pair

   Two facts make this the minimal fix rather than one of several. Only ONE
   glyph on a page lands on the band at all — 25 of the 26 gutter marks sit on
   the plain pane and are fine there (`·` 5.36/7.09, `⊘` 9.15/5.47) — and the
   one that does is structural, because the line the session is stopped at is
   also the arm that ran in the displayed pass. So this is one element per page
   and it needs no new token, no change to `--bt-mark-position-surface` (read by
   `.ctrow.cur` and `.evrow.cur` as well, with 14-16 foreground pairs measured
   against it), and no glyph redrawn.

   It does not break the family argument at `.srcline .mt` above. That rule
   picks `--bt-mark-executable` so the dot and `⊙` are "one family at two
   resolutions", and `--bt-mark-position` is the SAME HUE one step along the
   ramp — cyan.300 against cyan.500 in dark, cyan.900 against cyan.700 in light.
   The family survives; only the level moves, on the single line whose
   background demands it.

   WHAT THIS DOES NOT FIX, stated because the round measured it. `⊙` and `⊘`
   still share IoU 0.750 (dark) / 0.781 (light) with colour normalised away, so
   the pair is still not separable without hue — that is a silhouette decision,
   `reviews/QUEUED-DECISIONS.md` Q1 recommendation (b), and it is explicitly a
   taste call about which mark to draw. And `▶` is never painted anywhere in the
   corpus, which the same measurement discovered and which is Q18. */
.srcline.cur .mt,.srcline.cur .mn{color:var(--bt-mark-position)}
.src .tk-comment{color:var(--bt-syntax-comment)}
.src .tk-keyword{color:var(--bt-syntax-keyword)}
.src .tk-type{color:var(--bt-syntax-type)}
.src .tk-function{color:var(--bt-syntax-function)}
.src .tk-string{color:var(--bt-syntax-string)}
.src .tk-number{color:var(--bt-syntax-number)}
.src .tk-punct{color:var(--bt-syntax-punctuation)}
/* ── omniscience: the recorded values, beside the code ──────────────────── */
/* The product's differentiator, and the pane's one place where colour does NOT
   mean lexical category. That is not a violation of the rule above it: the
   labels are OUTSIDE the code, after the line's text, on their own surface with
   their own border. A reader can tell a label from the code without reading
   either, which is the property the "colour means lexical category inside the
   code area" rule is protecting.

   The labels sit after the code rather than inside it. `Omniscience-Flow.md`'s
   own wireframe puts them there —

       | 5  │  let mut remaining = initial_shield; │ [remaining=10000] |

   — and so do its `# [x=10] [y=20] [sum=30]` examples. Splitting a line to
   inject a label mid-expression is the spec's *Multiline Visualization*, which
   it records as not implemented upstream either, and at this pane's width it
   would cost the code its own readability to gain the values theirs. */
.srcline .ann{display:inline-flex;align-items:baseline;
  gap:var(--bt-space-2xs);margin-left:var(--bt-space-lg);white-space:nowrap;
  flex:0 0 auto}
/* HIDDEN BY DEFAULT, shown one pass at a time. Every pass the flow window
   carries is in the markup — that is what makes the iteration rail work with
   scripting off — and `.now` is the pass the session is in. The `:target`
   ladder at the end of this stylesheet is what moves it. A `.fv` with no `.now`
   and no target is a value from another pass, and it must not be on screen. */
/* NO gap between the parts. A label is one word — `damage: 0 → 2000` — and a
   uniform flex gap put a space before its own colon (`damage : 0`), which reads
   as two things rather than one. The spacing the three renderings actually need
   is asymmetric, so it is stated per part below. */
.fv{display:none;align-items:baseline;gap:0;
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-size:var(--bt-type-label-size);line-height:var(--bt-type-label-line);
  padding:0 var(--bt-space-2xs);border-radius:var(--bt-radius-xs);
  background:var(--bt-surface-sunken);color:var(--bt-text-default);
  border:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  max-width:var(--bt-layout-label-column);overflow:hidden}
.fv.now{display:inline-flex}
/* The NAME recedes and the VALUE does not. A label is read for its value; the
   name is how you know which value it is, and rendering both at one weight
   makes the run of labels an undifferentiated stripe at the end of the line.

   AND WHICH HALF GIVES WAY when a label does not fit
   `--bt-layout-label-column`. It is the NAME, and the previous answer was
   the value.
   `overflow:hidden;text-overflow:ellipsis` sat on `.fvv` alone, so the flex
   line shrank the only item that could shrink and the label a reader was
   given was `remaining_shield=10…` — sixteen characters of the identifier
   they already have from the code on the same row, and an elided form of the
   one fact the annotation exists to carry. Measured over
   `debugger--omniscience-earlier-pass` at the pinned coordinate: 22 of the 51
   labels on screen rendered with the VALUE cut, in both themes and at both
   desktop widths. A value that reads `10…` is not merely less informative
   than the full one, it is misreadable as `10`.
   So the value does not shrink at all — `flex-shrink:0`, not a large shrink
   factor on the name, because a ratio still gives the value away by the
   rounding and `remaining_shield=10000` measured 106/37 against a natural
   118/43 under 100:1. The name absorbs the whole deficit and elides:
   `remaining_shi…=10000`. It is the recoverable half — it is a variable named
   in the source text on the same row, 24px to its left. The value keeps a
   `max-width` so that a value which alone overruns the column still ends in
   an ellipsis rather than a cut glyph; the name will have collapsed to
   nothing before that can happen. The label's `title` carries both in full
   either way. */
.fvn{color:var(--bt-text-subtle);flex:0 100 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
/* `x=10` closes up; `x: 10 -> 20` takes a space after the colon, because what
   follows it is a PAIR and not a single value. */
.fvsep{color:var(--bt-text-disabled);flex:0 0 auto}
.fv.m-changed .fvsep{margin-right:var(--bt-space-3xs)}
.fvv{color:var(--bt-text-strong);font-variant-numeric:var(--bt-numeric-features);
  flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* A WRITE is the most valuable thing an inline value can say, and it gets the
   pane's own "changed at this step" hue — the same token the Values pane marks
   a changed variable with, so one fact has one colour in both places. The
   superseded value is quietened and the arrow carries the direction, so the
   pair reads as a change rather than as two current values. */
.fv.m-changed{border-color:var(--bt-mark-changed)}
.fv.m-changed .fvv{color:var(--bt-mark-changed)}
.fv.m-changed .fvv.was{color:var(--bt-text-subtle)}
.fvto{color:var(--bt-mark-changed);margin:0 var(--bt-space-3xs)}
/* A return value has no name at all — the spec's `[→230]`. It is the one label
   whose arrow is the whole of its identity, so the arrow keeps full strength
   where a name would have been. */
.fv.m-after .fvto{color:var(--bt-text-muted)}
/* ── the loop iteration rail (Omniscience-Flow.md, "Loop Slider Control") ── */
/* Above the listing rather than above the loop's own header line, because the
   served pane is a WINDOW opened at the session's position and the `for` the
   session is inside is usually above it — see `session_view.FlowRail`. */
.frtarget{display:block;height:0;overflow:hidden}
.flowrail{flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--bt-space-xs);
  padding:var(--bt-space-2xs) var(--bt-density-cell-x);
  background:var(--bt-surface-sunken);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  font-size:var(--bt-type-label-size)}
.frtitle{color:var(--bt-text-subtle);font-weight:var(--bt-type-label-weight);
  letter-spacing:var(--bt-type-label-tracking);text-transform:uppercase}
.frfn{margin-left:var(--bt-space-2xs);text-transform:none;
  letter-spacing:normal;color:var(--bt-text-default);
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback)}
.frline{color:var(--bt-text-link);text-decoration:underline;
  text-underline-offset:var(--bt-space-3xs)}
/* `.noloc` is the rail's line when NO surface reachable from this page renders
   that line — `renderFlowRail` emits a `span` rather than an `a`, and this
   strips the two paints that say "clickable". The text is identical because the
   fact is identical; what is withdrawn is the promise. See
   `session_view.FlowRail.href`. */
.frline.noloc{color:var(--bt-text-subtle);text-decoration:none}
/* One counter per pass, all in the markup, one displayed — see
   `renderFlowRail`. `.now` is the pass the session is in; the target ladder
   moves it in lock-step with the labels, so the number a reader reads and the
   values they are looking at are always the same pass. */
.frcount{display:none;color:var(--bt-text-strong);
  font-variant-numeric:var(--bt-numeric-features)}
.frcount.now{display:inline}
/* The track. `flex:1 1 auto` so it takes the width the row has left, which is
   what makes it read as a scrubber over the loop rather than as a row of
   buttons — the spec draws it as `[◄ ════●══════ ►]`. */
.frtrack{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;
  gap:var(--bt-space-3xs)}
/* The transparent border is what lets `.out` below draw its own extent
   without becoming a different-sized segment from its neighbours. */
.frseg{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:var(--bt-space-3xs);
  padding:var(--bt-space-3xs) 0;border-radius:var(--bt-radius-xs);
  border:var(--bt-stroke-hairline) solid transparent;
  background:var(--bt-mark-track);color:var(--bt-text-muted)}
.frnum{font-variant-numeric:var(--bt-numeric-features);
  font-size:var(--bt-type-caption-size)}
a.frseg:hover{background:var(--bt-surface-hover);color:var(--bt-text-strong)}
/* A pass the session has NOT reached at this position. It is not a link and it
   does not look like one: the still frame has no values for it, and offering it
   would be an affordance that cannot act. Hydration makes it live.

   AND IT STILL HAS TO BE A SEGMENT. In the light theme
   `--bt-action-disabled-bg` and `--bt-surface-sunken` — the rail's own
   background — resolve to the SAME value, so the fill was drawing at 1.00:1
   against the strip behind it and the five unreached passes of an eight-pass
   loop rendered as blank rail.
   The rail read as three segments beside its own `Iteration 3 of 8`,
   which is the label contradicting the control immediately under it; in dark
   the same pair is 1.21:1 and the boxes are faintly there, so the rail said
   one thing in one theme and another in the other. The EXTENT of the segment
   is not the disabled part of it — a track a reader cannot see the end of
   cannot say how far along it they are — so it is drawn with a border, in
   both themes, and only the fill and the numeral recede. */
.frseg.out{background:var(--bt-action-disabled-bg);
  border-color:var(--bt-border-default);
  color:var(--bt-text-disabled);cursor:not-allowed}
/* A reachable pass is marked by its NUMBER coming up to full strength, not by a
   fill. `--bt-mark-track-elapsed` was tried here and is wrong at this size: it
   is the scrubber's elapsed run, designed as a 4px tick, and painted across a
   whole segment it made three saturated blocks the loudest object in the pane —
   louder than the current line, in a bar whose entire job is to be secondary to
   the code. The scrubber's own lesson applies unchanged: the fill says how far,
   the MARKER says where, and only the second is a fact worth shouting. */
.frseg.got{color:var(--bt-text-default)}
/* TWO marks, because there are two facts. `.frhere` is where the SESSION is and
   never moves. `.frdot` is which pass is on screen, and the rail moves it.
   Collapsing them would tell a reader who looked at pass 1 that the session had
   gone there. Both are shapes as well as colours, so neither depends on hue. */
.frhere,.frdot{display:none;width:100%;height:var(--bt-stroke-thick);
  border-radius:var(--bt-radius-full)}
.frhere{background:var(--bt-mark-position)}
.frdot{background:var(--bt-mark-view)}
.frseg.here .frhere{display:block}
.frseg.showing .frdot{display:block}
.frseg.here{color:var(--bt-mark-position)}
.frmore{flex:0 0 100%;color:var(--bt-text-muted)}
/* THE POSITION HEAD — the same affordance as `.srcline.cur`, for the pane that
   has no line to hang it on.

   Every real chain transaction on this site lands on `srcUnverified`, and until
   this rule that pane drew two paragraphs and no position mark at all: the one
   surface whose entire question is "where is this stopped" answered it nowhere.

   IT IS A CAPTION NOW RATHER THAN THE ONLY ANSWER, and it stays for that reason.
   The pane HAS a row to mark — the recording's own program counters, one per
   step — so `.srcline.cur` states the position visually and this states it in
   words. Two channels for one fact is what every other mark on this pane already
   does, and the words are the channel that survives a printed page, a screen
   reader and a pane scrolled away from the position. It also still draws where
   there is no listing at all, which is a state the route keeps: a transaction
   whose trace has not been recorded, and any recording whose instruction stream
   the tree does not publish.
   The head is the answer, and it is deliberately the SAME three channels the
   current source line uses — the position fill, the position rail down the left
   edge, and the `▶` in its own `.p` cell — so a reader who has seen one page's
   current line recognises this one without being taught a second vocabulary.

   `--bt-mark-position-surface` and `--bt-mark-position` are the tokens
   `.srcline.cur` already reads, so the pair is the measured one and no token is
   added. Not red — red is a reverted execution on this product — and not a
   sixth job for the accent.

   `border-left` on the element rather than an absolutely positioned child,
   which is what `.ntbar`/`.rnbar` need and this does not: nothing else claims
   this edge. The head is a BLOCK ABOVE the listing rather than a row inside it,
   so it shares an edge with nothing — and the rows below it carry no branch
   claim in any case, because an instruction listing makes none
   (`instruction_listing.nim`, "What is NOT claimed"). */
.srcpos{display:flex;align-items:baseline;gap:var(--bt-space-xs);
  padding:var(--bt-density-cell-y) var(--bt-density-cell-x);
  background:var(--bt-mark-position-surface);
  border-left:var(--bt-stroke-thick) solid var(--bt-mark-position);
  color:var(--bt-mark-position);font-size:var(--bt-density-data-size)}
.srcpos .p{flex:0 0 var(--bt-space-sm);text-align:center;user-select:none}
.srcpos .num{font-variant-numeric:var(--bt-numeric-features)}
.srcnone{padding:var(--bt-density-card-pad) var(--bt-density-cell-x)}
.srcnone .btn{margin-top:var(--bt-rhythm-stack)}

/* ── the fidelity boundary, on a recording that has one ──────────────────
   `renderSource`'s `.srcrung` — Debugger-Integration §5's "the transition is
   visible… so the user is never confused about why names disappeared", and
   §7's "rather than silent".

   A LEFT EDGE AND NOT A COLOUR PAIR. Two treatments would need two hues for a
   distinction that is not good/bad — source and instruction level are both
   correct states of a correct recording — and this product spends its accent
   on the position and its danger family on a reverted execution. So both sides
   share one surface and the EDGE carries which one it is: the position accent
   where the pane is showing the recording's own counters, the subtle border
   where it is showing code. The sentence is the actual channel; the edge only
   makes the change visible at a glance when a step crosses it.

   `.srcpos`'s cell padding and not `.srcnone`'s card padding: this is a strip
   in the same register as the position head it sits beside, and on the listing
   side the three blocks read top to bottom as head, rung, reason — tightening
   from a row to a paragraph. */
.srcrung{padding:var(--bt-density-cell-y) var(--bt-density-cell-x);
  background:var(--bt-surface-sunken);color:var(--bt-text-muted);
  font-size:var(--bt-density-data-size)}
.srcrung.atinstr{border-left:var(--bt-stroke-thick) solid var(--bt-mark-position)}
.srcrung.atsource{border-left:var(--bt-stroke-thick) solid var(--bt-border-subtle)}
.srcrung .num{font-variant-numeric:var(--bt-numeric-features);
  color:var(--bt-text-default)}

/* ── call trace ─────────────────────────────────────────────────────────── */
.ct{font-size:var(--bt-density-data-size);min-width:0}
.cthead,.ctrow,.ctfoot{display:flex;align-items:baseline;
  gap:var(--bt-space-sm);
  padding:var(--bt-density-cell-y) var(--bt-density-cell-x);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle)}
.cthead{background:var(--bt-surface-sunken);color:var(--bt-text-muted);
  font-size:var(--bt-type-label-size);font-weight:var(--bt-type-label-weight);
  letter-spacing:var(--bt-type-label-tracking);text-transform:uppercase;
  position:sticky;top:0}
.ctrow{border-left:var(--bt-stroke-thick) solid transparent}
.ctrow:hover{background:var(--bt-surface-hover)}
.ctrow.cur{background:var(--bt-mark-position-surface);
  border-left-color:var(--bt-mark-position)}
/* THE NAME IS NEVER TRUNCATED, and that is structural rather than lucky.
   `.ctfn` used to be `overflow:hidden` around two `text-overflow:ellipsis`
   children — the name and the path — sharing the row's one flexible column, so
   a narrow pane cut BOTH and the reader got two half identifiers. The path has
   left the row (it is `data-module` and the row's tooltip), and what is left
   WRAPS instead of clipping.

   Wrapping, not `overflow-x` on `.ct`: giving the pane a horizontal scroll
   container would force `overflow-y` to compute to `auto` as well, which moves
   the scroll container the sticky `.cthead` resolves against and would break a
   header that currently works. A taller row costs nothing and clips nothing.
   `overflow-wrap:anywhere` is for the pathological case — one unbroken
   identifier longer than the column — so even that is shown rather than cut.

   WHAT THE WRAP IS AND IS NOT DOING, MEASURED. The truncation this change
   fixes is carried ENTIRELY by the path leaving the row: the longest name in
   the corpus needs 217px and the frame column is 357px wide at 1440px once the
   path is gone, so it fits with room to spare. The wrap is belt and braces for
   a name longer than the column, and NO viewport reaches that state here —
   narrowing the window makes this column WIDER, not narrower, because below
   about 1000px the panes stop sitting side by side and stack (675px at 780px
   wide, against 357px at 1440px).

   That is stated because a mutation arm was written for these two lines and
   could not be made to kill: restoring `nowrap`/`ellipsis` here changes
   nothing a browser can be made to show, at any width, on any recording this
   product publishes. The arm was withdrawn rather than propped up with an
   invented fixture, and these declarations are kept because they make
   "the name is never cut" true by construction instead of true by arithmetic
   that holds only while names stay shorter than the column. */
.ctfn{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;
  gap:var(--bt-space-xs);flex-wrap:wrap}
.ctname{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  color:var(--bt-text-strong);white-space:normal;overflow-wrap:anywhere}
/* The line number, and nothing else, stays inline beside the name: a
   coordinate is a few characters and places the frame in its file the way
   VS Code's dimmed `file:line` does. It is NOT the frame's identity — two
   frames of one recursive function carry the same line — which is why it is
   quiet, and why the step is what the selection panel leads with. */
.ctline{flex:0 0 auto;color:var(--bt-text-subtle);
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-size:var(--bt-type-label-size)}
/* Marking the current frame used to cut its contrast by four times: the name
   went from the strongest foreground on white at 19.03:1 to accent-on-accent
   at 3.83:1 (dark) /
   5.10:1 (light), and the module path beside it fell to 3.62:1 — both under
   the floor, in the pane that exists to show where you are (round 5,
   reviews/rounds/vd5-round5/debugger__wide__dark__L3.md and
   reviews/rounds/vd5-round5/debugger__wide__light__L3.md, the latter carrying
   both the contrast finding and the one about the tint being shared with the
   phase rail). The row is now marked by
   ADDING: the strongest foreground, a weight step, the fill and the rail. The
   hue moves to the rail, where lowering contrast costs nothing, and the name
   keeps the ramp's top rung. The weight step is also what round 5 asked for
   separately — a current frame marked by fill and hue alone does not survive a
   squint (reviews/rounds/vd5-round5/debugger__laptop__dark__L1.md,
   reviews/rounds/vd5-round5/debugger__wide__light__L1.md). */
.ctrow.cur .ctname{color:var(--bt-text-strong);
  font-weight:var(--bt-type-h3-weight)}
/* `.ctrow.cur .ctmod` is gone with the element it styled. The contrast finding
   it was written for still stands and still binds — it is now `.ctline` that
   sits beside the name on a marked row, and it is `--bt-text-subtle` on the
   position fill rather than the retired path colour. */
.ctrow.cur .ctline{color:var(--bt-text-default)}
.ctrow.cur .ctcost{color:var(--bt-text-strong)}
.ctcost{flex:0 0 auto;text-align:right;color:var(--bt-text-default);
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-variant-numeric:var(--bt-numeric-features);
  min-width:var(--bt-space-3xl)}
/* The unit is the COLUMN's, carried once by the header. It used to repeat on
   every row, spending width that the frame column — the one that actually
   truncates — needed. */
.ctunit{color:var(--bt-text-subtle);font-size:var(--bt-type-label-size);
  font-weight:var(--bt-type-body-weight);letter-spacing:normal;
  text-transform:none}

/* The aggregate view's third column. A count, not a cost, so it sits before
   the cost and is narrower — a function called twice and one called two
   hundred times must be tellable apart at a glance, which is most of why the
   aggregation is worth having. */
.ctcalls{flex:0 0 var(--bt-space-2xl);text-align:right;
  color:var(--bt-text-muted);
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-variant-numeric:var(--bt-numeric-features)}
/* A self cost that is a FLOOR, because at least one frame of the function
   reported no metered cost. Marked in the number rather than in a footnote:
   the whole column is a ranking, and a row that may belong higher has to say
   so where it is read. */
.ctcost.floor{color:var(--bt-text-muted)}
.ctfloorsign{color:var(--bt-text-subtle);
  margin-right:var(--bt-space-3xs)}

/* A row that is a jump target. `a{color:inherit;text-decoration:none}` already
   holds site-wide, so the anchor inherits the row's typography exactly and
   only the pointer has to be said; the focus ring comes from `styles.nim`'s
   one `:focus-visible` treatment, which already covers `a`. That is the whole
   reason these are anchors rather than `role="button"` elements with a
   `keydown` handler: focus, Enter, middle-click, the status bar and the
   context menu all arrive from the platform, and none of them can be
   forgotten. */
a.ctrow,a.evrow{cursor:pointer}

/* Depth is indentation, and the ladder is LINEAR.
   It used to be the spacing scale, which is not: `md → xl → 2xl → 3xl → 4xl`
   is 16 → 32 → 48 → 60 → 100 px, so the rungs stepped by 16, 16, 12, 40. Depth
   3 to depth 4 moved three quarters of a character; depth 4 to depth 5 moved
   two and a half characters. One level of nesting therefore meant a different
   amount of indentation depending on where in the trace it occurred, which is
   the one thing an indent ladder may not do: it ranks EQUAL things — each rung
   is exactly one call — and so it has to step equally. A spacing scale ranks
   unequal ones, which is why it grows, and why it is the wrong scale here.
   Beyond the ladder the rows carried a `d6`, `d7`,
   … no rule answered, which resolved to NO indentation — so a trace deeper
   than the ladder did not render as deep, it rendered as FLAT, which is
   indistinguishable from a correct shallow trace. `debugger.depthClass`
   clamps to `MaxIndentDepth` and adds `.deeper`, and the ladder below covers
   every class it can now emit. */
.ctrow.d0 .ctfn{padding-left:0}
.ctrow.d1 .ctfn{padding-left:calc(var(--bt-space-md) * 1)}
.ctrow.d2 .ctfn{padding-left:calc(var(--bt-space-md) * 2)}
.ctrow.d3 .ctfn{padding-left:calc(var(--bt-space-md) * 3)}
.ctrow.d4 .ctfn{padding-left:calc(var(--bt-space-md) * 4)}
.ctrow.d5 .ctfn{padding-left:calc(var(--bt-space-md) * 5)}
.ctrow.d6 .ctfn{padding-left:calc(var(--bt-space-md) * 6)}
.ctrow.d7 .ctfn{padding-left:calc(var(--bt-space-md) * 7)}
.ctrow.d8 .ctfn{padding-left:calc(var(--bt-space-md) * 8)}
/* A frame deeper than the ladder is MARKED as clamped rather than drawn at a
   depth it is not at. The rule is what stops the clamp from becoming a
   quieter version of the bug it replaced. */
.ctrow.deeper .ctname::before{content:"⋯ ";color:var(--bt-text-subtle)}
/* A guide rule per row, so depth is readable by eye rather than by comparing
   left edges character by character. */
.ctrow:not(.d0):not(.flat) .ctfn{
  border-left:var(--bt-stroke-hairline) solid var(--bt-border-default);
  margin-left:var(--bt-space-2xs)}

/* ── the folded subtree ──────────────────────────────────────────────────────

   A frame whose subtree starts CLOSED. Not elided: the frames are all in the
   markup, inside this `<details>`, and one click or Enter reveals them. The
   pane's job here is to make the closed state look like a row that can be
   opened rather than like a row with something missing.

   `<details>` carries no box of its own — `display:contents` — so the summary
   and the revealed rows sit in `.ctrows`'s normal flow at their own depths, and
   a folded frame is separated from its neighbours by nothing at all. Wrapping
   them in a visible box would draw a container the data does not have: the
   frame is one row among its siblings, and its subtree is more rows.

   `list-style:none` plus the WebKit pseudo-element is the pair that removes the
   UA's default marker on both engine families; the caret below is drawn instead
   so it can sit where the ladder puts it rather than where the UA does. */
.ctfold{display:contents}
summary.ctrow{list-style:none;cursor:pointer}
summary.ctrow::-webkit-details-marker{display:none}
/* THE CARET NAMES THE STATE AND IS NOT THE ONLY THING THAT DOES. `▸`/`▾` is the
   same register as the source tab menu's `▾`/`▴` and the position mark's `▶` —
   glyphs this pane already spends, not an icon set this layer would import. It
   is `::before` on the name so it rides with the indentation and cannot drift
   away from the row it belongs to at depth 8. */
summary.ctrow .ctname::before{content:"\25b8 ";color:var(--bt-text-subtle)}
details[open] > summary.ctrow .ctname::before{content:"\25be "}
summary.ctrow:hover{background:var(--bt-surface-hover)}
/* WHAT IS INSIDE, IN THE READER'S OWN UNITS, and it stays legible when opened
   rather than vanishing — an opened node still says how much it holds, which is
   what lets a reader close it again on purpose instead of by hunting. It sits
   between the name and the cost column, so the cost column stays where it is on
   every row and the numbers still line up down the pane. */
.cthidden{flex:0 0 auto;color:var(--bt-text-subtle);
  font-size:var(--bt-type-label-size);
  font-variant-numeric:var(--bt-numeric-features);
  white-space:nowrap}
details[open] > summary.ctrow .cthidden{color:var(--bt-text-subtle);opacity:.7}
.ctfoot{border-bottom:0;color:var(--bt-text-subtle);
  font-size:var(--bt-type-label-size);justify-content:space-between}
.ctsort{color:var(--bt-text-link);text-decoration:underline;
  text-underline-offset:var(--bt-space-3xs)}
.ctsort:hover{color:var(--bt-text-link-hover)}

/* The aggregate self-cost view, on the same `:target` mechanism as the pane
   tabs. `.ctview.def` is emitted LAST so the alternate can reach forward and
   hide it.

   It used to be a cost-SORTED view, and before that a `<span>` with link
   colour and an underline and no behaviour at all. The sort was the fix for
   the second defect and a different one for the first: Chrome's `Bottom-up`
   is an aggregation, and reordering N frames answers nothing that reading them
   did not. What is here now is self cost per FUNCTION, which is why the header
   gains a `Calls` column and the rows lose their depth. */
.ctview.alt{display:none}
.ctview.def{display:block}
.ctview.alt:target{display:block}
.ctview.alt:target ~ .ctview.def{display:none}

/* THE LIVE BUILD'S MOUNTED VIEWS GET THE PANE'S HEIGHT. Once a session is live
   the Call Trace, State and Event Log rows are CodeTracer's shared views
   (`hydrate.mountSharedPanes`), and each of them scrolls INSIDE itself — the
   call trace and the event log load the window their scroller shows, which is
   only a window if the scroller is shorter than the list. They report no size
   of their own, so the host has to hand down a definite height: the panel
   (`.lm_content`, a flex column of the pane's height) to the shell, the shell
   to the mount point, the mount point to the view. Without this the shell took
   its content's height, the Event Log's scroll body collapsed to 0px under its
   footer, and the Call Trace scrolled as one long page that asked the engine
   for every row at once (measured on the demo session and a 354-frame Starknet
   recording).

   The call-order view is reached through `:has(> .ctmount)` and never by a
   rule more specific than `.ctview.alt:target ~ .ctview.def`, so choosing the
   by-function view still hides it. None of these classes exists in a static
   page: only the live build writes them. */
.liveshell{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
.livecap{flex:none}
.livemount{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
.livemount > *{flex:1 1 0;min-height:0}
.ct:has(> .ctview.def > .ctmount){display:flex;flex-direction:column;
  flex:1 1 0;min-height:0}
.ctview.def:has(> .ctmount){display:flex;flex-direction:column;flex:1 1 0;
  min-height:0}
.ctmount{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
.ctmount > *{flex:1 1 0;min-height:0}

/* A dense pane sets its own data size, and `.num` must not override it.
   `styles.nim` gives `.num` the explorer's numeric size and line-height, which
   inside a 12px/1.35 debugger row resolves to 14px/1.5 — so the row grew to
   30px, the COST number rendered larger than the function name it annotates,
   and the three list panes stopped sharing a pitch (call trace 30, event log
   30, state 25) where the desktop app keeps every call-trace row at one size
   and one pitch. The class still carries the tabular-figure treatment, which
   is the part these columns actually want. */
.ct .num,.st .num,.ev .num,.mddl .num,.dc .num{
  font-size:inherit;line-height:inherit}

/* ── state ──────────────────────────────────────────────────────────────── */
.st{font-size:var(--bt-density-data-size)}
/* The caption above a POPULATED values pane — what kind of thing these rows are.
   `.evcap`'s rules and `.instrcap`'s, for their reason. It matters more here than
   in either of those: the rows a chain recording puts in this pane are the VM's
   machine columns rather than program variables, and a pane that drew them
   without saying so would be the mislabelling this campaign removed from
   `calltrace.json`, reinstated one pane over. */
.stcap{padding:var(--bt-space-2xs) var(--bt-density-cell-x);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  background:var(--bt-surface-sunken);
  color:var(--bt-text-muted);font-size:var(--bt-type-label-size);
  line-height:var(--bt-type-body-sm-line);overflow-wrap:anywhere}
.strow{display:flex;align-items:baseline;gap:var(--bt-space-sm);
  padding:var(--bt-density-cell-y) var(--bt-density-cell-x);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  border-left:var(--bt-stroke-thick) solid transparent}
.strow:hover{background:var(--bt-surface-hover)}
/* Linear, and covering every class `debugger.depthClass` can emit — the SAME
   ladder as the call trace, so one level of nesting means one indent step in
   both panes.
   It was `d1` (lg, 24px) and `d2` (2xl, 48px) only. A value nested three deep
   — which any struct-of-struct produces — got a `d3` no rule answered, so it
   fell back to the row's own cell padding and rendered at the indent of a
   TOP-LEVEL value: not one rung short, but all the way flat, and nothing said
   so. The desktop app indents state by a flat 16px per level and does not
   stop. */
.strow.d1{padding-left:calc(var(--bt-space-md) * 1)}
.strow.d2{padding-left:calc(var(--bt-space-md) * 2)}
.strow.d3{padding-left:calc(var(--bt-space-md) * 3)}
.strow.d4{padding-left:calc(var(--bt-space-md) * 4)}
.strow.d5{padding-left:calc(var(--bt-space-md) * 5)}
.strow.d6{padding-left:calc(var(--bt-space-md) * 6)}
.strow.d7{padding-left:calc(var(--bt-space-md) * 7)}
.strow.d8{padding-left:calc(var(--bt-space-md) * 8)}
.strow.deeper .stname::before{content:"⋯ ";color:var(--bt-text-subtle)}
/* "This changed at this step" is `--bt-mark-changed`, and it is a DIFFERENT
   swatch from "you are here" and from "this is a link". It used to be the
   third of the four meanings one indigo carried, and it was the collision that
   cost the most: the two changed numerals were the only coloured text in the
   Values pane and they were bit-identical to the hyperlink two panes over, so
   a changed value read as clickable and a link read as changed (round 5,
   reviews/rounds/vd5-round5/debugger__wide__dark__L3.md and
   reviews/rounds/vd5-round5/debugger__wide__light__L3.md — the second
   counted eight roles on the light theme's one accent). It was also the
   DIMMEST text in its own pane — 5.77:1 against 12.68:1 for the values that
   did not move, an emphasis inversion in the one pane whose job is to mark
   change (reviews/rounds/vd5-round5/debugger__laptop__dark__L3.md).
   Now 11.95:1 (dark) and
   6.85:1 (light), with a weight step so the delta survives a squint without
   relying on hue at all. */
.strow.chg{border-left-color:var(--bt-mark-changed)}
/* "APPEARED" IS THE SAME HUE AND A DIFFERENT MARK, deliberately.
   A name that was not in scope at the position the session came from has no
   previous value to differ from, so it is not "changed" — but it IS part of
   the same answer to the same question ("what did that motion do?"), and
   giving it a second colour would put two swatches in a pane whose whole
   argument above is that one indigo carrying four meanings was the most
   expensive collision in the review record. So the hue says "the last motion
   touched this" and the GLYPH says which of the two ways.

   The glyph goes on the name for the reason `.deeper` puts its ellipsis there:
   it is a statement about the identifier, not about the number, and the value
   column has to stay a column of numbers that can be scanned. It is `+ `
   rather than a word so that it costs no horizontal space in a pane that is
   already three columns wide at the narrowest register.

   NEUTRAL BY CONSTRUCTION, and this is the decision the feature turns on. The
   marks say changed-vs-unchanged and never up-vs-down: every motion in this
   product has a reverse, and a green/red encoding would invert its meaning on
   the backward half of them. A value that "increased" on the way in decreased
   on the way out, and it is the same value. */
.strow.new{border-left-color:var(--bt-mark-changed)}
.strow.new .stname::before{content:"+ ";color:var(--bt-mark-changed);
  font-weight:var(--bt-type-h3-weight)}
/* `overflow-wrap:anywhere` and not `word-break:break-all`: a long identifier
   has to be able to break, but break-all also breaks SHORT ones that would
   have fitted on the next line, which is what shattered names across rows. */
.stname{flex:0 0 auto;font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  color:var(--bt-text-strong);overflow-wrap:anywhere;min-width:0}
/* The type is the last column and a fixed one, so it can be scanned down the
   pane rather than landing wherever the name happens to end. */
.sttype{flex:0 0 var(--bt-space-4xl);text-align:right;
  color:var(--bt-text-subtle);font-size:var(--bt-type-label-size);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stval{flex:1 1 auto;min-width:0;text-align:right;
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-variant-numeric:var(--bt-numeric-features);
  color:var(--bt-text-code);overflow-wrap:anywhere}
.strow.chg .stval{color:var(--bt-mark-changed);
  font-weight:var(--bt-type-h3-weight)}

/* ── event log: four kinds, distinguished by glyph, weight and rule ─────── */
.ev{font-size:var(--bt-density-data-size)}
/* The caption above a POPULATED log — what these rows are, and what the
   recording carries that is not among them. `.instrcap`'s rules, for the same
   reason they are `.instrcap`'s: it is a sentence rather than data, so it is not
   monospace and it WRAPS, and it sits on the sunken surface with a hairline
   under it so a reader learns that the strip above rows is a different kind of
   thing from the rows. It is NOT `.empty-overlay`: that is the panel-level
   empty-state paragraph, which is centred and inset 2.5rem a side because it
   is the whole of a pane's body, and reusing it here would centre a caption
   over a dense list. It is not a plain `.btnote` either, for the same reason
   `.srcattr`'s note overrides one: card padding above a dense list is too
   much air. */
.evcap{padding:var(--bt-space-2xs) var(--bt-density-cell-x);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  background:var(--bt-surface-sunken);
  color:var(--bt-text-muted);font-size:var(--bt-type-label-size);
  line-height:var(--bt-type-body-sm-line);overflow-wrap:anywhere}
.evrow{display:flex;align-items:baseline;gap:var(--bt-space-sm);
  padding:var(--bt-density-cell-y) var(--bt-density-cell-x);
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  border-left:var(--bt-stroke-thick) solid transparent}
.evrow:hover{background:var(--bt-surface-hover)}
/* The same current-position pair as the Code pane and the Call Trace, so one
   position looks like one position in all three. An inspection of the dark
   capture measured the Event Log's current row at 3.62:1 — the same defect as
   the Call Trace's selected frame and the same fix. */
.evrow.cur{background:var(--bt-mark-position-surface);
  border-left-color:var(--bt-mark-position)}
.evrow.cur .evlabel{color:var(--bt-text-strong)}
.evrow.cur .evkind,.evrow.cur .evstep,.evrow.cur .evdetail{
  color:var(--bt-text-default)}
.evglyph{flex:0 0 var(--bt-space-md);text-align:center}
.evkind{flex:0 0 var(--bt-space-3xl);font-size:var(--bt-type-label-size);
  font-weight:var(--bt-type-label-weight);letter-spacing:var(--bt-type-label-tracking);
  text-transform:uppercase;color:var(--bt-text-subtle)}
.evstep{flex:0 0 var(--bt-space-2xl);text-align:right;color:var(--bt-text-subtle);
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-variant-numeric:var(--bt-numeric-features)}
.evlabel{flex:0 0 auto;font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  color:var(--bt-text-strong);word-break:break-all}
.evdetail{flex:1 1 auto;min-width:0;color:var(--bt-text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evrow.k-call .evglyph{color:var(--bt-accent-default)}
.evrow.k-storageWrite{background:var(--bt-surface-sunken)}
.evrow.k-storageWrite .evglyph{color:var(--bt-status-info-fg)}
.evrow.k-event .evglyph{color:var(--bt-status-success-fg)}
.evrow.k-output .evglyph{color:var(--bt-text-subtle)}
.evrow.k-output .evlabel{font-weight:var(--bt-type-body-weight);
  color:var(--bt-text-muted)}
.evrow.k-revert{background:var(--bt-status-danger-bg);
  border-left-color:var(--bt-status-danger-border);
  border-top:var(--bt-stroke-thick) solid var(--bt-status-danger-border)}
.evrow.k-revert .evglyph,.evrow.k-revert .evkind,.evrow.k-revert .evlabel{
  color:var(--bt-status-danger-fg);font-weight:var(--bt-type-h3-weight)}
.evrow.k-revert .evdetail{color:var(--bt-status-danger-fg)}

/* ── debug controls ─────────────────────────────────────────────────────── */
/* In the identity bar, not in a pane of their own. No padding and no height of
   its own: the bar sets both, and a control group that reasserted them would
   sit at a different vertical rhythm from the identity it stands beside. */
.dc{flex:1 1 0;min-width:0;display:flex;align-items:center;
  gap:var(--bt-space-md)}
/* The four moves are PAIRS — backward then forward — and the pairs used to run
   together at one uniform gap, so proximity conveyed no grouping and eight
   buttons read as one undifferentiated run. A pair is tight; the gap between
   pairs is the one that means something. */
/* A PAIR is one object. The pairs used to be separated by 2px inside and 10px
   between, which two reviewers still read as eight unrelated chips of unequal
   width with no pairing visible at all
   (round 5, reviews/rounds/vd5-round5/debugger__wide__dark__L4.md and
   reviews/rounds/vd5-round5/debugger__wide__dark__L5.md).
   Two channels now carry it and
   both come off the scales: the members of a pair TOUCH (gap 0) and square the
   corners they share, so `[reverse|forward]` renders as one capsule with a
   divider through it rather than as two chips; and the distance BETWEEN pairs
   is `space-md`, a step the eye reads against the zero inside them. Proximity
   is doing the grouping the desktop app's toolbar does. */
/* THE CAPSULE PAIRING IS GONE, and it is a deliberate loss rather than a
   casualty. A `[reverse|forward]` pair drawn as one capsule with a divider is
   BlockTracer's own invention; CodeTracer's toolbar rounds every icon button
   individually, and `button.styl`'s `[class*="ct-button-image-"]` says so with
   `border-radius: 0.375em !important` — which these four radius overrides
   cannot win against and should not try to. What survives is the PROXIMITY
   grouping the comment above is really about: zero gap inside a pair,
   `space-md` between pairs. */
.dcbtns{flex:0 0 auto;display:flex;gap:0}
.dcbtn:nth-child(odd){margin-left:var(--bt-space-md)}
.dcbtn:first-child{margin-left:0}
/* An ENABLED control is a chip with a body: the header band's surface, one
   perceptible step off the bar it sits in, and the ramp's top foreground.
   An INERT one LOSES its body — it takes the bar's own surface, so there is
   nothing to press — and its glyph drops to the muted rung, which is still
   comfortably over the floor. Round 5 measured every one of the eight glyphs
   at exactly 4.18:1 (dark) / 3.54:1 (light) with NO variation between an
   available move and an unavailable one, and the light theme expressed
   "disabled" by adding weight — the inert group was the largest, darkest mass
   in the bar while the two available actions were plain text
   (four reviewers of round 5 —
   reviews/rounds/vd5-round5/debugger__wide__dark__L3.md,
   reviews/rounds/vd5-round5/debugger__laptop__dark__L3.md,
   reviews/rounds/vd5-round5/debugger__laptop__light__L3.md,
   reviews/rounds/vd5-round5/debugger__wide__light__L3.md).
   That is also the whole of the
   P1 an adversarial reviewer raised — the page reporting a different state
   from the one it displays, because the bar said FETCHING while the controls
   looked ACTIVE (round 5's adversarial lens,
   reviews/rounds/vd5-round5/debugger__wide__dark__ADV.md). The status was
   TRUE; the controls were the lie. Now: enabled 13.29:1 on a chip, inert
   5.47:1 (dark) / 7.34:1 (light) flat on the bar — legible AS a move, and
   unmistakable as one that cannot be made. */
/* THE ENABLED CONTROL IS NOW CODETRACER'S SECONDARY ICON BUTTON, and none of
   its surface, border, radius or size is declared here any more. The markup
   carries `ct-button-image-md-secondary`, so the port's own
   `[class*="-button-"][class*="-secondary"]` and `[class*="ct-button-image-md-"]`
   rules draw it — the same treatment `golden_layout.styl` points its own
   `.lm_controls > *` comment at, which is how CodeTracer's pane controls and
   its toolbar come to be one button.

   What stays here is only what the port has no counterpart for: the glyph
   colour, and the INERT state below. */
.dcbtn{display:inline-flex;align-items:center;justify-content:center;
  color:var(--bt-text-strong)}
/* THE INERT STATE STAYS BLOCKTRACER'S, AND IT IS PREFIXED SO IT WINS.
   CodeTracer expresses "cannot act" as `:disabled` with `opacity:0.5`, and
   these controls are NOT disabled — they carry `aria-disabled` and a `title`
   saying why, because the page ships no script and a real `disabled` attribute
   would take them out of the tab order along with their explanation. More to
   the point, the treatment below is a MEASURED one: round 5's adversarial lens
   filed inert controls that "looked ACTIVE", and this is the fix — the inert
   control loses its body to the bar's own surface and its glyph drops to the
   muted rung, at 5.47:1 (dark) / 7.34:1 (light). Halving the opacity of a
   5.47:1 glyph would reopen that finding.

   The `[data-register="debugger"]` prefix is what makes it reachable at all:
   the port's secondary-button rules are three compound selectors deep, and an
   unprefixed `.dcbtn.off` loses to them. Same reason as the splitter above. */
[data-register="debugger"] .dcbtn.off{background:var(--bt-surface-raised);
  color:var(--bt-text-subtle);border-color:var(--bt-border-subtle);
  cursor:not-allowed}
[data-register="debugger"] .dcbtn.off:hover{background:var(--bt-surface-raised);
  border-color:var(--bt-border-subtle)}
/* THE SAME RULE FOR THE REGISTER'S OTHER INERT CONTROLS, because a fix of mine
   broke it and three lenses of vd10-r2 measured the break independently.

   `Supply sources` was given `.btn.disabled` to stop it rendering in the live
   style — the right change, and the explorer's `.btn.disabled` expresses
   disabled by FILLING (`--bt-action-disabled-bg`, the sunken surface). This
   register expresses it the opposite way, and the comment above says why: an
   inert control LOSES its body, takes the surface behind it, and drops its
   glyph to the muted rung. So the page ended up saying "inert" two ways at
   once — eight stepping controls and the phase rail by emptying, and
   `Supply sources`, Share and the container link by filling.

   L1 named the consequence exactly: the filled pill became "the only filled,
   body-having object in the 909x1003 Code pane", i.e. the inert control was the
   heaviest mass in its pane while the live ones were plain — **which is
   verbatim the round-5 defect the comment above records as fixed**, "the light
   theme expressed 'disabled' by adding weight". Four round-5 reviewers and an
   adversarial P1 established that; one of my commits undid it in one corner.

   L3 read the same split and proposed unifying the OTHER way — move the toolbar
   onto the filled treatment. That is declined on the round-5 evidence: filling
   is the thing those four reviewers measured as wrong, and the eight controls
   were changed away from it deliberately.

   `background:transparent` and not a surface token, because the register's rule
   is "takes the bar's own surface" and these three controls sit on two
   different surfaces — the Code pane and the identity bar. Transparent is the
   only value that is correct on both without this rule having to know which is
   which. Border and foreground match `.dcbtn.off` exactly. */
.btn.disabled{background:transparent;
  color:var(--bt-text-subtle);border-color:var(--bt-border-subtle)}
.btn.disabled:hover{background:transparent;
  border-color:var(--bt-border-subtle)}
/* The stepping mark. An SVG since the toolbar stopped using text glyphs, so
   this sizes a box rather than a font — see `components/icons` for why the
   glyphs went (Continue was U+23ED, the media "next track" mark, and it
   rendered as a colour emoji on three platforms).

   The codepoint is NAMED rather than written, here and nowhere else for show:
   this comment is inlined verbatim into every page's stylesheet, so spelling
   the character would put the very glyph the toolbar was cured of back into
   the document — and would answer a page-wide check for it.

   `currentColor` inside the mark is what preserves the enabled/inert treatment
   the register above measured: the mark takes `.dcbtn`'s own `color`, so it is
   `--bt-text-strong` on a live control and `--bt-text-subtle` on an inert one,
   in both themes, with no second rule to keep in step. A mark with its own
   fill would have been a third way of saying "disabled" beside the two that
   comment defends.

   `display:block` so the span is the mark's box exactly — an inline SVG sits
   on the text baseline and would have left the descender's worth of space
   inside a 32px button that has none to give. */
.dcglyph{display:block}
/* ── THE MARK'S SIZE IS UPSTREAM'S, AND IS DELIBERATELY NOT RESTATED ──────
   `.dcglyph .dcmark{width:…;height:…}` sized the hand-drawn marks this
   repository used to carry. The marks are CodeTracer's now
   (`vendor/.../debug_control_marks`), they carry `.ct-control-mark`, and the
   vendored `button.styl` sizes that class — `height: 1em`, width resolved
   from the viewBox, with its own comment explaining that the strip's marks
   are not all square (`0 0 18 17` among them) and that fixing the width
   would squash two of them.

   So nothing replaces the deleted rule. A `width`/`height` here would be
   this repository having an opinion about a design value it has just
   finished handing upstream, and it would silently win — a local rule
   against a vendored one is the fork the vendoring exists to prevent.

   `display:block` on the WRAPPER stays: it is about the span, not the mark,
   and the comment above it records the descender it removes. */
/* A TRACK, not forty tick marks. `gap:0` is the whole difference: at one
   hairline between ticks the control read as ~40 low-contrast dashes with no
   track, no handle and no endpoints — a decorative equaliser rather than the
   page's only timeline (round 5,
   reviews/rounds/vd5-round5/debugger__laptop__light__ADV.md and
   reviews/rounds/vd5-round5/debugger__wide__dark__L3.md). The ticks are the
   same height
   whether played or not, so EXTENT is a continuous bar and the played run is a
   colour change along it rather than a change of shape. */
.dctl{flex:1 1 auto;min-width:0;display:flex;align-items:center;
  gap:0;height:var(--bt-space-md)}
/* The unfilled track was `--bt-border-subtle`, then `--bt-border-default`, and
   both measured under the 3:1 floor for a non-text component — 1.51:1 against
   the dark bar, half the floor, with 92% of the timeline's length therefore
   invisible (round 5, on three of its four triples —
   reviews/rounds/vd5-round5/debugger__wide__dark__L3.md,
   reviews/rounds/vd5-round5/debugger__laptop__dark__L3.md,
   reviews/rounds/vd5-round5/debugger__laptop__light__L3.md).
   `--bt-mark-track` is a role
   of its own so the floor is checked against the BAR the track sits in rather
   than inherited from whatever a border happens to be: 3.58:1 in dark, 3.15:1
   in light. The played run is the position family a clear step off it. */
.dctl .tick{flex:1 1 0;height:var(--bt-space-xs);
  background:var(--bt-mark-track)}
.dctl .tick.on{background:var(--bt-mark-track-elapsed)}
/* The PLAYHEAD. The elapsed run says how far; this says where, and they are
   different claims — a filled run alone is a progress bar, and a progress bar
   at 10% on a page that is loading an 18 MB engine reads as the engine's
   loading, not as position in a trace. Full track height and the strong accent
   so it is the most legible mark in the control. */
/* THE FLOOR IS `--bt-space-2xs` (4px) AND NOT `--bt-stroke-thick` (2px). The
   track is 260px wide and carries 48 ticks, so a tick is ~5.4px and the
   playhead — which is one tick — was being floored at 2px, under half of its
   neighbours. At step 1 of 790 that put a 2px accent mark at the extreme left
   end of a 260px bar with no elapsed run beside it yet, and a reviewer looking
   at the control reported it as "a uniform grey bar with no thumb". The mark
   was there and was doing everything this rule asks of it; it was simply too
   thin to be found. 4px is still inside one tick, so the playhead never
   overlaps its neighbour, and it is a SPACING rung rather than a stroke
   because what is being set is the width of a mark, not the weight of a line. */
.dctl .tick.at{background:var(--bt-mark-position);height:100%;
  min-width:var(--bt-space-2xs);border-radius:var(--bt-radius-xs);
  flex:0 0 auto}
/* THE GESTURE, SAID AS A CURSOR — and only where the gesture exists.
   `.seekable` is stamped by `hydrate.markScrubberSeekable`, which is in the
   one compilation that also binds the drag, so this rule cannot take effect on
   a page that cannot honour it. That arrangement is not fussiness: this route
   shipped a `cursor: pointer` that outlived the click handler it belonged to,
   with a Playwright spec asserting the class by name, and a visitor reported
   this very track as something they expected to drag and could not. An
   affordance and its behaviour written in two files is how those happen.
   `grab` rather than `pointer`, because the track is a continuous range a
   handle is dragged along and not a target that is clicked — and `grabbing`
   while it is being dragged, which is the one moment the control is being
   operated rather than merely offered. `.scrubbing` and not only `:active`
   because the pointer is CAPTURED for the duration: a drag that leaves the
   track still owns it, and `:active` alone would drop the cursor the moment
   the visitor's hand strayed a pixel above the bar.
   No focus rule is added — `styles.nim`'s single `:focus-visible` treatment
   already covers `[tabindex]`, and the tab stop arrives with the same stamp,
   so the keyboard affordance and the pointer one cannot get out of step. */
.dctl.seekable{cursor:grab}
.dctl.seekable:active,.dctl.scrubbing{cursor:grabbing}
.dcstatus{flex:0 0 auto;display:flex;align-items:baseline;gap:var(--bt-space-sm)}
/* One short phrase, not a sentence: it shares a bar with the identity now, and
   the step counter is its right-hand neighbour, so it says only what the
   counter cannot — WHAT is being waited for and how big it is. */
.dcphase{color:var(--bt-text-muted);font-size:var(--bt-type-body-sm-size);
  white-space:nowrap}
/* The position readout outranks the loading status. It was the other way
   round — the persistent datum at 5.47:1 beside a transient string at 12.68:1,
   so the number that says where you are in the trace was dimmer than a message
   that disappears when the engine finishes
   (round 5, reviews/rounds/vd5-round5/debugger__laptop__dark__L3.md and
   reviews/rounds/vd5-round5/debugger__wide__dark__L4.md).
   Identity and position outrank
   status; nothing is hidden, the ranking is inverted back. */
.dcsteps{color:var(--bt-text-strong);
  font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-variant-numeric:var(--bt-numeric-features);
  font-size:var(--bt-type-body-sm-size)}

/* ── metadata pane ──────────────────────────────────────────────────────── */
.md{padding:var(--bt-density-cell-y) 0}
.mdhero{display:flex;align-items:center;gap:var(--bt-space-sm);flex-wrap:wrap;
  padding:0 var(--bt-density-cell-x) var(--bt-density-cell-y)}
.mdhash{color:var(--bt-text-strong);font-size:var(--bt-type-identifier-size)}
/* The full hash under the truncation. `break-all` and not `hidden`: it is 66
   characters in a pane column, and a hash clipped mid-string is a hash a
   reader cannot check against the one they arrived with. Same treatment the
   pane's own long identifier values get (`.mddl dd .identifier`). */
.mdfull{padding:0 var(--bt-density-cell-x) var(--bt-density-cell-y);
  color:var(--bt-text-muted);font-size:var(--bt-type-body-sm-size);
  line-height:var(--bt-type-body-sm-line);word-break:break-all}
/* The reason's colour follows the OUTCOME, never the presence of a reason.
   `.bad` is a revert; `.note` is a status reason on a transaction that did not
   fail, which the demo's Aztec split is. */
.mdrevert{padding:0 var(--bt-density-cell-x) var(--bt-density-cell-y);
  font-size:var(--bt-type-body-sm-size)}
.mdrevert.bad{color:var(--bt-status-danger-fg)}
.mdrevert.note{color:var(--bt-text-muted)}
/* THE LABEL COLUMN MUST BE ABLE TO SHRINK, AND IT COULD NOT.
   `auto` sizes the first column to its widest label, and `.mddl dt` was
   `white-space:nowrap`, so the longest label was UNBREAKABLE and took whatever
   width it wanted. On this corpus that label is `Cost · Transaction<nbsp>fee`,
   and at @laptop it left the value column too narrow for its own contents:

     AGE       `No timestamp published`  overflows its <dd> by 14px
     FINALITY  `Finalized`               overflows its <dd> by  6px
     SOURCES   `Instruction level`       overflows its <dd> by 19px

   `FINALIZED` IS WHY THIS IS A COLUMN FIX AND NOT A WRAPPING ONE. The other
   two are phrases and `white-space:normal` on the pill lets them wrap — that
   rule is already here, at `.mddl dd .badge`, and already shipped. A single
   word cannot wrap, so a six-pixel overflow on `Finalized` says the CELL is
   too narrow and no amount of pill wrapping will reach it.

   So the column is `minmax(0,auto)`, which lets it shrink below its content,
   and the label may wrap. THE NON-BREAKING SPACE STAYS: it holds
   `Transaction fee` together while permitting the break after `Cost ·`, which
   is the break a reader would choose.

   `fit-content(45%)` AS THE MAX, BECAUSE SHRINKING WHEN FORCED IS NOT THE
   SAME AS SHARING. `minmax(0,auto)` only gives width back when the track
   cannot otherwise fit; while it fits, `auto` still takes max-content, so on
   the debug route's 284px metadata pane the label column settled at ~170px
   and left the values 114px — about twelve characters a line. Measured there:
   `Aztec testnet — live Noir call frames` wrapped to 4.4 lines, `No timestamp
   published` to 3.4 and `Instruction level` to 2.4, while `Yes` and `Pending`
   sat on one. Nothing overflowed — the wrapping fix above holds — but a pane
   whose every informative value is four lines tall and whose labels are one
   is not reading as a two-column grid any more.

   The cap bounds the label track at 45% of the pane instead of at its own
   max-content, so the values get the rest. It is a MAXIMUM and not a fixed
   width: a short-labelled grid still sizes to its labels and nothing is
   padded out to 45%.

   `fit-content(45%)` IS WRITTEN BARE AND NOT INSIDE `minmax()`. The obvious
   spelling — `minmax(0,fit-content(45%))`, to keep the explicit 0 floor the
   note above asks for — is INVALID: `minmax()` takes a breadth, and
   `fit-content()` is not one. An invalid track list drops the whole
   declaration, the grid falls back to `none`, and every row auto-places into
   one implicit column: built, measured, and caught by the value cells coming
   back 286px wide in a 286px pane. The floor is not lost by writing it bare,
   because `fit-content()` already resolves to `minmax(auto, …)` and `auto`
   here is min-content — and `.mddl dt` is `white-space:normal` with
   `overflow-wrap:break-word`, so its min-content is one word, not the whole
   label. That is exactly the shrink-and-wrap behaviour the original note
   needs. */
.mddl{display:grid;
  grid-template-columns:fit-content(45%) minmax(0,1fr);gap:0}
.mddl dt{padding:var(--bt-density-cell-y) var(--bt-density-cell-x);
  font-size:var(--bt-type-label-size);font-weight:var(--bt-type-label-weight);
  letter-spacing:var(--bt-type-label-tracking);text-transform:uppercase;
  color:var(--bt-text-subtle);white-space:normal;overflow-wrap:break-word;
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle)}
/* `word-break:break-all` applied to the whole cell broke WORDS as well as
   hashes: `mana (FeeJuice)` came out as `mana (Fe` / `eJuice)`, which three
   reviewers reported independently. Only an identifier needs to break at an
   arbitrary character, and only an identifier is monospace enough for the
   break to stay legible, so the aggressive rule is scoped to `.identifier`
   and the cell itself breaks between words. */
.mddl dd{padding:var(--bt-density-cell-y) var(--bt-density-cell-x);
  font-size:var(--bt-density-data-size);text-align:right;
  overflow-wrap:break-word;
  border-bottom:var(--bt-stroke-hairline) solid var(--bt-border-subtle)}
.mddl dd .identifier{word-break:break-all}
/* THE NOTE ROW SPANS BOTH COLUMNS AND SETS FLUSH-LEFT.
   `.mddl dd` is `text-align:right`, which is right for a value and wrong for a
   paragraph; inheriting it set the provenance evidence flush-right and
   ragged-left at a ~28-character measure, in a pane whose other two paragraphs
   are flush-left. It was named the page's single weakest element by three
   adversarial reviewers on three different triples. Spanning the grid also
   reclaims the empty label gutter beside it, which is most of why the row was
   tall enough to be measured at 39% of the pane. */
.mddl dd.rownote{grid-column:1/-1;text-align:left;padding-top:0}

/* `MetaRow.note` in the transaction pane — the provenance row's evidence, which
   in this register is the ONLY provenance marker there is: `debugLayout` has no
   nav, no footer and, since the band was reserved for abnormal states, no strip
   above the identity bar either. So it is graded as content here, and it must
   stay legible in a 380px pane.

   `measure` is deliberately NOT applied by the caller in this register: the
   pane is already narrower than the prose measure, and a second cap would be a
   width that two rules could disagree about. One rung quieter than the value,
   the same relationship `.notice .reason` gives the explorer. */
.mddl dd .reason{color:var(--bt-text-muted);margin-top:var(--bt-space-2xs);
  font-size:var(--bt-type-body-sm-size);line-height:var(--bt-type-body-sm-line)}
.mddl dd .muted{white-space:nowrap}
/* A BADGE IN THIS PANE MAY WRAP. GLOBALLY IT STILL MAY NOT.
   `.badge` is `white-space:nowrap` in `styles.nim`, and everywhere else that is
   right: a badge normally holds one short status word — `Yes`, `Pending`,
   `public` — which would read as broken if it broke across lines. `nowrap` does
   not make text fit, though; it makes text that does not fit OVERFLOW, and this
   pane is the narrowest surface in the product that puts badges in a right
   column (~380px at `wide`, ~290px at `laptop`). There the overflow is clipped
   by the pane and the reader gets a sentence cut off mid-word with no ellipsis
   to tell them it was cut.
   THREE ROWS WERE DOING IT, and none is a short status word:
     DATA     the LABEL the capture published — free prose out of
              `snapshot.json`, nothing bounds its length. In this register that
              row is the ONLY provenance marker there is (see
              `provenanceMarker` — no nav, no footer, no band), so the clipped
              element was the page's whole claim to be showing real data.
     AGE      `No timestamp published`, clipped to `No timestamp p`.
     SOURCES  `Instruction level` / `Sources partial`, clipped mid-phrase.

   AND THIS IS OLDER AND WIDER THAN THE CHAIN THAT REVEALED IT. The first
   version of this note said the label was fine at 23 characters and broke at
   37 — that was the visible half, not the defect. Measured with the rule
   removed, by `check-badge-legibility.mjs` over the built registry: EVERY REAL
   CHAIN WAS AFFECTED, 22 clipped badges over three of them —
   `aztec` 6, `aztec-testnet` 6, `aztec-testnet-frames` 10 — with `Real Aztec
   mainnet data` and `Real Aztec testnet data`, both 23 characters, overflowing
   by 69px and 66px at `laptop` on chains that had shipped for weeks. What
   `aztec-testnet-frames` changed was only WHERE it showed: at 37 characters
   the pill also overflows at `wide`, which is a viewport the corpus
   photographs, so a person finally saw it. So this rule repairs a standing
   defect on the existing chains and is not a fix for the new one.

   Both other rows are equally pre-existing, and none of it was found by
   reading the CSS — it was found by photographing a chain nobody had looked
   at, which is what the capture corpus is for.
   `normal` PERMITS wrapping, it does not force it: `Yes` and `Pending` have
   room and still occupy one line. Scoped to `.badge`, so the `.muted` SUFFIX
   span above keeps its nowrap — `mana (FeeJuice)` must not come apart. */
/* ── `normal` WAS NOT ENOUGH, AND THE REASON IS THE MIN-CONTENT FLOOR ─────
   `white-space:normal` lets the pill's text wrap at a SPACE. It does not let
   the pill be narrower than its widest WORD, and `.badge` is
   `display:inline-flex`, so that text is an anonymous flex item whose
   `min-width:auto` resolves to exactly that min-content width. A cell
   narrower than one word plus the pill's padding is therefore still
   overflowed, by the difference.

   `.mddl dd` declares `overflow-wrap:break-word`, which does NOT reduce
   min-content size — that is the whole documented difference between it and
   `anywhere`, and it is why the explorer's `.dl dd`, which has carried
   `overflow-wrap:anywhere` since it was written, does not clip while this
   list does.

   MEASURED on run 39352321787, where `check-badge-legibility` went red having
   been green on the run before it over the same bytes, on
   `/aztec-testnet/tx/0x0858d644…` @laptop: `No timestamp published` by 14px,
   `Instruction level` by 19px, `Finalized` by 6px. It passes on this
   workstation — the gate's own control strip reads "Finalized 84px outside a
   scrolling table" here against 106px there, so the runner's glyphs are
   simply wider, and 6px of margin is not a design.

   REPRODUCED BY WIDENING THE TEXT RATHER THAN BY GUESSING AT THE HOST. With
   `letter-spacing` forced on the pill at 1440px, 4 badges clip at 1.25em and
   5 at 2em (`No timestamp published` 296px in a 114px cell); with this one
   declaration added, ZERO clip at every step. The gate's own instruction is
   "let the pill wrap where its text is unbounded", and this is what lets it.

   Scoped to the pill and not raised on `.mddl dd` itself: the cell's values
   are identifiers and numbers, and `break-word` is the right floor for them. */
.mddl dd .badge{white-space:normal;overflow-wrap:anywhere}
.mddl dd a{color:var(--bt-text-link);text-decoration:underline;
  text-underline-offset:var(--bt-space-3xs)}
.mdexec{padding:var(--bt-density-cell-y) var(--bt-density-cell-x)}
.mdexectitle{display:block;font-size:var(--bt-type-label-size);
  font-weight:var(--bt-type-label-weight);letter-spacing:var(--bt-type-label-tracking);
  text-transform:uppercase;color:var(--bt-text-subtle);
  margin-bottom:var(--bt-space-2xs)}
.mdexecrow{display:flex;align-items:baseline;gap:var(--bt-space-xs);
  flex-wrap:wrap;margin-top:var(--bt-space-2xs)}
.mdexecrow .sel{font-family:var(--bt-font-mono),var(--bt-font-mono-fallback);
  font-size:var(--bt-type-label-size);color:var(--bt-text-muted)}
.mdexecrow .reason{flex:1 1 100%;color:var(--bt-text-subtle);
  font-size:var(--bt-type-label-size);line-height:var(--bt-type-body-sm-line)}
/* §7.2's remaining facts — the decoded input and the chain-native payload —
   as sections of the same pane. They are here rather than only on the
   metadata page because §7.0 makes the transaction route land in the session
   wherever a trace is published, so a fact that lived only on that page would
   be one the product stopped serving. The section heading reuses the
   execution list's, because it is the same kind of label. */
.mdsec{padding:var(--bt-density-cell-y) var(--bt-density-cell-x)}
.mdsec .mddl{margin-top:var(--bt-space-2xs)}
.mdsec .mddl dt,.mdsec .mddl dd{padding-left:0;padding-right:0}
.mdsec .btnote{padding:var(--bt-space-2xs) 0 0}
/* The right-edge fade is declared with `.src` above — one overflow treatment
   for every clipped code surface on the page. */
.mdsec pre.raw{margin-top:var(--bt-space-2xs);
  border-radius:var(--bt-radius-md);padding:var(--bt-density-card-pad)}

/* ── the states with no session ─────────────────────────────────────────── */
/* The statement is COMPOSED IN the region, not parked in its corner.
   (VD.6 — the first round in which these two states were captured at all.)

   `debugger--no-session` and `debugger--no-session-terminal` are the emptiest
   surfaces this product ships: a full-viewport pane, roughly 1500x1000 at
   `wide`, holding three lines of prose and at most one button. Flush to the
   top-left of that pane, with ~900px of nothing beneath, they read as a
   debugger that failed to load — which is the one reading §7.0's third row
   must not have, because the region is correct and deliberate and the whole
   claim is that this page is not pretending.

   `margin:auto` on the flex child, rather than `align-items:center` on the
   parent: the two centre identically while the content fits, and only the
   first stays reachable when it does not — a centred flex item taller than its
   `overflow:auto` container has its top clipped and cannot be scrolled back
   to. This block is short at every viewport today and the narrow session is
   where that stops being true.

   The prose itself stays left-aligned. What is centred is the BLOCK. */
.nosession .lm_content{display:flex}
.nostate{margin:auto;max-width:var(--bt-measure-prose);
  padding:var(--bt-density-card-pad) var(--bt-density-cell-x)}
/* Both paragraphs already carry `.empty-overlay`'s own padding, so the second needs
   none of its own; what it needs is to read as evidence UNDER the sentence
   rather than as a second statement beside it. One rung quieter, and its top
   padding removed so the pair sits as one block. Same relationship
   `.notice .reason` gives the explorer register. */
.nostate .btnote.reason{padding-top:var(--bt-space-2xs);
  color:var(--bt-text-muted)}
.norow{display:flex;align-items:center;gap:var(--bt-space-md);flex-wrap:wrap;
  margin-top:var(--bt-rhythm-stack)}
.norow .btnote{padding:0;flex:1 1 var(--bt-measure-narrow)}
/* The phase rail sits in the identity bar now, beside the controls whose
   inertness it explains, so it has no vertical rhythm of its own and its
   chips carry one word rather than a sentence (`session_view.phaseShortLabel`).
   The chips run together with a hairline between them instead of eight pixels
   of air: three separate pills read as three independent states, and this is
   one sequence with a position in it. */
.phaserail{display:flex;flex-wrap:wrap;align-items:center;flex:0 0 auto;
  border:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  border-radius:var(--bt-radius-full);overflow:hidden}
.phaserail .phase{font-size:var(--bt-type-label-size);
  font-weight:var(--bt-type-label-weight);letter-spacing:var(--bt-type-label-tracking);
  text-transform:uppercase;color:var(--bt-text-subtle);white-space:nowrap;
  padding:var(--bt-space-3xs) var(--bt-space-xs)}
.phaserail .phase + .phase{
  border-left:var(--bt-stroke-hairline) solid var(--bt-border-subtle)}
/* The ACTIVE phase is a STATUS, not a position. It used to fill with the same
   tint the Code pane and the Call Trace use for "you are here", so one swatch
   meant both "the engine is doing this now" and "the session is standing here"
   900px apart in one visual field — two unrelated state families sharing a
   fill (round 5,
   reviews/rounds/vd5-round5/debugger__wide__light__L3.md). `status.info` is
   the role the product already has for in-progress, and it is a different hue
   from the position family in both themes. */
.phaserail .phase.on{color:var(--bt-status-info-fg);
  background:var(--bt-status-info-bg);
  box-shadow:inset var(--bt-stroke-thick) 0 0 0 var(--bt-status-info-border)}
.phaserail .engineorigin{padding:var(--bt-space-3xs) var(--bt-space-xs);
  border-left:var(--bt-stroke-hairline) solid var(--bt-border-subtle)}

/* ── copying a value out (§13: copyable with one click) ─────────────────── */
/* `user-select:all` is the whole mechanism: one click selects the entire
   value, and the platform's copy gesture takes it from there. It is what a
   page with NO JavaScript can offer; a copy BUTTON here would be a control
   that cannot succeed, which is the defect two affordances on this surface
   were already removed for. `debugger/session_view.Copyable` carries the whole
   argument — and carries it there rather than here because this stylesheet is
   INLINED into the page, so naming a removed affordance in a comment would
   put its name back into the served bytes.
   The hover treatment is what makes it discoverable rather than a hidden
   behaviour: the value gains a surface and a border on hover, so it reads as a
   single object you can take, and `cursor` says which gesture is on offer.
   Applied only to values rendered IN FULL — see `Copyable` for why a
   truncated identifier carries `title`/`data-copy` instead.
   This block is concatenated into every page by `components/layout.nim`, so
   the rule serves the explorer's transaction page as well as the pane — which
   is what §7.1's "from one source" requires of the affordance and not only of
   the facts. */
.copyable{user-select:all;cursor:copy;border-radius:var(--bt-radius-xs);
  transition:background var(--bt-motion-fast) var(--bt-motion-ease)}
.copyable:hover{background:var(--bt-surface-hover);
  box-shadow:0 0 0 var(--bt-stroke-hairline) var(--bt-border-default)}
.copyable::selection{background:var(--bt-surface-selected);
  color:var(--bt-text-strong)}

/* A COPYABLE VALUE INSIDE A CLICKABLE ROW: THE ROW'S AFFORDANCE WINS.
   This is the defect a visitor reported as "the cursor over the clickable
   elements shows as a plus sign (e.g. in the call trace) — I expect a hand".
   `cursor:copy` renders as an arrow with a plus badge, and the two elements it
   landed on are `.ctname` and `.evlabel` — the function name and the event
   label, which are the WIDEST cell of the row and therefore the part of it a
   pointer is actually resting on. The row is `a.ctrow`/`a.evrow` and carries
   `cursor:pointer` above, but `cursor` is resolved at the element under the
   pointer, not at the row, so a descendant rule quietly overrode the row's
   affordance across its whole reading surface. Every navigable row in both
   navigation regions was affected; the aggregate (`Self cost`) view was not,
   because those rows are `tdiv` and jump nowhere — which is the tell that this
   was one rule crossing a boundary rather than a per-pane mistake.
   The promise the plus made was also the wrong one. A `copy` cursor says "this
   gesture copies"; the row's gesture SEEKS — `hydrate.rowHandler` sends
   `ct/goto-ticks` for a click anywhere inside it, and §4.2 calls that "the
   single most valuable interaction in the product". A visitor reading the plus
   sees the one thing the row does not primarily do.
   Scoped to `a`/`button` ancestors rather than named per pane, so a copyable
   value dropped into any future clickable row inherits the answer instead of
   reintroducing the bug. Standalone copyable values are untouched: nothing
   encloses them, so `cursor:copy` there still describes the only gesture on
   offer. */
a .copyable,button .copyable{cursor:pointer}

/* THE CONTROLS HYDRATION ADDS, WHICH HAD NO STYLE OF THEIR OWN.
   `hydrate.bindCopy` turns a value into a real control — it sets the role,
   makes the element focusable and binds an activation handler — and no rule in
   this stylesheet matched the result. On a `.copyable` the element still
   inherited the copy cursor and got away with it; on the TRUNCATED identifiers,
   `.mdhash` in the pane and `.dbgid` in the identity bar, there was no
   `.copyable` rule to fall back on, so the one pair of values whose ONLY route
   to the full string is that control presented as a focusable,
   keyboard-operable button under a plain arrow. That is the reported defect
   mirrored: there the cursor promised a gesture the element did not offer, here
   the element offered one the cursor never mentioned.
   Keyed on the ROLE rather than on the class hydration adds, for two reasons.
   It is the same answer `styles.nim` already gives every control that is a
   button in markup — `button{cursor:pointer}` — extended to the ones that say
   so with an attribute instead of an element. And §13's guard asserts that
   class name appears NOWHERE in the served bytes, which is a true and useful
   thing to assert; this block is inlined into every page, so a selector or even
   a comment spelling it would put it back and answer the guard with CSS. That
   is the hazard the `.copyable` note above already records, met a second time.
   Inert until hydration, because nothing in the served markup carries the role
   — which the debug-route suite asserts over the markup rather than the
   document, for exactly this reason. Disabled controls are unaffected: they
   keep `not-allowed` from their own, higher-specificity rules. */
[role="button"]{cursor:pointer}

/* ── the embedded demo on the home page ─────────────────────────────────── */
/* Design-System §2 makes the register crossing deliberate, so the embed is a
   bounded, product-register panel inside an explorer-register page. */
.livedemo{margin-top:var(--bt-rhythm-group);
  border:var(--bt-stroke-hairline) solid var(--bt-border-strong);
  border-radius:var(--bt-radius-lg);overflow:hidden;
  box-shadow:var(--bt-elevation-overlay);
  background:var(--bt-surface-canvas)}
/* The embed caps the pane region's height, and it has to CLIP at that cap.
   Below 1100px the narrow rules turn `.dbgmain` into an auto-height column
   (`overflow:visible`, so a pane that outgrows its share paints outside the
   box rather than scrolling inside it) — correct for the route, where the
   shell scrolls, and wrong here, where `.livedemo .dbgmain` keeps the cap at
   higher specificity. The stacked panes therefore overflowed the cap and
   painted OVER `.livedemofoot`: at 375px "stopped mid-execution at step 128 of
   1315" and the Call Trace pane's own title occupied the same pixels, and at
   1024px the "Open the full session" button was under a pane with only the
   word "sion" left of it. Clipping at the cap is what makes the embed a
   bounded preview instead of a squeezed session; the button under it is the
   way to the whole thing. */
/* `background` is here and not on the element's own class list because
   `pages/home.nim` is the explorer chrome's file and not this branch's: the
   debug route puts `.lm_goldenlayout` on its `.dbgmain` and gets the frame
   surface from the port's own rule, and the embed is named by selector until
   that page can carry the class too. It is the same token the port binds
   `.lm_goldenlayout` to, and it is the one property restated anywhere in this
   file. */
.livedemo .dbgmain{height:var(--bt-layout-code-max-height);overflow:hidden;
  background:var(--bt-surface-raised)}
.livedemofoot{display:flex;align-items:center;justify-content:space-between;
  gap:var(--bt-space-md);flex-wrap:wrap;
  padding:var(--bt-density-cell-y) var(--bt-density-cell-x);
  border-top:var(--bt-stroke-hairline) solid var(--bt-border-default);
  background:var(--bt-surface-raised);color:var(--bt-text-muted);
  font-size:var(--bt-type-body-sm-size)}

/* ── narrow: its own surface, not a squeeze (Page-Descriptions §13) ─────── */
.dbgnarrow{display:none}
/* ── the identity bar below the width its full contents need ────────────── */
/* The bar used to answer a shortfall by BREAKING. `.dbgspacer` became a
   full-width zero-height item below 1600px, which put the language tag and
   both actions on a second row at every laptop viewport; below 1366px the
   control group took a THIRD row, and between 1601 and 1764 — where the
   forced break did not apply and the full contents did not fit — the bar wrapped
   wherever the last item stopped fitting, which is the fault the break was
   introduced to avoid, in the band the break did not cover. A wrap point does
   not create width. It only decides where the shortfall lands.

   Measured under the rules this replaces, at 1440 (content box 1392px), the
   row wanted 1600px:
     identity 319 — back 53, hash 110, outcome 90, block 66
     controls 1028 — rule+pad 25, buttons 287, scrubber 160 (already shrunk by
                     the rule this replaces), status 256, inner gaps 32,
                     rail 245, group gap 24
     language 29, Share 51, Download 109, seven 8px gaps 56.
   A 208px shortfall is not something a wrap point can fix; something has to
   stop being on the line. Two things do, and both are things that are SAID
   TWICE — which is the only kind of removal that costs a reader nothing:

   * The scrubber. 48 uniform ticks over `step / totalSteps`, whose exact value
     is printed as a fraction in `.dcsteps` 16px to its right. The rule this
     replaces shrank it to 160px instead, and the comment on `.dbgctl .dctl`
     above already says why that was the wrong half of the choice — "a readout
     that cannot be read is worse than one that costs width". The honest end of
     that sentence is that here it costs width the bar does not have. Removed,
     not squeezed: −276px at its own full size, −176 at the size the rule
     this replaces had shrunk it to, which is the number the arithmetic above
     is against.
   * The status PHRASE, and only while the phase rail is beside it. `.dcphase`
     reads "Engine loading — 18 MB"; the rail immediately to its right names
     the same three phases and marks the one in progress, and carries the 18 MB
     on the `Fetching` chip's own title. `:not(:only-child)` is what scopes
     this correctly rather than approximately: `renderPhaseRail` returns the
     empty string once the engine is live, so on a hydrated session `.dc` IS
     the only child, nothing else on the bar names the state, and the status
     stays. −170px.

   Plus the two actions becoming marks in `pages/debug.nim` (−92px). 438px
   removed against a 208px shortfall, so 1440 is one line with ~230px of slack
   — enough that the `Reconstructed` badge (123px on the transactions that
   carry one) does not put it back over.

   1780 is measured, not chosen: the bar's FULL contents fit from 1765px up,
   so the reduction begins at the last width where they do not. Above it
   nothing is removed and `wide` is the bar it has always been; below it every
   desktop width down to 1321 is one line, which is what the 1600 rung was
   failing to deliver at 1366, 1440, 1536, 1600 and 1680 alike. */
@media (max-width:1780px){
  /* THE SCRUBBER SHRINKS; IT DOES NOT LEAVE. Revised after every one of the
     twelve reviewers who graded the debugger at `laptop` — six lenses on each
     of `laptop/light` and `laptop/dark` — failed the PRESENCE check on it. The
     expectation asks for the position readout and, separately, "a timeline or
     scrubber expressing position within the trace", so `.dcsteps` cannot answer
     both: two required elements, one element present.

     The removal was also over-corrected on this rung's OWN arithmetic. The
     shortfall is 208px; the three cuts above remove 438px. Taking the scrubber
     out was 176 of those 438, against 230px of slack the other two cuts had
     already bought — which is why reviewers measured roughly 285px of empty bar
     at 1440 and said the track would fit in it. It does.

     `flex:0 1` with a floor, and not the bare `flex:0 1` this rule's ancestor
     had: that version let the track collapse to a couple of pixels, turning 48
     ticks and a playhead into a single dash, which is the defect the fixed
     width above was introduced to stop. The floor is a token because the number
     is a design decision and not an implementation detail — see
     `base.layout.scrubber-min`. Between the floor and the full 260px the track
     gives width back to the bar before anything wraps, so the widest bar the
     tree publishes (the transaction that also carries a `Reconstructed` badge)
     squeezes the scrubber rather than taking a second row. */
  .dbgctl .dctl{flex:0 1 var(--bt-layout-search);
    min-width:var(--bt-layout-scrubber-min)}
  .dbgctl > .dc:not(:only-child) .dcphase{display:none}
}
/* Below this the cuts above have run out and the bar breaks — deliberately,
   in the one place a break reads as a break rather than as a fault.

   1320 is measured, not chosen. With the three cuts above, the widest bar the
   demo tree publishes — the transaction that also carries a `Reconstructed`
   badge, 123px nobody may take away, since Trace-Artifacts §2.3a makes it the
   difference between a recorded trace and a reconstructed one — stops fitting
   between 1314px and 1318px. The rung is the next round number ABOVE the last
   width that cannot hold it, so
   the two regimes meet exactly where the content does instead of 285px early,
   which is what a 1600 rung was doing to 1366 and 1440.

   Below about 1230 a third row appears on that reconstructed transaction: its
   identity cluster plus its control group no longer share a line either, so
   the break above them is not the only one. That is unchanged from before this
   revision and it is inside the band this rung already declares to be a
   wrapped bar; the widths at issue are 100px above the point where §13's
   narrow session takes the controls away entirely.

   It is NOT lowered to 1280, and that is a decision rather than a limit. The
   only remaining candidates for removal are `.dbgblock` and `.dbglang` — the
   block height and the language — and those are two of the three things this
   change exists to keep ON the line. Buying 1280 with them would be answering
   "put everything on one row" with "put less on it".
   The wrapped row TERMINATES the bar rather than starting a new one. Three
   reviewers read the left-aligned version as an orphaned toolbar strip in
   explorer clothing, with no rule or label and a screenful of empty canvas to
   its right, which put the page's actions closer to the Code pane's title than
   to the hash they act on (round 5, both `laptop` triples —
   reviews/rounds/vd5-round5/debugger__laptop__light__L4.md,
   reviews/rounds/vd5-round5/debugger__laptop__dark__L2.md,
   reviews/rounds/vd5-round5/debugger__laptop__dark__L5.md).
   Pushing the group to the
   right edge does not make the row disappear, but it makes the two rows read
   as one bar that wrapped. `margin-left:auto` on the first item after the
   break; `.dbglang` is that item at every width this rule applies to. */
@media (max-width:1320px){
  .dbgspacer{flex:0 0 100%;height:0}
  .dbgbar .dbglang{margin-left:auto}
}
/* Where the control group STOPS sharing the identity's row, the rule between
   them stops separating anything. `.dbgctl`'s `border-left` and its left
   padding exist to keep eight glyph buttons from abutting a hash; once the
   group is the first thing on a row of its own, the same rule is a stray
   vertical stroke at the row's left edge with nothing to its left — which is
   the "reads as a rendering fault" class the rung above exists to remove,
   surviving in the band below it. Re-measured on the widest published bar
   (the reconstructed transaction, whose `Reconstructed` badge is 123px of
   identity nobody may take away): with the rule drawn, the third row appears
   at 1203px and not at 1204, so 1203 is the last width at which the stroke can
   be stranded and the rung is that width exactly rather than a round number
   above it.

   Removing the stroke also removes the 24px of left padding it separates
   with, and that MOVES the boundary the rung was measured against: without
   them the two groups share a line down to 1179 instead of 1204. Both ends of
   that are better than what they replace, which is why the feedback does not
   argue for a lower rung. Over 1179..1203 the bar goes from three rows with a
   stranded stroke to two rows with none — the separation is bought back by
   the 24px gap `.dbgbar` already puts between its top-level groups, and a row
   is worth more than a stroke. Over 1101..1178 the third row stays, because
   at those widths the content genuinely does not fit either way, and only the
   stroke leaves.

   The declaration is the one `max-width:1100px` already applies for the same
   reason; this rung only starts it earlier, where the geometry that justifies
   it starts. The narrow session below 1100 keeps its own copy because it
   removes different things and must not depend on this rung. */
@media (max-width:1203px){
  .dbgbar .dbgctl{border-left:0;padding-left:0}
}
@media (max-width:1100px){
  /* Every flex box above turns from "share a fixed viewport" into "be as tall
     as your content, up to a cap" — a pane that keeps `flex:1 1 0` inside an
     auto-height column resolves to zero and renders as an empty title bar,
     which is what a squeeze of the desktop layout actually looks like. */
  [data-register="debugger"] body{overflow:auto}
  /* `flex:0 0 auto` alongside `height:auto`, for the reason the paragraph above
     gives and which the shell now needs stated: `.dbg` is `flex:1 1 0` in the
     base rule (it takes what the provenance banner leaves of the viewport), and
     `height:auto` does NOT neutralise a flex basis. Without this line the shell
     would keep dividing a fixed viewport at exactly the widths this block
     exists to stop it — the same defect as `.dbgmain`, `.ln` and `.lm_stack` on the
     lines below, which is why it takes the same declaration they do. */
  [data-register="debugger"] .dbg{flex:0 0 auto;height:auto;min-height:100%}
  .dbgmain{flex:0 0 auto;flex-direction:column;height:auto;overflow:visible}
  .ln{flex:0 0 auto;height:auto}
  .ln.row{flex-direction:column}
  .lm_stack{flex:0 0 auto;height:auto}
  .lm_stack > .lm_items{flex:0 0 auto;height:auto}
  .lm_content{flex:0 0 auto;height:auto;
    max-height:var(--bt-layout-code-max-height);overflow:auto}
  /* A stacked column no longer needs a splitter between its members at this
     width — the panes run one under another and the separator would be a bar
     across the page. The row splitters go with the row. */
  .lm_splitter{display:none}
  /* …with ONE exception, and it is the pane §13 names first. `.srcwrap` is
     `height:100%` and `.src` inside it is `flex:1 1 0`, so an auto-height
     `.lm_content` gives the chain nothing to divide and the code renders at zero
     height: the Code pane came out as an empty title bar at every narrow
     viewport, which is exactly the "reduced session that silently drops a
     pane" §13 forbids — except that it was not even announced, because the
     pane was still there. A definite height is all the chain needs. */
  .lm_content.p-source{height:var(--bt-layout-code-max-height)}
  /* The identity bar's forced two-row wrap is a `wide`/`laptop` measure. Here
     the actions are hidden anyway, so the break would leave the language tag
     alone on a row of its own. */
  .dbgspacer{flex:1 1 auto;height:auto}
  .dbgnarrow{display:block;flex:0 0 auto;
    padding:var(--bt-density-cell-y) var(--bt-layout-gutter);
    background:var(--bt-status-info-bg);color:var(--bt-status-info-fg);
    border-bottom:var(--bt-stroke-hairline) solid var(--bt-status-info-border);
    font-size:var(--bt-type-body-sm-size);line-height:var(--bt-type-body-sm-line)}
  /* Page-Descriptions §13: source, call trace and values, read-only. The
     controls and the event log are REMOVED rather than shrunk, and the banner
     above says so — an unannounced reduction is the §13 failure.
     The controls are hidden in the BAR now rather than in the pane grid,
     because that is where they moved; a rule aimed at the pane they used to be
     would silently stop hiding anything, and this stylesheet is inlined, so
     even naming that class in a comment would keep it in the served bytes.
     `.dc` and not `.dbgctl`: the phase rail is the group's other member and it
     stays. §8's "phased and honest, never an indeterminate spinner" is not a
     desktop-only requirement, and a narrow visitor waiting on the same 18 MB
     is owed the same account of what is being waited for. */
  .dbgbar .dc{display:none}
  .dbgbar .dbgctl{border-left:0;padding-left:0;flex:0 0 auto}
  /* The Event Log is the ALTERNATE half of the navigation region's tab pair,
     so at this width it is already hidden and nothing has to hide it. What
     does have to go is its TAB — a tab that selects a hidden panel is a
     control that does nothing, which is the defect this surface has removed
     twice. And a URL arriving with `#pane-eventlog` still in it must not be
     able to bring the panel back or blank the region, so the three targeted-
     alternate rules are answered here rather than left to win the cascade:
     the panel stays hidden, the Call Trace panel stays shown, and its tab
     stays marked. A `:target` that changes nothing is the correct behaviour
     for a fragment naming a pane this viewport does not offer.

     `!important` AND the register prefix on the tab rule, because it is
     ANSWERING a ported declaration rather than filling a gap:
     `golden_layout.styl` sets `.lm_tab{display:flex !important}`, and an
     unprefixed `display:none` loses to it twice over. Measured — the Event
     Log tab was still on screen at `tablet` after the port landed, over a
     panel this viewport does not offer, which is the dead control this
     surface has now removed three times. */
  [data-register="debugger"] .lm_tab.t-pane-eventlog{display:none !important}
  .lm_stack > .lm_items > .lm_content.p-eventlog{display:none}
  .lm_stack:has(> .lm_items > .lm_content.p-eventlog:target)
    > .lm_items > .lm_content.p-calltrace{display:flex}
  /* The whole action GROUP, not the two buttons inside it: hiding the buttons
     left `.dbgacts` behind as a zero-width flex item that still claimed a gap
     on either side of itself. */
  .dbgbar .dbgacts{display:none}
  .dbgbar .dbglang{margin-left:0}
}
@media (max-width:720px){
  .dbgbar{gap:var(--bt-space-2xs) var(--bt-space-sm);
    padding:var(--bt-space-2xs) var(--bt-space-md)}
  .dbgblock,.dbglang{display:none}
  /* `.ctmod` was here too, and it is not any more: the call trace no longer
     paints a path at ANY width, so the breakpoint has nothing left to drop.
     This rule was the pane already conceding that the path was the droppable
     half — it just conceded it at one viewport width instead of everywhere. */
  .evdetail{display:none}
}
/* ── the keyboard-shortcuts dialog ───────────────────────────────────────────
   Shown only on the hydrated build: `renderShortcutsDialog` is inserted by
   `hydrate.bindShortcuts`, so none of this matches anything on the static
   export. The rules ship anyway rather than being conditionally emitted —
   one stylesheet for one route is what makes a served page and a hydrated
   page the same document with more behaviour, not two documents.

   `hidden` does the hiding, and the `display` here has to be written so it
   does not beat it: `[hidden]` is a UA rule of `display:none` and a bare
   `.kbdlg{display:flex}` would OUTRANK it and leave the dialog permanently
   open. Hence the `:not([hidden])`. This is the same class of defect as a
   `cursor:pointer` outliving its handler — a state expressed in markup that
   the stylesheet quietly overrules. */
/* `z-index:30` is a raw number, and it is the house practice rather than an
   exception: `components/styles.nim` writes `z-index:20` for the fixed site
   nav and `z-index:1` for a sticky cell. There is no `--bt-layer-*` group in
   `web.tokens.json` to reference — stacking order is not a design VALUE the
   token pipeline carries, it is a structural relation between two elements,
   and 30 is chosen to sit above the nav's 20 because a modal that the site
   header punched through would be a dialog with a hole in it. */
.kbdlg:not([hidden]){position:fixed;inset:0;z-index:30;
  display:flex;align-items:center;justify-content:center;
  padding:var(--bt-space-md);background:var(--bt-surface-overlay)}
.kbdlgbox{width:100%;max-width:var(--bt-measure-prose);
  max-height:100%;overflow-y:auto;
  border:var(--bt-stroke-hairline) solid var(--bt-border-default);
  border-radius:var(--bt-radius-lg);
  padding:var(--bt-density-card-pad) var(--bt-density-cell-x);
  background:var(--bt-surface-raised);box-shadow:var(--bt-elevation-overlay)}
.kbdlghead{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--bt-space-sm)}
.kbdlgtitle{font-size:var(--bt-type-body-sm-size);
  font-weight:var(--bt-type-h3-weight);color:var(--bt-text-strong)}
.kbdlgclose{border:0;background:none;cursor:pointer;
  color:var(--bt-text-muted);padding:var(--bt-space-3xs) var(--bt-space-2xs)}
.kbdlgclose:hover{color:var(--bt-text-strong)}
.kbpresets{display:flex;flex-direction:column;gap:var(--bt-space-2xs);
  margin-top:var(--bt-space-md)}
.kbpreset{display:grid;grid-template-columns:auto 1fr;
  gap:var(--bt-space-3xs) var(--bt-space-xs);align-items:baseline;
  cursor:pointer;padding:var(--bt-space-2xs);border-radius:var(--bt-radius-sm)}
.kbpreset:hover{background:var(--bt-surface-sunken)}
.kbradio{grid-row:span 2;cursor:pointer}
.kbpresetname{color:var(--bt-text-strong);
  font-weight:var(--bt-type-label-weight)}
.kbpresetwhy{grid-column:2;color:var(--bt-text-muted);
  font-size:var(--bt-type-caption-size)}
.kbrows{display:flex;flex-direction:column;gap:var(--bt-space-3xs);
  margin-top:var(--bt-space-md);
  border-top:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  padding-top:var(--bt-space-sm)}
.kbrow{display:grid;
  grid-template-columns:var(--bt-layout-label-column) auto 1fr;
  gap:var(--bt-space-xs);align-items:baseline}
.kbwhat{color:var(--bt-text-default)}
/* The chord is CODE, in the code face, for the reason every hash on this site
   is: it is a literal to be reproduced exactly, and a proportional face makes
   `S` and `s` — which are two different bindings here — harder to tell apart
   than they need to be. */
.kbchord{font-family:var(--bt-font-code);font-size:var(--bt-type-code-size);
  color:var(--bt-text-code);background:var(--bt-surface-sunken);
  border:var(--bt-stroke-hairline) solid var(--bt-border-subtle);
  border-radius:var(--bt-radius-xs);
  padding:var(--bt-space-3xs) var(--bt-space-2xs);white-space:nowrap}
.kbhazard{font-size:var(--bt-type-caption-size);color:var(--bt-text-muted)}
/* A chord the browser eats is not merely a footnote — it is the row that is
   NOT going to work — so it is coloured as the warning it is, while the
   softer macOS case stays muted. Two hazards, two weights, because telling
   them apart is the whole reason `Hazard` has three values. */
.kbhazard.blocked{color:var(--bt-mark-not-taken)}
.kbempty,.kbfoot{color:var(--bt-text-muted);
  font-size:var(--bt-type-caption-size);margin-top:var(--bt-space-md)}

/* ── the same rows on `/settings`, which is a PAGE and not a dialog ──────
   These rules exist because `siteCss` inlines `debugRouteCss` on every page,
   so `.kbrow`, `.kbchord` and the preset picker above are already styled at
   `/settings` — and styling them a second time under a page-only selector is
   exactly the drift `components/shortcut_list.nim` was extracted to prevent,
   in the stylesheet instead of the renderer.

   So only what the page ADDS is declared here: the panel wrapper, the group
   headings, and the multi-key cell. Nothing overrides a rule above. */

/* NO `display` RULE ON `.kbpanel` OR `.kbchooser`, AND THAT IS THE RULE.
   
   Both are `div`s and already block. `.kbpanel{display:block}` was written
   here as harmless tidiness and was not: the UA stylesheet hides a `hidden`
   element with `[hidden]{display:none}`, a type-less attribute selector of
   specificity (0,1,0), and a class selector ties it and wins on order. So the
   rule silently defeated `hidden` and ALL EIGHT preset panels rendered at
   once — the page showing four contradictory answers to "what is bound",
   which is precisely what listing them in one place was for.
   
   It is worth the paragraph because of how it was found. The markup was
   correct, the Nim suite was green on it, and journey 22 was green on it too:
   the journey asked `hasAttribute("hidden")`, which was TRUE on all seven
   hidden panels. Only a screenshot showed the page. The journey now reads
   `getComputedStyle`, so the assertion is about what a reader sees rather
   than about the attribute that was supposed to cause it. */

/* The group headings on the page and in the dialog. Caption-weight rather
   than heading-weight: they separate three lists of the same kind of thing,
   and an `h2`-sized rule between them would read as three sections of a
   document instead. */
.kbgrouptitle{font-size:var(--bt-type-body-sm-size);
  color:var(--bt-text-strong);margin-top:var(--bt-space-md)}

/* A move with more than one key — the scrubber's four arrows, and Enter with
   Space. Inline so `←` `or` `↓` reads as ONE answer to one question; a stack
   would read as two separate shortcuts, which is the thing this whole list
   exists to stop a reader believing. */
.kbchordset{display:inline-flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--bt-space-3xs)}
.kbor{color:var(--bt-text-muted);font-size:var(--bt-type-caption-size)}
/* ── the loop rail's target ladder (generated; see flowIterationLadder) ──── */
#fit-0:target ~ .srcwrap .fv.now{display:none}
#fit-0:target ~ .srcwrap .fv.fv-i0,#fit-0:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-0:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-0:target ~ .flowrail .frseg.s0 .frdot{display:block}
#fit-0:target ~ .flowrail .frcount.now{display:none}
#fit-0:target ~ .flowrail .frcount.c0{display:inline}
#fit-0:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-0:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-0:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-0:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-0:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-0:target ~ .srcwrap .srcline.ntnow .mg,#fit-0:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-0:target ~ .srcwrap .srcline.nt-i0 .mn,#fit-0:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-0:target ~ .srcwrap .srcline.nt-i0 .ntbar,#fit-0:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-0:target ~ .srcwrap .srcline.nt-i0 .t,#fit-0:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-0:target ~ .srcwrap .srcline.rn-i0 .mt,#fit-0:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-0:target ~ .srcwrap .srcline.rn-i0 .rnbar,#fit-0:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-0:target ~ .srcwrap .srcline.nt-i0 .mg,#fit-0:target ~ .srcwrap .srcline.nt-any .mg,#fit-0:target ~ .srcwrap .srcline.rn-i0 .mg,#fit-0:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-1:target ~ .srcwrap .fv.now{display:none}
#fit-1:target ~ .srcwrap .fv.fv-i1,#fit-1:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-1:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-1:target ~ .flowrail .frseg.s1 .frdot{display:block}
#fit-1:target ~ .flowrail .frcount.now{display:none}
#fit-1:target ~ .flowrail .frcount.c1{display:inline}
#fit-1:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-1:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-1:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-1:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-1:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-1:target ~ .srcwrap .srcline.ntnow .mg,#fit-1:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-1:target ~ .srcwrap .srcline.nt-i1 .mn,#fit-1:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-1:target ~ .srcwrap .srcline.nt-i1 .ntbar,#fit-1:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-1:target ~ .srcwrap .srcline.nt-i1 .t,#fit-1:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-1:target ~ .srcwrap .srcline.rn-i1 .mt,#fit-1:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-1:target ~ .srcwrap .srcline.rn-i1 .rnbar,#fit-1:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-1:target ~ .srcwrap .srcline.nt-i1 .mg,#fit-1:target ~ .srcwrap .srcline.nt-any .mg,#fit-1:target ~ .srcwrap .srcline.rn-i1 .mg,#fit-1:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-2:target ~ .srcwrap .fv.now{display:none}
#fit-2:target ~ .srcwrap .fv.fv-i2,#fit-2:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-2:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-2:target ~ .flowrail .frseg.s2 .frdot{display:block}
#fit-2:target ~ .flowrail .frcount.now{display:none}
#fit-2:target ~ .flowrail .frcount.c2{display:inline}
#fit-2:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-2:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-2:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-2:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-2:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-2:target ~ .srcwrap .srcline.ntnow .mg,#fit-2:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-2:target ~ .srcwrap .srcline.nt-i2 .mn,#fit-2:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-2:target ~ .srcwrap .srcline.nt-i2 .ntbar,#fit-2:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-2:target ~ .srcwrap .srcline.nt-i2 .t,#fit-2:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-2:target ~ .srcwrap .srcline.rn-i2 .mt,#fit-2:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-2:target ~ .srcwrap .srcline.rn-i2 .rnbar,#fit-2:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-2:target ~ .srcwrap .srcline.nt-i2 .mg,#fit-2:target ~ .srcwrap .srcline.nt-any .mg,#fit-2:target ~ .srcwrap .srcline.rn-i2 .mg,#fit-2:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-3:target ~ .srcwrap .fv.now{display:none}
#fit-3:target ~ .srcwrap .fv.fv-i3,#fit-3:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-3:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-3:target ~ .flowrail .frseg.s3 .frdot{display:block}
#fit-3:target ~ .flowrail .frcount.now{display:none}
#fit-3:target ~ .flowrail .frcount.c3{display:inline}
#fit-3:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-3:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-3:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-3:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-3:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-3:target ~ .srcwrap .srcline.ntnow .mg,#fit-3:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-3:target ~ .srcwrap .srcline.nt-i3 .mn,#fit-3:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-3:target ~ .srcwrap .srcline.nt-i3 .ntbar,#fit-3:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-3:target ~ .srcwrap .srcline.nt-i3 .t,#fit-3:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-3:target ~ .srcwrap .srcline.rn-i3 .mt,#fit-3:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-3:target ~ .srcwrap .srcline.rn-i3 .rnbar,#fit-3:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-3:target ~ .srcwrap .srcline.nt-i3 .mg,#fit-3:target ~ .srcwrap .srcline.nt-any .mg,#fit-3:target ~ .srcwrap .srcline.rn-i3 .mg,#fit-3:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-4:target ~ .srcwrap .fv.now{display:none}
#fit-4:target ~ .srcwrap .fv.fv-i4,#fit-4:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-4:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-4:target ~ .flowrail .frseg.s4 .frdot{display:block}
#fit-4:target ~ .flowrail .frcount.now{display:none}
#fit-4:target ~ .flowrail .frcount.c4{display:inline}
#fit-4:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-4:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-4:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-4:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-4:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-4:target ~ .srcwrap .srcline.ntnow .mg,#fit-4:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-4:target ~ .srcwrap .srcline.nt-i4 .mn,#fit-4:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-4:target ~ .srcwrap .srcline.nt-i4 .ntbar,#fit-4:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-4:target ~ .srcwrap .srcline.nt-i4 .t,#fit-4:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-4:target ~ .srcwrap .srcline.rn-i4 .mt,#fit-4:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-4:target ~ .srcwrap .srcline.rn-i4 .rnbar,#fit-4:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-4:target ~ .srcwrap .srcline.nt-i4 .mg,#fit-4:target ~ .srcwrap .srcline.nt-any .mg,#fit-4:target ~ .srcwrap .srcline.rn-i4 .mg,#fit-4:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-5:target ~ .srcwrap .fv.now{display:none}
#fit-5:target ~ .srcwrap .fv.fv-i5,#fit-5:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-5:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-5:target ~ .flowrail .frseg.s5 .frdot{display:block}
#fit-5:target ~ .flowrail .frcount.now{display:none}
#fit-5:target ~ .flowrail .frcount.c5{display:inline}
#fit-5:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-5:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-5:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-5:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-5:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-5:target ~ .srcwrap .srcline.ntnow .mg,#fit-5:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-5:target ~ .srcwrap .srcline.nt-i5 .mn,#fit-5:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-5:target ~ .srcwrap .srcline.nt-i5 .ntbar,#fit-5:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-5:target ~ .srcwrap .srcline.nt-i5 .t,#fit-5:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-5:target ~ .srcwrap .srcline.rn-i5 .mt,#fit-5:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-5:target ~ .srcwrap .srcline.rn-i5 .rnbar,#fit-5:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-5:target ~ .srcwrap .srcline.nt-i5 .mg,#fit-5:target ~ .srcwrap .srcline.nt-any .mg,#fit-5:target ~ .srcwrap .srcline.rn-i5 .mg,#fit-5:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-6:target ~ .srcwrap .fv.now{display:none}
#fit-6:target ~ .srcwrap .fv.fv-i6,#fit-6:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-6:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-6:target ~ .flowrail .frseg.s6 .frdot{display:block}
#fit-6:target ~ .flowrail .frcount.now{display:none}
#fit-6:target ~ .flowrail .frcount.c6{display:inline}
#fit-6:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-6:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-6:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-6:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-6:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-6:target ~ .srcwrap .srcline.ntnow .mg,#fit-6:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-6:target ~ .srcwrap .srcline.nt-i6 .mn,#fit-6:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-6:target ~ .srcwrap .srcline.nt-i6 .ntbar,#fit-6:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-6:target ~ .srcwrap .srcline.nt-i6 .t,#fit-6:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-6:target ~ .srcwrap .srcline.rn-i6 .mt,#fit-6:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-6:target ~ .srcwrap .srcline.rn-i6 .rnbar,#fit-6:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-6:target ~ .srcwrap .srcline.nt-i6 .mg,#fit-6:target ~ .srcwrap .srcline.nt-any .mg,#fit-6:target ~ .srcwrap .srcline.rn-i6 .mg,#fit-6:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-7:target ~ .srcwrap .fv.now{display:none}
#fit-7:target ~ .srcwrap .fv.fv-i7,#fit-7:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-7:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-7:target ~ .flowrail .frseg.s7 .frdot{display:block}
#fit-7:target ~ .flowrail .frcount.now{display:none}
#fit-7:target ~ .flowrail .frcount.c7{display:inline}
#fit-7:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-7:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-7:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-7:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-7:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-7:target ~ .srcwrap .srcline.ntnow .mg,#fit-7:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-7:target ~ .srcwrap .srcline.nt-i7 .mn,#fit-7:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-7:target ~ .srcwrap .srcline.nt-i7 .ntbar,#fit-7:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-7:target ~ .srcwrap .srcline.nt-i7 .t,#fit-7:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-7:target ~ .srcwrap .srcline.rn-i7 .mt,#fit-7:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-7:target ~ .srcwrap .srcline.rn-i7 .rnbar,#fit-7:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-7:target ~ .srcwrap .srcline.nt-i7 .mg,#fit-7:target ~ .srcwrap .srcline.nt-any .mg,#fit-7:target ~ .srcwrap .srcline.rn-i7 .mg,#fit-7:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-8:target ~ .srcwrap .fv.now{display:none}
#fit-8:target ~ .srcwrap .fv.fv-i8,#fit-8:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-8:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-8:target ~ .flowrail .frseg.s8 .frdot{display:block}
#fit-8:target ~ .flowrail .frcount.now{display:none}
#fit-8:target ~ .flowrail .frcount.c8{display:inline}
#fit-8:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-8:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-8:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-8:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-8:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-8:target ~ .srcwrap .srcline.ntnow .mg,#fit-8:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-8:target ~ .srcwrap .srcline.nt-i8 .mn,#fit-8:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-8:target ~ .srcwrap .srcline.nt-i8 .ntbar,#fit-8:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-8:target ~ .srcwrap .srcline.nt-i8 .t,#fit-8:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-8:target ~ .srcwrap .srcline.rn-i8 .mt,#fit-8:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-8:target ~ .srcwrap .srcline.rn-i8 .rnbar,#fit-8:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-8:target ~ .srcwrap .srcline.nt-i8 .mg,#fit-8:target ~ .srcwrap .srcline.nt-any .mg,#fit-8:target ~ .srcwrap .srcline.rn-i8 .mg,#fit-8:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-9:target ~ .srcwrap .fv.now{display:none}
#fit-9:target ~ .srcwrap .fv.fv-i9,#fit-9:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-9:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-9:target ~ .flowrail .frseg.s9 .frdot{display:block}
#fit-9:target ~ .flowrail .frcount.now{display:none}
#fit-9:target ~ .flowrail .frcount.c9{display:inline}
#fit-9:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-9:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-9:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-9:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-9:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-9:target ~ .srcwrap .srcline.ntnow .mg,#fit-9:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-9:target ~ .srcwrap .srcline.nt-i9 .mn,#fit-9:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-9:target ~ .srcwrap .srcline.nt-i9 .ntbar,#fit-9:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-9:target ~ .srcwrap .srcline.nt-i9 .t,#fit-9:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-9:target ~ .srcwrap .srcline.rn-i9 .mt,#fit-9:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-9:target ~ .srcwrap .srcline.rn-i9 .rnbar,#fit-9:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-9:target ~ .srcwrap .srcline.nt-i9 .mg,#fit-9:target ~ .srcwrap .srcline.nt-any .mg,#fit-9:target ~ .srcwrap .srcline.rn-i9 .mg,#fit-9:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-10:target ~ .srcwrap .fv.now{display:none}
#fit-10:target ~ .srcwrap .fv.fv-i10,#fit-10:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-10:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-10:target ~ .flowrail .frseg.s10 .frdot{display:block}
#fit-10:target ~ .flowrail .frcount.now{display:none}
#fit-10:target ~ .flowrail .frcount.c10{display:inline}
#fit-10:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-10:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-10:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-10:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-10:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-10:target ~ .srcwrap .srcline.ntnow .mg,#fit-10:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-10:target ~ .srcwrap .srcline.nt-i10 .mn,#fit-10:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-10:target ~ .srcwrap .srcline.nt-i10 .ntbar,#fit-10:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-10:target ~ .srcwrap .srcline.nt-i10 .t,#fit-10:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-10:target ~ .srcwrap .srcline.rn-i10 .mt,#fit-10:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-10:target ~ .srcwrap .srcline.rn-i10 .rnbar,#fit-10:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-10:target ~ .srcwrap .srcline.nt-i10 .mg,#fit-10:target ~ .srcwrap .srcline.nt-any .mg,#fit-10:target ~ .srcwrap .srcline.rn-i10 .mg,#fit-10:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-11:target ~ .srcwrap .fv.now{display:none}
#fit-11:target ~ .srcwrap .fv.fv-i11,#fit-11:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-11:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-11:target ~ .flowrail .frseg.s11 .frdot{display:block}
#fit-11:target ~ .flowrail .frcount.now{display:none}
#fit-11:target ~ .flowrail .frcount.c11{display:inline}
#fit-11:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-11:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-11:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-11:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-11:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-11:target ~ .srcwrap .srcline.ntnow .mg,#fit-11:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-11:target ~ .srcwrap .srcline.nt-i11 .mn,#fit-11:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-11:target ~ .srcwrap .srcline.nt-i11 .ntbar,#fit-11:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-11:target ~ .srcwrap .srcline.nt-i11 .t,#fit-11:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-11:target ~ .srcwrap .srcline.rn-i11 .mt,#fit-11:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-11:target ~ .srcwrap .srcline.rn-i11 .rnbar,#fit-11:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-11:target ~ .srcwrap .srcline.nt-i11 .mg,#fit-11:target ~ .srcwrap .srcline.nt-any .mg,#fit-11:target ~ .srcwrap .srcline.rn-i11 .mg,#fit-11:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-12:target ~ .srcwrap .fv.now{display:none}
#fit-12:target ~ .srcwrap .fv.fv-i12,#fit-12:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-12:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-12:target ~ .flowrail .frseg.s12 .frdot{display:block}
#fit-12:target ~ .flowrail .frcount.now{display:none}
#fit-12:target ~ .flowrail .frcount.c12{display:inline}
#fit-12:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-12:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-12:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-12:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-12:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-12:target ~ .srcwrap .srcline.ntnow .mg,#fit-12:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-12:target ~ .srcwrap .srcline.nt-i12 .mn,#fit-12:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-12:target ~ .srcwrap .srcline.nt-i12 .ntbar,#fit-12:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-12:target ~ .srcwrap .srcline.nt-i12 .t,#fit-12:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-12:target ~ .srcwrap .srcline.rn-i12 .mt,#fit-12:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-12:target ~ .srcwrap .srcline.rn-i12 .rnbar,#fit-12:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-12:target ~ .srcwrap .srcline.nt-i12 .mg,#fit-12:target ~ .srcwrap .srcline.nt-any .mg,#fit-12:target ~ .srcwrap .srcline.rn-i12 .mg,#fit-12:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-13:target ~ .srcwrap .fv.now{display:none}
#fit-13:target ~ .srcwrap .fv.fv-i13,#fit-13:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-13:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-13:target ~ .flowrail .frseg.s13 .frdot{display:block}
#fit-13:target ~ .flowrail .frcount.now{display:none}
#fit-13:target ~ .flowrail .frcount.c13{display:inline}
#fit-13:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-13:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-13:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-13:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-13:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-13:target ~ .srcwrap .srcline.ntnow .mg,#fit-13:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-13:target ~ .srcwrap .srcline.nt-i13 .mn,#fit-13:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-13:target ~ .srcwrap .srcline.nt-i13 .ntbar,#fit-13:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-13:target ~ .srcwrap .srcline.nt-i13 .t,#fit-13:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-13:target ~ .srcwrap .srcline.rn-i13 .mt,#fit-13:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-13:target ~ .srcwrap .srcline.rn-i13 .rnbar,#fit-13:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-13:target ~ .srcwrap .srcline.nt-i13 .mg,#fit-13:target ~ .srcwrap .srcline.nt-any .mg,#fit-13:target ~ .srcwrap .srcline.rn-i13 .mg,#fit-13:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-14:target ~ .srcwrap .fv.now{display:none}
#fit-14:target ~ .srcwrap .fv.fv-i14,#fit-14:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-14:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-14:target ~ .flowrail .frseg.s14 .frdot{display:block}
#fit-14:target ~ .flowrail .frcount.now{display:none}
#fit-14:target ~ .flowrail .frcount.c14{display:inline}
#fit-14:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-14:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-14:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-14:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-14:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-14:target ~ .srcwrap .srcline.ntnow .mg,#fit-14:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-14:target ~ .srcwrap .srcline.nt-i14 .mn,#fit-14:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-14:target ~ .srcwrap .srcline.nt-i14 .ntbar,#fit-14:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-14:target ~ .srcwrap .srcline.nt-i14 .t,#fit-14:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-14:target ~ .srcwrap .srcline.rn-i14 .mt,#fit-14:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-14:target ~ .srcwrap .srcline.rn-i14 .rnbar,#fit-14:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-14:target ~ .srcwrap .srcline.nt-i14 .mg,#fit-14:target ~ .srcwrap .srcline.nt-any .mg,#fit-14:target ~ .srcwrap .srcline.rn-i14 .mg,#fit-14:target ~ .srcwrap .srcline.rn-any .mg{display:none}
#fit-15:target ~ .srcwrap .fv.now{display:none}
#fit-15:target ~ .srcwrap .fv.fv-i15,#fit-15:target ~ .srcwrap .fv.fv-any{display:inline-flex}
#fit-15:target ~ .flowrail .frseg.showing .frdot{display:none}
#fit-15:target ~ .flowrail .frseg.s15 .frdot{display:block}
#fit-15:target ~ .flowrail .frcount.now{display:none}
#fit-15:target ~ .flowrail .frcount.c15{display:inline}
#fit-15:target ~ .srcwrap .srcline.ntnow .mn{display:none}
#fit-15:target ~ .srcwrap .srcline.ntnow .ntbar{display:none}
#fit-15:target ~ .srcwrap .srcline.ntnow .t{opacity:1}
#fit-15:target ~ .srcwrap .srcline.rnnow .mt{display:none}
#fit-15:target ~ .srcwrap .srcline.rnnow .rnbar{display:none}
#fit-15:target ~ .srcwrap .srcline.ntnow .mg,#fit-15:target ~ .srcwrap .srcline.rnnow .mg{display:inline}
#fit-15:target ~ .srcwrap .srcline.nt-i15 .mn,#fit-15:target ~ .srcwrap .srcline.nt-any .mn{display:inline}
#fit-15:target ~ .srcwrap .srcline.nt-i15 .ntbar,#fit-15:target ~ .srcwrap .srcline.nt-any .ntbar{display:block}
#fit-15:target ~ .srcwrap .srcline.nt-i15 .t,#fit-15:target ~ .srcwrap .srcline.nt-any .t{opacity:var(--bt-opacity-not-run)}
#fit-15:target ~ .srcwrap .srcline.rn-i15 .mt,#fit-15:target ~ .srcwrap .srcline.rn-any .mt{display:inline}
#fit-15:target ~ .srcwrap .srcline.rn-i15 .rnbar,#fit-15:target ~ .srcwrap .srcline.rn-any .rnbar{display:block}
#fit-15:target ~ .srcwrap .srcline.nt-i15 .mg,#fit-15:target ~ .srcwrap .srcline.nt-any .mg,#fit-15:target ~ .srcwrap .srcline.rn-i15 .mg,#fit-15:target ~ .srcwrap .srcline.rn-any .mg{display:none}