:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}:root{--page-bg:#d7dce4;--body-bg:#f4f5f7;--header-bg:#243243;--header-text:#fff;--header-muted:#cbd5e1;--nav-bg:#e6eaf0;--border:#9aa6b5;--border-light:#c8d0da;--text:#1d2633;--muted:#526173;--link:#174f8a;--button-bg:#315a86;--button-bg-hover:#244769;--button-text:#fff;--notice-bg:#fff7d7;--notice-border:#d4a72c;--table-head:#edf0f4;--section-head:#e9edf3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--page-bg);color:var(--text);margin:0;font-family:Arial,Helvetica Neue,Noto Sans JP,Meiryo,sans-serif;font-size:15px;line-height:1.65}a{color:var(--link)}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,summary:focus-visible{outline-offset:2px;outline:2px solid}p{margin:0 0 12px}h1,h2,h3{margin:0}h1{margin-bottom:14px;font-size:28px;line-height:1.3}h2{font-size:20px}.page{background:var(--body-bg);border:1px solid #7f8da0;width:min(1120px,100% - 28px);margin:18px auto;box-shadow:0 2px 8px #0000002e}.header{background:var(--header-bg);color:var(--header-text);border-bottom:1px solid #172232;justify-content:space-between;align-items:center;gap:18px;padding:24px 28px;display:flex}.site-title{letter-spacing:.02em;font-size:30px;font-weight:700}.site-tagline{color:var(--header-muted);margin-top:4px;font-size:14px}.lang-button{color:#1d2633;cursor:pointer;background:#f4f6f8;border:1px solid #a9b6c7;min-width:96px;padding:7px 12px}.lang-button:hover{background:#fff}.tabs{border-top:1px solid #33465d;border-bottom:1px solid var(--border);background:var(--nav-bg);flex-wrap:wrap;gap:0;display:flex}.tabs a{border-right:1px solid var(--border-light);color:#1d3f62;padding:9px 13px;font-size:13px;font-weight:700;text-decoration:none;display:block}.tabs a:hover{background:#f5f7fa;text-decoration:none}.layout{grid-template-columns:280px minmax(0,1fr);gap:22px;padding:22px;display:grid}.sidebar{align-content:start;gap:16px;display:grid}.side-box,.intro-box,.section{border:1px solid var(--border);background:#fff}.side-box h2,.section h2{background:var(--section-head);border-bottom:1px solid var(--border);color:#203047;padding:9px 12px}.side-box{overflow:hidden}.buttons-box{gap:9px;padding:12px;display:grid}.content{gap:16px;min-width:0;display:grid}.intro-box{padding:18px}.notice{border-left:4px solid var(--notice-border);background:var(--notice-bg);color:#3b3215;margin-top:14px;padding:10px 12px}.section{overflow:hidden}.section>p,.section>.plain-list,.section>.workflow-list,.section>.faq-list,.section>.video-box,.section>.video-small,.section>.small-note,.section>.screenshot-grid,.section>.workflow-videos,.purchase-box>p,.purchase-box>.purchase-buttons{margin:14px}.info-table{border-collapse:collapse;table-layout:fixed;width:100%}.info-table th,.info-table td{border-top:1px solid var(--border-light);vertical-align:top;padding:9px 10px}.info-table tr:first-child th,.info-table tr:first-child td{border-top:0}.info-table th{background:var(--table-head);color:#243243;text-align:left;width:185px;font-weight:700}.sidebar .info-table th{width:96px}.info-table td{color:var(--muted)}.button{color:#1d2633;text-align:center;background:#eef1f5;border:1px solid #7f8da0;justify-content:center;align-items:center;min-height:36px;padding:7px 13px;font-weight:700;text-decoration:none;display:inline-flex}.button:hover{background:#fff;text-decoration:none}.button.primary{background:var(--button-bg);color:var(--button-text);border-color:#1c4166}.button.primary:hover{background:var(--button-bg-hover)}.video-box{border:1px solid var(--border);background:#f2f4f7}.video-title{border-bottom:1px solid var(--border-light);color:#26364a;padding:8px 10px;font-weight:700}.video-frame{aspect-ratio:16/9;background:#111827}.video-frame iframe{border:0;width:100%;height:100%;display:block}.video-placeholder{color:#cbd5e1;text-align:center;align-content:center;place-items:center;gap:6px;height:100%;padding:16px;display:grid}.video-small{max-width:540px}.small-note{color:var(--muted);font-size:13px}.plain-list{color:var(--muted);padding-left:34px}.plain-list li{margin:7px 0}.workflow-list{gap:8px;padding:0;list-style:none;display:grid}.workflow-list li{border:1px solid var(--border-light);color:var(--muted);background:#fafbfc;gap:10px;padding:9px 10px;display:flex}.workflow-list span{border:1px solid var(--border);background:var(--section-head);color:#203047;flex:0 0 24px;justify-content:center;align-items:center;height:24px;font-weight:700;display:inline-flex}.faq-list{gap:8px;display:grid}details{border:1px solid var(--border-light);background:#fbfcfd}summary{cursor:pointer;color:#203047;padding:10px 12px;font-weight:700}details[open] summary{border-bottom:1px solid var(--border-light);background:#f0f3f7}details p{color:var(--muted);margin:0;padding:12px}.purchase-box{background:#f8fafc}.purchase-buttons{flex-wrap:wrap;gap:10px;display:flex}.footer{border-top:1px solid var(--border);color:#526173;background:#eef1f5;padding:14px 22px;font-size:13px}@media (width<=1024px){.layout{grid-template-columns:1fr}.sidebar{order:2}.content{order:1}.sidebar .buttons-box{display:none}}@media (width<=860px){.page{border-left:0;border-right:0;width:100%;margin:0}.header{flex-direction:column;align-items:flex-start}.layout{padding:14px}.info-table,.info-table tbody,.info-table tr,.info-table th,.info-table td{width:100%;display:block}.info-table th{border-top:1px solid var(--border-light)}.info-table tr:first-child th{border-top:0}.video-small{max-width:none}h1{font-size:24px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.screenshot-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.screenshot-box{border:1px solid var(--border-light);background:#fbfcfd;margin:0}.screenshot-box img{object-fit:cover;border-bottom:1px solid var(--border-light);background:#eef1f5;width:100%;height:160px;display:block}.screenshot-box figcaption{gap:4px;padding:10px 12px;display:grid}.screenshot-box figcaption strong{color:#203047;font-size:14px}.screenshot-box figcaption span{color:var(--muted);font-size:13px;line-height:1.55}@media (width<=860px){.screenshot-grid{grid-template-columns:1fr}.screenshot-box img{height:auto}}.workflow-videos{gap:18px;display:grid}.workflow-video-item{background:#f7f7f7;border:1px solid #c8c8c8;grid-template-columns:minmax(220px,.9fr) minmax(320px,1.4fr);align-items:start;gap:18px;padding:16px;display:grid}.workflow-video-text h3{margin:4px 0 8px;font-size:18px}.workflow-video-text p{margin:0}.workflow-step{color:#555;text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:700}@media (width<=800px){.workflow-video-item{grid-template-columns:1fr}}.header-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}:root[data-theme=dark]{--page-bg:#20242a;--body-bg:#2c333d;--header-bg:#17202b;--header-text:#f3f4f6;--header-muted:#c3cad4;--nav-bg:#26313d;--border:#637083;--border-light:#485464;--text:#e5e7eb;--muted:#c3cad4;--link:#9ecbff;--button-bg:#315a86;--button-bg-hover:#3d6f9f;--button-text:#fff;--notice-bg:#3d3520;--notice-border:#c49a35;--table-head:#333c49;--section-head:#303946}:root[data-theme=dark] body{background:var(--page-bg);color:var(--text)}:root[data-theme=dark] .page,:root[data-theme=dark] .side-box,:root[data-theme=dark] .intro-box,:root[data-theme=dark] .section{background:var(--body-bg);color:var(--text)}:root[data-theme=dark] .tabs a{color:#dbeafe}:root[data-theme=dark] .tabs a:hover,:root[data-theme=dark] .button:hover,:root[data-theme=dark] .lang-button:hover{background:#394454}:root[data-theme=dark] .lang-button,:root[data-theme=dark] .button{color:#e5e7eb;border-color:var(--border);background:#2f3947}:root[data-theme=dark] .button.primary{background:var(--button-bg);color:var(--button-text)}:root[data-theme=dark] .side-box h2,:root[data-theme=dark] .section h2,:root[data-theme=dark] .info-table th,:root[data-theme=dark] .video-title,:root[data-theme=dark] summary,:root[data-theme=dark] .workflow-step,:root[data-theme=dark] .screenshot-box figcaption strong{color:#e5e7eb}:root[data-theme=dark] .intro-box h1{color:#f3f4f6}:root[data-theme=dark] .intro-box h3{color:#c3cad4}:root[data-theme=dark] .info-table td,:root[data-theme=dark] .plain-list,:root[data-theme=dark] .workflow-list li,:root[data-theme=dark] details p,:root[data-theme=dark] .small-note,:root[data-theme=dark] .screenshot-box figcaption span,:root[data-theme=dark] .footer{color:var(--muted)}:root[data-theme=dark] .video-box,:root[data-theme=dark] .workflow-list li,:root[data-theme=dark] details,:root[data-theme=dark] .screenshot-box,:root[data-theme=dark] .workflow-video-item,:root[data-theme=dark] .purchase-box{background:#252d37}:root[data-theme=dark] details[open] summary,:root[data-theme=dark] .footer{background:#303946}.intro-box h1{color:var(--text)}.intro-box h3{color:var(--muted)}:root[data-theme=dark] .notice{color:#f5e6b8;background:#3a3320;border-left-color:#d4a72c}:root[data-theme=dark] .notice a{color:#f8d36a}
