:root { --theme:#178aff; --text:#2f2f2f; --muted:#b2b2b2; --line:#f2f2f2; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--text); background:#f8f8f8; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:#f8f8f8; }
button,a { font:inherit; }
.page { width:100%; min-height:100dvh; margin:0 auto; overflow:hidden; background:#fff; }
.status-bar { height:44px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; background:#1e1e1e; color:#fff; font-size:15px; font-weight:500; line-height:16px; }
.status-bar img { width:72px; height:12px; }
.hero { display:block; width:100%; height:auto; aspect-ratio:375/220; object-fit:cover; }
.content { padding:16px; display:flex; flex-direction:column; gap:16px; }
.app-summary { height:112px; display:flex; gap:16px; }
.app-icon { width:112px; height:112px; flex:0 0 auto; border-radius:20px; }
.app-copy { flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:500; }
h1 { font-size:20px; line-height:28px; }
.app-copy p,.section-title p,.step-heading p { color:var(--muted); font-size:14px; line-height:22px; }
.install-button { width:70px; height:32px; border:0; border-radius:46px; background:var(--theme); color:#fff; font-size:14px; font-weight:500; cursor:pointer; }
.install-button:active { transform:scale(.97); }
.install-button:disabled { opacity:.65; cursor:wait; }
.metrics { min-height:102px; padding:16px 0; display:grid; grid-template-columns:repeat(4,1fr); }
.metric { min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; white-space:nowrap; }
.metric+.metric::before { content:""; position:absolute; left:0; top:20px; width:1px; height:32px; background:var(--line); }
.metric span { color:var(--muted); font-size:10px; line-height:20px; }
.metric strong { font-family:"DIN Alternate","Arial Narrow",sans-serif; font-size:24px; line-height:22px; }
.stars { color:var(--theme)!important; font-size:10px!important; letter-spacing:1px; }
.stars i { color:var(--muted); font-style:normal; }
hr { width:100%; height:1px; margin:0; border:0; background:var(--line); }
.official { display:flex; flex-direction:column; align-items:center; gap:16px; }
.section-title { width:100%; text-align:center; }
.section-title h2 { font-size:20px; line-height:28px; }
.routes { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 8px; }
.routes a { height:40px; display:flex; align-items:center; justify-content:center; gap:4px; padding:0 4px; border:1px solid var(--theme); border-radius:20px; background:var(--theme); color:#fff; font-size:14px; line-height:22px; text-decoration:none; }
.routes a img { width:12px; height:12px; flex:0 0 auto; }
.routes a:active { opacity:.82; }
.tutorial { padding-top:16px; display:flex; flex-direction:column; gap:16px; }
.brand-tabs { height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; }
.brand-tabs[hidden] { display:none; }
.brand-tabs button { height:40px; padding:0 8px; position:relative; border:0; background:transparent; color:#bababa; font-size:14px; font-weight:500; cursor:pointer; }
.brand-tabs button.active { color:var(--text); font-weight:600; }
.brand-tabs button.active::after { content:""; position:absolute; left:50%; bottom:3px; width:16px; height:3px; border-radius:2px; background:var(--text); transform:translateX(-50%); }
.steps { width:calc(100% + 16px); display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.steps::-webkit-scrollbar { display:none; }
.steps.single-tutorial { justify-content:center; width:100%; }
.step { width:calc(100vw - 68px); flex:0 0 calc(100vw - 68px); display:flex; flex-direction:column; gap:16px; scroll-snap-align:start; }
.step-heading { height:67px; display:flex; align-items:center; gap:16px; }
.step-heading>strong { font-family:"DIN Alternate","Arial Narrow",sans-serif; font-size:48px; line-height:58px; }
.step-heading>div { width:238px; }
.step-heading h3 { font-size:20px; line-height:28px; }
.step-image { width:100%; aspect-ratio:307/426; overflow:hidden; position:relative; background:#f2f2f7; }
.step-image>img:first-child { position:absolute; left:0; width:100%; max-width:none; }
.step-one>img:first-child { top:-57.2%; width:100.27%; height:157.03%; }
.step-two>img:first-child,.step-three>img:first-child,.step-four>img:first-child { top:-.05%; height:156.68%; }
.step-image .pointer { position:absolute; width:13.03%; height:auto; }
.step-one .pointer { left:23.13%; top:53.52%; }
.step-two .pointer { left:44.95%; top:89.44%; }
.step-three .pointer { left:28.99%; top:63.38%; }
.step-four .pointer { left:82.74%; top:18.54%; }
.android-step-image { height:auto; aspect-ratio:auto; overflow:visible; background:transparent; }
.android-step-image>img:first-child { position:static; display:block; width:100%; height:auto; }
.toast { position:fixed; z-index:20; left:50%; bottom:max(32px,env(safe-area-inset-bottom)); max-width:calc(100vw - 40px); padding:10px 16px; border-radius:8px; background:rgba(0,0,0,.78); color:#fff; font-size:14px; line-height:20px; text-align:center; transform:translateX(-50%); }
.toast[hidden] { display:none; }

@media (min-width:600px) {
  body { padding-bottom:24px; }
  .page { max-width:480px; box-shadow:0 8px 32px rgba(0,0,0,.08); }
  .step { width:412px; flex-basis:412px; }
}