:root {
  color-scheme:light;
  --bg:#fafbfc;
  --surface:#fff;
  --soft:#f0f3f7;
  --text:#171b23;
  --muted:#5a6373;
  --line:#dce1e9;
  --blue:#215bd7;
  --blue-soft:#eaf0ff;
  --danger:#a53039;
  --shadow:0 22px 70px #16274b0d
}

@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
  color-scheme:dark;
  --bg:#11151c;
  --surface:#191f29;
  --soft:#222b38;
  --text:#edf1f7;
  --muted:#adb9cc;
  --line:#354153;
  --blue:#87acff;
  --blue-soft:#233453;
  --danger:#ff9ca4;
  --shadow:0 22px 70px #0003
}

}

:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#11151c;
  --surface:#191f29;
  --soft:#222b38;
  --text:#edf1f7;
  --muted:#adb9cc;
  --line:#354153;
  --blue:#87acff;
  --blue-soft:#233453;
  --danger:#ff9ca4;
  --shadow:0 22px 70px #0003
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui , -apple-system , BlinkMacSystemFont , "Segoe UI" , sans-serif
}
a {
  color:var(--blue);
  text-underline-offset:4px
}
a:hover {
  text-decoration-thickness:2px
}
button , input , textarea , select {
  font:inherit
}
button , .button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  border:1px solid transparent;
  border-radius:7px;
  background:var(--blue);
  color:var(--bg);
  padding:.72rem 1.15rem;
  font-weight:650;
  text-decoration:none;
  cursor:pointer;
  line-height:1.4;
  transition:filter .15s , transform .15s
}
button:hover , .button:hover {
  filter:brightness(.93);
  transform:translateY(-1px)
}
button.secondary , .button.secondary {
  background:var(--surface);
  color:var(--text);
  border-color:var(--line)
}
button.danger {
  background:var(--surface);
  color:var(--danger);
  border-color:var(--line)
}
button.small , .button.small {
  padding:.5rem .9rem;
  font-size:.87rem
}
button.textbutton , .theme {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:.4rem;
  font-size:.88rem
}
.theme {
  border:1px solid var(--line)
}
[hidden] {
  display:none!important
}
:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:4px
}
header {
  border-bottom:1px solid var(--line);
  background:var(--surface)
}
header nav {
  max-width:1160px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:1.35rem 2rem
}
.wordmark {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:-1px;
  color:var(--text);
  text-decoration:none
}
.mark {
  display:inline-grid;
  place-items:center;
  background:var(--blue);
  color:var(--bg);
  width:32px;
  height:32px;
  font:bold 28px/1 Georgia , serif;
  border-radius:8px 8px 8px 2px
}
.beta {
  font:600 .57rem/1 system-ui;
  letter-spacing:1.5px;
  color:var(--muted);
  margin-left:.5rem;
  border-left:1px solid var(--line);
  padding-left:.7rem
}
.navlinks {
  display:flex;
  align-items:center;
  gap:1.5rem
}
.navlinks>a {
  color:var(--muted);
  font-size:.9rem;
  text-decoration:none
}
.navlinks>a.button {
  color:var(--bg)
}
.navlinks form {
  margin:0
}
main {
  max-width:1160px;
  margin:auto;
  padding:3.5rem 2rem 5rem;
  min-height:72vh
}
h1 , h2 , h3 {
  line-height:1.15;
  letter-spacing:-.04em;
  margin:0 0 1rem
}
h1 {
  font-size:clamp(2.5rem , 5vw , 4rem);
  font-weight:720
}
h2 {
  font-size:1.6rem
}
h3 {
  font-size:1.18rem
}
p {
  margin:.65rem 0 1.2rem
}
.eyebrow {
  font-size:.7rem;
  letter-spacing:2px;
  font-weight:750;
  color:var(--muted);
  margin-bottom:1.6rem
}
.dot {
  display:inline-block;
  height:7px;
  width:7px;
  background:var(--blue);
  border-radius:50%;
  margin-right:7px
}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  align-items:center;
  padding:2.1rem 0 4rem;
  margin:0
}
.hero h1 {
  font-size:clamp(3rem , 5.7vw , 4.7rem);
  line-height:1.05;
  letter-spacing:-.055em
}
.hero h1 span {
  color:var(--blue)
}
.lede {
  max-width:590px;
  color:var(--muted);
  font-size:1.12rem;
  line-height:1.7;
  margin:1.5rem 0
}
.actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.9rem;
  margin:1rem 0
}
.quiet , small {
  color:var(--muted);
  font-size:.89rem
}
.hero .quiet {
  font-size:.77rem;
  margin-top:1.4rem
}
.identity-demo {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:rotate(-1deg)
}
.demo-head {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:2rem;
  background:var(--soft);
  font-size:.7rem;
  letter-spacing:1px
}
.demo-head strong {
  display:block;
  font-size:1.3rem;
  letter-spacing:-.03em;
  margin-top:.3rem
}
.mark.large {
  width:47px;
  height:47px;
  font-size:40px
}
.demo-row {
  display:flex;
  gap:1rem;
  padding:1.4rem;
  border-bottom:1px solid var(--line);
  align-items:center
}
.demo-row strong {
  font-size:.92rem
}
.demo-row p {
  font-size:.73rem;
  color:var(--muted);
  margin:.25rem 0 0
}
.number {
  color:var(--blue);
  font:12px monospace
}
.proof {
  color:var(--blue)!important;
  background:var(--blue-soft)!important
}
.demo-row>.proof {
  font-size:.62rem;
  border-radius:4px;
  padding:.2rem .5rem;
  margin-left:auto;
  white-space:nowrap
}
.demo-foot {
  font-size:.7rem;
  text-align:center;
  padding:1rem;
  color:var(--muted)
}
.intro-grid {
  display:grid;
  grid-template-columns:repeat(3 , 1fr);
  gap:2.5rem;
  border-top:1px solid var(--line);
  padding-top:2.5rem
}
.intro-grid h2 {
  font-size:1.25rem
}
.intro-grid p:not(.eyebrow) {
  color:var(--muted);
  font-size:.9rem
}
.notice {
  padding:1rem 1.25rem;
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  border-radius:5px;
  background:var(--blue-soft);
  font-size:.9rem;
  margin:1.5rem 0
}
.error {
  color:var(--danger);
  border-left-color:var(--danger);
  background:var(--surface)
}
section {
  margin:0 0 3.5rem
}
footer {
  max-width:1096px;
  margin:auto;
  border-top:1px solid var(--line);
  padding:2rem 0;
  display:flex;
  align-items:center;
  gap:1.5rem;
  color:var(--muted);
  font-size:.8rem
}
footer p {
  margin:0
}
footer>span {
  margin-left:auto
}
.auth {
  max-width:460px;
  margin:1rem auto 3rem
}
.auth.wide {
  max-width:720px
}
.auth h1 {
  font-size:2.7rem
}
.auth>p {
  color:var(--muted)
}
form>label , label {
  display:block;
  font-size:.86rem;
  font-weight:620;
  margin:1rem 0 .4rem
}
input , select , textarea {
  display:block;
  width:100%;
  padding:.75rem .85rem;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  margin-top:.35rem;
  min-width:0
}
textarea {
  resize:vertical
}
form>button {
  margin-top:1rem
}
.check {
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  font-weight:450
}
.check input {
  width:auto;
  margin-top:.3rem;
  accent-color:var(--blue)
}
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:9px;
  padding:1.5rem;
  margin:1rem 0;
  overflow-wrap:anywhere
}
.card form+form {
  margin-top:1rem
}
.cardtop {
  display:flex;
  gap:.65rem;
  align-items:center;
  flex-wrap:wrap
}
.tag {
  display:inline-block;
  background:var(--soft);
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:4px;
  padding:.2rem .55rem;
  font-size:.72rem;
  font-weight:600
}
.meta {
  font-size:.75rem;
  color:var(--muted)
}
pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:var(--soft);
  padding:1rem;
  border-radius:5px;
  font: .85rem/1.7 ui-monospace , SFMono-Regular , Consolas , monospace;
  max-height:400px;
  overflow:auto
}
pre.text {
  font-family:inherit;
  background:transparent;
  padding:.5rem 0
}
.hash {
  display:block;
  overflow-wrap:anywhere;
  font-size:.87rem;
  color:var(--blue)
}
summary {
  cursor:pointer;
  font-weight:600
}
details>summary {
  padding:.3rem 0
}
details[open]>summary {
  margin-bottom:1rem
}
.copy {
  padding:.3rem .6rem;
  font-size:.75rem;
  margin:0 0 .8rem
}
.profile-head {
  border-bottom:1px solid var(--line);
  padding-bottom:2.5rem
}
.username {
  color:var(--blue);
  font-size:1.2rem
}
.bio {
  white-space:pre-wrap;
  max-width:700px
}
.entry {
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  border-bottom:1px solid var(--line);
  padding:1.2rem 0;
  overflow-wrap:anywhere
}
.entry strong {
  min-width:120px
}
.entry .tag {
  margin-left:auto
}
.people {
  display:grid;
  grid-template-columns:repeat(2 , 1fr);
  gap:1rem;
  margin:2rem 0
}
.person {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.3rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  text-decoration:none;
  color:var(--text);
  overflow-wrap:anywhere
}
.person h2 {
  font-size:1.1rem;
  margin:0
}
.person p {
  font-size:.9rem;
  margin:.3rem 0 0;
  color:var(--muted)
}
.avatar {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  background:var(--blue-soft);
  color:var(--blue);
  border-radius:7px
}
.arrow {
  margin-left:auto;
  color:var(--blue)
}
.search {
  max-width:700px
}
.search .actions {
  flex-wrap:nowrap
}
.search input {
  margin:0
}
.empty {
  padding:1.5rem;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:6px
}
.account-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem
}
.account-head h1 {
  font-size:3rem
}
.tabs {
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding:1rem 0;
  margin-bottom:3rem
}
.tabs a {
  font-size:.9rem
}
.record-action {
  margin-bottom:2rem
}
.skip {
  position:absolute;
  top:-80px;
  left:1rem;
  z-index:10;
  background:var(--surface);
  padding:1rem
}
.skip:focus {
  top:1rem
}

