:root{--bg:#0f1012;--card:#17181b;--fg:#ececea;--mut:#8d8f94;--line:#26282c;--acc:#7aa7ff}
@media(prefers-color-scheme:light){:root{--bg:#f6f6f4;--card:#fff;--fg:#17181b;--mut:#6a6d73;--line:#e3e3df;--acc:#2f5bd2}}
*{box-sizing:border-box}html{font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body{margin:0;background:var(--bg);color:var(--fg)}a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line)}header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:700;letter-spacing:.01em;color:var(--fg);font-size:1.05rem}.brand span{color:var(--acc)}
nav a{margin-left:20px;color:var(--mut);font-size:.95rem}nav a:hover{color:var(--fg);text-decoration:none}
.hero{padding:64px 0 36px}.hero h1{font-size:2.3rem;line-height:1.15;margin:0 0 12px;letter-spacing:-.01em}.hero p{color:var(--mut);max-width:560px;margin:0 0 24px}
.btn{display:inline-block;padding:10px 18px;border-radius:8px;border:1px solid var(--line);color:var(--fg);background:var(--card);font-size:.95rem}.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}.btn:hover{text-decoration:none;filter:brightness(1.08)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:12px 0 56px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}.card img{display:block;width:100%;aspect-ratio:8/5;object-fit:cover;background:var(--line)}
.card div{padding:10px 12px;font-size:.88rem}.card b{display:block;font-weight:600}.card small{color:var(--mut)}
h2{font-size:1.2rem;margin:36px 0 8px}.lead{color:var(--mut)}.note{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--mut);font-size:.92rem}
form{max-width:360px;margin:24px 0}label{display:block;margin:14px 0 4px;font-size:.88rem;color:var(--mut)}
input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:inherit}
#msg{margin-top:14px;font-size:.92rem;color:#e07a5f;min-height:1.4em}
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}pre{background:var(--card);border:1px solid var(--line);padding:12px 14px;border-radius:8px;overflow-x:auto}
footer{border-top:1px solid var(--line);color:var(--mut);font-size:.85rem;padding:22px 0 40px}footer .wrap{display:flex;gap:18px;flex-wrap:wrap}