@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap");
:root{--bg:#070b10;--line:#243044;--text:#dce7f2;--teal:#3dd6c6;--copper:#d7a36a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 "IBM Plex Sans",system-ui,sans-serif}
a{color:var(--teal)}
.demo-banner{background:#1a140e;color:#f0ddc4;text-align:center;padding:.5rem 1rem;font-size:.75rem}
.hero{min-height:52vh;background:#0b1018 center/cover;display:grid;align-items:end}
.hero-inner{padding:3rem 6%;background:linear-gradient(transparent,#070b10 70%)}
h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.04em;max-width:16ch;margin:0 0 .8rem}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--copper)}
.wrap{padding:2rem 6% 4rem;max-width:980px}
.steps{display:grid;gap:10px}
.step{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;background:#101826;display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:center}
.step b{color:var(--teal);font-family:"IBM Plex Mono",monospace}
.step button{background:transparent;border:1px solid var(--teal);color:var(--teal);padding:.45rem .7rem;font:inherit;cursor:pointer;border-radius:8px}
.log{margin-top:1.2rem;background:#05080d;border:1px solid var(--line);border-radius:10px;padding:1rem;min-height:140px;font-family:"IBM Plex Mono",monospace;font-size:.8rem;white-space:pre-wrap}
.note{color:#93a4b7;font-size:.88rem}
footer{padding:1.5rem 6%;border-top:1px solid var(--line);font-size:.82rem;color:#93a4b7}
@media(max-width:700px){.step{grid-template-columns:1fr}}