/* ============================================================
   MovingUtah.com / toolkit.css
   The four relocation tools under /resources/:
     agent-referral/          (mu-ref-)
     should-i-move-to-utah/   (mu-qz-)
     relocation-plan/         (mu-rp-)
     drive-times/             (mu-dt-)
   plus the pieces they share (mu-tk-).
   Loaded after tailwind.css and main.min.css, on those pages only.

   Hooks the engines read live in the markup (ids and data-*);
   this file only styles. Brand tokens come from main.css; every
   var() carries its hex so the file stands alone. Text never
   drops below 14px (.875rem). Drawings are champagne line art
   on navy: no new colors, and green, amber and red stay what
   they are everywhere else on the site, state colors.

   Motion: scroll effects hang off .mu-reveal.is-in (site.js adds
   it), so this file needs no observer of its own. Every moving
   part has a still state in the reduced-motion block at the end.
   ============================================================ */

.mu-tk {
  --tk-navy: var(--color-primary-500, #050E3D);
  --tk-navy-deep: var(--color-primary-900, #050929);
  --tk-navy-mid: #0B1750;
  --tk-navy-soft: #1B2654;
  --tk-gold: var(--color-accent-500, #C5A880);
  --tk-gold-soft: var(--color-accent-300, #DCC196);
  --tk-gold-deep: var(--color-accent-600, #AB936B);
  --tk-gold-tint: var(--color-accent-100, #F3EADA);
  --tk-bronze: #856C43;
  --tk-sky: var(--color-secondary-600, #1278A7);
  --tk-sky-soft: var(--color-secondary-300, #5FBCE2);
  --tk-ivory: var(--color-surface-100, #F7F3EC);
  --tk-cream: var(--color-surface-50, #FBF8F2);
  --tk-line: #E6DFD1;
  --tk-line-strong: #CFC6B4;
  --tk-ink: var(--color-neutral-900, #1D1D1D);
  --tk-body: #404040;
  --tk-muted: #595959;
  --tk-serif: var(--font-display, "Source Serif 4", Georgia, serif);
  --tk-sans: var(--font-sans, "Poppins", ui-sans-serif, system-ui, sans-serif);
  --tk-ease: cubic-bezier(.22, 1, .36, 1);
  --tk-shadow: 0 1px 2px rgba(5, 14, 61, .05), 0 8px 24px -12px rgba(5, 14, 61, .18);
  --tk-shadow-lift: 0 2px 4px rgba(5, 14, 61, .06), 0 22px 48px -18px rgba(5, 14, 61, .3);
  --tk-ring: var(--mu-ring-light, #1278A7);
}

/* ------------------------------------------------------------
   SHARED: the hero (words on the left, a drawing on the right)
   Under 1024px the drawing sits behind the words as a faint
   watermark, so the tool stays one short scroll away.
   ------------------------------------------------------------ */
.mu-tk-hero-grid { position: relative; display: grid; gap: 2.5rem; align-items: center; margin-top: 2.25rem; }
.mu-tk-hero-copy { position: relative; z-index: 1; min-width: 0; max-width: 44rem; }
.mu-tk-art { position: relative; margin: 0; }
.mu-tk-art svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 1023.98px) {
  .mu-tk-art { position: absolute; z-index: 0; right: -5.5rem; bottom: -6.5rem; width: min(23rem, 88vw); opacity: .34; pointer-events: none; -webkit-mask-image: linear-gradient(115deg, transparent 12%, #000 62%); mask-image: linear-gradient(115deg, transparent 12%, #000 62%); }
  .mu-tk-art text, .mu-tk-art .mu-ref-states, .mu-tk-art .mu-ref-outs { display: none; }
}
@media (min-width: 1024px) {
  .mu-tk-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 3.5rem; }
}
@media (min-width: 1280px) {
  .mu-tk-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 4.5rem; }
}

/* the small promises under the hero button */
.mu-tk-marks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 2rem 0 0; padding: 1.35rem 0 0; border-top: 1px solid rgba(220, 193, 150, .22); list-style: none; }
.mu-tk-marks li { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--tk-sans); font-size: .9375rem; font-weight: 500; line-height: 1.3; color: #F1EDE4; }
.mu-tk-marks svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--tk-gold-soft); }

/* shared keyframes */
@keyframes mu-tk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mu-tk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mu-tk-pop { 0% { opacity: 0; transform: scale(.2); } 70% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mu-tk-draw { to { stroke-dashoffset: 0; } }
@keyframes mu-tk-halo { 0% { opacity: .75; transform: scale(.35); } 100% { opacity: 0; transform: scale(1); } }
@keyframes mu-tk-breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }

/* ------------------------------------------------------------
   SHARED: bands, cards, form controls
   ------------------------------------------------------------ */
.mu-tk-band { position: relative; padding: 3.5rem 0; scroll-margin-top: 3rem; }
.mu-tk-band-ivory { background: var(--tk-ivory); }
.mu-tk-band-ivory::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 14rem; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.mu-tk-band-white { background: #fff; }
.mu-tk-wrap { position: relative; width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .mu-tk-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .mu-tk-band { padding: 5rem 0; } .mu-tk-wrap { padding: 0 2rem; } }
.mu-tk-band-fine { padding: 2.5rem 0 3rem; border-top: 1px solid var(--tk-line); }
@media (min-width: 1024px) { .mu-tk-band-fine { padding: 3rem 0 3.5rem; } }
.mu-tk-hero { isolation: isolate; }
.mu-tk-intro { margin: 1rem 0 0; max-width: 40rem; font-size: 1.0625rem; line-height: 1.65; color: var(--tk-body); }

.mu-tk-card { position: relative; background: #fff; border: 1px solid var(--tk-line); border-radius: 1.25rem; box-shadow: var(--tk-shadow-lift); }
.mu-tk-card[hidden] { display: none; }
.mu-tk-card-top { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem 1rem; border-radius: 1.2rem 1.2rem 0 0; background: radial-gradient(120% 140% at 85% 0%, #10205F 0%, var(--tk-navy) 50%, var(--tk-navy-deep) 100%); border-bottom: 2px solid var(--tk-gold); color: #fff; }
.mu-tk-card-title { margin: 0; font-family: var(--tk-serif); font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: #fff; }
.mu-tk-card-note { margin: 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 500; line-height: 1.3; color: var(--tk-gold-soft); }
.mu-tk-card-body { padding: 1.5rem; }
@media (min-width: 1024px) { .mu-tk-card-top { padding: 1.25rem 2rem 1.15rem; } .mu-tk-card-body { padding: 2rem; } }

.mu-tk-fields { display: grid; gap: 1.15rem; }
.mu-tk-fields-2 { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .mu-tk-fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mu-tk-field { min-width: 0; }
.mu-tk-field[hidden] { display: none; }
.mu-tk-field .mu-form-label, .mu-tk-fieldset .mu-form-label { font-size: .9375rem; font-weight: 600; }
.mu-tk-in { position: relative; }
.mu-tk-in::before { content: ""; position: absolute; left: .95rem; top: 50%; width: 1.2rem; height: 1.2rem; translate: 0 -50%; background: var(--tk-bronze); -webkit-mask: var(--tk-ico) center / contain no-repeat; mask: var(--tk-ico) center / contain no-repeat; pointer-events: none; transition: background-color .2s; }
.mu-tk-in:focus-within::before { background: var(--tk-sky); }
.mu-tk-in > .mu-form-input { width: 100%; min-height: 3.25rem; padding-left: 2.85rem; border-color: var(--tk-line-strong); border-radius: .75rem; background: #fff; font-size: 1rem; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.mu-tk-in > .mu-form-input:hover { border-color: var(--tk-gold-deep); }
.mu-tk-in > .mu-form-input:focus { border-color: var(--tk-ring); }
.mu-tk-in > select.mu-form-input { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050E3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.15rem; cursor: pointer; }
.mu-tk-area { position: relative; }
.mu-tk-area > .mu-form-input { width: 100%; min-height: 6.5rem; border-color: var(--tk-line-strong); border-radius: .75rem; font-size: 1rem; resize: vertical; transition: border-color .2s, box-shadow .2s; }
.mu-tk-area > .mu-form-input:hover { border-color: var(--tk-gold-deep); }
.mu-tk-help { margin: .4rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--tk-muted); }
[data-ico="user"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5c.8-4 4-6 8-6s7.2 2 8 6'/%3E%3C/svg%3E"); }
[data-ico="mail"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
[data-ico="phone"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.7 4.3-2.2 1.6a12 12 0 0 0 6.1 6.1l1.6-2.2L20 15.5V19a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 3 6.2 2 2 0 0 1 5 4Z'/%3E%3C/svg%3E"); }
[data-ico="pin"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-6.8-5.9-6.8-11.6a6.8 6.8 0 0 1 13.6 0c0 5.7-6.8 11.6-6.8 11.6Z'/%3E%3Ccircle cx='12' cy='9.8' r='2.5'/%3E%3C/svg%3E"); }
[data-ico="clock"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
[data-ico="date"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
[data-ico="flag"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4.5h11.5l-2.2 3.8 2.2 3.7H5'/%3E%3C/svg%3E"); }
[data-ico="car"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17v-3.6a2 2 0 0 1 .3-1l2.1-3.8A2 2 0 0 1 7.7 7.5h8.6a2 2 0 0 1 1.8 1.1l2.1 3.8a2 2 0 0 1 .3 1V17'/%3E%3Cpath d='M3.5 17h17M5.5 17v2.2M18.5 17v2.2M3.8 12.5h16.4'/%3E%3C/svg%3E"); }

.mu-tk-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mu-tk-fieldset > legend { padding: 0; margin: 0 0 .45rem; }

/* two or three big choices in one row */
.mu-tk-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; padding: .3rem; border: 1px solid var(--tk-line-strong); border-radius: .95rem; background: var(--tk-cream); }
.mu-tk-seg-opt { position: relative; display: block; cursor: pointer; }
.mu-tk-seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mu-tk-seg-opt > span { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.75rem; padding: .45rem .9rem; border-radius: .7rem; font-family: var(--tk-sans); font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--tk-navy); text-align: center; transition: background-color .25s, color .25s, box-shadow .25s; }
.mu-tk-seg-opt svg { flex: none; width: 1.2rem; height: 1.2rem; color: var(--tk-bronze); transition: color .25s; }
.mu-tk-seg-opt:hover > span { background: #fff; }
.mu-tk-seg-opt input:checked + span { background: var(--tk-navy); color: #fff; box-shadow: 0 6px 16px -8px rgba(5, 14, 61, .6); }
.mu-tk-seg-opt input:checked + span svg { color: var(--tk-gold-soft); }
.mu-tk-seg-opt input:focus-visible + span { outline: 2px solid var(--tk-ring); outline-offset: 2px; }

/* a checkbox with its sentence */
.mu-tk-check { display: flex; align-items: flex-start; gap: .8rem; cursor: pointer; }
.mu-tk-check input { flex: none; appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; border: 2px solid #8C8C8C; border-radius: .4rem; background: #fff; cursor: pointer; transition: background-color .2s, border-color .2s; }
.mu-tk-check input::after { content: ""; width: .85rem; height: .85rem; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 10 18 19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 10 18 19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat; scale: 0; transition: scale .25s var(--tk-ease); }
.mu-tk-check input:hover { border-color: var(--tk-navy); }
.mu-tk-check input:checked { background: var(--tk-navy); border-color: var(--tk-navy); }
.mu-tk-check input:checked::after { scale: 1; }
.mu-tk-check input:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; }
.mu-tk-check > span { font-size: .875rem; line-height: 1.6; color: var(--tk-muted); }
.mu-tk-check-lg > span { font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--tk-ink); }

.mu-tk-alert { margin-top: 1.25rem; padding: 1rem 1.15rem; border: 1px solid #F1A6AF; border-radius: .75rem; background: #FCEBED; }
.mu-tk-alert[hidden] { display: none; }
.mu-tk-alert p { margin: 0; font-size: .9375rem; line-height: 1.6; color: #861826; }
.mu-tk-pledge { display: flex; align-items: flex-start; gap: .7rem; margin: 1.5rem 0 0; padding: .9rem 1.1rem; border-radius: .75rem; background: color-mix(in oklab, var(--tk-gold-tint) 55%, #fff); border: 1px solid var(--tk-gold-soft); font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--tk-navy); }
.mu-tk-pledge svg { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .05rem; color: var(--tk-bronze); }
.mu-tk-send { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.25rem; }
.mu-tk-send .mu-btn { min-height: 3.25rem; }
@media (max-width: 639.98px) { .mu-tk-send .mu-btn { width: 100%; } }
.mu-tk-legal { margin: 1rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--tk-muted); }
.mu-tk .mu-lead-check { margin: 1rem 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: #861826; }

/* the "sent" panel: the ring draws, then the tick */
.mu-tk-sent { padding: 2.25rem 1.5rem 2.5rem; text-align: center; }
.mu-tk-sent[hidden] { display: none; }
.mu-tk-tick { display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem; }
.mu-tk-tick circle { fill: var(--tk-navy); stroke: var(--tk-gold); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mu-tk-draw .7s var(--tk-ease) .1s forwards; }
.mu-tk-tick path { fill: none; stroke: var(--tk-gold-soft); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mu-tk-draw .45s var(--tk-ease) .7s forwards; }
.mu-tk-sent h3 { margin: 0; font-family: var(--tk-serif); font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--tk-navy); }
.mu-tk-sent p { max-width: 30rem; margin: .75rem auto 0; font-size: 1rem; line-height: 1.65; color: var(--tk-body); }

/* the small print, two notes side by side */
.mu-tk-fine { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .mu-tk-fine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1280px) { .mu-tk-fine-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mu-tk-fine-note { position: relative; padding: 1.15rem 1.25rem 1.2rem 3.4rem; border: 1px solid var(--tk-line); border-radius: 1rem; background: var(--tk-cream); font-size: .875rem; line-height: 1.65; color: var(--tk-body); }
.mu-tk-fine-note strong { font-weight: 600; color: var(--tk-navy); }
.mu-tk-fine-note::before { content: ""; position: absolute; left: 1.15rem; top: 1.2rem; width: 1.4rem; height: 1.4rem; background: var(--tk-bronze); -webkit-mask: var(--tk-ico) center / contain no-repeat; mask: var(--tk-ico) center / contain no-repeat; }
[data-ico="partners"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='17.5' r='2.5'/%3E%3Ccircle cx='18' cy='6.5' r='2.5'/%3E%3Cpath d='M8 15.8c2.5-2.2 1.5-5.6 3.8-7.3 1.3-1 2.6-1.4 3.8-1.6'/%3E%3C/svg%3E"); }
[data-ico="info"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.500'/%3E%3Cpath d='M12 11v5.500M12 7.500v.500'/%3E%3C/svg%3E"); }
[data-ico="roles"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 4.5 6.2v5.3c0 4.4 3 7.7 7.5 9 4.5-1.3 7.5-4.6 7.5-9V6.2Z'/%3E%3Cpath d='m8.8 12 2.3 2.3 4.2-4.6'/%3E%3C/svg%3E"); }

/* ============================================================
   1. AGENT REFERRAL  (mu-ref-)
   ============================================================ */

/* ---- the hero drawing: Utah, my five counties in gold, and the lines out ---- */
.mu-ref-art svg { filter: drop-shadow(0 22px 46px rgba(3, 8, 36, .6)); }
.mu-ref-map { animation: mu-tk-fade .9s ease both; }
.mu-ref-region { fill: var(--rfill, #27507F); stroke: rgba(220, 193, 150, .42); stroke-width: .7; stroke-linejoin: round; opacity: .8; }
.mu-ref-region:nth-child(1) { --rfill: #3C6AA0; }
.mu-ref-region:nth-child(2) { --rfill: #27507F; }
.mu-ref-region:nth-child(3) { --rfill: #4E7CB0; }
.mu-ref-region:nth-child(4) { --rfill: #2A5488; }
.mu-ref-region:nth-child(5) { --rfill: #37669E; }
.mu-ref-region:nth-child(6) { --rfill: #244B7E; }
.mu-ref-region:nth-child(7) { --rfill: #305C92; }
.mu-ref-region:nth-child(8) { --rfill: #456FA2; }
.mu-ref-region:nth-child(9) { --rfill: #22466F; }
.mu-ref-region:nth-child(10) { --rfill: #1C3A66; }
.mu-ref-home { stroke: var(--color-accent-300, #DCC196); stroke-width: 1.1; stroke-linejoin: round; animation: mu-tk-fade 1s ease .35s both, mu-tk-breathe 5s ease-in-out 1.6s infinite; }
.mu-ref-outline { fill: none; stroke: var(--color-accent-500, #C5A880); stroke-width: 1.5; stroke-linejoin: round; }

.mu-ref-arcs { filter: drop-shadow(0 0 2.5px rgba(232, 211, 174, .75)); }
.mu-ref-arc { fill: none; stroke: #EBD9B8; stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; animation: mu-tk-draw 1.15s var(--tk-ease, ease-out) both; animation-delay: calc(1s + var(--n, 0) * .11s); }
.mu-ref-pin { fill: #fff; stroke: var(--color-accent-500, #C5A880); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: mu-tk-pop .5s var(--tk-ease, ease-out) both; animation-delay: calc(1.85s + var(--n, 0) * .11s); }
.mu-ref-arc:nth-child(1), .mu-ref-pin:nth-child(1), .mu-ref-out:nth-child(1), .mu-ref-state:nth-child(1) { --n: 0; }
.mu-ref-arc:nth-child(2), .mu-ref-pin:nth-child(2), .mu-ref-out:nth-child(2), .mu-ref-state:nth-child(2) { --n: 1; }
.mu-ref-arc:nth-child(3), .mu-ref-pin:nth-child(3), .mu-ref-out:nth-child(3), .mu-ref-state:nth-child(3) { --n: 2; }
.mu-ref-arc:nth-child(4), .mu-ref-pin:nth-child(4), .mu-ref-out:nth-child(4), .mu-ref-state:nth-child(4) { --n: 3; }
.mu-ref-arc:nth-child(5), .mu-ref-pin:nth-child(5), .mu-ref-out:nth-child(5), .mu-ref-state:nth-child(5) { --n: 4; }
.mu-ref-arc:nth-child(6), .mu-ref-pin:nth-child(6) { --n: 5; }
.mu-ref-arc:nth-child(7), .mu-ref-pin:nth-child(7) { --n: 6; }
.mu-ref-arc:nth-child(8), .mu-ref-pin:nth-child(8) { --n: 7; }
.mu-ref-arc:nth-child(9), .mu-ref-pin:nth-child(9) { --n: 8; }
.mu-ref-arc:nth-child(10), .mu-ref-pin:nth-child(10) { --n: 9; }
.mu-ref-arc:nth-child(11), .mu-ref-pin:nth-child(11) { --n: 10; }
.mu-ref-out { fill: none; stroke: #F4EEE2; stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1.5 5; opacity: 0; animation: mu-tk-fade .9s ease forwards; animation-delay: calc(2.6s + var(--n, 0) * .16s); }
.mu-ref-state { opacity: 0; animation: mu-tk-fade .8s ease forwards; animation-delay: calc(2.9s + var(--n, 0) * .16s); }
.mu-ref-state rect { fill: rgba(5, 9, 41, .78); stroke: rgba(220, 193, 150, .6); stroke-width: 1; }
.mu-ref-state text { font-family: var(--font-sans, "Poppins", sans-serif); font-size: 14.5px; font-weight: 600; letter-spacing: .05em; fill: var(--color-accent-300, #DCC196); }
.mu-ref-place { font-family: var(--font-sans, "Poppins", sans-serif); font-size: 14.5px; font-weight: 600; letter-spacing: .02em; fill: #fff; paint-order: stroke; stroke: rgba(5, 9, 41, .85); stroke-width: 3px; stroke-linejoin: round; animation: mu-tk-fade .8s ease 2.2s both; }
.mu-ref-place-home { font-size: 16px; font-weight: 700; fill: #fff; animation-delay: .9s; }
.mu-ref-halo { fill: none; stroke: var(--color-accent-300, #DCC196); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: mu-tk-halo 3.2s ease-out 1s infinite; }
.mu-ref-halo-2 { animation-delay: 2.6s; }
.mu-ref-base { fill: var(--color-primary-900, #050929); stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: mu-tk-pop .6s var(--tk-ease, ease-out) .7s both; }
.mu-ref-base-dot { fill: var(--color-accent-300, #DCC196); transform-box: fill-box; transform-origin: center; animation: mu-tk-pop .6s var(--tk-ease, ease-out) .8s both; }
.mu-ref-outs, .mu-ref-states, .mu-ref-pins, .mu-ref-sparks { pointer-events: none; }
.mu-ref-spark { fill: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }

/* ---- three steps on one line ---- */
.mu-ref-steps { position: relative; display: grid; gap: 1.5rem; margin: 2.75rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.mu-ref-step { position: relative; display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 0 1.25rem; align-items: start; }
.mu-ref-medal { position: relative; z-index: 1; display: grid; place-items: center; width: 5.25rem; height: 5.25rem; border-radius: 50%; background: radial-gradient(120% 120% at 30% 15%, #15287A 0%, var(--tk-navy) 55%, var(--tk-navy-deep) 100%); box-shadow: inset 0 0 0 1px rgba(220, 193, 150, .55), 0 0 0 6px #fff, 0 12px 26px -10px rgba(5, 14, 61, .55); color: var(--tk-gold-soft); }
.mu-ref-medal svg { width: 3.1rem; height: 3.1rem; }
.mu-ref-medal .mu-ref-ink-fill { fill: var(--tk-navy); }
.mu-ref-num { position: absolute; z-index: 2; top: -.3rem; left: 3.85rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: linear-gradient(180deg, var(--color-accent-300, #DCC196), var(--color-accent-500, #C5A880)); box-shadow: 0 0 0 3px #fff; font-family: var(--tk-serif); font-size: 1rem; font-weight: 700; line-height: 1; color: var(--tk-navy); }
.mu-ref-step-title { margin: .35rem 0 0; font-family: var(--tk-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--tk-navy); }
.mu-ref-step-text { margin: .5rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--tk-body); }
/* the line that joins them: down the side on a phone, across on a wide screen */
.mu-ref-step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; left: 2.6rem; top: 5.25rem; bottom: -1.5rem; width: 0; border-left: 2px dashed var(--tk-gold-soft); }
@media (min-width: 900px) {
  .mu-ref-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .mu-ref-step { display: block; }
  .mu-ref-step:not(:last-child)::after { content: none; }
  .mu-ref-step-title { margin-top: 1.5rem; }
  .mu-ref-steps::before { content: ""; position: absolute; z-index: 0; left: 2.6rem; right: calc((100% - 5rem) / 3 - 2.6rem); top: 2.6rem; height: 0; border-top: 2px dashed var(--tk-gold-soft); }
  .mu-ref-step-text { max-width: 24rem; }
}
.mu-reveal .mu-ref-medal, .mu-reveal .mu-ref-num { opacity: 0; }
.mu-reveal.is-in .mu-ref-medal { animation: mu-tk-pop .6s var(--tk-ease) both; }
.mu-reveal.is-in .mu-ref-num { animation: mu-tk-pop .5s var(--tk-ease) both; }
.mu-reveal.is-in .mu-ref-step:nth-child(1) .mu-ref-medal { animation-delay: .1s; }
.mu-reveal.is-in .mu-ref-step:nth-child(1) .mu-ref-num { animation-delay: .4s; }
.mu-reveal.is-in .mu-ref-step:nth-child(2) .mu-ref-medal { animation-delay: .45s; }
.mu-reveal.is-in .mu-ref-step:nth-child(2) .mu-ref-num { animation-delay: .75s; }
.mu-reveal.is-in .mu-ref-step:nth-child(3) .mu-ref-medal { animation-delay: .8s; }
.mu-reveal.is-in .mu-ref-step:nth-child(3) .mu-ref-num { animation-delay: 1.1s; }
@keyframes mu-ref-line { from { clip-path: inset(-2px 100% -2px 0); } to { clip-path: inset(-2px 0 -2px 0); } }
@keyframes mu-ref-line-down { from { clip-path: inset(0 -2px 100% -2px); } to { clip-path: inset(0 -2px 0 -2px); } }
.mu-reveal .mu-ref-step::after { clip-path: inset(0 -2px 100% -2px); }
.mu-reveal.is-in .mu-ref-step::after { animation: mu-ref-line-down .5s ease-out both; }
.mu-reveal.is-in .mu-ref-step:nth-child(1)::after { animation-delay: .45s; }
.mu-reveal.is-in .mu-ref-step:nth-child(2)::after { animation-delay: .8s; }
.mu-reveal.mu-ref-steps::before { clip-path: inset(-2px 100% -2px 0); }
.mu-reveal.is-in.mu-ref-steps::before { animation: mu-ref-line 1.2s ease-out .2s both; }

/* ---- the form and the two cards beside it ---- */
.mu-ref-grid { display: grid; gap: 1.75rem; align-items: start; margin-top: 2.25rem; }
@media (min-width: 1024px) { .mu-ref-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; } .mu-ref-side { position: sticky; top: 4.25rem; } }
/* on a phone my card comes first, and the request card is left out (the form is right there) */
@media (max-width: 1023.98px) { .mu-ref-side { order: -1; } .mu-ref-ticket { display: none; } }
.mu-ref-main { min-width: 0; }
.mu-ref-side { display: grid; gap: 1.25rem; min-width: 0; }

.mu-ref-local { position: relative; overflow: hidden; padding: 1.5rem; border-radius: 1.25rem; background: radial-gradient(130% 120% at 90% 0%, #10205F 0%, var(--tk-navy) 48%, var(--tk-navy-deep) 100%); box-shadow: var(--tk-shadow-lift); color: #fff; }
.mu-ref-local::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--tk-gold) 30%, var(--tk-gold-soft) 50%, var(--tk-gold) 70%, transparent); }
.mu-ref-local-map { position: absolute; right: -1rem; bottom: -2.25rem; width: 8.5rem; height: auto; opacity: .3; pointer-events: none; }
.mu-ref-local-map path { fill: none; stroke: var(--tk-gold-soft); stroke-width: 3; stroke-linejoin: round; }
.mu-ref-local-map .mu-ref-local-fill { fill: var(--tk-gold-soft); stroke: none; }
.mu-ref-who { position: relative; display: flex; align-items: center; gap: 1rem; }
.mu-ref-who img { flex: none; width: 4.25rem; height: 4.25rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--tk-navy), 0 0 0 4px var(--tk-gold-soft); }
.mu-ref-who-name { margin: 0; font-family: var(--tk-serif); font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: #fff; }
.mu-ref-who-role { margin: .2rem 0 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--tk-gold-soft); }
.mu-ref-local-text { position: relative; margin: 1.15rem 0 0; font-size: 1rem; line-height: 1.7; color: #F1EDE4; }
.mu-ref-local-text a { color: var(--tk-gold-soft); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(220, 193, 150, .55); transition: color .2s, text-decoration-color .2s; }
.mu-ref-local-text a:hover { color: #fff; text-decoration-color: #fff; }

/* the request, filling in as they type */
.mu-ref-ticket { position: relative; border-radius: 1.25rem; background: #fff; border: 1px solid var(--tk-line); box-shadow: var(--tk-shadow); }
.mu-ref-ticket-head { display: flex; align-items: center; gap: .6rem; padding: .95rem 1.4rem .85rem; border-bottom: 1px solid var(--tk-line); font-family: var(--tk-sans); font-size: .875rem; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--tk-navy); }
.mu-ref-ticket-head::before { content: ""; flex: none; width: .45rem; height: .45rem; rotate: 45deg; border-radius: 1px; background: linear-gradient(135deg, var(--tk-gold-soft), var(--tk-gold-deep)); }
.mu-ref-route { display: block; width: 100%; height: auto; padding: 1.1rem 1.4rem 0; box-sizing: border-box; overflow: visible; }
.mu-ref-route-line { fill: none; stroke: var(--tk-line-strong); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 7; }
.mu-ref-route-go { fill: none; stroke: var(--tk-gold-deep); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--tk-ease); }
.mu-ref-ticket[data-filled="1"] .mu-ref-route-go { stroke-dashoffset: 0; }
.mu-ref-route-a { fill: var(--tk-navy); stroke: var(--tk-gold); stroke-width: 2; }
.mu-ref-route-b { fill: #fff; stroke: var(--tk-line-strong); stroke-width: 2; transition: fill .4s ease .7s, stroke .4s ease .7s; }
.mu-ref-ticket[data-filled="1"] .mu-ref-route-b { fill: var(--tk-gold-soft); stroke: var(--tk-navy); }
.mu-ref-ends { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: .55rem 1.4rem 1.2rem; }
.mu-ref-end-k { margin: 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--tk-muted); }
.mu-ref-end-v { margin: .1rem 0 0; font-family: var(--tk-serif); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; color: var(--tk-navy); overflow-wrap: anywhere; }
.mu-ref-end-b { text-align: right; }
.mu-ref-end-v[data-empty="1"] { font-family: var(--tk-sans); font-size: .9375rem; font-weight: 500; font-style: italic; color: #737373; }
.mu-ref-tear { position: relative; height: 0; border-top: 2px dashed var(--tk-line-strong); margin: 0 1.1rem; }
.mu-ref-tear::before, .mu-ref-tear::after { content: ""; position: absolute; top: -.7rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--tk-ivory); box-shadow: inset 0 0 0 1px var(--tk-line); }
.mu-ref-tear::before { left: -1.8rem; clip-path: inset(0 0 0 50%); }
.mu-ref-tear::after { right: -1.8rem; clip-path: inset(0 50% 0 0); }
.mu-ref-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin: 0; padding: 1.1rem 1.4rem 1.3rem; }
.mu-ref-facts dt { font-family: var(--tk-sans); font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--tk-muted); }
.mu-ref-facts dd { margin: .15rem 0 0; min-height: 1.5rem; font-family: var(--tk-sans); font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--tk-navy); }
.mu-ref-facts dd[data-empty="1"]::before { content: ""; display: block; width: 4.5rem; height: .55rem; margin-top: .5rem; border-radius: 999px; background: var(--tk-line); }
.mu-ref-swap { animation: mu-tk-rise .4s var(--tk-ease) both; }

.mu-ref-form { overflow: hidden; }
.mu-ref-sentwrap { margin: 0; }

/* ------------------------------------------------------------
   SHARED: a plain text button, the notes under a tool, and the
   classes every drawing uses
   ------------------------------------------------------------ */
.mu-tk-textbtn { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0; border: 0; background: none; font-family: var(--tk-sans); font-size: .9375rem; font-weight: 600; line-height: 1.2; color: var(--mu-link, #0F6699); text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: .2em; cursor: pointer; transition: color .2s, text-decoration-color .2s; }
.mu-tk-textbtn::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; background: currentColor; -webkit-mask: var(--tk-ico) center / contain no-repeat; mask: var(--tk-ico) center / contain no-repeat; }
.mu-tk-textbtn:hover { color: var(--tk-navy); text-decoration-color: currentColor; }
.mu-tk-textbtn:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; border-radius: .25rem; }
[data-ico="reset"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5v5h5'/%3E%3Cpath d='M4.6 14a8 8 0 1 0 1-6.300L4 10'/%3E%3C/svg%3E"); }
[data-ico="link"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.500 4.500 0 0 0 6.400 0l3-3a4.500 4.500 0 0 0-6.400-6.400l-1.200 1.200'/%3E%3Cpath d='M14 10a4.500 4.500 0 0 0-6.400 0l-3 3a4.500 4.500 0 0 0 6.400 6.400l1.200-1.200'/%3E%3C/svg%3E"); }
[data-ico="print"] { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3.500h10V9'/%3E%3Crect x='3.500' y='9' width='17' height='8' rx='2'/%3E%3Cpath d='M7 14.500h10v6H7Z'/%3E%3C/svg%3E"); }
.mu-tk-small { max-width: 60rem; margin-top: 2.5rem; }
.mu-tk-small p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--tk-body); }
.mu-tk-small p + p { margin-top: .6rem; }

.mu-art-dim { opacity: .45; }
.mu-art-w { stroke: #fff; }
.mu-art-sky { stroke: var(--color-secondary-300, #5FBCE2); }
.mu-art-fill { fill: var(--art-bg, #0B1750); }
.mu-art-glow { fill: var(--color-accent-300, #DCC196); stroke: none; }
.mu-art-wfill { fill: #fff; stroke: none; }

/* ============================================================
   2. SHOULD I MOVE TO UTAH  (mu-qz-, hero drawing mu-qzh-)
   ============================================================ */

/* ---- the hero drawing: Utah as a window, a compass in the open corner ---- */
.mu-qzh svg { filter: drop-shadow(0 22px 46px rgba(3, 8, 36, .65)); }
.mu-qzh-view { animation: mu-tk-fade 1.1s ease both; }
.mu-qzh-edge { fill: none; stroke: var(--color-accent-500, #C5A880); stroke-width: 2.2; stroke-linejoin: round; }
.mu-qzh-halo { animation: mu-tk-breathe 6s ease-in-out infinite; }
@keyframes mu-qzh-flow { to { stroke-dashoffset: 18; } }
.mu-qzh-road { animation: mu-qzh-flow 1.5s linear infinite; }
.mu-qzh-compass { animation: mu-tk-fade .9s ease .6s both; }
.mu-qzh-compass circle { fill: rgba(5, 9, 41, .6); stroke: var(--color-accent-300, #DCC196); stroke-width: 1.6; }
.mu-qzh-compass > path { fill: none; stroke: var(--color-accent-300, #DCC196); stroke-width: 1.4; stroke-linecap: round; }
@keyframes mu-qzh-seek { 0% { transform: rotate(-34deg); } 16% { transform: rotate(26deg); } 30% { transform: rotate(-15deg); } 43% { transform: rotate(9deg); } 54% { transform: rotate(-4deg); } 64%, 100% { transform: rotate(0deg); } }
.mu-qzh-needle { transform-box: fill-box; transform-origin: center; animation: mu-qzh-seek 7s ease-in-out 1.2s infinite both; }
.mu-qzh-north { fill: var(--color-accent-300, #DCC196); }
.mu-qzh-south { fill: #fff; opacity: .8; }
.mu-qzh-compass .mu-qzh-pivot { fill: var(--color-primary-900, #050929); stroke: var(--color-accent-300, #DCC196); stroke-width: 1.4; }

/* ---- the head: the words, and the three results the quiz can give ---- */
.mu-qz-head { display: grid; gap: 0 3rem; align-items: end; }
@media (min-width: 1024px) { .mu-qz-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .mu-qz-head .mu-tk-intro { margin-top: 0; } }
.mu-qz-kinds { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.mu-qz-kinds li { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .25rem .9rem .25rem .35rem; border-radius: 999px; border: 1px solid var(--tk-line-strong); background: #fff; font-family: var(--tk-sans); font-size: .875rem; font-weight: 600; line-height: 1.2; color: var(--tk-navy); }
.mu-qz-kinds li span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--qz-tone, #4A5578); }
.mu-qz-kinds li span::after { content: ""; width: .85rem; height: .85rem; background: #fff; -webkit-mask: var(--qz-mark) center / contain no-repeat; mask: var(--qz-mark) center / contain no-repeat; }
[data-kind="strong"] { --qz-tone: #2F7D4F; --qz-soft: #E6F3EA; --qz-ink: #1F5C39; --qz-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
[data-kind="mixed"] { --qz-tone: #B7791F; --qz-soft: #FBF0D9; --qz-ink: #6B4508; --qz-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
[data-kind="notfit"] { --qz-tone: #4A5578; --qz-soft: #E9ECF4; --qz-ink: #2B3350; --qz-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }

/* ---- the workspace: the list of questions, the stage, the buttons ---- */
.mu-qz { margin-top: 2.25rem; }
.mu-qz-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.mu-qz-form[hidden] { display: none; }
@media (min-width: 1024px) {
  .mu-qz-form { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 1.5rem 2rem; }
  .mu-qz-rail { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 4.25rem; }
  .mu-qz-stage, .mu-qz-actions { grid-column: 2; }
}

.mu-qz-rail { min-width: 0; }
.mu-qz-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mu-qz-rail-title { margin: 0; font-family: var(--tk-serif); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--tk-navy); }
.mu-qz-rail-done { margin: 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 500; line-height: 1.2; color: var(--tk-muted); white-space: nowrap; }
.mu-qz-trail { position: relative; display: flex; gap: .4rem; margin: .7rem -1rem 0; padding: 5px 1rem; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.mu-qz-trail::-webkit-scrollbar { display: none; }
.mu-qz-trail > li { flex: none; }
.mu-qz-stop { display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.mu-qz-stop-ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; border: 1px solid var(--tk-line-strong); color: var(--tk-navy); transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.mu-qz-stop-ico svg { width: 1.3rem; height: 1.3rem; }
.mu-qz-stop[data-set="1"] .mu-qz-stop-ico { background: var(--tk-navy); border-color: var(--tk-navy); color: var(--tk-gold-soft); }
.mu-qz-stop[aria-current] .mu-qz-stop-ico { box-shadow: 0 0 0 2px var(--tk-ivory), 0 0 0 4px var(--tk-gold); }
.mu-qz-stop:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 3px; }
.mu-qz-stop-w { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1024px) {
  .mu-qz-rail { background: #fff; border: 1px solid var(--tk-line); border-radius: 1.25rem; box-shadow: var(--tk-shadow); overflow: hidden; }
  .mu-qz-rail-head { display: block; padding: 1.1rem 1.25rem 1rem; background: radial-gradient(120% 140% at 85% 0%, #10205F 0%, var(--tk-navy) 50%, var(--tk-navy-deep) 100%); border-bottom: 2px solid var(--tk-gold); }
  .mu-qz-rail-title { font-size: 1.375rem; color: #fff; }
  .mu-qz-rail-done { margin-top: .3rem; color: var(--tk-gold-soft); }
  .mu-qz-trail { position: relative; display: grid; gap: .1rem; margin: 0; padding: .6rem; overflow: visible; }
  .mu-qz-trail::before { content: ""; position: absolute; left: 2.35rem; top: 2rem; bottom: 2rem; border-left: 2px dashed var(--tk-line-strong); }
  .mu-qz-stop { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .8rem; align-items: center; width: 100%; min-height: 3.1rem; padding: .3rem .6rem; border-radius: .85rem; text-align: left; transition: background-color .2s; }
  .mu-qz-stop:hover { background: var(--tk-cream); }
  .mu-qz-stop[aria-current] { background: color-mix(in oklab, var(--tk-gold-tint) 55%, #fff); box-shadow: inset 0 0 0 1px var(--tk-gold); }
  .mu-qz-stop-ico { width: 2.5rem; height: 2.5rem; }
  .mu-qz-stop-ico svg { width: 1.2rem; height: 1.2rem; }
  .mu-qz-stop[aria-current] .mu-qz-stop-ico { box-shadow: none; border-color: var(--tk-gold-deep); }
  .mu-qz-stop-w { position: static; display: block; width: auto; height: auto; margin: 0; overflow: hidden; clip: auto; white-space: normal; min-width: 0; }
  .mu-qz-stop-t { display: block; font-family: var(--tk-sans); font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--tk-navy); }
  .mu-qz-stop-v { display: block; margin-top: .05rem; font-family: var(--tk-sans); font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--tk-sky); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mu-qz-stop-v:empty { display: none; }
}

/* the stage: the drawing on one side, the question on the other */
.mu-qz-stage { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; background: #fff; border: 1px solid var(--tk-line); border-radius: 1.5rem; box-shadow: var(--tk-shadow-lift); overflow: hidden; scroll-margin-top: 4.5rem; }
.mu-qz-scenes { --art-bg: #0B1750; position: relative; display: grid; min-width: 0; background: radial-gradient(130% 120% at 80% 0%, #15287A 0%, var(--tk-navy) 50%, var(--tk-navy-deep) 100%); color: var(--tk-gold-soft); overflow: hidden; }
.mu-qz-scenes::before { content: ""; position: absolute; inset: 0; opacity: .7; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 31% 42%, #DCC196 50%, transparent 51%), radial-gradient(1.4px 1.4px at 58% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 76% 34%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 88% 9%, #DCC196 50%, transparent 51%), radial-gradient(1px 1px at 44% 27%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 68% 48%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 20% 52%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 92% 44%, #fff 50%, transparent 51%); pointer-events: none; }
.mu-qz-scenes::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, transparent, var(--tk-gold) 30%, var(--tk-gold-soft) 50%, var(--tk-gold) 70%, transparent); }
.mu-qz-scene { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 0 .5rem; align-items: end; min-width: 0; padding: 1rem 0 0 1.25rem; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.mu-qz-scene[data-pos="on"] { opacity: 1; visibility: visible; transition: opacity .55s ease .05s, visibility 0s; }
.mu-qz-scene-n { grid-column: 1; grid-row: 1; align-self: start; margin: 0; font-family: var(--tk-serif); font-size: 2.75rem; font-style: italic; font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--tk-gold-soft); }
.mu-qz-scene-t { grid-column: 1; grid-row: 2; align-self: start; margin: .45rem 0 1rem; font-family: var(--tk-sans); font-size: .875rem; font-weight: 600; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; color: var(--tk-gold-soft); }
.mu-qz-scene svg { grid-column: 2; grid-row: 1 / span 2; display: block; width: auto; height: 8.75rem; max-width: 100%; }
@media (min-width: 768px) {
  .mu-qz-stage { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
  .mu-qz-scenes::after { inset: 0 0 0 auto; width: 2px; height: auto; background: linear-gradient(180deg, transparent, var(--tk-gold) 30%, var(--tk-gold-soft) 50%, var(--tk-gold) 70%, transparent); }
  .mu-qz-scene { display: flex; flex-direction: column; align-items: stretch; padding: 1.75rem 0 0; }
  .mu-qz-scene-n { align-self: auto; padding: 0 1.75rem; font-size: 4rem; }
  .mu-qz-scene-t { margin: .6rem 0 0; padding: 0 1.75rem; }
  .mu-qz-scene svg { width: 100%; height: auto; margin-top: auto; }
}
@media (min-width: 1200px) { .mu-qz-stage { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } .mu-qz-scene-n { font-size: 4.75rem; } }

.mu-qz-panel { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem; }
@media (min-width: 1024px) { .mu-qz-panel { padding: 1.75rem 2rem; } }
.mu-qz-progress { display: flex; align-items: center; gap: 1rem; }
.mu-qz-count { margin: 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; color: var(--tk-bronze); white-space: nowrap; }
.mu-qz-track { flex: 1 1 auto; height: .4rem; border-radius: 999px; background: var(--tk-ivory); box-shadow: inset 0 0 0 1px var(--tk-line); overflow: hidden; }
.mu-qz-bar { display: block; width: 10%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--tk-gold-deep), var(--tk-gold-soft)); transition: width .55s var(--tk-ease); }
.mu-qz-steps { display: grid; flex: 1 1 auto; margin-top: 1.25rem; }
.mu-qz-q { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; opacity: 0; visibility: hidden; transform: translateX(2rem); transition: opacity .3s ease, transform .45s var(--tk-ease), visibility 0s linear .45s; }
.mu-qz-q[data-pos="before"] { transform: translateX(-2rem); }
.mu-qz-q[data-pos="on"] { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .1s, transform .5s var(--tk-ease) .06s, visibility 0s; }
.mu-qz-legend { margin: 0; font-family: var(--tk-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--tk-navy); outline: none; }
@media (min-width: 1024px) { .mu-qz-legend { font-size: 1.75rem; } }
.mu-qz-help { margin: .5rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--tk-muted); }
.mu-qz-opts { display: grid; gap: .55rem; margin-top: 1.15rem; }
.mu-qz-opt { position: relative; display: block; cursor: pointer; }
.mu-qz-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mu-qz-opt > span { display: flex; align-items: center; gap: .85rem; min-height: 3.25rem; padding: .6rem 1rem; border: 1px solid var(--tk-line-strong); border-radius: .9rem; background: #fff; font-size: 1.0625rem; line-height: 1.35; color: var(--tk-ink); transition: border-color .2s, background-color .25s, color .25s, box-shadow .25s, transform .3s var(--tk-ease); }
.mu-qz-opt > span::before { content: ""; flex: none; box-sizing: border-box; width: 1.4rem; height: 1.4rem; border: 2px solid #8C8C8C; border-radius: 50%; background: #fff center / .8rem no-repeat; transition: border-color .2s, background-color .2s; }
.mu-qz-opt:hover > span { border-color: var(--tk-gold-deep); background: var(--tk-cream); transform: translateX(3px); }
.mu-qz-opt input:checked + span { border-color: var(--tk-navy); background: var(--tk-navy); color: #fff; font-weight: 600; box-shadow: 0 10px 22px -12px rgba(5, 14, 61, .7); }
.mu-qz-opt input:checked + span::before { border-color: var(--tk-gold-soft); background-color: var(--tk-gold-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050E3D' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 10 18 19.5 6.5'/%3E%3C/svg%3E"); }
.mu-qz-opt input:focus-visible + span { outline: 2px solid var(--tk-ring); outline-offset: 2px; }
.mu-qz-state { margin-top: 1.15rem; max-width: 24rem; }
.mu-qz-select { font-weight: 600; }
.mu-qz-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.35rem; }
.mu-qz-back, .mu-qz-skip { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.2rem; border: 1px solid var(--tk-line-strong); border-radius: 999px; background: #fff; font-family: var(--tk-sans); font-size: .9375rem; font-weight: 600; line-height: 1.2; color: var(--tk-navy); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.mu-qz-back svg { width: 1rem; height: 1rem; transition: transform .3s var(--tk-ease); }
.mu-qz-back:hover svg { transform: translateX(-3px); }
.mu-qz-skip::after { content: "\2192"; font-weight: 400; transition: transform .3s var(--tk-ease); }
.mu-qz-back:hover, .mu-qz-skip:hover { border-color: var(--tk-navy); background: var(--tk-cream); }
.mu-qz-skip:hover::after { transform: translateX(3px); }
.mu-qz-skip[data-on="1"] { background: var(--tk-navy); border-color: var(--tk-navy); color: #fff; }
.mu-qz-skip[data-on="1"]:hover { background: var(--tk-navy-mid); }
.mu-qz-back:focus-visible, .mu-qz-skip:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; }

.mu-qz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.mu-qz-actions .mu-btn { min-height: 3.25rem; }
.mu-qz-actions .mu-btn[data-ready="1"] { background: linear-gradient(180deg, var(--color-accent-400, #D0B388) 0%, var(--color-accent-600, #AB936B) 100%); color: var(--tk-navy); }
@media (max-width: 639.98px) { .mu-qz-actions .mu-btn { width: 100%; } }
.mu-qz-status { flex: 1 1 100%; min-height: 1.5em; margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--tk-navy); }
.mu-qz-status:empty { display: none; }
.mu-qz-error { margin: 1rem 0 0; padding: 1rem 1.25rem; border-radius: .75rem; border: 1px solid #F1A6AF; background: #FCEBED; font-size: 1rem; line-height: 1.5; color: #861826; }
.mu-qz-error[hidden], .mu-qz-result[hidden] { display: none; }

/* ---- the result ---- */
.mu-qz-result { margin-top: 2rem; scroll-margin-top: 5rem; }
.mu-qz-card { overflow: hidden; border: 1px solid var(--tk-line); border-radius: 1.5rem; background: #fff; box-shadow: var(--tk-shadow-lift); animation: mu-tk-rise .6s var(--tk-ease) both; }
.mu-qz-card:focus { outline: none; }
.mu-qz-card:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 3px; }
.mu-qz-top { position: relative; padding: 1.75rem 1.5rem 1.6rem; background: radial-gradient(120% 140% at 85% 0%, #15287A 0%, var(--tk-navy) 48%, var(--tk-navy-deep) 100%); border-bottom: 2px solid var(--tk-gold); color: #fff; }
.mu-qz-top::after { content: ""; position: absolute; right: 2.5rem; top: 50%; width: 9.5rem; aspect-ratio: 336 / 430; translate: 0 -50%; opacity: .22; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 336 430' fill='none' stroke='%23DCC196' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 8h192v83h128v331H8Z'/%3E%3Cpath d='M8 250 70 176l40 44 58-72 60 74 44-40 56 60M8 330h320M96 330v-38q0-30 30-30t30 30v38' stroke-width='4'/%3E%3Ccircle cx='250' cy='150' r='24' stroke-width='4'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
@media (max-width: 767.98px) { .mu-qz-top::after { right: -1.5rem; top: 1rem; width: 7rem; translate: none; opacity: .16; } }
.mu-qz-top > * { position: relative; z-index: 1; }
.mu-qz-kicker { margin: 0 0 .9rem; font-family: var(--tk-sans); font-size: .875rem; font-weight: 600; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; color: var(--tk-gold-soft); }
.mu-qz-label { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .35rem .95rem .35rem .4rem; border-radius: 999px; background: var(--qz-soft, #E9ECF4); font-family: var(--tk-sans); font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--qz-ink, #2B3350); }
.mu-qz-label svg { flex: none; box-sizing: border-box; width: 1.5rem; height: 1.5rem; padding: .3rem; border-radius: 50%; background: var(--qz-tone, #4A5578); color: #fff; }
.mu-qz-card[data-outcome="strong"] { --qz-tone: #2F7D4F; --qz-soft: #E6F3EA; --qz-ink: #1F5C39; }
.mu-qz-card[data-outcome="mixed"] { --qz-tone: #B7791F; --qz-soft: #FBF0D9; --qz-ink: #6B4508; }
.mu-qz-card[data-outcome="notfit"] { --qz-tone: #4A5578; --qz-soft: #E9ECF4; --qz-ink: #2B3350; }
.mu-qz-h { max-width: 40rem; margin: 1rem 0 0; font-family: var(--tk-serif); font-size: 1.875rem; font-weight: 700; line-height: 1.18; color: #fff; }
.mu-qz-meter { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 32rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.mu-qz-meter::before { content: ""; position: absolute; left: 16.666%; right: 16.666%; top: 1.05rem; height: 2px; background: rgba(220, 193, 150, .4); }
.mu-qz-meter-stop { position: relative; display: grid; justify-items: center; gap: .5rem; text-align: center; }
.mu-qz-meter-dot { display: grid; place-items: center; box-sizing: border-box; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid rgba(220, 193, 150, .5); background: var(--tk-navy-mid); color: transparent; }
.mu-qz-meter-dot svg { width: 1.1rem; height: 1.1rem; }
.mu-qz-meter-t { font-family: var(--tk-sans); font-size: .875rem; font-weight: 500; line-height: 1.3; color: #CFC4B0; }
.mu-qz-meter-stop[data-on="1"] .mu-qz-meter-dot { border-color: #fff; background: var(--qz-tone); color: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .13); animation: mu-tk-pop .6s var(--tk-ease) .45s both; }
.mu-qz-meter-stop[data-on="1"] .mu-qz-meter-t { font-weight: 700; color: #fff; }
.mu-qz-body { padding: 1.5rem; }
@media (min-width: 1024px) { .mu-qz-top { padding: 2.25rem 2.5rem 2rem; } .mu-qz-h { font-size: 2.375rem; } .mu-qz-body { padding: 2rem 2.5rem 2.5rem; } }
.mu-qz-text { max-width: 46rem; margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--tk-body); }
.mu-qz-sub { margin: 1.75rem 0 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--tk-navy); }
.mu-qz-why { display: grid; gap: .6rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.mu-qz-why li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .9rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--tk-line); border-radius: .9rem; background: var(--tk-cream); font-size: 1rem; line-height: 1.55; color: var(--tk-ink); animation: mu-tk-rise .5s var(--tk-ease) both; }
.mu-qz-why li:nth-child(1) { animation-delay: .35s; }
.mu-qz-why li:nth-child(2) { animation-delay: .45s; }
.mu-qz-why li:nth-child(3) { animation-delay: .55s; }
.mu-qz-why li:nth-child(4) { animation-delay: .65s; }
.mu-qz-why li:nth-child(n+5) { animation-delay: .75s; }
.mu-qz-why-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tk-navy); color: var(--tk-gold-soft); }
.mu-qz-why-ico svg { width: 1.25rem; height: 1.25rem; }
.mu-qz-offer { margin-top: 1.5rem; padding: 1rem 1.2rem; border-left: 3px solid var(--tk-gold); border-radius: 0 .75rem .75rem 0; background: var(--tk-cream); color: var(--tk-ink); }
.mu-qz-links { display: grid; gap: .5rem; margin: .85rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .mu-qz-why, .mu-qz-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mu-qz-go, .mu-rp-go, .mu-dt-go { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: .6rem 1.1rem; border: 1px solid var(--tk-line-strong); border-radius: .85rem; background: #fff; font-size: 1rem; font-weight: 600; line-height: 1.35; text-decoration: none; transition: border-color .2s, background-color .2s, transform .3s var(--tk-ease); }
.mu-qz-go > span, .mu-rp-go > span, .mu-dt-go > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
.mu-qz-go:hover > span, .mu-rp-go:hover > span, .mu-dt-go:hover > span { text-decoration-color: currentColor; }
.mu-qz-go::after, .mu-rp-go::after, .mu-dt-go::after { content: "\2192"; flex: none; font-weight: 400; transition: transform .3s var(--tk-ease); }
.mu-qz-go:hover, .mu-rp-go:hover, .mu-dt-go:hover { border-color: var(--tk-navy); background: var(--tk-cream); transform: translateY(-1px); }
.mu-qz-go:hover::after, .mu-rp-go:hover::after, .mu-dt-go:hover::after { transform: translateX(3px); }
.mu-qz-acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.mu-qz-acts:empty { display: none; }
.mu-qz-more { margin-top: 1rem; }
.mu-qz-fee { max-width: 46rem; margin: 1.25rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--tk-muted); }

/* ---- the drawings beside the questions: what moves ---- */
.mu-qz-scene:not([data-pos="on"]) * { animation-play-state: paused; }
@keyframes mu-qz-fall { 0% { transform: translateY(-16px); opacity: 0; } 14% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translateY(48px); opacity: 0; } }
.mu-qz-flake { animation: mu-qz-fall 5s linear infinite; }
.mu-qz-flake:nth-child(3n) { animation-duration: 6.4s; animation-delay: -2.1s; }
.mu-qz-flake:nth-child(3n+1) { animation-delay: -3.4s; }
.mu-qz-flake:nth-child(4n+2) { animation-duration: 4.2s; animation-delay: -1.2s; }
@keyframes mu-qz-spin { to { transform: rotate(360deg); } }
.mu-qz-rays { transform-box: fill-box; transform-origin: center; animation: mu-qz-spin 46s linear infinite; }
@keyframes mu-qz-sway { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
.mu-qz-shimmer { animation: mu-qz-sway 2.8s ease-in-out infinite alternate; }
@keyframes mu-qz-drift { from { transform: translateX(-6px); } to { transform: translateX(12px); } }
.mu-qz-cloud { animation: mu-qz-drift 9s ease-in-out infinite alternate; }
.mu-qz-cloud-2 { animation-duration: 12s; animation-direction: alternate-reverse; }
@keyframes mu-qz-roll { to { transform: translateX(-40px); } }
.mu-qz-wave { animation: mu-qz-roll 3.4s linear infinite; }
.mu-qz-wave-2 { animation-duration: 5.2s; animation-direction: reverse; }
.mu-qz-wave-3 { animation-duration: 4.2s; }
@keyframes mu-qz-bob { from { transform: rotate(-2.5deg) translateY(1px); } to { transform: rotate(3deg) translateY(-2px); } }
.mu-qz-bob { transform-box: fill-box; transform-origin: 50% 100%; animation: mu-qz-bob 3.4s ease-in-out infinite alternate; }
@keyframes mu-qz-twinkle { 0%, 100% { opacity: .95; } 50% { opacity: .25; } }
.mu-qz-star { animation: mu-qz-twinkle 3.6s ease-in-out infinite; }
.mu-qz-star:nth-child(2n) { animation-delay: -1.3s; }
.mu-qz-star:nth-child(3n) { animation-delay: -2.4s; animation-duration: 4.6s; }
@keyframes mu-qz-flame { from { transform: scale(1, 1); } to { transform: scale(.88, 1.14); } }
.mu-qz-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: mu-qz-flame .5s ease-in-out infinite alternate; }
@keyframes mu-qz-lit { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.mu-qz-lit { animation: mu-qz-lit 5s ease-in-out infinite; }
.mu-qz-lit-1 { animation-delay: -.6s; }
.mu-qz-lit-2 { animation-delay: -1.7s; animation-duration: 6.5s; }
.mu-qz-lit-3 { animation-delay: -3.1s; animation-duration: 4.2s; }
@keyframes mu-qz-dash { to { transform: translateX(-32px); } }
.mu-qz-dash { animation: mu-qz-dash .7s linear infinite; }
@keyframes mu-qz-rush { 0% { transform: translateX(8px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(-14px); opacity: 0; } }
.mu-qz-rush { animation: mu-qz-rush 1.4s ease-out infinite; }
.mu-qz-wheel { transform-box: fill-box; transform-origin: center; animation: mu-qz-spin .9s linear infinite; }
@keyframes mu-qz-tag { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.mu-qz-tag { transform-box: fill-box; transform-origin: 50% 0; animation: mu-qz-tag 2.6s ease-in-out infinite alternate; }
.mu-qz-flakes, .mu-qz-stars, .mu-qzh-stars { pointer-events: none; }


/* ============================================================
   3. RELOCATION PLAN  (mu-rp-, hero drawing mu-rph-)
   ============================================================ */

/* ---- the hero drawing: the road from one home to the other ---- */
.mu-rph svg { filter: drop-shadow(0 22px 46px rgba(3, 8, 36, .55)); }
.mu-rph-far { animation: mu-tk-fade 1.1s ease both; }
.mu-rph-halo { animation: mu-tk-breathe 6s ease-in-out infinite; }
.mu-rph-ground { fill: none; stroke: rgba(220, 193, 150, .6); stroke-width: 1.5; stroke-linecap: round; }
.mu-rph-from path { fill: none; stroke: rgba(220, 193, 150, .65); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mu-rph-edge { fill: none; stroke: rgba(220, 193, 150, .5); stroke-width: 27; stroke-linecap: round; }
.mu-rph-bed { fill: none; stroke: #0E1B52; stroke-width: 24; stroke-linecap: round; }
@keyframes mu-rph-flow { to { stroke-dashoffset: -18; } }
.mu-rph-mid { fill: none; stroke: #DCC196; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 9 9; animation: mu-rph-flow 1.6s linear infinite; }
.mu-rph-stop { transform-box: fill-box; transform-origin: center; animation: mu-tk-pop .5s var(--tk-ease, ease-out) both; }
.mu-rph-stop:nth-child(1) { animation-delay: .5s; }
.mu-rph-stop:nth-child(2) { animation-delay: .8s; }
.mu-rph-stop:nth-child(3) { animation-delay: 1.1s; }
.mu-rph-stop:nth-child(4) { animation-delay: 1.4s; }
.mu-rph-stop:nth-child(5) { animation-delay: 1.7s; }
.mu-rph-stop circle { fill: #050929; stroke: #DCC196; stroke-width: 2; }
.mu-rph-stop .mu-rph-stop-in { fill: #DCC196; stroke: none; }
.mu-rph-wall { fill: #0B1750; stroke: #DCC196; stroke-width: 1.6; stroke-linejoin: round; }
.mu-rph-roof { fill: #15287A; stroke: #DCC196; stroke-width: 1.6; stroke-linejoin: round; }
.mu-rph-door { fill: #C5A880; }
.mu-rph-win { fill: #E8D3AE; animation: mu-qz-lit 5s ease-in-out infinite; }
@keyframes mu-rph-hop { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.mu-rph-pin { animation: mu-rph-hop 1.1s ease-in-out infinite alternate; }
.mu-rph-pin path { fill: #DCC196; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.mu-rph-pin circle { fill: #050E3D; }
.mu-rph-truck { filter: drop-shadow(0 2px 3px rgba(3, 8, 36, .8)); }
.mu-rph-truck rect { fill: #fff; }
.mu-rph-truck path { fill: #DCC196; }
@keyframes mu-rph-float { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
.mu-rph-float { filter: drop-shadow(0 12px 18px rgba(3, 8, 36, .55)); animation: mu-rph-float 5.5s ease-in-out infinite alternate; }
.mu-rph-float-2 { animation-duration: 6.5s; animation-direction: alternate-reverse; }
.mu-rph-card { fill: #FBF8F2; stroke: rgba(220, 193, 150, .9); stroke-width: 1.2; }
.mu-rph-band, .mu-rph-clip { fill: #C5A880; }
.mu-rph-ring { fill: #050E3D; stroke: #DCC196; stroke-width: 1; }
.mu-rph-cell { fill: #E6DFD1; }
.mu-rph-cell-past { fill: #CFC6B4; }
.mu-rph-day { fill: #050E3D; stroke: #C5A880; stroke-width: 2; }
.mu-rph-day-mark { fill: none; stroke: #DCC196; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mu-rph-box { fill: #fff; stroke: #050E3D; stroke-width: 1.6; }
.mu-rph-line { fill: none; stroke: #CFC6B4; stroke-width: 4; stroke-linecap: round; }
.mu-rph-check { fill: none; stroke: #050E3D; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mu-tk-draw .45s ease-out forwards; }
.mu-rph-check-1 { animation-delay: 1.3s; }
.mu-rph-check-2 { animation-delay: 1.9s; }
.mu-rph-check-3 { animation-delay: 2.5s; }
.mu-rph-stops, .mu-rph-home { pointer-events: none; }

/* ---- the workspace: the questions on the left, the plan on the right ---- */
.mu-rp { margin-top: 2.25rem; }
.mu-rp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; }
@media (min-width: 1024px) { .mu-rp-grid { grid-template-columns: 22.5rem minmax(0, 1fr); gap: 2.25rem; } .mu-rp-form { position: sticky; top: 4.25rem; } }
.mu-rp-form { min-width: 0; }
.mu-rp-form .mu-tk-card-body { padding: 1.35rem 1.35rem 1.5rem; }
.mu-rp-form .mu-tk-seg-opt > span { gap: .4rem; padding: .45rem .5rem; font-size: .9375rem; white-space: nowrap; }
.mu-rp-top-ico { flex: none; width: 1.75rem; height: 1.75rem; color: var(--tk-gold-soft); }
.mu-rp-picks { display: grid; gap: .5rem; }
.mu-rp-pick { position: relative; display: block; cursor: pointer; }
.mu-rp-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mu-rp-pick > span { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) 1.45rem; gap: .75rem; align-items: center; min-height: 3.25rem; padding: .55rem .9rem; border: 1px solid var(--tk-line-strong); border-radius: .8rem; background: #fff; font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--tk-ink); transition: border-color .2s, background-color .25s, box-shadow .25s; }
.mu-rp-pick svg { width: 1.35rem; height: 1.35rem; color: var(--tk-bronze); }
.mu-rp-pick > span::after { content: ""; box-sizing: border-box; width: 1.45rem; height: 1.45rem; border: 2px solid #8C8C8C; border-radius: .4rem; background: #fff center / .85rem no-repeat; transition: border-color .2s, background-color .2s; }
.mu-rp-pick:hover > span { border-color: var(--tk-gold-deep); background: var(--tk-cream); }
.mu-rp-pick input:checked + span { border-color: var(--tk-navy); background: color-mix(in oklab, var(--tk-gold-tint) 55%, #fff); box-shadow: inset 0 0 0 1px var(--tk-navy); font-weight: 600; color: var(--tk-navy); }
.mu-rp-pick input:checked + span::after { border-color: var(--tk-navy); background-color: var(--tk-navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 10 18 19.5 6.5'/%3E%3C/svg%3E"); }
.mu-rp-pick input:focus-visible + span { outline: 2px solid var(--tk-ring); outline-offset: 2px; }
.mu-rp-build { margin-top: .35rem; }
.mu-rp-build .mu-btn { width: 100%; min-height: 3.25rem; }
.mu-rp-form input[type="date"] { min-height: 3.25rem; }
.mu-rp-form [aria-invalid="true"] { border-color: var(--color-danger-500, #C5283D); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-danger-500, #C5283D) 18%, transparent); }
.mu-rp-error { margin: 1rem 0 0; padding: 1rem 1.25rem; border-radius: .75rem; border: 1px solid #F1A6AF; background: #FCEBED; font-size: 1rem; line-height: 1.5; color: #861826; }
.mu-rp-error[hidden] { display: none; }

.mu-rp-results { min-width: 0; scroll-margin-top: 4.5rem; }
.mu-rp-heading { margin: 0; font-family: var(--tk-serif); font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--tk-navy); }
@media (min-width: 1024px) { .mu-rp-heading { font-size: 2rem; } }
.mu-rp-before { margin-top: 1rem; padding: 2rem 1.5rem 2.25rem; border: 2px dashed var(--tk-line-strong); border-radius: 1.25rem; background: rgba(255, 255, 255, .6); text-align: center; }
.mu-rp-before[hidden] { display: none; }
.mu-rp-before svg { display: block; width: min(100%, 22rem); height: auto; margin: 0 auto 1.25rem; }
.mu-rp-before p { max-width: 26rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.6; color: var(--tk-body); }
.mu-rp-ghost-line { fill: none; stroke: var(--tk-gold-soft); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }
.mu-rp-ghost-node { fill: var(--tk-navy); stroke: var(--tk-gold-soft); stroke-width: 2; }
.mu-rp-ghost-card { fill: #fff; stroke: var(--tk-line-strong); stroke-width: 1.2; }
.mu-rp-ghost-chip { fill: var(--tk-ivory); stroke: var(--tk-line); stroke-width: 1; }
.mu-rp-ghost-bar { fill: none; stroke: var(--tk-line); stroke-width: 6; stroke-linecap: round; }

/* the head of the plan: the move day, and the line from the first step to the last */
.mu-rp-sum { position: relative; overflow: hidden; margin-top: 1rem; padding: 1.5rem 1.5rem 1.35rem; border-radius: 1.25rem; background: radial-gradient(120% 140% at 85% 0%, #15287A 0%, var(--tk-navy) 48%, var(--tk-navy-deep) 100%); box-shadow: var(--tk-shadow-lift); color: #fff; animation: mu-tk-rise .55s var(--tk-ease) both; }
.mu-rp-sum[hidden] { display: none; }
.mu-rp-sum::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--tk-gold) 30%, var(--tk-gold-soft) 50%, var(--tk-gold) 70%, transparent); }
.mu-rp-sum-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; }
.mu-rp-sum-k { margin: 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 600; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; color: var(--tk-gold-soft); }
.mu-rp-sum-day { margin: .4rem 0 0; font-family: var(--tk-serif); font-size: 2rem; font-weight: 700; line-height: 1.1; color: #fff; }
@media (min-width: 1024px) { .mu-rp-sum { padding: 1.75rem 2rem 1.5rem; } .mu-rp-sum-day { font-size: 2.5rem; } }
.mu-rp-sum-side { display: grid; justify-items: end; gap: .5rem; }
@media (max-width: 639.98px) { .mu-rp-sum-side { justify-items: start; } }
.mu-rp-sum-left { margin: 0; padding: .3rem .85rem; border-radius: 999px; background: var(--tk-gold-soft); font-family: var(--tk-sans); font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--tk-navy); }
.mu-rp-sum-left[hidden] { display: none; }
.mu-rp-count { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.4; color: #F1EDE4; }
.mu-rp-line { position: relative; height: 4.6rem; margin: 2.4rem .6rem 0; }
.mu-rp-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .45rem; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.mu-rp-line-fill { position: absolute; left: 0; top: 0; width: 0; height: .45rem; border-radius: 999px; background: linear-gradient(90deg, var(--tk-gold-deep), var(--tk-gold-soft)); transition: width 1s var(--tk-ease) .2s; }
.mu-rp-mark { position: absolute; top: -.25rem; display: grid; justify-items: center; gap: .5rem; translate: -50% 0; }
.mu-rp-mark[hidden] { display: none; }
.mu-rp-mark::before { content: ""; box-sizing: border-box; width: .95rem; height: .95rem; border: 2px solid var(--tk-gold-soft); border-radius: 50%; background: var(--tk-navy-mid); }
.mu-rp-mark > span { font-family: var(--tk-sans); font-size: .875rem; font-weight: 500; line-height: 1.25; color: #E9E2D4; white-space: nowrap; }
.mu-rp-mark[data-side="start"] { justify-items: start; translate: -.45rem 0; }
.mu-rp-mark[data-side="end"] { justify-items: end; translate: calc(-100% + .45rem) 0; }
.mu-rp-mark-move::before { width: 1.15rem; height: 1.15rem; margin-top: -.1rem; border-color: #fff; border-radius: 3px; background: var(--tk-gold-soft); rotate: 45deg; }
.mu-rp-mark-move > span { font-weight: 700; color: #fff; }
.mu-rp-mark-today { top: auto; bottom: calc(100% - .1rem); gap: .2rem; z-index: 1; }
.mu-rp-mark-today::before { order: 2; width: 0; height: 0; border: .4rem solid transparent; border-top-color: #fff; border-bottom: 0; border-radius: 0; background: none; }
.mu-rp-mark-today > span { order: 1; padding: .1rem .55rem; border-radius: 999px; background: #fff; font-weight: 700; color: var(--tk-navy); }

.mu-rp-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 1.25rem; }
.mu-rp-tools[hidden] { display: none; }
.mu-rp-tabs { display: inline-flex; padding: .25rem; border: 1px solid var(--tk-line-strong); border-radius: 999px; background: #fff; }
.mu-rp-tab { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.15rem; border: 0; border-radius: 999px; background: none; font-family: var(--tk-sans); font-size: .9375rem; font-weight: 600; line-height: 1.2; color: var(--tk-navy); cursor: pointer; transition: background-color .25s, color .25s; }
.mu-rp-tab svg { width: 1.15rem; height: 1.15rem; }
.mu-rp-tab[aria-pressed="true"] { background: var(--tk-navy); color: #fff; }
.mu-rp-tab:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; }
.mu-rp-acts { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.mu-rp-done { display: none; flex: 1 1 100%; align-items: center; gap: 1rem; }
.mu-rp-results[data-view="checklist"] .mu-rp-done { display: flex; }
.mu-rp-done-t { margin: 0; font-family: var(--tk-sans); font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--tk-navy); white-space: nowrap; }
.mu-rp-done-track { flex: 1 1 auto; height: .5rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--tk-line-strong); overflow: hidden; }
.mu-rp-done-bar { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2F7D4F, #57A877); transition: width .5s var(--tk-ease); }

/* the steps */
.mu-rp-plan { display: grid; gap: 1.75rem; margin-top: 1.5rem; }
.mu-rp-group { position: relative; min-width: 0; animation: mu-tk-rise .5s var(--tk-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.mu-rp-group-head { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .2rem .85rem; align-items: center; }
.mu-rp-node { position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tk-navy); box-shadow: 0 0 0 4px var(--tk-ivory); color: var(--tk-gold-soft); }
.mu-rp-node svg { width: 1.25rem; height: 1.25rem; }
.mu-rp-group[data-group="move"] .mu-rp-node { background: linear-gradient(180deg, var(--color-accent-300, #DCC196), var(--color-accent-500, #C5A880)); color: var(--tk-navy); }
.mu-rp-group-title { margin: 0; font-family: var(--tk-serif); font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--tk-navy); }
.mu-rp-group-side { margin: 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--tk-muted); white-space: nowrap; }
.mu-rp-group-side:empty { display: none; }
.mu-rp-list { display: grid; gap: .6rem; margin: .85rem 0 0; padding: 0; list-style: none; }
@media (max-width: 479.98px) { .mu-rp-group-head { grid-template-columns: 2.5rem minmax(0, 1fr); } .mu-rp-group-side { grid-column: 2; } }
@media (min-width: 640px) {
  .mu-rp-list { padding-left: 3.35rem; }
  .mu-rp-results[data-view="timeline"] .mu-rp-group::before { content: ""; position: absolute; left: 1.2rem; top: 2.75rem; bottom: -1.75rem; border-left: 2px dashed var(--tk-gold-soft); }
  .mu-rp-results[data-view="timeline"] .mu-rp-group:last-child::before { bottom: .5rem; }
}
.mu-rp-task { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .95rem; align-items: start; padding: .9rem 1rem; border: 1px solid var(--tk-line); border-radius: .95rem; background: #fff; box-shadow: 0 1px 2px rgba(5, 14, 61, .04); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.mu-rp-results[data-view="checklist"] .mu-rp-task { grid-template-columns: auto auto minmax(0, 1fr); }
.mu-rp-task:hover { border-color: var(--tk-gold-soft); box-shadow: var(--tk-shadow); }
.mu-rp-task[data-section="utah"] { box-shadow: inset 3px 0 0 var(--tk-gold), 0 1px 2px rgba(5, 14, 61, .04); }
.mu-rp-task[data-done="1"] { background: var(--tk-cream); }
.mu-rp-task[data-done="1"] .mu-rp-text { color: var(--tk-muted); text-decoration: line-through; text-decoration-color: rgba(5, 14, 61, .35); }
.mu-rp-when { margin: 0; }
.mu-rp-when-in { display: grid; justify-items: center; width: 3.35rem; padding: .35rem 0 .45rem; border: 1px solid var(--tk-line); border-radius: .7rem; background: var(--tk-ivory); line-height: 1; }
.mu-rp-when-m { font-family: var(--tk-sans); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tk-bronze); }
.mu-rp-when-d { margin-top: .2rem; font-family: var(--tk-serif); font-size: 1.5rem; font-weight: 700; color: var(--tk-navy); font-variant-numeric: tabular-nums; }
.mu-rp-task[data-past] .mu-rp-when-in { border-color: #E9C98A; background: #FBF0D9; }
.mu-rp-body { min-width: 0; }
.mu-rp-text { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.55; color: var(--tk-ink); }
.mu-rp-past { display: flex; align-items: center; gap: .45rem; margin: .45rem 0 0; font-size: .875rem; font-weight: 600; line-height: 1.4; color: #6B4508; }
.mu-rp-past::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: #B7791F; -webkit-mask: var(--tk-ico) center / contain no-repeat; mask: var(--tk-ico) center / contain no-repeat; --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.500 2.500 20h19Z'/%3E%3Cpath d='M12 10v4.500M12 17.300v.2'/%3E%3C/svg%3E"); }
.mu-rp-note { margin: .4rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--tk-body); }
.mu-rp-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: .35rem 0 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.5; }
.mu-rp-links a { display: inline-block; padding: .3rem 0; }
.mu-rp-src { margin: .3rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--tk-muted); }
.mu-rp-tag { display: inline-flex; align-items: center; gap: .4rem; margin: .65rem 0 0; padding: .2rem .75rem .2rem .5rem; border: 1px solid var(--tk-line); border-radius: 999px; background: var(--tk-ivory); font-family: var(--tk-sans); font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--tk-navy); }
.mu-rp-tag svg { width: 1rem; height: 1rem; color: var(--tk-bronze); }
.mu-rp-tick { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.3rem -.4rem -.3rem -.5rem; cursor: pointer; }
.mu-rp-tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mu-rp-box { box-sizing: border-box; width: 1.65rem; height: 1.65rem; border: 2px solid #8C8C8C; border-radius: .45rem; background: #fff center / 1rem no-repeat; transition: background-color .2s, border-color .2s, scale .3s var(--tk-ease); }
.mu-rp-tick:hover .mu-rp-box { border-color: var(--tk-navy); }
.mu-rp-tick input:checked + .mu-rp-box { border-color: #2F7D4F; background-color: #2F7D4F; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 10 18 19.5 6.5'/%3E%3C/svg%3E"); scale: 1.06; }
.mu-rp-tick input:focus-visible + .mu-rp-box { outline: 2px solid var(--tk-ring); outline-offset: 2px; }

.mu-rp-read { margin-top: 2rem; padding: 1.35rem 1.35rem 1.5rem; border: 1px solid var(--tk-line); border-radius: 1.25rem; background: #fff; }
.mu-rp-read[hidden] { display: none; }
.mu-rp-read-title { margin: 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--tk-navy); }
.mu-rp-read-list { display: grid; gap: .5rem; margin: .85rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .mu-rp-read-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- send the plan ---- */
.mu-rp-send { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; margin-top: 2.25rem; }
@media (min-width: 1024px) { .mu-rp-send { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; } .mu-rp-side { position: sticky; top: 4.25rem; } }
@media (max-width: 1023.98px) { .mu-rp-side { order: -1; } }
.mu-rp-side, .mu-rp-sendmain { min-width: 0; }
.mu-rp-sendform { overflow: hidden; }
.mu-rp-ticket { position: relative; overflow: hidden; border-radius: 1.25rem; background: radial-gradient(130% 120% at 90% 0%, #10205F 0%, var(--tk-navy) 48%, var(--tk-navy-deep) 100%); box-shadow: var(--tk-shadow-lift); color: #fff; }
.mu-rp-ticket::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--tk-gold) 30%, var(--tk-gold-soft) 50%, var(--tk-gold) 70%, transparent); }
.mu-rp-ticket-head { display: flex; align-items: center; gap: .6rem; margin: 0; padding: 1.2rem 1.5rem .2rem; font-family: var(--tk-sans); font-size: .875rem; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--tk-gold-soft); }
.mu-rp-ticket-head::before { content: ""; flex: none; width: .45rem; height: .45rem; rotate: 45deg; border-radius: 1px; background: linear-gradient(135deg, var(--tk-gold-soft), var(--tk-gold-deep)); }
.mu-rp-scn[hidden] { display: none; }
.mu-rp-rows { display: grid; margin: 0; padding: .6rem 1.5rem 1.35rem; }
.mu-rp-rows > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px dashed rgba(220, 193, 150, .3); }
.mu-rp-rows > div:last-child { border-bottom: 0; }
.mu-rp-rows dt { font-family: var(--tk-sans); font-size: .875rem; font-weight: 500; line-height: 1.35; color: #CFC4B0; }
.mu-rp-rows dd { margin: 0; font-family: var(--tk-serif); font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.mu-rp-rows dd:empty::before { content: ""; display: block; width: 4.5rem; height: .5rem; margin-top: .4rem; border-radius: 999px; background: rgba(255, 255, 255, .16); }

/* ---- on paper: the plan and nothing else ---- */
@media print {
  body:has(#mu-plan) > :not(main) { display: none !important; }
  body:has(#mu-plan) main > :not(#planner) { display: none !important; }
  #planner { padding: 0; background: #fff; }
  #planner::before, #planner .mu-section-head, #planner .mu-tk-intro, .mu-rp-form, .mu-rp-tools, .mu-rp-before, .mu-rp-line, .mu-rp-read, .mu-rp-tick { display: none !important; }
  .mu-rp-grid { display: block; }
  .mu-rp-sum { padding: 0 0 .5rem; border-radius: 0; background: none; box-shadow: none; color: #000; animation: none; }
  .mu-rp-sum::after { content: none; }
  .mu-rp-sum-k, .mu-rp-sum-day, .mu-rp-count { color: #000; }
  .mu-rp-sum-left { background: none; padding: 0; }
  .mu-rp-group { animation: none; break-inside: avoid-page; }
  .mu-rp-group::before { content: none !important; }
  .mu-rp-list { padding-left: 0; }
  .mu-rp-task { break-inside: avoid; box-shadow: none; }
  .mu-rp-node { box-shadow: none; }
  .mu-rp-links a, .mu-rp-src a { color: #000; }
}


/* ============================================================
   4. DRIVE TIMES  (mu-dt-, hero drawing mu-dth-)
   ============================================================ */

/* ---- the hero drawing: the road ahead, inside a dial ---- */
.mu-dth svg { filter: drop-shadow(0 22px 46px rgba(3, 8, 36, .6)); }
.mu-dth-view { animation: mu-tk-fade 1.1s ease both; }
.mu-dth-halo { animation: mu-tk-breathe 6s ease-in-out infinite; }
.mu-dth-rim { fill: none; stroke: var(--color-accent-500, #C5A880); stroke-width: 2.5; }
.mu-dth-ring { fill: none; stroke: rgba(220, 193, 150, .28); stroke-width: 2; stroke-linecap: round; }
.mu-dth-tick { fill: none; stroke: rgba(220, 193, 150, .5); stroke-width: 1.4; stroke-linecap: round; }
.mu-dth-tick-l { stroke: var(--color-accent-300, #DCC196); stroke-width: 2.2; }
@keyframes mu-dth-go { 0% { stroke-dashoffset: 1; } 80%, 100% { stroke-dashoffset: 0; } }
.mu-dth-go { fill: none; stroke: #EBD9B8; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(232, 211, 174, .7)); animation: mu-dth-go 7s cubic-bezier(.4, 0, .2, 1) infinite; }
.mu-dth-end { stroke: #fff; stroke-width: 2; }
.mu-dth-end-a { fill: var(--color-accent-300, #DCC196); }
.mu-dth-end-b { fill: var(--color-primary-900, #050929); stroke: var(--color-accent-300, #DCC196); }
.mu-dth-bead { fill: #fff; filter: drop-shadow(0 0 5px #fff); }
.mu-dth-side { fill: none; stroke: rgba(220, 193, 150, .75); stroke-width: 1.4; stroke-linecap: round; }
.mu-dth-post { fill: none; stroke: rgba(220, 193, 150, .7); stroke-width: 1.6; stroke-linecap: round; }
@keyframes mu-dth-dash { 0%, 100% { opacity: .25; } 20% { opacity: 1; } 60% { opacity: .25; } }
.mu-dth-dash { fill: var(--color-accent-300, #DCC196); opacity: .25; animation: mu-dth-dash 1.5s linear infinite; }
.mu-dth-dash-1 { animation-delay: 0s; }
.mu-dth-dash-2 { animation-delay: .3s; }
.mu-dth-dash-3 { animation-delay: .6s; }
.mu-dth-dash-4 { animation-delay: .9s; }
.mu-dth-dash-5 { animation-delay: 1.2s; }
@keyframes mu-dth-car { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
.mu-dth-car { animation: mu-dth-car .45s ease-in-out infinite alternate; }
.mu-dth-body { fill: #DCC196; }
.mu-dth-roof { fill: #C5A880; }
.mu-dth-glass { fill: #0B1750; }
.mu-dth-lamp { fill: #fff; }
.mu-dth-wheel { fill: #050929; }
.mu-dth-ticks { pointer-events: none; }

/* ---- the workspace: the two lists and the answer on the left, the map on the right ---- */
.mu-dt { margin-top: 2.25rem; }
.mu-dt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; }
@media (min-width: 1024px) { .mu-dt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 2.25rem; } .mu-dt-mapbox { position: sticky; top: 4.25rem; } }
.mu-dt-main { min-width: 0; }
.mu-dt-form { min-width: 0; }
.mu-dt-route { position: relative; display: grid; gap: 1.1rem; padding-left: 3.1rem; }
.mu-dt-route::before { content: ""; position: absolute; left: 1.05rem; top: 3.6rem; bottom: 1.9rem; border-left: 2px dashed var(--tk-gold); }
.mu-dt-field { position: relative; min-width: 0; }
.mu-dt-end { position: absolute; left: -3.1rem; top: 1.95rem; z-index: 1; display: grid; place-items: center; box-sizing: border-box; width: 2.2rem; height: 2.2rem; border-radius: 50%; box-shadow: 0 0 0 4px #fff; font-family: var(--tk-serif); font-size: 1rem; font-weight: 700; line-height: 1; }
.mu-dt-end[data-end="a"] { background: linear-gradient(180deg, var(--color-accent-300, #DCC196), var(--color-accent-500, #C5A880)); color: var(--tk-navy); }
.mu-dt-end[data-end="b"] { background: var(--tk-navy); border: 2px solid var(--tk-gold); color: var(--tk-gold-soft); }
.mu-dt-select { font-weight: 600; }
.mu-dt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.35rem; }
.mu-dt-actions .mu-btn { min-height: 3.25rem; }
@media (max-width: 479.98px) { .mu-dt-actions .mu-btn { width: 100%; } }
.mu-dt-swap { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.15rem; border: 1px solid var(--tk-line-strong); border-radius: 999px; background: #fff; font-family: var(--tk-sans); font-size: .9375rem; font-weight: 600; line-height: 1.2; color: var(--tk-navy); cursor: pointer; transition: background-color .2s, border-color .2s; }
.mu-dt-swap svg { width: 1.1rem; height: 1.1rem; color: var(--tk-bronze); transition: transform .5s var(--tk-ease); }
.mu-dt-swap[data-turn="1"] svg { transform: rotate(180deg); }
.mu-dt-swap:hover { border-color: var(--tk-navy); background: var(--tk-cream); }
.mu-dt-swap:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; }
.mu-dt-quickbox { margin-top: 1.35rem; padding-top: 1.15rem; border-top: 1px dashed var(--tk-line-strong); }
.mu-dt-quickbox[hidden] { display: none; }
.mu-dt-quick-head { margin: 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--tk-navy); }
.mu-dt-quick { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0 0; padding: 0; list-style: none; }
@media (max-width: 639.98px) {
  .mu-dt-quick { flex-wrap: nowrap; overflow-x: auto; margin-right: -1.5rem; padding: 2px 1.5rem 4px 2px; margin-left: -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mu-dt-quick::-webkit-scrollbar { display: none; }
  .mu-dt-quick > li { flex: none; }
}
.mu-dt-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem 1rem; border: 1px solid var(--tk-gold-soft); border-radius: 999px; background: #fff; font-family: var(--tk-sans); font-size: .9375rem; font-weight: 500; line-height: 1.25; color: var(--tk-navy); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--tk-ease); }
.mu-dt-chip:hover { border-color: var(--tk-navy); background: var(--tk-navy); color: #fff; transform: translateY(-1px); }
.mu-dt-chip:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; }

/* the answer */
.mu-dt-result { position: relative; overflow: hidden; margin-top: 1.25rem; padding: 1.5rem; border: 1px solid var(--tk-line); border-radius: 1.25rem; background: #fff; box-shadow: var(--tk-shadow-lift); animation: mu-tk-rise .5s var(--tk-ease) both; }
.mu-dt-result[hidden] { display: none; }
.mu-dt-result[data-ok="1"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--tk-gold-deep), var(--tk-gold-soft) 50%, var(--tk-gold-deep)); }
@media (min-width: 1024px) { .mu-dt-result { padding: 1.85rem 2rem 2rem; } }
.mu-dt-title { margin: 0; font-family: var(--tk-serif); font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--tk-navy); }
@media (min-width: 1024px) { .mu-dt-title { font-size: 2.125rem; } }
.mu-dt-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 1.15rem; }
@media (min-width: 640px) { .mu-dt-stats { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.mu-dt-stat { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.05rem 1.15rem; border-radius: 1rem; background: radial-gradient(130% 140% at 85% 0%, #15287A 0%, var(--tk-navy) 50%, var(--tk-navy-deep) 100%); color: #fff; }
.mu-dt-stat[data-k="time"] { border: 1px solid var(--tk-gold-soft); background: color-mix(in oklab, var(--tk-gold-tint) 55%, #fff); color: var(--tk-navy); }
.mu-dt-stat-ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(220, 193, 150, .45); color: var(--tk-gold-soft); }
.mu-dt-stat[data-k="time"] .mu-dt-stat-ico { background: var(--tk-navy); box-shadow: none; }
.mu-dt-stat-ico svg { width: 1.45rem; height: 1.45rem; }
.mu-dt-stat-t { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.mu-dt-stat-w { font-family: var(--tk-sans); font-size: .9375rem; font-weight: 500; line-height: 1.3; opacity: .85; }
.mu-dt-num { font-family: var(--tk-serif); font-size: 2.125rem; font-weight: 700; line-height: 1.08; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mu-dt-stat[data-k="time"] .mu-dt-num { font-size: 1.75rem; }
.mu-dt-notes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.mu-dt-notes li { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .95rem .4rem .65rem; border: 1px solid var(--tk-line); border-radius: 999px; background: var(--tk-ivory); font-size: .9375rem; line-height: 1.35; color: var(--tk-body); }
.mu-dt-notes svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--tk-bronze); }
.mu-dt-notes strong { font-weight: 600; color: var(--tk-navy); }
.mu-dt-links { display: grid; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .mu-dt-links { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); } }
.mu-dt-same { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: var(--tk-navy); }
.mu-dt-same::before { content: ""; flex: none; width: 1.3rem; height: 1.3rem; background: var(--tk-bronze); -webkit-mask: var(--tk-ico) center / contain no-repeat; mask: var(--tk-ico) center / contain no-repeat; --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.500s-6.800-5.900-6.800-11.600a6.800 6.800 0 0 1 13.600 0c0 5.700-6.800 11.600-6.800 11.600Z'/%3E%3Ccircle cx='12' cy='9.800' r='2.500'/%3E%3C/svg%3E"); }
.mu-dt-error { margin: 1rem 0 0; padding: 1rem 1.25rem; border-radius: .75rem; border: 1px solid #F1A6AF; background: #FCEBED; font-size: 1rem; line-height: 1.5; color: #861826; }
.mu-dt-error[hidden] { display: none; }

/* the map */
.mu-dt-mapbox { min-width: 0; padding: 1.15rem 1.25rem 1.3rem; border-radius: 1.25rem; background: radial-gradient(120% 90% at 80% 0%, #10205F 0%, var(--tk-navy) 45%, var(--tk-navy-deep) 100%); box-shadow: var(--tk-shadow-lift); color: #fff; }
.mu-dt-map-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 2.5rem; }
.mu-dt-map-title { margin: 0; font-family: var(--tk-sans); font-size: .875rem; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--tk-gold-soft); }
.mu-dt-key { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.mu-dt-key li { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--tk-sans); font-size: .875rem; font-weight: 500; line-height: 1.2; color: #E9E2D4; }
.mu-dt-key li::before { content: ""; box-sizing: border-box; width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid #fff; background: var(--tk-gold-soft); }
.mu-dt-key li[data-end="b"]::before { border-color: var(--tk-gold-soft); background: var(--tk-navy-deep); }
.mu-dt-map { display: block; width: 100%; height: auto; max-height: 34rem; margin-top: .5rem; border-radius: .6rem; cursor: pointer; touch-action: manipulation; }
.mu-dt-region { fill: var(--rfill, #27507F); stroke: rgba(220, 193, 150, .5); stroke-width: .7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mu-dt-region:nth-child(1) { --rfill: #2D4A82; }
.mu-dt-region:nth-child(2) { --rfill: #3C6AA0; }
.mu-dt-region:nth-child(3) { --rfill: #27507F; }
.mu-dt-region:nth-child(4) { --rfill: #4E7CB0; }
.mu-dt-region:nth-child(5) { --rfill: #2A5488; }
.mu-dt-region:nth-child(6) { --rfill: #37669E; }
.mu-dt-region:nth-child(7) { --rfill: #244B7E; }
.mu-dt-region:nth-child(8) { --rfill: #305C92; }
.mu-dt-region:nth-child(9) { --rfill: #456FA2; }
.mu-dt-region:nth-child(10) { --rfill: #22466F; }
.mu-dt-region:nth-child(11) { --rfill: #1C3A66; }
.mu-dt-outline { fill: none; stroke: var(--color-accent-500, #C5A880); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.mu-dt-place { font-family: var(--font-sans, "Poppins", sans-serif); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; fill: #fff; paint-order: stroke; stroke: rgba(5, 9, 41, .85); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; transition: opacity .3s; }
.mu-dt-map:not([data-picked="0"]) .mu-dt-place, .mu-dt-map[data-hot="1"] .mu-dt-place { opacity: 0; }
.mu-dt-dot { fill: var(--color-accent-300, #DCC196); opacity: .92; pointer-events: none; transition: opacity .3s; }
.mu-dt-map[data-picked="2"] .mu-dt-dot { opacity: .4; }
.mu-dt-arc-glow { fill: none; stroke: rgba(232, 211, 174, .3); stroke-linecap: round; animation: mu-tk-fade .8s ease .5s both; }
.mu-dt-arc { fill: none; stroke: #F4E6C8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mu-tk-draw 1s var(--tk-ease, ease-out) .3s forwards; }
.mu-dt-car { fill: #fff; filter: drop-shadow(0 0 3px #fff); pointer-events: none; }
@keyframes mu-dt-pulse { 0% { opacity: .9; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.25); } }
.mu-dt-pin-halo { fill: rgba(220, 193, 150, .25); stroke: rgba(220, 193, 150, .7); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: mu-dt-pulse 2.6s ease-out infinite; pointer-events: none; }
.mu-dt-pin-dot { stroke: #fff; transform-box: fill-box; transform-origin: center; animation: mu-tk-pop .5s var(--tk-ease, ease-out) both; pointer-events: none; }
.mu-dt-pin[data-end="a"] .mu-dt-pin-dot { fill: var(--color-accent-300, #DCC196); }
.mu-dt-pin[data-end="b"] .mu-dt-pin-dot { fill: var(--color-primary-900, #050929); stroke: var(--color-accent-300, #DCC196); }
.mu-dt-pin[data-end="b"] .mu-dt-pin-halo { animation-delay: 1.3s; }
.mu-dt-name, .mu-dt-tip { font-family: var(--font-sans, "Poppins", sans-serif); font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(5, 9, 41, .92); stroke-linejoin: round; pointer-events: none; }
.mu-dt-tip { font-weight: 600; fill: var(--color-accent-300, #DCC196); }
.mu-dt-near { font-family: var(--font-sans, "Poppins", sans-serif); font-weight: 500; fill: #E9E2D4; paint-order: stroke; stroke: rgba(5, 9, 41, .85); stroke-linejoin: round; pointer-events: none; animation: mu-tk-fade .6s ease .6s both; }
.mu-dt-map-hint { margin: .85rem 0 0; font-size: .9375rem; line-height: 1.55; color: #F1EDE4; }
.mu-dt-map-note { margin: .4rem 0 0; font-size: .875rem; line-height: 1.55; color: #CFC4B0; }

/* ------------------------------------------------------------
   REDUCED MOTION: every moving part shows its finished state
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mu-tk *, .mu-tk *::before, .mu-tk *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .mu-ref-map, .mu-ref-home, .mu-ref-arc, .mu-ref-pin, .mu-ref-out, .mu-ref-state, .mu-ref-place, .mu-ref-base, .mu-ref-base-dot,
  .mu-tk-tick circle, .mu-tk-tick path, .mu-ref-swap,
  .mu-reveal.is-in .mu-ref-medal, .mu-reveal.is-in .mu-ref-num, .mu-reveal.is-in.mu-ref-steps::before, .mu-reveal.is-in .mu-ref-step::after { animation: none; }
  .mu-ref-arc, .mu-tk-tick circle, .mu-tk-tick path { stroke-dashoffset: 0; }
  .mu-ref-out, .mu-ref-state { opacity: 1; }
  .mu-reveal .mu-ref-medal, .mu-reveal .mu-ref-num { opacity: 1; }
  .mu-reveal.mu-ref-steps::before, .mu-reveal .mu-ref-step::after { clip-path: none; }
  .mu-ref-halo, .mu-ref-spark { display: none; }
  .mu-ref-route-go, .mu-ref-route-b, .mu-tk-seg-opt > span, .mu-tk-check input::after { transition: none; }

  .mu-qzh-view, .mu-qzh-halo, .mu-qzh-road, .mu-qzh-compass, .mu-qzh-needle, .mu-qz-card, .mu-qz-why li, .mu-qz-meter-stop[data-on="1"] .mu-qz-meter-dot,
  .mu-qz-flake, .mu-qz-rays, .mu-qz-shimmer, .mu-qz-cloud, .mu-qz-wave, .mu-qz-bob, .mu-qz-star, .mu-qz-flame, .mu-qz-lit, .mu-qz-dash, .mu-qz-rush, .mu-qz-wheel, .mu-qz-tag { animation: none; }
  .mu-qz-plane { display: none; }
  .mu-qz-q, .mu-qz-q[data-pos="on"], .mu-qz-scene, .mu-qz-scene[data-pos="on"] { transition: none; transform: none; }
  .mu-qz-bar, .mu-qz-opt > span, .mu-qz-go, .mu-qz-back svg, .mu-qz-skip::after { transition: none; }

  .mu-rph-far, .mu-rph-mid, .mu-rph-stop, .mu-rph-pin, .mu-rph-float, .mu-rph-check, .mu-rph-halo, .mu-rph-win, .mu-rp-group, .mu-rp-sum { animation: none; }
  .mu-rph-check { stroke-dashoffset: 0; }
  .mu-rph-truck { display: none; }

  .mu-dth-view, .mu-dth-halo, .mu-dth-dash, .mu-dth-car, .mu-dth-go, .mu-dt-result, .mu-dt-arc, .mu-dt-arc-glow, .mu-dt-pin-halo, .mu-dt-pin-dot, .mu-dt-near { animation: none; }
  .mu-dth-go, .mu-dt-arc { stroke-dashoffset: 0; }
  .mu-dth-bead, .mu-dt-car { display: none; }
}