:root{--bg: #0e0e12;--surface: #17171d;--surface-2: #20202a;--border: #30303c;--text: #f1f1f5;--muted: #9b9bac;--accent: #c9a94f;--on-accent: #16161a;--accent-2: #16b1e8;--accent-3: #ff2f7e;--code-bg: #0a0a0e;--radius: 12px;--maxw: 760px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,blinkmacsystemfont,Segoe UI,Hiragino Sans,Noto Sans JP,meiryo,sans-serif;line-height:1.75;font-size:16px}a{color:var(--accent-2);text-decoration:none}a:hover{text-decoration:underline}.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}.site-header{border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%)}.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--text)}.brand img{width:32px;height:32px;border-radius:8px}.nav a{color:var(--muted);margin-left:18px;font-size:14px}.nav a:hover{color:var(--text)}.hero{text-align:center;padding:56px 0 44px;border-bottom:1px solid var(--border);background:radial-gradient(ellipse 85% 60% at 50% -10%,rgba(201,169,79,.08),transparent 62%)}.hero h1{font-size:30px;margin:0 0 12px}.hero p{color:var(--muted);font-size:17px;margin:0 auto;max-width:560px}.hero .source{font-size:13px;margin-top:14px;opacity:.8}main section{padding:40px 0;border-bottom:1px solid var(--border)}h2{font-size:22px;margin:0 0 18px;display:flex;align-items:center;gap:10px}h2 .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:14px;font-weight:700;background:var(--accent);color:var(--on-accent);border-radius:8px;flex:none}h3{font-size:17px;margin:28px 0 10px}ol.steps{counter-reset:step;list-style:none;padding:0;margin:0}ol.steps>li{position:relative;padding:0 0 4px 44px;margin-bottom:22px;counter-increment:step}ol.steps>li:before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;background:var(--surface-2);border:1px solid var(--border);color:var(--accent-2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}code{background:var(--code-bg);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-family:SF Mono,JetBrains Mono,menlo,consolas,monospace;font-size:13.5px;color:#e8e8f2;word-break:break-all}pre{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;overflow-x:auto}pre code{background:none;border:none;padding:0;word-break:normal}.note{background:var(--surface);border-left:3px solid var(--accent-2);border-radius:0 8px 8px 0;padding:12px 16px;margin:16px 0;color:var(--muted);font-size:14.5px}.note strong{color:var(--text)}.tools{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0;margin:0;list-style:none}.tools li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.tools code{font-size:13px}.tools p{margin:6px 0 0;color:var(--muted);font-size:13.5px}.usage-carousel{position:relative;margin:40px 0 8px}.usage-carousel .splide__slide{display:flex;align-items:center;justify-content:center;opacity:.4;transition:opacity .4s ease}.usage-carousel .splide__slide.is-active{opacity:1}.usage-carousel:before,.usage-carousel:after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:13%;pointer-events:none}.usage-carousel:before{left:0;background:linear-gradient(to right,var(--bg),transparent)}.usage-carousel:after{right:0;background:linear-gradient(to left,var(--bg),transparent)}.usage-carousel .splide__slide img{height:86%;width:auto;border-radius:12px;border:1px solid var(--border);box-shadow:0 8px 22px #00000080}.usage-carousel .splide__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:#0e0e12c7;opacity:1;backdrop-filter:blur(4px);transition:background .2s ease,border-color .2s ease}.usage-carousel .splide__arrow svg{width:15px;height:15px;fill:var(--text);transition:fill .2s ease}.usage-carousel .splide__arrow--prev svg{transform:scaleX(-1)}.usage-carousel .splide__arrow:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}.usage-carousel .splide__arrow:hover:not(:disabled) svg{fill:var(--on-accent)}.usage-carousel .splide__arrow--prev{left:20px}.usage-carousel .splide__arrow--next{right:20px}.usage-carousel .splide__pagination{position:static;margin-top:14px;padding:0;gap:8px}.usage-carousel .splide__pagination__page{width:8px;height:8px;margin:0;padding:0;border:none;border-radius:50%;box-shadow:none;background:var(--border);opacity:1;transition:background .2s ease}.usage-carousel .splide__pagination__page.is-active{background:var(--accent)}.copy-field{display:flex;gap:8px;margin:14px 0}.copy-field code{flex:1;display:flex;align-items:center;border-radius:var(--radius);padding:12px 14px;word-break:break-all}.copy-btn{flex:none;background:var(--accent);color:var(--on-accent);border:none;border-radius:var(--radius);padding:0 20px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:opacity .2s ease}.copy-btn:hover{opacity:.9}.copy-btn.copied{background:var(--accent-2)}@media(max-width:640px){.copy-field{flex-wrap:wrap}.copy-btn{flex-basis:100%;padding:12px 20px}.usage-carousel .splide__slide img{height:auto;max-height:100%;max-width:86vw}}.tabs{display:flex;gap:8px;margin-bottom:20px}.tabs button{background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:7px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}.tabs button[aria-selected=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}[x-cloak]{display:none!important}.site-footer{padding:32px 0 48px;color:var(--muted);font-size:13px}.site-footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}.site-footer a{color:var(--muted)}.legal h2{font-size:19px;margin-top:36px}.legal ul,.legal ol{padding-left:22px}.legal li{margin-bottom:8px}.updated{color:var(--muted);font-size:13px}@media(max-width:560px){.tools{grid-template-columns:1fr}.hero h1{font-size:24px}.nav a{margin-left:12px}}