:root{--bg:#09070f;--panel:#151022;--accent:#a78bfa;--line:#ffffff26;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f8f7fc;font:16px/1.6 "Helvetica Neue","PingFang SC",sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}button,summary{cursor:pointer}button{background:transparent;border:1px solid var(--line)}header,footer,.row,.rail,.band{display:flex;align-items:center;justify-content:space-between}header{position:sticky;top:0;z-index:5;height:72px;padding:0 5vw;background:#0c0911;border-bottom:1px solid var(--line)}header.scrolled{background:#100c19f2}.logo{display:block;width:110px;height:42px;object-fit:contain}nav,#links,.tabs,.filters{display:flex;gap:28px}nav a,.account,footer a{font-size:14px;color:#c9c4d5}nav a[aria-current]{color:white;border-bottom:2px solid var(--accent)}#menu,.skip:not(:focus){display:none}section,footer{padding:72px 6vw}.hero{height:min(820px,calc(100svh - 72px));min-height:510px;position:relative;display:flex;align-items:center;overflow:hidden;background:#151022}.hero video,.shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center}.shade{background:linear-gradient(90deg,#090710f2,#0d0816bb 29%,transparent 64%),linear-gradient(0deg,#0907109c,transparent 24%)}.heroText,.rail,.visual div{position:relative}.label,.rail,small{font:600 11px/1.5 monospace;letter-spacing:.16em}.label{color:#c6b3fb;display:flex;align-items:center;gap:10px}.label i{width:8px;height:8px;border:1px solid;transform:rotate(45deg)}h1,h2,h3,p{margin:0 0 20px}h1,h2{line-height:1.13;letter-spacing:-.035em}.hero h1{font-size:clamp(80px,9vw,150px);font-weight:650;letter-spacing:-.07em;margin:24px 0}.hero h1 span{display:block;font-size:.32em;letter-spacing:.17em}.heroText p,p{color:#c3bdce}.heroText p{margin-bottom:28px}.btn{display:inline-flex;align-items:center;border:1px solid #ada4bc77;border-radius:4px;padding:11px 19px;font-size:14px;margin:0 10px 6px 0;background:#1713208a}.primary{background:#6738e8;border-color:#8054f3}.btn:hover,.selected{background:#39216b}.rail{position:absolute;bottom:18px;left:6vw;right:6vw;border-top:1px solid #ffffff40;padding-top:12px}.rail button{border-radius:50%;width:32px;height:32px}.rail span:last-child{margin-left:auto}.rail span:first-child{margin-right:16px}.band,.series,footer{background:var(--panel)}.band{flex-wrap:wrap;gap:14px}.band h2,.band p{margin:0}.band h2{font-size:clamp(24px,3vw,46px)}h2{font-size:clamp(30px,4vw,64px);margin:20px 0 30px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{position:relative}.photo{background:#eeeaf2;overflow:hidden;aspect-ratio:1;display:block;width:100%}.photo img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .3s}.card:hover img{transform:scale(1.035)}.card small{display:block;margin-top:14px;color:var(--accent)}.card h3{margin:6px 0;font-size:20px}.card b{position:absolute;bottom:4px;right:5px}.visual{background:linear-gradient(90deg,#09070fdc,transparent 78%),url(assets/poster.jpg) center 40%/cover;min-height:360px}.intro{background:#151022;border-bottom:1px solid var(--line)}.intro h1,.detail h1{font-size:clamp(40px,6vw,80px);margin:22px 0}.filters{margin-bottom:32px;gap:8px}.filters a{padding:8px 18px;border:1px solid var(--line);border-radius:24px}.detail{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;margin-top:30px}.zoom{cursor:zoom-in;padding:0}.formbox form{max-width:600px;margin:auto}.formbox h2{font-size:32px}label,output{display:block;margin:16px 0}input,select,textarea{display:block;width:100%;padding:12px;background:#171222;border:1px solid #625b70;border-radius:3px;margin:6px 0}textarea{min-height:110px}#show{display:block;margin-bottom:20px}.tabs{margin-top:28px}.tabs a{color:var(--accent)}details{border-bottom:1px solid var(--line);padding:20px 0}summary{font-size:20px}dialog{background:var(--panel);max-width:95vw}dialog img{display:block;max-width:85vw;max-height:78vh}footer{gap:22px;flex-wrap:wrap}footer div{flex-wrap:wrap}main:focus{outline:none}@media(prefers-reduced-motion:no-preference){.heroText>*{animation:rise .65s both}.heroText p{animation-delay:.15s}.heroText>div{animation-delay:.28s}@keyframes rise{from{opacity:0;transform:translateY(8px)}}}@media(max-width:800px){header{height:60px}#menu{display:block}.account{margin-left:auto;margin-right:16px}nav{display:none}.open nav{position:absolute;top:100%;left:0;right:0;display:grid;gap:0;background:var(--panel);padding:10px 5vw}.open nav a{padding:10px}.grid{grid-template-columns:repeat(2,1fr)}.hero{height:80svh}.band{display:grid}}@media(max-width:600px){.hero{height:calc(95svh - 60px);min-height:590px;align-items:flex-end;padding-bottom:78px}.hero video{height:64%;object-position:79% center}.shade{background:linear-gradient(0deg,#100c18 34%,transparent 67%)}.hero h1{font-size:67px;margin:12px 0}.hero h1 span{display:inline;font-size:20px;letter-spacing:0}.heroText p{font-size:14px;margin:12px 0 16px}.rail{bottom:12px}section,footer{padding:44px 5vw}.grid{gap:18px 12px}.detail{grid-template-columns:1fr}.row .btn{font-size:12px;padding:7px}.card h3{font-size:16px}#links{gap:12px}.visual{min-height:300px}.heroText{width:100%}}

.visual.neon-poster { background: #09070f url("assets/neon-poster.webp") center / cover no-repeat; aspect-ratio: 1672 / 941; min-height: 0; padding-block: clamp(24px, 6vw, 96px); }
@media (max-width: 600px) { .neon-poster .label { font-size: 9px; letter-spacing: 1px; } }

.visual.neon-poster { container-type: inline-size; }
.neon-poster h2 { font-size: 7.8vw; font-size: 9cqw; line-height: 1.08; letter-spacing: -.045em; margin: .28em 0 0; }
.band p{max-width:42em}.story section{scroll-margin-top:85px}.story h1 span{display:block;font-size:.48em}.story p{max-width:40em;line-height:1.85}.chapters{display:flex;gap:1.5em;flex-wrap:wrap;padding:22px 6vw;border-bottom:1px solid var(--line)}.chapters a:hover{color:var(--accent)}#story-origin{background:linear-gradient(90deg,#09070ff2,rgba(9,7,15,.78) 34%,transparent 65%),url(assets/story-origin.webp) center/cover;min-height:54vw;align-content:end}#story-origin p{max-width:42%}.story .identity,.story .objects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.identity h3{margin-bottom:4px}.story img{max-width:100%;height:auto}#story-universe>img{width:100%;display:block;margin-top:24px}#story-spirit{background:#39216b}.story strong{letter-spacing:.12em}#story-spirit p{margin-top:22px}.story .objects{grid-template-columns:repeat(3,minmax(0,1fr));margin:28px 0}.objects figure{margin:0}.objects img{width:100%;aspect-ratio:1;object-fit:contain;background:#151022}.objects figcaption{padding-top:10px}#story-vision {
  aspect-ratio: 1672 / 941;
  background: var(--bg) url(assets/neon-poster.webp) center / contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}#story-vision h2{max-width:10em;width:53%}#story-vision img{display:block;width:100px;margin-top:22px}
@supports (animation-timeline:view()){ @media(prefers-reduced-motion:no-preference){.story section>h2{animation:story-in linear both;animation-timeline:view();animation-range:entry 0% entry 95%}@keyframes story-in{from{opacity:.45;transform:translateY(10px)}to{opacity:1;transform:none}}}}
@media(max-width:650px){.chapters{gap:10px 18px}.story .identity{gap:12px}.story .objects{gap:8px}.objects figcaption{font-size:12px}#story-origin{background:#09070f url(assets/story-origin.webp) center top/100% auto no-repeat;padding-top:calc(56.280vw + 28px)}#story-origin p{max-width:100%}#story-vision {
  aspect-ratio: auto;
  background-position: center top;
  background-size: 100% auto;
  padding-top: calc(56.28vw + 24px);
}
#story-vision h2 { width: 100%; font-size: clamp(26px, 6vw, 36px); }
.formbox input, .formbox select, .formbox textarea { min-width: 0; max-width: 100%; font-size: 16px; }
.row { flex-wrap: wrap; gap: 8px; }
.detail > *, .grid > * { min-width: 0; }}

