:root { --navy: #162437; --ink: #1c2b3f; --cloud: #edf4f6; --white: #fff; --sky: #7fb9d3; --grass: #89a963; --accent: #e57c55; --line: rgba(22,36,55,.15); }
* { box-sizing: border-box; } html { min-width: 320px; } body { background: #fff; color: var(--ink); font-family: "Noto Sans SC", sans-serif; margin: 0; } a { color: inherit; text-decoration: none; }
.site-header { align-items: center; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(0,0,0,.12); display: flex; height: 76px; justify-content: space-between; left: 0; padding: 0 clamp(22px,5vw,80px); position: absolute; top: 0; width: 100%; z-index: 10; }.site-header .brand, .site-header .site-nav a { color: #fff; }.site-header .site-nav a { opacity: .8; }.site-header .site-nav a:hover, .site-header .site-nav a.active { opacity: 1; }.site-header .github-link { background: rgba(255,255,255,.15); color: #fff; }.site-header .github-link:hover { background: rgba(255,255,255,.28); }.page-header { background: rgba(237,244,246,.9); border-bottom: 1px solid var(--line); position: fixed; backdrop-filter: blur(12px); }.brand { align-items: center; display: flex; font: 700 20px "Space Grotesk", sans-serif; gap: 10px; letter-spacing: -.7px; }.brand-mark { display: block; height: 84px; width: auto; max-height: 60vh; }.site-nav { align-items: center; display: flex; font-size: 14px; gap: clamp(12px,1.7vw,28px); }.site-nav a { opacity: .82; transition: opacity .2s, transform .2s; }.site-nav a:hover, .site-nav a.active { opacity: 1; transform: translateY(-2px); }.github-link { align-items: center; background: var(--ink); color: white; display: flex; gap: 7px; padding: 9px 12px; }.github-link svg { fill: currentColor; height: 18px; width: 18px; }.menu-toggle { background: transparent; border: 0; color: inherit; display: none; font: 600 12px "Noto Sans SC", sans-serif; }
.portal { align-items: center; color: white; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; overflow: hidden; padding: 110px 24px 90px; position: relative; }.portal::before { background: rgba(0,0,0,.35); content:""; inset:0; position:absolute; z-index:1; }.portal-bg { inset:0; position:absolute; }.portal-bglayer { background-position:center; background-size:cover; inset:0; opacity:0; position:absolute; transition:opacity 3s ease; }.portal-bglayer.active { opacity:1; }.portal-sky { display:none; }.portal-glass { display:none; }.portal-intro { position: relative; text-align: center; text-shadow: 0 3px 15px rgba(21,53,67,.28); z-index: 2; }.portal-kicker { font: 500 12px "Space Grotesk", sans-serif; letter-spacing: .22em; margin: 0 0 19px; }.portal h1 { font: 700 clamp(65px,11vw,150px)/.9 "Space Grotesk",sans-serif; letter-spacing: .15em; margin: 0; }.portal-subtitle { font: 400 clamp(15px,1.7vw,22px) "Space Grotesk",sans-serif; letter-spacing: .02em; margin: 24px 0 0; }.cursor { animation: blink 1s step-end infinite; margin-left: 3px; }.portal-links { display: grid; gap: 8px; grid-template-columns: repeat(3,minmax(150px,210px)); margin-top: 63px; position: relative; z-index: 2; }.portal-links a { align-items: center; backdrop-filter: blur(5px); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.42); display: flex; font-size: 15px; gap: 9px; padding: 13px 14px; transition: background .25s,transform .25s; }.portal-links a:hover { background: rgba(22,36,55,.31); transform: translateY(-4px); }.portal-links span { font: 11px "Space Grotesk",sans-serif; opacity:.75; }.portal-links b { font-size: 18px; font-weight: 400; margin-left:auto; }.portal-footer { bottom: 27px; font: 11px "Space Grotesk",sans-serif; letter-spacing:.18em; margin:0; position:absolute; z-index:2; }
.inner-page { margin: 0 auto; max-width: 1240px; min-height: calc(100vh - 68px); padding: 170px clamp(24px,7vw,100px) 110px; }.page-number { color: var(--accent); font: 600 12px "Space Grotesk",sans-serif; letter-spacing:.16em; margin:0 0 28px; }.inner-page h1 { font: 600 clamp(50px,7vw,100px)/1.02 "Space Grotesk","Noto Sans SC",sans-serif; letter-spacing:-.075em; margin:0; }.inner-page h1 em { color:var(--accent); font-style:normal; }.page-intro { font-size:20px; line-height:1.8; margin:38px 0 64px; max-width:660px; }.reading-grid { display:grid; gap:10vw; grid-template-columns:1fr 1fr; margin-top:65px; max-width:1000px; }.reading-grid .lead { font-size:25px; line-height:1.65; margin:0; }.reading-grid div p { color:#4f5e6d; line-height:1.95; margin:0 0 22px; }.facts { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); margin-top:90px; }.facts div { border-right:1px solid var(--line); padding:23px 22px 20px 0; }.facts div+div { padding-left:22px; }.facts div:last-child { border:0; }.facts span,.project-list article>span,.project-list article div>p,.long-list span,.timeline-page span,.contact-list span { color:var(--accent); display:block; font:600 11px "Space Grotesk",sans-serif; letter-spacing:.12em; }.facts b { display:block; font-size:16px; margin-top:13px; }.project-list { border-top:1px solid var(--line); }.project-list article { align-items:center; border-bottom:1px solid var(--line); display:grid; gap:30px; grid-template-columns:70px 1fr auto; padding:33px 0; }.project-list article h2 { font:600 clamp(26px,3vw,42px) "Space Grotesk","Noto Sans SC",sans-serif; letter-spacing:-.05em; margin:7px 0; }.project-list article div>p:last-child { color:#4f5e6d; line-height:1.7; margin:0; max-width:600px; }.project-list a,.project-list b { border-bottom:1px solid var(--ink); font-size:14px; padding-bottom:5px; }.long-list { list-style:none; margin:68px 0 0; max-width:900px; padding:0; }.long-list li { border-top:1px solid var(--line); display:grid; gap:38px; grid-template-columns:65px 1fr; padding:31px 0; }.long-list h2,.timeline-page h2 { font-size:24px; margin:0 0 12px; }.long-list p,.timeline-page p { color:#4f5e6d; line-height:1.8; margin:0; }.thought-page { min-height:calc(100vh - 68px); }.empty-state { border-top:1px solid var(--line); margin-top:70px; max-width:800px; padding-top:25px; }.empty-state span { color:#96b7c9; font:12px "Space Grotesk",sans-serif; letter-spacing:.12em; }.empty-state p { color:var(--ink); font-size:22px; margin:14px 0 0; }.timeline-page { margin-top:70px; max-width:900px; }.timeline-page article { border-top:1px solid var(--line); padding:30px 0 35px 90px; position:relative; }.timeline-page span { left:0; position:absolute; top:34px; }.contact-list { border-top:2px solid var(--ink); margin-top:75px; max-width:950px; }.contact-list>a,.contact-list>div { align-items:center; border-bottom:1px solid rgba(28,43,63,.35); display:grid; gap:20px; grid-template-columns:180px 1fr auto; padding:23px 0; }.contact-list b { font:500 20px "Space Grotesk","Noto Sans SC",sans-serif; }.contact-list i { font-size:25px; font-style:normal; } footer { align-items:center; background:var(--ink); color:#d9e2e7; display:flex; font:11px "Space Grotesk",sans-serif; justify-content:space-between; letter-spacing:.08em; padding:26px clamp(22px,5vw,80px); }
.page-header { background: rgba(22,36,55,.96); border-bottom-color: rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(22,36,55,.12); }
.home-header .brand > span { font-size: 30px; }
.page-header .menu-toggle { color: #fff; }
.page-header .site-nav { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.page-header .github-link, .site-header.page-header .github-link:hover { background: transparent; border: 0; box-shadow: none; padding: 0; }
.portal-logo { aspect-ratio: 1; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; box-shadow: 0 8px 28px rgba(0,0,0,.3); margin: 0 auto 22px; overflow: hidden; width: clamp(76px,7vw,104px); }
.portal-logo img { display: block; height: 100%; object-fit: cover; transform: translate(-1px,calc(9% - 2px)) scale(1.85); width: 100%; }
.portal-intro, .portal-links { transform: translateY(clamp(-24px,-2.4vh,-14px)); }
@keyframes blink { 50% { opacity:0; } }
@media(max-width:900px){.site-nav{gap:12px;font-size:12px;}.github-link span{display:none;}.portal-links{grid-template-columns:repeat(2,minmax(150px,210px));}.reading-grid{gap:50px;}.project-list article{grid-template-columns:45px 1fr;}.project-list article>a,.project-list article>b{grid-column:2;width:max-content;}.contact-list>a,.contact-list>div{grid-template-columns:130px 1fr auto;}}
@media(max-width:650px){.site-header{height:64px;padding:0 20px;}.menu-toggle{display:block;}.site-nav{background:var(--cloud);border-bottom:1px solid var(--line);display:none;flex-direction:column;gap:18px;left:0;padding:25px;position:absolute;top:64px;width:100%;}.site-header .site-nav{background:rgba(0,0,0,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.12);}.site-header .site-nav a{color:#fff;opacity:.8;}.site-header .site-nav a:hover,.site-header .site-nav a.active{opacity:1;}.site-header .github-link{background:rgba(255,255,255,.15);color:#fff;}.site-nav.open{display:flex;}.github-link span{display:inline;}.portal{padding-top:80px;}.portal-links{grid-template-columns:1fr 1fr;margin-top:47px;width:100%;}.portal-links a{font-size:14px;padding:12px 10px;}.portal-kicker{font-size:10px;}.inner-page{padding:125px 24px 75px;}.page-intro{font-size:17px;margin:30px 0 47px;}.reading-grid{display:block;margin-top:46px;}.reading-grid .lead{font-size:21px;margin-bottom:33px;}.facts{display:block;margin-top:60px;}.facts div,.facts div+div{border-bottom:1px solid var(--line);border-right:0;padding:18px 0;}.long-list{margin-top:45px;}.long-list li{gap:20px;grid-template-columns:40px 1fr;}.project-list article{gap:15px;padding:25px 0;}.timeline-page{margin-top:48px;}.timeline-page article{padding-left:0;}.timeline-page span{margin-bottom:20px;position:static;}.contact-list>a,.contact-list>div{grid-template-columns:1fr auto;}.contact-list span{grid-column:span 2;}.contact-list b{font-size:16px;}footer{padding:22px 20px;}.portal-footer{font-size:9px;}}


/* 除欢迎页外的栏目：全屏全息投影视频背景 */
body.inner-video-page { background: #07111d; isolation: isolate; position: relative; }
.inner-page-video { height: 100vh; inset: 0; object-fit: cover; pointer-events: none; position: fixed; width: 100vw; z-index: 0; }
.inner-video-overlay { background: rgba(0,0,0,.34); display: block; inset: 0; pointer-events: none; position: fixed; z-index: 1; }
body.inner-video-page .inner-page { background: transparent; border: 0; box-shadow: none; color: #fff; position: relative; z-index: 2; }
body.inner-video-page .reading-grid, body.inner-video-page .facts, body.inner-video-page .project-list article, body.inner-video-page .long-list li, body.inner-video-page .thought-manifesto, body.inner-video-page .thought-directions, body.inner-video-page .empty-state, body.inner-video-page .timeline-page article, body.inner-video-page .contact-list > a, body.inner-video-page .contact-list > div { -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); background: rgba(7,17,29,.42); border: 1px solid rgba(255,255,255,.28); border-radius: 2px; box-shadow: none; }
body.inner-video-page .inner-page > h1 { color: #fff; padding: 0; text-shadow: 0 3px 18px rgba(0,0,0,.48); width: auto; }
body.inner-video-page .page-intro { color: rgba(255,255,255,.88); padding: 0; text-shadow: 0 2px 14px rgba(0,0,0,.52); }
body.inner-video-page .page-number, body.inner-video-page .inner-page h1 em, body.inner-video-page .inner-page h2, body.inner-video-page .inner-page a, body.inner-video-page .inner-page b { color: #fff; }
body.inner-video-page .reading-grid .lead, body.inner-video-page .reading-grid div p, body.inner-video-page .project-list article div > p:last-child, body.inner-video-page .long-list p, body.inner-video-page .timeline-page p, body.inner-video-page .thought-columns p, body.inner-video-page .thought-closing, body.inner-video-page .empty-state p, body.inner-video-page .contact-list b { color: rgba(255,255,255,.82); }
body.inner-video-page .facts span, body.inner-video-page .project-list article > span, body.inner-video-page .project-list article div > p, body.inner-video-page .long-list span, body.inner-video-page .timeline-page span, body.inner-video-page .contact-list span, body.inner-video-page .empty-state span, body.inner-video-page .thought-index { color: rgba(255,255,255,.7); }
body.inner-video-page .facts div, body.inner-video-page .project-list, body.inner-video-page .long-list li, body.inner-video-page .timeline-page article, body.inner-video-page .contact-list, body.inner-video-page .contact-list > a, body.inner-video-page .contact-list > div { border-color: rgba(255,255,255,.22); }
body.inner-video-page .project-list a, body.inner-video-page .project-list b { border-bottom-color: rgba(255,255,255,.72); }
body.inner-video-page .thought-tags span { background: rgba(7,17,29,.48); border-color: rgba(255,255,255,.24); color: #fff; }
body.inner-video-page .reading-grid, body.inner-video-page .thought-manifesto, body.inner-video-page .thought-directions { padding: 26px; }
body.inner-video-page .facts { padding: 0 22px; }
body.inner-video-page .project-list article { margin-bottom: 12px; padding-left: 24px; padding-right: 24px; }
body.inner-video-page .long-list li { margin-bottom: 12px; padding-left: 24px; padding-right: 24px; }
body.inner-video-page .timeline-page article { margin-bottom: 12px; padding-left: 114px; padding-right: 24px; }
body.inner-video-page .timeline-page span { left: 24px; }
body.inner-video-page .contact-list > a, body.inner-video-page .contact-list > div { margin-bottom: 12px; padding-left: 24px; padding-right: 24px; }
body.inner-video-page .empty-state { padding: 25px 24px; }
body.inner-video-page .page-header { background: rgba(13,28,45,.78); border-bottom-color: rgba(255,255,255,.2); }
body.inner-video-page footer { background: rgba(13,28,45,.92); position: relative; z-index: 2; }

/* 桌面端内页：单屏文字气泡信息墙 */
@media (min-width: 1000px) and (min-height: 650px) {
	body.inner-video-page { overflow: hidden; }
	body.inner-video-page footer { display: none; }
	body.inner-video-page .inner-page { display: grid; gap: 14px; grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: minmax(230px,.9fr) minmax(0,1.3fr); height: 100vh; max-width: none; min-height: 0; overflow: hidden; padding: 112px clamp(36px,5vw,90px) 26px; }
	body.inner-video-page .page-number { left: clamp(36px,5vw,90px); margin: 0; position: absolute; top: 92px; }
	body.inner-video-page .inner-page:has(> .page-intro) > h1 { grid-column: 1 / 6; grid-row: 1; }
	body.inner-video-page .inner-page > h1 { align-items: center; background: rgba(7,17,29,.5); border: 1px solid rgba(255,255,255,.3); border-radius: 30px; display: flex; font-size: clamp(40px,4.3vw,64px); line-height: .94; margin: 0; overflow: hidden; padding: clamp(20px,2.2vw,34px); word-break: keep-all; }
	body.inner-video-page .inner-page > h1 em { white-space: nowrap; }
	body.inner-video-page .inner-page > .page-intro { align-items: flex-end; background: rgba(7,17,29,.4); border: 1px solid rgba(255,255,255,.28); border-radius: 38px 18px 38px 18px; display: flex; font-size: clamp(15px,1.3vw,19px); grid-column: 6 / 13; grid-row: 1; line-height: 1.7; margin: 0; max-width: none; overflow: hidden; padding: clamp(22px,2.6vw,40px); }
	body.inner-video-page .project-list, body.inner-video-page .long-list, body.inner-video-page .timeline-page { border: 0; display: grid; gap: 12px; grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(6,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); margin: 0; max-width: none; min-height: 0; overflow: hidden; padding: 0; }
	body.inner-video-page .project-list article, body.inner-video-page .long-list li, body.inner-video-page .timeline-page article { margin: 0; min-height: 0; overflow: hidden; padding: clamp(12px,1.2vw,19px); }
	body.inner-video-page .project-list article:nth-child(-n+3), body.inner-video-page .long-list li:nth-child(-n+3), body.inner-video-page .timeline-page article:nth-child(-n+3) { grid-column: span 2; }
	body.inner-video-page .project-list article:nth-child(4), body.inner-video-page .project-list article:nth-child(5), body.inner-video-page .long-list li:nth-child(4), body.inner-video-page .long-list li:nth-child(5), body.inner-video-page .timeline-page article:nth-child(4), body.inner-video-page .timeline-page article:nth-child(5) { grid-column: span 3; }
	body.inner-video-page .project-list article:nth-child(n+6), body.inner-video-page .timeline-page article:nth-child(n+6) { grid-column: span 2; }
	body.inner-video-page .long-list li:nth-child(6) { grid-column: span 2; }
	body.inner-video-page .long-list li:nth-child(7) { grid-column: span 4; }
	body.inner-video-page .project-list article { gap: 10px; grid-template-columns: 30px minmax(0,1fr) auto; }
	body.inner-video-page .project-list article h2, body.inner-video-page .long-list h2, body.inner-video-page .timeline-page h2 { font-size: clamp(16px,1.5vw,23px); margin: 3px 0 6px; }
	body.inner-video-page .project-list article div > p:last-child, body.inner-video-page .long-list p, body.inner-video-page .timeline-page p { -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; font-size: clamp(11px,.82vw,13px); line-height: 1.55; overflow: hidden; }
	body.inner-video-page .project-list article div > p:first-child { font-size: 9px; }
	body.inner-video-page .project-list article > a, body.inner-video-page .project-list article > b { font-size: 11px; }
	body.inner-video-page .long-list li { gap: 12px; grid-template-columns: 30px minmax(0,1fr); }
	body.inner-video-page .timeline-page article { padding-left: clamp(48px,5vw,78px); }
	body.inner-video-page .timeline-page span { left: 16px; top: 18px; }

	body.inner-video-page .inner-page:has(> .reading-grid) > h1 { grid-column: 1 / 6; grid-row: 1; }
	body.inner-video-page .inner-page > .reading-grid { display: block; margin: 0; max-width: none; min-height: 0; overflow: hidden; padding: clamp(16px,1.6vw,25px); }
	body.inner-video-page .inner-page > .reading-grid:nth-of-type(1) { display: grid; gap: 24px; grid-column: 6 / 13; grid-row: 1; grid-template-columns: .8fr 1.2fr; }
	body.inner-video-page .inner-page > .reading-grid:nth-of-type(2) { grid-column: 1 / 5; grid-row: 2; }
	body.inner-video-page .inner-page > .reading-grid:nth-of-type(3) { grid-column: 5 / 9; grid-row: 2; }
	body.inner-video-page .inner-page > .facts { display: grid; grid-column: 9 / 13; grid-row: 2; grid-template-columns: 1fr; margin: 0; min-height: 0; overflow: hidden; padding: 12px 20px; }
	body.inner-video-page .inner-page > .facts div, body.inner-video-page .inner-page > .facts div + div { border-bottom: 1px solid rgba(255,255,255,.18); border-right: 0; padding: 12px 0; }
	body.inner-video-page .reading-grid .lead { -webkit-box-orient: vertical; -webkit-line-clamp: 6; display: -webkit-box; font-size: clamp(16px,1.45vw,23px); line-height: 1.55; margin: 0 0 12px; overflow: hidden; }
	body.inner-video-page .reading-grid div p { -webkit-box-orient: vertical; -webkit-line-clamp: 4; display: -webkit-box; font-size: clamp(11px,.9vw,14px); line-height: 1.65; margin-bottom: 10px; overflow: hidden; }

	body.inner-video-page .thought-manifesto { grid-column: 1 / 9; grid-row: 2; margin: 0; max-width: none; min-height: 0; overflow: hidden; }
	body.inner-video-page .thought-directions { grid-column: 9 / 13; grid-row: 2; margin: 0; max-width: none; min-height: 0; overflow: hidden; }
	body.inner-video-page .thought-manifesto blockquote { font-size: clamp(22px,2.6vw,40px); margin: 18px 0 24px; }
	body.inner-video-page .thought-columns { column-gap: 26px; }
	body.inner-video-page .thought-columns p { -webkit-box-orient: vertical; -webkit-line-clamp: 5; display: -webkit-box; font-size: 12px; line-height: 1.65; overflow: hidden; }

	body.inner-video-page .contact-list { border: 0; display: grid; gap: 14px; grid-column: 1 / -1; grid-row: 2; grid-template-columns: 7fr 5fr; margin: 0; max-width: none; min-height: 0; }
	body.inner-video-page .contact-list > a, body.inner-video-page .contact-list > div { align-content: center; margin: 0; min-height: 0; }
}


/* 个人感想页 */
.thought-manifesto { border-top: 1px solid var(--line); margin-top: 72px; max-width: 1040px; padding-top: 26px; }
.thought-index { color: var(--accent); font: 600 11px "Space Grotesk", sans-serif; letter-spacing: .14em; margin: 0; }
.thought-manifesto blockquote { font: 500 clamp(30px,4.1vw,57px)/1.28 "Noto Sans SC", sans-serif; letter-spacing: -.055em; margin: 38px 0 58px; max-width: 840px; }
.thought-columns { column-count: 2; column-gap: 66px; max-width: 940px; }
.thought-columns p { break-inside: avoid; color: #344a5e; line-height: 2; margin: 0 0 23px; }
.thought-directions { border-top: 1px solid var(--line); margin-top: 78px; max-width: 1040px; padding-top: 26px; }
.thought-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.thought-tags span { background: rgba(255,255,255,.56); border: 1px solid rgba(22,36,55,.2); font-size: 14px; padding: 10px 13px; }
.thought-closing { color: #344a5e; line-height: 1.9; margin: 30px 0 0; max-width: 620px; }
@media(max-width:650px) { .thought-manifesto { margin-top: 52px; } .thought-manifesto blockquote { margin: 30px 0 40px; } .thought-columns { column-count: 1; } .thought-directions { margin-top: 55px; } }