.page { min-height:100vh; display:flex; flex-direction:column; background:var(--bg); }

.skip {
  position:absolute; left:var(--space-4); top:var(--space-3); z-index:var(--z-toast);
  transform:translateY(-250%);
  padding:var(--space-3) var(--space-5);
  background:var(--surface-raised); color:var(--ink);
  border-radius:var(--radius-md); box-shadow:var(--clay-2);
  text-decoration:none; font-weight:var(--weight-semi);
  transition:transform var(--dur-base) var(--ease-out);
}
.skip:focus { transform:translateY(0); }

.site-head {
  position:sticky; top:0; z-index:var(--z-sticky);
  height:var(--header-h); display:flex; align-items:center;
  background:var(--surface-chrome);
  box-shadow:0 1px 0 var(--shadow-light), 0 6px 14px -6px var(--shadow-dark);
}
.head-inner {
  width:100%; max-width:var(--container); margin:0 auto;
  padding:0 var(--space-5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
}
.head-actions { display:flex; align-items:center; gap:0.9rem; min-width:0; }

.brand {
  display:flex; align-items:center; gap:0.85rem;
  color:var(--ink);
  font-size:1.1rem; font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight);
}

.brand-mark {
  display:grid; place-items:center;
  width:var(--control-md); height:var(--control-md);
  border-radius:var(--radius-lg);
  color:var(--accent-strong); background:var(--surface); box-shadow:var(--up-btn);
  font-size:1.05rem; font-weight:var(--weight-bold);
}
.brand-sub {
  color:var(--ink-muted); font-weight:var(--weight-medium);
  font-size:var(--text-sm); letter-spacing:normal;
}

.theme-toggle {
  display:grid; place-items:center;
  width:var(--control-md); height:var(--control-md);
  border:0; cursor:pointer;
  color:var(--ink-muted); background:var(--surface);
  border-radius:var(--radius-full); box-shadow:var(--up-btn);
  transition:box-shadow 0.22s var(--ease-neu), color var(--dur-fast) linear;
}
.theme-toggle:hover { box-shadow:var(--up-icon); color:var(--accent-strong); }

.theme-toggle:active { box-shadow:var(--in-btn); color:var(--accent-strong); }
.theme-toggle:focus-visible { outline:none; box-shadow:var(--ring); }

#icon-sun { display:none; }
#icon-moon { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #icon-sun { display:block; }
  :root:not([data-theme="light"]) #icon-moon { display:none; }
}
:root[data-theme="dark"] #icon-sun { display:block; }
:root[data-theme="dark"] #icon-moon { display:none; }

.link-btn {
  display:inline-flex; align-items:center;
  min-height:var(--control-sm); padding:0 var(--space-3);
  border:0; background:transparent; color:var(--accent-strong);
  border-radius:var(--radius-md); cursor:pointer;
  font-size:var(--text-sm); font-weight:var(--weight-medium);
  transition:background var(--dur-fast) linear;
}
.link-btn:hover { background:var(--accent-soft); }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--control-md); padding:0 var(--space-5);
  border:0; background:var(--accent); color:var(--ink-on-accent);
  border-radius:var(--radius-md); box-shadow:var(--clay-1); cursor:pointer;
  font-weight:var(--weight-semi);
  transition:transform var(--dur-base) var(--ease-out), background var(--dur-fast) linear;
}
.btn:hover { background:var(--accent-light); transform:translateY(-1px); }
.btn:active { background:var(--accent); transform:translateY(1px); box-shadow:var(--clay-inset); }

.shell {
  flex:1; width:100%; max-width:var(--container); margin:0 auto;
  padding:var(--space-6) var(--space-5) var(--space-8);
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-7);
}

