/* Palette shared with YouTube Knows. Darker small-text shades preserve contrast. */
:root {
  color-scheme: light;
  --paper: #f7f6f2;
  --ink: #262d29;
  --coral: #d9593e;
  --bg: var(--paper);
  --panel: #fff;
  --panel-raised: #eeefe7;
  --text: var(--ink);
  --muted: #62695f;
  --subtle: #697064;
  --line: #dedfd7;
  --blue: #bd4932;
  --purple: #697653;
  --green: #3e5d4a;
}
body {
  background: var(--paper);
}
::selection {
  background: #efcec1;
  color: #472f24;
}
.site-header {
  background: var(--paper);
}
.brand img {
  border-color: #e6d7ce;
}
.brand-dot {
  color: var(--coral);
}
.hero {
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
}
.hero-copy {
  min-width: 0;
}
.eyebrow {
  color: #3e5d4a;
}
.tiny-orbit {
  background: #658b61;
  box-shadow: 0 0 0 4px #658b6115;
}
h1 > span {
  background: none;
  color: var(--coral);
}
h1 > .translated-text {
  background: none;
  color: var(--ink);
}
.button-primary {
  background: #c64c33;
  color: #fff;
  border-color: #c64c33;
  box-shadow: 0 5px 15px #a3513519;
}
.button-primary:hover {
  background: #b8432d;
}
.button-secondary {
  background: #eeefe7;
  color: #3e5d4a;
  border-color: #d3d8c8;
}
.button-secondary:hover {
  background: #e5e8dc;
}
.hero-about {
  color: #62695f;
}
.hero-about > .translated-text {
  font-size: inherit;
}
.hero-about > span[aria-hidden] {
  font-size: 18px;
}
.note-line {
  background: #a4ad99;
}
.hero-art:before {
  background: radial-gradient(ellipse, #dce3cc40, transparent 70%);
}
.art-grid {
  background-image:
    linear-gradient(#5d73540b 1px, transparent 1px),
    linear-gradient(90deg, #5d73540b 1px, transparent 1px);
}
.orbit {
  border-color: #91a18426;
}
.orbit-two {
  border-color: #91a18430;
}
.art-cross {
  color: #8a9a7f;
}
.orbit-point {
  background: #ad8e75;
  box-shadow: 0 0 12px #ad8e7530;
}
.art-window {
  background: linear-gradient(120deg, #fffefb, #f5f6ef);
  border-color: #d6d8ce;
  box-shadow: 0 20px 45px #303d3415;
}
.window-top {
  background: #eeeee8;
  border-color: #dfe2d6;
  color: #798370;
}
.window-dots i {
  background: #b8beb2;
}
.window-dots i:first-child {
  background: #9aa889;
}
.art-app-icon {
  color: #617b50;
  background: #e8ecdf;
  border-color: #ccd6bf;
}
.window-body div > span {
  color: #7b8870;
}
.window-number {
  color: #d1d9c4;
}
.mock-input {
  background: #fbfcf7;
  color: #7c8771;
  border-color: #dce1d1;
}
.wave-track i {
  background: #789564;
}
.lens-window {
  background: linear-gradient(120deg, #fffdf9, #f5ede3);
  border-color: #e3d5c5;
}
.lens-mini {
  color: #b87956;
  background: #f0e5d9;
  border-color: #e5d4c3;
}
.mini-label {
  color: #916341;
  background: #eee0cf;
}
.lens-window > p {
  color: #87735e;
}
.lens-tabs > span {
  color: #857259;
  background: #eee5d9;
}
.lens-tabs > span:last-child {
  background: #efd6c4;
  color: #9e563e;
}
.floating-chip {
  background: #fffef9f2;
  border-color: #e2e4d8;
  color: #78876c;
}
.art-caption {
  color: #7c8970;
}
.section-kicker > span {
  color: #606d56;
}
.tools-toolbar {
  flex-wrap: wrap;
}
.category-filters {
  min-width: 0;
}
.search-field {
  flex: 1 1 245px;
  max-width: 340px;
}
.filter-button > span {
  color: #5d6e50;
}
.filter-button[aria-pressed="true"] {
  background: #e8ecdf;
  border-color: #d1d8c5;
  color: #3e5d4a;
}
.filter-button[aria-pressed="true"] > span {
  color: #3e5d4a;
}
.filter-button:hover {
  background: #ecefe4;
  color: #465e3a;
}
.search-field input {
  background: #fffefb;
  border-color: #d6d8ce;
}
.search-field input::placeholder {
  color: #6b7562;
}
.search-icon {
  color: #6a7a5d;
}
.project-card {
  border-color: #dedfd7;
  border-radius: 12px;
  box-shadow: 0 6px 24px #303d3405;
}
.project-card:hover {
  border-color: #b9c3ab;
  box-shadow: 0 9px 28px #303d340c;
}
.project-art {
  background:
    radial-gradient(ellipse at 50% 60%, #dde5cf70, transparent 75%),
    linear-gradient(120deg, #eef2e6, #f3f5ed);
  border-color: #dfe4d5;
}
.project-art:before {
  background-image: radial-gradient(#7d936430 0.65px, transparent 0.65px);
}
.preview-label,
.preview-bottom {
  color: #748364;
}
.preview-dot {
  background: #8ca379;
}
.source-chip {
  background: #e1e9d5;
  color: #79935b;
  border-color: #cbd8b8;
}
.source-red {
  background: #f4e4dc;
  color: #b17d63;
  border-color: #e8cdbc;
}
.source-purple {
  background: #eae6ed;
  color: #847b96;
  border-color: #d9d1df;
}
.connector {
  background: linear-gradient(90deg, #8caa6c22, #8caa6c80);
}
.connector:after {
  border-color: #8caa6c80;
}
.download-core {
  background: linear-gradient(140deg, #edf3e3, #d9e4c8);
  color: #749458;
  border-color: #b2c595;
  box-shadow:
    0 0 0 8px #8aab6807,
    0 0 0 9px #8aab6812,
    0 12px 35px #809c5e16;
}
.file-chip {
  background: #e7eede;
  border-color: #c9d6b6;
}
.file-fold {
  background: #d5e0c3;
}
.file-chip .icon,
.file-chip > span:last-child {
  color: #869d66;
}
.preview-bottom > span:nth-child(2) {
  color: #778963;
}
.project-art--lens {
  background:
    radial-gradient(ellipse at 60% 60%, #f4e6d355, transparent 80%),
    linear-gradient(120deg, #f5eee5, #faf5ee);
}
.project-art--lens:before {
  background-image: radial-gradient(#b9946930 0.65px, transparent 0.65px);
}
.project-art--lens .preview-label,
.project-art--lens .preview-bottom {
  color: #9c7c53;
}
.project-art--lens .preview-dot {
  background: #b99163;
}
.project-art--lens .preview-bottom > span:nth-child(2) {
  color: #9c7c53;
}
.video-preview {
  background: linear-gradient(140deg, #ece2d3, #ede7dc);
  border-color: #d9c7ab;
}
.video-play {
  background: #e3cba9;
  color: #9e7a47;
}
.video-subtitles i {
  background: #c7ab82;
}
.video-subtitles i:last-child {
  background: #a6b78b;
}
.video-timeline {
  background: linear-gradient(90deg, #b59464 32%, #b5946433 32%);
}
.insight-preview {
  background: linear-gradient(130deg, #fffaf3, #f7efe4);
  border-color: #dfcdb3;
  box-shadow: 0 8px 20px #76654815;
}
.insight-title {
  color: #9c7a49;
}
.insight-lines i {
  background: #c7b08660;
}
.insight-tags > span {
  color: #9a7b4f;
  border-color: #cbb48760;
}
.project-status--soon {
  color: #827054;
}
.project-icon {
  background: #edf2e6;
  border-color: #d8e1cc;
  color: #587142;
}
.project-icon--lens {
  background: #f6eade;
  border-color: #e9d9c5;
  color: #a66b45;
}
.project-tags > li {
  background: #fafbf6;
  border-color: #dce2d1;
  color: #667954;
}
.project-bottom {
  border-color: #e5e8dd;
  flex-wrap: wrap;
  padding-block: 9px;
}
.project-actions {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.project-action:hover {
  color: #a33b26;
}
.project-action--soon:hover {
  color: #4d6836;
}
.project-title-row h3 {
  overflow-wrap: anywhere;
}
.message-panel {
  background: #fffefb;
  border-color: #d5ddc8;
}
.small-spark {
  color: #8fa771;
}
.collection-note p {
  color: var(--muted);
}
.collection-note p > .translated-text {
  margin-left: 0;
  color: inherit;
}
.mono {
  color: #637153;
}
.about-panel {
  background:
    radial-gradient(ellipse at 0 100%, #e8eddc50, transparent 55%), #fffefb;
  border-color: #dedfd7;
  border-radius: 12px;
}
.value-icon {
  background: #f1f4ea;
  border-color: #dfe7d2;
  color: #8da76b;
}
.about-values h3 {
  color: #4f613d;
}
.site-footer {
  flex-wrap: wrap;
}
.geo-attribution {
  color: var(--subtle);
  font-size: 10px;
}
.geo-attribution:hover {
  text-decoration: underline;
}
dialog {
  background: #fffefb;
  border-color: #d8dfcc;
  box-shadow: 0 30px 100px #303d3430;
}
dialog::backdrop {
  background: #303d3466;
}
.dialog-close {
  background: #eff3e7;
}
.dialog-close:hover {
  background: #e4ecd9;
  color: #526d37;
}
#dialog-description,
#dialog-details {
  color: #62695f;
}
#dialog-details li::marker {
  color: #849d66;
}
.language-control {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  flex-shrink: 0;
}
.language-control .icon {
  width: 17px;
  height: 17px;
}
.language-control select {
  font: inherit;
  font-size: 12px;
  border: 1px solid #dedfd7;
  border-radius: 7px;
  color: #3e5d4a;
  background: #fffefb;
  min-height: 38px;
  width: 168px;
  padding: 5px 8px;
  cursor: pointer;
}
.language-control select:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}
.hero-description,
.project-description,
.about-values p {
  overflow-wrap: break-word;
}
html:not([lang="zh-CN"]):not([lang="ja"]):not([lang="ko"]) h1 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.25;
  letter-spacing: -1.6px;
}
html:not([lang="zh-CN"]) .hero-actions {
  flex-wrap: wrap;
  gap: 16px 23px;
}
html:not([lang="zh-CN"]) .about-intro h2 {
  font-size: 25px;
}
html:not([lang="zh-CN"]) .lens-tabs > span {
  font-size: 8px;
}
html:not([lang="zh-CN"]) .preview-bottom > span:nth-child(2) {
  letter-spacing: 0;
}
html:not([lang="zh-CN"]) .section-description {
  max-width: 330px;
}
@media (max-width: 1000px) {
  .header-inner {
    gap: 22px;
  }
  nav {
    margin-left: 5px;
    gap: 23px;
  }
  .language-control select {
    width: 143px;
  }
  .project-bottom {
    align-items: flex-start;
  }
  .project-kind {
    padding-top: 10px;
  }
  html:not([lang="zh-CN"]) .project-actions {
    gap: 10px;
  }
  html:not([lang="zh-CN"]) .project-action {
    font-size: 11px;
  }
}
@media (max-width: 640px) {
  .site-header {
    height: 103px;
  }
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 62px 40px;
    gap: 0 10px;
  }
  .header-inner > .brand {
    grid-column: 1;
    grid-row: 1;
  }
  .header-inner > nav {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: 0;
    gap: 28px;
  }
  .language-control {
    grid-column: 2;
    grid-row: 1;
    gap: 5px;
  }
  .language-control select {
    width: 130px;
    font-size: 11px;
  }
  .language-control .icon {
    display: none;
  }
  .search-field {
    max-width: none;
    flex-basis: auto;
  }
  .collection-note p > .translated-text {
    display: inline;
  }
  .site-footer > p {
    max-width: 155px;
    text-align: right;
  }
  .footer-domain {
    width: auto;
    margin-left: 0;
  }
  .geo-attribution {
    margin-left: auto;
    font-size: 9px;
  }
  html:not([lang="zh-CN"]):not([lang="ja"]):not([lang="ko"]) h1 {
    font-size: clamp(32px, 8.5vw, 44px);
  }
  html:not([lang="zh-CN"]) .section-description {
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}