:root{color-scheme:dark;--ground:#0b1219;--surface:#111a22;--ink:#f1f4f8;--muted:#bdc7d2;--accent:#3289ff;--line:#2a3a49;--font:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;--margin:clamp(24px,2.55vw,44px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}a{color:inherit}img{display:block;max-width:100%}::selection{background:var(--accent);color:var(--ink)}
.skip-link{position:fixed;left:20px;top:-100px;z-index:5;padding:10px 20px;background:var(--accent);text-decoration:none}.skip-link:focus{top:16px}a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.project-layout{display:grid;grid-template-columns:minmax(310px,26.6%) minmax(0,1fr);min-height:100svh}.project-intro{position:relative;isolation:isolate;min-width:0;padding:30px var(--margin);display:flex;flex-direction:column;gap:26px;border-right:1px solid var(--line);background:var(--ground)}.project-intro::before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:430px;background:linear-gradient(to bottom,rgba(11,18,25,.76),var(--ground)),url('assets/castle/overview-2.webp') center top/cover no-repeat;opacity:.8} /* taste-skill-ignore: 用户指定参考图的细边框和分隔线；渐变仅为背景图的中性遮罩。 */
.author{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px;white-space:nowrap}.author span+span{border-left:1px solid var(--line);padding-left:12px}.intro-main{margin-top:-8px}.project-mark{display:flex;gap:3px;align-items:center;margin-bottom:15px}.project-mark i{width:23px;height:4px;background:var(--accent);border-radius:3px}.project-mark i+i{width:4px}h1{font-size:clamp(48px,4.55vw,78px);font-weight:850;letter-spacing:.015em;line-height:1.2;white-space:nowrap}.genre{font-size:clamp(18px,1.5vw,24px);margin-top:14px;padding-top:14px;position:relative;white-space:nowrap}.genre::before{content:"";position:absolute;top:0;left:0;width:43px;height:3px;background:var(--accent)}.ownership{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:16px}.ownership time{white-space:nowrap}.ownership span{padding-right:16px;border-right:1px solid var(--line)}.project-overview{display:grid;gap:12px;margin-top:26px}.project-overview img{width:100%;aspect-ratio:1.96;object-fit:cover;border:1px solid var(--line);border-radius:3px}.project-overview img:first-child{border-color:#5993c2}.intro-end{margin-top:auto}.project-summary{color:var(--muted);font-size:16px;line-height:1.7}.technology{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}.technology li{padding:3px 10px;border:1px solid var(--line);border-radius:4px;background:#1b2a37;color:var(--muted);font-size:13px}.github{display:inline-flex;gap:22px;align-items:center;text-decoration:none;color:var(--muted);font-size:14px;margin-top:15px;min-height:36px;transition:color .2s,transform .2s}.github:hover{color:var(--ink);transform:translateX(3px)} /* taste-skill-ignore: 用户指定参考图的细边框和分隔线；渐变仅为背景图的中性遮罩。 */
.project-work{min-width:0;padding:30px var(--margin) 16px;display:flex;flex-direction:column;gap:18px}.work-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:15px}.work-heading h2{font-size:30px;line-height:1.2;font-weight:700;padding-left:18px;border-left:3px solid var(--accent)}.work-heading>span{font-size:14px;color:var(--muted);letter-spacing:.06em}.evidence-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;flex:1}.result{min-width:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}.frame{width:100%;height:clamp(180px,27.5svh,310px);object-fit:cover;object-position:center}.result-copy{padding:14px 18px 16px}.result-copy h3{display:flex;align-items:center;gap:14px;font-size:22px;line-height:1.4;margin-bottom:12px;font-weight:650}.result-copy h3 span{color:var(--accent);font-size:18px;padding-right:13px;border-right:1px solid var(--line);font-weight:600}.result-copy p{font-size:16px;line-height:1.65;color:var(--muted);text-wrap:pretty}.work-footer{color:var(--muted);font-size:12px;line-height:1.5} /* taste-skill-ignore: 用户指定参考图的细边框和分隔线；渐变仅为背景图的中性遮罩。 */
@keyframes arrive{from{transform:translateY(12px)}to{transform:translateY(0)}}@media(prefers-reduced-motion:no-preference){.frame{animation:arrive .45s ease-out backwards}.result-copy{animation:arrive .55s ease-out backwards}.result:nth-child(2)>*{animation-delay:60ms}.result:nth-child(3)>*{animation-delay:120ms}.result:nth-child(4)>*{animation-delay:180ms}}
@media(min-width:1500px){.project-intro{gap:30px;padding-top:34px}.project-overview{margin-top:38px}.project-work{padding-top:36px}.result-copy{padding:16px 20px 18px}.result-copy p{font-size:17px}.project-summary{font-size:17px}}
@media(max-width:1100px) and (min-width:901px){:root{--margin:24px}.project-layout{grid-template-columns:280px minmax(0,1fr)}h1{font-size:49px}.author{font-size:12px;gap:8px}.author span+span{padding-left:8px}.genre{font-size:18px}.ownership{font-size:14px;gap:6px 10px}.ownership span{padding-right:10px}.evidence-layout{gap:16px}.result-copy{padding:12px}.result-copy h3{font-size:19px;gap:10px}.frame{height:190px}.project-overview{margin-top:15px}}
@media(max-width:900px){.project-layout{grid-template-columns:1fr}.project-intro{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;border-right:0;border-bottom:1px solid var(--line)}.author{grid-column:1/-1}.intro-main{grid-column:1;grid-row:2}h1{font-size:64px}.genre{font-size:22px}.intro-end{grid-column:2;grid-row:2;align-self:end;margin:0}.project-overview{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;margin:0}.project-overview img:only-child{grid-column:1/-1;max-width:600px}.project-intro::before{height:100%;max-height:440px;background-position:left center}.frame{height:auto;aspect-ratio:1.85}.project-work{padding-top:28px;padding-bottom:24px}.result-copy h3{font-size:21px}.work-footer{margin-top:2px}} /* taste-skill-ignore: 用户指定参考图的细边框和分隔线；渐变仅为背景图的中性遮罩。 */
@media(max-width:599px){:root{--margin:20px}.project-intro{display:flex;padding-top:22px;gap:24px}.author{font-size:13px;gap:10px}.intro-main{margin-top:0}h1{font-size:clamp(46px,13.3vw,72px)}.genre{font-size:20px}.ownership{font-size:15px}.project-overview{grid-template-columns:1fr;gap:12px;margin-top:2px}.project-overview img{aspect-ratio:1.96}.intro-end{align-self:stretch}.technology{margin-top:16px;padding-top:16px}.project-work{gap:18px}.work-heading h2{font-size:26px;padding-left:12px}.work-heading>span{font-size:13px}.evidence-layout{grid-template-columns:1fr;gap:22px}.result-copy{padding:16px}.result-copy h3{font-size:22px;margin-bottom:10px}.frame{aspect-ratio:1.92}.project-summary{font-size:16px}.work-footer{line-height:1.7}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Final fitting: explicit image height avoids HTML intrinsic dimensions stretching overview rows. */
.project-overview img{height:auto}.skip-link{color:#08111b}.work-footer{font-size:13px}
@media(min-width:901px){.frame{height:clamp(170px,24svh,280px)}.project-intro{gap:20px;padding-top:24px;padding-bottom:24px}.project-overview{margin-top:12px}.result-copy{padding:12px 16px 14px}.result-copy h3{margin-bottom:10px}}
.technology{margin-top:0}
@media(min-width:901px){.project-overview{margin-top:auto;margin-bottom:auto}.intro-end{margin-top:0}}
@media(min-width:600px) and (max-width:900px){.intro-end{align-self:center}}

/* Each implementation pairs two full screenshots; UI content is never cropped. */
.result-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 10px 0}
.result-media figure{margin:0;min-width:0;display:flex;flex-direction:column}
.result-media .frame{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:var(--ground)}
.result-media figcaption{font-size:13px;line-height:1.5;color:var(--muted);padding:7px 0 3px}
.project-overview img{aspect-ratio:auto;object-fit:contain}
@media(min-width:901px){.evidence-layout{align-content:center;flex:1}.result{align-self:start}.result-copy{padding-top:10px}.project-overview{gap:16px}}
@media(min-width:600px) and (max-width:1100px){.result-media{grid-template-columns:1fr}.result-media .frame{aspect-ratio:auto}.result-media figcaption{padding-bottom:6px}}
@media(max-width:599px){.result-media{grid-template-columns:1fr;gap:14px;padding:12px 12px 0}.result-media .frame{aspect-ratio:auto}.result-media figcaption{padding-top:7px}.project-overview img{aspect-ratio:auto}}

/* The second project keeps the same frame, with two larger image-and-copy rows. */
.project-horse{border-top:1px solid var(--line)} /* taste-skill-ignore: 用户要求第二页沿用原有细线样式。 */
.project-horse .project-overview img,.project-horse .single-media img{filter:brightness(.76)}
.project-horse .project-intro::before{background-image:linear-gradient(to bottom,rgba(11,18,25,.86),var(--ground)),url('assets/horse/overview.webp')} /* taste-skill-ignore: 真实项目图下的中性深色遮罩。 */
.project-name{font-size:clamp(36px,3.3vw,58px);font-weight:850;letter-spacing:.015em;line-height:1.2;white-space:nowrap}
.evidence-layout-compact{grid-template-columns:1fr;gap:24px;align-content:center}
.evidence-layout-compact .result{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}
.single-media{margin:0;padding:12px;min-width:0}
.single-media .frame{height:auto;aspect-ratio:auto;object-fit:contain}
.single-media figcaption{font-size:13px;line-height:1.5;color:var(--muted);padding-top:8px}
.evidence-layout-compact .result-copy{padding:22px 22px 22px 12px}
@media(min-width:901px){.project-horse .project-overview{margin-top:auto;margin-bottom:auto}}
@media(min-width:901px) and (max-width:1100px){.project-name{font-size:38px}.evidence-layout-compact .result{grid-template-columns:1fr}.evidence-layout-compact .result-copy{padding:12px 18px 18px}}
@media(max-width:900px){.project-name{font-size:52px}.evidence-layout-compact .result-copy{padding:18px}.project-horse .project-overview img:only-child{max-width:none}.project-horse .project-overview{grid-template-columns:1fr}}
@media(max-width:599px){.project-name{font-size:clamp(34px,10.2vw,52px)}.evidence-layout-compact .result{grid-template-columns:1fr}.evidence-layout-compact .result-copy{padding:4px 16px 18px}}

/* Godot project: the gallery and technical notes are independent groups. */
.project-mahjong{border-top:1px solid var(--line)} /* taste-skill-ignore: 沿用用户要求的项目分隔线。 */
.project-mahjong .project-intro::before{background-image:linear-gradient(to bottom,rgba(11,18,25,.84),var(--ground)),url('assets/mahjong/cover.webp')} /* taste-skill-ignore: 真实项目图下的中性深色遮罩。 */
.project-mahjong .project-name{font-size:clamp(48px,4.55vw,78px)}
.mahjong-content{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;min-width:0}
.mahjong-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mahjong-gallery .frame{width:100%;height:clamp(150px,23svh,240px);object-fit:contain;background:var(--surface)}
.mahjong-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.technical-note{min-width:0}
.technical-note h3{font-size:22px;line-height:1.4;margin-bottom:12px;font-weight:650}
.technical-note p{font-size:16px;line-height:1.65;color:var(--muted);overflow-wrap:anywhere;text-wrap:pretty}
@media(prefers-reduced-motion:no-preference){.technical-note{animation:arrive .55s ease-out backwards}}
@media(min-width:901px) and (max-width:1100px){.project-mahjong .project-name{font-size:49px}.mahjong-notes{grid-template-columns:1fr;gap:20px}.mahjong-gallery .frame{height:auto;aspect-ratio:16/9}.mahjong-content{padding:12px 0}}
@media(max-width:900px){.project-mahjong .project-name{font-size:64px}.project-mahjong .project-overview{grid-template-columns:1fr}.project-mahjong .project-overview img:only-child{max-width:none}.mahjong-gallery .frame{height:auto;aspect-ratio:16/9}.mahjong-notes{grid-template-columns:1fr;gap:24px}.mahjong-content{gap:28px}}
@media(max-width:599px){.project-mahjong .project-name{font-size:clamp(46px,13.3vw,72px)}.project-mahjong .work-heading h2{font-size:24px}.mahjong-gallery{grid-template-columns:1fr;gap:16px}}

/* Encore follows the gallery-first layout with two technical notes. */
.project-encore .project-intro::before{background-image:linear-gradient(to bottom,rgba(11,18,25,.84),var(--ground)),url('assets/encore/cover.webp')} /* taste-skill-ignore: 真实项目图下的中性深色遮罩。 */
.project-encore .project-name{font-size:clamp(32px,2.9vw,52px);letter-spacing:0}
.project-encore .genre{white-space:normal}
.project-encore .mahjong-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1100px){.project-encore .mahjong-notes{grid-template-columns:1fr}}
@media(max-width:900px){.project-encore .project-name{font-size:clamp(32px,5.2vw,46px)}}
@media(max-width:599px){.project-encore .project-name{font-size:clamp(32px,10vw,48px)}}