@media(max-width:800px) {
  header nav {
  padding:1rem;
  gap:1rem;
  flex-wrap:wrap
}
.navlinks {
  gap:.9rem;
  flex-wrap:wrap
}
.beta {
  display:none
}
main {
  padding:2rem 1.15rem 3rem
}
.hero {
  grid-template-columns:1fr;
  gap:2rem;
  padding-top:.5rem
}
.hero h1 {
  font-size:3.5rem
}
.identity-demo {
  transform:none
}
.intro-grid {
  grid-template-columns:1fr;
  gap:1rem
}
.intro-grid article {
  border-bottom:1px solid var(--line);
  padding-bottom:1rem
}
.people {
  grid-template-columns:1fr
}
.account-head {
  align-items:flex-start;
  flex-direction:column
}
.account-head h1 {
  font-size:2.4rem
}
.entry {
  gap:.7rem
}
.entry .tag {
  margin-left:0
}
footer {
  margin:0 1rem;
  flex-wrap:wrap
}
footer>span {
  margin:0;
  width:100%
}
.card {
  padding:1.1rem
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
* , *:before , *:after {
  transition:none!important;
  transform:none!important
}

}


pre.text code { font: inherit; }

.profile-image { display: block; width: 150px; height: 150px; border-radius: 12px; margin-bottom: 1.5rem; }
.directory-image { flex-shrink: 0; border-radius: 7px; }