:root{color-scheme:light;--ink:#29343b}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{color:var(--ink);background:linear-gradient(#a9c9e3 0%,#eed7b6 56%,#77877c 57%,#6e7167);font-family:"Segoe UI","Microsoft YaHei",sans-serif}#world{position:fixed;inset:0;touch-action:none;cursor:grab}#world:active{cursor:grabbing}canvas{display:block;width:100%;height:100%;outline:none}canvas:focus-visible{outline:2px solid #f4e6ce;outline-offset:-5px}.veil{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(242,244,235,.12),transparent 60%,rgba(20,30,34,.28)),linear-gradient(90deg,rgba(221,234,237,.23),transparent 45%)}header{position:absolute;top:max(30px,env(safe-area-inset-top));left:4.3%;right:4.3%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}a{color:inherit;text-decoration:none}header a{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;font-family:Georgia,serif;font-size:30px;letter-spacing:-1px}.brand img{width:34px;height:34px;object-fit:cover;border-radius:8px}header nav{display:flex;gap:36px;font-size:15px}header nav span{margin-left:5px}main{position:absolute;top:15%;left:4.3%;pointer-events:none}h1{font-family:"Noto Serif SC","Songti SC",SimSun,serif;font-weight:500;font-size:clamp(56px,6.1vw,100px);line-height:1.18;letter-spacing:.015em;margin:0 0 20px;text-shadow:0 1px 22px #ffffff20}main p{font-size:clamp(13px,1.2vw,18px);letter-spacing:.04em;margin:0;opacity:.83}.bottom{position:absolute;left:4.3%;right:4.3%;bottom:82px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.projects{pointer-events:auto;display:flex;align-items:center;padding:17px 8px;border:1px solid #ffffff55;border-radius:40px;background:#f0f0e9ad;backdrop-filter:blur(18px);box-shadow:0 6px 30px #10212b0b}.projects a{padding:0 24px;font-family:Georgia,serif;font-size:16px;transition:color .2s}.projects a+a{border-left:1px solid #34414b30}.projects span{display:inline-block;margin-left:9px;transition:transform .2s}.projects a:hover span{transform:translate(2px,-2px)}a:hover{color:#6b5943}a:focus-visible,button:focus-visible{outline:2px solid #465b67;outline-offset:6px}.interaction{pointer-events:auto;color:#fff7e9;text-align:right;text-shadow:0 1px 5px #182127}.controls{display:flex;justify-content:flex-end;gap:12px}.controls button{display:grid;place-items:center;border:1px solid #ffffffa8;border-radius:50%;width:36px;height:36px;background:#27323b27;color:inherit;cursor:pointer;transition:background .2s;font:18px Georgia}.controls button:hover{background:#ffffff35}.controls button:disabled{opacity:.4;cursor:wait}.controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.interaction p{font-size:12px;letter-spacing:.06em;margin:12px 0 0}footer{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:4.3%;right:4.3%;display:flex;justify-content:space-between;color:#fff9e5b5;font-size:11px;text-shadow:0 1px 4px #263039}footer div{display:flex;gap:18px}footer a{display:flex;align-items:center;gap:5px}footer img{width:13px;height:13px}footer a:hover{color:white}#loading,#notice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#eff1e4e8;padding:15px 24px;border-radius:30px;font-size:13px;box-shadow:0 8px 40px #25394c15}#notice{top:auto;bottom:145px;transform:translateX(-50%);max-width:90%;width:max-content;line-height:1.8}.spinner{display:inline-block;width:12px;height:12px;border:1px solid #53616a33;border-top-color:#53616a;border-radius:50%;animation:spin 1s linear infinite;margin-right:8px}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}@media(max-width:700px){header{top:max(24px,env(safe-area-inset-top));left:6%;right:6%}.brand{font-size:24px;gap:9px}.brand img{width:29px;height:29px}header nav{gap:20px;font-size:13px}main{top:14%;left:6%}h1{font-size:clamp(48px,12vw,70px);margin-bottom:14px}main p{font-size:12px;letter-spacing:0}.bottom{left:6%;right:6%;bottom:97px;display:block}.projects{justify-content:space-around;padding:15px 2px}.projects a{font-size:13px;padding:0 12px}.projects span{margin-left:3px}.interaction{position:absolute;right:0;bottom:70px}.interaction p{font-size:10px}.controls button{width:33px;height:33px}footer{left:6%;right:6%;bottom:max(19px,env(safe-area-inset-bottom));font-size:9px;gap:12px;align-items:flex-end}footer div{gap:5px;flex-direction:column;align-items:flex-end}#notice{bottom:220px;font-size:11px}footer img{width:11px;height:11px}}@media(max-height:540px) and (min-width:701px){header{top:16px}main{top:20%}h1{font-size:48px;margin-bottom:10px}.bottom{bottom:55px}footer{bottom:16px}.projects{padding:12px 4px}main p{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.projects a{white-space:nowrap}@media(max-width:700px){.projects a{padding:0 9px}}

.model-credit a{display:inline} @media(max-width:700px){.model-credit{display:block;max-width:135px;line-height:1.6;font-size:8px}}

/* Two right-aligned footer rows: copyright / attribution, then registrations. */
footer{flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:5px;text-align:right;line-height:1.5}
footer>span{white-space:nowrap}
footer .model-credit{display:inline;max-width:none;font-size:inherit;line-height:inherit}
footer>div{flex-direction:row;justify-content:flex-end;align-items:center;gap:12px;white-space:nowrap}
@media(max-width:700px){footer{font-size:clamp(7px,2.1vw,9px);gap:5px}footer>div{gap:6px}footer img{width:10px;height:10px}}

/* White hero copy stays readable over the moving landscape. */
main{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.45)}
main h1{font-size:50px;white-space:nowrap;letter-spacing:0;line-height:1.25;text-shadow:0 2px 5px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.45);-webkit-text-stroke:.4px rgba(0,0,0,.35)}
main p{color:#fff;opacity:1}
@media(max-width:400px){main{left:10px}}

/* Explicit stacking: interactive scene below every piece of page content. */
body{isolation:isolate}
#world{z-index:0}
#world canvas{visibility:hidden}
#world.is-ready canvas{visibility:visible}
.veil{z-index:1}
header,main,.bottom,footer{z-index:2}
main{pointer-events:auto}
#notice{z-index:4}
#loading{position:fixed;z-index:5;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:12px;max-width:calc(100vw - 40px);padding:20px 28px;border:1px solid #ffffff99;border-radius:16px;background:#f4f5efed;backdrop-filter:blur(12px);text-align:center;line-height:1.6}
#loading .spinner{flex:none;width:22px;height:22px;margin:0;border-width:2px}

/* Original concept, now a static photograph with live page content. */
#world,#world:active{cursor:default;touch-action:auto;pointer-events:none}
#scene-background{display:block;width:100%;height:100%;object-fit:cover;object-position:55% center}
@media(max-width:700px){#scene-background{object-position:55% center}}