/* Gallery integrated into the original WKUN light-gray visual system. */
:root{color-scheme:light;--bg:#e8e9e6;--text:#242724;--muted:#62675f;--line:#22222220;background:var(--bg);color:var(--text)}body{background:radial-gradient(ellipse at top,#f6f6f3,#dedfdb);min-height:100vh}.header{border-color:var(--line)}.signature>span{border-color:#2223}.header nav span,.eyebrow,.intro p,.index-number i,.index-label,.collection-line,.work-caption p,footer{color:var(--muted)}.intro h1{font-weight:700}.stage,.stage:hover,.stage:focus-visible,.stage:active{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}.stage:before{display:none}.stage-number{color:#747b6d}.open-work{border-color:#2223}.open-work:hover{background:#262b25;color:#fff}.work-filters{background:#ffffff60;border-color:#fff}.work-filters button{color:#62675f}.work-filters button[aria-pressed=true]{color:#222}.filter-highlight{background:#fff;box-shadow:0 2px 10px #0001}.title-stop{color:#979c8d}.footer-mark{color:#51594b}.viewer{--text:#eeece5;--line:#ffffff1b;--muted:#a5a79f}.contact-dialog{color:#eeece5}.wechat>span{color:#afb5a7}button:focus-visible,a:focus-visible{outline-color:#5f7650}.viewer button:focus-visible,.viewer a:focus-visible,.contact-dialog button:focus-visible{outline-color:#dce6d4}
/* Reference layout only; retain the existing light portfolio palette. */
.work-caption{position:relative;display:block;background:transparent;color:var(--text);padding:8px 42px 8px 3px;margin-top:12px;min-height:66px;border-radius:0}
.work-caption>div{min-width:0}
.work-caption h2{margin:0 0 4px;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0}
.work-caption .work-title-button{min-height:0;padding:0;display:block;width:100%;font:inherit;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-caption p{margin:0;font-size:14px;line-height:20px;font-weight:400;letter-spacing:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-caption .open-work{position:absolute;right:0;top:0;width:40px;height:44px;min-width:40px;min-height:44px;border:0;border-radius:0;background:transparent;color:var(--muted);box-shadow:none}
.work-caption .open-work:hover,.work-caption .open-work:focus-visible{background:transparent;color:var(--text)}
.work-caption .ui-icon,.work-caption .rolling-window{width:18px;height:18px;flex-basis:18px}
.work-caption .rolling-track{width:36px;height:18px;transform:translateX(-18px)}
.work-caption .open-work:hover .rolling-track,.work-caption .open-work:focus-visible .rolling-track{transform:translateX(0)}
.work-caption .work-title-button:after{content:'';position:absolute;inset:0 40px 0 0}
@media(prefers-reduced-motion:reduce){.work-caption .rolling-track{transform:none}}
/* beUI Pro Bar Wave: isolated loading surface over the actual artwork. */
.demo-phone{position:relative}.work-loader{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eef0eb;color:#60685d;border-radius:inherit}.work-loader[hidden]{display:none}.work-loader p{font-size:14px;line-height:1.7;text-align:center;margin:0 20px 20px}.demo-phone[aria-busy=true]{background:#eef0eb}
/* Tide uses one scrollable game viewport, with the host controls always visible. */
@media(max-width:600px){.viewer.is-tide{overflow:hidden}.viewer.is-tide .viewer-layout{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:0 max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom));gap:6px}.viewer.is-tide .viewer-info{position:relative;flex:none}.viewer.is-tide .demo-phone{flex:1;min-height:0;width:100%;max-width:440px;aspect-ratio:auto;border-radius:12px}.viewer.is-tide .demo-phone iframe{border-radius:12px}}

@media(max-width:600px){.viewer.is-static-preview .viewer-label{display:block;grid-column:1/-1;font-size:12px;margin:0 0 5px;color:#b9bdb3}}

/* This prototype supplies its own calibrated phone frame and device picker. */
.viewer.has-device-frame .demo-phone{width:min(480px,50vw);height:calc(100dvh - 80px);aspect-ratio:auto;padding:0;box-shadow:none;background:transparent;border-radius:18px}
@media(max-width:600px){.viewer.has-device-frame .demo-phone{width:100%;height:max(480px,calc(100dvh - 150px));max-width:480px}}

/* Empty mobile slots, ready for future works; deliberately not interactive. */
.work-placeholder .stage{cursor:default}
.work-placeholder .phone,.work-placeholder .stage:hover .phone{transform:none;box-shadow:0 0 0 1px #85898640,0 15px 28px -8px #0003}
.work-placeholder .screen{display:grid;place-items:center;background:#edf0eb}
.placeholder-label{color:#9ba396;font-size:14px;letter-spacing:.12em}
.work-placeholder .work-caption{color:#777e71}

/* Fit every category on small screens without horizontal scrolling. */
@media(max-width:600px){
 .work-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:100%;overflow:visible}
 .work-filters button{width:100%;min-width:0;padding:10px 8px;text-align:center}
 .work-filters .filter-highlight{display:none}
 .work-filters button[aria-pressed=true]{background:#fff;box-shadow:0 2px 10px #0001}
 [data-theme=dark] .work-filters button[aria-pressed=true]{background:#41483c;box-shadow:inset 0 1px #ffffff12}
}

/* Keep the host exit controls outside the embedded artwork's paint area. */
#viewer-title:focus{outline:none}
.viewer .viewer-info{isolation:isolate}
.viewer .demo-phone{position:relative;isolation:isolate;z-index:0;overflow:hidden}
#close-viewer{touch-action:manipulation;position:relative;z-index:1}
@media(max-width:600px){
 .viewer.is-tide .viewer-info{position:relative;z-index:10;flex-shrink:0}
 .viewer.is-tide .viewer-layout{height:100%;max-height:100%;overflow:hidden}
 .viewer.is-tide .demo-phone{contain:paint}
}

/* Freeze the portfolio behind a touch preview; only artwork content scrolls. */
body.viewer-scroll-locked{position:fixed;top:var(--viewer-scroll-offset);left:0;right:0;width:100%;overflow:hidden}
@media(max-width:600px){
 .viewer.is-tide{height:100svh;max-height:100svh;overscroll-behavior:none}
 .viewer.is-tide .viewer-info{touch-action:manipulation}
}

footer .footer-copyright{display:flex;align-items:center;flex-wrap:wrap;gap:0 14px}
footer .footer-copyright>span{white-space:nowrap}
footer .footer-copyright .icp-record{flex-basis:auto;justify-content:flex-start;margin:0;padding:0;white-space:nowrap}

/* Four phone cards across on desktop and landscape tablets. */
@media(min-width:901px){
 .works-grid{column-gap:clamp(16px,2vw,34px)}
 .work:not(.work-desktop) .stage{height:clamp(420px,43vw,570px);padding:28px 8px 42px}
 .work:not(.work-desktop) .phone{width:228px;max-width:100%}
}

/* Blur the gallery behind the native dialog, keeping artwork and controls sharp. */
.viewer{background:transparent;--text:#242724;--muted:#4f574d;--line:#22222225;color:var(--text)}
.viewer::backdrop{background:#20222250;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.viewer .viewer-info :is(p,.eyebrow,.viewer-label,.keyboard-hint){color:var(--muted)}
.viewer .viewer-info a{color:var(--text)}
.viewer.is-static-preview .viewer-label{color:var(--muted)}
.viewer :is(button,a):focus-visible{outline-color:#5f7650}
[data-theme=dark] .viewer{--text:#eeece5;--muted:#b9bdb3;--line:#ffffff25}
[data-theme=dark] .viewer::backdrop{background:#080c0a99}
@media(max-width:600px){
 .viewer .viewer-info,.viewer.is-desktop .viewer-info{background:#f5f5f2ed}
 [data-theme=dark] .viewer .viewer-info{background:#171b18ed}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .viewer::backdrop{background:#e0e2def2}
 [data-theme=dark] .viewer::backdrop{background:#111713f2}
}

@media(min-width:601px){
 .viewer .viewer-info{padding:24px;background:#f5f5f2ed;border:1px solid #ffffff80;border-radius:20px}
 .viewer.is-desktop .viewer-info{padding:12px 18px}
 .viewer.is-desktop .demo-phone{height:calc(100dvh - 160px)}
 [data-theme=dark] .viewer .viewer-info{background:#171b18ed;border-color:#ffffff20}
}

/* beUI AnimatedModal motion, adapted to the native artwork dialog.
   Keep blur active from the first frame; animate only the foreground. */
@keyframes work-modal-enter {
 from {opacity:0;transform:translateY(8px) scale(.96)}
 to {opacity:1;transform:translateY(0) scale(1)}
}
@keyframes work-modal-exit {
 from {opacity:1;transform:translateY(0) scale(1)}
 to {opacity:0;transform:translateY(6px) scale(.96)}
}
.viewer[open] .viewer-layout{animation:work-modal-enter .3s cubic-bezier(.16,1,.3,1)}
.viewer[open].is-closing .viewer-layout{animation:work-modal-exit .15s cubic-bezier(.16,1,.3,1) both;pointer-events:none}
@media(prefers-reduced-motion:reduce){
 .viewer[open] .viewer-layout,.viewer[open].is-closing .viewer-layout{animation:none}
}