:root { --paper:#f7f7f4; --ink:#202326; --muted:#6f7479; --line:#d9dad5; --blue:#28558d; --blue-soft:#e9f0f8; --orange:#e77a4d; --green:#3a806b; --max:1320px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.page { display:grid; grid-template-columns:280px minmax(0, 1fr); max-width:var(--max); margin:0 auto; }
.sidebar { position:sticky; top:0; align-self:start; min-height:100vh; padding:47px 34px 35px 30px; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.name { font-size:24px; font-weight:700; letter-spacing:-.05em; }.name-cn { margin:1px 0 22px; color:var(--muted); font-size:14px; }.role { max-width:185px; margin:0; color:var(--blue); font-size:13px; line-height:1.4; }.intro { margin:22px 0 0; color:#555b60; font-size:13px; line-height:1.62; }
.side-nav { display:flex; flex-direction:column; gap:8px; margin-top:58px; }.side-nav a { width:max-content; padding-left:13px; border-left:2px solid transparent; color:var(--muted); font-size:13px; }.side-nav a:hover,.side-nav a.active { border-left-color:var(--blue); color:var(--blue); }
.side-contact { display:flex; flex-direction:column; gap:4px; margin-top:auto; color:var(--muted); font-size:11px; }.side-contact a { color:var(--blue); }.side-contact a:hover { color:var(--orange); }
.content { min-width:0; padding:0 54px; }.topbar { height:74px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; letter-spacing:.03em; }.topbar-mark { color:var(--green); }.topbar-mark i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--green); }
.section { display:grid; grid-template-columns:150px minmax(0, 1fr); gap:42px; padding:74px 0 0; }.section-label { color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.section-body { min-width:0; }.news-section { padding-top:51px; }.news-list { border-top:1px solid var(--line); }.news-item { display:grid; grid-template-columns:92px 1fr; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); }.news-item time,.work-meta,.path-item time,.pub-type { color:var(--muted); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; }.news-item p { max-width:660px; margin:0; color:#474d52; font-size:14px; }.news-item b { color:var(--ink); }
.work-card { border-top:1px solid var(--line); }.work-primary { display:grid; grid-template-columns:1.03fr .97fr; gap:37px; padding-top:18px; }.work-preview { position:relative; min-height:260px; overflow:hidden; background:var(--blue-soft); border:1px solid #cfddec; }.preview-head { display:flex; justify-content:space-between; padding:12px 14px; color:var(--blue); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; letter-spacing:.05em; }.music-board { position:absolute; inset:54px 24px 24px; padding:18px; border:1px solid #b9cde3; background:rgba(255,255,255,.52); }.board-title { color:var(--muted); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9px; letter-spacing:.08em; }.music-board strong { display:block; margin-top:7px; color:var(--blue); font-size:16px; font-weight:500; }.staves { position:absolute; left:18px; right:18px; top:116px; height:72px; background:repeating-linear-gradient(to bottom, rgba(40,85,141,.32) 0 1px, transparent 1px 17px); transform:skewY(-4deg); }.board-notes { position:absolute; left:22%; right:14%; top:106px; display:flex; justify-content:space-between; align-items:end; }.board-notes i { display:block; width:17px; height:17px; border-radius:50%; background:var(--orange); }.board-notes i:nth-child(2n) { background:var(--green); transform:translateY(22px); }.board-notes i:nth-child(3n) { background:var(--blue); transform:translateY(-9px); }.board-foot { position:absolute; right:18px; bottom:12px; color:var(--muted); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9px; }
.work-info { padding:4px 0 0; }.work-meta { display:flex; justify-content:space-between; gap:15px; margin-bottom:20px; }.work-meta span:first-child { color:var(--blue); }.work-info h2 { margin:0 0 8px; font-size:35px; font-weight:700; letter-spacing:-.06em; line-height:1.05; }.work-info h3 { margin:0 0 8px; font-size:24px; font-weight:700; letter-spacing:-.05em; line-height:1.05; }.work-subtitle { margin:0 0 15px; color:var(--blue); font-size:16px; }.work-info p:not(.work-subtitle) { color:#555b60; font-size:14px; }.facts { display:flex; flex-wrap:wrap; gap:6px; margin:19px 0 20px; }.facts span { padding:4px 7px; border:1px solid #c9cbc6; color:var(--muted); font-size:10px; }.evidence { padding-top:12px; border-top:1px solid var(--line); }.evidence b { color:var(--orange); font-size:11px; text-transform:uppercase; }
.work-grid { display:grid; grid-template-columns:1fr 1fr; gap:37px; margin-top:64px; }.work-grid .work-preview { min-height:194px; }.intent-preview { background:#f0f1e9; border-color:#d7dacb; }.flow { position:absolute; top:50%; left:16px; right:16px; display:flex; align-items:center; justify-content:space-between; gap:6px; transform:translateY(-50%); }.flow span { padding:8px 6px; border:1px solid #c5cdbd; color:var(--green); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9px; }.flow b { color:var(--orange); font-weight:500; }.work-preview small { position:absolute; left:16px; bottom:15px; color:var(--muted); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; }.awakening-preview { background:#fff1ea; border-color:#efd0c1; }.equalizer { position:absolute; inset:60px 28px 47px; display:flex; align-items:center; gap:5px; }.equalizer i { flex:1; height:40%; background:var(--orange); }.equalizer i:nth-child(2n) { height:75%; background:#efad86; }.equalizer i:nth-child(3n) { height:52%; background:var(--blue); }.equalizer i:nth-child(5n) { height:91%; background:var(--green); }.inline-link { display:inline-block; margin-top:10px; color:var(--blue); font-size:13px; }.inline-link:hover { color:var(--orange); }.award-note { padding-top:12px; border-top:1px solid var(--line); color:var(--orange); font-size:12px; }
.work-row { display:grid; grid-template-columns:1fr 1fr 25px; gap:30px; align-items:center; padding:20px 0; border-top:1px solid var(--line); }.work-row:first-of-type { margin-top:64px; }.work-row h3 { margin:7px 0 0; font-size:20px; letter-spacing:-.04em; }.work-row p { margin:0; color:#555b60; font-size:13px; }.row-arrow { color:var(--blue); font-size:20px; text-align:right; }
.research-section { border-top:1px solid var(--line); }.research-question { position:relative; max-width:740px; padding-left:47px; }.question { position:absolute; left:0; top:-18px; color:var(--orange); font-family:Georgia,serif; font-size:64px; }.research-question h2 { margin:0 0 18px; font-size:32px; font-weight:700; letter-spacing:-.06em; line-height:1.12; }.research-question p { max-width:640px; margin:0; color:#555b60; font-size:14px; }.research-columns { display:grid; grid-template-columns:1fr 1fr; gap:37px; margin-top:50px; }.research-columns h3,.record-grid h3 { margin:0 0 11px; color:var(--blue); font-size:13px; text-transform:uppercase; }.research-columns ul { padding:0; margin:0; list-style:none; border-top:1px solid var(--line); }.research-columns li { padding:10px 0; border-bottom:1px solid var(--line); color:#555b60; font-size:13px; }.publication { display:grid; grid-template-columns:150px 1fr; gap:42px; margin-top:54px; padding-top:19px; border-top:1px solid var(--line); }.publication h3 { max-width:680px; margin:0 0 8px; font-size:18px; letter-spacing:-.03em; }.publication p { margin:0; color:var(--muted); font-size:12px; }
.path-section { border-top:1px solid var(--line); }.path-item { display:grid; grid-template-columns:115px 1fr; gap:35px; padding:19px 0; border-top:1px solid var(--line); }.path-item:first-child { border-top:0; }.path-item h3 { margin:0 0 4px; font-size:18px; letter-spacing:-.03em; }.path-item p { margin:0 0 4px; color:var(--blue); font-size:13px; }.path-item span { color:#70757a; font-size:13px; }
.record-section { border-top:1px solid var(--line); }.record-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:37px; }.record-grid > div { border-top:1px solid var(--line); }.record-grid p { margin:0; padding:9px 0; border-bottom:1px solid var(--line); color:#555b60; font-size:13px; }
.documents-section { border-top:1px solid var(--line); }.document-list { border-top:1px solid var(--line); }.document-list a { display:flex; justify-content:space-between; gap:25px; padding:14px 0; border-bottom:1px solid var(--line); }.document-list a:hover b,.document-list a:hover em { color:var(--orange); }.document-list b { display:block; font-size:14px; }.document-list small { display:block; margin-top:2px; color:var(--muted); font-size:12px; }.document-list em { color:var(--blue); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; font-style:normal; }
.footer-contact { margin:100px 0 0; padding:28px 0 48px; border-top:1px solid var(--line); }.footer-contact p { margin:0 0 9px; color:var(--muted); font-size:13px; }.footer-contact a { color:var(--blue); font-size:20px; }.footer-contact a:hover { color:var(--orange); }.footer { display:flex; justify-content:space-between; gap:20px; padding:17px 0 35px; color:var(--muted); font-size:11px; }.footer a { color:var(--blue); }
@media (max-width:900px) { .page { grid-template-columns:1fr; }.sidebar { position:relative; min-height:auto; padding:27px 22px 25px; border-right:0; border-bottom:1px solid var(--line); }.intro { max-width:520px; }.side-nav { flex-direction:row; flex-wrap:wrap; gap:8px 18px; margin-top:29px; }.side-contact { flex-direction:row; flex-wrap:wrap; gap:5px 18px; margin-top:27px; }.content { padding:0 22px; }.topbar { height:58px; }.section { grid-template-columns:1fr; gap:22px; padding-top:59px; }.news-section { padding-top:40px; }.work-primary { grid-template-columns:1fr; gap:25px; }.work-grid { gap:25px; }.record-grid { gap:25px; }.publication { grid-template-columns:1fr; gap:14px; } }
@media (max-width:600px) { .topbar span:first-child { max-width:190px; line-height:1.25; }.topbar-mark { white-space:nowrap; }.news-item { grid-template-columns:1fr; gap:2px; }.work-grid,.research-columns,.record-grid { grid-template-columns:1fr; }.work-row { grid-template-columns:1fr 25px; gap:12px; }.work-row p { grid-column:1 / -1; }.work-row:first-of-type { margin-top:45px; }.work-info h2 { font-size:30px; }.flow span { font-size:7px; }.path-item { grid-template-columns:1fr; gap:5px; }.footer { flex-wrap:wrap; }.footer span:nth-child(2) { display:none; } }