/* "Preview LoopSpec": a short, conceptual walk-through. Used inside a dialog on the home page and as a plain page at /preview. */
.scenes{margin:0;padding:0}
.scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center;padding:clamp(22px,4vw,48px) 0;border-top:1px solid var(--line)}
.scene:first-child{border-top:0}
.scene h2,.scene h3.scene-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,5.6vw,3.8rem);line-height:1.02;letter-spacing:-.015em;margin:0 0 .35em;outline:0;text-wrap:balance}
.scene p{color:#cfdedb;font-size:1.06rem;max-width:30rem}
@media (min-width:860px){.scene{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}}
.mock{position:relative;background:linear-gradient(180deg,rgba(18,39,45,.88),rgba(8,20,24,.94));border:1px solid var(--line-strong);border-radius:var(--r-l);padding:20px;font-size:.92rem;max-width:36rem;width:100%;justify-self:end;min-width:0;box-shadow:0 40px 90px -34px #000,0 0 0 1px rgba(255,255,255,.02) inset}
.mock::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,230,217,.7),transparent)}
.mock-head{display:flex;justify-content:space-between;gap:10px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.84rem}.mock-head b{color:var(--text);font-weight:600}
.mock pre{margin:0 0 10px;padding:12px 14px;border-radius:var(--r-m);background:rgba(5,12,15,.8);border:1px solid var(--line);font:400 .83rem/1.55 var(--mono);color:#cde4df;overflow:visible;white-space:pre-wrap;overflow-wrap:anywhere}
.mock .lbl{display:block;margin:12px 0 6px;color:var(--faint);font-size:.82rem}
.expect{list-style:none;margin:0;padding:0;display:grid;gap:6px}.expect li{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-s);font:400 .84rem var(--mono)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font:600 .8rem var(--sans);border:1px solid var(--line-strong);color:var(--accent-hi);white-space:nowrap}
.chip.warn{color:var(--amber);border-color:rgba(240,184,102,.5);background:var(--amber-wash)}
.chip svg{width:13px;height:13px}
.cols2{display:grid;gap:10px}@media (min-width:520px){.cols2{grid-template-columns:1fr 1fr}}
.cols2 pre{margin:0}
.diff-line{display:block;padding:1px 6px;border-radius:4px}.diff-line.bad{background:var(--amber-wash);color:var(--amber)}.diff-line.good{background:var(--accent-wash)}
.trace{list-style:none;margin:0;padding:0}.trace li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:0 0 14px;position:relative}
.trace li::before{content:"";position:absolute;left:10px;top:20px;bottom:0;width:1px;background:var(--line-strong)}.trace li:last-child::before{display:none}
.dot{width:21px;height:21px;border-radius:99px;border:2px solid var(--accent);background:var(--ink-1);display:grid;place-items:center;font-size:.7rem;font-weight:700}
.trace .flagged .dot{border-color:var(--amber);color:var(--amber)}.trace .skipped .dot{border-style:dashed;border-color:var(--faint)}.trace .skipped{color:var(--faint)}
.trace small{display:block;color:var(--muted);font:400 .8rem var(--mono);margin-top:2px}
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}.report-grid div{padding:10px;border:1px solid var(--line);border-radius:var(--r-m);text-align:left}
.report-grid b{display:block;font:400 1.9rem/1 var(--serif)}.report-grid span{color:var(--muted);font-size:.8rem}
.scene .disclaim{margin:14px 0 0;color:var(--faint);font-size:.8rem;max-width:none}
.close-scene{display:grid;gap:18px;justify-items:start}

/* the immersive version (JavaScript only) */
dialog.preview{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ink-0);color:var(--text);overflow:hidden}
dialog.preview::backdrop{background:#000}
.pv{position:relative;display:grid;grid-template-rows:auto 1fr auto;height:100dvh}
.pv-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.pv{--shift:2.6%}.pv[data-dir="back"]{--shift:-2.6%}
.pv-bg i{position:absolute;inset:-3%;background-position:center;background-size:cover;opacity:0}
.pv-bg i:nth-child(1){background-image:url(/static/bg/s2-process.svg)}.pv-bg i:nth-child(2){background-image:url(/static/bg/s1-identity.svg)}
.pv-bg i:nth-child(3){background-image:url(/static/bg/s3-problems.svg)}.pv-bg i:nth-child(4){background-image:url(/static/bg/s4-value.svg)}.pv-bg i:nth-child(5){background-image:url(/static/bg/s5-vision.svg)}
.pv[data-scene="1"] .pv-bg i:nth-child(1),.pv[data-scene="2"] .pv-bg i:nth-child(2),.pv[data-scene="3"] .pv-bg i:nth-child(3),.pv[data-scene="4"] .pv-bg i:nth-child(4),.pv[data-scene="5"] .pv-bg i:nth-child(5){opacity:1}
.pv-bg i.in{animation:bgIn 1.5s cubic-bezier(.2,.6,.2,1) both}
.pv-bg i.out{opacity:1;animation:bgOut 1s ease both}
@keyframes bgIn{from{opacity:0;transform:scale(1.06) translate3d(var(--shift),0,0)}to{opacity:1;transform:none}}
@keyframes bgOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.02) translate3d(calc(var(--shift) * -.6),0,0)}}
.pv-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 78% 45%,rgba(5,12,15,.1),rgba(5,12,15,.62)),linear-gradient(90deg,rgba(5,12,15,.84),rgba(5,12,15,.5))}
.pv-top,.pv-body,.pv-bottom{position:relative;z-index:1}
.pv-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(16px,4vw,40px)}
.pv-count{color:var(--muted);font-size:.92rem}.pv-count b{color:var(--text)}
.pv-body{overflow:auto;padding:0 clamp(16px,4vw,40px)}
.pv-body .scene{display:none;border:0;min-height:100%;align-content:center;max-width:70rem;margin:0 auto}
.pv-body .scene.is-active{display:grid;--dx:30px}
.pv-body .scene.is-active.back{--dx:-30px}
.pv-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px clamp(16px,4vw,40px) calc(14px + env(safe-area-inset-bottom))}
.pv-dots{display:flex;gap:4px}
.pv-dots button{width:36px;height:36px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;border-radius:99px}
.pv-dots button::before{content:"";width:9px;height:9px;border-radius:99px;border:1.5px solid var(--muted);transition:all .2s}
.pv-dots button[aria-current=true]::before{background:var(--accent);border-color:var(--accent);width:22px}
.pv-bottom .btn{min-width:7.5rem}.pv-bottom [data-pv-back]{justify-self:start}.pv-bottom [data-pv-next]{justify-self:end}
.pv-bottom [hidden]{display:none}
@media (max-width:640px){.pv-bottom .btn{min-width:0;padding:10px 16px}.pv-dots button{width:26px}}
.pv-note{margin:0;color:var(--faint);font-size:.76rem;opacity:.9}@media (max-width:520px){.pv-note{order:3;flex-basis:100%}.pv-top{flex-wrap:wrap}}

