:root{--cream:#faf9f5;--ink:#141413;--coral:#d97757;--coral-deep:#c15f3f;--gray:#b0aea5;--line:#e8e6dc;--card:#fff;--blue:#6a9bcc;--green:#788c5d;--serif:'Fraunces',Georgia,serif;--sans:'Inter',system-ui,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit}h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.01em;margin:0}
.btn{display:inline-block;background:var(--ink);color:var(--cream);padding:12px 22px;border-radius:9px;text-decoration:none;font-weight:500;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.16s}
.btn:hover{background:#000}.btn-coral{background:var(--coral)}.btn-coral:hover{background:var(--coral-deep)}.btn.sm{padding:9px 18px;font-size:14px}
header.nav{position:sticky;top:0;z-index:50;background:rgba(250,249,245,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;font-weight:500;white-space:nowrap;text-decoration:none}.brand img{width:25px;height:25px}
.nav-links{display:flex;gap:26px;align-items:center;font-size:15px}.nav-links a{text-decoration:none;color:#57554d}.nav-links a:hover{color:var(--ink)}.nav-links a.btn{color:var(--cream)}.nav-links a.btn:hover{color:var(--cream)}
@media(max-width:640px){.nav-links a:not(.btn){display:none}}
.nav-user{display:flex;align-items:center;min-height:28px}.nav-user[hidden]{display:none}
.article{max-width:720px;margin:0 auto;padding:44px 24px 0}
.back{display:inline-block;color:#7a786f;text-decoration:none;font-size:14px;margin-bottom:22px}.back:hover{color:var(--ink)}
.a-tag{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep);font-weight:600;margin-bottom:16px}
.article h1{font-size:clamp(32px,5vw,50px)}
.a-sub{font-size:20px;color:#403e39;margin:18px 0 0;font-family:var(--serif);font-weight:400;line-height:1.4}
.a-body,.gated{font-size:18px;color:#26251f}
.a-body{margin-top:36px}
.a-body h2,.gated h2{font-size:26px;margin:38px 0 14px}
.a-body p,.gated p{margin:18px 0}
.steps{margin:18px 0;padding:0;list-style:none}
.steps li{position:relative;padding:8px 0 8px 30px;border-bottom:1px solid var(--line)}
.steps li:before{content:"";position:absolute;left:4px;top:16px;width:8px;height:8px;border-radius:2px;background:var(--coral)}
.code{background:var(--ink);color:#f3f1e9;padding:20px 22px;border-radius:14px;overflow-x:auto;font-size:14.5px;line-height:1.6;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.callout{background:#f3ede9;border-left:3px solid var(--coral);padding:18px 22px;border-radius:0 12px 12px 0;margin:26px 0;font-size:16.5px;color:#3a382f}
.ecomrads{display:flex;gap:16px;background:var(--ink);color:#eceae2;padding:24px;border-radius:16px;margin:30px 0;font-size:16px}
.ecomrads .ec-mark{width:30px;height:30px;flex-shrink:0;margin-top:2px}
.ecomrads .ec-tag{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);font-weight:600;margin-bottom:6px}
.ecomrads a{color:#f2b8a2}
/* gate */
.gate{position:relative;min-height:600px;margin-top:8px}
.gated{position:relative;filter:blur(5px);opacity:.5;pointer-events:none;user-select:none;max-height:540px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 40px,transparent 360px);mask-image:linear-gradient(180deg,#000 0,#000 40px,transparent 360px)}
.gate-fade{position:absolute;top:0;left:0;right:0;height:420px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(250,249,245,0),var(--cream) 88%)}
.gate.is-unlocked{min-height:0}
.gate.is-unlocked .gated{filter:none;opacity:1;pointer-events:auto;user-select:auto;max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
.gate.is-unlocked .gate-fade,.gate.is-unlocked .paywall{display:none}
.paywall{position:absolute;top:96px;left:0;right:0;z-index:3;display:flex;justify-content:center;padding:0 20px}
.pw-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 30px;width:100%;max-width:400px;text-align:center}
.pw-bot{width:44px;height:44px;margin-bottom:14px}
.pw-card h3{font-size:24px}
.pw-card p{color:#57554d;font-size:15px;margin:8px 0 22px}
.pw-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:15px;font-weight:500;font-family:var(--sans);cursor:pointer;transition:background .15s}
.pw-oauth:hover{background:#f6f4ee}
.pw-or{display:flex;align-items:center;text-align:center;color:#a3a096;font-size:13px;margin:16px 0}
.pw-or:before,.pw-or:after{content:"";flex:1;height:1px;background:var(--line)}
.pw-or span{padding:0 12px}
.pw-email{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;font-size:15px;font-family:var(--sans);background:var(--cream);margin-bottom:12px}
.pw-email:focus{outline:none;border-color:var(--coral)}
.pw-continue{width:100%;padding:12px;border:none;border-radius:9px;background:var(--ink);color:var(--cream);font-size:15px;font-weight:500;font-family:var(--sans);cursor:pointer}
.pw-continue:hover{background:#000}
.pw-alt{margin-top:16px;font-size:14px;color:#57554d}.pw-alt a{color:var(--coral-deep);font-weight:500;text-decoration:none}
/* more */
.more{max-width:1080px;margin:72px auto 0;border-top:1px solid var(--line);padding-top:40px}
.more-h{font-size:24px;margin-bottom:20px}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.more-grid{grid-template-columns:1fr}}
.more-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;text-decoration:none;transition:.16s}
.more-card:hover{border-color:#cfcabc;background:#fbfaf6}
.more-tag{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep);font-weight:600;margin-bottom:8px}
.more-title{font-family:var(--serif);font-size:18px}
footer{margin-top:72px;background:#f1efe6;border-top:1px solid var(--line);padding:72px 0 40px;font-size:14px;color:#57554d}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:44px}
.ft-brand .brand{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--ink)}
.ft-brand p{color:#57554d;font-size:14px;max-width:300px;margin:16px 0 0;line-height:1.6}
.ft-col h4{font-family:var(--sans);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#8a877e;font-weight:600;margin:4px 0 14px}
.ft-col a{display:block;color:#57554d;padding:5px 0;font-size:14px;text-decoration:none}
.ft-col a:hover{color:var(--coral-deep)}
.ft-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:52px;padding-top:26px;color:#8a877e;font-size:13.5px}
@media(max-width:860px){.ft-grid{grid-template-columns:1fr 1fr;gap:36px}.ft-brand{grid-column:1/-1}}
@media(max-width:440px){.ft-grid{grid-template-columns:1fr;gap:30px}}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--cream);padding:13px 22px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}