:root {
  color-scheme: light;
  --bg: #fff;
  --surface: #f5f7fa;
  --ink: #1d1d1f;
  --muted: #697079;
  --line: #dce1e7;
  --acid: #0071e3;
  --sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial,
    sans-serif;
}
::selection {
  background: #0071e3;
  color: #fff;
}
.filing-links:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.filing-links a:hover {
  color: var(--acid);
}
.skip-link {
  color: #fff;
}
.site-header {
  background: #ffffffb8;
  backdrop-filter: blur(20px);
  border-color: #dbe2e65e;
}
.wordmark,
.hero h1,
.footer-name {
  font-family: Space, sans-serif;
}
.wordmark {
  font-weight: 600;
}
.domain-suffix,
.codex-tag {
  color: #697079;
}
.site-header nav a {
  color: #4b515a;
}
.site-header nav a:hover {
  color: #0071e3;
}
.hero {
  background: #f5f7fa;
}
.hero-grid {
  opacity: 0.4;
  border-color: #bac6d933;
}
.hero-grid:after {
  border-color: #bac6d922;
}
.hero-topline,
.hero-title-under {
  color: #747c87;
}
.hero h1 {
  font-weight: 600;
}
.hero-asterisk {
  color: #82b6e9;
}
.hero-coordinate {
  color: #929aa5;
}
.hero-copy h2 {
  font-weight: 600;
}
.hero-copy p {
  color: #697079;
  font-size: 14px;
}
.section-index {
  color: #767e88;
}
.round-arrow {
  border-color: #b5c8dd;
  color: #0071e3;
}
.action-link {
  color: #0071e3;
}
.action-link:hover .round-arrow {
  color: white;
}
.scene-fallback {
  color: #9aabbc;
}
.scene-loading {
  color: #526274;
  background: #ffffffd9;
}
.scene-panel {
  background: #ffffffb8;
  border-color: #bac7d5;
}
.scene-panel-heading {
  color: #738193;
}
.material-controls {
  background: #e9edf2;
  border-color: #dce3eb;
}
.material-button {
  color: #66717e;
}
.material-button.active {
  background: #fff;
  color: #0071e3;
  box-shadow: 0 2px 5px #23384b13;
}
.material-button:not(.active):hover {
  color: #0071e3;
  background: #ffffff8f;
}
.explode-button {
  color: #526274;
  border-color: #c9d5e3;
}
.pulse-button {
  color: #fff;
  background: #0071e3;
}
.hero-bottom {
  color: #78828f;
}
.scroll-line {
  background: #bdc9d8;
}
.ticker {
  color: #58616d;
  background: #fff;
  border-top: 1px solid #dce1e7;
  border-bottom: 1px solid #dce1e7;
  height: 62px;
}
.ticker-track {
  animation-duration: 45s;
}
.ticker-track span {
  font-size: 20px;
  font-weight: 400;
}
.ticker-track i {
  color: #78aade;
  font-size: 26px;
}
.section-topline,
.works-intro > .mono {
  color: #7b838e;
}
.works-heading h2 {
  font-size: 70px;
  font-weight: 600;
  line-height: 1.25;
}
.works-heading h2 span {
  color: #86909d;
}
.works-intro p {
  color: #626b77;
  font-size: 14px;
}
.catalog-toolbar {
  border-color: #e1e6ec;
}
.category-controls button {
  color: #68717d;
  font-size: 13px;
}
.category-controls button:not(:last-child):after {
  color: #bec5cf;
}
.search-box,
.search-box input::placeholder {
  color: #7a838f;
}
.search-box kbd {
  color: #7a838f;
  border-color: #d6dde6;
}
.search-box {
  border-color: #e1e6ec;
}
.project-media {
  background: #edf4f2;
  border-radius: 6px;
}
.project-media img {
  box-shadow: 0 12px 35px #23384b1a;
}
.cover-solar {
  background: #edf4fc;
}
.cover-meeting {
  background: #f0f1f5;
}
.cover-coffee {
  background: #f0f3f5;
}
.project-media .cover-word {
  color: #5262740a;
}
.media-tag {
  color: #526274;
}
.favorite-button {
  border-color: #aec1d655;
  color: #526274;
  background: #ffffffb3;
}
.favorite-button:hover {
  background: #e5f1ff;
}
.favorite-button.is-favorite {
  color: #0071e3;
  background: #fff;
  border-color: #bddbff;
}
.favorite-button.is-favorite svg {
  fill: #0071e3;
}
.project-number,
.project-number > span:last-child {
  color: #8b939f;
}
.project-title button {
  font-weight: 600;
}
.project-title > span > svg {
  color: #0071e3;
}
.project-description {
  color: #69717e;
  font-size: 14px;
}
.project-metadata span {
  color: #69717e;
  border-color: #e1e6ec;
}
.project-metadata .status-label {
  color: #766849;
  border-color: #e4ddce;
}
.work-bottomline {
  color: #7b838e;
}
.text-button {
  color: #0071e3;
}
.lab {
  background: #edf5ff;
  color: #1d1d1f;
  padding-top: 42px;
  padding-bottom: 42px;
}
.lab-topline,
.lab-controls {
  border-color: #cbdcf1;
}
.lab-topline {
  color: #6c88a8;
}
.lab-heading h2 {
  font-weight: 600;
}
.lab-heading h2 span {
  color: #688bb1;
  font-weight: 500;
}
.lab-heading p {
  opacity: 1;
  color: #69809a;
}
.lab-stamp {
  color: #5b7fa7;
}
.type-input {
  border-color: #b7cce4;
}
.type-input input {
  color: #315d8c;
}
.type-input input:focus-visible {
  outline-color: #0071e3;
}
.field-controls button {
  color: #587899;
}
.field-controls button.active {
  background: #0071e3;
  color: #fff;
}
.visual-study {
  background: #fff;
  overflow: hidden;
  padding-top: 85px;
}
.study-heading {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 20px;
}
.study-heading .mono {
  color: #8a95a4;
  font-size: 10px;
}
.study-heading h2 {
  font-size: 42px;
  font-weight: 600;
  margin-top: 18px;
}
.study-heading p {
  font-size: 16px;
  color: #7a8593;
  margin-top: 14px;
}
.visual-study > img {
  width: min(100%, 1350px);
  height: auto;
  margin: 0 auto;
  display: block;
}
.study-caption {
  max-width: 1350px;
  margin: auto;
  padding: 0 var(--pad) 34px;
  display: flex;
  justify-content: space-between;
  color: #8b99a9;
}
.about {
  background: #fff;
}
.about-layout h2 {
  font-weight: 500;
  font-size: 62px;
}
.about-layout h2 .outline-word {
  -webkit-text-stroke-color: #0071e3;
}
.about-copy p {
  color: #69717e;
  font-size: 14px;
}
.codex-sign b {
  color: #7b8593;
}
.site-footer {
  background: #f5f7fa;
  border-color: #e4e8ed;
}
.footer-top,
.footer-bottom {
  color: #8a929e;
}
.footer-name {
  color: #d4dbe3;
  -webkit-text-stroke: 0;
}
.footer-name:hover {
  color: #8d9dab;
}
.footer-name > span {
  color: #0071e3;
}
.footer-bottom {
  border-color: #dce1e7;
}
.button {
  border-color: #cbd7e5;
  color: #526274;
  border-radius: 5px;
}
.button.primary {
  color: #fff;
}
.button:disabled {
  color: #919aa5;
  border-color: #e1e6ec;
  background: #f2f5f8;
}
.toast {
  background: #1d1d1f;
  color: #fff;
  border-radius: 6px;
}
dialog {
  background: #fff;
  border-color: #d5dfe9;
  box-shadow: 0 25px 100px #354e672e;
  border-radius: 8px;
}
dialog::backdrop {
  background: #62718145;
  backdrop-filter: blur(16px);
}
.dialog-top {
  background: #fffffff0;
  color: #7b8796;
}
.dialog-media {
  background: #edf3f6;
}
.dialog-subtitle {
  color: #0071e3;
}
.dialog-description,
.release-note,
.feature-list li {
  color: #69717e;
}
.release-note strong,
.download-row .status-label {
  color: #887349;
}
.noscript {
  color: #fff;
}
@media (min-width: 1550px) {
  .works-heading h2 {
    font-size: 80px;
  }
}
@media (max-width: 950px) {
  .works-heading h2 {
    font-size: 58px;
  }
  .about-layout h2 {
    font-size: 42px;
  }
}
@media (max-width: 700px) {
  .scene-panel {
    background: transparent;
  }
  .site-header {
    background: #f5f7facc;
  }
  .hero-copy h2 {
    font-size: 26px;
  }
  .hero-copy .section-index {
    color: #8d98a5;
  }
  .material-controls {
    background: #e9edf2;
  }
  .explode-button {
    border-color: #ccd7e4;
  }
  .ticker {
    height: 48px;
  }
  .ticker-track span {
    font-size: 15px;
  }
  .ticker-track i {
    font-size: 20px;
  }
  .works-heading h2 {
    font-size: 44px;
    line-height: 1.2;
  }
  .works-intro p {
    font-size: 12px;
  }
  .project-description {
    font-size: 13px;
  }
  .lab-heading h2 {
    font-size: 38px;
  }
  .lab {
    padding-top: 27px;
    padding-bottom: 27px;
  }
  .visual-study {
    padding-top: 54px;
  }
  .study-heading h2 {
    font-size: 26px;
    margin-top: 13px;
  }
  .study-heading p {
    font-size: 12px;
    margin-top: 10px;
  }
  .study-heading .mono {
    font-size: 8px;
  }
  .visual-study > img {
    width: 110%;
    max-width: none;
    margin-left: -5%;
  }
  .study-caption {
    padding-bottom: 18px;
    font-size: 7px;
  }
  .about {
    padding-top: 42px;
  }
  .about-layout h2 {
    font-size: 42px;
  }
  .about-copy p {
    font-size: 13px;
  }
  .dialog-description {
    font-size: 13px;
  }
}
@media (max-width: 410px) {
  .hero-copy h2 {
    font-size: 24px;
  }
}
@media (max-width: 350px) {
  .hero-copy h2 {
    font-size: 21px;
  }
  .works-heading h2 {
    font-size: 40px;
  }
  .lab-heading h2 {
    font-size: 33px;
  }
}