.first-generate-page{--fg-laser:#27d7ff;position:relative;background:#050505}
.first-generate-page ::selection{background:var(--fg-laser);color:#050505}
.first-generate-page:before{content:"";position:fixed;z-index:0;inset:0;background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url("assets/first-generate-bg.webp");background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none}
.first-generate-page>main,.first-generate-page>footer{position:relative;z-index:1}
.first-generate-page .site-header{background:rgba(5,5,5,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.first-generate-page .site-header .nav a{color:var(--white)}
.first-generate-page .site-header .nav a:after{background:var(--fg-laser);box-shadow:0 0 7px rgba(39,215,255,.42)}
.first-generate-page .site-header .menu-toggle span{background:var(--white)}
.fg-hero{position:relative;display:flex;min-height:min(820px,100svh);align-items:flex-end;padding:clamp(140px,18vh,210px) var(--pad) clamp(70px,9vh,105px);overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(circle at 78% 34%,rgba(39,215,255,.13),transparent 24%),linear-gradient(135deg,rgba(7,7,7,.34) 20%,rgba(5,15,19,.32) 62%,rgba(5,5,5,.38))}
.fg-hero:before{content:"01";position:absolute;right:-.03em;bottom:-.22em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);font:500 clamp(280px,38vw,620px)/1 "Space Grotesk";letter-spacing:-.1em;pointer-events:none}
.fg-hero-copy{position:relative;z-index:1}
.fg-hero h1{max-width:1100px;margin:35px 0 42px;font:500 clamp(62px,10vw,148px)/.82 "Space Grotesk";letter-spacing:-.075em}
.fg-hero h1 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.72)}
.fg-description{margin:0;color:rgba(243,241,235,.75);font:300 clamp(12px,1.1vw,16px)/2 "Noto Sans JP";letter-spacing:.04em}
.fg-tagline{margin:34px 0 0;color:#8a8a8a;font:500 8px/1 "Space Grotesk";letter-spacing:.28em}
.first-generate-page .section-no:before{background:var(--fg-laser);box-shadow:0 0 8px rgba(39,215,255,.45)}
.fg-works{position:relative;padding:clamp(100px,12vw,180px) var(--pad) clamp(120px,14vw,210px);background:linear-gradient(180deg,rgba(5,18,22,.4),rgba(5,5,5,.26) 18%,rgba(5,5,5,.34))}
.fg-bottom-nav{display:flex;justify-content:flex-start;margin-top:clamp(80px,10vw,145px);padding-top:clamp(38px,5vw,70px);border-top:1px solid rgba(255,255,255,.12)}
.fg-back{position:relative;display:inline-flex;min-height:48px;align-items:center;padding:0 4px 10px;color:#e9e9e6;font:500 clamp(11px,1vw,14px)/1 "Space Grotesk";letter-spacing:.18em;transition:color .38s ease}
.fg-back:after{content:"";position:absolute;left:0;bottom:0;width:52px;height:1px;background:var(--fg-laser);box-shadow:0 0 8px rgba(39,215,255,.45);transition:width .42s ease}
.fg-back span{margin-right:14px;color:var(--fg-laser);font-size:18px;transition:transform .38s ease}
.fg-works-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(55px,7vw,95px);padding-bottom:22px;border-bottom:1px solid var(--line)}
.fg-works-heading .section-no:before{background:var(--fg-laser);box-shadow:0 0 7px rgba(39,215,255,.58)}
.fg-works-heading h2{margin:0;font:500 clamp(42px,6vw,88px)/.9 "Space Grotesk";letter-spacing:-.06em}
.fg-work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;gap:clamp(16px,1.8vw,28px)}
.fg-work-card{width:min(100%,calc(65vh * .5625));max-width:100%;min-width:0;border-bottom:1px solid var(--line)}
.fg-video-frame{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background:radial-gradient(circle at 50% 36%,rgba(39,215,255,.2),transparent 24%),linear-gradient(145deg,#061b21,#090909 60%,#151515)}
.fg-video-frame video{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#000;transform-origin:center}
.fg-video-frame .video-thumbnail,.fg-video-frame .mv-video-thumbnail{position:absolute;z-index:3;inset:0;display:none;width:100%;height:100%;object-fit:cover;background:#000;transform:translateY(6px) scale(1.024)}
.fg-video-frame.has-thumbnail:not(.is-playing) .video-thumbnail,.fg-video-frame.has-thumbnail:not(.is-playing) .mv-video-thumbnail{display:block}
.fg-placeholder{position:absolute;z-index:1;inset:0;display:none;place-items:center;color:rgba(255,255,255,.18);font:500 8px/1 "Space Grotesk";letter-spacing:.24em}
.fg-video-frame.has-video-error video{display:none}
.fg-video-frame.has-video-error .fg-placeholder{display:grid}
.fg-play{position:absolute;z-index:4;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;border:0;background:none;transform:translate(-50%,-50%);cursor:pointer;filter:drop-shadow(0 2px 9px rgba(0,0,0,.85))}
.fg-play i{display:grid;width:54px;height:54px;place-items:center;padding-left:3px;border:1px solid rgba(255,255,255,.78);border-radius:50%;background:rgba(0,0,0,.28);color:#fff;font:normal 10px/1 "Space Grotesk"}
.fg-play span{color:#eee;font:500 7px/1 "Space Grotesk";letter-spacing:.2em;white-space:nowrap}
.fg-video-frame.is-playing .fg-play{visibility:hidden;opacity:0}
.fg-play.is-unavailable i{border-color:rgba(39,215,255,.68)}
.fg-play.is-unavailable span{color:rgba(39,215,255,.78)}
.fg-work-info{position:relative;isolation:isolate;display:flex;box-sizing:border-box;height:155px;flex-direction:column;gap:8px;padding:13px 12px 15px;overflow:hidden;border-top:1px solid rgba(39,215,255,.28);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fg-work-info:before{content:"";position:absolute;z-index:0;top:-1px;left:0;width:44px;height:2px;background:var(--fg-laser);box-shadow:0 0 7px rgba(39,215,255,.72);transition:width .42s ease;pointer-events:none}
.fg-work-info>*{position:relative;z-index:1}
.fg-number{display:block;margin:0;color:var(--fg-laser);font:500 8px/1 "Space Grotesk";letter-spacing:.18em}
.fg-work-info h3{margin:0;color:#f2f0eb;font:500 clamp(18px,1.45vw,23px)/1 "Space Grotesk";letter-spacing:-.035em}
.fg-work-info h3 small{display:block;margin-top:5px;color:#c8c8c5;font:400 9px/1.15 "Space Grotesk";letter-spacing:.12em}
.fg-meta{display:flex;flex-wrap:nowrap;align-items:center;gap:11px;color:rgba(39,215,255,.72);font:500 6px/1 "Space Grotesk";letter-spacing:.12em;white-space:nowrap}
.fg-work-info p{margin:0;color:#898989;font:300 9px/1.5 "Noto Sans JP";letter-spacing:.02em}
@media(hover:hover) and (pointer:fine){.fg-work-card:hover .fg-work-info:before{width:100%}.fg-play:hover i{border-color:#fff;background:rgba(39,215,255,.2)}.fg-back:hover{color:#fff}.fg-back:hover:after{width:100%}.fg-back:hover span{transform:translateX(-4px)}}
@media(hover:none){.fg-work-info:before{width:44px;transition:none}.fg-back,.fg-back:after,.fg-back span{transition:none}}
@media(max-width:1100px){.fg-work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:55px clamp(20px,4vw,46px)}}
@media(max-width:760px){.first-generate-page:before{inset:auto;top:0;right:0;left:0;width:100%;height:100lvh;background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url("assets/first-generate-bg-mobile.webp");background-position:center}.fg-hero{min-height:720px;align-items:center;padding-top:120px;padding-bottom:100px}.fg-hero h1{margin:28px 0 34px;font-size:clamp(52px,15vw,75px)}.fg-description br{display:none}.fg-description{max-width:34em;font-size:11px;line-height:1.9}.fg-tagline{font-size:7px;line-height:1.6}.fg-works{padding-top:95px}.fg-works-heading{display:block}.fg-works-heading h2{margin-top:20px;font-size:clamp(38px,12vw,58px)}.fg-work-grid{grid-template-columns:1fr;gap:32px;width:100%;margin-inline:auto}.fg-work-card{width:min(92vw,100%);margin-inline:auto}.fg-video-frame{width:100%;height:auto;aspect-ratio:9/16}.fg-video-frame video,.fg-work-card:hover .fg-video-frame video{transform:none;transition:none}.fg-work-info{height:112px;min-height:0;gap:5px;padding:8px 10px 9px}.fg-number{margin:0;font-size:7px}.fg-work-info h3{margin:0;font-size:18px}.fg-work-info h3 small{margin-top:4px;font-size:8px}.fg-meta{gap:9px;font-size:6px}.fg-work-info p{margin:0;font-size:8px;line-height:1.4}.fg-play i{width:58px;height:58px}.fg-play span{font-size:7px}.fg-bottom-nav{justify-content:center;margin-top:78px;padding-top:36px}.fg-back{min-height:56px;padding-inline:12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.fg-video-frame video{transition:none}}

/* THE FIRST GENE(RATE) monochrome accent */
.first-generate-detail-page{--page-accent:#fff;--fg-laser:var(--page-accent)}
.first-generate-detail-page .site-header .nav a:after{background:#fff;box-shadow:0 0 7px rgba(255,255,255,.34)}
.first-generate-detail-page .fg-hero{background:radial-gradient(circle at 78% 34%,rgba(255,255,255,.08),transparent 24%),linear-gradient(135deg,rgba(7,7,7,.34) 20%,rgba(14,14,14,.32) 62%,rgba(5,5,5,.38))}
.first-generate-detail-page .fg-works{background:linear-gradient(180deg,rgba(18,18,18,.4),rgba(5,5,5,.26) 18%,rgba(5,5,5,.34))}
.first-generate-detail-page .section-no{color:#fff}
.first-generate-detail-page .section-no:before,.first-generate-detail-page .fg-works-heading .section-no:before{background:#fff;box-shadow:0 0 7px rgba(255,255,255,.35)}
.first-generate-detail-page .fg-video-frame{background:radial-gradient(circle at 50% 36%,rgba(255,255,255,.12),transparent 24%),linear-gradient(145deg,#171717,#090909 60%,#151515)}
.first-generate-detail-page .fg-play.is-unavailable i{border-color:rgba(255,255,255,.7)}
.first-generate-detail-page .fg-play.is-unavailable span{color:rgba(255,255,255,.82)}
.first-generate-detail-page .fg-work-info{border-top-color:rgba(255,255,255,.3)}
.first-generate-detail-page .fg-work-info:before{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.52),0 0 12px rgba(255,255,255,.18)}
.first-generate-detail-page .fg-number{color:#fff}
.first-generate-detail-page .fg-meta{color:rgba(255,255,255,.72)}
.first-generate-detail-page .fg-back:after{background:#fff;box-shadow:0 0 7px rgba(255,255,255,.34)}
.first-generate-detail-page .fg-back span{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.28)}
@media(hover:hover) and (pointer:fine){.first-generate-detail-page .fg-work-card:hover .fg-work-info:before{box-shadow:0 0 8px rgba(255,255,255,.68),0 0 15px rgba(255,255,255,.26)}.first-generate-detail-page .fg-play:hover i{background:rgba(255,255,255,.12);box-shadow:0 0 9px rgba(255,255,255,.18)}.first-generate-detail-page .fg-back:hover:after{box-shadow:0 0 9px rgba(255,255,255,.48)}}