/* ========== Layout ========== */
:root{
  --bg:#fafafa; --card:#ffffff; --ink:#141414;
  --brand:#2563eb; --ink-soft:#4b5563; --bug:#b42318; --ok:#16a34a;
  --panel:#0b1020; --panel-ink:#e6edf3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:var(--bg); line-height:1.55;
}
.container{max-width:980px;margin:32px auto;padding:0 16px}
.card{
  background:var(--card); border-radius:16px; padding:20px 22px;
  box-shadow:0 10px 30px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.06);
}

/* ========== Headings & links ========== */
h1{font-size:1.8rem;margin:6px 0 14px}
h4{margin:.5rem 0 .25rem;font-size:1rem}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ========== Buttons/badges ========== */
.btn{
  display:inline-block;border:1px solid rgba(2,6,23,.12);background:#fff;
  border-radius:10px;padding:.45rem .7rem;cursor:pointer;font-weight:600;
  box-shadow:0 1px 2px rgba(2,6,23,.06);
}
.btn:hover{background:#f8fafc}
.btn.ghost{background:transparent}

.badge{
  display:inline-block;background:#eef2ff;border:1px solid #e0e7ff;
  color:#243b53;border-radius:999px;padding:.24rem .6rem;margin-right:.4rem;font-weight:700
}
.badge.bug{background:#ffe4e6;border-color:#fecdd3;color:#7f1d1d}

/* ========== Learn box ========== */
.learnbox{
  border:1px dashed rgba(2,6,23,.18); border-radius:12px; padding:.8rem;
  background:#fbfdff; margin:.75rem 0 1rem;
}

/* ========== Editor & Output ========== */
.editor{
  width:100%; min-height:230px; resize:vertical;
  font:500 15px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background:var(--panel); color:var(--panel-ink);
  border:0; border-radius:12px; padding:12px 12px; outline:none;
}
#out{
  margin-top:.5rem; min-height:80px; border-radius:12px; padding:12px;
  background:var(--panel); color:var(--panel-ink);
  white-space:pre-wrap; font:500 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ========== HUD / toolbar / image ========== */
.hud{margin:.4rem 0 .6rem}
.toolbar{margin:.4rem 0 .6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.peter-hero{width:140px;float:right;margin:0 0 .5rem .6rem;border-radius:12px}

/* Small screens */
@media (max-width:540px){
  .peter-hero{width:110px}
}