/* The animated workspace is the hero; the surrounding page stays quiet. */
.landing:has(.animated-study:not([hidden])){grid-template-rows:64px minmax(0,1fr) 42px}
.animated-study.diagram-study{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:4px 0 0;min-height:0}
.hero-intro{text-align:center;flex:none}
.animated-study .hero-intro h1{font-size:clamp(30px,3.3vw,47px);letter-spacing:-.045em;line-height:1.12}
.hero-intro>p{font-size:14px;line-height:1.6;color:#717a68;margin:13px 0 0}
.home-film{width:min(800px,100%,calc((100dvh - 380px) * 2));min-width:0;flex:none;margin:0}
.film-stage{position:relative;width:100%;aspect-ratio:2;isolation:isolate}
.film-stage>svg{display:block;width:100%;height:100%;overflow:visible;font-family:var(--font)}
.film-chrome{fill:#fdfbf4;stroke:#bec8b1;stroke-width:1.1}
.film-rule{stroke:#dee2d4;stroke-width:1;fill:none}
.film-header-text{font-size:12px;fill:#53664a;font-weight:500}
.film-label{fill:#7b8970;font-size:12px}
.film-body-text{fill:#526348;font-size:14px}
.film-tiny{font-size:11px;fill:#849177}
.film-chat-text{fill:#3f5539;font-size:18px;letter-spacing:-.1px}
.film-input{fill:#fffdf8;stroke:#d4dcc8;stroke-width:1}
.film-photo{overflow:hidden}
.film-ref-outline{stroke:#728a5e;stroke-width:1.5;fill:none;opacity:0}
.film-photo-label{fill:#617552;font-size:11px}
.film-selection{fill:none;stroke:#b37a55;stroke-width:1.5;stroke-dasharray:4 3;opacity:0}
.film-wall{fill:none;stroke:#929c85;stroke-width:3;stroke-linecap:square}
.film-cursor{pointer-events:none;opacity:0}
.film-cursor text{font-size:13px;fill:#fffdf4;font-weight:500}
.film-cursor.you{color:#b47752}
.film-cursor.grove{color:#476342}
.film-cursor-arrow{stroke:#fffdf4;stroke-width:1.7;stroke-linejoin:round;fill:currentColor}
.film-cursor-label{fill:currentColor}
.film-cursor-ring{fill:none;stroke:currentColor;stroke-width:1.7;opacity:0}
.film-controls{height:33px;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
.film-chapters{display:flex;gap:18px;align-items:center}
.film-chapters button{position:relative;background:none;border:0;padding:6px 0;color:#8a937f;font-size:10px;line-height:1.2}
.film-chapters button:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:transparent}
.film-chapters button[aria-current]{color:#3e5936}
.film-chapters button[aria-current]:after{background:#789468}
.film-chapters button:hover{color:#3e5936}
.film-play{min-width:70px;height:28px;padding:0 10px;display:flex;gap:6px;align-items:center;justify-content:center;border:1px solid #d4dccb;border-radius:15px;background:none;color:#49643e;font-size:10px;flex:none;line-height:1}
.film-play:hover{background:#e7eddf;border-color:#a4b295}
.animated-study .hero-signup{flex:none;margin:0 auto;width:380px;max-width:100%}
.animated-study .hero-signup .signup-row{min-height:46px}
.animated-study .hero-signup .signup button{font-size:11px}
.animated-study .form-status{min-height:14px;font-size:10px;margin-top:5px}
body[data-option="diagram"] .brand{font-family:var(--font);font-size:29px;font-weight:550;letter-spacing:-1.6px;gap:7px}
body[data-option="diagram"] .landing-header .brand img{height:31px;width:28px}
@media(max-width:760px){.landing:has(.animated-study:not([hidden])){grid-template-rows:62px minmax(0,1fr) 44px}.animated-study.diagram-study{gap:24px}.animated-study .hero-intro h1{font-size:36px;max-width:450px;margin-inline:auto}.hero-intro>p{font-size:13px;max-width:330px;margin:16px auto 0}.home-film{width:100%;max-width:650px}.film-chapters{gap:17px}.film-chapters button{font-size:10px}.film-controls{gap:14px;margin-top:12px}.animated-study .hero-signup{max-width:390px;width:100%}}
@media(max-width:420px){.animated-study.diagram-study{gap:28px;padding-bottom:12px}.animated-study .hero-intro h1{font-size:34px;max-width:310px}.hero-intro>p{font-size:12px;max-width:280px;margin-top:13px}.film-controls{gap:9px;margin-top:8px}.film-chapters{gap:12px}.film-chapters button{font-size:9px}.film-play{min-width:61px;height:25px;padding:0 8px;font-size:9px}.animated-study .hero-signup .signup-row{min-height:46px}.animated-study .hero-signup button{padding-inline:12px}}
@media(max-height:740px) and (min-width:761px){.landing:has(.animated-study:not([hidden])){grid-template-rows:54px minmax(0,1fr) 36px}.animated-study.diagram-study{gap:12px}.animated-study .hero-intro h1{font-size:35px}.hero-intro>p{font-size:12px;margin-top:9px}.home-film{width:min(700px,100%,calc((100dvh - 320px) * 2))}.film-controls{height:28px;margin-top:4px}.animated-study .hero-signup{width:360px}.animated-study .hero-signup .signup-row{min-height:44px}.animated-study .hero-signup button{padding-top:10px;padding-bottom:10px}}
@media(max-height:740px) and (max-width:760px){.animated-study.diagram-study{gap:18px}.animated-study .hero-intro h1{font-size:30px}.hero-intro>p{font-size:12px;margin-top:10px}.home-film{max-width:490px}.film-controls{margin-top:4px}.animated-study .hero-signup .signup-row{min-height:44px}}

.film-play:focus-visible,.film-chapters button:focus-visible{outline:2px solid #91a47d;outline-offset:4px}.film-cursor text{paint-order:stroke;stroke:currentColor;stroke-width:.2px}

/* The public page uses the full viewport, without the study navigation. */
html,body{height:100%;min-height:0;overflow:hidden}
.landing{height:100dvh;min-height:0}
.signup-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.landing-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.form-status[data-state="error"]{color:#975d42}
@media(max-height:530px){
  .landing:has(.animated-study:not([hidden])){height:100dvh;min-height:0;grid-template-rows:42px minmax(0,1fr) 28px}
  .animated-study.diagram-study{gap:8px;padding:0}
  .animated-study .hero-intro h1{font-size:clamp(22px,5vw,30px)}
  .hero-intro>p{font-size:11px;margin-top:4px}
  .home-film{width:min(560px,100%,calc((100dvh - 245px) * 2));max-width:100%}
  .film-controls{height:25px;margin-top:0}
  .film-chapters{gap:10px}
  .film-chapters button{font-size:9px}
  .animated-study .hero-signup{width:360px}
  .animated-study .hero-signup .signup-row{min-height:38px}
  .animated-study .hero-signup input{padding-block:6px}
  .animated-study .hero-signup button{padding-block:8px}
  .brand{font-size:25px!important}
  .brand img{height:25px!important;width:23px!important}
}