/* SmileVision "how to" guide (sv_guide.js): the small glass "?" button, the anchored coach card (a bottom sheet on
 * phones) and its looping illustrations. Loaded globally from layouts/base_student.html, after sv_ui.css (tokens).
 * Dark glass by default; .svgd-light (set by the script when the tool sits in a light subtree) switches the palette.
 * Every illustration's resting state is its final frame, so prefers-reduced-motion simply stops the timelines. */

/* ── the "?" button ─────────────────────────────────────────────────────────────────────────────────────── */
.svgd-q {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: 22px; height: 22px; padding: 0; margin: 0 0 0 6px; border-radius: 50%; vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, .14);
  background: radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02) 62%), rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .35);
  color: rgba(203, 213, 225, .78); font: 800 11.5px/1 var(--sv-font, "Open Sans", sans-serif); letter-spacing: 0; text-transform: none;
  text-shadow: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: color .16s, border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.svgd-q:hover, .svgd-q:focus-visible, .svgd-q[aria-expanded="true"] {
  color: #fff; border-color: rgba(var(--sv-accent-rgb, 251, 99, 64), .75);
  background: radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, .18), rgba(255, 255, 255, .02) 62%), rgba(var(--sv-accent-rgb, 251, 99, 64), .22);
  box-shadow: 0 0 0 3px rgba(var(--sv-accent-rgb, 251, 99, 64), .16), 0 4px 14px rgba(var(--sv-accent-rgb, 251, 99, 64), .28), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.svgd-q:focus { outline: none; }
.svgd-q:focus-visible { outline: 2px solid var(--sv-accent, #fb6340); outline-offset: 2px; }
.svgd-q:active { transform: scale(.94); }
/* on a phone the target grows (the circle stays the same size) */
@media (pointer: coarse) { .svgd-q { position: relative; } .svgd-q::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; } }
/* in a light subtree (admin pages in light mode) */
.svu-light .svgd-q, body.bg-gray-100 .svu-themed .svgd-q, [data-theme="light"] .svgd-q, .svgd-light .svgd-q-mini {
  background: #fff; border-color: rgba(15, 23, 42, .18); color: #475569; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.svu-light .svgd-q:hover, .svu-light .svgd-q:focus-visible, .svu-light .svgd-q[aria-expanded="true"],
body.bg-gray-100 .svu-themed .svgd-q:hover, body.bg-gray-100 .svu-themed .svgd-q[aria-expanded="true"],
[data-theme="light"] .svgd-q:hover, [data-theme="light"] .svgd-q[aria-expanded="true"] {
  color: #c2410c; border-color: rgba(var(--sv-accent-rgb, 251, 99, 64), .7); background: rgba(var(--sv-accent-rgb, 251, 99, 64), .1);
  box-shadow: 0 0 0 3px rgba(var(--sv-accent-rgb, 251, 99, 64), .14);
}
/* in a dense one-line header the "?" does not make the line taller */
.svgd-q.svgd-q-tight { margin-top: -6px; margin-bottom: -5px; }
.svgd-q-mini { width: 15px; height: 15px; margin: 0 0 0 3px; font-size: 9px; vertical-align: -3px; cursor: default; pointer-events: none; }

/* ── the coach card ────────────────────────────────────────────────────────────────────────────────────── */
.svgd {
  --svgd-bg-top: rgba(30, 41, 66, .80);
  --svgd-bg-bot: rgba(8, 12, 24, .92);
  --svgd-edge: rgba(255, 255, 255, .13);
  --svgd-text: #d8dee9;
  --svgd-strong: #f8fafc;
  --svgd-muted: #94a3b8;
  --svgd-faint: #64748b;
  --svgd-stage: rgba(2, 6, 16, .62);
  --svgd-ink: rgba(203, 213, 225, .5);
  --svgd-ink-fill: rgba(226, 232, 240, .06);
  position: fixed; left: 0; top: 0; z-index: 10950; box-sizing: border-box;
  width: 348px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
  display: flex; flex-direction: column; border-radius: 18px; color: var(--svgd-text);
  background: linear-gradient(160deg, var(--svgd-bg-top) 0%, rgba(14, 21, 38, .88) 46%, var(--svgd-bg-bot) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--svgd-edge);
  box-shadow: 0 30px 80px -14px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .10);
  font: 400 12.5px/1.45 var(--sv-font, "Open Sans", sans-serif); text-align: left; letter-spacing: 0; text-transform: none;
  animation: svgdIn .22s cubic-bezier(.2, .9, .3, 1.15);
}
.svgd::before {                     /* the glass sheen: a warm glow top-left, a violet one top-right */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(85% 55% at 0% 0%, rgba(var(--sv-accent-rgb, 251, 99, 64), .17), transparent 62%),
    radial-gradient(70% 45% at 100% 0%, rgba(167, 139, 250, .13), transparent 62%);
}
.svgd:focus { outline: none; }
.svgd *, .svgd *::before, .svgd *::after { box-sizing: border-box; }
@keyframes svgdIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

.svgd-arrow {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; display: none;
  background: rgba(31, 42, 67, .98); border: 1px solid var(--svgd-edge); transform: rotate(45deg); border-radius: 3px 0 0 0;
}
.svgd[data-side="bottom"] .svgd-arrow { display: block; top: 0; border-right: 0; border-bottom: 0; }
.svgd[data-side="top"] .svgd-arrow { display: block; top: 100% !important; background: rgba(9, 13, 26, .98); border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }
.svgd[data-side="left"] .svgd-arrow { display: block; left: 100% !important; background: rgba(22, 31, 52, .98); border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; }
.svgd[data-side="right"] .svgd-arrow { display: block; left: 0 !important; background: rgba(22, 31, 52, .98); border-right: 0; border-top: 0; border-radius: 0 0 0 3px; }
.svgd-grab { display: none; }

.svgd-head { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 14px 12px 10px 16px; }
.svgd-ht { flex: 1; min-width: 0; }
.svgd-kicker { display: inline-flex; align-items: center; gap: 5px; font: 800 9.5px/1 var(--sv-font, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #fdba74; }
.svgd-kicker svg { width: 10px; height: 10px; fill: currentColor; }
.svgd-title { margin: 6px 0 0; padding: 0; font: 800 15px/1.25 var(--sv-font, sans-serif); color: var(--svgd-strong); letter-spacing: -.005em; text-transform: none; border: 0; }
.svgd-x {
  flex: none; width: 28px; height: 28px; margin: -3px -2px 0 0; padding: 0; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--svgd-muted); font: 400 19px/1 var(--sv-font, sans-serif); cursor: pointer; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; text-transform: none; letter-spacing: 0;
}
.svgd-x:hover { color: var(--svgd-strong); background: rgba(148, 163, 184, .14); }
.svgd-x:focus-visible, .svgd-step:focus-visible { outline: 2px solid var(--sv-accent, #fb6340); outline-offset: 2px; }
.svgd-x:focus:not(:focus-visible), .svgd-ok:focus:not(:focus-visible), .svgd-step:focus:not(:focus-visible) { outline: none; }

.svgd-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 2px; }

/* the illustration of the step on show */
.svgd-stage {
  position: relative; height: 128px; margin: 0 14px; border-radius: 13px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, rgba(56, 189, 248, .10), transparent 58%), linear-gradient(180deg, var(--svgd-stage), rgba(4, 9, 20, .78));
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -24px 40px rgba(0, 0, 0, .22);
}
.svgd-stage::before {               /* a faint dot grid: a canvas to work on */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(148, 163, 184, .16) 1px, transparent 1.2px); background-size: 14px 14px; background-position: 7px 7px;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 45%, #000 40%, transparent 100%); mask-image: radial-gradient(90% 90% at 50% 45%, #000 40%, transparent 100%);
}
.svgd-stage > svg { position: relative; display: block; width: 100%; height: 100%; animation: svgdFade .28s ease-out; }
.svgd-stage-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 38px/1 var(--sv-font, sans-serif); color: rgba(148, 163, 184, .25); }
@keyframes svgdFade { from { opacity: 0; } to { opacity: 1; } }

