:root{--bg:#f4f5f7;--card:#fff;--ink:#1a1d24;--sub:#6b7280;--accent:#6366f1;--accent2:#8b5cf6;--radius:14px}
*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
.pg-head{padding:16px 20px;border-bottom:1px solid #e5e7eb;background:#fff}
.pg-back{color:var(--accent);text-decoration:none;font-size:14px;font-weight:700}
.pg-back:hover{text-decoration:underline}
.pg-main{max-width:820px;margin:0 auto;padding:32px 20px 80px}
.pg-eyebrow{font-size:12px;color:var(--sub);font-weight:700;letter-spacing:.04em;margin:0}
.pg-main h1{font-size:26px;font-weight:800;margin:6px 0 14px}
.pg-desc{font-size:15px;color:#374151;max-width:60ch;margin:0}
.pg-tags{margin:14px 0 0}
.pg-tags .chip{display:inline-block;margin:0 6px 6px 0;font-size:11px;color:#5b6472;background:#eef1f5;border-radius:5px;padding:3px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pg-main section{margin-top:40px}
.pg-main h2{font-size:19px;font-weight:800;border-left:4px solid var(--accent);padding-left:10px;margin-bottom:16px}
.pg-demo-frame{position:relative;border:1px solid #e5e7eb;border-radius:var(--radius);overflow:hidden;background:#fff}
.pg-demo-iframe{width:100%;min-height:260px;border:0;display:block}
.pg-note{font-size:12.5px;color:var(--sub);margin-top:10px}
.code-block{margin-bottom:20px;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}
.code-block-head{display:flex;align-items:center;justify-content:space-between;background:#f8f9fb;padding:8px 14px;border-bottom:1px solid #e5e7eb}
.code-block-head h3{font-size:13px;font-weight:800;color:#374151;margin:0}
.copy-btn{font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;border:1px solid #d1d5db;background:#fff;color:#374151;cursor:pointer}
.copy-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.copy-btn.is-copied{background:#059669;color:#fff;border-color:#059669}
.code-block pre{margin:0;padding:16px;overflow-x:auto;background:#1a1d24;max-height:420px;overflow-y:auto}
.code-block code{color:#e5e7eb;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.7;white-space:pre}
.pg-seq-nav{display:flex;justify-content:space-between;margin-top:48px;padding-top:20px;border-top:1px solid #e5e7eb}
.pg-nav-link{color:var(--accent);text-decoration:none;font-size:14px;font-weight:700}
.pg-nav-link:hover{text-decoration:underline}
.pg-nav-link.is-disabled{color:#c7cbd1;pointer-events:none}
.pg-foot{text-align:center;padding:28px 20px;color:var(--sub);font-size:12.5px;border-top:1px solid #e5e7eb}
@media (max-width:640px){.pg-seq-nav{flex-direction:column;gap:12px}}