*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0f;--surface: #12121a;--border: #1e1e2e;--text: #e0e0e8;--text-dim: #888899;--accent: #6e8efb;--accent-dim: #4a5a8a;--success: #4ade80;--error: #f87171;--loading: #fbbf24;--mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;padding:2rem 1rem}header{text-align:center;margin-bottom:2.5rem}h1{font-size:1.75rem;font-weight:600;letter-spacing:-.02em}.subtitle{color:var(--text-dim);font-size:.95rem;margin-top:.25rem}main{max-width:720px;margin:0 auto}.architecture{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem 1.5rem;margin-bottom:2rem;text-align:center}.architecture pre{font-family:var(--mono);font-size:.8rem;color:var(--text-dim);line-height:1.5}.step{background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:1.25rem;overflow:hidden}.step-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--border)}.step-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent-dim);color:#fff;font-size:.8rem;font-weight:700;flex-shrink:0}.step-header h2{font-size:1rem;font-weight:600;flex:1}.status{font-family:var(--mono);font-size:.75rem;padding:.2rem .6rem;border-radius:4px;text-transform:uppercase;letter-spacing:.05em}.status[data-state=ready],.status[data-state=pending]{background:var(--border);color:var(--text-dim)}.status[data-state=loading]{background:#3b2f00;color:var(--loading)}.status[data-state=success]{background:#0a2e1a;color:var(--success)}.status[data-state=error]{background:#2e0a0a;color:var(--error)}.step-body{padding:1rem}.input-row{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}.input-row label{font-size:.85rem;color:var(--text-dim);flex-shrink:0}.input-row input{flex:1;font-family:var(--mono);font-size:.85rem;padding:.5rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);outline:none}.input-row input:focus{border-color:var(--accent)}button{font-family:var(--sans);font-size:.85rem;font-weight:600;padding:.5rem 1.25rem;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:opacity .15s}button:hover{opacity:.85}button:disabled{opacity:.4;cursor:not-allowed}.result{font-family:var(--mono);font-size:.8rem;line-height:1.5}.result:empty{display:none}.result .request-line{color:var(--accent);margin-bottom:.5rem}.result .detail{margin-bottom:.75rem}.result .detail-label{color:var(--text-dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.result pre{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.75rem;overflow-x:auto;white-space:pre-wrap;word-break:break-word}.result .error-msg{color:var(--error);padding:.5rem}.result .field-row{display:flex;gap:.5rem;padding:.15rem 0}.result .field-key{color:var(--accent);min-width:80px}.result .field-val{color:var(--text)}footer{max-width:720px;margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:center;font-size:.8rem}footer a{color:var(--accent);text-decoration:none}footer a:hover{text-decoration:underline}.draft-ref{color:var(--text-dim)}@media(max-width:600px){.input-row{flex-direction:column;align-items:stretch}}