.origo-demo{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--background);color:var(--foreground);font-size:var(--text-sm);line-height:1.5;overflow:clip;container-type:inline-size}.origo-demo button{min-height:calc(var(--space-10) + var(--space-1))}.origo-demo-chooser>button{margin-left:auto}.origo-demo-chooser{align-items:center;gap:var(--space-3) var(--space-5);padding:var(--space-4) var(--space-5);flex-wrap:wrap;display:flex}.origo-demo-chooser>p{margin:0;font-weight:500}.origo-demo-chooser>div{gap:var(--space-2);flex-wrap:wrap;display:flex}.origo-demo-chooser button[aria-expanded=true]{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}.origo-demo-frame>p{padding:var(--space-3) var(--space-5);color:var(--muted-foreground);font-size:var(--text-xs);border-top:1px solid var(--border);margin:0}.origo-demo-frame iframe{background:var(--background);border:0;width:100%;height:80vh;display:block}@container (max-width:41.25rem){.origo-demo-chooser{padding:var(--space-3);flex-direction:column;align-items:flex-start}.origo-demo-frame>p{padding-inline:var(--space-3)}}
.film{--film-width:1440px;--film-gutter:clamp(24px, 5vw, 72px);--film-header:84px;color:var(--foreground);background:var(--background);position:relative;overflow:clip}html:has(.film){scroll-snap-type:y proximity}html:has(.film) body:before{content:"";scroll-snap-align:start;display:block}@media (prefers-reduced-motion:no-preference){html:has(.film){scroll-behavior:smooth}}.film h1,.film h2{font-family:var(--font-roadmap-serif), serif;text-wrap:balance;font-weight:400}.film ::selection{background:var(--primary);color:var(--primary-foreground)}.film a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:5px}.film-header{z-index:2;max-width:var(--film-width);padding:20px var(--film-gutter);justify-content:space-between;align-items:center;gap:24px;margin:auto;display:flex;position:absolute;inset:0 0 auto}.film-wordmark svg{width:auto;height:34px}.film-header nav{font-size:var(--text-sm);gap:32px;display:flex}.film-header a{align-items:center;min-height:44px;padding-block:8px;display:inline-flex}.film-header nav a{text-underline-offset:6px}.film-header nav a:hover{text-decoration:underline}.film-start{border-radius:var(--radius);background:var(--primary);min-height:44px;color:var(--primary-foreground);align-items:center;padding:12px 22px;font-weight:600;display:inline-flex}.film-start:hover{background:color-mix(in oklab, var(--primary) 88%, var(--foreground))}.film-opening{max-width:var(--film-width);height:100svh;min-height:600px;padding:0 var(--film-gutter);grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;margin:auto;display:grid;position:relative}.film-opening-copy{z-index:1;padding:var(--film-header) 0 24px 32px;grid-area:1/7/auto/-1}.film-opening-copy>p:first-child{font-size:var(--text-sm);margin-bottom:24px}.film h1{letter-spacing:-.025em;font-size:clamp(48px,5.2vw,76px);line-height:1.06}.film-opening-copy>p:nth-of-type(2){max-width:33ch;color:var(--muted-foreground);margin-top:28px;font-size:18px;line-height:1.6}.film-opening-actions{flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:30px;display:flex}.film-story-link{border-bottom:1px solid var(--primary);min-height:44px;transition:color .12s var(--ease);align-items:center;gap:18px;padding-block:12px;display:inline-flex}.film-story-link:hover{color:var(--primary)}.film-school{grid-area:1/1/auto/-1;align-self:stretch;min-height:0}.film-school .hanne-illustration{object-fit:cover;object-position:center top;height:100%;-webkit-mask-image:linear-gradient(to right, var(--foreground) 34%, transparent 60%), linear-gradient(to bottom, transparent, var(--foreground) 12%, var(--foreground) 72%, transparent 100%);mask-image:linear-gradient(to right, var(--foreground) 34%, transparent 60%), linear-gradient(to bottom, transparent, var(--foreground) 12%, var(--foreground) 72%, transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.hanne-illustration{width:100%;height:auto;display:block}.film-story{max-width:var(--film-width);margin:auto;position:relative}.film-story-frame{height:100svh;padding:24px var(--film-gutter) 32px;align-content:center;display:grid;position:sticky;top:0}.film-chapter{display:contents}.film-story-step{height:40svh}.film-story-step:last-child{height:100svh}.film-story-frame+.film-story-step{margin-top:-100svh}.film-time{font-size:var(--text-sm);color:var(--muted-foreground);align-items:center;gap:18px;margin-bottom:16px;display:flex}.film-time time{font-variant-numeric:tabular-nums;color:var(--foreground)}.film-scene{flex-direction:column;grid-area:1/1;align-items:center;display:flex}.film-scene .hanne-illustration{width:auto;max-width:100%;height:min(64svh, calc((min(100vw, var(--film-width)) - 2 * var(--film-gutter)) / 1.65));aspect-ratio:1.65;object-fit:cover;object-position:center top;border-radius:var(--radius-xl) var(--radius-xl) 0 0;-webkit-mask-image:linear-gradient(to bottom, var(--foreground) 62%, transparent 98%);mask-image:linear-gradient(to bottom, var(--foreground) 62%, transparent 98%)}.film-scene-copy{text-align:center;max-width:60ch;margin-top:-56px;padding-inline:16px;position:relative}.film-scene-state{font-size:var(--text-sm);white-space:nowrap;align-items:center;gap:10px;padding-block:4px;display:inline-flex}.film-scene-state:before{content:"";border:1px solid var(--muted-foreground);border-radius:50%;width:6px;height:6px}.film-scene[data-solved=true] .film-scene-state:before{background:var(--primary);border-color:var(--primary)}.film-dialogue{font-family:var(--font-roadmap-serif), serif;margin-top:8px;font-size:clamp(24px,2.5vw,34px);font-style:italic;line-height:1.3}.film-scene-copy>p:last-child{max-width:48ch;color:var(--muted-foreground);text-wrap:pretty;margin:12px auto 0;font-size:17px;line-height:1.65}.film-scene .hanne-illustration{opacity:0;transition:opacity 0s .7s,transform 0s .7s;transform:scale(1.015)}.film-scene[data-shown=true]{z-index:1}.film-scene[data-shown=true] .hanne-illustration{opacity:1;transition:opacity .7s ease-in-out,transform .7s ease-in-out;transform:none}.film-scene :is(.film-time,.film-scene-copy){opacity:0;pointer-events:none;transition:opacity .25s ease-in,transform 0s .25s;transform:translateY(8px)}.film-scene[data-shown=true] :is(.film-time,.film-scene-copy){opacity:1;pointer-events:auto;transition:opacity .45s ease-out .25s,transform .45s ease-out .25s;transform:none}@media (prefers-reduced-motion:reduce){.film-scene[data-shown] :is(.hanne-illustration,.film-time,.film-scene-copy){transition:none}}@media (scripting:none){.film-story-frame{flex-direction:column;gap:64px;height:auto;display:flex;position:static}.film-story-step{display:none}.film-scene :is(.hanne-illustration,.film-time,.film-scene-copy){opacity:1;pointer-events:auto;transform:none}}@media (prefers-reduced-motion:no-preference){.film-story-link>svg{transition:transform .18s var(--ease)}.film-story-link:is(:hover,:focus-visible)>svg{transform:translateY(3px)}}.film-arrival{max-width:var(--film-width);padding:72px var(--film-gutter) 40px;scroll-snap-align:start;margin:auto}.film-demo-intro{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,7vw,100px);margin-bottom:40px;display:grid}.film-arrival h2{letter-spacing:-.02em;font-size:clamp(48px,5vw,76px);line-height:1.08}.film-demo-intro p{max-width:40ch;color:var(--muted-foreground);line-height:1.65}.film-demo-intro p+p{margin-top:16px}.film-ending{max-width:var(--film-width);padding:72px var(--film-gutter) 88px;text-align:center;flex-direction:column;align-items:center;gap:32px;margin:auto;display:flex}.film-ending h2{letter-spacing:-.02em;font-size:clamp(32px,3.4vw,48px);line-height:1.15}.film>footer{max-width:var(--film-width);padding:24px var(--film-gutter) 32px;border-top:1px solid var(--border);scroll-snap-align:end}.film>footer a{align-items:center;min-height:44px;display:inline-flex}.film>footer>div{gap:12px 32px;line-height:1.6}@media (max-width:760px){.film{--film-gutter:24px;--film-header:68px}.film-header{padding:12px var(--film-gutter);gap:16px;position:relative}.film-header nav a:first-child{display:none}.film-opening{height:auto;min-height:100svh;padding:0 0 32px;display:block}.film-school .hanne-illustration{aspect-ratio:4/3;height:auto;max-height:42svh;-webkit-mask-image:linear-gradient(to bottom, var(--foreground) 44%, transparent 100%);mask-image:linear-gradient(to bottom, var(--foreground) 44%, transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}.film-opening-copy{margin:-56px var(--film-gutter) 0;text-align:center;padding:0;position:relative}.film-opening-copy>p:first-child{margin-bottom:16px}.film h1{font-size:clamp(40px,9.8vw,64px)}.film-opening-copy>p:nth-of-type(2){margin:20px auto 0;font-size:16px}.film-opening-actions{justify-content:center;margin-top:20px}.film-story-frame{padding:16px 0 24px}.film-time{margin-bottom:12px}.film-scene .hanne-illustration{aspect-ratio:4/3;border-radius:0;width:100%;height:auto;max-height:50svh}.film-scene-copy{padding-inline:var(--film-gutter);margin-top:-40px}.film-dialogue{font-size:24px}.film-scene-copy>p:last-child{font-size:16px}.film-arrival{padding:40px var(--film-gutter)}.film-arrival h2{font-size:clamp(36px,9vw,48px)}.film-demo-intro{grid-template-columns:1fr;gap:16px;margin-bottom:32px}.film-ending{padding:48px var(--film-gutter) 64px}}@media (max-width:380px){.film{--film-gutter:20px}.film-time{gap:10px}}