:root{
  --bg:#f5f5f7; --surface:#ffffff; --text:#1c1c1e; --muted:#6e6e73;
  --accent:#007aff; --accent-2:#32ade6; --border:rgba(0,0,0,.08);
  --radius:18px; --maxw:820px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#000; --surface:#1c1c1e; --text:#f5f5f7; --muted:#98989d;
         --accent:#0a84ff; --accent-2:#64d2ff; --border:rgba(255,255,255,.12); }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* header */
header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(20px);
  background:color-mix(in srgb,var(--bg) 80%,transparent); border-bottom:1px solid var(--border)}
nav{display:flex; align-items:center; gap:8px; height:56px; max-width:var(--maxw); margin:0 auto; padding:0 20px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text); margin-right:auto}
.brand img{width:28px; height:28px; border-radius:7px}
nav a.link{padding:6px 10px; border-radius:8px; color:var(--muted); font-size:14px; font-weight:600}
nav a.link:hover{background:var(--border); text-decoration:none; color:var(--text)}
nav a.link[aria-current="page"]{color:var(--accent)}

/* hero */
.hero{text-align:center; padding:56px 0 40px}
.hero img.appicon{width:104px; height:104px; border-radius:24px; box-shadow:0 12px 32px rgba(0,0,0,.18)}
.hero h1{font-size:38px; line-height:1.15; margin:22px 0 8px; letter-spacing:-.02em}
.hero p.tag{font-size:18px; color:var(--muted); margin:0 auto 26px; max-width:34em}
.badge{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff;
  padding:12px 22px; border-radius:999px; font-weight:700; font-size:15px}
.badge:hover{text-decoration:none; opacity:.9}
.sub{font-size:13px; color:var(--muted); margin-top:14px}

/* content */
main{padding:8px 0 64px}
h2{font-size:22px; margin:34px 0 10px; letter-spacing:-.01em}
h3{font-size:17px; margin:22px 0 6px}
.page-title{font-size:32px; margin:40px 0 6px; letter-spacing:-.02em}
.updated{color:var(--muted); font-size:14px; margin:0 0 8px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; margin:18px 0}
ul{padding-left:22px} li{margin:6px 0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:26px 0}
.feat{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px}
.feat h3{margin:0 0 4px; font-size:16px}
.feat p{margin:0; color:var(--muted); font-size:14px}
.note{border-left:3px solid var(--accent); padding-left:14px; color:var(--muted)}
details{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 18px; margin:10px 0}
details summary{cursor:pointer; font-weight:650; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; float:right; color:var(--muted)}
details[open] summary::after{content:"–"}
details p{margin:10px 0 2px; color:var(--muted)}

/* footer */
footer{border-top:1px solid var(--border); padding:28px 0 44px; color:var(--muted); font-size:14px}
footer .row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
footer .row a{color:var(--muted)}
footer .spacer{margin-left:auto}
@media (max-width:560px){
  .hero h1{font-size:30px} .page-title{font-size:26px}
  nav a.link{padding:6px 7px; font-size:13px}
  .brand span{display:none}
}