@charset "UTF-8";
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/BarlowCondensed-ExtraLight.ttf") format("truetype");font-weight:200;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/BarlowCondensed-Light.ttf") format("truetype");font-weight:300;font-display:swap}
:root{color-scheme:dark;--bg:#111820;--fg:#e5e9ec;--muted:#a4b3bf;--line:#a4b3bf30;--width:1280px;--display:"Barlow Condensed",sans-serif;--mono:"SFMono-Regular",Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.7 system-ui,"PingFang SC",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
svg{width:20px;height:20px;fill:currentColor}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--fg);outline-offset:5px}
::selection{background:var(--fg);color:var(--bg)}
.svg-defs{position:absolute;width:0;height:0}
.site-header{max-width:var(--width);margin:auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;letter-spacing:1.1px;font:300 22px/1 var(--display)}
.brand img{width:40px;height:40px;border-radius:9px}
.site-header nav{display:flex;align-items:center;gap:24px;font-size:14px}
.site-header nav>a[href="#features"]{color:var(--muted)}
.site-header nav>a[href="#features"]:hover{color:var(--fg)}
.language-switch{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--fg);font:400 13px/1 var(--mono);transition:background .2s}
.language-switch:hover{background:#ffffff18}
.github-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;transition:background .2s}
.github-link svg{width:22px;height:22px}
.github-link:hover{background:#ffffff18}
.download{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 17px;background:var(--fg);color:var(--bg);font-size:14px;font-weight:500}
.download svg{width:18px;height:18px}
main{max-width:var(--width);margin:auto}
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:44px;align-items:start;padding:44px 32px 24px}
.hero-top{min-width:0;padding-top:54px}
.eyebrow{display:flex;align-items:center;gap:9px;font:400 11px/1.7 var(--mono);letter-spacing:.4px;color:var(--muted);margin:0 0 24px}
.eyebrow i,.demo-topline i{display:inline-block;width:5px;height:5px;background:var(--fg);border-radius:50%;flex:none}
h1{font:200 clamp(92px,8.5vw,112px)/.98 var(--display);letter-spacing:-.027em;margin:0;white-space:nowrap}
.hero-tagline{font-weight:300;font-size:17px;letter-spacing:.3px;margin:25px 0 0;line-height:1.8}
.hero-aside{margin-top:28px}
.hero-aside>p{color:var(--muted);font-size:16px;line-height:1.85;margin:0 0 23px}
.primary-action{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;background:var(--fg);color:var(--bg);font-size:14px;font-weight:500;transition:transform .2s}
.primary-action:hover{transform:translateY(-2px)}
.hero-aside>.primary-action{width:216px}
.release-detail{display:block;font-size:12px;color:var(--muted);line-height:1.8;margin-top:16px}
/* Quiet traveling strokes stay within the title column, clear of the movie. */
.spectrum-lines{position:absolute;left:0;top:0;width:36%;height:100%;fill:none;stroke:var(--fg);pointer-events:none;z-index:-1}
.spectrum-lines path{vector-effect:non-scaling-stroke;stroke-width:1}
.flow-tracks{opacity:.12}
.flow-pulses{opacity:.6}
.flow-pulses path{stroke-dasharray:26 760;animation:flow-pass 14s linear infinite}
.flow-pulses path:nth-child(2){animation-delay:-5s;animation-duration:17s}
.flow-pulses path:nth-child(3){animation-delay:-9s;animation-duration:12s}
.flow-pulses path:nth-child(4){animation-delay:-3s;animation-duration:19s}
.flow-pulses path:nth-child(5){animation-delay:-11s;animation-duration:16s}
@keyframes flow-pass{to{stroke-dashoffset:-786}}
.demo-wrap{position:relative;min-width:0}
.demo-stage,.demo-ui{position:relative}
.demo-stage{z-index:1}
.demo-ui{z-index:2}
.demo-topline{display:flex;justify-content:space-between;gap:10px;font:400 11px/1.7 var(--mono);letter-spacing:.2px;color:var(--muted);margin:0 0 12px}
.demo-topline>span{background:var(--bg)}
.demo-topline i{margin-right:8px}
.timecode{white-space:nowrap}
/* Only the lower screen/hardware fades; native notch pixels remain unfiltered. */
.device-fade{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 63%,rgba(0,0,0,.82) 73%,rgba(0,0,0,.25) 86%,transparent 98%);mask-image:linear-gradient(to bottom,#000 0%,#000 63%,rgba(0,0,0,.82) 73%,rgba(0,0,0,.25) 86%,transparent 98%)}
.macbook{position:relative;padding:8px 8px 22px;border:1px solid #939aab;border-radius:16px 16px 6px 6px;background:linear-gradient(100deg,#45424d,#100f15 8%,#222028 70%,#66636b);box-shadow:0 25px 48px #0005;isolation:isolate}
.screen{position:relative;overflow:hidden;aspect-ratio:1728/1117;background:#0d0e18;border-radius:8px 8px 2px 2px}
.screen video{display:block;width:155%;max-width:none;height:100%;object-fit:cover;object-position:50% 0;transform:translateX(-17.75%);pointer-events:none}
.laptop-base{height:15px;background:linear-gradient(#adaab4,#494650 50%,#222128);border-radius:3px 3px 50% 50% / 3px 3px 100% 100%;box-shadow:0 6px 12px #0009}
.laptop-base>div{width:14%;height:4px;background:#39363f;border-radius:0 0 8px 8px;margin:auto}
.demo-controls{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0 12px}
.chapters{display:flex;gap:4px}
.chapters button,#play-toggle{border:0;background:transparent;color:var(--muted);font-size:14px;min-height:44px;padding:7px 12px;border-radius:3px}
.chapters button[aria-pressed="true"]{background:#ffffff18;color:var(--fg)}
.chapters button:hover,#play-toggle:hover{color:var(--fg)}
#play-toggle{padding-right:0;white-space:nowrap}
.timeline{height:1px;background:var(--line)}
.timeline i{display:block;width:0;height:1px;background:var(--fg)}
.demo-caption{margin-top:12px;font-size:14px}
.demo-caption>span{display:block}
.demo-caption>span:last-child{color:var(--muted);font-size:12px;line-height:1.8;margin-top:5px}
.agent-band{border-block:1px solid var(--line);margin:30px 32px 0}
.agent-band>div{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;padding:21px 0;color:var(--muted);font:400 12px/1.7 var(--mono)}
/* Deep ink frames a quiet paper section; native UI keeps its original ink. */
.product-panel{--fg:#15116d;--muted:#505473;--line:#18146b26;background:#f4f4f0;color:var(--fg);margin:64px 32px 0;color-scheme:light}
.product-panel ::selection{background:var(--fg);color:#f4f4f0}
.features{padding:64px 48px 72px;scroll-margin-top:28px}
.section-label{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font:400 12px/1.7 var(--mono);letter-spacing:.4px}
.feature-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin:34px 0 46px}
h2{font-size:40px;font-weight:300;line-height:1.35;letter-spacing:-.8px;margin:0}
.feature-heading>p{color:var(--muted);font-size:16px;line-height:1.85;margin:0 0 5px}
.status-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-block:1px solid var(--line);margin:0 0 48px}
.status-gallery figure{display:flex;align-items:center;gap:14px;min-width:0;margin:0;padding:24px 16px;border-right:1px solid var(--line)}
.status-gallery figure:last-child{border-right:0}
.status-gallery img{display:block;flex:none;width:72px;height:72px;object-fit:contain;margin:0;background:#000;border-radius:18px}
.status-gallery figcaption{min-width:0;text-align:left;line-height:1.5}
.status-gallery figcaption span{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.status-gallery figcaption .status-name{margin-top:0;color:var(--fg);font-size:14px;font-weight:400}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.feature-grid>article{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:18px;min-width:0}
.feature-number{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:400 12px/1.7 var(--mono);letter-spacing:.4px}
.feature-number>i{width:5px;height:5px;border:1px solid var(--fg);transform:rotate(45deg)}
.native-still{aspect-ratio:1080/553;background:#0c0c0e;border:1px solid #121218;margin:28px 0 0;overflow:hidden}
.native-still img{display:block;width:100%;height:100%;object-fit:contain;object-position:top}
.feature-grid h3{font-size:22px;font-weight:300;line-height:1.45;letter-spacing:-.3px;margin:20px 0 12px}
.feature-grid p{flex:1;font-size:15px;line-height:1.85;color:var(--muted);margin:0}
.essentials{margin:0 48px;border-top:1px solid var(--line);padding:28px 0 64px}
.essentials>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:30px}
.essentials article>span{font:400 12px/1.7 var(--mono);letter-spacing:.4px;color:var(--muted)}
.essentials h3{font-size:22px;font-weight:300;line-height:1.45;margin:16px 0 10px}
.essentials p{font-size:15px;line-height:1.85;color:var(--muted);margin:0}
html[lang="en"] .feature-heading h2{font:200 64px/1.06 var(--display);letter-spacing:-.02em}
html[lang="en"] .product-panel h3{font:300 36px/1.1 var(--display);letter-spacing:-.015em}
.closing{padding:110px 32px 80px;text-align:center}
.closing>.eyebrow{justify-content:center}
.closing h2{font:200 clamp(64px,7.5vw,96px)/1 var(--display);letter-spacing:-.025em}
.closing>div{display:flex;justify-content:center;align-items:center;gap:24px;margin:30px 0 16px}
.closing .primary-action{width:216px}
.closing>p:last-child{font-size:12px;line-height:1.8;color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:20px;max-width:var(--width);margin:auto;padding:25px 32px;border-top:1px solid var(--line);font:400 11px/1.7 var(--mono);letter-spacing:.4px;color:var(--muted)}
@media(min-width:1051px) and (min-height:700px) and (prefers-reduced-motion:no-preference){.hero{min-height:calc(100svh - 76px)}}
@media(min-width:761px) and (max-width:1050px){
 .hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;padding-inline:24px}
 .hero-top{padding-top:20px}
 h1{font-size:clamp(64px,7.2vw,78px)}
 .eyebrow,.demo-topline{font-size:10px}
 .hero-aside>p{font-size:14px}
 .chapters{gap:0}
 .chapters button,#play-toggle{font-size:12px;padding-inline:8px}
 .feature-heading>p{max-width:330px}
 .feature-grid{gap:20px}
 .product-panel{margin-inline:24px}
 .features{padding-inline:32px}
 .essentials{margin-inline:32px}
 html[lang="en"] .feature-heading h2{font-size:54px}
 html[lang="en"] .product-panel h3{font-size:30px}
}
@media(max-width:760px){
 .site-header{padding:18px}
 .brand{font-size:20px;gap:9px}
 .brand img{width:32px;height:32px}
 .site-header nav{gap:8px}
 .site-header nav>a[href="#features"]{display:none}
 .download{padding:8px 12px}
 .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "demo" "aside";gap:24px;padding:28px 18px 20px}
 .hero-top{display:contents}
 .hero-copy{grid-area:copy}
 .hero-aside{grid-area:aside;margin:0}
 .eyebrow{font-size:11px;letter-spacing:0;margin-bottom:16px;line-height:1.7}
 h1{font-size:clamp(62px,19vw,110px);line-height:1;letter-spacing:-.025em}
 .hero-tagline{font-size:16px;line-height:1.8;margin-top:15px}
 .hero-aside>.primary-action{width:200px}
 .release-detail{font-size:12px;max-width:310px;margin-top:15px}
 .demo-wrap{grid-area:demo}
 .demo-topline{font-size:10px;letter-spacing:0;line-height:1.6}
 .demo-topline>span:first-child{max-width:225px}
 .demo-topline i{margin-right:4px;width:4px;height:4px}
 .macbook{padding:5px 5px 17px;border-radius:11px 11px 4px 4px}
 .screen{border-radius:7px 7px 1px 1px}
 .screen video{width:250%;transform:translateX(-30%)}
 .laptop-base{height:8px}
 .laptop-base>div{height:2px}
 .device-fade{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,rgba(0,0,0,.72) 78%,transparent 98%);mask-image:linear-gradient(to bottom,#000 0%,#000 65%,rgba(0,0,0,.72) 78%,transparent 98%)}
 .demo-controls{display:grid;grid-template-columns:1fr auto;gap:0}
 .chapters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;grid-column:1/-1}
 .chapters button{padding:6px 4px;min-width:0}
 #play-toggle{grid-column:2;padding:0;min-height:32px}
 .demo-caption>span:last-child{font-size:11px}
 .spectrum-lines{width:100%;height:260px;opacity:.65}
 .agent-band{margin:16px 18px 0}
 .agent-band>div{gap:12px 22px;padding:18px 0;font-size:11px}
 .product-panel{margin:40px 10px 0}
 .features{padding:40px 22px 30px}
 .section-label{font-size:11px}
 .section-label>span:last-child{display:none}
 .feature-heading{display:block;margin:22px 0 28px}
 h2{font-size:32px}
 .feature-heading>p{margin-top:20px}
 .status-gallery{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:38px}
 .status-gallery figure{flex-direction:column;gap:14px;padding:22px 10px;border-bottom:1px solid var(--line)}
 .status-gallery figure:nth-child(2){border-right:0}
 .status-gallery figure:nth-child(n+3){border-bottom:0}
 .status-gallery img{width:64px;height:64px;border-radius:16px}
 .status-gallery figcaption{text-align:center}
 .feature-grid{display:block}
 .feature-grid>article{padding:18px 0 28px}
 .native-still{margin:22px 0 0}
 .feature-grid h3{font-size:22px;margin-top:20px}
 html[lang="en"] .feature-heading h2{font-size:48px}
 html[lang="en"] .product-panel h3{font-size:32px}
 .essentials{margin:0 22px;padding:24px 0 12px}
 .essentials>div{display:block;margin-top:25px}
 .essentials article{margin-bottom:28px}
 .essentials h3{font-size:21px}
 .closing{padding:52px 18px}
 .closing h2{font-size:64px}
 .closing>div{gap:18px}
 .closing .primary-action{width:200px}
 footer{padding:22px 18px;font-size:10px}
 footer>span:last-child{text-align:right;max-width:185px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:380px){
 .brand{font-size:16px;gap:5px}
 .brand img{width:26px;height:26px}
 .site-header nav{gap:6px}
 .site-header .github-link,.language-switch{width:32px}
 .download{font-size:12px;padding-inline:10px}
 .download svg{width:17px;height:17px}
 .chapters button{font-size:12px;padding-inline:2px}
}