/* Kodeoff: native light product page. */
.demo-window { border: 1px solid #414039; border-radius: 15px; overflow: hidden; background: #191b1e; box-shadow: 0 26px 80px #0004, 0 1px 0 #ffffff0a inset; }
.demo-toolbar { height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #ffffff0a; background: #232427; padding: 0 16px; color: #a3a3a7; font-size: 10px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #68656a; }
.window-dots i:first-child { background: #af7067; }.window-dots i:nth-child(2) { background: #b99b61; }.window-dots i:nth-child(3) { background: #738a68; }
.demo-desktop { position: relative; padding: 69px 12px 20px; background: radial-gradient(ellipse at 50% 40%, #51433030, transparent 70%), linear-gradient(130deg,#232629,#1a1c1f); }
.demo-desktop::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(#ffffff45 .6px,transparent .6px); background-size: 14px 14px; pointer-events: none; }
.demo-file { position: absolute; top: 20px; left: 21px; display: flex; align-items: center; gap: 8px; color: #d5d1c9; font-size: 11px; }
.demo-file svg { color: #dfba80; width: 28px; height: 32px; }
.demo-file small { display: block; font-size: 9px; color: #989897; line-height: 1.5; }
.radial-stage { position: relative; width: var(--wheel); height: var(--wheel); margin: 0 auto; }
.radial-wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; filter: drop-shadow(0 10px 15px #0005); }
.radial-base, .radial-hl { position: absolute; inset: 0; border-radius: 50%; }
.radial-base { border: 1px solid #66615a; background: repeating-conic-gradient(from -18deg, transparent 0 35.6deg, #67635c 35.6deg 36deg), conic-gradient(from -18deg, #303136 0 36deg,#292b2f 36deg 72deg,#303136 72deg 108deg,#292b2f 108deg 144deg,#303136 144deg 180deg,#292b2f 180deg 216deg,#303136 216deg 252deg,#292b2f 252deg 288deg,#303136 288deg 324deg,#292b2f 324deg); }
.radial-base::after { content: ""; position: absolute; inset: -7px; border: 1px solid #a58d6233; border-radius: 50%; }
.radial-hl { background: conic-gradient(from -18deg, #f7bc634d 0 36deg,transparent 36deg); transform: rotate(var(--selected-angle,36deg)); transition: transform .22s ease; }
.radial-hub { position: absolute; inset: 37%; display: grid; place-items: center; border-radius: 50%; background: #212326; border: 1px solid #67615a; box-shadow: 0 0 0 5px #15161944; z-index: 2; }
.radial-hub svg { color: #d5c5ac; width: 29px; height: 29px; }
.radial-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--wheel) * -.365)) rotate(calc(-1 * var(--a))); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 57px; height: 51px; padding: 0; border: 0; color: #cac9c6; background: transparent; font-size: 11px; line-height: 1.3; z-index: 3; transition: color .15s; }
.radial-label svg { width: 19px; height: 19px; }
.radial-label span { white-space: nowrap; }
.radial-label.is-target { color: #ffdc9d; }
.radial-label:hover { color: #fff0ce; }
.demo-status { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; max-width: 100%; margin: 27px auto 0; color: #d7c19f; font-size: 10px; border-radius: 6px; border: 1px solid #5b4d36; background: #211e19; padding: 7px 12px; }
.demo-status-icon svg { width: 13px; height: 13px; }
.demo-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 15px; font-size: 9px; color: #aaa6a0; background: #1d1f21; border-top: 1px solid #ffffff09; }
.demo-footer > span:first-child { display: flex; gap: 7px; align-items: center; }
.demo-footer .status-dot { width: 4px; height: 4px; }
.demo-disclaimer { margin: 12px 0 0; text-align: center; font-size: 10px; color: #8c8b88; }

:root{color-scheme:light;--bg:#fbfbfd;--panel:#fff;--text:#1d2027;--muted:#6d7380;--line:#e1e5ec;--accent:#1768e9;--soft:#edf3fe;--wheel:320px;--radius:24px;--shadow:0 24px 64px #25426512}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
svg{display:block;width:24px;height:24px;flex-shrink:0}
h1,h2,h3,p{margin:0}
em{font-style:normal}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
::selection{background:var(--accent);color:white}
.skip{position:fixed;left:12px;top:-70px;z-index:100;background:var(--text);color:var(--bg);padding:12px}
.skip:focus{top:12px}
.site-head{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{max-width:1280px;padding:0 40px;margin:auto;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;font-size:24px;letter-spacing:-1px}
.nav-links{display:flex;gap:32px;font-size:13px;color:var(--muted)}
.nav-links a:hover{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:20px}
.nav-cta{font-size:12px;border:1px solid var(--line);border-radius:30px;padding:9px 18px;background:var(--panel)}
.menu-toggle{display:none;border:0;background:none;color:var(--text)}
.hero{overflow:hidden}
.hero-grid{max-width:1280px;padding:85px 40px 60px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}
.hero-grid>*{min-width:0}
.hero h1{font-size:clamp(46px,5.3vw,76px);line-height:1.15;letter-spacing:-3px;font-weight:650;margin-bottom:28px}
.hero-sub{font-size:17px;line-height:1.9;color:var(--muted);margin-bottom:30px}
.hero-cta{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:14px 24px;border-radius:30px;font-size:14px;font-weight:600;border:1px solid var(--line)}
.btn-primary{background:var(--accent);color:white;border-color:var(--accent)}
.btn-secondary{background:var(--panel);color:var(--text)}
.hero-note{font-size:11px;color:var(--muted);margin-top:16px}
.visual-wrap{position:relative;min-width:0}
.section{max-width:1280px;padding:96px 40px;margin:auto}
.section-head{margin-bottom:38px}
h2{font-size:clamp(30px,3.2vw,44px);line-height:1.35;letter-spacing:-1.5px;font-weight:600;margin-bottom:18px}
.section-head>p:last-child{font-size:14px;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feature-card{background:var(--panel);border:1px solid var(--line);padding:28px;border-radius:var(--radius);min-width:0;overflow:hidden}
h3{font-size:21px;letter-spacing:-.5px;font-weight:600;margin-bottom:10px}
.feature-card p{color:var(--muted);font-size:13px}
.feature-art{margin-top:36px;min-height:90px}
.app-art{display:flex;gap:10px;align-items:center;justify-content:center}
.app-art span{display:grid;place-items:center;width:64px;height:64px;background:var(--soft);color:var(--accent);border-radius:16px;font-size:23px}
.app-art span:nth-child(2){font-size:10px;transform:translateY(-10px)}
.path-art{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;border:1px solid var(--line);padding:16px;border-radius:12px;background:var(--bg)}
.path-art span{color:var(--accent)}
.edit-art{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.edit-art>span{display:flex;justify-content:space-between;padding:6px 12px;font-size:10px;color:var(--muted);border-bottom:1px solid var(--line)}
.edit-art code{display:block;padding:14px 12px;font-size:12px}
.edit-art code span{color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.steps b{font-size:38px;color:var(--accent);font-weight:400;display:block;margin-bottom:18px}
.steps p{font-size:13px;color:var(--muted)}
.privacy{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.privacy-copy article{margin-bottom:28px}
.privacy-copy h3{font-size:17px}
.privacy-copy p{font-size:13px;color:var(--muted)}
details{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 0;font-size:14px}
summary::-webkit-details-marker{display:none}
summary span{color:var(--accent)}
details[open] summary span{transform:rotate(45deg)}
details p{font-size:13px;color:var(--muted);padding:0 0 22px}
details a{font-size:12px;color:var(--accent);display:inline-block;margin-bottom:20px}
.release{text-align:center;background:var(--soft);max-width:1200px;border-radius:var(--radius);padding:70px 32px}
.release>p{color:var(--muted);font-size:15px;margin-bottom:28px}
.release small{display:block;margin-top:20px;font-size:11px;color:var(--muted)}
.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:70px}
.faq-list{border-bottom:1px solid var(--line)}
footer{max-width:1200px;border-top:1px solid var(--line);padding:28px 0 42px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:11px;color:var(--muted)}
footer .brand{font-size:20px;color:var(--text)}
.demo-window{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);border-radius:18px}
.demo-toolbar{background:var(--panel);color:var(--muted);border-color:var(--line)}
.demo-desktop{background:var(--soft);padding:77px 12px 23px}
.demo-desktop::before{opacity:.2;background-image:radial-gradient(var(--accent) .6px,transparent .6px)}
.demo-file,.demo-file svg{color:var(--text)}
.demo-file small{color:var(--muted)}
.radial-base{border-color:var(--line);background:repeating-conic-gradient(from -18deg,transparent 0 35.6deg,var(--line) 35.6deg 36deg),var(--panel)}
.radial-base::after{border-color:var(--line)}
.radial-wheel{filter:drop-shadow(0 14px 22px #14243b18)}
.radial-hl{background:conic-gradient(from -18deg,var(--accent) 0 36deg,transparent 36deg)}
.radial-hub{background:var(--panel);border-color:var(--line);box-shadow:0 0 0 5px var(--soft)}
.radial-hub svg{color:var(--accent)}
.radial-label{color:var(--muted);font-size:10px}
.radial-label:hover{color:var(--text)}
.radial-label.is-target{color:white}
.demo-status{color:var(--accent);background:var(--panel);border-color:var(--line);min-height:33px}
.demo-footer{color:var(--muted);background:var(--panel);border-color:var(--line)}
.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.demo-disclaimer{color:var(--muted);margin-bottom:0}
.native .site-head{background:#fbfbfdef;backdrop-filter:blur(16px)}
.native .hero-grid{display:flex;flex-direction:column;gap:42px;text-align:center;padding-top:64px;padding-bottom:42px}
.native .hero-copy{max-width:800px}
.native .hero h1{font-size:clamp(46px,5vw,72px);letter-spacing:-3px;line-height:1.18}
.native .hero h1 br{display:none}
.native .hero h1 em{display:block}
.native .hero-sub{font-size:17px;margin-bottom:24px}
.native .hero-sub br{display:none}
.native .hero-cta{justify-content:center}
.native .hero-note{margin-top:12px}
.native .visual-wrap{width:760px;max-width:100%}
.native .demo-desktop{padding:26px 12px 20px;background:radial-gradient(ellipse at 50% 100%,#c6dcff,transparent 65%),#eef3fb}
.native .demo-file{top:34%;left:6%;max-width:100px;flex-direction:column;align-items:flex-start}
.native .demo-file svg{width:40px;height:45px;color:var(--accent)}
.native .demo-status{position:absolute;right:20px;top:44%;max-width:145px;text-align:left;margin:0;padding:12px;font-size:10px}
.native .demo-footer{padding:10px 18px}
.native .section-head{text-align:center}
.native .feature-card{box-shadow:0 10px 30px #25426504}
.native .steps{text-align:center}
.native .privacy h2{max-width:400px}
.native .faq .section-head{text-align:left}
@media(min-width:1500px){.hero-grid{padding-top:100px;padding-bottom:80px}}
@media(max-width:1100px){:root{--wheel:290px}
.hero-grid{gap:35px}
.hero h1{font-size:58px}
footer{margin-left:40px;margin-right:40px}
.release{margin-left:40px;margin-right:40px}
.nav-links{gap:20px}
.feature-card{padding:23px}}
@media(max-width:850px){:root{--wheel:300px}
.nav{padding:0 24px;min-height:68px}
.nav-links{gap:16px;font-size:12px}
.hero-grid{grid-template-columns:1fr;gap:48px;padding:52px 32px}
.hero-copy{max-width:630px}
.hero h1{font-size:64px}
.visual-wrap{width:100%;max-width:600px;margin:auto}
.section{padding:66px 32px}
.feature-grid{gap:12px}
.feature-card{padding:20px}
.feature-card h3{font-size:18px}
.feature-card p{font-size:12px}
.feature-art{min-height:85px}
.app-art{gap:6px}
.app-art span{width:42px;height:50px;font-size:18px}
.path-art{padding:8px;font-size:9px}
.privacy,.faq{gap:35px}
.release{margin:0 32px}
.native .hero-grid{padding-left:32px;padding-right:32px}
.native .demo-status{right:12px;max-width:115px;font-size:9px}
.native .demo-file{left:3%;font-size:10px}
.native .hero h1{font-size:64px}
.native .hero-sub br{display:block}
footer{margin:0 32px}
.steps{gap:24px}}
@media(max-width:600px){:root{--wheel:278px}
.nav{padding:0 20px;gap:16px;flex-wrap:wrap;min-height:66px}
.brand{font-size:21px}
.nav-cta{font-size:10px;padding:7px 11px}
.nav-actions{gap:14px}
.menu-toggle{display:none;font-size:12px;padding:10px 0}
.js .menu-toggle{display:block}
.nav-links{width:100%;order:3;justify-content:space-between;padding:0 0 16px;font-size:12px}
.js .nav-links{display:none}
.js .menu-open .nav-links{display:flex}
.hero-grid{padding:43px 20px 34px;gap:40px}
.hero h1{font-size:48px;letter-spacing:-2px;margin-bottom:22px}
.hero-sub{font-size:14px;line-height:1.9;margin-bottom:24px}
.btn{font-size:12px;padding:12px 17px;gap:16px}
.hero-note{font-size:10px}
.demo-toolbar{padding:0 12px;font-size:9px}
.demo-desktop{padding-top:75px}
.demo-file{font-size:10px;left:17px}
.radial-label{font-size:9px;width:52px;height:46px;gap:4px}
.radial-label svg{width:17px;height:17px}
.demo-footer{font-size:8px;padding:10px}
.demo-disclaimer{font-size:9px}
.demo-status{font-size:9px;max-width:96%}
.section{padding:55px 20px}
.section-head{margin-bottom:28px}
h2{font-size:31px;letter-spacing:-1px}
.section-head>p:last-child{font-size:12px}
.feature-grid{grid-template-columns:1fr;gap:16px}
.feature-card{padding:25px}
.feature-card h3{font-size:21px}
.feature-art{margin-top:24px;min-height:80px}
.app-art span{width:64px;height:60px}
.app-art{gap:12px}
.path-art{font-size:12px;padding:18px}
.steps{grid-template-columns:1fr;gap:27px}
.steps article{display:grid;grid-template-columns:48px 1fr;gap:0 15px;align-items:center;text-align:left}
.steps b{grid-row:span 2;font-size:26px;margin:0}
.steps h3{font-size:18px;margin-bottom:4px}
.steps p{font-size:12px}
.privacy,.faq{grid-template-columns:1fr;gap:22px}
.privacy h2 br{display:none}
.privacy-copy article{margin-bottom:23px}
.privacy-copy p{font-size:12px}
.release{margin:0 20px;padding:45px 24px}
.release h2{font-size:31px}
.release>p{font-size:13px}
.release small{font-size:10px}
.faq .section-head{margin-bottom:0}
summary{font-size:13px;padding:20px 0}
details p{font-size:12px}
footer{margin:0 20px;padding:24px 0;gap:18px;flex-wrap:wrap;font-size:10px}
footer .brand{font-size:18px}
footer>span{margin-left:auto}
footer>a:last-child{width:100%}
.native .hero-grid{padding:42px 20px 28px;gap:32px}
.native .hero h1{font-size:44px;letter-spacing:-2px}
.native .hero-sub{font-size:14px}
.native .hero-sub br{display:block}
.native .demo-desktop{padding-top:72px;padding-bottom:18px}
.native .demo-file{position:absolute;top:18px;left:18px;max-width:none;flex-direction:row;align-items:center;text-align:left}
.native .demo-file svg{width:25px;height:29px}
.native .demo-status{position:relative;top:auto;right:auto;max-width:100%;font-size:9px;margin:24px auto 0;padding:7px 10px}
.native .privacy h2{max-width:none}
.native .section-head{text-align:left}
}
@media(max-width:360px){:root{--wheel:244px}
.hero h1,.native .hero h1{font-size:40px}
.nav{padding-left:16px;padding-right:16px;gap:10px}
.nav-actions{gap:10px}
.brand{gap:6px}
.hero-grid,.native .hero-grid{padding-left:16px;padding-right:16px}
.radial-label{font-size:8px;width:47px}
.radial-label svg{width:15px;height:15px}
.btn{padding:11px 14px;gap:10px}
.demo-footer>span:last-child{font-size:7px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Final homepage: quieter surfaces and descriptive product copy. */
.brand img{display:block;flex-shrink:0}.brand{letter-spacing:-.7px}.native .hero-grid{padding-top:56px;gap:32px}.native .hero h1{font-size:clamp(42px,4.8vw,64px);line-height:1.22;margin-bottom:24px}.native .hero-sub{font-size:16px;line-height:1.85}.native .hero-sub br{display:block}.native .hero-note{margin-top:15px}.native .demo-desktop{background:#f0f4fa}.demo-desktop::before{display:none}.demo-window{box-shadow:0 12px 40px #28456b0b}.demo-disclaimer{font-size:11px;margin-top:14px}.native .demo-file{font-size:10px}.native .demo-status{max-width:135px;box-shadow:none}.demo-status-icon{display:none}.btn{font-weight:500}.btn-primary:hover{background:#0e59cf}.btn-secondary{border-color:#dce1e9}.hero .btn-secondary{border:0;background:none;color:var(--accent)}.hero .btn-secondary:hover{text-decoration:underline}.section{padding-top:76px;padding-bottom:76px}.section-head h2{font-size:32px;font-weight:600;letter-spacing:-.7px}.feature-card{border-radius:16px;padding:26px;background:#f6f7f9;border:0}.native .feature-card{box-shadow:none}.feature-card h3{font-size:18px;letter-spacing:-.3px}.feature-card p{font-size:13px}.feature-art{min-height:78px;margin-top:28px}.app-art{gap:8px}.app-art span,.app-art span:nth-child(2){width:auto;min-width:65px;height:52px;padding:0 9px;font-size:11px;transform:none;background:white;border:1px solid var(--line);border-radius:10px;color:#4d5869}.path-art,.edit-art{background:white;border-color:var(--line);border-radius:9px}.path-art{font-size:10px;padding:13px}.usage{margin-top:46px;padding-top:30px;border-top:1px solid var(--line)}.usage>h3{font-size:17px;margin-bottom:24px}.native .steps{padding:0;margin:0;list-style:none;text-align:left;gap:25px}.steps li{display:flex;gap:13px;align-items:flex-start;min-width:0}.steps b{width:26px;height:26px;display:grid;place-items:center;flex-shrink:0;font-size:12px;line-height:1;background:#edf1f6;color:#606e82;border-radius:50%;margin:0}.steps h3{font-size:14px;margin:1px 0 5px;letter-spacing:0}.steps p{font-size:12px}.usage-note{font-size:12px;color:var(--muted);margin:24px 0 0;max-width:75em}.technical-details{margin-top:24px;border-bottom:1px solid var(--line)}.technical-details summary{font-size:13px;justify-content:space-between}.technical-details summary span{font-size:15px}.table-wrap{width:100%;overflow-x:auto;padding-bottom:20px;-webkit-overflow-scrolling:touch}.table-wrap table{width:100%;min-width:540px;border-collapse:collapse;font-size:12px;text-align:left;line-height:1.8}.table-wrap td,.table-wrap th{padding:12px;vertical-align:top;border-bottom:1px solid var(--line)}.table-wrap th{font-weight:500;background:#f5f7fa}.table-wrap td:first-child{min-width:120px;color:var(--text)}.table-wrap td{color:var(--muted)}.security-note{padding-bottom:18px;font-size:12px}.security-note strong{font-weight:500}.security-note p{padding:0;margin-top:7px;font-size:12px}.sharing{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.45fr;gap:70px}.native .sharing .section-head{text-align:left;max-width:360px}.channel-list article{display:grid;grid-template-columns:155px 1fr;gap:24px;padding:23px 0;border-bottom:1px solid var(--line)}.channel-list article:first-child{padding-top:0}.channel-list h3{font-size:16px;margin-bottom:5px}.channel-list p{font-size:13px;color:var(--muted);margin:0}.availability{font-size:10px;color:#366651}.availability.pending{color:var(--muted)}.section-description{font-size:14px;color:var(--muted);max-width:32em}.privacy{border-top:1px solid var(--line);gap:70px;grid-template-columns:1fr 1.45fr}.privacy h2{font-size:32px;letter-spacing:-.7px}.privacy-copy .technical-details{margin:0}.privacy-copy{min-width:0}.privacy-copy article{margin-bottom:20px}.platforms{padding-top:32px}.native .platforms .section-head{text-align:left;margin-bottom:28px}.platform-list{display:grid;grid-template-columns:1fr 1fr;gap:50px;border-top:1px solid var(--line);padding-top:25px}.platform-list h3{font-size:17px}.platform-list p{font-size:13px;color:var(--muted);max-width:38em}.release{background:#f2f5fa;border-radius:20px;padding:50px 30px}.release h2{font-size:34px}.release .download-help{font-size:11px;margin:20px 0 0}.download-help a{color:var(--accent);white-space:nowrap}.faq{grid-template-columns:1fr 1.45fr}.faq h2{font-size:32px}.faq-list summary{font-size:13px}.footer-links{display:flex;gap:24px}footer{font-size:11px}.muted{color:var(--muted)}
/* 404：短页在导航与 footer 之间垂直居中；标题对齐 section 字阶（34px，≤600px 随 h2 系降到 27px）。 */
.error{min-height:62vh;display:flex;align-items:center}
.error h1{font-size:34px;font-weight:600;letter-spacing:-.7px}
.error .muted{max-width:34em;margin:12px 0 26px}
@media(max-width:900px){.sharing,.privacy,.faq{gap:35px}.channel-list article{grid-template-columns:115px 1fr;gap:18px}.feature-card{padding:21px}.app-art span,.app-art span:nth-child(2){min-width:0;font-size:9px;padding:0 8px}.section-head h2{font-size:29px}.section{padding-top:60px;padding-bottom:60px}}
@media(max-width:600px){.native .hero-grid{padding-top:39px;gap:31px}.native .hero h1{font-size:40px;letter-spacing:-1.8px}.native .hero-sub{font-size:13px}.native .hero-note{font-size:10px}.native .hero-cta{gap:9px}.btn{padding:12px 17px;font-size:12px}.native .demo-status{max-width:100%;font-size:9px;padding:7px 10px}.demo-disclaimer{font-size:9px}.section{padding-top:48px;padding-bottom:48px}.section-head h2,.privacy h2,.faq h2{font-size:27px;line-height:1.45}.error h1{font-size:27px}.feature-card{padding:23px}.feature-art{margin-top:22px}.app-art span,.app-art span:nth-child(2){min-width:65px;font-size:11px}.path-art{font-size:11px;padding:16px}.usage{margin-top:30px;padding-top:24px}.steps{gap:20px}.steps li{gap:14px}.steps b{width:24px;height:24px;font-size:11px}.steps h3{font-size:14px}.steps p{font-size:12px}.usage-note{font-size:11px;line-height:1.9;margin-top:22px}.technical-details summary{font-size:12px}.sharing,.privacy,.faq{grid-template-columns:1fr;gap:20px}.native .sharing .section-head{margin-bottom:0}.channel-list article{grid-template-columns:95px 1fr;gap:18px;padding:20px 0}.channel-list article:first-child{padding-top:10px}.channel-list p{font-size:12px}.channel-list h3{font-size:14px}.section-description{font-size:13px}.privacy-copy h3{font-size:16px}.platform-list{grid-template-columns:1fr;gap:24px}.platforms{padding-top:20px}.platform-list p{font-size:12px}.release{padding:40px 23px}.release h2{font-size:29px}.release .download-help{font-size:10px}.footer-links{width:100%;gap:24px}footer>span{margin-left:auto}}
@media(max-width:360px){.native .hero h1{font-size:35px}.native .hero-sub{font-size:12px}.hero .btn{padding:11px 13px;font-size:11px}.channel-list article{grid-template-columns:83px 1fr;gap:15px}.section-head h2{font-size:25px}}
/* Preview controls change the wheel, independently of the page theme. */
.demo-themes{display:flex;gap:2px;border:1px solid var(--line);border-radius:6px;padding:2px;background:var(--soft)}.demo-themes button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:10px;padding:3px 9px;border-radius:4px}.demo-themes button[aria-pressed=true]{background:var(--panel);color:var(--text);box-shadow:0 1px 3px #0001}
.demo-window.theme-dark{--text:#edf4ff;--muted:#b0bdce;--line:#344659;--panel:#152130;--soft:#182535;--accent:#1768e9;background:#152130;border-color:#344659;color:#edf4ff}.native .demo-window.theme-dark .demo-desktop{background:#0e131b}.demo-window.theme-dark .radial-base{background:repeating-conic-gradient(from -18deg,transparent 0 35.6deg,#435162 35.6deg 36deg),#1b2532}.demo-window.theme-dark .radial-hub{background:#0a121c}.native .demo-window.theme-dark .demo-file svg{color:#b8d4fb}.demo-window.theme-dark .demo-status{color:#d4e4fc}.demo-window.theme-dark .demo-toolbar,.demo-window.theme-dark .demo-footer{background:#192638}
@media(max-width:600px){.demo-themes button{font-size:9px;padding:3px 7px}.demo-toolbar{gap:5px}.demo-toolbar>span:nth-child(2){font-size:8px}.demo-disclaimer{max-width:310px;margin-left:auto;margin-right:auto}}

/* Frosted preview: the desktop stays visible through the wheel. */
.native .demo-window.theme-glass .demo-desktop{background:radial-gradient(ellipse at 70% 20%,#aac8e5,transparent 60%),radial-gradient(ellipse at 20% 85%,#c3dcd1,transparent 65%),#e7edf4}
/* A filter on the wheel creates a backdrop root and blocks desktop sampling. */
.demo-window.theme-glass .radial-wheel{filter:none;box-shadow:0 14px 28px #28445b20}
.native .demo-window.theme-glass .demo-desktop::before{display:block;opacity:1;background:linear-gradient(145deg,transparent 0 40%,#86aaca55 40% 53%,transparent 53%),linear-gradient(35deg,transparent 0 55%,#ffffff65 55% 70%,transparent 70%);background-size:auto;pointer-events:none}
.demo-window.theme-glass .radial-base{background:repeating-conic-gradient(from -18deg,transparent 0 35.6deg,#ffffff85 35.6deg 36deg),#ffffff30;backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);border-color:#ffffffc9;box-shadow:inset 0 1px 2px #fff9,0 12px 32px #27425b18}
.demo-window.theme-glass .radial-base::after{border-color:#ffffffa0}
.demo-window.theme-glass .radial-hub{background:#ffffff70;border-color:#fff9;box-shadow:0 0 0 5px #ffffff25}
@media(prefers-reduced-transparency:reduce){.demo-window.theme-glass .radial-base,.demo-window.theme-glass .radial-hub{background:#edf3f8}}