/* Cinder 0.1.0 styles. Cinder has one look everywhere; its colors live in the drawing itself. */

.cinder{
  --cinder-size:160px;
  position:relative;
  display:inline-block;
  width:var(--cinder-size);
  height:calc(var(--cinder-size) * 1.2);
  line-height:0;
  vertical-align:middle;
  -webkit-tap-highlight-color:transparent;
}

.cinder-svg{display:block;width:100%;height:100%;overflow:visible}
.cinder-svg *{transform-box:view-box;transform-origin:0 0}
.cinder-svg [data-p="rig"],.cinder-svg [data-p="glow"],.cinder-svg [data-p="embers"]{will-change:transform}
.cinder-svg [data-p="embers"],.cinder-svg [data-p="glow"],.cinder-svg [data-p="ground"]{pointer-events:none}
.cinder .cinder-core{mix-blend-mode:screen}
.cinder-layer,.cinder-canvas{position:absolute;inset:0;width:100%;height:100%}
.cinder-layer{pointer-events:none}
.cinder--interactive .cinder-canvas{cursor:pointer;touch-action:manipulation}

.cinder .c-line{fill:none;stroke:#3A1206;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.cinder .c-thin{stroke-width:2.6}
.cinder .c-z{fill:none;stroke:#FFE7B8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cinder .c-brow{stroke-width:3.4}

/* Expressions start hidden; the script fades them in. */
.cinder [data-p="eyesHappy"],.cinder [data-p="eyesSleepy"],.cinder [data-p="eyesDizzy"],
.cinder [data-p="browWorry"],.cinder [data-p="browCurious"],.cinder [data-p="mGrin"],
.cinder [data-p="mO"],.cinder [data-p="mWorry"],.cinder [data-p="mFlat"]{opacity:0}

.cinder--interactive [data-p="rig"]{cursor:pointer;touch-action:manipulation}

/* Optional say() slot: shows only text the page passes in. */
.cinder-say{
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:6px;
  max-width:16rem;width:max-content;padding:8px 12px;border-radius:12px;
  background:#fff;color:#1E1A17;font:500 .9rem/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.35);
}
.cinder-say[hidden]{display:none}