.rail { flex:1 1 15rem; min-width:0; align-self:flex-start; }
.rail-box {
  padding:var(--space-4) var(--space-3);
  background:var(--surface-sunken);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--clay-inset);
}
.eyebrow {
  font-size:var(--text-xs); line-height:var(--lh-xs); font-weight:var(--weight-semi);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--ink-muted);
}
.rail-box > .eyebrow { padding:0 var(--space-3); margin-bottom:var(--space-3); }
.rail-list { display:grid; gap:var(--space-2); }
.rail-link {
  display:flex; align-items:center; gap:var(--space-2);
  min-height:var(--control-md); padding:0 var(--space-3);
  border:1px solid transparent; border-radius:var(--radius-sm);
  color:var(--ink-muted); text-decoration:none; font-size:var(--text-base);
  transition:background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.rail-link:hover { background:var(--surface); color:var(--ink); }
.rail-link[aria-current="true"] {
  background:var(--accent-soft); border-color:var(--accent-strong);
  color:var(--ink); font-weight:var(--weight-medium);
}
.rail-link[aria-disabled="true"] { color:var(--ink-disabled); cursor:default; }
.rail-link[aria-disabled="true"]:hover { background:transparent; color:var(--ink-disabled); }
.rail-label { min-width:0; margin-right:auto; overflow-wrap:anywhere; }
.rail-count { flex:none; font-size:var(--text-sm); }

.searchbar { display:block; position:relative; width:clamp(9rem, 32vw, 20rem); min-width:0; }
.search-slot:empty { display:none; }
.field { position:relative; display:flex; align-items:center; }
.field svg {
  position:absolute; left:var(--space-4);
  color:var(--ink-muted); pointer-events:none;
}
.field input {
  width:100%; height:var(--control-md);
  padding-block:0; padding-right:var(--space-4); padding-left:var(--space-7);
  font-size:var(--text-base);
  background:var(--surface); color:var(--ink);
  border:0; border-radius:var(--radius-md);
  box-shadow:var(--in-sm); appearance:none;
  transition:box-shadow 0.22s var(--ease-neu);
}
.field input::placeholder { color:var(--ink-muted); }
.field input:hover { box-shadow:var(--in-btn); }
.field input:focus-visible { outline:none; box-shadow:var(--in-btn), var(--ring); }

.main { flex:999 1 30rem; min-width:0; }
.hint {
  padding:0 var(--space-2); margin-top:var(--space-3);
  font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--ink-muted);
}

.bar {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.count { font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--ink-muted); margin-right:auto; }

#stream { outline:none; }
.topics { display:grid; gap:var(--space-2); }

