/* v0.8.3 welcome tour (public/js/tour.js). Built from the tours in Picproved (animated scenes made of app pieces,
   swipeable slides), Awayline (lights up the real tab it talks about, "2 of 7", Back) and Fendo (bottom sheet with a
   handle, eyebrow, ticks, pill dots, "Skip tour"). Only existing tokens: style.css, redesign.css. Every scene's
   resting state is its finished state, so with reduced motion nothing moves and nothing is missing. */

dialog.tourx { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ink); overflow: hidden; }
dialog.tourx::backdrop { background: transparent; }

/* The dimmed screen, with a rounded hole over the tab being talked about. */
.tx-spot { position: fixed; left: 50%; top: 50%; width: 0; height: 0; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(4,14,12,.64);
  transition: left .55s var(--spring), top .55s var(--spring), width .55s var(--spring), height .55s var(--spring), border-radius .4s var(--ease-fx), opacity .25s; }
@starting-style { dialog.tourx[open] .tx-spot { opacity: 0; } }
dialog.tourx.lit .tx-spot { outline: 2.5px solid var(--mint); outline-offset: 0; animation: txGlow 1.8s ease-in-out infinite; }
@keyframes txGlow { 0%, 100% { box-shadow: 0 0 0 200vmax rgba(4,14,12,.64), 0 0 0 0 rgba(95,227,207,.0); } 50% { box-shadow: 0 0 0 200vmax rgba(4,14,12,.64), 0 0 0 10px rgba(95,227,207,.28); } }

/* The card: a floating sheet at the bottom on phones that glides to the top when it points at the tab bar. */
.tx-card { position: fixed; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: 480px; margin: 0 auto; max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--surface); border-radius: 34px; overflow: hidden;
  box-shadow: var(--glass-rim, none), 0 0 0 1px var(--hair, transparent), 0 28px 80px rgba(0,0,0,.38);
  transition: transform .6s var(--spring), translate .3s var(--spring); }
.tx-card.dragging { transition: none; }
.tx-card.up { transform: translateY(calc(-100dvh + 100% + 20px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))); }
@starting-style { dialog.tourx[open] .tx-card { transform: translateY(calc(100% + 30px)); } }
dialog.tourx.closing .tx-card { transform: translateY(calc(100% + 40px)); transition: transform .26s var(--ease-fx); }
dialog.tourx.closing .tx-card.up { transform: translateY(calc(-100dvh - 40px)); }
dialog.tourx.closing .tx-spot { opacity: 0; }

