:root {
  --paper:#f5f1e8;
  --ink:#292722;
  --muted:#68635b;
  --purple:#6842c7;
  --line:#cdc6b9;
  --orange:#eb7840;
  --lime:#d9e784}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit;
  color:inherit;
  cursor:pointer}
a,button,summary {
  -webkit-tap-highlight-color:transparent}
button,summary {
  touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--purple);
  outline-offset:6px}
::selection {
  background:var(--lime);
  color:var(--ink)}
p {
  line-height:1.7}
h1,h2,h3,p {
  margin-top:0}
.wrap {
  max-width:1240px;
  margin:auto;
  width:calc(100% - 100px)}
.masthead {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--ink)}
.wordmark {
  font-family:Georgia,serif;
  font-weight:bold;
  font-style:italic;
  font-size:34px;
  letter-spacing:-2px}
.wordmark span {
  font-size:22px;
  color:var(--orange);
  vertical-align:top;
  margin-left:4px}
.spark {
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:middle}
.masthead nav {
  display:flex;
  gap:35px;
  font-size:14px}
.masthead nav a:hover,.text-link:hover {
  color:var(--purple)}
.language {
  background:transparent;
  border:1px solid var(--ink);
  border-radius:24px;
  padding:10px 17px;
  font-size:13px;
  min-height:42px}
.language:hover {
  background:var(--ink);
  color:var(--paper)}
.edition,.hero-foot,.eyebrow,.section-index,.note-type,.small-note,.repo-note,.figure-caption,.music-heading,.track-number,.interest-tags {
  font-family:'SFMono-Regular',Consolas,monospace;
  font-size:11px;
  letter-spacing:1.2px;
  line-height:1.7}
.edition {
  display:flex;
  justify-content:space-between;
  padding-top:22px;
  color:var(--muted)}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--purple);
  margin-right:6px}
.hero-grid {
  display:grid;
  grid-template-columns:1.07fr 1fr;
  align-items:center;
  min-height:610px;
  gap:30px}
.eyebrow {
  margin-bottom:28px;
  color:var(--purple)}
h1 {
  font-family:Georgia,'Songti SC',serif;
  font-weight:normal;
  letter-spacing:-3px;
  line-height:.93;
  margin-bottom:26px}
h1>span {
  display:block;
  font-size:60px;
  font-style:italic}
h1 strong {
  font-weight:normal;
  display:block;
  font-size:148px;
  color:var(--purple);
  letter-spacing:-10px;
  margin-top:8px}
.asterisk {
  font-family:Arial,sans-serif;
  display:inline-block;
  font-size:70px;
  vertical-align:top;
  margin:8px 0 0 14px;
  color:var(--orange);
  letter-spacing:0}
.intro {
  font-size:20px;
  max-width:460px;
  line-height:1.55;
  margin-bottom:16px}
.identity {
  font-size:12px;
  color:var(--muted);
  margin-bottom:30px}
.text-link {
  display:inline-block;
  font-size:13px;
  border-bottom:1px solid;
  padding-bottom:5px}
.hero-foot {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:19px 0;
  color:var(--muted);
  font-size:10px}
.cover-art {
  height:485px;
  position:relative;
  isolation:isolate}
