.qa-trail {
  --trail-ink: var(--qx-ink, #172554);
  width: min(1180px, 100%);
  margin: 0 auto 4rem;
  color: var(--trail-ink);
}
.qa-trail button,
.qa-trail a { min-height: 44px; font: inherit; }
.qa-trail :focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.qa-trail-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 5vw, 3.2rem);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 18%, rgba(250,204,21,.58), transparent 21%),
    radial-gradient(circle at 10% 110%, rgba(45,212,191,.42), transparent 32%),
    linear-gradient(135deg, var(--qx-hero-start, #312e81), var(--qx-hero-middle, #6d28d9) 55%, var(--qx-hero-end, #0f766e));
  color: #fff;
  box-shadow: 0 22px 55px rgba(49,46,129,.22);
}
.qa-trail-hero h1 { margin: .2rem 0 .75rem; font-size: clamp(2.35rem, 7vw, 5.5rem); font-weight: 950; line-height: .94; letter-spacing: -.06em; }
.qa-trail-hero p:not(.qa-trail-eyebrow) { max-width: 720px; margin: 0; color: rgba(255,255,255,.82); }
.qa-trail-eyebrow { margin: 0; color: #a5f3fc; font-size: .7rem; font-weight: 950; letter-spacing: .17em; text-transform: uppercase; }
.qa-trail-hero nav { display: flex; flex-wrap: wrap; gap: .55rem; }
.qa-trail-hero a { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.24); border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; font-size: .76rem; font-weight: 900; text-decoration: none; }
.qa-trail-contract { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .55rem; margin: 1rem 0; }
.qa-trail-contract span { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .65rem .75rem; border: 1px solid #c7d2fe; border-radius: 13px; background: #eef2ff; color: #3730a3; font-size: .74rem; font-weight: 900; }
.qa-trail-status { display: flex; align-items: center; gap: .55rem; min-height: 48px; margin: 1rem 0; padding: .7rem .85rem; border: 1px solid #bae6fd; border-radius: 13px; background: #f0f9ff; color: #075985; font-weight: 850; }
.qa-trail-status[data-kind="success"] { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.qa-trail-layout { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(250px,.8fr); gap: 1rem; align-items: start; }
.qa-trail-layout > * { min-width: 0; }
.qa-trail-instructions { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin: 0 0 .55rem; color: #64748b; font-size: .74rem; }
.qa-trail-instructions kbd { min-width: 25px; padding: .2rem; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 6px; background: #fff; color: #334155; text-align: center; }
.qa-trail-field { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border: 3px solid #fff; border-radius: 24px; background: radial-gradient(circle at 50% 50%, #bbf7d0, #86efac 55%, #4ade80); box-shadow: 0 16px 45px rgba(21,128,61,.18), 0 0 0 1px #bbf7d0; }
.qa-trail-field:focus { box-shadow: 0 16px 45px rgba(21,128,61,.18), 0 0 0 4px #fbbf24; }
.qa-trail-path { position: absolute; inset: 10% 8%; border: 30px solid rgba(254,243,199,.8); border-radius: 48% 52% 44% 56%; transform: rotate(-6deg); box-shadow: inset 0 0 0 3px rgba(217,119,6,.1), 0 0 0 3px rgba(217,119,6,.1); }
.qa-lantern { position: absolute; z-index: 4; display: grid; place-items: center; width: 8%; min-width: 34px; aspect-ratio: 1; transform: translate(-50%,-50%); border: 3px solid #fff; border-radius: 50%; background: #facc15; color: #fff; box-shadow: 0 0 0 6px rgba(254,240,138,.5), 0 0 28px #facc15; animation: qa-lantern-glow 1.6s ease-in-out infinite; }
.qa-lantern[data-collected="true"] { opacity: .22; filter: grayscale(1); animation: none; }
.qa-trail-player { position: absolute; z-index: 10; left: 50%; top: 84%; display: grid; place-items: center; width: 78px; height: 78px; transform: translate(-50%,-50%); transition: left .12s linear, top .12s linear; }
.qa-trail-hitbox { position: absolute; z-index: 0; width: 28px; height: 28px; border: 2px dashed rgba(190,24,93,.68); border-radius: 8px; background: rgba(251,207,232,.22); }
[data-qa-runtime-avatar] { position: relative; z-index: 1; display: grid; place-items: center; }
[data-qa-runtime-avatar] .qa-runtime-visual { display: flex; align-items: center; justify-content: center; gap: -2px; width: 64px; height: 64px; overflow: hidden; border: 3px solid #fff; border-radius: 22px; box-shadow: 0 7px 15px rgba(30,41,59,.25); }
[data-qa-runtime-avatar] .qa-runtime-portrait { width: 100%; height: 100%; object-fit: cover; }
[data-qa-runtime-avatar] .qa-runtime-layer-image { display: block; width: 70%; height: 70%; max-width: none; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(15,23,42,.26)); }
[data-qa-runtime-avatar] .qa-runtime-layer-image[data-slot="hair"] { width: 105%; height: 78%; }
[data-qa-runtime-avatar] .qa-runtime-layer-image[data-slot="accessory"] { width: 58%; height: 58%; }
[data-qa-runtime-avatar] .qa-runtime-aura .qa-runtime-layer-image { width: 145%; height: 145%; }
[data-qa-runtime-avatar] .qa-runtime-visual i { margin-inline: -4px; }
[data-qa-runtime-avatar] strong { position: absolute; top: calc(100% + 2px); max-width: 130px; padding: .1rem .3rem; overflow: hidden; border-radius: 5px; background: rgba(15,23,42,.85); color: #fff; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.qa-trail-controls { display: none; grid-template: repeat(2,52px) / repeat(3,52px); justify-content: center; gap: 5px; margin-top: .75rem; }
.qa-trail-controls button { display: grid; place-items: center; border: 1px solid #cbd5e1; border-radius: 14px; background: #fff; color: #4338ca; }
.qa-trail-controls [data-trail-direction="north"] { grid-column: 2; }
.qa-trail-controls [data-trail-direction="west"] { grid-column: 1; grid-row: 2; }
.qa-trail-controls [data-trail-direction="south"] { grid-column: 2; grid-row: 2; }
.qa-trail-controls [data-trail-direction="east"] { grid-column: 3; grid-row: 2; }
.qa-trail-panel { padding: 1.25rem; border: 1px solid #ddd6fe; border-radius: 20px; background: #fff; box-shadow: 0 14px 35px rgba(76,29,149,.09); }
.qa-trail-panel .qa-trail-eyebrow { color: #6d28d9; }
.qa-trail-panel h2 { margin: .2rem 0; font-weight: 950; }
.qa-trail-panel > strong { display: block; margin: .65rem 0; color: #6d28d9; font-size: 2.1rem; }
.qa-trail-lights { display: grid; grid-template-columns: repeat(5,1fr); gap: .35rem; }
.qa-trail-lights span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: #f1f5f9; color: #cbd5e1; }
.qa-trail-lights span[data-collected="true"] { background: #fef9c3; color: #eab308; box-shadow: 0 0 14px rgba(234,179,8,.24); }
.qa-trail-panel button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; margin-top: 1rem; border: 0; border-radius: 12px; background: #4f46e5; color: #fff; font-weight: 900; }
.qa-trail-panel > p:last-child { margin: 1rem 0 0; color: #64748b; font-size: .72rem; }
@keyframes qa-lantern-glow { 50% { transform: translate(-50%,-50%) scale(1.1); box-shadow: 0 0 0 9px rgba(254,240,138,.28), 0 0 34px #facc15; } }
@media (max-width: 900px) {
  .qa-trail-contract { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .qa-trail-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .qa-trail { margin-bottom: 2rem; }
  .qa-trail-hero { align-items: flex-start; flex-direction: column; border-radius: 20px; }
  .qa-trail-contract { grid-template-columns: 1fr; }
  .qa-trail-field { border-radius: 16px; }
  .qa-trail-controls { display: grid; }
  .qa-trail-player { width: 64px; height: 64px; }
  [data-qa-runtime-avatar] .qa-runtime-visual { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-trail *, .qa-trail *::before, .qa-trail *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}