:root{--font: "DM Sans", system-ui, sans-serif;--font-jp: "Zen Kaku Gothic New", "DM Sans", system-ui, sans-serif;--font-round: "Zen Maru Gothic", "Zen Kaku Gothic New", system-ui, sans-serif;--mono: "DM Mono", ui-monospace, monospace;--bg: oklch(97.6% .008 75);--bg-2: oklch(96% .013 75);--bg-ink: oklch(24% .014 90);--card: oklch(100% 0 0);--ink-1: oklch(24% .014 252);--ink-2: oklch(43% .014 252);--ink-3: oklch(60% .01 252);--border: oklch(89.5% .011 75);--border-strong: oklch(82% .013 75);--blue: #5b8def;--blue-bg: oklch(96% .036 250);--green: #4eaf8a;--green-bg: oklch(96% .036 165);--pink: #e0689b;--pink-bg: oklch(96% .036 350);--orange: #e89a3c;--orange-bg: oklch(96.5% .04 68);--hl-yellow: #f4ff69;--primary: oklch(60% .165 52);--primary-h: oklch(54% .175 52);--primary-bg: oklch(96% .03 60);--shadow-sm: 0 1px 3px oklch(15% .01 252 / .06), 0 1px 2px oklch(15% .01 252 / .04);--shadow-md: 0 4px 16px oklch(15% .01 252 / .08), 0 1px 3px oklch(15% .01 252 / .05);--shadow-lg: 0 18px 48px oklch(15% .01 252 / .12), 0 5px 14px oklch(15% .01 252 / .06);--r: 16px}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body.blog-body{background:var(--bg);color:var(--ink-1);font-size:16px;line-height:1.85;font-family:var(--font-jp);-webkit-font-smoothing:antialiased;margin:0;padding:0;overflow-x:clip;text-rendering:optimizeLegibility}.acc-blue{--acc: var(--blue);--acc-bg: var(--blue-bg)}.acc-green{--acc: var(--green);--acc-bg: var(--green-bg)}.acc-pink{--acc: var(--pink);--acc-bg: var(--pink-bg)}.acc-orange{--acc: var(--primary);--acc-bg: var(--primary-bg)}.blog-stripe{display:flex;height:5px}.blog-stripe>div{flex:1}.blog-article{margin:0 auto;padding:56px 32px 0;max-width:1180px}.blog-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px;color:var(--ink-3);font-size:12px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}.blog-eyebrow .etag{border-radius:4px;background:var(--hl-yellow);padding:4px 10px;color:#2f2908;font-size:12px;letter-spacing:.06em}.blog-eyebrow .ecat{display:inline-flex;align-items:center;gap:7px;color:var(--acc);font-weight:500}.blog-eyebrow .ecat:before{display:inline-block;flex-shrink:0;border-radius:50%;background:var(--acc);width:7px;height:7px;content:""}.blog-eyebrow .edot{display:inline-block;flex-shrink:0;border-radius:50%;background:var(--border-strong);width:4px;height:4px}h1.blog-title{margin:0 0 24px;color:var(--ink-1);font-weight:700;font-size:clamp(28px,5vw,44px);line-height:1.32;font-family:var(--font-round);letter-spacing:-.02em;text-wrap:balance}.blog-deck{margin:0 0 40px;max-width:62ch;color:var(--ink-2);font-weight:500;font-size:17px;line-height:1.9;font-family:var(--font-round);text-wrap:pretty}.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:48px;border-top:2px solid var(--ink-1);border-bottom:1px solid var(--border);padding:18px 0}.blog-author{display:flex;align-items:center;gap:11px}.blog-avatar{display:grid;flex-shrink:0;place-items:center;box-shadow:0 4px 12px oklch(60% .165 52 / .28),inset 0 1px #ffffff4d;border-radius:12px;background:var(--primary);width:42px;height:42px;overflow:hidden;color:#fff;font-weight:700;font-size:14px;font-family:var(--font);letter-spacing:-.5px}.blog-avatar img{width:100%;height:100%;object-fit:cover}.blog-author-info{display:flex;flex-direction:column;line-height:1.35}.blog-author-name{color:var(--ink-1);font-weight:600;font-size:14px;font-family:var(--font)}.blog-author-role{color:var(--ink-3);font-size:10.5px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}.blog-meta-item{color:var(--ink-3);font-size:11.5px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}.blog-meta-item b{color:var(--ink-1);font-weight:500}.blog-meta-spacer{flex:1}.blog-hero{display:flex;position:relative;justify-content:center;align-items:center;margin:0 0 56px;box-shadow:var(--shadow-sm);border:1px solid var(--border);border-radius:20px;background:repeating-linear-gradient(135deg,transparent 0 18px,oklch(24% .014 252 / .035) 18px 19px),var(--bg-2);aspect-ratio:1180/460;width:100%;min-height:220px;overflow:hidden}.blog-hero:before{position:absolute;top:0;right:0;left:0;background:linear-gradient(90deg,var(--blue) 0 25%,var(--green) 25% 50%,var(--pink) 50% 75%,var(--orange) 75% 100%);height:5px;content:""}.blog-hero img{width:100%;height:100%;object-fit:cover}.blog-hero-label{color:var(--ink-3);font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}.blog-hero-caption{position:absolute;right:0;bottom:14px;left:0;color:var(--ink-3);font-size:10.5px;font-family:var(--mono);letter-spacing:.1em;text-align:center;text-transform:uppercase}.blog-body-grid{display:grid;grid-template-columns:210px 1fr;gap:72px;padding-bottom:100px}.blog-sidebar{position:sticky;top:96px;align-self:start}.blog-toc-label{margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:10px;color:var(--ink-3);font-size:10.5px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}.blog-toc-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}.blog-toc-list a{display:block;transition:color .15s,border-color .15s,background .15s;border-left:2px solid transparent;border-radius:0 7px 7px 0;padding:5px 10px;color:var(--ink-3);font-size:12.5px;line-height:1.5;font-family:var(--font-jp);text-decoration:none}.blog-toc-list a:hover{background:var(--bg-2);color:var(--ink-1)}.blog-toc-list a.toc-active{border-left-color:var(--primary);background:var(--primary-bg);color:var(--ink-1);font-weight:700}.blog-toc-list li.toc-h3 a{padding-left:20px;font-size:12px}.blog-prose{max-width:68ch}.blog-prose>*+*{margin-top:1.5em}.blog-prose h2{display:flex;align-items:baseline;gap:12px;margin:2.5em 0 .6em;scroll-margin-top:100px;color:var(--ink-1);font-weight:700;font-size:27px;line-height:1.45;font-family:var(--font-round);letter-spacing:-.01em}.blog-prose h2:before{flex-shrink:0;transform:translateY(-2px);border-radius:3px;background:var(--primary);width:10px;height:10px;content:""}.blog-prose h3{margin:2em 0 .4em;scroll-margin-top:100px;color:var(--ink-1);font-weight:700;font-size:19px;font-family:var(--font-round);letter-spacing:-.005em}.blog-prose p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.95}.blog-prose a{transition:background .15s;background:linear-gradient(180deg,transparent 62%,var(--hl-yellow) 62%);padding:0 2px;color:var(--ink-1);text-decoration:none}.blog-prose a:hover{background:var(--hl-yellow)}.blog-prose strong{color:var(--ink-1);font-weight:700}.blog-prose em{font-style:italic}.blog-prose code{border:1px solid var(--border);border-radius:5px;background:var(--bg-2);padding:1px 6px;color:var(--ink-1);font-size:.85em;font-family:var(--mono)}.blog-prose blockquote{position:relative;margin:2.5em 0;border-radius:18px;background:var(--bg-ink);padding:38px 40px 34px;overflow:hidden;color:#f6f1eb}.blog-prose blockquote:before{position:absolute;top:0;right:0;left:0;background:linear-gradient(90deg,var(--blue) 0 25%,var(--green) 25% 50%,var(--pink) 50% 75%,var(--orange) 75% 100%);height:5px;content:""}.blog-prose blockquote p{color:#f6f1eb;font-weight:500;font-size:22px;line-height:1.7;font-family:var(--font-round)}.blog-prose blockquote strong{color:var(--hl-yellow)}.blog-prose pre{border-radius:14px;background:var(--bg-ink);padding:24px 26px;overflow-x:auto;color:#dfd6c9;font-size:13px;line-height:1.7;font-family:var(--mono)}.blog-prose pre code{border:0;background:transparent;padding:0;color:inherit;font-size:inherit}.blog-prose ol,.blog-prose ul{display:flex;flex-direction:column;gap:12px;margin:0;padding-left:0;list-style:none}.blog-prose ol{counter-reset:blist}.blog-prose ol li,.blog-prose ul li{position:relative;padding-left:38px;color:var(--ink-2);line-height:1.85}.blog-prose ol li{counter-increment:blist}.blog-prose ol li:before{position:absolute;top:4px;left:0;border-radius:5px;background:var(--hl-yellow);padding:1px 6px;content:counter(blist,decimal-leading-zero);color:#342e0d;font-weight:500;font-size:11px;line-height:1.4;font-family:var(--mono)}.blog-prose ul li:before{position:absolute;top:.78em;left:6px;border-radius:3px;background:var(--primary);width:9px;height:9px;content:""}.blog-prose hr{margin:2.5em 0;border:0;border-top:1px solid var(--border)}.blog-prose table{margin:2.5em 0;box-shadow:var(--shadow-sm);border:1px solid var(--border);border-radius:14px;border-collapse:separate;border-spacing:0;background-color:var(--card);width:100%;table-layout:auto;overflow:hidden;font-size:14px;line-height:1.7;font-family:var(--font-jp)}@media(max-width:768px){.blog-prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}.blog-prose th,.blog-prose td{vertical-align:top;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 18px;text-align:left}.blog-prose th:last-child,.blog-prose td:last-child{border-right:none}.blog-prose tr:last-child td{border-bottom:none}.blog-prose th{background-color:var(--bg-2);color:var(--ink-1);font-weight:700;font-size:13px;font-family:var(--font);letter-spacing:.02em}.blog-prose td:first-child,.blog-prose th:first-child{color:var(--ink-1);font-weight:700}.blog-prose tr:nth-child(2n) td{background-color:#f7f1e866}.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}.blog-tags a{transition:background .15s,border-color .15s,color .15s;border:1px solid var(--border);border-radius:999px;background:var(--bg-2);padding:6px 12px;color:var(--ink-2);font-size:11px;font-family:var(--mono);letter-spacing:.06em;text-decoration:none;text-transform:uppercase}.blog-tags a:hover{border-color:#cdc072;background:var(--hl-yellow);color:#2f2908}.blog-author-card{display:grid;position:relative;grid-template-columns:58px 1fr;align-items:start;gap:20px;margin-top:48px;box-shadow:var(--shadow-sm);border:1px solid var(--border);border-radius:var(--r);background:var(--card);padding:26px 28px;overflow:hidden}.blog-author-card:before{position:absolute;top:0;bottom:0;left:0;background:var(--primary);width:5px;content:""}.blog-author-card .blog-avatar{border-radius:16px;width:58px;height:58px;font-size:20px}.blog-author-card-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:6px}.blog-author-card h4{margin:0;color:var(--ink-1);font-weight:700;font-size:16.5px;font-family:var(--font-round)}.blog-author-card-role{display:inline-block;border:1px solid var(--border);border-radius:999px;background:var(--bg-2);padding:2px 10px;color:var(--ink-2);font-size:11px;font-family:var(--mono);letter-spacing:.04em}.blog-author-card p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.75;font-family:var(--font-jp)}footer.blog-footer{margin-top:0;background:#1a1812;padding:60px 32px 34px;color:#a8a49e}.blog-footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin:0 auto;max-width:1180px}.blog-footer-brand{display:inline-flex;align-items:center;gap:11px;color:#f6f1eb;font-weight:600;font-size:17px;font-family:var(--font);text-decoration:none}.blog-footer-brand .fmark{display:flex;justify-content:center;align-items:center;border-radius:10px;background:var(--primary);width:34px;height:34px;color:#fff;font-weight:700;font-size:17px;letter-spacing:-.5px}.blog-footer-about{margin:18px 0 0;max-width:320px;color:#96918c;font-size:13px;line-height:1.9}footer.blog-footer h5{margin:0 0 16px;color:#c8c3bd;font-weight:600;font-size:12px;font-family:var(--font);letter-spacing:.08em;text-transform:uppercase}footer.blog-footer ul{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;font-size:13.5px;font-family:var(--font-jp);list-style:none}footer.blog-footer a{transition:color .15s;color:#a29e98;text-decoration:none}footer.blog-footer a:hover{color:#e9e4dd}.blog-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;margin:48px auto 0;border-top:1px solid oklch(32% .01 75);padding-top:22px;max-width:1180px;color:#7e7a74;font-size:12px;font-family:var(--font)}@media(max-width:900px){.blog-body-grid{grid-template-columns:1fr;gap:8px}.blog-sidebar{display:none}.blog-footer-inner{grid-template-columns:1fr 1fr}.blog-footer-inner>div:first-child{grid-column:1 / -1}.blog-article{padding:32px 20px 0}}@media(max-width:600px){.blog-footer-inner{grid-template-columns:1fr}}
