.release-change-scenario { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line-soft); user-select: none; -webkit-user-select: none; }
.release-scenario-summary { min-height: 42px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; padding-top: 8px; color: var(--accent-bright); cursor: pointer; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .04em; list-style: none; }
.release-scenario-summary::-webkit-details-marker { display: none; }
.release-scenario-summary-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(83,218,162,.25); border-radius: 7px; background: rgba(83,218,162,.055); transition: transform .35s ease, background .25s ease; }
.release-change-scenario[open] .release-scenario-summary-icon { transform: rotateY(180deg); background: rgba(83,218,162,.12); }
.release-scenario-summary small { justify-self: end; color: var(--text-faint); font-size: 8px; font-weight: 500; }
.release-scenario-content { padding: 8px 0 5px; }
.release-scenario-intro { margin: 0 0 10px; color: var(--text-faint); font-size: 10px; line-height: 1.5; }
.release-scenario-stage { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(118px, .38fr); align-items: start; gap: 12px; perspective: 1400px; }
.release-scenario-device { min-width: 0; display: grid; gap: 7px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.release-scenario-device-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .07em; }
.release-scenario-device-heading strong { color: var(--cyan); font-size: 9px; }
.release-scenario-device-hint { color: var(--text-faint); font-size: 8px; text-align: center; }
.release-scenario-flip { position: relative; display: block; transform-style: preserve-3d; transition: transform .68s cubic-bezier(.2,.75,.25,1); }
.release-scenario-device.is-desktop .release-scenario-flip { aspect-ratio: 16 / 9; }
.release-scenario-device.is-mobile { width: min(100%, 156px); justify-self: center; }
.release-scenario-device.is-mobile .release-scenario-flip { aspect-ratio: 9 / 16; }
.release-scenario-device.is-flipped .release-scenario-flip { transform: rotateY(180deg); }
.release-scenario-device:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; border-radius: 10px; }
.release-scenario-face { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid rgba(88,199,239,.25); border-radius: 12px; background: #071410; box-shadow: 0 18px 34px -24px rgba(0,0,0,.95), 0 0 30px -24px rgba(88,199,239,.8); backface-visibility: hidden; transform: translateZ(1px); animation: release-card-float 4.8s ease-in-out infinite; }
.release-scenario-face.is-after { border-color: rgba(83,218,162,.38); background: #091b15; transform: rotateY(180deg) translateZ(1px); animation-delay: -2.4s; }
.release-scenario-chrome { min-height: 21px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border-bottom: 1px solid var(--line-soft); background: rgba(3,12,10,.9); }
.release-scenario-dots { color: var(--text-faint); font-size: 6px; letter-spacing: 2px; }
.release-scenario-address { min-width: 0; overflow: hidden; color: var(--text-faint); font-family: var(--font-mono); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.release-scenario-canvas { position: relative; min-height: 0; display: grid; grid-template-rows: 18px minmax(0,1fr); overflow: hidden; background: linear-gradient(rgba(18,39,32,.65) 1px,transparent 1px),linear-gradient(90deg,rgba(18,39,32,.65) 1px,transparent 1px),#06110f; background-size: 22px 22px; }
.release-scene-metric { position: absolute; z-index: 3; right: 6px; top: 23px; padding: 2px 4px; border: 1px solid rgba(233,187,92,.28); border-radius: 4px; background: rgba(3,12,10,.88); color: var(--warning); font-family: var(--font-mono); font-size: 6px; }
.is-mobile .release-scene-metric { right: 5px; top: 22px; }
.release-scene-nav { display: flex; align-items: center; gap: 5px; padding: 0 7px; border-bottom: 1px solid var(--line-soft); background: rgba(4,15,12,.86); }
.release-scene-nav i { width: 17%; height: 3px; border-radius: 999px; background: var(--text-faint); opacity: .55; }
.release-scene-nav i:first-child { width: 24%; background: var(--accent); opacity: .9; }
.release-scene-body { position: relative; min-height: 0; display: grid; grid-template-columns: .78fr 1.22fr; gap: 7px; padding: 8px; }
.release-scene-copy, .release-scene-panel { min-width: 0; display: grid; align-content: start; gap: 5px; }
.release-scene-copy i { height: 5px; border-radius: 999px; background: rgba(238,246,242,.7); }
.release-scene-copy i:first-child { width: 72%; height: 10px; background: var(--accent); }
.release-scene-copy i:last-child { width: 62%; background: var(--text-faint); }
.release-scene-panel { position: relative; padding: 7px; overflow: hidden; border: 1px solid rgba(88,199,239,.24); border-radius: 7px; background: rgba(10,33,26,.92); }
.release-scene-panel i { display: block; height: 5px; border-radius: 2px; background: rgba(83,218,162,.35); }
.release-scene-panel i:nth-child(2) { width: 82%; }
.release-scene-panel i:nth-child(3) { width: 64%; background: rgba(88,199,239,.32); }
.release-scene-panel i:last-child { width: 45%; background: rgba(233,187,92,.45); }
.release-scene-timeline { position: absolute; right: 8px; bottom: 7px; left: 43%; display: flex; justify-content: space-between; gap: 3px; }
.release-scene-timeline i { width: 100%; height: 3px; border-radius: 999px; background: var(--line); }
.release-scene-timeline i:first-child { background: var(--accent); animation: release-progress 2.8s ease-in-out infinite; }
.release-scene-pointer { position: absolute; z-index: 2; right: 20%; bottom: 28%; color: #fff; font-size: 12px; filter: drop-shadow(0 2px 3px #000); animation: release-pointer 2.8s ease-in-out infinite; }
.release-scenario-face-meta { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 8px 7px; border-top: 1px solid var(--line-soft); }
.release-scenario-face-meta strong { color: var(--danger); font-family: var(--font-mono); font-size: 7px; letter-spacing: .08em; }
.release-scenario-face.is-after .release-scenario-face-meta strong { color: var(--accent); }
.release-scenario-face-meta small { color: var(--text-faint); font-family: var(--font-mono); font-size: 6px; }
.release-scenario-face-meta > span { grid-column: 1 / -1; overflow: hidden; color: var(--text-dim); font-size: 7px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.is-mobile .release-scene-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 6px; }
.is-mobile .release-scene-copy { gap: 3px; }
.is-mobile .release-scene-copy i:first-child { height: 8px; }
.is-mobile .release-scene-panel { min-height: 62%; }
.is-mobile .release-scene-timeline { right: 6px; bottom: 6px; left: 6px; }
.is-mobile .release-scenario-face-meta > span { white-space: normal; }

/* Scene-specific reconstructions. */
[data-scene="landing-fit"] .release-scene-panel { min-height: 132%; transform: translateY(8%); }
.is-after [data-scene="landing-fit"] .release-scene-panel { min-height: 0; transform: none; }
[data-scene="landing-fit"]::after { content: "!"; position: absolute; right: 5px; bottom: 4px; min-width: 14px; padding: 2px 4px; border-radius: 4px; background: var(--danger); color: #190503; font-family: var(--font-mono); font-size: 7px; font-weight: 700; text-align: center; }
.is-after [data-scene="landing-fit"]::after { content: "✓"; background: var(--accent); color: #03110c; }
[data-scene="version-history"] .release-scene-copy { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
[data-scene="version-history"] .release-scene-copy i { width: 100%; height: 9px; border: 1px solid var(--line); background: rgba(83,218,162,.08); }
.is-after [data-scene="version-history"] .release-scene-copy { grid-template-columns: repeat(5,1fr); }
.is-after [data-scene="version-history"] .release-scene-copy::after { content: "0.1 → 0.20"; grid-column: 1 / -1; color: var(--accent); font-family: var(--font-mono); font-size: 6px; text-align: center; }
[data-scene="release-scenarios"] .release-scene-panel { transform-origin: center; animation: release-mini-flip 3.2s ease-in-out infinite; }
[data-scene="bilingual"] .release-scene-panel::after { content: "ES"; position: absolute; right: 5px; top: 4px; color: var(--text-faint); font-family: var(--font-mono); font-size: 6px; }
.is-after [data-scene="bilingual"] .release-scene-panel::after { content: "ES / EN"; color: var(--accent); }
[data-scene="interaction-surfaces"] .release-scene-copy::after { content: "Aa"; padding: 2px 4px; border-radius: 3px; background: rgba(88,199,239,.32); color: #fff; font-size: 7px; animation: release-selection 2.8s ease-in-out infinite; }
.is-after [data-scene="interaction-surfaces"] .release-scene-copy::after { content: "↗"; width: 14px; background: rgba(83,218,162,.3); text-align: center; animation: none; }
[data-scene="auth-resilience"] .release-scene-panel::after { content: "< HTML"; position: absolute; right: 5px; bottom: 5px; padding: 2px 4px; border-radius: 4px; background: rgba(234,99,87,.2); color: var(--danger); font-family: var(--font-mono); font-size: 6px; animation: release-auth-submit 3s ease-in-out infinite; }
.is-after [data-scene="auth-resilience"] .release-scene-panel::after { content: "RETRY ↻"; background: rgba(83,218,162,.16); color: var(--accent); }
[data-scene="tunnel-recovery"] { background: #f7f7f7; }
[data-scene="tunnel-recovery"] .release-scene-nav, [data-scene="tunnel-recovery"] .release-scene-copy { opacity: .12; }
[data-scene="tunnel-recovery"] .release-scene-panel { border: 0; background: transparent; }
[data-scene="tunnel-recovery"] .release-scene-panel::after { content: "1033"; position: absolute; inset: 18% 0 auto; color: #444; font-family: var(--font-mono); font-size: clamp(13px,3vw,24px); text-align: center; }
.is-after [data-scene="tunnel-recovery"] { background: linear-gradient(rgba(18,39,32,.65) 1px,transparent 1px),linear-gradient(90deg,rgba(18,39,32,.65) 1px,transparent 1px),#06110f; background-size: 22px 22px; }
.is-after [data-scene="tunnel-recovery"] .release-scene-nav, .is-after [data-scene="tunnel-recovery"] .release-scene-copy { opacity: 1; }
.is-after [data-scene="tunnel-recovery"] .release-scene-panel { border: 1px solid rgba(83,218,162,.35); background: rgba(10,33,26,.92); }
.is-after [data-scene="tunnel-recovery"] .release-scene-panel::after { content: "200"; color: var(--accent); animation: release-tunnel-online 3s ease-in-out infinite; }
[data-scene^="snapshot-"] { --snapshot-color: hsl(var(--snapshot-hue) 70% 62%); }
[data-scene^="snapshot-"] .release-scene-panel { border-color: color-mix(in srgb,var(--snapshot-color) 46%,transparent); transform: translate(var(--snapshot-x),var(--snapshot-y)) rotate(var(--snapshot-tilt)); animation: release-snapshot-inspect 3.4s ease-in-out infinite; }
.is-after [data-scene^="snapshot-"] .release-scene-panel { transform: none; background: color-mix(in srgb,var(--snapshot-color) 10%,#071611); }
[data-scene^="snapshot-"] .release-scene-copy i:first-child { background: var(--snapshot-color); }
[data-scene^="snapshot-"] .release-scene-panel::after { position:absolute;right:5px;bottom:5px;padding:2px 4px;border-radius:4px;background:rgba(3,12,10,.88);color:var(--snapshot-color);font:700 6px var(--font-mono);letter-spacing:.05em; }
[data-archetype="access"] .release-scene-panel::after { content:"LOGIN"; }
[data-archetype="language"] .release-scene-panel::after { content:"ES ↔ EN"; }
[data-archetype="notifications"] .release-scene-panel::after { content:"ALERT"; }
[data-archetype="paper"] .release-scene-panel::after { content:"YES / NO"; }
[data-archetype="history"] .release-scene-panel::after { content:"v0 → vN"; }
[data-archetype="capture"] .release-scene-panel::after { content:"CAPTURE"; }
[data-archetype="research"] .release-scene-panel::after { content:"ML ◈"; }
[data-archetype="data"] .release-scene-panel::after { content:"A ⇄ B"; }
[data-archetype="deployment"] .release-scene-panel::after { content:"DEPLOY ✓"; }
[data-archetype="platform"] .release-scene-panel::after { content:"PLATFORM"; }

@keyframes release-card-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes release-progress { 0%,20% { width: 15%; } 65%,100% { width: 100%; } }
@keyframes release-pointer { 0%,20% { transform: translate(-18px,12px); opacity: 0; } 35%,72% { transform: translate(0,0); opacity: 1; } 82%,100% { transform: scale(.72); opacity: 0; } }
@keyframes release-snapshot-inspect { 0%,100% { filter: saturate(.72); opacity: .76; } 45%,70% { filter: saturate(1.18); opacity: 1; } }
@keyframes release-mini-flip { 0%,35% { transform: rotateY(0); } 55%,85% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes release-selection { 0%,20%,100% { width: 14px; opacity: .35; } 50%,75% { width: 72%; opacity: 1; } }
@keyframes release-auth-submit { 0%,25% { opacity: .25; transform: translateY(4px); } 45%,85% { opacity: 1; transform: none; } 100% { opacity: .25; } }
@keyframes release-tunnel-online { 0%,20% { opacity: .25; } 45%,90% { opacity: 1; text-shadow: 0 0 10px rgba(83,218,162,.65); } 100% { opacity: .25; } }

@media (max-width: 720px) {
  .release-scenario-stage { grid-template-columns: minmax(0,1fr) minmax(104px,.42fr); gap: 8px; }
  .release-scenario-device.is-mobile { width: min(100%, 126px); }
  .release-scenario-summary { grid-template-columns: auto 1fr; }
  .release-scenario-summary small { grid-column: 2; justify-self: start; }
}
@media (max-width: 430px) {
  .release-scenario-stage { grid-template-columns: 1fr; }
  .release-scenario-device.is-mobile { width: 142px; }
}
@media (prefers-reduced-motion: reduce) {
  .release-scenario-face, .release-scene-timeline i, .release-scene-pointer, [data-scene="release-scenarios"] .release-scene-panel, [data-scene="interaction-surfaces"] .release-scene-copy::after, [data-scene="auth-resilience"] .release-scene-panel::after, [data-scene="tunnel-recovery"] .release-scene-panel::after, [data-scene^="snapshot-"] .release-scene-panel { animation: none !important; }
  .release-scenario-flip { transition-duration: .001ms; }
}