/* A small crew repairs the notebook's edges, never its readable content. */
#hero-name-word {
  white-space: nowrap;
}
/* The complete name remains readable until the 3D story is ready to replace it. */
#hero-name-word.hero-story-ready > #hero-name-letter {
  opacity: var(--hero-letter-opacity, 1);
}
#hero-name-word.hero-story-ready > #hero-name-dot {
  opacity: var(--hero-dot-opacity, 1);
}
.notebook-crew {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.crew-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}
#crew-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.crew-repairs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.crew-bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: 176px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px;
  border: 1px solid #8f9480;
  border-radius: 12px 12px 12px 3px;
  background: var(--folio);
  color: var(--folio-ink);
  font: 12px/1.45 var(--serif);
  pointer-events: none;
}
.crew-repair {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 32px;
  opacity: calc(var(--finish, 1) * var(--spawn, 1));
  pointer-events: none;
  transform-origin: center;
}
.crew-repair svg {
  width: 56px;
  height: 32px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crew-crack {
  stroke: #b7b6a5;
  stroke-width: 1.25;
  opacity: var(--defect, 1);
}
.crew-stitch {
  stroke: #d6a183;
  stroke-width: 1.7;
  stroke-dasharray: 70;
  stroke-dashoffset: calc(70 * (1 - var(--repair, 0)));
}
.crew-thread {
  stroke: #a5b49a;
  stroke-width: 1;
  opacity: calc(var(--repair, 0) * 0.6);
}
.crew-repair-vertical svg {
  transform: rotate(78deg) scale(0.64);
}
.crew-loose-letter {
  position: absolute;
  left: 6px;
  top: -1px;
  font: 25px/1 var(--serif);
  color: var(--accent);
  transform: translateY(calc((1 - var(--repair, 0)) * 5px))
    rotate(calc((1 - var(--repair, 0)) * -23deg));
  opacity: var(--defect, 1);
}
.crew-repair-letter svg {
  transform: none;
}
.crew-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding-inline: 9px;
  border-radius: 5px;
  color: var(--muted);
  font: 10px/1.4 var(--mono);
}
.crew-pause:hover {
  background: var(--surface);
  color: var(--ink);
}
.crew-pause > span {
  display: inline-block;
  width: 8px;
  height: 10px;
  border-inline: 2px solid currentColor;
}
.crew-pause[aria-pressed="true"] > span {
  width: 8px;
  height: 10px;
  border: 5px solid transparent;
  border-left: 8px solid currentColor;
  transform: translateX(2px);
}
.crew-task-label {
  position: absolute;
  left: 50%;
  top: var(--label-y, 68px);
  width: 128px;
  padding: 4px 6px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  font: 10.5px/1.3 var(--mono);
  letter-spacing: -0.035em;
}
.crew-letter-socket {
  position: absolute;
  left: 16px;
  top: 2px;
  width: 24px;
  height: 28px;
  border: 1px dashed #959c87;
  border-radius: 3px;
  background: #b7b6a50b;
  color: var(--accent);
  text-align: center;
  font: 26px/26px var(--serif);
  transform-origin: center;
  transform: scale(var(--target-scale, 1));
}
.crew-letter-ghost {
  color: var(--muted);
  opacity: calc((1 - var(--placed, 0)) * 0.28);
}
.crew-letter-socket > span {
  position: absolute;
  inset: 0;
}
.crew-letter-placed {
  opacity: var(--placed, 0);
  border-radius: 2px;
  background: #d8b575;
  color: #29342d;
}
.crew-spray-mark {
  stroke-width: 2.1;
}
.crew-spray-mark .crew-crack {
  stroke: #bdbaa8;
  stroke-width: 2.1;
  opacity: 1;
  clip-path: inset(0 0 0 calc(var(--repair, 0) * 100%));
}
.crew-spray-mark .crew-stitch {
  stroke: #a5b49a;
  stroke-width: 4;
  stroke-dasharray: 37;
  stroke-dashoffset: calc(37 * (1 - var(--repair, 0)));
}
.crew-spray-mark .crew-crack-outline {
  stroke: #293b2e;
  stroke-width: 4.5;
}
.crew-spray-mark .crew-stitch-outline {
  stroke: #293b2e;
  stroke-width: 6;
}
.crew-repair-featured > svg {
  transform: scale(var(--target-scale, 1));
  transform-origin: center;
}
.crew-repair-featured > .crew-spray-mark {
  transform: rotate(90deg) scale(var(--target-scale, 1));
}
.crew-target-svg {
  opacity: var(--target-visible, 1);
  stroke: #d4d6c3;
  stroke-width: 1.8;
}
.crew-target-svg .target-defect {
  opacity: calc(1 - var(--repair, 0));
}
.crew-target-svg .target-finish {
  opacity: var(--repair, 0);
}
.crew-target-svg .target-paper {
  fill: #c8cbb5;
  stroke: #65715b;
}
.crew-target-svg .target-ink,
.crew-target-svg .target-hole {
  fill: #18221f;
  stroke: #8f9b80;
}
.crew-target-svg .target-metal {
  fill: #bac9c5;
  stroke: #465952;
}
.crew-target-svg .target-dark-line,
.crew-target-svg .target-paper-line {
  stroke: #53624c;
  stroke-width: 2;
}
.crew-target-svg .target-good-line {
  stroke: #a9cda7;
  stroke-width: 2.4;
}
.crew-target-svg .target-metal-line {
  stroke: #bccbc6;
  stroke-width: 3.5;
}
.crew-target-svg .target-screw-turn {
  transform: rotate(calc(var(--repair, 0) * 270deg));
  transform-origin: 28px 16px;
}
.crew-target-svg .target-wood {
  fill: #a07852;
  stroke: #d2ab7f;
}
.crew-target-svg .target-wood-grain {
  stroke: #5a4634;
  stroke-width: 1.3;
}
.crew-target-svg .target-nail-seat {
  transform: translateY(calc(var(--repair, 0) * 8px));
}
.crew-target-svg .target-fold {
  fill: #e2d9b7;
  stroke: #7b8167;
}
.crew-target-svg .target-tear-line {
  stroke: #353f32;
  stroke-width: 2.4;
}
.crew-target-svg .target-glue-line {
  stroke: #d9ba71;
  stroke-width: 4;
}
.crew-target-svg .target-patch {
  fill: #d0ad78;
  stroke: #66553c;
}
.crew-target-svg .target-brick {
  fill: #b77e64;
  stroke: #e6b79a;
}
.crew-target-svg .target-slot {
  stroke: #8f9b80;
  stroke-dasharray: 3 3;
}
.crew-target-svg .target-brick-seat {
  transform: translateY(calc((1 - var(--repair, 0)) * -5px));
}
.crew-target-svg .target-mortar {
  stroke: #c8cbb5;
  stroke-width: 2;
}
.crew-target-svg .target-thread-line {
  stroke: #9b5948;
  stroke-width: 2.2;
  stroke-dasharray: 115;
  stroke-dashoffset: calc((1 - var(--repair, 0)) * 115);
}
.crew-target-svg .target-paint {
  fill: #91aa82;
  stroke: none;
}
.crew-target-svg .target-scratch {
  stroke: #b58a70;
  stroke-width: 4;
}
.crew-target-svg .target-paint-highlight {
  stroke: #b3c5a2;
  stroke-width: 2;
  opacity: 0.55;
}
.crew-target-svg .target-paint-reveal,
.crew-target-svg .target-tape-reveal {
  clip-path: inset(0 0 calc((1 - var(--repair, 0)) * 100%) 0);
}
.crew-target-svg .target-tape {
  fill: #d1b67f;
  stroke: #9d814e;
}
.crew-target-svg .target-tape-center {
  stroke: #e9ce9b;
  stroke-width: 1;
}
.crew-target-svg .target-window {
  fill: #304a50;
  stroke: #c9ceb3;
  stroke-width: 2.5;
}
.crew-target-svg .target-window-frame {
  stroke: #c9ceb3;
  stroke-width: 2;
}
.crew-target-svg .target-dirt {
  fill: #7e775e;
  stroke: #a29778;
}
.crew-target-svg .target-dirt-reveal,
.crew-target-svg .target-ink-reveal {
  opacity: calc(1 - var(--repair, 0));
  clip-path: inset(0 0 0 calc(var(--repair, 0) * 100%));
}
.crew-target-svg .target-glass-shine {
  stroke: #c2e2d9;
  stroke-width: 2;
}
.crew-target-svg .target-floor {
  stroke: #8f9b80;
  stroke-width: 2;
}
.crew-target-svg .target-dust {
  fill: #8e8b75;
  stroke: #bbb39a;
}
.crew-target-svg .target-crumb {
  fill: #c49c6c;
  stroke: #e0bc8d;
  stroke-width: 1.4;
}
.crew-target-svg .target-crumb-sweep {
  opacity: calc(1 - var(--repair, 0));
  transform: translateX(calc(var(--repair, 0) * 16px));
}
.crew-target-svg .target-ink-blot {
  fill: #4d4968;
  stroke: #635e86;
}
.crew-target-svg .target-blot-scribble {
  stroke: #242f3f;
  stroke-width: 3;
}
.crew-target-svg .target-wire {
  stroke: #8cae9a;
  stroke-width: 5;
}
.crew-target-svg .target-plug {
  fill: #a8b6a2;
  stroke: #d3d8c1;
}
.crew-target-svg .target-socket {
  fill: #596e5e;
  stroke: #d3d8c1;
}
.crew-target-svg .target-wire-left {
  transform: translateX(calc((1 - var(--repair, 0)) * -4px));
}
.crew-target-svg .target-wire-right {
  transform: translateX(calc((1 - var(--repair, 0)) * 4px));
}
.crew-target-svg .target-spark {
  stroke: #dab77a;
  stroke-width: 2;
}
.crew-target-svg .target-status {
  fill: #a9cda7;
  stroke: #526949;
}
.crew-target-svg .target-hanger,
.crew-target-svg .target-cord {
  stroke: #c2c8af;
  stroke-width: 2;
}
.crew-target-svg .target-frame {
  fill: #a07852;
  stroke: #d8b68e;
}
.crew-target-svg .target-frame-straighten {
  transform: rotate(calc((1 - var(--repair, 0)) * -16deg));
  transform-origin: 28px -7px;
}
.crew-target-svg .target-landscape {
  fill: #88a47c;
  stroke: none;
}
.crew-target-svg .target-sun {
  fill: #d9ba71;
  stroke: none;
}
.crew-target-svg .target-bulb-glass {
  fill: #a2aca0;
  stroke: #d2d8bf;
}
.crew-target-svg .target-bulb-base {
  fill: #697e76;
  stroke: #c4cfc5;
}
.crew-target-svg .target-bulb-lit {
  fill: #e8c97f;
  stroke: #f4dea3;
}
.crew-target-svg .target-lit-filament {
  stroke: #ffe2a3;
  stroke-width: 2.5;
}
.crew-target-svg .target-bulb-rays {
  stroke: #edce85;
  stroke-width: 2.5;
}
.crew-target-svg .target-sign {
  fill: #d2b67d;
  stroke: #746347;
}
.crew-target-svg .target-dark-dot {
  fill: #746347;
  stroke: none;
}
.crew-target-svg .target-sign-hang {
  opacity: var(--repair, 0);
  transform: translateY(calc((1 - var(--repair, 0)) * -8px));
}
.crew-target-svg .target-gear {
  fill: #9ca9a1;
  stroke: #d4d9c5;
}
.crew-target-svg .target-gear-hole {
  fill: #24312c;
  stroke: #d4d9c5;
}
.crew-target-svg .target-gear-seat {
  opacity: var(--repair, 0);
  transform: translateY(calc(-2px - (1 - var(--repair, 0)) * 12px))
    rotate(calc((1 - var(--repair, 0)) * -35deg));
  transform-origin: 28px 16px;
}
.crew-target-svg .target-pipe {
  fill: #68877c;
  stroke: #c4d3bf;
}
.crew-target-svg .target-pipe-edge {
  stroke: #486759;
  stroke-width: 1;
}
.crew-target-svg .target-water-drop {
  fill: #8fc6ce;
  stroke: #b9e4e5;
  stroke-width: 1;
}
.crew-target-svg .target-water-line {
  stroke: #8fc6ce;
  stroke-width: 2;
}
.crew-target-svg .target-pipe-band {
  fill: #c5b48c;
  stroke: #e0ce9e;
}
.avatar-speech {
  position: absolute;
  left: 14px;
  bottom: 42px;
  z-index: 1;
  max-width: calc(100% - 28px);
  padding: 8px 13px;
  background: var(--folio);
  color: var(--folio-ink);
  border: 1px solid #8f9480;
  border-radius: 14px 14px 14px 2px;
  font: 14px/1.4 var(--serif);
  transform: rotate(-2deg);
  pointer-events: none;
}

@media (max-width: 760px) {
  .crew-repair-vertical svg {
    transform: rotate(78deg) scale(0.43);
  }
  .crew-loose-letter {
    left: 12px;
    top: 3px;
    font-size: 18px;
  }
}