/* Release illustration: one readable panel per stage, with optional manual previews. */
.delivery-story { background:linear-gradient(180deg,var(--surface),var(--bg)); }
.delivery-layout { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); }
.delivery-visual { --stage-index:0; top:108px; }
.delivery-canvas { height:540px; min-height:0; border-radius:24px; border-color:var(--glass-edge); background:radial-gradient(ellipse at 5% 10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 57%),radial-gradient(ellipse at 100% 85%,rgba(115,165,225,.065),transparent 55%),var(--bg); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent),0 24px 80px rgba(0,0,0,.12); }
.delivery-canvas::after { content:""; position:absolute; inset:7px; border:1px solid color-mix(in srgb,var(--line) 45%,transparent); border-radius:18px; pointer-events:none; }
.delivery-canvas .delivery-webgl { opacity:.24; }
.delivery-canvas .delivery-grid { opacity:.35; background-size:36px 36px; mask-image:radial-gradient(ellipse at center,#000,transparent 75%); -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%); }
.release-topline { position:absolute; z-index:2; top:25px; left:28px; right:28px; display:flex; align-items:center; justify-content:space-between; gap:12px; font:9px/1.4 var(--mono-font); letter-spacing:.1em; color:var(--muted); }
.release-topline > span:first-child { display:flex; align-items:center; gap:8px; color:var(--text); }
.release-topline i { width:12px; height:12px; border:1px solid var(--accent); border-radius:4px; box-shadow:inset 0 0 0 3px var(--bg); background:var(--accent); transform:rotate(-12deg); }
.release-example { padding:5px 8px; border:1px solid var(--line); border-radius:6px; font-size:8px; letter-spacing:0; }
.release-heading { position:absolute; z-index:2; top:82px; left:28px; right:28px; }
.release-heading > span { color:var(--accent-strong); font:8px/1.5 var(--mono-font); letter-spacing:.13em; }
.release-heading h3 { margin:10px 0 0; font:500 clamp(20px,2vw,27px)/1.2 var(--display-font); letter-spacing:-.035em; }
.release-scene { position:absolute; inset:160px 28px 143px; z-index:2; display:grid; place-items:center; }
.delivery-canvas .story-object[data-release-panel] { inset:auto 0; top:auto; bottom:auto; left:0; right:0; width:100%; height:auto; opacity:0; visibility:hidden; transform:translateY(14px) scale(.965); transition:opacity .32s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility .32s; overflow:hidden; border:1px solid var(--glass-edge); border-radius:16px; color:var(--text); background:color-mix(in srgb,var(--glass) 90%,transparent); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent),0 15px 40px rgba(0,0,0,.15); backdrop-filter:blur(20px) saturate(125%); -webkit-backdrop-filter:blur(20px) saturate(125%); }
.delivery-visual[data-phase="0"] .delivery-terminal,
.delivery-visual[data-phase="1"] .delivery-checks,
.delivery-visual[data-phase="2"] .delivery-image,
.delivery-visual[data-phase="3"] .delivery-cluster,
.delivery-visual[data-phase="4"] .delivery-cloud { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.delivery-canvas .delivery-terminal { display:block; }
.delivery-canvas .terminal-bar { height:43px; padding:0 18px; gap:5px; font-size:8px; letter-spacing:.06em; }
.delivery-canvas .terminal-bar i { width:6px; height:6px; }
.delivery-canvas .terminal-bar b { margin-left:auto; padding:4px 8px; border:1px solid var(--line); border-radius:5px; font-weight:400; text-transform:none; }
.delivery-canvas .terminal-code { padding:25px 22px; gap:13px; font:11px/1.5 var(--mono-font); }
.delivery-canvas .terminal-code > span { display:flex; align-items:center; gap:12px; }
.delivery-canvas .terminal-code > span:first-child { margin-bottom:4px; gap:10px; }
.code-key { width:58px; color:var(--muted); font-size:9px; }
.terminal-cursor { width:5px; height:12px; background:var(--accent); opacity:.8; animation:release-cursor 1.5s steps(1) infinite; }
.release-panel-foot { min-height:37px; padding:10px 18px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line); font:8px/1.4 var(--mono-font); color:var(--muted); }
.release-panel-foot > span:first-child { display:flex; align-items:center; gap:7px; }
.release-panel-foot i,.release-nodes i { width:5px; height:5px; display:inline-block; border-radius:50%; background:var(--accent); }
.release-panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:43px; padding:12px 18px; border-bottom:1px solid var(--line); font:8px/1.4 var(--mono-font); letter-spacing:.08em; color:var(--muted); }
.release-panel-head > b { color:var(--accent-strong); font-weight:400; letter-spacing:0; }
.delivery-canvas .delivery-checks { display:block; padding:0; }
.release-check { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.release-check:last-child { border-bottom:0; }
.delivery-canvas .release-check > i { flex:0 0 26px; width:26px; height:26px; border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); background:var(--accent-soft); }
.delivery-canvas .release-check > i::after { border-color:var(--accent-strong); }
.delivery-canvas .release-check > span { display:block; min-height:0; padding:0; border:0; border-radius:0; background:none; font-family:var(--body-font); letter-spacing:0; }
.release-check strong { display:block; font:500 11px/1.3 var(--display-font); color:var(--text); }
.release-check small { display:block; margin-top:4px; color:var(--muted); font:8px/1.4 var(--mono-font); }
.release-check > b { margin-left:auto; padding:5px 7px; border-radius:5px; background:var(--accent-soft); color:var(--accent-strong); font:8px/1.2 var(--mono-font); }
.delivery-canvas .delivery-image { display:block; text-align:left; }
.artifact-body { display:flex; align-items:center; gap:20px; padding:23px 22px; }
.artifact-symbol { width:88px; height:88px; flex:0 0 88px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); border-radius:18px; background:radial-gradient(circle at 30% 20%,var(--accent-soft),transparent 75%); }
.artifact-symbol svg { width:74px; height:74px; stroke:var(--accent-strong); stroke-width:1.3; stroke-linejoin:round; filter:drop-shadow(0 0 8px var(--accent-soft)); }
.artifact-symbol .cube-inner { opacity:.25; }
.artifact-body small { display:block; margin:0; font:7px/1.5 var(--mono-font); letter-spacing:.1em; color:var(--muted); }
.artifact-body strong { display:block; margin-top:9px; font:500 24px/1 var(--display-font); letter-spacing:-.035em; }
.delivery-canvas .artifact-body span { display:block; margin-top:10px; font:9px/1.5 var(--mono-font); color:var(--muted); letter-spacing:0; }
.artifact-digest { display:flex; align-items:center; gap:10px; padding:13px 18px; border-top:1px solid var(--line); font:8px/1.4 var(--mono-font); color:var(--muted); }
.delivery-canvas .artifact-digest > span { font:7px/1 var(--mono-font); letter-spacing:.08em; }
.artifact-digest code { color:var(--text); font-size:9px; }
.artifact-digest b { margin-left:auto; color:var(--accent-strong); font-weight:400; }
.delivery-canvas .delivery-cluster { display:block; padding:0; }
.release-nodes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:22px 18px; }
.release-nodes > div { padding:15px 6px 12px; display:grid; justify-items:center; gap:9px; border:1px solid var(--glass-edge); border-radius:10px; background:color-mix(in srgb,var(--accent) 3%,transparent); }
.release-nodes svg { width:30px; height:30px; stroke:var(--accent-strong); stroke-width:1.2; }
.release-nodes strong { font:9px/1.4 var(--mono-font); font-weight:400; }
.release-nodes span { display:flex; align-items:center; gap:4px; color:var(--muted); font:7px/1.4 var(--mono-font); }
.delivery-canvas .delivery-cloud { display:block; text-align:left; }
.release-health { display:flex; align-items:center; gap:14px; padding:18px 20px 15px; }
.release-health svg { width:42px; height:42px; flex:0 0 42px; stroke:var(--accent-strong); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.release-health strong { font:500 16px/1.4 var(--display-font); letter-spacing:-.025em; }
.release-health span { display:block; margin-top:4px; font:8px/1.4 var(--mono-font); color:var(--muted); }
.release-telemetry { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 20px; }
.release-telemetry > div { padding:12px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--bg) 50%,transparent); }
.release-telemetry strong { font:400 24px/1 var(--display-font); letter-spacing:-.045em; }
.release-telemetry strong span { margin-left:3px; font:9px/1 var(--mono-font); color:var(--muted); letter-spacing:0; }
.release-telemetry small { display:block; margin-top:6px; color:var(--muted); font:7px/1.4 var(--mono-font); }
.release-sparkline { display:block; width:calc(100% - 40px); height:23px; margin:13px 20px 10px; stroke:var(--accent-strong); stroke-width:1.2; }
.release-stages { position:absolute; z-index:3; left:28px; right:28px; bottom:61px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.release-stages::before { content:""; position:absolute; top:14px; left:10%; right:10%; height:1px; background:var(--line-strong); z-index:-1; }
.release-stages button { border:0; padding:0 0 5px; border-radius:8px; background:none; color:var(--muted); display:grid; justify-items:center; gap:10px; font:8px/1.2 var(--mono-font); cursor:pointer; }
.release-stages button i { width:29px; height:29px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--line-strong); border-radius:50%; font:8px/1 var(--mono-font); transition:background .25s,border-color .25s,box-shadow .25s; }
.release-stages button.is-complete i { border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); color:var(--accent-strong); }
.release-stages button[aria-pressed="true"] { color:var(--text); }
.release-stages button[aria-pressed="true"] i { color:var(--button-ink); background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); }
.release-stages button:hover i { border-color:var(--accent); }
.release-stages button:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.delivery-canvas .delivery-status { left:28px; right:28px; bottom:24px; justify-content:space-between; font:8px/1.4 var(--mono-font); letter-spacing:.02em; text-transform:none; }
.delivery-status > span { display:flex; align-items:center; gap:9px; }
.delivery-canvas .delivery-status i { width:5px; height:5px; box-shadow:0 0 0 4px var(--accent-soft); }
.delivery-status small { color:var(--muted); font:8px/1 var(--mono-font); }
.delivery-canvas .delivery-progress { left:28px; right:28px; height:1px; bottom:0; }
.delivery-step,.delivery-step:last-child { min-height:245px; grid-template-columns:32px 1fr; gap:18px; align-items:center; padding:30px 0; opacity:.48; }
.delivery-step.is-active { opacity:1; }
.delivery-step.is-active .step-number { background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent); }
.delivery-step .step-number { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; transition:background .3s,border-color .3s; font-size:9px; }
body[data-motion="paused"] .terminal-cursor { animation:none; }
body[data-motion="paused"] .delivery-canvas .story-object,body[data-motion="paused"] .delivery-progress span { transition:none; }
@keyframes release-cursor { 50%{opacity:0} }
@media(max-width:1050px) and (min-width:761px) { .delivery-layout { gap:30px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } .delivery-canvas { height:520px; } .release-topline,.release-heading { left:22px; right:22px; } .release-example { font-size:7px; padding:4px 5px; } .release-scene { left:22px; right:22px; } .artifact-body { gap:13px; padding:23px 16px; } .artifact-symbol { width:70px; height:80px; flex-basis:70px; } .artifact-body strong { font-size:22px; } .artifact-body span { font-size:8px!important; } .release-check { gap:9px; padding:14px; } }
@media(max-width:760px) { .delivery-layout { display:block; } .delivery-visual { position:relative; top:auto; } .delivery-canvas { height:470px; border-radius:20px; } .delivery-canvas::after { border-radius:14px; } .release-topline { top:23px; left:22px; right:22px; font-size:8px; gap:8px; } .release-example { font-size:7px; padding:4px 6px; } .release-heading { top:72px; left:22px; right:22px; } .release-heading h3 { font-size:22px; } .release-scene { inset:138px 22px 130px; } .delivery-canvas .terminal-code { padding:20px; font-size:10px; gap:11px; } .release-check { padding:13px 15px; gap:10px; } .release-check strong { font-size:10px; } .release-check small { font-size:7px; } .release-check > b { font-size:7px; padding:5px; } .artifact-body { padding:19px 16px; gap:15px; } .artifact-symbol { width:72px; height:78px; flex-basis:72px; } .artifact-symbol svg { width:64px; height:64px; } .artifact-body strong { font-size:22px; } .delivery-canvas .artifact-body span { font-size:8px; max-width:155px; } .artifact-digest { padding:12px; gap:7px; } .artifact-digest code { font-size:8px; } .release-nodes { padding:18px 14px; gap:8px; } .release-nodes > div { padding:12px 4px; } .release-health { padding:13px 16px; } .release-health strong { font-size:15px; } .release-telemetry { padding:0 16px; gap:9px; } .release-telemetry > div { padding:10px; } .release-telemetry strong { font-size:22px; } .release-sparkline { height:18px; margin-block:10px 8px; } .release-panel-foot { font-size:7px; padding:10px 14px; } .release-stages { left:22px; right:22px; bottom:59px; } .delivery-canvas .delivery-status { left:22px; right:22px; bottom:24px; } .delivery-step,.delivery-step:last-child { min-height:180px; padding:25px 0; align-items:center; gap:16px; } .delivery-steps { margin-top:25px; } }
@media(max-width:360px) { .release-topline,.release-heading { left:18px; right:18px; } .release-example { font-size:6px; } .release-heading h3 { font-size:20px; } .release-scene { left:16px; right:16px; } .release-panel-head { padding:12px; font-size:7px; } .release-check { padding:13px 12px; gap:8px; } .release-check > b { font-size:6px; } .artifact-body { gap:11px; padding:19px 12px; } .artifact-body small { font-size:6px; } .artifact-digest { gap:5px; font-size:7px; } }
@media(prefers-reduced-motion:reduce) { .delivery-canvas .story-object,.delivery-progress span,.release-stages button i { transition:none; } .terminal-cursor { animation:none; } }
@media print { .delivery-visual { position:relative; top:auto; } .delivery-canvas { box-shadow:none; } .story-object { backdrop-filter:none!important; } .release-stages { display:none; } }

.delivery-canvas .release-panel-head > span { display:inline; min-height:0; padding:0; margin:0; border:0; border-radius:0; background:none; font:inherit; letter-spacing:inherit; }
.delivery-canvas .release-nodes i { width:5px; height:5px; margin:0; border:0; border-radius:50%; background:var(--accent); }
.delivery-canvas .release-nodes i::after { content:none; }
.release-heading > span { display:block; }
.delivery-visual { scroll-margin-top:108px; }
.delivery-canvas { height:560px; }
@media(max-width:1050px) and (min-width:761px) { .delivery-canvas { height:560px; } }
@media(max-width:760px) { .delivery-canvas { height:530px; } }
@media(prefers-reduced-motion:reduce) { .delivery-step,.delivery-step:last-child { opacity:1; min-height:auto; } }