:root{--ink:#14213D;--acc:#F59E0B;--teal:#0E9F8E;--bg:#F7F8FC}*{box-sizing:border-box}body{margin:0;font:16px/1.7 "Segoe UI",Roboto,system-ui,sans-serif;background:var(--bg);color:#26314d}
.hd{position:sticky;top:0;z-index:9;background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:22px;font-weight:700}.brand img{width:38px;height:38px;border-radius:8px;object-fit:cover}
#mb{background:none;border:0;padding:8px;cursor:pointer}#mb i{display:block;width:26px;height:3px;background:#fff;margin:5px 0;border-radius:2px;transition:.3s}
#mb.on i:nth-child(1){transform:translateY(8px) rotate(45deg)}#mb.on i:nth-child(2){opacity:0}#mb.on i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
#nav{position:absolute;top:100%;right:0;width:min(320px,100%);background:var(--ink);display:flex;flex-direction:column;max-height:0;overflow:hidden;transition:max-height .35s}
#nav.on{max-height:85vh;overflow:auto;box-shadow:0 12px 24px #0006}#nav a{color:#e8ecf7;text-decoration:none;padding:12px 20px;border-top:1px solid #ffffff18}#nav a:hover{background:var(--teal);color:#fff}
.hero{text-align:center;padding:32px 16px;background:linear-gradient(#14213D,#1f3563);color:#fff}.hl{width:110px;height:110px;border-radius:22px;object-fit:cover;background:#fff2}
h1{font-size:clamp(24px,5vw,38px);line-height:1.2;margin:14px 0}.row{display:flex;gap:12px;justify-content:center}.row .btn{flex:1;max-width:170px}
.btn{display:inline-block;padding:13px 22px;border-radius:10px;font-weight:700;text-decoration:none;text-align:center;color:#fff;margin:5px 0}.wide{display:block;max-width:352px;margin:10px auto}
.b1{background:var(--acc);color:#14213D}.b2{background:var(--teal)}.b3{background:#e5484d}.b4{background:#229ED9}.btn:hover{filter:brightness(1.1)}
main{max-width:860px;margin:auto;padding:24px 16px}.pt{color:var(--ink)}h2{color:var(--ink);margin-top:28px}a{color:#0b7a6d}.ill{width:100%;max-width:420px;display:block;margin:10px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.card{background:#fff;border-radius:12px;padding:14px;text-decoration:none;color:#26314d;border-left:5px solid var(--acc)}.card b{display:block;color:var(--ink)}
details{background:#fff;border-radius:10px;padding:12px 16px;margin:10px 0}summary{cursor:pointer;font-weight:700;color:var(--ink)}
.note{background:#fff6dc;border-left:5px solid var(--acc);padding:10px 14px;border-radius:8px}.code{background:#fff;padding:4px 10px;border:2px dashed var(--acc);border-radius:6px}.tg{text-align:center;margin-top:30px}
footer{background:var(--ink);color:#cfd7ea;padding:30px 16px 14px}.fw{max-width:1000px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
footer b{color:#fff;display:block;margin-bottom:6px}footer a{display:block;color:#cfd7ea;text-decoration:none;padding:3px 0}footer a:hover{color:var(--acc)}.cp{text-align:center;font-size:13px;border-top:1px solid #ffffff22;margin-top:24px;padding-top:12px}
a:focus-visible,button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{transition:none!important}}