:root {
  --navy: #071526;
  --navy-2: #0d2136;
  --ink: #132031;
  --paper: #f3eee3;
  --paper-2: #e9e1d2;
  --gold: #d7a84a;
  --gold-light: #f0cb78;
  --vermillion: #a94a3f;
  --muted: #68717b;
  --rule: rgba(19, 32, 49, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(24px, 5vw, 84px);
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-size: 13px;
}
.brand { display: flex; align-items: center; gap: 12px; font-family: "Songti SC", STSong, serif; font-size: 17px; letter-spacing: .08em; }
.brand-mark { color: var(--gold-light); font-size: 18px; }
.site-header nav { display: flex; gap: 34px; color: rgba(243,238,227,.72); }
.site-header nav a:hover { color: var(--gold-light); }
.header-action { justify-self: end; display: flex; gap: 10px; color: var(--gold-light); }

.hero {
  min-height: 820px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .58fr);
  gap: clamp(56px, 8vw, 140px);
  align-items: end;
  padding: 150px clamp(24px, 7.4vw, 120px) 88px;
  color: var(--paper);
  background:
    radial-gradient(circle at 11% 24%, rgba(240,203,120,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 27% 18%, rgba(255,255,255,.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 43% 30%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 17%, rgba(240,203,120,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 39%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 94% 23%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    linear-gradient(135deg, #061321, #0a1c31 58%, #102942);
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .23;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.orbit { position: absolute; border: 1px solid rgba(215,168,74,.55); border-radius: 50%; transform: rotate(-16deg); }
.orbit-one { width: 720px; height: 300px; right: -190px; top: 110px; box-shadow: 0 0 0 18px rgba(215,168,74,.04), 0 0 0 42px rgba(215,168,74,.025); }
.orbit-two { width: 560px; height: 170px; left: -310px; bottom: 120px; border-color: rgba(215,168,74,.25); }
.constellation { position: absolute; right: 8%; top: 24%; width: 260px; height: 180px; opacity: .68; }
.constellation:before, .constellation:after { content: ""; position: absolute; height: 1px; background: var(--gold); transform-origin: left center; }
.constellation:before { width: 155px; left: 35px; top: 42px; transform: rotate(28deg); }
.constellation:after { width: 125px; left: 136px; top: 116px; transform: rotate(-24deg); }
.constellation i { position: absolute; width: 7px; height: 7px; background: var(--gold-light); border-radius: 50%; box-shadow: 0 0 18px rgba(240,203,120,.7); }
.constellation i:nth-child(1){left:31px;top:38px}.constellation i:nth-child(2){left:91px;top:73px}.constellation i:nth-child(3){left:136px;top:111px}.constellation i:nth-child(4){right:0;top:61px}.constellation i:nth-child(5){right:38px;bottom:14px}.constellation i:nth-child(6){left:76px;bottom:0}
.hero-copy, .hero-index { position: relative; z-index: 1; }
.eyebrow { display: flex; gap: 24px; margin: 0 0 30px; font: 11px/1.2 "SFMono-Regular", Consolas, monospace; color: var(--gold-light); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span + span { color: rgba(243,238,227,.45); }
.hero h1 { max-width: 900px; margin: 0; font: 500 clamp(48px, 5.4vw, 88px)/1.08 "Songti SC", STSong, "Noto Serif CJK SC", serif; letter-spacing: -.05em; }
.hero h1 em { color: var(--gold-light); font-style: normal; }
.hero-intro { max-width: 690px; margin: 36px 0 0; color: rgba(243,238,227,.74); font-size: 17px; line-height: 1.95; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 42px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 0 23px; border: 1px solid currentColor; font-size: 13px; letter-spacing: .04em; transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-gold { color: var(--navy); background: var(--gold-light); border-color: var(--gold-light); }
.button-gold:hover { background: var(--paper); border-color: var(--paper); }
.button-ink { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.text-link { display: inline-flex; gap: 14px; color: var(--paper); font-size: 13px; border-bottom: 1px solid rgba(243,238,227,.45); padding-bottom: 6px; }
.hero-index { align-self: end; border-top: 1px solid rgba(240,203,120,.75); padding-top: 16px; }
.index-label { margin: 0 0 8px; color: var(--gold-light); font: 10px/1.3 monospace; letter-spacing: .12em; }
.index-item { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.index-item > span { color: var(--gold); font: 11px monospace; }
.index-item strong, .index-item small { display: block; }
.index-item strong { margin-bottom: 7px; font-size: 15px; font-weight: 500; }
.index-item small { color: rgba(243,238,227,.5); font-size: 12px; line-height: 1.6; }
.hero-signature { margin-top: 30px; color: var(--paper); font: 15px/1.35 "Times New Roman", serif; letter-spacing: .14em; }
.hero-signature span { color: rgba(243,238,227,.35); font: 9px monospace; }

.coordinate-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 21px; min-height: 76px; padding: 18px 24px; background: var(--gold); color: var(--navy); font-size: 13px; }
.coordinate-bar span { font: 11px monospace; letter-spacing: .15em; opacity: .65; }
.coordinate-bar strong { font-weight: 500; }
.coordinate-bar i { font-style: normal; font-size: 8px; }

.section { max-width: 1440px; margin: 0 auto; padding: 118px clamp(24px, 5.8vw, 84px); }
.section-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 38px; font: 10px/1.3 "SFMono-Regular", Consolas, monospace; color: var(--vermillion); letter-spacing: .14em; }
.section-kicker span { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; letter-spacing: 0; }
.section-heading { display: grid; grid-template-columns: .42fr 1.2fr; column-gap: 8vw; align-items: start; margin-bottom: 70px; }
.section-heading h2, .about h2, .future h2, .content-copy h2 { margin: 0; font: 500 clamp(36px, 4.3vw, 64px)/1.2 "Songti SC", STSong, serif; letter-spacing: -.04em; }
.section-heading .section-kicker { margin-top: 12px; }
.section-heading > p { grid-column: 2; margin: 22px 0 0; max-width: 660px; color: var(--muted); font-size: 16px; line-height: 1.85; }

.about { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: .95fr 1fr; gap: 11vw; }
.about h2 { max-width: 660px; }
.about-copy p { color: #4e5964; font-size: 16px; line-height: 1.95; }
.about-copy .lead { margin-top: 0; color: var(--ink); font: 500 21px/1.8 "Songti SC", STSong, serif; }
blockquote { margin: 38px 0; padding: 26px 0 26px 26px; border-left: 2px solid var(--vermillion); font: 500 20px/1.7 "Songti SC", STSong, serif; }
.author-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.author-tags span, .skill-tags span { padding: 8px 12px; border: 1px solid var(--rule); font-size: 11px; }

.works { border-top: 1px solid var(--rule); }
.works-grid { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 24px; }
.book-card { display: grid; grid-template-columns: minmax(155px, .75fr) 1fr; min-height: 425px; border: 1px solid var(--rule); background: rgba(255,255,255,.28); }
.book-cover { min-height: 100%; display: flex; flex-direction: column; padding: 32px 24px; color: var(--paper); position: relative; overflow: hidden; }
.book-cover:after { content: ""; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; right: -85px; top: 60px; box-shadow: 0 0 0 16px rgba(255,255,255,.03), 0 0 0 32px rgba(255,255,255,.02); }
.book-data { background: var(--vermillion); }
.book-ai { background: var(--navy-2); }
.book-cover small { font: 9px monospace; letter-spacing: .12em; opacity: .65; }
.book-cover strong { margin-top: 76px; font: 500 34px/1.15 "Songti SC", STSong, serif; z-index: 1; }
.book-cover em { margin-top: 10px; font-style: normal; font-size: 12px; }
.book-cover span { margin-top: auto; font-size: 9px; opacity: .65; }
.book-info { display: flex; flex-direction: column; padding: 31px 26px; }
.meta { color: var(--vermillion); font: 10px/1.4 monospace; letter-spacing: .1em; }
.book-info h3, .audio-card h3 { margin: 14px 0 18px; font: 500 23px/1.45 "Songti SC", STSong, serif; }
.book-info p:not(.meta), .audio-card p:not(.meta) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.book-info a, .audio-card a { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; border-top: 1px solid var(--rule); font-size: 12px; }
.audio-card { display: flex; flex-direction: column; padding: 30px; background: var(--gold); }
.audio-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 72px; }
.audio-top p { font: 9px monospace; letter-spacing: .12em; }
.audio-sun { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 22px; }

.skills { background: var(--navy); color: var(--paper); position: relative; overflow: hidden; }
.skills:before { content:""; position:absolute; inset:0; opacity:.18; background-image: radial-gradient(rgba(240,203,120,.65) 0 1px, transparent 1.5px); background-size: 86px 86px; }
.skills-inner { position: relative; z-index: 1; }
.section-heading.light { grid-template-columns: .42fr 1.2fr; }
.section-heading.light h2 { color: var(--paper); }
.section-heading.light > p { color: rgba(243,238,227,.58); }
.section-heading.light .section-kicker { color: var(--gold-light); }
.skill-feature { display: grid; grid-template-columns: 1.15fr .85fr; border: 1px solid rgba(240,203,120,.55); background: rgba(6,19,33,.72); }
.skill-main { padding: clamp(34px, 5vw, 70px); border-right: 1px solid rgba(240,203,120,.35); }
.skill-status { display: flex; justify-content: space-between; color: var(--gold-light); font: 9px monospace; letter-spacing: .12em; }
.skill-number { margin: 62px 0 18px; color: rgba(243,238,227,.38); font: 10px monospace; }
.skill-main h3 { margin: 0; font: 500 clamp(37px, 4vw, 60px)/1.15 "Songti SC", STSong, serif; }
.skill-main > p:not(.skill-number) { max-width: 660px; color: rgba(243,238,227,.65); font-size: 15px; line-height: 1.9; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 36px; }
.skill-tags span { border-color: rgba(243,238,227,.2); }
.skill-flow { display: flex; flex-direction: column; justify-content: center; padding: 32px 38px; }
.flow-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 18px; padding: 28px 0; border-bottom: 1px solid rgba(243,238,227,.15); }
.flow-row:last-child { border-bottom: 0; }
.flow-row span { color: var(--gold); font: 10px monospace; }
.flow-row strong { font-size: 14px; font-weight: 500; }
.flow-row small { color: rgba(243,238,227,.3); font: 9px monospace; }
.skill-candidates { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(243,238,227,.18); border-top: 0; }
.skill-candidates article { min-height: 255px; padding: 30px; border-right: 1px solid rgba(243,238,227,.18); }
.skill-candidates article:last-child { border-right: 0; }
.skill-candidates span { color: var(--gold); font: 9px monospace; letter-spacing: .12em; }
.skill-candidates h3 { margin: 45px 0 15px; font: 500 22px/1.35 "Songti SC", STSong, serif; }
.skill-candidates p { color: rgba(243,238,227,.53); font-size: 12px; line-height: 1.75; }
.skill-candidates small, .skill-candidates a { display: block; margin-top: 30px; color: var(--gold-light); font: 9px monospace; }
.skill-showcase { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid rgba(240,203,120,.45); }
.skill-showcase-card { min-height: 455px; display: flex; flex-direction: column; padding: clamp(30px, 3.5vw, 52px); border-right: 1px solid rgba(240,203,120,.3); border-bottom: 1px solid rgba(240,203,120,.3); background: rgba(6,19,33,.68); }
.skill-showcase-card:nth-child(2n) { border-right: 0; }
.skill-showcase-card:nth-last-child(-n + 2) { border-bottom: 0; }
.skill-showcase-card:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.skill-showcase-card h3 { margin: 16px 0 20px; font: 500 clamp(28px, 2.7vw, 42px)/1.22 "Songti SC", STSong, serif; }
.skill-showcase-card > p:not(.skill-number) { margin: 0; color: rgba(243,238,227,.65); font-size: 14px; line-height: 1.9; }
.skill-showcase-card .skill-tags { margin-top: 28px; }
.skill-showcase-card .button { margin-top: auto; align-self: flex-start; }
.skill-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: auto; padding-top: 30px; border-top: 1px solid rgba(243,238,227,.15); }
.skill-actions .button { margin-top: 0; }
.skill-repo-link { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 1px solid currentColor; color: var(--gold-light); font-size: 12px; }

.skills-hub { position: relative; overflow: hidden; background: var(--navy); color: var(--paper); }
.skills-hub:before { content:""; position:absolute; inset:0; opacity:.18; background-image: radial-gradient(rgba(240,203,120,.65) 0 1px, transparent 1.5px); background-size: 86px 86px; }
.skills-hub-inner { position: relative; z-index: 1; display: grid; grid-template-columns: .95fr 1fr; gap: 10vw; }
.skills-hub h2, .skills-next h2 { margin: 0; font: 500 clamp(38px, 4.6vw, 68px)/1.18 "Songti SC", STSong, serif; letter-spacing: -.04em; }
.skills-hub .section-kicker, .skills-next .section-kicker { color: var(--gold-light); }
.skills-hub-copy > p { max-width: 650px; margin: 0 0 34px; color: rgba(243,238,227,.68); font-size: 17px; line-height: 1.9; }
.skills-hub-index { margin: 0 0 38px; border-top: 1px solid rgba(240,203,120,.48); }
.skills-hub-index div { display: grid; grid-template-columns: 48px .8fr 1.2fr; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(243,238,227,.16); }
.skills-hub-index span { color: var(--gold); font: 10px monospace; }
.skills-hub-index strong { font: 500 19px "Songti SC", STSong, serif; }
.skills-hub-index small { color: rgba(243,238,227,.48); font-size: 12px; }

.starlab-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 36px; }
.starlab-actions .report-link { color: var(--vermillion); }

.skills-hero { min-height: 700px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .58fr); gap: clamp(56px, 8vw, 140px); align-items: end; padding: 160px clamp(24px, 7.4vw, 120px) 88px; color: var(--paper); background: radial-gradient(circle at 12% 25%, rgba(240,203,120,.9) 0 1px, transparent 1.7px), radial-gradient(circle at 44% 22%, rgba(255,255,255,.72) 0 1px, transparent 1.6px), radial-gradient(circle at 82% 35%, rgba(255,255,255,.7) 0 1px, transparent 1.5px), linear-gradient(135deg, #061321, #0a1c31 58%, #102942); }
.skills-hero:after { content:""; position:absolute; inset:0; opacity:.23; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:64px 64px; }
.skills-hero-copy, .skills-hero-index { position: relative; z-index: 1; }
.skills-hero h1 { max-width: 900px; margin: 0; font: 500 clamp(48px, 5.4vw, 82px)/1.08 "Songti SC", STSong, "Noto Serif CJK SC", serif; letter-spacing: -.05em; }
.skills-hero h1 em { color: var(--gold-light); font-style: normal; }
.skills-hero-copy > p:not(.eyebrow) { max-width: 720px; margin: 34px 0 0; color: rgba(243,238,227,.72); font-size: 17px; line-height: 1.95; }
.skills-hero-index { border-top: 1px solid rgba(240,203,120,.75); padding-top: 16px; }
.skills-hero-index > a { display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.skills-hero-index > a > span { color: var(--gold); font: 11px monospace; }
.skills-hero-index strong, .skills-hero-index small { display: block; }
.skills-hero-index strong { margin-bottom: 7px; font-size: 15px; font-weight: 500; }
.skills-hero-index small { color: rgba(243,238,227,.5); font-size: 12px; }
.skills-hero-index b { color: var(--gold-light); font-weight: 400; }
.skills-update-note { margin: 26px 0 0; color: rgba(243,238,227,.42); font: 10px/1.6 monospace; letter-spacing: .08em; }
.skills-page .skills { scroll-margin-top: 0; }
.skills-page .recommended-card { min-height: 540px; }
.review-boundary { max-width: 880px; margin: 36px 0 0 auto; padding: 18px 20px; border: 1px solid var(--rule); color: var(--muted); font-size: 11px; line-height: 1.75; }
.skills-next { background: var(--vermillion); color: var(--paper); }
.skills-next-inner { display: grid; grid-template-columns: 1fr .8fr; gap: 10vw; align-items: end; }
.skills-next-inner > div:last-child > p { margin: 0 0 34px; color: rgba(243,238,227,.74); font-size: 16px; line-height: 1.9; }

.live-hero { min-height: 660px; }
.live-hero .skills-hero-copy > p:not(.eyebrow) { max-width: 760px; }
.live-hero-note { margin: 30px 0 0; padding: 16px 18px; border-left: 2px solid var(--gold-light); background: rgba(240,203,120,.09); color: rgba(243,238,227,.8); font: 14px/1.75 "Songti SC", STSong, serif; }
.live-list { background: #e9e2d5; }
.live-featured { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); border: 1px solid var(--rule); background: rgba(255,255,255,.36); }
.live-featured-copy { padding: clamp(32px, 5vw, 68px); }
.live-featured-copy .meta, .live-card .meta { margin: 0 0 24px; color: var(--vermillion); font: 10px/1.5 monospace; letter-spacing: .12em; }
.live-featured-copy h2 { margin: 0; font: 500 clamp(35px, 4vw, 58px)/1.2 "Songti SC", STSong, serif; letter-spacing: -.04em; }
.live-featured-copy > p:not(.meta) { max-width: 660px; margin: 24px 0 0; color: #4e5964; font-size: 15px; line-height: 1.9; }
.live-featured-copy .skill-tags { margin-bottom: 0; }
.live-featured-aside { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(30px, 4vw, 58px); color: var(--paper); background: var(--navy); }
.live-featured-aside p { margin: 0; color: rgba(243,238,227,.62); font-size: 14px; line-height: 1.85; }
.live-featured-aside strong { display: block; margin-bottom: 14px; color: var(--gold-light); font: 500 27px/1.35 "Songti SC", STSong, serif; }
.live-featured-aside .button { align-self: flex-start; margin-top: 34px; }
.live-archive { border-top: 1px solid var(--ink); }
.live-card { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--rule); }
.live-card-number { color: var(--vermillion); font: 10px monospace; letter-spacing: .1em; }
.live-card h3 { margin: 0 0 10px; font: 500 24px/1.35 "Songti SC", STSong, serif; }
.live-card p:not(.meta) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.live-card .button { min-height: 44px; white-space: nowrap; }
.live-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 38px); }
.live-gallery-card { min-width: 0; border: 1px solid var(--rule); background: rgba(255,255,255,.4); scroll-margin-top: 92px; }
.live-gallery-poster { position: relative; display: block; overflow: hidden; color: inherit; background: var(--navy); }
.live-gallery-poster img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: contain; object-position: top; transition: transform .3s ease; }
.live-gallery-poster:hover img { transform: scale(1.018); }
.live-gallery-status { position: absolute; right: 14px; bottom: 14px; padding: 8px 11px; color: var(--navy); background: var(--gold-light); font: 700 9px/1 monospace; letter-spacing: .08em; box-shadow: 4px 4px 0 rgba(0,0,0,.22); }
.live-gallery-status.is-preview { color: var(--paper); background: var(--vermillion); }
.live-gallery-copy { padding: 24px 22px 28px; }
.live-gallery-copy .meta { margin: 0 0 12px; color: var(--vermillion); font: 10px/1.5 monospace; letter-spacing: .1em; }
.live-gallery-copy h3 { margin: 0; font: 500 24px/1.35 "Songti SC", STSong, serif; }
.live-gallery-copy > p:not(.meta) { min-height: 70px; margin: 14px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.live-gallery-copy .button { min-height: 42px; }

.live-detail { background: var(--paper); }
.live-brief { display: grid; grid-template-columns: .88fr 1.12fr; gap: 9vw; padding-bottom: 84px; }
.live-brief h2, .live-resources h2, .live-method h2 { margin: 0; font: 500 clamp(35px, 4vw, 58px)/1.2 "Songti SC", STSong, serif; letter-spacing: -.04em; }
.live-brief > div:last-child > p { margin: 0 0 22px; color: #4e5964; font-size: 16px; line-height: 1.9; }
.live-boundary { padding: 18px 20px; border-left: 2px solid var(--vermillion); background: rgba(169,74,63,.07); color: var(--ink) !important; font: 500 16px/1.75 "Songti SC", STSong, serif !important; }
.live-resources { padding-top: 84px; border-top: 1px solid var(--rule); }
.live-skill-install { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); padding-top: 84px; padding-bottom: 84px; color: var(--paper); background: var(--navy); }
.live-skill-install-copy { padding: clamp(32px, 5vw, 68px); }
.live-skill-install .section-kicker { color: var(--gold-light); }
.live-skill-install .meta { margin: 0 0 22px; color: rgba(243,238,227,.42); font: 10px/1.5 monospace; letter-spacing: .1em; }
.live-skill-install h2 { margin: 0; color: var(--paper); font: 500 clamp(35px, 4vw, 58px)/1.2 "Songti SC", STSong, serif; letter-spacing: -.04em; }
.live-skill-install-copy > p:not(.meta) { max-width: 690px; margin: 24px 0 0; color: rgba(243,238,227,.66); font-size: 15px; line-height: 1.9; }
.live-skill-install code { color: var(--gold-light); font: 12px "SFMono-Regular", Consolas, monospace; }
.live-skill-install-action { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 68px); border-left: 1px solid rgba(240,203,120,.3); background: rgba(240,203,120,.08); }
.live-skill-install-action > span { color: var(--gold-light); font: 10px monospace; letter-spacing: .13em; }
.live-skill-install-action strong { margin: 22px 0 18px; color: var(--paper); font: 500 33px/1.28 "Songti SC", STSong, serif; }
.live-skill-install-action p { margin: 0; color: rgba(243,238,227,.64); font-size: 13px; line-height: 1.8; }
.live-skill-install-action .button { align-self: flex-start; margin-top: 32px; }
.live-skill-install-action small { margin-top: 20px; color: rgba(243,238,227,.36); font-size: 10px; line-height: 1.7; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); margin-top: 50px; }
.resource-card { display: flex; flex-direction: column; min-height: 420px; padding: clamp(28px, 3.4vw, 50px); border-right: 1px solid var(--rule); background: rgba(255,255,255,.28); }
.resource-card:last-child { border-right: 0; }
.resource-card .resource-number { color: var(--vermillion); font: 10px monospace; letter-spacing: .12em; }
.resource-card h3 { margin: 48px 0 18px; font: 500 31px/1.25 "Songti SC", STSong, serif; }
.resource-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.resource-card .button, .resource-card details { margin-top: auto; }
.resource-card details { padding-top: 28px; border-top: 1px solid var(--rule); }
.resource-card summary { cursor: pointer; color: var(--vermillion); font-size: 13px; }
.resource-card details p { margin: 14px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.resource-card details .button { width: 100%; min-height: 45px; padding: 0 14px; }
.live-method { color: var(--paper); background: var(--navy); }
.live-method .section-kicker { color: var(--gold-light); }
.live-method h2 { color: var(--paper); }
.live-method-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; align-items: start; }
.live-method-grid > p { margin: 0; color: rgba(243,238,227,.64); font-size: 16px; line-height: 1.9; }
.live-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(240,203,120,.45); }
.live-steps li { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 23px 0; border-bottom: 1px solid rgba(243,238,227,.16); }
.live-steps span { color: var(--gold); font: 10px monospace; }
.live-steps strong, .live-steps small { display: block; }
.live-steps strong { margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.live-steps small { color: rgba(243,238,227,.48); font-size: 12px; line-height: 1.7; }

.recommended-skills { background: #e9e2d5; border-bottom: 1px solid var(--rule); }
.recommended-skills .section-heading { margin-bottom: 58px; }
.recommended-skills .section-heading > div:last-child { grid-column: 2; }
.recommended-skills .section-heading p { max-width: 660px; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.recommended-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.recommended-card { display: flex; flex-direction: column; min-height: 500px; padding: clamp(30px, 4vw, 54px); background: rgba(255,255,255,.36); border: 1px solid var(--rule); transition: transform .25s ease, box-shadow .25s ease; }
.recommended-card:hover { transform: translateY(-6px); box-shadow: 10px 10px 0 var(--gold); }
.recommended-card-top { display: flex; justify-content: space-between; align-items: start; gap: 22px; color: var(--vermillion); font: 10px/1.5 monospace; letter-spacing: .08em; }
.recommended-card-top small { max-width: 220px; color: var(--muted); font: 10px/1.5 monospace; letter-spacing: .02em; text-align: right; }
.recommended-card-top small b { color: var(--ink); font-weight: 600; }
.recommended-card h3 { margin: 52px 0 18px; font: 500 clamp(28px, 3.3vw, 44px)/1.22 "Songti SC", STSong, serif; }
.recommended-card > p { max-width: 650px; margin: 0; color: #4e5964; font-size: 14px; line-height: 1.9; }
.review-note { margin: 28px 0 26px; padding: 20px 22px; border-left: 2px solid var(--vermillion); background: rgba(169,74,63,.07); }
.review-note span { display: block; margin-bottom: 9px; color: var(--vermillion); font: 10px monospace; letter-spacing: .12em; }
.review-note strong { display: block; font: 500 14px/1.75 "Songti SC", STSong, serif; }
.recommended-card .skill-tags { margin: 0 0 30px; }
.recommended-card .skill-tags span { border-color: var(--rule); }
.recommended-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--rule); }
.recommended-actions .button { min-height: 44px; padding: 0 17px; font-size: 12px; }
.report-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid currentColor; color: var(--vermillion); font-size: 13px; }

.starlab { border-bottom: 1px solid var(--rule); }
.lab-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 7vw; align-items: center; }
.poster-card { background: var(--navy); padding: 18px; box-shadow: 18px 18px 0 var(--gold); }
.poster-card img { width: 100%; max-height: 660px; object-fit: cover; object-position: top; }
.poster-card div { padding: 20px 5px 4px; color: var(--paper); }
.poster-card span, .poster-card strong { display: block; }
.poster-card span { color: var(--gold-light); font: 9px monospace; margin-bottom: 8px; }
.poster-card strong { font: 500 17px/1.4 "Songti SC", STSong, serif; }
.lab-content .lead { max-width: 650px; margin: 0 0 42px; font: 500 22px/1.75 "Songti SC", STSong, serif; }
.episode-list { margin-bottom: 38px; border-top: 1px solid var(--ink); }
.episode-list div { display: grid; grid-template-columns: 62px 1fr auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.episode-list span { color: var(--vermillion); font: 10px monospace; }
.episode-list strong { font-size: 14px; font-weight: 500; }
.episode-list small { color: var(--muted); font-size: 10px; }
.starlab-intro { max-width: 800px; margin: -32px 0 48px auto; color: var(--muted); font: 500 19px/1.8 "Songti SC", STSong, serif; }
.live-poster-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.live-poster-card { display: flex; flex-direction: column; background: var(--navy); color: var(--paper); border: 1px solid var(--ink); transition: transform .25s ease, box-shadow .25s ease; }
.live-poster-card:hover { transform: translateY(-7px); box-shadow: 9px 9px 0 var(--gold); }
.live-poster-card img { width: 100%; aspect-ratio: 3 / 4.35; object-fit: cover; object-position: top; }
.live-poster-card > a { display: block; color: inherit; overflow: hidden; }
.live-poster-card > a img { display: block; transition: transform .3s ease; }
.live-poster-card > a:hover img { transform: scale(1.02); }
.live-poster-card div { padding: 22px 20px 24px; }
.live-poster-card span { display: block; color: var(--gold-light); font: 9px monospace; letter-spacing: .1em; }
.live-poster-card h3 { margin: 12px 0 10px; font: 500 21px/1.35 "Songti SC", STSong, serif; }
.live-poster-card p { margin: 0; color: rgba(243,238,227,.58); font-size: 12px; line-height: 1.7; }
.starlab-action { margin-top: 36px; }

.content-section { background: #e9e2d5; }
.content-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 9vw; align-items: center; }
.content-image { position: relative; max-width: 430px; }
.content-image:before { content:""; position:absolute; inset: 18px -18px -18px 18px; background: var(--vermillion); }
.content-image img { position: relative; z-index: 1; width: 100%; }
.content-copy h2 { max-width: 760px; }
.content-copy > p { max-width: 670px; color: var(--muted); font-size: 15px; line-height: 1.9; margin: 28px 0 44px; }
.tutorial-list { border-top: 1px solid var(--ink); }
.tutorial-list a { display: grid; grid-template-columns: 60px 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--rule); transition: padding .2s ease; }
.tutorial-list a:hover { padding-left: 8px; }
.tutorial-list span { color: var(--vermillion); font: 10px monospace; }
.tutorial-list strong { font-size: 14px; font-weight: 500; }

.channels { background: var(--paper); }
.channel-heading { grid-template-columns: .42fr 1.2fr; }
.channel-list { border-top: 1px solid var(--ink); }
.channel-list a { display: grid; grid-template-columns: 50px .7fr 1fr 1.2fr 22px; gap: 24px; align-items: center; min-height: 92px; border-bottom: 1px solid var(--rule); transition: background .2s ease, padding .2s ease; }
.channel-list a:hover { background: var(--gold); padding: 0 18px; }
.channel-list span { color: var(--vermillion); font: 10px monospace; }
.channel-list strong { font: 500 25px "Songti SC", STSong, serif; }
.channel-list em { font-style: normal; font-size: 13px; }
.channel-list small { color: var(--muted); font-size: 11px; }

.future { background: var(--vermillion); color: var(--paper); }
.future-inner { padding-top: 110px; padding-bottom: 110px; }
.future .section-kicker { color: var(--gold-light); }
.future-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; }
.future-copy > p { color: rgba(243,238,227,.72); font-size: 15px; line-height: 1.9; margin-top: 0; }
.roadmap { margin: 38px 0; border-top: 1px solid rgba(243,238,227,.4); }
.roadmap div { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 21px 0; border-bottom: 1px solid rgba(243,238,227,.25); opacity: .55; }
.roadmap div.active { opacity: 1; }
.roadmap span { color: var(--gold-light); font: 9px monospace; }
.roadmap strong { font-size: 13px; font-weight: 500; }
.boundary { padding: 18px 20px; border: 1px solid rgba(243,238,227,.3); font-size: 11px !important; }

footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 50px; align-items: start; padding: 72px clamp(24px, 5.8vw, 84px) 34px; background: #050e18; color: var(--paper); }
.footer-brand { display: grid; grid-template-columns: 28px 1fr; align-items: center; }
.footer-brand > span { color: var(--gold); }
.footer-brand strong { font: 500 21px "Songti SC", STSong, serif; }
.footer-brand small { grid-column: 2; margin-top: 7px; color: rgba(243,238,227,.35); font: 9px monospace; letter-spacing: .15em; }
footer > p { margin: 0; color: rgba(243,238,227,.46); font-size: 12px; line-height: 1.8; }
.footer-links { display: flex; gap: 26px; font-size: 11px; }
.copyright { grid-column: 1 / -1; border-top: 1px solid rgba(243,238,227,.12); padding-top: 24px; margin-top: 40px; color: rgba(243,238,227,.25); font: 9px monospace; }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 160px; }
  .skills-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 160px; }
  .hero-index { max-width: 680px; }
  .skills-hero-index { max-width: 680px; }
  .works-grid { grid-template-columns: 1fr 1fr; }
  .recommended-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .resource-card:last-child { border-bottom: 0; }
  .audio-card { grid-column: 1 / -1; min-height: 340px; }
  .book-card { min-height: 390px; }
}

