:root{font-family:Inter,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;color:#ede9df;background:#252c28;font-synthesis:none;--muted:#a9afa4;--line:#ffffff16;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;height:265vh}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid #dfca9d;outline-offset:5px}button:disabled{cursor:wait}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#stage{position:fixed;inset:0;background:#252c28}#scene{display:block;width:100%;height:100%;touch-action:pan-y}.film-edge{position:fixed;inset:0;pointer-events:none;z-index:2;background:linear-gradient(#0c161f42,transparent 21%,transparent 78%,#07121065)}
.topbar{position:fixed;top:0;left:0;width:100%;height:105px;padding:0 3.5%;display:flex;align-items:center;justify-content:space-between;z-index:20;text-shadow:0 2px 15px #0008}.brand{display:flex;align-items:center;gap:17px;font-size:16px;letter-spacing:2px;font-weight:500}.brand-sub{color:#e5e3d1a8;font-size:12px;letter-spacing:1.5px}.brand-line{width:1px;height:13px;background:#e5e3d14d}.topbar nav{display:flex;gap:28px;align-items:center;font-size:13px}.topbar nav>button{min-height:44px;padding:10px 4px}#home-nav{color:#ebe9dfa8}#menu-toggle{display:flex;align-items:center;gap:16px}.menu-icon{display:grid;gap:5px;width:16px}.menu-icon i{height:1px;background:#ede9df;display:block;transition:transform .2s}#menu-toggle[aria-expanded=true] .menu-icon i:first-child{transform:translateY(3px) rotate(45deg)}#menu-toggle[aria-expanded=true] .menu-icon i:last-child{transform:translateY(-3px) rotate(-45deg)}#category-menu{position:absolute;right:3.5%;top:86px;background:#1a2623ec;backdrop-filter:blur(24px);border:1px solid #d7dac61f;padding:10px;min-width:205px;border-radius:12px;box-shadow:0 15px 60px #0004;text-shadow:none}#category-menu button{width:100%;padding:15px 17px;display:flex;gap:24px;align-items:center;text-align:left;border-radius:7px;font-size:14px}#category-menu button:hover{background:#dae5d913}#category-menu button span{color:#929a8d;font-size:11px}
.bottom-bar{position:fixed;bottom:31px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;z-index:10;transition:opacity .4s}#explore{display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:2px;padding:12px 22px;color:#ede9dfcf;text-shadow:0 2px 9px #000a}.scroll-icon{width:15px;height:24px;border:1px solid #e9e6d591;border-radius:9px;display:flex;justify-content:center;padding-top:5px}.scroll-icon i{width:2px;height:5px;background:#e9e6d5;border-radius:2px;animation:scroll 1.8s infinite}.progress{height:1px;width:70px;background:#e9e6d52e}.progress i{display:block;height:1px;width:0;background:#e9e6d5}@keyframes scroll{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(5px);opacity:1}}body.selected .bottom-bar{opacity:0;pointer-events:none}#tooltip{position:fixed;z-index:30;pointer-events:none;padding:13px 18px;color:#f3f0e6;background:#19221edf;border:1px solid #b6c1ae32;backdrop-filter:blur(15px);border-radius:8px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;font-size:14px;letter-spacing:1px;box-shadow:0 8px 35px #0003}#tooltip.visible{opacity:1;transform:translateY(0)}
.works-panel{position:fixed;top:140px;right:5%;bottom:90px;width:37%;max-width:570px;overflow:auto;z-index:12;padding:26px 31px;background:#15211fe6;border:1px solid #e3e8d322;border-radius:17px;box-shadow:0 20px 90px #07110c38;backdrop-filter:blur(26px);opacity:0;transform:translateX(25px);transition:opacity .45s var(--ease),transform .65s var(--ease);scrollbar-width:thin;scrollbar-color:#73807255 transparent;overscroll-behavior:contain}.works-panel.open{opacity:1;transform:translateX(0)}.panel-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.7px;color:#b9c3b09e;margin-bottom:19px}#close-panel{font-size:19px;width:44px;height:44px;margin-right:-12px;color:#e1e5d6a8}.works-panel h2{font-size:32px;font-weight:500;letter-spacing:1px;margin:0 0 30px}.project-card{display:flex;gap:18px;align-items:center;width:100%;text-align:left;border-top:1px solid var(--line);padding:23px 0}.project-cover{width:75px;height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font:38px Georgia,serif;background:#53644c;border:1px solid #a9b99f1f;color:#dfdfc3;border-radius:4px}.cover-1{background:#414c52;color:#c9d4d7}.cover-2{background:#796d51;color:#e2d3ae}.project-info{flex:1}.project-info h3{font-size:17px;font-weight:500;margin:0 0 10px;line-height:1.45}.project-info p{font-size:12px;color:#b1b9a8;line-height:1.7;margin:0}.project-num{color:#b1b9a878;font-size:10px;align-self:flex-start;margin-top:5px}.project-card:hover h3{color:#d8ba87}.sample-note{color:#9aa99288;font-size:12px;line-height:1.8;margin:25px 0 5px}dialog{color:#ede9df;border:1px solid #dfe4d32a;border-radius:17px;background:#202d27;width:min(650px,90vw);padding:46px;max-height:85vh;box-shadow:0 30px 100px #0006}dialog::backdrop{background:#0b110ccc;backdrop-filter:blur(8px)}.dialog-close{position:absolute;top:17px;right:17px;width:44px;height:44px;font-size:20px}.eyebrow{font-size:11px;letter-spacing:1.5px;color:#b4bda7}dialog h2{font-size:31px;font-weight:500;margin:22px 0}dialog p{font-size:15px;color:#bcc4b2;line-height:1.9}#detail-content{padding:22px;background:#b1b5990b;border-radius:8px;margin-top:25px}#detail-content h3{font-size:15px;font-weight:500;margin:0 0 9px}#detail-content p{font-size:14px;margin:0 0 15px}
#loading{position:fixed;inset:0;z-index:100;background:#232d28;display:flex;flex-direction:column;gap:21px;align-items:center;justify-content:center;font-size:12px;letter-spacing:2px;color:#d1d4c2;transition:opacity .8s}#loading.done{opacity:0;pointer-events:none}.loading-mark{width:30px;height:22px;border:1px solid #c6cebc80;border-radius:3px;position:relative}.loading-mark:before{content:'';position:absolute;left:-4px;right:-4px;bottom:-5px;border-top:1px solid #c6cebc80}#loading>div{width:110px;height:1px;background:#d2dac121}#loading-progress{display:block;width:0;height:1px;background:#c6cebc;transition:width .3s}#fallback{position:fixed;top:35%;left:15%;width:70%;z-index:6;text-align:center}#fallback h2{font-size:26px;font-weight:500}#fallback p{line-height:1.9;font-size:15px;color:#bdc9b3}.noscript{position:fixed;z-index:101;top:55%;left:10%;width:80%;text-align:center}
@media(max-width:1000px){.works-panel{right:4%;width:43%;padding:22px;top:120px}.project-card{gap:13px}.project-cover{width:58px;height:68px;font-size:30px}.project-info h3{font-size:16px}.project-info p{font-size:11px}}
@media(max-width:600px){body{height:240vh}.topbar{height:78px;padding:0 6%}.brand{font-size:14px;gap:11px;letter-spacing:1px}.brand-sub{font-size:10px}.topbar nav{font-size:12px;gap:14px}#home-nav{font-size:11px}#category-menu{top:70px;right:5%;min-width:190px}.bottom-bar{bottom:24px}#explore{font-size:11px;white-space:nowrap}.works-panel{left:4%;right:4%;width:92%;top:47%;bottom:28px;padding:19px 23px;border-radius:13px}.panel-top{margin-bottom:8px}.works-panel h2{font-size:26px;margin-bottom:20px}.project-card{padding:17px 0}.project-cover{width:55px;height:59px;font-size:27px}dialog{padding:34px 25px}dialog h2{font-size:27px}dialog p{font-size:14px}.sample-note{font-size:11px}#tooltip{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Daylight / primary-color interior */
:root{color:#262c31;background:#eeeee6;--muted:#777c7d;--line:#23313a18}#stage,#loading{background:#eeeee6}.film-edge{background:linear-gradient(#ffffff24,transparent 18%,transparent 83%,#ffffff20)}.topbar{text-shadow:none}.brand-sub,#home-nav{color:#343c438c}.brand-line{background:#343c4340}.menu-icon i{background:#293239}button:focus-visible,a:focus-visible{outline-color:#2456bf}#category-menu{background:#f9faf3ed;border-color:#ffffffbd;border-radius:7px;box-shadow:0 15px 60px #33475a1a}#category-menu button:hover{background:#234ebd0b}#category-menu button span{color:#798388}#category-menu #credits-toggle{border-top:1px solid var(--line);margin-top:6px;padding-top:16px;font-size:11px;color:#778088;border-radius:0}#explore{color:#28313be0;text-shadow:0 1px 12px #fff;background:#f8f8edb5;border-radius:30px;backdrop-filter:blur(12px)}.scroll-icon{border-color:#29323980}.scroll-icon i,.progress i{background:#293239}.progress{background:#29323922}#tooltip{color:#28313b;background:#fffffff0;border-color:#fff;border-radius:5px;box-shadow:0 8px 35px #25303c15}.works-panel{background:#f7f8f0ed;border:1px solid #fff;border-radius:9px;box-shadow:0 20px 90px #34465321;scrollbar-color:#73808b55 transparent}.panel-top{color:#6a7b88}#close-panel{color:#687782}.project-cover{background:#2452b2;color:#f1eddd;border:0;border-radius:2px}.cover-1{background:#cf4232;color:#f5ede1}.cover-2{background:#ecd045;color:#343b3f}.project-info p,.project-num{color:#768086}.project-card:hover h3{color:#2452b2}.sample-note{color:#8a9192}dialog{color:#28313b;background:#f7f8f0;border-color:white;border-radius:9px;box-shadow:0 30px 100px #20334230}dialog::backdrop{background:#33414d70;backdrop-filter:blur(10px)}dialog p,.eyebrow{color:#6b7881}dialog a{text-decoration:underline;text-underline-offset:4px;color:#2452b2}#detail-content{background:#244b8006}#loading{color:#5d6c76}.loading-mark,.loading-mark:before{border-color:#4f638580}#loading>div{background:#35508020}#loading-progress{background:#2452b2}#fallback p{color:#65747e}
/* Keep navigation legible over the darker, directional lighting. */
.topbar{color:#f2eee3;text-shadow:0 1px 12px #0008}.brand-sub,#home-nav{color:#f2eee3ba}.brand-line{background:#eee6d866}.menu-icon i{background:#f2eee3}#category-menu{color:#293239}.film-edge{background:linear-gradient(#10171336,transparent 16%,transparent 84%,#10171320)}

/* Clear opening frame; contextual navigation appears only after leaving the desk. */
.topbar{justify-content:flex-end;pointer-events:none}.topbar nav,#category-menu{pointer-events:auto}#category-menu{position:fixed;top:auto;bottom:100px;right:50%;transform:translateX(50%)}.film-edge{background:linear-gradient(#10171310,transparent 14%,transparent 88%,#10171315)}