*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--blue: #007aff;--blue-dark: #0066d6;--text: #2c3e50;--text-light: #6c757d;--bg: #ffffff;--bg-alt: #f8f9fa;--border: #e9ecef;--radius: 12px}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:18px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}a{color:var(--blue);text-decoration:none;transition:color .2s}a:hover{color:var(--blue-dark)}img{max-width:100%;height:auto;border-radius:var(--radius)}.site-nav{position:sticky;top:0;z-index:50;background:#fffffff5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.nav-inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:60px}.nav-logo{display:inline-flex;align-items:center;gap:6px;text-decoration:none}.nav-logo span{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:700;font-size:23px;letter-spacing:-.02em;color:var(--blue);line-height:1;white-space:nowrap}.nav-links{display:flex;align-items:center;gap:28px}.nav-links a{color:var(--text-light);font-size:1rem;font-weight:500}.nav-links a:hover{color:var(--blue)}.nav-links a.active{color:var(--blue);font-weight:600}.nav-cta{display:inline-flex;align-items:center;gap:10px;padding:9px 22px;background:linear-gradient(135deg,#007aff,#0066d6);font-size:.92rem;font-weight:600;border-radius:8px;box-shadow:0 4px 15px #007aff4d;transition:all .3s}.nav-links a.nav-cta,.nav-links a.nav-cta:visited,.nav-links a.nav-cta:hover{color:#fff}.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px #007aff66}.nav-hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;cursor:pointer;color:var(--text)}@media(max-width:768px){.nav-links{display:none}.nav-hamburger{display:flex}}.container{max-width:760px;margin:0 auto;padding:0 24px}.container-wide{max-width:1100px;margin:0 auto;padding:0 24px}@keyframes heroShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.blog-hero{padding:80px 24px 56px;background:linear-gradient(135deg,#007aff,#005bbf,#4a5bc7,#6a4fb8,#007aff);background-size:300% 300%;animation:heroShift 12s ease infinite;color:#fff;text-align:center;position:relative;overflow:hidden}.blog-hero:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="g" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,.07)" stroke-width=".5"/></pattern></defs><rect width="100" height="100" fill="url(%23g)"/></svg>');opacity:.6}.blog-hero:after{content:"";position:absolute;top:-40%;left:50%;transform:translate(-50%);width:800px;height:600px;background:radial-gradient(ellipse,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;animation:heroShift 8s ease infinite reverse}.blog-hero-inner{position:relative;z-index:1}.blog-hero h1{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:14px}.blog-hero p{font-size:1.15rem;color:#ffffffd9;max-width:550px;margin:0 auto;line-height:1.7}.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;padding:48px 0 64px}.post-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);transition:all .35s;overflow:hidden;display:flex;flex-direction:column}.post-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px #0000001f;border-color:#007aff4d}.card-visual{display:flex;align-items:center;justify-content:center;height:140px;position:relative;text-decoration:none;overflow:hidden}.card-visual:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><radialGradient id="a" cx="50%25" cy="50%25" r="50%25"><stop offset="0" stop-color="white" stop-opacity=".1"/><stop offset="1" stop-color="white" stop-opacity="0"/></radialGradient></defs><circle cx="30" cy="30" r="60" fill="url(%23a)"/><circle cx="170" cy="160" r="50" fill="url(%23a)"/></svg>');opacity:.8}.card-visual:after{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="d" width="12" height="12" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,.12)"/></pattern></defs><rect width="100" height="100" fill="url(%23d)"/></svg>')}.card-emoji{font-size:3rem;position:relative;z-index:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2));transition:transform .35s}.post-card:hover .card-emoji{transform:scale(1.15)}.card-visual--image{padding:0}.card-visual--image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.post-card:hover .card-visual--image img{transform:scale(1.04)}.card-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex-grow:1}.card-meta{display:flex;align-items:center;gap:12px;margin-bottom:10px}.card-meta time{font-size:.85rem;color:var(--text-light)}.reading-time{font-size:.78rem;font-weight:600;color:var(--blue);background:#007aff14;padding:2px 10px;border-radius:9999px}.card-body h2{font-size:1.25rem;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:10px}.card-body h2 a{color:inherit;text-decoration:none}.card-body h2 a:hover{color:var(--blue)}.card-body>p{color:var(--text-light);font-size:.95rem;line-height:1.65;flex-grow:1}.card-body .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.tag{display:inline-block;font-size:.73rem;font-weight:600;color:var(--blue);background:#007aff14;padding:3px 10px;border-radius:9999px;letter-spacing:.02em}.post-header{padding:88px 24px 48px;color:#fff;text-align:center;position:relative;overflow:hidden}.post-header-pattern{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1;pointer-events:none}.post-header:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="g" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,.05)" stroke-width=".5"/></pattern></defs><rect width="100" height="100" fill="url(%23g)"/></svg>');z-index:1}.post-header--clean:before{display:none}.post-header-content{position:relative;z-index:2;max-width:760px;margin:0 auto}.post-header-emoji{display:block;font-size:3.2rem;margin-bottom:20px;filter:drop-shadow(0 4px 16px rgba(0,0,0,.25))}.post-header h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:18px;text-shadow:0 2px 16px rgba(0,0,0,.15)}.post-meta{font-size:.95rem;color:#ffffffbf}.post-meta span+span:before{content:" · "}.post-header--image{padding:0;min-height:380px;display:flex;align-items:flex-end}.post-header-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.post-header-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.15) 60%,transparent 100%);z-index:1}.post-header--image .post-header-content{padding:0 24px 40px;text-align:left}.post-header--image h1{text-shadow:0 2px 20px rgba(0,0,0,.5)}@media(min-width:768px){.post-header--image{min-height:440px}.post-header--image .post-header-content{padding:0 48px 48px}}.post-body{padding:48px 0 72px}.post-body h2{font-size:1.6rem;font-weight:700;color:var(--text);margin:48px 0 16px;letter-spacing:-.01em}.post-body h3{font-size:1.3rem;font-weight:700;color:var(--text);margin:36px 0 12px}.post-body p{margin-bottom:20px;line-height:1.8}.post-body ul,.post-body ol{margin:0 0 20px 24px;line-height:1.8}.post-body li{margin-bottom:8px}.post-body blockquote{position:relative;border:none;border-left:4px solid var(--blue);margin:40px 0;padding:28px 32px 28px 36px;background:linear-gradient(135deg,#007aff0a,#6a4fb80a);border-radius:0 var(--radius) var(--radius) 0;font-style:normal}.post-body blockquote p{font-size:1.2rem;font-weight:500;line-height:1.7;color:var(--text);margin-bottom:0}.post-body blockquote:before{content:"“";position:absolute;top:-8px;left:16px;font-size:4rem;font-family:Georgia,serif;color:var(--blue);opacity:.2;line-height:1}.post-body code{font-family:SF Mono,Fira Code,Fira Mono,monospace;font-size:.9em;background:var(--bg-alt);padding:2px 6px;border-radius:4px}.post-body pre{background:#1e293b;color:#e2e8f0;padding:20px 24px;border-radius:var(--radius);margin:28px 0;overflow-x:auto;line-height:1.6}.post-body pre code{background:none;padding:0;font-size:.92rem}.post-body hr{border:none;border-top:1px solid var(--border);margin:48px 0}.post-body strong{font-weight:700;color:var(--text)}.post-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}.post-body a:hover{color:var(--blue-dark)}.post-body img{margin:28px 0;box-shadow:0 4px 20px #00000014}.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-light);font-size:.95rem;font-weight:500;margin-bottom:12px}.back-link:hover{color:var(--blue)}.site-footer{border-top:1px solid var(--border);padding:22px 0}.footer-inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.footer-inner span{font-size:.95rem;color:#aaa}.footer-links{display:flex;gap:20px}.footer-links a{font-size:.92rem;color:#aaa}.footer-links a:hover{color:var(--text-light)}@media(max-width:768px){.posts-grid{grid-template-columns:1fr;gap:20px;padding:32px 0 48px}.blog-hero{padding:60px 24px 40px}.post-header{padding:64px 24px 36px}.card-visual{height:120px}.post-body blockquote{padding:20px 20px 20px 24px;margin:28px 0}.post-body blockquote p{font-size:1.05rem}.post-body blockquote:before{font-size:3rem;top:-4px;left:10px}}