/* V09: one painted creature, registered light paths, eight stable orbit controls. */
.organism-stage{aspect-ratio:auto;margin:0;container-type:inline-size}
.organism-art{position:relative;aspect-ratio:1;isolation:isolate;background:none}
.creature-layer{position:absolute;left:6%;top:18%;width:88%;aspect-ratio:3/2;transform-origin:50% 60%;pointer-events:none}
.organism-art .poulpea-presence{inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;mask-image:radial-gradient(ellipse at center,#000 59%,transparent 76%);opacity:1;animation:none!important;transform:none!important}
.organism-art svg.light-circulation{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.light-route{fill:none;stroke:#e9d8ff;stroke-width:8;stroke-linecap:round;stroke-dasharray:4 96;opacity:0;filter:drop-shadow(0 0 6px #d29bff)}
.light-route.selected{stroke:#fff;stroke-width:10}
.organism-nodes{position:absolute;inset:0;display:block;margin:0;pointer-events:none}
.organism .organism-node{position:absolute;left:var(--node-x)!important;top:var(--node-y)!important;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;max-width:none;width:112px;min-height:88px;padding:4px 0;border:0;border-radius:20px;background:none;text-align:center;pointer-events:auto;text-shadow:0 2px 6px #080b14;z-index:4}
.organism-node .node-orb{position:relative;display:grid;place-items:center;width:58px;height:58px;margin:0;border-radius:50%;border:1px solid var(--arm-color);background:radial-gradient(circle at 35% 30%,#ffffff13,#080b14ef 63%);box-shadow:0 0 12px color-mix(in srgb,var(--arm-color) 35%,transparent),inset 0 0 9px color-mix(in srgb,var(--arm-color) 25%,transparent);color:var(--arm-color)}
.node-orb:before{content:'';position:absolute;inset:4px;border:1px solid color-mix(in srgb,var(--arm-color) 30%,transparent);border-radius:50%}
.organism .node-orb svg{position:static;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.organism-node .node-number{position:absolute;top:-7px;right:-5px;background:#080b14;border-radius:8px;padding:0 3px;font-size:.65rem;color:var(--arm-color);margin:0}
.organism .organism-node b{font-size:.82rem;font-weight:500;line-height:1.25;white-space:normal;padding:2px 4px;border-radius:6px;background:#080b14db;color:#ebe4f8}
.organism .organism-node:after{display:none}
.organism .organism-node.is-selected{background:none;border:0;border-radius:20px}
.organism-node.is-selected .node-orb{box-shadow:0 0 23px color-mix(in srgb,var(--arm-color) 65%,transparent),inset 0 0 13px color-mix(in srgb,var(--arm-color) 40%,transparent);border-width:2px}
.organism-node:focus-visible{outline:2px solid var(--arm-color);outline-offset:3px}
.organism-core{top:77%;left:50%;min-height:44px;padding:8px}
.organism-toolbar{align-items:center;gap:10px;padding-top:0}
.organism-toolbar button{min-height:44px;padding:5px 8px}
.motion-explanation{font-size:.72rem;color:var(--muted);margin:0 0 12px;line-height:1.5}
body.motion-on .organism .creature-layer{animation:unified-tide 9s ease-in-out infinite!important}
body.motion-on .organism .light-route{opacity:.9;animation:light-travel 6s linear infinite!important;animation-delay:var(--delay)!important}
body.motion-paused .organism .creature-layer,body.motion-paused .organism .light-route{animation:none!important}
@keyframes light-travel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes unified-tide{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.015,1.022)}}
@media(min-width:1051px){.hero{grid-template-columns:.72fr 1.28fr}.hero .organism{min-width:0}}

@media(max-width:720px){
 .organism-stage{margin:0}
 .organism .organism-node{width:80px;min-height:62px;gap:3px;padding:0}
 .organism-node .node-orb{width:44px;height:44px}
 .organism .node-orb svg{width:22px;height:22px}
 .organism .organism-node b{font-size:.68rem;padding:1px 3px}
 .organism-node .node-number{font-size:.57rem}
 .organism-core span{font-size:.69rem}.organism-core small{font-size:.6rem}
 .organism-toolbar{font-size:.7rem}.current-preview{min-height:215px}
}
@media(max-width:370px){.organism .organism-node{width:70px}.organism .organism-node b{font-size:.64rem}}

/* V10: tip coordinates share the bitmap's box, not an independent page orbit. */
.organism .organism-node{top:var(--node-y)!important;left:var(--node-x)!important;transform:translate(-50%,-29px);width:112px;height:80px;min-height:80px;justify-content:flex-start;padding:0;gap:4px}
.organism .organism-node .node-orb{flex:none}
.organism-core{top:86%}
/* Keep the painted tips and interactive anchors still; animate their light. */
body.motion-on .organism .creature-layer{animation:creature-glow 9s ease-in-out infinite!important}
@keyframes creature-glow{0%,100%{opacity:.91}50%{opacity:1}}
@media(max-width:720px){
 .organism-art{aspect-ratio:650/710}
 .creature-layer{left:10%;width:80%;top:15%;aspect-ratio:3/2}
 .organism-art .poulpea-presence{object-fit:contain}
 .organism .organism-node{width:70px;height:44px;min-height:44px;transform:translate(-50%,-16px);gap:1px;padding:0}
 .organism .organism-node .node-orb{width:32px;height:32px}
 .organism .node-orb svg{width:19px;height:19px}
 .organism .organism-node b{font-size:.6rem;line-height:11px;white-space:nowrap;padding:0 2px}
 .organism-node .node-number{font-size:.5rem;top:-4px;right:-5px}
 .organism-core{top:85%}
}

/* V12: on desktop the selected arm stays beside the creature, not below it.
   DOM order and the mobile composition remain unchanged. */
@media(min-width:1051px){
 .hero{grid-template-columns:minmax(340px,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto auto;column-gap:36px;row-gap:12px;min-height:0;padding-block:24px;align-items:center}
 .hero .organism{display:contents}
 .hero-copy{grid-column:1;grid-row:1;padding:0;align-self:end}
 .hero h1{font-size:clamp(2.5rem,5.6vh,3.6rem);margin-bottom:16px}
 .hero-copy .eyebrow{margin-bottom:16px}
 .hero-copy>p:not(.eyebrow){max-width:440px;margin-bottom:14px;line-height:1.5}
 .hero .actions{gap:10px;margin-top:18px;flex-wrap:wrap}
 .hero .button{font-size:.86rem;padding:12px 17px}
 .hero .organism-stage{grid-column:2;grid-row:1/3;width:min(100%,max(440px,calc(100svh - 240px)));justify-self:center;align-self:center}
 .hero .organism-toolbar{grid-column:2;grid-row:3;justify-self:center;width:min(100%,600px);padding:0}
 .hero .current-preview{grid-column:1;grid-row:2;align-self:start;min-height:220px;padding:18px 0 0 24px;max-width:470px}
 .hero .current-preview h3{font-size:1.4rem}
 .hero .current-preview h3 em{display:block;font-size:1.05rem;margin-top:5px}
 .hero .current-preview .eyebrow{margin-bottom:8px}
}