@media (max-width: 760px) {
  .site-header { height: 70px; padding: 0 20px; }
  .brand { font-size: 14px; }
  .header-action { font-size: 11px; }
  .hero { padding: 132px 22px 62px; gap: 72px; }
  .skills-hero { padding: 132px 22px 62px; gap: 72px; }
  .hero h1 { font-size: clamp(41px, 12vw, 58px); }
  .skills-hero h1 { font-size: clamp(41px, 12vw, 58px); }
  .hero-intro { font-size: 15px; }
  .eyebrow { flex-direction: column; gap: 8px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .coordinate-bar { justify-content: flex-start; gap: 14px; }
  .section { padding: 82px 22px; }
  .section-heading, .section-heading.light, .channel-heading { grid-template-columns: 1fr; margin-bottom: 48px; }
  .section-heading h2, .section-heading > p { grid-column: 1; }
  .recommended-skills .section-heading > div:last-child { grid-column: 1; }
  .recommended-grid { grid-template-columns: 1fr; }
  .about-grid, .future-grid, .content-grid, .lab-grid, .skills-hub-inner, .skills-next-inner { grid-template-columns: 1fr; gap: 58px; }
  .live-featured, .live-brief, .live-method-grid { grid-template-columns: 1fr; gap: 48px; }
  .live-skill-install { grid-template-columns: 1fr; padding-top: 0; padding-bottom: 0; }
  .live-skill-install-action { border-top: 1px solid rgba(240,203,120,.3); border-left: 0; }
  .live-brief { padding-bottom: 56px; }
  .live-resources { padding-top: 56px; }
  .live-card { grid-template-columns: 52px 1fr; gap: 16px; }
  .live-card .button, .live-card .report-link { grid-column: 2; justify-self: start; }
  .live-gallery-copy > p:not(.meta) { min-height: 0; }
  .works-grid { grid-template-columns: 1fr; }
  .audio-card { grid-column: auto; }
  .book-card { grid-template-columns: .8fr 1fr; }
  .skill-feature { grid-template-columns: 1fr; }
  .skill-main { border-right: 0; border-bottom: 1px solid rgba(240,203,120,.35); }
  .skill-candidates { grid-template-columns: 1fr; }
  .skill-candidates article { border-right: 0; border-bottom: 1px solid rgba(243,238,227,.18); }
  .skill-showcase { grid-template-columns: 1fr; }
  .skill-showcase-card { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(240,203,120,.3); }
  .skill-showcase-card:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(240,203,120,.3); }
  .skill-showcase-card:last-child:nth-child(odd) { grid-column: auto; }
  .skill-showcase-card:last-child { border-bottom: 0; }
  .poster-card { max-width: 430px; }
  .content-image { max-width: 340px; }
  .channel-list a { grid-template-columns: 34px 1fr auto; gap: 12px; padding: 20px 0; }
  .channel-list a strong { font-size: 20px; }
  .channel-list a em, .channel-list a small { grid-column: 2; }
  .channel-list a > span:last-child { grid-column: 3; grid-row: 1; }
  .episode-list div { grid-template-columns: 55px 1fr; }
  .episode-list small { grid-column: 2; }
  .starlab-intro { margin: -18px 0 38px; font-size: 17px; }
  .skills-hub-index div { grid-template-columns: 36px 1fr; }
  .skills-hub-index small { grid-column: 2; }
  footer { grid-template-columns: 1fr; }
  .copyright { grid-column: 1; }
}

@media (max-width: 480px) {
  .header-action { display: none; }
  .book-card { grid-template-columns: 1fr; }
  .book-cover { min-height: 330px; }
  .book-info { min-height: 310px; }
  .flow-row { grid-template-columns: 34px 1fr; }
  .flow-row small { grid-column: 2; }
  .tutorial-list a { grid-template-columns: 48px 1fr 14px; }
  .live-poster-grid { grid-template-columns: 1fr; }
  .live-gallery { grid-template-columns: 1fr; }
}

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