/* Shared interaction layout. Project artwork, accents and scientific widgets stay native. */
.friendly-lab{--friendly-paper:var(--panel,var(--paper,var(--bg,#fff)));--friendly-line:var(--line,#dce4df);background:var(--bg,#f5f7f3);padding-bottom:88px}
.friendly-lab [hidden]{display:none!important}
.friendly-lab .bg-aurora,.friendly-lab #bg-particles,.friendly-lab #coach{display:none!important}
.friendly-lab .paimm-nav{position:relative;min-height:58px;padding-block:10px;gap:16px;flex-wrap:wrap;background:var(--panel,var(--paper,var(--bg,#fff)));border-bottom:1px solid var(--friendly-line);backdrop-filter:none}
.friendly-lab .paimm-nav>nav{margin-left:auto}
.friendly-tabs{position:sticky;top:0;z-index:45;display:flex;gap:5px;align-items:center;max-width:1200px;margin:0 auto;padding:10px 20px;background:var(--bg,#f5f7f3);border-bottom:1px solid var(--friendly-line);overflow-x:auto;scrollbar-width:thin}
.friendly-tabs button{border:0;border-radius:100px;background:transparent;color:var(--muted,#58645e);padding:11px 16px;white-space:nowrap;font:600 14px/1.2 inherit;cursor:pointer;min-height:42px}
.friendly-tabs button[aria-selected=true]{background:var(--accent,var(--cyan,#176953));color:var(--bg,#fff);box-shadow:0 2px 8px #0001}
.friendly-progress{font-size:12px;color:var(--muted,#58645e);margin-left:auto;white-space:nowrap;padding-left:12px;font-variant-numeric:tabular-nums}
.friendly-lab :is(button,a,input,select,summary):focus-visible{outline:3px solid var(--accent,var(--cyan,#2a8e77));outline-offset:4px}
.friendly-lab :is(#intro,.hero).has-science-opening{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;gap:32px!important;align-items:center!important;padding-top:35px!important;padding-bottom:38px!important;max-width:1200px!important;min-height:0!important}
.friendly-lab .has-science-opening>:is(.intro-copy,.hero-copy){display:block!important;min-width:0;order:0!important}
.friendly-lab .has-science-opening>figure.science-opening{order:1!important;min-width:0;margin:0!important;max-width:100%!important;align-self:start;border-radius:20px;background:var(--panel,var(--paper,var(--bg,#fff)));border:1px solid var(--friendly-line);overflow:hidden}
.friendly-lab .has-science-opening h1{font-size:clamp(30px,4vw,50px)!important;line-height:1.2!important;letter-spacing:-.035em!important;margin:12px 0 20px!important}
.friendly-lab .has-science-opening :is(.intro-actions,.hero-actions){margin:18px 0!important;display:flex!important;gap:10px;flex-wrap:wrap}
.friendly-lab .has-science-opening :is(.intro-meta,.hero-count){margin:18px 0!important;font-size:13px!important;gap:8px!important}
.friendly-lab .has-science-opening>.intro-bottom,.friendly-lab .has-science-opening>.disclaimer,.friendly-lab .has-science-opening>.intro-privacy{grid-column:1/-1}
.friendly-lab .science-opening .opening-head{padding:14px 16px!important;gap:12px!important}
.friendly-lab .science-opening .opening-question{font-size:17px!important;line-height:1.5!important}
.friendly-lab .science-opening>img,.friendly-lab .science-opening .opening-image{height:auto!important;max-height:330px!important;width:100%;object-fit:contain;background:var(--soft,var(--panel,var(--paper,var(--bg,#eef3ec))))}
.friendly-lab .science-opening .opening-caption{padding:13px 16px!important}
.friendly-lab .science-opening .opening-phases{font-size:11px!important;gap:7px!important}
.friendly-lab .science-opening .opening-story{font-size:14px!important;line-height:1.75!important;margin-top:9px!important}
.friendly-lab .friendly-opening-teaser{margin:0 0 7px!important}
.friendly-lab .friendly-opening-details summary,.friendly-context summary{font-size:13px;color:var(--accent,var(--cyan,#176953));cursor:pointer}
.friendly-lab .opening-old-deck{display:block!important;font-size:17px!important;line-height:1.8!important;max-width:38em!important}
.friendly-lab #intro-tagline{display:none!important}
.friendly-catalog,.friendly-about{max-width:1160px;margin:0 auto;padding:32px 20px 50px;color:var(--ink,#192d27)}
.friendly-section-head h2,.friendly-about>h2{font-size:clamp(25px,3vw,36px);line-height:1.3;margin:5px 0 24px}
.friendly-eyebrow{font-size:11px;letter-spacing:.13em;color:var(--accent,var(--cyan,#176953));margin:0}
.friendly-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.friendly-tools input[type=search],.friendly-tools select{background:var(--panel,var(--paper,var(--bg,#fff)));color:inherit;border:1px solid var(--friendly-line);padding:12px 14px;border-radius:12px;min-height:46px;max-width:100%;font:inherit}
.friendly-tools input[type=search]{flex:1;min-width:190px}
.friendly-tools select{max-width:300px}
.friendly-check{display:flex;gap:7px;align-items:center;font-size:13px;white-space:nowrap}
.friendly-count,.friendly-note{font-size:13px;line-height:1.7;color:var(--muted,#58645e)}
.friendly-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}
.friendly-card{padding:0!important;display:flex;flex-direction:column;overflow:hidden;text-align:left;white-space:normal;border:1px solid var(--friendly-line);border-radius:18px;background:var(--panel,var(--paper,var(--bg,#fff)));color:var(--ink,#192d27);cursor:pointer;transition:transform .18s,box-shadow .18s;min-width:0}
.friendly-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px #1232}
.friendly-card>img{width:100%;aspect-ratio:1.7;object-fit:cover;max-height:180px}
.friendly-card-copy{display:flex;flex-direction:column;gap:9px;padding:16px;flex:1}
.friendly-card-copy small{font-size:11px;color:var(--muted,#58645e);line-height:1.5}
.friendly-card-copy strong{font-size:16px;line-height:1.6}
.friendly-card-copy>span{margin-top:auto;padding-top:6px;font-size:12px;color:var(--accent,var(--cyan,#176953))}
.friendly-pager{display:flex;gap:20px;align-items:center;justify-content:center;padding-top:12px;font-size:13px}
.friendly-pager button{border:1px solid var(--friendly-line);border-radius:100px;padding:11px 20px;background:var(--panel,var(--paper,var(--bg,#fff)));color:inherit;cursor:pointer;min-height:44px}
.friendly-pager button:disabled{opacity:.4;cursor:default}
.friendly-lab #journey{padding-top:15px;max-width:1160px}
.friendly-lab #journey-bar{position:relative;top:auto;z-index:1;margin:0 0 14px;padding:10px 15px;border:1px solid var(--friendly-line);border-radius:14px;background:var(--panel,var(--paper,var(--bg,#fff)));backdrop-filter:none}
.friendly-lab #step-card{overflow:visible;background:var(--panel,var(--paper,var(--bg,#fff)));border:1px solid var(--friendly-line);border-radius:22px;box-shadow:none}
.friendly-lab .step-hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:25px;padding:22px;align-items:start}
.friendly-lab .step-picture{position:relative;overflow:hidden;border-radius:14px;min-height:0;background:var(--soft,var(--panel,var(--paper,var(--bg,#eef3ec))))}
.friendly-lab #step-art{height:auto;max-height:380px;min-height:0;width:100%;object-fit:contain}
.friendly-lab .step-intro{padding:0;min-width:0}
.friendly-lab #step-title{font-size:clamp(23px,2.7vw,33px);line-height:1.35;margin:8px 0 14px}
.friendly-lab .reader-background{font-size:15px;line-height:1.85;margin:10px 0 16px;max-width:68ch}
.friendly-lab .reader-background p{margin:7px 0}
.friendly-lab #step-question{font-size:18px;line-height:1.65;font-weight:650;margin:16px 0}
.friendly-lab #stage-track{display:none}
.friendly-lab #stage-guess{padding:0!important;margin:0!important;border:0!important;background:transparent!important}
.friendly-lab #stage-guess>.stage-heading{display:none}
.friendly-lab #prediction-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.friendly-lab #prediction-options>button{min-height:58px;padding:12px;text-align:left;font-size:14px;line-height:1.5;border-radius:12px;white-space:normal}
.friendly-lab #prediction-feedback{font-size:13px;line-height:1.7;margin-top:12px;padding:12px}
.friendly-lab #stage-try{margin:0 22px 22px;padding:20px;border-radius:16px;background:var(--soft,var(--panel,var(--paper,var(--bg,#eef3ec))));border:1px solid var(--friendly-line)}
.friendly-lab #observation-guide{display:none!important}
.friendly-lab #bench-body{scroll-margin-top:85px}
.friendly-lab #step-controls{background:var(--panel,var(--paper,var(--bg,#fff)));border-radius:14px;padding:14px!important}
.friendly-lab #step-controls button{min-height:44px}
.friendly-lab #try-hint{font-size:14px;line-height:1.75}
.friendly-lab #step-result{margin:0 22px 22px;padding:20px;border-radius:16px}
.friendly-lab #result-copy{font-size:16px;line-height:1.9}
.friendly-lab .friendly-mechanism{margin:0 22px 16px;border:1px solid var(--friendly-line);border-radius:14px;background:var(--panel,var(--paper,var(--bg,#fff)));overflow:hidden}
.friendly-mechanism>summary{padding:17px 20px;font-size:16px;font-weight:650;color:var(--accent,var(--cyan,#176953));cursor:pointer}
.friendly-lab #mechanism-reading{margin:0;padding:18px!important;border:0;border-top:1px solid var(--friendly-line);border-radius:0}
.friendly-lab #why{margin:0 22px 22px}
.friendly-lab .step-navigation{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--panel,var(--paper,var(--bg,#fff)));border-top:1px solid var(--friendly-line);padding:10px max(20px,calc((100vw - 1116px)/2));box-shadow:0 -5px 24px #0001;min-height:64px;margin:0}
.friendly-lab .step-navigation button{min-height:44px;font-size:14px;border-radius:100px;max-width:48%}
.friendly-lab[data-friendly-view]:not([data-friendly-view=work]) .step-navigation{display:none!important}
.friendly-lab #summary{padding-top:30px;max-width:1100px}
.friendly-lab .friendly-reading{padding:20px;margin:16px 0;border:1px solid var(--friendly-line);border-radius:16px;background:var(--panel,var(--paper,var(--bg,#fff)));line-height:1.85}
.friendly-reading>summary{font-size:17px;font-weight:650;cursor:pointer}
.friendly-reading>section{max-width:100%!important;padding:20px 0!important;margin:0!important}
.friendly-lab .paimm-language.friendly-language{position:static!important;inset:auto!important;margin:0 0 0 auto!important;max-width:210px!important;background:transparent!important;box-shadow:none!important;border:0!important;z-index:auto!important;padding:0!important}
.friendly-language select{max-width:160px;min-height:36px;font-size:12px!important}
.friendly-language label{font-size:0!important}
.friendly-lab .paimm-related{display:none}
/* Native programs retain their own renderers and local records. */
.friendly-lab[data-friendly-view=catalog] main,.friendly-lab[data-friendly-view=about] main{display:none!important}
.friendly-lab .journey-main{min-width:0}
.friendly-lab #question-card{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:22px}
.friendly-lab #question-card>figure img{max-height:330px;object-fit:contain}
.friendly-lab #question-guide{display:none}
.friendly-lab #question-options{gap:9px}
.friendly-lab #question-options button{min-height:48px;line-height:1.6}
.friendly-lab .journey-side{align-self:start;position:sticky;top:76px}
.friendly-lab .live-card{padding:14px 20px}
.friendly-lab #lab{padding-top:24px}
.friendly-lab .opto-live-workspace{gap:18px}
.friendly-lab #experiment-guide{display:none}
.friendly-lab .opto-live-workspace .control-panel{position:relative;top:auto}
.friendly-lab #scene{min-height:0;padding-top:28px}
.friendly-lab #scene h1{font-size:clamp(30px,4vw,49px)}
.friendly-lab .bottom{z-index:50}
@media(min-width:1000px){.friendly-lab #bench-body.workspace-has-controls{grid-template-columns:minmax(0,1fr) minmax(260px,320px)!important}.friendly-lab #step-controls{top:78px!important}}
@media(max-width:900px){.friendly-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.friendly-tabs{padding-inline:12px}.friendly-tabs button{padding-inline:12px}.friendly-progress{display:none}.friendly-lab .step-hero{gap:18px;padding:18px}.friendly-lab #prediction-options{grid-template-columns:1fr}}
@media(max-width:640px){
 .friendly-lab{padding-bottom:85px}.friendly-lab .paimm-nav{padding:9px 14px;gap:8px}.friendly-lab .paimm-nav>nav{font-size:11px;gap:10px}.friendly-lab .paimm-nav>nav>a:not(:last-child){display:none}
 .friendly-tabs{gap:2px;padding:7px 8px}.friendly-tabs button{font-size:12px;padding:10px 12px;min-height:40px;flex-shrink:0}
 .friendly-lab :is(#intro,.hero).has-science-opening{grid-template-columns:1fr!important;gap:18px!important;padding:22px 16px!important}
 .friendly-lab .has-science-opening h1{font-size:32px!important;margin:10px 0 15px!important}.friendly-lab .opening-old-deck{font-size:15px!important}
 .friendly-lab .science-opening>img,.friendly-lab .science-opening .opening-image{max-height:245px!important}.friendly-lab .science-opening .opening-question{font-size:15px!important}.friendly-lab .science-opening .opening-caption{padding:12px!important}
 .friendly-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.friendly-catalog,.friendly-about{padding:25px 14px}.friendly-card-copy{padding:12px;gap:6px}.friendly-card-copy strong{font-size:14px}.friendly-card-copy small{font-size:10px}.friendly-tools{gap:9px}.friendly-tools select{max-width:100%;width:100%}
 .friendly-lab #journey{padding:12px 10px}.friendly-lab #journey-bar{gap:8px;padding:9px 10px;font-size:11px}.friendly-lab #section-label{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .friendly-lab .step-hero{grid-template-columns:1fr;padding:14px;gap:14px}.friendly-lab #step-art{max-height:190px}.friendly-lab #step-title{font-size:25px;margin:7px 0 12px}.friendly-lab .reader-background{font-size:14px;line-height:1.85}.friendly-lab #step-question{font-size:17px}.friendly-lab #prediction-options{grid-template-columns:1fr}.friendly-lab #prediction-options>button{min-height:51px;padding:11px 13px}
 .friendly-lab #stage-try,.friendly-lab #step-result{margin:0 12px 15px;padding:13px}.friendly-lab .friendly-mechanism,.friendly-lab #why{margin:0 12px 15px}.friendly-lab #step-controls{padding:11px!important}.friendly-mechanism>summary{padding:15px;font-size:14px}.friendly-lab #mechanism-reading{padding:12px!important}
 .friendly-lab .step-navigation{padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));gap:10px}.friendly-lab .step-navigation button{padding:10px 17px;max-width:52%;font-size:13px}.friendly-lab #question-card{grid-template-columns:1fr;gap:15px}.friendly-lab #question-card>figure img{max-height:180px}.friendly-lab .journey-side{position:relative;top:auto}.friendly-lab .live-card{padding:12px 15px}.friendly-lab #scene{padding:20px 14px}.friendly-language select{max-width:115px}
}
@media(prefers-reduced-motion:reduce){.friendly-lab *, .friendly-lab *::before,.friendly-lab *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.friendly-card:hover{transform:none}}

.friendly-lab :is(#intro,.hero)[hidden].has-science-opening{display:none!important}
.friendly-lab #step-art{position:relative!important;inset:auto!important;aspect-ratio:4/3!important}
.friendly-lab #try-hint{display:block!important}
.friendly-lab .friendly-language a{font-size:8px!important;line-height:1.2!important;max-width:72px}
.friendly-lab #lab>.section-head{margin-bottom:18px;align-items:center}
.friendly-lab #lab>.section-head h2{font-size:clamp(24px,3vw,34px);line-height:1.4}
.friendly-opto-selection{border:1px solid var(--friendly-line);border-radius:14px;padding:12px 16px;margin:0 0 20px}
.friendly-opto-selection>summary,.friendly-opto-options>summary,.friendly-opto-illustration>summary{cursor:pointer;color:var(--accent,var(--cyan,#46d8dc));font-size:14px;line-height:1.7}
.friendly-opto-selection .atlas-panel{max-width:700px;margin-top:15px}
.friendly-lab .opto-live-workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:start}
.friendly-lab .opto-live-workspace>.mechanism-panel{padding:20px;min-width:0}
.friendly-lab .opto-live-workspace .mechanism-layout{display:block!important}
.friendly-lab .opto-live-workspace .mechanism-panel h2{font-size:24px}
.friendly-lab .opto-live-workspace .control-panel{padding:20px;min-width:0}
.friendly-lab .opto-live-workspace .protocol-preview{margin-top:14px;font-size:14px;line-height:1.8}
.friendly-lab .opto-live-workspace #prediction{margin-top:18px}
.friendly-lab .opto-live-workspace #prediction h3{font-size:19px;line-height:1.6}
.friendly-lab .opto-live-workspace .reader-background{font-size:14px}
.friendly-lab .opto-live-workspace .run-actions{margin-top:16px;position:static}
.friendly-opto-illustration{margin-top:16px}
.friendly-opto-illustration figure{margin:12px 0 0}
.friendly-opto-options label{display:block;margin-top:12px}
.friendly-opto-options select{width:100%}
@media(max-width:900px){.friendly-lab .opto-live-workspace{grid-template-columns:1fr}.friendly-lab .opto-live-workspace>.mechanism-panel{order:1}.friendly-lab .opto-live-workspace>.control-panel{order:0}}
.friendly-lab :is(#journey,#stage-try,#step-result,#summary){scroll-margin-top:82px}
@media(max-width:640px){
 .friendly-lab .step-hero{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px}
 .friendly-lab .step-intro{display:contents}
 .friendly-lab .step-picture{float:none;grid-column:1;grid-row:1/span 2;width:100px;height:100px;margin:0}
 .friendly-lab #step-art{width:100px!important;height:100px!important;max-height:100px!important;object-fit:cover}
 .friendly-lab #step-kicker{grid-column:2;grid-row:1;margin:0;align-self:end}
 .friendly-lab #step-title{grid-column:2;grid-row:2;margin:0;align-self:start;font-size:23px}
 .friendly-lab .step-hero :is(.reader-background,#step-question,#stage-guess){grid-column:1/-1}
 .friendly-lab #screen-count{font-size:10px;padding:4px 6px;top:6px;left:6px}
 .friendly-lab #step-question,.friendly-lab #stage-guess{clear:both}
 .friendly-lab .step-picture .paimm-media-zoom{width:28px;height:28px;font-size:16px}
}
.friendly-lab #question-card{display:grid!important}
.friendly-lab #journey.journey{display:block;max-width:1160px}
.friendly-lab .journey-side{position:relative;top:auto;display:flex;align-items:center;gap:18px;margin-bottom:18px;padding:12px 0}
.friendly-lab .journey-side>:is(h2,.eyebrow,#chapter-message){display:none}
.friendly-lab #chapters{display:flex;gap:10px;flex:1;overflow-x:auto}
.friendly-lab #chapters button{white-space:nowrap;padding:8px 14px;min-width:0;border-radius:100px;min-height:42px}
.friendly-lab #exit{white-space:nowrap;font-size:12px}
@media(max-width:640px){.friendly-lab .journey-side{display:block}.friendly-lab #chapters{margin-bottom:9px}.friendly-lab #step-controls .fr-actions{display:flex;flex-direction:column}.friendly-lab #step-controls .fr-actions>.lab-button{width:100%;min-height:46px}}

.friendly-tabs button[aria-selected=true]{background:var(--ink,#193c32);color:var(--bg,#fff);box-shadow:inset 0 -3px var(--accent,var(--cyan,#176953))}