/* V6 shares V5's heading, hero width, node typography and responsive scale. */
.rotation-player{display:contents}
.rotation-picker{flex-wrap:wrap}
.rotation-picker button{position:relative;border:0;background:none;color:#aa9485;font:inherit;padding:0;line-height:inherit;cursor:pointer;transition:color .65s}
.rotation-picker button:before{content:'↙';color:#df7b60;margin-right:10px}
.rotation-picker button[aria-pressed=true],.rotation-picker button:hover{color:#ffe0d0}
.rotation-picker button i{position:absolute;bottom:-5px;left:0;height:1px;width:100%;background:#e10600;transform:scaleX(0);transition:transform .65s}
.rotation-picker button[aria-pressed=true] i{transform:scaleX(1)}
.rotation-stage{display:grid;min-width:0}
.rotation-scene{display:flow-root;grid-area:1/1;align-self:start;will-change:opacity}
.rotation-scene .benefit-node strong{background:none}
.rotating-hero .benefit-stream{opacity:.65;animation:none}
.rotating-hero.in-view .benefit-node .benefit-icon{animation:none}
.rotating-hero .benefit-node .benefit-icon{animation:none;background:#150e0ef5;color:#ff9c81;outline-color:#b64e354f;box-shadow:0 0 0 8px #a33c1008;transition:background .35s,color .35s,box-shadow .35s,outline-color .35s}
.rotating-hero .benefit-node .benefit-icon.flow-done{outline-color:#ff92708f;box-shadow:0 0 0 8px #a33c1012,0 0 22px #ff392e22}
.rotating-hero .benefit-node .benefit-icon.flow-hot{color:#ff9c81;outline-color:#b64e354f;box-shadow:0 0 0 12px #da572426,0 0 42px #ff392e55}
.rotating-hero .benefit-node .benefit-icon.flow-final{background:#b92014;color:#fff;outline-color:#ff85626b;box-shadow:0 0 0 8px #c2522410,0 0 35px #ff302925}
.flow-bubble{position:absolute;z-index:-1;width:7px;height:3px;border-radius:1px;background:#ffd4aa;box-shadow:0 0 5px #ff896f,0 0 9px #ff503766;transform:translate(-50%,-50%);pointer-events:none;opacity:0}

.rotation-branches{position:relative;align-self:stretch;--branch-center:25px;--branch-spread:54px;--branch-lower-spread:78px}
.rotation-branch{position:absolute;left:50%;top:calc(var(--branch-center) - var(--branch-spread) - var(--branch-icon-half,25px));transform:translateX(-50%);display:flex;flex-direction:column;text-align:center;align-items:center;width:100%;max-width:100%}
.rotation-branch[data-fork="1"]{top:calc(var(--branch-center) + var(--branch-lower-spread) - var(--branch-icon-half,25px))}
.rotation-branch>div{display:flex;flex-direction:column;align-items:center;gap:inherit;min-width:0}


.rotation-manual{display:block}
.rotation-manual>span{display:block;text-align:center;font-size:7px;letter-spacing:1.2px;color:#a18c7a;margin-bottom:15px}
.rotation-manual>div{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;color:#c7d3c3;font-size:inherit}
.rotation-manual>div>span{text-align:center;transform:translateX(var(--manual-offset,0px))}
.rotation-manual i{position:absolute;top:50%;transform:translate(-50%,-50%);font-style:normal;color:#aa9485}
#motion-toggle{display:none}

@media(max-width:560px){
 .rotation-picker button{text-align:left}
 .rotation-network{margin-bottom:24px}

 .rotation-branches{display:flex;flex-direction:column;gap:24px;align-items:start}
 .rotation-branch{position:static;transform:none;flex-direction:row;text-align:left;width:100%;max-width:none;gap:21px;min-height:64px}
 .rotation-branch>div{align-items:start;gap:4px}

 .rotation-manual>span{text-align:left}.rotation-manual>div{display:flex;flex-wrap:wrap;gap:8px 10px;line-height:1.7}
 .rotation-manual>div>span{transform:none;text-align:left}.rotation-manual i{position:static;transform:none}
}
@media(prefers-reduced-motion:reduce){.rotation-scene{will-change:auto}.rotation-picker button,.rotation-picker button i{transition:none}}

/* Keep V5's composition position after replacing its larger lower block with one row. */
@media(min-width:901px){.concept-gallery .flow-focus{padding-bottom:156px}}
@media(min-width:1600px){.concept-gallery .flow-focus{padding-bottom:176px}}
@media(min-width:901px) and (max-height:950px){.concept-gallery .flow-focus{padding-bottom:131px}}
@media(max-width:560px){.rotation-branch:before,.rotation-branch:after{display:none}}

@media(max-width:560px){.split-wires{display:block}.rotation-network:has(.rotation-branches) .rotation-node:before,.rotation-network:has(.rotation-branches) .rotation-node:after{display:none}}
