@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_site/orbitron-700.ttf) format('truetype');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_site/orbitron-900.ttf) format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_site/jakarta-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_site/jakarta-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_site/jakarta-700.ttf) format('truetype');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_site/chakra-500.ttf) format('truetype');
}
/* Original MuuZi landing-page design, recovered from the September 6 design task. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #fff; }
body { -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid #111; outline-offset: 5px; }
svg { width: 24px; height: 24px; flex-shrink: 0; }

.page {
  --pad-x: clamp(1.25rem, 4.5vw, 5rem);
  --header-pt: clamp(1.25rem, 2.5vh, 2.5rem);
  --gap-nav: clamp(1rem, 2.2vw, 2.25rem);
  --logo: clamp(1.35rem, 1.2vw + .9rem, 2.1rem);
  --nav: clamp(.65rem, .35vw + .5rem, .875rem);
  --headline: clamp(2.15rem, 4.5vw + .75rem, 5.25rem);
  --body: clamp(.7rem, .35vw + .55rem, .9rem);
  --micro: clamp(.55rem, .25vw + .45rem, .7rem);
  --main-py: clamp(1.25rem, 4vh, 4rem);
  position: relative;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  flex-direction: column;
  background: #fff;
  color: #050505;
  font-family: "Plus Jakarta Sans", "Noto Sans SC", sans-serif;
  user-select: text;
}

.page ::selection { background: #050505; color: #fff; }

.background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.imageLayer { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: cover; filter: grayscale(1) contrast(.9); }
.reveal { filter: grayscale(.1) contrast(.95); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
.grid { position: absolute; inset: 0; opacity: .1; }
.whiteWash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 43%, rgba(255,255,255,.36) 68%, rgba(255,255,255,.2) 100%); }

.header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: var(--header-pt) var(--pad-x) clamp(.75rem,1.5vh,1.5rem); }
.brand { display: flex; align-items: center; font-family: "Orbitron", sans-serif; font-size: var(--logo); font-weight: 900; letter-spacing: .15em; transition: opacity .2s ease; }
.brand:hover { opacity: .68; }
.brand img { width: 1.05em; height: 1.05em; margin-right: .46em; border-radius: 28%; }
.brand sup { margin: -.35em 0 0 .1em; font-size: .45em; }
.header { gap: 1rem; flex-wrap: wrap; }
.nav { margin-left: auto; }
.languageSelect { flex: none; min-height: 44px; max-width: 110px; padding: 8px; border: 1px solid #d4d4d8; border-radius: 6px; background: #fff; color: #111; font: 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.heroCopy { min-width: 0; }
.lead { max-width: 32rem; }
html:not([lang="en"]) .hero h1 { font-family: "Plus Jakarta Sans", "PingFang SC", "Hiragino Kaku Gothic ProN", "Malgun Gothic", sans-serif; line-height: 1.2; }
html[lang="ja"] .hero h1 { font-size: clamp(2rem, 4vw, 4.5rem); }
.drawerHead h2 { overflow-wrap: anywhere; }
@media (min-width: 901px) and (max-width: 1250px) { .header .nav { gap: .85rem; letter-spacing: .04em; } .page .hero { gap: 1rem; } .hero .feature { min-width: 0; max-width: 23rem; } }
.nav { display: flex; align-items: center; gap: var(--gap-nav); font-size: var(--nav); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.nav a, .nav button { font: inherit; letter-spacing: inherit; text-transform: inherit; transition: opacity .2s ease; }
.nav a:hover, .nav button:hover { opacity: .45; }
.divider { color: #b8b8b8; }

.hero { position: relative; z-index: 10; display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 3rem; padding: var(--main-py) var(--pad-x) clamp(2rem,6vh,5rem); }
.heroCopy { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1rem,1.8vw,1.6rem); }
.eyebrow { margin: 0 0 clamp(1rem,2vh,1.75rem); font-family: "Chakra Petch", monospace; font-size: var(--micro); letter-spacing: .24em; }
.hero h1 { margin: 0; font-family: "Orbitron", sans-serif; font-size: var(--headline); font-weight: 900; letter-spacing: .06em; line-height: 1.01; text-transform: uppercase; }
.hero h1 > span { display: block; white-space: nowrap; }
.lead { margin: clamp(1.35rem,2.7vh,2.5rem) 0 0; font-size: clamp(.82rem,.5vw + .65rem,1.05rem); line-height: 1.75; letter-spacing: .03em; }
.corner { position: absolute; width: clamp(.65rem,.4vw + .4rem,.95rem); height: clamp(.65rem,.4vw + .4rem,.95rem); }
.tl { top: 0; left: 0; }.tr { top: 0; right: 0; }.bl { bottom: 0; left: 0; }.br { right: 0; bottom: 0; }
.checker { display: inline-grid; grid-template-columns: repeat(6, .12em); grid-template-rows: repeat(4, .12em); gap: .08em; width: clamp(2.75rem,4.5vw,6.5rem); margin-left: .18em; transform: translateY(-.08em); vertical-align: middle; }
.checker i { width: .12em; height: .12em; background: #050505; }
.checker i:nth-child(12n + 7) { margin-left: .1em; }
.cta { display: inline-flex; align-items: center; gap: .9rem; margin-top: clamp(1.5rem,3.5vh,3rem); padding: clamp(.65rem,.9vh,.85rem) clamp(1.15rem,1.4vw,1.75rem); border: 1px solid #9ca3af; border-radius: 6px; font-size: var(--body); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; transition: background .2s,color .2s,border-color .2s; }
.cta svg { width: 1.2em; transition: transform .2s; }
.cta:hover { border-color: #050505; background: #050505; color: #fff; }
.cta:hover svg { transform: translate(2px,-2px); }

.feature { position: relative; align-self: flex-end; display: flex; min-width: clamp(15rem,22vw,23rem); align-items: center; gap: clamp(1rem,1.5vw,1.75rem); padding: clamp(1rem,1.5vw,1.75rem); text-align: left; }
.feature .corner { position: absolute; }
.spark { width: clamp(2.4rem,3vw + 1rem,4rem); height: auto; }
.feature div { display: flex; flex-direction: column; gap: .45rem; font-size: var(--body); letter-spacing: .12em; text-transform: uppercase; }
.feature strong { font-weight: 700; }.feature span { color: #3f3f46; line-height: 1.6; }
.featureArrow { width: 1rem; margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.feature:hover .featureArrow { opacity: 1; transform: translateX(0); }

.drawerLayer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; background: rgba(0,0,0,.2); backdrop-filter: blur(2px); animation: fadeIn .2s ease-out; }
.drawer { display: flex; width: min(100%, clamp(21rem,32vw,31rem)); flex-direction: column; overflow-y: auto; border-left: 1px solid #d1d5db; background: #fff; padding: clamp(1.5rem,3vw,2.6rem); box-shadow: -20px 0 50px rgba(0,0,0,.08); animation: slideIn .32s cubic-bezier(.2,.8,.2,1); }
.drawerHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.drawerHead p { margin: 0 0 .8rem; color: #71717a; font-size: .65rem; font-weight: 600; letter-spacing: .2em; }
.drawerHead h2 { margin: 0; font-family: "Orbitron", sans-serif; font-size: clamp(1.6rem,2vw,2.3rem); letter-spacing: .06em; text-transform: uppercase; }
.drawerHead button { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid #d4d4d8; border-radius: 50%; }
.drawerHead button:hover { background: #050505; color: #fff; }
.drawerHead svg { width: 1.05rem; }
.drawerIntro { margin: clamp(2rem,5vh,3.5rem) 0; color: #3f3f46; font-size: .95rem; line-height: 1.9; }
.drawerItems { border-top: 1px solid #d4d4d8; }
.drawerItems article { padding: 1.5rem 0; border-bottom: 1px solid #d4d4d8; }
.itemMeta { display: flex; align-items: center; justify-content: space-between; color: #71717a; font-family: "Chakra Petch", monospace; font-size: .68rem; letter-spacing: .18em; }
.itemMeta svg { width: 1rem; height: 1rem; }
.drawerItems h3 { margin: .75rem 0 .35rem; font-family: "Orbitron", "Noto Sans SC", sans-serif; font-size: .92rem; letter-spacing: .04em; }
.drawerItems p { margin: 0; color: #52525b; font-size: .79rem; line-height: 1.75; }
.drawerCta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 1rem 1.15rem; background: #050505; color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.drawerCta svg { width: 1rem; }
.drawer small { margin-top: 1.4rem; color: #a1a1aa; font-size: .55rem; letter-spacing: .12em; text-align: center; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideIn { from { transform: translateX(100%); } }

/* Narrow screens use a portrait composition, with the face above the copy. */
.mobileNavTrigger { display: none; }
.mobileNavLinks { display: grid; margin: 2rem 0; }
.mobileNavLinks button { min-height: 72px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d4d4d8; text-align: left; font-size: 1.3rem; }
.mobileNavLinks span { font-family: "Chakra Petch", monospace; font-size: .7rem; color: #71717a; }
@media (max-width: 900px) {
  .page { --pad-x: clamp(1.25rem, 5vw, 2.5rem); min-height: 100svh; }
  .header { min-height: 76px; height: auto; padding: 12px var(--pad-x); gap: .5rem; flex-wrap: nowrap; }
  .header .nav { display: none; }
  .languageSelect { margin-left: auto; font-size: 12px; max-width: 100px; }
  html[lang="ja"] .hero h1 { font-size: clamp(1.75rem, 8vw, 4rem); }
  .brand { font-size: clamp(1.2rem, 4.8vw, 1.7rem); }
  .brand img { width: .95em; height: .95em; }
  .nav { margin-left: auto; font-size: .65rem; letter-spacing: .06em; }
  .nav a { display: inline-flex; min-height: 44px; align-items: center; }
  .nav button, .divider { display: none; }
  .mobileNavTrigger { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; }
  .mobileNavTrigger svg { width: 24px; height: 24px; }
  .background { display: block; position: absolute; top: 64px; height: clamp(350px, 70svh, 850px); bottom: auto; }
  .imageLayer { background-position: 51% top; filter: grayscale(.55); }
  .grid { display: none; }
  .reveal { opacity: 0; transition: opacity .65s ease-out; }
  .reveal.is-touching { opacity: 1; transition-duration: .12s; }
  .whiteWash { background: linear-gradient(180deg, #fff 0%, transparent 12%, transparent 44%, #ffffffa6 65%, #fff 94%); }
  .hero { display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0 var(--pad-x) 1.5rem; }
  .heroCopy { min-height: calc(100svh - 76px); justify-content: flex-end; padding: max(250px, 43svh) 0 2rem; }
  .heroCopy > .corner { display: none; }
  .eyebrow { margin-bottom: .9rem; font-size: .6rem; letter-spacing: .18em; }
  .hero h1 { font-size: clamp(2rem, 10.5vw, 4.5rem); letter-spacing: .025em; line-height: 1.04; }
  .lead { max-width: 31rem; margin-top: 1.1rem; font-size: .82rem; line-height: 1.7; letter-spacing: 0; }
  .lead br { display: none; }
  .cta { width: 100%; max-width: 31rem; min-height: 50px; justify-content: space-between; margin-top: 1.3rem; padding: .8rem 1rem; border-color: #050505; border-radius: 0; background: #050505; color: #fff; font-size: .75rem; }
  .feature { align-self: stretch; min-width: 0; margin-top: 1.5rem; padding: 1.25rem 1rem; gap: 1rem; }
  .feature div { font-size: .72rem; letter-spacing: .04em; }
  .feature > svg:last-child { width: 18px; margin-left: auto; }
  .drawer { width: 100%; border-left: 0; }
  .drawerHead button { min-width: 44px; min-height: 44px; }
}

@media (max-width: 900px) and (max-height: 650px) {
  .heroCopy { padding-top: 40svh; padding-bottom: 1rem; }
  .eyebrow { margin-bottom: .6rem; }
  .lead { margin-top: .8rem; }
  .cta { margin-top: .9rem; }
}

@media (prefers-reduced-motion: reduce) { .reveal { display: none; } }

/* Deployment adaptations: same artwork and composition, no third-party runtime. */
.imageBase { background-image: url('/_site/portrait-base.webp'); }
.reveal { background-image: url('/_site/portrait-reveal.webp'); --reveal-x: 64vw; --reveal-y: 48vh; --reveal-radius: clamp(160px,16vw,420px); mask-image: radial-gradient(circle var(--reveal-radius) at var(--reveal-x) var(--reveal-y), #fff 0%, #fff 40%, #ffffffbf 60%, #ffffff66 75%, #ffffff1f 88%, transparent 100%); }
@media (max-width: 900px) { .reveal { --reveal-radius: clamp(100px, 32vw, 220px); } }
.grid { background-image: linear-gradient(#64748b 1px, transparent 1px), linear-gradient(90deg,#64748b 1px, transparent 1px); background-size: clamp(36px,2.8vw,64px) clamp(36px,2.8vw,64px); }
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh; max-width: 100%; color: #050505; border: 0; border-left: 1px solid #d1d5db; font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif; }
dialog.drawer:not([open]) { display: none; }
dialog.drawer::backdrop { background: rgba(0,0,0,.2); backdrop-filter: blur(2px); }
.drawerCta { margin-top: 2rem; }
.drawer small { line-height: 1.8; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Separate node accounts, native downloads and creator management. */
.entryLinks { display: grid; gap: 1rem; }
.entryLinks > a, .entryLinks > div { display: grid; gap: .65rem; padding: 1.3rem; border: 1px solid #d4d4d8; }
.entryLinks > a:hover { background: #f4f4f5; }
.entryLinks strong { font-size: 1rem; }
.entryLinks strong span { margin-left: .5rem; font-size: .65rem; color: #52525b; font-weight: 400; }
.entryLinks small { margin: 0; text-align: left; font-size: .8rem; color: #52525b; overflow-wrap: anywhere; }
.entryLinks em { font-style: normal; font-size: .8rem; }
.entryLinks p, .entryNote { color: #52525b; font-size: .8rem; line-height: 1.8; }
.entryLinks p { margin: 0; }
.downloadStatus { color: #71717a; font-size: .75rem; }
button.drawerCta { width: 100%; text-align: left; }
@media (max-width: 900px) {
  .nav a.osLogin { display: inline-flex; align-items: center; min-height: 44px; }
  .nav a.studioLink { display: none; }
}

/* Keep the creator entry prominent while preserving the separate node login. */
.nav a.studioLink { padding: .65rem .9rem; border: 1px solid currentColor; border-radius: 6px; letter-spacing: .04em; background: #050505; color: #fff; }
.nav a.studioLink:hover { opacity: 1; background: #333; }