:root{--bg-color: #18181b;--card-bg: #1f1f23;--border-color: #2b2b2f;--text-primary: #cccccc;--text-secondary: #858585;--accent: #007fd4;--accent-hover: #0060a0;--code-bg: #101010}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Inter,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;-webkit-text-size-adjust:100%}.container{max-width:900px;width:100%;padding:2rem}.hero{text-align:left;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.logo-area{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}h1{font-size:1.8rem;font-weight:500;color:#fff;margin:0;word-wrap:break-word}.subtitle{color:var(--text-secondary);font-size:1rem;margin:0}.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:6px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:none}.summary-card{border-left:3px solid var(--accent)}h2{margin-top:0;font-size:1.5rem;color:#fff}h3{color:var(--accent);margin-bottom:.5rem}.summary-content ol{padding-left:1.2rem;line-height:1.6}.step{margin-bottom:2rem}pre{background:var(--code-bg);padding:2.5rem 1rem 1rem;border-radius:8px;overflow-x:auto;border:1px solid rgba(255,255,255,.05);margin:0;white-space:pre-wrap;word-break:break-all}code{font-family:Fira Code,Courier New,monospace;font-size:.85rem;color:#a5b3ce}footer{text-align:center;color:var(--text-secondary);font-size:.8rem;margin-top:4rem;opacity:.6}.code-block{position:relative;margin:.75rem 0}.copy-btn{position:absolute;top:.5rem;right:.5rem;background:var(--accent);color:#fff;border:none;border-radius:4px;padding:.35rem .75rem;font-size:.75rem;cursor:pointer;opacity:.9;transition:all .2s;z-index:10}.copy-btn:hover{opacity:1}.copy-btn:active{transform:scale(.95)}.copy-btn.copied{background:#28a745}@media(max-width:768px){.container{padding:1rem}h1{font-size:1.4rem}h2{font-size:1.2rem}h3{font-size:1rem}.card{padding:1rem}pre{padding:2.5rem .75rem .75rem;font-size:.75rem}code{font-size:.75rem}.summary-content ol{padding-left:1rem}}@media(max-width:480px){.container{padding:.75rem}h1{font-size:1.2rem}.subtitle{font-size:.85rem}.card{padding:.75rem;margin-bottom:1rem}pre{padding:2.5rem .5rem .5rem;font-size:.7rem}code{font-size:.7rem}.step{margin-bottom:1.5rem}.copy-btn{padding:.3rem .5rem;font-size:.65rem}}
