:root{
  --bg:#0a0a0c; --bg2:#121119; --panel:#17161b; --panel2:#201f26; --border:#2a2932;
  --text:#f3f4f7; --dim:#98a0ac; --faint:#8a93a0;
  --accent:#4a73f5; --accent2:#9c6cf0; --grad:linear-gradient(120deg,#4a73f5,#9c6cf0);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent2)}
:where(a,button,summary):focus-visible{outline:3px solid var(--accent2);outline-offset:2px;border-radius:6px}
header.site{position:sticky;top:0;background:rgba(10,10,12,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
header .wrap{max-width:820px;margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;color:var(--text);font-size:18px}
.logo{width:28px;height:28px;display:block;flex:none}
header .back{color:var(--dim);text-decoration:none;font-size:14px;font-weight:600}
header .back:hover{color:var(--text)}
main{max-width:820px;margin:0 auto;padding:44px 22px 70px}
main a{text-decoration:underline}
h1{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;overflow-wrap:break-word}
.eff{color:var(--faint);font-size:14px;margin:0 0 30px}
h2{font-size:20px;font-weight:700;margin:34px 0 8px}
p,li{color:var(--dim);font-size:15.5px}
strong{color:var(--text)}
ul{padding-left:20px}
.note{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px;color:var(--dim);font-size:14.5px}
footer{border-top:1px solid var(--border);margin-top:50px;padding:24px 22px;text-align:center;color:var(--faint);font-size:13px}
footer a{color:var(--dim);text-decoration:none;margin:0 8px}
footer a:hover{color:var(--text)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}