:root{ --bg:#0b0c10; --card:#121318; --muted:#aeb3c2; --text:#e8ebf2; --accent:#6ee7ff; --accent2:#a5ff6e; }
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b0c10,#0e121a);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif}
.wrap{max-width:900px;margin:40px auto;padding:0 16px 60px}
h1{font-size:clamp(1.4rem,1.2rem+1.2vw,2.1rem);line-height:1.15;margin:0 0 8px}
.sub{margin:0 0 24px;color:var(--muted)}
.card{background:var(--card);border:1px solid #1d2330;border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.flow{display:grid;gap:14px}
.node{border:1px solid #232a3a;border-radius:14px;padding:16px;background:#0f121a}
.node h2{font-size:1rem;margin:0 0 6px}
.node .q{color:#d7def0}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
button{appearance:none;border:none;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600}
button.primary{background:var(--accent);color:#001018}
button.secondary{background:#1a2233;color:var(--text);border:1px solid #293145}
button.ghost{background:transparent;color:#aeb3c2;border:1px dashed #2a3142}
.result{border:1px solid #203247;background:#0f1824;border-left:4px solid var(--accent2)}
.result h3{margin:0 0 8px;font-size:1.05rem}
.pill{display:inline-block;padding:.2rem .5rem;border-radius:999px;background:#162335;color:#cfe3ff;border:1px solid #28405f;font-size:.8rem}
.actions{margin-top:10px;display:grid;gap:8px}
.small{font-size:.9rem;color:#a9b3c7}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.muted{color:#aeb3c2}
details{background:#0e1420;border:1px solid #1e2a44;padding:10px 12px;border-radius:10px}
summary{cursor:pointer;color:#bcd3ff}
.grid2{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sep{height:1px;background:#1e2535;margin:12px 0}