@keyframes story-rise{to{opacity:1;transform:none}}@keyframes story-bar{to{transform:scaleX(1)}}@keyframes story-drift{0%{transform:scale(1) translateY(0)}to{transform:scale(1.04) translateY(-1.5%)}}@keyframes story-swap{0%,45%{opacity:0}60%,to{opacity:1}}.day{--ease-out: cubic-bezier(.23,1,.32,1);display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(32px,4vw,56px);align-items:start}.rail{display:flex;flex-direction:column;border-top:1px solid rgba(184,200,222,.18)}.rail button{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:center;width:100%;padding:18px 0 20px;border:0;border-bottom:1px solid rgba(184,200,222,.18);background:none;text-align:left;font:inherit;color:var(--steel-200);cursor:pointer}.rail .av{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(184,200,222,.35);font:600 .95rem var(--display);color:var(--steel-200);transition:background-color .24s,color .24s,border-color .24s}.rail .who{display:grid;gap:2px}.rail time{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--label-dark)}.rail b{font-weight:600;font-size:1.02rem;line-height:1.2;color:var(--plan-50)}.rail small{font-size:.88rem;color:var(--label-dark)}.rail .bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mark-500);transform:scaleX(0);transform-origin:left}.rail button.on .av{background:var(--mark-500);border-color:var(--mark-500);color:var(--ink-900)}.rail button.on time{color:var(--mark-500)}.rail button.on .bar{animation:story-bar var(--dur) linear forwards}.rail button.done .bar{transform:scaleX(1);opacity:.3}@media(hover:hover){.rail button:hover .av{border-color:var(--steel-200)}}.stage{position:relative;display:grid}.scene{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,3vw,48px);align-items:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s linear .4s}.scene.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease-out) .1s,visibility 0s}.q{font:700 clamp(1.6rem,2.6vw,2.3rem)/1.08 var(--display);color:#fff;letter-spacing:-.01em}.gain{margin-top:18px;font-size:1.05rem;line-height:1.55;color:var(--steel-200)}.results{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}.results li{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:999px;background:#ffffff0f;border:1px solid rgba(184,200,222,.18);color:var(--plan-50);font-size:.95rem;line-height:1.3;width:fit-content;max-width:100%}.results i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--mark-500);position:relative}.results i:after{content:"";position:absolute;left:8px;top:5px;width:6px;height:11px;border:solid var(--ink-900);border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}.scene .a{opacity:0;transform:translateY(10px)}.scene.on .a{animation:story-rise .6s var(--ease-out) forwards;animation-delay:var(--d, 0ms)}.shot{min-width:0;display:flex;justify-content:center}.shot-phone .phone{width:min(100%,260px)}.shot .desk{width:100%;overflow:hidden}.frames{position:relative;overflow:hidden;border-radius:4px 4px 0 0}.frames img{display:block;width:100%;height:auto;transform-origin:top center}.frames img.next{position:absolute;inset:0}.scene.on .frames img{animation:story-drift 9s linear forwards}.frames img.next{opacity:0}.scene.on .frames img.next{animation:story-swap 9s linear forwards,story-drift 9s linear forwards}@media(max-width:1100px){.day{grid-template-columns:240px minmax(0,1fr)}.rail button{grid-template-columns:40px minmax(0,1fr);gap:12px}.rail .av{width:40px;height:40px;font-size:.85rem}}@media(max-width:900px){.day{grid-template-columns:minmax(0,1fr);gap:24px}.rail{display:grid;grid-template-columns:repeat(var(--n, 4),minmax(0,1fr));border-top:0}.rail button{grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;padding:12px 4px 16px;text-align:center}.rail b,.rail small{display:none}.rail .who{justify-items:center}.scene{grid-template-columns:minmax(0,1fr);gap:24px}.scene .shot{order:-1}.shot-phone .phone{width:min(100%,240px)}.q{font-size:1.5rem}.gain{font-size:1rem}.results li{font-size:.9rem}.scene{position:relative;display:none}.scene.on{display:grid}}@media(prefers-reduced-motion:reduce){.scene,.scene.on{transition:none}.scene .a,.scene.on .a{opacity:1;transform:none;animation:none}.scene.on .frames img{animation:none}.scene.on .frames img.next{animation:none;opacity:0}.rail button.on .bar{animation:none;transform:scaleX(1)}}
