/* Layout v2, the diffusion foundation's own parts (the default; ?layout=v1 shows the earlier layout). The shared layout is
   layout-v2.css with kit/layout-v2.mjs and the quiet pass; the adapter is diffusion-v2.mjs. The film stays the large
   picture; its linked 2D view (the film's profile, then the radius cross section) takes the figure's place. */
html.layout-v2 main,html.layout-v2 footer{max-width:1340px;margin-inline:auto;padding-inline:16px;box-sizing:border-box}
html.layout-v2 main{overflow-x:clip}
html.layout-v2 .film{padding:0}
/* Cover: the label, the title and the question, then the three paragraphs in three columns, words unchanged */
html.layout-v2 .module-head{padding:calc(var(--v2-mast) + 32px) 0 0}
html.layout-v2 .module-head .module-eyebrow{font:500 14px/20px var(--v2-text);letter-spacing:0;text-transform:lowercase;color:var(--v2-muted)}
html.layout-v2 .module-head .module-eyebrow::first-letter{text-transform:uppercase}
html.layout-v2 .module-head h1{margin:14px 0 0;font:500 46px/52px var(--v2-display);letter-spacing:-.022em}
html.layout-v2 .module-head .fig-question{margin:14px 0 0;max-width:44ch;font:400 21px/31px var(--v2-display);letter-spacing:-.006em;color:var(--v2-ink2)}
html.layout-v2 .fig-intro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin:22px 0 0;padding:20px 0 0;border:0;border-top:1px solid var(--v2-line)}
html.layout-v2 .fig-intro>div{margin:0;padding:0;border:0}
html.layout-v2 .fig-intro h2{margin:0 0 6px;font:500 15px/22px var(--v2-text);letter-spacing:0;text-transform:none;color:var(--v2-ink)}
html.layout-v2 .fig-intro p{margin:0;font:400 14.5px/23px var(--v2-text);color:var(--v2-ink2)}
/* The workspace: the linked view beside the film; the section labels, the film's caption column and the explorer's own
   section give way to the steps */
html.layout-v2 .film-label,html.layout-v2 .film-copy,html.layout-v2 #explore{display:none}
html.layout-v2 #explorer.figure-pair{margin-top:24px;gap:0 46px;align-items:start}
@media(min-width:861px){html.layout-v2 #explorer.figure-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
html.layout-v2 .v2-paper{margin:0}
html.layout-v2 .figure-pair .pair-title{margin:0}
/* The linked view: two views stacked in one place, crossfading; the column glides to the new one's height */
.v2-dfigs{display:grid;overflow:hidden;transition:height .42s cubic-bezier(.4,0,.2,1)}
.v2-dfig{grid-area:1/1;align-self:start;min-width:0;opacity:0;transition:opacity .42s ease-in-out}
.v2-dfig.on{opacity:1}
@media(prefers-reduced-motion:reduce){.v2-dfigs,.v2-dfig{transition:none}}
html.layout-v2 .v2-dview .film-profile{margin:0}
html.layout-v2 .v2-dview .film-profile figcaption{display:none}
html.layout-v2 .v2-dview .film-profile .axis{font-size:7px}
html.layout-v2 .v2-dview .film-readout{margin-top:14px;gap:16px}
html.layout-v2 .v2-dview .readout-key{font:400 13px/18px var(--v2-text);letter-spacing:0;text-transform:none;color:var(--v2-muted)}
html.layout-v2 .v2-dview .film-readout output{font:500 20px/26px var(--v2-display);letter-spacing:-.01em;color:var(--v2-ink)}
/* the cross section fits the folded figure's room (kit/layout-v2.mjs fold), so its key is never scaled down with it */
html.layout-v2 .v2-dview .particle-stage svg{display:block;width:100%;height:max(170px,min(calc((100svh - 56px) * .3 - 50px),380px))}
html.layout-v2 .v2-dview .concentration-key{margin:10px 0 0;font:400 13px/18px var(--v2-text);color:var(--v2-muted)}
html.layout-v2 .v2-dview .panel-note:before{display:none}
/* The stage: the film, square and centred in the taller stage */
html.layout-v2 #explorer .film-stage{aspect-ratio:auto;width:100%;max-width:none;height:var(--v2-stage);border-radius:16px;overflow:hidden;background:#0d0f17}
html.layout-v2 #explorer .film-stage video{background:transparent}
/* The size comparison's result in its step; "More on this step" holds the film's clock and controls, or the profile */
html.layout-v2 .v2-rx{margin:14px 0 4px}
html.layout-v2 .v2-rx .result-line{margin:0;padding:12px 0;border-color:var(--v2-line)}
html.layout-v2 .v2-rx .result-line>output{font:500 34px/1 var(--v2-display);min-width:0;color:var(--v2-ink)}
html.layout-v2 .v2-rx .result-line>output span{font-size:20px;color:var(--v2-muted)}
html.layout-v2 .v2-rx .result-line p{font:400 14px/20px var(--v2-text);color:var(--v2-ink2)}
html.layout-v2 .v2-rx .result-line small{font-size:13px;color:var(--v2-muted)}
html.layout-v2 .v2-pane .film-controls{margin-top:12px}
html.layout-v2 .v2-pane #film-time-note{font:400 14px/21px var(--v2-text);color:var(--v2-muted)}
html.layout-v2 .v2-pane .profile-header{display:flex;justify-content:space-between;margin-top:6px;font:400 13px/18px var(--v2-text);color:var(--v2-muted)}
html.layout-v2 .v2-pane .profile-plot{display:block;width:100%;height:auto;margin-top:6px}
html.layout-v2 .v2-pane .fixed-inputs{margin-top:10px;font:400 13px/18px var(--v2-text);color:var(--v2-muted)}
html.layout-v2 .v2-pane #model-open{margin-top:12px}
html.layout-v2 .v2-step:not([data-sec=size]) .v2-pane :is(.profile-header,.profile-plot,.fixed-inputs,#model-open){display:none}
html.layout-v2 .v2-step[data-sec=size] .v2-pane :is(#film-time-note,.film-controls){display:none}
html.layout-v2 .v2-steps{padding-bottom:calc(var(--v2-read) * .6 + 48px)}
@media(max-width:900px){html.layout-v2 #explorer.figure-pair{display:grid}}
@media(max-width:860px){
 html.layout-v2 .module-head{padding-top:calc(var(--v2-mast) + 24px)}
 html.layout-v2 .module-head h1{font-size:32px;line-height:37px}
 html.layout-v2 .module-head .fig-question{font-size:18px;line-height:26px}
 html.layout-v2 .fig-intro{grid-template-columns:minmax(0,1fr);gap:22px}
 html.layout-v2 #explorer .film-stage{height:var(--v2-stage-m);border-radius:14px}
 html.layout-v2 .v2-dview .particle-stage svg{height:min(42svh,300px)}
 html.layout-v2 .v2-dock:empty{display:none}
}