:root { color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #08090d; color: #eeeef2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; place-items: center; overflow-x: hidden; position: relative; isolation: isolate; }
body::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 16% 46%, #0d333a55, transparent 44%), radial-gradient(ellipse at 85% 58%, #42132f55, transparent 43%); }
body::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 3px, #8fa2b512 3px 4px); }
.language-switcher { position: absolute; top: max(20px, env(safe-area-inset-top, 0px)); right: max(32px, env(safe-area-inset-right, 0px)); z-index: 5; display: flex; align-items: center; gap: 8px; }
.language-switcher[hidden] { display: none; }
.language-switcher button { position: relative; min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: #a6a4b2; font: inherit; font-size: 12px; line-height: 1.5; white-space: nowrap; cursor: pointer; transition: color .2s; }
.language-switcher button::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 1px; background: #79dfe9; opacity: 0; transition: opacity .2s; }
.language-switcher button[aria-pressed="true"] { color: #eeeef2; }
.language-switcher button[aria-pressed="true"]::after { opacity: 1; }
.language-switcher button:focus-visible { outline: 2px solid #79dfe9; outline-offset: 2px; }
@media (hover: hover) { .language-switcher button:hover { color: #eeeef2; } }
main { width: min(86vw, 1120px); text-align: center; padding: 90px 0; position: relative; }
.release-date { margin: 0 0 22px; color: #b8b6c0; font-size: 13px; line-height: 1.5; letter-spacing: .16em; }
:lang(zh-Hans) .release-date { letter-spacing: .04em; }
.wordmark { position: relative; width: 100%; height: clamp(64px, 16vw, 204px); margin: 0; }
.wordmark img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0) invert(.94); display: block; }
.echo { position: absolute; inset: 0; mask: url('./branding/edenwake-wordmark-v1.png') center / 100% auto no-repeat; pointer-events: none; }
.echo--cyan { background: #64e9f8; transform: translate(-1px, 0); opacity: .22; }
.echo--pink { background: #fb71bb; transform: translate(1px, 0); opacity: .18; }
.echo--tear { background: #eeeef2; opacity: 0; }
.echo--trail { background: linear-gradient(90deg, #64e9f8 15%, #fb71bb 85%); opacity: 0; }
.genre { color: #a6a4b2; font-size: 16px; line-height: 1.65; margin: 26px 16px 0; letter-spacing: .025em; text-wrap: balance; }
.genre-group { white-space: nowrap; }
.landing-links { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 56px; }
.comic-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; column-gap: 18px; width: min(290px, 100%); min-height: 76px; padding: 15px 18px; border: 1px solid #5f5c69; border-radius: 2px; background: #17161ccc; box-shadow: inset 0 1px 0 #ffffff05; color: #eeeef2; text-align: left; text-decoration: none; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.comic-cta::before { content: ""; position: absolute; top: -1px; left: -1px; width: 15px; height: 15px; border-top: 1px solid #a9bcc2; border-left: 1px solid #a9bcc2; border-top-left-radius: 2px; pointer-events: none; transition: border-color .2s; }
.comic-cta__copy { display: grid; gap: 5px; min-width: 0; }
.comic-cta__title { color: #a6a4b2; font-size: 12px; line-height: 1.4; letter-spacing: .025em; }
.comic-cta__episode { font-size: 16px; line-height: 1.35; font-weight: 500; letter-spacing: .01em; }
.comic-start { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; color: #a6a4b2; font-size: 12px; line-height: 1.5; text-decoration: underline; text-decoration-color: #5f5c69; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.comic-start:focus-visible { color: #eeeef2; text-decoration-color: #79dfe9; }
.comic-cta__arrow { display: block; color: #a9bcc2; transition: color .2s; }
.comic-cta:focus-visible { border-color: #79dfe9; background-color: #19232bcc; }
.comic-cta:focus-visible::before { border-color: #79dfe9; }
.comic-cta:focus-visible .comic-cta__arrow { color: #79dfe9; }
@media (hover: hover) {
  .comic-start:hover { color: #eeeef2; text-decoration-color: #79dfe9; }
  .comic-cta:hover { border-color: #79dfe999; background-color: #19232bcc; box-shadow: inset 0 1px 0 #b4efff08, 0 0 24px #79dfe906; }
  .comic-cta:hover::before { border-color: #79dfe9; }
  .comic-cta:hover .comic-cta__arrow { color: #79dfe9; }
}
a:focus-visible { outline: 2px solid #79dfe9; outline-offset: 7px; }
.platforms { padding: 0 20px max(36px, calc(env(safe-area-inset-bottom, 0px) + 20px)); color: #8c8c94; }
.platform-list { display: grid; grid-template-columns: repeat(8, 56px); gap: 24px; list-style: none; margin: 0; padding: 0; }
.platform-list li { display: flex; align-items: center; justify-content: center; }
.platform-trigger { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px 0; color: inherit; cursor: default; transition: color .15s; }
.platform-trigger[data-tooltip-open] { color: #aaaab2; }
.platform-trigger:focus-visible { outline: 1px solid #8c8c94; outline-offset: 3px; }
.platform-tooltip { position: fixed; z-index: 6; width: max-content; max-width: calc(100vw - 24px); padding: 4px 6px; border: 0; background: transparent; color: #92929c; font-size: 11px; line-height: 1.4; font-weight: 400; text-align: center; white-space: nowrap; cursor: default; }
.platform-tooltip[hidden] { display: none; }
.platform-tooltip__glitch { position: absolute; inset: 4px 6px; pointer-events: none; }
.platform-tooltip__glitch::before, .platform-tooltip__glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; }
.platform-tooltip__glitch::before { color: #a5bec1; --tip-shift: -1px; clip-path: inset(12% 0 58%); }
.platform-tooltip__glitch::after { color: #b8a2b2; --tip-shift: 1px; clip-path: inset(58% 0 12%); }
.platform-tooltip.is-entering .platform-tooltip__glitch::before, .platform-tooltip.is-entering .platform-tooltip__glitch::after { animation: tooltip-glitch .18s steps(1) both; }
@keyframes tooltip-glitch { 0%, 35%, 100% { opacity: 0; transform: translateX(0); } 20% { opacity: .2; transform: translateX(var(--tip-shift)); } }
.platform-icon { display: block; width: 28px; height: 28px; fill: currentColor; }
.platform-icon--wide { width: 34px; }
.signal { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.signal i { position: absolute; display: block; height: 1px; background: #5de0ed; opacity: .3; }
.signal i:nth-child(1) { left: 0; top: 29%; width: 11%; box-shadow: 15px 5px #5de0ed44, 54px -4px #5de0ed22; }
.signal i:nth-child(2) { right: 0; top: 37%; width: 7%; background: #f274bc; box-shadow: -40px 6px #f274bc44; }
.signal i:nth-child(3) { right: 9%; bottom: 23%; width: 17%; background: #f274bc; }
.signal i:nth-child(4) { left: 4%; bottom: 34%; width: 5%; box-shadow: 4px 4px #5de0ed44; }
.signal i:nth-child(5) { left: 22%; top: 16%; width: 3%; opacity: .15; }
.signal i:nth-child(6) { right: 23%; top: 21%; width: 1%; background: #f274bc; }
.edge { position: absolute; width: 25px; height: 25px; opacity: .4; pointer-events: none; }
.edge--top { top: 32px; left: 32px; border-top: 1px solid #75d4de; border-left: 1px solid #75d4de; }
.edge--bottom { bottom: 32px; right: 32px; border-bottom: 1px solid #ef89c2; border-right: 1px solid #ef89c2; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) { main { width: 90vw; padding: 72px 0 56px; } .language-switcher { top: max(12px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); } .release-date { font-size: 12px; margin-bottom: 18px; } .genre { max-width: 310px; margin: 26px auto 0; font-size: 14px; } .genre-group { display: block; } .genre-divider { display: none; } .edge--top { top: 20px; left: 20px; } .edge--bottom { bottom: 20px; right: 20px; } }
@media (max-width: 600px) { .landing-links { margin-top: 48px; } }
@media (max-height: 600px) { main { padding-top: 80px; padding-bottom: 36px; } .landing-links { margin-top: 32px; } .release-date { margin-bottom: 12px; } .genre { margin-top: 18px; } }
@media (max-width: 700px) {
  .platforms { width: min(100%, 400px); padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }
  .platform-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; row-gap: 22px; }
  .platform-trigger { margin-block: -10px; }
  .platform-icon { width: 24px; height: 24px; }
  .platform-icon--wide { width: 30px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* A quiet carrier signal, interrupted by short, irregular transmission faults. */
.static-grain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; opacity: .065; }
.static-grain::after { content: ""; position: absolute; inset: -25%; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTgwIDE4MCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjkyJyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHBhdGggZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScuNjUnIGQ9J00wIDBoMTgwdjE4MEgweicvPjwvc3ZnPg=="); background-size: 180px 180px; animation: grain-drift .42s steps(1) infinite; }
.tracking { position: absolute; left: 0; right: 0; top: var(--tracking-y, 35%); height: 46px; z-index: 2; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, #6ee8f520 3px 4px, transparent 4px 6px, #ee6cb522 6px 7px); mask-image: linear-gradient(90deg, #000, transparent 32% 60%, #000); }
.wordmark { --kick: 22px; --reverse: -17px; --cut-top: 27%; --cut-bottom: 61%; }
body[data-glitch="2"] .wordmark { --kick: -30px; --reverse: 23px; --cut-top: 54%; --cut-bottom: 31%; }
body[data-glitch="3"] .wordmark { --kick: 15px; --reverse: -35px; --cut-top: 41%; --cut-bottom: 46%; }
body[data-glitch] .echo--cyan { animation: chroma-break .82s steps(1) both; }
body[data-glitch] .echo--pink { animation: chroma-break .82s steps(1) reverse both; }
body[data-glitch] .echo--tear { animation: slice-break .82s steps(1) both; }
body[data-glitch="3"] .echo--trail { animation: spectral-trail .82s ease-out both; }
body[data-glitch] .wordmark img { animation: carrier-slip .82s steps(1) both; }
body[data-glitch] .tracking { animation: tracking-slip .82s steps(1) both; }
body[data-glitch] .static-grain { animation: grain-burst .82s steps(1) both; }
body[data-glitch] .signal i { animation: dropout .82s steps(1) both; }
body[data-glitch] .signal i:nth-child(even) { animation-direction: reverse; }
body[data-glitch] .signal i:nth-child(3n) { animation-delay: .12s; }
@keyframes spectral-trail {
  0%, 34%, 100% { opacity: 0; transform: translateX(0); filter: blur(0); }
  43% { opacity: .32; transform: translateX(var(--reverse)); filter: blur(1px); }
  65% { opacity: .16; transform: translateX(var(--kick)); filter: blur(3px); }
  88% { opacity: 0; transform: translateX(0); filter: blur(5px); }
}
@keyframes chroma-break {
  0%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0); }
  8% { opacity: .85; transform: translate(var(--kick), -2px); clip-path: inset(8% 0 72%); }
  19% { opacity: .6; transform: translate(var(--reverse), 1px); clip-path: inset(48% 0 14%); }
  30% { opacity: .35; transform: translate(3px, 0); clip-path: inset(0); }
  45% { opacity: .9; transform: translate(var(--kick), 0); clip-path: polygon(0 18%, 100% 18%, 100% 23%, 0 23%, 0 64%, 100% 64%, 100% 77%, 0 77%); }
  57% { opacity: .12; transform: translate(-2px, 1px); clip-path: inset(0); }
  78% { opacity: .65; transform: translate(var(--reverse), 0); clip-path: inset(68% 0 26%); }
  86% { opacity: 0; }
}
@keyframes slice-break {
  0%, 100% { opacity: 0; }
  9%, 42% { opacity: 1; clip-path: inset(var(--cut-top) 0 var(--cut-bottom)); transform: translate(var(--reverse), 0); }
  20%, 52% { opacity: .85; clip-path: inset(73% 0 18%); transform: translate(var(--kick), 2px); }
  32%, 65% { opacity: 0; }
  79% { opacity: .9; clip-path: inset(36% 0 59%); transform: translate(11px, 0); }
  88% { opacity: 0; }
}
@keyframes carrier-slip {
  0%, 24%, 48%, 100% { transform: translate(0); }
  9% { transform: translate(-2px, 0) skewX(-1deg); }
  42% { transform: translate(3px, 0); }
  79% { transform: translate(-1px, 1px); }
}
@keyframes tracking-slip {
  0%, 100% { opacity: 0; transform: translateY(0); }
  10% { opacity: .8; transform: translateY(-13px); }
  25% { opacity: .3; transform: translateY(27px) scaleY(.3); }
  43% { opacity: .65; transform: translateY(4px); }
  60% { opacity: 0; }
  78% { opacity: .3; transform: translateY(90px) scaleY(.15); }
}
@keyframes grain-drift { 0%, 100% { transform: translate(0); } 25% { transform: translate(-8%, 12%); } 50% { transform: translate(10%, -7%); } 75% { transform: translate(-5%, -10%); } }
@keyframes grain-burst { 0%, 100% { opacity: .065; } 10%, 43% { opacity: .18; } 25%, 60% { opacity: .085; } }
@keyframes dropout { 0%, 100% { opacity: .3; transform: translateX(0); } 12%, 45% { opacity: .8; transform: translateX(40px) scaleX(1.9); } 25% { opacity: .15; transform: translateX(-12px); } 60% { opacity: 0; } 80% { opacity: .5; transform: translateX(-20px) scaleX(.3); } }
@media (max-width: 600px) { .wordmark { --kick: 12px; --reverse: -9px; } body[data-glitch="2"] .wordmark { --kick: -16px; --reverse: 12px; } body[data-glitch="3"] .wordmark { --kick: 8px; --reverse: -18px; } }
@media (prefers-reduced-motion: reduce) { .static-grain::after { animation: none; } .echo--tear, .echo--trail, .tracking { display: none; } }