/* ===== Cloudflare Workers Showcase — demo hub ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0a0a0f;
  --panel: #15151f;
  --panel-2: #1c1c2a;
  --line: #2a2a3c;
  --text: #e7e7ee;
  --muted: #8a8aa0;
  --cf: #f6821f;
  --cf-2: #faae40;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 4px;
  font-size: 0.85em; color: var(--cf-2);
}

/* header */
.hdr { border-bottom: 1px solid var(--line); background: rgba(10,10,15,0.9); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); }
.hdr-inner { max-width: 1180px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.logo-mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px;
  background: linear-gradient(135deg, var(--cf), var(--cf-2)); color: #0a0a0f; font-weight: 900; font-size: 13px;
}
.hdr-meta { color: var(--muted); font-size: 13px; }

/* intro */
.intro { max-width: 1180px; margin: 0 auto; padding: 54px 22px 30px; }
.intro h1 { font-size: 42px; font-weight: 900; letter-spacing: -0.5px; }
.intro .hl { color: var(--cf); }
.intro p { color: var(--muted); font-size: 17px; max-width: 640px; margin-top: 12px; }

/* group heading */
.group {
  max-width: 1180px; margin: 38px auto 14px; padding: 0 22px;
  font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: var(--cf);
  font-weight: 800;
}

/* grid */
.grid {
  max-width: 1180px; margin: 0 auto; padding: 0 22px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; display: flex; flex-direction: column;
}
.card-wide { grid-column: span 3; }
.card-ico { font-size: 30px; margin-bottom: 6px; }
.card h3 { font-size: 18px; margin-bottom: 4px; }
.card > p { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.badge {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; vertical-align: middle;
  background: var(--cf); color: #0a0a0f; padding: 2px 7px; border-radius: 999px; margin-left: 6px;
}

/* inputs */
.in {
  width: 100%; padding: 9px 11px; margin-bottom: 9px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 13px; font-family: inherit;
}
.in:focus { outline: none; border-color: var(--cf); }
.ta { resize: vertical; min-height: 70px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

/* buttons */
.run {
  background: linear-gradient(135deg, var(--cf), var(--cf-2)); color: #0a0a0f;
  border: 0; padding: 9px 16px; border-radius: 8px; font-weight: 700; font-size: 13px;
  cursor: pointer; margin-right: 7px; margin-bottom: 8px; font-family: inherit;
}
.run:hover { filter: brightness(1.08); }
.run:disabled { opacity: 0.5; cursor: default; }

/* output */
.out {
  display: none; margin-top: 8px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; color: #b9f5c0; white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow: auto;
}
.out.show { display: block; }
.out.err { color: #ff9a9a; }

/* iframe demo (HTMLRewriter) — side-by-side compare */
.frame-compare { display: flex; gap: 14px; margin-top: 10px; }
.frame-col { flex: 1; min-width: 0; }
.frame-label {
  font-size: 12px; color: var(--muted); padding: 6px 4px; font-weight: 600;
}
.frame-label.hl { color: var(--cf); }
.demo-frame {
  width: 100%; height: 280px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; display: block;
}
@media (max-width: 880px) {
  .frame-compare { flex-direction: column; }
}

/* chat */
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat-log {
  height: 240px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px; font-size: 13px;
}
.chat-line { margin-bottom: 5px; }
.chat-line.sys { color: var(--muted); font-style: italic; font-size: 12px; }
.chat-line.msg b { color: var(--cf-2); }
.chat-input { display: flex; gap: 8px; }
.chat-input .in { margin-bottom: 0; }
.chat-input .run { margin: 0; }

/* footer */
.ftr {
  max-width: 1180px; margin: 50px auto 30px; padding: 22px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center;
}

@media (max-width: 880px) {
  .grid { grid-template-columns: 1fr; }
  .card-wide { grid-column: span 1; }
  .intro h1 { font-size: 32px; }
}