:root {
  --bg:#120911;
  --panel:#23121e;
  --text:#fff1f5;
  --muted:#bfa6b2;
  --accent:#ff5a80;
  --pink:#ffa0c1;
  --gold:#e3c18f;
  --border:#ff73983d;
  --sans:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --serif:"Yu Mincho","Hiragino Mincho ProN",serif;
  --mono:"Consolas","SFMono-Regular",monospace;
  --pointer-x:0;
  --pointer-y:0;
  --hero-scroll:0;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:95px;
}
body {
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:15px/1.9 var(--sans);
  overflow-x:hidden;
}
button,input {
  font:inherit;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  cursor:pointer;
  color:inherit;
}
a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:6px;
}
button:disabled {
  cursor:wait;
}
svg {
  width:24px;
  height:24px;
  flex-shrink:0;
}
img {
  max-width:100%;
  height:auto;
  display:block;
}
[hidden] {
  display:none!important;
}
.svg-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.skip-link {
  position:fixed;
  left:15px;
  top:-100px;
  z-index:100;
  background:var(--accent);
  color:var(--bg);
  padding:10px 20px;
}
.skip-link:focus {
  top:10px;
}
.wrap {
  width:min(1260px,calc(100% - 112px));
  margin:auto;
}
.section-pad {
  padding:125px 0;
  position:relative;
}
#ambient {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-2;
  pointer-events:none;
}
.ambient-glow {
  position:fixed;
  inset:0;
  z-index:-3;
  background:radial-gradient(ellipse at 85% 15%,#4908183b,transparent 50%),radial-gradient(ellipse at 0 95%,#46163729,transparent 55%);
  pointer-events:none;
}
.grain {
  position:fixed;
  inset:0;
  z-index:30;
  pointer-events:none;
  opacity:.025;
  background-image:url('assets/grain.svg');
}
.site-header {
  position:fixed;
  z-index:40;
  inset:0 0 auto;
  min-height:86px;
  padding:14px 40px;
  display:flex;
  align-items:center;
  gap:30px;
  background:linear-gradient(#1d0b14f2,#1d0b1477);
  border-bottom:1px solid #f896ae15;
  backdrop-filter:blur(16px);
  transition:background .4s;
}
.site-header.scrolled {
  background:#1d0b14ed;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  line-height:1.2;
  min-width:230px;
}
.brand svg {
  width:40px;
  height:40px;
  color:var(--accent);
  filter:drop-shadow(0 0 8px #f4658960);
}
.brand>span {
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.1em;
  font-weight:bold;
}
.brand-kasora {
  font-size:21px;
  margin-left:1px;
}
.brand small {
  font:8px/1.8 var(--mono);
  letter-spacing:.23em;
  display:block;
  color:var(--muted);
  margin-top:3px;
}
.desktop-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:37px;
  margin:auto;
}
.desktop-nav a {
  font:11px/1.6 var(--mono);
  letter-spacing:.12em;
  position:relative;
}
.desktop-nav small {
  display:block;
  font:9px/1.6 var(--sans);
  letter-spacing:.1em;
  color:var(--muted);
  margin-top:4px;
}
.desktop-nav a:after {
  content:"";
  position:absolute;
  height:1px;
  left:0;
  right:100%;
  bottom:-9px;
  background:var(--accent);
  box-shadow:0 0 9px var(--accent);
  transition:right .3s;
}
.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after {
  right:0;
}
.desktop-nav a[aria-current] {
  color:var(--accent);
}
.header-actions {
  display:flex;
  align-items:center;
  gap:20px;
}
.motion-toggle {
  font:10px var(--mono);
  letter-spacing:.09em;
  border:1px solid var(--border);
  background:#300c1538;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  white-space:nowrap;
}
.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 9px #ff6289;
  vertical-align:middle;
  flex-shrink:0;
}
.motion-toggle[aria-pressed=false] .status-dot {
  background:#92797f;
  box-shadow:none;
}
.menu-toggle {
  display:none;
  background:transparent;
  border:0;
  padding:8px;
  width:39px;
}
.menu-toggle>span {
  height:1px;
  width:23px;
  background:var(--text);
  display:block;
  margin:6px 0;
  transition:transform .3s;
}
.menu-toggle b {
  font:6px var(--mono);
  letter-spacing:.1em;
  display:block;
}
.reading-progress {
  position:absolute;
  left:0;
  bottom:-1px;
  height:2px;
  right:0;
  pointer-events:none;
}
.reading-progress span {
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--pink));
  box-shadow:0 0 9px var(--accent);
}
.mobile-nav {
  position:fixed;
  top:77px;
  inset-inline:0;
  background:#1d0b14fa;
  z-index:39;
  padding:26px 24px 35px;
  backdrop-filter:blur(15px);
  border-bottom:1px solid var(--accent);
}
.mobile-nav>a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  border-bottom:1px solid var(--border);
  padding:17px 0;
  font:10px var(--mono);
  color:var(--accent);
}
.mobile-nav a>span {
  margin-right:auto;
  font-size:23px;
  color:var(--text);
}
.mobile-nav small {
  font:10px var(--sans);
  color:var(--muted);
  margin-left:14px;
}
.mobile-nav .mobile-return {
  font:12px var(--sans);
  margin-top:15px;
  border:0;
  justify-content:flex-start;
}
.hero {
  position:relative;
  isolation:isolate;
  min-height:820px;
  height:100svh;
  max-height:1100px;
  overflow:hidden;
  padding-top:86px;
  border-bottom:1px solid var(--border);
}
.hero-grid {
  position:absolute;
  z-index:-1;
  inset:0;
  background-image:linear-gradient(#eb8aa206 1px,transparent 1px),linear-gradient(90deg,#eb8aa206 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(90deg,transparent,#000 80%);
  transform:perspective(800px) rotateY(-10deg) scale(1.2);
  transform-origin:right;
}
.hero-lines {
  position:absolute;
  inset:86px 27px 0;
  border-left:1px solid #e4779219;
  border-right:1px solid #e4779219;
  pointer-events:none;
}
.hero-lines:before,.hero-lines:after {
  content:"＋";
  position:absolute;
  color:#b97787;
  font:14px var(--mono);
  top:18px;
}
.hero-lines:before {
  left:-7px;
}
.hero-lines:after {
  right:-7px;
}
.hero-wash {
  position:absolute;
  z-index:-1;
  width:90%;
  height:110%;
  right:-15%;
  top:-5%;
  background:radial-gradient(ellipse at 50% 45%,#5c354858,transparent 40%),conic-gradient(from 10deg at 50% 50%,transparent,#f24e7712,transparent 27%,#dd68b711,transparent 50%,#4e75ed0f,transparent 70%);
  filter:blur(25px);
  animation:slow-rotate 75s linear infinite;
}
.hero-inner {
  position:relative;
  height:calc(100% - 81px);
  display:grid;
  grid-template-columns:46% 54%;
  align-items:center;
}
.hero-copy {
  position:relative;
  z-index:5;
  padding:45px 0 35px;
  transform:translateY(calc(var(--hero-scroll)*-28px));
}
.eyebrow,.kicker {
  font:10px/1.8 var(--mono);
  letter-spacing:.17em;
  color:var(--accent);
  margin:0;
}
.hero-copy .eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:35px;
}
.index-code {
  color:#657b94;
  margin-left:10px;
}
.hero h1 {
  margin:0 0 32px;
  line-height:1.1;
  position:relative;
  font-family:var(--serif);
  font-weight:600;
}
.title-small {
  display:block;
  font-size:38px;
  letter-spacing:.2em;
  margin-left:5px;
  color:#f8e8ec;
}
.title-big {
  display:block;
  font-size:clamp(105px,10vw,155px);
  letter-spacing:.04em;
  line-height:1.2;
  text-shadow:0 0 45px #fe90ac16,2px 2px 0 #f58ba628;
  color:#fbeff2;
}
.title-big:after {
  content:"";
  position:absolute;
  left:9px;
  bottom:29px;
  width:130px;
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  box-shadow:0 0 9px #db6784;
}
.title-en {
  display:block;
  font:11px var(--mono);
  letter-spacing:.45em;
  color:var(--muted);
  margin:6px 0 0 8px;
}
.hero-tagline {
  display:flex;
  gap:18px;
  align-items:center;
  margin:0 0 22px;
}
.red-seal {
  display:block;
  color:#fcd7d2;
  border:1px solid #d17b6d;
  font:11px/1.5 var(--serif);
  padding:6px 4px;
  box-shadow:inset 0 0 10px #d8886314;
  letter-spacing:0;
}
.hero-tagline h2 {
  font-family:var(--serif);
  font-size:27px;
  line-height:1.65;
  font-weight:500;
  letter-spacing:.07em;
  margin:0;
}
.hero-tagline h2 span {
  color:#e0bdcf;
}
.hero-description {
  font-size:12px;
  line-height:2.1;
  letter-spacing:.065em;
  color:#9aafc0;
  margin:0 0 30px;
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
}
.cyber-button {
  position:relative;
  display:inline-flex;
  gap:35px;
  align-items:center;
  justify-content:space-between;
  padding:15px 23px;
  min-width:200px;
  min-height:53px;
  background:var(--accent);
  color:#33121a;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:background .25s,filter .3s,transform .3s;
  overflow:hidden;
}
.cyber-button:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:50px;
  background:#ffffff55;
  transform:skew(-25deg);
  left:-90px;
  transition:left .6s;
}
.cyber-button:hover:after {
  left:120%;
}
.cyber-button:hover {
  background:#ffa0b8;
  filter:drop-shadow(0 0 10px #ff6a8f66);
  transform:translateY(-2px);
}
.cyber-button svg {
  width:22px;
  height:22px;
}
.cast-button {
  display:flex;
  align-items:center;
  gap:9px;
  background:none;
  border:0;
  padding:5px 0;
  text-align:left;
  color:var(--gold);
  font-size:11px;
  white-space:nowrap;
}
.cast-button small {
  font:7px var(--mono);
  letter-spacing:.08em;
  display:block;
  margin-top:5px;
  color:#a99485;
}
.cast-icon {
  font:35px/1 var(--serif);
  text-shadow:0 0 20px #e7bc9480;
  transition:transform .6s;
}
.cast-button:hover .cast-icon {
  transform:rotate(90deg);
  color:#fff3b3;
}
.hero-stage {
  position:absolute;
  z-index:2;
  width:61%;
  height:100%;
  right:-4%;
  top:0;
  perspective:1000px;
  --stage-x:calc(var(--pointer-x)*14px);
  --stage-y:calc(var(--pointer-y)*9px);
}
.portal-position {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transform:translate(var(--stage-x),var(--stage-y));
}
.portal {
  width:86%;
  aspect-ratio:1;
  position:relative;
  transform:rotateX(10deg) rotateY(-12deg);
  filter:drop-shadow(0 0 15px #da587835);
  background:radial-gradient(circle,#f77f9d07,transparent 66%);
}
.portal-ring {
  position:absolute;
  border-radius:50%;
  inset:0;
  border:1px solid #dd6a8770;
}
.ring-outer {
  border-color:#d16e8740;
  animation:slow-rotate 58s linear infinite;
}
.ring-outer:before {
  content:"";
  position:absolute;
  inset:10px;
  border:1px dashed #f1709055;
  border-radius:50%;
}
.ring-outer:after {
  content:"";
  position:absolute;
  inset:-12px;
  border:2px solid transparent;
  border-top-color:#ff9cb5;
  border-bottom-color:#daacb870;
  border-radius:50%;
  transform:rotate(35deg);
  filter:drop-shadow(0 0 4px #f3829e);
}
.ring-inner {
  inset:10%;
  border-color:#d0adb625;
  border-style:dotted;
  animation:slow-rotate 34s linear reverse infinite;
}
.ring-inner:after {
  content:"";
  position:absolute;
  inset:9%;
  border:1px dashed #ce7c903b;
  border-radius:50%;
}
.portal-diamond {
  position:absolute;
  inset:15%;
  border:1px solid #fd8da988;
  transform:rotate(45deg);
  box-shadow:0 0 25px #fc7a9b1a,inset 0 0 30px #fc7a9b1a;
}
.portal-diamond:before {
  content:"";
  position:absolute;
  inset:11px;
  border:1px solid #ce9dc53b;
}
.portal-crest {
  position:absolute;
  inset:21%;
  width:58%;
  height:58%;
  color:#feb1c4;
  opacity:.25;
  animation:slow-rotate 100s linear reverse infinite;
}
.orbit-light {
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ffccd9;
  box-shadow:0 0 20px #ff8fab,0 0 5px #fff;
  top:13%;
  left:14%;
}
.orbit-light.two {
  top:79%;
  left:85%;
  width:4px;
  height:4px;
  background:var(--pink);
  box-shadow:0 0 20px var(--pink);
}
.scan-line {
  position:absolute;
  height:1px;
  left:10%;
  right:10%;
  top:50%;
  background:linear-gradient(90deg,transparent,#ff94af66,transparent);
  box-shadow:0 0 15px #ffa5bb;
  animation:scan 9s ease-in-out infinite;
  opacity:.5;
}
.hero-character-parallax {
  position:absolute;
  inset:7% 0 2% 6%;
  transform:translate(calc(var(--pointer-x)*-12px),calc(var(--pointer-y)*-8px + var(--hero-scroll)*35px));
}
.hero-character-float {
  height:100%;
  animation:float 6s ease-in-out infinite;
}
.hero-character {
  height:100%;
  width:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 2px #fbcbea90) drop-shadow(0 15px 26px #0f050abb) drop-shadow(0 0 25px #e754791f);
  animation:character-enter 1.25s cubic-bezier(.2,.7,.2,1) both;
}
.back-kanji {
  position:absolute;
  top:30%;
  left:13%;
  font-family:var(--serif);
  font-size:190px;
  line-height:1;
  letter-spacing:.18em;
  color:transparent;
  -webkit-text-stroke:1px #d97f960d;
  white-space:nowrap;
  transform:rotate(-15deg);
  pointer-events:none;
}
.stage-cross {
  position:absolute;
  color:#d7a6b2;
  font:18px var(--mono);
}
.cross-one {
  top:16%;
  left:8%;
}
.cross-two {
  right:7%;
  bottom:22%;
  color:#c68ea9;
}
.character-tag {
  position:absolute;
  z-index:3;
  right:9%;
  bottom:7%;
  display:flex;
  align-items:center;
  gap:15px;
  max-width:220px;
  color:#e6dbe2;
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:.08em;
  text-shadow:0 1px 8px #1d0b14;
}
.tag-line {
  height:1px;
  width:35px;
  background:var(--pink);
  box-shadow:0 0 10px var(--pink);
}
.character-tag small {
  display:block;
  font:8px var(--mono);
  letter-spacing:.15em;
  color:#b897b0;
  margin-top:4px;
}
.character-tag b {
  font:24px var(--mono);
  font-weight:400;
  border-left:1px solid #dd85ba44;
  padding-left:12px;
  color:var(--pink);
}
.stage-label {
  position:absolute;
  right:3%;
  top:11%;
  writing-mode:vertical-rl;
  font:9px var(--mono);
  letter-spacing:.2em;
  color:#8e626d;
}
.hero-vertical {
  position:absolute;
  right:17px;
  top:28%;
  writing-mode:vertical-rl;
  font-family:var(--serif);
  letter-spacing:.4em;
  font-size:11px;
  color:#b8849180;
}
.hero-bottom {
  height:81px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font:8px var(--mono);
  letter-spacing:.14em;
  color:#8e6872;
  z-index:5;
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:16px;
  color:#d3b0b9;
  font-size:9px;
}
.scroll-line {
  display:block;
  width:1px;
  height:37px;
  background:#39566b;
  position:relative;
  overflow:hidden;
}
.scroll-line:after {
  content:"";
  position:absolute;
  top:-50%;
  left:0;
  height:50%;
  width:1px;
  background:var(--accent);
  animation:scroll-down 2s ease-in-out infinite;
}
.hero-location {
  margin-left:auto;
}
.hero-location b {
  color:#b48a86;
  margin:0 10px;
  font-weight:400;
}
.prototype-label {
  color:#5e718b;
}
.hero-enter {
  animation:text-enter 1s .12s ease both;
}
.hero h1.hero-enter {
  animation-delay:.25s;
}
.hero-tagline.hero-enter {
  animation-delay:.38s;
}
.hero-description.hero-enter {
  animation-delay:.5s;
}
.hero-actions.hero-enter {
  animation-delay:.62s;
}
.magic-ripple {
  position:absolute;
  inset:24% 22%;
  border:1px solid #ff96b0;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.is-casting .magic-ripple {
  animation:magic-ripple 1.7s ease-out;
}
.is-casting .portal {
  filter:drop-shadow(0 0 25px #f287b2c0);
}
.is-casting .portal-diamond {
  border-color:var(--pink);
  box-shadow:0 0 60px #ff85c156,inset 0 0 60px #e493ac20;
}
.news-strip {
  position:relative;
  background:#25111bd6;
  border-bottom:1px solid var(--border);
  z-index:5;
}
.news-inner {
  display:grid;
  grid-template-columns:165px 100px minmax(0,1fr);
  align-items:center;
  gap:28px;
  min-height:85px;
  font-size:11px;
}
.news-label {
  font:10px var(--mono);
  letter-spacing:.1em;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--accent);
}
.news-inner time {
  font:10px var(--mono);
  letter-spacing:.08em;
  color:#aa7d88;
  border-left:1px solid #66414a;
  padding-left:25px;
}
.news-open {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  text-align:left;
  border:0;
  background:none;
  font-size:12px;
  letter-spacing:.03em;
  padding:18px 0;
  line-height:1.8;
}
.news-open:hover {
  color:var(--accent);
}
.news-arrow {
  width:31px;
  height:31px;
  border:1px solid #7c535d88;
  display:grid;
  place-items:center;
  font-size:16px;
  flex-shrink:0;
}
.flowing-type {
  overflow:hidden;
  border-bottom:1px solid #ffffff06;
  padding:22px 0;
  position:relative;
}
.flowing-type>div {
  font:30px/1.3 var(--mono);
  letter-spacing:.06em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px #bd879524;
  animation:marquee 50s linear infinite;
  display:inline-block;
}
.flowing-type i {
  font-style:normal;
  color:#ca9faf50;
  -webkit-text-stroke:0;
  margin:0 38px;
}
.section-index {
  font:10px var(--mono);
  letter-spacing:.18em;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:15px;
  margin:0 0 22px;
}
.section-index span {
  height:1px;
  width:40px;
  background:var(--accent);
  opacity:.4;
}
.display-heading {
  font:500 clamp(33px,4.1vw,57px)/1.1 var(--sans);
  letter-spacing:.035em;
  margin:0;
  color:#fbecf0;
  overflow-wrap:anywhere;
}
.display-heading>span {
  display:block;
  font:12px/1.8 var(--serif);
  letter-spacing:.28em;
  color:#d3b3bb;
  margin-top:14px;
}
.section-topline {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:66px;
}
.section-note {
  font:14px/2 var(--serif);
  color:#9daebf;
  letter-spacing:.12em;
  text-align:right;
  margin:0;
}
.story-section {
  overflow:hidden;
}
.story-grid {
  display:grid;
  grid-template-columns:42% 58%;
  align-items:start;
  gap:0;
}
.section-intro {
  position:relative;
  min-height:500px;
}
.vertical-caption {
  writing-mode:vertical-rl;
  font:15px/2.5 var(--serif);
  letter-spacing:.25em;
  color:#c5b49d;
  margin-top:53px;
  position:relative;
  z-index:1;
}
.story-crest {
  position:absolute;
  width:280px;
  height:280px;
  left:80px;
  top:125px;
  color:#d293a30b;
  animation:slow-rotate 110s linear infinite;
}
.story-copy {
  padding:5px 15px 0 0;
  max-width:650px;
  position:relative;
  z-index:1;
}
.story-copy .kicker {
  font:11px var(--sans);
  letter-spacing:.2em;
  color:#d2b794;
}
.story-copy h3 {
  font:400 clamp(29px,3.3vw,45px)/1.65 var(--serif);
  letter-spacing:.1em;
  margin:23px 0 38px;
}
.story-copy h3 span {
  color:#f5a2b6;
  text-shadow:0 0 25px #e16b8825;
}
.story-copy>p:not(.kicker) {
  font-size:14px;
  line-height:2.4;
  color:#cca7b0;
  letter-spacing:.05em;
  margin:0 0 24px;
}
.story-status {
  font-size:11px;
  color:#b88e98;
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--border);
  padding-top:20px;
  margin-top:38px;
}
.small-code {
  font:8px var(--mono);
  letter-spacing:.1em;
  margin-left:auto;
  color:#825963;
}
.section-pattern {
  position:absolute;
  inset:0 auto 0 0;
  width:35%;
  background:url('assets/asanoha.svg') center/120px;
  opacity:.035;
  mask-image:linear-gradient(90deg,#000,transparent);
}
.world-section {
  background:linear-gradient(140deg,#27141eba,#1e0e1680);
  border-block:1px solid #dc7e9513;
  overflow:hidden;
}
.world-layout {
  display:grid;
  grid-template-columns:55% 1fr;
  gap:7%;
  align-items:center;
}
.world-window {
  border:1px solid #e87b964d;
  background:linear-gradient(145deg,#30101844,#1b0b13);
  box-shadow:0 0 45px #bf6c8109;
  position:relative;
}
.world-window:before,.world-window:after {
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  border:1px solid #ef7795;
  pointer-events:none;
}
.world-window:before {
  left:-1px;
  top:-1px;
  border-right:0;
  border-bottom:0;
}
.world-window:after {
  right:-1px;
  bottom:-1px;
  border-left:0;
  border-top:0;
}
.world-window-head,.world-window-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 18px;
  border-bottom:1px solid #b6748422;
  font:8px var(--mono);
  letter-spacing:.12em;
  color:#b57f8d;
}
.world-window-head>span:first-child {
  display:flex;
  align-items:center;
  gap:8px;
}
.world-window-head>span:last-child {
  font:12px var(--serif);
  letter-spacing:.2em;
}
.world-illustration {
  position:relative;
  aspect-ratio:1.35;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 70%,#8840521c,transparent 65%);
}
.world-grid {
  position:absolute;
  inset:40% -20% -70%;
  transform:perspective(400px) rotateX(60deg);
  background-image:linear-gradient(#eb769314 1px,transparent 1px),linear-gradient(90deg,#eb769314 1px,transparent 1px);
  background-size:30px 30px;
  animation:grid-flow 12s linear infinite;
}
.world-coordinate {
  position:absolute;
  top:25px;
  left:22px;
  writing-mode:vertical-rl;
  font:11px var(--serif);
  letter-spacing:.3em;
  color:#bea2a876;
}
.world-caption {
  position:absolute;
  left:20px;
  bottom:16px;
  font:7px var(--mono);
  letter-spacing:.14em;
  color:#63788e;
}
.world-window-foot {
  border-bottom:0;
  border-top:1px solid #b6748422;
  gap:16px;
}
.world-window-foot>span:nth-child(2) {
  margin-right:auto;
  font-size:8px;
}
.signal-lines {
  display:flex;
  gap:3px;
  align-items:flex-end;
  height:12px;
}
.signal-lines i {
  height:4px;
  width:2px;
  background:#e47490;
  animation:signal 2s ease-in-out infinite alternate;
}
.signal-lines i:nth-child(2) {
  height:7px;
  animation-delay:.3s;
}
.signal-lines i:nth-child(3) {
  height:11px;
  animation-delay:.9s;
}
.signal-lines i:nth-child(4) {
  height:8px;
  animation-delay:.5s;
}
.signal-lines i:nth-child(5) {
  height:5px;
  animation-delay:1s;
}
.world-details {
  min-width:0;
}
.world-details>.kicker {
  font:11px var(--sans);
  letter-spacing:.06em;
  color:#8196a6;
  margin-bottom:21px;
}
.world-tabs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid #da7e9533;
}
.world-tabs button {
  padding:13px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#8fa3b6;
  font-size:12px;
  background:none;
  border:0;
  position:relative;
}
.world-tabs button>span {
  font:9px var(--mono);
  color:#506e85;
}
.world-tabs button:after {
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:2px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  transform:scaleX(0);
  transition:transform .3s;
}
.world-tabs button[aria-selected=true] {
  color:#ffc7d5;
}
.world-tabs button[aria-selected=true]:after {
  transform:scaleX(1);
}
.world-tabpanel {
  position:relative;
  padding:34px 0 28px;
  min-height:260px;
  animation:reveal-up .4s ease;
}
.world-kanji {
  position:absolute;
  right:5px;
  top:20px;
  font:170px/1 var(--serif);
  color:#e8abba08;
  pointer-events:none;
}
.world-tabpanel h3 {
  font:400 29px/1.7 var(--serif);
  letter-spacing:.06em;
  margin:0 0 23px;
  position:relative;
}
.world-tabpanel p {
  font-size:12px;
  line-height:2.3;
  color:#be959f;
  margin:0;
  position:relative;
}
.world-footnote {
  font:8px var(--mono);
  letter-spacing:.1em;
  color:#7d505b;
}
.character-section {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 28% 50%,#66335018,transparent 55%);
}
.character-count {
  font:9px var(--mono);
  letter-spacing:.12em;
  color:#817d97;
  display:flex;
  align-items:baseline;
  gap:11px;
}
.character-count b {
  font-size:31px;
  font-weight:400;
  color:#e6bfd4;
}
.character-layout {
  display:grid;
  grid-template-columns:52% 1fr;
  gap:8%;
  align-items:center;
}
.character-art {
  position:relative;
  min-height:580px;
  aspect-ratio:.95;
  isolation:isolate;
}
.character-art img {
  position:relative;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 3px #f39bb622) drop-shadow(0 0 25px #220a16ee);
  z-index:2;
  animation:float 7s ease-in-out infinite;
}
.character-backword {
  position:absolute;
  font:700 clamp(90px,11vw,155px)/1 var(--sans);
  writing-mode:vertical-rl;
  letter-spacing:.08em;
  right:3%;
  top:10%;
  color:transparent;
  -webkit-text-stroke:1px #ef9fce26;
  z-index:-1;
}
.character-halo {
  position:absolute;
  width:95%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid #c180a43b;
  top:10%;
  left:2%;
  z-index:-1;
  background:radial-gradient(circle,#eb87b108,transparent 67%);
  box-shadow:0 0 90px #e286c107;
}
.character-halo:after {
  content:"";
  position:absolute;
  inset:7%;
  border:1px dashed #c88eab33;
  border-radius:50%;
  animation:slow-rotate 50s linear infinite;
}
.character-seal {
  position:absolute;
  left:9%;
  bottom:9%;
  width:150px;
  height:150px;
  color:#ddaabc20;
  animation:slow-rotate 60s linear infinite;
}
.character-art-code {
  position:absolute;
  bottom:0;
  left:5%;
  font:8px var(--mono);
  letter-spacing:.14em;
  color:#8e728e;
  border-left:25px solid #cb80a959;
  padding-left:12px;
}
.character-profile {
  position:relative;
  padding-bottom:35px;
}
.character-profile>.kicker {
  font:11px var(--sans);
  letter-spacing:.15em;
  color:#d6a5be;
}
.character-profile h3 {
  font:400 clamp(38px,4.2vw,63px)/1.5 var(--serif);
  letter-spacing:.1em;
  margin:25px 0 0;
  white-space:nowrap;
}
.character-profile ruby rt {
  font:10px var(--sans);
  letter-spacing:.2em;
  color:#8e9cb6;
}
.romaji {
  font:11px var(--mono);
  letter-spacing:.3em;
  color:#b875a3;
  margin:11px 0 30px;
}
.profile-rule {
  height:1px;
  width:100%;
  background:linear-gradient(90deg,#db98bd66,transparent);
  position:relative;
}
.profile-rule:before {
  content:"";
  position:absolute;
  left:0;
  top:-2px;
  width:5px;
  height:5px;
  background:var(--pink);
  transform:rotate(45deg);
  box-shadow:0 0 10px var(--pink);
}
.profile-lead {
  font:22px/1.9 var(--serif);
  letter-spacing:.06em;
  color:#e4c5d7;
  margin:30px 0 20px;
}
.profile-text {
  font-size:13px;
  line-height:2.25;
  color:#97aabd;
  max-width:395px;
}
.profile-details {
  font-size:11px;
  margin:24px 0 26px;
}
.profile-details>div {
  display:flex;
  gap:24px;
  border-bottom:1px solid #a692b619;
  padding:11px 0;
}
.profile-details dt {
  width:77px;
  color:#5f788d;
}
.profile-details dd {
  margin:0;
  color:#b1bcc9;
}
.text-link {
  font-size:11px;
  letter-spacing:.04em;
  display:inline-flex;
  align-items:center;
  gap:26px;
  padding:10px 0;
  border:0;
  border-bottom:1px solid #c68b9a55;
  background:none;
  color:var(--accent);
  text-align:left;
}
.text-link svg {
  width:20px;
  height:20px;
}
.text-link:hover {
  color:white;
}
.visual-section {
  border-block:1px solid #bf7a8b12;
  background:linear-gradient(0deg,#230d1280,#250e1a80);
}
.visual-layout {
  display:grid;
  grid-template-columns:46% 1fr;
  gap:13%;
  align-items:center;
  max-width:1070px;
  margin:auto;
}
.poster-button {
  position:relative;
  display:block;
  cursor:zoom-in;
  padding:12px;
  background:#36192033;
  border:1px solid #d87b924f;
  transform:rotate(-2deg);
  transition:transform .6s,box-shadow .6s;
  box-shadow:0 15px 70px #0004;
}
.poster-button:hover {
  transform:rotate(0deg);
  box-shadow:0 0 60px #ce758b19;
}
.poster-button img {
  width:100%;
  height:auto;
}
.poster-button:before {
  content:"";
  position:absolute;
  top:-12px;
  bottom:-12px;
  left:-12px;
  right:-12px;
  border:1px solid #d2748b0f;
  pointer-events:none;
}
.poster-corners:before,.poster-corners:after {
  content:"";
  position:absolute;
  width:26px;
  height:26px;
  border:1px solid var(--accent);
}
.poster-corners:before {
  left:-1px;
  top:-1px;
  border-right:0;
  border-bottom:0;
}
.poster-corners:after {
  right:-1px;
  bottom:-1px;
  border-top:0;
  border-left:0;
}
.image-open-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:8px var(--mono);
  letter-spacing:.17em;
  padding:15px 2px 3px;
  color:#e1a5b4;
}
.image-open-label svg {
  width:18px;
  height:18px;
}
.visual-copy>.kicker {
  color:var(--gold);
  font-size:9px;
}
.visual-copy h3 {
  font:400 clamp(43px,4.6vw,68px)/1.45 var(--serif);
  letter-spacing:.08em;
  margin:23px 0 30px;
}
.visual-copy h3 span {
  color:#f6a7bb;
  text-shadow:0 0 24px #f1819d17;
}
.visual-copy>p:not(.kicker) {
  font-size:13px;
  line-height:2.3;
  letter-spacing:.05em;
  color:#c2929e;
}
.visual-keywords {
  display:flex;
  align-items:center;
  gap:16px;
  margin:35px 0 40px;
  font:17px var(--serif);
  color:#cec2a7;
  letter-spacing:.1em;
}
.visual-keywords b {
  font:13px var(--mono);
  color:#6e434e;
  font-weight:400;
}
.visual-copy .visual-note {
  font-size:11px!important;
  color:#8f5c69!important;
  margin-bottom:28px;
}
.button-outline {
  background:#fd7a9b10;
  color:var(--accent);
  border:1px solid #fd7a9b70;
  clip-path:none;
  min-width:250px;
}
.button-outline:hover {
  background:#fd7a9b20;
}
.closing-section {
  position:relative;
  overflow:hidden;
  padding:115px 0 125px;
  text-align:center;
  background:radial-gradient(ellipse at 50% 100%,#4d222d2b,transparent 55%);
}
.closing-section .eyebrow {
  font-size:9px;
  letter-spacing:.25em;
  color:#9e6f7b;
}
.closing-section h2 {
  font:400 43px/1.8 var(--serif);
  letter-spacing:.13em;
  margin:29px 0 35px;
}
.closing-crest {
  position:absolute;
  left:calc(50% - 320px);
  top:45px;
  width:640px;
  height:640px;
  color:#e2849b08;
  animation:slow-rotate 100s linear infinite;
  pointer-events:none;
}
.social-link {
  display:block;
  margin:26px auto 0;
  font:10px var(--mono);
  letter-spacing:.06em;
  color:#a57c86;
  width:max-content;
}
.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--border);
  padding:32px 0 36px;
  font-size:10px;
  color:#617b90;
}
.footer-brand {
  font:18px var(--serif);
  letter-spacing:.12em;
  color:#cfb7bd;
}
.footer-brand small {
  display:block;
  font:7px var(--mono);
  letter-spacing:.21em;
  margin-top:10px;
  color:#8a606a;
}
.site-footer p {
  font-size:9px;
  line-height:1.8;
  letter-spacing:.03em;
  margin-left:auto;
}
.site-footer p>span {
  color:#415c70;
  font-size:8px;
}
.back-top {
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  width:45px;
  height:45px;
  color:#da9dac;
  font:19px var(--sans);
  margin-left:25px;
  transition:background .3s;
}
.back-top:hover {
  background:#f5799822;
}
.reveal {
  opacity:1;
  transform:none;
}
.js-motion .reveal:not(.is-visible) {
  opacity:0;
  transform:translateY(28px);
}
.js-motion .reveal {
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.1,1);
}
.image-dialog,.news-dialog {
  background:#210e18;
  color:var(--text);
  border:1px solid #e1748f66;
  padding:45px 25px 20px;
  max-height:94dvh;
  box-shadow:0 0 80px #b733542b;
}
.image-dialog {
  width:min(1040px,94vw);
  max-width:none;
}
.image-dialog::backdrop,.news-dialog::backdrop {
  background:#11040bdf;
  backdrop-filter:blur(10px);
}
.dialog-close {
  position:absolute;
  right:10px;
  top:8px;
  width:30px;
  height:30px;
  background:#351d29;
  border:1px solid #c982943b;
  font:25px/1 var(--sans);
  color:#eab4c2;
}
.dialog-close:hover {
  background:#59333c;
}
.dialog-image-surface {
  display:flex;
  justify-content:center;
  align-items:center;
  max-height:78dvh;
  overflow:auto;
}
.dialog-image-surface img {
  max-height:76dvh;
  max-width:100%;
  object-fit:contain;
  width:auto;
}
#image-caption {
  font-size:11px;
  line-height:1.8;
  color:#c1909c;
  margin:15px 0 0;
  text-align:center;
}
.news-dialog {
  width:min(560px,92vw);
  padding:50px 40px 35px;
}
.news-dialog h2 {
  font:28px/1.6 var(--serif);
  margin:22px 0;
}
.news-dialog>p:not(.eyebrow) {
  font-size:13px;
  color:#c0939e;
  line-height:2;
}
.news-dialog .eyebrow {
  font-size:9px;
}
.fx-off *, .fx-off *:before,.fx-off *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}
.fx-off .reveal {
  opacity:1!important;
  transform:none!important;
}
.fx-off .hero-character-parallax,.fx-off .hero-copy,.fx-off .portal-position {
  transform:none!important;
}
.fx-off .grain {
  display:none;
}
.fx-off .hero-wash {
  opacity:.55;
}
.fx-off .is-casting .magic-ripple {
  opacity:0;
}
.fx-off .magic-ripple {
  display:none;
}
dialog[open] {
  animation:dialog-in .25s ease;
}
@keyframes dialog-in {
  from {
    opacity:0;
    transform:translateY(8px);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes text-enter {
  from {
    opacity:0;
    transform:translateY(22px);
    filter:blur(8px);
  }
  to {
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}
@keyframes character-enter {
  0% {
    opacity:0;
    transform:scale(.86) translateY(25px);
    filter:blur(8px);
  }
  65% {
    opacity:1;
    transform:scale(1.03) translateY(-5px);
  }
  100% {
    opacity:1;
    transform:scale(1) translateY(0);
  }
}
@keyframes slow-rotate {
  to {
    transform:rotate(360deg);
  }
}
@keyframes float {
  0%,100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-13px);
  }
}
@keyframes scan {
  0%,100% {
    transform:translateY(-120px);
    opacity:0;
  }
  30%,70% {
    opacity:.5;
  }
  50% {
    transform:translateY(120px);
  }
}
@keyframes scroll-down {
  to {
    top:120%;
  }
}
@keyframes magic-ripple {
  0% {
    opacity:0;
    transform:scale(.2);
  }
  15% {
    opacity:.65;
  }
  100% {
    opacity:0;
    transform:scale(2.9);
  }
}
@keyframes marquee {
  to {
    transform:translateX(-50%);
  }
}
@keyframes grid-flow {
  to {
    background-position:0 30px;
  }
}
@keyframes signal {
  to {
    opacity:.25;
    transform:scaleY(.45);
  }
}
@keyframes reveal-up {
  from {
    opacity:0;
    transform:translateY(10px);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@media(min-width:1600px) {
  .hero-inner {
    max-width:1360px;
  }
  .hero-copy .eyebrow {
    margin-bottom:38px;
  }
  .hero-stage {
    right:-1%;
    width:60%;
  }
  .hero-character-parallax {
    inset:5% 0 1% 7%;
  }
}
@media(max-width:1150px) {
  .wrap {
    width:calc(100% - 80px);
  }
  .site-header {
    padding-inline:28px;
    gap:20px;
  }
  .brand {
    min-width:200px;
  }
  .desktop-nav {
    gap:24px;
  }
  .desktop-nav a {
    font-size:9px;
  }
  .desktop-nav small {
    font-size:8px;
  }
  .hero {
    min-height:800px;
  }
  .hero-copy .eyebrow {
    font-size:8px;
    letter-spacing:.1em;
    margin-bottom:26px;
  }
  .hero .index-code {
    display:none;
  }
  .title-small {
    font-size:32px;
  }
  .title-big {
    font-size:116px;
  }
  .title-en {
    font-size:9px;
    letter-spacing:.35em;
  }
  .hero-tagline h2 {
    font-size:24px;
  }
  .hero-description {
    font-size:11px;
  }
  .hero-actions {
    gap:18px;
  }
  .cyber-button {
    min-width:178px;
    padding:14px 18px;
    font-size:11px;
    gap:23px;
  }
  .cast-button {
    font-size:10px;
    gap:5px;
  }
  .cast-button small {
    font-size:6px;
  }
  .cast-icon {
    font-size:31px;
  }
  .hero-stage {
    right:-5%;
    width:63%;
  }
  .character-tag {
    right:8%;
    bottom:9%;
  }
  .hero-character-parallax {
    inset:11% 0 5% 4%;
  }
  .hero-bottom {
    gap:18px;
    font-size:7px;
  }
  .prototype-label {
    display:none;
  }
  .hero-lines {
    inset-inline:20px;
  }
  .hero-vertical {
    right:9px;
  }
  .hero-tagline {
    gap:12px;
  }
  .section-pad {
    padding:100px 0;
  }
  .section-topline {
    margin-bottom:50px;
  }
  .story-grid {
    grid-template-columns:37% 63%;
  }
  .story-crest {
    left:0;
    width:240px;
    height:240px;
  }
  .story-copy h3 {
    font-size:35px;
  }
  .story-copy>p:not(.kicker) {
    font-size:13px;
  }
  .world-layout {
    grid-template-columns:54% 1fr;
    gap:5%;
  }
  .world-tabpanel h3 {
    font-size:25px;
  }
  .world-tabs button {
    gap:6px;
  }
  .world-tabpanel p {
    font-size:11px;
  }
  .world-details>.kicker {
    font-size:9px;
  }
  .world-tabpanel {
    min-height:250px;
  }
  .character-layout {
    gap:5%;
    grid-template-columns:52% 1fr;
  }
  .character-art {
    min-height:510px;
  }
  .character-profile h3 {
    font-size:49px;
  }
  .profile-lead {
    font-size:20px;
  }
  .profile-text {
    font-size:12px;
  }
  .visual-layout {
    gap:9%;
    grid-template-columns:48% 1fr;
  }
  .visual-copy h3 {
    font-size:52px;
  }
  .visual-copy>p:not(.kicker) {
    font-size:12px;
  }
  .display-heading {
    font-size:42px;
  }
  .section-note {
    font-size:12px;
  }
}
@media(max-width:900px) {
  .wrap {
    width:calc(100% - 56px);
  }
  .desktop-nav {
    gap:20px;
  }
  .brand {
    min-width:180px;
    gap:8px;
  }
  .brand svg {
    width:32px;
    height:32px;
  }
  .brand>span {
    font-size:12px;
  }
  .brand-kasora {
    font-size:17px;
  }
  .brand small {
    font-size:6px;
  }
  .site-header {
    padding-inline:22px;
    gap:15px;
    min-height:77px;
  }
  .motion-toggle {
    font-size:9px;
    padding:9px;
  }
  .desktop-nav a {
    font-size:8px;
    letter-spacing:.07em;
  }
  .desktop-nav small {
    font-size:7px;
  }
  .hero {
    padding-top:77px;
    min-height:760px;
  }
  .hero h1 {
    margin-bottom:30px;
  }
  .title-big {
    font-size:95px;
  }
  .title-small {
    font-size:28px;
  }
  .hero-tagline h2 {
    font-size:21px;
  }
  .hero-description {
    font-size:10px;
    letter-spacing:.02em;
  }
  .hero-copy {
    padding-top:25px;
  }
  .hero-actions {
    flex-wrap:wrap;
    gap:18px;
  }
  .hero-character-parallax {
    inset:18% -2% 12% -3%;
  }
  .hero-stage {
    width:65%;
    right:-7%;
  }
  .portal {
    width:97%;
  }
  .stage-label {
    right:8%;
    font-size:7px;
  }
  .character-tag {
    bottom:16%;
    right:10%;
    font-size:13px;
  }
  .character-tag b {
    font-size:20px;
  }
  .hero-bottom {
    height:65px;
  }
  .hero-inner {
    height:calc(100% - 65px);
  }
  .hero-lines {
    top:77px;
  }
  .hero-location {
    font-size:6px;
  }
  .hero-copy .eyebrow {
    font-size:7px;
    gap:7px;
  }
  .world-layout {
    grid-template-columns:1fr 1fr;
    gap:5%;
  }
  .world-tabpanel h3 {
    font-size:23px;
  }
  .world-tabs button {
    font-size:11px;
  }
  .world-tabs button>span {
    font-size:8px;
  }
  .world-window-head,.world-window-foot {
    padding:12px;
    font-size:7px;
  }
  .world-window-foot>span:nth-child(2) {
    font-size:7px;
  }
  .world-coordinate {
    top:19px;
    left:14px;
    font-size:9px;
  }
  .world-caption {
    font-size:6px;
    left:13px;
  }
  .world-details>.kicker {
    line-height:1.8;
  }
  .story-grid {
    grid-template-columns:32% 68%;
  }
  .section-intro {
    min-height:470px;
  }
  .story-copy h3 {
    font-size:30px;
  }
  .story-copy>p:not(.kicker) {
    font-size:12px;
  }
  .display-heading {
    font-size:34px;
  }
  .display-heading>span {
    font-size:10px;
  }
  .section-note {
    font-size:11px;
    letter-spacing:.06em;
  }
  .section-index {
    font-size:9px;
    gap:11px;
    letter-spacing:.12em;
  }
  .section-index span {
    width:25px;
  }
  .character-art {
    min-height:430px;
  }
  .character-profile h3 {
    font-size:41px;
  }
  .character-layout {
    gap:4%;
    grid-template-columns:48% 1fr;
  }
  .character-profile .kicker {
    font-size:9px;
  }
  .profile-text {
    font-size:11px;
  }
  .character-backword {
    font-size:110px;
  }
  .character-art-code {
    font-size:6px;
  }
  .profile-lead {
    font-size:18px;
  }
  .profile-details {
    font-size:10px;
  }
  .visual-layout {
    gap:8%;
  }
  .visual-copy h3 {
    font-size:43px;
  }
  .visual-keywords {
    font-size:15px;
    gap:12px;
  }
  .visual-copy>p:not(.kicker) {
    font-size:11px;
  }
  .visual-copy .button-outline {
    min-width:220px;
  }
  .news-inner {
    grid-template-columns:130px 86px minmax(0,1fr);
    gap:15px;
  }
  .news-label {
    font-size:8px;
  }
  .news-inner time {
    font-size:8px;
    padding-left:15px;
  }
  .news-open {
    font-size:10px;
  }
  .news-arrow {
    width:26px;
    height:26px;
  }
  .story-status {
    font-size:9px;
  }
  .small-code {
    font-size:7px;
  }
  .section-pad {
    padding:85px 0;
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:90px;
  }
  .wrap {
    width:calc(100% - 42px);
  }
  .site-header {
    padding:12px 19px;
    min-height:76px;
    gap:12px;
  }
  .brand {
    min-width:0;
    gap:10px;
    margin-right:auto;
  }
  .brand svg {
    width:34px;
    height:34px;
  }
  .brand>span {
    font-size:13px;
  }
  .brand-kasora {
    font-size:18px;
  }
  .brand small {
    font-size:6px;
    letter-spacing:.2em;
  }
  .desktop-nav {
    display:none;
  }
  .header-actions {
    gap:12px;
  }
  .menu-toggle {
    display:block;
  }
  .menu-toggle[aria-expanded=true]>span:first-child {
    transform:translateY(3.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded=true]>span:nth-child(2) {
    transform:translateY(-3.5px) rotate(-45deg);
  }
  .motion-toggle {
    padding:8px 9px;
    font-size:8px;
    gap:6px;
  }
  .motion-toggle .status-dot {
    width:4px;
    height:4px;
  }
  .mobile-nav {
    max-height:calc(100dvh - 77px);
    overflow:auto;
  }
  .hero {
    height:auto;
    min-height:0;
    max-height:none;
    padding-top:76px;
  }
  .hero-inner {
    display:grid;
    grid-template-columns:1fr;
    height:auto;
    padding-top:34px;
  }
  .hero-copy {
    display:contents;
    transform:none;
  }
  .hero-copy>.eyebrow {
    order:0;
    margin:0 0 23px;
    font-size:8px;
    letter-spacing:.1em;
    justify-content:center;
  }
  .hero h1 {
    order:1;
    margin:0;
    text-align:center;
  }
  .title-small {
    font-size:26px;
    letter-spacing:.3em;
    margin:0;
  }
  .title-big {
    font-size:97px;
    line-height:1.12;
    letter-spacing:.04em;
    margin-top:5px;
  }
  .title-big:after {
    display:none;
  }
  .title-en {
    font-size:8px;
    letter-spacing:.32em;
    margin:12px 0 0 3px;
  }
  .hero-stage {
    position:relative;
    order:2;
    top:auto;
    right:auto;
    width:110%;
    height:435px;
    margin:8px -5% 0;
    perspective:800px;
  }
  .portal-position {
    transform:none;
  }
  .portal {
    width:92%;
    max-width:430px;
  }
  .hero-character-parallax {
    inset:2% 0 0 0;
  }
  .hero-character {
    height:100%;
    width:100%;
  }
  .hero-character-float {
    animation-duration:7s;
  }
  .back-kanji {
    font-size:100px;
    top:30%;
    left:11%;
    color:transparent;
    -webkit-text-stroke:1px #d97f9619;
  }
  .character-tag {
    right:3%;
    bottom:4%;
    gap:10px;
    font-size:13px;
  }
  .character-tag small {
    font-size:7px;
  }
  .character-tag b {
    font-size:20px;
  }
  .character-tag .tag-line {
    width:22px;
  }
  .cross-one {
    top:13%;
    left:4%;
  }
  .cross-two {
    bottom:16%;
    right:2%;
  }
  .stage-label {
    right:0;
    top:22%;
    font-size:7px;
  }
  .hero-tagline {
    order:3;
    justify-content:center;
    margin:24px 0 17px;
    gap:15px;
  }
  .hero-tagline h2 {
    font-size:24px;
    line-height:1.65;
    letter-spacing:.09em;
  }
  .red-seal {
    font-size:10px;
    padding:5px 4px;
  }
  .hero-description {
    order:4;
    font-size:11px;
    text-align:center;
    line-height:2.1;
    letter-spacing:.025em;
    margin:0 0 23px;
  }
  .hero-actions {
    order:5;
    justify-content:center;
    gap:24px;
    margin-bottom:30px;
    flex-wrap:nowrap;
  }
  .cyber-button {
    min-width:176px;
    min-height:48px;
    padding:12px 16px;
    gap:24px;
    font-size:11px;
  }
  .cyber-button svg {
    width:20px;
    height:20px;
  }
  .cast-button {
    font-size:10px;
  }
  .cast-button small {
    font-size:6px;
  }
  .cast-icon {
    font-size:30px;
  }
  .hero-vertical {
    display:none;
  }
  .hero-lines {
    inset:76px 10px 0;
  }
  .hero-lines:before,.hero-lines:after {
    top:12px;
    font-size:12px;
  }
  .hero-grid {
    background-size:45px 45px;
  }
  .hero-wash {
    width:180%;
    height:85%;
    right:-40%;
    top:0;
  }
  .hero-bottom {
    min-height:69px;
    height:auto;
    gap:12px;
    border-top:1px solid #e888a013;
    padding:17px 0;
  }
  .scroll-cue {
    font-size:7px;
    gap:10px;
    white-space:nowrap;
  }
  .scroll-line {
    height:28px;
  }
  .hero-location {
    font-size:6px;
    text-align:right;
    letter-spacing:.03em;
    max-width:150px;
    line-height:1.8;
  }
  .hero-location b {
    margin:0 3px;
  }
  .prototype-label {
    display:none;
  }
  .news-inner {
    grid-template-columns:1fr auto;
    gap:0 20px;
    padding:18px 0;
    min-height:90px;
  }
  .news-label {
    font-size:8px;
    letter-spacing:.12em;
  }
  .news-inner time {
    font-size:8px;
    border:0;
    padding-left:0;
    color:#986c77;
  }
  .news-open {
    grid-column:1/-1;
    padding:13px 0 0;
    font-size:10px;
    gap:12px;
    align-items:flex-start;
  }
  .news-arrow {
    width:23px;
    height:23px;
    font-size:13px;
  }
  .flowing-type {
    padding:20px 0;
  }
  .flowing-type>div {
    font-size:23px;
  }
  .flowing-type i {
    margin:0 20px;
  }
  .section-pad {
    padding:70px 0;
  }
  .section-topline {
    display:block;
    margin-bottom:35px;
  }
  .section-index {
    font-size:8px;
    letter-spacing:.12em;
    gap:11px;
    margin-bottom:17px;
  }
  .section-index span {
    width:25px;
  }
  .display-heading {
    font-size:32px;
    letter-spacing:.035em;
  }
  .display-heading>span {
    font-size:10px;
    letter-spacing:.21em;
    margin-top:12px;
  }
  .section-note {
    font-size:11px;
    text-align:left;
    margin-top:24px;
    line-height:2;
    letter-spacing:.03em;
  }
  .story-grid {
    grid-template-columns:1fr;
    gap:35px;
  }
  .section-intro {
    min-height:0;
  }
  .vertical-caption {
    display:none;
  }
  .story-crest {
    width:165px;
    height:165px;
    left:auto;
    right:-25px;
    top:-8px;
    color:#d293a310;
  }
  .story-copy {
    padding:0;
  }
  .story-copy .kicker {
    font-size:10px;
    letter-spacing:.1em;
  }
  .story-copy h3 {
    font-size:29px;
    line-height:1.7;
    letter-spacing:.07em;
    margin:20px 0 28px;
  }
  .story-copy>p:not(.kicker) {
    font-size:12px;
    line-height:2.35;
    margin-bottom:20px;
    letter-spacing:.015em;
  }
  .story-status {
    font-size:10px;
    margin-top:27px;
    padding-top:18px;
    gap:10px;
  }
  .small-code {
    font-size:6px;
    letter-spacing:0;
  }
  .section-pattern {
    width:80%;
    opacity:.025;
  }
  .desktop-break {
    display:none;
  }
  .world-layout {
    grid-template-columns:1fr;
    gap:30px;
  }
  .world-window-head,.world-window-foot {
    padding:12px 14px;
    font-size:7px;
  }
  .world-window-head>span:last-child {
    font-size:11px;
  }
  .world-illustration {
    aspect-ratio:1.25;
  }
  .world-window-foot>span:nth-child(2) {
    font-size:8px;
  }
  .world-coordinate {
    font-size:9px;
  }
  .world-caption {
    font-size:6px;
    left:15px;
  }
  .world-details>.kicker {
    font-size:10px;
    margin-bottom:12px;
  }
  .world-tabs button {
    font-size:12px;
    padding:12px;
    gap:10px;
  }
  .world-tabs button>span {
    font-size:9px;
  }
  .world-tabpanel {
    padding:27px 0 23px;
    min-height:237px;
  }
  .world-tabpanel h3 {
    font-size:26px;
    line-height:1.7;
    margin-bottom:16px;
  }
  .world-tabpanel p {
    font-size:12px;
    line-height:2.2;
  }
  .world-kanji {
    font-size:160px;
    top:20px;
    right:10px;
  }
  .world-footnote {
    font-size:7px;
  }
  .character-count {
    font-size:7px;
    margin-top:18px;
    display:block;
    color:#7e7493;
  }
  .character-count b {
    font-size:20px;
    display:inline-block;
    margin-right:9px;
  }
  .character-layout {
    grid-template-columns:1fr;
    gap:42px;
  }
  .character-section .section-topline {
    margin-bottom:10px;
  }
  .character-art {
    width:100%;
    max-width:430px;
    height:490px;
    aspect-ratio:auto;
    min-height:0;
    margin:auto;
  }
  .character-art img {
    height:100%;
    width:100%;
  }
  .character-backword {
    font-size:112px;
    top:10%;
    right:0;
  }
  .character-halo {
    top:14%;
    width:100%;
    left:0;
  }
  .character-seal {
    width:115px;
    height:115px;
    bottom:7%;
    left:5%;
  }
  .character-art-code {
    font-size:7px;
    left:2%;
    bottom:-11px;
    letter-spacing:.08em;
  }
  .character-profile {
    padding:0 4px;
  }
  .character-profile>.kicker {
    font-size:10px;
    letter-spacing:.1em;
  }
  .character-profile h3 {
    font-size:48px;
    margin-top:25px;
    line-height:1.4;
  }
  .character-profile ruby rt {
    font-size:9px;
  }
  .romaji {
    font-size:10px;
    margin:10px 0 27px;
    letter-spacing:.25em;
  }
  .profile-lead {
    font-size:22px;
    margin:25px 0 16px;
    line-height:1.85;
  }
  .profile-text {
    font-size:12px;
    max-width:none;
    line-height:2.3;
  }
  .profile-details {
    font-size:11px;
    margin:23px 0;
  }
  .profile-details>div {
    padding:10px 0;
    gap:20px;
  }
  .text-link {
    font-size:11px;
    gap:25px;
    line-height:1.8;
  }
  .visual-layout {
    grid-template-columns:1fr;
    gap:45px;
  }
  .poster-button {
    max-width:390px;
    width:94%;
    margin:auto;
    padding:9px;
    transform:rotate(-1deg);
  }
  .poster-button:before {
    inset:-7px;
  }
  .image-open-label {
    font-size:7px;
    padding:12px 3px 2px;
  }
  .image-open-label svg {
    width:17px;
    height:17px;
  }
  .visual-copy {
    padding:0 4px;
  }
  .visual-copy>.kicker {
    font-size:8px;
  }
  .visual-copy h3 {
    font-size:48px;
    line-height:1.5;
    margin:22px 0 24px;
  }
  .visual-copy>p:not(.kicker) {
    font-size:12px;
  }
  .visual-keywords {
    font-size:18px;
    gap:20px;
    margin:28px 0;
  }
  .visual-copy .visual-note {
    font-size:11px!important;
    margin-bottom:23px;
  }
  .visual-copy .button-outline {
    min-width:255px;
  }
  .closing-section {
    padding:75px 0 85px;
  }
  .closing-section .eyebrow {
    font-size:8px;
    letter-spacing:.15em;
  }
  .closing-section h2 {
    font-size:33px;
    letter-spacing:.1em;
    margin:25px 0 28px;
    line-height:1.8;
  }
  .closing-section .cyber-button {
    min-width:230px;
  }
  .closing-crest {
    width:480px;
    height:480px;
    left:calc(50% - 240px);
    top:15px;
  }
  .social-link {
    font-size:9px;
    margin-top:22px;
  }
  .site-footer {
    flex-wrap:wrap;
    padding:28px 0 25px;
    gap:20px;
  }
  .footer-brand {
    font-size:18px;
  }
  .footer-brand small {
    font-size:7px;
    letter-spacing:.17em;
  }
  .site-footer p {
    order:3;
    width:100%;
    font-size:9px;
    margin:0;
    line-height:1.9;
  }
  .back-top {
    margin-left:auto;
    width:42px;
    height:42px;
    font-size:19px;
  }
  .site-footer p>span {
    font-size:8px;
  }
  .image-dialog {
    padding:45px 10px 15px;
    width:95vw;
  }
  .dialog-image-surface {
    max-height:76dvh;
  }
  .dialog-image-surface img {
    max-height:73dvh;
  }
  #image-caption {
    font-size:10px;
    line-height:1.8;
    margin:14px 5px 0;
  }
  .news-dialog {
    padding:50px 23px 25px;
  }
  .news-dialog h2 {
    font-size:24px;
    line-height:1.6;
  }
  .news-dialog>p:not(.eyebrow) {
    font-size:12px;
  }
  .news-dialog .eyebrow {
    font-size:8px;
  }
  .news-dialog .text-link {
    font-size:10px;
  }
  .scan-line {
    animation-duration:12s;
  }
  .grain {
    opacity:.018;
  }
}
@media(max-width:380px) {
  .wrap {
    width:calc(100% - 36px);
  }
  .site-header {
    padding-inline:15px;
  }
  .brand svg {
    width:30px;
    height:30px;
  }
  .brand>span {
    font-size:11px;
  }
  .brand-kasora {
    font-size:17px;
  }
  .header-actions {
    gap:7px;
  }
  .hero-copy>.eyebrow {
    font-size:7px;
  }
  .hero-stage {
    height:380px;
  }
  .title-big {
    font-size:88px;
  }
  .title-small {
    font-size:24px;
  }
  .hero-actions {
    gap:16px;
  }
  .cyber-button {
    min-width:158px;
    gap:14px;
    padding:12px 14px;
    font-size:10px;
  }
  .cast-button {
    font-size:9px;
  }
  .cast-button small {
    font-size:5px;
  }
  .cast-icon {
    font-size:26px;
  }
  .hero-tagline h2 {
    font-size:22px;
  }
  .hero-location {
    font-size:5px;
  }
  .hero-description {
    font-size:10px;
  }
  .display-heading {
    font-size:29px;
  }
  .story-copy h3 {
    font-size:26px;
  }
  .character-art {
    height:430px;
  }
  .character-profile h3 {
    font-size:44px;
  }
  .world-tabs button {
    padding:12px 7px;
  }
  .visual-copy h3 {
    font-size:44px;
  }
  .closing-section h2 {
    font-size:29px;
  }
  .motion-toggle {
    font-size:7px;
    padding:8px 7px;
  }
  .brand small {
    font-size:5px;
  }
  .hero-inner {
    padding-top:28px;
  }
}
html.fx-off {
  scroll-behavior:auto;
}
.cast-button:disabled {
  opacity:.45;
}
.motion-toggle:hover {
  border-color:#fd7a9b80;
}
.hero-stage {
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  body:not(.motion-opt-in) *,body:not(.motion-opt-in) *:before,body:not(.motion-opt-in) *:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  body:not(.motion-opt-in) .reveal {
    opacity:1!important;
    transform:none!important;
  }
}