:root {
  --paper: #0c1110;
  --ink: #edf5ef;
  --muted: #a8b8af;
  --line: #2b3932;
  --green: #77ebba;
  --sand: #e7c397;
  --panel: #121b17;
}

body::before {
  background: radial-gradient(ellipse at 17% 25%, #264c3d60, transparent 52%),
    radial-gradient(ellipse at 92% 40%, #57432d2e, transparent 40%);
}
#network { opacity: .82; }
.ambient-glow {
  inset: -12%;
  background: radial-gradient(ellipse at 28% 38%, #397a5e48, transparent 53%),
    radial-gradient(ellipse at 78% 65%, #7c63452d, transparent 44%);
  opacity: .65;
  animation: ambient-drift 17s ease-in-out infinite alternate;
}
@keyframes ambient-drift {
  from { transform: translate3d(-3%, -2%, 0); }
  to { transform: translate3d(6%, 5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-glow { animation: none; }
}
.scroll-progress { background: linear-gradient(90deg, var(--green), var(--sand)); }
.nav:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.nav.scrolled {
  background: #101b16f5;
  border-bottom-color: #839c8b28;
}
.brand { gap: 10px; font-size: 16px; white-space: nowrap; }
.brand-avatar {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid #ad926a;
}
footer .brand-avatar { width: 30px; height: 30px; flex-basis: 30px; }
.nav nav a { color: #c3d0c8; }
.nav nav a:last-child { color: var(--green); }
.language-switch { background: #15201b; border-color: #34483d; }
.language-switch button[aria-pressed=true] { background: var(--green); color: #102017; }

.hero {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 90px);
  min-height: 570px;
  padding-block: 68px;
}
.hero .eyebrow { color: var(--green); font-size: 11px; letter-spacing: .14em; }
.hero h1, html[lang=en] .hero h1 {
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.14;
  margin: 20px 0;
}
.hero .highlight { color: var(--green); background: none; }
.hero .intro { max-width: 520px; font-size: 15px; line-height: 1.85; }
.hero-actions { gap: 12px; flex-wrap: wrap; }
.hero-actions .dark, .hero-actions .text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 17px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.hero-actions .dark { color: #092016; background: var(--green); }
.hero-actions .text-link { background: #15211be0; color: var(--ink); border-color: #384d42; }
.hero-actions .text-link:hover { border-color: var(--green); }

.hero-art.studio-panel {
  min-height: 0;
  border: 1px solid #3a5045;
  border-radius: 14px;
  background: linear-gradient(145deg, #17231d, #101713 80%);
  box-shadow: 0 22px 70px #0005;
}
.studio-panel::after { display: none; }
.studio-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: #ffffff07;
  border-bottom: 1px solid #34443a;
}
.studio-lights { display: flex; gap: 6px; }
.studio-lights i { width: 8px; height: 8px; border-radius: 50%; background: #d28f83; }
.studio-lights i:nth-child(2) { background: var(--sand); }
.studio-lights i:nth-child(3) { background: var(--green); }
.studio-path, .studio-caption, .studio-index, .studio-status { font-family: ui-monospace, Consolas, monospace; }
.studio-path { color: #a8b8af; font-size: 11px; }
.studio-content { padding: 18px; }
.studio-caption {
  display: flex;
  justify-content: space-between;
  color: var(--green);
  font-size: 12px;
  margin: 2px 0 14px;
}
.studio-count { color: var(--muted); }
.studio-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px 12px;
  border: 1px solid #304037;
  border-radius: 7px;
  margin-bottom: 7px;
  background: #ffffff04;
  color: #e8f0ea;
  font-size: 13px;
}
.studio-row:hover { background: #233b2f; border-color: #629981; }
.studio-index { color: var(--green); font-size: 10px; }
.studio-row > span:last-child { color: var(--muted); }
.studio-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; padding: 12px 0 1px; }
.studio-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--sand); }

.entry-grid > a, .focus-grid article, .project-card, .journey-track article, .atlas-shell { background: var(--panel); border-color: var(--line); }
.about-bottom { grid-template-columns: minmax(0, 1fr); max-width: 66ch; }
.entry-grid > a:hover, .focus-grid article:hover { background: #1a2a21; border-color: #567864; }
.focus-section, .lab-section { background: #101913ad; }
.section-label { color: #9cb6a8; }
.focus-grid article:nth-child(2) .focus-symbol { color: #b2d3c2; }
.focus-grid article:nth-child(3) .focus-symbol { color: var(--sand); }
.atlas-menu { background: #101713; }
.atlas-menu button[aria-pressed=true] { color: #c7f8e0; background: #20382b; border-color: #527963; }
.map-flow > span { background: #1b2921; border-color: #3b5849; }
.visual-01 { background: radial-gradient(ellipse, #387863a6, transparent 78%), #172921; }
.visual-02 { background: radial-gradient(ellipse, #53776b91, transparent 78%), #172622; }
.visual-03 { background: radial-gradient(ellipse, #9c76578b, transparent 78%), #2d261d; }
.visual-02 .project-glyph { color: #b2ded0; }
.project-card:target { border-color: var(--green); }
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  background: linear-gradient(120deg, #1a3026, #20291f);
  border-color: #50634d;
}
.contact h2 { font-size: clamp(26px, 3.2vw, 40px); }
.contact-intro p { color: var(--muted); }
.contact-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.contact-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  background: #101b16;
  border: 1px solid #41564a;
  border-radius: 8px;
  font-size: 12px;
}
a.contact-channel:hover, .contact-channel:focus-within { border-color: var(--green); }
.channel-copy { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.channel-label { color: var(--green); font-weight: 600; }
#copy-wechat {
  flex-shrink: 0;
  padding: 5px 7px;
  border: 1px solid #547060;
  border-radius: 5px;
  color: var(--ink);
  background: #243c2f;
  font-size: 11px;
}
#copy-wechat:hover { background: #325440; }
.copy-feedback { grid-column: 1 / -1; min-height: 1.25em; color: var(--green); font-size: 11px; }

@media (max-width: 850px) {
  .nav nav { border-top-color: #9db7a51c; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 25px; min-height: 510px; padding-block: 48px; }
  .hero h1, html[lang=en] .hero h1 { font-size: clamp(36px, 5.5vw, 50px); }
}
@media (max-width: 700px) {
  .nav > .brand { font-size: 14px; gap: 8px; }
  .nav .brand-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 30px; min-height: 0; padding-block: 35px; }
  .hero h1, html[lang=en] .hero h1 { font-size: clamp(32px, 8.4vw, 50px); }
  .hero .intro { font-size: 14px; }
  .hero-actions .dark, .hero-actions .text-link { padding: 11px 12px; font-size: 12px; }
  .studio-content { padding: 14px; }
}
@media (max-width: 440px) {
  .contact-channels { grid-template-columns: minmax(0, 1fr); }
}