.design-note{margin:12px 0 8px;color:#a78bfa;font-size:14px}.design-disclosure{font-size:14px}.filters{display:flex;flex-wrap:wrap;gap:10px}.thumbs{flex-wrap:wrap}

/* Keep detail media and thumbnail images within their own columns. */
.detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.detail .photo { width: 50%; margin-inline: auto; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.thumbs button { width: 64px; height: 64px; flex: 0 0 64px; padding: 3px; background: white; }
.thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
dialog img { display: block; width: auto; max-width: min(700px, 85vw); max-height: 75svh; object-fit: contain; margin: auto; }
.story .objects img { background: #fff; aspect-ratio: 1; width: 100%; height: auto; object-fit: contain; }
@media(max-width:600px) { .detail { grid-template-columns: minmax(0,1fr); } }
#site-language{position:relative;margin-left:12px}#site-language>button{font-size:13px;white-space:nowrap;padding:8px}.language-panel{position:absolute;right:0;top:100%;width:270px;padding:16px;background:#151022;border:1px solid #a78bfa;z-index:20}.language-panel p{font-size:12px;margin:8px 0}.language-panel select{max-width:100%;color:#111;background:white}
@media(max-width:1050px){header nav{display:none}#menu{display:block}header.open nav{display:grid;position:absolute;top:100%;left:0;right:0;background:#151022}}
@media(max-width:480px){header .account{font-size:12px}header .logo{width:80px}#site-language{margin-left:4px}#site-language>button{font-size:11px;padding:6px}}

footer{flex-wrap:wrap;gap:24px}
.social-platforms{flex-basis:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:24px;border-top:1px solid var(--line);padding-top:28px}
.social-platforms[hidden]{display:none}
.social-platforms>a,.social-platforms>button{display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;background:transparent;border:0;padding:8px;min-width:56px;cursor:pointer}
.social-platforms svg{width:30px;height:30px;fill:currentColor}
.social-platforms span{font-size:12px}
.social-platforms>p{width:100%;text-align:center;font-size:13px;margin:0}
.social-platforms>a:hover,.social-platforms>button:hover{color:#a78bfa}
@media(max-width:600px){.social-platforms{gap:12px}.social-platforms>a,.social-platforms>button{flex:0 0 25%}}
