#p2{height:100dvh;position:relative;padding:0;overflow:hidden}#works{width:100%;height:100%;position:relative;isolation:isolate;background:radial-gradient(ellipse at 65% 45%,#26294b22,transparent 65%)}
#galleryStage{position:absolute;inset:95px 0 65px;touch-action:none;cursor:grab;outline:none}#galleryStage:active{cursor:grabbing}#galleryCanvas{display:block;width:100%;height:100%;mask-image:linear-gradient(transparent,#000 10% 90%,transparent)}
.gallery-heading{position:absolute;z-index:2;top:150px;left:6vw;pointer-events:none}.gallery-heading>p:first-child{font:11px Arial,sans-serif;letter-spacing:.28em;color:#aab8d8}.gallery-heading h2{font:normal clamp(40px,5vw,70px)/1.1 'Noto Serif JP',serif;margin:10px 0 25px;color:#f0f2f8}.gallery-intro{font:14px/1.9 Arial,sans-serif;color:#aab3c5}
.gallery-focus{position:absolute;z-index:3;right:6vw;bottom:140px;max-width:330px;text-align:right;padding:24px;background:linear-gradient(120deg,transparent,#050812dd);pointer-events:none}.gallery-focus p{font:11px Arial,sans-serif;color:#aab8d8;letter-spacing:.2em}.gallery-focus h3{font:400 21px/1.8 'Noto Serif JP',serif;margin:12px 0}.gallery-focus button{pointer-events:auto;border:0;border-bottom:1px solid #9daed066;background:transparent;color:#d9e1f3;padding:12px 0;font:14px Arial,sans-serif;cursor:pointer}
.gallery-toolbar{position:absolute;z-index:4;bottom:58px;left:50%;transform:translateX(-50%);display:flex;gap:20px;align-items:center;white-space:nowrap}.gallery-toolbar button{background:transparent;color:#c7d0e4;border:0;cursor:pointer;min-width:44px;min-height:44px;font:13px Arial,sans-serif}.gallery-toolbar>span{font:10px Arial,sans-serif;letter-spacing:.2em;color:#909eb7}#works button:focus-visible,#galleryStage:focus-visible,#galleryViewer button:focus-visible{outline:2px solid #aab8d8;outline-offset:5px}
#galleryIndex{position:absolute;z-index:5;right:6vw;top:110px;width:min(430px,88vw);padding:18px 24px;background:#080d18f5;border:1px solid #aab8d833;max-height:65vh;overflow:auto}#galleryIndex[hidden]{display:none}#galleryIndex button{display:block;text-align:left;width:100%;padding:16px 0;border:0;border-bottom:1px solid #aab8d82b;background:transparent;color:#dce2ef;font:14px/1.6 'Noto Serif JP',serif;cursor:pointer}#galleryIndex button[aria-current=true]{color:#e5c583}
#galleryStatus{position:absolute;left:6vw;bottom:110px;z-index:5;max-width:280px;color:#c7d0e4;font:14px/1.7 Arial,sans-serif}
#galleryViewer{width:min(1100px,94vw);height:min(850px,92dvh);max-height:92dvh;padding:48px 30px 25px;border:1px solid #aab8d833;background:#080d18;color:#e9edf5;overflow:auto}#galleryViewer::backdrop{background:#03050aeb;backdrop-filter:blur(8px)}#viewerClose{position:absolute;top:12px;right:20px;background:transparent;border:0;color:#d8dfed;font:14px Arial,sans-serif;min-height:34px;cursor:pointer}#viewerMedia{height:calc(100% - 135px);min-height:180px;display:flex;align-items:center;justify-content:center}#viewerMedia img,#viewerMedia video{display:block;width:100%;height:100%;object-fit:contain}.viewer-caption{padding-top:18px}.viewer-caption p{font:11px Arial,sans-serif;letter-spacing:.15em;color:#9daed0;margin:0 0 8px}.viewer-caption h3{font:normal 20px/1.6 'Noto Serif JP',serif;margin:0}#viewerAssets{display:flex;gap:12px;margin-top:8px}#viewerAssets button{background:transparent;border:1px solid #aab8d833;color:#cbd4e7;padding:8px 14px;cursor:pointer}#viewerAssets button[aria-pressed=true]{border-color:#cbd4e7}
body:has(#p2.active) .page-controls{display:none}body:has(#p2.active)>nav{background:linear-gradient(#03050aee,transparent);padding-bottom:35px}
@media(max-width:900px){.gallery-heading{top:125px;left:5vw}.gallery-heading h2{font-size:44px}.gallery-intro{display:none}.gallery-focus{right:4vw;bottom:125px;max-width:270px}.gallery-focus h3{font-size:18px}}
@media(max-width:767px){body:has(#p2.active) .page-controls{display:flex;left:auto;right:12px;top:20px;bottom:auto;transform:none;gap:4px}body:has(#p2.active) .page-controls button{font:10px Arial,sans-serif;letter-spacing:.08em;padding:8px 5px}body:has(#p2.active) .page-controls>span{display:none}body:has(#p2.active) .ray-logo--nav{height:28px;max-width:145px}.gallery-heading{top:105px;left:25px}.gallery-heading h2{font-size:32px;margin-top:8px}.gallery-heading>p:first-child{font-size:9px}.gallery-focus{left:24px;right:24px;bottom:105px;text-align:left;max-width:none;padding:12px 0;background:linear-gradient(90deg,#050812cc,transparent)}.gallery-focus h3{font-size:18px;margin:6px 0}.gallery-focus p{font-size:10px}.gallery-focus button{font-size:13px;padding:8px 0}.gallery-toolbar{bottom:28px;gap:7px;width:calc(100% - 36px);justify-content:space-between}.gallery-toolbar>span{font-size:9px;letter-spacing:0}.gallery-toolbar button{font-size:11px}.gallery-toolbar button:first-child,.gallery-toolbar button:nth-child(3){min-width:32px}#galleryStage{inset:150px 0 230px}#galleryIndex{top:175px;right:6vw;max-height:45vh}#galleryViewer{padding:48px 16px 20px}#viewerMedia{height:calc(100% - 140px)}.viewer-caption h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.page.active,body.is-transitioning .page.active{animation:none;transition:none;transform:none;filter:none}.hero-bg,.hero-cross::before,.hero-cross__star{animation:none!important}}
.gallery-focus{background:radial-gradient(ellipse at right,#03050a99,transparent 75%);border:0;backdrop-filter:none;text-shadow:0 2px 14px #02040a;padding:18px 0 18px 24px}
@media(max-width:767px){.gallery-focus{background:transparent;border:0;backdrop-filter:none;padding:12px 0}}
/* Keep the orbit clear of the project text without enclosing either in a card. */
@media(min-width:901px){#galleryStage{right:16vw}.gallery-focus{max-width:260px}.gallery-heading{max-width:240px;text-shadow:0 2px 16px #02040a}}
@media(min-width:768px) and (max-width:900px){#galleryStage{inset:200px 0 260px}.gallery-focus{bottom:115px;right:6vw}.gallery-heading{top:115px}}