/* ai_style.css — used ONLY by ai.html (AI page) */

:root{
  --ink:#111;
  --bg:#fff;
  --maxw:1040px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.5;
  background:var(--bg);
  color:var(--ink);
  padding-top:56px; /* give space for fixed nav */
}

/* layout + sections */
.wrapper{max-width:var(--maxw);margin:0 auto;padding:20px}
.band{padding:40px 0}
.band-header{background:#e5f0ff}
.section-title{margin:0 0 14px;font-size:34px}
.note{font-size:14px;color:#555}

/* fixed top nav (independent of site themes) */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:#fff; border-bottom:1px solid #e5e5e5;
}
.site-nav ul{
  margin:0; padding:10px; list-style:none;
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
.site-nav a{ color:#111; text-decoration:none; font-weight:600; }
.site-nav a:hover{ text-decoration:underline; }
.site-nav button#theme-toggle{
  padding:8px 12px; border-radius:999px; font-weight:700;
  background:#111; color:#fff; border:2px solid #111; cursor:pointer;
}
.site-nav button#theme-toggle:hover{ opacity:.9; }

/* controls + canvas */
.controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.controls input[type="text"]{
  flex:1 1 360px; padding:10px 12px;
  border:1px solid #ddd; border-radius:8px; font-size:16px;
}
.btn{
  padding:10px 14px; border-radius:6px; font-weight:600;
  border:2px solid #111; background:#111; color:#fff; cursor:pointer;
}
.btn--outline{ background:transparent; color:#111 }
.btn:hover{ opacity:.9; }

.canvas-wrap{
  background:#fff; border:1px solid #ddd; border-radius:12px; padding:10px;
}
canvas{ display:block; max-width:100%; border-radius:8px }

/* prompt display */
.prompt-pre{
  white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#fafafa; border:1px dashed #ccc; border-radius:8px; padding:12px; margin:0;
}