@font-face{font-family:"Funnel Display";font-style:normal;font-weight:300;src:url(/assets/blog/funnel-light.ttf);font-display:swap}
@font-face{font-family:"Funnel Display";font-style:normal;font-weight:400;src:url(/assets/blog/funnel-regular.ttf);font-display:swap}
@font-face{font-family:"Funnel Display";font-style:normal;font-weight:500;src:url(/assets/blog/funnel-medium.ttf);font-display:swap}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;src:url(/assets/blog/jetbrains-mono.ttf);font-display:swap}

/* Shared editorial palette and typography follow the Arbium landing page. */
:root{color-scheme:light;--bg:#fafbf7;--ink:#1c2b20;--mut:#53614d;--line:#d9dfd2;--accent:#526a35}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Funnel Display',system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:5px}a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}img{max-width:100%;height:auto}.shell{max-width:1440px;margin:auto;padding:0 5vw}.mono,.figlabel,.secnum,.status{font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.7;letter-spacing:.09em;text-transform:uppercase}.site-header{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:23px;font-weight:500;letter-spacing:-.025em}.brand svg{height:17px;width:auto}.site-header nav,.site-footer nav{display:flex;align-items:center;gap:28px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.site-header nav a,.site-footer nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.site-header [aria-current]{color:var(--accent);text-decoration:underline;text-underline-offset:8px}.cta{border:1px solid #34492c50;padding:0 15px;gap:12px}.cta:hover{background:#eaf0df}.skip-link{position:absolute;top:-80px;left:20px;padding:12px;background:var(--ink);color:var(--bg);z-index:10}.skip-link:focus{top:12px}.eyebrow{display:flex;align-items:center;gap:18px;color:var(--mut)}.dot{width:6px;height:6px;background:var(--accent);border-radius:50%}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}h1{font-size:clamp(44px,6vw,84px);line-height:1.06;letter-spacing:-.045em}h1 em{font-style:normal;color:var(--accent)}.blog-heading{padding:36px 0 32px}.blog-heading h1{font-size:clamp(30px,3vw,42px);line-height:1.12;margin:0 0 14px}.blog-heading p{color:var(--mut);font-size:16px;line-height:1.5}.section-bar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:23px 0;color:var(--mut)}.section-bar h2{font-weight:400}.feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border:1px solid var(--line);text-decoration:none;transition:border-color .2s}.feature:hover{border-color:#7c8e6d}.feature-art{min-width:0;background:#edf1e6;display:flex;flex-direction:column;justify-content:space-between;padding:28px;overflow:hidden}.art-label{display:flex;justify-content:space-between;color:var(--mut);gap:15px}.feature-art img{display:block;margin:0;width:100%}.art-caption{color:var(--mut)}.feature-copy{min-width:0;padding:42px;display:flex;flex-direction:column;align-items:flex-start;border-left:1px solid var(--line)}.status{border:1px solid var(--line);padding:4px 8px;font-size:9px}.feature-copy h2{font-size:clamp(32px,3.5vw,49px);line-height:1.09;letter-spacing:-.035em;margin:0 0 18px}.feature-copy p{color:var(--mut);font-size:19px;line-height:1.5;max-width:27ch}.read-link{display:flex;justify-content:space-between;width:100%;margin-top:auto;padding-top:44px}.read-link span{font-size:22px;line-height:1;transition:transform .2s}.feature:hover .read-link span{transform:translate(3px,-3px)}.blog-signoff{display:flex;justify-content:space-between;gap:20px;padding:42px 0 80px;color:var(--mut);align-items:center}.blog-signoff a{font-size:16px;text-decoration:none}.site-footer{display:flex;align-items:center;gap:28px;border-top:1px solid var(--line);padding:30px 0;color:var(--mut)}.site-footer nav{margin-left:auto}.site-footer .brand{color:var(--ink)}
/* Article: a quiet reading column, full-width figures, and persistent contents. */
.article-heading{max-width:880px;margin:0 auto;padding:42px 0 48px}.back{display:inline-block;text-decoration:none;color:var(--mut);margin-bottom:42px;min-height:24px}.article-heading h1{font-size:clamp(38px,4.5vw,64px);line-height:1.12;letter-spacing:-.035em;margin:0 0 18px}.article-subtitle{font-size:clamp(20px,2vw,26px);line-height:1.4;color:var(--mut);letter-spacing:-.015em}.article-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0;padding:24px 0;border-bottom:1px solid var(--line);color:var(--mut)}.article-meta .status{background:#eaf0df;border:0;padding:5px 10px}.eyebrow i{display:block;width:4px;height:4px;background:var(--accent);border-radius:50%}.lead-figure{margin:0;padding:0}.lead-figure .figlabel{margin-bottom:20px}.figure-link{display:block}.figure-link img{display:block;width:100%}figcaption{font-size:14px;line-height:1.6;color:var(--mut);max-width:900px;margin-top:18px}.figlabel{color:var(--mut)}.layout{max-width:880px;margin:0 auto;padding-top:52px}.layout aside{position:sticky;top:32px;font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.7;color:var(--mut)}aside a{display:block;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}aside a:hover{color:var(--ink)}article{min-width:0;font-size:19px;line-height:1.75}article section{margin-bottom:55px;scroll-margin-top:32px}article h2{font-size:32px;line-height:1.22;letter-spacing:-.025em;margin:12px 0 25px;max-width:730px}article p{max-width:730px;margin-bottom:22px}.secnum{color:var(--mut)}article figure{margin:36px 0 0;border-block:1px solid var(--line);padding:24px 0}article figure h3{font-size:24px;line-height:1.3;letter-spacing:-.02em;margin:12px 0 22px}article .refs{border-top:1px solid var(--line);padding:20px 0 52px}.refs p{font-size:14px;margin:8px 0}.refs h2{font-size:26px}
@media(min-width:1600px){.shell{padding-inline:72px}}
@media(max-width:900px){.feature-copy{padding:28px}.feature-art{padding:20px}.art-label span{display:none}}
@media(max-width:720px){.shell{padding:0 24px}.site-header{height:68px}.site-header nav{gap:18px}.site-header .cta{padding:0 10px;font-size:9px}.blog-heading{padding:28px 0}.blog-heading h1{font-size:30px}.blog-heading p{font-size:15px}.desktop-break{display:none}.feature{grid-template-columns:minmax(0,1fr)}.feature-art{padding:24px}.feature-art img{margin:0}.feature-copy{padding:28px;border-left:0;border-top:1px solid var(--line)}.feature-copy h2{margin-top:0;font-size:clamp(30px,8vw,38px)}.feature-copy h2 br{display:none}.feature-copy p{max-width:32ch;font-size:18px}.read-link{padding-top:32px}.blog-signoff{padding:32px 0 48px;align-items:flex-start;flex-direction:column;gap:12px}.site-footer{flex-wrap:wrap;gap:20px;justify-content:space-between}.site-footer nav{width:100%;margin:0;justify-content:space-between;gap:15px}.layout{display:block;padding-top:30px}.layout aside{position:static;margin-bottom:38px}.layout aside a{padding:10px 0}.article-heading{padding-top:28px}.back{margin-bottom:26px}.article-heading h1{font-size:38px}.article-heading .eyebrow{gap:12px}article{font-size:18px;line-height:1.7}article h2{font-size:28px}article section{margin-bottom:42px}figcaption{font-size:13px}.lead-figure{margin-top:0}.figure-link{overflow:auto}.figure-link img{min-width:0}.site-footer .mono{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Space the article card from the footer without a signoff row. */
.writing{margin-bottom:48px}

.lead-figure>img{display:block;width:100%;height:auto}

/* Keep prose aligned with the article title after removing the contents rail. */
article p,article h2{max-width:none}

.article-date{color:var(--mut);margin:20px 0 0}

/* Display the complete artwork without a surrounding white panel. */
.traces-hero{background:transparent;padding:0;max-width:880px;margin:0 auto}
.traces-hero>img{display:block;width:100%;height:auto}
.feature-art.traces-art{background:transparent;padding:0;justify-content:center}
.feature-art.traces-art img{display:block;width:100%;height:auto}

/* Keep the office and playback controls visible without iframe scrolling. */
.live-visualization{margin:32px 0;border:1px solid var(--line);background:#fff}
.visualization-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid var(--line)}
.visualization-header h3{font-size:20px;line-height:1.3}
.visualization-header a{font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.5;color:var(--mut);white-space:nowrap}
.live-visualization iframe{display:block;width:100%;height:640px;border:0;overflow:hidden;background:#fff}
@media(max-width:720px){.visualization-header{padding:16px;flex-wrap:wrap;gap:12px}.live-visualization iframe{height:520px}}

/* Hide captions baked into the bottom of the supplied diagrams. */
.figure-link.assay-diagram{aspect-ratio:2270/630;overflow:hidden}
.figure-link.generation-diagram{aspect-ratio:2274/800;overflow:hidden}

/* Match the main site's navigation and reuse its access-request form. */
:root{--fg:var(--ink);--fg-dim:var(--mut);--fg-faint:#65725c;--hairline:#34492c30;--header-h:60px}

  .site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    border-bottom: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    color: var(--fg);
    text-decoration: none;
    user-select: none;
  }
  .site-header .brand svg {
    height: 17px;
    width: auto;
    display: block;
    color: var(--fg);
  }
  .site-header nav {
    display: flex;
    align-items: center;
    gap: 26px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .site-header nav a {
    color: var(--fg-dim);
    text-decoration: none;
    transition: color .2s;
  }
  .site-header nav a:hover { color: var(--accent); }
  .site-header nav .cta {
    color: var(--fg);
    padding: 8px 14px;
    border: 1px solid var(--hairline);
    transition: border-color .2s, color .2s;
  }
  .site-header nav .cta:hover { border-color: var(--accent); color: var(--accent); }
  .site-header nav .cta::after { content: ' →'; opacity: 0.6; }


.site-header{margin:0 5vw;background:#fafbf7;border-bottom-color:#34492c24;backdrop-filter:blur(18px);gap:0}
.site-header nav a{display:inline;min-height:0;line-height:normal}
.site-header nav .cta{color:#31462d;border-color:#34492c50;background:transparent;gap:0}
.site-header [aria-current]{text-decoration:none}
@media(max-width:720px){.site-header{margin:0 4vw;padding:16px 18px;height:60px}.site-header .brand{font-size:20px}.site-header nav{gap:26px}.site-header nav .cta{padding:7px 11px;font-size:9.5px}}
  .access-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(28,27,22,0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .access-overlay[hidden] { display: none; }
  .access-panel {
    position: relative;
    width: min(440px, 100%);
    background: var(--bg);
    border: 1px solid var(--hairline);
    padding: 36px 32px 32px;
  }
  .access-panel h3 {
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 20px;
  }
  .access-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: var(--fg-dim);
    transition: color .2s;
  }
  .access-close:hover { color: var(--fg); }
  .access-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .access-form input[type="email"],
  .access-form textarea {
    font-family: 'Funnel Display', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--fg);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    border: 1px solid var(--hairline);
    padding: 12px 14px;
    outline: none;
    resize: vertical;
    transition: border-color .2s;
  }
  .access-form input[type="email"]:focus,
  .access-form textarea:focus { border-color: var(--accent); }
  .access-form ::placeholder { color: var(--fg-faint); }
  .access-form .seg-row { display: flex; }
  .access-form .seg {
    flex: 1;
    cursor: pointer;
    user-select: none;
  }
  .access-form .seg input { position: absolute; opacity: 0; pointer-events: none; }
  .access-form .seg span {
    display: block;
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
    border: 1px solid var(--hairline);
    padding: 11px 8px;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    transition: color .2s, border-color .2s, background .2s;
  }
  .access-form .seg + .seg span { border-left: 0; }
  .access-form .seg input:checked + span {
    color: var(--fg);
    border-color: var(--fg);
    background: var(--bg);
  }
  .access-form .seg input:checked + span { border-left: 1px solid var(--fg); }
  .access-form button {
    align-self: stretch;
    cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--fg);
    border: 1px solid var(--fg);
    padding: 12px 20px;
    transition: background .2s, border-color .2s;
  }
  .access-form button:hover { background: var(--accent); border-color: var(--accent); }
  .access-done {
    display: none;
    font-size: 16px;
    font-weight: 300;
    color: var(--fg);
  }
  .access-form .hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .access-error {
    display: none;
    font-size: 13.5px;
    font-weight: 300;
    color: #a03d2e;
  }
  .access-error a { color: inherit; }
  .access-note {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-faint);
  }

/* Open article images in the page, including each handoff screenshot. */
.image-trigger{display:block;width:100%;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:zoom-in}
.image-trigger img{display:block;width:100%;height:auto}
.image-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.handoff-images{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:30px 0}
.image-viewer{width:calc(100vw - 48px);max-width:1400px;height:min(78dvh,clamp(360px,42vw,600px));max-height:none;padding:12px 16px 16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);overflow:hidden}
.image-viewer::backdrop{background:rgb(14 24 16 / .82);backdrop-filter:blur(5px)}
.image-viewer-bar{height:48px;display:flex;align-items:center;justify-content:space-between;font:12px 'JetBrains Mono',monospace;color:var(--mut)}
.image-viewer button{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:36px/1 'Funnel Display',sans-serif;cursor:pointer}
.image-viewer button:hover{background:#eaf0df}.image-viewer button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.image-viewer .viewer-close{border:0;font-size:30px}
.image-viewer-stage{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:16px;height:calc(100% - 56px);min-height:0;margin-top:8px}
#imageViewerImage{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
@media(max-width:600px){.handoff-images{grid-template-columns:minmax(0,1fr);gap:12px}.image-viewer{width:calc(100vw - 24px);height:min(82dvh,clamp(300px,85vw,420px));max-width:none;margin:auto;padding:10px 12px 14px}.image-viewer-stage{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 48px;gap:14px}#imageViewerImage{grid-column:1/-1;grid-row:1}.viewer-prev{grid-column:1;grid-row:2;justify-self:end}.viewer-next{grid-column:2;grid-row:2;justify-self:start}}

/* Keep the shared navigation inside narrow phone viewports. */
@media(max-width:480px){.site-header{margin-inline:24px;padding-inline:0;gap:12px}.site-header .brand{flex-shrink:0;gap:8px}.site-header nav{gap:14px;letter-spacing:.08em;white-space:nowrap}.site-header nav .cta{padding-inline:8px}.feature-copy{padding:24px}}

/* Article archive and the continuous-memory essay. */
.feature-copy .archive-date{font:10px/1.7 'JetBrains Mono',monospace;letter-spacing:.04em;max-width:none;margin-bottom:20px}
.archive-post{display:grid;grid-template-columns:180px minmax(0,1fr) 24px;gap:28px;align-items:center;margin-top:28px;padding:28px 0;border-block:1px solid var(--line);text-decoration:none}
.archive-post>img{display:block;width:180px;height:112px;object-fit:cover;border:1px solid var(--line)}
.archive-post .archive-date{margin:0 0 10px;font-size:9px;color:var(--mut)}
.archive-post h2{font-size:clamp(22px,2.1vw,30px);line-height:1.2;letter-spacing:-.02em;margin:0 0 10px}
.archive-post p:not(.archive-date){font-size:16px;line-height:1.5;color:var(--mut);max-width:65ch}
.archive-post:hover h2{text-decoration:underline;text-underline-offset:5px}
.archive-arrow{font-size:24px;color:var(--accent)}
.article-heading .back{margin-bottom:24px}
.article-source{margin-top:14px;font-size:13px;line-height:1.6;color:var(--mut)}
.dataset-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:32px 0;padding:24px 0;border-block:1px solid var(--line)}
.dataset-stats dt{font:10px/1.5 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.dataset-stats dd{margin:8px 0 0;font-size:clamp(24px,3vw,36px);line-height:1.2;letter-spacing:-.025em}
.article-list{padding-left:24px;margin:0 0 24px}.article-list li{padding-left:4px;margin:10px 0}
.results-table-wrap{max-width:100%;overflow-x:auto;margin:30px 0;overscroll-behavior-x:contain}
.results-table{border-collapse:collapse;min-width:540px;width:100%;font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums;text-align:left}
.results-table caption{text-align:left;font:10px/1.7 'JetBrains Mono',monospace;color:var(--mut);padding-bottom:14px}
.results-table th,.results-table td{padding:15px 12px;border-bottom:1px solid var(--line)}
.results-table thead th{font-size:12px;font-weight:400;color:var(--mut);background:#edf1e6}
.results-table tbody th{font-weight:500}.results-table td:last-child{font-weight:500;color:var(--accent)}
.results-table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.results-original{margin:0 0 28px;color:var(--mut);font-size:14px}.results-original summary{cursor:pointer;padding:10px 0;text-underline-offset:4px}.results-original summary:hover{text-decoration:underline}.results-original img{display:block;margin-top:14px;width:100%;height:auto}
@media(max-width:720px){.archive-post{grid-template-columns:100px minmax(0,1fr);gap:16px;padding:22px 0}.archive-post>img{width:100px;height:100px}.archive-post h2{font-size:21px}.archive-post p:not(.archive-date){font-size:14px}.archive-arrow{display:none}.dataset-stats{gap:12px}.dataset-stats dd{font-size:23px}.dataset-stats dt{font-size:9px}.article-date{font-size:9px}}
@media(max-width:380px){.site-header nav{gap:10px}.site-header nav .cta{font-size:8px;letter-spacing:.03em}.archive-post{grid-template-columns:1fr}.archive-post>img{width:100%;height:auto;aspect-ratio:2.5/1}.dataset-stats{grid-template-columns:1fr;gap:18px}.dataset-stats div{display:flex;justify-content:space-between;align-items:center}.dataset-stats dd{margin:0}}

/* Fit photos and native diagrams to the same fixed gallery stage. */
.viewer-image-area{min-width:0;min-height:0;height:100%;overflow:hidden}
.viewer-image-area:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.viewer-image-area>[hidden]{display:none!important}
.viewer-native{width:100%;height:100%;min-height:0}
.viewer-native>.native-chart{display:block;width:100%;height:100%;min-width:0;max-width:none}
.image-viewer-bar{gap:12px}
.image-viewer.single-image .viewer-prev,.image-viewer.single-image .viewer-next{display:none}
.image-viewer.single-image .image-viewer-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.visualization-mobile{display:none}

@media(max-width:720px){
  .shell{padding-inline:20px}
  .site-header{height:68px;margin-inline:20px;padding:8px 0;gap:12px}
  .site-header .brand{min-height:44px;font-size:19px;gap:7px}
  .site-header nav{gap:10px;letter-spacing:.04em}
  .site-header nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:10px}
  .site-header nav .cta{padding:8px 10px;font-size:9.5px;letter-spacing:.03em;white-space:nowrap}
  .site-header nav .cta::after{content:none}
  .article-heading{padding:28px 0 32px}
  .article-heading h1{font-size:clamp(32px,9.5vw,40px);line-height:1.12;overflow-wrap:break-word}
  .article-subtitle{font-size:20px;line-height:1.45}
  .article-date{font-size:11px;line-height:1.7}
  .article-heading .back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:14px;font-size:11px}
  .layout{padding-top:28px}
  article{font-size:18px;line-height:1.7;overflow-wrap:break-word}
  article h2{font-size:clamp(25px,7vw,29px);line-height:1.25;margin-bottom:20px}
  article figure{margin-top:24px;padding-block:16px}
  .site-footer nav{flex-wrap:wrap;gap:8px 16px}
  .site-footer nav a{min-height:44px}
  .live-visualization iframe{display:block}
  .visualization-header a{display:inline-flex;align-items:center;min-height:44px}
  .visualization-mobile{display:none}
  .visualization-mobile img{display:block;width:100%;height:auto}
  .visualization-mobile>span{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:14px 16px;font-size:15px;color:var(--ink);border-top:1px solid var(--line)}
  .access-overlay{padding:16px}
  .access-panel{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:34px 22px 24px}
  .access-close{top:4px;right:4px;width:44px;height:44px;display:grid;place-items:center}
  .access-form input[type="email"],.access-form textarea{font-size:16px;min-width:0;width:100%}
  .access-form .seg span{display:flex;align-items:center;justify-content:center;min-height:48px;height:100%;font-size:9px;line-height:1.5;letter-spacing:.04em}
  .access-form button{min-height:48px}
  .access-note{font-size:10px;line-height:1.6;letter-spacing:.03em}
  .results-table{display:block;min-width:0;width:100%;font-size:17px}
  .results-table caption{display:block;padding-bottom:16px;font-size:11px;letter-spacing:.02em}
  .results-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .results-table tbody{display:grid;gap:16px}
  .results-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);overflow:hidden}
  .results-table tbody th{grid-column:1/-1;padding:12px 16px;background:#edf1e6;font-size:18px}
  .results-table td{display:flex;flex-direction:column;gap:5px;padding:12px 16px;border-bottom:0}
  .results-table td::before{content:attr(data-label);font-size:12px;font-weight:400;color:var(--mut)}
  .results-original summary{padding-block:14px;min-height:48px}
}
@media(max-width:600px){
  .viewer-image-area{grid-column:1/-1;grid-row:1}
}
@media(max-width:350px){
  .shell{padding-inline:18px}
  .site-header{margin-inline:18px;gap:8px}
  .site-header .brand{font-size:18px;gap:6px}
  .site-header .brand svg{height:14px}
  .site-header nav{gap:6px}
  .site-header nav .cta{padding-inline:8px;font-size:9px}
}

/* Diagrams are document content: selectable text and native vector geometry. */
.native-chart{display:block;width:100%;height:auto;max-width:none;fill:var(--ink)}
.native-chart text{font-family:'Funnel Display',system-ui,sans-serif}
.native-chart .m{fill:var(--mut)}
.native-figure .diagram-actions{display:flex;justify-content:flex-end;margin-bottom:8px}
.diagram-expand{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 0 8px 12px;border:0;background:transparent;color:var(--mut);font:11px/1.5 'JetBrains Mono',monospace;cursor:pointer}
.diagram-expand:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.diagram-expand:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.diagram-scroll{max-width:100%;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#a9b68e transparent}
.diagram-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.visualization-mobile .visualization-mobile-description{margin:0;padding:18px 16px;font-size:16px;line-height:1.6;color:var(--mut)}
@media(max-width:720px){.diagram-scroll>.native-chart{min-width:0}.native-figure .diagram-actions{margin-bottom:4px}}
.image-viewer .viewer-close{margin-left:auto}

.image-viewer .viewer-prev svg,.image-viewer .viewer-next svg{display:block;width:20px;height:20px}

/* Fit diagrams in the article; let readers inspect full-size labels in the gallery. */
@media(max-width:720px){
  .image-viewer{height:88dvh}
  .image-viewer .viewer-image-area{overflow:auto;overscroll-behavior:contain}
  .image-viewer .viewer-native{width:max(100%,900px);height:auto}
  .image-viewer .viewer-native>.native-chart{width:100%;height:auto}
}

/* Diagrams themselves open the gallery; preserve readable labels on phones. */
.diagram-trigger{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:inherit;cursor:zoom-in}
.diagram-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:720px){
  .diagram-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .diagram-trigger{width:100%;min-width:0}
  .image-viewer .viewer-native{width:100%;height:100%}
}

@media(max-width:720px){
  .native-chart text{font-size:var(--mobile-text-size)}
  .image-viewer .viewer-native>.native-chart{width:100%;height:100%}
}