:root {
  --void: #0a0a0a;
  --deep-void: #050505;
  --washi: #f1efe8;
  --stone: #888780;
  --crate: #c8c5b8;
  --washi-08: rgba(241, 239, 232, 0.08);
  --washi-12: rgba(241, 239, 232, 0.12);
  --washi-24: rgba(241, 239, 232, 0.24);
  --washi-48: rgba(241, 239, 232, 0.48);
  --washi-72: rgba(241, 239, 232, 0.72);
  --sans: Inter, "Söhne", "Untitled Sans", system-ui, -apple-system, sans-serif;
  --serif: "Noto Serif JP", "Yu Mincho", Georgia, serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --rule: 1px solid var(--washi-12);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--void); color-scheme: dark; }
body { margin: 0; background: var(--void); color: var(--washi); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.site-shell { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.site-header { min-height: 82px; padding: 0 clamp(24px, 4vw, 64px); border-bottom: var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.wordmark { font-size: 17px; font-weight: 520; letter-spacing: .22em; text-transform: lowercase; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--washi-48); }
.site-nav a { transition: color .25s ease; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--washi); }
.site-nav .nav-open { padding: 10px 14px; border: 1px solid var(--washi-24); color: var(--washi-72); }

.holding { display: grid; grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr); min-height: calc(100svh - 142px); }
.holding__copy { padding: clamp(72px, 9vw, 150px) clamp(32px, 7vw, 112px); display: flex; flex-direction: column; justify-content: center; border-right: var(--rule); }
.eyebrow { margin: 0 0 34px; display: flex; align-items: center; gap: 10px; color: var(--washi-48); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.status-dot { width: 5px; height: 5px; border: 1px solid var(--washi-72); border-radius: 50%; box-shadow: 0 0 0 4px var(--washi-08); }
h1 { margin: 0; max-width: 9.5ch; font-size: clamp(54px, 6.2vw, 104px); font-weight: 430; letter-spacing: -.045em; line-height: .96; }
h1 em { color: var(--crate); font-family: var(--serif); font-weight: 400; }
.lede { margin: 34px 0 0; max-width: 50ch; color: var(--washi-72); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 46px; }
.button { min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; border: 1px solid var(--washi-24); font-size: 13px; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.button--light { background: var(--washi); color: var(--void); border-color: var(--washi); }
.button--light:hover, .button--light:focus-visible { background: var(--crate); border-color: var(--crate); }
.button--quiet { color: var(--washi-72); }
.button--quiet:hover, .button--quiet:focus-visible { color: var(--washi); border-color: var(--washi-48); }

.holding__art, .downloads__stage { position: relative; min-height: 640px; padding: clamp(52px, 7vw, 112px); display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(241,239,232,.035), transparent 43%); }
.space-label { position: absolute; z-index: 4; color: var(--washi-48); font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.space-label--top { top: 28px; right: 32px; }
.space-label--bottom { bottom: 28px; left: 32px; }
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--washi); opacity: .25; animation: star-drift 10s ease-in-out infinite; }
.stars i:nth-child(1){left:8%;top:13%}.stars i:nth-child(2){left:17%;top:72%;animation-delay:-2s}.stars i:nth-child(3){left:28%;top:25%;animation-delay:-5s}.stars i:nth-child(4){left:84%;top:17%;animation-delay:-3s}.stars i:nth-child(5){left:91%;top:65%;animation-delay:-7s}.stars i:nth-child(6){left:72%;top:84%;animation-delay:-1s}.stars i:nth-child(7){left:48%;top:8%;animation-delay:-6s}.stars i:nth-child(8){left:55%;top:92%;animation-delay:-4s}.stars i:nth-child(9){left:12%;top:47%;animation-delay:-8s}.stars i:nth-child(10){left:88%;top:40%;animation-delay:-9s}
@keyframes star-drift { 50% { transform: translateY(-8px); opacity: .5; } }

