:root{--bg:#fff;--fg:#1c1e21;--mut:#5f6872;--ac-base:#2e8555;--ac:var(--ac-base);--ac2:color-mix(in srgb,var(--ac) 12%,var(--bg));--bd:#e3e6ea;--sf:#f7f8fa}
[data-theme=dark]{--bg:#16181a;--fg:#e6e8ea;--mut:#9aa3ab;--ac:color-mix(in srgb,var(--ac-base) 68%,#fff);--bd:#2c3033;--sf:#1e2123}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#16181a;--fg:#e6e8ea;--mut:#9aa3ab;--ac:color-mix(in srgb,var(--ac-base) 68%,#fff);--bd:#2c3033;--sf:#1e2123}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.7 "Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--ac);color:#fff;padding:8px 16px;border-radius:999px;z-index:30}.skip:focus{left:12px}
.wrap{max-width:1100px;margin:0 auto;padding:40px 20px 64px}
.nav{position:sticky;top:12px;z-index:20;display:flex;align-items:center;gap:10px;max-width:1100px;width:calc(100% - 24px);margin:12px auto 0;padding:8px 10px 8px 18px;border:1px solid var(--bd);border-radius:999px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px)}
.nav.full{top:0;margin:0;width:100%;max-width:none;border-radius:0;border-width:0 0 1px;padding:10px max(20px,calc((100% - 1100px)/2))}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--fg);margin-right:auto}.brand:hover{text-decoration:none}
.nav nav{display:flex;gap:2px}
.nav nav a{padding:5px 14px;border-radius:999px;color:var(--fg);font-size:15px}.nav nav a:hover{background:var(--sf);text-decoration:none}
.nav nav a.on{background:var(--ac2);color:var(--ac);font-weight:600}
#mode,#menu{width:38px;height:38px;border-radius:50%;border:1px solid var(--bd);background:var(--bg);color:var(--fg);cursor:pointer;font-size:16px;flex:none}
#menu{display:none;place-content:center;gap:4px;padding:0}
#menu span{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.nav.open #menu span:nth-child(1){transform:translateY(6px) rotate(45deg)}.nav.open #menu span:nth-child(2){opacity:0}.nav.open #menu span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hero{display:flex;align-items:center;gap:48px;padding:64px 0 48px}
.hero .ht{flex:1;max-width:620px}
.hero h1{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.1;margin:0 0 14px;letter-spacing:-.03em}
.hero p{font-size:1.25rem;color:var(--mut);margin:0 0 26px}
.hero .hi{flex:0 0 min(42%,440px);aspect-ratio:4/3;object-fit:cover;border-radius:28px;border:1px solid var(--bd)}
.hero.center{flex-direction:column;text-align:center}.hero.center .ht{max-width:720px}.hero.center .hi{flex:none;width:min(100%,760px);aspect-ratio:16/9}
.btn{display:inline-block;padding:10px 24px;border-radius:999px;background:var(--ac);color:#fff;font-weight:600}.btn:hover{text-decoration:none;opacity:.9}
.sec{margin:0 0 20px;font-size:1.4rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.card{border:1px solid var(--bd);border-radius:20px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.cb h3{margin:0;font-size:1.15rem;line-height:1.35}.cb h3 a{color:var(--fg)}
.cb p{margin:0;color:var(--mut);font-size:15px;line-height:1.6}
.meta{color:var(--mut);font-size:14px}.meta.by{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.av{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}.av.sm{width:28px;height:28px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pill{padding:2px 12px;border-radius:999px;background:var(--ac2);color:var(--ac);font-size:13px;font-weight:600}.pill:hover{text-decoration:none;filter:brightness(.96)}
.tags.big .pill{font-size:16px;padding:6px 16px}
.lead{color:var(--mut);font-size:1.1rem;margin-top:-8px}
.doc{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px}
.prose{max-width:720px}
.prose h1{font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1.2;letter-spacing:-.02em;margin:0 0 10px}
.prose h2{margin:2em 0 .5em;font-size:1.6rem}.prose h3{margin:1.6em 0 .4em}
.prose .cover{width:100%;border-radius:20px;margin:24px 0}
.prose blockquote{margin:1.4em 0;padding:4px 20px;border-left:4px solid var(--ac);background:var(--sf);border-radius:0 12px 12px 0;color:var(--mut)}
.prose pre{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:16px;overflow:auto;font-size:14px}
.prose code{font-size:.9em}.prose :not(pre)>code{background:var(--sf);padding:2px 6px;border-radius:6px}
.prose table{border-collapse:collapse;display:block;overflow-x:auto}.prose th,.prose td{border:1px solid var(--bd);padding:8px 14px}
.prose hr{border:0;border-top:1px solid var(--bd);margin:2.4em 0}
.abox{display:flex;gap:16px;align-items:center;margin-top:40px;padding:18px 20px;border:1px solid var(--bd);border-radius:20px;background:var(--sf)}
.abox p{margin:2px 0 0;color:var(--mut);font-size:15px;line-height:1.5}.abox a{color:var(--fg)}
.toc{position:sticky;top:96px;align-self:start;font-size:14px;display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--bd);padding-left:16px}
.toc a{color:var(--mut)}.toc a:hover{color:var(--ac)}.toc .l3{padding-left:12px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.pager a{border:1px solid var(--bd);border-radius:16px;padding:12px 18px;color:var(--fg);font-weight:600;line-height:1.4}.pager a:hover{border-color:var(--ac);text-decoration:none}
.pager small{display:block;color:var(--mut);font-weight:400}.pager .r{text-align:right;grid-column:2}
.foot{border-top:1px solid var(--bd);padding:28px 20px;text-align:center;color:var(--mut);font-size:14px}
@media(max-width:900px){.doc{grid-template-columns:1fr}.toc{display:none}.hero{flex-direction:column;align-items:flex-start;padding-top:40px;gap:28px}.hero .hi{flex:none;width:100%}}
@media(max-width:820px){
 #menu{display:grid}
 .nav nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;gap:2px;padding:8px;background:var(--bg);border:1px solid var(--bd);border-radius:24px;box-shadow:0 12px 32px rgba(0,0,0,.14)}
 .nav.open nav{display:flex}.nav nav a{padding:12px 16px;font-size:16px}
 .nav.full nav{border-radius:0 0 20px 20px;top:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#menu span{transition:none}}