.art-grid {
  position:absolute;
  inset:28px 0 25px 0;
  border-radius:50%;
  background:linear-gradient(#c7bea333 1px,transparent 1px),linear-gradient(90deg,#c7bea333 1px,transparent 1px);
  background-size:25px 25px;
  transform:rotate(-10deg)}
.record-sleeve {
  position:absolute;
  top:26px;
  left:7%;
  width:320px;
  height:355px;
  background:#bca6df;
  transform:rotate(-10deg);
  padding:20px;
  box-shadow:6px 9px 0 #29272213;
  border:1px solid #6d538b}
.sleeve-top,.sleeve-bottom {
  font:10px monospace;
  letter-spacing:2px;
  display:flex;
  justify-content:space-between}
.sleeve-bottom {
  font-size:8px;
  margin-top:16px;
  justify-content:center}
.record {
  width:274px;
  height:274px;
  margin:12px auto 0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:repeating-radial-gradient(circle,#242323 0 2px,#383534 3px,#262424 4px 6px);
  box-shadow:2px 3px 7px #0004}
.record-label {
  width:100px;
  height:100px;
  border-radius:50%;
  background:var(--orange);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1.1;
  text-align:center;
  transform:rotate(0deg);
  animation:spin 35s linear infinite}
.record-label em {
  font-family:Georgia,serif;
  font-size:20px}
.record-label small {
  font:7px monospace;
  margin-top:8px}
.code-note {
  position:absolute;
  top:260px;
  right:0;
  width:255px;
  background:var(--lime);
  padding:20px 22px;
  transform:rotate(7deg);
  box-shadow:5px 5px 0 #29272214;
  border:1px solid #a4ad63}
.code-note>span {
  font:9px monospace;
  letter-spacing:1px}
.code-note code {
  display:block;
  font-size:14px;
  line-height:1.7;
  padding:15px 0}
.code-note .note-footer {
  display:block;
  text-align:right;
  font:italic 15px Georgia,serif}
.basketball {
  position:absolute;
  width:99px;
  height:99px;
  left:4%;
  top:335px;
  transform:rotate(23deg)}
.curiosity-stamp {
  position:absolute;
  top:25px;
  right:-4px;
  width:112px;
  height:112px;
  border-radius:50%;
  background:var(--orange);
  border:1px solid #8a4827;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  transform:rotate(15deg);
  font-size:11px;
  letter-spacing:1px}
.curiosity-stamp em {
  font:24px Georgia,serif;
  letter-spacing:-1px}
.curiosity-stamp span {
  font-size:27px}
.art-caption {
  position:absolute;
  bottom:0;
  left:25%;
  font:italic 15px Georgia,'Songti SC',serif;
  color:var(--muted)}
.section-space {
  padding-top:95px;
  padding-bottom:95px}
.section-index {
  color:var(--purple);
  display:block;
  margin-bottom:23px}
.section-heading {
  max-width:670px;
  margin-bottom:50px}
h2 {
  font-family:Georgia,'Songti SC',serif;
  font-weight:normal;
  font-size:48px;
  letter-spacing:-1.5px;
  line-height:1.14;
  margin-bottom:20px}
.section-heading>p {
  color:var(--muted);
  font-size:16px;
  margin-bottom:0;
  max-width:560px}
.notes-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr)}
.note {
  padding:25px 30px 0;
  border-top:1px solid var(--ink);
  display:flex;
  flex-direction:column;
  align-items:flex-start}
.note:first-child {
  padding-left:0}
.note:last-child {
  padding-right:0}
.note+.note {
  border-left:1px solid var(--line)}
.note-type {
  font-size:10px;
  color:var(--muted);
  margin-bottom:25px}
.note h3 {
  font:normal 29px/1.2 Georgia,'Songti SC',serif;
  letter-spacing:-.6px;
  min-height:70px;
  margin-bottom:18px}
.note p {
  font-size:14px;
  color:var(--muted);
  margin-bottom:25px}
.note .text-link,.note .small-note {
  margin-top:auto}
.small-note {
  letter-spacing:0;
  font-size:10px;
  color:var(--purple)}
.research-section {
  background:#e8e0f0;
  border-top:1px solid #d6c8e2;
  border-bottom:1px solid #d6c8e2}
.research-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:35px 75px;
  align-items:center}
.research-copy h2 {
  font-size:49px;
  max-width:580px}
.research-copy>p {
  font-size:15px;
  max-width:540px}
.research-caveat {
  border-left:2px solid var(--purple);
  padding-left:17px;
  color:#645374}
.pill-link {
  display:inline-flex;
  gap:25px;
  align-items:center;
  background:var(--purple);
  color:#fff;
  padding:15px 23px;
  border-radius:30px;
  font-size:13px;
  margin-top:10px}
.pill-link:hover {
  background:#51309f}
.research-copy .repo-note {
  font-size:10px;
  letter-spacing:0;
  margin:17px 0 0;
  color:#645374}
.research-visual svg {
  width:100%;
  height:auto}
.figure-caption {
  display:flex;
  gap:30px;
  border-top:1px solid #bca9cf;
  padding-top:18px;
  font-size:9px;
  letter-spacing:0;
  color:#645374}
.background-note {
  grid-column:1/-1;
  border-top:1px solid #c5b6d3;
  padding-top:30px;
  margin-top:12px;
  display:grid;
  grid-template-columns:140px 1fr;
  gap:30px}
.background-note>span {
  font:10px monospace;
  color:#645374;
  padding-top:7px;
  letter-spacing:1px}
.background-note p {
  font-size:13px;
  max-width:750px;
  margin:0;
  color:#645374}
.industry {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:5px 40px;
  padding-top:40px;
  padding-bottom:38px;
  border-bottom:1px solid var(--line);
  align-items:center}
.industry .section-index {
  font-size:10px;
  grid-column:1;
  letter-spacing:.6px;
  margin:0}
.companies {
  grid-column:1;
  display:flex;
  gap:14px;
  margin-top:15px}
.companies img {
  width:96px;
  height:36px;
  object-fit:contain}
.industry>p {
  grid-column:2;
  grid-row:1/3;
  font-size:13px;
  color:var(--muted);
  margin:0;
  max-width:410px;
  justify-self:end}
.interests-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:30px}
.music-panel {
  background:#302b34;
  color:var(--paper);
  padding:30px 35px}
.music-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:#d2c0e9}
.music-heading>span:last-child {
  font-size:27px}
.music-display {
  display:flex;
  align-items:center;
  gap:25px;
  margin:26px 0;
  min-height:145px}
.mini-record {
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:145px;
  height:145px;
  border-radius:50%;
  background:repeating-radial-gradient(circle,#111 0 2px,#343037 3px,#141216 4px 6px)}
.mini-record>span {
  width:52px;
  height:52px;
  background:var(--orange);
  color:#27212d;
  border-radius:50%;
  display:grid;
  place-items:center;
  font:italic 28px Georgia,serif}
.track-number {
  color:#c2afd7;
  margin-bottom:10px;
  font-size:10px}
.music-display h3 {
  font:normal 26px/1.25 Georgia,'Songti SC',serif;
  margin-bottom:10px}
.music-display #track-artist {
  font-size:13px;
  color:#d2c0e9;
  margin:0}
.music-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid #625b67;
  border-bottom:1px solid #625b67;
  padding:12px 0}
.music-controls p {
  font-size:10px;
  color:#c9bfce;
  margin:0;
  max-width:190px}
.music-controls button {
  border:0;
  background:transparent;
  color:var(--lime);
  font-size:11px;
  min-height:38px;
  white-space:nowrap}
.track-list {
  padding:0;
  list-style:none;
  margin:16px 0}
.track-list button {
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid #4e4753;
  display:grid;
  grid-template-columns:22px 1fr;
  column-gap:8px;
  text-align:left;
  min-height:49px;
  font-size:12px;
  align-content:center;
  padding:10px 5px;
  line-height:1.5}
.track-list button>span {
  grid-row:1/3;
  color:#baadca;
  font:10px monospace;
  padding-top:3px}
.track-list button small {
  grid-column:2;
  color:#b9adbf;
  font-size:10px}
.track-list button[aria-pressed=true] {
  color:var(--lime);
  background:#ffffff06}
.track-list button:hover {
  background:#ffffff0c}
.music-note {
  font:italic 13px Georgia,'Songti SC',serif;
  color:#d2c0e9;
  margin:20px 0 0}
.side-interests {
  display:flex;
  flex-direction:column;
  gap:25px}
.game-panel,.courtside {
  padding:32px}
.game-panel {
  background:var(--lime);
  position:relative;
  flex:1}
.game-panel .section-index,.courtside .section-index {
  font-size:10px;
  color:var(--ink);
  letter-spacing:.8px;
  margin-bottom:28px}
.game-symbol {
  display:block;
  font:50px Georgia,serif;
  letter-spacing:-3px;
  color:#66732d;
  margin-bottom:23px}
.game-panel h3,.courtside h3 {
  font:normal 31px/1.1 Georgia,'Songti SC',serif;
  max-width:280px;
  letter-spacing:-.6px;
  margin-bottom:20px}
.game-panel p,.courtside p {
  font-size:14px;
  margin:0;
  max-width:370px}
.courtside {
  border:1px solid var(--line);
  flex:1}
.interest-tags {
  display:block;
  font-size:9px;
  color:var(--purple);
  margin-top:24px}
.personal-aside {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:38px;
  max-width:720px}
.personal-aside>span {
  font-size:40px;
  color:var(--orange)}
.personal-aside p {
  font-size:13px;
  color:var(--muted);
  margin:0}
.contact {
  background:var(--purple);
  color:var(--paper)}
.contact-inner {
  padding-top:75px;
  padding-bottom:55px}
.contact .section-index {
  color:#daccef}
.contact h2 {
  font-size:58px}
.contact-inner>p {
  max-width:610px;
  font-size:15px;
  color:#e2d8f0}
.contact-email {
  font-family:Georgia,serif;
  font-size:32px;
  display:inline-block;
  border-bottom:1px solid #bfa8e0;
  padding-bottom:10px;
  margin-top:20px;
  overflow-wrap:anywhere}
.contact-links {
  display:flex;
  gap:30px;
  align-items:flex-start;
  margin-top:30px;
  font-size:13px}
.contact-links button {
  padding:0;
  background:transparent;
  border:0}
.contact-links a:hover,.contact-links button:hover {
  color:var(--lime)}
summary {
  cursor:pointer}
.contact-links details p {
  font-size:12px;
  line-height:2}
#copy-status {
  min-height:22px;
  font-size:12px;
  margin:20px 0 0}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:30px;
  padding-bottom:30px}
footer>span {
  font-size:11px;
  color:var(--muted)}
footer>span:last-child {
  font:9px monospace;
  letter-spacing:1px}
.skip {
  position:absolute;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:15px;
  z-index:10}
.skip:focus {
  top:10px}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0}
html[lang=zh-CN] h2 {
  font-size:42px;
  line-height:1.35;
  letter-spacing:0}
html[lang=zh-CN] h3 {
  line-height:1.45}
html[lang=zh-CN] h1>span {
  font-size:53px}
html[lang=zh-CN] .intro {
  line-height:1.8}
html[lang=zh-CN] .contact h2 {
  font-size:48px}
@keyframes spin {
  to {
  transform:rotate(360deg)}
}
@media(min-width:1400px) {
  .hero-grid {
  min-height:660px}
.cover-art {
  transform:scale(1.08)}
}
@media(max-width:1100px) {
  .wrap {
  width:calc(100% - 60px)}
h1 strong {
  font-size:125px}
.asterisk {
  font-size:50px}
.hero-grid {
  gap:0;
  grid-template-columns:1.05fr 1fr}
.cover-art {
  transform:scale(.86);
  transform-origin:center right}
.record-sleeve {
  left:0}
.code-note {
  right:-5px}
.research-grid {
  gap:35px}
.music-panel {
  padding:25px}
.mini-record {
  width:110px;
  height:110px}
.music-display {
  gap:20px}
.industry .companies {
  gap:8px}
}
@media(max-width:780px) {
  .wrap {
  width:calc(100% - 40px)}
.masthead {
  height:80px}
.masthead nav {
  gap:18px;
  font-size:12px}
.wordmark {
  font-size:29px}
.language {
  font-size:11px;
  padding:8px 12px}
.edition {
  font-size:9px;
  letter-spacing:.6px}
.hero-grid {
  grid-template-columns:1fr;
  min-height:0;
  gap:15px}
.hero-copy {
  padding-top:55px}
.hero-copy .intro {
  max-width:460px}
.hero h1>span {
  font-size:53px}
.hero h1 strong {
  font-size:130px}
.asterisk {
  font-size:55px;
  margin-top:12px}
.cover-art {
  width:430px;
  max-width:100%;
  height:455px;
  transform:none;
  margin:auto}
.record-sleeve {
  left:3%;
  width:295px;
  height:335px}
.record {
  width:254px;
  height:254px}
.curiosity-stamp {
  right:0}
.code-note {
  right:0;
  top:250px;
  width:235px}
.basketball {
  left:1%;
  top:330px}
.art-caption {
  bottom:0;
  left:18%}
.hero-foot {
  margin-top:30px;
  font-size:8px;
  gap:25px}
.hero-foot span:last-child {
  white-space:nowrap}
.section-space {
  padding-top:65px;
  padding-bottom:65px}
.section-heading {
  margin-bottom:35px}
h2,.research-copy h2 {
  font-size:38px}
.section-heading>p {
  font-size:14px}
.notes-grid {
  grid-template-columns:1fr}
.note,.note:first-child,.note:last-child {
  padding:25px 0}
.note+.note {
  border-left:0;
  border-top:1px solid var(--line)}
.note:last-child {
  padding-bottom:0}
.note-type {
  margin-bottom:14px}
.note h3 {
  min-height:0;
  font-size:28px;
  margin-bottom:12px}
.note p {
  max-width:540px;
  margin-bottom:18px}
.research-grid {
  grid-template-columns:1fr;
  gap:30px}
.research-visual {
  max-width:400px;
  justify-self:center;
  width:100%}
.background-note {
  grid-template-columns:1fr;
  gap:12px;
  padding-top:22px}
.industry {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px}
.industry .companies {
  margin:0;
  gap:15px}
.industry>p {
  max-width:100%}
.interests-grid {
  grid-template-columns:1fr}
.music-panel {
  padding:26px}
.music-display {
  min-height:145px}
.mini-record {
  width:135px;
  height:135px}
.side-interests {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px}
.game-panel,.courtside {
  padding:23px}
.game-panel h3,.courtside h3 {
  font-size:27px}
.game-panel p,.courtside p {
  font-size:13px}
.game-symbol {
  font-size:40px}
.contact-inner {
  padding-top:55px;
  padding-bottom:35px}
.contact h2 {
  font-size:43px}
.contact-email {
  font-size:25px}
.contact-links {
  gap:22px;
  flex-wrap:wrap;
  font-size:12px}
footer {
  gap:20px;
  flex-wrap:wrap}
html[lang=zh-CN] h2 {
  font-size:34px}
html[lang=zh-CN] .contact h2 {
  font-size:38px}
}
@media(max-width:600px) {
  .masthead {
  height:auto;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px 16px;
  padding-top:16px;
  padding-bottom:8px}
.masthead nav {
  grid-column:1 / -1;
  grid-row:2;
  justify-content:space-between;
  gap:12px}
.masthead nav a {
  display:flex;
  align-items:center;
  min-height:44px}
.language {
  min-height:44px}
.hero-copy {
  padding-top:36px}
.industry .companies {
  flex-wrap:wrap;
  max-width:100%}
}
@media(max-width:420px) {
.hero h1 strong {
  font-size:116px}
.hero h1 .asterisk {
  font-size:45px;
  margin-left:10px}
.intro {
  font-size:18px}
.identity {
  font-size:11px}
.hero-foot span:last-child {
  display:none}
.side-interests {
  grid-template-columns:1fr}
.music-display {
  gap:18px}
.mini-record {
  width:105px;
  height:105px}
.music-display h3 {
  font-size:24px}
.contact-email {
  font-size:21px}
footer>span:last-child {
  width:100%}
html[lang=zh-CN] h1>span {
  font-size:45px}
}

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

/* Let the cover shrink inside narrow grid tracks;
   decorative grid stays inset. */
.hero-grid>* {
  min-width:0}
.art-grid {
  inset:28px 25px 25px}

@media(max-width:780px) {
  .hero-grid {
  grid-template-columns:minmax(0,1fr)}
}

/* Reserve space for the mobile collage, then let its caption flow below it. */
@media(max-width:600px) {
  .cover-art {
  width:360px;
  height:auto;
  padding-top:430px;
  margin-top:12px}
.art-grid {
  inset:28px 20px 62px}
.record-sleeve {
  top:26px;
  left:3%;
  width:250px;
  height:290px;
  padding:18px;
  transform:rotate(-8deg)}
.record {
  width:210px;
  height:210px}
.curiosity-stamp {
  top:34px;
  right:4px;
  width:82px;
  height:82px;
  font-size:9px}
.curiosity-stamp em {
  font-size:19px}
.curiosity-stamp span {
  font-size:23px}
.code-note {
  top:260px;
  right:8px;
  width:min(210px,68%);
  padding:16px;
  transform:rotate(4deg)}
.code-note code {
  font-size:12px;
  line-height:1.65;
  padding:12px 0}
.code-note .note-footer {
  font-size:13px;
  line-height:1.4}
.basketball {
  top:315px;
  left:3%;
  width:72px;
  height:72px}
.art-caption {
  position:relative;
  bottom:auto;
  left:auto;
  margin-top:18px;
  text-align:center;
  font-size:13px;
  line-height:1.6}
}