:root {
  --ink: #182436;
  --ink-soft: #314056;
  --muted: #667487;
  --line: #d9e1e9;
  --line-dark: #bac6d2;
  --paper: #f6f8fa;
  --white: #fff;
  --blue: #789bbb;
  --blue-dark: #537798;
  --blue-soft: #eaf1f7;
  --cyan: #7fcbd0;
  --cyan-soft: #edf9f9;
  --pink: #d69cad;
  --pink-dark: #a46879;
  --pink-soft: #f8edf1;
  --yellow: #d8c26d;
  --yellow-soft: #fbf8e8;
  --radius: 18px;
  --shadow: 0 22px 60px rgba(28, 45, 65, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; font-size: 16px; }
a { color: inherit; }
button, summary { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 3px; }
.topbar { position: sticky; top: 0; z-index: 30; height: 76px; display: flex; align-items: center; gap: 40px; padding: 0 4vw; background: rgba(246,248,250,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 195px; text-decoration: none; }
.brand-mark { width: 29px; height: 29px; border: 1px solid var(--ink); border-radius: 8px; box-shadow: inset 0 0 0 7px var(--blue-soft); }
.brand b, .brand small { display: block; }
.brand b { font-size: 1rem; letter-spacing: .08em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: .75rem; letter-spacing: .1em; }
.desktop-nav { display: flex; align-self: stretch; align-items: center; gap: 24px; }
.desktop-nav a { position: relative; display: grid; place-items: center; height: 100%; color: var(--muted); text-decoration: none; font-size: .875rem; white-space: nowrap; transition: color .26s ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--ink); }
.desktop-nav a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--ink); transform: scaleX(0); transform-origin: center; transition: transform .28s ease; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { transform: scaleX(1); }
.system-status { margin-left: auto; color: var(--muted); font-size: .75rem; letter-spacing: .1em; white-space: nowrap; }
.system-status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--blue); }
.menu-button, .mobile-nav { display: none; }
main { max-width: 1500px; margin: 0 auto; padding: 0 4vw 90px; animation: page-enter .28s ease-out both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow, .file-tag { margin: 0; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .16em; }
.nav-sub { display: none; }
.page-main { min-height: calc(100vh - 148px); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 34px; color: var(--muted); font-size: .76rem; letter-spacing: .08em; }
.breadcrumbs a { text-underline-offset: 4px; }
.breadcrumbs a + a::before, .breadcrumbs span::before { margin-right: 10px; color: #aeb8c2; content: "/"; }
.page-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 8vw; align-items: end; padding: 82px 0 66px; border-bottom: 1px solid var(--line); }
.page-intro .eyebrow { margin-bottom: 16px; }
.page-intro h1 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: clamp(3.2rem, 6vw, 5.7rem); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.page-intro > p { max-width: 620px; margin: 0; color: var(--muted); line-height: 1.85; }
.subnav { display: flex; flex-wrap: wrap; gap: 9px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.subnav a { padding: 9px 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: .78rem; transition: color .24s ease, background-color .24s ease, border-color .24s ease, transform .2s ease; }
.subnav a:hover, .subnav a.active { color: white; background: var(--ink); border-color: var(--ink); }
.subnav a:active { transform: scale(.97); }
.page-section { padding-top: 76px; border-top: 0; }

.hero { min-height: 840px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); gap: 5vw; align-items: center; border-bottom: 1px solid var(--line); scroll-margin-top: 76px; }
.hero-copy .eyebrow { margin-bottom: 24px; }
.hero h1 { max-width: 760px; margin: 0; font-family: "Songti SC", STSong, serif; font-size: clamp(3.5rem, 4.6vw, 5.4rem); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.lead { max-width: 690px; margin: 38px 0 0; color: #465568; font-size: 1.08rem; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 42px; }
.primary-button { padding: 14px 20px; color: white; background: var(--ink); border-radius: 9px; text-decoration: none; font-size: .9rem; }
.text-link { color: var(--muted); font-size: .9rem; text-underline-offset: 5px; }
.duo-visual { width: min(100%, 720px); margin: 48px 0 48px auto; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.duo-visual img { display: block; width: 100%; height: auto; border-radius: 12px; }
.duo-visual figcaption { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 15px 5px 2px; color: var(--muted); font-size: .72rem; letter-spacing: .12em; }
.duo-visual figcaption b { color: var(--ink-soft); font-weight: 600; }

.world-brief { padding: 90px 0 36px; scroll-margin-top: 90px; }
.world-brief > .eyebrow { margin-bottom: 25px; }
.world-summary { padding: 36px 0 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.world-summary p { max-width: 900px; margin: 0; color: var(--ink-soft); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.95; }
.chapter-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 72px 0 110px; }
.chapter-preview a { position: relative; min-height: 275px; padding: 30px; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.chapter-preview a:hover { transform: translateY(-4px); border-color: var(--line-dark); box-shadow: var(--shadow); }
.chapter-preview a > span { float: right; color: #a5afbb; font-family: Georgia, serif; font-size: 2rem; }
.chapter-preview small { color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.chapter-preview h2 { margin: 55px 0 12px; font-family: "Songti SC", STSong, serif; font-size: 1.7rem; font-weight: 500; }
.chapter-preview p { margin: 0; color: var(--muted); line-height: 1.7; }
.chapter-preview b { position: absolute; bottom: 28px; left: 30px; font-size: .72rem; letter-spacing: .13em; text-decoration: underline; text-underline-offset: 5px; }
.home-directory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 64px 0 40px; }
.home-directory a { position: relative; min-height: 220px; padding: 25px; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.home-directory a:hover { transform: translateY(-3px); border-color: var(--line-dark); }
.home-directory small { color: var(--muted); font-size: .7rem; letter-spacing: .14em; }
.home-directory h2 { margin: 52px 0 10px; font-family: "Songti SC", STSong, serif; font-size: 1.45rem; font-weight: 500; }
.home-directory p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.home-directory b { position: absolute; bottom: 24px; left: 25px; font-size: .7rem; letter-spacing: .12em; text-decoration: underline; text-underline-offset: 4px; }
.home-character-feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 50px; align-items: end; margin: 68px 0 0; padding: 54px 48px; overflow: hidden; color: inherit; background: linear-gradient(120deg, var(--pink-soft), #fff 46%, var(--blue-soft)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); text-decoration: none; }
.home-character-feature .eyebrow { margin-bottom: 25px; }
.home-character-feature h2 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: clamp(2.35rem, 4vw, 4rem); font-weight: 500; line-height: 1.06; letter-spacing: -.035em; }
.home-character-feature p:not(.eyebrow) { max-width: 690px; margin: 25px 0 0; color: var(--muted); line-height: 1.8; }
.home-character-feature > span { padding-bottom: 4px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-decoration: underline; text-underline-offset: 6px; }
.home-primary-links { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 68px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.home-primary-links a { min-height: 230px; padding: 28px 30px 30px 0; color: inherit; text-decoration: none; }
.home-primary-links a + a { padding-left: 30px; border-left: 1px solid var(--line); }
.home-primary-links small { color: var(--muted); font-size: .7rem; letter-spacing: .14em; }
.home-primary-links h2 { margin: 60px 0 10px; font-family: "Songti SC", STSong, serif; font-size: 1.8rem; font-weight: 500; }
.home-primary-links p { max-width: 330px; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.home-primary-links a:hover h2 { color: var(--blue-dark); }
.home-deep-links { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 34px 0 60px; }
.home-deep-links a { display: grid; grid-template-columns: 130px 1fr auto; gap: 25px; align-items: center; padding: 19px 0; color: inherit; border-bottom: 1px solid var(--line); text-decoration: none; }
.home-deep-links span { color: var(--muted); font-size: .7rem; letter-spacing: .13em; }
.home-deep-links b { font-family: "Songti SC", STSong, serif; font-size: 1.05rem; font-weight: 500; }
.home-deep-links small { color: var(--muted); font-size: .72rem; }
.home-deep-links a:hover b { color: var(--blue-dark); }
.character-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 76px 0 28px; }
.character-index-card { min-height: 520px; display: flex; flex-direction: column; justify-content: space-between; padding: 34px; overflow: hidden; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; }
.character-index-card.miyin-entry { background: linear-gradient(155deg, #fff 0%, var(--pink-soft) 68%, var(--cyan-soft) 100%); }
.character-index-card.yanxi-entry { background: linear-gradient(155deg, #fff 0%, var(--blue-soft) 68%, var(--yellow-soft) 100%); }
.character-index-card.duo-entry { color: white; background: var(--ink); border-color: var(--ink); }
.character-index-card strong { margin-top: auto; font-family: "Songti SC", STSong, serif; font-size: clamp(3rem, 5vw, 5rem); font-weight: 500; line-height: .95; }
.character-index-card h2 { margin: 10px 0 18px; font-size: .78rem; font-weight: 600; letter-spacing: .18em; }
.character-index-card p { margin: 0 0 44px; color: var(--muted); line-height: 1.75; }
.duo-entry p { color: #b8c3cf; }
.character-index-card b { font-size: .72rem; letter-spacing: .12em; text-decoration: underline; text-underline-offset: 5px; }
.characters-intro { position: relative; }
.characters-intro::after { position: absolute; right: 0; bottom: -1px; width: 32%; height: 2px; content: ""; background: linear-gradient(90deg, var(--pink), var(--cyan), var(--blue), var(--yellow)); opacity: .7; }
.character-anchor-nav { position: sticky; top: 76px; z-index: 12; background: rgba(246,248,250,.96); backdrop-filter: blur(14px); }
.characters-flow { padding: 78px 0 24px; }
.characters-flow .character-profile { scroll-margin-top: 145px; }
.characters-flow .character-profile + .character-profile { margin-top: 46px; }
.characters-flow .duo-section { margin-top: 110px; scroll-margin-top: 125px; }

.section { padding: 125px 0; border-top: 1px solid var(--line); scroll-margin-top: 74px; }
.section-head { display: grid; grid-template-columns: 1.05fr .95fr; gap: 8vw; align-items: end; margin-bottom: 64px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: clamp(2.8rem, 5vw, 4.9rem); font-weight: 500; letter-spacing: -.04em; }
.section-head > p { max-width: 620px; margin: 0; color: var(--muted); line-height: 1.8; }

.character-profile { display: grid; grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr); min-height: 750px; margin-bottom: 36px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 22px; }
.character-profile:nth-of-type(3) { grid-template-columns: minmax(0, 1.28fr) minmax(340px, .72fr); }
.character-profile:nth-of-type(3) .profile-art { order: 2; }
.profile-art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 750px; padding: 42px; overflow: hidden; }
.mion-profile .profile-art { color: var(--pink-dark); background: linear-gradient(155deg, #fff 0%, var(--pink-soft) 60%, var(--cyan-soft) 100%); }
.yanqi-profile .profile-art { color: var(--blue-dark); background: linear-gradient(155deg, #fff 0%, var(--blue-soft) 60%, var(--yellow-soft) 100%); }
.profile-art::before { position: absolute; inset: 13% 13% 0; content: ""; border: 1px solid currentColor; border-bottom: 0; border-radius: 48% 48% 0 0; opacity: .18; }
.profile-art::after { position: absolute; top: 20%; right: -20%; width: 95%; height: 1px; content: ""; background: currentColor; opacity: .25; transform: rotate(-35deg); }
.profile-art > span { position: absolute; top: 32px; left: 36px; font-size: .7rem; letter-spacing: .14em; }
.profile-art strong { position: relative; font-family: "Songti SC", STSong, serif; font-size: clamp(4rem, 7vw, 7rem); font-weight: 500; line-height: .9; }
.profile-art small { position: relative; margin-top: 12px; font-size: .8rem; letter-spacing: .18em; }
.profile-art p { position: relative; margin: 80px 0 0; font-size: .7rem; letter-spacing: .13em; }
.profile-content { padding: 46px 50px; }
.profile-title { display: flex; justify-content: space-between; align-items: flex-start; }
.profile-title h3 { margin: 7px 0 0; font-family: "Songti SC", STSong, serif; font-size: 3rem; font-weight: 500; }
.profile-title h3 small { margin-left: 8px; color: var(--muted); font-family: Inter, sans-serif; font-size: .75rem; letter-spacing: .15em; }
.profile-title > span { padding: 8px 12px; color: var(--muted); background: var(--paper); border-radius: 999px; font-size: .8rem; }
.personality-lead { max-width: 720px; margin: 30px 0; font-family: "Songti SC", STSong, serif; font-size: 1.45rem; line-height: 1.7; }
.identity-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line); }
.identity-grid div { padding: 18px 10px 18px 0; border-bottom: 1px solid var(--line); }
.identity-grid div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
.identity-grid dt { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .13em; }
.identity-grid dd { margin: 7px 0 0; font-size: .9rem; }
.profile-columns { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; padding: 30px 0; }
.profile-columns h4, .boundary-details h4 { margin: 0 0 12px; color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.profile-columns p { margin: 0; color: #465568; line-height: 1.82; }
.chips { display: flex; flex-wrap: wrap; gap: 10px 9px; min-width: 0; }
.chips span { display: inline-flex; max-width: 100%; padding: 8px 11px; color: #526174; background: var(--paper); border-radius: 6px; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.ability-feature { display: grid; grid-template-columns: .75fr 1.25fr; gap: 28px; padding: 26px; border-radius: 12px; }
.mion-profile .ability-feature { background: linear-gradient(135deg, var(--pink-soft), var(--cyan-soft)); }.yanqi-profile .ability-feature { background: linear-gradient(135deg, var(--blue-soft), var(--yellow-soft)); }
.ability-feature h4 { margin: 5px 0; font-family: "Songti SC", STSong, serif; font-size: 2rem; font-weight: 500; }
.ability-feature span { color: var(--muted); font-size: .78rem; }
.ability-feature > p { margin: 0; align-self: end; line-height: 1.78; }
.boundary-details { margin-top: 16px; border-top: 1px solid var(--line); }
.boundary-details summary { padding: 20px 0 6px; color: var(--muted); cursor: pointer; font-size: .88rem; font-weight: 600; }
.boundary-details > div { padding: 24px 0 5px; }
.boundary-details ul { margin: 0 0 24px; padding-left: 20px; color: #465568; line-height: 1.82; }
.boundary-details p { margin: 0; color: #465568; line-height: 1.82; }
.profile-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 24px; }
.gallery-jump, .story-jump { color: var(--muted); font-size: .82rem; text-underline-offset: 5px; }

.duo-section { margin: 0 -4vw; padding-right: 4vw; padding-left: 4vw; color: white; background: var(--ink); border-top: 0; }
.light-head .eyebrow, .light-head > p { color: #b8c3cf; }
.relationship-statement { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 24px 0; border-top: 1px solid #536175; border-bottom: 1px solid #536175; }
.relationship-statement span { color: #c7d0da; }.relationship-statement i { height: 1px; background: #536175; }.relationship-statement strong { font-weight: 500; }
.duo-values { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 55px; }
.duo-values article { min-height: 220px; padding: 24px; border: 1px solid #3e4d60; border-left: 0; }
.duo-values article:first-child { border-left: 1px solid #3e4d60; }
.duo-values span { color: #91a0b1; font-family: Georgia, serif; font-size: 1.4rem; }
.duo-values h3 { margin: 44px 0 10px; font-family: "Songti SC", STSong, serif; font-size: 1.3rem; font-weight: 500; }
.duo-values p { margin: 0; color: #b8c3cf; line-height: 1.72; }
.complement-grid { display: grid; grid-template-columns: 1fr .48fr 1fr; gap: 18px; margin-top: 70px; }
.complement-grid article { min-height: 245px; padding: 30px; color: var(--ink); border-radius: 14px; }
.mion-complement { background: var(--pink-soft); }.yanqi-complement { background: var(--blue-soft); }
.complement-grid article h3 { margin: 55px 0 12px; font-family: "Songti SC", STSong, serif; font-size: 1.6rem; font-weight: 500; }
.complement-grid article > p:last-child { margin: 0; color: var(--muted); line-height: 1.72; }
.complement-center { display: grid; place-content: center; text-align: center; }
.complement-center span { color: #91a0b1; font-size: .75rem; letter-spacing: .13em; }.complement-center b { margin-top: 18px; font-family: "Songti SC", STSong, serif; font-size: 1.18rem; font-weight: 500; line-height: 1.7; }
.duo-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); gap: 18px; align-items: start; }
.duo-artwork { margin: 0; padding: 18px; color: var(--ink); background: var(--white); border-radius: 18px; }
.duo-artwork img { display: block; width: 100%; height: auto; }
.duo-artwork figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 14px 4px 0; color: var(--muted); font-size: .72rem; letter-spacing: .12em; }
.duo-artwork figcaption b { color: var(--ink-soft); font-weight: 600; }
.duo-copy-stack { display: grid; gap: 18px; }
.duo-copy-stack > section { padding: 34px; border-radius: 16px; }
.dynamic-panel { color: var(--ink); background: linear-gradient(145deg, var(--pink-soft), #fff 48%, var(--cyan-soft)); }
.dynamic-panel .eyebrow { color: #7d7180; }
.dynamic-panel h3 { max-width: 580px; margin: 34px 0 22px; font-family: "Songti SC", STSong, serif; font-size: clamp(2rem, 3.2vw, 3.1rem); font-weight: 500; line-height: 1.16; }
.dynamic-panel > p:not(.eyebrow) { max-width: 680px; margin: 0; color: #4f5d6f; font-size: 1rem; line-height: 1.9; }
.dynamic-panel > div { display: flex; align-items: center; gap: 18px; margin-top: 34px; color: var(--muted); font-size: .75rem; letter-spacing: .12em; }
.dynamic-panel > div i { width: 70px; height: 1px; background: var(--line-dark); }
.synergy-panel { background: linear-gradient(145deg, #243145, #26384d); border: 1px solid #425166; }
.synergy-panel .eyebrow { color: #9baabc; }
.synergy-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 34px; }
.synergy-pair > i { width: 46px; height: 1px; background: #5e6d80; }
.synergy-pair article > span { color: #9baabc; font-size: .75rem; letter-spacing: .12em; }
.synergy-pair h3 { margin: 18px 0 12px; font-family: "Songti SC", STSong, serif; font-size: 1.45rem; font-weight: 500; }
.synergy-pair p { margin: 0; color: #b8c3cf; line-height: 1.75; }
.related-stories { display: grid; grid-template-columns: 190px 1fr auto; gap: 24px; align-items: center; margin-top: 18px; padding: 22px 26px; border-radius: 11px; text-decoration: none; }
.dark-related { border: 1px solid #425166; }
.related-stories span { color: #93a2b4; font-size: .72rem; letter-spacing: .13em; }
.related-stories b { font-size: .9rem; font-weight: 500; }
.related-stories small { color: #aeb9c5; text-decoration: underline; text-underline-offset: 4px; }
.duo-moment { width: min(260px, 45vw); margin: 80px 0 0 auto; color: var(--ink); text-align: center; }
.duo-moment img { display: block; width: 100%; height: auto; }
.duo-moment figcaption { margin-top: 12px; color: #99a5b2; font-size: .7rem; letter-spacing: .14em; }

.stories-section { min-height: 680px; }
.stories-section .section-head { margin-bottom: 34px; }
.story-filters { display: flex; gap: 26px; margin-bottom: 18px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.story-filter { position: relative; flex: none; padding: 11px 1px 13px; color: var(--muted); background: transparent; border: 0; cursor: pointer; font-size: .82rem; transition: color .24s ease, transform .2s ease; }
.story-filter::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; content: ""; background: var(--ink); transform: scaleX(0); transform-origin: center; transition: transform .24s ease; }
.story-filter:hover { color: var(--ink); }
.story-filter:active { transform: translateY(1px); }
.story-filter.active { color: var(--ink); }
.story-filter.active::after { transform: scaleX(1); }
.story-list { border-top: 1px solid transparent; }
.story-entry { position: relative; width: 100%; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 46px 7px; color: inherit; border-bottom: 1px solid var(--line); text-decoration: none; transition: transform .3s ease, border-color .3s ease; }
.story-entry:hover { border-color: var(--line-dark); transform: translateX(6px); }
.story-entry:active { transform: translateX(3px); }
.story-index { align-self: start; padding-top: 7px; color: #a5afba; font-family: Georgia, "Times New Roman", serif; font-size: .76rem; letter-spacing: .14em; }
.story-entry-copy { display: block; min-width: 0; }
.story-title { display: block; font-family: "Songti SC", STSong, serif; font-size: clamp(1.8rem, 2.4vw, 2.35rem); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; transition: color .3s ease; }
.story-entry:hover .story-title { color: var(--blue-dark); }
.story-metadata { display: block; margin-top: 12px; color: #8794a2; font-size: .77rem; font-style: italic; letter-spacing: .045em; }
.story-excerpt { display: block; max-width: 780px; margin-top: 20px; color: var(--muted); font-family: "Songti SC", STSong, serif; font-size: 1rem; line-height: 1.85; }
.story-read { align-self: end; padding-bottom: 3px; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.story-read i { display: inline-block; margin-left: 5px; font-style: normal; transition: transform .3s ease; }
.story-entry:hover .story-read i { transform: translateX(4px); }
.stories-empty { min-height: 340px; display: grid; place-content: center; padding: 45px 24px; text-align: center; background: linear-gradient(145deg, #fff, #eef3f7); border-bottom: 1px solid var(--line); }
.stories-empty span { color: #9ba7b4; font-size: .72rem; letter-spacing: .14em; }
.stories-empty h3 { margin: 20px 0 10px; font-family: "Songti SC", STSong, serif; font-size: 1.8rem; font-weight: 500; }
.stories-empty p { max-width: 520px; margin: 0 auto; color: var(--muted); line-height: 1.75; }
.story-archive-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 28px; align-items: end; }
.story-table { min-width: 0; }
.story-easter-egg { margin: 0 0 10px; text-align: center; }
.story-easter-egg img { display: block; width: 100%; height: auto; }
.story-easter-egg figcaption { margin-top: 10px; color: #97a3b0; font-size: .68rem; letter-spacing: .13em; }
.story-page-main { background: var(--white); }
.story-reading-page { width: min(100%, 720px); margin: 0 auto; padding: 100px 0 110px; }
.story-title-block { padding-bottom: 58px; border-bottom: 1px solid var(--line); }
.story-reading-meta { margin: 0 0 20px; color: var(--muted); font-size: .76rem; font-style: italic; letter-spacing: .08em; }
.story-title-block h1 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: clamp(2.65rem, 4.4vw, 3.8rem); font-weight: 500; line-height: 1.14; letter-spacing: -.035em; }
.story-source-note { margin: 22px 0 0; color: #8b97a4; font-family: "Songti SC", STSong, serif; font-size: .88rem; letter-spacing: .08em; }
.story-prose { padding: 70px 0 76px; font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif; font-size: 1.08rem; line-height: 2; }
.story-prose p { margin: 0 0 1.15em; }
.story-prose p:last-child { margin-bottom: 0; }
.story-prose h2 { margin: 3.2em 0 1.4em; font-size: 1.55rem; font-weight: 600; letter-spacing: .08em; }
.story-prose blockquote { margin: 2.2em 0 2.5em; padding: 1.7em 1.9em; color: var(--ink-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; font-size: 1.17rem; font-style: italic; line-height: 2.1; }
.story-prose blockquote p { margin: 0; }
.story-reading-page--chronicle .story-title-block { text-align: center; }
.story-reading-page--chronicle .story-prose > p:first-child { font-size: 1.2rem; }
.story-reading-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.story-reading-nav a { color: var(--muted); font-size: .82rem; line-height: 1.6; text-underline-offset: 5px; }
.story-back-link { order: 2; }
.story-prev-link { order: 1; }
.story-next-link { order: 3; margin-left: auto; }

.org-rule { display: grid; grid-template-columns: 130px 1fr; gap: 30px; padding: 25px 28px; background: var(--blue-soft); border-radius: 12px; }
.org-rule b { font-size: .9rem; }.org-rule p { margin: 0; color: #4d5d70; line-height: 1.75; }
.staff-directory { margin-top: 48px; }
.staff-cluster { display: grid; grid-template-columns: 225px 1fr; gap: 38px; padding: 28px 0; border-top: 1px solid var(--line); }
.staff-cluster > header { position: relative; padding-right: 35px; }
.staff-cluster > header h3 { margin: 8px 0 12px; font-family: "Songti SC", STSong, serif; font-size: 1.4rem; font-weight: 500; }
.staff-cluster > header > p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.staff-cluster > header > span { position: absolute; top: 0; right: 0; color: #b1bac4; font-family: Georgia, serif; font-size: 1.5rem; }
.staff-list { border-top: 1px solid var(--line); }
.staff-entry { border-bottom: 1px solid var(--line); }
.staff-entry summary { display: grid; grid-template-columns: minmax(110px, .65fr) minmax(150px, 1fr) minmax(120px, .72fr) 76px 18px; gap: 18px; align-items: center; padding: 15px 0; cursor: pointer; list-style: none; }
.staff-entry summary::-webkit-details-marker { display: none; }
.staff-entry summary strong { font-family: "Songti SC", STSong, serif; font-size: 1.08rem; font-weight: 500; }
.staff-entry summary span { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.staff-entry summary small { color: var(--muted); font-size: .7rem; letter-spacing: .06em; }
.staff-entry summary i { position: relative; width: 18px; height: 18px; }
.staff-entry summary i::before, .staff-entry summary i::after { position: absolute; top: 8px; left: 3px; width: 12px; height: 1px; content: ""; background: var(--muted); transition: transform .18s ease; }
.staff-entry summary i::after { transform: rotate(90deg); }
.staff-entry[open] summary i::after { transform: rotate(0); }
.staff-entry summary:hover strong, .staff-entry summary:focus-visible strong { color: var(--blue-dark); }
.staff-entry summary:focus-visible { outline: 1px solid var(--blue); outline-offset: 5px; }
.leader-entry summary strong { color: var(--blue-dark); }
.staff-entry-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 38px; padding: 5px 0 24px; }
.staff-entry-detail h4 { margin: 0 0 8px; color: var(--muted); font-size: .7rem; letter-spacing: .12em; }
.staff-entry-detail p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.72; }
.staff-entry-detail > p { grid-column: 1 / -1; padding-top: 16px; border-top: 1px dashed var(--line); font-size: .76rem; }

.principle-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; padding: 30px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.principle-copy p { margin: 0; color: var(--muted); line-height: 1.85; }
.classification-wrap { margin-top: 82px; }
.subhead .eyebrow { margin-bottom: 9px; }.subhead h3 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: 2.1rem; font-weight: 500; }
.class-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 46px; margin-top: 30px; }
.class-grid article { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto 1fr; column-gap: 17px; padding: 23px 0; border-top: 1px solid var(--line); }
.class-symbol { grid-column: 1; grid-row: 1 / 4; width: 34px; height: 34px; display: grid; place-items: center; margin-top: 2px; border: 1px solid #ced7df; border-radius: 50%; }
.class-symbol i { display: block; width: 13px; height: 13px; border: 1px solid var(--blue-dark); transform: rotate(45deg); }
.symbol-sense i, .symbol-space i { border-radius: 50%; transform: none; }
.symbol-energy i { width: 22px; height: 10px; border-width: 1px 0; transform: rotate(-24deg); }
.symbol-info i { width: 22px; height: 14px; border-width: 1px 0; transform: none; }
.symbol-state i { width: 9px; height: 22px; border-radius: 8px; transform: none; }
.symbol-relation i { width: 24px; height: 8px; border-width: 1px 0; transform: none; }
.class-grid article > span { grid-column: 2; color: #aab4bf; font-family: Georgia, serif; font-size: .72rem; letter-spacing: .08em; }
.class-grid h4 { grid-column: 2; margin: 4px 0 7px; font-size: .95rem; }.class-grid p { grid-column: 2; margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.7; }
.evaluation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 82px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.evaluation-grid > article { padding: 32px 0; }.evaluation-grid > article + article { margin-left: 44px; padding-left: 44px; border-left: 1px solid var(--line); }.evaluation-grid > article > p { min-height: 50px; color: var(--muted); line-height: 1.72; }
.scale { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 22px; }.scale span { display: inline-flex; align-items: center; color: var(--ink-soft); font-size: .78rem; white-space: nowrap; }.scale span + span::before { margin-right: 9px; color: #a7b2bd; content: "→"; }
.risk span { color: var(--ink-soft); }
.definition-button { margin-top: 20px; padding: 0; color: var(--muted); background: none; border: 0; font-size: .8rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.critical-notes { display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0; padding: 0 24px; overflow: hidden; background: var(--ink); border-radius: 10px; }.critical-notes p { margin: 0; padding: 22px 14px; color: white; text-align: center; }.critical-notes p + p { border-left: 1px solid #425267; }.critical-notes b { padding: 0 9px; color: #9ebbd6; font-size: 1.3rem; }
.development { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10vw; margin: 95px 0; padding: 50px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.development > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }.development > div:last-child p { margin: 0; color: var(--muted); line-height: 1.75; }
.ability-records { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.ability-records article { padding: 30px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }.mion-record { border-top: 4px solid var(--pink) !important; }.yanqi-record { border-top: 4px solid var(--blue) !important; }
.ability-records h3 { margin: 8px 0 24px; font-family: "Songti SC", STSong, serif; font-size: 2.1rem; font-weight: 500; }.ability-records dl { margin: 0; }.ability-records dl div { display: grid; grid-template-columns: 125px 1fr; padding: 12px 0; border-top: 1px solid var(--line); }.ability-records dt { color: var(--muted); font-size: .8rem; }.ability-records dd { margin: 0; font-size: .85rem; }
.boundary-callout { margin: 22px 0 0; padding: 18px; color: var(--muted); background: var(--paper); border-radius: 9px; font-size: .85rem; line-height: 1.68; }

.gallery-section { min-height: 700px; }
.gallery-schema { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 22px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.gallery-schema div { padding: 16px 18px; background: var(--white); }.gallery-schema div + div { border-left: 1px solid var(--line); }.gallery-schema span { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }.gallery-schema p { margin: 7px 0 0; color: var(--muted); font-size: .78rem; }
.gallery-empty { position: relative; min-height: 410px; display: grid; place-content: center; overflow: hidden; text-align: center; background: linear-gradient(145deg, #fff, #eef3f7); border: 1px solid var(--line); border-radius: 18px; }
.gallery-empty .eyebrow { margin-bottom: 14px; }.gallery-empty h3 { position: relative; margin: 0; font-family: "Songti SC", STSong, serif; font-size: 2rem; font-weight: 500; }.gallery-empty > p:last-child { position: relative; margin: 15px auto 0; color: var(--muted); }
.empty-frames { position: absolute; inset: 0; opacity: .48; }.empty-frames span { position: absolute; width: 190px; height: 245px; border: 1px solid var(--line-dark); border-radius: 10px; }.empty-frames span:nth-child(1) { top: 60px; left: 8%; transform: rotate(-6deg); }.empty-frames span:nth-child(2) { right: 10%; bottom: -40px; transform: rotate(8deg); }.empty-frames span:nth-child(3) { top: -80px; right: 34%; transform: rotate(-3deg); }

.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.archive-grid article { min-height: 260px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }.archive-grid h3 { margin: 38px 0 14px; font-family: "Songti SC", STSong, serif; font-size: 1.6rem; font-weight: 500; }.archive-grid article > p:last-child { margin: 0; color: var(--muted); line-height: 1.75; }
.reading-layout { max-width: 1060px; margin: 0 auto; padding: 40px 0 90px; }
.reading-section { display: grid; grid-template-columns: 230px 1fr; gap: 7vw; padding: 46px 0; border-bottom: 1px solid var(--line); }
.reading-section h2 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: 1.75rem; font-weight: 500; }
.reading-section p { margin: 0; color: var(--ink-soft); font-family: "Songti SC", STSong, serif; font-size: 1.15rem; line-height: 2; }
.world-editor { margin: 16px 0 80px; }
.editor-notes { margin-top: 25px; color: var(--muted); background: #eef2f5; border: 1px solid var(--line); border-radius: 12px; }.editor-notes summary { display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; align-items: center; padding: 20px 24px; cursor: pointer; list-style: none; }.editor-notes summary::-webkit-details-marker { display: none; }.editor-notes summary span { font-size: .72rem; letter-spacing: .14em; }.editor-notes summary b { color: #556274; font-size: .9rem; }.editor-notes summary small { font-size: .75rem; }
.editor-notes-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; padding: 28px 24px 30px; border-top: 1px solid var(--line); }.editor-notes-body h3 { margin: 0 0 12px; color: #4b596a; font-size: .85rem; }.editor-notes-body p, .editor-notes-body li { color: var(--muted); font-size: .85rem; line-height: 1.72; }.editor-notes-body p { margin: 0; }.editor-notes-body ul { margin: 0; padding-left: 19px; }

footer { display: flex; justify-content: space-between; padding: 30px 4vw; color: var(--muted); background: #edf1f5; border-top: 1px solid var(--line); font-size: .72rem; letter-spacing: .12em; }
.back-to-top { position: fixed; right: clamp(16px, 2.4vw, 34px); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 24; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; color: var(--ink-soft); background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 12px 30px rgba(28,45,65,.1); opacity: 0; visibility: hidden; pointer-events: none; cursor: pointer; transform: translateY(8px); transition: opacity .24s ease, visibility .24s ease, color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .24s ease; backdrop-filter: blur(10px); }
.back-to-top span { display: block; font-size: 1.05rem; line-height: 1; transition: transform .22s ease; }
.back-to-top.visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { color: var(--ink); background: var(--white); border-color: var(--line-dark); box-shadow: 0 15px 34px rgba(28,45,65,.14); transform: translateY(-2px); }
.back-to-top:hover span { transform: translateY(-1px); }
.back-to-top:active { transform: translateY(0) scale(.96); }
.record-dialog { width: min(620px, calc(100% - 32px)); padding: 38px; color: var(--ink); background: var(--white); border: 0; border-radius: 18px; box-shadow: 0 30px 90px rgba(15,28,42,.28); }.record-dialog::backdrop { background: rgba(23,34,51,.52); backdrop-filter: blur(4px); }
.dialog-close { float: right; padding: 8px 11px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }.record-dialog h2 { margin: 10px 0 18px; font-family: "Songti SC", STSong, serif; font-size: 2.8rem; font-weight: 500; }.dialog-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }.dialog-meta span { padding: 7px 9px; color: var(--muted); background: var(--paper); border-radius: 5px; font-size: .72rem; }.record-dialog section { padding: 22px 0; border-top: 1px solid var(--line); }.record-dialog section h3 { margin: 0 0 10px; font-size: .85rem; }.record-dialog section p { margin: 0; color: var(--muted); line-height: 1.75; }.dialog-footnote { margin: 20px 0 0; padding: 18px; color: var(--muted); background: var(--blue-soft); border-radius: 9px; font-size: .82rem; line-height: 1.7; }.risk-list { margin-top: 25px; }.risk-list div { display: grid; grid-template-columns: 45px 1fr; gap: 15px; padding: 13px 0; border-top: 1px solid var(--line); }.risk-list b { font-family: Georgia, serif; font-size: 1.2rem; }.risk-list p { margin: 0; color: var(--muted); line-height: 1.6; }

@media (max-width: 1180px) {
  .desktop-nav { display: none; }
  .menu-button { display: grid; gap: 5px; padding: 8px; background: none; border: 0; cursor: pointer; }
  .menu-button span { display: block; width: 20px; height: 1px; background: var(--ink); transition: transform .22s ease, opacity .22s ease; }
  .mobile-nav:not([hidden]) { position: fixed; inset: 76px 0 auto; z-index: 29; display: grid; grid-template-columns: repeat(2, 1fr); padding: 14px 4vw 24px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(20,35,50,.08); }
  .mobile-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: color .24s ease, padding-left .24s ease, background-color .24s ease; }
  .mobile-nav a:hover, .mobile-nav a.active { color: var(--ink); padding-left: 5px; background: rgba(255,255,255,.45); }
  .mobile-nav .nav-sub { display: block; padding-left: 18px; color: var(--muted); font-size: .8rem; }
  .hero { grid-template-columns: 1fr; padding: 95px 0 70px; }
  .duo-visual { width: min(100%, 760px); margin: 70px auto 10px; }
  .character-profile, .character-profile:nth-of-type(3) { grid-template-columns: minmax(300px, .65fr) minmax(0, 1.35fr); }
  .character-profile:nth-of-type(3) .profile-art { order: 0; }
  .profile-content { padding: 38px; }
  .profile-columns, .ability-feature { grid-template-columns: 1fr; }
  .duo-layout { grid-template-columns: 1fr; }.duo-artwork { width: min(100%, 900px); margin: 0 auto; }
  .staff-cluster { grid-template-columns: 190px 1fr; }
  .home-directory { grid-template-columns: repeat(2, 1fr); }
  .home-character-feature { padding: 46px 38px; }
}

@media (max-width: 820px) {
  .topbar { height: 68px; }
  .hero { scroll-margin-top: 68px; }
  .mobile-nav:not([hidden]) { inset: 68px 0 auto; }
  .system-status { font-size: .7rem; }
  .section { padding: 92px 0; }
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 46px; }
  .page-intro { grid-template-columns: 1fr; gap: 24px; padding: 68px 0 54px; }
  .chapter-preview { grid-template-columns: 1fr; }
  .home-character-feature { grid-template-columns: 1fr; gap: 34px; }
  .home-primary-links { grid-template-columns: 1fr; }.home-primary-links a, .home-primary-links a + a { min-height: 0; padding: 28px 0; border-left: 0; }.home-primary-links a + a { border-top: 1px solid var(--line); }.home-primary-links h2 { margin-top: 30px; }
  .home-deep-links { grid-template-columns: 1fr; gap: 0; }
  .character-index-grid { grid-template-columns: 1fr; }.character-index-card { min-height: 390px; }
  .character-profile, .character-profile:nth-of-type(3) { grid-template-columns: 1fr; }
  .profile-art { min-height: 560px; }
  .duo-values { grid-template-columns: 1fr 1fr; }.duo-values article:nth-child(3) { border-left: 1px solid #3e4d60; }
  .complement-grid { grid-template-columns: 1fr; }.complement-center { padding: 20px 0; }
  .related-stories { grid-template-columns: 1fr auto; }.related-stories span { grid-column: 1 / -1; }
  .staff-cluster { grid-template-columns: 1fr; gap: 18px; }.staff-cluster > header { max-width: 520px; }
  .principle-copy { grid-template-columns: 1fr; gap: 14px; }
  .evaluation-grid, .ability-records { grid-template-columns: 1fr; }
  .evaluation-grid > article + article { margin-left: 0; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .development { grid-template-columns: 1fr; gap: 35px; }.development > div:last-child { grid-template-columns: 1fr; }
  .story-archive-wrap { grid-template-columns: minmax(0, 1fr) 135px; gap: 18px; }
  .gallery-schema { grid-template-columns: 1fr 1fr; }.gallery-schema div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.gallery-schema div:nth-child(4) { border-top: 1px solid var(--line); }
  .archive-grid, .editor-notes-body { grid-template-columns: 1fr; }
  .reading-section { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 560px) {
  .topbar, main { padding-right: 20px; padding-left: 20px; }
  .brand { min-width: 0; }.brand small { display: none; }
  .system-status { max-width: 105px; text-align: right; }
  .mobile-nav:not([hidden]) { grid-template-columns: 1fr; padding-right: 20px; padding-left: 20px; }
  .breadcrumbs { padding-top: 25px; }
  .page-intro { padding: 54px 0 44px; }.page-intro h1 { font-size: 3rem; }
  .subnav { gap: 7px; padding: 17px 0; }.subnav a { padding: 8px 10px; }
  .character-anchor-nav { top: 68px; }
  .hero { min-height: auto; padding-top: 68px; }
  .hero h1 { font-size: 2.7rem; line-height: 1.04; }.lead { margin-top: 28px; font-size: 1rem; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .duo-visual { width: 100%; margin-top: 48px; padding: 9px; border-radius: 15px; }.duo-visual img { border-radius: 9px; }.duo-visual figcaption { align-items: flex-start; flex-direction: column; gap: 5px; padding: 12px 4px 3px; }
  .world-summary { padding: 28px 0 18px; }.world-summary p { font-size: 1rem; line-height: 1.9; }
  .home-directory { grid-template-columns: 1fr; margin-top: 48px; }.home-directory a { min-height: 195px; }
  .home-character-feature { margin-top: 48px; padding: 38px 24px; }.home-character-feature h2 { font-size: 2.25rem; }.home-character-feature > span { justify-self: start; }
  .home-primary-links { margin-top: 48px; }.home-deep-links a { grid-template-columns: 105px 1fr; }.home-deep-links small { display: none; }
  .characters-flow { padding-top: 54px; }.characters-flow .character-profile + .character-profile { margin-top: 30px; }.characters-flow .duo-section { margin-top: 82px; }
  .section { padding: 78px 0; }.section-head h2 { font-size: 2.75rem; }
  .profile-art { min-height: 450px; padding: 28px; }.profile-art strong { font-size: 4rem; }.profile-content { padding: 27px 22px; }.profile-title h3 { font-size: 2.3rem; }.profile-title h3 small { display: block; margin: 5px 0 0; }.personality-lead { font-size: 1.2rem; }.identity-grid { grid-template-columns: 1fr; }.identity-grid div:nth-child(even) { padding-left: 0; border-left: 0; }.ability-feature { padding: 22px; }
  .duo-section { margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 20px; }.duo-artwork { padding: 10px; border-radius: 14px; }.duo-artwork figcaption { align-items: flex-start; flex-direction: column; gap: 5px; padding: 12px 3px 2px; }.duo-copy-stack > section { min-height: 0; padding: 27px 22px; }.dynamic-panel h3 { margin-top: 38px; font-size: 2.1rem; }.dynamic-panel > div { margin-top: 38px; }.synergy-pair { grid-template-columns: 1fr; margin-top: 40px; }.synergy-pair > i { width: 1px; height: 35px; }.related-stories { grid-template-columns: 1fr; }.related-stories span { grid-column: auto; }
  .story-filters { gap: 22px; margin-bottom: 4px; }.story-entry { grid-template-columns: 36px minmax(0, 1fr); gap: 10px 12px; padding: 34px 0; }.story-index { padding-top: 5px; }.story-title { font-size: 1.65rem; }.story-metadata { margin-top: 9px; line-height: 1.65; }.story-excerpt { margin-top: 16px; font-size: .98rem; line-height: 1.8; }.story-read { grid-column: 2; justify-self: start; padding: 0; }.stories-empty { min-height: 300px; }.story-archive-wrap { grid-template-columns: 1fr; }.story-easter-egg { width: 120px; margin: 26px 0 0 auto; }
  .story-reading-page { padding: 70px 0 84px; }.story-title-block { padding-bottom: 42px; }.story-title-block h1 { font-size: 2.45rem; }.story-prose { padding: 52px 0 58px; font-size: 1.02rem; line-height: 2; }.story-prose blockquote { margin-right: -4px; margin-left: -4px; padding: 1.4em .9em; font-size: 1.05rem; }.story-reading-nav { flex-direction: column; }.story-back-link, .story-prev-link, .story-next-link { order: initial; margin-left: 0; }
  .org-rule { grid-template-columns: 1fr; gap: 10px; }
  .staff-entry summary { grid-template-columns: 1fr auto 18px; gap: 7px 12px; padding: 14px 0; }
  .staff-entry summary strong { grid-column: 1; grid-row: 1; }
  .staff-entry summary small { grid-column: 2; grid-row: 1; }
  .staff-entry summary i { grid-column: 3; grid-row: 1 / 3; }
  .staff-entry summary span { grid-row: 2; }
  .staff-entry summary span:nth-of-type(1) { grid-column: 1; }
  .staff-entry summary span:nth-of-type(2) { grid-column: 2; text-align: right; }
  .staff-entry-detail { grid-template-columns: 1fr; gap: 20px; padding-bottom: 22px; }
  .staff-entry-detail > p { grid-column: auto; }
  .class-grid { grid-template-columns: 1fr; }.critical-notes { grid-template-columns: 1fr; padding: 10px 22px; }.critical-notes p { padding: 15px 0; }.critical-notes p + p { border-top: 1px solid #425267; border-left: 0; }.scale span { font-size: .72rem; }
  .gallery-schema { grid-template-columns: 1fr; }.gallery-schema div + div { border-top: 1px solid var(--line); border-left: 0; }.gallery-empty { min-height: 440px; padding: 40px 24px; }.gallery-empty h3 { font-size: 1.6rem; }
  .editor-notes summary { grid-template-columns: 1fr auto; }.editor-notes summary span { grid-column: 1 / -1; }
  .record-dialog { padding: 28px 22px; }
  .reading-layout { padding-top: 15px; }.reading-section { padding: 34px 0; }.reading-section p { font-size: 1.05rem; line-height: 1.9; }
  footer { flex-direction: column; gap: 10px; padding-right: 20px; padding-left: 20px; }
}

/* OC总站结构：世界线与服设主题分层 */
.site-home { position: relative; z-index: 0; padding-bottom: 120px; overflow-x: clip; isolation: isolate; }
body[data-page="home"] main.site-home { animation: none; }
.site-home-intro { position: relative; max-width: 900px; padding: 72px 0 48px; }
.home-cinematic .site-home-intro .eyebrow { animation: cinematic-copy-in .52s cubic-bezier(.22,1,.36,1) .04s both; }
.home-cinematic .hero-title-split .split-piece { animation: hero-split-reveal .6s cubic-bezier(.22,1,.36,1) both; }
.home-cinematic .hero-title-split .split-piece-1 { animation-delay: .06s; }
.home-cinematic .hero-title-split .split-piece-2 { animation-delay: .18s; }
.home-cinematic .hero-title-split .split-piece-3 { animation-delay: .3s; }
.home-cinematic .site-home-intro > p:last-child { animation: cinematic-copy-in .36s cubic-bezier(.22,1,.36,1) 1.06s both; }
.home-cinematic .featured-looks .home-section-head { animation: cinematic-copy-in .32s cubic-bezier(.22,1,.36,1) 1.14s both; }
.home-cinematic .featured-slide[data-position="0"] figure { animation: cinematic-card-in .3s cubic-bezier(.22,1,.36,1) 1.18s both; }
.home-cinematic .featured-slide[data-position="-1"] figure, .home-cinematic .featured-slide[data-position="1"] figure { animation: cinematic-side-in .26s cubic-bezier(.22,1,.36,1) 1.22s both; }
.home-cinematic .featured-controls { animation: cinematic-copy-in .2s cubic-bezier(.22,1,.36,1) 1.28s both; }
.home-cinematic .featured-slide[data-position="0"] .featured-card-copy { animation: cinematic-copy-in .2s cubic-bezier(.22,1,.36,1) 1.28s both; }
@keyframes hero-split-reveal { from { opacity: 0; transform: translate3d(0,.82em,0) skewY(3deg); } to { opacity: 1; transform: translate3d(0,0,0) skewY(0); } }
@keyframes cinematic-copy-in { from { opacity: 0; transform: translate3d(0,20px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes cinematic-card-in { from { opacity: 0; transform: translate3d(0,30px,0) scale(.94); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes cinematic-side-in { from { opacity: 0; transform: translate3d(0,22px,0) scale(.96); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
.site-home-intro h1 { margin: 16px 0 20px; font-family: "Songti SC", STSong, serif; font-size: clamp(2.75rem, 4.4vw, 4.75rem); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.hero-title-split .split-clip { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero-title-split .split-piece { display: inline-block; transform-origin: left bottom; }
.hero-title-split .split-mobile-line { display: inline; }
.site-home-intro > p:last-child { max-width: 760px; margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.9; }
.reveal-ready .scroll-reveal { opacity: 0; transform: translate3d(0,18px,0); transition: opacity .44s ease-out, transform .44s ease-out; transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
.reveal-ready .scroll-reveal.is-revealed { opacity: 1; transform: translate3d(0,0,0); }
.scroll-reveal.is-revealed { will-change: auto; }
.home-section-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 30px; padding-top: 54px; border-top: 1px solid var(--line); }
.home-section-head h2 { margin: 9px 0 0; font-family: "Songti SC", STSong, serif; font-size: clamp(2.4rem, 4vw, 4.2rem); font-weight: 500; line-height: 1; }
.home-section-head > a { color: var(--muted); font-size: .84rem; text-underline-offset: 5px; }
.featured-carousel { --card-radius: 18px; position: relative; touch-action: pan-y; }
#featured-stage { position: relative; width: min(100%, 860px); height: 425px; margin: 0 auto; overflow: hidden; perspective: 1250px; transform-style: preserve-3d; }
#featured-stage, .featured-slide, .featured-slide img { user-select: none; -webkit-user-drag: none; }
.featured-slide { position: absolute; top: 12px; left: 50%; z-index: 0; width: 320px; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: 0 14px 38px rgba(28,45,65,.06); text-decoration: none; opacity: 0; pointer-events: none; cursor: pointer; transform: translate3d(-50%,0,-50px) scale(.74); transform-style: flat; backface-visibility: hidden; transition: transform .56s cubic-bezier(.22,1,.36,1), opacity .5s ease, box-shadow .42s ease, border-color .32s ease; }
.featured-slide[data-position="-2"] { z-index: 0; opacity: 0; transform: translate3d(-250%,0,-80px) rotateY(13deg) scale(.72); }
.featured-slide[data-position="-1"] { z-index: 1; opacity: .64; pointer-events: auto; transform: translate3d(-150%,0,-38px) rotateY(11deg) scale(.84); }
.featured-slide[data-position="0"] { --tilt-x: 0deg; --tilt-y: 0deg; --tilt-scale: 1; --spot-x: 50%; --spot-y: 50%; z-index: 3; opacity: 1; pointer-events: auto; transform: translate3d(-50%,0,18px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--tilt-scale)); box-shadow: 0 25px 64px rgba(28,45,65,.15); }
.featured-slide[data-position="1"] { z-index: 1; opacity: .64; pointer-events: auto; transform: translate3d(50%,0,-38px) rotateY(-11deg) scale(.84); }
.featured-slide[data-position="2"] { z-index: 0; opacity: 0; transform: translate3d(150%,0,-80px) rotateY(-13deg) scale(.72); }
@media (hover: hover) {
  .featured-slide[data-position="0"]:hover { --tilt-scale: 1.015; border-color: var(--line-dark); box-shadow: 0 30px 72px rgba(28,45,65,.19); }
  .featured-slide[data-position="-1"]:hover { z-index: 2; opacity: .8; border-color: var(--line-dark); box-shadow: 0 20px 46px rgba(28,45,65,.12); transform: translate3d(-150%,0,-18px) rotateY(6deg) scale(.88); }
  .featured-slide[data-position="1"]:hover { z-index: 2; opacity: .8; border-color: var(--line-dark); box-shadow: 0 20px 46px rgba(28,45,65,.12); transform: translate3d(50%,0,-18px) rotateY(-6deg) scale(.88); }
}
.featured-slide.is-tilting { transition: transform .13s ease-out, opacity .5s ease, box-shadow .32s ease, border-color .32s ease; }
.featured-slide[data-position="0"]:active { --tilt-scale: .985; }
.featured-slide figure { position: relative; width: 100%; height: 100%; display: grid; place-items: center; margin: 0; overflow: hidden; background: #fbfcfd; border-radius: inherit; }
.featured-slide figure::after { position: absolute; inset: 0; z-index: 1; content: ""; pointer-events: none; background: radial-gradient(circle 190px at var(--spot-x,50%) var(--spot-y,50%), rgba(255,255,255,.2) 0%, rgba(255,255,255,.09) 34%, rgba(255,255,255,0) 72%); border-radius: inherit; opacity: 0; transition: opacity .22s ease; }
.featured-slide[data-position="0"].tilt-active figure::after { opacity: .62; }
.featured-slide figure > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.featured-slide .wardrobe-placeholder { width: 100%; min-height: 100%; border: 0; border-radius: inherit; }
.featured-slide .wardrobe-placeholder strong { display: none; }
.featured-card-copy { position: absolute; inset: auto 0 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 34px 16px 9px; overflow: hidden; background: linear-gradient(0deg, rgba(248,250,251,.96) 0%, rgba(248,250,251,.78) 46%, rgba(248,250,251,.24) 76%, rgba(248,250,251,0) 100%); border-radius: 0 0 var(--card-radius) var(--card-radius); opacity: .5; transform: translate3d(0,3px,0); transition: opacity .3s ease, transform .3s ease; }
.featured-slide[data-position="0"] .featured-card-copy { opacity: 1; transform: translate3d(0,0,0); transition-delay: .1s; }
.featured-card-copy > div { min-width: 0; }
.featured-card-copy h3 { margin: 0 0 4px; font-family: "Songti SC", STSong, serif; font-size: 1.08rem; font-weight: 500; line-height: 1.05; }
.featured-card-copy p { margin: 0; color: #87929e; font-size: .66rem; font-style: italic; font-weight: 400; line-height: 1.3; white-space: nowrap; }
.featured-card-link { flex: none; color: #737f8c; font-size: .62rem; font-weight: 400; letter-spacing: .03em; white-space: nowrap; }
.featured-card-copy i { display: inline-block; margin-left: 5px; font-style: normal; transform: translate3d(var(--magnetic-inner-x,0px),var(--magnetic-inner-y,0px),0); transition: transform .28s cubic-bezier(.22,1,.36,1); }
.featured-card-link { transform: translate3d(var(--magnetic-x,0px),var(--magnetic-y,0px),0); transition: color .26s ease; will-change: transform; }
.featured-card-link:hover { color: var(--ink); }
.featured-card-link:hover i, .featured-slide[data-position="0"]:hover .featured-card-link i { transform: translate3d(calc(var(--magnetic-inner-x,0px) + 4px),var(--magnetic-inner-y,0px),0); }
.featured-slide[data-position="0"]:active .featured-card-link i { transform: translate3d(calc(var(--magnetic-inner-x,0px) + 2px),var(--magnetic-inner-y,0px),0); }
.featured-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 12px; }
.featured-arrow { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: var(--ink-soft); background: var(--white); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; transition: color .26s ease, background-color .26s ease, border-color .26s ease, transform .2s ease, box-shadow .26s ease; }
.featured-arrow:hover { color: var(--ink); background: #f9fbfc; border-color: var(--line-dark); box-shadow: 0 8px 20px rgba(28,45,65,.08); }
.featured-prev:hover { transform: translateX(-2px); }
.featured-next:hover { transform: translateX(2px); }
.featured-arrow:active { transform: scale(.96); }
.featured-arrow:focus-visible, .featured-dot:focus-visible, .featured-slide:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 3px; }
.featured-pagination { display: flex; align-items: center; gap: 10px; }
.featured-dot { width: 8px; height: 8px; padding: 0; background: #b8c3ce; border: 0; border-radius: 50%; cursor: pointer; transition: width .24s ease, background-color .24s ease, transform .2s ease; }
.featured-dot:hover { background: #8997a6; transform: scale(1.25); }
.featured-dot:active { transform: scale(.9); }
.featured-dot.active { width: 25px; background: var(--ink-soft); border-radius: 999px; }
.featured-dot.active:hover { transform: scale(1.06); }
.wardrobe-placeholder { min-height: 520px; display: grid; place-content: center; gap: 16px; padding: 40px; text-align: center; background: linear-gradient(145deg, #fff, #eef3f7); border: 1px solid var(--line); border-radius: 14px; }
.wardrobe-placeholder span { color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.wardrobe-placeholder strong { font-family: "Songti SC", STSong, serif; font-size: clamp(2.4rem, 4vw, 4.2rem); font-weight: 500; }
.wardrobe-placeholder small { color: var(--muted); }

.home-worldlines { margin-top: 72px; }
.worldline-preview { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.worldline-preview a { min-height: 250px; padding: 26px 24px 30px 0; color: inherit; text-decoration: none; transition: transform .28s ease, background-color .28s ease, box-shadow .28s ease; }
.worldline-preview a + a { padding-left: 24px; border-left: 1px solid var(--line); }
.worldline-preview a:hover { z-index: 1; background: rgba(255,255,255,.55); box-shadow: 0 12px 30px rgba(28,45,65,.055); transform: translateY(-3px); }
.worldline-preview a:active { transform: translateY(-1px); }
.worldline-preview span { color: #8d99a6; font-size: .65rem; font-weight: 400; letter-spacing: .1em; opacity: .72; }
.worldline-preview h3 { margin: 65px 0 12px; font-family: "Songti SC", STSong, serif; font-size: 1.65rem; font-weight: 500; }
.worldline-preview p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.7; }
.home-archive-links { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; margin-top: 100px; }
.character-home-entry, .archive-entry-pair a { color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.character-home-entry:hover, .archive-entry-pair a:hover { border-color: var(--line-dark); box-shadow: 0 14px 34px rgba(28,45,65,.065); transform: translateY(-3px); }
.character-home-entry:active, .archive-entry-pair a:active { transform: translateY(-1px); }
.character-home-entry { min-height: 390px; display: flex; flex-direction: column; justify-content: flex-end; padding: 42px; background: linear-gradient(120deg, var(--pink-soft), #fff 50%, var(--blue-soft)); }
.character-home-entry small, .archive-entry-pair small { color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.character-home-entry h2, .archive-entry-pair h2 { margin: 18px 0 12px; font-family: "Songti SC", STSong, serif; font-size: 2.4rem; font-weight: 500; }
.character-home-entry p, .archive-entry-pair p { max-width: 590px; margin: 0; color: var(--muted); line-height: 1.75; }
.character-home-entry b { margin-top: 35px; font-size: .78rem; text-decoration: underline; text-underline-offset: 5px; }
.archive-entry-pair { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.archive-entry-pair a { display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.archive-entry-pair h2 { font-size: 1.75rem; }

.worldline-directory { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 72px 0 100px; }
.worldline-card { min-height: 340px; display: flex; flex-direction: column; padding: 32px; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; }
.worldline-card > div { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .7rem; letter-spacing: .12em; }
.worldline-card h2 { margin: auto 0 18px; font-family: "Songti SC", STSong, serif; font-size: 2.5rem; font-weight: 500; }
.worldline-card p { max-width: 560px; margin: 0; color: var(--muted); line-height: 1.75; }
.worldline-card { transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.worldline-card:hover { border-color: var(--line-dark); box-shadow: var(--shadow); transform: translateY(-3px); }
.worldline-card:active { transform: translateY(-1px); }

.worldline-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 7vw; align-items: end; padding: 90px 0 72px; border-bottom: 1px solid var(--line); }
.worldline-hero h1 { margin: 15px 0 30px; font-family: "Songti SC", STSong, serif; font-size: clamp(3.5rem, 7vw, 6.6rem); font-weight: 500; line-height: .95; }
.worldline-hero > div > p:last-child { max-width: 750px; margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.9; }
.worldline-hero aside { padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.worldline-hero aside > span { color: var(--muted); font-size: .7rem; letter-spacing: .13em; }
.worldline-hero aside p { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.worldline-hero aside small { display: block; margin-top: 20px; color: var(--muted); }
.world-resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 72px 0 110px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.world-resource-grid a { min-height: 235px; padding: 25px; color: inherit; border-right: 1px solid var(--line); text-decoration: none; }
.world-resource-grid a:nth-child(3n) { border-right: 0; }
.world-resource-grid a:nth-child(n+4) { border-top: 1px solid var(--line); }
.world-resource-grid span { color: #a9b3be; font-family: Georgia, serif; }
.world-resource-grid h2 { margin: 58px 0 10px; font-family: "Songti SC", STSong, serif; font-size: 1.55rem; font-weight: 500; }
.world-resource-grid p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.7; }
.world-wardrobes { padding: 70px 0 100px; border-top: 1px solid var(--line); }
.world-wardrobes > header { max-width: 720px; margin-bottom: 36px; }
.world-wardrobes h2 { margin: 10px 0; font-family: "Songti SC", STSong, serif; font-size: 2.6rem; font-weight: 500; }
.world-wardrobes header > p:last-child { color: var(--muted); line-height: 1.75; }
.world-wardrobes > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.world-wardrobes a, .world-wardrobes article { min-height: 220px; padding: 26px; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
.world-wardrobes span { color: var(--muted); font-size: .7rem; letter-spacing: .1em; }
.world-wardrobes h3 { margin: 52px 0 10px; font-family: "Songti SC", STSong, serif; font-size: 1.5rem; font-weight: 500; }
.world-wardrobes p { margin: 0; color: var(--muted); line-height: 1.7; }

.wardrobe-directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 72px 0 110px; }
.wardrobe-card { overflow: hidden; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.wardrobe-card:hover { border-color: var(--line-dark); box-shadow: 0 14px 34px rgba(28,45,65,.065); transform: translateY(-3px); }
.wardrobe-card:active { transform: translateY(-1px); }
.wardrobe-card-visual { min-height: 390px; display: grid; place-items: center; padding: 16px; background: #fbfcfd; border-bottom: 1px solid var(--line); }
.wardrobe-card-visual img { display: block; width: 100%; max-height: 490px; object-fit: contain; }
.wardrobe-card .wardrobe-placeholder { width: 100%; min-height: 350px; }
.wardrobe-card-copy { padding: 24px; }
.wardrobe-card-copy span { color: var(--muted); font-size: .72rem; letter-spacing: .11em; }
.wardrobe-card-copy h2 { margin: 10px 0 14px; font-family: "Songti SC", STSong, serif; font-size: 1.7rem; font-weight: 500; }
.wardrobe-card-copy p { margin: 0; color: var(--muted); }
.wardrobe-detail > header { display: flex; justify-content: space-between; gap: 40px; align-items: end; padding: 80px 0 50px; }
.wardrobe-detail > header h1 { margin: 14px 0; font-family: "Songti SC", STSong, serif; font-size: clamp(3.3rem, 7vw, 6.5rem); font-weight: 500; line-height: .95; }
.wardrobe-detail > header p { margin: 0; color: var(--muted); }
.wardrobe-detail > header > a { color: var(--muted); font-size: .84rem; text-underline-offset: 5px; }
.wardrobe-detail-visual { min-height: 620px; display: grid; place-items: center; margin: 0; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.wardrobe-detail-visual > img { display: block; width: min(100%, 920px); max-height: 920px; object-fit: contain; }
.wardrobe-detail-visual > .wardrobe-placeholder { width: min(100%, 900px); }
.wardrobe-detail-visual figcaption { width: min(100%, 920px); display: flex; justify-content: space-between; gap: 20px; padding: 16px 5px 0; color: var(--muted); font-size: .72rem; letter-spacing: .1em; }
.wardrobe-detail-note { max-width: 820px; padding: 38px 0 100px; }
.wardrobe-detail-note p { margin: 0; color: var(--ink-soft); font-family: "Songti SC", STSong, serif; font-size: 1.15rem; line-height: 2; }
.character-world-link { display: grid; grid-template-columns: 160px 1fr auto; gap: 20px; align-items: center; margin-top: 22px; padding: 20px 22px; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.character-world-link span, .character-world-link small { color: var(--muted); font-size: .75rem; }
.character-world-link b { font-size: .9rem; font-weight: 500; }

@media (max-width: 1000px) {
  .worldline-preview { grid-template-columns: repeat(2, 1fr); }
  .worldline-preview a:nth-child(3) { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .worldline-preview a:nth-child(4) { border-top: 1px solid var(--line); }
  .wardrobe-directory { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .site-home-intro { padding-top: 62px; }
  .home-archive-links, .worldline-hero { grid-template-columns: 1fr; }
  .worldline-directory { grid-template-columns: 1fr; }
  .world-resource-grid { grid-template-columns: 1fr 1fr; }
  .world-resource-grid a:nth-child(3n) { border-right: 1px solid var(--line); }
  .world-resource-grid a:nth-child(2n) { border-right: 0; }
  .world-resource-grid a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .world-wardrobes > div { grid-template-columns: 1fr; }
  .character-world-link { grid-template-columns: 1fr auto; }
  .character-world-link span { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .featured-carousel { --card-radius: 15px; }
  .site-home-intro { padding: 44px 0 34px; }
  .home-cinematic .site-home-intro .eyebrow { animation-duration: .4s; animation-delay: .02s; }
  .home-cinematic .hero-title-split .split-piece { animation-duration: .48s; }
  .home-cinematic .hero-title-split .split-piece-1 { animation-delay: .02s; }
  .home-cinematic .hero-title-split .split-piece-2 { animation-delay: .11s; }
  .home-cinematic .hero-title-split .split-piece-3 { animation-delay: .2s; }
  .home-cinematic .site-home-intro > p:last-child { animation-duration: .28s; animation-delay: .84s; }
  .home-cinematic .featured-looks .home-section-head { animation-duration: .28s; animation-delay: .92s; }
  .home-cinematic .featured-slide[data-position="0"] figure { animation-duration: .28s; animation-delay: 1s; }
  .home-cinematic .featured-slide[data-position="-1"] figure, .home-cinematic .featured-slide[data-position="1"] figure { animation-duration: .22s; animation-delay: 1.06s; }
  .home-cinematic .featured-controls { animation-duration: .18s; animation-delay: 1.1s; }
  .home-cinematic .featured-slide[data-position="0"] .featured-card-copy { animation-duration: .18s; animation-delay: 1.1s; }
  .reveal-ready .scroll-reveal { transform: translate3d(0,14px,0); }
  .reveal-ready .scroll-reveal.is-revealed { transform: translate3d(0,0,0); }
  .site-home-intro h1 { margin: 13px 0 15px; font-size: clamp(2.25rem, 11vw, 2.75rem); line-height: 1.12; }
  .hero-title-split .split-mobile-line { display: block; white-space: nowrap; }
  .home-cinematic .hero-title-split .split-piece { animation-name: hero-split-reveal-mobile; }
  @keyframes hero-split-reveal-mobile { from { opacity: 0; transform: translate3d(0,.62em,0) skewY(3deg); } to { opacity: 1; transform: translate3d(0,0,0) skewY(0); } }
  .site-home-intro > p:last-child { font-size: .96rem; line-height: 1.8; }
  .home-section-head { align-items: flex-start; flex-direction: column; gap: 14px; padding-top: 38px; }
  #featured-stage { width: auto; height: 420px; margin: 0 -4vw; }
  .featured-slide { top: 12px; width: 86%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--card-radius); }
  .featured-slide[data-position="-2"] { transform: translateX(-195%) scale(.74); }
  .featured-slide[data-position="-1"] { opacity: .48; transform: translateX(-146%) scale(.9); }
  .featured-slide[data-position="0"] { transform: translateX(-50%) scale(1); }
  .featured-slide[data-position="1"] { opacity: .48; transform: translateX(46%) scale(.9); }
  .featured-slide[data-position="2"] { transform: translateX(95%) scale(.74); }
  .featured-slide[data-position="0"]:active { transform: translateX(-50%) scale(.985); }
  .featured-card-copy { gap: 10px; padding: 32px 13px 8px; }
  .featured-card-copy h3 { font-size: 1.02rem; }
  .featured-card-copy p { font-size: .62rem; }
  .featured-card-link { font-size: .6rem; }
  .featured-controls { gap: 14px; margin-top: 15px; }
  .featured-arrow { width: 38px; height: 38px; }
  .wardrobe-placeholder { min-height: 360px; padding: 28px 18px; }
  .home-worldlines { margin-top: 82px; }
  .worldline-preview { grid-template-columns: 1fr; }
  .worldline-preview a, .worldline-preview a + a, .worldline-preview a:nth-child(3) { min-height: 190px; padding: 24px 0; border-top: 1px solid var(--line); border-left: 0; }
  .worldline-preview h3 { margin-top: 38px; }
  .home-archive-links { margin-top: 72px; }
  .character-home-entry { min-height: 330px; padding: 28px; }
  .worldline-card { min-height: 290px; padding: 26px; }
  .worldline-hero { padding: 65px 0 52px; }
  .worldline-hero h1 { font-size: 3.4rem; }
  .world-resource-grid { grid-template-columns: 1fr; }
  .world-resource-grid a, .world-resource-grid a:nth-child(3n) { min-height: 190px; padding: 22px 0; border-top: 1px solid var(--line); border-right: 0; }
  .world-resource-grid h2 { margin-top: 36px; }
  .wardrobe-directory { grid-template-columns: 1fr; }
  .wardrobe-card-visual { min-height: 330px; }
  .wardrobe-detail > header { align-items: flex-start; flex-direction: column; padding-top: 58px; }
  .wardrobe-detail-visual { min-height: 450px; padding: 10px; }
  .wardrobe-detail-visual figcaption { align-items: flex-start; flex-direction: column; gap: 5px; }
  .character-world-link { grid-template-columns: 1fr; }
  .back-to-top { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 46px; height: 46px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main { animation: none; }
  .featured-card-link, .featured-card-copy i { --magnetic-x: 0px; --magnetic-y: 0px; --magnetic-inner-x: 0px; --magnetic-inner-y: 0px; transform: none; }
  .home-cinematic .hero-title-split .split-piece { opacity: 1; transform: none; animation: none; }
  .reveal-ready .scroll-reveal, .reveal-ready .scroll-reveal.is-revealed { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .featured-slide[data-position="-1"], .featured-slide[data-position="-1"]:hover { transform: translateX(-150%) scale(.84); }
  .featured-slide[data-position="0"], .featured-slide[data-position="0"]:hover, .featured-slide[data-position="0"]:active { transform: translateX(-50%) scale(1); }
  .featured-slide[data-position="1"], .featured-slide[data-position="1"]:hover { transform: translateX(50%) scale(.84); }
  .featured-slide figure::after { display: none; }
  .featured-card-link:hover i, .featured-slide[data-position="0"]:hover .featured-card-link i,
  .featured-prev:hover, .featured-next:hover, .featured-arrow:active,
  .featured-dot:hover, .featured-dot:active, .featured-dot.active:hover,
  .worldline-preview a:hover, .worldline-preview a:active,
  .character-home-entry:hover, .character-home-entry:active,
  .archive-entry-pair a:hover, .archive-entry-pair a:active,
  .worldline-card:hover, .worldline-card:active,
  .wardrobe-card:hover, .wardrobe-card:active,
  .chapter-preview a:hover, .home-directory a:hover,
  .story-filter:active, .story-entry:hover, .story-entry:active,
  .subnav a:active, .back-to-top, .back-to-top:hover, .back-to-top:active,
  .back-to-top:hover span { transform: none; }
}