@font-face { font-family: "Inter"; src: url("/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-65.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+b1,U+309b,U+4e5e,U+51f1,U+5506,U+55c5,U+58cc,U+59d1,U+5c51,U+5ef7,U+6284,U+62d7,U+6689,U+673d,U+6a2b,U+6a8e,U+6a9c,U+6d63,U+6dd1,U+70b8,U+7235,U+72db,U+72f8,U+7560,U+7c9b,U+7ce7,U+7e1e,U+80af,U+82eb,U+8463,U+8499,U+85dd,U+86ee,U+8a60,U+8a6e,U+8c79,U+8e87,U+8e8a,U+8f5f,U+9010,U+918d,U+9190,U+965b,U+97fb,U+9ab8,U+9bad,U+9d3b,U+9d5c,U+9dfa,U+9e93; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-107.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+23,U+3c,U+2192,U+4e45,U+4efb,U+4f50,U+4f8b,U+4fc2,U+5024,U+5150,U+5272,U+5370,U+53bb,U+542b,U+56db,U+56e3,U+57ce,U+5bc4,U+5bcc,U+5f71,U+60aa,U+6238,U+6280,U+629c,U+6539,U+66ff,U+670d,U+677e-677f,U+6839,U+69cb,U+6b4c,U+6bb5,U+6e96,U+6f14,U+72ec,U+7389,U+7814,U+79cb,U+79d1,U+79fb,U+7a0e,U+7d0d,U+85e4,U+8d64,U+9632,U+96e2,U+9805,U+99ac,U+ff1e; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-110.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+40,U+4e86,U+4e95,U+4f01,U+4f1d,U+4fbf,U+5099,U+5171,U+5177,U+53cb,U+53ce,U+53f0,U+5668,U+5712,U+5ba4,U+5ca1,U+5f85,U+60f3,U+653e,U+65ad,U+65e9,U+6620,U+6750,U+6761,U+6b62,U+6b74,U+6e08,U+6e80,U+7248,U+7531,U+7533,U+753a,U+77f3,U+798f,U+7f6e,U+8449,U+88fd,U+89b3,U+8a55,U+8ac7,U+8b77,U+8db3,U+8efd,U+8fd4,U+9031-9032,U+9580,U+9589,U+96d1,U+985e; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-111.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+2b,U+d7,U+300e-300f,U+4e07,U+4e8c,U+512a,U+5149,U+518d,U+5236,U+52b9,U+52d9,U+5468,U+578b,U+57fa,U+5b8c,U+5ba2,U+5c02,U+5de5,U+5f37,U+5f62,U+623b,U+63d0,U+652f,U+672a,U+6848,U+6d41,U+7136,U+7537,U+754c,U+76f4,U+79c1,U+7ba1,U+7d44,U+7d4c,U+7dcf,U+7dda,U+7de8,U+82b1,U+897f,U+8ca9,U+8cfc,U+904e,U+9664,U+982d,U+9858,U+98a8,U+9a13,U+ff13,U+ff5c; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-112.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+4e16,U+4e3b,U+4ea4,U+4ee4,U+4f4d,U+4f4f,U+4f55,U+4f9b,U+5317,U+5358,U+53c2,U+53e4,U+548c,U+571f,U+59cb,U+5cf6,U+5e38,U+63a2,U+63b2,U+6559,U+662d,U+679c,U+6c7a,U+72b6,U+7523,U+767d,U+770c,U+7a2e,U+7a3f,U+7a7a,U+7b2c,U+7b49,U+7d20,U+7d42,U+8003,U+8272,U+8a08,U+8aac,U+8cb7,U+8eab,U+8ee2,U+9054-9055,U+90fd,U+914d,U+91cd,U+969b,U+97f3,U+984c,U+ff06; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-114.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+3e,U+3005,U+4e0d,U+4e88,U+4ecb,U+4ee3,U+4ef6,U+4fdd,U+4fe1,U+500b,U+50cf,U+5186,U+5316,U+53d7,U+540c,U+544a,U+54e1,U+5728,U+58f2,U+5973,U+5b89,U+5c71,U+5e02,U+5e97,U+5f15,U+5fc3,U+5fdc,U+601d,U+611b,U+611f,U+671f,U+6728,U+6765,U+683c,U+6b21,U+6ce8,U+6d3b,U+6d77,U+7530,U+7740,U+7acb,U+7d50,U+826f,U+8f09,U+8fbc,U+9001,U+9053,U+91ce,U+9762,U+98df; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-115.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+7c,U+3080,U+4ee5,U+5148,U+516c,U+521d,U+5225,U+529b,U+52a0,U+53ef,U+56de,U+56fd,U+5909,U+591a,U+5b66,U+5b9f,U+5bb6,U+5bfe,U+5e73,U+5e83,U+5ea6,U+5f53,U+6027,U+610f,U+6210,U+6240,U+660e,U+66f4,U+66f8,U+6709,U+6771,U+697d,U+69d8,U+6a5f,U+6c34,U+6cbb,U+73fe,U+756a,U+7684,U+771f,U+793a,U+7f8e,U+898f,U+8a2d,U+8a71,U+8fd1,U+9078,U+9577,U+96fb,U+ff5e; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-116.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+a9,U+3010-3011,U+30e2,U+4e0b,U+4eca,U+4ed6,U+4ed8,U+4f53,U+4f5c,U+4f7f,U+53d6,U+540d,U+54c1,U+5730,U+5916,U+5b50,U+5c0f,U+5f8c,U+624b,U+6570,U+6587,U+6599,U+691c,U+696d,U+6cd5,U+7269,U+7279,U+7406,U+767a-767b,U+77e5,U+7d04,U+7d22,U+8005,U+80fd,U+81ea,U+8868,U+8981,U+89a7,U+901a,U+9023,U+90e8,U+91d1,U+9332,U+958b,U+96c6,U+9ad8,U+ff1a,U+ff1f; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-117.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+4e,U+a0,U+3000,U+300c-300d,U+4e00,U+4e0a,U+4e2d,U+4e8b,U+4eba,U+4f1a,U+5165,U+5168,U+5185,U+51fa,U+5206,U+5229,U+524d,U+52d5,U+5408,U+554f,U+5831,U+5834,U+5927,U+5b9a,U+5e74,U+5f0f,U+60c5,U+65b0,U+65b9,U+6642,U+6700,U+672c,U+682a,U+6b63,U+6c17,U+7121,U+751f,U+7528,U+753b,U+76ee,U+793e,U+884c,U+898b,U+8a18,U+9593,U+95a2,U+ff01,U+ff08-ff09; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-118.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+21-22,U+27-2a,U+2c-3b,U+3f,U+41-4d,U+4f-5d,U+61-7b,U+7d,U+ab,U+ae,U+b2-b3,U+b7,U+bb,U+c9,U+cd,U+d6,U+d8,U+dc,U+e0-e5,U+e7-ed,U+ef,U+f1-f4,U+f6,U+f8,U+fa,U+fc-fd,U+103,U+14d,U+1b0,U+300-301,U+1ebf,U+1ec7,U+2013-2014,U+201c-201d,U+2039-203a,U+203c,U+2048-2049,U+2113,U+2122,U+65e5,U+6708,U+70b9; }
@font-face { font-family: "Noto Sans JP"; src: url("/jp-119.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+20,U+2027,U+3001-3002,U+3041-307f,U+3081-308f,U+3091-3093,U+3099-309a,U+309d-309e,U+30a1-30e1,U+30e3-30ed,U+30ef-30f0,U+30f2-30f4,U+30fb-30fe,U+ff0c,U+ff0e; }
@font-face { font-family: "Geist Mono"; src: url("/mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #08090a;
  --text: #f7f8f8;
  --text-2: #8a8f98;
  --text-3: #62666d;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --page: min(1280px, 100% - 2 * clamp(20px, 5.5vw, 80px));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--text);
  font-family: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", -apple-system, "SF Pro Display", system-ui, sans-serif;
  font-feature-settings: "cv01", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: var(--page); margin-inline: auto; }

/* Top bar */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 9, 10, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 19px;
  font-weight: 560;
  letter-spacing: -0.025em;
}
.brand svg { width: 22px; height: 22px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 510;
  color: var(--text-2);
}
.chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4cb782;
  box-shadow: 0 0 0 0 rgba(76, 183, 130, 0.55);
  animation: ping 2.6s ease-out infinite;
}
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 7px rgba(76, 183, 130, 0); } }

/* Hero */
.hero { padding-top: clamp(64px, 15vh, 150px); }

h1 {
  max-width: 14ch;
  font-size: clamp(44px, 7.2vw, 88px);
  font-weight: 510;
  line-height: 1.02;
  letter-spacing: -0.032em;
  background: linear-gradient(180deg, #f7f8f8 30%, rgba(247, 248, 248, 0.62));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 40px;
  margin-top: 28px;
}
.sub p { max-width: 34em; font-size: clamp(16px, 1.3vw, 17px); line-height: 1.6; color: var(--text-2); }
.sub p b { font-weight: 510; color: var(--text); }
.label {
  font-family: "Geist Mono", "Noto Sans JP", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* The panel: a horizon at dawn */
.stage {
  position: relative;
  margin-top: clamp(40px, 7vh, 72px);
  height: clamp(300px, 46vh, 520px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #0e0f11 0%, #08090a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
  mask-image: linear-gradient(180deg, #000 62%, transparent);
}

.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 100%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 100%, #000 10%, transparent 70%);
  opacity: 0.7;
}

.bloom {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 90%;
  height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 45% at 50% 100%, rgba(120, 140, 255, 0.28), rgba(120, 140, 255, 0.08) 45%, transparent 70%);
  filter: blur(20px);
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: 0.7; } }

.planet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, #0d0e12 0%, #08090a 30%);
  box-shadow:
    0 0 0 1px rgba(200, 210, 255, 0.55),
    0 -2px 18px rgba(170, 185, 255, 0.55),
    0 -10px 80px rgba(110, 130, 255, 0.35),
    inset 0 2px 30px rgba(170, 185, 255, 0.25);
  z-index: 2;
}

.beam {
  position: absolute;
  left: 50%;
  top: calc(50% - 1px);
  width: 22%;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  filter: blur(0.5px);
  box-shadow: 0 0 24px 4px rgba(190, 200, 255, 0.55);
  z-index: 3;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer { 50% { width: 30%; opacity: 0.75; } }

.stars { position: absolute; inset: 0; z-index: 1; }
.stars::before, .stars::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  animation: twinkle 6s ease-in-out infinite;
}
.stars::before {
  box-shadow:
    673px 85px rgba(255,255,255,0.5),
    108px 45px rgba(255,255,255,0.7),
    202px 195px rgba(255,255,255,0.7),
    128px 267px rgba(255,255,255,0.35),
    86px 52px rgba(255,255,255,0.5),
    866px 43px rgba(255,255,255,0.35),
    195px 290px rgba(255,255,255,0.5),
    131px 297px rgba(255,255,255,0.35),
    467px 306px rgba(255,255,255,0.35),
    1191px 307px rgba(255,255,255,0.5),
    111px 121px rgba(255,255,255,0.35),
    1150px 76px rgba(255,255,255,0.5),
    868px 81px rgba(255,255,255,0.7),
    251px 300px rgba(255,255,255,0.5),
    1157px 100px rgba(255,255,255,0.35),
    1201px 300px rgba(255,255,255,0.7),
    394px 198px rgba(255,255,255,0.35),
    1131px 40px rgba(255,255,255,0.7),
    132px 113px rgba(255,255,255,0.5),
    1098px 226px rgba(255,255,255,0.5),
    963px 307px rgba(255,255,255,0.5),
    750px 161px rgba(255,255,255,0.35),
    378px 132px rgba(255,255,255,0.35),
    1186px 161px rgba(255,255,255,0.7),
    1023px 183px rgba(255,255,255,0.7),
    929px 155px rgba(255,255,255,0.7);
}
.stars::after {
  animation-delay: -3s;
  box-shadow:
    159px 68px rgba(255,255,255,0.7),
    866px 92px rgba(255,255,255,0.5),
    321px 258px rgba(255,255,255,0.5),
    90px 47px rgba(255,255,255,0.7),
    1183px 168px rgba(255,255,255,0.5),
    727px 312px rgba(255,255,255,0.5),
    1197px 241px rgba(255,255,255,0.35),
    201px 146px rgba(255,255,255,0.5),
    143px 39px rgba(255,255,255,0.7),
    644px 303px rgba(255,255,255,0.7),
    922px 153px rgba(255,255,255,0.7),
    800px 185px rgba(255,255,255,0.35),
    955px 189px rgba(255,255,255,0.35),
    1261px 67px rgba(255,255,255,0.5),
    130px 119px rgba(255,255,255,0.5),
    274px 134px rgba(255,255,255,0.5),
    810px 262px rgba(255,255,255,0.35),
    350px 237px rgba(255,255,255,0.5),
    1135px 150px rgba(255,255,255,0.35),
    891px 289px rgba(255,255,255,0.5),
    860px 191px rgba(255,255,255,0.7),
    789px 126px rgba(255,255,255,0.35);
}
@keyframes twinkle { 50% { opacity: 0.25; } }

.corner {
  position: absolute;
  top: 20px;
  z-index: 5;
  text-transform: none;
}
.corner.l { left: 24px; }
.corner.r { right: 24px; }

/* Japanese typesetting */
:lang(ja) h1 { max-width: none; line-height: 1.18; letter-spacing: -0.01em; font-weight: 560; font-feature-settings: "palt"; }
:lang(ja) .sub p { line-height: 1.9; letter-spacing: 0.04em; font-feature-settings: "palt"; }
:lang(ja) .label, :lang(ja) .chip { letter-spacing: 0.12em; }

/* Entrance */
.in { opacity: 0; transform: translateY(14px); filter: blur(6px); animation: enter 1.4s var(--ease) forwards; }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.2s; }
.d3 { animation-delay: 0.38s; }
@keyframes enter { to { opacity: 1; transform: none; filter: none; } }

.stage.in { transform: translateY(40px); animation-duration: 1.8s; }

a.back { color: var(--text); text-decoration: none; }
a.back:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .top .wrap { height: 60px; }
  .chip { height: 28px; font-size: 12px; }
  .planet { width: 420%; top: 46%; }
  .beam { top: calc(46% - 1px); width: 40%; }
  .bloom { bottom: 54%; }
  .stage { height: 280px; }
  .hero { padding-top: 56px; }
  .corner.r { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .in { opacity: 1; transform: none; filter: none; }
}