<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=1920,height=1080"><title>Sidequest — The outcome becomes the unit</title><script src="assets/vendor/gsap.min.js"></script><style>
@font-face{font-family:Geist;src:url('assets/fonts/Geist.woff2') format('woff2');font-weight:100 900;font-display:block}
*{box-sizing:border-box}html,body{margin:0;width:1920px;height:1080px;overflow:hidden;background:#111312;color:#f2f4ed;font-family:Geist,Arial,sans-serif}#film{position:relative;width:100%;height:100%;overflow:hidden;background:#111312;isolation:isolate}.scene{position:absolute;inset:0}.stage{position:absolute;inset:0}.clip{position:absolute;inset:0}.abs{position:absolute}.brand{position:absolute;left:92px;top:58px;display:flex;gap:15px;align-items:center;font-size:31px;font-weight:650;letter-spacing:-1px;z-index:50}.brand img{width:42px;height:42px}.eyebrow{font-size:23px;letter-spacing:3px;text-transform:uppercase;font-weight:520;color:#b8f2c7}.hero{font-size:126px;line-height:1.01;letter-spacing:-6px;font-weight:550;margin:0}.headline{font-size:82px;line-height:1.03;letter-spacing:-3px;font-weight:560;margin:0}.label{font-size:30px;line-height:1.28}.small{font-size:23px;line-height:1.35}.big{font-size:55px;font-weight:560;letter-spacing:-2px}.accent{color:#b8f2c7}.amber{color:#f3bd72}.muted{color:#a7b6ad}.faint{color:#718077}.rule{height:2px;background:#35423b}.panel{border:2px solid #455a4d;border-radius:20px;background:#17201b}.pill{padding:11px 19px;border:2px solid #587662;border-radius:999px;display:inline-block;font-size:22px;color:#b8f2c7;background:#192d22;letter-spacing:.5px}.tag{padding:9px 14px;border:1px solid #526a5a;border-radius:7px;display:inline-block;color:#c9d9cd;font-size:21px;background:#17211b}.foot{position:absolute;bottom:30px;left:92px;right:92px;display:flex;justify-content:space-between;font-size:20px;color:#8fa196;z-index:80}.topline{position:absolute;left:92px;right:92px;top:130px;height:2px;background:#2e3d35;z-index:50}.topmark{position:absolute;right:92px;top:63px;font-size:20px;color:#91a59a;letter-spacing:1.5px;text-transform:uppercase;z-index:50}.progress-track{position:absolute;left:0;bottom:0;height:5px;width:1920px;background:#27342c;z-index:100}.progress{height:5px;width:1920px;background:#b8f2c7;transform-origin:left center}svg{overflow:visible}svg text{font-family:Geist,Arial,sans-serif}.grid{background-image:linear-gradient(rgba(137,180,151,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(137,180,151,.06) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,transparent,black 16%,black 85%,transparent)}.ghost{font-size:210px;letter-spacing:-12px;color:#b8f2c7;opacity:.055;font-weight:700;white-space:nowrap}.scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 83% 18%,rgba(184,242,199,.08),transparent 36%),radial-gradient(circle at 20% 90%,rgba(243,189,114,.055),transparent 32%)}
.caption{position:absolute;left:260px;right:260px;top:937px;height:58px;display:flex;align-items:center;justify-content:center;z-index:90;pointer-events:none}.caption span{padding:8px 22px;border-radius:8px;background:#17201b;color:#f2f4ed;font-size:38px;line-height:1.3;text-align:center;box-shadow:0 0 0 1px #354b3d}.caption.clip{inset:auto;left:260px;right:260px;top:937px;height:58px}</style></head><body><div id="film" data-composition-id="sidequest-pricing-astra" data-start="0" data-duration="__DURATION__" data-width="1920" data-height="1080"><div class="brand"><img src="assets/mark.svg" alt="">sidequest</div><div class="topline"></div><div class="topmark">CONCEPT / FUTURE DIRECTION</div>
<section id="scene-tokens" class="clip scene" data-start="0" data-duration="__L0__" data-track-index="1"><div class="stage grid"><div class="ghost abs" style="left:80px;top:230px">TOKENS</div><div id="tok-k" class="abs eyebrow" style="left:92px;top:184px">THE WRONG METER</div><div id="tok-title" class="abs hero" style="left:92px;top:275px;font-size:100px">Same tokens.<br><span class="amber">Different results.</span></div><div id="tok-sub" class="abs label muted" style="left:98px;top:610px;width:650px">They do not tell you whether the task worked.</div><div id="tok-left" class="panel abs" style="left:975px;top:255px;width:320px;height:455px;padding:30px"><div class="small muted">BUDGET</div><div id="tok-count" class="abs big" style="left:30px;top:94px">10,000</div><div class="small muted abs" style="left:30px;top:170px">tokens consumed</div><div class="abs" style="left:30px;right:30px;top:280px;height:10px;background:#344238;border-radius:5px"><div id="tok-bar" style="width:100%;height:10px;background:#f3bd72;border-radius:5px;transform-origin:left"></div></div><div class="small amber abs" style="left:30px;top:319px">METER EMPTY</div></div><div id="tok-done" class="panel abs" style="left:1340px;top:255px;width:390px;height:188px;padding:27px"><div class="eyebrow" style="font-size:18px">RESULT A</div><div class="big accent" style="font-size:50px;margin-top:24px">DONE</div></div><div id="tok-fail" class="panel abs" style="left:1340px;top:478px;width:390px;height:188px;padding:27px"><div class="eyebrow amber" style="font-size:18px">RESULT B</div><div class="big amber" style="font-size:50px;margin-top:24px">FAILED</div></div><div id="tok-question" class="abs pill" style="left:975px;top:780px">SAME TOKENS · DIFFERENT VALUE</div><svg class="abs" style="inset:0;width:1920px;height:1080px"><path id="tok-link0" d="M1295 480 H1340" fill="none" stroke="#f3bd72" stroke-width="3"/><path id="tok-link1" d="M1295 480 H1320 V570 H1340" fill="none" stroke="#f3bd72" stroke-width="3"/></svg></div></section>
<section id="scene-unit" class="clip scene" data-start="__S1__" data-duration="__L1__" data-track-index="1"><div class="stage"><div class="ghost abs" style="right:-30px;top:255px">TASK</div><div id="unit-k" class="abs eyebrow" style="left:92px;top:184px">A BETTER UNIT</div><div id="unit-title" class="abs headline" style="left:92px;top:250px">Price the thing<br><span class="accent">that came back.</span></div><div id="unit-sub" class="abs label muted" style="left:98px;top:535px;width:660px">A completed task has a brief, an acceptance test, and a result someone can inspect.</div><div id="unit-ring" class="abs" style="left:1100px;top:250px;width:500px;height:500px;border:3px solid #455e4d;border-radius:50%"><div id="unit-orbit" class="abs" style="inset:54px;border:2px dashed #698c73;border-radius:50%"></div><div id="unit-core" class="abs panel" style="left:118px;top:118px;width:260px;height:260px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center"><div><div class="eyebrow" style="font-size:18px">COMPLETED</div><div class="big accent" style="font-size:58px;margin-top:12px">1 TASK</div></div></div><div id="unit-label" class="abs pill" style="left:160px;top:435px">RESULT + CRITERIA</div></div><div id="unit-shards" class="abs label faint" style="left:1065px;top:810px">Scope · acceptance · delivered result</div></div></section>
<section id="scene-evidence" class="clip scene" data-start="__S2__" data-duration="__L2__" data-track-index="1"><div class="stage"><div class="ghost abs" style="left:40px;top:230px">LEARN</div><div id="ev-k" class="abs eyebrow" style="left:92px;top:184px">FROM WHAT ACTUALLY HAPPENED</div><div id="ev-title" class="abs headline" style="left:92px;top:245px">Completions and failures<br><span class="accent">leave a shape.</span></div><div id="ev-note" class="abs small muted" style="left:98px;top:440px">Illustrative records · invented for this concept</div><div id="ev-axisx" class="abs" style="left:175px;top:780px;width:1080px;height:2px;background:#52695a"></div><div id="ev-axisy" class="abs" style="left:175px;top:505px;width:2px;height:277px;background:#52695a"></div><div id="ev-x" class="abs small muted" style="left:750px;top:824px">task size →</div><div id="ev-y" class="abs small muted" style="left:92px;top:515px">quality ↑</div><div id="ev-cluster-a" class="abs panel" style="left:400px;top:580px;width:240px;height:130px;opacity:.65"><div class="small accent" style="padding:20px">REPAIR / SMALL</div></div><div id="ev-cluster-b" class="abs panel" style="left:780px;top:535px;width:290px;height:180px;opacity:.65"><div class="small accent" style="padding:20px">BUILD / MEDIUM</div></div><div id="ev-cluster-c" class="abs panel" style="left:1120px;top:480px;width:360px;height:235px;opacity:.65"><div class="small amber" style="padding:20px">RESEARCH / LARGE</div></div><svg class="abs" style="inset:0;width:1920px;height:1080px"><g id="ev-points"><circle cx="360" cy="690" r="11" fill="#b8f2c7"/><circle cx="450" cy="640" r="11" fill="#f3bd72"/><circle cx="535" cy="675" r="11" fill="#b8f2c7"/><circle cx="720" cy="675" r="11" fill="#f3bd72"/><circle cx="845" cy="600" r="11" fill="#b8f2c7"/><circle cx="945" cy="650" r="11" fill="#b8f2c7"/><circle cx="1060" cy="650" r="11" fill="#f3bd72"/><circle cx="1200" cy="580" r="11" fill="#b8f2c7"/><circle cx="1330" cy="610" r="11" fill="#b8f2c7"/><circle cx="1430" cy="505" r="11" fill="#f3bd72"/></g></svg><div id="ev-label" class="abs pill" style="left:1515px;top:785px">CATEGORIES EMERGE</div></div></section>
<section id="scene-context" class="clip scene" data-start="__S3__" data-duration="__L3__" data-track-index="1"><div class="stage"><div class="ghost abs" style="right:90px;top:225px">TRACE</div><div id="ctx-k" class="abs eyebrow" style="left:92px;top:184px">CONTEXT, NOT CERTAINTY</div><div id="ctx-title" class="abs headline" style="left:92px;top:245px">A result needs<br><span class="accent">its conditions.</span></div><div id="ctx-card" class="panel abs" style="left:930px;top:260px;width:810px;height:500px;padding:36px"><div class="eyebrow" style="font-size:19px">COMPLETED TASK / REPAIR</div><div class="big" style="margin-top:28px">Passes 12 checks</div><div class="small muted" style="margin-top:8px">same scope · same acceptance test</div><div id="ctx-tags" style="position:absolute;left:36px;right:36px;top:219px;display:flex;gap:12px;flex-wrap:wrap"><span class="tag">HARNESS / LOCAL</span><span class="tag">MODEL / OPUS</span><span class="tag">CONFIG / SAFE</span><span class="tag">LATENCY / 08:42</span></div><div class="rule" style="position:absolute;left:36px;right:36px;top:320px"></div><div class="small accent" style="position:absolute;left:36px;top:355px">reported context → comparable history</div></div><svg class="abs" style="inset:0;width:1920px;height:1080px"><path id="ctx-wire" d="M670 590 H930" fill="none" stroke="#b8f2c7" stroke-width="3" stroke-dasharray="10 10"/><circle id="ctx-node" cx="670" cy="590" r="22" fill="#b8f2c7"/></svg><div id="ctx-warning" class="abs small amber" style="left:92px;top:820px">Reported configuration adds context. It does not prove attribution.</div></div></section>
<section id="scene-brief" class="clip scene" data-start="__S4__" data-duration="__L4__" data-track-index="1"><div class="stage"><div class="ghost abs" style="left:45px;top:250px">BRIEF</div><div id="br-k" class="abs eyebrow" style="left:92px;top:184px">FEEDBACK CHANGES THE NEXT ASK</div><div id="br-title" class="abs headline" style="left:92px;top:245px">A dataset can make<br><span class="accent">the brief sharper.</span></div><div id="br-before" class="panel abs" style="left:92px;top:510px;width:760px;height:295px;padding:30px"><div class="eyebrow amber" style="font-size:19px">BEFORE</div><div class="big" style="font-size:39px;margin-top:27px">“Fix the parser.”</div><div class="small muted" style="margin-top:24px">No input shape. No acceptance test.</div><div id="br-cross" class="abs" style="left:25px;right:25px;top:145px;height:4px;background:#ef8d79;transform-origin:left"></div></div><div id="br-after" class="panel abs" style="left:1040px;top:430px;width:785px;height:425px;padding:30px;border-color:#64866f"><div class="eyebrow accent" style="font-size:19px">AFTER / EXPLICIT</div><div class="big" style="font-size:40px;margin-top:27px">Repair CSV parser</div><div class="small muted" style="margin-top:24px"><div>Input: quoted fields</div><div>Test: 12 fixtures pass</div><div>Return: pull request + notes</div></div><div id="br-check" class="pill" style="position:absolute;left:30px;bottom:28px">READY TO COMPARE</div></div><svg class="abs" style="inset:0;width:1920px;height:1080px"><path id="br-arrow" d="M855 654 H1035" fill="none" stroke="#b8f2c7" stroke-width="4" stroke-linecap="round"/></svg></div></section>
<section id="scene-curve" class="clip scene" data-start="__S5__" data-duration="__L5__" data-track-index="1"><div class="stage"><div class="ghost abs" style="right:90px;top:230px">PRICE</div><div id="cv-k" class="abs eyebrow" style="left:92px;top:184px">COMPARABLE WORK OVER TIME</div><div id="cv-title" class="abs headline" style="left:92px;top:245px">Capability rises.<br><span class="accent">Price can fall.</span></div><div id="cv-note" class="abs pill amber" style="left:100px;top:440px">VISION · ILLUSTRATIVE CURVE</div><div id="cv-graph" class="panel abs" style="left:840px;top:220px;width:985px;height:640px"><div class="small muted abs" style="left:50px;top:34px">PRICE PER COMPARABLE COMPLETION</div><div class="abs" style="left:70px;top:110px;width:820px;height:420px;border-left:2px solid #52695a;border-bottom:2px solid #52695a"></div><div class="small muted abs" style="left:34px;top:110px;transform:rotate(-90deg);transform-origin:left top">price ↑</div><div class="small muted abs" style="right:72px;bottom:34px">capability + competition →</div><svg class="abs" style="inset:0;width:985px;height:640px"><path id="cv-price" d="M140 205 C300 260 390 330 510 365 S710 430 895 470" fill="none" stroke="#f3bd72" stroke-width="7" stroke-linecap="round"/><circle id="cv-dot0" cx="140" cy="205" r="13" fill="#f3bd72"/><circle id="cv-dot1" cx="895" cy="470" r="13" fill="#f3bd72"/><text x="170" y="185" font-size="22" fill="#f3bd72">EARLY</text><text x="760" y="510" font-size="22" fill="#f3bd72">LATER</text></svg></div><div id="cv-caveat" class="abs small muted" style="left:100px;top:815px;width:620px">Same scope. Same acceptance standard. Market observation, not a forecast.</div></div></section>
<section id="scene-frontier" class="clip scene" data-start="__S6__" data-duration="__L6__" data-track-index="1"><div class="stage"><div class="ghost abs" style="left:50px;top:230px">TRADE</div><div id="fr-k" class="abs eyebrow" style="left:92px;top:184px">THE MARKET REVEALS TRADEOFFS</div><div id="fr-title" class="abs headline" style="left:92px;top:245px">There is no single<br><span class="accent">best price.</span></div><div id="fr-note" class="abs pill" style="left:98px;top:455px">QUALITY / COST / SPEED</div><div id="fr-graph" class="panel abs" style="left:835px;top:205px;width:990px;height:650px"><div class="abs" style="left:75px;top:75px;width:815px;height:475px;border-left:2px solid #52695a;border-bottom:2px solid #52695a"></div><div class="small muted abs" style="left:38px;top:110px;transform:rotate(-90deg);transform-origin:left top">quality ↑</div><div class="small muted abs" style="right:80px;bottom:37px">cost →</div><svg class="abs" style="inset:0;width:990px;height:650px"><path id="fr-frontier" d="M170 485 C330 400 440 310 560 230 S760 130 885 105" fill="none" stroke="#b8f2c7" stroke-width="6" stroke-dasharray="12 11"/><g id="fr-bubbles"><circle cx="245" cy="425" r="32" fill="#b8f2c7"/><circle cx="390" cy="350" r="22" fill="#f3bd72"/><circle cx="530" cy="300" r="48" fill="#b8f2c7"/><circle cx="665" cy="215" r="27" fill="#f3bd72"/><circle cx="800" cy="165" r="38" fill="#b8f2c7"/></g><text x="190" y="535" font-size="21" fill="#a7b6ad">LOW COST</text><text x="760" y="90" font-size="21" fill="#b8f2c7">HIGH QUALITY</text></svg><div class="small muted abs" style="left:75px;top:582px">bubble size = speed (illustrative)</div></div><div id="fr-bottom" class="abs small muted" style="left:98px;top:815px;width:625px">A buyer can choose the tradeoff that fits the task.</div></div></section>
<section id="scene-boundary" class="clip scene" data-start="__S7__" data-duration="__L7__" data-track-index="1"><div class="stage"><div id="bd-k" class="abs eyebrow" style="left:92px;top:184px">DRAW THE LINE</div><div id="bd-title" class="abs headline" style="left:92px;top:245px">What exists today.<br><span class="accent">What could come next.</span></div><div id="bd-current" class="panel abs" style="left:92px;top:470px;width:770px;height:345px;padding:32px;border-color:#5f7a66"><div class="eyebrow accent" style="font-size:19px">CURRENT / SIDEQUEST</div><div class="big" style="font-size:40px;margin-top:30px">Quote → hire → review</div><div class="small muted" style="margin-top:24px">Fixed terms · review criteria · delivered work</div><div class="pill" style="position:absolute;bottom:30px;left:32px">EXISTING PROTOCOL</div></div><div id="bd-future" class="panel abs" style="left:1040px;top:470px;width:785px;height:345px;padding:32px;border-style:dashed;border-color:#a68455;background:#1c1a14"><div class="eyebrow amber" style="font-size:19px">FUTURE DIRECTION</div><div class="big" style="font-size:40px;margin-top:30px">Learning market</div><div class="small muted" style="margin-top:24px">Observed outcomes · better briefs · comparable prices</div><div class="pill amber" style="position:absolute;bottom:30px;left:32px">CONCEPT / NOT LIVE</div></div><div id="bd-bridge" class="abs label muted" style="left:845px;top:626px">→</div><div id="bd-foot" class="abs small amber" style="left:92px;top:874px">This film does not claim the full dataset or a live market price curve.</div></div></section>
<section id="scene-close" class="clip scene" data-start="__S8__" data-duration="__L8__" data-track-index="1"><div class="stage"><div class="ghost abs" style="left:70px;top:235px">OUTCOME</div><div id="cl-k" class="abs eyebrow" style="left:92px;top:184px">THE THESIS</div><div id="cl-title" class="abs hero" style="left:92px;top:285px">Price the <span class="accent">outcome.</span></div><div id="cl-sub" class="abs label muted" style="left:98px;top:530px;width:760px">Learn from every result. Make the next task easier to describe, compare, and buy.</div><div id="cl-mark" class="panel abs" style="left:1290px;top:300px;width:330px;height:330px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center"><div><img src="assets/end-mark.svg" alt="" style="width:55px;height:55px;display:block;margin:0 auto 20px"><div class="big accent" style="font-size:42px">sidequest</div></div></div><svg class="abs" style="inset:0;width:1920px;height:1080px"><path id="cl-loop" d="M1170 465 C970 290 810 690 1100 820 C1370 940 1660 800 1615 640" fill="none" stroke="#b8f2c7" stroke-width="3" stroke-dasharray="11 13"/></svg><div id="cl-label" class="abs pill" style="left:92px;top:795px">A FUTURE WORTH MEASURING</div></div></section>
__CAPTIONS__<div class="foot"><span>Concept walkthrough · invented charts are labelled</span><span>OUTCOME → HISTORY → MARKET</span></div><div class="progress-track"><div class="progress"></div></div><audio id="pricing-master" class="clip" src="assets/audio/master.wav" data-start="0" data-duration="__DURATION__" data-track-index="2" data-volume="1"></audio></div><script>
const root=document.querySelector('[data-composition-id="sidequest-pricing-astra"]');const tl=gsap.timeline({paused:true});
const cue=[];function snd(t,k,v=0.45){cue.push({t_seconds:t,kind:k,volume:v});}
function inAt(sel,t,x=0,y=24,d=.5){tl.fromTo(sel,{opacity:0,x:x,y:y},{opacity:1,x:0,y:0,duration:d,ease:'power3.out'},t)}
function fade(sel,t,d=.4){tl.fromTo(sel,{opacity:0},{opacity:1,duration:d,ease:'power2.out'},t)}
function draw(sel,t,d=.7){tl.fromTo(sel,{strokeDasharray:1000,strokeDashoffset:1000,opacity:1},{strokeDashoffset:0,duration:d,ease:'power2.out'},t)}
// Opening: token count burns down while two task outcomes separate.
inAt('#tok-k',.18,0,14);inAt('#tok-title',.35,0,42,.65);inAt('#tok-sub',1.15,0,18);inAt('#tok-left',.9,50,0);inAt('#tok-done',1.65,65,0);inAt('#tok-fail',2.05,65,0);tl.fromTo('#tok-bar',{scaleX:1},{scaleX:.06,duration:2.4,ease:'power2.inOut'},1.1);inAt('#tok-question',3.8,0,18);draw('#tok-link0',2.35,.4);draw('#tok-link1',2.5,.4);snd(1.1,'impact',.45);snd(2.2,'tick',.26);
// Unit: a ring closes around the thing returned, with shards kept peripheral.
inAt('#unit-k',__S1__+.15,0,14);inAt('#unit-title',__S1__+.32,0,34,.6);inAt('#unit-sub',__S1__+1.15,0,18);inAt('#unit-ring',__S1__+.7,0,0,.65);inAt('#unit-core',__S1__+1.05,0,0,.5);inAt('#unit-label',__S1__+1.85,0,14);inAt('#unit-shards',__S1__+2.6,0,12);tl.to('#unit-orbit',{rotation:120,duration:3.6,ease:'none'},__S1__+.8);snd(__S1__+1.1,'arrive',.5);
// Evidence: dots assemble into categories, then labels lock.
inAt('#ev-k',__S2__+.12,0,14);inAt('#ev-title',__S2__+.3,0,32,.6);inAt('#ev-note',__S2__+1.1,0,14);fade('#ev-axisx',__S2__+1.15);fade('#ev-axisy',__S2__+1.15);inAt('#ev-cluster-a',__S2__+1.45,0,20);inAt('#ev-cluster-b',__S2__+1.7,0,20);inAt('#ev-cluster-c',__S2__+1.95,0,20);tl.fromTo('#ev-points circle',{opacity:0,scale:.2},{opacity:1,scale:1,duration:.35,stagger:.1,ease:'back.out(1.5)'},__S2__+1.85);inAt('#ev-label',__S2__+3.1,0,15);snd(__S2__+2.1,'tick',.38);
// Context: metadata is attached to a result card, with an explicit uncertainty note.
inAt('#ctx-k',__S3__+.12,0,14);inAt('#ctx-title',__S3__+.3,0,32,.6);inAt('#ctx-card',__S3__+.75,70,0,.6);inAt('#ctx-tags',__S3__+1.65,0,20);draw('#ctx-wire',__S3__+1.8,.6);inAt('#ctx-node',__S3__+1.65,0,0);inAt('#ctx-warning',__S3__+3.0,0,15);snd(__S3__+2.0,'arrive',.35);
// Brief: vague input is replaced by observable scope and acceptance criteria.
inAt('#br-k',__S4__+.12,0,14);inAt('#br-title',__S4__+.3,0,32,.6);inAt('#br-before',__S4__+.8,-55,0);inAt('#br-after',__S4__+1.2,55,0);tl.fromTo('#br-cross',{scaleX:0},{scaleX:1,duration:.45,ease:'power2.in'},__S4__+1.5);draw('#br-arrow',__S4__+1.8,.6);inAt('#br-check',__S4__+2.6,0,15);snd(__S4__+1.7,'tick',.28);
// Curve: two trajectories draw under an always-visible illustrative label.
inAt('#cv-k',__S5__+.12,0,14);inAt('#cv-title',__S5__+.3,0,32,.6);inAt('#cv-note',__S5__+1.25,0,12);inAt('#cv-graph',__S5__+.7,45,0,.6);draw('#cv-price',__S5__+2.05,.9);inAt('#cv-caveat',__S5__+3.25,0,15);snd(__S5__+2.2,'arrive',.35);
// Frontier: bubbles and a dashed frontier reveal the choice surface.
inAt('#fr-k',__S6__+.12,0,14);inAt('#fr-title',__S6__+.3,0,32,.6);inAt('#fr-note',__S6__+1.25,0,12);inAt('#fr-graph',__S6__+.7,45,0,.6);draw('#fr-frontier',__S6__+1.65,.9);tl.fromTo('#fr-bubbles circle',{opacity:0,scale:.1},{opacity:1,scale:1,duration:.4,stagger:.14,ease:'back.out(1.5)'},__S6__+2.0);inAt('#fr-bottom',__S6__+3.3,0,15);snd(__S6__+2.0,'tick',.35);
// Boundary: current product and future research stay visibly separate.
inAt('#bd-k',__S7__+.12,0,14);inAt('#bd-title',__S7__+.3,0,32,.6);inAt('#bd-current',__S7__+.85,-55,0);inAt('#bd-future',__S7__+1.1,55,0);inAt('#bd-bridge',__S7__+1.8,0,0);inAt('#bd-foot',__S7__+2.7,0,15);snd(__S7__+1.7,'impact',.24);
// Close: loop stays on-screen after the last spoken line for a clean tail.
inAt('#cl-k',__S8__+.12,0,14);inAt('#cl-title',__S8__+.3,0,42,.65);inAt('#cl-sub',__S8__+1.25,0,18);inAt('#cl-mark',__S8__+.8,0,0,.6);draw('#cl-loop',__S8__+1.5,1.4);inAt('#cl-label',__S8__+2.7,0,15);snd(__S8__+1.5,'arrive',.3);
tl.fromTo('.progress',{scaleX:0},{scaleX:1,duration:__DURATION__,ease:'none'},0);tl.to('.ghost',{x:24,duration:__DURATION__,ease:'none'},0);window.__soundCues=cue;window.__timelines['sidequest-pricing-astra']=tl;
</script></body></html>
