@import url("fonts.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;color:#223A4E;background:#FFFFFF}
img{max-width:100%}
[hidden]{display:none !important}
.site-header{position:sticky;top:0;z-index:10;background:rgba(244,245,247,0.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,0.08)}
.site-nav{max-width:1100px;margin:0 auto;padding:0 22px;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.brand{display:flex;align-items:center;line-height:0;text-decoration:none}.brand img{height:48px;width:auto;display:block}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;font-size:13px}
.navlink{color:#556069;padding:14px 0;text-decoration:none}
.navlink[aria-current="page"]{color:#223A4E;font-weight:600}
.nav-cta{background:#9E86B4;color:#FFFFFF !important;font-size:13px;font-weight:600;padding:7px 15px;border-radius:980px;text-decoration:none}
.site-footer{background:#F4F5F7;padding:32px 22px 40px;font-size:12px;line-height:1.6;color:#556069}
.footer-inner{max-width:1024px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.footer-note{margin:0;padding-bottom:16px;border-bottom:1px solid #D7DCE2}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.footer-links a{color:#556069}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{margin:0;padding:16px 20px;border-radius:12px;background:#F6E7E5;color:#8A3B34;font:500 15px/1.6 Montserrat,sans-serif}
.paybtn[aria-disabled="true"]{opacity:.35;pointer-events:none}
#cookie-banner{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:50}
#cookie-banner .cb{max-width:760px;margin:0 auto;background:#223A4E;color:#F4F5F7;border-radius:20px;padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 20px 50px rgba(10,20,30,.35);font-size:14px;line-height:1.5}
#cookie-banner a{color:#C7B7D6}
#cookie-banner button{font-family:inherit;font-size:14px;font-weight:600;border-radius:980px;padding:10px 18px;min-height:44px;cursor:pointer}
#cookie-decline{background:transparent;color:#F4F5F7;border:1px solid rgba(244,245,247,.5)}
#cookie-accept{background:#9E86B4;color:#fff;border:0}
#stimmen-box{transition:opacity .3s}

.menu-btn{display:none}
@media (max-width: 860px){
  .site-header{position:sticky !important;top:0}
  .site-nav{min-height:60px;flex-wrap:nowrap}
  .brand img{height:40px}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px;margin-right:-10px}
  .menu-btn span{display:block;height:2px;width:22px;background:#223A4E;border-radius:2px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 24px;background:rgba(244,245,247,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.08);font-size:20px;display:none}
  .nav-links.open{display:flex;animation:menuIn .35s cubic-bezier(.16,1,.3,1) both}
  .nav-links .navlink{font-family:'Lora',Georgia,serif;font-size:24px;color:#223A4E;padding:12px 0;border-bottom:1px solid #D7DCE2}
  .nav-links .nav-cta{margin-top:18px;text-align:center;font-size:16px;padding:14px 20px}
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}

body{margin:0;background:#ffffff;-webkit-font-smoothing:antialiased}
a{color:#9E86B4;text-decoration:none}a:hover{color:#C7B7D6;text-decoration:none}
.pill:hover{text-decoration:none;filter:brightness(1.08)}
.navlink:hover{color:#223A4E;text-decoration:none}
input:focus{outline:2px solid #8B7099;outline-offset:1px}

h1,h2,h3,blockquote p,.serif{font-family:'Lora',Georgia,serif}
@keyframes heroIn{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes heroImg{from{opacity:0;transform:scale(1.06) translateY(30px)}to{opacity:1;transform:none}}
.hero-in{animation:heroIn 1.1s cubic-bezier(.16,1,.3,1) both}
.d1{animation-delay:.12s}.d2{animation-delay:.28s}.d3{animation-delay:.44s}
.hero-img{animation:heroImg 1.6s cubic-bezier(.16,1,.3,1) .5s both}
.pill{transition:transform .25s cubic-bezier(.16,1,.3,1),filter .25s}
.pill:hover{transform:scale(1.04)}
.card{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 24px 48px rgba(34,58,78,.12)}
@supports (animation-timeline: view()){
@keyframes revealUp{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes zoomOut{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes drift{from{transform:translateY(-6%) scale(1.12)}to{transform:translateY(6%) scale(1.12)}}
@keyframes shrink{from{transform:scale(1);border-radius:28px 28px 0 0}to{transform:scale(.9);border-radius:40px}}
@keyframes ink{from{background-position:100% 0}to{background-position:0 0}}
.reveal{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.reveal:nth-child(2){animation-range:entry 8% entry 78%}
.reveal:nth-child(3){animation-range:entry 16% entry 86%}
.reveal:nth-child(4){animation-range:entry 24% entry 94%}
.reveal:nth-child(5){animation-range:entry 30% entry 100%}
.reveal:nth-child(6){animation-range:entry 30% entry 100%}
.zoom{animation:zoomOut linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
.drift{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.shrink{animation:shrink linear both;animation-timeline:view();animation-range:exit 0% exit 70%}
.ink-dark{background:linear-gradient(90deg,#F4F5F7 50%,rgba(199,183,214,.32) 50%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:ink linear both;animation-timeline:view();animation-range:cover 18% cover 52%}
.ink-light{background:linear-gradient(90deg,#223A4E 50%,#D7DCE2 50%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:ink linear both;animation-timeline:view();animation-range:cover 18% cover 52%}
}

@keyframes floatUp{0%{transform:translateY(60px) scale(.6);opacity:0}20%{opacity:.9}100%{transform:translateY(-280px) scale(1.1) rotate(60deg);opacity:0}}
.mol{animation:floatUp 7s ease-in infinite}
.m2{animation-delay:1.2s;animation-duration:8s}.m3{animation-delay:2.4s}.m4{animation-delay:3.4s;animation-duration:9s}.m5{animation-delay:4.6s}.m6{animation-delay:5.6s;animation-duration:6s}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
.glow{animation:breathe 6s ease-in-out infinite}
@supports (animation-timeline: view()){
@keyframes bottleIn{from{transform:translateY(220px) rotate(-28deg) scale(.72);opacity:0}to{transform:none;opacity:1}}
.bottle{animation:bottleIn linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
.kurs-stage{view-timeline-name:--kurs}
@keyframes lidOpen{from{transform:rotateX(-86deg)}to{transform:rotateX(0)}}
@keyframes lapRise{from{transform:translateY(120px) scale(.86)}to{transform:none}}
@keyframes bookL{from{transform:translateX(-160%) rotate(-24deg);opacity:0}to{transform:rotate(-7deg);opacity:1}}
@keyframes bookR{from{transform:translateX(160%) rotate(24deg);opacity:0}to{transform:rotate(7deg);opacity:1}}
@keyframes headFade{from{opacity:1;transform:none}to{opacity:.35;transform:translateY(-20px) scale(.96)}}
.lap{animation:lapRise linear both;animation-timeline:--kurs;animation-range:contain 0% contain 22%}
.lid{animation:lidOpen linear both;animation-timeline:--kurs;animation-range:contain 4% contain 38%}
.book-l{animation:bookL linear both;animation-timeline:--kurs;animation-range:contain 38% contain 58%}
.book-r{animation:bookR linear both;animation-timeline:--kurs;animation-range:contain 46% contain 66%}
.feat{animation:revealUp linear both;animation-timeline:--kurs}
.f1{animation-range:contain 64% contain 76%}.f2{animation-range:contain 72% contain 84%}.f3{animation-range:contain 80% contain 92%}
@keyframes heroScroll{from{transform:none}to{transform:scale(.88) translateY(-40px);opacity:.5}}
.hero-scroll{animation:heroScroll linear both;animation-timeline:view();animation-range:exit 0% exit 80%}
}



@keyframes talk{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.talk span{transform-origin:bottom;animation:talk .55s ease-in-out infinite}
.talk span:nth-child(2){animation-delay:.12s}.talk span:nth-child(3){animation-delay:.24s}.talk span:nth-child(4){animation-delay:.06s}.talk span:nth-child(5){animation-delay:.18s}
.qw{display:inline-block}
@media (max-width: 860px){.q-wrap{height:auto !important;display:flex;flex-direction:column;gap:28px}.q-photo{position:relative !important;width:100% !important;height:560px !important}.q-bubble{position:relative !important;left:auto !important;top:auto !important;width:100% !important}.q-tail{left:60px !important;top:-24px !important;border-top:0 !important;border-left:18px solid transparent !important;border-right:18px solid transparent !important;border-bottom:26px solid #F3EFF7 !important}}
@supports (animation-timeline: view()){
.quote-stage{view-timeline-name:--quote}
@keyframes qWord{from{opacity:.12;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
.qw{animation:qWord linear both;animation-timeline:--quote}
@keyframes qBubble{from{opacity:0;transform:translateX(-40px) scale(.8)}to{opacity:1;transform:none}}
.q-bubble{transform-origin:0 140px;animation:qBubble linear both;animation-timeline:--quote;animation-range:entry 30% cover 30%}
}
.story-texts .st{margin-bottom:12px}
.rec{animation:breathe 1.6s ease-in-out infinite}
.node{transform-box:fill-box;transform-origin:center;animation:breathe 2.4s ease-in-out infinite}
.n2{animation-delay:.6s}.n3{animation-delay:1.2s}
@keyframes floatLeft{0%{transform:translate(0,0) scale(.6) rotate(0);opacity:0}15%{opacity:.95}100%{transform:translate(-320px,-150px) scale(1.15) rotate(120deg);opacity:0}}
.mf{animation:floatLeft 4.5s ease-out infinite}
.mf2{animation-delay:.9s}.mf3{animation-delay:1.8s}.mf4{animation-delay:2.7s}.mf5{animation-delay:3.6s}
@media (max-width: 760px){.brain{width:min(62%, calc(100cqh * 0.7)) !important}.bot{right:2% !important;height:45% !important}.lab{font-size:11px !important}}
.pin{position:sticky;top:64px;height:min(calc(100svh - 64px),900px)}
@media (max-width: 760px){header{position:relative !important}.pin,.story-pin{top:0 !important;height:min(100svh,900px) !important}}
@supports (animation-timeline: view()){
.story{height:3800px;view-timeline-name:--story}
.story-pin{position:sticky;top:64px;height:min(calc(100svh - 64px),900px)}
.story-texts{display:grid}
.story-texts .st{grid-area:1/1;margin:0}
.story-scene{height:auto !important;flex:1 1 0;min-height:220px}
.st2,.st3,.st4,.brain,.bot{opacity:0}
@keyframes t1{0%,22%{opacity:1;transform:none}30%,100%{opacity:0;transform:translateY(-30px)}}
@keyframes t2{0%,30%{opacity:0;transform:translateY(30px)}38%,56%{opacity:1;transform:none}63%,100%{opacity:0;transform:translateY(-30px)}}
@keyframes t3{0%,63%{opacity:0;transform:translateY(30px)}70%,80%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-30px)}}
@keyframes t4{0%,86%{opacity:0;transform:translateY(30px)}93%,100%{opacity:1;transform:none}}
.st1,.st2,.st3,.st4,.me,.call,.brain,.dr,.lab,.bot{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--story;animation-range:contain 0% contain 100%}
.st1{animation-name:t1}.st2{animation-name:t2}.st3{animation-name:t3}.st4{animation-name:t4}
@keyframes me{0%{transform:translateY(90px) scale(.9);opacity:.4}10%,26%{transform:none;opacity:1}36%,84%{transform:translateX(-24%) scale(.94);opacity:1}94%,100%{transform:none;opacity:1}}
.me{animation-name:me}
@keyframes call{0%,4%{opacity:0;transform:scale(1.18)}12%,24%{opacity:1;transform:none}31%,100%{opacity:0;transform:scale(.92)}}
.call{animation-name:call}
@keyframes brainIn{0%,31%{opacity:0;transform:translateX(60px) scale(.85)}38%,57%{opacity:1;transform:none}64%,100%{opacity:0;transform:translateY(-40px) scale(.9)}}
.brain{animation-name:brainIn}
.dr{stroke-dasharray:1;stroke-dashoffset:1}
@keyframes draw{0%,33%{stroke-dashoffset:1}50%,100%{stroke-dashoffset:0}}
.dr{animation-name:draw}
@keyframes gyIn{0%,36%{opacity:0}52%,100%{opacity:.9}}
.gy{animation:gyIn linear both;animation-timeline:--story;animation-range:contain 0% contain 100%}
@keyframes lab1{0%,41%{opacity:0;transform:translateY(12px) scale(.9)}45%,100%{opacity:1;transform:none}}
@keyframes lab2{0%,45%{opacity:0;transform:translateY(12px) scale(.9)}49%,100%{opacity:1;transform:none}}
@keyframes lab3{0%,49%{opacity:0;transform:translateY(12px) scale(.9)}53%,100%{opacity:1;transform:none}}
.lab1{animation-name:lab1}.lab2{animation-name:lab2}.lab3{animation-name:lab3}
@keyframes botIn{0%,62%{opacity:0;transform:translateY(240px) rotate(-26deg) scale(.75)}72%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(60px) scale(.9)}}
.bot{animation-name:botIn}
}

.legal h2{font-family:'Lora',Georgia,serif;font-weight:500;font-size:26px;line-height:1.25;color:#223A4E;margin:56px 0 14px}
.legal p{font-size:17px;line-height:1.7;color:#556069;margin:0 0 14px}
.legal b,.legal strong{color:#223A4E;font-weight:600}
@supports (animation-timeline: view()){
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
.chain-line{transform-origin:top;animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 60%}
.dr2{stroke-dasharray:1;stroke-dashoffset:1;animation:draw2 linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
@keyframes draw2{to{stroke-dashoffset:0}}
.gy2{animation:gy2In linear both;animation-timeline:view();animation-range:entry 25% cover 50%}
@keyframes gy2In{from{opacity:0}to{opacity:1}}
@keyframes frameIn{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}
.frame-in{animation:frameIn linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
@keyframes thenNow{from{filter:grayscale(1) brightness(.85)}to{filter:none}}
.then-now{animation:thenNow linear both;animation-timeline:view();animation-range:entry 20% cover 50%}
}

@supports (animation-timeline: view()){.ink-dark,.ink-light{padding-bottom:.24em;margin-bottom:-.24em;line-height:1.22 !important;animation-range:entry 20% cover 42% !important}}

.legal{overflow-wrap:anywhere}
h1,h2{overflow-wrap:break-word;hyphens:manual}
@media (max-width: 760px){.lab2,.lab3{display:none}}
@supports (animation-timeline: view()){.f1{animation-range:contain 48% contain 60% !important}.f2{animation-range:contain 54% contain 66% !important}.f3{animation-range:contain 60% contain 72% !important}}

.hero-pin{height:min(calc(100svh - 64px),900px)}
@supports (animation-timeline: view()){
.hero-stage{height:1700px;view-timeline-name:--hero}
@keyframes meFwd{0%{z-index:1;transform:scale(.94)}48%{z-index:1}52%{z-index:3}100%{z-index:3;transform:scale(1.14)}}
.hero-me{animation:meFwd linear both;animation-timeline:--hero;animation-range:contain 0% contain 75%}
@keyframes wordBack{to{transform:scale(.88) translateY(-24px);opacity:.5;filter:blur(1.5px)}}
.hero-word{animation:wordBack linear both;animation-timeline:--hero;animation-range:contain 0% contain 75%}
}
@media (max-width: 760px){.hero-pin{height:min(100svh,900px) !important}.hero-word{top:9% !important}.hero-me img{height:62% !important}}

@keyframes ringOut{from{transform:translate(-50%,-50%) scale(.25);opacity:.9}to{transform:translate(-50%,-50%) scale(1.25);opacity:0}}
.ring{animation:ringOut 1.4s ease-out infinite}.r2{animation-delay:.47s}.r3{animation-delay:.94s}
.calm{animation-duration:4.5s}.c2{animation-delay:2.25s}
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-3px,1px) rotate(-1deg)}40%{transform:translate(3px,-1px) rotate(1deg)}60%{transform:translate(-2px,0) rotate(-.6deg)}80%{transform:translate(2px,1px) rotate(.6deg)}}
.shake{animation:shake .35s linear infinite}
@keyframes sirenFlash{0%,100%{opacity:1}50%{opacity:.3}}
.siren,.blink{animation:sirenFlash .6s steps(1) infinite}
.calm-layer{opacity:0}

.fire-wrap{position:absolute;inset:0;z-index:0;pointer-events:none}
.fire{position:absolute;left:0;right:0;bottom:-40px;height:480px;filter:blur(13px);mix-blend-mode:screen}
.fl.tip{background:linear-gradient(to top,rgba(255,122,33,0) 0%,#FF8A2A 30%,#FFD27A 60%,rgba(255,240,180,0) 100%);border-radius:50% 50% 50% 50% / 80% 80% 20% 20%;opacity:.75}
.fl{position:absolute;bottom:0;border-radius:50% 50% 35% 35% / 65% 65% 35% 35%;background:linear-gradient(to top,#E2401C 0%,#FF7A21 35%,#FFB547 65%,rgba(255,226,140,0) 100%);transform-origin:50% 100%;animation:flicker 1s ease-in-out infinite alternate;opacity:.9}
@keyframes flicker{0%{transform:scaleY(.82) scaleX(1.05) skewX(-3deg) translateY(0)}50%{transform:scaleY(1.12) scaleX(.94) skewX(3deg) translateY(-8px)}100%{transform:scaleY(.95) scaleX(1) skewX(-1deg) translateY(-2px)}}
.fire-glow{position:absolute;left:-10%;right:-10%;bottom:-120px;height:520px;background:radial-gradient(ellipse at 50% 100%,rgba(255,110,40,.75) 0%,rgba(226,64,28,.35) 40%,rgba(28,47,64,0) 70%);animation:glowPulse 1.8s ease-in-out infinite alternate}
@keyframes glowPulse{from{opacity:.75}to{opacity:1}}
.embers{position:absolute;left:0;right:0;bottom:60px;height:480px}
.ember{position:absolute;bottom:0;border-radius:50%;background:#FFC266;box-shadow:0 0 10px 3px rgba(255,140,50,.8);animation:emberUp 3s linear infinite}
@keyframes emberUp{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(30px,-440px);opacity:0}}
.siren-wash{position:absolute;inset:0;background:radial-gradient(circle at 88% 12%,rgba(255,40,40,.55) 0%,rgba(255,40,40,0) 55%);animation:wash .9s steps(1) infinite}
@keyframes wash{0%{opacity:1}50%{opacity:.15}}
.siren-unit{position:relative;width:64px;height:78px;flex:none}
.siren-unit .dome{position:absolute;left:8px;top:6px;width:48px;height:52px;border-radius:24px 24px 6px 6px;background:radial-gradient(circle at 40% 35%,#FFB3A8 0%,#FF3B2F 45%,#B3170F 100%);box-shadow:0 0 40px 12px rgba(255,59,47,.7);animation:wash .9s steps(1) infinite}
.siren-unit .base{position:absolute;left:0;bottom:6px;width:64px;height:16px;border-radius:5px;background:#3A4652}
.siren-unit .beam{position:absolute;left:-70px;top:-60px;width:204px;height:204px;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,80,60,.55) 0deg,rgba(255,80,60,0) 50deg,rgba(255,80,60,0) 180deg,rgba(255,80,60,.55) 180deg,rgba(255,80,60,0) 230deg,rgba(255,80,60,0) 360deg);animation:spin 1.1s linear infinite;filter:blur(4px)}
@keyframes spin{to{transform:rotate(360deg)}}
@supports (animation-timeline: view()){
.alarm-stage{view-timeline-name:--alarm}
@keyframes fireOut{0%,42%{opacity:1;transform:scaleY(1)}75%,100%{opacity:0;transform:scaleY(.25)}}
@keyframes sirenOff{0%,62%{opacity:1}84%,100%{opacity:0}}
.fire-wrap .fire,.fire-wrap .fire-glow{transform-origin:50% 100%}
.fire-wrap{animation:sirenOff linear both;animation-timeline:--alarm;animation-range:cover 0% cover 100%}
.siren-unit{animation:sirenOff linear both;animation-timeline:--alarm;animation-range:cover 0% cover 100%}
}
@media (max-width: 760px){.lap-sub{display:none}.book-l,.book-r{padding:6% 5% !important}.book-l span:first-child,.book-r span:first-child{font-size:7px !important;letter-spacing:.05em !important}.book-l span:last-child,.book-r span:last-child{font-size:11px !important}}

.ring-prog{transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.done-pop{animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both}
.check-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:drawCheck .5s ease .25s forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.booklet{transform:rotateY(-14deg) rotate(-3deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.card:hover .booklet{translate:0 -10px}
.booklet{transition:translate .4s cubic-bezier(.16,1,.3,1)}
@supports (animation-timeline: view()){
@keyframes bookletIn{from{transform:translateY(80px) rotateY(-40deg) rotate(-12deg);opacity:0}to{transform:rotateY(-14deg) rotate(-3deg);opacity:1}}
.booklet{animation:bookletIn linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

@media (max-width: 760px){.brain{right:2% !important;width:min(64%, calc(100cqh * 0.7)) !important}.lab{display:block !important;left:auto !important;right:-2% !important;font-size:10.5px !important;line-height:1.3 !important;padding:6px 9px !important;max-width:none}.lab2{top:-6% !important}.lab3{top:32% !important}.lab1{top:70% !important}.pin,.story-pin,.hero-pin{top:60px !important;height:min(calc(100svh - 60px),900px) !important}.hero-word{top:7% !important}}