@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap";:root{--ink:#1b2926;--muted:#687471;--line:#dfe2dc;--paper:#f7f6f2;--white:#fff;--green:#0e7c66;--green-dark:#075f50;--mint:#d9eee7;--yellow:#edb93f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;margin:0;font-family:Manrope,Noto Sans JP,sans-serif}a{color:inherit;text-decoration:none}.site-shell{min-height:100vh}.topbar{border-bottom:1px solid var(--line);z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f7f6f2f0;justify-content:space-between;height:72px;padding:0 40px;position:sticky;top:0}.brand,.topbar{align-items:center;display:flex}.brand{letter-spacing:-.03em;gap:12px;font-weight:700}.brand em{color:var(--green);font-style:normal}.brand-mark{color:#fff;background:var(--green);border-radius:7px 7px 7px 2px;place-items:center;width:32px;height:32px;font-family:DM Mono;display:grid}.topnav{align-items:center;gap:32px;font-size:13px;font-weight:600;display:flex}.topnav a:hover{color:var(--green)}.menu-button{background:0 0;border:0;padding:8px;display:none}.menu-button span{background:var(--ink);width:22px;height:2px;margin:5px;display:block}.body-grid{grid-template-columns:260px minmax(0,1fr);max-width:1500px;margin:0 auto;display:grid}.sidebar{border-right:1px solid var(--line);height:calc(100vh - 72px);min-height:calc(100vh - 72px);padding:34px 26px 40px 40px;position:sticky;top:72px;overflow:auto}.start-link{color:var(--green-dark);margin-bottom:28px;padding:9px 10px;font-size:13px;font-weight:700;display:block}.nav-group{margin-bottom:27px}.nav-group p{color:#939b98;letter-spacing:.13em;text-transform:uppercase;margin:0 0 7px 10px;font-size:10px;font-weight:700}.nav-group a{color:#50605c;border-radius:7px;gap:11px;padding:8px 10px;font-size:13px;display:flex}.nav-group a span{color:#a6aeab;font-family:DM Mono;font-size:11px}.nav-group a.router-link-active,.nav-group a:hover{color:var(--green-dark);background:#e7efeb}.sidebar-note{background:var(--ink);color:#fff;border-radius:9px;margin-top:38px;padding:18px}.sidebar-note span{color:#84c9b9;letter-spacing:.12em;font:500 9px DM Mono}.sidebar-note strong{margin:8px 0;font-size:13px;display:block}.sidebar-note p{color:#b9c2bf;margin:0;font-size:11px;line-height:1.7}.main-content,.post-card{min-width:0}.hero{border-bottom:1px solid var(--line);min-height:610px;padding:94px calc(max(6vw,64px)) 74px;position:relative;overflow:hidden}.hero:after{content:"";width:460px;height:460px;box-shadow:0 0 0 54px var(--paper),0 0 0 55px #e6e8e3,0 0 0 109px var(--paper),0 0 0 110px #ecece8;z-index:-1;border:1px solid #d8ded9;border-radius:50%;position:absolute;top:65px;right:-120px}.eyebrow,.kicker{color:var(--green);letter-spacing:.13em;font:500 10px DM Mono}.eyebrow span{background:var(--green);vertical-align:middle;width:30px;height:1px;margin-right:10px;display:inline-block}.hero h1{letter-spacing:-.055em;max-width:850px;margin:28px 0 22px;font-size:calc(clamp(42px,5.1vw,76px));line-height:1.13}.hero h1 em{color:var(--green);font-style:normal}.hero-copy{max-width:600px;color:var(--muted);margin:0;font-size:16px;line-height:1.9}.hero-actions{gap:12px;margin:34px 0 62px;display:flex}.button{border-radius:5px;justify-content:center;align-items:center;gap:28px;min-height:47px;padding:0 22px;font-size:13px;font-weight:700;display:inline-flex}.button.primary{color:#fff;background:var(--green);box-shadow:0 8px 18px #0e7c662e}.button.primary:hover{background:var(--green-dark);transform:translateY(-1px)}.button.secondary{background:#ffffff80;border:1px solid #cdd3ce}.stack-diagram{align-items:center;gap:24px;display:flex}.stack-diagram>div{border:1px solid var(--line);background:#ffffffbf;border-radius:7px;align-items:center;gap:14px;width:210px;padding:15px;display:flex}.stack-diagram b{color:#fff;background:#40514d;border-radius:50%;place-items:center;width:34px;height:34px;font-family:serif;display:grid}.stack-diagram b.nuxt{background:var(--green);font-family:Manrope}.stack-diagram small,.stack-diagram strong{display:block}.stack-diagram strong{font-size:12px}.stack-diagram small{color:#8b9693;margin-top:3px;font-size:9px}.stack-diagram i{color:#9ba5a2;text-align:center;font-style:normal}.stack-diagram i small{font:400 8px DM Mono;display:block}.path-section{background:#fff;padding:86px calc(max(6vw,64px)) 100px}.section-heading{justify-content:space-between;align-items:end;margin-bottom:38px;display:flex}.section-heading h2{letter-spacing:-.04em;margin:10px 0 0;font-size:34px}.section-heading>p{max-width:350px;color:var(--muted);font-size:13px;line-height:1.8}.step-grid{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(3,1fr);display:grid}.step-card{border-right:1px solid var(--line);flex-direction:column;min-height:260px;padding:25px 28px;transition:all .2s;display:flex}.step-card:last-child{border:0}.step-card:hover{background:#f4f8f5;transform:translateY(-4px)}.step-no{color:var(--green);font:500 11px DM Mono}.step-card h3{margin:38px 0 12px;font-size:20px}.step-card p{color:var(--muted);font-size:12px;line-height:1.8}.step-card footer{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.step-card footer small{color:#9aa29f;font:400 9px DM Mono}.step-card footer b{color:var(--green)}.latest-posts,.post-page,.posts-page{background:#fff;padding:86px calc(max(6vw,64px)) 100px}.latest-posts{border-top:1px solid var(--line)}.post-back,.post-card__link-text,.section-link{color:var(--green);font-size:13px;font-weight:700}.latest-posts__intro{color:var(--muted);margin:-18px 0 30px;font-size:12px}.latest-posts__intro code{color:#42544e;background:#edf1ef;border-radius:4px;padding:4px 7px;font-family:DM Mono;font-size:11px}.posts-heading{max-width:700px;margin-bottom:42px}.post-article h1,.posts-heading h1{letter-spacing:-.045em;margin:11px 0 16px;font-size:46px}.posts-heading p{color:var(--muted);margin:0;line-height:1.9}.posts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.post-card{border:1px solid var(--line);background:var(--white);border-radius:8px;transition:transform .18s,box-shadow .18s;overflow:hidden}.post-card:hover{transform:translateY(-3px);box-shadow:0 18px 32px #1829241a}.post-card__link{flex-direction:column;height:100%;display:flex}.post-card__media,.post-card__placeholder{aspect-ratio:16/9}.post-card__media img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.post-card__placeholder{color:var(--green);background:#deede7;place-items:center;font-family:DM Mono;font-size:30px;font-weight:700;display:grid}.post-card__body{flex-direction:column;flex:1;padding:20px;display:flex}.post-article time,.post-card time{color:#84908c;font:400 10px DM Mono}.post-card h3{letter-spacing:-.03em;margin:10px 0 9px;font-size:19px}.post-card p{color:var(--muted);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0 0 20px;font-size:12px;line-height:1.8;display:-webkit-box;overflow:hidden}.post-card__link-text{margin-top:auto}.posts-notice{border:1px solid var(--line);color:#45534f;background:#f1f4f1;border-radius:8px;padding:24px}.posts-notice strong{color:var(--ink);display:block}.posts-notice p{margin:6px 0 0;font-size:13px;line-height:1.7}.posts-notice button{color:#fff;background:var(--green);cursor:pointer;border:0;border-radius:5px;margin-top:15px;padding:9px 14px;font:600 12px Manrope,Noto Sans JP,sans-serif}.posts-notice--error{background:#fff5f2;border-color:#eed3cb}.posts-notice--error strong{color:#a34528}.post-page{max-width:980px;margin:0 auto}.post-back{margin-bottom:46px;display:inline-block}.post-article{max-width:720px}.post-article header{border-bottom:1px solid var(--line);padding-bottom:34px}.post-article__cover{-o-object-fit:cover;object-fit:cover;border-radius:8px;width:100%;max-height:500px;margin:38px 0}.post-article__content{color:#35423f;font-size:15px;line-height:2}.post-article__content :is(h2,h3){color:var(--ink);margin-top:2em}.post-article__content a{color:var(--green);text-decoration:underline}.post-article__content img{border-radius:7px;max-width:100%;height:auto}.promise{background:var(--ink);color:#fff;padding:72px calc(max(6vw,64px))}.promise>span{color:#77c3b2;letter-spacing:.1em;font:500 10px DM Mono}.promise blockquote{letter-spacing:-.03em;margin:24px 0 15px;font-size:32px}.promise p{color:#b9c4c1;max-width:610px;margin:0;font-size:14px;line-height:1.9}.doc-page{max-width:1080px;margin:0 auto;padding:70px 64px 100px}.doc-header{border-bottom:1px solid var(--line);max-width:780px;padding-bottom:48px}.breadcrumbs{color:#8b9693;gap:10px;margin-bottom:48px;font-size:11px;display:flex}.breadcrumbs a,.doc-category{color:var(--green)}.doc-category{letter-spacing:.12em;font:500 10px DM Mono}.doc-header h1{letter-spacing:-.045em;margin:12px 0 18px;font-size:46px;line-height:1.25}.doc-description{color:var(--muted);font-size:16px;line-height:1.9}.doc-meta{color:#909995;gap:22px;margin-top:24px;font:400 10px DM Mono;display:flex}.article-grid{grid-template-columns:minmax(0,720px) 190px;gap:70px;padding-top:42px;display:grid}.article-aside{color:#808b87;border-left:1px solid var(--line);height:max-content;padding-left:18px;font-size:11px;position:sticky;top:110px}.article-aside span{color:var(--green);letter-spacing:.1em;font:500 9px DM Mono}.article-aside p{line-height:1.7}.prose{color:#35423f;font-size:15px;line-height:2}.prose h2{color:var(--ink);letter-spacing:-.03em;margin:58px 0 18px;padding-top:8px;font-size:27px}.prose h2:first-child{margin-top:0}.prose h3{color:var(--ink);margin-top:38px}.prose a{color:var(--green);text-decoration:underline}.prose code{color:#b44926;background:#eeeae4;border-radius:4px;padding:2px 5px;font-family:DM Mono;font-size:.85em}.prose pre{color:#d7e4df;background:#17231f;border-radius:8px;padding:20px;line-height:1.65;overflow:auto}.prose pre code{color:inherit;background:0 0;padding:0}.prose table{border-collapse:collapse;width:100%;margin:25px 0}.prose td,.prose th{border-bottom:1px solid var(--line);text-align:left;padding:12px}.prose th{color:var(--ink);font-size:12px}.callout{border-left:3px solid var(--green);background:#eaf3ef;border-radius:0 7px 7px 0;grid-template-columns:64px 1fr;gap:14px;margin:28px 0;padding:18px;display:grid}.callout strong{color:var(--green);font:500 10px DM Mono}.callout p{margin:0}.code-block{background:#13231e;border:1px solid #263a34;border-radius:9px;margin:28px 0;overflow:hidden;box-shadow:0 8px 24px #18292414}.code-toolbar{color:#91aaa2;letter-spacing:.04em;text-transform:uppercase;background:#182a24;border-bottom:1px solid #2a3e38;justify-content:space-between;align-items:center;min-height:42px;padding:0 10px 0 18px;font:500 10px DM Mono;display:flex}.code-toolbar button{color:#dfeae6;cursor:pointer;background:#20362f;border:1px solid #3b514a;border-radius:5px;justify-content:center;align-items:center;gap:7px;min-width:82px;height:30px;font:500 11px Manrope,Noto Sans JP,sans-serif;transition:all .16s;display:inline-flex}.code-toolbar button:hover{color:#fff;background:#29473d;border-color:#6ca393}.code-toolbar button:focus-visible{outline-offset:2px;outline:2px solid #89d4c1}.prose .code-block pre{color:#e7f0ed;background:#13231e;border-radius:0;margin:0;padding:20px 22px;line-height:1.75;overflow:auto}.prose .code-block pre code{color:#e7f0ed;background:0 0;padding:0}.prose .code-block pre code span{color:#e7f0ed!important}@media (width<=900px){.article-grid,.body-grid,.posts-grid,.step-grid{grid-template-columns:1fr}.sidebar{z-index:15;background:var(--paper);height:auto;padding:28px;display:none;position:fixed;inset:72px 0 0}.menu-button,.sidebar.open{display:block}.topnav{display:none}.doc-page,.hero,.latest-posts,.path-section,.post-page,.posts-page,.promise{padding-left:28px;padding-right:28px}.hero{padding-top:65px}.step-card{border-right:0;border-bottom:1px solid var(--line);min-height:220px}.section-heading{display:block}.section-link{margin-top:18px;display:inline-block}.article-aside{display:none}}@media (width<=600px){.topbar{height:64px;padding:0 20px}.brand{font-size:14px}.hero h1{font-size:39px}.hero-actions{flex-direction:column;align-items:stretch}.stack-diagram{gap:8px}.stack-diagram>div{flex:1;width:auto;padding:10px}.stack-diagram>div span{display:none}.doc-header h1{font-size:36px}.doc-page{padding-top:44px}.promise blockquote{font-size:27px}}