:root{color-scheme:light;--text:#1f1147;--background:#f7f5fb;--surface:#ffffff;--muted:rgba(31,17,71,.65);--border:rgba(31,17,71,.08);--border-strong:rgba(31,17,71,.16);--accent-from:#7c3aed;--accent-to:#a78bfa;--link:#7c3aed;--tag-bg:rgba(124,58,237,.12);--tag-fg:#5b21b6;--tag-border:rgba(124,58,237,.28);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.7}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100vh;background:radial-gradient(140% 140% at 10% 0%,color-mix(in oklab, var(--accent-from) 22%, transparent),transparent 50%),radial-gradient(100% 100% at 90% 10%,color-mix(in oklab, var(--accent-to) 18%, transparent),transparent 55%),linear-gradient(180deg,#fff,var(--background));color:var(--text)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
main{padding:32px 0}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.site-header{position:sticky;top:0;z-index:12;background:color-mix(in oklab, var(--surface) 96%, transparent);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.site-nav ul{display:flex;gap:10px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.site-nav a{display:inline-flex;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab, var(--surface) 92%, transparent);color:var(--text);font-weight:600;font-size:.95rem;transition:all .2s ease;box-shadow:0 4px 16px color-mix(in oklab, var(--text) 6%, transparent)}
.site-nav a[aria-current]{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));color:#fff;border-color:transparent;box-shadow:0 8px 22px color-mix(in oklab, var(--accent-from) 40%, transparent)}
.site-nav a:hover{transform:translateY(-1px)}
.hero{background:color-mix(in oklab, var(--surface) 96%, transparent);border:1px solid var(--border);border-radius:20px;padding:28px 28px 16px;margin-bottom:28px;box-shadow:0 20px 40px color-mix(in oklab, var(--text) 10%, transparent)}
.hero h1{margin:0;font-size:2rem;line-height:1.2}
.hero p{margin:12px 0 0;color:var(--muted)}
.article{background:var(--surface);border-radius:20px;padding:32px;border:1px solid color-mix(in oklab, var(--text) 6%, transparent);box-shadow:0 24px 50px color-mix(in oklab, var(--text) 10%, transparent)}
.article :is(h1,h2,h3,h4){color:var(--text);margin-top:1.8em;margin-bottom:.6em;line-height:1.3}
.article h1:first-child{margin-top:0}
.article p{margin:1em 0;color:color-mix(in oklab, var(--text) 85%, transparent)}
.article ul,.article ol{padding-left:1.4em;margin:1em 0;color:color-mix(in oklab, var(--text) 85%, transparent)}
.article table{border-collapse:collapse;width:100%;margin:16px 0;font-size:.95rem}
.article table th,.article table td{border:1px solid var(--border-strong);padding:10px 12px;text-align:left}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 30px}
.tag{display:inline-flex;background:var(--tag-bg);color:var(--tag-fg);border:1px solid var(--tag-border);padding:6px 12px;border-radius:999px;font-size:.85rem;font-weight:600;letter-spacing:.01em}
.article .meta{margin:0.25rem 0 1rem;color:var(--muted);font-size:.98rem}
.more{margin:40px 0 70px}
.more h2{margin:0 0 16px;font-size:1.35rem}
.more ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;list-style:none;padding:0;margin:0}
.more a{display:block;background:color-mix(in oklab, var(--surface) 94%, transparent);border:1px solid var(--border);border-radius:14px;padding:18px 20px;color:var(--text);font-weight:600;line-height:1.4;box-shadow:0 16px 32px color-mix(in oklab, var(--text) 10%, transparent);transition:transform .2s ease, box-shadow .2s ease}
.more a:hover{transform:translateY(-2px);box-shadow:0 24px 44px color-mix(in oklab, var(--text) 16%, transparent)}
.brand{font-weight:800;font-size:1.25rem;letter-spacing:.01em;color:var(--text);display:flex;align-items:center;gap:8px}
.brand span{display:inline-flex;width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,var(--accent-from),var(--accent-to))}
@media(max-width:720px){.hero{padding:22px}.article{padding:22px}}
@media(max-width:600px){.hero h1{font-size:1.65rem}.hero p{font-size:.95rem}.article{padding:20px}.tags{gap:8px}}
@media(max-width:480px){main{padding:20px 0}.hero{padding:18px}.hero h1{font-size:1.48rem}.more ul{grid-template-columns:1fr}}