*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0e0e0e;--border:#1e1e1e;--text:#ccc;--dim:#888;--faint:#555;--heading:#e8e8e8;--red:#d63031;--serif:'Source Serif 4',Georgia,serif;--sans:'Inter',sans-serif;--mono:'JetBrains Mono',monospace}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15.5px;line-height:1.85;font-weight:300}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border)}
a{color:var(--red);text-decoration:none}a:hover{text-decoration:underline}
.page{max-width:640px;margin:0 auto;padding:2rem clamp(1.5rem,4vw,2rem)}
nav{padding:2rem 0 3rem;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--border);margin-bottom:3rem}
.site-name{font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--heading);text-decoration:none}
.site-name:hover{color:var(--red);text-decoration:none}
.nav-links{display:flex;gap:1.5rem}
.nav-links a{font-size:.8rem;color:var(--dim);text-decoration:none}
.nav-links a:hover{color:var(--heading)}
.meta{font-family:var(--mono);font-size:.7rem;color:var(--faint);letter-spacing:.05em;margin-bottom:1.5rem}
h1{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.3rem);font-weight:700;color:var(--heading);line-height:1.2;margin-bottom:2.5rem}
h2{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--heading);margin:2.5rem 0 .8rem}
p{margin-bottom:1.1rem}
strong{color:var(--heading);font-weight:500}
.diagram{margin:2rem 0;background:#111;border:1px solid var(--border);border-radius:4px;padding:1rem;overflow-x:auto}
.diagram svg{display:block;margin:0 auto}
.source{font-family:var(--mono);font-size:.6rem;color:var(--faint);margin-top:-.3rem;margin-bottom:1.2rem}
.callout{border-left:2px solid var(--red);padding:.8rem 1.2rem;margin:1.5rem 0;background:rgba(214,48,49,.04);font-size:.9rem}
.my-test{background:#111;border:1px solid var(--border);padding:1.5rem;margin:1.5rem 0;font-family:var(--mono);font-size:.8rem;line-height:1.7;color:var(--dim)}
.my-test strong{color:var(--heading);font-weight:500}
.my-test .result{color:var(--red);font-weight:500}
.back{display:inline-block;margin-top:3rem;font-family:var(--mono);font-size:.75rem;color:var(--dim)}
.back:hover{color:var(--red)}
footer{margin-top:4rem;padding:2rem 0;border-top:1px solid var(--border);text-align:center;font-family:var(--mono);font-size:.65rem;color:var(--faint)}
@media(max-width:500px){nav{flex-direction:column;gap:.8rem;align-items:flex-start}.diagram{padding:.5rem}}