@font-face { font-family: 'Pixelify'; src: url('/assets/pixelify.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
:root { --paper:#f7f2e5; --surface:#fffbef; --ink:#303d2f; --muted:#626a55; --green:#425c3b; --line:#c9c8b0; --wood:#816047; --blue:#d9e8e6; --pixel:'Pixelify','Courier New',monospace; --body:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.8 var(--body); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { line-height:1.5; }
a { color:inherit; text-underline-offset:5px; }
button,a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible { outline:3px solid var(--green); outline-offset:5px; }
h1:focus,main:focus { outline:none; }
[hidden] { display:none!important; }
::selection { background:#d5dfbd; }
.icon { flex:none; width:22px; height:22px; vertical-align:middle; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:8px; transform:translateY(-160%); padding:10px 16px; z-index:20; background:var(--surface); }
.skip-link:focus { transform:translateY(0); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px clamp(24px,4vw,72px); min-height:86px; border-bottom:1px solid var(--line); background:var(--paper); }
.site-brand { display:flex; align-items:center; gap:12px; text-decoration:none; min-height:44px; }
.site-brand .icon { width:31px; height:31px; color:var(--green); }
.site-brand span { font:600 clamp(22px,2.1vw,30px)/1.1 var(--pixel); }
.site-header nav { display:flex; align-items:center; gap:22px; }
.site-header nav a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; text-decoration:none; font-size:14px; }
.site-header nav a[aria-current],.site-header nav a:hover { text-decoration:underline; text-decoration-thickness:2px; color:var(--green); }
.is-home { background:#dce9d4; }
.is-home .site-header { background:#e7efdd; border-bottom:1px solid #bacbaa; }
.farm-world { position:relative; width:100%; margin:0 auto; }
.farm-stage { position:relative; width:100%; aspect-ratio:3/2; isolation:isolate; overflow:hidden; }
.farm-scene { z-index:1; position:absolute; top:0; left:0; width:100%; aspect-ratio:3/2; }
.farm-panorama { display:none; position:absolute; pointer-events:none; user-select:none; }
.farm-panorama img { display:block; width:100%; height:100%; }
.farm-environment { display:block; width:100%; height:100%; }
.farm-locations { position:absolute; inset:0; }
.farm-building { position:absolute; text-decoration:none; z-index:1; cursor:pointer; }
.farm-building:hover,.farm-building:focus-visible { z-index:4; }
.building-sprite { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.farm-building:focus-visible { outline:none; }
.building-tooltip { position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%); width:max-content; max-width:260px; padding:9px 16px; background:var(--surface); border:2px solid var(--wood); box-shadow:3px 3px 0 #5a4637; opacity:0; pointer-events:none; transition:opacity 150ms; }
.building-tooltip strong { display:block; font-size:16px; }
.building-tooltip > span { display:block; font-size:12px; color:var(--muted); }
.farm-building:hover .building-tooltip,.farm-building:focus-visible .building-tooltip { opacity:1; }
.pixel-panel { background:#fbf2da; border:2px solid var(--wood); box-shadow:inset 0 0 0 3px #e1cfaa,4px 4px 0 #5b4a38; }
.recent-projects { position:absolute; z-index:3; right:clamp(16px,2.5vw,56px); bottom:clamp(16px,2.5vh,32px); width:clamp(280px,24vw,380px); padding:15px 20px 12px; }
.panel-heading { display:flex; gap:16px; align-items:center; justify-content:space-between; padding-bottom:8px; border-bottom:1px solid #d4c5a5; }
.panel-heading h2 { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; }
.panel-heading .icon { width:18px; height:18px; }
.quiet-link { font-size:12px; min-height:44px; display:inline-flex; align-items:center; }
.recent-project { display:flex; gap:20px; align-items:center; justify-content:space-between; min-height:44px; font-size:14px; text-decoration:none; }
.recent-project:hover .recent-project-name { text-decoration:underline; text-underline-offset:5px; }
.recent-project .icon { width:16px; height:16px; }
.mobile-farm-content { display:none; }
.site-footer { max-width:1200px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:25px 40px; color:var(--muted); font-size:12px; }
.site-footer div { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.site-footer a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.content-page { max-width:1120px; margin:0 auto; padding:35px 40px 80px; min-height:calc(100svh - 210px); }
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px 15px; color:var(--muted); font-size:13px; margin-bottom:35px; }
.breadcrumbs a { min-height:44px; display:inline-flex; align-items:center; }
.breadcrumbs > span:last-child { max-width:100%; overflow-wrap:anywhere; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:31px; }
h1 { font-size:clamp(27px,3vw,36px); font-weight:600; letter-spacing:-.025em; }
.page-heading p { color:var(--muted); margin-top:13px; }
.project-count { font-size:13px; color:var(--muted); white-space:nowrap; }
.project-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.filter { display:inline-flex; align-items:center; gap:12px; padding:7px 17px; min-height:44px; text-decoration:none; border:1px solid #c6c8b6; background:transparent; font-size:14px; }
.filter span { opacity:.85; font-size:12px; }
.filter:hover { background:#ecebdb; }
.filter.active { color:#fffceb; border-color:#3c5836; background:#47643e; box-shadow:2px 2px 0 #bac3a2; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:27px; }
.project-card { min-width:0; border:1px solid #cbc5b3; background:#fdf9ed; }
.project-card-link { text-decoration:none; display:flex; flex-direction:column; height:100%; }
.project-card:hover { border-color:#6e825c; }
.project-symbol { min-height:130px; background:#e2e7d3; display:flex; align-items:center; justify-content:center; gap:15px; color:#47623c; border-bottom:1px solid #c9cfb8; }
.project-symbol.web { background:#e4e5dc; color:#596259; }
.project-symbol .icon { width:39px; height:39px; }
.project-symbol span { font-size:14px; }
.project-thumbnail { width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; border-bottom:1px solid var(--line); }
.project-card-copy { display:flex; flex-direction:column; padding:25px 28px 20px; flex:1; }
.project-card-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); margin-bottom:12px; }
.project-card h2 { font-size:22px; font-weight:600; margin-bottom:12px; }
.project-card p { color:#58604e; font-size:15px; }
.tags { list-style:none; padding:0; margin:18px 0; display:flex; flex-wrap:wrap; gap:7px 15px; }
.tags li { font-size:12px; color:#59644e; }
.project-open { display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:20px; font-size:14px; color:var(--green); }
.project-open > .icon:last-child { margin-left:auto; }
.project-open .icon { width:18px; height:18px; }
.detail-page { max-width:970px; }
.detail-category { display:flex; align-items:center; gap:9px; color:var(--green); font-size:14px; margin-bottom:16px; }
.detail-summary { font-size:18px; color:#59624f; line-height:1.9; margin-top:20px; max-width:740px; }
.project-facts { display:flex; gap:18px 40px; flex-wrap:wrap; margin:28px 0 12px; }
.project-facts div { display:flex; gap:12px; font-size:13px; }
.project-facts dt { color:var(--muted); }
.project-facts dd { margin:0; }
.project-links { display:flex; gap:15px; flex-wrap:wrap; margin-top:25px; }
.pixel-button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:44px; padding:8px 16px; border:1px solid #7b8266; background:#e9ecdc; box-shadow:2px 2px 0 #a6ad8e; text-decoration:none; font-size:14px; }
.pixel-button:hover { background:#dce5cd; }
.pixel-button .icon { width:17px; height:17px; }
.article-body { margin-top:39px; border-top:1px solid var(--line); }
.article-section { margin:34px 0; }
.article-section h2 { font-size:21px; font-weight:600; margin-bottom:14px; }
.article-section p { color:#515d48; line-height:1.95; white-space:pre-line; }
.article-section p + p { margin-top:14px; }
.article-end { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); margin-top:45px; padding-top:23px; }
.text-link { display:inline-flex; align-items:center; min-height:44px; color:var(--green); font-size:14px; }
.video-gallery { margin-top:36px; }
.video-gallery h2 { font-size:20px; margin-bottom:16px; }
.demo-video { margin-bottom:27px; }
.demo-video video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#25352d; border:1px solid #6d765e; }
.demo-video figcaption { display:flex; justify-content:space-between; gap:16px; padding-top:10px; font-size:13px; color:var(--muted); }
.demo-video figcaption a { min-height:44px; display:inline-flex; align-items:flex-start; }
.media-error { color:#8b422d; padding:12px; background:#f2e3d4; font-size:14px; }
.transcript { border-top:1px solid var(--line); font-size:14px; }
.transcript summary { cursor:pointer; min-height:44px; padding:8px 0; color:var(--green); }
.transcript p { white-space:pre-line; }
.screenshot-gallery { display:grid; gap:24px; }
.screenshot-gallery img { display:block; max-width:100%; height:auto; border:1px solid var(--line); }
.screenshot-gallery figcaption { font-size:13px; color:var(--muted); margin-top:8px; }
.about-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:55px; }
.about-aside { padding-top:5px; position:sticky; top:24px; align-self:start; }
.portrait-stamp { width:118px; height:118px; display:grid; place-items:center; background:#e1e8d5; border:2px solid #788461; box-shadow:4px 4px 0 #c6ceb6; margin-bottom:25px; }
.portrait-stamp .icon { width:60px; height:60px; color:#4d6a40; }
.about-aside > p { font-size:21px; font-weight:600; }
.about-aside > span { display:block; font-size:13px; color:var(--muted); margin:6px 0 20px; }
.about-contact-shortcut { margin:0 0 16px; }
.about-contact-shortcut a { gap:9px; }
.about-contact-shortcut .icon { width:16px; height:16px; }
.about-sections { display:flex; flex-direction:column; padding-top:14px; margin-bottom:18px; border-top:1px solid var(--line); }
.about-sections a { display:flex; align-items:center; min-height:44px; font-size:14px; color:var(--muted); text-decoration:none; }
.about-sections a:hover { color:var(--green); text-decoration:underline; text-underline-offset:4px; }
.about-projects { border-top:1px solid var(--line); }
.about-project { display:flex; align-items:center; gap:22px; padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.about-project-copy { flex:1; min-width:0; }
.about-project h3 { margin:0 0 7px; font-size:18px; font-weight:600; }
.about-project p { font-size:15px; color:#55614d; line-height:1.85; }
.about-project-copy > span { display:block; margin-top:10px; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.about-project-open { display:flex; align-items:center; flex:none; gap:8px; font-size:13px; color:var(--green); }
.about-project-open .icon { width:16px; height:16px; }
.about-project:hover h3 { text-decoration:underline; text-underline-offset:5px; }
.about-introduction { max-width:42em; margin-top:22px; }
.about-introduction p { margin:0 0 18px; color:#55614d; line-height:1.95; }
.about-introduction .about-lead { color:var(--ink); font-size:18px; }
.education-list { padding:0; margin:0; list-style:none; }
.education-entry { display:grid; grid-template-columns:174px minmax(0,1fr); gap:24px; padding:24px 0; border-top:1px solid var(--line); }
.education-dates { display:flex; gap:8px; align-items:baseline; padding-top:2px; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--green); }
.education-details h3 { margin:0 0 10px; font-size:20px; font-weight:600; }
.education-facts { display:flex; flex-wrap:wrap; gap:10px 28px; margin:0; }
.education-facts > div { display:flex; align-items:baseline; gap:10px; }
.education-facts dt { font-size:13px; color:var(--muted); }
.education-facts dd { margin:0; font-size:16px; }
.education-status { margin:10px 0 0; font-size:14px; color:var(--muted); }
.education-courses { margin:0 0 10px; font-size:14px; color:#55614d; line-height:1.85; }
.education-more { margin-top:5px; }
.education-more summary { cursor:pointer; min-height:44px; padding:10px 0; font-size:14px; color:var(--green); }
.education-more summary:hover { text-decoration:underline; text-underline-offset:4px; }
.skills-list { margin:0; }
.skills-list > div { margin:18px 0; }
.skills-list dt { font-size:15px; font-weight:600; }
.skills-list dd { margin:6px 0 0; color:#55614d; font-size:15px; }
.contact-block { padding-top:25px; border-top:1px solid var(--line); scroll-margin-top:25px; }
.contact-block h2 { display:flex; gap:12px; align-items:center; }
.contact-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:13px; }
.contact-links a { overflow-wrap:anywhere; min-height:44px; display:inline-flex; align-items:center; font-size:15px; }
.copy-email { min-height:44px; padding:6px 12px; background:transparent; border:1px solid #aab294; color:var(--green); font-size:13px; }
.copy-email:hover { background:#e7ecd9; }
.copy-status { font-size:13px; }
.empty-state,.not-found { text-align:center; padding-top:65px; padding-bottom:90px; }
.empty-state > .icon,.not-found > .icon { width:55px; height:55px; margin-bottom:25px; color:#6c7e55; }
.empty-state p,.not-found p { margin:15px 0 25px; color:var(--muted); }
.not-found .text-link { margin-left:25px; }
.boot-fallback { max-width:700px; margin:90px auto; padding:25px; }
.is-home .site-footer { width:100%; padding-top:8px; padding-bottom:8px; }
@media(min-width:901px) and (min-height:601px) {
  body.is-home { height:100dvh; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
  .is-home #main { min-width:0; min-height:0; }
  .farm-world,.farm-stage { height:100%; }
  .farm-stage { aspect-ratio:auto; }
  .farm-stage[data-surroundings="ready"] > .farm-panorama { display:block; }
  .farm-stage[data-surroundings="ready"] .farm-environment,
  .farm-stage[data-surroundings="ready"] .scene-motion { mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent); }
}
@media(max-width:900px), (max-height:600px) {
  .farm-stage { aspect-ratio:3/2; max-height:72svh; }
  .farm-locations { display:none; }
  .recent-projects { position:static; width:auto; min-width:0; max-width:none; margin:0; padding:0 22px 24px; background:var(--paper); border:0; box-shadow:none; }
  .mobile-farm-content { display:block; padding:23px 22px 30px; background:var(--paper); }
  .mobile-intro { font-size:14px; color:var(--muted); margin-bottom:17px; }
  .mobile-locations { display:flex; flex-direction:column; border-top:1px solid var(--line); }
  .mobile-location { display:flex; align-items:center; gap:15px; padding:17px 0; min-height:80px; text-decoration:none; border-bottom:1px solid var(--line); }
  .mobile-location strong { display:block; font-size:16px; font-weight:500; }
  .mobile-location small { display:block; font-size:12px; color:var(--muted); }
  .mobile-location > .icon { margin-left:auto; width:17px; }
  .location-icon { display:grid; place-items:center; width:45px; height:45px; flex:none; background:#e3e7d5; border:1px solid #b5bfa0; color:var(--green); }
}
@media(min-width:721px) and (max-height:600px) {
  .farm-world { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,1fr); align-items:center; }
  .mobile-farm-content { padding:12px 22px 18px; }
  .recent-projects { grid-column:1 / -1; padding-top:16px; }
  .mobile-intro { margin-bottom:8px; }
  .mobile-location { min-height:64px; padding:10px 0; }
}
@media(max-width:1050px) {
  .site-header { padding:14px 28px; }
  .site-header nav { gap:12px; }
  .recent-project { min-height:44px; font-size:13px; }
  .about-layout { grid-template-columns:150px minmax(0,1fr); gap:30px; }
  .education-entry { grid-template-columns:1fr; gap:10px; }
}
@media(max-width:720px) {
  .site-header { flex-direction:column; align-items:flex-start; gap:7px; padding:16px 22px 9px; }
  .site-brand span { font-size:25px; }
  .site-brand .icon { width:26px; height:26px; }
  .site-header nav { width:100%; gap:15px; }
  .site-header nav a { min-width:44px; font-size:14px; }
  .site-footer { padding:17px 22px; flex-wrap:wrap; gap:0 20px; font-size:11px; }
  .site-footer div { gap:14px; }
  .content-page { padding:21px 22px 50px; }
  .breadcrumbs { margin-bottom:22px; gap:7px 12px; font-size:12px; }
  .page-heading { align-items:flex-start; gap:16px; }
  .page-heading p { font-size:14px; }
  .project-count { padding-top:11px; font-size:12px; }
  .project-grid { grid-template-columns:1fr; gap:22px; }
  .project-symbol { min-height:110px; }
  .project-card-copy { padding:22px; }
  .project-filters { gap:9px; margin-bottom:25px; }
  .filter { padding:6px 12px; font-size:13px; gap:9px; }
  .detail-summary { font-size:17px; }
  .project-facts { gap:12px 25px; }
  .project-facts div { font-size:12px; }
  .article-section h2 { font-size:20px; }
  .demo-video figcaption { flex-wrap:wrap; gap:0 12px; }
  .about-layout { grid-template-columns:1fr; gap:30px; }
  .about-aside { position:static; display:grid; grid-template-columns:80px 1fr; align-items:center; gap:0 20px; }
  .portrait-stamp { width:76px; height:76px; grid-row:span 3; margin:0; }
  .portrait-stamp .icon { width:42px; height:42px; }
  .about-aside > span { margin:0; }
  .about-aside .pixel-button { margin-top:14px; grid-column:1 / -1; justify-self:start; }
  .about-contact-shortcut { grid-column:2; margin:0; }
  .about-sections { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:0 16px; padding-top:10px; margin:20px 0 0; }
  .about-project { flex-direction:column; align-items:flex-start; gap:12px; }
  .about-introduction .about-lead { font-size:17px; }
  .education-entry { padding:22px 0; }
  .education-details h3 { font-size:19px; }
  .not-found { text-align:left; }
  .not-found .text-link { margin-left:16px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
@media print { .site-header,.site-footer,.farm-world,.project-filters,.copy-email { display:none; } body { background:white; } .content-page { padding:0; } video { display:none!important; } }
/* Three quiet scene layers. They pause offscreen, on request, and for reduced motion. */
.scene-motion { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.water-motion { display:block; width:100%; height:100%; opacity:.5; image-rendering:pixelated; }
.chicken { position:absolute; width:1.65%; aspect-ratio:1; image-rendering:pixelated; }
.chicken svg { width:100%; height:100%; display:block; }
.chicken-one { left:55.4%; top:39.6%; animation:hen-walk 19s steps(12,end) infinite; }
.chicken-two { left:58.1%; top:41.2%; animation:hen-walk-back 24s steps(10,end) infinite; }
.chicken-feet { animation:hen-feet .6s steps(2,end) infinite; transform-origin:center; }
.chimney-smoke { position:absolute; left:56.85%; top:16.5%; width:1.4%; height:2%; }
.chimney-smoke i { position:absolute; width:70%; height:65%; background:#e0e4d7; box-shadow:3px -3px 0 #e0e4d7,-3px 3px 0 #e0e4d7; opacity:0; animation:chimney-puff 7s steps(22,end) infinite; }
.chimney-smoke i:nth-child(2) { animation-delay:2.4s; }
.chimney-smoke i:nth-child(3) { animation-delay:4.8s; }
.scene-motion:not([data-running="true"]) * { animation-play-state:paused!important; }
@keyframes hen-walk { 0%,23% {transform:translate(0,0)} 40%,68% {transform:translate(125%,10%)} 90%,100% {transform:translate(0,0)} }
@keyframes hen-walk-back { 0%,35% {transform:translate(0,0) scaleX(-1)} 52%,75% {transform:translate(-80%,30%) scaleX(-1)} 95%,100% {transform:translate(0,0) scaleX(-1)} }
@keyframes hen-feet { 0%,49% {transform:translateY(0)} 50%,100% {transform:translateY(-1px)} }
@keyframes chimney-puff { 0% {opacity:0;transform:translate(0,0) scale(.5)} 20% {opacity:.5} 75% {opacity:.2} 100% {opacity:0;transform:translate(-70%,-330%) scale(1.3)} }
.motion-toggle { border:0; padding:0; min-height:44px; background:transparent; color:inherit; font:inherit; white-space:nowrap; }
.motion-toggle:hover { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:720px) { .scene-motion { pointer-events:none; } }

@media(min-width:721px) and (max-height:700px) { .about-aside { position:static; } }