.package-scene {
  --fh-source: var(--dr-cyan, #70c9c0);
  --fh-warm: var(--dr-amber, #d4ad62);
  --fh-metal: var(--dr-steel, #aab6b5);
  --fh-dim: var(--dr-steel-dim, #536262);
  position: relative;
  display: grid;
  min-height: 18rem;
  margin: 0 0 1rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fh-source) 22%, transparent);
  background:
    radial-gradient(circle at 62% 44%, color-mix(in srgb, var(--fh-source) 8%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 46%),
    var(--dr-space, #050809);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), inset 0 -2.2rem 4rem rgba(0,0,0,.28);
  isolation: isolate;
}
.package-scene::before {
  content: "";
  position: absolute;
  inset: auto 10% .72rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fh-source) 28%, transparent), transparent);
  opacity: .65;
  pointer-events: none;
}
.package-scene__layer {
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  padding: 1.25rem;
  overflow: hidden;
  color: color-mix(in srgb, var(--fh-metal) 82%, var(--fh-source));
  font: clamp(.58rem, 2.1vw, .86rem)/1.08 var(--font-mono, monospace);
  text-align: center;
  white-space: pre;
  text-shadow: 0 0 .75rem color-mix(in srgb, var(--fh-source) 10%, transparent);
}
.package-scene__layer--background { opacity: .34; transform: translateY(-.15rem); color: var(--fh-dim); }
.package-scene__layer--structure { opacity: .76; color: var(--fh-metal); }
.package-scene__layer--subject { color: color-mix(in srgb, var(--fh-source) 78%, var(--dr-cold, #e5f2f1)); }
.package-scene__sweep { display: none; }

.package-scene[data-scene="forklight-dock"] {
  --fh-source: var(--dr-cyan, #70c9c0);
  background:
    radial-gradient(circle at 70% 48%, color-mix(in srgb, var(--dr-amber, #d4ad62) 10%, transparent), transparent 25%),
    radial-gradient(circle at 34% 40%, color-mix(in srgb, var(--dr-cyan, #70c9c0) 8%, transparent), transparent 34%),
    var(--dr-space, #050809);
}
.package-scene[data-scene="forklight-dock"] .package-scene__layer--structure { color: color-mix(in srgb, var(--dr-steel, #aab6b5) 78%, var(--dr-rust, #9c6748)); }
.package-scene[data-scene="forklight-dock"] .package-scene__layer--subject { color: color-mix(in srgb, var(--dr-amber, #d4ad62) 58%, var(--dr-cold, #e5f2f1)); }

.package-scene[data-scene="thermal-gallery"] {
  --fh-source: var(--dr-amber, #d4ad62);
  background:
    radial-gradient(circle at 53% 58%, color-mix(in srgb, var(--dr-rust, #9c6748) 16%, transparent), transparent 34%),
    radial-gradient(circle at 72% 30%, color-mix(in srgb, var(--dr-cyan, #70c9c0) 6%, transparent), transparent 25%),
    var(--dr-space, #050809);
}
.package-scene[data-scene="thermal-gallery"] .package-scene__layer--structure { color: color-mix(in srgb, var(--dr-rust, #9c6748) 52%, var(--dr-steel, #aab6b5)); }
.package-scene[data-scene="thermal-gallery"] .package-scene__layer--subject { color: color-mix(in srgb, var(--dr-amber, #d4ad62) 76%, var(--dr-cold, #e5f2f1)); }

.package-scene[data-scene="old-beacon-field"] {
  --fh-source: var(--dr-cyan, #70c9c0);
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--dr-cyan, #70c9c0) 11%, transparent), transparent 38%),
    radial-gradient(circle at 16% 70%, color-mix(in srgb, var(--dr-amber, #d4ad62) 5%, transparent), transparent 20%),
    var(--dr-space, #050809);
}
.package-scene[data-scene="old-beacon-field"] .package-scene__layer--subject { color: color-mix(in srgb, var(--dr-cyan, #70c9c0) 70%, var(--dr-cold, #e5f2f1)); }
.package-scene[data-scene="old-beacon-field"] .package-scene__sweep {
  display: block;
  position: absolute;
  left: 18%; right: 18%; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dr-cyan, #70c9c0) 40%, transparent), transparent);
  opacity: .25;
  pointer-events: none;
  animation: fh-beacon-route 5.6s ease-in-out infinite;
}

.package-scene[data-scene="false-signal-wreck"] {
  --fh-source: var(--dr-anomaly, #9b87c8);
  background:
    radial-gradient(circle at 58% 42%, color-mix(in srgb, var(--dr-anomaly, #9b87c8) 12%, transparent), transparent 31%),
    radial-gradient(circle at 40% 62%, color-mix(in srgb, var(--dr-cyan, #70c9c0) 7%, transparent), transparent 28%),
    var(--dr-space, #050809);
}
.package-scene[data-scene="false-signal-wreck"] .package-scene__layer--structure { color: color-mix(in srgb, var(--dr-steel, #aab6b5) 76%, var(--dr-anomaly, #9b87c8)); }
.package-scene[data-scene="false-signal-wreck"] .package-scene__layer--subject { color: color-mix(in srgb, var(--dr-anomaly, #9b87c8) 64%, var(--dr-cold, #e5f2f1)); }
.package-scene[data-scene="false-signal-wreck"] .package-scene__sweep {
  display: block;
  position: absolute;
  width: 34%; height: 1px;
  left: 33%; top: 42%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dr-anomaly, #9b87c8) 52%, transparent), transparent);
  opacity: .24;
  pointer-events: none;
  animation: fh-false-trace 3.2s steps(2,end) infinite;
}

.package-scene--beacon-pulse .package-scene__layer--subject { animation: package-beacon 2.8s steps(2,end) infinite; }
.package-scene--thermal-breathe .package-scene__layer--background { animation: package-breathe 4.5s ease-in-out infinite; }
.package-scene--false-signal .package-scene__layer--subject { animation: package-signal 3.2s steps(1,end) infinite; }
.package-scene--low-drift .package-scene__layer--background { animation: package-drift 8s ease-in-out infinite alternate; }

.first-horizon-event,.first-horizon-refit {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--dr-cyan, #70c9c0) 22%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--dr-cyan, #70c9c0) 4%, transparent), transparent 70%);
}
.first-horizon-event p,.first-horizon-refit p { margin: .55rem 0 0; }
.readiness-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; margin: 1rem 0; }
.readiness-item { display: flex; gap: .45rem; align-items: center; min-height: 2.5rem; padding: .45rem .55rem; border: 1px solid rgba(190,204,199,.15); color: var(--muted, #95a09c); font-size: .76rem; }
.readiness-item.is-ready { border-color: color-mix(in srgb, var(--dr-cyan, #70c9c0) 34%, transparent); color: color-mix(in srgb, var(--dr-cyan, #70c9c0) 58%, var(--dr-cold, #e5f2f1)); }
.readiness-item.is-missing span { color: var(--dr-amber, #d4ad62); }
.repair-ledger { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; margin: .8rem 0; }
.repair-ledger span { color: var(--muted,#95a09c); }
.repair-ledger .is-ready { color: color-mix(in srgb, var(--dr-cyan, #70c9c0) 58%, var(--dr-cold, #e5f2f1)); }
.horizon-chart { display: flex; align-items: center; justify-content: center; min-height: 12rem; padding: 1.5rem .8rem; border: 1px solid color-mix(in srgb, var(--dr-cyan, #70c9c0) 18%, transparent); background: radial-gradient(circle at 14% 50%, color-mix(in srgb, var(--dr-cyan, #70c9c0) 10%, transparent), transparent 18%),radial-gradient(circle at 86% 50%, color-mix(in srgb, var(--dr-amber, #d4ad62) 7%, transparent), transparent 18%),var(--dr-space,#050809); color: color-mix(in srgb, var(--dr-cyan, #70c9c0) 60%, var(--dr-cold, #e5f2f1)); }
.horizon-chart__home,.horizon-chart__far { display: grid; place-items: center; gap: .5rem; min-width: 5rem; font-size: 1.6rem; }
.horizon-chart small { font-size: .62rem; letter-spacing: .08em; text-align: center; }
.horizon-chart__trace { flex: 1; max-width: 28rem; overflow: hidden; color: color-mix(in srgb, var(--dr-cyan, #70c9c0) 28%, transparent); letter-spacing: .18em; white-space: nowrap; }
.horizon-chart__far { color: var(--dr-steel-dim,#536262); }
.horizon-chart__far.is-known { color: var(--dr-amber,#d4ad62); }
.home-return { border-left: 2px solid color-mix(in srgb, var(--dr-cyan, #70c9c0) 48%, transparent); padding-left: 1rem; }

@keyframes package-beacon { 0%,76%{opacity:.38} 77%,84%{opacity:1} 85%,100%{opacity:.58} }
@keyframes package-breathe { 0%,100%{opacity:.22} 50%{opacity:.48} }
@keyframes package-signal { 0%,86%{opacity:.46} 87%,90%{opacity:1} 91%,100%{opacity:.3} }
@keyframes package-drift { from{transform:translate(-.18rem,-.15rem)} to{transform:translate(.18rem,.12rem)} }
@keyframes fh-beacon-route { 0%,100%{transform:scaleX(.35);opacity:.12} 48%,58%{transform:scaleX(1);opacity:.42} }
@keyframes fh-false-trace { 0%,82%{transform:translateX(-16%);opacity:.08} 83%,88%{transform:translateX(16%);opacity:.46} 89%,100%{opacity:.12} }

@media (max-width: 640px) {
  .package-scene { min-height: 14rem; }
  .package-scene__layer { padding: .8rem .2rem; font-size: clamp(.45rem,2.2vw,.7rem); }
  .readiness-grid,.repair-ledger { grid-template-columns: 1fr 1fr; }
  .horizon-chart { min-height: 9rem; padding-inline: .3rem; }
  .horizon-chart__home,.horizon-chart__far { min-width: 4rem; }
}
@media (max-width: 430px) {
  .package-scene {
    min-height: clamp(142px, 22svh, 176px);
    margin: 0 0 .6rem;
  }
  .package-scene__layer {
    padding: .5rem .2rem;
    font-size: clamp(.42rem, 2.1vw, .62rem);
  }
  .horizon-chart {
    min-height: 5.4rem;
    padding: .55rem .4rem;
    margin: 0 0 .5rem;
  }
  .horizon-chart__home,
  .horizon-chart__far {
    min-width: 3.4rem;
    font-size: 1.25rem;
    gap: .25rem;
  }
  .horizon-chart small {
    font-size: .56rem;
    letter-spacing: .04em;
  }
  .horizon-chart__trace {
    letter-spacing: .12em;
  }
  .readiness-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem;
    margin: .5rem 0;
  }
  .readiness-item {
    min-height: 1.85rem;
    padding: .25rem .35rem;
    gap: .25rem;
    font-size: .66rem;
    line-height: 1.15;
  }
  .readiness-item strong {
    font-size: .62rem;
    font-weight: 500;
  }
  .repair-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    margin: .45rem 0;
    font-size: .72rem;
  }
  .first-horizon-event,
  .first-horizon-refit {
    margin: .5rem 0;
    padding: .65rem .75rem;
  }
  .first-horizon-event p,
  .first-horizon-refit p {
    margin: .35rem 0 0;
  }
  .risk-card {
    padding: 6px 8px;
    margin-top: 6px;
    font-size: .74rem;
  }
}

@media (max-height: 680px) {
  .package-scene {
    min-height: clamp(120px, 18svh, 142px);
    margin-bottom: .4rem;
  }
  .package-scene__layer {
    padding: .35rem .1rem;
    font-size: clamp(.38rem, 1.9vw, .52rem);
  }
  .horizon-chart {
    min-height: 4.6rem;
    padding: .4rem .3rem;
    margin-bottom: .4rem;
  }
  .horizon-chart__home,
  .horizon-chart__far {
    min-width: 3rem;
    font-size: 1.1rem;
    gap: .2rem;
  }
  .first-horizon-event,
  .first-horizon-refit {
    margin: .35rem 0;
    padding: .45rem .6rem;
  }
  .readiness-grid {
    margin: .35rem 0;
    gap: .2rem;
  }
  .readiness-item {
    min-height: 1.65rem;
    padding: .2rem .3rem;
    font-size: .6rem;
  }
  .repair-ledger {
    margin: .35rem 0;
    gap: .2rem;
    font-size: .68rem;
  }
  .risk-card {
    padding: 5px 7px;
    margin-top: 5px;
    font-size: .7rem;
  }
}

html[data-visual-test="labelblind"] .first-horizon-refit .section-title,
html[data-visual-test="labelblind"] .first-horizon-refit p,
html[data-visual-test="labelblind"] .repair-ledger,
html[data-visual-test="labelblind"] .readiness-grid,
html[data-visual-test="labelblind"] .risk-card,
html[data-visual-test="labelblind"] .first-horizon-event,
html[data-visual-test="labelblind"] .horizon-chart small {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .package-scene *,
  .package-scene,
  .horizon-chart *,
  .horizon-chart {
    animation: none !important;
    transition: none !important;
  }
}