/* Comparison studies: preserve the flow; vary only its manual-work companion. */
.layout-picker{position:fixed;bottom:14px;right:14px;z-index:45;display:flex;align-items:center;gap:3px;padding:6px;background:#101012f5;border:1px solid #ffffff20;border-radius:7px;font-size:11px;max-width:calc(100% - 150px);flex-wrap:wrap}
.layout-picker>span{font-size:8px;letter-spacing:1px;color:#a18c7a;padding:0 10px}
.layout-picker a{padding:9px 11px;color:#b8aaa0;border-radius:3px;text-decoration:none}
.layout-picker a:hover{color:#fff1e8;background:#ffffff08}
.layout-picker a[aria-current]{color:#fff1e8;background:#ffffff10}
.layout-picker a:focus-visible{outline:2px solid #ff896f;outline-offset:1px}
body:not([data-manual-layout="0"]) .rotation-manual{border:0;background:none}
body:not([data-manual-layout="0"]) .rotation-manual>span{font-size:9px;letter-spacing:1.5px;color:#aa9485}
body:not([data-manual-layout="0"]) .rotation-manual>div{color:#b7aaa0}
body:not([data-manual-layout="0"]) .rotation-manual i{color:#827269;margin-right:0}
/* 1: aligned captions, close to the automation, no rules or arrows. */
[data-manual-layout="1"] .rotation-manual{width:100%;margin-top:0;padding:0 0 12px}
[data-manual-layout="1"] .rotation-manual>span{margin-bottom:12px}
[data-manual-layout="1"] .rotation-manual i{display:none}
/* 2: airy manual steps above the flow, aligned with its circle centers. */
[data-manual-layout="2"] .rotation-manual{width:100%;margin:38px auto 34px;padding:0}
[data-manual-layout="2"] .rotation-manual>span{margin-bottom:18px}
[data-manual-layout="2"] .rotation-picker{justify-content:center;gap:12px 24px;margin-top:28px}
[data-manual-layout="2"] .rotation-picker button:before{display:none}
/* 3: read the manual process first, then see the automation. */
[data-manual-layout="3"] .rotation-scene{display:flex;flex-direction:column}
[data-manual-layout="3"] .rotation-manual{order:-1;width:100%;margin:30px auto 26px;padding:0}
[data-manual-layout="3"] .rotation-manual>span{margin-bottom:14px}
[data-manual-layout="3"] .rotation-manual>div{font-size:12px}
[data-manual-layout="3"] .rotation-manual i{opacity:.55}
/* 4: four numbered tasks; grouping comes from typography, not dividers. */
[data-manual-layout="4"] .rotation-manual{width:90%;margin-top:24px;padding:0}
[data-manual-layout="4"] .rotation-manual>span{margin-bottom:20px}
[data-manual-layout="4"] .rotation-manual>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:task}
[data-manual-layout="4"] .rotation-manual>div>span{transform:none;text-align:left;display:flex;align-items:center;gap:12px;counter-increment:task;line-height:1.5}
[data-manual-layout="4"] .rotation-manual>div>span:before{content:'0' counter(task);font-size:25px;font-weight:300;letter-spacing:-1px;color:#8f7564}
[data-manual-layout="4"] .rotation-manual i{display:none}
/* 5: an editorial label beside a compact sequence. */
[data-manual-layout="5"] .rotation-manual{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:32px;width:86%;margin-top:28px;padding:0}
[data-manual-layout="5"] .rotation-manual>span{text-align:left;margin:0;max-width:100px;line-height:1.8}
[data-manual-layout="5"] .rotation-manual>div{display:flex;justify-content:space-between;align-items:center;gap:15px}
[data-manual-layout="5"] .rotation-manual>div>span{transform:none;text-align:left;line-height:1.6}
[data-manual-layout="5"] .rotation-manual i{position:static;transform:none;font-size:10px}
@media(max-width:900px){
 .standalone-preview .preview-switch{position:relative;left:auto;bottom:auto;width:fit-content;margin:20px auto 0}
 .layout-picker{position:relative;bottom:auto;right:auto;margin:25px auto 80px;width:88%;max-width:none;justify-content:center}
 .layout-picker>span{width:100%;text-align:center;padding:8px}
 [data-manual-layout="5"] .rotation-manual{width:100%;grid-template-columns:100px 1fr;gap:20px}
 [data-manual-layout="4"] .rotation-manual{width:100%}
}
@media(max-width:560px){
 body:not([data-manual-layout="0"]) .rotation-manual{margin-top:24px;width:100%}
 [data-manual-layout="1"] .rotation-manual>div{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
 [data-manual-layout="2"] .rotation-manual{margin:32px auto 28px}
 [data-manual-layout="2"] .rotation-manual>div{justify-content:flex-start;gap:10px}
 [data-manual-layout="2"] .rotation-picker{gap:14px 18px;margin-top:24px}
 [data-manual-layout="3"] .rotation-manual{margin-bottom:8px}
 [data-manual-layout="4"] .rotation-manual>div{grid-template-columns:1fr 1fr;gap:20px 16px}
 [data-manual-layout="5"] .rotation-manual{grid-template-columns:1fr;gap:16px}
 [data-manual-layout="5"] .rotation-manual>span{max-width:none}
 [data-manual-layout="5"] .rotation-manual>div{flex-wrap:wrap;justify-content:flex-start;gap:10px}
}