:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;color:#20201e;background:#fff;line-height:1.8;font-synthesis:none;--ink:#20201e;--muted:#5c5c58;--line:#deded8;--accent:#a63e29}
*{box-sizing:border-box}body{margin:0}img{display:block;max-width:100%;height:auto}a{color:inherit;text-underline-offset:.25em}a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.wrap{width:min(100% - 64px,1120px);margin-inline:auto}.skip-link{position:absolute;left:16px;top:12px;padding:10px 16px;background:#fff;z-index:5;transform:translateY(-160%)}.skip-link:focus{transform:none}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:100px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:1.35rem;font-weight:800;line-height:1.4}.brand img{width:34px;height:34px}.brand small{display:block;font-size:.64rem;letter-spacing:.22em;font-weight:600}.header-nav{display:flex;align-items:center;gap:28px;font-size:.875rem;font-weight:650}.header-nav a{padding:12px 0}.header-nav a:first-child{color:var(--accent)}
.hero{padding:60px 0 44px}.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--accent);margin:0 0 18px}.hero-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:end}h1,h2,h3{margin:0;line-height:1.4;overflow-wrap:anywhere}h1{font-size:clamp(2rem,4.2vw,3.65rem);font-weight:850;letter-spacing:-.045em}.hero-summary{padding-bottom:6px}.lead{margin:0 0 20px;font-size:1.05rem;color:var(--muted)}.services{display:flex;flex-wrap:wrap;gap:12px 20px;list-style:none;margin:0 0 24px;padding:0}.services li{display:flex;align-items:center;gap:7px;font-size:.85rem;font-weight:650}.services img{width:20px;height:20px;object-fit:contain}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 28px;background:var(--accent);color:white;text-decoration:none;border-radius:5px;font-weight:700;transition:background .15s}.button:hover{background:#82301f}.hero-summary small{display:block;color:var(--muted);font-size:.8rem;margin-top:10px}
.app-figure{margin:0 auto 44px}.screenshot-scroll{background:#1e2c38;overflow-x:auto;border-radius:8px}.screenshot-scroll img{width:100%;min-width:800px;max-width:none}.app-figure figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:10px;color:var(--muted);font-size:.75rem}.sample-note{color:var(--accent)}
.how-to{padding-block:36px 56px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:38px}.section-heading h2{font-size:1.55rem;letter-spacing:-.03em}.section-heading p{color:var(--muted);font-size:.85rem;margin:0}.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;list-style:none;padding:0;margin:0}.step{min-width:0;padding-inline:28px}.step:first-child{padding-left:0}.step:last-child{padding-right:0}.step+.step{border-left:1px solid var(--line)}.step-number{display:block;font-size:4.2rem;font-weight:750;line-height:1;letter-spacing:-.06em;color:var(--accent);margin-bottom:14px}.step h3{font-size:1.65rem;letter-spacing:-.025em}.step-intro{font-size:.95rem;margin:12px 0 22px;min-height:3.6em}.step figure{margin:0}.step figcaption{font-size:.8rem;color:var(--muted);margin-top:12px}.capture-frame{background:#1e2c38;border-radius:7px;overflow:hidden}.capture-frame img{width:100%}.toolbar-view{overflow-x:auto}.toolbar-view img{max-width:none;width:980px}.toolbar-direction{font-size:.75rem;color:var(--muted);margin:8px 0}.step-action{display:block;color:var(--accent);font-size:.85rem;font-weight:750;margin-top:14px}.step details{margin-top:18px;font-size:.85rem}.step summary{cursor:pointer;padding:10px 0;font-weight:650}.step details p{color:var(--muted);margin:8px 0}.mobile-toolbar{display:none}.step-card{padding-top:24px}.form-shot{max-width:300px;margin-inline:auto}.note{border-block:1px solid var(--line);padding-block:26px;display:grid;grid-template-columns:1fr 1.8fr;gap:32px}.note h2{font-size:1.15rem}.note p{margin:0 0 10px;color:var(--muted);font-size:.9rem}.note p:last-child{margin:0}.closing{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:36px}.closing h2{font-size:1.3rem}.closing p{margin:8px 0 0;font-size:.8rem;color:var(--muted)}.site-footer{border-top:1px solid var(--line);padding-block:26px}.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.85rem}.site-footer nav a{padding-block:8px}.site-footer p{color:var(--muted);font-size:.75rem;margin-top:16px}
@media(max-width:900px){.hero-layout{gap:32px}.steps{grid-template-columns:1fr}.step{padding:30px 0;display:grid;grid-template-columns:80px 1fr;column-gap:24px}.step+.step{border-left:0;border-top:1px solid var(--line)}.step-number{grid-column:1;grid-row:1/5;font-size:3.5rem}.step>*:not(.step-number){grid-column:2}.step-intro{min-height:0;margin-bottom:20px}.step figure{max-width:600px}.form-shot{margin:0;max-width:340px}.step-card{padding-top:0;max-width:400px}.how-to{padding-bottom:28px}.toolbar-view img{width:1050px}}
@media(max-width:600px){.wrap{width:calc(100% - 36px)}.site-header{min-height:78px;gap:12px}.brand{gap:8px;font-size:1.1rem}.brand img{width:28px;height:28px}.header-nav{gap:14px;font-size:.8rem}.header-nav a:first-child{display:none}.hero{padding:34px 0 26px}.hero-layout{grid-template-columns:1fr;gap:22px}h1{font-size:2.3rem}.lead{font-size:.95rem;margin-bottom:16px}.services{gap:10px 16px;margin-bottom:20px}.services li{font-size:.8rem}.button{width:100%;min-height:50px}.hero-summary small{text-align:center}.app-figure{margin-bottom:30px}.screenshot-scroll img{min-width:780px}.section-heading{display:block;margin-bottom:10px}.section-heading h2{font-size:1.35rem}.section-heading p{margin-top:8px}.how-to{padding-top:26px}.step{grid-template-columns:48px 1fr;gap:0 14px;padding-block:26px}.step-number{font-size:2.8rem}.step h3{font-size:1.4rem}.step-intro{font-size:.9rem}.desktop-toolbar,.toolbar-direction{display:none}.mobile-toolbar{display:block}.note{grid-template-columns:1fr;gap:12px}.closing{display:block;padding-block:28px}.closing .button{margin-top:20px}.site-footer nav{gap:8px 20px}}
.toolbar-view{direction:rtl}.toolbar-view img{direction:ltr}
@media(prefers-reduced-motion:reduce){.button{transition:none}}
/* Quiet editorial rules: one baseline per step, no enclosing grid. */
:root{background:#f6f3ed;--page-paper:#f6f3ed}body{position:relative;isolation:isolate;background:transparent}body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--page-paper) url("./craft-leaves.webp") center top/100% 100% no-repeat;opacity:.38}
.figure-stage{width:min(100%,1240px);margin:0 auto 48px;mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 3%,rgba(0,0,0,.22) 6%,rgba(0,0,0,.5) 9%,rgba(0,0,0,.78) 12%,rgba(0,0,0,.94) 15%,#000 18%,#000 82%,rgba(0,0,0,.94) 85%,rgba(0,0,0,.78) 88%,rgba(0,0,0,.5) 91%,rgba(0,0,0,.22) 94%,rgba(0,0,0,.06) 97%,transparent 100%)}
/* Separate axes keep the existing top/bottom fade and leave the figures opaque. */
.figure-stage img{width:100%;height:auto;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 1%,rgba(0,0,0,.3) 2%,rgba(0,0,0,.65) 3%,rgba(0,0,0,.9) 4%,#000 6%,#000 94%,rgba(0,0,0,.9) 96%,rgba(0,0,0,.65) 97%,rgba(0,0,0,.3) 98%,rgba(0,0,0,.08) 99%,transparent 100%)}
.how-to,.note,.closing,.site-footer{background:transparent}
.context-overview{position:relative;border-radius:4px;overflow:hidden}.context-overview img{width:100%}.context-focus{position:absolute;left:76.875%;top:8.611%;width:22.344%;height:7.778%;border:2px solid #d88a64;border-radius:2px;box-shadow:0 0 0 1px #2b2420}
.context-diagram{position:relative}
.context-diagram .context-focus{left:77.6%;top:10%;width:8.7%;height:4.7%;border:1.5px solid #b4c9d8;box-shadow:0 0 0 1px #20303f}
.context-leader{position:absolute;inset:0;width:100%;height:auto;pointer-events:none}
.context-leader path{fill:none;stroke:#b4c9d8;stroke-width:1.5;vector-effect:non-scaling-stroke}
.context-diagram .context-detail{width:54%;aspect-ratio:332/102;margin:0;position:absolute;left:44%;top:24%;z-index:1;outline:1.5px solid #b4c9d8;outline-offset:2px;border-radius:8px;box-shadow:0 4px 10px rgba(10,22,32,.22)}
.context-diagram .context-detail img{width:258.434%;left:-9.036%;top:-29.412%}
.context-detail{border:1px solid var(--accent);padding:3px;border-radius:4px;background:rgba(246,243,237,.35)}.context-detail img{width:100%;border-radius:2px}.context-diagram+.mobile-toolbar{margin-top:14px}
@media(max-width:600px){body::before{opacity:.28}.figure-stage{margin-bottom:26px}.figure-stage img{min-width:0}}
:root{--line:#e5e2dc;--accent:#98432f}
.site-header{border-bottom:0}.hero{padding-top:44px}.button{border-radius:2px}
.how-to{border-top:0;padding-top:24px}.section-heading{margin-bottom:28px}
.steps{gap:32px}.step,.step:first-child,.step:last-child{padding:22px 0 0;border-top:1px solid #b8b2a8}
.step+.step{border-left:0}.step-number{font-size:2.6rem;font-weight:500;letter-spacing:-.04em;margin-bottom:20px}
.step h3{font-size:1.4rem}.step-intro{font-size:.9rem}.step-card{padding-top:0}
.capture-frame,.screenshot-scroll{border-radius:4px}.toolbar-view{overflow:hidden}
.note{border-bottom:0;padding-block:24px;gap:24px}.note p{font-size:.8rem}
.closing{padding-block:28px}.closing h2{font-size:1.1rem}.site-footer{padding-block:20px}
@media(max-width:900px){.steps{gap:28px}.step{padding-top:24px}.step-number{font-size:2.6rem}.step+.step{border-top:1px solid #b8b2a8}}
@media(max-width:600px){.hero{padding-top:28px}.steps{gap:12px}.step-number{font-size:2rem}.step{padding-block:22px}.section-heading{margin-bottom:22px}.closing p{max-width:32em}}
.mobile-instruction{display:none}
/* Clip each screenshot at its real UI boundary, not at the capture rectangle. */
.form-shot .capture-frame{position:relative;aspect-ratio:1260/1704;background:transparent;border-radius:4.3% / 3.17%;overflow:hidden}
.form-shot .capture-frame img{position:absolute;width:106.667%;max-width:none;height:auto;left:-3.333%;top:-1.761%}
.mobile-toolbar{position:relative;aspect-ratio:1170/312;overflow:hidden;background:transparent}
.mobile-toolbar img{position:absolute;width:100%;height:auto;top:-9.615%;left:0}
.context-detail{position:relative;aspect-ratio:804/102;overflow:hidden;border:0;padding:0;background:transparent;border-radius:10px}
.context-detail img{position:absolute;width:106.716%;max-width:none;height:auto;left:-3.731%;top:-29.412%;border-radius:0}
.context-overview{border-radius:10px;overflow:hidden}
.guide-live-card{background:#2a3b4b;color:#edf3f8;border:1px solid #839aaa;border-radius:12px;box-shadow:inset 3px 0 #b4d1e6;padding:9px 10px 6px;text-align:left;font-size:14px;line-height:1.25}
.guide-card-heading{display:flex;gap:8px;align-items:center;padding-bottom:7px;border-bottom:1px solid #425260}
.guide-card-avatar{width:40px;height:40px;object-fit:cover;border-radius:50%;border:1px solid #a8b9c6}
.guide-card-heading strong{display:block;font-size:14px}.guide-card-heading small{display:block;font-size:12px;margin-top:2px}
.guide-card-actions{margin-left:auto;display:flex;gap:9px;align-self:flex-start;padding-top:3px;color:#b8c7d2}
.guide-card-actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.guide-card-sites{display:flex;gap:5px;margin-top:4px}.guide-card-sites span{position:relative;display:flex;align-items:center;justify-content:center;width:54px;height:27px;border:1px solid #536d80;border-radius:7px}
.guide-card-sites img{width:18px;height:18px;object-fit:contain}.guide-card-sites span:first-child img{width:22px}
.guide-card-sites .is-live::after{content:"";position:absolute;bottom:3px;left:6px;right:6px;height:2px;background:#c2dcef;border-radius:2px}
/* Mobile reading layout: full-width steps, actual mobile toolbar, quiet palette. */
@media(max-width:600px){
  :root{--accent:#263d4d;--ink:#202d35;--muted:#53616a;--line:#d8dcd9;color:var(--ink);background:#f6f3ed}
  html{background:#f6f5f0}
  body::before{display:none}
  .wrap{width:calc(100% - 40px)}
  .site-header{min-height:76px;border-bottom:1px solid var(--line)}
  .brand{font-size:1rem}.brand small{font-size:.55rem}
  .header-nav a{min-height:44px;display:inline-flex;align-items:center}
  .hero{padding:26px 0 12px}
  .eyebrow{font-size:.72rem;letter-spacing:.03em;margin-bottom:10px}
  .hero-layout{gap:18px}
  h1{font-size:1.9rem;letter-spacing:-.035em;line-height:1.4}
  h1 br{display:none}
  .lead{font-size:.9rem;margin-bottom:14px}.lead br{display:none}
  .services{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:18px}
  .services li{font-size:.82rem}.services img{width:20px;height:20px}
  .button{border-radius:6px;min-height:48px;padding:11px 16px;font-size:.9rem}
  .button:hover{background:#354e5e}
  .hero-summary small{font-size:.72rem;margin-top:8px}
  .figure-stage{margin:4px auto 18px}
  .how-to{padding-top:12px;padding-bottom:24px;scroll-margin-top:16px}
  .section-heading{margin-bottom:20px}.section-heading h2{font-size:1.2rem}
  .steps{gap:28px}
  .step,.step:first-child,.step:last-child{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:10px;row-gap:0;padding:20px 0 0;border-color:var(--line)}
  .step-number{grid-column:1;grid-row:1;font-size:1.3rem;line-height:1.5;margin:0;color:var(--muted);font-variant-numeric:tabular-nums}
  .step h3{grid-column:2;font-size:1.18rem;line-height:1.65}
  .step>*:not(.step-number):not(h3){grid-column:1/-1}
  .step-intro{font-size:.9rem;line-height:1.9;margin:12px 0 16px}
  .step-intro br{display:none}
  .context-diagram,.desktop-instruction{display:none}
  .mobile-instruction{display:inline}
  .context-diagram+.mobile-toolbar{display:block;margin-top:0}
  .capture-frame{border-radius:8px}
  .step .form-shot{width:100%;max-width:340px;justify-self:center}
  .step .step-card{width:100%;max-width:340px;justify-self:center}
  .step figcaption{font-size:.8rem;line-height:1.8;margin-top:10px}
  .step details{margin-top:12px;border-bottom:1px solid var(--line)}
  .step summary{padding:12px 0;min-height:44px;font-size:.82rem}
  .note{margin-top:8px;gap:10px;padding:22px 0}.note h2{font-size:1rem}.note p{font-size:.82rem}
  .closing{border-top:1px solid var(--line);padding:24px 0}.closing h2{font-size:1.05rem}
  .site-footer nav{gap:4px 18px;font-size:.78rem}.site-footer nav a{min-height:44px;display:inline-flex;align-items:center}
  .site-footer p{font-size:.7rem;line-height:1.9}
}
/* Keep the figures opaque: only the empty image edges fade onto solid paper.
   The paper backing prevents the page's leaves from bleeding into the figures. */
.figure-stage{position:relative;width:100%;background:var(--page-paper);mix-blend-mode:normal;mask-image:none;isolation:isolate}
.figure-stage::before{content:none}
.figure-stage img{width:min(100%,1240px);margin-inline:auto;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 84%,transparent),linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
/* Fade the decoration out within the header, before the figure section starts.
   A shared solid base avoids a separate feathered strip at the section edge. */
body::before{bottom:auto;height:280px;background-size:100% auto;mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.8) 30%,rgba(0,0,0,.35) 60%,transparent)}
.button{border-radius:8px}
.guide-help{--line:#cbd5d8;--muted:#435760;--accent:#294654;padding:32px;margin-block:24px;background:#e9eef0;border:1px solid var(--line);border-radius:12px;color:#203641}
.guide-help .section-heading h2{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:1.4rem}
.qa-label{display:inline-block;padding:5px 12px;border-radius:6px;background:#294654;color:#fff;font-size:1.1rem;letter-spacing:.04em}
.notification-support{width:100%;table-layout:fixed;border-collapse:collapse;font-size:1rem;text-align:left}
.notification-support caption{text-align:left;font-weight:650;margin-bottom:14px}
.notification-support th,.notification-support td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.notification-support th:first-child{width:30%;padding-left:0}
.notification-support td:last-child,.notification-support th:last-child{padding-right:0}
.notification-support thead{color:var(--muted);font-size:.875rem}
.notification-support tbody th{font-weight:600}
.guide-help-note{color:var(--muted);font-size:.875rem;margin:16px 0 24px}
.guide-faq details{border-top:1px solid var(--line);font-size:1rem}
.guide-faq details:last-child{border-bottom:1px solid var(--line)}
.guide-faq summary{padding:18px 0;cursor:pointer;font-weight:600;color:#294654}
.guide-faq details[open] summary{color:#203641}
.guide-faq summary::marker{color:var(--accent)}
.guide-faq p{margin:0 0 16px;color:var(--muted);max-width:65ch;overflow-wrap:anywhere}
@media(max-width:600px){.guide-help{padding:20px 16px;margin-block:20px}.guide-help .section-heading h2{font-size:1.15rem;gap:10px}.notification-support th:first-child{width:36%}.notification-support th,.notification-support td{padding:12px 10px}.guide-faq summary{padding-block:16px}.guide-help .section-heading{margin-bottom:20px}}