.project-title-row{display:flex;align-items:center;gap:12px}
.project-title-row .project-name{font-size:clamp(42px,3.9vw,68px)}
.play-link{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;gap:7px;padding:10px 13px;min-height:44px;background:var(--accent);color:#08111b;font-size:16px;font-weight:750;line-height:1.4;text-decoration:none;white-space:nowrap;border-radius:4px;transition:background .18s,transform .18s}
.play-link:hover{background:#70adff;transform:translateY(-2px)}
.play-link:active{transform:translateY(0) scale(.97)}
.play-link:focus-visible{outline-color:var(--ink);outline-offset:4px}
@media(max-width:900px){.project-title-row .project-name{font-size:clamp(46px,7vw,64px)}}

/* Native snapping also supports touch, scrollbar dragging and no-script use. */
html{scroll-snap-type:y mandatory;scroll-padding-top:0}
html.is-paging{scroll-snap-type:none;scroll-behavior:auto}
.project-layout{scroll-snap-align:start;scroll-snap-stop:always}

/* Let galleries use the space left after their technical notes, without cropping. */
@media(min-width:1101px){
 .project-mahjong{height:100svh}
 .project-mahjong .project-work{min-height:0}
 .mahjong-content{gap:20px;min-height:0}
 .mahjong-gallery{flex:1;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}
 .mahjong-gallery .frame{height:100%;min-height:0}
 .mahjong-notes{flex-shrink:0}
}

/* Shared professional heading in each project sidebar. */
.author{font-size:17px;line-height:1.5}
@media(min-width:901px) and (max-width:1100px){.author{font-size:16px}}

/* Bound screenshot height by the viewport as well as the available column width. */
@media(min-width:901px){
 .project-horse .single-media .frame{max-height:calc((100svh - 260px)/2);object-fit:contain}
 .project-horse .evidence-layout-compact .result{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}