/* Decorative article concepts. Geometry and motion are illustrative. */
.editorial-art.article-thumbnail{background:#000}
.editorial-art.article-thumbnail-light{background:var(--paper)}
.editorial-art.article-thumbnail>img{display:block;width:100%;height:100%;object-fit:contain}
.post-art{isolation:isolate;width:100%;color:inherit}
.post-art svg{position:relative;z-index:1;display:block;width:89%;height:86%;overflow:visible}
.post-art::before{content:"";position:absolute;inset:0;pointer-events:none}
.post-art path,.post-art line,.post-art rect,.post-art circle{vector-effect:non-scaling-stroke}

/* Two synchronized streams share a continuous conversation. */
.art-moshi{background:#182a39;color:#e9c59a}
.art-moshi::before{background:radial-gradient(ellipse at 64% 47%,#52647835,transparent 65%)}
.art-moshi .stream-bed{fill:none;stroke:#7c94a5;stroke-width:1;opacity:.46}
.art-moshi .stream-bed.warm{stroke:#e4ba89;opacity:.63}
.art-moshi .stream-glint{fill:none;stroke:#dbe9ee;stroke-width:2;stroke-linecap:round;stroke-dasharray:18 229;animation:post-stream 5.2s linear infinite}
.art-moshi .stream-glint.warm{stroke:#e9b980;animation-duration:6.5s;animation-direction:reverse;stroke-dashoffset:95}
.art-moshi .stream-node{fill:#f0d4b3;animation:post-node 3.2s ease-in-out infinite}
.art-moshi .stream-crossing{fill:#182a39;stroke:#8298a5;stroke-width:1}

/* Overlapping turns occupy parallel tracks. */
.art-duplex{background:#f0e7d9;color:#8c5742}
.art-duplex::before{background:linear-gradient(115deg,#fff9ef66,transparent 62%)}
.art-duplex .turn-guide{stroke:#bdab9660;stroke-width:1;fill:none}
.art-duplex .turn-overlap{fill:#d8bc9954}
.art-duplex .turn-a{fill:#af7155;animation:post-turn-a 5.4s ease-in-out infinite}
.art-duplex .turn-b{fill:#657780;animation:post-turn-b 5.4s ease-in-out infinite}
.art-duplex .turn-detail{stroke:#fff8ef;stroke-width:1;opacity:.68}
.art-duplex .turn-playhead{stroke:#986c4b;stroke-width:1;opacity:.7;animation:post-playhead 6.5s ease-in-out infinite}
.art-duplex .turn-tick{fill:#b6a58e}

/* A model's hidden states feed a separate speech head. */
.art-gemma{background:#28261f;color:#e7bf77}
.art-gemma::before{background:radial-gradient(ellipse at 72% 48%,#a37c3730,transparent 69%)}
.art-gemma .model-wire{fill:none;stroke:#c3ad785c;stroke-width:1}
.art-gemma .model-flow{fill:none;stroke:#efd092;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:5 112;animation:post-model-flow 4.8s linear infinite}
.art-gemma .model-block{fill:#37362c;stroke:#a69c79;stroke-width:1;animation:post-block 4.8s ease-in-out infinite}
.art-gemma .model-block:nth-of-type(2){animation-delay:-3.6s}
.art-gemma .model-block:nth-of-type(3){animation-delay:-2.4s}
.art-gemma .model-block:nth-of-type(4){animation-delay:-1.2s}
.art-gemma .model-head{fill:#c99a4f;stroke:#eed093;stroke-width:1}
.art-gemma .model-token{fill:#ebc982;animation:post-token 3.6s ease-in-out infinite}
.art-gemma .model-token.second{animation-delay:-1.2s}
.art-gemma .model-token.third{animation-delay:-2.4s}
.art-gemma .model-text{fill:#737369}
.art-gemma .model-inner{stroke:#c0b38b;stroke-width:1;opacity:.56}

/* A marker scans an abstract set of comparison rows. */
.art-ranking{background:#e2e8ed;color:#566d82}
.art-ranking::before{background:radial-gradient(ellipse at 16% 18%,#f7fafbe0,transparent 80%)}
.art-ranking .comparison-guide{stroke:#b8c5cf70;stroke-width:1}
.art-ranking .comparison-row{fill:#71889a}
.art-ranking .comparison-row:nth-of-type(2){fill:#92a4b1}
.art-ranking .comparison-row:nth-of-type(3){fill:#536d82}
.art-ranking .comparison-row:nth-of-type(4){fill:#a7b5be}
.art-ranking .comparison-origin{fill:#a6b6c1}
.art-ranking .comparison-line{stroke:#f9fcff;stroke-width:1;opacity:.85}
.art-ranking .comparison-marker{animation:post-comparison 7s ease-in-out infinite}
.art-ranking .comparison-halo{fill:#ffffff60;stroke:#ffffff8c;stroke-width:1}
.art-ranking .comparison-dot{fill:#304e68;stroke:#f8fbfd;stroke-width:1.5}

@keyframes post-stream{to{stroke-dashoffset:-247}}
@keyframes post-node{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes post-turn-a{0%,100%{transform:translateX(-4px)}50%{transform:translateX(5px)}}
@keyframes post-turn-b{0%,100%{transform:translateX(5px)}50%{transform:translateX(-4px)}}
@keyframes post-playhead{0%,100%{transform:translateX(-46px);opacity:.35}50%{transform:translateX(48px);opacity:.85}}
@keyframes post-model-flow{to{stroke-dashoffset:-117}}
@keyframes post-block{0%,75%,100%{fill:#37362c}35%{fill:#746039}}
@keyframes post-token{0%,100%{opacity:.32}45%{opacity:1}}
@keyframes post-comparison{0%,100%{transform:translate(0,0)}24%{transform:translate(31px,26px)}49%{transform:translate(14px,52px)}74%{transform:translate(49px,78px)}}

@media(max-width:650px){
  .journal-thumb .post-art svg{width:94%;height:94%}
  .journal-thumb .post-art .stream-glint{stroke-width:1.4}
  .journal-thumb .post-art .model-inner,.journal-thumb .post-art .turn-detail{opacity:.35}
}
@media(prefers-reduced-motion:reduce){
  .post-art *{animation:none!important;transition:none!important}
}