/* Basic, modern, mobile-friendly CSS. No frameworks. */
:root{
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --card: #ffffff;
  --text: #0b0b0c;
  --muted: #656a72;
  --border: #e6e7eb;
  --accent: #f43f5e;
  --btn: #111827;
  --btn-text: #ffffff;
}
html.dark{
  --bg: #0b0b0c;
  --bg-soft: #121316;
  --card: #0f1013;
  --text: #f3f4f6;
  --muted: #a1a1aa;
  --border: #23242a;
  --btn: #f3f4f6;
  --btn-text: #111827;
}
*{box-sizing:border-box}html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, Apple Color Emoji, Segoe UI Emoji;
  background: linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--bg) 80%, var(--bg-soft)));
  color:var(--text);
}
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.site-header, .site-footer{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#60a5fa20,#f472b620);border:1px solid var(--border);font-weight:800;color:#f59e0b}
.brand-title{font-size:20px;margin:0}
.actions{display:flex;gap:8px}
.hero{display:grid; grid-template-columns:1fr; gap:24px; padding:24px 0}
.hero-title{font-size:clamp(28px,4.5vw,52px); margin:0 0 8px 0}
.accent{color:var(--accent)}
.lead{color:var(--muted); font-size:18px}
.cta-row, .socials{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.hero-art{min-height:220px; display:grid; place-items:center}
.section-title{font-size:22px; margin:8px 0 12px 0}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px}
.card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.title{font-weight:800}
.grid.two{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width: 860px){ .grid.two{ grid-template-columns:1fr 1fr; } }
.form{display:grid; gap:12px; margin-bottom:12px}
label{display:grid; gap:6px; font-size:14px; color:var(--muted)}
input, select{
  padding:10px 12px; border:1px solid var(--border); background:var(--bg); color:var(--text);
  border-radius:12px; outline:none; font:inherit;
}
input::placeholder{color:color-mix(in oklab, var(--muted), #999)}
.panel{border:1px solid var(--border); border-radius:16px; overflow:hidden}
.panel-title{padding:8px 12px; background:var(--bg-soft); color:var(--muted); font-size:12px; text-align:center}
.meme{padding:12px}
.gallery .meme{padding:8px}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.btn, .btn-outline, .btn-secondary, .btn-small{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; text-decoration:none; cursor:pointer; border:1px solid transparent;
  user-select:none; -webkit-user-select:none; font-weight:700; transition:transform .05s ease, background .2s ease;
}
.btn-small{ padding:8px 10px; font-size:14px }
.btn{ background:var(--btn); color:var(--btn-text); }
.btn:hover{ transform:translateY(-1px) }
.btn-outline{ background:transparent; color:var(--text); border-color:var(--border) }
.btn-outline:hover{ background:var(--bg-soft) }
.btn-secondary{ background:color-mix(in oklab, var(--btn) 10%, transparent); color:var(--text); border-color:var(--border) }
.muted{ color:var(--muted) }
.gallery{align-items:start}
.site-footer{padding:28px 0; color:var(--muted)}
/* Make embedded SVGs scale responsively */
svg{display:block; max-width:100%; height:auto}
/* Gallery controls bar */
.gallery-actions{ display:flex; gap:8px; flex-wrap:wrap; padding:8px; background:var(--bg-soft); border-top:1px solid var(--border); }
.gallery-actions .btn, .gallery-actions .btn-outline, .gallery-actions .btn-secondary, .gallery-actions .btn-small{ border-radius:10px; }