:root {
  color-scheme:dark;
  --bg:#10151c;
  --panel:#18212c;
  --ink:#edf3fa;
  --muted:#a7b4c4;
  --accent:#75b7ff;
  --line:#303e50;
  --width:1180px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}
::selection {
  background:#75b7ff;
  color:#10151c
}
.shell {
  width:min(var(--width),calc(100% - 96px));
  margin:auto
}
.skip {
  position:absolute;
  top:-60px;
  left:20px;
  background:var(--ink);
  color:var(--bg);
  padding:14px;
  z-index:9
}
.skip:focus {
  top:16px
}
.header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:24px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:23px;
  font-weight:700;
  letter-spacing:-1px
}
.brand svg {
  width:38px;
  height:38px
}
.brand .domain {
  color:var(--muted);
  font-weight:400
}
.navigation {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14px
}
.navigation a {
  transition:color .2s
}
.navigation a:hover {
  color:var(--accent)
}
.navigation .sign-in {
  border:1px solid #556575;
  border-radius:999px;
  padding:13px 19px;
  display:flex;
  gap:22px;
  align-items:center
}
.hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:center;
  min-height:660px;
  gap:18px;
  padding:82px 0 96px
}
.eyebrow {
  font-size:11px;
  font-weight:600;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 30px
}
.eyebrow:before {
  content:'';
  width:23px;
  height:1px;
  background:var(--accent)
}
h1 {
  font-family:inherit;
  font-size:clamp(50px,5.3vw,76px);
  font-weight:650;
  line-height:1.08;
  letter-spacing:-4px;
  margin:0 0 30px;
  position:relative;
  z-index:1
}
h1 em {
  font-style:normal;
  font-weight:inherit;
  color:var(--accent)
}
.intro {
  max-width:410px;
  color:var(--muted);
  font-size:17px;
  line-height:1.85;
  margin:0 0 34px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  padding:17px 23px;
  border-radius:5px;
  background:var(--accent);
  color:#142230;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s
}
.button:hover {
  background:#c3defa;
  transform:translateY(-2px)
}
.text-link {
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid #596b7d;
  padding:8px 0
}
.text-link:hover {
  color:var(--accent)
}
.sculpture {
  position:relative;
  width:100%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  isolation:isolate
}
.sculpture:before {
  content:'';
  position:absolute;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(ellipse,#598ec335,transparent 68%);
  filter:blur(24px);
  z-index:-1
}
.orbit {
  position:absolute;
  inset:8%;
  border:1px solid #4355674a;
  border-radius:50%;
  transform:rotate(-28deg) scaleY(.83)
}
.orbit.two {
  inset:0 15%;
  transform:rotate(29deg) scaleX(.87);
  border-color:#5f7c9940
}
.orbit.three {
  inset:19% -4%;
  transform:rotate(38deg);
  border-color:#5169824a
}
.monogram {
  width:78%;
  height:78%;
  filter:drop-shadow(0 26px 30px #04050770)
}
.orbit-dot {
  position:absolute;
  top:19%;
  right:15%;
  height:7px;
  width:7px;
  border-radius:50%;
  background:#b3d9ff;
  box-shadow:0 0 20px #6caef1
}
.art-caption {
  position:absolute;
  bottom:0;
  right:7%;
  font-family:monospace;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#8a9caf
}
.art-caption span {
  color:#596b7d;
  margin-right:18px
}
.section {
  padding:65px 0;
  border-top:1px solid var(--line)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin-bottom:32px
}
.section-heading .eyebrow {
  margin:0
}
.section-heading p {
  margin:0;
  font-size:12px;
  color:var(--muted)
}
.tag {
  display:inline-block;
  color:#b4c2d0;
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  border:1px solid #455361;
  border-radius:99px;
  padding:7px 10px
}
h2 {
  font-family:inherit;
  font-size:38px;
  letter-spacing:-1px;
  font-weight:600;
  line-height:1.15;
  margin:0 0 20px
}
.about {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  padding:18px 0 22px
}
.about h2 {
  font-size:42px;
  max-width:410px
}
.about p {
  font-size:16px;
  line-height:1.9;
  color:var(--muted);
  margin:0
}
.about p+p {
  margin-top:18px
}
.footer {
  border-top:1px solid var(--line);
  padding:30px 0 38px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:12px
}
.footer-links {
  display:flex;
  gap:26px
}
.footer a:hover {
  color:var(--accent)
}
.member-hero {
  min-height:450px
}
.member-hero h1 {
  font-size:clamp(48px,6vw,80px);
  overflow-wrap:anywhere
}
.app-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px
}
.app-card {
  padding:32px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px
}
.app-card:hover {
  border-color:#6d8fb2
}
.app-card h2 {
  margin:0;
  font-size:32px
}
.app-card p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin:0
}
.app-card .text-link {
  margin-top:auto
}
.no-apps {
  color:var(--muted);
  line-height:1.7;
  padding:22px 0
}
@media(min-width:1500px) {
  .hero {
    min-height:740px
  }
}
@media(max-width:900px) {
  .shell {
    width:calc(100% - 56px)
  }
  .header {
    height:90px
  }
  .hero {
    min-height:570px;
    padding:65px 0
  }
  .navigation {
    gap:24px
  }
  h1 {
    font-size:clamp(42px,6vw,54px)
  }
  .sculpture {
    margin-left:0;
    width:90%
  }
  .about {
    gap:32px
  }
  .about h2 {
    font-size:36px
  }
}
@media(max-width:620px) {
  .shell {
    width:calc(100% - 40px)
  }
  .header {
    height:86px
  }
  .brand {
    font-size:21px;
    gap:9px
  }
  .brand svg {
    width:33px;
    height:33px
  }
  .navigation {
    gap:0
  }
  .navigation .section-link {
    display:none
  }
  .navigation .sign-in {
    padding:11px 15px;
    font-size:12px;
    gap:18px
  }
  .hero {
    grid-template-columns:1fr;
    min-height:auto;
    padding:53px 0 42px;
    gap:0
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1.7px;
    margin-bottom:26px
  }
  h1 {
    font-size:clamp(36px,10.8vw,64px);
    letter-spacing:-2.7px;
    margin-bottom:25px
  }
  .intro {
    font-size:16px;
    line-height:1.8;
    max-width:340px;
    margin-bottom:25px
  }
  .hero-actions {
    gap:20px
  }
  .button {
    padding:16px 19px;
    gap:30px
  }
  .sculpture {
    width:82%;
    max-width:340px;
    margin:32px auto 0
  }
  .art-caption {
    font-size:8px;
    right:0;
    bottom:4px
  }
  .section {
    padding:37px 0
  }
  .section-heading {
    align-items:flex-start;
    gap:10px
  }
  .section-heading p {
    font-size:10px;
    max-width:100px;
    text-align:right;
    line-height:1.6
  }
  .about {
    grid-template-columns:1fr;
    gap:4px;
    padding-bottom:8px
  }
  .about h2 {
    font-size:35px
  }
  .about p {
    font-size:15px
  }
  .footer {
    font-size:10px;
    line-height:1.6;
    align-items:center
  }
  .footer-links {
    gap:17px
  }
  .app-grid {
    grid-template-columns:1fr
  }
  .member-hero .sculpture {
    display:none
  }
  .member-hero {
    padding-bottom:55px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important
  }
}
.interests {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  padding:0 0 65px
}
.interests>div {
  border-top:1px solid var(--line);
  padding-top:28px
}
.interest-number {
  font:11px monospace;
  color:var(--accent)
}
.interests h2 {
  font-size:23px;
  font-weight:600;
  margin:14px 0 12px;
  letter-spacing:-.4px
}
.interests p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  margin:0
}
@media(max-width:620px) {
  .interests {
    gap:24px;
    padding-bottom:40px
  }
  .interests h2 {
    font-size:21px
  }
  .interests p {
    font-size:12px
  }
  .footer {
    align-items:flex-start
  }
  .footer-links {
    flex-direction:column;
    gap:8px;
    text-align:right
  }
}
.hero:not(.member-hero) h1 em {
  white-space:nowrap
}
@media(max-width:620px) {
  .section-heading .eyebrow {
    max-width:none;
    text-align:left;
    flex-shrink:0;
    white-space:nowrap
  }
  .eyebrow:before {
    flex-shrink:0
  }
}

/* App identities remain distinct from the blue portal. */
.app-card[data-app="todo"] {
  --accent:#c0a3ed;
}
.app-card[data-app="todo"] .tag {
  color:var(--accent);
  border-color:#56416b;
}
.app-card[data-app="todo"] .text-link {
  border-color:var(--accent);
}

@media(max-width:620px) {
  .interests { grid-template-columns:1fr; }
}

.app-logo{display:block;width:64px;height:64px;border-radius:15px}.app-card[data-app="docs"] .tag{color:#92d8d0}.app-card[data-app="docs"] .text-link{color:#92d8d0}