:root{--bg:#fbfaf7;--text:#1f1d1a;--muted:#6b665e;--line:#e4e0d8;--accent:#b5452b;--accent-soft:#f6e7e2;--max:42rem;--font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);margin:0;font-size:1.0625rem;line-height:1.7}a{color:var(--accent);text-underline-offset:.18em}a:hover{text-decoration-thickness:2px}.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}header.site{border-bottom:1px solid var(--line);padding:1.1rem 0}header.site .wrap{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;display:flex}header.site .brand{color:var(--text);letter-spacing:.01em;font-size:1.15rem;font-weight:700;text-decoration:none}header.site .brand span{color:var(--accent)}header.site nav a{color:var(--muted);margin-left:1rem;font-size:.95rem;text-decoration:none}header.site nav a:first-child{margin-left:0}header.site nav a:hover{color:var(--text)}main{padding:2.5rem 0 4rem}h1,h2,h3{line-height:1.3}h1{margin:0 0 .75rem;font-size:2rem}h2{margin:2.5rem 0 .75rem;font-size:1.45rem}h3{margin:2rem 0 .5rem;font-size:1.15rem}p,ul,ol{margin:0 0 1.1rem}code{font-family:var(--mono);background:#f0ede6;border-radius:4px;padding:.1em .35em;font-size:.9em}pre{color:#f3f0ea;background:#1f1d1a;border-radius:8px;padding:1rem;overflow-x:auto}pre code{background:0 0;padding:0}table{border-collapse:collapse;width:100%;margin:0 0 1.5rem;font-size:.95rem}th,td{border-bottom:1px solid var(--line);text-align:left;padding:.5rem .4rem}img{max-width:100%;height:auto}.muted{color:var(--muted)}.meta{color:var(--muted);font-size:.9rem}.hero{padding:1rem 0 2rem}.hero p{color:var(--muted);font-size:1.15rem}.post-list{margin:0;padding:0;list-style:none}.post-list li{border-bottom:1px solid var(--line);padding:1.1rem 0}.post-list a.title{color:var(--text);font-size:1.15rem;font-weight:650;text-decoration:none}.post-list a.title:hover{color:var(--accent)}.post-list p{color:var(--muted);margin:.25rem 0 0}.tag{color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:.05rem .5rem;font-size:.8rem;text-decoration:none;display:inline-block}.disclosure{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:6px;margin:0 0 2rem;padding:.75rem 1rem;font-size:.95rem}footer.site{border-top:1px solid var(--line);color:var(--muted);padding:2rem 0;font-size:.9rem}footer.site a{color:var(--muted);margin-right:1rem}.diagram{margin:1.75rem 0}.diagram figcaption{color:var(--muted);text-align:center;margin-top:.6rem;font-size:.85rem}.diagram.flow ol{counter-reset:step;margin:0;padding:0;list-style:none}.diagram.flow .step{counter-increment:step;border:1px solid var(--line);background:#fff;border-radius:10px;flex-direction:column;gap:.15rem;max-width:30rem;margin:0 auto 1.6rem;padding:.7rem 1rem .7rem 3rem;display:flex;position:relative}.diagram.flow .step:before{content:counter(step);background:var(--bg);border:1px solid var(--line);text-align:center;width:1.4rem;height:1.4rem;color:var(--muted);border-radius:50%;font-size:.75rem;line-height:1.35rem;position:absolute;top:.75rem;left:.9rem}.diagram.flow .step:not(:last-child):after{content:"";border-left:.4rem solid #0000;border-right:.4rem solid #0000;border-top:.55rem solid var(--muted);width:0;height:0;position:absolute;bottom:-1.35rem;left:50%;transform:translate(-50%)}.diagram.flow .step:last-child{margin-bottom:0}.diagram.flow .step-name{font-weight:600}.diagram.flow .step-note{color:var(--muted);font-size:.9rem}.diagram.flow .step.hot{border-color:var(--accent);background:var(--accent-soft)}.diagram.flow .step.hot:before{background:var(--accent);border-color:var(--accent);color:#fff}.diagram.compare{grid-template-columns:1fr 1fr;gap:.9rem;display:grid}.diagram.compare figcaption{grid-column:1/-1}.diagram.compare .col{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.8rem 1rem}.diagram.compare .col.after{border-color:var(--accent)}.diagram.compare .col-label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem;font-size:.85rem;font-weight:700}.diagram.compare .col.after .col-label{color:var(--accent)}.diagram.compare ul{margin:0;padding-left:1.1rem}.diagram.compare li{margin:.25rem 0;font-size:.95rem}@media (width<=34rem){.diagram.compare{grid-template-columns:1fr}}