.tx-grab { position: absolute; z-index: 3; top: 0; left: 50%; translate: -50% 0; width: 72px; height: 22px; border: 0; padding: 0; background: none; cursor: grab; touch-action: none; }
.tx-grab::before { content: ""; position: absolute; left: 14px; right: 14px; top: 8px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
dialog.tourx[data-step="welcome"] .tx-card:not(.up) .tx-grab::before { background: rgba(255,255,255,.5); }
.tx-card.up .tx-grab { top: auto; bottom: 0; }
.tx-card.up .tx-grab::before { top: 9px; }

.tx-slides { display: flex; align-items: flex-start; transition: height .45s var(--spring); overflow: auto hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline: 0; min-height: 0; }
.tx-slides::-webkit-scrollbar { display: none; }
.tx-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; align-content: start; gap: 14px; padding: 10px 10px 4px; overflow: hidden; scrollbar-width: none; max-height: 100%; }
.tx-text { display: grid; gap: 8px; padding: 2px 12px 4px; }
.tx-text .eyebrow { color: var(--accent-text); }
.tx-text h2 { font-size: clamp(1.4rem, 6.2vw, 1.7rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.tx-text p { color: var(--ink-2); font-size: var(--t-base); line-height: 1.5; }
.tx-text .ticks { margin: 2px 0 0; padding: 0; display: grid; gap: 7px; }
.tx-text .ticks li { list-style: none; display: flex; gap: 9px; align-items: center; font-weight: 650; font-size: var(--t-sm); }
.tx-text .ticks svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; flex: none; color: var(--ok); background: var(--ok-soft); stroke-width: 3; }
.tx-slide.play .tx-text > * { animation: txRise .5s var(--spring) both; }
.tx-slide.play .tx-text > :nth-child(2) { animation-delay: .06s; } .tx-slide.play .tx-text > :nth-child(3) { animation-delay: .12s; } .tx-slide.play .tx-text > :nth-child(4) { animation-delay: .18s; }

.tx-foot { display: grid; gap: 12px; padding: 14px 20px 18px; }
.tx-prog { display: flex; align-items: center; gap: 12px; }
.tx-dots { display: flex; gap: 2px; flex: 1; margin-left: -8px; }
.tx-dots button { position: relative; width: 22px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer; transition: width .4s var(--spring); }
.tx-dots button::before { content: ""; position: absolute; left: 7px; right: 7px; top: 11px; height: 7px; border-radius: 4px; background: var(--line-2); transition: background .25s; }
.tx-dots button[aria-current="step"] { width: 38px; }
.tx-dots button[aria-current="step"]::before { background: var(--accent-grad, var(--accent)); }
.tx-count { font-size: var(--t-xs); font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.tx-actions { display: flex; align-items: center; gap: 10px; }
.tx-skip, .tx-look { margin-right: auto; white-space: nowrap; border: 0; background: none; padding: 0 2px; min-height: 44px; font: inherit; font-weight: 650; font-size: var(--t-sm); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tx-back { width: 50px; padding: 0; flex: none; }
.tx-back svg { width: 22px; height: 22px; }
.tx-next { min-width: 128px; white-space: nowrap; }
.tx-next svg { width: 20px; height: 20px; }
.tx-actions .tx-look + .tx-skip { display: none; }
.linkish { margin-left: auto; border: 0; background: none; padding: 6px 0; font: inherit; font-weight: 700; font-size: var(--t-sm); color: var(--accent-text); cursor: pointer; }

/* Desktop and tablets: a centred card. The sidebar (960px+) or the floating tab bar stay lit beside it. */
@media (min-width: 720px) {
  .tx-card { inset: 0; margin: auto; width: min(480px, calc(100% - 48px)); height: fit-content; border-radius: var(--r-xl, 36px); }
  .tx-card.up { transform: none; }
  @starting-style { dialog.tourx[open] .tx-card { transform: translateY(24px) scale(.96); opacity: 0; } }
  dialog.tourx.closing .tx-card, dialog.tourx.closing .tx-card.up { transform: translateY(16px) scale(.97); opacity: 0; transition: transform .26s var(--ease-fx), opacity .2s; }
  .tx-grab { display: none; }
  .tx-slide { padding: 12px 12px 0; }
  .tx-scene { height: 224px; }
}
@media (min-width: 720px) and (max-width: 959px) { .tx-card { translate: 0 -40px; } }

/* ---------- scenes ---------- */
.tx-scene { position: relative; height: 216px; border-radius: 24px; overflow: hidden; isolation: isolate; display: grid; place-items: center; }
.tx-scene[class*="tone-"] { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tone) 28%, transparent), transparent 62%), radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%), linear-gradient(160deg, var(--tone-soft), color-mix(in srgb, var(--tone-soft) 55%, var(--surface))); }
.tx-scene img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tx-scene .th { width: 40px; height: 40px; border-radius: 12px; flex: none; padding: 3px; background: var(--tone-soft); }
.tx-scene small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.tx-scene b { font-weight: 750; }
.tx-scene .tap { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 55%, transparent); opacity: 0; pointer-events: none; }

