/* Isolated study: the existing formation, on a single shared canvas. */
body[data-layout=scene] .loop-panel { max-width:880px; }
body[data-layout=scene] .comparison-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0; align-items:start; }
body[data-layout=scene] .system-column {
 grid-area:1/1; position:relative; transform:none; width:100%; margin:0 0 38px;
 display:flex; align-items:center; justify-content:space-between; gap:24px; text-align:left;
 padding:18px 0; border-block:1px solid var(--study-line);
}
body[data-layout=scene] .system-brand { flex:none; }
body[data-layout=scene] .infinity-art { order:-1; width:100px; flex:none; margin:0; }
body[data-layout=scene] .foundation-parts { display:flex; flex:1; width:auto; margin:0 0 0 20px; justify-content:space-between; gap:12px; }
body[data-layout=scene] .foundation-parts>span { flex:1; padding:12px 8px; border-bottom:1px solid #b991cb33; }
body[data-layout=scene] .foundation-parts>[data-active=true] { box-shadow:0 2px 0 #c9a0e5; }
body[data-layout=scene] .loop-note { display:none; }
body[data-layout=scene] .screen-side { grid-area:2/1; width:100%; }
body[data-layout=scene] .screen-frame>.specimen,
body[data-layout=scene] :is(#before-screen,#after-screen)>.specimen:not(.study-measure) { min-height:var(--scene-height,480px); }
body[data-layout=scene] .before-side { opacity:0; pointer-events:none; }
body[data-layout=scene] .after-side { opacity:1; }
body[data-layout=scene] [data-scene-stage=before] .before-side { opacity:1; }
body[data-layout=scene] [data-scene-stage=before] .after-side { opacity:0; pointer-events:none; }
body[data-layout=scene] .feedback-route { display:none; }
body[data-layout=scene] .study-route { opacity:.3; }
body[data-layout=scene] [data-scene-stage=after] .study-route { opacity:0; }
body[data-layout=scene] [data-scene-stage=before] .study-routes { visibility:hidden; }
body[data-layout=scene] .side-heading { font-size:11px; }
/* Compact screens keep their own layout; the shared stage never jumps between categories. */
@media(max-width:900px) {
 body[data-layout=scene] .system-column { display:grid; grid-template-columns:85px 1fr; gap:8px 20px; }
 body[data-layout=scene] .infinity-art { width:85px; }
 body[data-layout=scene] .foundation-parts { grid-column:1/-1; width:100%; display:flex; margin:12px 0 0; }
 body[data-layout=scene] .foundation-parts>span { justify-content:center; gap:6px; padding:10px 4px; }
 body[data-layout=scene] .foundation-parts i { width:auto; }
}
@media(max-width:760px) {
 .layout-picker { flex-wrap:wrap; }
 body[data-layout=scene] .system-column { margin:0 0 24px; }
 body[data-layout=scene] .system-brand span { font-size:9px; }
 body[data-layout=scene] .foundation-parts { gap:6px; }
 body[data-layout=scene] .foundation-parts>span { font-size:10px; }
 body[data-layout=scene] .foundation-parts i { font-size:12px; }
}
/* A static comparison remains available when motion is reduced. */
@media(prefers-reduced-motion:reduce) {
 body[data-layout=scene] .before-side { grid-row:2; opacity:1; }
 body[data-layout=scene] .after-side { grid-row:3; opacity:1; margin-top:24px; }
}

/* A shared system being applied, not a second row of navigation controls. */
.foundation-system { display:contents; }
.foundation-caption,.foundation-copy small { display:none; }
.foundation-copy strong { font:inherit; }
.foundation-parts i svg { display:block; width:18px; height:18px; }
/* One enclosure: DS Loop is the center, shared system parts surround it. */
body[data-layout=scene] .system-column {
 display:grid; grid-template-columns:1fr 1fr 144px 1fr 1fr; grid-template-rows:58px 22px;
 align-items:center; gap:0 12px; padding:16px 20px; margin-bottom:24px;
 border:1px solid #d8beed20; border-radius:16px;
 background:radial-gradient(ellipse at 50% 35%,#8352a51a,transparent 48%),linear-gradient(135deg,#36263b80,#1c1429b3 65%);
 box-shadow:inset 0 1px 0 #ffffff08,0 8px 24px #00000014;
}
body[data-layout=scene] .foundation-system,
body[data-layout=scene] .foundation-parts { display:contents; }
body[data-layout=scene] .foundation-caption { display:none; }
body[data-layout=scene] .infinity-art { grid-column:3; grid-row:1 / span 2; width:132px; margin:0; justify-self:center; }
body[data-layout=scene] .system-brand { display:none; }
body[data-layout=scene] .system-brand strong { font-size:13px; line-height:1.5; font-weight:600; }
body[data-layout=scene] .system-brand span { display:none; }
body[data-layout=scene] .foundation-parts>span {
 grid-row:1 / span 2; display:flex; flex-direction:column; align-items:center; justify-content:center;
 gap:8px; min-width:0; padding:10px 4px; text-align:center;
 border:0; border-radius:10px; background:transparent; box-shadow:none;
 transition:background .2s ease,color .2s ease;
}
body[data-layout=scene] [data-foundation=shell] { grid-column:1; }
body[data-layout=scene] [data-foundation=type] { grid-column:2; }
body[data-layout=scene] [data-foundation=controls] { grid-column:4; }
body[data-layout=scene] [data-foundation=patterns] { grid-column:5; }
body[data-layout=scene] .foundation-parts>span::before { display:none; }
body[data-layout=scene] .foundation-parts i { width:18px; flex:none; color:#bda0d7; }
body[data-layout=scene] .foundation-copy { min-width:0; }
body[data-layout=scene] .foundation-copy strong { display:block; color:#e8dff0; font-size:13px; font-weight:500; line-height:1.5; }
body[data-layout=scene] .foundation-copy small { display:block; color:#b3a2bd; font-size:11px; line-height:1.5; }
body[data-layout=scene] .foundation-parts>[data-active=true] { background:#c9a0e519; box-shadow:none; }
body[data-layout=scene] .foundation-parts>[data-active=true] i { color:#f0cdba; }
@media(max-width:600px) {
 body[data-layout=scene] .system-column { grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr); grid-template-rows:76px 76px; padding:12px 8px; gap:4px; }
 body[data-layout=scene] .infinity-art { grid-column:2; grid-row:1 / span 2; width:82px; align-self:center; transform:none; }
 body[data-layout=scene] .system-brand { grid-column:2; grid-row:2; padding-top:12px; }
 body[data-layout=scene] .system-brand strong { font-size:11px; }
 body[data-layout=scene] .foundation-parts>span { padding:6px 2px; gap:4px; }
 body[data-layout=scene] .foundation-parts>[data-foundation=shell] { grid-column:1; grid-row:1; }
 body[data-layout=scene] .foundation-parts>[data-foundation=type] { grid-column:1; grid-row:2; }
 body[data-layout=scene] .foundation-parts>[data-foundation=controls] { grid-column:3; grid-row:1; }
 body[data-layout=scene] .foundation-parts>[data-foundation=patterns] { grid-column:3; grid-row:2; }
 body[data-layout=scene] .foundation-copy strong { font-size:11px; }
 body[data-layout=scene] .foundation-copy small { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
 body[data-layout=scene] .foundation-parts>span { transition:none; }
}
