/* Layout v2, the nanoparticle'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 nanoparticle-v2.mjs. As on fast ion, anion and
   the interwoven battery, the figure leaves the stage for a column of its own (figure-pair.css). */
html.layout-v2 main,html.layout-v2 footer{max-width:1340px;margin-inline:auto;padding-inline:16px;box-sizing:border-box}
/* The first visit's title arrives large (module-opening.js scales the cover); the page never scrolls sideways */
html.layout-v2 main{overflow-x:clip}
html.layout-v2 #explorer{max-width:none;margin-inline:0;padding:0;scroll-margin-top:var(--v2-mast)}
/* Cover: the title and the question, then the three paragraphs about the paper in three columns, words unchanged */
html.layout-v2 .heading{max-width:none;margin:0;padding:calc(var(--v2-mast) + 32px) 0 0}
html.layout-v2 .heading .v2-eyebrow{margin:0;font:500 14px/20px var(--v2-text);color:var(--v2-muted)}
html.layout-v2 .heading h1{margin:14px 0 0;max-width:none;font:500 46px/52px var(--v2-display);letter-spacing:-.022em}
html.layout-v2 .heading .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 figure column beside the stage; the view tabs give way to the chapters, the paper button to the column */
@media(min-width:861px){html.layout-v2 #explorer.figure-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
html.layout-v2 #explorer .explorer-toolbar,html.layout-v2 .scene-footer{display:none}
html.layout-v2 .v2-paper{margin:0}
html.layout-v2 .figure-pair .paper-head{gap:12px}
html.layout-v2 .v2-figpick button{min-height:32px;padding:0 12px;font-size:13px}
html.layout-v2 .v2-figtools{display:flex;gap:2px;flex:none}
html.layout-v2 .v2-figtools button{min-width:34px;min-height:34px;font-size:17px;color:#cddbf7;border-radius:5px}
html.layout-v2 .v2-figtools button[data-z=fit]{font-size:13px}
html.layout-v2 .v2-figtools button:hover:not(:disabled){background:#ffffff0d}
.v2-pview{position:relative;max-width:100%}
.v2-pviewport{position:relative;overflow:hidden;border-radius:3px;max-width:100%}
.v2-pviewport.zoomed{overflow:auto;overscroll-behavior:contain;cursor:grab;scrollbar-color:#64789e #141b29}
.v2-pviewport.panning{cursor:grabbing}
.v2-psheet{position:relative;width:max-content;overflow:hidden;border-radius:3px}
.v2-psheet img{display:block;height:auto;background:#fff;user-select:none;-webkit-user-drag:none}
/* The stage holds the model; its own copy of panels a and c gives way to the column, and it waits empty before the lift */
html.layout-v2 #paper{display:none}
/* The model is drawn shifted into the part of the stage that shows (kit shift); the stage clips it to its own frame */
html.layout-v2 #scene-stage{overflow:hidden}
html.layout-v2 #explorer>.shape-traces{position:absolute;inset:0;width:100%;height:100%;z-index:12;overflow:visible}
.v2-wait{display:none}
html.layout-v2 .v2-wait:not([hidden]){display:grid;position:absolute;inset:0;z-index:2;place-items:center;margin:0;padding:0 40px;text-align:center;font:400 14px/21px var(--v2-text);color:var(--v2-muted);pointer-events:none}
/* Stage chrome: the hint at the top left until the first touch, Reset at the bottom right, the crystal's name at the bottom left */
html.layout-v2 #scene-stage #scene-help{position:absolute;left:18px;top:14px;z-index:3;margin:0;font:400 13px/18px var(--v2-text);color:var(--v2-muted)}
html.layout-v2 #scene-stage .camera-controls{position:absolute;left:auto;right:12px;bottom:12px;z-index:4;width:auto;margin:0;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* One line of hint: the touch advice is the hint's second sentence, and the hint leaves at the first touch anyway */
html.layout-v2 #scene-help .touch-help{display:none}
html.layout-v2 #scene-stage .camera-controls button:not(.reset){display:none}
html.layout-v2 #scene-stage .scene-badge{top:auto;bottom:14px;left:14px}
/* Steps: while the tour plays, the first step carries its words and the controls step back */
html.np-opening .v2-step[data-sec=square] .v2-ctl,html.np-opening .v2-dock .v2-ctl{opacity:.55;transition:opacity .22s ease}
/* "More on this step" holds the view's other controls and readouts; the step's own control is not repeated there */
.v2-pane .control-block:first-child{margin-top:0}
.v2-pane #face-controls{display:none!important}
.v2-pane #neighbor-controls>.control-label,.v2-pane #neighbor-controls .site-shortcuts{display:none}
.v2-step[data-sec=inside] .v2-pane #cutaway{display:none}
.v2-step[data-sec=size] .v2-pane :is(.range-heading,#shells,.range-ends){display:none}
.v2-pane #binding-controls>.control-label,.v2-pane #binding-choices{display:none}
.v2-step[data-sec=hollows] .v2-pane #stacking{display:none!important}
/* The figure's caption and links, with the sources below the workspace */
html.layout-v2 .v2-credit .v2-figcredit{margin:0 0 22px;padding-top:28px}
html.layout-v2 .v2-credit .v2-figcredit .eyebrow{margin-bottom:8px}
html.layout-v2 .v2-credit .v2-figcredit a{color:var(--v2-accent)}
/* A short figure leaves the last step reading from high on the screen: the steps run on far enough to keep the stage pinned */
html.layout-v2 .v2-steps{padding-bottom:calc(var(--v2-read) * .6 + 48px)}
@media(max-width:860px){
 html.layout-v2 .heading{padding-top:calc(var(--v2-mast) + 24px)}
 html.layout-v2 .heading h1{font-size:32px;line-height:37px}
 html.layout-v2 .heading .fig-question{font-size:18px;line-height:26px}
 html.layout-v2 .fig-intro{grid-template-columns:minmax(0,1fr);gap:22px}
 html.layout-v2 .v2-figpick{flex:1;overflow-x:auto;scrollbar-width:none}
 html.layout-v2 #scene-stage #scene-help{left:12px;top:10px}
 html.layout-v2 #scene-stage .camera-controls{right:8px;bottom:8px}
 html.layout-v2 #scene-stage .scene-badge{bottom:10px;left:10px}
 html.layout-v2 .v2-dock:empty{display:none}
}