@charset "UTF-8";
:root {
  color-scheme: light;
  --bg:#f7f5ef; --soft:#ebe8df; --ink:#252823; --muted:#606359;
  --line:#d6d7cc; --accent:#805137;
  --serif:Georgia,'Songti SC','Noto Serif CJK SC',SimSun,serif;
  font:16px Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;
}
[data-theme=dark] {
  color-scheme:dark;
  --bg:#20231f; --ink:#eae9df; --muted:#b4b7aa;
  --line:#41463d; --accent:#e4b292; --soft:#2d332a;
}
* { box-sizing:border-box; }
/* Hide only the document scrollbar; preserve native scrolling and nested controls. */
html { scrollbar-width:none; }
html::-webkit-scrollbar { display:none; width:0; height:0; }
body { margin:0; color:var(--ink); background:var(--bg); }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
button { color:inherit; font:inherit; cursor:pointer; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
main:focus,h2[tabindex]:focus { outline:none; }
h1,h2,h3,p,figure { margin-top:0; }
h1,h2,h3 { text-wrap:balance; }
p { line-height:1.9; }
small { font-size:.875rem; line-height:1.8; }
.skip { position:fixed; top:-100px; left:16px; z-index:10; padding:12px; background:var(--ink); color:var(--bg); }
.skip:focus { top:10px; }
.site-shell { max-width:1380px; margin:auto; padding:0 60px; }
.site-header { display:flex; align-items:center; gap:28px; padding:30px 0; border-bottom:1px solid var(--line); }
.brand { font:600 2rem var(--serif); letter-spacing:-.04em; white-space:nowrap; }
.brand span { margin-left:6px; color:var(--accent); }
.site-subtitle { margin:6px auto 0 0; color:var(--muted); font-size:.875rem; white-space:nowrap; }
.site-header nav { display:flex; gap:28px; }
.site-header nav a { font-size:.9375rem; }
.site-header nav a[aria-current] { text-decoration:underline; text-underline-offset:7px; }
.github-nav { white-space:nowrap; font-size:.875rem; }
.theme-toggle { border:0; background:transparent; padding:8px 0 8px 16px; border-left:1px solid var(--line); white-space:nowrap; font-size:.875rem; }
main { min-height:65vh; padding-top:60px; }
.eyebrow { font-size:.75rem; letter-spacing:.12em; color:var(--muted); line-height:1.8; }
.editorial-hero h1 { font:clamp(4.2rem,8.5vw,7.7rem)/1.02 var(--serif); letter-spacing:-.055em; margin:27px 0 30px; }
.editorial-hero h1 em { font-weight:400; }
.hero-bottom { display:flex; justify-content:space-between; align-items:end; padding-bottom:50px; gap:24px; }
.hero-bottom p { font-size:1.1rem; line-height:1.85; margin:0; }
.hero-bottom a { font-size:.875rem; color:var(--muted); }
.cover { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:60px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); padding:36px 0 42px; margin-bottom:65px; }
.cover-copy { min-width:0; display:flex; flex-direction:column; align-items:start; justify-content:center; }
.cover h2 { font:2.3rem/1.5 var(--serif); margin:24px 0 16px; letter-spacing:-.03em; overflow-wrap:anywhere; }
.cover-copy p { max-width:460px; color:var(--muted); }
.text-link { border-bottom:1px solid var(--ink); padding-bottom:5px; font-size:.875rem; }
.loop-figure { min-width:0; margin:0; background:#e3e8da; padding:28px; color:#313c2e; display:flex; flex-direction:column; justify-content:center; }
.loop-figure figcaption { font-size:.75rem; letter-spacing:.08em; }
.flow { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:42px 0 18px; }
.flow>span { font:1.65rem var(--serif); text-align:center; }
.flow small { font:.75rem/2 sans-serif; display:block; color:#4e5b47; }
.flow b { font-weight:400; }
.return-flow { border-top:1px solid #89977f; padding-top:14px; font-size:.75rem; text-align:center; line-height:1.8; }
.loop-figure>p { font:italic 1.4rem/1.45 var(--serif); margin:30px 0 0; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:24px; }
.section-head h2 { font:1.75rem var(--serif); margin:0; }
.section-head a { color:var(--muted); font-size:.875rem; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 35px; }
.post-card { border-top:1px solid var(--line); padding:26px 0 35px; display:flex; flex-direction:column; }
.card-meta { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:.875rem; margin-bottom:20px; }
.post-card h2 { font:1.6rem/1.6 var(--serif); margin-bottom:14px; }
.post-card p { font-size:.9375rem; color:var(--muted); }
.card-bottom { display:flex; justify-content:space-between; margin-top:auto; padding-top:12px; color:var(--muted); font-size:.75rem; letter-spacing:.06em; }
.card-bottom>span:last-child { font-size:1.1rem; }
.page-intro { margin-bottom:50px; }
.page-intro h1 { font:4.2rem/1.2 var(--serif); letter-spacing:-.045em; margin:18px 0; overflow-wrap:anywhere; }
.page-intro p { color:var(--muted); }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.filters button { background:transparent; border:1px solid var(--line); padding:9px 14px; font-size:.875rem; border-radius:2px; }
.filters button[aria-pressed=true] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.result-count { font-size:.875rem; color:var(--muted); }
.article-layout { display:grid; grid-template-columns:minmax(0,760px) 220px; gap:70px; justify-content:center; }
.article { min-width:0; }
.back { display:inline-block; font-size:.875rem; color:var(--muted); margin-bottom:35px; }
.article header h1 { font:3rem/1.45 var(--serif); margin:18px 0 22px; letter-spacing:-.025em; overflow-wrap:anywhere; }
.dek { font-size:1.125rem; color:var(--muted); }
.article-meta { display:flex; flex-wrap:wrap; gap:18px; font-size:.875rem; color:var(--muted); border-bottom:1px solid var(--line); padding:0 0 28px; margin-bottom:32px; }
.thesis { font:1.3rem/1.9 var(--serif); border-left:2px solid var(--accent); padding:0 0 0 24px; margin:0 0 48px; }
.article-body section { scroll-margin-top:30px; margin-bottom:52px; }
.article-body h2 { font:1.65rem/1.7 var(--serif); margin:0 0 22px; }
.article-body p,.prose p { font-size:1.0625rem; line-height:2.1; margin:0 0 22px; overflow-wrap:anywhere; }
.toc { align-self:start; position:sticky; top:40px; margin-top:50px; }
[data-section] { display:flex; gap:12px; background:none; border:0; padding:0; text-align:left; font-size:.875rem; line-height:1.8; color:var(--muted); margin-top:20px; }
[data-section]>span { font: .875rem/1.8 var(--serif); }
.mobile-toc { display:none; }
.table-wrap { max-width:100%; overflow-x:auto; margin:26px 0; }
table { border-collapse:collapse; width:100%; min-width:580px; text-align:left; font-size:.875rem; line-height:1.8; }
th,td { padding:17px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
thead { background:var(--soft); }
th { font-weight:600; }
th:first-child { width:26%; }
.callout { background:var(--soft); padding:22px 26px; font:1.1rem/1.9 var(--serif); margin-top:28px; }
.citation { color:var(--accent); text-decoration:underline; text-underline-offset:2px; padding:0 2px; }
sup { font-size:.75em; line-height:0; }
.references { border-top:1px solid var(--line); padding-top:28px; margin-top:52px; }
.references h2 { font:1.35rem var(--serif); }
.references ol { padding-left:23px; }
.references li { font-size:.875rem; line-height:1.9; padding:6px 0; color:var(--muted); overflow-wrap:anywhere; }
.references a { text-decoration:underline; text-underline-offset:4px; }
.next-post { display:block; border-top:1px solid var(--line); padding-top:28px; margin-top:44px; }
.next-post small { display:block; color:var(--muted); margin-bottom:12px; }
.next-post strong { font:1.3rem/1.7 var(--serif); }
.about-layout { display:grid; grid-template-columns:minmax(0,700px) 280px; gap:80px; }
.prose h2 { font:1.6rem/1.6 var(--serif); margin:30px 0 18px; }
.prose h2:first-child { margin-top:0; }
.profile-note { background:var(--soft); padding:28px; align-self:start; }
.profile-note p { font:1.3rem/1.8 var(--serif); margin:22px 0; }
.profile-note hr { border:0; border-top:1px solid var(--line); margin:30px 0; }
.profile-note small { color:var(--muted); }
.github-box { padding:40px; background:var(--soft); display:flex; gap:28px; align-items:center; justify-content:space-between; margin-bottom:45px; }
.github-box h2 { font:1.6rem/1.6 var(--serif); margin:14px 0 10px; }
.github-box p { color:var(--muted); max-width:600px; margin:0; }
.status { white-space:nowrap; font-size:.875rem; border:1px solid var(--line); padding:9px 12px; color:var(--muted); }
.solid-link { white-space:nowrap; background:var(--ink); color:var(--bg); padding:12px 18px; font-size:.875rem; }
footer { border-top:1px solid var(--line); margin-top:75px; padding:25px 0 32px; display:flex; justify-content:space-between; gap:20px; font-size:.75rem; line-height:1.8; color:var(--muted); }
[data-theme=dark] .loop-figure { background:#35402f; color:#e2ead9; }
[data-theme=dark] .flow small { color:#bfcdb5; }
[data-theme=dark] .return-flow { border-color:#718367; }
@media(max-width:1100px) {
  .site-shell { padding:0 32px; }
  .site-header { gap:22px; }
  .site-subtitle { display:none; }
  .brand { margin-right:auto; }
  .site-header nav { gap:22px; }
  .cover { gap:30px; }
  .cover h2 { font-size:2rem; }
  .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns:minmax(0,680px) 190px; gap:35px; }
  .about-layout { grid-template-columns:minmax(0,1fr) 250px; gap:40px; }
}
@media(max-width:850px) {
  .article-layout { display:block; max-width:720px; margin:auto; }
  .toc { display:none; }
  .mobile-toc { display:block; border-block:1px solid var(--line); margin:0 0 38px; padding:17px 0; }
  .mobile-toc summary { cursor:pointer; font-size:.875rem; }
  .mobile-toc details[open] { padding-bottom:10px; }
}
@media(max-width:700px) {
  .site-shell { padding:0 22px; }
  .site-header { flex-wrap:wrap; gap:18px; padding:22px 0; }
  .brand { font-size:1.7rem; }
  .github-nav,.theme-toggle { font-size:.875rem; }
  .theme-toggle { padding-left:12px; }
  .site-header nav { order:3; width:100%; justify-content:space-between; gap:12px; }
  .site-header nav a { font-size:.875rem; padding:6px 0; }
  main { padding-top:40px; }
  .editorial-hero h1 { font-size:clamp(2.7rem,17vw,4.3rem); margin:26px 0; }
  .hero-bottom { display:block; padding-bottom:32px; }
  .hero-bottom p { font-size:1rem; margin-bottom:18px; }
  .cover { grid-template-columns:minmax(0,1fr); gap:28px; padding:28px 0; margin-bottom:42px; }
  .cover h2 { font-size:1.9rem; }
  .loop-figure { min-height:290px; }
  .section-head { gap:16px; align-items:start; }
  .section-head h2 { font-size:1.35rem; max-width:190px; }
  .section-head a { font-size:.875rem; white-space:nowrap; }
  .post-grid { grid-template-columns:minmax(0,1fr); }
  .card-meta { flex-direction:row; justify-content:space-between; }
  .post-card h2 { font-size:1.5rem; }
  .page-intro { margin-bottom:35px; }
  .page-intro h1 { font-size:2.8rem; }
  .article header h1 { font-size:2.05rem; }
  .article-meta { gap:10px 16px; }
  .thesis { font-size:1.15rem; padding-left:18px; margin-bottom:32px; }
  .article-body h2 { font-size:1.4rem; }
  .article-body p,.prose p { font-size:1rem; line-height:2.05; }
  .article-body section { margin-bottom:40px; }
  .about-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
  .github-box { padding:25px; flex-direction:column; align-items:start; }
  footer { flex-direction:column; gap:6px; margin-top:50px; }
}
@media(max-width:380px) {
  .site-header { gap:12px; }
  .loop-figure { padding:24px 18px; }
  .flow { gap:5px; }
  .flow>span { font-size:1.3rem; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
/* Two portfolio directions share content and the original palette. */
img{max-width:100%;height:auto;display:block} .muted{color:var(--muted)}
.design-switch{display:flex;justify-content:flex-end;gap:6px;align-items:center;padding:12px 0;font-size:.75rem;border-bottom:1px solid var(--line)}
.design-switch>span{color:var(--muted);margin-right:10px}.design-switch a{padding:7px 12px;border-radius:3px}.design-switch a[aria-current]{background:var(--soft)}
.personal-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:center;padding:16px 0 80px}
.personal-hero h1{font:clamp(2.2rem,3.7vw,3.65rem)/1.4 var(--serif);letter-spacing:-.04em;margin:24px 0}.personal-hero h1 em{font-style:normal;color:var(--muted)}
.hero-bio{font-size:1.05rem;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:28px 0}.solid-link,.outline-link{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:46px;padding:12px 20px}.outline-link{border:1px solid var(--line);font-size:.875rem}.solid-link:hover{background:var(--muted);color:var(--bg)}
.availability{color:var(--muted);font-size:.8rem;margin:20px 0 0}.status-dot{display:inline-block;width:7px;height:7px;background:#5b805b;border-radius:100%;margin-right:9px}
.portrait{margin:0}.portrait img{aspect-ratio:1/1.12;object-fit:cover;object-position:35% center}.portrait figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:.75rem;color:var(--muted)}
.project-feature{display:grid;grid-template-columns:.8fr 1.2fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:36px 0;gap:40px;align-items:center;margin-bottom:80px}
.project-feature h2{font:2.6rem var(--serif);margin:18px 0}.project-feature p{color:var(--muted);font-size:.9375rem}.project-feature .project-tagline{font:1.5rem/1.7 var(--serif);color:var(--ink)}.project-image{display:block;background:var(--soft);padding:20px}.project-image img{width:100%}
.principles{margin-bottom:80px}.principles>h2{font:2rem/1.6 var(--serif);margin:18px 0 30px}.principle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.principle-grid>div{border-top:1px solid var(--line);padding-top:22px}.principle-grid span{font-size:.75rem;color:var(--muted)}.principle-grid h3{font-size:1.2rem;font-weight:500;margin:16px 0 10px}.principle-grid p{font-size:.9375rem;color:var(--muted)}
.contact-banner{margin-top:70px;padding:40px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px}.contact-banner h2{font:1.8rem/1.6 var(--serif);margin:12px 0}.contact-banner p{color:var(--muted);font-size:.875rem}.contact-banner a{white-space:nowrap}
.about-photo{margin-bottom:24px}.profile-note h2{font:2rem var(--serif)}dl{font-size:.875rem;line-height:1.8}dt{color:var(--muted);margin-top:18px}dd{margin:3px 0 0}.email-line{font-size:.875rem!important;overflow-wrap:anywhere}.case-intro{max-width:860px}.case-intro h1{font-size:clamp(2.8rem,5vw,4.6rem);line-height:1.35}.case-figure{margin:0 0 70px;padding:28px;background:var(--soft)}.case-figure img{width:100%}.case-figure figcaption{font-size:.8rem;line-height:1.8;color:var(--muted);margin-top:16px}.case-body{max-width:850px;margin:auto}.case-body section{margin-bottom:64px}.case-body h2{margin:16px 0 22px}.decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0}.decision-grid>div{border:1px solid var(--line);padding:20px}.decision-grid h3{font-size:1rem;line-height:1.8}.decision-grid p{font-size:.875rem}.decision-grid .chosen{background:var(--soft);border-color:var(--ink)}.system-flow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--soft);padding:22px;margin:28px 0;font-size:.875rem}.system-flow b{font-weight:400;color:var(--muted)}.case-end{border-top:1px solid var(--line);padding-top:30px}
.product-hero{text-align:center;max-width:920px;margin:0 auto;padding:12px 0 75px}.avatar{width:78px;height:78px;object-fit:cover;object-position:20% center;border-radius:100%;margin:0 auto 20px}.product-hero h1{font-size:clamp(3rem,6vw,5.7rem);line-height:1.2;letter-spacing:-.07em;font-weight:500;margin:26px 0}.product-hero>p{color:var(--muted);line-height:1.9}.product-hero .actions{justify-content:center}
[data-design=openai] .site-shell{max-width:1320px}[data-design=openai] .brand{font-family:inherit;letter-spacing:-.05em}[data-design=openai] .site-header{border-bottom:0}[data-design=openai] .site-subtitle{font-size:.75rem}[data-design=openai] .solid-link,[data-design=openai] .outline-link,[data-design=openai] .filters button{border-radius:28px}
[data-design=openai] .project-feature{display:flex;flex-direction:column;align-items:stretch;border:0;padding:0;gap:24px}[data-design=openai] .project-feature-copy{max-width:720px;text-align:center;margin:auto}[data-design=openai] .project-feature h2{font-family:inherit;font-size:2.5rem;line-height:1.2;font-weight:500}[data-design=openai] .project-feature .project-tagline{font-family:inherit;font-size:1.5rem}[data-design=openai] .project-image{padding:48px 65px;border-radius:18px}[data-design=openai] .project-image img{border-radius:8px}[data-design=openai] .principles>h2,[data-design=openai] .section-head h2,[data-design=openai] .contact-banner h2{font-family:inherit;font-weight:500}[data-design=openai] .post-grid{gap:20px}[data-design=openai] .post-card{border:0;background:var(--soft);padding:26px;border-radius:16px}[data-design=openai] .post-card h2{font-family:inherit;font-size:1.35rem;font-weight:500}[data-design=openai] .page-intro{max-width:860px;text-align:center;margin:20px auto 60px}[data-design=openai] .page-intro h1{font-family:inherit;font-weight:500;letter-spacing:-.05em}[data-design=openai] .page-intro .actions{justify-content:center}[data-design=openai] .profile-note,[data-design=openai] .case-figure{border-radius:18px}[data-design=openai] .article header h1{font-family:inherit;font-weight:500}
a,button{transition:color 160ms ease,background-color 160ms ease,transform 160ms ease}.project-image:hover{transform:translateY(-3px)}.post-card:hover .card-bottom>span:last-child{transform:translate(2px,-2px)}.card-bottom>span:last-child{transition:transform 160ms ease}main{animation:arrive 240ms ease-out}@keyframes arrive{from{opacity:.75;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.personal-hero{gap:32px}.personal-hero h1{font-size:2.5rem}.project-feature{grid-template-columns:1fr 1.2fr;gap:28px}.principle-grid{gap:22px}.site-header{gap:18px}}
@media(max-width:700px){.design-switch{justify-content:center;font-size:.7rem}.design-switch a{padding:7px 9px}.design-switch>span{margin-right:2px}.personal-hero{grid-template-columns:minmax(0,1fr);padding:0 0 42px;gap:30px}.personal-hero h1{font-size:clamp(1.8rem,7.5vw,2.6rem)}.portrait img{aspect-ratio:1.25;object-position:center 58%}.hero-bio{font-size:.9375rem}.project-feature{grid-template-columns:minmax(0,1fr);margin-bottom:48px}.project-feature h2{font-size:2rem}.project-feature .project-tagline{font-size:1.3rem}.project-image{padding:12px}.principles{margin-bottom:48px}.principles>h2{font-size:1.6rem}.principle-grid{grid-template-columns:1fr;gap:12px}.contact-banner{display:block;margin-top:44px;padding:30px 0}.contact-banner h2{font-size:1.5rem}.product-hero{padding:0 0 45px}.product-hero h1{font-size:3.2rem}.product-hero>p{font-size:.875rem}.product-hero>p br{display:none}[data-design=openai] .project-image{padding:14px;border-radius:12px}[data-design=openai] .page-intro h1{font-size:2.5rem}.decision-grid{grid-template-columns:1fr}.case-figure{padding:12px;margin-bottom:40px}.case-body section{margin-bottom:44px}.case-intro h1{font-size:2.7rem}.about-layout .profile-note{max-width:100%}.about-photo{max-height:330px;width:100%;object-fit:cover}.actions{gap:10px}.solid-link,.outline-link{padding:12px 16px;gap:12px}.availability{font-size:.72rem}.page-intro h1 .muted{display:block;font-size:.6em;margin-top:14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Compact personal home: consistent rhythm, bounded media, quiet feedback. */
:root{--ease:cubic-bezier(.22,.68,0,1.05)}
.site-shell{max-width:1168px;padding:0 48px}.site-header{padding:20px 0;gap:24px}.site-subtitle{font-size:.75rem}.brand{font-size:1.8rem}.site-header nav{gap:24px}.design-switch{padding:7px 0;border-bottom:0;font-size:.75rem}.design-switch a{padding:6px 10px}.design-switch a[aria-current]{border-radius:6px}main{padding-top:32px;animation:none}.site-header{view-transition-name:site-header}.design-switch{view-transition-name:design-switch}
.compact-intro{display:flex;align-items:center;gap:24px;padding:16px 0 32px;border-bottom:1px solid var(--line);margin-bottom:32px}.small-portrait{width:112px;height:112px;object-fit:cover;object-position:30% center;border-radius:16px;flex-shrink:0}.identity{min-width:0}.identity h1{font:2.6rem/1.2 var(--serif);margin:7px 0 9px;letter-spacing:-.035em}.identity h1>span{display:block;font-size:1.125rem;letter-spacing:0;line-height:1.7;margin-top:8px}.identity-meta{font-size:.8125rem;color:var(--muted);margin:0;line-height:1.8}.identity-meta>span{padding:0 4px}.intro-role{font-size:.875rem;margin:7px 0 0}.contact-pill{margin-left:auto;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;border:1px solid var(--line);padding:10px 17px;font-size:.875rem;border-radius:24px;background:var(--bg)}.contact-pill .status-dot{margin:0}
.home-layout{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:40px}.home-primary{min-width:0}.home-section{margin-bottom:32px}.section-label{display:flex;align-items:baseline;gap:12px;margin-bottom:15px}.section-label h2{font:1.4rem/1.4 var(--serif);margin:0}.section-label>span{font-size:.6875rem;letter-spacing:.1em;color:var(--muted)}.section-content{min-width:0}.intro-text{font-size:1rem;line-height:1.85;margin:0 0 12px}.inline-links{display:flex;gap:24px;font-size:.8125rem;color:var(--muted)}.inline-links a{padding:4px 0}.home-rail{min-width:0;border-left:1px solid var(--line);padding-left:28px}.rail-block{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--line)}.rail-block h2{font:1.25rem/1.65 var(--serif);margin:9px 0 13px}.rail-block p{font-size:.875rem;line-height:1.85;color:var(--muted);margin:12px 0}.rail-email{font-size:.875rem;overflow-wrap:anywhere}.rail-case{display:block}.rail-case img{border-radius:6px;width:100%;margin:16px 0 12px}.rail-case strong{font-size:.875rem;font-weight:500;display:flex;justify-content:space-between}.rail-block:last-child{border:0}.city-list{letter-spacing:.03em}
.repo-row{display:grid;grid-template-columns:22px minmax(0,1fr) 16px;gap:10px;padding:17px 8px 17px 0;border-top:1px solid var(--line);border-radius:3px}.row-number{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.9}.repo-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 10px}.repo-title h3{font:1.06rem/1.5 var(--serif);margin:0;overflow-wrap:anywhere}.repo-status{font-size:.6875rem;line-height:1.8;color:var(--muted)}.repo-row p{font-size:.875rem;line-height:1.8;color:var(--muted);margin:7px 0}.repo-tech{font-size:.75rem;line-height:1.8;color:var(--muted)}.row-arrow{font-size:.875rem;color:var(--muted);transition:transform .18s var(--ease)}.more-link{display:flex;justify-content:space-between;padding:13px 0;font-size:.8125rem;border-top:1px solid var(--line);color:var(--muted)}.essay-row{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;gap:5px 12px;padding:15px 8px 15px 0;border-top:1px solid var(--line);border-radius:3px}.essay-category{grid-column:1/-1;font-size:.6875rem;color:var(--muted)}.essay-row h3{font:1rem/1.65 var(--serif);margin:0}.essay-time{font-size:.75rem;color:var(--muted);white-space:nowrap;line-height:2}.repo-row:hover,.essay-row:hover{background:var(--soft);color:var(--ink)}.repo-row:hover .row-arrow,.essay-row:hover .row-arrow{transform:translate(2px,-2px)}.contact-pill:hover{color:var(--ink);box-shadow:0 3px 12px #0000000d;transform:translateY(-1px)}a:active,button:active{transform:translateY(1px)}
.page-intro{margin-bottom:30px}.page-intro h1{font-size:2.6rem;line-height:1.4;margin:12px 0}.page-intro p{font-size:1rem}.project-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}.project-entry{padding:25px 0;border-top:1px solid var(--line);min-width:0}.project-entry-head{display:flex;gap:16px}.project-entry h2{font:1.45rem/1.5 var(--serif);margin:5px 0 14px;overflow-wrap:anywhere}.project-entry>p{font-size:.9375rem;line-height:1.85;margin:0 0 12px}.project-focus{font-size:.8125rem;color:var(--muted);margin:14px 0}.project-entry .project-boundary{font-size:.8125rem;color:var(--muted)}.project-entry-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:8px;font-size:.8125rem}.project-entry-bottom .repo-tech{margin-right:auto}.source-note{font-size:.8125rem;color:var(--muted);margin-top:24px}.about-layout{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:40px}.about-layout .profile-note{padding:24px}.about-photo{width:112px;height:112px;object-fit:cover;border-radius:12px}.case-intro h1{font-size:2.9rem}.case-figure{max-width:850px;margin:0 auto 40px;padding:16px}.case-body section{margin-bottom:40px}.article-layout{grid-template-columns:minmax(0,1fr) 200px;gap:40px}.article header h1{font-size:2.4rem}.post-card h2{font-size:1.4rem}footer{margin-top:32px}
[data-design=joye] .site-shell{max-width:1120px}[data-design=joye] .brand{font-size:1.4rem;font-weight:600;line-height:1.4;font-family:inherit}[data-design=joye] .compact-intro{flex-direction:column;text-align:center;gap:12px;border:0;margin-bottom:24px;padding:0 0 20px}[data-design=joye] .small-portrait{width:88px;height:88px;border-radius:50%;border:3px solid var(--soft)}[data-design=joye] .identity h1{line-height:1.3;font-family:inherit;font-size:1.9rem;font-weight:600}[data-design=joye] .identity h1>span{font-size:.95rem;font-weight:400}[data-design=joye] .identity .eyebrow{display:none}[data-design=joye] .contact-pill{margin:2px 0 0;padding:8px 16px}[data-design=joye] .home-layout{display:block;max-width:900px;margin:auto}[data-design=joye] .home-section{display:grid;grid-template-columns:116px minmax(0,1fr);gap:24px;margin-bottom:28px}[data-design=joye] .section-label{display:block;padding-top:5px}[data-design=joye] .section-label h2{font-family:inherit;font-size:1.125rem;font-weight:600}[data-design=joye] .section-label>span{display:block;margin-top:5px}[data-design=joye] .repo-title h3,[data-design=joye] .essay-row h3{font-family:inherit;font-weight:500}[data-design=joye] .home-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border:0;padding:20px 0 0;border-top:1px solid var(--line)}[data-design=joye] .rail-block{border:0;margin:0;padding:0}[data-design=joye] .rail-block h2{font-family:inherit;font-size:1.1rem;font-weight:500}[data-design=joye] .page-intro h1,[data-design=joye] .project-entry h2,[data-design=joye] .article header h1{font-family:inherit;letter-spacing:-.025em}[data-design=joye] .project-entry{padding:24px;border:1px solid var(--line);border-radius:10px}[data-design=joye] .project-index{gap:20px}[data-design=joye] .filters button{border-radius:8px}[data-design=joye] .profile-note{border-radius:12px}
::view-transition-old(root){animation:fade-out 100ms ease both}::view-transition-new(root){animation:fade-in 180ms ease both}::view-transition-old(site-header),::view-transition-new(site-header),::view-transition-old(design-switch),::view-transition-new(design-switch){animation:none}
@keyframes fade-out{to{opacity:0}}@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.site-subtitle{display:none}.brand{margin-right:auto}.home-layout{gap:28px}.home-rail{padding-left:22px}.compact-intro{gap:20px}.identity h1{font-size:2.2rem}}
@media(max-width:850px){.site-shell{padding:0 28px}.home-layout{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:24px}.identity-meta{max-width:330px}.contact-pill{padding:9px 12px}.small-portrait{width:96px;height:96px}.article-layout{display:block}.project-index{gap:0 24px}.about-layout{gap:28px}.section-label>span{font-size:.625rem}}
@media(max-width:700px){.site-shell{padding:0 20px}.site-header{padding:14px 0;gap:14px}.site-header nav{gap:14px}.brand{font-size:1.55rem}.design-switch{font-size:.75rem;padding-top:10px}.site-header .github-nav{font-size:.8125rem}.theme-toggle{font-size:.8125rem}main{padding-top:24px}.compact-intro{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px 16px;margin-bottom:24px;padding:0 0 22px}.small-portrait{width:64px;height:64px;border-radius:12px}.identity h1{font-size:1.8rem;margin:4px 0}.identity h1>span{font-size:.875rem;margin-top:5px}.identity .eyebrow{font-size:.625rem}.identity-meta{font-size:.75rem}.intro-role{font-size:.8125rem}.compact-intro .contact-pill{grid-column:2;justify-self:start;margin:0}.home-layout{display:block}.home-rail{border-left:0;padding:24px 0 0;border-top:1px solid var(--line)}.rail-block{padding-bottom:18px;margin-bottom:18px}.rail-case img{max-width:360px}.section-label h2{font-size:1.25rem}.repo-title h3{font-size:1.0625rem}.repo-status{font-size:.6875rem}.repo-row p{font-size:.875rem}.essay-row{gap:6px 8px}.essay-time{display:none}.essay-row{grid-template-columns:minmax(0,1fr) 16px}.project-index{grid-template-columns:minmax(0,1fr)}.page-intro h1{font-size:2rem}.about-layout{display:block}.about-layout .profile-note{margin-top:30px}.article header h1{font-size:1.95rem}[data-design=joye] .compact-intro{display:flex;gap:10px;padding-bottom:8px}[data-design=joye] .small-portrait{width:72px;height:72px}[data-design=joye] .home-section{grid-template-columns:minmax(0,1fr);gap:12px}[data-design=joye] .section-label{display:flex;gap:12px;align-items:baseline;margin:0}[data-design=joye] .section-label>span{margin:0}[data-design=joye] .home-rail{grid-template-columns:minmax(0,1fr);gap:22px}[data-design=joye] .project-entry{padding:20px}.case-intro h1{font-size:2.2rem}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}}

main[tabindex]:focus-visible{outline:none}
/* Compact identity and direct contact. */
.site-header .brand{font-size:1.45rem;letter-spacing:-.025em}.site-subtitle{display:none}.brand{margin-right:auto}.compact-intro{padding:0 0 22px;gap:20px;margin-bottom:24px}.compact-intro .small-portrait{width:88px;height:88px}.compact-intro .identity h1{margin:4px 0 8px;font-size:2.25rem}.compact-intro .identity{flex:1}.compact-intro .contact-pill{margin-left:16px}.identity-meta{line-height:1.7}.intro-role{margin-top:5px}[data-design=joye] .compact-intro{gap:8px;padding-bottom:8px;margin-bottom:20px}[data-design=joye] .compact-intro .contact-pill{margin:4px 0 0}[data-design=joye] .compact-intro .small-portrait{width:72px;height:72px}[data-design=joye] .compact-intro .identity h1{font-size:1.8rem}.github-link{display:inline-flex;align-items:center;gap:7px}.github-icon{width:17px;height:17px;flex-shrink:0}.solid-link[type=button]{border:0}.contact-dialog{color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:24px;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;text-align:center;box-shadow:0 24px 90px #0005}.contact-dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}.contact-dialog h2{font:1.5rem/1.5 var(--serif);margin:0 24px 6px}.contact-dialog p{font-size:.875rem;color:var(--muted);margin:0 0 16px}.contact-dialog img{width:100%;max-width:280px;max-height:55dvh;object-fit:contain;margin:0 auto 18px;border-radius:6px;background:white}.dialog-close{position:absolute;right:12px;top:10px;background:none;border:0;font-size:1.7rem;width:36px;height:36px}.email-contact{font-size:.8125rem;overflow-wrap:anywhere}.contact-dialog[open]{animation:contact-in 160ms ease-out}@keyframes contact-in{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.site-header .brand{font-size:1.25rem}.compact-intro{gap:10px 14px;padding-bottom:18px}.compact-intro .small-portrait{width:64px;height:64px}.compact-intro .identity h1{font-size:1.8rem}.compact-intro .contact-pill{margin-left:0}.site-header{gap:10px}.github-icon{width:16px;height:16px}.contact-dialog{padding:22px 18px}}
@media(prefers-reduced-motion:reduce){.contact-dialog[open]{animation:none}}

.email-display{display:inline-flex;align-items:center;gap:9px;cursor:text;user-select:text;font-size:.875rem;max-width:100%;overflow-wrap:anywhere}.email-display>span{min-width:0}.gmail-icon{width:20px;height:16px;flex-shrink:0}.email-display.outline-link{border:0;padding:0;min-height:0}.email-display.email-contact{font-size:.8125rem}

.project-story{font-size:.875rem;line-height:1.85;color:var(--muted);margin:4px 0 14px}.compact-repos>.text-link{display:inline-block;margin-bottom:20px}