/* "Built live" intro — styles for the drawing cursor, selection boxes and typing caret */

/* Hide the page until builder.js has planned what to draw (avoids a flash of the final page) */
html.building:not(.build-ready) body { opacity: 0; }
html.building [data-b]:not(.b-done) { visibility: hidden !important; pointer-events: none; }

.b-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 9999; pointer-events: none; }

/* Cursor with a name tag, like a collaborator in a design tool */
.b-cursor {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity .4s ease;
  will-change: transform;
}
.b-cursor svg {
  display: block;
  width: 26px;
  height: 26px;
  margin: -3px 0 0 -3px;
  fill: var(--ink, #2A1748);
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(42, 23, 72, .35));
  transition: scale .12s ease;
  transform-origin: 4px 3px;
}
.b-cursor.down svg { scale: .82; }
.b-cursor.idle { opacity: 0; }
.b-cursor.flip .b-name { left: auto; right: 12px; border-radius: 9px 2px 9px 9px; }
.b-name {
  position: absolute;
  top: 22px;
  left: 14px;
  padding: 3px 9px;
  font: 600 11.5px/1.4 "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  color: #fff;
  white-space: nowrap;
  background: #7B4CE0;
  border-radius: 2px 9px 9px 9px;
  box-shadow: 0 3px 8px -2px rgba(42, 23, 72, .4);
}

/* Selection box drawn by dragging */
.b-box {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid #8A5CF6;
  background: rgba(155, 111, 232, .08);
  transition: opacity .35s ease;
}
.b-box.round { border-radius: 50%; }
.b-box.text { background: transparent; border-style: dashed; }
.b-box.out { opacity: 0; }
.b-box > i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fff;
  border: 1.5px solid #8A5CF6;
}
.b-box > i:nth-child(1) { top: -4px; left: -4px; }
.b-box > i:nth-child(2) { top: -4px; right: -4px; }
.b-box > i:nth-child(3) { bottom: -4px; left: -4px; }
.b-box > i:nth-child(4) { bottom: -4px; right: -4px; }
.b-box.round > i { display: none; }
.b-size {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  translate: -50% 0;
  padding: 2px 7px;
  font: 600 10.5px/1.4 "Segoe UI", Arial, sans-serif;
  color: #fff;
  white-space: nowrap;
  direction: ltr;
  background: #8A5CF6;
  border-radius: 4px;
}
.b-box.text .b-size { display: none; }

/* Typing caret */
.b-caret {
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-inline: 2px;
  vertical-align: -.12em;
  background: #7B4CE0;
  -webkit-text-fill-color: initial;
  animation: b-blink .8s steps(1) infinite;
}
@keyframes b-blink { 50% { opacity: 0; } }

/* Click ripple */
.b-ripple {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid #8A5CF6;
  border-radius: 50%;
  animation: b-ripple .55s ease-out forwards;
}
@keyframes b-ripple { from { scale: .3; opacity: 1; } to { scale: 1.4; opacity: 0; } }

/* Skip button */
.b-skip {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 20px;
  z-index: 10000;
  padding: 9px 18px;
  font: 500 13px/1 "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  color: var(--ink, #2A1748);
  background: #fff;
  border: 1px solid var(--ink, #2A1748);
  border-radius: 999px;
  box-shadow: 0 3px 0 0 var(--ink, #2A1748);
  cursor: pointer;
}
.b-skip:hover { translate: 0 2px; box-shadow: 0 1px 0 0 var(--ink, #2A1748); }