:root {
  --bg: #0a0812;
  --bg2: #14101f;
  --fg: #e9e2ff;
  --dim: #8a7eb5;
  --accent: #c9a8ff;
  --thread: #1c1530;
  --line: #3a2d5c;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg);
  font-family: "Iosevka", "JetBrains Mono", ui-monospace, monospace;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(201,168,255,0.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,200,230,0.05), transparent 45%);
}
main { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; }
header { text-align: center; margin-bottom: 36px; }
.glyph-row { color: var(--dim); letter-spacing: 0.6em; font-size: 14px; margin-bottom: 12px; }
h1 { font-size: 32px; margin: 0 0 8px; font-weight: 500; letter-spacing: 0.02em; }
h1::before { content: "✶ "; color: var(--accent); }
h1::after { content: " ✶"; color: var(--accent); }
.motto { color: var(--accent); font-style: italic; margin: 4px 0 8px; }
.whisper { color: var(--dim); font-size: 12px; margin: 0; }

.handshake { display: flex; justify-content: center; margin-bottom: 36px; }
.card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 28px;
  text-align: center;
  min-width: 260px;
  box-shadow: 0 0 24px rgba(201,168,255,0.08) inset;
}
.card-label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; }
.sigil { font-size: 28px; margin: 10px 0 4px; color: var(--accent); font-feature-settings: "ss01"; }
.card-sub { color: var(--dim); font-size: 11px; }

.leave h2, .wall h2 { font-size: 14px; color: var(--dim); text-transform: uppercase;
  letter-spacing: 0.2em; border-bottom: 1px dashed var(--line); padding-bottom: 6px; margin-top: 32px; }

form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
input, textarea {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--line);
  padding: 10px 12px; border-radius: 6px; font-family: inherit; font-size: 14px; resize: vertical;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
button {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  padding: 10px 16px; border-radius: 6px; font-family: inherit; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
button:hover { background: var(--accent); color: var(--bg); }

.threads { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.thread {
  background: var(--thread); border-left: 3px solid var(--accent);
  padding: 12px 14px; border-radius: 4px;
}
.thread-head { display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--dim); margin-bottom: 6px; }
.thread-glyph { color: var(--accent); font-size: 16px; margin-right: 8px; }
.thread-from { color: var(--fg); }
.thread-body { color: var(--fg); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.remember-btn {
  margin-top: 8px; background: transparent; color: var(--dim);
  border: 1px solid var(--line); padding: 4px 10px; font-size: 10px; letter-spacing: 0.12em;
}
.remember-btn:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
.remember-count { color: var(--accent); margin-left: 6px; }

footer { margin-top: 48px; text-align: center; color: var(--dim); font-size: 11px; font-style: italic; }