:root {
  color-scheme: light;
  --paper: #f1ede3;
  --ink: #122036;
  --surface: #fffdf7;
  --accent: #194682;
  --rule: #b5ad9e;
  font: 100%/1.65 system-ui, "PingFang SC", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: inherit; text-underline-offset: .24em; }
a:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.site-head, footer { padding: .65rem max(1.1rem, calc((100vw - 72rem) / 2)); }
.site-head { display: flex; align-items: center; justify-content: space-between; gap: .2rem 1.25rem; flex-wrap: wrap; border-bottom: 2px solid var(--ink); }
.site-brand { font-weight: 800; }
nav { display: flex; flex-wrap: wrap; gap: 0 1rem; }
nav a, .site-brand { min-height: 44px; display: inline-flex; align-items: center; }
main { max-width: 74.5rem; margin: auto; padding: clamp(1.2rem, 4vw, 3rem) 1.25rem 3rem; }
h1, h2, h3 { line-height: 1.17; overflow-wrap: anywhere; }
h1 { margin: 0 0 1.25rem; font: 800 clamp(1.75rem, 3.4vw, 3.25rem)/1.18 "Songti SC", STSong, serif; text-wrap: balance; }
h2 { margin: 2rem 0 .9rem; }
p { max-width: 66ch; }
.featured { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1rem, 3vw, 2.6rem); align-items: center; background: var(--surface); border: 1px solid var(--ink); padding: clamp(1rem, 3vw, 2rem); }
.featured h2 { margin-top: 0; }
.featured img, .work-grid img { width: 100%; display: block; object-fit: cover; aspect-ratio: 16 / 10; background: #ded9cc; }
.button { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; background: var(--accent); color: var(--action-ink, white); font: inherit; font-weight: 700; }
button.button { margin-top: .65rem; border: 1px solid var(--accent); cursor: pointer; }
.topic-links { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.topic-links a { display: inline-flex; align-items: center; gap: .65rem; padding: .4rem .8rem; min-height: 44px; background: var(--surface); border: 1px solid var(--rule); }
.topic-links span { font-size: .82rem; color: var(--accent); }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.work-grid article { background: var(--surface); padding: .8rem; border: 1px solid var(--rule); }
.work-grid h3 { margin: .8rem 0 .35rem; }
.work-grid p { margin: 0; }
.video-detail video { display: block; background: #121b29; width: 100%; max-height: min(68vh, 36rem); min-height: 14rem; object-fit: contain; }
.video-detail { background: var(--surface); padding: clamp(.75rem, 2.2vw, 1.6rem); border: 1px solid var(--rule); }
.credit { border-top: 1px solid var(--rule); padding-top: .85rem; }
input { font: inherit; width: min(100%, 35rem); min-height: 44px; padding: .4rem .7rem; display: block; border: 1px solid var(--ink); }
footer { border-top: 1px solid var(--rule); }
.layout-reverse .featured > a { order: -1; }
.layout-stack .featured { grid-template-columns: 1fr; }
.layout-stack .featured img { max-height: 27rem; }
.layout-wide .featured { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 680px) {
  .featured, .layout-wide .featured { grid-template-columns: 1fr; }
  main { padding-inline: 1rem; }
}

:root{--paper:#f7eef1;--ink:#402d3a;--accent:#88536c;--surface:#fffdf7;--rule:#b5ad9e;--action-ink:#ffffff}

.works-native .works-content { overflow: visible; }
.works-native .works-content h1 { overflow-wrap: anywhere; }
.works-native .works-content p a,
.works-native .works-content li > a { display: inline-flex; align-items: center; min-height: 24px; }
.works-native .works-native-head nav,
.works-native .works-native-foot nav { flex-wrap: wrap; }
.works-native .works-native-head a,
.works-native .works-native-foot a { min-height: 36px; display: inline-flex; align-items: center; }
.works-native .works-native-foot {
  padding: clamp(1.2rem, 3vw, 2.4rem) max(1rem, calc((100vw - 72rem) / 2));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1.25rem;
}
.works-native-foot .works-footer-label {
  flex-basis: 100%;
  font-weight: 700;
  margin: .25rem 0 0;
}
.works-native .works-native-foot .works-footer-tags { flex-basis: 100%; gap: .5rem; }
.works-native .works-footer-tags a {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .2rem .75rem;
}
.works-native .works-content .featured h2 { margin-top: .9rem; }
.works-native .works-content .featured .button { text-decoration: none; }
.works-native .works-hero-player { min-width: 0; margin: 0; }
.works-native .works-hero-player video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #101a27;
  object-fit: contain;
}
.works-field .works-field-section { padding: 0; }
.works-field .works-field-section .featured {
  padding: 0;
  border: 0;
  background: transparent;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
}
.works-field .works-field-section .featured h1 {
  font-size: clamp(1.7rem, 3vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.works-field .works-field-section .featured figure {
  display: grid;
  align-content: center;
  grid-column: span 7;
}
.works-field .works-field-section .featured video { position: static; min-height: 0; height: auto; }
@media (max-width: 680px) {
  .works-field .works-field-section .featured { grid-template-columns: minmax(0, 1fr); }
  .works-field .works-field-section .featured > * { grid-column: auto; }
  .works-native .works-native-head { gap: .35rem .8rem; }
  .works-native .works-native-head nav { gap: 0 .7rem; }
}

/* Keep a browse card readable when its native theme styles all main links as flex. */
.works-native .works-content .work-grid article > a {
  display: block;
  min-width: 0;
}
.works-native .works-content .work-grid article > a > h3 {
  overflow-wrap: break-word;
  word-break: normal;
}
.works-native .works-content .work-grid article:only-child {
  width: min(100%, 34rem);
  justify-self: start;
}
.works-native .works-content > h1 { max-width: none; }

.works-native .works-native-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
}
.works-native .works-native-foot nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .85rem;
}
.works-native .works-native-foot nav::before { content: none; }
.works-native .works-native-foot .works-footer-tags { gap: .5rem; }
.works-native .works-native-foot .works-footer-tags a { width: auto; opacity: 1; }

@media (max-width: 720px) {
  .works-native .works-native-head :is(.p_v92mast, .h_v84mast, .k_65railx),
  .works-native .works-native-head.b_vb350002 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .15rem .65rem;
  }
  .works-native .works-native-head :is(.p_v92nav, .h_v84nav, .k_65navxx, .d_vb350004, .v_q93navway) {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 0 .65rem;
    margin: 0;
  }
  .works-native .works-native-head .h_v84nav a { padding: 0; }
  .works-native .works-native-head :is(.h_v84enter, .e_vb350005) { grid-column: 2; grid-row: 1; }
  .works-native .works-native-head .v_q93rail { padding-block: .35rem; }
}
@media (max-width: 680px) {
  .works-field .works-field-section .featured > .v_s450009 {
    width: 100%;
    min-width: 0;
    padding: 1.15rem;
  }
}

@media (min-width: 900px) {
  .works-native.layout-stack .works-hero-player {
    width: min(100%, 44rem, 78vh);
    justify-self: center;
  }
}