/* trailer: progress, staged reveals and a closing scene. Everything is visible without animation. */
.pv-bar{position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:rgba(255,255,255,.08)}
.pv-bar i{position:absolute;inset:0;background:var(--accent);transform:scaleX(.2);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pv[data-scene="2"] .pv-bar i{transform:scaleX(.4)}.pv[data-scene="3"] .pv-bar i{transform:scaleX(.6)}.pv[data-scene="4"] .pv-bar i{transform:scaleX(.8)}.pv[data-scene="5"] .pv-bar i{transform:scaleX(1)}
@keyframes sceneText{from{opacity:0;transform:translate3d(calc(var(--dx) * .5),10px,0)}to{opacity:1;transform:none}}
@keyframes mockIn{from{opacity:0;transform:translate3d(var(--dx),12px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes itemIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes flagIn{from{background:transparent;color:inherit}to{background:var(--amber-wash);color:var(--amber)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(240,184,102,.55)}100%{box-shadow:0 0 0 10px rgba(240,184,102,0)}}
.pv-body .scene.is-active h2{animation:sceneText .7s cubic-bezier(.2,.7,.2,1) both}
.pv-body .scene.is-active .close-scene>p{animation:sceneText .7s .1s cubic-bezier(.2,.7,.2,1) both}
.pv-body .scene.is-active>div:first-child>p{animation:sceneText .7s .1s cubic-bezier(.2,.7,.2,1) both}
.pv-body .scene.is-active .mock{animation:mockIn .9s .14s cubic-bezier(.2,.7,.2,1) both}
.pv-body .scene.is-active .expect li,.pv-body .scene.is-active .report-grid>div,.pv-body .scene.is-active .cols2>div{animation:itemIn .55s both cubic-bezier(.2,.7,.2,1)}
.pv-body .scene.is-active .expect li:nth-child(1),.pv-body .scene.is-active .report-grid>div:nth-child(1),.pv-body .scene.is-active .cols2>div:nth-child(1){animation-delay:.45s}
.pv-body .scene.is-active .expect li:nth-child(2),.pv-body .scene.is-active .report-grid>div:nth-child(2),.pv-body .scene.is-active .cols2>div:nth-child(2){animation-delay:.62s}
.pv-body .scene.is-active .expect li:nth-child(3),.pv-body .scene.is-active .report-grid>div:nth-child(3){animation-delay:.79s}
.pv-body .scene.is-active .diff-line.bad{animation:flagIn .7s 1.35s both}
.pv-body .scene.is-active .trace li{animation:itemIn .55s both cubic-bezier(.2,.7,.2,1)}
.pv-body .scene.is-active .trace li:nth-child(1){animation-delay:.45s}.pv-body .scene.is-active .trace li:nth-child(2){animation-delay:.75s}
.pv-body .scene.is-active .trace li:nth-child(3){animation-delay:1.05s}.pv-body .scene.is-active .trace li:nth-child(4){animation-delay:1.35s}
.pv-body .scene.is-active .trace .flagged .dot{animation:ring 1.3s 1.2s 2}
.close-ask{margin:6px 0 0!important;padding-left:16px;border-left:2px solid var(--accent);font:400 clamp(1.5rem,3vw,2rem)/1.15 var(--serif)!important;color:var(--text)!important}
.scene-final h2{font-size:clamp(2.4rem,6.4vw,4.6rem)}
.close-art{display:none;justify-self:center;width:min(22rem,100%)}
.close-art svg{display:block;width:100%;height:auto;overflow:visible}
.close-art .halo{fill:none;stroke:var(--accent);stroke-opacity:.16}.close-art .halo.h2{stroke-opacity:.28}
.close-art .ring{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.close-art .tick{fill:none;stroke:#e8f0ee;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
@media (min-width:860px){.close-art{display:block}}
.pv-body .scene.is-active .close-art .ring{animation:draw2 1.4s .35s cubic-bezier(.4,.1,.2,1) both}
.pv-body .scene.is-active .close-art .tick{animation:draw2 .6s 1.5s ease-out both}
.pv-body .scene.is-active .close-art .halo{transform-origin:100px 100px;animation:halo 1.6s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes draw2{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes halo{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pv-bg i.in,.pv-bg i.out{animation:none}.pv-bg i.out{opacity:0}.pv-bar i{transition:none}.pv-body .scene.is-active *{animation:none!important}}
.pv-top .btn{width:auto;flex:none}