@font-face{font-family:Inter;src:url('/assets/Inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:light;--ink:#242424;--muted:#898985;--line:#e9e9e6;--paper:#fff}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-underline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #24242470;outline-offset:5px}img{display:block;max-width:100%}html:not([lang^=zh]) .zh,html[lang^=zh] .en{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;left:20px;z-index:9;background:white;padding:14px}.skip-link:focus{top:12px}
.hero{height:calc(100svh - 60px);min-height:500px;position:relative;display:grid;place-items:center;padding:72px 28px 120px}.hero-inner{width:min(100%,540px)}.hero-avatar{width:44px;height:39px;margin-bottom:30px;color:#242424;perspective:240px}.hero-avatar svg{width:100%;height:100%;overflow:visible}.focus-paragraph{margin:0;font-size:24px;line-height:1.7;font-weight:450;letter-spacing:-.7px;display:grid;gap:0}.focus-line{width:fit-content;max-width:100%;outline:none;border-radius:3px;transition:opacity .3s cubic-bezier(.23,1,.32,1),filter .3s cubic-bezier(.23,1,.32,1)}.focus-line[data-state=dim]{opacity:.42;filter:blur(.65px)}.focus-line:focus-visible{outline:1px solid #24242466;outline-offset:5px}.scroll-cue{position:absolute;bottom:68px;left:50%;padding:14px;transform:translateX(-50%);opacity:.35;transition:opacity .2s,translate .3s}.scroll-cue:hover{opacity:1;translate:0 4px}
.story{height:940svh;position:relative;margin-top:var(--preview-offset,0px)}.story-stage{height:100svh;position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:28px 72px 24px 104px;overflow:clip}.story-heading{display:flex;align-items:center;gap:24px;width:min(1200px,100%,calc((100svh - 190px)*1.6036));min-height:80px;visibility:hidden}.scene-copy{min-width:0}.scene-copy>span{display:block;font-size:9px;color:#969692;letter-spacing:.12em;font-weight:500;margin-bottom:10px}.story-heading h2{font-size:24px;line-height:1.25;letter-spacing:-.85px;font-weight:450;margin:0 0 9px}.story-heading p{font-size:12px;line-height:1.5;color:#92928d;margin:0}.demo-layout{position:relative;width:min(1200px,100%,calc((100svh - 190px)*1.6036));flex:none}.demo-capture{margin:0;width:100%;aspect-ratio:3560/2220;position:relative;overflow:hidden;border-radius:12px;background:#f5f6f4;box-shadow:0 0 0 1px #1717170a,0 24px 65px -35px #24242435;transform-origin:top center;isolation:isolate}.demo-capture img{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0;background:#fff}.capture-note{font-size:10px;color:#aaa9a6;width:min(1200px,100%,calc((100svh - 190px)*1.6036));display:flex;justify-content:flex-end;gap:16px;margin:0;visibility:hidden}.capture-note a{text-decoration:none}.capture-note a:hover{color:var(--ink)}
/* Four quiet chapters on one continuous track, not a scene chooser. */
.progress-rail{position:absolute;right:calc(100% + 22px);top:50%;transform:translateY(-50%);width:64px;height:216px;visibility:hidden;--progress:0}.progress-track{position:absolute;right:0;top:4px;bottom:4px;width:1px;background:#e8e8e5}.progress-track b{display:block;width:1px;height:100%;transform:scaleY(var(--progress));transform-origin:top;background:#43433f}.progress-chapters{position:absolute;inset:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between}.progress-chapters li{position:absolute;top:calc(var(--stop)*(100% - 8px));right:0;left:0;height:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:12px}.progress-chapters i{position:absolute;right:-2px;width:5px;height:5px;background:#e5e5e1;border-radius:50%}.progress-chapters span{font-size:9px;color:#b9b9b4}.progress-chapters li[data-active=true] span{color:#43433f}.progress-chapters li[data-active=true] i{background:#43433f;box-shadow:0 0 0 3px #fff}
.waitlist-section{min-height:85svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:min(540px,calc(100% - 56px));margin:auto;padding:140px 0 100px}.end-avatar{width:44px;height:39px;margin-bottom:28px;color:#242424}.waitlist-section h2{font-size:28px;line-height:1.35;font-weight:450;letter-spacing:-.9px;margin:0 0 15px}.waitlist-description{font-size:14px;color:var(--muted);line-height:1.7;margin:0 0 28px}form{width:100%;max-width:450px}.email-row{display:flex;border:1px solid #e3e3df;border-radius:9px;padding:5px;gap:8px;box-shadow:0 2px 3px #20202003}.email-row input{background:transparent;border:0;padding:10px;min-width:0;width:100%;font-size:13px;color:var(--ink);outline-offset:-1px}.email-row input::placeholder{color:#aaa9a5}.email-row button{display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;background:#242424;color:#fff;border:0;border-radius:6px;padding:12px 16px;font-size:12px;min-height:40px;transition:background .2s}.email-row button:hover{background:#444}.email-row button img{filter:invert(1)}.email-row button:disabled{opacity:.55;cursor:wait}.signup-note{font-size:10px;line-height:1.8;color:#aaa9a5;margin-top:15px}.signup-note a{color:#777772}#form-status{font-size:12px;line-height:1.6;color:#555;margin:12px 0 0;min-height:20px}.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}footer{max-width:1200px;margin:auto;padding:34px 28px;display:flex;align-items:center;gap:30px;border-top:1px solid #f0f0ed;color:#aaa9a5;font-size:10px}.footer-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#555;font-size:12px}footer nav{display:flex;gap:20px}footer nav a{text-decoration:none}footer small{margin-left:auto;font-size:9px}.noscript-note{max-width:540px;margin:0 auto 40px;font-size:13px}
@media(max-width:700px){.hero{padding-inline:32px;min-height:430px}.hero-inner{width:100%;max-width:400px}.focus-paragraph{font-size:22px}.hero-avatar{width:40px;height:35px}.story-stage{padding:28px 20px 28px 38px;gap:22px}.story-heading{gap:12px;min-height:112px;width:100%;align-items:flex-end}.story-heading h2{font-size:20px;letter-spacing:-.65px;max-width:270px}.story-heading p{font-size:11px;max-width:280px;min-height:33px}.scene-copy>span{font-size:8px}.demo-layout{width:100%}.demo-capture{border-radius:7px}.progress-rail{right:calc(100% + 13px);width:10px;height:120px}.progress-chapters span{display:none}.capture-note{width:100%;font-size:8px}.capture-note>span{max-width:220px}.waitlist-section{min-height:75svh;padding-block:100px 70px}.waitlist-section h2{font-size:25px}.email-row{gap:0}.email-row button{padding-inline:12px;font-size:11px}.email-row button img{display:none}footer{flex-wrap:wrap;gap:22px}footer small{width:100%;margin-left:0}.story{height:800svh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.focus-line[data-state=dim]{filter:none}}

.native-frame{position:absolute;inset:0;overflow:hidden;visibility:hidden;pointer-events:none}.native-frame[aria-hidden=false]{visibility:visible}.demo-capture .native-window{position:absolute;width:100%;height:100%;inset:0;object-fit:contain}.demo-capture .native-layer{position:absolute;inset:auto;max-width:none;object-fit:fill;background:transparent}.demo-capture .native-layer[hidden]{display:none}.demo-capture .native-layer.selection{left:12.35955%;top:4.23423%;width:87.64045%;height:95.76577%}.demo-capture .native-layer.panel{left:75.50562%;top:5.67568%;width:23.59551%;height:92.88288%;border-radius:1.2%}

/* One real browser frame rises into the hero; it becomes the scroll demo. */
.hero{height:calc(100svh - 92px)}
.hero-avatar{animation:hero-rise .38s cubic-bezier(.16,1,.3,1) .02s both}
.focus-line>span{display:block;animation:hero-rise .4s cubic-bezier(.16,1,.3,1) .13s both}
.focus-line:nth-child(2)>span{animation-delay:.24s}
.focus-line:nth-child(3)>span{animation-delay:.35s}
.demo-capture{animation:browser-rise .48s cubic-bezier(.16,1,.3,1) .7s both}
.scroll-cue{animation:cue-rise .24s ease-out 1.18s backwards}
@keyframes hero-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes browser-rise{from{opacity:0;translate:0 75px}to{opacity:1;translate:0 0}}
@keyframes cue-rise{from{opacity:0;translate:0 8px}to{opacity:.35;translate:0 0}}
@media(max-width:700px){.hero{height:calc(100svh - 75px)}}

/* The hero preview enters through normal page scrolling, with no parallax. */
.story,.story-stage{pointer-events:none}
.story[data-entered=true] .story-stage{pointer-events:auto;background:var(--paper)}
.story[data-entered=true] :is(.story-heading,.capture-note,.progress-rail){visibility:visible}

.demo-capture[data-entered=true]{animation:none}

/* Changes complete in time, so pausing the scroll never leaves text ghosted. */

.story-heading p{min-height:18px}
@media(max-width:700px){.story-heading p{min-height:33px}}

#waitlist-form[data-state=success] .email-row,#waitlist-form[data-state=success] .signup-note{display:none}
#waitlist-form[data-state=success] #form-status{font-size:16px;color:var(--ink);padding:20px 0;border-top:1px solid var(--line)}