*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fcfcfb;color:#1c1e1c;font-family:'PT Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:oklch(.48 .06 155);text-decoration:none}
a:hover{color:oklch(.39 .07 155)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.site-header{position:sticky;top:0;z-index:50;background:rgba(252,252,251,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-wrap{max-width:1120px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;letter-spacing:-.01em;color:#1c1e1c}
.brand img{display:block;border-radius:6px}
.nav{display:flex;align-items:center;gap:28px;font-size:14.5px}
.nav>a{color:rgba(0,0,0,.65)}
.nav .active{color:#1c1e1c;font-weight:700}
.nav .download{color:#fff;background:oklch(.55 .05 155);padding:9px 17px;border-radius:8px;font-weight:700;font-size:13.5px}
.article-header{max-width:800px;margin:0 auto;padding:56px 32px 0}
.back{font-family:'JetBrains Mono',monospace;font-size:12px}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:oklch(.52 .06 155);margin:26px 0 16px}
.article-header h1{font-size:48px;line-height:1.08;letter-spacing:-.027em;margin:0 0 20px;font-weight:700}
.dek{font-size:20px;line-height:1.55;color:rgba(0,0,0,.62);margin:0 0 24px;font-family:'PT Serif',serif;font-style:italic}
.meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(0,0,0,.48);padding:0 0 30px;border-bottom:1px solid rgba(0,0,0,.08)}
.article-layout{max-width:1040px;margin:0 auto;padding:42px 32px 84px;display:grid;grid-template-columns:minmax(0,720px) 220px;gap:64px;align-items:start}
.prose{font-family:'PT Serif',serif;font-size:18.5px;line-height:1.76;color:#292b27;min-width:0}
.prose>p:first-child{font-size:20px;line-height:1.68}
.prose p{margin:0 0 22px}
.prose h2{font-family:'PT Sans',sans-serif;font-size:29px;line-height:1.22;font-weight:700;letter-spacing:-.012em;margin:50px 0 15px;scroll-margin-top:92px}
.prose h3{font-family:'PT Sans',sans-serif;font-size:21px;line-height:1.3;font-weight:700;margin:34px 0 11px;scroll-margin-top:92px}
.prose ul,.prose ol{margin:0 0 24px;padding-left:27px}
.prose li{margin:0 0 9px;padding-left:3px}
.prose strong{color:#1c1e1c}
.prose blockquote{margin:28px 0;padding:7px 0 7px 22px;border-left:3px solid oklch(.61 .06 155);font-style:italic;color:rgba(0,0,0,.65)}
.prose code{font-family:'JetBrains Mono',monospace;font-size:.79em;background:#f0efeb;padding:2px 6px;border-radius:5px;overflow-wrap:anywhere}
.prose pre{margin:0 0 26px;padding:19px 21px;background:#222522;color:#f2f4ef;border-radius:10px;overflow:auto;line-height:1.62}
.prose pre code{font-size:13.5px;background:none;padding:0;border-radius:0;color:inherit;overflow-wrap:normal}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 28px;font-family:'PT Sans',sans-serif;font-size:14.5px;line-height:1.5}
.prose th,.prose td{border:1px solid rgba(0,0,0,.12);padding:11px 13px;text-align:left;vertical-align:top}
.prose th{background:#f1f0ec;font-weight:700;color:#20221f}
.prose tr:nth-child(even) td{background:#faf9f7}
.table-scroll{overflow-x:auto;margin:8px 0 28px}
.table-scroll table{margin:0;min-width:620px}
.callout{font-family:'PT Sans',sans-serif;background:oklch(.97 .014 155);border:1px solid oklch(.88 .03 155);border-radius:11px;padding:20px 22px;margin:28px 0}
.callout p{font-size:16px;line-height:1.62;margin:0}
.callout p+p{margin-top:10px}
.callout-title{font-weight:700;color:#1c1e1c;margin-bottom:6px!important}
.steps{counter-reset:steps;list-style:none;padding:0!important}
.steps li{counter-increment:steps;position:relative;padding:0 0 0 46px;margin-bottom:20px}
.steps li:before{content:counter(steps);position:absolute;left:0;top:1px;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:oklch(.55 .05 155);color:#fff;font-family:'PT Sans',sans-serif;font-size:14px;font-weight:700}
.verdict{background:#f4f3ef;border-radius:12px;padding:24px 26px;margin:26px 0;font-family:'PT Sans',sans-serif}
.verdict h3{margin:0 0 8px;font-size:20px}
.verdict p{font-size:16px;line-height:1.62;margin:0}
.faq{border-top:1px solid rgba(0,0,0,.1);padding-top:2px}
.faq h3{font-size:19px;margin-top:27px}
.download-cta{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;margin:52px 0 4px;padding:32px 34px;border-radius:16px;background:linear-gradient(135deg,#202a24 0%,#30483a 100%);box-shadow:0 18px 45px rgba(27,49,36,.18);font-family:'PT Sans',sans-serif;color:#fff}
.download-cta:after{content:'#';position:absolute;right:18px;top:-56px;font-family:'JetBrains Mono',monospace;font-size:190px;line-height:1;font-weight:700;color:rgba(255,255,255,.045);pointer-events:none}
.download-copy{position:relative;z-index:1}
.download-kicker{display:block;margin:0 0 9px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#b8d9c4}
.prose .download-cta h2{margin:0 0 9px;font-size:25px;line-height:1.2;color:#fff;scroll-margin-top:0}
.prose .download-cta p{max-width:510px;margin:0;font-family:'PT Sans',sans-serif;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.download-button{position:relative;z-index:1;display:flex;min-width:210px;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px 20px;border-radius:10px;background:#fff;color:#25362b!important;box-shadow:0 8px 22px rgba(0,0,0,.2);font-weight:700;text-align:center;transition:transform .16s ease,box-shadow .16s ease}
.download-button:hover{transform:translateY(-2px);box-shadow:0 11px 26px rgba(0,0,0,.24);color:#1f3226!important}
.download-button small{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;color:rgba(25,45,32,.62)}
.cheat-toolbar{position:sticky;top:70px;z-index:10;margin:28px 0 24px;padding:16px;background:rgba(244,243,239,.94);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);border-radius:12px;font-family:'PT Sans',sans-serif}
.cheat-search{width:100%;border:1px solid rgba(0,0,0,.14);border-radius:8px;background:#fff;padding:11px 13px;font:15px 'PT Sans',sans-serif;color:#20221f;outline:none}
.cheat-search:focus{border-color:oklch(.58 .06 155);box-shadow:0 0 0 3px oklch(.91 .025 155)}
.cheat-filters{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.cheat-filter{border:1px solid rgba(0,0,0,.11);border-radius:999px;background:#fff;padding:6px 11px;font:12px 'JetBrains Mono',monospace;color:rgba(0,0,0,.62);cursor:pointer}
.cheat-filter.active{border-color:oklch(.5 .06 155);background:oklch(.5 .05 155);color:#fff}
.cheat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 30px}
.cheat-card{min-width:0;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:#fff;overflow:hidden;font-family:'PT Sans',sans-serif}
.cheat-card.hidden{display:none}
.cheat-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.07)}
.cheat-card h3{margin:0;font-size:17px}
.copy-syntax{flex:none;border:0;background:#edf2ee;border-radius:6px;padding:6px 9px;font:10.5px 'JetBrains Mono',monospace;color:#37513f;cursor:pointer}
.copy-syntax:hover{background:#e2ebe4}
.cheat-code{margin:0!important;border-radius:0!important;min-height:78px;padding:15px 16px!important;white-space:pre-wrap;overflow-wrap:anywhere}
.cheat-preview{min-height:62px;padding:14px 16px;font-family:'PT Serif',serif;font-size:15.5px;line-height:1.55;background:#faf9f7}
.cheat-preview>*:first-child{margin-top:0}.cheat-preview>*:last-child{margin-bottom:0}
.cheat-preview h1{font-family:'PT Sans',sans-serif;font-size:22px;margin:0}.cheat-preview h2{font-family:'PT Sans',sans-serif;font-size:19px;margin:0}.cheat-preview blockquote{margin:0;padding-left:12px}.cheat-preview ul,.cheat-preview ol{margin:0;padding-left:21px}.cheat-preview table{margin:0;font-size:12px}.cheat-preview img{max-width:100%}
.cheat-empty{display:none;padding:28px;text-align:center;border:1px dashed rgba(0,0,0,.18);border-radius:10px;font-family:'PT Sans',sans-serif;color:rgba(0,0,0,.55)}
.cheat-empty.visible{display:block}
.playground{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0;border:1px solid rgba(0,0,0,.1);border-radius:12px;overflow:hidden;background:#fff;font-family:'PT Sans',sans-serif}
.playground-pane{min-width:0}.playground-pane+ .playground-pane{border-left:1px solid rgba(0,0,0,.1)}
.playground-label{display:block;padding:9px 13px;background:#f2f1ee;border-bottom:1px solid rgba(0,0,0,.07);font:10.5px 'JetBrains Mono',monospace;letter-spacing:.09em;text-transform:uppercase;color:rgba(0,0,0,.5)}
.playground textarea{display:block;width:100%;min-height:260px;resize:vertical;border:0;padding:16px;outline:none;font:13px/1.65 'JetBrains Mono',monospace;color:#30332e}
.playground-output{min-height:260px;padding:16px 18px;font:15.5px/1.65 'PT Serif',serif;overflow:auto}.playground-output h1,.playground-output h2,.playground-output h3{font-family:'PT Sans',sans-serif}.playground-output h1{font-size:24px}.playground-output h2{font-size:20px}.playground-output h3{font-size:17px}.playground-output pre{margin:12px 0;padding:12px;background:#222522;color:#fff;border-radius:7px;overflow:auto}.playground-output table{font-size:12px;margin:10px 0}
.toc-wrap{position:sticky;top:96px}
.toc{border-left:1px solid rgba(0,0,0,.11);padding-left:18px}
.toc-title{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.42);margin-bottom:8px}
.toc a{display:block;font-size:13.5px;line-height:1.45;color:rgba(0,0,0,.57);padding:5px 0}
.toc a:hover{color:oklch(.43 .07 155)}
.side-cta{display:block;margin:26px 0 0 19px;font-family:'JetBrains Mono',monospace;font-size:12.5px}
.related{max-width:800px;margin:0 auto;padding:0 32px 84px}
.related-inner{border-top:1px solid rgba(0,0,0,.09);padding-top:30px}
.related-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,0,0,.43);margin-bottom:15px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.related-card{display:block;color:inherit;border:1px solid rgba(0,0,0,.09);border-radius:10px;padding:20px;background:#fff}
.related-card:hover{background:#f7f6f3}
.related-card h3{font-family:'PT Serif',serif;font-size:20px;line-height:1.3;margin:0 0 6px}
.related-card p{font-size:14px;line-height:1.55;color:rgba(0,0,0,.6);margin:0}
.site-footer{background:#1c1e1c;color:rgba(255,255,255,.6);padding:44px 32px 38px}
.footer-main{max-width:1000px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-brand{display:flex;align-items:center;gap:9px;font-weight:700;color:#fff;font-size:18px}
.footer-brand img{display:block;border-radius:5px}
.footer-links{display:flex;gap:26px;font-size:14px}
.footer-links a{color:rgba(255,255,255,.72)}
.copyright{max-width:1000px;margin:28px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-family:'JetBrains Mono',monospace;font-size:11.5px;color:rgba(255,255,255,.4)}
@media(max-width:800px){
  .nav-wrap{padding:14px 20px}.nav{gap:14px}.nav>a:not(.active):not(.download){display:none}
  .article-header{padding:42px 22px 0}.article-header h1{font-size:38px}.dek{font-size:18px}
  .article-layout{display:block;padding:32px 22px 64px}.prose{font-size:17.5px}.prose>p:first-child{font-size:18.5px}.prose h2{font-size:26px;margin-top:42px}
  .toc-wrap{position:static;order:-1;margin:0 0 34px}.toc{background:#f4f3ef;border:0;border-radius:10px;padding:17px 19px}.side-cta{display:none}
  .download-cta{grid-template-columns:1fr;padding:28px;gap:22px}.download-button{min-width:0;width:100%}
  .cheat-toolbar{top:62px}.cheat-grid{grid-template-columns:1fr}.playground{grid-template-columns:1fr}.playground-pane+ .playground-pane{border-left:0;border-top:1px solid rgba(0,0,0,.1)}
  .related{padding:0 22px 64px}.related-grid{grid-template-columns:1fr}
}
@media(max-width:520px){.nav .active{display:none}.article-header h1{font-size:34px}.article-layout{padding-left:18px;padding-right:18px}.article-header{padding-left:18px;padding-right:18px}.prose table{font-size:13.5px}.download-cta{margin-top:44px;padding:25px 22px}.site-footer{padding-left:22px;padding-right:22px}}