/* 1. welcome: the logo with the things you own floating round it, on the aurora band */
.s-welcome { background: radial-gradient(60% 70% at 50% 50%, rgba(95,227,207,.22), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(232,190,116,.18), transparent 70%), linear-gradient(160deg, var(--band) 0%, var(--band-2) 100%); }
.s-welcome .aur { position: absolute; inset: -40%; z-index: -1; background: conic-gradient(from 0deg, transparent, rgba(95,227,207,.16), transparent 30%, rgba(232,190,116,.12), transparent 60%); filter: blur(24px); }
.tx-slide.play .s-welcome .aur { animation: txSpin 18s linear infinite; }
.s-welcome .mark { width: 78px; height: 78px; border-radius: 22px; box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.35); }
.s-welcome .mark svg { width: 100%; height: 100%; border-radius: 22px; }
.s-welcome .orb { position: absolute; width: 58px; height: 58px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
.s-welcome .o1 { left: 6%; top: 10%; } .s-welcome .o2 { left: 29%; top: 3%; width: 50px; height: 50px; } .s-welcome .o3 { right: 29%; top: 4%; width: 50px; height: 50px; } .s-welcome .o4 { right: 5%; top: 12%; }
.s-welcome .o5 { left: 4%; bottom: 10%; width: 54px; height: 54px; } .s-welcome .o6 { left: 25%; bottom: 3%; } .s-welcome .o7 { right: 25%; bottom: 4%; width: 54px; height: 54px; } .s-welcome .o8 { right: 4%; bottom: 12%; }
.tx-slide.play .s-welcome .mark { animation: txPop .7s var(--spring-fast) .1s both; }
.tx-slide.play .s-welcome .orb { animation: txPop .6s var(--spring-fast) both; }
.tx-slide.play .s-welcome .orb img { animation: txBob 3.2s ease-in-out 1s infinite alternate; }
.tx-slide.play .s-welcome .o1 { animation-delay: .35s; } .tx-slide.play .s-welcome .o2 { animation-delay: .45s; } .tx-slide.play .s-welcome .o3 { animation-delay: .55s; } .tx-slide.play .s-welcome .o4 { animation-delay: .65s; }
.tx-slide.play .s-welcome .o5 { animation-delay: .4s; } .tx-slide.play .s-welcome .o6 { animation-delay: .5s; } .tx-slide.play .s-welcome .o7 { animation-delay: .6s; } .tx-slide.play .s-welcome .o8 { animation-delay: .7s; }
.tx-slide.play .s-welcome .orb:nth-child(odd) img { animation-duration: 2.7s; animation-direction: alternate-reverse; }

/* 2. scan: a barcode in the viewfinder, the laser sweeps, it's found */
.s-scan { align-content: start; padding-top: 16px; gap: 0; }
.s-scan .vf { position: relative; width: min(230px, 72%); height: 118px; border-radius: 22px; background: #0b1614; box-shadow: 0 10px 26px rgba(0,0,0,.25); display: grid; place-items: center; align-content: center; gap: 4px; overflow: hidden; }
.s-scan .code { width: 62%; height: 52px; border-radius: 4px; background: repeating-linear-gradient(90deg, #e9f2ef 0 2px, transparent 2px 4px, #e9f2ef 4px 5px, transparent 5px 8px, #e9f2ef 8px 11px, transparent 11px 13px); }
.s-scan .nums { font: 700 10px/1 var(--mono); letter-spacing: .12em; color: #b9c9c4; }
.s-scan .laser { position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--mint), transparent); box-shadow: 0 0 16px 3px rgba(95,227,207,.6); opacity: 0; }
.s-scan .vf i { position: absolute; width: 20px; height: 20px; border: 3px solid var(--mint); }
.s-scan .c1 { left: 10px; top: 10px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; } .s-scan .c2 { right: 10px; top: 10px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.s-scan .c3 { left: 10px; bottom: 10px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; } .s-scan .c4 { right: 10px; bottom: 10px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.s-scan .found { position: absolute; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-2), 0 0 0 1px var(--hair, transparent); font-size: var(--t-sm); }
.s-scan .found b { display: block; line-height: 1.2; }
.s-scan .found small { color: var(--ok); font-weight: 750; }
.s-scan .found > svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ok); color: #fff; stroke-width: 3.2; }
.tx-slide.play .s-scan .vf { animation: txRise .45s var(--spring) both; }
.tx-slide.play .s-scan .laser { animation: txSweep 1.5s ease-in-out .3s 1 both; }
.tx-slide.play .s-scan .vf i { animation: txHit .5s var(--spring-fast) 1.75s both; }
.tx-slide.play .s-scan .found { animation: txRise .5s var(--spring) 2s both; }

/* 3. the passport card fills in */
.s-card .pp { width: min(300px, 88%); display: grid; gap: 8px; padding: 10px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-2), 0 0 0 1px var(--hair, transparent); }
.s-card .top { display: flex; align-items: center; gap: 10px; }
.s-card .top b { display: block; font-size: var(--t-sm); line-height: 1.2; }
.s-card .ecl { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 6px 3px 3px 6px; background: var(--e-a); color: #fff; font-weight: 800; clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%); padding-right: 6px; }
.s-card .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.s-card .f { position: relative; display: grid; gap: 1px; padding: 7px 10px; border-radius: 14px; background: var(--surface-2); }
.s-card .f b { font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; }
.s-card .f em { font-style: normal; font-size: .75rem; color: var(--muted); font-weight: 700; }
.s-card .f.ok b { color: var(--ok); } .s-card .f.ok svg { width: 16px; height: 16px; stroke-width: 3; }
.s-card .meter { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.s-card .meter i { display: block; height: 100%; width: 71%; border-radius: 2px; background: var(--ok); }
.tx-slide.play .s-card .pp { animation: txRise .45s var(--spring) both; }
.tx-slide.play .s-card .f { animation: txPop .5s var(--spring-fast) both; }
.tx-slide.play .s-card .a1 { animation-delay: .45s; } .tx-slide.play .s-card .a2 { animation-delay: .6s; } .tx-slide.play .s-card .a3 { animation-delay: .75s; } .tx-slide.play .s-card .a4 { animation-delay: .9s; }
.tx-slide.play .s-card .meter i { animation: txFill .8s var(--ease-fx) 1.05s both; }

/* 4. kinds: a grid of the things you can scan */
.s-kinds .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(296px, 90%); }
.s-kinds .kt { aspect-ratio: 1; border-radius: 18px; padding: 6px; background: radial-gradient(90% 90% at 30% 15%, color-mix(in srgb, var(--tone) 30%, transparent), transparent 70%), var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--hair, transparent); }
.s-kinds .tap { left: calc(50% - 76px); top: calc(50% - 46px); }
.tx-slide.play .s-kinds .kt { animation: txPop .5s var(--spring-fast) both; }
.tx-slide.play .s-kinds .a1 { animation-delay: .15s; } .tx-slide.play .s-kinds .a2 { animation-delay: .23s; } .tx-slide.play .s-kinds .a3 { animation-delay: .31s; } .tx-slide.play .s-kinds .a4 { animation-delay: .39s; }
.tx-slide.play .s-kinds .a5 { animation-delay: .47s; } .tx-slide.play .s-kinds .a6 { animation-delay: .55s; } .tx-slide.play .s-kinds .a7 { animation-delay: .63s; } .tx-slide.play .s-kinds .a8 { animation-delay: .71s; }
.tx-slide.play .s-kinds .a2 { animation: txPop .5s var(--spring-fast) .23s both, txNudge .5s var(--spring-fast) 1.5s both; }
.tx-slide.play .s-kinds .tap { animation: txTap .7s ease 1.35s both; }

/* 5. save to my home: the button is pressed and the list fills */
.s-home { align-content: center; gap: 10px; }
.s-home .save { position: relative; display: inline-flex; align-items: center; gap: 6px; justify-self: center; padding: 8px 16px; border-radius: 999px; font-size: var(--t-sm); font-weight: 750;
  background: var(--accent-grad, var(--accent)); color: var(--on-accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.s-home .save svg { width: 16px; height: 16px; stroke-width: 2.6; }
.s-home .save .tap { right: 6px; top: -2px; }
.s-home .rows { display: grid; gap: 6px; width: min(290px, 88%); }
.s-home .row { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--hair, transparent); font-size: var(--t-sm); }
.s-home .row .th { width: 34px; height: 34px; border-radius: 10px; }
.s-home .row b { display: block; line-height: 1.2; }
.tx-slide.play .s-home .save { animation: txPress .35s var(--ease-fx) .75s both; }
.tx-slide.play .s-home .save .tap { animation: txTap .7s ease .45s both; }
.tx-slide.play .s-home .row { animation: txUp .5s var(--spring) both; }
.tx-slide.play .s-home .a1 { animation-delay: 1.1s; } .tx-slide.play .s-home .a2 { animation-delay: .2s; } .tx-slide.play .s-home .a3 { animation-delay: .32s; }

/* 6. alerts arrive */
.s-alerts { align-content: center; }
.s-alerts .bell { position: absolute; left: 14px; top: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--hair, transparent); }
.s-alerts .bell svg { width: 20px; height: 20px; transform-origin: 50% 10%; }
.s-alerts .bell b { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.s-alerts .rows { display: grid; gap: 6px; width: min(300px, 86%); margin-top: 40px; }
.s-alerts .nt { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--hair, transparent); font-size: var(--t-sm); }
.s-alerts .nt > svg { width: 30px; height: 30px; padding: 6px; border-radius: 10px; flex: none; }
.s-alerts .nt.bad > svg { background: var(--bad-soft); color: var(--bad); } .s-alerts .nt.warn > svg { background: var(--warn-soft); color: var(--warn); } .s-alerts .nt.info > svg { background: var(--info-soft); color: var(--info); }
.s-alerts .nt b { display: block; line-height: 1.2; }
.tx-slide.play .s-alerts .bell svg { animation: txRing .9s ease .2s 2 both; }
.tx-slide.play .s-alerts .bell b { animation: txPop .45s var(--spring-fast) .5s both; }
.tx-slide.play .s-alerts .nt { animation: txIn .5s var(--spring) both; }
.tx-slide.play .s-alerts .a1 { animation-delay: .35s; } .tx-slide.play .s-alerts .a2 { animation-delay: .6s; } .tx-slide.play .s-alerts .a3 { animation-delay: .85s; }

/* 7. pick your country: the real setting */
.s-country .flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(330px, 92%); }
.s-country .fl { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 84px; padding: 8px 4px; border: 0; border-radius: 18px; font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--ink);
  background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--hair, transparent); cursor: pointer; transition: border-radius .35s var(--spring), background .2s, transform .3s var(--spring-fast); }
