/* "Show me around" tour (tour.js): one part of the app lit up at a time, in its section's color. */
.kt-layer { position: fixed; inset: 0; z-index: 10080; --kt: var(--orange); --kt-dark: var(--orange-dark); --kt-light: var(--orange-light); }
.kt-layer[data-color="purple"] { --kt: var(--purple); --kt-dark: var(--purple-dark); --kt-light: var(--purple-light); }
.kt-layer[data-color="green"] { --kt: var(--green); --kt-dark: var(--green-dark); --kt-light: var(--green-light); }
.kt-layer[data-color="blue"] { --kt: var(--blue); --kt-dark: var(--blue-dark); --kt-light: var(--blue-light); }
/* Mega Knox steps: Mega's gold, with dark text on the gold button. */
.kt-layer[data-color="gold"] { --kt: #F2B705; --kt-dark: #B38600; --kt-light: #FFF3C4; }
.kt-layer[data-color="gold"] .kt-main { color: #4A3400; }
.kt-layer.kt-dim { background: rgba(20,12,4,.55); }
.kt-spot { position: absolute; border-radius: 16px; box-shadow: 0 0 0 4px var(--kt), 0 0 0 9999px rgba(20,12,4,.55); pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; animation: ktPulse 1.8s ease-in-out infinite; }
@keyframes ktPulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--kt) 55%, transparent), 0 0 0 9999px rgba(20,12,4,.55); } }
.kt-card { position: absolute; width: min(340px, calc(100vw - 24px)); padding: 18px 18px 16px; border-radius: 22px; background: var(--surface); color: var(--text); border: 2px solid var(--kt); box-shadow: 0 5px 0 var(--kt-dark), 0 18px 40px rgba(0,0,0,.25); outline: none; animation: ktIn .22s cubic-bezier(.34,1.56,.64,1); }
.kt-card.kt-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); animation-name: ktInCenter; }
@keyframes ktIn { from { opacity: 0; scale: .94; } }
@keyframes ktInCenter { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }
.kt-head { display: flex; align-items: center; gap: 11px; margin: 0 26px 8px 0; }
.kt-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--kt) 14%, var(--surface)); overflow: hidden; }
.kt-icon img { width: 100%; height: 100%; object-fit: cover; }
/* Section steps: the same icon tile as the sidebar, a bit bigger (the sidebar's sizing is scoped to it). */
.kt-icon:has(.sq-icon) { background: none; overflow: visible; }
.kt-icon .sq-icon { width: 40px; height: 40px; margin: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--kt); color: var(--kt); background: var(--kt-light); box-shadow: 0 3px 0 var(--kt-dark); }
.kt-icon .sq-icon svg { width: 24px; height: 24px; }
.kt-emoji { font-size: 22px; line-height: 1; }
.kt-card h2 { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.2; color: var(--text); }
.kt-card p { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--text-light); }
.kt-card p.kt-fine { margin-top: 8px; font-size: 12px; }
.kt-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--text-light); font: inherit; font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer; }
.kt-x:hover { background: var(--cream-warm); }
.kt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.kt-dots { display: flex; gap: 5px; }
.kt-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: width .2s; }
.kt-dots span.on { width: 18px; border-radius: 4px; background: var(--kt); }
.kt-btns { display: flex; gap: 8px; margin-left: auto; }
.kt-btn { padding: 9px 15px; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 900; cursor: pointer; white-space: nowrap; transition: transform .12s, box-shadow .12s; }
.kt-main { border: 2px solid var(--kt-dark); background: var(--kt); color: #fff; box-shadow: 0 3px 0 var(--kt-dark); }
.kt-main:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--kt-dark); }
.kt-main:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--kt-dark); }
.kt-ghost { border: 2px solid var(--border); background: var(--surface); color: var(--text); box-shadow: 0 3px 0 var(--border); }
.kt-btn:focus-visible, .kt-x:focus-visible { outline: 3px solid color-mix(in srgb, var(--kt) 60%, transparent); outline-offset: 2px; }
/* Steps with longer button labels (welcome, all set): dots on top, buttons share a full row. */
.kt-foot.kt-wide { flex-direction: column; align-items: stretch; gap: 12px; }
.kt-foot.kt-wide .kt-dots { justify-content: center; }
.kt-foot.kt-wide .kt-btns { width: 100%; margin-left: 0; }
.kt-foot.kt-wide .kt-btn { flex: 1; }
@media (max-width: 420px) { .kt-foot { flex-wrap: wrap; } .kt-btns { width: 100%; } .kt-btns .kt-btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .kt-spot, .kt-card { animation: none; transition: none; } }