:root{
  --blue:#1B9AF2;--blue-deep:#0F6FB8;--blue-bg:#4A8DE9;--sky:#41C3F8;
  --ink:#16202B;--ink-2:#4B5866;--line:#E3E9EF;--paper:#FFFFFF;--paper-2:#F5F8FB;
  --measure:68ch;--radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
a{color:var(--blue-deep);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--blue)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}

/* header */
.top{border-top:4px solid var(--blue)}
.nav{max-width:960px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-decoration:none;font-size:17px}
.brand img{width:28px;height:28px;flex:none;display:block}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;font-size:15px}
.nav ul a{color:var(--ink-2);text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--ink)}

/* layout */
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.page{padding:40px 0 80px}
.prose{max-width:var(--measure)}
.prose h1{font-size:34px;line-height:1.15;letter-spacing:-.02em;margin:0 0 6px}
.prose .meta{color:var(--ink-2);margin:0 0 32px;font-size:15px}
.prose h2{font-size:21px;letter-spacing:-.01em;margin:40px 0 10px}
.prose h3{font-size:17px;margin:24px 0 6px}
.prose p,.prose li{color:var(--ink);}
.prose ul{padding-left:22px}
.prose li{margin:4px 0}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin:12px 0 20px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{font-weight:600;color:var(--ink-2)}
.prose .note{background:var(--paper-2);border-left:3px solid var(--blue);padding:12px 16px;border-radius:0 8px 8px 0}

/* home hero */
.hero{position:relative;overflow:hidden;background:var(--blue-bg);color:#fff;border-radius:var(--radius);padding:56px 40px;margin-top:8px}
.hero::before{content:"";position:absolute;inset:-40% -10% -40% auto;width:70%;
  background:repeating-radial-gradient(circle at 70% 50%,rgba(255,255,255,.14) 0 1px,transparent 1px 44px);pointer-events:none}
.hero h1{position:relative;font-size:40px;line-height:1.1;letter-spacing:-.025em;margin:0 0 12px;max-width:16ch}
.hero p{position:relative;font-size:18px;margin:0;max-width:44ch;color:rgba(255,255,255,.92)}

/* app list */
.apps{margin:40px 0 0;padding:0;list-style:none;display:grid;gap:16px}
.app{display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.app .icon{width:72px;height:72px;border-radius:17px;display:block;box-shadow:0 1px 3px rgba(22,32,43,.12)}
.app .icon svg{width:36px;height:36px}
.app h2{margin:0 0 4px;font-size:20px;letter-spacing:-.01em}
.app p{margin:0 0 12px;color:var(--ink-2)}
.app .links{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);margin-left:8px;vertical-align:middle;font-weight:500}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:40px}
.foot .wrap{padding:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.foot a{color:var(--ink-2)}

@media (max-width:600px){
  .hero{padding:40px 24px}
  .hero h1{font-size:30px}
  .app{grid-template-columns:56px 1fr;gap:14px}
  .app .icon{width:56px;height:56px;border-radius:13px}
  .prose h1{font-size:28px}
}
@media (prefers-reduced-motion:no-preference){a{transition:color .15s}}