/* the steps: the list is the stepper */
.svgd-steps { list-style: none; margin: 10px 0 0; padding: 0 8px; display: flex; flex-direction: column; gap: 1px; counter-reset: none; }
.svgd-steps > li { margin: 0; padding: 0; }
.svgd-step {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%;
  margin: 0; padding: 7px 10px 8px 8px; border: 0; border-radius: 10px; background: transparent; box-shadow: none;
  color: var(--svgd-muted); font: 400 12.5px/1.42 var(--sv-font, sans-serif); text-align: left; text-transform: none; letter-spacing: 0;
  cursor: pointer; transition: background .16s, color .16s;
}
.svgd-step:hover { background: rgba(255, 255, 255, .035); color: var(--svgd-text); }
.svgd-step .n {
  width: 20px; height: 20px; margin-top: -1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(148, 163, 184, .32); color: var(--svgd-muted); font: 800 10.5px/1 var(--sv-font, sans-serif);
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.svgd-step .tx { min-width: 0; }
.svgd-step .tx b { color: var(--svgd-strong); font-weight: 700; }
.svgd-step.on { background: rgba(255, 255, 255, .055); color: var(--svgd-strong); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.svgd-step.on .n { background: var(--sv-grad, linear-gradient(135deg, #f5a623, #fb6340)); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(var(--sv-accent-rgb, 251, 99, 64), .38); }
.svgd-steps > li.past .n { border-color: rgba(var(--sv-accent-rgb, 251, 99, 64), .45); color: #fdba74; }
/* how long the step stays (auto-advance); none once the dentist picks a step or motion is reduced */
.svgd-prog { position: absolute; left: 38px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; }
.svgd-step.on .svgd-prog { opacity: 1; background: rgba(148, 163, 184, .14); }
.svgd-step.on .svgd-prog::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(var(--sv-accent-rgb, 251, 99, 64), .35), var(--sv-accent, #fb6340));
  animation: svgdProg var(--svgd-dwell, 4s) linear forwards;
}
.svgd-paused .svgd-step.on .svgd-prog::after { animation-play-state: paused; }
.svgd-manual .svgd-prog { display: none; }
@keyframes svgdProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* tips and shortcuts */
.svgd-tips { margin: 8px 14px 0; padding: 8px 10px; border-radius: 11px; border: 1px solid rgba(167, 139, 250, .22); background: rgba(167, 139, 250, .07); display: flex; flex-direction: column; gap: 4px; }
.svgd-tips p { margin: 0; display: flex; gap: 8px; align-items: flex-start; font: 400 11.5px/1.45 var(--sv-font, sans-serif); color: var(--svgd-text); }
.svgd-tips svg { flex: none; width: 13px; height: 13px; margin-top: 1px; fill: none; stroke: #c4b5fd; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.svgd-tips b { color: var(--svgd-strong); }
.svgd-keys { margin: 9px 16px 0; display: flex; flex-wrap: wrap; gap: 5px 12px; }
.svgd-key { display: inline-flex; align-items: center; gap: 3px; font: 400 11px/1.3 var(--sv-font, sans-serif); color: var(--svgd-muted); white-space: nowrap; }
.svgd-key i { font-style: normal; color: var(--svgd-faint); font-size: 10px; margin: 0 1px; }
.svgd-key em { font-style: normal; margin-left: 3px; }
.svgd-key kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); border-bottom-width: 2px; box-shadow: none;
  color: #e2e8f0; font: 700 9.5px/1 var(--sv-font, sans-serif); letter-spacing: 0;
}
@media (pointer: coarse) { .svgd-keys { display: none; } }
/* touch: 40 px close and OK buttons (the negative margin keeps the card's header height) */
@media (pointer: coarse) { .svgd-x { width: 40px; height: 40px; margin: -8px -8px 0 0; } .svgd-ok { height: 40px; } }

.svgd-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 14px 16px; }
.svgd-again { font: 400 11px/1.3 var(--sv-font, sans-serif); color: var(--svgd-faint); display: inline-flex; align-items: center; }
.svgd-ok {
  flex: none; height: 32px; padding: 0 18px; margin: 0; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--sv-grad, linear-gradient(135deg, #f5a623, #fb6340)); color: #fff; font: 800 12.5px/1 var(--sv-font, sans-serif);
  letter-spacing: 0; text-transform: none; box-shadow: 0 8px 20px rgba(var(--sv-accent-rgb, 251, 99, 64), .3), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: filter .16s, transform .16s;
}
.svgd-ok:hover { filter: brightness(1.07); }
.svgd-ok:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(6, 9, 14, .9), 0 0 0 4px rgba(var(--sv-accent-rgb, 251, 99, 64), .55), 0 8px 20px rgba(var(--sv-accent-rgb, 251, 99, 64), .3); }
.svgd-ok:active { transform: translateY(1px); }

/* phones: a bottom sheet */
.svgd.svgd-sheet {
  left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: auto; max-width: none; max-height: 78vh; border-radius: 20px; animation: svgdUp .26s cubic-bezier(.2, .9, .3, 1);
}
.svgd-sheet .svgd-arrow { display: none !important; }
.svgd-sheet .svgd-grab { display: block; width: 38px; height: 4px; margin: 8px auto -6px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.svgd-sheet .svgd-stage { height: 136px; }
.svgd-sheet .svgd-step { padding-top: 9px; padding-bottom: 10px; font-size: 13px; }
.svgd-sheet .svgd-ok { height: 40px; padding: 0 24px; font-size: 13.5px; }
@keyframes svgdUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* light subtree (admin pages in light mode) */
.svgd.svgd-light {
  --svgd-bg-top: rgba(255, 255, 255, .92); --svgd-bg-bot: rgba(241, 245, 249, .96); --svgd-edge: rgba(15, 23, 42, .12);
  --svgd-text: #334155; --svgd-strong: #0f172a; --svgd-muted: #475569; --svgd-faint: #64748b;
  background: linear-gradient(160deg, var(--svgd-bg-top), var(--svgd-bg-bot));
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .06);
}
.svgd-light .svgd-arrow { background: #fff !important; }
.svgd-light .svgd-kicker { color: #c2410c; }
.svgd-light .svgd-step:hover, .svgd-light .svgd-step.on { background: rgba(15, 23, 42, .05); }
.svgd-light .svgd-key kbd { background: #fff; border-color: rgba(15, 23, 42, .18); color: #0f172a; }
.svgd-light .svgd-tips { background: rgba(167, 139, 250, .1); }
.svgd-light .svgd-tips svg { stroke: #7c3aed; }

/* ── the illustrations (sv_guide.js ART; viewBox 240 x 100; --L is the loop) ───────────────────────────────── */
.svgd-art { overflow: visible; }
.svgd-art * { animation-duration: var(--L, 3.2s); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.svgd-art .t { fill: rgba(226, 232, 240, .08); stroke: rgba(203, 213, 225, .62); stroke-width: 1.2; stroke-linejoin: round; }
.svgd-art .gv { fill: none; stroke: rgba(203, 213, 225, .22); stroke-width: 1; stroke-linecap: round; }
.svgd-art .c { transform-box: view-box; }
.svgd-art .cp { transform-origin: 0 0; }
.svgd-art .c-p { fill: #fff; stroke: #0b1220; stroke-width: 1; stroke-linejoin: round; }
.svgd-art .c-sh { fill: rgba(0, 0, 0, .45); }
.svgd-art .rp { fill: none; stroke: var(--sv-accent, #fb6340); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.svgd-art .d { stroke: #0b1220; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.svgd-art .cy { fill: #38bdf8; } .svgd-art .pk { fill: #f472b6; } .svgd-art .yl { fill: #facc15; }
.svgd-art .d.da, .svgd-art .d.db { fill: var(--sv-accent, #fb6340); }
.svgd-art .xh { fill: none; stroke: rgba(250, 204, 21, .55); stroke-width: 1.1; stroke-dasharray: 2.5 2.5; }
.svgd-art .xh path { stroke-dasharray: none; }
.svgd-art .gh { fill: none; stroke: rgba(148, 163, 184, .7); stroke-width: 1.1; stroke-dasharray: 2 2; transform-box: fill-box; transform-origin: center; }
.svgd-art .pn { fill: rgba(15, 23, 42, .75); stroke: rgba(148, 163, 184, .28); stroke-width: 1; }
.svgd-art .rw { fill: rgba(148, 163, 184, .07); stroke: rgba(148, 163, 184, .16); stroke-width: 1; }
.svgd-art .br { fill: rgba(148, 163, 184, .32); }
.svgd-art text { font-family: var(--sv-font, "Open Sans", sans-serif); font-weight: 800; text-anchor: middle; }

/* the ceph tools' pictures (CVM: click- / drag-vertebra; airway: click-airway, airway-width, drag-airway) run the
   click-point, drag-point and two-points timelines over the vertebrae C2-C4 or the pharynx */
.svgd-art .vl { font-size: 7px; font-weight: 700; fill: rgba(148, 163, 184, .8); }
.svgd-art .pd { fill: rgba(56, 189, 248, .78); stroke: #0b1220; stroke-width: 1; }
.svgd-art .vb { fill: rgba(226, 232, 240, .04); stroke: rgba(203, 213, 225, .28); stroke-width: 1; }
.svgd-art .pw { fill: none; stroke: rgba(203, 213, 225, .62); stroke-width: 1.2; stroke-linecap: round; }
.svgd-art .mb { fill: none; stroke: rgba(203, 213, 225, .4); stroke-width: 1.1; stroke-dasharray: 3 2.5; }

/* click-point: the cursor goes to the lit target, a click, the point is placed, the next target lights up */
.svgd-a-click-point .c, .svgd-a-click-vertebra .c, .svgd-a-click-airway .c { transform: translate(102px, 42px); animation-name: svgdCpC; }
.svgd-a-click-point .cp, .svgd-a-click-vertebra .cp, .svgd-a-click-airway .cp { animation-name: svgdCpP; }
.svgd-a-click-point .tg, .svgd-a-click-vertebra .tg, .svgd-a-click-airway .tg { fill: none; stroke: #facc15; stroke-width: 1.3; stroke-dasharray: 2.6 2.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation-name: svgdCpTg; }
.svgd-a-click-point .rp, .svgd-a-click-vertebra .rp, .svgd-a-click-airway .rp { animation-name: svgdCpRp; }
.svgd-a-click-point .d, .svgd-a-click-vertebra .d, .svgd-a-click-airway .d { animation-name: svgdCpD; }
.svgd-a-click-point .nx, .svgd-a-click-vertebra .nx, .svgd-a-click-airway .nx { fill: rgba(250, 204, 21, .12); stroke: #facc15; stroke-width: 1.3; stroke-dasharray: 2.6 2.4; transform-box: fill-box; transform-origin: center; animation-name: svgdCpNx; }
@keyframes svgdCpC { 0% { transform: translate(190px, 90px); opacity: 0; } 10% { opacity: 1; } 40%, 86% { transform: translate(102px, 42px); opacity: 1; } 100% { transform: translate(102px, 42px); opacity: 0; } }
@keyframes svgdCpP { 0%, 40% { transform: scale(1); } 44% { transform: scale(.8); } 50%, 100% { transform: scale(1); } }
@keyframes svgdCpTg { 0% { opacity: 0; transform: scale(1.5); } 12% { opacity: 1; transform: scale(1); } 26% { transform: scale(1.18); } 40% { opacity: 1; transform: scale(1); } 46%, 100% { opacity: 0; } }
@keyframes svgdCpRp { 0%, 42% { opacity: 0; transform: scale(.3); } 46% { opacity: 1; } 72%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes svgdCpD { 0%, 43% { transform: scale(0); } 50% { transform: scale(1.4); } 56%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes svgdCpNx { 0%, 58% { opacity: 0; transform: scale(.4); } 66% { opacity: 1; transform: scale(1.15); } 74%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* drag-point: grab a placed point and drag it onto the right spot */
.svgd-a-drag-point .c, .svgd-a-drag-vertebra .c, .svgd-a-drag-airway .c { transform: translate(102px, 42px); animation-name: svgdDpC; }
.svgd-a-drag-point .cp, .svgd-a-drag-vertebra .cp, .svgd-a-drag-airway .cp { animation-name: svgdDpP; }
.svgd-a-drag-point .p, .svgd-a-drag-vertebra .p, .svgd-a-drag-airway .p { transform: translate(102px, 42px); animation-name: svgdDpPt; }
.svgd-a-drag-point .gh, .svgd-a-drag-vertebra .gh, .svgd-a-drag-airway .gh { opacity: 0; animation-name: svgdDpGh; }
@keyframes svgdDpC { 0% { transform: translate(190px, 90px); opacity: 0; } 10% { opacity: 1; } 30%, 34% { transform: translate(116px, 60px); } 70%, 88% { transform: translate(102px, 42px); opacity: 1; } 100% { transform: translate(102px, 42px); opacity: 0; } }
@keyframes svgdDpP { 0%, 30% { transform: scale(1); } 34%, 70% { transform: scale(.85); } 75%, 100% { transform: scale(1); } }
@keyframes svgdDpPt { 0%, 34% { transform: translate(116px, 60px); } 70%, 100% { transform: translate(102px, 42px); } }
@keyframes svgdDpGh { 0%, 34% { opacity: 0; } 40% { opacity: .9; } 80%, 100% { opacity: 0; } }

/* drag-radius: press on the centre, drag outwards: the circle follows */
.svgd-a-drag-radius .sl { fill: rgba(148, 163, 184, .07); stroke: rgba(148, 163, 184, .2); stroke-width: 1; }
.svgd-a-drag-radius .sl2 { fill: rgba(148, 163, 184, .06); }
.svgd-a-drag-radius .les { fill: rgba(2, 6, 16, .8); }
.svgd-a-drag-radius .les2 { fill: rgba(2, 6, 16, .35); }
.svgd-a-drag-radius .rc { fill: rgba(var(--sv-accent-rgb, 251, 99, 64), .13); stroke: var(--sv-accent, #fb6340); stroke-width: 1.6; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation-name: svgdDrR; }
.svgd-a-drag-radius .rl { fill: none; stroke: var(--sv-accent, #fb6340); stroke-width: 1.2; stroke-dasharray: 3 2.5; vector-effect: non-scaling-stroke; transform-origin: 118px 52px; animation-name: svgdDrR; }
.svgd-a-drag-radius .cd { fill: var(--sv-accent, #fb6340); animation-name: svgdDrCd; }
.svgd-a-drag-radius .hd { fill: #fff; stroke: var(--sv-accent, #fb6340); stroke-width: 1.4; animation-name: svgdDrHd; }
.svgd-a-drag-radius .c { transform: translate(142px, 52px); animation-name: svgdDrC; }
.svgd-a-drag-radius .cp { animation-name: svgdDrP; }
@keyframes svgdDrR { 0%, 30% { transform: scale(0); opacity: 1; } 70%, 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes svgdDrCd { 0%, 27% { opacity: 0; } 30%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdDrHd { 0%, 68% { opacity: 0; } 74%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdDrC { 0% { transform: translate(196px, 90px); opacity: 0; } 10% { opacity: 1; } 26%, 30% { transform: translate(118px, 52px); } 70%, 90% { transform: translate(142px, 52px); opacity: 1; } 100% { transform: translate(142px, 52px); opacity: 0; } }
@keyframes svgdDrP { 0%, 26% { transform: scale(1); } 30%, 70% { transform: scale(.85); } 75%, 100% { transform: scale(1); } }

/* drag-box: drag from one corner to the other around what you mean */
.svgd-a-drag-box .les { fill: rgba(2, 6, 16, .85); stroke: rgba(244, 114, 182, .55); stroke-width: 1; }
.svgd-a-drag-box .bx { fill: rgba(var(--sv-accent-rgb, 251, 99, 64), .1); stroke: var(--sv-accent, #fb6340); stroke-width: 1.4; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; transform-origin: 103px 25px; animation-name: svgdDbB; }
.svgd-a-drag-box .hs rect { fill: #fff; stroke: var(--sv-accent, #fb6340); stroke-width: 1; }
.svgd-a-drag-box .hs { animation-name: svgdDbH; }
.svgd-a-drag-box .c { transform: translate(135px, 49px); animation-name: svgdDbC; }
.svgd-a-drag-box .cp { animation-name: svgdDbP; }
@keyframes svgdDbB { 0%, 28% { transform: scale(0); opacity: 1; } 66%, 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes svgdDbH { 0%, 66% { opacity: 0; } 72%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdDbC { 0% { transform: translate(196px, 90px); opacity: 0; } 10% { opacity: 1; } 24%, 28% { transform: translate(103px, 25px); } 66%, 90% { transform: translate(135px, 49px); opacity: 1; } 100% { transform: translate(135px, 49px); opacity: 0; } }
@keyframes svgdDbP { 0%, 24% { transform: scale(1); } 28%, 66% { transform: scale(.85); } 71%, 100% { transform: scale(1); } }

/* scroll-slices: the mouse wheel steps through the slices */
.svgd-a-scroll-slices .s { fill: rgba(148, 163, 184, .06); stroke: rgba(148, 163, 184, .3); stroke-width: 1; }
.svgd-a-scroll-slices .hl { fill: rgba(var(--sv-accent-rgb, 251, 99, 64), .22); stroke: var(--sv-accent, #fb6340); stroke-width: 1.4; transform: translateY(26px); animation-name: svgdSsH; animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
.svgd-a-scroll-slices .ms { fill: rgba(255, 255, 255, .04); stroke: rgba(203, 213, 225, .5); stroke-width: 1.2; }
.svgd-a-scroll-slices .msl { stroke: rgba(203, 213, 225, .35); stroke-width: 1; }
.svgd-a-scroll-slices .wh { fill: var(--sv-accent, #fb6340); animation-name: svgdSsW; }
.svgd-a-scroll-slices .chv { fill: none; stroke: rgba(203, 213, 225, .45); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation-name: svgdSsCh; }
@keyframes svgdSsH { 0%, 16% { transform: translateY(0); } 20%, 36% { transform: translateY(13px); } 40%, 56% { transform: translateY(26px); } 60%, 76% { transform: translateY(39px); } 80%, 100% { transform: translateY(52px); } }
@keyframes svgdSsW { 0%, 14%, 21%, 34%, 41%, 54%, 61%, 74%, 81%, 100% { transform: translateY(0); } 18%, 38%, 58%, 78% { transform: translateY(3px); } }
@keyframes svgdSsCh { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(2px); } }

/* pick-type: choose the right entry from a list */
.svgd-a-pick-type .hl { fill: rgba(var(--sv-accent-rgb, 251, 99, 64), .2); stroke: var(--sv-accent, #fb6340); stroke-width: 1.2; animation-name: svgdPtH; }
.svgd-a-pick-type .ck { fill: none; stroke: #4ade80; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation-name: svgdPtK; }
.svgd-a-pick-type .c { transform: translate(140px, 51px); animation-name: svgdPtC; }
.svgd-a-pick-type .cp { animation-name: svgdCpP; }
@keyframes svgdPtH { 0%, 44% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdPtK { 0%, 50% { stroke-dashoffset: 100; opacity: 1; } 62%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes svgdPtC { 0% { transform: translate(200px, 92px); opacity: 0; } 10% { opacity: 1; } 40%, 88% { transform: translate(140px, 51px); opacity: 1; } 100% { transform: translate(140px, 51px); opacity: 0; } }

/* pick-tooth: click the number on the tooth chart */
.svgd-a-pick-tooth .ch { fill: rgba(148, 163, 184, .08); stroke: rgba(148, 163, 184, .28); stroke-width: 1; }
.svgd-a-pick-tooth .cht { font-size: 7.6px; fill: rgba(203, 213, 225, .75); }
.svgd-a-pick-tooth .mid { stroke: rgba(148, 163, 184, .18); stroke-width: 1; stroke-dasharray: 2 3; }
.svgd-a-pick-tooth .sel { fill: var(--sv-accent, #fb6340); stroke: #fdba74; stroke-width: 1; animation-name: svgdPtH; }
.svgd-a-pick-tooth .selt { font-size: 7.6px; fill: #fff; animation-name: svgdPtH; }
.svgd-a-pick-tooth .c { transform: translate(73px, 40px); animation-name: svgdPkC; }
.svgd-a-pick-tooth .cp { animation-name: svgdCpP; }
@keyframes svgdPkC { 0% { transform: translate(200px, 94px); opacity: 0; } 10% { opacity: 1; } 40%, 88% { transform: translate(73px, 40px); opacity: 1; } 100% { transform: translate(73px, 40px); opacity: 0; } }

/* drag-tooth: drag a number onto another on the chart: they swap */
.svgd-a-drag-tooth .ch { fill: rgba(148, 163, 184, .08); stroke: rgba(148, 163, 184, .28); stroke-width: 1; }
.svgd-a-drag-tooth .cht { font-size: 7.6px; fill: rgba(203, 213, 225, .75); }
.svgd-a-drag-tooth .o1, .svgd-a-drag-tooth .o2 { opacity: 0; animation-name: svgdDtO; }
.svgd-a-drag-tooth .n1, .svgd-a-drag-tooth .n2 { fill: #fff; animation-name: svgdDtN; }
.svgd-a-drag-tooth .tgt { fill: rgba(var(--sv-accent-rgb, 251, 99, 64), .12); stroke: var(--sv-accent, #fb6340); stroke-width: 1.2; stroke-dasharray: 2.5 2; opacity: 0; animation-name: svgdDtT; }
.svgd-a-drag-tooth .sw1, .svgd-a-drag-tooth .sw2 { fill: rgba(var(--sv-accent-rgb, 251, 99, 64), .22); stroke: var(--sv-accent, #fb6340); stroke-width: 1.2; animation-name: svgdDtS; }
.svgd-a-drag-tooth .gc rect { fill: var(--sv-accent, #fb6340); stroke: #fdba74; stroke-width: 1; }
.svgd-a-drag-tooth .gc .cht { fill: #fff; }
.svgd-a-drag-tooth .gc { opacity: 0; transform: translate(144px, 49px); animation-name: svgdDtG; }
.svgd-a-drag-tooth .c { transform: translate(146px, 52px); animation-name: svgdDtC; }
.svgd-a-drag-tooth .cp { animation-name: svgdDtP; }
@keyframes svgdDtO { 0%, 70% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes svgdDtN { 0%, 70% { opacity: 0; } 76%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdDtT { 0%, 46% { opacity: 0; } 54%, 68% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes svgdDtS { 0%, 70% { opacity: 0; } 76%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdDtG { 0%, 24% { opacity: 0; transform: translate(72px, 49px) scale(1); } 30% { opacity: .95; transform: translate(72px, 45px) scale(1.12); } 64% { opacity: .95; transform: translate(144px, 45px) scale(1.12); } 70% { opacity: .95; transform: translate(144px, 49px) scale(1); } 74%, 100% { opacity: 0; transform: translate(144px, 49px); } }
@keyframes svgdDtC { 0% { transform: translate(200px, 92px); opacity: 0; } 10% { opacity: 1; } 22%, 26% { transform: translate(74px, 52px); } 30% { transform: translate(74px, 48px); } 64% { transform: translate(146px, 48px); } 70%, 88% { transform: translate(146px, 52px); opacity: 1; } 100% { transform: translate(146px, 52px); opacity: 0; } }
@keyframes svgdDtP { 0%, 24% { transform: scale(1); } 28%, 68% { transform: scale(.85); } 72%, 100% { transform: scale(1); } }

/* drag-line: press at one end, drag to the other */
.svgd-a-drag-line .ln, .svgd-a-two-points .ln, .svgd-a-airway-width .ln { fill: none; stroke: var(--sv-accent, #fb6340); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.svgd-a-drag-line .ln { animation-name: svgdDlL; }
.svgd-a-drag-line .da { animation-name: svgdDlA; }
.svgd-a-drag-line .db { animation-name: svgdDlB; }
.svgd-a-drag-line .c { transform: translate(174px, 30px); animation-name: svgdDlC; }
.svgd-a-drag-line .cp { animation-name: svgdDlP; }
@keyframes svgdDlL { 0%, 28% { stroke-dashoffset: 100; opacity: 1; } 68%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes svgdDlA { 0%, 24% { transform: scale(0); } 30% { transform: scale(1.35); } 34%, 90% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdDlB { 0%, 67% { transform: scale(0); } 73% { transform: scale(1.35); } 78%, 90% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdDlC { 0% { transform: translate(196px, 92px); opacity: 0; } 10% { opacity: 1; } 22%, 28% { transform: translate(66px, 72px); } 68%, 88% { transform: translate(174px, 30px); opacity: 1; } 100% { transform: translate(174px, 30px); opacity: 0; } }
@keyframes svgdDlP { 0%, 22% { transform: scale(1); } 27%, 68% { transform: scale(.85); } 73%, 100% { transform: scale(1); } }

/* two-points: click one point, then the other: the distance appears */
.svgd-a-two-points .ln, .svgd-a-airway-width .ln { animation-name: svgdTpL; }
.svgd-a-two-points .da, .svgd-a-airway-width .da { animation-name: svgdTpA; }
.svgd-a-two-points .db, .svgd-a-airway-width .db { animation-name: svgdTpB; }
.svgd-a-two-points .ra, .svgd-a-airway-width .ra { animation-name: svgdTpRa; }
.svgd-a-two-points .rb, .svgd-a-airway-width .rb { animation-name: svgdTpRb; }
.svgd-a-two-points .lb rect, .svgd-a-airway-width .lb rect { fill: rgba(8, 14, 28, .92); stroke: rgba(var(--sv-accent-rgb, 251, 99, 64), .6); stroke-width: 1; }
.svgd-a-two-points .lb text, .svgd-a-airway-width .lb text { font-size: 8.4px; fill: #fff; }
.svgd-a-two-points .lb, .svgd-a-airway-width .lb { animation-name: svgdTpLb; }
.svgd-a-two-points .c { transform: translate(172px, 42px); animation-name: svgdTpC; }
.svgd-a-two-points .cp, .svgd-a-airway-width .cp { animation-name: svgdTpP; }
@keyframes svgdTpL { 0%, 60% { stroke-dashoffset: 100; opacity: 1; } 72%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes svgdTpA { 0%, 22% { transform: scale(0); } 27% { transform: scale(1.35); } 31%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdTpB { 0%, 54% { transform: scale(0); } 59% { transform: scale(1.35); } 63%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdTpRa { 0%, 21% { opacity: 0; transform: scale(.3); } 24% { opacity: 1; } 44%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes svgdTpRb { 0%, 53% { opacity: 0; transform: scale(.3); } 56% { opacity: 1; } 76%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes svgdTpLb { 0%, 70% { opacity: 0; transform: translateY(3px); } 78%, 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes svgdTpC { 0% { transform: translate(200px, 94px); opacity: 0; } 8% { opacity: 1; } 20%, 28% { transform: translate(70px, 64px); } 50%, 88% { transform: translate(172px, 42px); opacity: 1; } 100% { transform: translate(172px, 42px); opacity: 0; } }
.svgd-a-airway-width .c { transform: translate(80px, 42px); animation-name: svgdAwC; }
@keyframes svgdAwC { 0% { transform: translate(200px, 94px); opacity: 0; } 8% { opacity: 1; } 20%, 28% { transform: translate(102px, 42px); } 50%, 88% { transform: translate(80px, 42px); opacity: 1; } 100% { transform: translate(80px, 42px); opacity: 0; } }
@keyframes svgdTpP { 0%, 20% { transform: scale(1); } 23% { transform: scale(.8); } 27%, 51% { transform: scale(1); } 55% { transform: scale(.8); } 59%, 100% { transform: scale(1); } }

/* paint / erase: a brush paints the selection on, the eraser paints it off (the same path, both ways) */
.svgd-a-paint .ps, .svgd-a-erase .ps { fill: none; stroke: var(--sv-accent, #fb6340); stroke-opacity: .5; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.svgd-a-paint .ps { animation-name: svgdPaS; animation-timing-function: linear; }
.svgd-a-paint .bru { transform: translate(146px, 64px); animation-name: svgdPaB; animation-timing-function: linear; }
.svgd-a-paint .bru circle { fill: rgba(255, 255, 255, .08); stroke: #fff; stroke-width: 1.2; stroke-dasharray: 2.4 2; }
.svgd-a-paint .bru .bc { fill: #fff; stroke: none; }
@keyframes svgdPaS { 0%, 12% { stroke-dashoffset: 100; opacity: 1; } 78%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes svgdPaB { 0% { transform: translate(94px, 36px); opacity: 0; } 8% { opacity: 1; } 12% { transform: translate(94px, 36px); } 30.65% { transform: translate(146px, 36px); } 35.67% { transform: translate(146px, 50px); } 54.33% { transform: translate(94px, 50px); } 59.35% { transform: translate(94px, 64px); } 78%, 90% { transform: translate(146px, 64px); opacity: 1; } 100% { transform: translate(146px, 64px); opacity: 0; } }
.svgd-a-erase .ps { stroke-dashoffset: 40; animation-name: svgdErS; animation-timing-function: linear; }
.svgd-a-erase .era { transform: translate(101.6px, 50px); animation-name: svgdErE; animation-timing-function: linear; }
.svgd-a-erase .era circle { fill: rgba(244, 114, 182, .14); stroke: #f472b6; stroke-width: 1.4; }
.svgd-a-erase .era path { stroke: #f472b6; stroke-width: 1.6; stroke-linecap: round; }
@keyframes svgdErS { 0% { stroke-dashoffset: 0; opacity: 0; } 8%, 12% { stroke-dashoffset: 0; opacity: 1; } 78%, 100% { stroke-dashoffset: 100; opacity: 1; } }
@keyframes svgdErE { 0% { transform: translate(146px, 64px); opacity: 0; } 8% { opacity: 1; } 12% { transform: translate(146px, 64px); } 30.65% { transform: translate(94px, 64px); } 35.67% { transform: translate(94px, 50px); } 54.33% { transform: translate(146px, 50px); } 59.35% { transform: translate(146px, 36px); } 78%, 90% { transform: translate(94px, 36px); opacity: 1; } 100% { transform: translate(94px, 36px); opacity: 0; } }

/* undo: the last point goes away with Ctrl+Z */
.svgd-a-undo .d { opacity: 0; animation-name: svgdUnD; }
.svgd-a-undo .gh { opacity: .9; animation-name: svgdUnG; }
.svgd-a-undo .ui { transform: translate(126px, 31px); }
.svgd-a-undo .ui circle { fill: rgba(255, 255, 255, .04); stroke: rgba(203, 213, 225, .35); stroke-width: 1; }
.svgd-a-undo .ui path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation-name: svgdUnI; }
.svgd-a-undo .kc rect { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.svgd-a-undo .kc text { font-size: 8px; fill: #e2e8f0; }
.svgd-a-undo .k1, .svgd-a-undo .k2 { animation-name: svgdUnK; }
@keyframes svgdUnD { 0% { opacity: 0; transform: scale(0); } 8% { opacity: 1; transform: scale(1.35); } 13%, 44% { opacity: 1; transform: scale(1); } 54%, 100% { opacity: 0; transform: scale(0); } }
@keyframes svgdUnG { 0%, 46% { opacity: 0; } 54%, 86% { opacity: .9; } 100% { opacity: 0; } }
@keyframes svgdUnI { 0%, 38% { stroke: #fff; transform: rotate(0); } 46% { stroke: var(--sv-accent, #fb6340); transform: rotate(-28deg); } 60%, 100% { stroke: #fff; transform: rotate(0); } }
@keyframes svgdUnK { 0%, 38% { fill: rgba(255, 255, 255, .06); transform: translateY(0); } 42%, 50% { fill: rgba(var(--sv-accent-rgb, 251, 99, 64), .45); transform: translateY(1.5px); } 56%, 100% { fill: rgba(255, 255, 255, .06); transform: translateY(0); } }

/* confirm: press the button, it is done */
.svgd-a-confirm .bt rect { fill: var(--sv-accent, #fb6340); }
.svgd-a-confirm .bt path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svgd-a-confirm .bt { transform-box: fill-box; transform-origin: center; animation-name: svgdCfB; }
.svgd-a-confirm .bd circle { fill: rgba(34, 197, 94, .2); stroke: #22c55e; stroke-width: 1.6; }
.svgd-a-confirm .bd { transform-box: fill-box; transform-origin: center; animation-name: svgdCfD; }
.svgd-a-confirm .bk { fill: none; stroke: #4ade80; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation-name: svgdCfK; }
.svgd-a-confirm .c { transform: translate(146px, 72px); animation-name: svgdCfC; }
.svgd-a-confirm .cp { animation-name: svgdCfP; }
@keyframes svgdCfB { 0%, 40% { transform: scale(1); filter: none; } 45% { transform: scale(.92); filter: brightness(.85); } 52%, 100% { transform: scale(1); filter: none; } }
@keyframes svgdCfD { 0%, 50% { transform: scale(0); opacity: 1; } 58% { transform: scale(1.15); } 64%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdCfK { 0%, 56% { stroke-dashoffset: 100; opacity: 1; } 70%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes svgdCfC { 0% { transform: translate(206px, 96px); opacity: 0; } 10% { opacity: 1; } 38%, 88% { transform: translate(146px, 72px); opacity: 1; } 100% { transform: translate(146px, 72px); opacity: 0; } }
@keyframes svgdCfP { 0%, 40% { transform: scale(1); } 45% { transform: scale(.8); } 52%, 100% { transform: scale(1); } }

/* select-tooth: one click on the crown, the selection grows over it */
.svgd-a-select-tooth .arch { fill: none; stroke: rgba(148, 163, 184, .16); stroke-width: 10; stroke-linecap: round; }
.svgd-a-select-tooth .cw { fill: rgba(226, 232, 240, .08); stroke: rgba(203, 213, 225, .5); stroke-width: 1.2; }
.svgd-a-select-tooth .sel { fill: rgba(var(--sv-accent-rgb, 251, 99, 64), .5); stroke: var(--sv-accent, #fb6340); stroke-width: 1.6; vector-effect: non-scaling-stroke; transform-origin: 122px 42px; animation-name: svgdStS; }
.svgd-a-select-tooth .gl { fill: none; stroke: rgba(var(--sv-accent-rgb, 251, 99, 64), .35); stroke-width: 3; animation-name: svgdStG; }
.svgd-a-select-tooth .c { transform: translate(122px, 42px); animation-name: svgdStC; }
.svgd-a-select-tooth .cp { animation-name: svgdCfP; }
@keyframes svgdStS { 0%, 45% { transform: scale(0); opacity: 1; } 72%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes svgdStG { 0%, 70% { opacity: 0; } 78%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdStC { 0% { transform: translate(200px, 94px); opacity: 0; } 10% { opacity: 1; } 40%, 88% { transform: translate(122px, 42px); opacity: 1; } 100% { transform: translate(122px, 42px); opacity: 0; } }

/* review: confirm one AI finding, remove the next */
.svgd-a-review .ob, .svgd-a-review .xb { fill: rgba(148, 163, 184, .08); stroke: rgba(148, 163, 184, .3); stroke-width: 1; }
.svgd-a-review .obk, .svgd-a-review .xbk { fill: none; stroke: rgba(203, 213, 225, .6); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.svgd-a-review .ok1 { fill: rgba(34, 197, 94, .3); stroke: #22c55e; stroke-width: 1; animation-name: svgdRvO; }
.svgd-a-review .okbar { fill: #22c55e; animation-name: svgdRvO; }
.svgd-a-review .ok1k { fill: none; stroke: #bbf7d0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation-name: svgdRvO; }
.svgd-a-review .no2 { fill: rgba(239, 68, 68, .28); stroke: #ef4444; stroke-width: 1; animation-name: svgdRvN; }
.svgd-a-review .no2k { fill: none; stroke: #fecaca; stroke-width: 1.5; stroke-linecap: round; animation-name: svgdRvN; }
.svgd-a-review .st2 { fill: none; stroke: rgba(226, 232, 240, .8); stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: 0; animation-name: svgdRvS; }
.svgd-a-review .r2 { opacity: .45; animation-name: svgdRvR; }
.svgd-a-review .c { transform: translate(183px, 51px); animation-name: svgdRvC; }
.svgd-a-review .cp { animation-name: svgdRvP; }
@keyframes svgdRvO { 0%, 27% { opacity: 0; } 31%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdRvN { 0%, 60% { opacity: 0; } 64%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdRvS { 0%, 62% { stroke-dashoffset: 100; opacity: 1; } 72%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes svgdRvR { 0%, 61% { opacity: 1; } 68%, 92% { opacity: .45; } 100% { opacity: 1; } }
@keyframes svgdRvC { 0% { transform: translate(214px, 96px); opacity: 0; } 8% { opacity: 1; } 24%, 30% { transform: translate(163px, 25px); } 56%, 88% { transform: translate(183px, 51px); opacity: 1; } 100% { transform: translate(183px, 51px); opacity: 0; } }
@keyframes svgdRvP { 0%, 25% { transform: scale(1); } 28% { transform: scale(.8); } 32%, 57% { transform: scale(1); } 60% { transform: scale(.8); } 64%, 100% { transform: scale(1); } }

/* trace-loop: points around the margin, then the line closes through them */
.svgd-a-trace-loop .rg { fill: rgba(226, 232, 240, .05); stroke: rgba(203, 213, 225, .32); stroke-width: 1.1; stroke-dasharray: 3 3; }
.svgd-a-trace-loop .top { fill: rgba(226, 232, 240, .07); stroke: rgba(203, 213, 225, .22); stroke-width: 1; }
.svgd-a-trace-loop .lp { fill: none; stroke: #22c55e; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation-name: svgdTlL; }
.svgd-a-trace-loop .mp { fill: #facc15; stroke: #0b1220; stroke-width: 1.3; transform-box: fill-box; transform-origin: center; }
.svgd-a-trace-loop .m1 { animation-name: svgdTl1; } .svgd-a-trace-loop .m2 { animation-name: svgdTl2; } .svgd-a-trace-loop .m3 { animation-name: svgdTl3; }
.svgd-a-trace-loop .m4 { animation-name: svgdTl4; } .svgd-a-trace-loop .m5 { animation-name: svgdTl5; } .svgd-a-trace-loop .m6 { animation-name: svgdTl6; }
.svgd-a-trace-loop .c { transform: translate(64.6px, 67px); animation-name: svgdTlC; }
.svgd-a-trace-loop .cp { animation-name: svgdTlP; }
@keyframes svgdTlL { 0%, 52% { stroke-dashoffset: 100; opacity: 1; } 76%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes svgdTl1 { 0%, 8% { transform: scale(0); } 11% { transform: scale(1.35); } 14%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdTl2 { 0%, 16% { transform: scale(0); } 19% { transform: scale(1.35); } 22%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdTl3 { 0%, 24% { transform: scale(0); } 27% { transform: scale(1.35); } 30%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdTl4 { 0%, 32% { transform: scale(0); } 35% { transform: scale(1.35); } 38%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdTl5 { 0%, 40% { transform: scale(0); } 43% { transform: scale(1.35); } 46%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdTl6 { 0%, 48% { transform: scale(0); } 51% { transform: scale(1.35); } 54%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes svgdTlC { 0% { transform: translate(30px, 20px); opacity: 0; } 4% { opacity: 1; } 8% { transform: translate(64.6px, 37px); } 16% { transform: translate(120px, 22px); } 24% { transform: translate(175.4px, 37px); } 32% { transform: translate(175.4px, 67px); } 40% { transform: translate(120px, 82px); } 48%, 88% { transform: translate(64.6px, 67px); opacity: 1; } 100% { transform: translate(64.6px, 67px); opacity: 0; } }
@keyframes svgdTlP { 0%, 7%, 11%, 15%, 19%, 23%, 27%, 31%, 35%, 39%, 43%, 47%, 51%, 100% { transform: scale(1); } 9%, 17%, 25%, 33%, 41%, 49% { transform: scale(.82); } }

/* reduced motion: every timeline stops on its resting (final) frame; no step auto-advance (sv_guide.js) */
@media (prefers-reduced-motion: reduce) {
  .svgd, .svgd.svgd-sheet, .svgd-stage > svg { animation: none; }
  .svgd-art, .svgd-art * { animation: none !important; }
  .svgd-q, .svgd-step, .svgd-step .n, .svgd-ok { transition: none; }
}