.s-country .fl .f { font-size: 1.9rem; line-height: 1; }
.s-country .fl:active { transform: scale(.96); }
.s-country .fl[aria-checked="true"] { background: var(--accent-soft); color: var(--accent-text); border-radius: 12px; box-shadow: inset 0 0 0 2px var(--accent); }
.tx-slide.play .s-country .fl { animation: txIn .45s var(--spring) both; }
.tx-slide.play .s-country .a2 { animation-delay: .06s; } .tx-slide.play .s-country .a3 { animation-delay: .12s; } .tx-slide.play .s-country .a4 { animation-delay: .18s; } .tx-slide.play .s-country .a5 { animation-delay: .24s; } .tx-slide.play .s-country .a6 { animation-delay: .3s; }

@keyframes txRise { from { opacity: 0; transform: translateY(12px); } }
@keyframes txUp { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes txIn { from { opacity: 0; transform: translateX(28px); } }
@keyframes txPop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; } }
@keyframes txBob { from { transform: translateY(-4px) rotate(-3deg); } to { transform: translateY(4px) rotate(3deg); } }
@keyframes txSpin { to { transform: rotate(1turn); } }
@keyframes txSweep { 0% { opacity: 0; top: 20%; } 10% { opacity: 1; } 45% { top: 78%; } 85% { opacity: 1; top: 22%; } 100% { opacity: 0; top: 50%; } }
@keyframes txHit { 0% { transform: scale(1); } 50% { transform: scale(1.35); border-color: #fff; } 100% { transform: scale(1); } }
@keyframes txFill { from { width: 0; } }
@keyframes txTap { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes txNudge { 50% { transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent), var(--shadow-2); } 100% { box-shadow: 0 0 0 3px var(--accent), var(--shadow-2); } }
@keyframes txPress { 0% { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); transform: scale(1); } 40% { transform: scale(.92); } }
@keyframes txRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  dialog.tourx *, dialog.tourx *::before { animation: none !important; transition: none !important; }
  .s-kinds .a2 { box-shadow: 0 0 0 3px var(--accent), var(--shadow-2); }
}
@media (prefers-reduced-transparency: reduce) { .tx-spot { box-shadow: 0 0 0 200vmax rgba(4,14,12,.82); } }
@media (forced-colors: active) { .tx-card { border: 2px solid CanvasText; } dialog.tourx.lit .tx-spot { outline-color: Highlight; } }