@font-face{font-family:"Wool Serif";font-style:normal;font-weight:700;font-display:swap;src:url("assets/noto-serif-sc-700.ttf") format("truetype")}
:root{color-scheme:light;--paper:#c3c3c3;--ink:#1c1c1c;--muted:#414141;--accent:#dc4523;--inverse:#c3c3c3;--tag:#d0d0d0;--ease:cubic-bezier(.16,1,.3,1);--serif:"Wool Serif","Source Han Serif SC","Songti SC",STSong,SimSun,serif;--sans:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;--scale:1;--left-x:0;--center-x:0;--right-x:0;--move-y:0}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;transition:background .6s var(--ease),color .6s var(--ease)}body.dark{color-scheme:dark;--paper:#1c1c1c;--ink:#c3c3c3;--muted:#b6b6b6;--inverse:#1c1c1c;--accent:#f38066;--tag:#2d2d2d}body.ending{background:#1c1c1c;color:#c3c3c3;--paper:#1c1c1c;--ink:#c3c3c3;--muted:#aaa;--inverse:#1c1c1c}::selection{background:var(--accent);color:var(--inverse)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none;text-underline-offset:5px}a:hover{text-decoration:underline}button:disabled{cursor:wait}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}svg{display:block;width:18px;height:18px;flex-shrink:0}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;left:20px;top:-100px;z-index:200;padding:12px;background:var(--ink);color:var(--paper)}.skip:focus{top:15px}
#app{position:fixed;inset:0;overflow:hidden;isolation:isolate}.design-canvas{position:absolute;left:0;top:0;transform-origin:0 0}.design-frame{position:absolute;top:0;width:1280px;height:100%}.site-header{position:absolute;left:20px;right:20px;top:20px;z-index:60;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;line-height:14px}.brand{display:block;width:26px;height:26px}.brand img{width:100%;height:100%;object-fit:contain}.site-header nav{display:flex;align-items:center;gap:20px}.site-header nav a,.site-header button{display:flex;align-items:center;gap:5px}.site-header svg{width:13px;height:13px}.site-header button{border:0;background:none;padding:4px 0;font:inherit}.site-header nav a:hover,.site-header button:hover{opacity:.6;text-decoration:none}
.scene{position:absolute;inset:0;visibility:hidden;pointer-events:none}.scene.active{visibility:visible}.copy{position:absolute;left:60px;top:0;width:376px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;translate:calc(var(--left-x)*-1px) calc(var(--move-y)*-1px)}.copy .app-mark{display:block;flex:none;width:40px;height:40px;border-radius:10px}.copy h1,.copy h2{font-family:var(--serif);font-weight:700;font-size:60px;line-height:1.22;letter-spacing:-.02em;margin:0;width:100%;text-wrap:balance}.title-line{display:block}.intro{font-size:22px;line-height:32px;margin:0 0 12px;width:100%;color:var(--ink)}.download-button{display:flex;align-items:center;justify-content:center;gap:10px;width:156px;min-height:53px;padding:9px 12px;background:var(--ink);color:var(--paper);border-radius:8px;pointer-events:auto;line-height:1.2;transition:translate .45s var(--ease)}.download-button:hover{translate:0 -2px;text-decoration:none}.download-button svg{width:24px;height:24px}.download-button span{display:flex;flex-direction:column;gap:3px;text-align:left;white-space:nowrap}.download-button small{font-size:10px;font-weight:400}.download-button strong{font-size:14px;font-weight:500}
.opening .copy{left:0;width:1280px;height:calc(100% - 173px);gap:22px}.opening .app-mark{width:60px;height:60px;border-radius:16px}.opening h1{font-size:120px;line-height:130px;letter-spacing:-.015em;width:auto}.opening .intro{display:flex;width:auto;font-size:24px;line-height:28px;margin:0 0 16px;align-items:center;white-space:nowrap}.underlined{position:relative;font-weight:600}.underlined::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#414cf4;transform:rotate(-1.6deg)}
.details{position:absolute;left:844px;top:0;width:376px;height:100%;display:flex;flex-direction:column;justify-content:center;gap:36px;translate:calc(var(--right-x)*-1px) calc(var(--move-y)*-1px)}.detail-track{display:flex;flex-direction:column;gap:36px}.details article h3{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.4;margin:0 0 8px;letter-spacing:-.01em}.details article p{font-size:16px;line-height:24px;margin:0;text-wrap:pretty}.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}.tags span{font-size:12px;line-height:20px;background:var(--tag);border-radius:30px;padding:6px 12px}.detail-pager{display:none}
.copy,.details article{opacity:0;transform:translateY(18px);filter:blur(8px);transition:opacity .32s,transform .5s,filter .32s}.scene.active .copy{opacity:1;transform:none;filter:none;transition:opacity .85s var(--ease) .1s,transform 1s var(--ease) .1s,filter .8s var(--ease) .1s}.scene.active .details article{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);transition-delay:.3s}.scene.active .details article:nth-child(2){transition-delay:.46s}.scene.active .details article:nth-child(3){transition-delay:.62s}.title-line{opacity:0;transform:translateY(.5em);transition:opacity .35s,transform .4s}.scene.active .title-line{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:.12s}.scene.active .title-line:nth-child(2){transition-delay:.2s}
.device-position{position:absolute;left:0;top:0;width:432px;height:903px;transform-origin:0 0;z-index:10;transition:none;will-change:transform}.device-position.title-transition{transition:transform 1.5s var(--ease)}.device-parallax{width:100%;height:100%;transform:translate3d(calc(var(--center-x)*-1px),calc(var(--move-y)*-1px),0);will-change:transform}.device-stage{position:relative;width:432px;height:903px;margin:0;transform-origin:50% 50%;filter:drop-shadow(0 20px 18px #00000035)}.device-stage>img{position:absolute;inset:0;display:block;width:432px;height:903px;object-fit:fill;user-select:none;-webkit-user-drag:none}.device-stage figcaption{position:absolute;left:-20px;right:-20px;top:calc(100% + 12px);text-align:center;font-size:11px;line-height:16px;color:var(--muted);white-space:nowrap;opacity:.85}.device-position.at-title figcaption{opacity:0}.device-position.at-end{opacity:0;pointer-events:none}
.replay{position:absolute;z-index:50;left:50%;top:50%;width:calc(150px*var(--replay-scale,1));height:calc(150px*var(--replay-scale,1));margin:calc(-75px*var(--replay-scale,1));border-radius:50%;border:0;background:var(--accent);color:var(--inverse);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:calc(16px*var(--replay-scale,1));opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .35s var(--ease),transform .5s var(--ease)}.replay svg{width:calc(22px*var(--replay-scale,1));height:calc(22px*var(--replay-scale,1))}.replay.visible{opacity:1;transform:scale(1);pointer-events:auto}.replay:hover{transform:scale(1.04)}.replay:active{transform:scale(.97)}
.chapter-nav{position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column}.chapter-nav a{position:relative;display:block;width:16px;height:17px}.chapter-nav a::before{content:"";position:absolute;inset:-5px -7px}.chapter-nav i{position:absolute;left:0;top:0;width:8px;height:1px;background:var(--ink);transition:width .5s var(--ease),height .5s var(--ease),background .5s}.chapter-nav a:first-child i,.chapter-nav a:last-child i,.chapter-nav [aria-current] i{width:12px;height:2px}.chapter-nav [aria-current] i{background:var(--accent)}.chapter-nav a:hover i{width:12px}.chapter-nav span{position:absolute;left:23px;top:-8px;white-space:nowrap;opacity:0;pointer-events:none;font-size:11px;padding:4px 6px;background:var(--paper);transition:opacity .2s}.chapter-nav a:hover span,.chapter-nav a:focus-visible span{opacity:1}.key-controls{position:absolute;left:20px;bottom:20px;width:20px;height:13px;z-index:60}.key-controls button{padding:0;border:0;position:absolute;background:var(--ink);width:6px;height:6px;transition:background .25s,transform .25s}.key-controls button::before{content:"";position:absolute;inset:-5px}.key-up{left:7px;top:0}.key-left{left:0;top:7px}.key-down{left:7px;top:7px}.key-right{left:14px;top:7px}.key-controls .on{background:var(--accent)}.key-controls .hit{transform:scale(1.35)}.demo-progress{position:absolute;top:0;left:0;right:0;height:3px;z-index:70;opacity:0;transition:opacity .5s;pointer-events:none}.demo-progress.playing{opacity:1}.demo-progress i{display:block;width:100%;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.final-content{position:absolute;left:240px;top:50%;width:800px;transform:translateY(-50%);text-align:center;opacity:0;transition:opacity .7s}.scene.active .final-content{opacity:1}.final-content>.download-button{width:800px;height:266px;gap:50px;border-radius:30px;background:#c3c3c3;color:#1c1c1c}.final-content>.download-button>svg{width:100px;height:100px}.final-content>.download-button small{font-size:32px}.final-content>.download-button strong{font-size:66px}.final-content>.download-button span{gap:13px}.final-content>p{font-family:var(--serif);font-size:28px;margin:30px 0 16px}.release-link{font-size:14px;display:inline-flex;align-items:center;gap:5px}.release-link svg{width:14px;height:14px}.final-links{margin-top:35px;display:flex;justify-content:center;gap:28px;font-size:14px}.final-links a,.final-links button{display:flex;align-items:center;gap:8px}.final-links button{background:none;border:0}.final-links svg{width:15px;height:15px}.final-links button:hover{text-decoration:underline}
.edge-blur{position:fixed;left:0;right:0;height:110px;pointer-events:none;z-index:40;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.edge-blur.top{top:0;mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}.edge-blur.bottom{bottom:0;mask-image:linear-gradient(transparent,#000);-webkit-mask-image:linear-gradient(transparent,#000)}#grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:100;mix-blend-mode:overlay;opacity:.18}
@media(min-width:600px) and (max-width:939px){.copy{left:calc(50% + 10px);width:calc(50% - 30px);height:auto;top:70px;gap:14px;align-items:flex-start;text-align:left}.copy h2{font-size:calc(60px*var(--compact));line-height:1.18}.copy .intro{font-size:calc(22px*var(--compact));line-height:1.5;margin:0}.copy .app-mark{width:calc(40px*var(--compact));height:calc(40px*var(--compact))}.copy .download-button{transform:scale(var(--compact));transform-origin:left top}.details{left:calc(50% + 10px);width:calc(50% - 30px);top:var(--details-top,380px);height:auto}.detail-track{gap:calc(24px*var(--compact))}.details h3{font-size:calc(24px*var(--compact))!important}.details p{font-size:max(12px,calc(16px*var(--compact)))!important;line-height:1.5!important}.tags{gap:3px;margin-top:7px}.tags span{font-size:11px;padding:3px 8px}.opening .copy{left:0;top:0;width:100%;align-items:center;text-align:center;height:calc(100% - 173px)}.opening h1{font-size:90px;line-height:1.15}.opening .intro{font-size:20px}.opening .download-button{transform:none}.final-content{left:5%;width:90%}.final-content>.download-button{width:100%;height:auto;min-height:200px}.final-content>.download-button strong{font-size:48px}}
@media(max-width:599px){.site-header{top:17px;left:17px;right:17px;font-size:11px}.site-header nav{gap:17px}.site-header nav>a:last-child{display:none}.brand{width:23px;height:23px}.chapter-nav{left:0}.chapter-nav a{width:6px;height:17px}.chapter-nav i,.chapter-nav a:first-child i,.chapter-nav a:last-child i,.chapter-nav [aria-current] i{width:6px}.chapter-nav span{left:12px}.key-controls{display:none}.copy{left:0;top:65px;width:100%;height:auto;padding:12px 20px 0;gap:12px;translate:none}.copy .app-mark{display:none}.device-parallax{transform:none}.copy h2{font-size:29px;line-height:38px;letter-spacing:0}.copy h2 .title-line{display:inline}.copy .intro{font-size:16px;line-height:24px;width:300px;margin-bottom:8px}.copy .download-button{width:150px;min-height:50px}.opening .copy{left:0;top:47px;width:100%;height:398px;padding:30px 20px;gap:20px;justify-content:center}.opening h1{font-size:68px;line-height:1.2;width:320px;letter-spacing:-.025em}.opening .intro{font-size:12px;line-height:16px;margin-bottom:8px;white-space:normal;flex-wrap:wrap;justify-content:center;gap:3px}.details{left:0;right:0;top:auto;bottom:35px;width:100%;height:auto;translate:none;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;gap:14px}.scene.finished .details{opacity:1;visibility:visible}.detail-track{flex-direction:row;gap:0;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}.detail-track::-webkit-scrollbar{display:none}.details article{flex:0 0 100%;scroll-snap-align:start;padding:0 30px;text-align:center}.details article h3{font-size:17px;line-height:26px;margin-bottom:3px}.details article p{font-size:12px;line-height:18px}.tags{justify-content:center;padding:0;margin-top:5px}.tags span{font-size:11px;line-height:16px;padding:4px 8px}.detail-pager{display:flex;justify-content:center;gap:8px;height:11px}.detail-pager button{position:relative;width:28px;height:1px;background:var(--ink);padding:0;border:0}.detail-pager button::before{content:"";position:absolute;inset:-8px -2px}.detail-pager [aria-pressed="true"]{height:3px;background:var(--accent)}.edge-blur{height:28px}.device-stage figcaption{font-size:12px}.final-content{width:calc(100% - 40px);left:20px}.final-content>.download-button{width:100%;height:125px;gap:18px;border-radius:14px}.final-content>.download-button>svg{width:45px;height:45px}.final-content>.download-button strong{font-size:25px}.final-content>.download-button small{font-size:14px}.final-content>.download-button span{gap:7px}.final-content>p{font-size:22px}.release-link,.final-links{font-size:12px}.final-links{gap:25px}.replay{width:38px;height:38px;margin:0;border-radius:50%;font-size:0;gap:0;opacity:0;transform:scale(.6)}.replay svg{width:18px;height:18px}.replay span{display:none}.replay.visible{opacity:.9}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important}.copy,.details{translate:none!important}.device-parallax{transform:none!important}.edge-blur{backdrop-filter:none}.replay{transition-duration:.15s!important}}

.device-caption{position:fixed;left:50%;transform:translateX(-50%);z-index:45;width:max-content;max-width:calc(100% - 28px);margin:0;font:11px/16px var(--sans);text-align:center;color:var(--muted);pointer-events:none}.device-caption[hidden]{display:none}@media(max-width:599px){.device-caption{font-size:11px}}
.device-frame{z-index:2;pointer-events:none}.device-screen{position:absolute;inset:1.6% 3.8% 1.6% 3.1%;border-radius:52px;overflow:hidden;isolation:isolate}.device-screen>.device-image{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transition:opacity .5s var(--ease);user-select:none;-webkit-user-drag:none}.device-screen>.incoming{opacity:0}.device-recording{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;background:#fafaf7;opacity:0;pointer-events:none;transition:opacity .2s}.device-recording.visible{opacity:1}