*{box-sizing:border-box}html{scroll-behavior:smooth}
:root{--bg:#edf2f7;--surface:#f8fafc;--ink:#101318;--muted:#697381;--line:rgba(16,19,24,.11);--active:#101318;--activeText:#fff;--green:#27c867;--shadow:0 18px 60px rgba(30,42,58,.09);--max:850px}
html[data-theme="dark"]{--bg:#0d1015;--surface:#151a22;--ink:#f5f6f7;--muted:#9ba3ae;--line:rgba(255,255,255,.11);--active:#f5f6f7;--activeText:#0d1015;--green:#48dd80;--shadow:0 20px 70px rgba(0,0,0,.35)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:"DM Sans","Google Sans","Product Sans",Arial,sans-serif;transition:background .35s,color .35s;overflow-x:hidden;-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit}.wrap{width:min(var(--max),calc(100% - 42px));margin:auto}.noise{position:fixed;inset:0;pointer-events:none;opacity:.018;z-index:80;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
/* Same Dynamic Island language as the homepage */
.island-wrap{position:sticky;top:12px;z-index:60;display:flex;justify-content:center;padding:18px 12px 0;pointer-events:none}.island{pointer-events:auto;display:flex;align-items:center;gap:2px;padding:5px;background:color-mix(in srgb,var(--surface) 91%,transparent);border:1px solid var(--line);border-radius:999px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 38px rgba(15,23,42,.08);backdrop-filter:blur(18px);max-width:calc(100vw - 24px)}.seg{height:40px;border:0;background:transparent;color:var(--muted);padding:0 17px;border-radius:999px;text-decoration:none;font-size:12px;font-weight:600;display:grid;place-items:center;cursor:pointer;white-space:nowrap;transition:.22s}.seg:hover{color:var(--ink)}.seg.active{background:var(--active);color:var(--activeText);box-shadow:0 7px 18px rgba(13,17,23,.16);transform:translateY(-1px)}.theme{width:40px;padding:0;margin-left:3px;border-left:1px solid var(--line)}.theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Blog index */
.blog-hero{padding:105px 0 58px;border-bottom:1px solid var(--line)}.blog-kicker{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.blog-hero h1{font-size:clamp(45px,7vw,68px);line-height:1.01;letter-spacing:-.058em;margin:15px 0 0;max-width:820px;font-weight:620}.blog-hero h1 .dim{color:var(--muted);font-weight:500}.blog-hero p{max-width:650px;margin:38px 0 0;color:var(--muted);font-size:14px;line-height:1.75;letter-spacing:-.01em}.filters{display:flex;gap:7px;flex-wrap:wrap;padding:28px 0 0}.filters:empty{display:none}.filter{border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 13px;border-radius:999px;cursor:pointer;font-size:11px;font-weight:650;transition:.2s}.filter:hover{color:var(--ink)}.filter.active{background:var(--active);color:var(--activeText);border-color:transparent}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:44px 0 96px}.blog-card{min-height:260px;border:1px solid var(--line);border-radius:22px;padding:25px;display:flex;flex-direction:column;background:color-mix(in srgb,var(--surface) 58%,transparent);transition:.25s;color:var(--ink);text-decoration:none;overflow:hidden;position:relative}.blog-card:hover{background:var(--surface);transform:translateY(-4px);box-shadow:var(--shadow)}.blog-card.has-cover{padding:0}.blog-card-cover{height:150px;border-bottom:1px solid var(--line);overflow:hidden;background:var(--surface)}.blog-card-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.blog-card:hover .blog-card-cover img{transform:scale(1.02)}.blog-card-body{display:flex;flex-direction:column;flex:1;padding:25px}.blog-card:not(.has-cover) .blog-card-body{padding:0}.blog-card small{color:var(--muted);font-size:9px;letter-spacing:.07em;font-weight:700;text-transform:uppercase}.blog-card h2{font-size:23px;line-height:1.13;margin:25px 0 10px;letter-spacing:-.04em;font-weight:620}.blog-card p{color:var(--muted);font-size:12px;line-height:1.65;margin:0}.blog-card .arrow{margin-top:auto;padding-top:28px;font-size:19px;transition:.2s}.blog-card:hover .arrow{transform:translate(2px,-2px)}.empty{padding:70px 0 110px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}
/* Article */
.post-shell{padding:86px 0 105px}.back{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:650;margin-bottom:52px;border-bottom:1px solid var(--line);padding-bottom:4px}.back:hover{color:var(--ink)}.post-head{max-width:790px}.post-meta{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.07em;text-transform:uppercase}.post-head h1{font-size:clamp(43px,7.4vw,72px);line-height:.99;letter-spacing:-.058em;margin:17px 0 0;font-weight:620}.post-head .dek{max-width:670px;margin:30px 0 0;color:var(--muted);font-size:17px;line-height:1.62;letter-spacing:-.015em}.post-cover{margin:52px 0 0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--surface);aspect-ratio:16/8}.post-cover img{width:100%;height:100%;display:block;object-fit:cover}.post-rule{height:1px;background:var(--line);margin:56px 0 0}.prose{max-width:680px;margin:0 auto;padding:54px 0 10px}.prose h2,.prose h3{color:var(--ink);letter-spacing:-.035em}.prose h2{font-size:clamp(26px,4vw,34px);line-height:1.15;margin:1.8em 0 .65em;font-weight:620}.prose h3{font-size:21px;margin:1.7em 0 .55em;font-weight:620}.prose p,.prose li{font-size:16px;line-height:1.86;color:var(--muted);letter-spacing:-.005em}.prose p{margin:0 0 1.35em}.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.55em}.prose strong{color:var(--ink);font-weight:650}.prose a{color:var(--ink);text-underline-offset:3px}.prose blockquote{margin:1.8em 0;border-left:2px solid var(--ink);padding:2px 0 2px 20px;color:var(--muted)}.prose code{font-size:.92em;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.12em .35em}.prose pre{overflow:auto;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.prose pre code{border:0;padding:0;background:transparent}.tags{max-width:680px;margin:34px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;gap:7px;flex-wrap:wrap}.tag{border:1px solid var(--line);padding:7px 10px;border-radius:999px;color:var(--muted);font-size:10px}.post-state{padding:110px 0 140px}.post-state h1{font-size:clamp(39px,7vw,64px);line-height:1;letter-spacing:-.055em;margin:16px 0 0;font-weight:620}.post-state .dek{color:var(--muted);font-size:15px;line-height:1.7;margin-top:24px}
.footer{border-top:1px solid var(--line);padding:27px 0 42px;color:var(--muted);font-size:10px;display:flex;justify-content:flex-end;text-align:right}.footer strong{color:var(--ink);font-weight:650}.scroll-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);box-shadow:0 10px 30px rgba(15,23,42,.10);backdrop-filter:blur(16px);display:grid;place-items:center;z-index:70;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transition:.22s}.scroll-top.show{opacity:1;visibility:visible;transform:none}.scroll-top:hover{background:var(--active);color:var(--activeText);transform:translateY(-2px)}.scroll-top svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.island-wrap{top:7px;padding:12px 9px 0;justify-content:flex-start}.island{width:max-content;max-width:100%;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}.island::-webkit-scrollbar{display:none}.seg{height:39px;padding:0 13px;font-size:10.5px;flex:0 0 auto}.theme{width:39px;padding:0;flex:0 0 39px}.blog-hero{padding:75px 0 42px}.blog-hero h1{font-size:clamp(39px,12vw,54px)}.blog-hero p{margin-top:28px;font-size:13.5px}.filters{padding-top:24px}.blog-grid{grid-template-columns:1fr;padding:32px 0 72px}.blog-card{min-height:205px;padding:21px}.blog-card-body{padding:21px}.blog-card h2{font-size:20px;margin-top:20px}.empty{padding:50px 0 80px}.post-shell{padding:62px 0 82px}.back{margin-bottom:38px}.post-head h1{font-size:clamp(38px,11.5vw,53px)}.post-head .dek{font-size:15.5px;margin-top:24px}.post-cover{margin-top:38px;border-radius:18px;aspect-ratio:16/9}.post-rule{margin-top:42px}.prose{padding-top:38px}.prose p,.prose li{font-size:15px;line-height:1.8}.footer{width:calc(100% - 36px);padding:24px 0 calc(30px + env(safe-area-inset-bottom));font-size:9px}.scroll-top{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:44px;height:44px}}
@media(max-width:430px){.wrap{width:calc(100% - 30px)}.blog-hero{padding-top:66px}.blog-hero h1{font-size:clamp(37px,11.8vw,48px)}.blog-card{border-radius:20px}.post-head h1{font-size:clamp(36px,11.2vw,48px)}}
@media(hover:none){.blog-card:hover,.scroll-top:hover{transform:none;box-shadow:none}}