:root {
  --marker-blue: #007dfa;
  --marker-width: 3.5px;
}

[data-marker-scene],
.marker-target {
  position: relative;
  isolation: isolate;
}

.marker-target {
  display: inline-block;
}

.marker-compact-anchor {
  display: inline-block;
  white-space: nowrap;
}

.marker-layer-back,
.marker-layer-front,
.marker-doodle {
  position: absolute;
  display: block;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

.marker-layer-back,
.marker-doodle[data-marker-layer="back"] { z-index: -1; }
.marker-layer-front,
.marker-doodle[data-marker-layer="front"] { z-index: 2; }

.marker-doodle--standard-underline {
  left: -.06em;
  bottom: -.2em;
  width: calc(100% + .12em);
  height: .46em;
}

.marker-doodle--standard-note {
  top: -.76em;
  right: -1.18em;
  width: 1.3em;
  height: 1.55em;
  transform: rotate(-6deg);
  transform-origin: 50% 70%;
}

.marker-doodle--standard-arrow {
  top: -2.65rem;
  right: -.55rem;
  width: 5.5rem;
  height: 3.8rem;
  transform: rotate(-4deg);
}

.marker-doodle--standard-loop {
  top: -1.35em;
  left: -1.1em;
  width: calc(100% + 2.2em);
  height: calc(100% + 2.8em);
}

.marker-doodle--standard-bracket {
  top: -.52em;
  left: -1.05em;
  width: .88em;
  height: calc(100% + 1em);
}

.marker-doodle--standard-wave {
  left: -.03em;
  bottom: -.72em;
  width: min(12em, calc(100% + .2em));
  height: .72em;
}

.marker-doodle__stroke {
  fill: none;
  stroke: var(--marker-blue);
  stroke-width: var(--marker-stroke-width, var(--marker-width));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 280ms cubic-bezier(.4, 0, .75, .2), opacity 100ms ease 180ms;
  transition-delay: 0ms;
}

.marker-note__head {
  fill: var(--marker-blue);
  opacity: 0;
  transform: scale(.82);
  transform-origin: center;
  transition: opacity 160ms ease, transform 180ms ease;
  transition-delay: 0ms;
}

[data-marker-scene].doodle-active .marker-doodle__stroke {
  stroke-dashoffset: 0;
  opacity: .88;
  transition-duration: 560ms;
  transition-timing-function: cubic-bezier(.32, .86, .4, 1);
  transition-delay: calc(var(--scene-delay, 0ms) + var(--doodle-delay, 0ms));
}

[data-marker-scene].doodle-active .marker-note__head {
  opacity: .88;
  transform: scale(1);
  transition-delay: calc(var(--scene-delay, 0ms) + var(--doodle-delay, 0ms));
}

body[data-marker-quiet="true"] .marker-doodle__stroke {
  stroke-dashoffset: 1 !important;
  transition-duration: 280ms !important;
  transition-delay: 0ms !important;
}

body[data-marker-quiet="true"] .marker-note__head {
  opacity: 0 !important;
  transform: scale(.82) !important;
  transition-delay: 0ms !important;
}

html[data-doodles="off"] .marker-doodle { display: none; }

.doodle-toggle {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong, #c9c3b5);
  border-radius: 999px;
  background: var(--paper, #fff);
  box-shadow: var(--lift-2, 0 5px 18px rgba(20, 25, 40, .12));
  color: var(--text, #1a1916);
  cursor: pointer;
  font: 700 10px/1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.doodle-toggle[hidden] { display: none !important; }
.doodle-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.doodle-toggle:focus-within { outline: 2px solid var(--accent, #c7001a); outline-offset: 3px; }
.doodle-toggle__track { position: relative; width: 26px; height: 14px; flex: none; border-radius: 99px; background: var(--border-strong, #c9c3b5); transition: background-color 160ms ease; }
.doodle-toggle__track span { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper, #fff); transition: transform 160ms ease; }
.doodle-toggle input:checked + .doodle-toggle__track { background: var(--marker-blue); }
.doodle-toggle input:checked + .doodle-toggle__track span { transform: translateX(12px); }
.doodle-toggle__state { color: var(--muted, #6f6b62); }

.doodle-toggle--menu {
  position: static;
  width: 100%;
  margin: 0;
  justify-content: flex-start;
  box-shadow: none;
  background: var(--surface, #f1ede2);
}

.scaffold-workspace-active .doodle-toggle,
body[data-marker-toggle="false"] .doodle-toggle { display: none !important; }

@media (max-width: 920px) {
  :root { --marker-width: 3px; }
  .marker-doodle__detail { display: block; }
  .marker-doodle--standard-underline { left: 0; bottom: -.14em; width: 100%; height: .36em; }
  .marker-doodle--standard-note { top: -1.04em; right: 0; width: .76em; height: 1em; }
  .marker-doodle--standard-arrow { top: -1.72rem; right: 0; width: 3.8rem; height: 2.55rem; }
  .marker-doodle--standard-loop { top: -.42em; left: -.18em; width: calc(100% + .36em); height: calc(100% + .82em); }
  .marker-doodle--standard-bracket { top: -.18em; left: -.34em; width: .34em; height: calc(100% + .38em); }
  .marker-doodle--standard-wave { left: 0; bottom: -.43em; width: min(9em, 100%); height: .46em; }
}

@media (prefers-reduced-motion: reduce) {
  .marker-doodle__stroke,
  .marker-note__head,
  .doodle-toggle__track,
  .doodle-toggle__track span { transition: none !important; }
}