/* Homepage-only styles (generated by _src/home.py). */
.hero-disclaimer { margin-top: 1.25rem; font-size: 0.85rem; color: var(--text-muted); }
.hero-disclaimer a { color: var(--accent-blue); }

.hx-compare { position: relative; width: 100%; background: #090d16; overflow: hidden; }
.hx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-after { clip-path: inset(0 45% 0 0); border-right: 2px solid #fff; }
.hx-label { position: absolute; bottom: 0.45rem; padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 0.66rem;
  font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.68); z-index: 2; pointer-events: none; }
.hx-label-left { left: 0.45rem; }
.hx-label-right { right: 0.45rem; }
.hx-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.hx-range:focus-visible { opacity: 0.25; }
.hx-credit { font-size: 0.75rem; color: var(--text-muted); margin: 0.5rem 0 0; }

#start .bento, #tools .bento { text-decoration: none; color: inherit; }
.hx-center { text-align: center; margin-top: 2rem; }

.hx-builder { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1.5rem; align-items: start;
  max-width: var(--width-container); margin: 0 auto; }
.hx-controls { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--rad);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.hx-controls fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.hx-controls legend { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; }
.hx-field { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.85rem; }
.hx-field select { font: inherit; font-weight: 400; padding: 0.4rem 0.5rem; border: 1px solid var(--surface-border);
  border-radius: var(--rad-sm); background: #fff; }
.hx-opt { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; cursor: pointer; }
.hx-output { min-width: 0; }
.hx-output .terminal-container { margin: 0; }
.hx-output pre.terminal-body { max-height: 420px; overflow: auto; }
.hx-run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.hx-run-note { font-size: 0.8rem; color: var(--text-muted); }

.hx-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem;
  max-width: var(--width-container); margin: 0 auto; }
.hx-topic { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--rad); padding: 1rem 1.1rem; }
.hx-topic h3 { font-size: 1rem; margin: 0 0 0.6rem; }
.hx-topic ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.hx-topic a { color: var(--text-primary); text-decoration: none; font-size: 0.9rem; line-height: 1.4; display: flex; gap: 0.5rem; align-items: baseline; }
.hx-topic a:hover { color: var(--accent-blue); }
.hx-kind { flex: none; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.08rem 0.35rem; border-radius: 4px; }
.hx-guide { background: var(--accent-blue-subtle); color: var(--accent-blue); }
.hx-error { background: rgba(217, 119, 6, 0.1); color: var(--accent-amber); }

.hx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem;
  max-width: var(--width-container); margin: 0 auto 1.25rem; }
.hx-stats div { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--rad);
  padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.hx-stats strong { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; }
.hx-stats span { color: var(--text-secondary); font-size: 0.88rem; }
.hx-testing-text { max-width: 760px; margin: 0 auto; color: var(--text-secondary); line-height: 1.65; }

.hx-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.6rem; }
.hx-faq-item { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--rad-sm); padding: 0.8rem 1rem; }
.hx-faq-item summary { cursor: pointer; font-weight: 600; }
.hx-faq-item p { margin: 0.6rem 0 0; color: var(--text-secondary); line-height: 1.6; }

@media (max-width: 800px) {
  .hx-builder { grid-template-columns: minmax(0, 1fr); }
}
#hx-panel { margin-top: 0.75rem; border-top-width: 1px; border-radius: 10px; }