.storehouse { position: relative; width: min(100%, 590px); aspect-ratio: 1; border: 1px solid var(--washi-24); background: var(--deep-void); overflow: hidden; box-shadow: inset 0 1px 0 rgba(241,239,232,.06), 0 80px 120px -45px #000; }
.storehouse::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center top, rgba(241,239,232,.055), transparent 58%); }
.storehouse::after { content: "蔵"; position: absolute; right: 4%; bottom: -6%; font-family: var(--serif); font-size: clamp(100px, 14vw, 190px); color: rgba(241,239,232,.018); }
.storehouse__corner { position: absolute; z-index: 6; width: 13px; height: 13px; border: 1px solid var(--washi); }
.storehouse__corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.storehouse__corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.storehouse__corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.storehouse__corner.br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.storehouse__portal { position: absolute; left: 50%; top: 58%; width: 72%; height: 14%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at center, #000 0 42%, rgba(0,0,0,.55) 64%, transparent 80%); }
.storehouse__portal::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--washi-24); border-radius: inherit; box-shadow: inset 0 0 28px rgba(0,0,0,.95); }
.storehouse__halo { position: absolute; left: 50%; top: 58%; width: 88%; height: 22%; transform: translate(-50%, -50%); border: 1px solid var(--washi-12); border-radius: 50%; animation: halo 5s ease-in-out infinite; }
@keyframes halo { 0%,100% { opacity: .3; transform: translate(-50%,-50%) scale(1); } 50% { opacity: .7; transform: translate(-50%,-50%) scale(1.05); } }
.storehouse__rule { position: absolute; left: 8%; right: 8%; top: 58%; height: 1px; background: linear-gradient(90deg, transparent, var(--washi-12) 18% 82%, transparent); opacity: .5; }
.storehouse__crate { position: absolute; z-index: 2; left: 27.5%; top: 28.75%; width: 45%; aspect-ratio: 1; filter: drop-shadow(0 28px 36px rgba(0,0,0,.9)); -webkit-mask-image: linear-gradient(to bottom, #000 0 62%, rgba(0,0,0,.55) 78%, transparent 96%); mask-image: linear-gradient(to bottom, #000 0 62%, rgba(0,0,0,.55) 78%, transparent 96%); animation: hover 5s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-7%); } }
.storehouse__rim { position: absolute; z-index: 4; left: 50%; top: 58%; width: 72%; height: 14%; transform: translate(-50%, -50%); border-radius: 50%; border-bottom: 1px solid var(--washi-48); clip-path: polygon(0 50%,100% 50%,100% 100%,0 100%); opacity: .7; }
.storehouse__particles { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.storehouse__particles i { position: absolute; top: 58%; width: 2px; height: 2px; border-radius: 50%; background: var(--washi); opacity: 0; animation: emit 5s ease-in-out infinite; }
.storehouse__particles i:nth-child(1){left:30%}.storehouse__particles i:nth-child(2){left:42%;animation-delay:.6s}.storehouse__particles i:nth-child(3){left:58%;animation-delay:1.2s}.storehouse__particles i:nth-child(4){left:70%;animation-delay:1.8s}.storehouse__particles i:nth-child(5){left:38%;animation-delay:2.4s}.storehouse__particles i:nth-child(6){left:64%;animation-delay:3s}
@keyframes emit { 0% { transform: translateY(0) scale(.4); opacity: 0; } 30% { transform: translateY(-16px) scale(1); opacity: .9; } 70% { transform: translateY(-40px) scale(.6); opacity: .3; } 100% { transform: translateY(-64px) scale(.3); opacity: 0; } }

.site-footer { min-height: 60px; padding: 0 clamp(24px, 4vw, 64px); border-top: var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--washi-48); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.site-footer a:hover { color: var(--washi); }

.downloads { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(480px, 1.1fr); }
.downloads__intro { padding: clamp(72px, 8vw, 132px) clamp(32px, 7vw, 112px); display: flex; flex-direction: column; justify-content: center; border-right: var(--rule); }
.downloads__intro h1 { max-width: 8ch; font-size: clamp(54px, 6vw, 96px); }
.release-note { margin: 28px 0 0; padding-top: 24px; max-width: 46ch; border-top: var(--rule); color: var(--washi-48); font-family: var(--mono); font-size: 10px; line-height: 1.7; letter-spacing: .06em; }
.text-link { align-self: flex-start; margin-top: 38px; color: var(--washi-72); font-size: 13px; border-bottom: 1px solid var(--washi-24); padding-bottom: 5px; }
.text-link span { margin-left: 14px; }
.downloads__stage { min-height: 650px; }
.storehouse--release .storehouse__crate { animation: release 6.5s cubic-bezier(.45,0,.2,1) infinite; }
.storehouse--release .storehouse__halo { animation-duration: 6.5s; }
@keyframes release { 0%,12% { transform: translateY(17%) scale(.88); opacity: .6; } 45%,68% { transform: translateY(-23%) scale(1); opacity: 1; } 88%,100% { transform: translateY(17%) scale(.88); opacity: .6; } }
.platforms { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--rule); }
.platform { min-height: 230px; padding: 30px clamp(24px, 3.5vw, 54px); display: flex; flex-direction: column; border-right: var(--rule); }
.platform:last-child { border-right: 0; }
.platform > div { display: flex; align-items: baseline; gap: 18px; }
.platform__index { color: var(--washi-48); font-family: var(--mono); font-size: 9px; }
.platform h2 { margin: 0; font-size: clamp(23px, 2.2vw, 34px); font-weight: 450; letter-spacing: -.02em; }
.platform p { margin: 22px 0 34px; max-width: 31ch; color: var(--washi-48); font-size: 13px; line-height: 1.6; }
.platform__status { margin-top: auto; color: var(--washi-72); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }

:focus-visible { outline: 1px solid var(--washi); outline-offset: 4px; }

@media (max-width: 980px) {
  .holding, .downloads { grid-template-columns: 1fr; }
  .holding__copy, .downloads__intro { border-right: 0; border-bottom: var(--rule); }
  .holding__copy { min-height: 70svh; }
  .holding__art, .downloads__stage { min-height: auto; aspect-ratio: 1 / .9; padding: clamp(34px, 9vw, 80px); }
  .platforms { grid-template-columns: 1fr; }
  .platform { min-height: 180px; border-right: 0; border-bottom: var(--rule); }
  .platform:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  .site-header { min-height: 68px; }
  .site-nav > a:first-child { display: none; }
  .holding__copy, .downloads__intro { padding: 72px 24px; }
  h1, .downloads__intro h1 { font-size: clamp(48px, 15vw, 72px); }
  .actions { flex-direction: column; align-items: stretch; }
  .holding__art, .downloads__stage { padding: 30px 20px 54px; }
  .space-label--top { top: 16px; right: 20px; }
  .space-label--bottom { bottom: 18px; left: 20px; }
  .site-footer { min-height: 74px; align-items: flex-start; justify-content: center; flex-direction: column; padding-top: 16px; padding-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}