/* A paper-like method figure. Shared rules deliberately cover every example. */
:is(.method-laboratory,.method-alt){
  --forward-accent:#95501e;--inverse-accent:#245f91;
  --forward-fill:transparent;--inverse-fill:transparent;--panel-border:#d7d6d0;
  background:#faf9f6!important;color:#243442;border:0;border-top:1px solid #d6d7d4;
  border-bottom:1px solid #d6d7d4;border-radius:0;padding:28px!important;box-shadow:none;
}
:is(.method-laboratory,.method-alt) :is(.lab-heading,.alt-heading){border-bottom:1px solid #d6d7d4;padding-bottom:22px;margin-bottom:28px;align-items:flex-start}
:is(.method-laboratory,.method-alt) :is(.lab-heading,.alt-heading) h3{font-family:Georgia,'Times New Roman',serif;font-size:32px;font-weight:400;letter-spacing:-.035em;color:#23333f;line-height:1.2}
.method-laboratory .lab-kicker{font-size:10px;font-weight:600;letter-spacing:.08em;color:#63717a}
.method-laboratory .lab-heading p{font-size:14px;line-height:1.7;color:#596874;max-width:620px}
:is(.method-laboratory,.method-alt) :is(.lab-workbench,.alt-diagram){grid-template-columns:.88fr 1.05fr 1.18fr;gap:28px;align-items:start}
:is(.method-laboratory,.method-alt) .answer-panel{border:0!important;border-top:2px solid var(--forward-accent)!important;border-radius:0;padding:16px 0 0!important;background:transparent!important;align-self:start}
:is(.method-laboratory,.method-alt) .answer-panel-inverse{border-top-color:var(--inverse-accent)!important}
:is(.method-laboratory,.method-alt) .arm-title{border:0;padding-bottom:0;margin-bottom:20px}
:is(.method-laboratory,.method-alt) .arm-title>span{font-size:20px;font-weight:650;letter-spacing:-.025em}
:is(.method-laboratory,.method-alt) .arm-title h4{font-size:13px;color:#596874;margin-top:6px!important;font-weight:400;line-height:1.5}
:is(.method-laboratory,.method-alt) :is(.arm-input-label,.arm-definition){font-size:10px;color:#687783;letter-spacing:.025em;margin-bottom:12px}
:is(.method-laboratory,.method-alt) .arm-definition code{color:#245f91;background:#eaf0f4}
.method-laboratory .lab-json,.method-alt .scene-field-list{background:#f0eee7;border:0;border-left:2px solid #d1b398;border-radius:0;color:#80502b;padding:12px}
.method-laboratory .lab-json :is(strong,b),.method-alt .scene-field-list code{color:#80502b}
.method-laboratory .lab-json .json-secondary{color:#837465}
.method-laboratory .lab-branch{color:#8b725e;font-size:11px;padding:14px 0}
.method-laboratory .lab-forward h4{color:#80502b;font-size:14px}
.method-laboratory .lab-forward code{color:#80502b;font-size:11px}
.method-laboratory .lab-forward p,.method-alt .alt-forward>p:not(.arm-input-label){color:#596874;font-size:13px;line-height:1.75}
:is(.method-laboratory,.method-alt) .renderer-panel{padding-top:17px;align-self:start}
:is(.method-laboratory,.method-alt) .render-title>span{font-size:18px;color:#243442;font-weight:600}
:is(.method-laboratory,.method-alt) .render-title h4{font-size:12px;color:#67757e}
:is(.method-laboratory,.method-alt) .renderer-description{font-size:12px;line-height:1.7;color:#67757e}
:is(.method-laboratory,.method-alt) .lab-connection{color:#687c89;font-size:10px}
:is(.method-laboratory,.method-alt) .lab-connection strong{color:#3b5364}
:is(.method-laboratory,.method-alt) .pixel-boundary{border-color:#a9bccb;color:#496d8b;margin-top:14px;padding-top:12px}
:is(.method-laboratory,.method-alt) .pixel-boundary p{color:#5e7180;font-size:11px}
:is(.method-laboratory,.method-alt) .pixel-boundary strong{color:#365f7d}
:is(.method-laboratory,.method-alt) :is(.lab-instruction,.inverse-intro){font-size:13px!important;color:#536776;line-height:1.7}
.method-laboratory .lab-instruction b{color:#2e5069}
.method-laboratory .bridge-zoom{border-color:#bdcbd7}
.method-laboratory .bridge-zoom span{color:#5d7384;background:#f0f4f7}
.method-laboratory #method-profile{background:#edf2f6}
.method-laboratory #method-profile text{fill:#587087}
.method-laboratory #method-profile-line{stroke:#336c9b}
.method-laboratory .measured-runs{background:#edf2f6;border-color:#b4c6d7}
.method-laboratory .measured-runs i{background:#336c9b}
.method-laboratory .row-agreement{color:#5e7384;font-size:11px}
.method-laboratory .row-agreement strong{color:#315f84}
:is(.method-laboratory,.method-alt) :is(.lab-output,.alt-answer){border-top:1px solid #d7d6d0;margin-top:22px!important;padding-top:14px;min-height:0}
:is(.method-laboratory,.method-alt) :is(.lab-output,.alt-answer)>span{font-size:10px;color:#64747e;text-transform:none;letter-spacing:0}
:is(.method-laboratory,.method-alt) :is(.lab-output,.alt-answer)>strong{font-size:32px;font-weight:600;line-height:1.1}
:is(.method-laboratory,.method-alt) .answer-panel-forward :is(.lab-output,.alt-answer)>strong{color:var(--forward-accent)}
:is(.method-laboratory,.method-alt) .answer-panel-inverse :is(.lab-output,.alt-answer)>strong{color:var(--inverse-accent)}
:is(.method-laboratory,.method-alt) a{color:#2f658d;text-decoration:underline;text-underline-offset:3px}
.method-alt :is(summary,.alt-forward>a,.alt-inverse>a){color:#456b89;font-size:12px}
.method-alt pre{background:#f0eee7;color:#4e5357;border:0;border-radius:0;padding:13px;line-height:1.7}
.method-alt .measurement-step{color:#2e5069;font-size:13px;margin-top:18px}
.measurement-step b{color:#4a7393}
.method-alt .measurement-caption{color:#617888;font-size:11px;line-height:1.7}
.method-alt .measurement-caption strong{color:#345d7b}
.ring-mask-pair svg{background:white;border:1px solid #dbe1e5;border-radius:0}
.ring-mask-pair figcaption,.ring-mask-pair strong{color:#5c7181}
.method-alt .measurement-table{color:#4b6477}
.measurement-table :is(td,th){border-color:#d7e1e8}
.measurement-table th{color:#3a5b73}
.measurement-table :is(caption,thead th){color:#617888}
.measurement-table tr.measurement-winner{background:#e3edf5}
.measurement-winner :is(td,th){color:#264e6c}
.band-measure-plot{background:#edf2f6;border-radius:0}
.band-measure-plot text{fill:#4e6b81}
.band-measure-plot>path:nth-of-type(odd){stroke:#3d739e;opacity:.38}
.band-measure-plot>path:nth-of-type(even){stroke:#3d739e}
.band-measure-plot circle{stroke:white;stroke-width:2}
.band-measure-plot circle[fill="#85d5ba"]{fill:#167652}
.band-measure-plot circle[fill="#ffc087"]{fill:#b96121}
.method-laboratory>figcaption a{color:#2f658d!important}
.method-alt .measurement-rule{background:#e7eef4;color:#2c5676;border-radius:0;font-size:11px}
.circle-measure-plot{border-radius:0;border:1px solid #dbe1e5}
.method-alt :is(.alt-image figcaption,.ring-detail>span){color:#667a89}
:is(.method-laboratory,.method-alt) .lab-comparison{margin-top:26px;border-top:1px solid #d5dcd9;padding-top:20px}
:is(.method-laboratory,.method-alt) .lab-comparison>svg{display:none}
:is(.method-laboratory,.method-alt) .lab-comparison>div{background:transparent;border:0;border-radius:0;padding:0;max-width:none}
:is(.method-laboratory,.method-alt) .lab-comparison h4{color:#29453f;font-size:17px}
:is(.method-laboratory,.method-alt) .verifier-label{color:#5d7c6d;font-size:10px;letter-spacing:.04em}
:is(.method-laboratory,.method-alt) .lab-comparison p{color:#65766e}
:is(.method-laboratory,.method-alt) .agreement-equation>span:first-child,:is(.method-laboratory,.method-alt) .agreement-equation>span:first-child strong{color:var(--forward-accent)}
:is(.method-laboratory,.method-alt) .agreement-equation>span:last-child,:is(.method-laboratory,.method-alt) .agreement-equation>span:last-child strong{color:var(--inverse-accent)}
:is(.method-laboratory,.method-alt) .agreement-explanation{font-size:12px;color:#65766e}
:is(.method-laboratory,.method-alt) :is(figcaption,.alt-note){font-size:11px;color:#73818a;line-height:1.7}
.method-alt .alt-question{border-color:#d7d6d0}.method-alt .alt-question p{color:#536776;font-size:13px}
/* The picker behaves like a compact figure index, not four feature cards. */
.teaser-picker-label{font-size:12px;font-weight:500;color:#687783;margin-bottom:10px}
.teaser-tabs{gap:0;border-bottom:1px solid #cfd8df}
.teaser-tabs button{background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;padding:12px 14px;gap:10px;min-height:74px}
.teaser-tabs button>img{width:48px;height:44px;border-radius:0;mix-blend-mode:multiply}
.teaser-tabs button>span{font-size:13px;font-weight:600}
.teaser-tabs button small{font-size:10px;font-weight:400;line-height:1.45}
.teaser-tabs button[aria-selected=true]{background:#f0f4f7;border:0;border-bottom:3px solid #396e94;color:#26475f}
.teaser-tabs button:hover{background:#f5f7f8}
.alt-instances,.method-laboratory .map-instances{background:transparent;border:1px solid #d2d9df;border-radius:4px;padding:3px;gap:3px}
.alt-instances button,.method-laboratory .map-instances button{color:#65798a;border-radius:2px;background:transparent;min-height:44px;padding:5px}
.alt-instances button[aria-pressed=true],.method-laboratory .map-instances button[aria-pressed=true]{background:#e2ebf2;color:#284d69;border-color:#9eb6c9}
.alt-instances button img,.method-laboratory .map-instances button img{width:31px;height:28px;border-radius:0;mix-blend-mode:multiply}
@media(max-width:1000px){
  :is(.method-laboratory,.method-alt) :is(.lab-workbench,.alt-diagram){display:grid;grid-template-columns:1fr;gap:26px}
  :is(.method-laboratory,.method-alt) .answer-panel,:is(.method-laboratory,.method-alt) .renderer-panel{grid-column:1}
  :is(.method-laboratory,.method-alt) .renderer-panel{grid-row:2;width:100%;max-width:540px;margin:auto;padding-top:0}
  :is(.method-laboratory,.method-alt) .answer-panel-inverse{grid-row:3}
  .method-laboratory .lab-source{max-width:none}
  :is(.method-laboratory,.method-alt) .lab-comparison>div{display:block}
  :is(.method-laboratory,.method-alt) .agreement-equation{margin-top:16px}
  .method-alt .alt-heading{flex-wrap:wrap}
}
@media(max-width:600px){
  :is(.method-laboratory,.method-alt){padding:22px 16px!important;margin-left:-4px;margin-right:-4px}
  :is(.method-laboratory,.method-alt) :is(.lab-heading,.alt-heading) h3{font-size:27px}
  :is(.method-laboratory,.method-alt) .answer-panel{padding:15px 0 0!important}
  :is(.method-laboratory,.method-alt) .arm-title>span{font-size:22px}
  :is(.method-laboratory,.method-alt) .renderer-description{font-size:13px}
  :is(.method-laboratory,.method-alt) .pixel-boundary p{font-size:12px}
  .method-alt .measurement-caption{font-size:12px}
  .teaser-tabs{grid-template-columns:1fr 1fr}
  .teaser-tabs button{padding:10px 8px;min-height:78px}
  .teaser-tabs button>img{width:35px;height:40px}
  .teaser-tabs button>span{font-size:12px}
  .method-alt .alt-heading h3{max-width:100%}
  .method-laboratory .guitar-viewport{max-width:340px}
}

@media(max-width:600px){
  :is(.method-laboratory,.method-alt) :is(.lab-instruction,.inverse-intro),
  .method-laboratory .lab-forward p,.method-alt .alt-forward>p:not(.arm-input-label){font-size:14px!important;line-height:1.75}
  :is(.method-laboratory,.method-alt) :is(figcaption,.alt-note){font-size:12px;color:#5d6d78}
  :is(.method-laboratory,.method-alt) .agreement-explanation{font-size:13px}
}

@media(max-width:1000px){.method-laboratory .lab-wire-layer{display:none}}
/* Preserve the comparison on phones: three simultaneous inputs/outputs. */
@media(max-width:1000px){
 :is(.method-laboratory,.method-alt) :is(.lab-workbench,.alt-diagram){grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.1fr);gap:12px;align-items:start}
 :is(.method-laboratory,.method-alt) .answer-panel-forward{grid-column:1;grid-row:1}
 :is(.method-laboratory,.method-alt) .renderer-panel{grid-column:2;grid-row:1;padding-top:17px}
 :is(.method-laboratory,.method-alt) .answer-panel-inverse{grid-column:3;grid-row:1}
}
@media(max-width:600px){
 :is(.method-laboratory,.method-alt){padding:20px 10px!important}
 :is(.method-laboratory,.method-alt) :is(.lab-workbench,.alt-diagram){gap:8px}
 :is(.method-laboratory,.method-alt) .arm-title>span{font-size:14px;letter-spacing:-.025em;line-height:1.25}
 :is(.method-laboratory,.method-alt) .arm-title h4{font-size:10px;margin-top:6px!important;line-height:1.4}
 :is(.method-laboratory,.method-alt) .arm-title{margin-bottom:12px;min-height:58px}
 :is(.method-laboratory,.method-alt) :is(.arm-input-label,.arm-definition,.renderer-description,.render-title h4,.lab-connection,.pixel-boundary,.lab-branch){display:none}
 :is(.method-laboratory,.method-alt) .renderer-panel{padding-top:17px}
 :is(.method-laboratory,.method-alt) .render-title{margin-bottom:12px;min-height:58px}
 :is(.method-laboratory,.method-alt) .render-title>span{font-size:14px;line-height:1.25;display:block}
 .method-laboratory .lab-json{padding:9px 6px}
 .method-laboratory .lab-json p:not(:first-child){display:none}
 .method-laboratory .lab-json p:first-child{display:flex;flex-direction:column;gap:7px;align-items:start}
 .method-laboratory .lab-json p:first-child span{font-size:9px;letter-spacing:-.04em}
 .method-laboratory .lab-json p:first-child strong{font-size:25px}
 .method-laboratory .lab-forward>code,.method-laboratory .lab-forward>p{display:none}
 .method-laboratory .lab-forward h4{font-size:11px;line-height:1.5;margin-top:12px}
 .method-laboratory .lab-instruction{font-size:10px!important;line-height:1.4;margin:10px 0 6px}
 .method-laboratory .bridge-zoom span,.method-laboratory .row-agreement,#method-profile text{display:none}
 .method-laboratory .bridge-zoom{margin:0}
 .method-laboratory .measured-runs{height:8px}
 :is(.method-laboratory,.method-alt) :is(.lab-output,.alt-answer){display:flex;flex-direction:column;align-items:start;gap:8px;margin-top:14px!important;padding-top:10px}
 :is(.method-laboratory,.method-alt) :is(.lab-output,.alt-answer)>span{font-size:10px;line-height:1.4}
 :is(.method-laboratory,.method-alt) :is(.lab-output,.alt-answer)>strong{font-size:26px;overflow-wrap:anywhere}
 .method-alt .scene-field-list{padding:6px;gap:4px}
 .method-alt .scene-field-list code{font-size:9px;overflow-wrap:anywhere}
 .method-alt .alt-forward>p:not(.arm-input-label){font-size:10px!important;line-height:1.5}
 .method-alt :is(.inverse-intro,.measurement-caption,.measurement-details,.measurement-table,.alt-forward>details,.alt-forward>a,.alt-inverse>a,.ring-detail>span,.alt-image figcaption){display:none}
 .method-alt .measurement-step{font-size:10px;line-height:1.4;gap:3px;margin:9px 0}
 .method-alt .measurement-rule{font-size:8px;padding:5px;overflow-wrap:anywhere}
 .method-alt .ring-mask-pair{gap:3px}
 .method-alt .ring-mask-pair figcaption{font-size:8px}
 .method-alt .ring-detail{margin-top:12px}
 .method-alt .alt-image img{min-height:70px}
}
@media(max-width:1000px){
 :is(.method-laboratory,.method-alt) .renderer-panel{margin:0;border-top:2px solid #869998;align-self:start}
}
