:root{--ink:#1c1630;--panel:#2c2140;--panel2:#352b4c;--line:#5e4a78;--text:#f6ecff;--muted:#cbb8dd;--gold:#ffd369;--gold2:#ffdc83;--mint:#9df0bf;color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#3b2a5a 0%,var(--ink) 60%) fixed,var(--ink);color:var(--text);font:17px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--gold2)}a:hover{color:#fff1c7}
header.site{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:#1c1630ee;backdrop-filter:blur(6px);border-bottom:1px solid #3d2f55}
header.site .brand img{display:block;height:44px;width:auto;filter:drop-shadow(0 2px 6px #0008)}
header.site nav{display:flex;align-items:center;gap:14px;font:600 15px "Trebuchet MS",Arial,sans-serif}header.site nav>a{text-decoration:none;color:var(--text)}
.cta{display:inline-block;padding:9px 18px;border-radius:999px;background:var(--gold);color:#2a1d36!important;font:700 15px "Trebuchet MS",Arial,sans-serif;text-decoration:none;box-shadow:0 4px 0 #b88a2c}.cta:hover{background:var(--gold2)}
details.langs{position:relative}details.langs summary{cursor:pointer;list-style:none;color:var(--muted)}details.langs summary::-webkit-details-marker{display:none}details.langs>div{position:absolute;right:0;top:130%;display:grid;min-width:150px;padding:6px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);box-shadow:0 10px 30px #0008}details.langs>div a{padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--text)}details.langs>div a:hover,details.langs>div a[aria-current]{background:#4a3a66}
main{max-width:1080px;margin:0 auto;padding:28px 20px 40px}
.hero{text-align:center;padding:18px 0 26px}.hero h1,.post h1{font:900 clamp(30px,5vw,48px)/1.12 "Arial Black","Trebuchet MS",Arial,sans-serif;letter-spacing:-1px;color:#fff1d4;margin:.2em 0 .35em}.hero p{color:var(--muted);max-width:640px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.card{padding:20px 22px;border-radius:18px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);box-shadow:0 8px 24px #0005;display:flex;flex-direction:column}
.card a{text-decoration:none}.card h2{font:800 21px/1.3 "Trebuchet MS",Arial,sans-serif;color:#fff1d4;margin:0 0 6px}.card p{margin:0 0 12px;color:var(--muted);font-size:15.5px}.card .more{margin-top:auto;font-weight:700}
.meta{color:#b7a3cb;font-size:14px}.tag{display:inline-block;padding:1px 9px;border-radius:999px;background:#43345c;color:var(--mint);font-size:12.5px}
.crumbs{max-width:760px;margin:0 auto 6px;font-size:14px;color:var(--muted)}.crumbs a{color:var(--muted)}
.post{max-width:760px;margin:0 auto}.post .body h2{font:800 26px/1.3 "Trebuchet MS",Arial,sans-serif;color:var(--gold2);margin:1.6em 0 .4em}.post .body h3{font:700 20px/1.35 "Trebuchet MS",Arial,sans-serif;color:#fff1d4;margin:1.3em 0 .3em}
.post .body p,.post .body li{color:#eadcf6}.post .body img{max-width:100%;height:auto;border-radius:14px}.post .body blockquote{margin:1.2em 0;padding:4px 18px;border-left:4px solid var(--gold);background:#2a2040;border-radius:0 12px 12px 0;color:var(--muted)}.post .body code{background:#3a2d52;padding:1px 6px;border-radius:6px;font-size:.92em}.post .body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.play{max-width:760px;margin:36px auto;display:flex;gap:18px;align-items:center;padding:20px 22px;border-radius:20px;background:linear-gradient(120deg,#4a3514,#352b4c 60%);border:1px solid #c9973f}.play img{border-radius:18px;flex:none}.play h2{margin:0;font:800 22px "Trebuchet MS",Arial,sans-serif;color:#fff1d4}.play p{margin:4px 0 12px;color:var(--muted)}
.related{max-width:1080px;margin:10px auto}.related>h2{font:800 22px "Trebuchet MS",Arial,sans-serif;color:#fff1d4}
.pager{display:flex;justify-content:space-between;gap:16px;max-width:760px;margin:28px auto 0;font-weight:600}.pager a{max-width:48%}
footer.site{border-top:1px solid #3d2f55;padding:22px 20px 36px;text-align:center;color:var(--muted);font-size:14px}footer.site a{color:var(--muted)}
@media(max-width:640px){body{font-size:16px}header.site{padding:8px 12px}header.site .brand img{height:36px}header.site nav{gap:10px;font-size:14px}.cta{padding:8px 14px}.play{flex-direction:column;text-align:center}main{padding:20px 16px 32px}}