:root{--ink:#10283f;--ink2:#3d5770;--sky:#fff6ee;--peach:#fde3cf;--coral:#c4511f;--sun:#f4a259;--lake:#0b6fa4;--lake2:#e3f2fb;--hunt:#b5461a;--line:#e6ddd3;--card:#fff;--ok:#1f7a4d;--r:18px;--sh:0 1px 2px rgba(16,40,63,.06),0 10px 30px rgba(16,40,63,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 Inter,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--peach) 0,#fdeee2 260px,var(--sky) 620px,#f7fafc 100%);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fraunces,Georgia,serif;letter-spacing:-.01em;line-height:1.15;margin:0}
a{color:var(--lake)}:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:6px}
.ex{background:#fff3b0;color:#4a3b00;text-align:center;font-size:12.5px;font-weight:600;padding:7px 12px;letter-spacing:.02em}
header{position:sticky;top:0;z-index:50;background:rgba(255,248,242,.78);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(230,221,211,.7)}
.nav{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:28px;padding:14px 24px}
.logo{display:flex;align-items:center;gap:10px;font-family:Fraunces,serif;font-weight:700;font-size:20px;color:var(--ink);text-decoration:none}
.logo i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 50% 75%,var(--sun) 0 38%,transparent 39%),linear-gradient(180deg,#fbd3b0 0 55%,var(--lake) 56%);box-shadow:inset 0 0 0 2px #fff}
.nav nav{display:flex;gap:22px;margin-left:auto}.nav nav a{color:var(--ink2);text-decoration:none;font-weight:500;font-size:15px}.nav nav a:hover{color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:600}
.p-fish{background:var(--lake2);color:#08527a}.p-hunt{background:#fde6db;color:#8f3510}.p-ok{background:#dcf3e6;color:#145c39}.p-ex{background:#fff3b0;color:#4a3b00}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--lake);color:#fff;border:0;border-radius:999px;padding:13px 22px;font:600 15px Inter,sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 18px rgba(11,111,164,.28)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(11,111,164,.34)}.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:22px;border:1px solid rgba(230,221,211,.6)}
.src{font-size:12.5px;color:#5b6b7a}.muted{color:var(--ink2)}
.reveal{opacity:0;transform:translateY(14px);animation:up .7s cubic-bezier(.2,.7,.2,1) forwards}.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}
@keyframes up{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
footer{margin-top:72px;border-top:1px solid var(--line);padding:32px 24px;text-align:center;font-size:13px;color:#5b6b7a}
.crumb{font-size:13.5px;color:var(--ink2);margin:26px 0 10px}.crumb a{color:var(--ink2);text-decoration:none}
@media(max-width:760px){.nav{gap:12px;padding:12px 16px}.nav nav{gap:14px}.nav nav a{font-size:13.5px}.nav nav .hide-m{display:none}.wrap{padding:0 16px}.card{padding:18px}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
ul.notes{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--ink2)}ul.notes li{margin:2px 0}
.tblw table{min-width:520px}
.codes li{margin:0 0 10px}.codes b{font-family:ui-monospace,monospace;background:var(--lake2);padding:1px 6px;border-radius:6px;margin-right:6px}
.note{background:#fff8e6;border:1px solid #f2dfae;border-radius:12px;padding:12px 14px;font-size:14.5px}
.prose{max-width:760px}.prose h2{margin:32px 0 8px;font-size:24px}