/* A cinematic reading frame. All copy and controls retain their own layout. */
.choreo-ready{--choreo-accent:#526d5b;--choreo-light:#cfdbc1;--choreo-paper:#dfe8d8;--choreo-page-progress:0;--choreo-header:88px}
.choreo-scene{--choreo-local-progress:0;scroll-margin-top:calc(var(--choreo-header) + 24px)}
.choreo-framed{position:relative;isolation:isolate}
.choreo-frame{position:absolute;inset:22px var(--gutter,5vw) auto;display:flex;align-items:center;gap:17px;height:24px;pointer-events:none;color:var(--choreo-accent);z-index:1;line-height:1}
.choreo-folio{display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-family:var(--sans,sans-serif);font-variant-numeric:tabular-nums}
.choreo-folio b{font-size:20px;font-weight:400;letter-spacing:-.05em}
.choreo-folio>span{font-size:8px;letter-spacing:.04em;opacity:.65}
.choreo-context{font:10px/1.5 var(--sans,sans-serif);letter-spacing:.11em;white-space:nowrap}
.choreo-rule{height:1px;flex:1;position:relative;background:color-mix(in srgb,var(--choreo-accent) 16%,transparent);overflow:hidden}
.choreo-rule i{position:absolute;inset:0;background:var(--choreo-accent);transform-origin:left;transform:scaleX(calc(.10 + var(--choreo-local-progress)*.90));transition:transform 360ms linear;opacity:.72}
.choreo-section-word{font:8px/1 var(--sans,sans-serif);letter-spacing:.18em;opacity:.65}
.choreo-section-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-inline-start:clamp(6px,1.05vw,16px) solid color-mix(in srgb,var(--choreo-accent) 18%,transparent);color:var(--choreo-accent);z-index:-1}
.choreo-paper{position:absolute;inset:0 0 auto;height:clamp(230px,40vh,430px);background:linear-gradient(112deg,var(--choreo-scene-paper,var(--choreo-paper)),color-mix(in srgb,var(--choreo-scene-paper,var(--choreo-paper)) 74%,transparent) 60%,transparent);clip-path:polygon(0 0,100% 0,100% 62%,68% 100%,0 86%);opacity:.38;translate:calc(-35px + var(--choreo-local-progress)*70px) calc(-35px + var(--choreo-local-progress)*70px);transition:opacity .75s,translate .5s linear}
.choreo-scene[data-choreography-beat="1"]{--choreo-scene-paper:color-mix(in srgb,var(--choreo-paper) 65%,#f4f3e9)}
.choreo-scene[data-choreography-beat="2"]{--choreo-scene-paper:color-mix(in srgb,var(--choreo-paper) 72%,#d9e3df)}
.choreo-scene-number{position:absolute;right:var(--gutter,5vw);top:37px;font:clamp(110px,15vw,215px)/1 Georgia,serif;letter-spacing:-.08em;opacity:.045;transition:opacity .75s;user-select:none}
.choreo-scene[data-choreography-active="true"]>.choreo-section-field>.choreo-paper{opacity:.88}
.choreo-scene[data-choreography-active="true"]>.choreo-section-field>.choreo-scene-number{opacity:.09}
.choreo-section-field:before,.choreo-section-field:after{content:"";position:absolute;left:0;width:26px;height:20px;border-inline-start:2px solid currentColor;opacity:.18;transition:width .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
.choreo-section-field:before{top:0;border-top:1px solid currentColor}
.choreo-section-field:after{bottom:0;border-bottom:1px solid currentColor}
.choreo-section-field>svg{position:absolute;top:8px;right:0;width:clamp(170px,34%,520px);height:40px;fill:none;stroke:currentColor;stroke-width:.6;opacity:.16;transition:opacity .7s,translate .7s;translate:14px 0}
.choreo-scene[data-choreography-view="true"]>.choreo-section-field>svg{opacity:.28;translate:0 0}
.choreo-scene[data-choreography-active="true"]>.choreo-section-field:before,.choreo-scene[data-choreography-active="true"]>.choreo-section-field:after{width:clamp(50px,8vw,125px);opacity:.6}
.choreo-dark>.choreo-frame,.choreo-dark>.choreo-section-field{color:var(--choreo-light)}
.choreo-dark>.choreo-section-field{border-color:color-mix(in srgb,var(--choreo-light) 15%,transparent)}
.choreo-dark>.choreo-section-field>.choreo-paper{background:linear-gradient(112deg,color-mix(in srgb,var(--choreo-light) 9%,transparent),color-mix(in srgb,var(--choreo-light) 4%,transparent) 60%,transparent)}
.choreo-dark .choreo-rule{background:color-mix(in srgb,var(--choreo-light) 18%,transparent)}
.choreo-dark .choreo-rule i{background:var(--choreo-light)}

.choreo-rail{position:fixed;right:13px;top:calc(50% + var(--choreo-header)*.25);translate:0 -50%;z-index:35;width:34px;max-height:calc(100svh - var(--choreo-header) - 80px);color:var(--choreo-accent);font-family:var(--sans,sans-serif);transition:color .45s;isolation:isolate}
.choreo-rail:before{content:"";position:absolute;top:33px;bottom:12px;left:50%;width:1px;background:currentColor;opacity:.18;z-index:-1}
.choreo-rail-heading{font-size:7px;letter-spacing:.16em;writing-mode:vertical-rl;margin:0 auto 14px;line-height:1.5;max-height:74px;opacity:.7}
.choreo-rail-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.choreo-rail-item{padding:0;margin:0;min-height:29px}
.choreo-rail-link{position:relative;min-width:34px;height:29px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;outline-offset:3px}
.choreo-rail-number{display:flex;align-items:center;justify-content:center;width:23px;height:23px;font-size:8px;line-height:1;font-variant-numeric:tabular-nums;border:1px solid transparent;border-radius:50%;background:#f0f2e9;transition:background .35s,color .35s,border-color .35s,scale .35s}
.choreo-rail-link[aria-current="location"] .choreo-rail-number{background:var(--choreo-accent);color:#fffff7;border-color:var(--choreo-accent);scale:1.12;box-shadow:0 0 0 4px color-mix(in srgb,var(--choreo-accent) 10%,transparent)}
.choreo-rail-label{position:absolute;right:42px;top:50%;translate:5px -50%;width:max-content;max-width:230px;padding:11px 15px;background:#f3f5ed;color:#334c3c;border:1px solid color-mix(in srgb,var(--choreo-accent) 30%,transparent);font-size:11px;line-height:1.7;letter-spacing:.03em;box-shadow:0 8px 24px #17271a0a;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,translate .2s,visibility .2s}
.choreo-rail-link:hover .choreo-rail-label,.choreo-rail-link:focus-visible .choreo-rail-label{opacity:1;visibility:visible;translate:0 -50%}
.choreo-ready[data-choreography-tone="dark"] .choreo-rail{color:var(--choreo-light)}
.choreo-ready[data-choreography-tone="dark"] .choreo-rail-number{background:#253a32;color:var(--choreo-light)}
.choreo-ready[data-choreography-tone="dark"] .choreo-rail-link[aria-current="location"] .choreo-rail-number{background:var(--choreo-light);color:#20372b;border-color:var(--choreo-light);box-shadow:0 0 0 4px color-mix(in srgb,var(--choreo-light) 12%,transparent)}

.choreo-aperture{position:fixed;inset:calc(var(--choreo-header) + 16px) 15px 16px;pointer-events:none;z-index:18;color:var(--choreo-accent);opacity:.20;background:linear-gradient(currentColor,currentColor) left top/55px 1px no-repeat,linear-gradient(currentColor,currentColor) left top/1px 37px no-repeat,linear-gradient(currentColor,currentColor) right bottom/55px 1px no-repeat,linear-gradient(currentColor,currentColor) right bottom/1px 37px no-repeat;transition:color .5s,opacity .5s}
.choreo-aperture-thread{position:absolute;left:0;top:52px;bottom:52px;width:1px;transform-origin:top;transform:scaleY(var(--choreo-page-progress));background:currentColor;transition:transform 240ms linear}
.choreo-ready[data-choreography-tone="dark"] .choreo-aperture{color:var(--choreo-light);opacity:.25}
.choreo-rail[hidden],.choreo-aperture[hidden]{display:none!important}
.opening-pending .choreo-rail,.opening-active .choreo-rail,.opening-pending .choreo-aperture,.opening-active .choreo-aperture{visibility:hidden!important}
.choreo-ready[data-choreography-motion="paused"] .choreo-rule i,.choreo-ready[data-choreography-motion="paused"] .choreo-section-field:before,.choreo-ready[data-choreography-motion="paused"] .choreo-section-field:after,.choreo-ready[data-choreography-motion="paused"] .choreo-section-field>svg,.choreo-ready[data-choreography-motion="paused"] .choreo-paper,.choreo-ready[data-choreography-motion="paused"] .choreo-scene-number,.choreo-ready[data-choreography-motion="paused"] .choreo-rail *,.choreo-ready[data-choreography-motion="paused"] .choreo-aperture,.choreo-ready[data-choreography-motion="paused"] .choreo-aperture-thread{transition:none!important}

@media(max-width:1200px){.choreo-rail{right:6px;width:28px}.choreo-rail-link{min-width:28px}.choreo-rail-number{width:20px;height:20px;font-size:7px}.choreo-aperture{left:10px;right:10px}.choreo-rail-label{right:34px}}
@media(max-height:780px) and (min-width:901px){.choreo-rail-heading{display:none}.choreo-rail-item{min-height:25px}.choreo-rail-link{height:25px}.choreo-rail{top:calc(50% + var(--choreo-header)*.32)}.choreo-rail:before{top:12px}}
@media(max-width:900px){.choreo-rail{display:none}.choreo-aperture{inset:calc(var(--choreo-header) + 12px) 10px 13px;opacity:.13;background-size:30px 1px,1px 25px,30px 1px,1px 25px}.choreo-aperture-thread{display:none}.choreo-frame{inset:20px var(--gutter,24px) auto;gap:12px}.choreo-context{font-size:9px;letter-spacing:.05em}.choreo-folio b{font-size:18px}.choreo-section-word{display:none}.choreo-section-field>svg{width:36%;height:28px;top:13px;opacity:.15!important}.choreo-section-field:before,.choreo-section-field:after{width:20px}.choreo-paper{height:190px;clip-path:polygon(0 0,100% 0,100% 70%,60% 100%,0 90%)}.choreo-scene-number{font-size:125px;top:45px;right:20px}.choreo-scene[data-choreography-active="true"]>.choreo-section-field:before,.choreo-scene[data-choreography-active="true"]>.choreo-section-field:after{width:45px;opacity:.45}}
@media(max-height:620px){.choreo-rail{display:none}}
@media(prefers-reduced-motion:reduce){.choreo-frame *,.choreo-section-field,.choreo-section-field:before,.choreo-section-field:after,.choreo-section-field>svg,.choreo-paper,.choreo-scene-number,.choreo-rail *,.choreo-aperture,.choreo-aperture-thread{transition:none!important}}
@media(forced-colors:active){.choreo-section-field,.choreo-aperture{display:none}.choreo-rail-number{background:Canvas;color:CanvasText;border-color:GrayText}.choreo-rail-link[aria-current="location"] .choreo-rail-number{background:Highlight;color:HighlightText}.choreo-rule{background:GrayText}}
@media print{.choreo-frame,.choreo-section-field,.choreo-rail,.choreo-aperture{display:none!important}.choreo-framed{position:static}}

/* The surrounding paper changes its gesture with the subject, never the CG. */
.choreo-ready[data-choreography-family="water"] .choreo-paper{clip-path:ellipse(100% 85% at 32% 0)}
.choreo-ready[data-choreography-family="business"] .choreo-paper{clip-path:polygon(0 0,100% 0,100% 40%,78% 40%,78% 62%,54% 62%,54% 82%,0 100%)}
.choreo-ready[data-choreography-family="people"] .choreo-paper{clip-path:ellipse(95% 100% at 78% 0)}
.choreo-ready[data-choreography-family="possibility"] .choreo-paper{clip-path:polygon(0 0,100% 0,100% 68%,66% 100%,30% 72%,0 92%)}
.choreo-ready[data-choreography-motion="paused"] .choreo-paper{translate:none!important}
@media(max-width:700px){.choreo-paper{translate:0 calc(-15px + var(--choreo-local-progress)*30px)}}
@media(prefers-reduced-motion:reduce){.choreo-paper{translate:none!important}}