:root{--bg:#0e0f12;--fg:#eaeaea;--muted:#9aa0a6;--accent:#ff9966;--accent2:#66ccff;--accent3:#ff7a59;--panel:#15171c}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font-family:Segoe UI,Roboto,Arial,sans-serif}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* dodane */
  padding: 16px 20px;
  background: linear-gradient(90deg,var(--accent),#ffc16e);
}
.brand{font-weight:700;letter-spacing:.4px}
.pill{border:none;border-radius:999px;padding:8px 14px;background:#222;color:#fff;cursor:pointer}
.wrap{max-width:1080px;margin:20px auto;padding:0 16px}
.card{background:var(--panel);border-radius:16px;padding:16px 18px;margin-bottom:16px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
h2{margin:0 0 10px 0}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:none;border-radius:24px;padding:10px 16px;background:#333;color:#fff;cursor:pointer}
.btn.blue{background:var(--accent2);color:#111;font-weight:700}
.btn.orange{background:var(--accent3);color:#111;font-weight:700}
.cyan{background:#66ccff}
.terminal{background:#000;padding:12px;border-radius:8px;max-height:320px;overflow:auto;white-space:pre-wrap}
.dot{display:inline-block;width:10px;height:10px;background:#888;border-radius:50%;vertical-align:middle;margin-left:6px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-body{background:#0f1116;border-radius:12px;padding:12px;width:min(960px,90vw);box-shadow:0 6px 26px rgba(0,0,0,.5)}
#editor{width:100%;height:60vh;background:#000;color:#ddd;border:none;padding:10px;border-radius:8px;font-family:ui-monospace,Consolas,monospace}
code{background:#000;padding:2px 6px;border-radius:6px}
/* --- index.svg hero --- */
.index-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.hero-img {
  max-width: 100%;
  height: auto;
}