:root{--ink:#14212b;--ink-soft:#3a4a57;--paper:#f3f6f8;--paper-2:#e7eef2;--line:#c5d2dc;--accent:#0f7a6c;--accent-deep:#0a5a50;--accent-soft:#d5efe9;--warn:#8a5a16;--ad-bg:#edf2f5;--radius:6px;--max:68rem;--font-display:"Sora", "Hiragino Sans", "Noto Sans JP", sans-serif;--font-body:"Source Sans 3", "Hiragino Sans", "Noto Sans JP", sans-serif;--shadow-soft:0 18px 40px #14212b14}*,:before,:after{box-sizing:border-box}html{color-scheme:light;scroll-behavior:smooth}body{min-height:100vh;color:var(--ink);font-family:var(--font-body);background:radial-gradient(1200px 500px at 12% -10%, #0f7a6c29, transparent 55%), radial-gradient(900px 420px at 100% 0%, #3a4a571f, transparent 50%), linear-gradient(180deg, #eef4f7 0%, var(--paper) 38%, #f7fafb 100%);margin:0;font-size:1.0625rem;line-height:1.65}img{max-width:100%;height:auto}a{color:var(--accent-deep);text-underline-offset:.15em}a:hover{color:var(--accent)}h1,h2,h3,.brand{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.2}.skip-link{background:var(--ink);color:#fff;z-index:100;padding:.5rem .75rem;position:absolute;top:-3rem;left:1rem}.skip-link:focus{top:1rem}.site-header{z-index:40;backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);background:#f3f6f8d1;position:sticky;top:0}.site-header__inner,.site-footer__inner,.wrap{width:min(100% - 2rem, var(--max));margin-inline:auto}.site-header__inner{justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 0;display:flex}.brand{color:var(--ink);align-items:baseline;gap:.35rem;font-size:1.15rem;font-weight:700;text-decoration:none;display:inline-flex}.brand span{color:var(--accent);font-weight:600}.nav{flex-wrap:wrap;justify-content:flex-end;gap:.65rem 1rem;display:flex}.nav a{color:var(--ink-soft);font-size:.95rem;font-weight:600;text-decoration:none}.nav a:hover,.nav a[aria-current=page]{color:var(--accent-deep)}.site-footer{border-top:1px solid var(--line);background:color-mix(in srgb, white 55%, var(--paper-2));margin-top:4rem}.site-footer__inner{gap:1rem;padding:2rem 0 2.5rem;display:grid}.site-footer nav{flex-wrap:wrap;gap:.75rem 1.25rem;display:flex}.site-footer small{color:var(--ink-soft)}.btn{border-radius:var(--radius);background:var(--accent);color:#fff;min-height:2.75rem;font:inherit;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.4rem;padding:.65rem 1.15rem;font-weight:700;text-decoration:none;transition:transform .18s,background .18s;display:inline-flex}.btn:hover{background:var(--accent-deep);color:#fff;transform:translateY(-1px)}.btn:focus-visible,.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,.check-item input:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 45%, white);outline-offset:2px}.btn--ghost{border-color:var(--line);color:var(--ink);background:0 0}.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-soft)}.hero{isolation:isolate;padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(2rem,5vw,3.5rem);position:relative;overflow:clip}.hero:before{content:"";z-index:-1;background:linear-gradient(115deg,#14212beb 0%,#0f7a6cc7 48%,#14212be0 100%) 0 0/cover,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08'%3E%3Cpath d='M0 40h160M0 80h160M0 120h160M40 0v160M80 0v160M120 0v160'/%3E%3C/g%3E%3C/svg%3E") 0 0/140px 140px;animation:18s ease-in-out infinite alternate hero-shift;position:absolute;inset:0}@keyframes hero-shift{0%{background-position:50%,0 0}to{background-position:50%,28px 18px}}.hero__inner{color:#f7fbfa;width:min(100% - 2rem,46rem);margin-inline:auto}.hero .brand-mark{font-family:var(--font-display);letter-spacing:-.04em;margin:0 0 1rem;font-size:clamp(2.6rem,8vw,4.4rem);font-weight:700;line-height:.95;animation:.7s both rise;display:block}.hero h1{color:#e8f7f3;margin:0 0 .9rem;font-size:clamp(1.25rem,2.8vw,1.7rem);font-weight:600;animation:.85s both rise}.hero p{color:#f7fbfae0;max-width:36rem;margin:0 0 1.5rem;animation:1s both rise}.hero__cta{flex-wrap:wrap;gap:.75rem;animation:1.1s both rise;display:flex}.hero .btn{color:var(--ink);background:#fff}.hero .btn:hover{background:var(--accent-soft);color:var(--accent-deep)}.hero .btn--ghost{color:#fff;background:0 0;border-color:#ffffff73}.hero .btn--ghost:hover{color:#fff;background:#ffffff1f}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.section{padding:2.75rem 0 0}.section h2{margin:0 0 .5rem;font-size:clamp(1.4rem,3vw,1.85rem)}.section>.lede,.section .lede{color:var(--ink-soft);max-width:40rem;margin:0 0 1.25rem}.topic-grid,.feature-list,.tool-list{gap:.85rem;display:grid}@media (width>=720px){.topic-grid,.feature-list,.tool-list{grid-template-columns:repeat(3,1fr)}}.topic-link,.feature-link,.tool-link{color:inherit;border-bottom:1px solid var(--line);padding:1rem 1.05rem;text-decoration:none;transition:background .16s,border-color .16s,padding-left .16s;display:block}.topic-link:hover,.feature-link:hover,.tool-link:hover{background:color-mix(in srgb, white 70%, var(--accent-soft));border-color:var(--accent);padding-left:1.2rem}.topic-link strong,.feature-link strong,.tool-link strong{font-family:var(--font-display);margin-bottom:.2rem;display:block}.topic-link span,.feature-link span,.tool-link span{color:var(--ink-soft);font-size:.95rem}.prose{max-width:44rem}.prose :where(h2,h3){margin-top:2rem;scroll-margin-top:5rem}.prose :where(p,ul,ol){margin:.85rem 0}.prose :where(ul,ol){padding-left:1.2rem}.prose pre,.prose .template{border-radius:var(--radius);color:#e8f0f4;background:#132029;padding:1rem 1.1rem;font-size:.95rem;line-height:1.55;overflow-x:auto}.cta-box{border-left:4px solid var(--accent);background:color-mix(in srgb, white 60%, var(--accent-soft));margin:1.75rem 0;padding:1.15rem 1.2rem}.cta-box p{margin:0 0 .85rem}.meta-line{color:var(--ink-soft);margin:0 0 1.25rem;font-size:.95rem}.page-title{margin:1.5rem 0 .5rem;font-size:clamp(1.7rem,4vw,2.4rem)}.ad-slot{border:1px dashed var(--line);background:var(--ad-bg);min-height:5.5rem;color:var(--ink-soft);letter-spacing:.04em;place-items:center;margin:1.75rem 0;font-size:.85rem;display:grid}.tool-shell{gap:1.25rem;display:grid}@media (width>=900px){.tool-shell{grid-template-columns:1.1fr .9fr;align-items:start}}.panel{border:1px solid var(--line);box-shadow:var(--shadow-soft);background:#ffffffc7;padding:1.15rem}.field{gap:.35rem;margin-bottom:.9rem;display:grid}.field label{font-size:.95rem;font-weight:700}.field input,.field textarea,.field select{border:1px solid var(--line);border-radius:var(--radius);width:100%;font:inherit;color:var(--ink);background:#fff;padding:.65rem .75rem}.field textarea{resize:vertical;min-height:6rem}.tool-actions{flex-wrap:wrap;gap:.6rem;display:flex}.output{white-space:pre-wrap;border-radius:var(--radius);color:#e8f0f4;background:#132029;min-height:12rem;padding:.9rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92rem;line-height:1.5}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.check-list{gap:.55rem;display:grid}.check-item{border-bottom:1px solid var(--line);align-items:flex-start;gap:.65rem;padding:.55rem .2rem;display:flex}.check-item input{width:1.1rem;height:1.1rem;margin-top:.3rem}.progress{color:var(--accent-deep);font-weight:700}.note{color:var(--ink-soft);font-size:.92rem}.related{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.25rem}.related ul{padding-left:1.1rem}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero:before,.hero .brand-mark,.hero h1,.hero p,.hero__cta,.btn,.topic-link,.feature-link,.tool-link{transition:none!important;animation:none!important}}