/* Blot 0.3.0 styles. Blot's ink colors live in the drawing itself. The floating letters
   pick up the custom properties below, so a site can match them to its own type and colors. */

.blot{
  --blot-size:160px;
  --blot-glyph:#6A78FF;   /* floating letters and sleepy z's */
  --blot-sky:#5CB6FF;     /* letters during the bright blue celebrate */
  --blot-font:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  position:relative;
  display:inline-block;
  width:var(--blot-size);
  height:calc(var(--blot-size) * 1.2);
  line-height:0;
  vertical-align:middle;
  -webkit-tap-highlight-color:transparent;
}

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

.blot .b-line{fill:none;stroke:#04061A;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.blot .b-ridge{stroke:#5566E0;stroke-width:4.4}
.blot .b-thin{stroke-width:2.4}
.blot .b-brow{stroke-width:3.2}
.blot .b-glyph{fill:var(--blot-glyph);font-family:var(--blot-font);font-size:20px;font-style:italic;font-weight:600;line-height:1;user-select:none}
.blot .b-glyph.b-sky{fill:var(--blot-sky)}
.blot .b-z{fill:var(--blot-glyph);font-family:var(--blot-font);font-size:17px;font-style:italic;font-weight:600;user-select:none}

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

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

/* Optional say() slot: shows only text the page passes in. Styled like a small paper note. */
.blot-say{
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:6px;
  max-width:16rem;width:max-content;padding:9px 13px;border-radius:12px;
  background:#FBF7EE;color:#1B1E3A;font:500 .95rem/1.4 var(--blot-font);
  box-shadow:0 10px 28px -10px rgba(10,13,46,.45),0 0 0 1px rgba(27,30,58,.06);
}
.blot-say[hidden]{display:none}