:root{font:100%/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,ui-sans-serif,system-ui,sans-serif;color-scheme:light;--bg:#f5f5f7;--paper:#fff;--ink:#0b0b0c;--muted:#6e6e73;--muted2:#6b6b70;--line:rgba(0,0,0,.10);--dark:#050506;--dark2:#0d0e11;--darkline:rgba(255,255,255,.12);--max:1280px;--gutter:clamp(18px,4vw,44px);--radius:34px;--ease:cubic-bezier(.2,.75,.2,1);--ease-out:cubic-bezier(.22,1,.36,1);--spring-soft:linear(0.0 0.0%, 0.0235 3.6%, 0.0822 7.1%, 0.1615 10.7%, 0.2512 14.3%, 0.3438 17.9%, 0.4343 21.4%, 0.5193 25.0%, 0.5969 28.6%, 0.6663 32.1%, 0.7271 35.7%, 0.7795 39.3%, 0.8241 42.9%, 0.8615 46.4%, 0.8924 50.0%, 0.9177 53.6%, 0.9381 57.1%, 0.9544 60.7%, 0.9673 64.3%, 0.9772 67.9%, 0.9849 71.4%, 0.9906 75.0%, 0.9948 78.6%, 0.9979 82.1%, 1.0 85.7%, 1.0014 89.3%, 1.0023 92.9%, 1.0027 96.4%, 1.0 100.0%);--spring-snap:linear(0.0 0.0%, 0.0239 3.6%, 0.0844 7.1%, 0.1678 10.7%, 0.2633 14.3%, 0.3629 17.9%, 0.4609 21.4%, 0.5535 25.0%, 0.638 28.6%, 0.7131 32.1%, 0.7783 35.7%, 0.8337 39.3%, 0.8797 42.9%, 0.9172 46.4%, 0.947 50.0%, 0.9701 53.6%, 0.9876 57.1%, 1.0003 60.7%, 1.0091 64.3%, 1.0149 67.9%, 1.0182 71.4%, 1.0197 75.0%, 1.0199 78.6%, 1.0191 82.1%, 1.0177 85.7%, 1.0159 89.3%, 1.0139 92.9%, 1.012 96.4%, 1.0 100.0%);--ease-standard:cubic-bezier(.2,.8,.2,1);--motion-fast:220ms;--motion-medium:500ms;--motion-slow:1150ms;--motion-cinematic:1200ms;--reveal-duration:var(--motion-slow);--reveal-delay:0ms;--reveal-shift:64px;--shadow:0 35px 100px rgba(0,0,0,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body.dark-page{background:var(--dark);color:#f5f5f7}body:has(.lightbox:not([hidden])){overflow:hidden}a{color:inherit;text-decoration:none}button,a{font:inherit}.skip{position:fixed;left:16px;top:16px;z-index:200;padding:11px 15px;border-radius:14px;background:#fff;box-shadow:0 8px 30px #0002;transform:translateY(-150%)}.skip:focus{transform:none}.progress{position:fixed;z-index:150;top:0;left:0;height:2px;width:0;background:#111;transform-origin:left}.dark-page .progress{background:#fff}.nav{position:fixed;z-index:140;top:14px;left:50%;width:min(calc(100% - 28px),1210px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 9px 8px 15px;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.68);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-radius:999px;box-shadow:0 10px 40px rgba(0,0,0,.07);transition:background .35s ease,box-shadow .35s ease}.nav.scrolled{background:rgba(255,255,255,.90);box-shadow:0 14px 55px rgba(0,0,0,.12)}.brand{font-weight:700;letter-spacing:-.045em;white-space:nowrap;display:inline-flex;align-items:center}.brand-mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;margin-right:8px;background:#0a0a0a;color:#fff;font-size:11px;letter-spacing:-.03em}.navlinks{display:flex;gap:2px;margin:auto}.navlinks a{padding:8px 12px;border-radius:999px;color:#5c5c61;font-size:13px;transition:color .2s,background .2s}.navlinks a:hover,.navlinks a.active{color:#000;background:rgba(0,0,0,.06)}.nav-actions{display:flex;gap:7px}.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;font-weight:650;font-size:13px;letter-spacing:-.01em;transition:transform .42s var(--spring-snap),background .22s,border-color .22s,box-shadow .22s}.pill:hover{border-color:rgba(0,0,0,.22);box-shadow:0 7px 20px rgba(0,0,0,.07)}.pill:active{transform:scale(.955);transition-duration:.12s;transition-timing-function:var(--ease-out)}.pill.primary{background:#0a0a0a;color:#fff;border-color:#0a0a0a}.pill.light{background:#fff;color:#111;border-color:#fff}.pill.arrowed::after{content:'↗';font-size:14px}.menu{display:none;border:0;background:transparent;width:44px;height:44px;border-radius:50%;cursor:pointer}.menu span,.menu span:before,.menu span:after{display:block;width:18px;height:2px;background:#111;border-radius:3px;content:"";margin:auto;transition:.22s}.menu span:before{transform:translateY(-6px)}.menu span:after{transform:translateY(4px)}.mobile-panel{display:none;position:fixed;z-index:130;top:72px;left:14px;right:14px;padding:8px;background:rgba(255,255,255,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--line);border-radius:26px;box-shadow:0 25px 70px rgba(0,0,0,.16)}.mobile-panel.open{display:block;animation:panelIn .38s var(--spring-soft) both}
@keyframes panelIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}.mobile-panel a{display:flex;padding:15px;border-radius:16px;font-weight:600}.mobile-panel a:hover{background:#f0f0f2}main{overflow-x:clip}.hero{min-height:96svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(84px,10svh,124px) var(--gutter) clamp(14px,2.6svh,40px);max-width:1440px;margin:auto;text-align:center}.eyebrow{font-size:11px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:750}.hero h1{font-size:min(clamp(4.8rem,13.2vw,12rem),15.5svh);line-height:.80;letter-spacing:-.095em;margin:clamp(8px,1.4svh,18px) 0 clamp(10px,1.8svh,22px);font-weight:700}.hero p.lead{font-size:min(clamp(1.16rem,2.1vw,1.65rem),3.2svh);line-height:1.27;letter-spacing:-.028em;color:#555;max-width:720px;margin:0 auto clamp(12px,2.2svh,28px)}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.hero-media{margin:clamp(6px,1.2svh,22px) auto 0;width:100%;max-width:1240px;flex:1 1 0;min-height:200px;display:grid;grid-template-rows:minmax(0,1fr);position:relative;isolation:isolate}.hero-media .tilt-inner{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);justify-items:center;transition:transform .25s var(--ease)}.hero-media img{width:auto;height:100%;min-height:0;max-width:100%;max-height:100%;object-fit:contain;display:block}.media-copy{position:absolute;z-index:2;left:clamp(20px,4vw,42px);bottom:clamp(20px,3.5vw,38px);text-align:left;color:#fff}.media-copy strong{display:block;font-size:clamp(1.35rem,2.8vw,2.2rem);letter-spacing:-.045em}.media-copy span{display:block;color:rgba(255,255,255,.67);font-size:12px;margin-top:5px}.stock-credit{position:absolute;z-index:3;right:20px;bottom:17px;font-size:10px;color:rgba(255,255,255,.58)}.section{padding:clamp(100px,13vw,190px) var(--gutter)}.section-inner{max-width:var(--max);margin:auto}.statement{max-width:1000px;margin:auto;text-align:center}.statement h2,.split h2{font-size:clamp(3.2rem,7.6vw,7.5rem);line-height:.91;letter-spacing:-.075em;margin:16px 0 26px}.statement p{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.55;color:var(--muted);max-width:700px;margin:0 auto}
.copy p{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.55;color:var(--muted);max-width:700px;margin:0}.dark{background:var(--dark);color:#f5f5f7}.dark .eyebrow,.dark p{color:#a1a1a6}.split{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(40px,8vw,120px);align-items:center}.split .copy{max-width:600px}.experience-photo{border-radius:var(--radius);aspect-ratio:1916/1197;max-height:700px;position:relative;overflow:hidden;background:#101216;box-shadow:0 40px 110px rgba(0,0,0,.34)}.experience-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* The picture drifts inside its frame, which is where depth comes from --
   the frame itself must not move, or the wipe moves with it. */
.experience-photo img[data-parallax]{will-change:transform;scale:1.08}.experience-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 66%,rgba(0,0,0,.6))}.photo-label{position:absolute;z-index:2;left:24px;bottom:22px;color:rgba(255,255,255,.78);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.feature-list{display:grid;margin-top:56px;border-top:1px solid var(--line)}.feature-row{display:grid;grid-template-columns:72px 1fr auto;gap:28px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line);transition:transform .55s var(--spring-soft),padding .55s var(--spring-soft)}.feature-row:hover{transform:translateX(8px);padding-left:8px}.feature-row h3{font-size:clamp(1.8rem,3vw,3rem);letter-spacing:-.05em;margin:0}.feature-row p{color:var(--muted);max-width:600px;margin:4px 0 0}.index{color:#6e6e73;font-size:12px;font-variant-numeric:tabular-nums}.arrow{font-size:28px;transition:transform .3s var(--ease)}.feature-row:hover .arrow{transform:translateX(5px)}.mockup{position:relative;border-radius:38px;background:radial-gradient(circle at 70% 10%,#313640 0,#15181e 42%,#07080a 100%);padding:24px;box-shadow:0 40px 110px rgba(0,0,0,.28);overflow:hidden}.mockup:before{content:"";position:absolute;width:45%;aspect-ratio:1;border-radius:50%;background:#fff1;filter:blur(55px);right:-8%;top:-25%}.mock-window{position:relative;border:1px solid rgba(255,255,255,.13);border-radius:23px;overflow:hidden;background:#101318;min-height:600px;box-shadow:0 30px 90px rgba(0,0,0,.48)}.windowbar{height:42px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:7px;padding:0 14px}.dot{width:8px;height:8px;border-radius:50%;background:#666}.mock-body{display:grid;grid-template-columns:220px 1fr;min-height:558px}.mock-sidebar{border-right:1px solid rgba(255,255,255,.08);padding:24px}.mock-sidebar b{display:block;color:#fff;font-size:12px;margin-bottom:22px}.mock-sidebar span{display:block;height:10px;width:80%;background:rgba(255,255,255,.09);border-radius:20px;margin:15px 0}.mock-content{padding:34px}.mock-content .hero-line{height:190px;border-radius:22px;background:linear-gradient(135deg,#353b45,#15181d);margin-bottom:18px}.mock-content .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mock-content .cards i{height:160px;border-radius:18px;background:rgba(255,255,255,.055);display:block;border:1px solid rgba(255,255,255,.06)}.showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.tile{min-height:390px;border-radius:30px;background:#fff;border:1px solid var(--line);padding:34px;position:relative;overflow:hidden}.tile.darktile{background:#101216;color:#fff;border-color:rgba(255,255,255,.08)}.tile.large{min-height:650px}.tile h3{font-size:2rem;letter-spacing:-.05em;margin:0}.tile p{color:var(--muted);max-width:420px}.tile.darktile p{color:#a1a1a6}.tile .mini-window{position:absolute;left:9%;right:9%;bottom:-6%;height:66%;border-radius:24px 24px 0 0;background:linear-gradient(145deg,#343a44,#111318);box-shadow:0 -30px 90px rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1)}.tile .mini-window:after{content:"";position:absolute;left:8%;right:8%;top:13%;height:42%;border-radius:14px;background:linear-gradient(135deg,#424955,#1a1d23)}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.gallery .shot{aspect-ratio:1916/1197;border-radius:24px;overflow:hidden;position:relative;background:#0c0b16;border:1px solid rgba(255,255,255,.1);cursor:zoom-in}.gallery .shot:first-child{grid-column:1/-1}.gallery .shot img{width:100%;height:100%;object-fit:cover;display:block}.gallery .shot:after{content:attr(data-caption);position:absolute;left:20px;bottom:16px;color:rgba(255,255,255,.72);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.gallery .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.72));pointer-events:none}.gallery .concept{cursor:default}.gallery .concept:after{content:"Concept interface"}.release{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding:clamp(30px,5vw,54px);border-radius:34px;background:#fff;border:1px solid var(--line);box-shadow:0 25px 80px rgba(0,0,0,.07)}.release h2{font-size:clamp(3rem,6vw,6.2rem);letter-spacing:-.07em;line-height:.88;margin:12px 0 18px}.release p{color:var(--muted);max-width:640px;margin:0}.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px;padding-top:25px;border-top:1px solid var(--line)}.meta small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}.meta strong{font-size:15px}.docs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.doc{padding:36px;border-radius:26px;background:#fff;border:1px solid var(--line);min-height:190px;transition:transform .55s var(--spring-soft),box-shadow .4s}.doc:hover{transform:translateY(-6px);box-shadow:0 25px 65px rgba(0,0,0,.08)}.doc h3{margin:16px 0 10px;font-size:1.55rem;letter-spacing:-.035em}.doc p{color:var(--muted);margin:0;max-width:520px}.faq{max-width:900px;margin:auto}.faq details{border-top:1px solid var(--line);padding:25px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-size:1.2rem;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';font-size:20px;font-weight:400;color:var(--muted)}.faq details[open] summary:after{content:'−'}.faq p{color:var(--muted);max-width:730px;margin:16px 0 0}.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,9vw,140px)}.about-layout h1{font-size:clamp(4rem,9vw,9.5rem);letter-spacing:-.085em;line-height:.82;margin:0}.about-layout p{font-size:clamp(1.15rem,2vw,1.45rem);color:var(--muted);line-height:1.45}.quote{padding:70px 0 0;font-size:clamp(2.2rem,4.5vw,4.6rem);line-height:1.01;letter-spacing:-.055em;max-width:1050px}.page-hero{padding:190px var(--gutter) 100px;max-width:var(--max);margin:auto}.page-hero h1{font-size:clamp(4.1rem,10.5vw,10rem);line-height:.82;letter-spacing:-.085em;margin:18px 0 25px}.page-hero p{font-size:clamp(1.2rem,2vw,1.55rem);color:var(--muted);max-width:780px;line-height:1.4}.dark-page .page-hero p{color:#a1a1a6}.section-note{font-size:12px;color:var(--muted);margin-top:18px}.dark .section-note,.dark-page .section-note{color:#85858c}.stock-source{font-size:11px;color:#6e6e73;margin-top:14px}.stock-source a{text-decoration:underline}.badge{display:inline-flex;padding:7px 10px;border-radius:999px;background:#ececf0;color:#555;font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.command{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;background:#111216;border:1px solid rgba(255,255,255,.1);border-radius:15px;color:#fff;margin-top:25px;max-width:580px}.command code{font:500 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#d7d7db;overflow:auto;white-space:nowrap}.copy-btn{border:1px solid rgba(255,255,255,.14);background:#1d1f24;color:#fff;border-radius:10px;padding:8px 11px;cursor:pointer;font-size:11px}.notfound{min-height:85vh;display:grid;place-items:center;text-align:center;padding:120px 24px}.notfound h1{font-size:clamp(4rem,12vw,10rem);letter-spacing:-.09em;margin:0}.notfound p{color:var(--muted)}footer{padding:85px var(--gutter) 30px;border-top:1px solid var(--line)}.footer-inner{max-width:var(--max);margin:auto}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:72px}.footer-grid h4{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 17px}.footer-grid a{display:block;margin:10px 0;color:#555}.footer-bottom{display:flex;justify-content:space-between;gap:20px;color:#6e6e73;font-size:12px;padding-top:22px;border-top:1px solid var(--line)}.lightbox{position:fixed;z-index:300;inset:0;background:rgba(0,0,0,.84);display:grid;place-items:center;padding:30px;backdrop-filter:blur(16px);animation:sheetIn .42s var(--ease-out) both}
.lightbox.is-closing{animation:sheetOut .26s var(--ease-out) both;pointer-events:none}
@keyframes sheetIn{from{opacity:0;backdrop-filter:blur(0px)}to{opacity:1;backdrop-filter:blur(16px)}}
@keyframes sheetOut{from{opacity:1}to{opacity:0}}.lightbox[hidden]{display:none}.lightbox img{max-width:min(1200px,94vw);max-height:86vh;object-fit:contain;border-radius:20px;box-shadow:0 30px 100px #0008;transform-origin:var(--from-x,50%) var(--from-y,50%);animation:sheetImg .52s var(--spring-soft) both}
.lightbox.is-closing img{animation:sheetImgOut .24s var(--ease-out) both}
@keyframes sheetImg{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes sheetImgOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.94)}}.lightbox button{position:absolute;right:24px;top:24px;width:46px;height:46px;border-radius:50%;border:1px solid #fff4;background:#fff1;color:#fff;cursor:pointer;font-size:24px}
@media(max-width:950px){.navlinks,.nav-actions{display:none}.menu{display:block;margin-left:auto}.split,.about-layout,.showcase{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.gallery .shot:first-child{grid-column:1/-1}.release{grid-template-columns:1fr}.meta{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.feature-row{grid-template-columns:55px 1fr}.feature-row .arrow{display:none}.mock-body{grid-template-columns:160px 1fr}.hero-media{margin-top:clamp(16px,2.6vh,30px)}}
@media(max-width:600px){.nav{top:10px;width:calc(100% - 20px)}.hero{padding-top:132px}.hero h1{font-size:clamp(4rem,24vw,6.4rem)}.hero-media{margin-top:clamp(14px,2.4vh,26px)}.media-copy{bottom:20px}.stock-credit{display:none}.section{padding:88px 18px}.statement h2,.split h2{font-size:clamp(3rem,15vw,5.2rem)}.gallery{grid-template-columns:1fr}.release{padding:28px;border-radius:26px}.meta{grid-template-columns:1fr 1fr;gap:24px 15px}.docs-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-bottom{display:block}.footer-bottom span,.footer-bottom a{display:block;margin-top:8px}.page-hero{padding:148px 18px 72px}.page-hero h1{font-size:clamp(4rem,20vw,7rem)}.mockup{padding:10px;border-radius:25px}.mock-window{min-height:430px}.mock-body{grid-template-columns:88px 1fr;min-height:388px}.mock-sidebar{padding:14px}.mock-content{padding:15px}.mock-content .hero-line{height:120px}.mock-content .cards{gap:8px}.mock-content .cards i{height:85px}.command{align-items:flex-start}.command code{white-space:normal;overflow-wrap:anywhere}.pill{min-height:46px}.lightbox{padding:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lightbox,.lightbox img,.mobile-panel.open{animation:none}.gallery .shot,.doc,.pill,.feature-row{transition:none}.doc:hover,.feature-row:hover{transform:none}.hero-media .tilt-inner{transition:none}}
@media(prefers-reduced-transparency:reduce){.nav,.mobile-panel{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}.lightbox{backdrop-filter:none}}
@media(prefers-contrast:more){.nav,.doc,.tile,.release{border:2px solid #000}.pill{border:2px solid currentColor}}
:focus-visible{outline:3px solid #555;outline-offset:3px}
.shot{font:inherit;text-align:left;padding:0;width:100%;color:inherit}.shot button{font:inherit}.shot:focus-visible{outline:3px solid #fff;outline-offset:4px}

.shot{border:0;background:transparent;cursor:zoom-in}.shot:disabled{cursor:default}


/* Antworten — the mascot is the launcher; clicking it opens a small chat panel. */
.antworten-root{--mascot-size:320px;position:fixed;left:0;top:0;z-index:1000;font-family:inherit;width:max-content}
.antworten-root[data-dragging] .antworten-launcher{transform:none!important;transition:none!important}
.antworten-root[data-dragging] .antworten-nav{opacity:.35}
.antworten-perch{position:relative;touch-action:none;cursor:grab}
.antworten-root[data-dragging] .antworten-perch{cursor:grabbing}
.antworten-perch[hidden]{display:none}
.antworten-launcher{border:0;padding:0;background:transparent;cursor:pointer;display:block;outline:none;border-radius:50%;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.antworten-launcher:hover{transform:translateY(-4px)}
.antworten-launcher:active{transform:translateY(-1px)}
.antworten-launcher:focus-visible{outline:2px solid #5c9dff;outline-offset:6px}
.antworten-launcher .mascot{width:var(--mascot-size)!important;height:var(--mascot-size)!important;filter:drop-shadow(0 18px 24px rgba(0,0,0,.22))}

/* Control bar under him. Always there, so nothing has to be discovered by hovering. */
.antworten-nav{display:flex;align-items:center;gap:2px;margin:calc(var(--mascot-size) * -.125) auto 0;position:relative;padding:3px;width:max-content;
  border:1px solid rgba(0,0,0,.07);border-radius:999px;background:rgba(255,255,255,.80);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 6px 20px rgba(0,0,0,.10)}
.antworten-nav button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;
  background:transparent;color:#6e6e73;cursor:pointer;transition:background .18s,color .18s}
.antworten-nav button svg{width:15px;height:15px;display:block}
.antworten-nav button:hover{background:rgba(0,0,0,.06);color:#111}
.antworten-nav button[aria-pressed="true"]{background:#0a0a0a;color:#fff}
.antworten-nav button:focus-visible{outline:2px solid #5c9dff;outline-offset:2px}

/* The way back once he is hidden. */
.antworten-show{width:38px;height:38px;padding:0;border:1px solid rgba(0,0,0,.08);border-radius:50%;
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#8b919a;cursor:pointer;opacity:.5;display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.10);transition:opacity .2s ease,transform .2s ease,color .2s}
.antworten-show svg{width:17px;height:17px;display:block}
.antworten-show[hidden]{display:none}
.antworten-show:hover{opacity:1;color:#111;transform:translateY(-2px)}

.antworten-chat{position:absolute;bottom:calc(100% + 12px);right:0;width:340px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(0,0,0,.09);border-radius:22px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:0 28px 70px rgba(0,0,0,.20);animation:antwortenIn .24s cubic-bezier(.2,.8,.2,1)}
.antworten-chat[hidden]{display:none}
.antworten-root[data-vside="top"] .antworten-chat{bottom:auto;top:calc(100% + 12px)}
.antworten-root[data-hside="left"] .antworten-chat{right:auto;left:0}
@keyframes antwortenIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.antworten-chat-head{display:grid;place-items:center;padding:12px 0 4px}
.antworten-chat-head .mascot{filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}


.antworten-log{flex:1;min-height:120px;max-height:min(46vh,340px);overflow-y:auto;padding:4px 14px 10px;display:flex;flex-direction:column;gap:8px}
.antworten-msg{max-width:86%;padding:8px 12px;border-radius:15px;font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.antworten-msg.bot{align-self:flex-start;background:#f0f0f3;color:#15161a;border-bottom-left-radius:5px}
.antworten-msg.you{align-self:flex-end;background:#0a0a0a;color:#fff;border-bottom-right-radius:5px}
.antworten-msg.typing{color:#5f6570;display:flex;gap:5px;align-items:center;min-height:19px}
.antworten-msg.typing span{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;
  animation:thinking 1.4s ease-in-out infinite}
.antworten-msg.typing .dot-b{animation-delay:.16s}
.antworten-msg.typing .dot-c{animation-delay:.32s}
@keyframes thinking{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* --- premium details, from the apple-design skill ------------------------
   Materials, not bars: the nav is a floating layer that content passes under,
   and the edge where they meet is a fade rather than a hairline. */
.nav{--nav-edge:0}
.nav.scrolled{--nav-edge:1}
.nav:after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,245,247,.55),rgba(245,245,247,0));
  opacity:var(--nav-edge);transition:opacity .35s var(--ease-out)}
.dark-page .nav:after{background:linear-gradient(180deg,rgba(5,5,6,.55),rgba(5,5,6,0))}
/* Vibrancy: text over a translucent material needs weight and a little tracking,
   flat grey dissolves into whatever scrolls beneath it. */
.nav.scrolled .navlinks a{letter-spacing:.005em}
.navlinks a{font-weight:560}
/* Tracking is size-specific: display type tightens, small type opens up. */
.eyebrow{letter-spacing:.17em}
.hero p.lead{letter-spacing:-.022em}
.section-note,.meta small{letter-spacing:.02em}
/* A press has to answer within a frame or two, everywhere -- not only on pills. */
.doc:active,.tile:active{transform:scale(.995)}
.gallery .shot{transition:transform .5s var(--spring-soft)}
.gallery .shot:active{transform:scale(.975);transition-duration:.12s;transition-timing-function:var(--ease-out)}
.antworten-msg.error{background:#fdecec;color:#8a2b2b}

.antworten-compose{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(0,0,0,.07)}
.antworten-compose input{flex:1;min-width:0;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:13px;outline:none}
.antworten-compose input:focus{border-color:rgba(0,0,0,.28)}
.antworten-compose button{width:38px;height:38px;flex-shrink:0;border:0;border-radius:50%;background:#0a0a0a;color:#fff;font-size:15px;cursor:pointer;transition:transform .15s}
.antworten-compose button:active{transform:scale(.93)}

@media (max-width:700px){
  .antworten-root{--mascot-size:140px}
  .antworten-chat{width:min(340px,calc(100vw - 28px))}
  .antworten-log{max-height:min(38vh,280px)}
}
@media (prefers-reduced-motion:reduce){
  .antworten-launcher,.antworten-chat,.antworten-nav button,.antworten-show{transition:none!important;animation:none!important}
}
@media (prefers-reduced-transparency:reduce){.antworten-chat{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}

.antworten-settings{border:0;padding:0;border-radius:24px;background:transparent;box-shadow:0 40px 110px rgba(0,0,0,.30)}
.antworten-settings::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.antworten-settings-card{width:min(400px,calc(100vw - 36px));padding:24px;border-radius:24px;background:#fff;display:grid;gap:14px}
.settings-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.settings-title strong{display:block;font-size:17px;letter-spacing:-.03em}
.settings-title span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.settings-title button{border:0;background:transparent;font-size:22px;line-height:1;color:#8b919a;cursor:pointer;padding:0 2px}
.antworten-settings-card label{display:grid;gap:6px;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.antworten-settings-card input{height:42px;padding:0 14px;border:1px solid var(--line);border-radius:13px;background:#fafafb;font:inherit;font-size:13px;text-transform:none;letter-spacing:normal;color:var(--ink);outline:none}
.antworten-settings-card input:focus{border-color:rgba(0,0,0,.30);background:#fff}
.antworten-settings-card p{margin:0;font-size:11px;line-height:1.5;color:var(--muted)}
.settings-actions{display:flex;justify-content:flex-end;gap:8px}
.settings-actions button{min-height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.settings-actions button.save{background:#0a0a0a;color:#fff;border-color:#0a0a0a}



/* --- Mobile: touch targets, safe areas, iOS input zoom --- */

/* 44x44 minimum wherever a finger is the input device. The icons stay the same
   size; only the hit area grows. */
@media (pointer:coarse){
  .antworten-nav{padding:2px}
  .antworten-nav button{width:44px;height:44px}
  .antworten-show{width:46px;height:46px}
  .antworten-compose button{width:44px;height:44px}
  /* iOS Safari zooms the whole page when a focused input is under 16px. */
  .antworten-compose input,.antworten-settings-card input{font-size:16px}
  .antworten-compose input{height:44px}
  .faq summary{padding:6px 0}
}

@media (max-width:950px){
  /* Footer links were 24px tall and stacked tight -- hard to hit, easy to mis-tap. */
  .footer-grid a{min-height:44px;display:flex;align-items:center;margin:0}
  .footer-bottom a{min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:44px;display:inline-flex;align-items:center}
}

/* Keep the fixed chrome clear of the notch and the home indicator. */
@supports (padding:env(safe-area-inset-bottom)){
  .nav{margin-top:env(safe-area-inset-top)}
  .mobile-panel{
    left:max(14px,env(safe-area-inset-left));
    right:max(14px,env(safe-area-inset-right));
    max-height:calc(100dvh - 90px - env(safe-area-inset-bottom));
    overflow-y:auto}
  footer{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
}

/* --- Scroll-driven motion -------------------------------------------------
   The scroll position is the timeline, not a fixed duration: scrub back up and
   the motion plays backwards, following the gesture instead of ignoring it.
   CSS scroll-driven animations run off the main thread, so none of this costs a
   scroll handler. Only transform and opacity are animated. Browsers without
   `animation-timeline` never enter this block and show the finished state. */
.word{display:inline-block;white-space:pre-wrap}

/* --- hero arrival -------------------------------------------------------
   The hero is already on screen when the page loads, so a scroll timeline can
   never play there: it starts at its end state. This is the one entrance that
   runs on load, in the reading order of the page, ending on the render. */
@media (prefers-reduced-motion:no-preference){
  .motion-on .hero .eyebrow,
  .motion-on .hero h1,
  .motion-on .hero p.lead,
  .motion-on .hero .actions,
  .motion-on .hero-media{
    animation:heroRise 1100ms var(--ease-out) both;
  }
  .motion-on .hero h1{animation-delay:90ms}
  .motion-on .hero p.lead{animation-delay:180ms}
  .motion-on .hero .actions{animation-delay:260ms}
  /* The render lands last and travels furthest, so the eye ends up on it. */
  .motion-on .hero-media{animation:heroMedia 1500ms var(--ease-out) 340ms both}

  @keyframes heroRise{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:none}
  }
  @keyframes heroMedia{
    from{opacity:0;transform:translateY(46px) scale(.965)}
    to{opacity:1;transform:none}
  }

  /* And it drifts away as you leave it behind, rather than simply scrolling off. */
  @supports (animation-timeline:view()){
    .scroll-driven .hero-media .tilt-inner{
      animation-name:heroDrift;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes heroDrift{
      from{transform:none;opacity:1}
      to{transform:translateY(-6vh) scale(.94);opacity:.55}
    }
  }
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){

    /* Media unfolds as it arrives -- the frame grows into place. */
    .scroll-driven [data-scrub="media"]{
      animation-name:mediaUnfold;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:view();
      animation-range:entry 4% cover 40%;
    }
    @keyframes mediaUnfold{
      from{transform:scale(.92) translateY(30px)}
      to{transform:none}
    }

    /* The photo inside drifts slower than its frame: depth without parallax
       jitter, because the image is over-scaled so the frame is never uncovered. */


    /* Display headings rise word by word. Each word starts a little later than
       the one before via its own animation-range, since animation-delay means
       nothing on a scroll timeline. */
    .scroll-driven [data-words] .word{
      animation-name:wordRise;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:view();
      animation-range:entry calc(2% + var(--i,0) * 8%) entry calc(40% + var(--i,0) * 8%);
      will-change:transform,opacity;
    }
    @keyframes wordRise{
      from{opacity:0;transform:translateY(.92em) rotate(2.2deg)}
      to{opacity:1;transform:none}
    }
  }
}

/* --- Product reveal ------------------------------------------------------
   A tall section whose contents pin to the viewport while you scroll past it.
   The product grows from a small card to full size and the captions hand off
   one to the next -- your scroll is the scrubber, so it reverses when you go
   back up. Without scroll-driven animations (or with reduced motion) none of
   the block below applies and the section is an ordinary one: product at full
   size, captions listed. Nothing depends on the animation to be readable. */
.stage{padding:clamp(100px,13vw,190px) var(--gutter);background:var(--dark);color:#f5f5f7}
.stage-pin{max-width:var(--max);margin:auto}
.stage-eyebrow{color:#a1a1a6}
.stage-product{margin:26px auto 0;width:min(1120px,100%)}
.stage-frame{margin:0;max-height:100%;display:grid}
/* The render keeps its own proportions and shrinks to whatever height the pinned
   row gives it. It is a cut-out with its own shadow, so it carries no frame,
   border or plate of ours -- any of those would show as a box around it. */
.stage-shot{display:block;margin:auto;width:100%;max-width:100%;max-height:100%;height:auto;
  object-fit:contain}
.stage-captions{margin-top:30px}
.stage-captions p{margin:0 0 8px;font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.045em;line-height:1.1}
.stage-note{margin-top:22px;color:#85858c}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){

    .scroll-driven .stage{
      height:340vh;padding:0;
      view-timeline-name:--stage;
      view-timeline-axis:block;
    }
    .scroll-driven .stage-pin{
      position:sticky;top:0;height:100svh;max-width:none;
      display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;
      justify-items:center;align-content:center;
      gap:clamp(10px,1.8vh,22px);padding:clamp(28px,5vh,64px) var(--gutter);overflow:hidden;
    }

    /* The product grows into place, then holds while the captions run. */
    .scroll-driven .stage-product{
      margin:0;align-self:center;justify-self:center;
      width:100%;height:100%;min-height:0;display:grid;place-items:center;
      transform-origin:50% 50%;
      animation-name:productGrow;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:--stage;
      animation-range:contain 0% contain 46%;
    }
    /* Scale alone carries the reveal. The panel holds a screenshot now, and a
       low starting opacity washes it out the same way it did the hero photo. */
    @keyframes productGrow{
      from{transform:scale(.36) translateY(7vh)}
      to{transform:scale(1) translateY(0)}
    }

    /* Captions stack in one slot and hand off, so the height never jumps. */
    .scroll-driven .stage-captions{display:grid;margin:0;min-height:1.2em}
    .scroll-driven .stage-captions p{
      grid-area:1/1;margin:0;text-align:center;
      animation-name:captionStep;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:--stage;
    }
    .scroll-driven .stage-captions p:nth-child(1){animation-range:contain 44% contain 64%}
    .scroll-driven .stage-captions p:nth-child(2){animation-range:contain 62% contain 82%}
    .scroll-driven .stage-captions p:nth-child(3){animation-range:contain 80% contain 100%}
    @keyframes captionStep{
      0%{opacity:0;transform:translateY(16px)}
      28%,72%{opacity:1;transform:none}
      100%{opacity:0;transform:translateY(-16px)}
    }

    /* The eyebrow and the disclaimer fade with the product rather than popping. */
    .scroll-driven .stage-eyebrow,.scroll-driven .stage-note{
      animation-name:stageChrome;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:--stage;
      animation-range:contain 0% contain 22%;
    }
    @keyframes stageChrome{from{opacity:0}to{opacity:1}}
    .scroll-driven .stage-note{margin:0;text-align:center}
  }
}

/* --- Reveal system --------------------------------------------------------
   One engine, eight behaviours, driven by data-reveal in the markup. The
   hidden state is scoped to .motion-on, which motion.js sets: if the script
   never runs, nothing is hidden and the page reads normally. Reduced motion
   never gets .motion-on either, so it skips straight to the final state. */
.motion-on [data-reveal]{
  opacity:0;
  will-change:opacity,transform;
  transition:opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay),
             transform var(--reveal-duration) var(--ease-out) var(--reveal-delay);
}
.motion-on [data-reveal="fade-up"]{transform:translateY(var(--reveal-shift))}
.motion-on [data-reveal="scale"]{transform:scale(.94)}
.motion-on [data-reveal="slide-left"]{transform:translateX(calc(var(--reveal-shift) * -1.5))}
.motion-on [data-reveal="slide-right"]{transform:translateX(calc(var(--reveal-shift) * 1.5))}
.motion-on [data-reveal="depth"]{transform:translateY(var(--reveal-shift)) scale(.97)}

/* Typography emerging from the atmosphere -- reserved for page headlines. */
.motion-on [data-reveal="blur"]{
  transform:translateY(calc(var(--reveal-shift) * 1.6));filter:blur(10px);
  transition:opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay),
             transform var(--reveal-duration) var(--ease-out) var(--reveal-delay),
             filter var(--reveal-duration) var(--ease-out) var(--reveal-delay);
}
/* An image revealed through a window rather than faded in. */
.motion-on [data-reveal="mask"]{
  clip-path:inset(11%);transform:scale(1.05);
  transition:opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay),
             transform var(--reveal-duration) var(--ease-out) var(--reveal-delay),
             clip-path var(--reveal-duration) var(--ease-out) var(--reveal-delay);
}

.motion-on [data-reveal].is-revealed{opacity:1;transform:none;filter:none;will-change:auto}
.motion-on [data-reveal="mask"].is-revealed{clip-path:inset(0%)}

/* Depth: three speeds, so the page reads as a shallow camera move rather than
   a set of independently sliding objects. The engine only writes the variable. */
.motion-on [data-parallax]{transform:translate3d(0,var(--parallax-y,0px),0)}
.motion-on [data-parallax][data-reveal]{transform:translate3d(0,var(--parallax-y,0px),0)}

@media print{
  [data-reveal],[data-words] .word,[data-scrub],.stage-captions p{
    opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .stage{height:auto!important}.stage-pin{position:static!important;height:auto!important}
  .antworten-root{display:none!important}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* Fit the product to the height it is given, not the other way round. The
       render is a cut-out, so it is sized by height and keeps its own ratio --
       without this it kept its full width and ran over the captions. */
    .scroll-driven .stage .stage-frame{
      height:100%;width:100%;margin:0;padding:0;display:grid;place-items:center;
    }
    .scroll-driven .stage .stage-shot{
      height:100%;width:auto;max-width:100%;max-height:100%;object-fit:contain;
    }
    .scroll-driven .stage-captions{align-self:end}
    .scroll-driven .stage-captions p{font-size:clamp(1.3rem,2.6vw,2.1rem)}
  }
}