@import url('/layout-tokens.css?v=1');

body.tqs-public {
  --bg-primary: #19191c;
  --bg-secondary: #202024;
  --bg-tertiary: #28282d;
  --text-primary: #edecee;
  --text-secondary: #b9b8c0;
  --text-tertiary: #9d9ca3;
  --surface-soft: #202024;
  --surface-mid: #28282d;
  --border: rgba(255,255,255,.09);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.12);
  margin: 0;
  background: var(--bg-primary);
  font: 15px/1.65 'Manrope', system-ui, sans-serif;
  color: var(--text-primary);
}
body.tqs-public.light-mode {
  --bg-primary: #f7f6f5;
  --bg-secondary: #fff;
  --bg-tertiary: #f2f1ef;
  --text-primary: #1d1a31;
  --text-secondary: #4a4757;
  --text-tertiary: #5f5c6d;
  --surface-soft: #fff;
  --surface-mid: #f2f1ef;
  --border: rgba(24,22,43,.12);
  --shadow-sm: 0 4px 14px rgba(49,42,96,.05);
}
.tqs-public *, .tqs-public *::before, .tqs-public *::after { box-sizing: border-box; }
.tqs-public .container {
  width: min(var(--qs-page-width), calc(100% - 2 * var(--qs-page-gutter)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
.tqs-public :is(#bg-canvas, .mesh, .rainbow-line) { display: none; }
.tqs-public .nav-wrap { padding: 16px 0; top: 0; background: var(--bg-primary); z-index: 50; }
.tqs-public .nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 80px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--qs-card-radius);
  background: var(--surface-soft);
  box-shadow: var(--shadow-sm);
  animation: none;
}
.tqs-public .nav::after { display: none; }
.tqs-public .brand { min-width: 0; gap: 12px; color: var(--text-primary); }
.tqs-public .brand-logo { width: 44px; height: 44px; border-radius: 13px; box-shadow: none; }
.tqs-public .brand-title { font-size: 1rem; }
.tqs-public .brand-sub { font-size: .75rem; color: var(--text-tertiary); }
.tqs-public .nav-links { display: flex; flex-wrap: nowrap; gap: 18px; align-items: center; }
.tqs-public .nav-links a { font-size: .85rem; white-space: nowrap; color: var(--text-secondary); }
.tqs-public .nav-links a:is(:hover, [aria-current="page"]) { color: var(--primary-light); }
.tqs-public .nav-actions { gap: 8px; }
.tqs-public .btn { border-radius: 10px; padding: 10px 14px; font-size: .85rem; }
.tqs-public .btn-secondary { background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-primary); }
.tqs-public :is(.hero, .page-hero) { margin: 0 auto; padding-block: 56px; }
.tqs-public :is(.hero-title, .page-hero h1) { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.12; letter-spacing: -.04em; }
.tqs-public :is(.section, .blog-section) { padding-block: 40px; }
.tqs-public .post-wrap { padding-block: 40px 64px; }
.tqs-public .content-container { width: min(820px, calc(100% - 2 * var(--qs-page-gutter))); }
.tqs-public :is(.post-card, .surface, .post-cover) { border-radius: var(--qs-card-radius); }
.tqs-public .post-body img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin-block: 20px; }
.tqs-public .post-body { overflow-wrap: anywhere; }
.tqs-public .empty-state { grid-column: 1 / -1; opacity: 1; transform: none; }
.tqs-public footer { margin-top: 40px; padding: 32px var(--qs-page-gutter); border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: .85rem; }
.tqs-public .public-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 12px; }
.tqs-public .reaction-error { color: var(--text-secondary); width: 100%; }
@media (max-width: 1200px) {
  .tqs-public .nav { flex-wrap: wrap; }
  .tqs-public .nav-links { order: 3; width: 100%; overflow-x: auto; padding-top: 12px; border-top: 1px solid var(--border); }
}
@media (max-width: 600px) {
  .tqs-public .nav-wrap { padding-block: 12px; position: relative; }
  .tqs-public .nav { padding: 16px; gap: 14px; }
  .tqs-public .nav-actions { flex-wrap: wrap; }
  .tqs-public .brand { width: 100%; }
  .tqs-public :is(.hero, .page-hero) { padding-block: 32px; }
  .tqs-public :is(.section, .blog-section) { padding-block: 24px; }
}
@media (max-width: 600px) {
  .tqs-public .nav-links { flex-wrap: wrap; overflow: visible; gap: 10px 16px; }
}
.tqs-public .blog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--qs-section-gap); padding-block: 32px 48px; }