:root{--bg:#10151a;--panel:#1a2229;--line:#33414a;--text:#f2f0e9;--muted:#a9b5b8;--accent:#cbd6c9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans CJK SC","Microsoft YaHei",sans-serif}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}.site-header{height:78px;padding:0 5.5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff19;position:relative;z-index:2}.brand{font-size:14px;font-weight:800;letter-spacing:.12em}.brand span{font-weight:400;color:var(--muted);letter-spacing:.04em}.site-header nav{display:flex;gap:35px;font-size:13px;color:#d0d6d4}.site-header a:hover,footer a:hover{color:white}.hero{min-height:690px;position:relative;display:grid;grid-template-columns:42% 58%;align-items:center;overflow:hidden;padding:50px 5.5% 80px;background:radial-gradient(ellipse at 72% 44%,#293b43 0%,#18232a 38%,#10151a 73%)}.hero-copy{position:relative;z-index:1;max-width:550px}.eyebrow,.section-label{font-size:12px;letter-spacing:.22em;color:#a4b9b0;font-weight:700}.hero h1{font-size:clamp(54px,7vw,104px);letter-spacing:-.06em;line-height:1.08;margin:25px 0 24px}.hero h1 span{display:block;font-size:clamp(23px,2.1vw,34px);letter-spacing:-.025em;line-height:1.4;font-weight:400;margin-top:20px;color:#d3dfdc}.hero-intro{color:#afc1c0;line-height:1.9;font-size:15px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.button{border-radius:100px;padding:13px 22px;font-size:13px}.primary{background:#e5e9db;color:#162329;font-weight:700}.secondary{border:1px solid #73858a}.button:hover{transform:translateY(-2px)}.hero-art{height:560px;position:relative;min-width:0}.halo{position:absolute;inset:8% 0 8% 0;background:radial-gradient(circle,#738a8a25 0%,transparent 65%);pointer-events:none}.hero-gallery{height:100%;position:relative;overflow:hidden;touch-action:pan-y;outline:none}.gallery-track{height:460px;position:relative;perspective:900px}.gallery-card{border:1px solid #ffffff36;background:#222c31;border-radius:14px;position:absolute;top:50%;left:50%;width:34%;height:340px;transform:translate(-50%,-50%);overflow:hidden;box-shadow:0 30px 70px #0009;transition:transform .56s cubic-bezier(.2,.8,.2,1),opacity .45s,filter .45s;cursor:pointer;text-align:left;padding:0;color:white}.gallery-card img{width:100%;height:100%;object-fit:cover;display:block;background:#222}.gallery-card::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#050a0cda)}.gallery-card .card-label{position:absolute;bottom:18px;left:20px;z-index:1;font-size:17px;font-weight:700}.gallery-card small{display:block;color:#cad6d4;font-weight:400;margin-bottom:5px;font-size:11px;letter-spacing:.13em}.gallery-card[data-offset="0"]{z-index:3;width:40%;height:380px;transform:translate(-50%,-50%) rotateY(0) scale(1.05)}.gallery-card[data-offset="-1"]{z-index:2;transform:translate(-115%,-48%) rotateY(22deg) scale(.84);filter:brightness(.73)}.gallery-card[data-offset="1"]{z-index:2;transform:translate(15%,-48%) rotateY(-22deg) scale(.84);filter:brightness(.73)}.gallery-controls{display:flex;justify-content:center;align-items:center;gap:24px}.gallery-controls button{background:transparent;border:1px solid #829398;border-radius:50%;color:white;width:38px;height:38px}.gallery-controls button:hover{background:#ffffff20}.gallery-controls span{font-size:12px;letter-spacing:.2em;color:#d1d9d5}.gesture{text-align:center;color:#a6b7b9;font-size:11px;letter-spacing:.07em}.hero-bottom{position:absolute;bottom:25px;left:5.5%;right:5.5%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;color:#94a5a6}.about,.works,.contact{padding:100px 7%}.about{display:grid;grid-template-columns:28% 1fr;border-top:1px solid #ffffff17;max-width:1500px;margin:auto}.about h2,.works h2,.contact h2{font-size:clamp(36px,5vw,64px);letter-spacing:-.045em;margin:0 0 28px}.about>div:last-child>p{max-width:700px;line-height:1.95;color:#b7c2c3;font-size:16px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid var(--line);margin-top:36px;padding-top:28px}.about-grid div{display:flex;flex-direction:column;gap:9px}.about-grid small{color:#91a6a9}.about-grid strong{font-size:18px}.about-grid span{font-size:14px;color:#afbdbf;line-height:1.7}.works{background:#e8e9e3;color:#17252c}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:40px}.works .section-label{color:#54706e}.works h2{margin:12px 0 0}.works h2 span{font-size:22px;color:#71807f}.section-head p{color:#627271;font-size:14px}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.work-card{min-width:0;border:0;text-align:left;background:#fff;padding:0 0 24px;transition:transform .25s;box-shadow:0 12px 34px #12222a0d}.work-card:hover{transform:translateY(-6px)}.work-card .image-wrap{height:350px;background:#1b2125;display:block;overflow:hidden}.work-card img{width:100%;height:100%;object-fit:contain;transition:transform .35s}.work-card:hover img{transform:scale(1.04)}.work-card .meta{display:block;padding:22px 22px 0;color:#788583;font-size:11px;letter-spacing:.12em}.work-card strong{display:block;padding:6px 22px 0;font-size:23px}.work-card .detail{display:block;padding:10px 22px 0;color:#697877;font-size:13px}.contact{min-height:400px;background:#17262d}.contact h2{max-width:850px;margin-top:22px}.contact p{color:#aec0c0;line-height:1.8}.contact-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:38px}.contact-actions a{border-bottom:1px solid #dce5df;padding-bottom:10px;margin-right:30px}footer{padding:25px 7%;display:flex;justify-content:space-between;gap:20px;color:#98a8aa;font-size:12px}dialog{padding:0;border:0;max-width:1000px;width:min(92vw,1000px);max-height:92vh;background:#e9ece8;color:#1b2a30;border-radius:10px;overflow:auto}dialog::backdrop{background:#071117d9;backdrop-filter:blur(9px)}.dialog-shell{padding:48px;position:relative}.dialog-close{position:sticky;float:right;top:0;border:0;border-radius:50%;background:#20343e;color:white;width:40px;height:40px;font-size:25px;z-index:4}.dialog-shell h2{font-size:38px;margin:8px 0}.dialog-shell p{color:#566a70;line-height:1.7}.dialog-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.dialog-gallery img{width:100%;height:300px;object-fit:contain;background:#1c2329;border-radius:5px}.dialog-gallery img:first-child{grid-column:span 2;height:440px}.texture-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 0}.texture-grid figure{margin:0}.texture-grid img{width:100%;aspect-ratio:1;object-fit:cover;background:#333}.texture-grid figcaption{font-size:12px;color:#627275;margin-top:5px}h3{margin-top:40px}@media(max-width:850px){.site-header{padding:0 5%;height:65px}.brand span{display:none}.site-header nav{gap:14px;font-size:11px}.hero{display:block;padding:62px 5% 65px;min-height:0}.hero h1{font-size:58px}.hero-art{height:480px;margin:10px -5.5% 0}.gallery-track{height:380px}.gallery-card{height:255px;width:42%}.gallery-card[data-offset="0"]{height:295px;width:48%}.about{display:block}.about .section-label{margin-bottom:24px}.work-grid{grid-template-columns:1fr 1fr}.work-card .image-wrap{height:300px}}@media(max-width:600px){.site-header{gap:10px}.brand{font-size:11px;white-space:nowrap}.site-header nav{gap:9px}.site-header nav a{font-size:10px}.hero h1{font-size:52px}.hero-art{height:390px}.gallery-track{height:310px}.gallery-card{width:54%;height:210px}.gallery-card[data-offset="0"]{width:61%;height:245px}.gallery-card[data-offset="-1"]{transform:translate(-112%,-50%) rotateY(23deg) scale(.8)}.gallery-card[data-offset="1"]{transform:translate(12%,-50%) rotateY(-23deg) scale(.8)}.gallery-card .card-label{font-size:14px;bottom:12px;left:12px}.hero-bottom{display:none}.about,.works,.contact{padding:65px 6%}.about-grid{grid-template-columns:1fr;gap:24px}.section-head{display:block}.work-grid{grid-template-columns:1fr}.work-card .image-wrap{height:330px}.dialog-shell{padding:20px}.dialog-shell h2{font-size:29px}.dialog-gallery{display:block}.dialog-gallery img,.dialog-gallery img:first-child{height:auto;max-height:420px;margin-bottom:10px}.texture-grid{grid-template-columns:repeat(2,1fr)}footer{display:block;line-height:2}}
.model-viewer{height:480px;background:#182026;position:relative;border-radius:7px;overflow:hidden;margin-top:24px;touch-action:none}.model-viewer canvas{display:block;width:100%;height:100%}.viewer-status{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:11px 15px;background:linear-gradient(transparent,#071016dd);color:#e7f0ef;font-size:12px;pointer-events:none;z-index:1}.model-viewer.ready .viewer-status{background:linear-gradient(transparent,#071016b8)}@media(max-width:600px){.model-viewer{height:350px}}

.project-lead{display:block;width:100%;max-height:480px;object-fit:contain;background:#1c2329;border-radius:5px;margin-top:24px}.dialog-gallery.additional img:first-child{grid-column:auto;height:300px}@media(max-width:600px){.project-lead{max-height:none}.dialog-gallery.additional img:first-child{height:auto}}
.resume-shell{padding:28px 36px 36px}.resume-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:8px 0 24px}.resume-heading small{font-size:11px;letter-spacing:.2em;color:#627775}.resume-heading h2{font-size:clamp(24px,3vw,36px);margin:6px 0 4px}.resume-heading p{margin:0;font-size:13px}.resume-tools{display:flex;align-items:center;gap:10px;flex:none}.resume-tools button,.resume-save{display:inline-block;border:0;border-radius:100px;padding:12px 18px;font-size:13px}.resume-tools button{color:#20343e;background:#d5dfda}.resume-save{background:#20343e;color:white}.resume-save:hover{background:#35505a}.resume-image-scroll{overflow:auto}.resume-preview{display:block;width:100%;height:auto;background:white;box-shadow:0 8px 30px #18252a25}#resumeDialog.zoomed .resume-preview{width:1100px;max-width:none}.resume-shell .dialog-close{margin-left:14px}@media(max-width:600px){.resume-shell{padding:20px 14px}.resume-heading{display:block;padding:12px 4px 20px}.resume-tools{margin-top:18px;flex-wrap:wrap}}
.resume-download-status{background:#dce9dc;color:#1f4435;border-radius:6px;padding:10px 14px;font-size:13px;margin:0 0 16px!important}.resume-download-status[hidden]{display:none}

/* Hero accordion and the circular selected-work gallery. */
.hero-art{display:flex;flex-direction:column;justify-content:center}
.accordion-gallery{display:flex;align-items:stretch;gap:10px;width:100%;height:460px;perspective:1200px}
.accordion-panel{position:relative;flex:1 1 0;min-width:0;padding:0;border:1px solid #ffffff36;border-radius:16px;overflow:hidden;background:#171d22;color:#fff;text-align:left;isolation:isolate;transition:flex-grow .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),border-color .6s;transform:perspective(1200px) rotateY(var(--panel-tilt,0deg));animation:accordion-enter .65s both;animation-delay:calc(var(--order)*.06s)}
.accordion-panel[data-active="true"]{flex-grow:2.17;border-color:#d5e0db8a;z-index:1}
.accordion-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#171d22;filter:grayscale(1) brightness(.68);transform:translateX(var(--image-shift,0px)) scale(1.12);transition:filter .6s,transform .6s;pointer-events:none}
.accordion-panel[data-active="true"] img{filter:none;transform:translateX(var(--image-shift,0px)) scale(1)}
.accordion-panel::after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#050a0dc9);pointer-events:none}
.accordion-panel:focus-visible{outline:2px solid #fff;outline-offset:3px}
.accordion-label{position:absolute;left:18px;right:18px;bottom:22px;z-index:1;display:block;text-shadow:0 2px 10px #000b}
.accordion-label small{display:block;font-size:10px;letter-spacing:.1em;line-height:1.5;color:#d7e1df;margin-bottom:7px}
.accordion-panel:not([data-active="true"]) .accordion-label small{display:none}
.accordion-label strong{display:block;font-size:20px;line-height:1.3;white-space:nowrap}
.accordion-label>span{position:absolute;right:0;bottom:0;font-size:18px;opacity:0;transform:translateX(-5px);transition:opacity .3s,transform .3s}
.accordion-panel[data-active="true"] .accordion-label>span{opacity:1;transform:none}
.hero-art .gesture{width:100%;margin:14px 0 0}
@keyframes accordion-enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.work-gallery{position:relative;width:min(100%,1080px);height:565px;margin:auto;padding:20px 30px;border-radius:22px;background:radial-gradient(ellipse at 50% 48%,#2c3c42,#18232a 65%,#11191e);color:#fff;overflow:hidden;touch-action:pan-y;outline:none}
.work-gallery .gallery-track{height:460px}
.work-gallery .gallery-card{border-color:#ffffff42}
.work-gallery .gallery-card img{object-fit:contain;user-select:none;pointer-events:none}
.work-gallery .gallery-controls{position:relative;z-index:4}
.work-gesture{text-align:center;color:#a6b7b9;font-size:11px;letter-spacing:.07em;margin:16px 0 0}
@media(max-width:850px){.accordion-gallery{height:360px}.work-gallery{height:470px;padding:18px}.work-gallery .gallery-track{height:380px}}
@media(max-width:600px){.accordion-gallery{height:300px;gap:6px}.accordion-panel{border-radius:10px}.accordion-label{left:9px;right:9px;bottom:13px}.accordion-label strong{font-size:14px;white-space:normal}.accordion-label small{font-size:9px}.accordion-panel:not([data-active="true"]) .accordion-label strong{writing-mode:vertical-rl;max-height:110px}.accordion-label>span{display:none}.work-gallery{height:410px;padding:14px 8px}.work-gallery .gallery-track{height:310px}.work-gesture{font-size:10px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.accordion-panel,.accordion-panel img,.accordion-label>span,.gallery-card{transition:none;animation:none}}

/* Larger continuous carousel, with the same page background. */
.accordion-panel{cursor:default}
.works{padding:80px 0 65px;background:var(--bg);color:var(--text);border-top:1px solid #ffffff17}
.works .section-head{margin:0 7% 25px}.works .section-label{color:#a4b9b0}.works h2 span{color:#8fa39e}.works .section-head p{color:#b0bfbd;max-width:440px;line-height:1.8}
.work-gallery{width:100%;height:680px;max-width:none;padding:0;margin:0;background:none;border-radius:0}
.work-gallery .gallery-track{height:585px;perspective:1500px;cursor:grab;touch-action:pan-y;user-select:none}
.work-gallery .gallery-track.dragging{cursor:grabbing}
.work-gallery .gallery-card{width:min(56vw,800px);height:520px;transition:none;will-change:transform;border-radius:18px;background:#171d22;box-shadow:0 24px 60px #0007}
.work-gallery .gallery-card img{background:#171d22;object-fit:contain}
.work-gallery .gallery-card .card-label{font-size:24px;left:28px;bottom:25px}.work-gallery .gallery-card small{font-size:12px;letter-spacing:.08em}
.work-gallery .gallery-controls button{width:44px;height:44px}.work-gesture{margin-top:15px}
.about{grid-template-columns:36% 1fr;gap:5%;align-items:center;padding:75px 7%}
.about-visual{min-width:0}.about-visual .section-label{margin-bottom:0}
.lanyard{position:relative;width:100%;height:600px;overflow:hidden}
.lanyard-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.lanyard-fallback{position:absolute;inset:0}.lanyard.has-webgl .lanyard-fallback{display:none}
.fallback-band{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.fallback-band path{fill:none;stroke:#101314;stroke-width:19px;filter:drop-shadow(0 0 1px #8c9a99);stroke-linecap:butt}
.badge-card{position:absolute;top:180px;left:50%;width:min(60%,240px);aspect-ratio:1.6/2.25;padding:0;border:5px solid #edf0e9;border-radius:20px;background:#eef0ea;transform:translateX(-50%);transform-origin:50% -35px;box-shadow:0 22px 42px #0007;touch-action:none;cursor:grab;perspective:1000px;isolation:isolate}
.badge-card:active{cursor:grabbing}.badge-card:focus-visible{outline:2px solid #e3eddf;outline-offset:6px}
.badge-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1)}.badge-card.flipped .badge-inner{transform:rotateY(180deg)}
.badge-face{position:absolute;inset:0;overflow:hidden;border-radius:15px;backface-visibility:hidden}.badge-face img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.badge-front::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#fff3,transparent 38%,transparent 65%,#fff1);pointer-events:none}.badge-back{transform:rotateY(180deg)}
.badge-clip{position:absolute;width:32px;height:32px;top:-34px;left:calc(50% - 16px);border:2px solid #dce0e2;border-radius:6px;background:linear-gradient(90deg,#616b70,#f3f4f5 30%,#879397 65%,#c8d1d2);box-shadow:0 2px 5px #0008}.badge-clip::before{content:"";position:absolute;left:4px;right:4px;height:18px;top:-17px;border:4px solid #c1c9ce;border-radius:50%;background:#13191c}
.lanyard-hint{margin:-15px 0 0;color:#8fa39f;font-size:11px;letter-spacing:.1em;text-align:center}
@media(max-width:850px){.about{display:grid;grid-template-columns:1fr;gap:40px}.about-visual{width:min(100%,420px);margin:auto}.lanyard{height:500px}.work-gallery{height:570px}.work-gallery .gallery-track{height:480px}.work-gallery .gallery-card{width:70vw;height:430px}}
@media(max-width:600px){.works{padding:65px 0 45px}.works .section-head{margin:0 6% 15px}.work-gallery{height:465px;padding:0}.work-gallery .gallery-track{height:380px}.work-gallery .gallery-card{width:84vw;height:335px;border-radius:12px}.work-gallery .gallery-card .card-label{font-size:19px;left:18px;bottom:18px}.work-gallery .gallery-card small{font-size:10px}.about{padding:65px 6%;gap:40px}.lanyard{height:460px}.badge-card{top:135px;width:min(59%,220px)}}

/* Keep all seven labels readable when the accordion panels are collapsed. */
.accordion-panel[data-active="true"]{flex-grow:4.5}
.accordion-panel:not([data-active="true"]) .accordion-label{left:0;right:0;display:grid;justify-items:center}
.accordion-panel:not([data-active="true"]) .accordion-label strong{writing-mode:vertical-rl;font-size:clamp(12px,1.3vw,18px);white-space:nowrap}
.accordion-panel[data-active="true"]:is([data-work="greatsword"],[data-work="stone-sword"],[data-work="extinguisher"],[data-work="small-scene"]) img{object-fit:contain}
@media(max-width:600px){.accordion-gallery{gap:4px}.accordion-panel:not([data-active="true"]) .accordion-label strong{font-size:12px}}