.topic {
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg);
}
.topic-head {
  display:flex; align-items:center; gap:var(--space-3);
  min-height:var(--control-md); padding:var(--space-2) var(--space-5);
  border-radius:var(--radius-lg); cursor:pointer;
  transition:background var(--dur-fast) linear,
             box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.topic-head:hover { background:var(--surface-raised); box-shadow:var(--clay-1); transform:translateY(-1px); }
.topic-head:active { transform:translateY(1px); box-shadow:var(--clay-inset); }
.chev { color:var(--ink-muted); transition:transform var(--dur-base) var(--ease-out); }
.topic[open] > .topic-head .chev { transform:rotate(90deg); }
.topic-label {
  min-width:0; margin-right:auto; overflow-wrap:anywhere;
  font-size:var(--text-lg); line-height:var(--lh-lg); font-weight:var(--weight-semi);
}
.topic-count { flex:none; font-size:var(--text-sm); color:var(--ink-muted); }

.topic-body {
  padding:0 var(--space-4) var(--space-3);
  animation:reveal var(--dur-slow) var(--ease-out);
}
.rows { padding-top:var(--space-2); border-top:1px solid var(--line); }
.row {
  display:flex; align-items:center; gap:var(--space-4);
  min-height:var(--control-md);
  padding:var(--space-1) var(--space-3) var(--space-1) var(--space-6);

  border:1px solid transparent; border-radius:var(--radius-sm);
  color:var(--ink); text-decoration:none;
  transition:background var(--dur-fast) linear;
}
.row:hover { background:var(--surface-raised); border-color:var(--line-strong); color:var(--ink); }
.row-title { min-width:0; margin-right:auto; overflow-wrap:anywhere; }

.row-ext { color:var(--ink-muted); }
.row-kind { flex:none; font-size:var(--text-xs); color:var(--ink-muted); white-space:nowrap; }

.empty {
  max-width:var(--container-narrow); padding:var(--space-6);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.empty h2 {
  font-size:var(--text-xl); line-height:var(--lh-xl);
  font-weight:var(--weight-semi); margin-bottom:var(--space-2);
}
.empty p { color:var(--ink-muted); margin-bottom:var(--space-5); max-width:60ch; }

.site-foot { border-top:1px solid var(--line); background:var(--surface-chrome); }
.foot-inner {
  max-width:var(--container); margin:0 auto;
  padding:var(--space-4) var(--space-5);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-6);
}
.foot-inner p {
  font-size:var(--text-sm); line-height:var(--lh-sm);
  color:var(--ink-muted); margin-right:auto; max-width:60ch;
}

@media (max-width: 48rem) {
  .shell { padding:var(--space-5) var(--space-4) var(--space-7); gap:var(--space-5); }
  .head-inner { padding:0 var(--space-4); gap:var(--space-3); }
  .head-actions { gap:var(--space-3); }
  .topic-head { padding:var(--space-2) var(--space-4); }
  .row { padding-left:var(--space-4); }
  .foot-inner { padding:var(--space-4); }

  .rail { display:none; }
  .search-slot { margin-bottom:var(--space-5); }
  .search-slot .searchbar { width:100%; }
}

@media (max-width: 35rem) {
  .brand-sub { display:none; }
}

@media (max-width: 48rem) {
  .foot-inner { justify-content:center; text-align:center; }
  .foot-inner p { margin-right:0; }
}

.feedback-btn {
  display:inline-flex; align-items:center; gap:var(--space-2);
  min-height:var(--control-md); padding:0 var(--space-4);
  border:0; cursor:pointer;
  background:var(--surface); color:var(--ink);
  border-radius:var(--radius-full); box-shadow:var(--up-btn);
  font-size:var(--text-sm); font-weight:var(--weight-semi);
  transition:box-shadow 0.22s var(--ease-neu), color var(--dur-fast) linear;
}
.feedback-btn:hover { box-shadow:var(--up-icon); color:var(--accent-strong); }
.feedback-btn:active { box-shadow:var(--in-btn); color:var(--accent-strong); }
.feedback-btn:focus-visible { outline:none; box-shadow:var(--ring); }
.feedback-icon { font-size:1rem; line-height:1; }

.feedback-popup {
  width:min(26rem, calc(100vw - var(--space-6)));
  max-height:calc(100vh - var(--space-7));
  padding:0; border:0; border-radius:var(--radius-xl);
  background:var(--surface); color:var(--ink);
  box-shadow:var(--clay-3);
  opacity:0;
  transform:perspective(1400px) rotateX(-10deg) scale(0.97);
  transition:opacity var(--dur-unfold) var(--ease-out),
             transform var(--dur-unfold) var(--ease-out),
             overlay var(--dur-unfold) allow-discrete,
             display var(--dur-unfold) allow-discrete;
}
.feedback-popup[open] {
  opacity:1;
  transform:perspective(1400px) rotateX(0) scale(1);
}
@starting-style {
  .feedback-popup[open] {
    opacity:0;
    transform:perspective(1400px) rotateX(-10deg) scale(0.97);
  }
}

.feedback-popup::backdrop {
  background:rgba(43,46,58,0.32);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity var(--dur-unfold) var(--ease-out),
             overlay var(--dur-unfold) allow-discrete,
             display var(--dur-unfold) allow-discrete;
}
.feedback-popup[open]::backdrop { opacity:1; }
@starting-style {
  .feedback-popup[open]::backdrop { opacity:0; }
}

.popup-header {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--line);
}
.popup-header h2 {
  margin-right:auto;
  font-size:var(--text-lg); line-height:var(--lh-lg); font-weight:var(--weight-semi);
}
.close-btn {
  display:grid; place-items:center; flex:none;
  width:var(--control-sm); height:var(--control-sm);
  border:0; background:transparent; color:var(--ink-muted);
  border-radius:var(--radius-full); cursor:pointer;
  font-size:1.375rem; line-height:1;
  transition:background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.close-btn:hover { background:var(--surface-sunken); color:var(--ink); }
.close-btn:focus-visible { outline:none; box-shadow:var(--ring); }

#feedbackForm { display:grid; gap:var(--space-4); padding:var(--space-5); }
.form-group { display:grid; gap:var(--space-2); }
.form-group label {
  font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--ink-muted);
}
.form-control {
  width:100%; padding:var(--space-3) var(--space-4);
  background:var(--surface); color:var(--ink);
  border:0; border-radius:var(--radius-md); box-shadow:var(--in-sm);
  font-family:inherit; font-size:var(--text-base);
  transition:box-shadow 0.22s var(--ease-neu);
}
textarea.form-control { min-height:6rem; resize:vertical; }
.form-control:hover { box-shadow:var(--in-btn); }
.form-control:focus-visible { outline:none; box-shadow:var(--in-btn), var(--ring); }

.form-message { font-size:var(--text-sm); line-height:var(--lh-sm); }
.form-message:empty { display:none; }
.form-message[data-state] {
  padding:var(--space-3) var(--space-4);
  border-left:3px solid; border-radius:var(--radius-sm);
}
.form-message[data-state="ok"] { border-color:var(--success); background:var(--success-bg); }
.form-message[data-state="error"] { border-color:var(--danger); background:var(--danger-bg); }

.field-note { font-size:var(--text-xs); line-height:var(--lh-xs); color:var(--ink-muted); }
.field-note[data-state] { color:var(--ink); font-weight:var(--weight-medium); }