:root{--black:#080808;--ink:#121212;--paper:#f1f1ee;--gray:#9b9b97;--line:rgba(255,255,255,.2);--darkline:rgba(0,0,0,.16)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--paper);font-family:Inter,"Noto Sans TC","PingFang TC",system-ui,sans-serif;line-height:1.72;overflow-x:hidden}a{color:inherit;text-decoration:none}.serif{font-family:Georgia,"Noto Serif TC","Times New Roman",serif}.mono{font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;background:rgba(8,8,8,.88);backdrop-filter:blur(16px)}.brand{font-weight:800;letter-spacing:-.07em;font-size:19px}.navlinks{display:flex;gap:24px}.navlinks a{font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em;text-transform:uppercase;color:#bcbcb8}.navlinks a:hover,.navlinks a.current{color:#fff}.page-hero{min-height:68svh;padding:12vh 9vw 10vh;position:relative;overflow:hidden;display:flex;align-items:end;border-bottom:1px solid var(--line)}.page-hero.white{background:var(--paper);color:var(--black);border-color:var(--darkline)}.page-hero h1{font-size:clamp(65px,12vw,178px);line-height:.76;letter-spacing:-.09em;max-width:1100px;margin:0}.page-hero h1 .thin{font-weight:350}.page-hero p{max-width:620px;font-size:18px;line-height:1.6;margin:34px 0 0}.hero-index{position:absolute;right:6vw;top:25%;font:clamp(150px,26vw,400px)/.7 Georgia,serif;color:rgba(255,255,255,.07)}.white .hero-index{color:rgba(0,0,0,.06)}.hero-plane{position:absolute;right:8vw;bottom:-16vw;width:min(55vw,680px);aspect-ratio:1;border:1px solid currentColor;opacity:.25;transform:rotate(32deg) skewY(-16deg);pointer-events:none}.hero-plane:after,.hero-plane:before{content:"";position:absolute;inset:13%;border:1px solid currentColor}.hero-plane:before{inset:25%}.content{padding:120px 9vw;position:relative}.content.white{background:var(--paper);color:var(--black)}.intro{display:grid;grid-template-columns:.7fr 1.3fr;gap:10vw;padding-bottom:80px;border-bottom:1px solid currentColor}.intro h2{font-size:clamp(36px,5vw,76px);letter-spacing:-.065em;line-height:.88;margin:0}.intro p{font-size:18px;margin:0;max-width:650px}.chapter{display:grid;grid-template-columns:150px minmax(0,1fr);gap:5vw;padding:90px 0;border-bottom:1px solid currentColor}.chapter-num{font:11px ui-monospace,SFMono-Regular,monospace;letter-spacing:.13em;padding-top:10px}.chapter-head h2{font-size:clamp(38px,5.5vw,86px);line-height:.9;letter-spacing:-.065em;margin:0 0 34px}.chapter-head h3{font-size:clamp(25px,3vw,46px);line-height:1.05;letter-spacing:-.045em;margin:50px 0 20px}.chapter p,.chapter li{font-size:16px;max-width:800px}.chapter p{margin:0 0 21px}.chapter ul,.chapter ol{margin:0;padding-left:1.35em;display:grid;gap:15px;max-width:850px}.chapter li::marker{font-weight:800}.evidence{margin:50px 0 25px;min-height:260px;border:1px solid currentColor;display:grid;place-items:center;position:relative;overflow:hidden;background:repeating-linear-gradient(135deg,transparent 0 17px,rgba(127,127,127,.1) 18px 19px)}.evidence:before,.evidence:after{content:"";position:absolute;background:currentColor;opacity:.17}.evidence:before{width:1px;height:100%;left:50%}.evidence:after{height:1px;width:100%;top:50%}.evidence span{position:relative;z-index:1;background:inherit;padding:12px 16px;border:1px solid currentColor;font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.11em;text-transform:uppercase}.evidence small{position:absolute;left:15px;bottom:12px;font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em}.project-lead{font-size:21px!important;line-height:1.55}.project-lead b{font-weight:700}.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0 0}.pill-list span{border:1px solid currentColor;border-radius:100px;padding:6px 11px;font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em}.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:currentColor;margin-top:40px;border:1px solid currentColor}.subgrid article{background:var(--paper);padding:32px;color:var(--black)}.content:not(.white) .subgrid article{background:var(--black);color:var(--paper)}.subgrid h4{margin:0 0 12px;font-size:23px;line-height:1.1;letter-spacing:-.04em}.note{border-left:2px solid currentColor;padding:15px 20px;margin:30px 0;font-size:14px;opacity:.8}.footer{padding:60px 9vw;background:#080808;color:#ccc;display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);font-size:13px}.footer a{text-decoration:underline;text-underline-offset:4px}
/* Scroll choreography */[data-enter]{opacity:0;will-change:transform,opacity,filter,clip-path;transition:opacity .7s ease,transform 1.1s cubic-bezier(.18,.82,.22,1),filter .85s ease,clip-path 1s cubic-bezier(.18,.82,.22,1)}[data-enter="clip-left"]{transform:translateX(-90px);clip-path:inset(0 100% 0 0)}[data-enter="clip-right"]{transform:translateX(90px);clip-path:inset(0 0 0 100%)}[data-enter="rise"]{transform:translateY(80px);filter:blur(8px)}[data-enter="drop"]{transform:translateY(-60px);filter:blur(7px)}[data-enter="scale"]{transform:scale(.78);filter:blur(5px)}[data-enter="rotate"]{transform:translate(70px,45px) rotate(12deg) scale(.9)}[data-enter="unfold"]{transform:perspective(850px) rotateX(-58deg) translateY(80px);transform-origin:top}[data-enter="line"]{transform:scaleX(0);transform-origin:left}[data-enter].in{opacity:1;transform:none;filter:none;clip-path:inset(0)}.parallax{will-change:transform}@media(max-width:760px){.nav{height:58px;padding:0 6vw}.navlinks{gap:13px}.navlinks a{font-size:9px}.navlinks a:nth-child(2){display:none}.page-hero{min-height:62svh;padding:13vh 8vw 9vh}.page-hero h1{font-size:clamp(58px,17vw,100px)}.page-hero p{font-size:16px}.content{padding:75px 8vw}.intro{grid-template-columns:1fr;gap:27px;padding-bottom:58px}.intro p{font-size:16px}.chapter{grid-template-columns:1fr;gap:12px;padding:65px 0}.chapter p,.chapter li{font-size:15px}.chapter-head h3{margin-top:38px}.evidence{min-height:190px;margin-top:35px}.subgrid{grid-template-columns:1fr}.footer{padding:40px 8vw;display:block}.footer p{margin:0 0 14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-enter]{opacity:1;transform:none;filter:none;clip-path:none;transition:none}.parallax{transform:none!important}}
.course-evidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:48px 0 28px}.course-evidence figure{margin:0;border:1px solid currentColor;background:#161616;overflow:hidden;box-shadow:16px 18px 0 rgba(255,255,255,.08)}.course-evidence img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;filter:grayscale(1) contrast(1.08)}.course-evidence figcaption{padding:13px 15px;font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.09em;text-transform:uppercase}@media(max-width:760px){.course-evidence{grid-template-columns:1fr;gap:16px}.course-evidence img{aspect-ratio:4/3}}
.learning-loop{margin:50px 0 26px;border:1px solid currentColor;background:#111;overflow:hidden;box-shadow:18px 20px 0 rgba(255,255,255,.08)}.learning-loop img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) contrast(1.08)}.learning-loop figcaption{padding:14px 17px;font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em;text-transform:uppercase;color:#d7d7d1}.tool-stack{min-height:420px;margin:50px 0 28px;position:relative;isolation:isolate;border-top:1px solid currentColor;border-bottom:1px solid currentColor;display:grid;place-items:center}.tool{width:132px;height:132px;border:1px solid currentColor;border-radius:50%;background:#f0f0ed;color:#080808;display:grid;place-items:center;align-content:center;gap:5px;position:absolute;box-shadow:10px 12px 0 rgba(255,255,255,.13);transition:transform .35s ease}.tool i{font-style:normal;font-size:35px;line-height:1}.tool span{font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.08em;text-transform:uppercase}.tool:hover{transform:translateY(-10px) scale(1.05)!important;z-index:5}.t1{transform:translate(-230px,-94px)}.t2{transform:translate(-91px,-132px);background:#c2c2be}.t3{transform:translate(55px,-118px);background:#888884}.t4{transform:translate(190px,-76px);background:#e9e9e5}.t5{transform:translate(-265px,47px);background:#8d8d89}.t6{transform:translate(-122px,18px);background:#deded9}.t7{transform:translate(24px,12px);background:#4e4e4c;color:#f4f4f0}.t8{transform:translate(170px,37px);background:#b4b4af}.t9{transform:translate(-178px,145px);background:#f4f4f0}.t10{transform:translate(-26px,144px);background:#747470;color:#f4f4f0}.t11{transform:translate(126px,144px);background:#d1d1cc}@media(max-width:760px){.learning-loop{margin-top:35px}.tool-stack{min-height:590px;transform:scale(.79);transform-origin:top center;margin-bottom:-90px}.t1{transform:translate(-108px,-162px)}.t2{transform:translate(45px,-158px)}.t3{transform:translate(-146px,-41px)}.t4{transform:translate(8px,-45px)}.t5{transform:translate(151px,-37px)}.t6{transform:translate(-115px,75px)}.t7{transform:translate(39px,77px)}.t8{transform:translate(-155px,193px)}.t9{transform:translate(0,194px)}.t10{transform:translate(151px,192px)}.t11{transform:translate(0,310px)}}
.tool-wall{margin:4rem 0 0;max-width:720px;overflow:hidden;background:#e8e8e8}.tool-wall img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.self-funded-note{min-height:210px;margin:3.5rem 0 1rem;position:relative;overflow:visible;border-top:1px solid currentColor}.self-funded-note span{display:block;position:absolute;right:-3vw;top:42px;font:italic 700 clamp(38px,5.4vw,82px)/.95 Georgia,"Noto Serif TC","Times New Roman",serif;letter-spacing:-.055em;text-align:right;white-space:nowrap}.self-funded-note span:before{content:"SELF-FUNDED /";display:block;margin-bottom:12px;font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em;font-style:normal}
@media(max-width:760px){.self-funded-note{min-height:155px;margin-top:2.75rem}.self-funded-note span{right:0;top:34px;font-size:clamp(34px,11vw,52px)}.self-funded-note span:before{margin-bottom:9px;font-size:9px}}
/* Keep descenders in large Chinese and Latin headings inside the viewport. */
.page-hero h1{line-height:.9;padding:0 0 .12em}
.intro h2,.chapter-head h2{line-height:1.03;padding:0 0 .08em}
.section-label{padding:52px 0 0;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:760px){.page-hero h1{line-height:.94;padding-bottom:.16em}.intro h2,.chapter-head h2{line-height:1.08}}
.project-evidence{margin:50px 0 25px;position:relative}.project-evidence figure{margin:0;border:1px solid currentColor;overflow:hidden;background:#161616}.project-evidence img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}.project-evidence figcaption{padding:11px 13px;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}.project-evidence small{display:block;margin-top:13px;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.youtube-evidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.youtube-evidence figure{aspect-ratio:16/10}.youtube-evidence figure:nth-child(1){grid-column:1/-1;aspect-ratio:16/7}.youtube-evidence figure:nth-child(2) img{object-position:top}.youtube-evidence figure:nth-child(3) img,.youtube-evidence figure:nth-child(4) img{object-position:top}.youtube-evidence small{grid-column:1/-1}@media(max-width:760px){.youtube-evidence{grid-template-columns:1fr;gap:15px}.youtube-evidence figure,.youtube-evidence figure:nth-child(1){grid-column:auto;aspect-ratio:4/3}.youtube-evidence small{grid-column:auto}}
.quant-evidence{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.quant-evidence figure{grid-column:span 3;aspect-ratio:16/10}.quant-evidence figure:nth-child(1),.quant-evidence figure:nth-child(5){grid-column:1/-1;aspect-ratio:16/8}.quant-evidence figure:nth-child(2),.quant-evidence figure:nth-child(3),.quant-evidence figure:nth-child(4){grid-column:span 2}.quant-evidence small{grid-column:1/-1}@media(max-width:760px){.quant-evidence{grid-template-columns:1fr}.quant-evidence figure,.quant-evidence figure:nth-child(n){grid-column:auto;aspect-ratio:4/3}.quant-evidence small{grid-column:auto}}
.quant-evidence .agent-trace-evidence,.quant-evidence .social-sentiment-evidence{grid-column:1/-1}.quant-evidence .agent-trace-evidence img{display:block;max-width:520px;margin:0 auto;background:#fff}
.model-evidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.model-evidence figure{aspect-ratio:16/10}.model-evidence small{grid-column:1/-1}@media(max-width:760px){.model-evidence{grid-template-columns:1fr}.model-evidence small{grid-column:auto}}
.control-evidence{max-width:760px}.control-evidence figure{aspect-ratio:4/5}.control-evidence img{object-position:top left}
.knowledge-evidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.knowledge-evidence figure{aspect-ratio:9/11}.knowledge-evidence small{grid-column:1/-1}@media(max-width:760px){.knowledge-evidence{grid-template-columns:1fr}.knowledge-evidence figure{aspect-ratio:4/5}.knowledge-evidence small{grid-column:auto}}

/* User-provided evidence keeps its original colour and full image ratio. */
.course-evidence img,.project-evidence img{height:auto;aspect-ratio:auto;object-fit:contain;filter:none}
.course-evidence figure,.project-evidence figure{aspect-ratio:auto!important;overflow:visible}
.evidence-title{margin:0 0 14px!important;font:11px ui-monospace,SFMono-Regular,Menlo,monospace!important;letter-spacing:.13em;text-transform:uppercase}
.project-evidence-title{margin-top:70px!important}

/* Give evidence titles stronger hierarchy than their supporting captions. */
.project-evidence .evidence-heading{margin:0;padding:16px 18px;background:var(--black);color:var(--paper);font-size:clamp(24px,3vw,44px);line-height:1.08;letter-spacing:-.045em}
@media(max-width:760px){.project-evidence .evidence-heading{padding:14px 15px;font-size:clamp(22px,7vw,30px)}}

/* Prevent long bilingual project titles and local paths from overflowing narrow screens. */
.subgrid>*{min-width:0}
.subgrid h4,.subgrid p{overflow-wrap:anywhere;word-break:normal}

.more-projects{padding-top:110px;padding-bottom:110px;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;gap:7vw}
.more-projects-copy h2{font-size:clamp(44px,6vw,94px);line-height:1;letter-spacing:-.07em;margin:14px 0 0}
.more-projects-image{margin:0;border:1px solid var(--darkline);background:#ddd;overflow:hidden}
.more-projects-image img{display:block;width:100%;height:auto}
@media(max-width:760px){.more-projects{grid-template-columns:1fr;gap:34px;padding-top:75px;padding-bottom:75px}.more-projects-copy h2{font-size:clamp(42px,12vw,72px)}}

/* Mobile browsers scroll the root element; prevent off-screen enter animations widening it. */
@media(max-width:760px){html{overflow-x:hidden;overflow-x:clip}}

/* Evidence explanations stay readable before each image; animation is enhancement only. */
@media(max-width:760px){html,body{width:100%;max-width:100%;overflow-x:hidden}}
.project-evidence .evidence-summary{margin:0;padding:0 18px 18px;background:var(--black);color:var(--paper);font-size:16px;line-height:1.65}.project-evidence figcaption{color:var(--paper);border-top:1px solid rgba(255,255,255,.2)}.project-evidence .evidence-heading,.project-evidence .evidence-summary,.project-evidence figcaption{overflow-wrap:anywhere}
@keyframes evidence-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}.project-evidence .evidence-heading.evidence-in{animation:evidence-enter .55s cubic-bezier(.18,.82,.22,1) both}.project-evidence .evidence-summary.evidence-in{animation:evidence-enter .6s .1s cubic-bezier(.18,.82,.22,1) both}
@media(max-width:760px){.project-evidence .evidence-summary{padding:0 15px 16px;font-size:15px}}@media(prefers-reduced-motion:reduce){.project-evidence .evidence-heading.evidence-in,.project-evidence .evidence-summary.evidence-in{animation:none}}

/* On short mobile viewports, reveal content immediately so observer thresholds
   cannot leave lower sections transparent and unreachable. */
@media(max-width:760px){
html,body{height:auto;min-height:100%;touch-action:pan-y}
[data-enter],[data-enter].in{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
.parallax{transform:none!important}
}
