/* A blog sketch (:::sketch, src/lib/blog/sketch.js). The pencil part is an
   SVG; the words are HTML laid over it, so maths goes through KaTeX and
   long words wrap. Sizes are in cqw of the picture, so the words keep
   their place on the drawing at every width. The editor's sketch pad
   loads this same file. */

@font-face { font-family: "Patrick Hand"; font-weight: 400; font-style: normal; font-display: swap; src: url("/blog/assets/fonts/patrick-hand-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 400; font-style: normal; font-display: swap; src: url("/blog/assets/fonts/caveat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-style: normal; font-display: swap; src: url("/blog/assets/fonts/caveat-latin-700-normal.woff2") format("woff2"); }

.sk { margin: 0 0 1.5em; }
.sk-title { margin: 0 0 6px; font-weight: 700; color: #14203a; }
.sk figcaption { margin-top: 8px; font-size: 0.92em; color: #55607a; }
.sk-pic {
  position: relative; width: 100%; container-type: inline-size; overflow: hidden;
  background: #fbf6e9; border-radius: 10px; box-shadow: 0 1px 0 #e7dcc0, 0 8px 22px -14px rgba(20, 32, 58, .35);
}
.sk-paper-white .sk-pic { background: #ffffff; box-shadow: 0 0 0 1px #e4e7ee; }
.sk-paper-grid .sk-pic, .sk-paper-dots .sk-pic { background: #fdfbf4; }
.sk-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-layer { position: absolute; inset: 0; pointer-events: none; }
.sk-t { position: absolute; line-height: 1.12; margin: 0; overflow-wrap: break-word; }
.sk-t .katex { font-size: 1.05em; }
.sk-f-hand { font-family: "Caveat", "Patrick Hand", "Segoe Print", cursive; }
.sk-f-note { font-family: "Patrick Hand", "Caveat", "Segoe Print", cursive; }
.sk-f-plain { font-family: "Inter", system-ui, sans-serif; line-height: 1.25; }
.sk-bold { font-weight: 700; }
.sk-f-note.sk-bold { font-weight: 400; text-shadow: 0.02em 0 0 currentColor; }
.sk-box, .sk-bubble { display: flex; align-items: center; justify-content: center; }
.sk-box > span, .sk-bubble > span { display: block; width: 100%; }
/* A title's underline: a pencil stroke as wide as the words themselves. */
.sk-ul { position: relative; display: inline-block; padding-bottom: 0.12em; }
.sk-ul-line { position: absolute; left: -0.05em; right: -0.05em; bottom: -0.1em; width: calc(100% + 0.1em); height: 0.24em; overflow: visible; }
.sk-ul-line path { fill: none; stroke: var(--u); stroke-width: 0.075em; stroke-linecap: round; }
/* A group's words: laid out in the group's own box, which is a container
   of its own, so cqw inside it follows the group's size and turn. */
.sk-g { position: absolute; container-type: inline-size; transform-origin: center; }
.sk-t { transform-origin: center; }

/* A bubble marked tap. Without the page script it shows like any other.
   With it (.sk-live) the bubble waits behind three dots, and a tap on
   them brings the bubble and its words in. The pad never adds .sk-live,
   so the author always sees the whole picture. */
.sk-tap {
  position: absolute; top: 0; bottom: 0; margin: 0; padding: 0; border: 0;
  background: transparent; cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; justify-content: center; border-radius: 1.2em;
  font: inherit; color: inherit; -webkit-tap-highlight-color: transparent;
}
.sk-tap[hidden] { display: none; }
.sk-tap:focus-visible { outline: 3px solid #2f6fd6; outline-offset: 2px; }
.sk-tap-dots {
  display: inline-flex; gap: 0.32em; align-items: center; padding: 0.5em 0.85em;
  background: #ffffff; border: 2px solid #1b2b4d; border-radius: 999px;
  box-shadow: 0 2px 0 #1b2b4d; transition: opacity .2s, transform .2s;
}
.sk-tap-dots i { width: 0.42em; height: 0.42em; border-radius: 50%; background: #1b2b4d; display: block; animation: sk-dot 1.4s ease-in-out infinite; }
.sk-tap-dots i:nth-child(2) { animation-delay: .18s; }
.sk-tap-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes sk-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-0.18em); } }
.sk-tap:hover .sk-tap-dots { transform: scale(1.06); }
.sk-live .sk-tap-art { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .28s, transform .28s; }
.sk-live .sk-tap-art:not(.is-open) { opacity: 0; transform: scale(.82); }
.sk-live .sk-tap-say { transition: opacity .28s .08s; }
.sk-live .sk-tap-words:not(.is-open) .sk-tap-say { opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s .15s; }
.sk-live .sk-tap-words.is-open .sk-tap-dots { opacity: 0; transform: scale(.6); }
@media (pointer: coarse) { .sk-tap { min-height: 44px; min-width: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .sk-tap-dots i { animation: none; opacity: .8; }
  .sk-live .sk-tap-art, .sk-live .sk-tap-say, .sk-tap-dots { transition: none; }
}

/* The phone form (.sk-read, set by the page script when a bubble's words
   would be under 15px). Each numbered bubble, box or text shows only its
   number, and its words are listed under the picture at the page's own
   size, each in a bubble of its own. Without the script the list stays
   hidden and the picture shows its words as drawn. */
.sk-n { display: none; }
.sk-read .sk-t[data-n] > span { display: none; }
.sk-read .sk-t[data-n] { display: flex; align-items: center; justify-content: center; }
.sk-read .sk-n {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: #1b2b4d; color: #fff; font: 700 15px/1 "Inter", system-ui, sans-serif;
  box-shadow: 0 0 0 2px #fff;
}
.sk-live.sk-read .sk-tap-words:not(.is-open) .sk-n { visibility: hidden; }
.sk-said { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.sk-said[hidden] { display: none; }
.sk-said-i {
  display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; align-items: start;
  background: #fff; border: 2px solid #1b2b4d; border-radius: 16px; padding: 10px 14px;
  box-shadow: 0 2px 0 #1b2b4d;
}
.sk-said-n {
  width: 28px; height: 28px; border-radius: 50%; background: #1b2b4d; color: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 15px/1 "Inter", system-ui, sans-serif;
  margin-top: 2px;
}
.sk-said-w { font-size: 1.22em; line-height: 1.35; overflow-wrap: anywhere; min-width: 0; align-self: center; }
.sk-said-w.sk-f-hand { font-size: 1.42em; line-height: 1.2; }
.sk-said-w.sk-f-plain { font-size: 1em; }
.sk-said-w .katex { font-size: 1em; }
.sk-said-btn {
  grid-column: 2; justify-self: start; min-height: 44px; padding: 0 14px; margin: 0;
  border: 1.5px solid #1b2b4d; border-radius: 999px; background: #fff; color: #1b2b4d;
  font: 700 0.85em/1 "Inter", system-ui, sans-serif; cursor: pointer;
}
.sk-said-btn[hidden] { display: none; }
.sk-said-btn:focus-visible { outline: 3px solid #2f6fd6; outline-offset: 2px; }
.sk-said-hide { display: none; }
.sk-said-tap.is-open .sk-said-show { display: none; }
.sk-said-tap.is-open .sk-said-hide { display: inline; }
.sk-live .sk-said-tap:not(.is-open) .sk-said-w { display: none; }
.sk-live .sk-said-tap:not(.is-open) .sk-said-btn { grid-row: 1; }