:root{--g:#01875f;--gd:#056449;--ink:#202124;--sub:#5f6368;--line:#dadce0;--chip:#e6f4ea;--r:20px;font-family:"Google Sans",Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff}
*{box-sizing:border-box}body{margin:0;-webkit-tap-highlight-color:transparent}a{color:inherit}
img{display:block;max-width:100%}
.top{position:sticky;top:0;z-index:20;background:#fff;display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid transparent}
.top.sh{border-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:21px;color:#3c4043;white-space:nowrap}
.brand b{font-weight:500}.logo{width:34px;height:34px}
.tabs{display:flex;gap:4px;margin-left:12px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:12px 12px;font-size:15px;font-weight:500;color:var(--sub);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--g);border-color:var(--g)}
.grow{flex:1}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px 40px}
.chips{display:flex;gap:10px;padding:14px 0 6px;overflow-x:auto;scrollbar-width:none}
.chip{border:1px solid var(--line);border-radius:10px;padding:7px 14px;font-size:14px;color:#3c4043;background:#fff;white-space:nowrap;cursor:pointer;font:inherit;font-size:14px}
.chip.on{background:var(--chip);border-color:var(--chip);color:#0d652d;font-weight:500}
.spot{position:relative;margin:18px -16px 8px}
.track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 6px;scrollbar-width:none}.track::-webkit-scrollbar{display:none}
.card{flex:0 0 min(88%,520px);scroll-snap-align:start;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1024/560;background:#111;text-decoration:none;color:#fff}
.card img{width:100%;height:100%;object-fit:cover}
.card .tag{position:absolute;top:12px;left:12px;background:rgba(32,33,36,.82);color:#fff;font-size:13px;font-weight:500;padding:5px 10px;border-radius:8px}
.card .bot{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.card h3{margin:0 0 4px;font-size:20px;font-weight:500}.card p{margin:0 0 10px;font-size:14px;opacity:.9}
.card .row{display:flex;align-items:center;gap:10px}.card .row img{width:40px;height:40px;border-radius:10px}
.card .row small{display:block;opacity:.85;font-size:12px}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);font-size:22px;cursor:pointer;display:none;color:#3c4043}
.nav.r{right:6px}.nav.l{left:6px}@media(min-width:900px){.nav{display:block}}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--g);color:#fff;text-decoration:none;font-weight:500;font-size:14px;border-radius:999px;padding:10px 18px;border:0;cursor:pointer;white-space:nowrap;font-family:inherit}
.pill:hover{background:var(--gd)}.pill.o{background:#fff;color:var(--g);border:1px solid var(--line)}.pill.o:hover{background:#f6fafe}
.pill.big{font-size:15px;padding:12px 22px}
h2.sec{font-size:20px;font-weight:500;margin:26px 0 14px}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,150px));gap:18px}
.app{text-decoration:none;color:var(--ink)}.app img{width:100%;height:auto;aspect-ratio:1;border-radius:22%;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.app b{display:block;font-weight:400;font-size:14px;margin-top:8px;line-height:1.3}.app span{font-size:13px;color:var(--sub)}
.list{display:grid;gap:14px}@media(min-width:760px){.list{grid-template-columns:1fr 1fr}}
.li{display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;text-decoration:none;color:inherit}.li:hover{background:#f8f9fa}
.li img{flex:none;width:72px;height:72px;border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.2)}.li b{font-weight:500}.li span{display:block;font-size:13px;color:var(--sub)}
.badge{display:inline-block;font-size:12px;color:var(--sub);border:1px solid var(--line);border-radius:6px;padding:1px 6px;margin-right:4px}
.demo-band{margin-top:28px;border-radius:var(--r);background:linear-gradient(120deg,#e6f4ea,#f3e8fd);padding:20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.demo-band h3{margin:0 0 4px;font-weight:500}.demo-band p{margin:0;color:var(--sub);font-size:14px}
/* detail */
.hero{display:flex;gap:18px;align-items:flex-start;margin-top:20px}
.hero .ic{width:96px;height:96px;border-radius:22px;box-shadow:0 1px 4px rgba(0,0,0,.25);flex:none}
@media(min-width:760px){.hero .ic{width:200px;height:200px;border-radius:40px;order:2;margin-left:auto}}
.hero h1{margin:0;font-size:28px;font-weight:500;line-height:1.2}@media(min-width:760px){.hero h1{font-size:44px}}
.hero .dev{color:var(--g);font-weight:500;margin:6px 0 2px}
.stats{display:flex;gap:0;margin:18px 0;overflow-x:auto}.stats div{padding:0 18px;border-left:1px solid var(--line);text-align:center;white-space:nowrap}.stats div:first-child{border:0;padding-left:0}
.stats b{display:block;font-weight:500}.stats span{font-size:12px;color:var(--sub)}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.shots{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 0 6px;scrollbar-width:thin}
.shots button{flex:none;border:0;padding:0;background:none;cursor:zoom-in;scroll-snap-align:start;border-radius:12px;overflow:hidden}
.shots img{height:220px;width:auto;border-radius:12px;border:1px solid var(--line)}@media(min-width:760px){.shots img{height:300px}}
.about{max-width:760px;line-height:1.55;color:#3c4043}.about h2{color:var(--ink)}
.about ul{padding-left:20px}
footer{border-top:1px solid var(--line);margin-top:40px;padding:22px 16px;color:var(--sub);font-size:13px;text-align:center}
footer a{color:var(--sub);margin:0 8px}
/* custom dialog (never alert/confirm/prompt) */
.dlg{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;padding:16px}
.dlg.on{display:flex}.dlg img{max-height:86vh;max-width:96vw;border-radius:12px}
.dlg .x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:22px;cursor:pointer}
.dlg .pv,.dlg .nx{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:22px;cursor:pointer}.dlg .pv{left:10px}.dlg .nx{right:10px}
.sheet{background:#fff;border-radius:24px;max-width:420px;width:100%;padding:22px;text-align:center}
.sheet h3{margin:0 0 8px;font-weight:500;font-size:20px}.sheet p{color:var(--sub);margin:0 0 16px}
.sheet .acts{justify-content:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media(max-width:600px){.top{flex-wrap:wrap;padding-bottom:0}.tabs{order:3;width:100%;margin:0}.tabs a{padding:10px 12px}.card{flex-basis:90%}.card h3{font-size:18px}}
.hero .ic{height:auto}