@charset "UTF-8";
:root {
  color-scheme:dark;
  --night:#080f1b;
  --paper:#eee9df;
  --quiet:#b0bac8;
  --gold:#c4ac82;
  --hairline:rgba(231,228,217,.2);
  --serif:"Songti SC","STSong","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--night);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:2px solid #e9cc94;
  outline-offset:7px
}
::selection {
  background:#657c94;
  color:#fff
}
h1,h2,h3,p {
  margin:0
}
img {
  display:block;
  max-width:100%
}
.skip-link {
  position:fixed;
  z-index:30;
  top:16px;
  left:16px;
  padding:12px 20px;
  background:var(--paper);
  color:var(--night);
  transform:translateY(-180%)
}
.skip-link:focus {
  transform:none
}
.site-header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:36px 4.2%;
  pointer-events:none
}
.site-header a {
  pointer-events:auto
}
.wordmark {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:17px;
  letter-spacing:.2em;
  font-weight:500
}
.wordmark img {
  width:36px;
  height:36px
}
.brand-cn {
  display:block;
  font-size:9px;
  letter-spacing:.28em;
  font-weight:400;
  margin-top:6px;
  color:#bac1c8
}
.header-note {
  font-size:8px;
  line-height:1.8;
  letter-spacing:.17em;
  text-align:right;
  color:#f0e8dc
}
.header-note span {
  opacity:.66
}
.home-page {
  overflow-x:hidden
}
.portals {
  position:relative;
  display:flex;
  min-height:740px;
  height:calc(100svh - 62px);
  isolation:isolate
}
.portal {
  position:relative;
  display:block;
  flex:1;
  min-width:0;
  overflow:hidden;
  transition:flex .95s var(--ease),filter .7s;
  outline-offset:-10px!important
}
.portal-self {
  flex:1.08;
  background:#091321
}
.portal-love {
  flex:1;
  background:#332d2c
}
.space-scene,.portrait-scene,.portrait-shade,.portal-glow {
  position:absolute;
  inset:0;
  pointer-events:none
}
.space-scene {
  overflow:hidden;
  background:radial-gradient(ellipse at 15% 20%,#192e47 0,transparent 58%),linear-gradient(145deg,#0b1828,#070d18 80%)
}
.nebula {
  position:absolute;
  inset:-15%;
  background:radial-gradient(ellipse at 56% 39%,#4e72972b,transparent 48%);
  animation:nebula-drift 25s ease-in-out infinite alternate
}
.star-field {
  position:absolute;
  inset:0;
  background-image:radial-gradient(1px 1px at 12% 20%,#c8d8ef 50%,transparent),radial-gradient(1px 1px at 66% 11%,#e3ecf8 50%,transparent),radial-gradient(1px 1px at 81% 36%,#b4cde2 50%,transparent),radial-gradient(1px 1px at 32% 44%,#a8bcd0 50%,transparent),radial-gradient(1px 1px at 46% 7%,#a8bcd0 50%,transparent),radial-gradient(1px 1px at 9% 67%,#a8bcd0 50%,transparent),radial-gradient(1px 1px at 76% 81%,#a8bcd0 50%,transparent);
  background-size:389px 397px;
  opacity:.55;
  animation:starlight 9s ease-in-out infinite alternate
}
.stars-near {
  transform:rotate(12deg) scale(1.15);
  background-size:537px 521px;
  opacity:.4;
  animation-delay:-5s
}
.planet-system {
  position:absolute;
  top:10%;
  left:50%;
  width:470px;
  height:380px;
  transform:translateX(-50%);
  transition:translate 1.4s var(--ease);
  opacity:.9
}
.planet {
  position:absolute;
  width:226px;
  height:226px;
  left:120px;
  top:71px;
  border-radius:50%;
  background:radial-gradient(circle at 28% 23%,#a3b2ba 0,#728b9e 9%,#3c566e 22%,#1a2b40 42%,#080f1d 67%);
  box-shadow:-2px -2px 3px #c5d8e252,-12px -9px 34px #6688af12,inset 4px 2px 20px #c5d8e214;
  transform:rotate(-20deg)
}
.planet:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:.27;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Ccircle cx='90' cy='90' r='90' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light
}
.planet-shade {
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:inset -40px -14px 44px 13px #060c17a6
}
.orbit {
  position:absolute;
  left:10px;
  top:98px;
  width:450px;
  height:166px;
  border:1px solid #9fb5c029;
  border-radius:50%;
  transform:rotate(-29deg)
}
.orbit-one {
  z-index:2;
  border-top-color:transparent;
  border-left-color:#b4c5ce52
}
.orbit-two {
  transform:rotate(-29deg) scale(1.17);
  border-style:dashed;
  border-color:#92a9bb15
}
.orbit-three {
  transform:rotate(59deg) scale(.91);
  border-color:#b8c6d215
}
.satellite {
  position:absolute;
  left:48px;
  top:263px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d4c8ad;
  box-shadow:0 0 12px #edd3a391;
  z-index:3
}
.coordinate {
  position:absolute;
  left:330px;
  top:65px;
  font-size:7px;
  line-height:1.9;
  letter-spacing:.13em;
  color:#a9bac9;
  white-space:nowrap
}
.coordinate:before {
  content:"";
  position:absolute;
  width:52px;
  height:1px;
  top:27px;
  left:-61px;
  background:#a7b4c147;
  transform:rotate(-34deg)
}
.orbit-cross {
  position:absolute;
  top:301px;
  left:351px;
  font-size:17px;
  font-weight:200;
  color:#8c9cac
}
.portal-top {
  position:absolute;
  top:145px;
  left:8.2%;
  right:8.2%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:8px;
  letter-spacing:.17em;
  color:#b7c3cf;
  z-index:2
}
.chapter-number {
  font-family:Georgia,serif;
  font-size:17px;
  font-style:italic;
  letter-spacing:.02em
}
.portal-top i {
  display:inline-block;
  width:19px;
  height:1px;
  background:currentColor;
  vertical-align:middle;
  margin:0 9px;
  opacity:.5
}
.portal-love .portal-top {
  color:#e8dfd3
}
.portal-copy {
  position:absolute;
  left:11.5%;
  right:8%;
  bottom:20%;
  z-index:3;
  --entrance-delay:0s
}
.portal-top,.portal-foot {
  animation:copy-enter 1.1s var(--ease) both
}
.portal-copy>.eyebrow,.portal-copy>h1,.portal-copy>h2,.portal-copy>.portal-description,.portal-copy>.entry-link {
  animation:copy-enter 1.1s var(--ease) both;
  animation-delay:calc(var(--entrance-delay) + .12s)
}
.portal-copy>h1,.portal-copy>h2 {
  animation-delay:calc(var(--entrance-delay) + .22s)
}
.portal-copy>.portal-description {
  animation-delay:calc(var(--entrance-delay) + .34s)
}
.portal-copy>.entry-link {
  animation-delay:calc(var(--entrance-delay) + .46s)
}
.eyebrow {
  font-size:10px;
  letter-spacing:.33em;
  margin-bottom:25px;
  color:#c1b393
}
.portal h1,.portal h2 {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:.04em;
  font-size:clamp(40px,4vw,67px);
  line-height:1.32
}
.portal h1 {
  white-space:nowrap
}
.title-star {
  display:inline-block;
  font-family:Georgia,serif;
  font-size:21px;
  vertical-align:top;
  margin:5px 0 0 13px;
  color:#a8b7c9
}
.portal-description {
  margin-top:23px;
  font-size:12px;
  letter-spacing:.12em;
  color:#c2c9d2;
  line-height:1.9
}
.entry-link {
  display:inline-flex;
  align-items:center;
  gap:40px;
  margin-top:38px;
  padding:0 0 14px;
  border-bottom:1px solid #d6cfbc70;
  font-size:12px;
  letter-spacing:.13em
}
.entry-arrow {
  display:inline-block;
  font-family:var(--sans);
  font-size:24px;
  line-height:1;
  transition:transform .5s var(--ease)
}
.portrait-scene {
  overflow:hidden;
  background:radial-gradient(ellipse at 65% 20%,#8d7564,#2d2526 70%)
}
.portal-portrait {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--portrait-position,50% 32%);
  opacity:0;
  transform:scale(1.025);
  filter:saturate(.63);
  transition:opacity 1.2s,transform 1.6s var(--ease),filter 1.1s
}
.portal-portrait.is-loaded {
  opacity:1
}
.portrait-shade {
  background:linear-gradient(180deg,#080d1666 0%,#11131b0d 30%,#10101b91 59%,#10101bea 100%),linear-gradient(90deg,#070e1a55,transparent 65%);
  z-index:1
}
.portal-love .portal-copy {
  bottom:20%;
  --entrance-delay:.14s
}
.portal-love h2>span {
  display:block
}
.portal-love .eyebrow {
  color:#e8d7bc
}
.portal-love .portal-description {
  color:#e5dfd8
}
.title-spark {
  color:#d1b293;
  font-family:Georgia,serif;
  padding-left:4px
}
.portal-foot {
  position:absolute;
  left:8.2%;
  right:8.2%;
  bottom:37px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:#acb7c6;
  letter-spacing:.1em;
  z-index:3
}
.portal-love .portal-foot {
  color:#cdc4bd
}
.foot-index {
  font-size:7px;
  letter-spacing:.16em
}
.portal-glow {
  z-index:2;
  opacity:0;
  background:radial-gradient(320px circle at var(--pointer-x,50%) var(--pointer-y,50%),#e6d9bd0c,transparent 100%);
  transition:opacity .6s
}
.portal-seam {
  position:absolute;
  top:0;
  bottom:0;
  left:51.923%;
  width:1px;
  background:#d8d7d22b;
  z-index:4;
  pointer-events:none;
  transition:left .95s var(--ease)
}
.seam-label {
  position:absolute;
  left:0;
  top:200px;
  writing-mode:vertical-rl;
  transform:translateX(-50%);
  font-size:7px;
  letter-spacing:.25em;
  white-space:nowrap;
  background:#14202dcc;
  padding:18px 0;
  color:#aab3bd
}
.seam-star {
  position:absolute;
  left:0;
  bottom:85px;
  transform:translateX(-50%);
  font-size:20px;
  color:#c5b698
}
.home-colophon {
  height:62px;
  padding:0 4.2%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #d7d0b91f;
  font-size:7px;
  letter-spacing:.19em;
  color:#86909e
}
.home-colophon p {
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.22em;
  color:#c7c6c2
}
.page-curtain {
  position:fixed;
  inset:0;
  z-index:40;
  background:#080f1b;
  opacity:0;
  pointer-events:none;
  transition:opacity .38s ease
}
.is-leaving .page-curtain {
  opacity:1
}
.is-leaving .portals,.is-leaving .about-main {
  transform:scale(1.015);
  filter:blur(3px);
  transition:transform .5s,filter .5s
}
.is-leaving .portal {
  pointer-events:none
}
@media(hover:hover) and (pointer:fine) {
  .portals:has(.portal-self:hover) .portal-self,.portals:has(.portal-self:focus-visible) .portal-self {
    flex:1.25
  }
  .portals:has(.portal-love:hover) .portal-love,.portals:has(.portal-love:focus-visible) .portal-love {
    flex:1.2
  }
  .portals:has(.portal-self:hover) .portal-seam,.portals:has(.portal-self:focus-visible) .portal-seam {
    left:55.555%
  }
  .portals:has(.portal-love:hover) .portal-seam,.portals:has(.portal-love:focus-visible) .portal-seam {
    left:47.368%
  }
  .portal:hover .portal-portrait {
    transform:scale(1.075);
    filter:saturate(.8)
  }
  .portal:hover .planet-system {
    translate:0 -7px
  }
  .portal:hover .entry-arrow,.portal:focus-visible .entry-arrow {
    transform:translateX(9px)
  }
  .portal:hover .portal-glow {
    opacity:1
  }
  .portal:hover .entry-link {
    border-color:#f1dfbc
  }
}
@keyframes copy-enter {
  from {
    opacity:0;
    transform:translateY(22px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes starlight {
  from {
    opacity:.3
  }
  to {
    opacity:.7
  }
}
@keyframes nebula-drift {
  to {
    transform:translate(3%,2%) scale(1.08)
  }
}
/* About: an open notebook, organized as five chapters. */
.about-page .site-header {
  position:relative;
  border-bottom:1px solid var(--hairline)
}
.header-home {
  font-size:11px;
  letter-spacing:.12em
}
.header-home span {
  margin-right:12px;
  color:var(--gold)
}
.about-main {
  max-width:1250px;
  padding:0 7%;
  margin:auto
}
.about-hero {
  position:relative;
  padding:110px 0 90px;
  border-bottom:1px solid var(--hairline);
  overflow:hidden
}
.about-hero .eyebrow {
  position:relative;
  z-index:2
}
.about-hero h1 {
  position:relative;
  z-index:2;
  font:400 clamp(45px,6vw,80px)/1.3 var(--serif);
  letter-spacing:.04em
}
.about-hero h1 em {
  color:#9eafc5;
  font-style:normal
}
.about-hero>p:not(.eyebrow) {
  position:relative;
  z-index:2;
  max-width:470px;
  margin-top:26px;
  font-size:13px;
  line-height:2;
  letter-spacing:.07em;
  color:var(--quiet)
}
.about-hero .planet-system {
  left:auto;
  right:-130px;
  top:0;
  transform:scale(.9);
  opacity:.6;
  z-index:-1
}
.about-nav {
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  margin-top:44px;
  position:relative;
  z-index:2
}
.about-nav a {
  font-size:10px;
  letter-spacing:.1em;
  padding-bottom:8px;
  border-bottom:1px solid #8b9bad50
}
.about-nav a:hover {
  border-color:var(--gold)
}
.about-chapter {
  scroll-margin-top:30px;
  padding:58px 0;
  display:grid;
  grid-template-columns:30% 1fr;
  gap:6%;
  border-bottom:1px solid var(--hairline)
}
.chapter-heading>span {
  display:block;
  color:var(--gold);
  font-size:9px;
  letter-spacing:.17em;
  margin-bottom:17px
}
.chapter-heading h2 {
  font:400 27px/1.5 var(--serif)
}
.chapter-body {
  max-width:600px
}
.chapter-body .lead {
  font:400 22px/1.7 var(--serif);
  letter-spacing:.04em;
  margin-bottom:17px
}
.chapter-body>p:not(.lead) {
  font-size:12px;
  line-height:2.1;
  color:var(--quiet)
}
.placeholder-label {
  display:inline-block;
  font-size:8px;
  letter-spacing:.16em;
  color:#b3a58c;
  border:1px solid #b3a58c55;
  padding:5px 9px;
  margin-top:23px
}
.empty-notes {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px
}
.empty-notes span {
  font-size:11px;
  color:#a5b1c1;
  border-bottom:1px solid #b5c1d12b;
  padding:8px 18px 8px 0
}
.project-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--hairline);
  padding:23px 0;
  margin-top:25px
}
.project-row h3 {
  font:400 18px var(--serif)
}
.project-row p {
  font-size:10px;
  color:var(--quiet);
  margin-top:9px;
  line-height:1.8
}
.project-row>span {
  font-size:22px;
  color:var(--gold)
}
.project-row:hover>span {
  transform:translateX(5px);
  transition:transform .3s
}
.about-footer {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:42px 0 52px;
  color:var(--quiet);
  font-size:10px;
  letter-spacing:.09em
}
.about-footer a {
  color:var(--paper)
}
@media(min-width:1600px) {
  .portal-copy {
    left:13%
  }
  .planet-system {
    top:13%;
    transform:translateX(-50%) scale(1.15)
  }
}
@media(max-width:1050px) and (min-width:701px) {
  .portal h1,.portal h2 {
    font-size:43px
  }
  .title-star {
    font-size:16px;
    margin-left:5px
  }
  .portal-copy {
    left:9%;
    right:6%
  }
  .portal-description {
    font-size:11px;
    letter-spacing:.02em
  }
  .planet-system {
    transform:translateX(-50%) scale(.85)
  }
  .coordinate {
    display:none
  }
  .header-note {
    font-size:7px
  }
  .foot-index {
    display:none
  }
}
@media(max-height:780px) and (min-width:701px) {
  .portals {
    min-height:640px
  }
  .planet-system {
    top:6%;
    transform:translateX(-50%) scale(.8)
  }
  .portal-top {
    top:125px
  }
  .portal-copy,.portal-love .portal-copy {
    bottom:17%
  }
  .portal h1,.portal h2 {
    font-size:48px
  }
  .eyebrow {
    margin-bottom:18px
  }
  .entry-link {
    margin-top:24px
  }
  .portal-description {
    margin-top:17px
  }
}
@media(max-width:700px) {
  .site-header {
    padding:23px 6%
  }
  .wordmark {
    font-size:14px;
    gap:9px
  }
  .wordmark img {
    width:31px;
    height:31px
  }
  .brand-cn {
    font-size:8px;
    margin-top:5px
  }
  .header-note {
    font-size:6px;
    letter-spacing:.07em;
    max-width:134px;
    line-height:1.9
  }
  .portals {
    display:block;
    height:auto;
    min-height:0
  }
  .portal {
    min-height:440px;
    height:53svh
  }
  .portal-self {
    min-height:460px;
    height:55svh
  }
  .portal-top {
    top:30px;
    left:7%;
    right:7%;
    font-size:7px
  }
  .portal-self .portal-top {
    top:113px
  }
  .chapter-number {
    font-size:15px
  }
  .planet-system {
    width:470px;
    left:auto;
    right:-110px;
    top:47px;
    transform:scale(.68);
    transform-origin:top right;
    opacity:.8
  }
  .coordinate {
    display:none
  }
  .portal-copy,.portal-love .portal-copy {
    left:8%;
    right:8%;
    bottom:75px
  }
  .portal h1 {
    font-size:38px
  }
  .portal h2 {
    font-size:39px;
    line-height:1.16
  }
  .portal-love h2>span {
    display:block
  }
  .title-star {
    font-size:16px;
    margin:3px 0 0 8px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:.28em;
    margin-bottom:17px
  }
  .portal-description {
    font-size:11px;
    letter-spacing:.04em;
    margin-top:17px
  }
  .entry-link {
    font-size:11px;
    gap:35px;
    margin-top:24px;
    padding-bottom:11px
  }
  .entry-arrow {
    font-size:22px
  }
  .portal-foot {
    left:8%;
    right:8%;
    bottom:25px;
    font-size:8px
  }
  .foot-index {
    font-size:6px
  }
  .portal-seam {
    display:none
  }
  .portal-love {
    border-top:1px solid var(--hairline)
  }
  .portrait-shade {
    background:linear-gradient(180deg,#0b111b77 0%,#11131b14 24%,#10101b85 48%,#10101be8 100%)
  }
  .portal-portrait {
    object-position:var(--portrait-position,50% 32%)
  }
  .portal-love .portal-copy {
    bottom:73px
  }
  .home-colophon {
    height:65px;
    padding:0 7%;
    font-size:6px
  }
  .home-colophon>span:last-child {
    display:none
  }
  .home-colophon p {
    font-size:11px;
    letter-spacing:.15em
  }
  .about-page .header-note {
    display:none
  }
  .header-home {
    font-size:10px
  }
  .about-main {
    padding:0 8%
  }
  .about-hero {
    padding:70px 0 53px
  }
  .about-hero h1 {
    font-size:43px
  }
  .about-hero h1 em {
    font-size:.77em;
    letter-spacing:.02em
  }
  .about-hero>p:not(.eyebrow) {
    font-size:12px;
    max-width:280px
  }
  .about-hero .planet-system {
    right:-250px;
    top:80px;
    opacity:.3
  }
  .about-nav {
    gap:15px 20px;
    margin-top:30px
  }
  .about-nav a {
    font-size:9px
  }
  .about-chapter {
    grid-template-columns:1fr;
    gap:25px;
    padding:38px 0
  }
  .chapter-heading>span {
    margin-bottom:12px
  }
  .chapter-heading h2 {
    font-size:25px
  }
  .chapter-body .lead {
    font-size:21px
  }
  .about-footer {
    font-size:9px;
    line-height:1.8
  }
}
@media(max-width:360px) {
  .portal h1 {
    font-size:33px
  }
  .portal h2 {
    font-size:34px
  }
  .header-note {
    max-width:115px;
    font-size:5px
  }
  .portal-description {
    font-size:10px
  }
  .about-hero h1 {
    font-size:36px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .portal-portrait {
    transform:none!important
  }
  .is-leaving .portals,.is-leaving .about-main {
    transform:none;
    filter:none
  }
}