.story{position:relative;margin-top:calc(-1 * var(--header-h))}.story-stage{position:relative;height:calc(100vh - var(--utility-h));height:calc(100svh - var(--utility-h));overflow:hidden;background:var(--stage)}.story-stage canvas{position:absolute;inset:0;width:100%;height:100%}.story-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(11,110,79,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,110,79,.06) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000 0,transparent 55%)}.story-poster{display:none}.story-chapter{position:absolute;left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));top:50%;width:min(31rem,calc(100vw - 2 * var(--gutter)));transform:translateY(-50%);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}.story-chapter--right{left:auto;right:max(calc(var(--gutter) + 3rem),calc((100vw - var(--max)) / 2 + var(--gutter)))}.story-chapter--top{top:calc(var(--header-h) + 1.5rem);transform:none}.story-chapter .panel{background:#ffffffdb;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-left:2px solid var(--accent);padding:var(--s5) var(--s6);transform:translateY(10px);transition:transform .25s ease}.story-chapter.is-active{opacity:1;visibility:visible;transition:opacity .55s ease .05s}.story-chapter.is-active .panel{transform:none;transition:transform .7s var(--ease) .05s}.story-chapter--hero .panel{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding:0}.story-chapter--hero:before{content:"";position:absolute;inset:-40vh -60vw -40vh -40vw;z-index:-1;background:radial-gradient(closest-side,#f5fbf8eb,#f5fbf800)}.story-chapter h1{font-size:clamp(2.3rem,1.6rem + 2.8vw,4rem);max-width:14ch;margin:var(--s3) 0 var(--s4)}.story-chapter h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);margin:var(--s2) 0 var(--s3)}.story-chapter p:not(.label){color:var(--ink-2);font-size:1rem;line-height:1.55;max-width:46ch}.story-chapter p+p{margin-top:var(--s3)}.story-chapter .btn-row{margin-top:var(--s5)}.story-continue{display:inline-flex;align-items:center;gap:.6rem;margin-top:var(--s4);font:500 .8rem/1 var(--mono);color:var(--accent);text-decoration:none}.story-continue:after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}.story-label{position:absolute;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s;pointer-events:none;font:400 .72rem/1 var(--mono);color:var(--ink);white-space:nowrap;padding-left:.9rem;transform:translateY(-50%)}.story-label:before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #12c27a2e}.story-label span{background:#ffffffeb;padding:.25rem .45rem;border:1px solid var(--rule)}.story-label.is-active{opacity:1;visibility:visible;transition:opacity .45s ease .2s}.story-rail{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:3}.story-rail ol{display:flex;flex-direction:column;gap:2px}.story-rail button{position:relative;display:flex;align-items:center;justify-content:flex-end;width:28px;height:26px;padding:0;border:0;background:none;cursor:pointer}.story-rail button:after{content:"";width:2px;height:14px;background:var(--rule);transition:background .25s,height .25s}.story-rail button[aria-current=step]:after{background:var(--accent);height:24px}.story-rail button:hover:after{background:var(--ink)}.story-rail button span{position:absolute;right:16px;white-space:nowrap;font:400 .72rem/1 var(--mono);background:var(--paper);border:1px solid var(--rule);padding:.3rem .5rem;opacity:0;transform:translate(4px);transition:opacity .2s,transform .2s;pointer-events:none}.story-rail button:hover span,.story-rail button:focus-visible span{opacity:1;transform:none}.story-foot{position:absolute;left:50%;bottom:1.5rem;transform:translate(-50%);font:400 .72rem/1 var(--mono);color:var(--ink-3)}.story-hint{display:flex;align-items:center;gap:.6rem;transition:opacity .35s}.story-count{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;white-space:nowrap;transition:opacity .35s}.story-count b{color:var(--ink);font-weight:500}.story.is-moved .story-hint{opacity:0}.story.is-moved .story-count{opacity:1}.story.is-loading .story-count:after{content:" · loading"}.mouse{position:relative;width:18px;height:28px;border:1.5px solid var(--ink-3);border-radius:10px}.mouse:after{content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:var(--accent);animation:story-wheel 1.8s ease-in-out infinite}@keyframes story-wheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}70%{opacity:1;transform:translateY(6px)}to{opacity:0;transform:translateY(8px)}}.story-skip{position:absolute;left:var(--gutter);bottom:1rem;z-index:3;font:400 .72rem/1 var(--mono);color:var(--ink-2);text-decoration:none;padding:.45rem .7rem;border:1px solid var(--rule);background:#fffc}.story-skip:hover{color:var(--ink);border-color:var(--ink-3)}.story-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rule)}.story-bar span{display:block;height:100%;width:0;background:var(--accent)}.story-caption{position:absolute;right:var(--gutter);bottom:1.2rem;font:400 .68rem/1 var(--mono);color:var(--ink-3)}@media(max-width:720px),(prefers-reduced-motion:reduce){.story{margin-top:0}.story .story-stage{height:auto;padding:var(--s5) 0 var(--s6)}.story canvas,.story .story-label,.story .story-rail,.story .story-foot,.story .story-skip,.story .story-bar,.story .story-continue,.story .story-grid{display:none}.story .story-poster{display:block;width:100%;height:auto;margin-bottom:var(--s5)}.story .story-chapter{position:relative;left:auto;right:auto;top:auto;transform:none;opacity:1;visibility:visible;width:auto;max-width:40rem;margin:0 var(--gutter) var(--s5)}.story .story-chapter--hero:before{display:none}.story .story-chapter .panel{transform:none;background:var(--paper)}.story .story-caption{position:static;margin:0 var(--gutter)}}@media(max-width:1000px){.story-chapter{width:min(26rem,calc(100vw - 2 * var(--gutter)))}}
