/* Geometry and choreography adapted from the owner's supplied camadas.html.
   All reference styling is scoped here; no global stage, font or theme changes. */
.inference-art {
  --bg:var(--cream); --ink:#55594a; --muted:#858b76; --line:#c3c6b4;
  --line-strong:#8c927c; --plate-stroke:#c6c9b7; --accent:#7d8966; --active:var(--rust); --pulse:#a86a4b;
  --terra-hi:#d6a88b; --terra-top:#d7b29a; --terra:#c08d70; --terra-mid:#aa765b; --terra-lo:#7b4d37; --terra-edge:#9c6a50;
  --edge-hi:#f6e2d3; --hole:#86644e; --hole-floor:#cdb6a1; --check:#f7e6d6;
  --sage-top:#dddecb; --sage-l:#c0c3ac; --sage-r:#aeb399; --sage-edge:#9aa287;
  --shadow:#6b6650; --shadow-a:.16; --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.3,1.35,.4,1);
  position:relative; width:100%; max-width:620px; min-width:0; justify-self:center; margin:0; border:0; background:none;
}
.inference-art .art-header,.inference-art .art-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#666b5b; }
.inference-art .art-header { font-size:12px; line-height:1.4; padding-bottom:8px; }
.inference-art .art-header > span:first-child,.inference-art .art-footer > span:first-child { display:flex; align-items:center; gap:8px; }
.inference-art .art-header .mono,.inference-art .art-footer .mono { font-size:9px; letter-spacing:.5px; }
.inference-art .art-footer { font-size:11px; padding-top:10px; }
.inference-art .ip-canvas { position:relative; width:100%; aspect-ratio:1080 / 1140; }
.inference-art .ip-scene { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.inference-art .plate { fill:url(#ip-gPlate); stroke:var(--plate-stroke); stroke-width:1.1; }
.inference-art .guide { stroke:var(--line); stroke-width:1; stroke-dasharray:3 7; fill:none; opacity:.8; }
.inference-art .shadow { fill:var(--shadow); }
.inference-art .axis-cap { fill:var(--bg); stroke:var(--line-strong); stroke-width:1.3; }
.inference-art .leader { stroke:var(--line-strong); stroke-width:1.2; transition:stroke .3s; }
.inference-art .node-dot { fill:var(--bg); stroke:var(--line-strong); stroke-width:1.5; transition:stroke .3s; }
.inference-art .end { fill:var(--accent); transition:fill .3s; }
.inference-art .ripple { fill:none; stroke:var(--active); stroke-width:1.2; opacity:0; transform-box:fill-box; transform-origin:center; }
.inference-art .outer { transition:opacity .4s var(--ease); }
.inference-art .plate-g { pointer-events:none; }
.inference-art .faces { cursor:pointer; }
.inference-art .check { fill:none; stroke:var(--check); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.inference-art #ip-pulse { fill:var(--pulse); }
.inference-art .seg-base { stroke:var(--line-strong); stroke-width:1.1; stroke-linecap:round; opacity:.65; }
.inference-art .seg-flow { stroke:var(--pulse); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:1.5 7; opacity:.5; }
.inference-art .joint { fill:var(--bg); stroke:var(--line-strong); stroke-width:1.2; }
.inference-art #ip-trail { stroke:var(--pulse); stroke-width:2; stroke-linecap:round; }
.inference-art .is-active .leader { stroke:var(--active); stroke-width:1.6; }
.inference-art .is-active .node-dot { stroke:var(--active); }
.inference-art .is-active .end { fill:var(--active); }
.inference-art.is-focused .layer:not(.is-active) .outer { opacity:.4; }
.inference-art .ip-labels { position:absolute; inset:0; pointer-events:none; }
.inference-art .ip-label { position:absolute; left:75%; width:25%; min-height:66px; padding:7px 0 7px 8px; border:0; background:none; text-align:left; cursor:pointer; pointer-events:auto; transform:translateY(-50%); color:var(--ink); }
.inference-art .ip-label:nth-child(1) { top:32.3%; }
.inference-art .ip-label:nth-child(2) { top:56.7%; }
.inference-art .ip-label:nth-child(3) { top:79.3%; }
.inference-art .ip-number { display:block; margin-bottom:6px; color:var(--muted); font:10px/1.4 var(--mono); letter-spacing:1px; }
.inference-art .ip-label strong { display:block; font:500 14px/1.4 var(--mono); text-transform:uppercase; letter-spacing:1.2px; }
.inference-art .ip-description { display:block; margin-top:6px; font-size:12px; line-height:1.5; color:#69705d; opacity:0; transition:opacity .3s; }
.inference-art .ip-label[aria-pressed=true] strong,.inference-art .ip-label:hover strong { color:var(--active); }
.inference-art .ip-label[aria-pressed=true] .ip-description,.inference-art .ip-label:hover .ip-description { opacity:1; }
.inference-art .ip-mobile-description { display:none; }
/* The automatic sequence stops at 4.8s. Further movement needs a deliberate layer selection. */
.inference-art .anim { transform-box:fill-box; transform-origin:center; }
.inference-art.ip-intro .draw { stroke-dasharray:1; animation:ip-draw 1s var(--ease) var(--d,0s) both; }
.inference-art.ip-intro .rise { animation:ip-rise 1.1s var(--ease) var(--d,0s) both; }
.inference-art.ip-intro .drop { animation:ip-drop 1.2s var(--spring) var(--d,0s) both; }
.inference-art.ip-intro .pop { animation:ip-pop .6s var(--spring) var(--d,0s) both; }
.inference-art.ip-intro .h-anim { animation:ip-fade .9s var(--ease) var(--d,0s) both; }
.inference-art.ip-running .seg-flow { animation:ip-flow 1.1s linear 4 both; }
.inference-art.ip-running .is-active .ripple { animation:ip-ripple 1s var(--ease) 1 both; }
.inference-art.motion-paused * { animation-play-state:paused!important; }
@keyframes ip-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes ip-rise { from { opacity:0; transform:translateY(28px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes ip-drop { 0% { opacity:0; transform:translateY(-90px); } 45% { opacity:1; } 100% { opacity:1; transform:none; } }
@keyframes ip-pop { from { opacity:0; transform:scale(0); } to { opacity:1; transform:none; } }
@keyframes ip-fade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes ip-flow { to { stroke-dashoffset:-8.5; } }
@keyframes ip-ripple { from { opacity:.7; transform:scale(1); } to { opacity:0; transform:scale(3.6); } }
@media(max-width:1100px) and (min-width:821px) {
  .inference-art .ip-label strong { font-size:12px; letter-spacing:.6px; }
  .inference-art .ip-description { font-size:11px; }
  .inference-art .art-header .mono,.inference-art .art-footer .mono { display:none; }
}
@media(max-width:820px) {
  .inference-art { max-width:540px; }
}
@media(max-width:600px) {
  .inference-art { max-width:440px; }
  .inference-art .art-header { font-size:12px; padding-bottom:8px; }
  .inference-art .art-header .mono { display:none; }
  .inference-art .ip-canvas { aspect-ratio:auto; }
  .inference-art .ip-scene { position:relative; height:clamp(330px,105vw,430px); }
  .inference-art .leader,.inference-art .end { display:none; }
  .inference-art .ip-labels { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .inference-art .ip-label { position:static; width:100%; min-height:48px; transform:none; padding:8px 2px; text-align:center; }
  .inference-art .ip-number { font-size:10px; margin-bottom:3px; }
  .inference-art .ip-label strong { font-size:12px; letter-spacing:.2px; }
  .inference-art .ip-description { display:none; }
  .inference-art .ip-mobile-description { display:block; min-height:40px; margin-top:6px; font-size:12px; line-height:1.5; text-align:center; color:#69705d; }
  .inference-art .art-footer { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .inference-art *, .inference-art *::before { animation:none!important; transition:none!important; }
  .inference-art .anim,.inference-art .h-anim { opacity:1; stroke-dashoffset:0; }
  .inference-art #ip-pulse,.inference-art #ip-trail { display:none; }
}