:root {
  --bg: #141534;
  --bg-light: #1b1b43;
  --text: #fffcf2;
  --muted: #b8b9d5;
  --ink: #111128;
  --pink: #fa97b8;
  --mint: #b7f2cd;
  --sun: #ffdf93;
  --line: #555378;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-x: hidden;
  transition: background-color .7s ease;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 60% at 70% 28%, #55477c3d, transparent 73%), radial-gradient(ellipse 48% 35% at 0% 90%, #265d6840, transparent 75%); z-index: -1; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .14; background-image: linear-gradient(#a3a0da11 1px, transparent 1px), linear-gradient(90deg, #a3a0da11 1px, transparent 1px); background-size: 30px 30px; z-index: -1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px dashed var(--mint); outline-offset: 6px; }
.starfield { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.starfield i { display: block; position: absolute; width: 3px; height: 3px; background: var(--sun); opacity: .65; animation: twinkle var(--duration, 4s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.site-wrap { max-width: 1320px; padding: 0 56px; margin: 0 auto; }
.site-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 32px 0 29px; border-bottom: 2px dashed #77729765; }
.wordmark { display: inline-flex; align-items: center; gap: 15px; font-family: "Press Start 2P", ui-monospace, monospace; letter-spacing: -.08em; font-size: 14px; white-space: nowrap; }
.mark-dot { color: var(--pink); }
.brand-pixel { position: relative; width: 34px; height: 34px; background: var(--pink); display: block; box-shadow: 4px 4px 0 #604769; }
.brand-pixel i { position: absolute; width: 6px; height: 6px; background: var(--ink); }
.brand-pixel i:nth-child(1) { left: 8px; top: 9px; }
.brand-pixel i:nth-child(2) { right: 8px; top: 9px; }
.brand-pixel i:nth-child(3) { left: 13px; top: 18px; width: 9px; height: 4px; }
.brand-pixel i:nth-child(4) { left: 9px; top: -5px; background: var(--mint); }
.brand-pixel i:nth-child(5) { right: 7px; bottom: -4px; background: var(--sun); }
.top-right { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.on-dot { width: 9px; height: 9px; background: var(--mint); box-shadow: 0 0 0 4px #b7f2cd1a; animation: blink 3.5s ease-in-out infinite; }
.header-sparkle { font-size: 18px; color: var(--sun); margin-left: 4px; }
.hero { min-height: 650px; padding: 85px 0 90px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 60px; align-items: center; }
.hero-copy { z-index: 1; }
.eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .105em; color: var(--mint); margin: 0 0 35px; white-space: normal; line-height: 2; }
.eyebrow span { font-size: 18px; vertical-align: -2px; }
h1 { font: 400 clamp(31px, 3.55vw, 51px)/1.65 "Press Start 2P", ui-monospace, monospace; letter-spacing: -.055em; margin: 0; text-shadow: 4px 5px 0 #57507e; white-space: nowrap; }
h1 .hello { color: var(--pink); text-shadow: 4px 5px 0 #9a4b78; }
h1 .bang { color: var(--sun); }
.intro { max-width: 505px; font-size: 15px; line-height: 1.95; color: var(--muted); margin: 31px 0 29px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 17px; align-items: center; }
.pixel-button { position: relative; cursor: pointer; padding: 17px 18px; font-size: 11px; letter-spacing: .02em; font-weight: 500; border: 3px solid var(--ink); white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background-color .3s ease; }
.pixel-button span { margin-right: 8px; font-size: 16px; vertical-align: -1px; }
.pixel-button.primary { background: var(--pink); color: #27203e; box-shadow: 5px 5px 0 #74567e; }
.pixel-button.secondary { background: #302d58; color: var(--text); box-shadow: 5px 5px 0 #171730; }
.pixel-button:hover { transform: translate(-2px,-2px); }
.pixel-button.primary:hover { box-shadow: 7px 7px 0 #74567e; background: #ffb2c8; }
.pixel-button.secondary:hover { box-shadow: 7px 7px 0 #171730; background: #46406f; }
.pixel-button:active { transform: translate(4px,4px); box-shadow: 1px 1px 0 #171730 !important; }
.little-message { min-height: 21px; color: #e0c89f; font-size: 11px; margin: 30px 0 0; line-height: 1.7; }
.art-column { position: relative; min-width: 0; }
.pixel-window { position: relative; width: 100%; max-width: 580px; margin: 0 auto; border: 4px solid #090d2a; background: #33345e; box-shadow: 10px 10px 0 #080d23, 0 0 0 3px #7d729f; transform: rotate(1deg); animation: hover 7s ease-in-out infinite; }
.window-titlebar { height: 43px; background: #f9b1c5; border-bottom: 4px solid #090d2a; color: #463351; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; gap: 10px; font-size: 10px; letter-spacing: .02em; }
.window-dots { display: flex; gap: 5px; }
.window-dots b { width: 10px; height: 10px; background: #fdedc7; border: 2px solid #724967; }
.window-dots b:nth-child(2) { background: #a7e3ce; }
.window-dots b:nth-child(3) { background: #ef7b9e; }
.window-stars { color: #915475; white-space: nowrap; }
.sky-canvas { position: relative; width: 100%; overflow: hidden; isolation: isolate; }
.pixel-scene { display: block; width: 100%; height: auto; aspect-ratio: 560/445; image-rendering: pixelated; }
.pixel-moon { animation: moon-glow 5s ease-in-out infinite; transform-origin: 445px 115px; }
.cloud-left { animation: cloud-drift 10s ease-in-out infinite alternate; }
.cloud-right { animation: cloud-drift 13s ease-in-out infinite alternate-reverse; }
.cat { animation: cat-sway 3.5s ease-in-out infinite; transform-origin: 431px 291px; }
.scene-spark { font-family: "Press Start 2P", monospace; display: block; position: absolute; color: #ffe9b3; z-index: 2; animation: twinkle 3.5s ease-in-out infinite; }
.star-a { left: 26%; top: 15%; font-size: 18px; }
.star-b { right: 20%; top: 44%; font-size: 14px; animation-delay: -2s; }
.star-c { left: 40%; top: 40%; font-size: 25px; animation-delay: -1.2s; }
.floating-label { position: absolute; z-index: 2; bottom: 23px; left: 25px; padding: 9px 12px; background: #fff1d9; color: #594466; box-shadow: 4px 4px 0 #231b45; font-size: 10px; }
.tiny-heart { color: #d76e94; margin-right: 5px; }
.window-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 4px solid #090d2a; padding: 10px 15px; background: #a6e5cf; color: #36566a; font-size: 10px; font-weight: 500; }
.art-sparkle { position: absolute; color: var(--sun); font: 24px "Press Start 2P", monospace; pointer-events: none; }
.art-sparkle-one { top: -31px; right: -22px; animation: twinkle 3s ease-in-out infinite; }
.art-sparkle-two { bottom: -35px; left: -24px; color: var(--pink); animation: twinkle 4s ease-in-out infinite reverse; }
.small-print { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 0 0 60px; }
.small-print div { border: 2px dashed #746b9b9c; background: #ffffff06; padding: 18px 16px; text-align: center; color: #d1cee3; font-size: 10px; letter-spacing: .09em; }
.small-print span { color: var(--pink); font-size: 18px; margin-right: 9px; vertical-align: -2px; }
.small-print div:nth-child(2) span { color: var(--sun); }
.small-print div:nth-child(3) span { color: var(--mint); }
.site-footer { border-top: 2px dashed #77729765; padding: 28px 0 36px; color: #9493b9; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; display: flex; justify-content: space-between; gap: 18px; }
.site-footer span span { color: var(--pink); }
.footer-heart { color: var(--pink); }
.confetti-layer { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.confetti-piece { position: fixed; width: 9px; height: 9px; background: var(--piece-color); left: var(--start-x); top: var(--start-y); animation: confetti .9s cubic-bezier(.21,.52,.4,1) forwards; }
body[data-sky="dusk"] { --bg: #392b55; --bg-light: #523d69; --muted: #f0d7e5; --line: #89678f; }
body[data-sky="dusk"]::before { background: radial-gradient(ellipse at 70% 15%, #ed8eac32, transparent 65%); }
body[data-sky="dusk"] .pixel-scene .sky-fill { fill: #986c9e; }
body[data-sky="dusk"] .pixel-moon { filter: brightness(1.07); }
body[data-sky="dusk"] .pixel-window { box-shadow: 10px 10px 0 #20122c, 0 0 0 3px #ab83b0; }
body[data-sky="dusk"] .small-print div { background: #f6dceb09; }
@keyframes hover { 0%,100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-9px) rotate(.25deg); } }
@keyframes twinkle { 0%,100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes cloud-drift { from { transform: translateX(-8px); } to { transform: translateX(15px); } }
@keyframes moon-glow { 0%,100% { opacity: .9; } 50% { opacity: 1; } }
@keyframes cat-sway { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-4px); } }
@keyframes confetti { 0% { opacity: 1; transform: translate3d(0,0,0) rotate(0); } 100% { opacity: 0; transform: translate3d(var(--dx),var(--dy),0) rotate(var(--rotation)); } }
@media(max-width:1100px) {
  .site-wrap { padding: 0 34px; }
  .hero { gap: 25px; }
  h1 { font-size: clamp(28px, 3.6vw, 42px); }
  .hero-actions { gap: 13px; }
  .pixel-button { padding: 15px 12px; font-size: 10px; }
}
@media(max-width:790px) {
  .site-wrap { padding: 0 24px; }
  .site-header { padding: 23px 0; }
  .top-right { font-size: 9px; }
  .hero { grid-template-columns: 1fr; gap: 58px; padding: 69px 0 79px; min-height: auto; }
  .hero-copy { text-align: center; }
  h1 { font-size: clamp(30px, 7vw, 50px); }
  .intro { max-width: 570px; margin: 25px auto 27px; }
  .hero-actions { justify-content: center; }
  .art-column { max-width: 570px; width: 100%; margin: 0 auto; }
  .small-print { margin-bottom: 44px; }
}
@media(max-width:530px) {
  .site-wrap { padding: 0 18px; }
  .wordmark { font-size: 11px; gap: 10px; }
  .brand-pixel { transform: scale(.85); }
  .top-right { font-size: 0; gap: 6px; }
  .header-sparkle { font-size: 18px; }
  .hero { padding: 52px 0 62px; gap: 56px; }
  .eyebrow { font-size: 8px; letter-spacing: .05em; margin-bottom: 24px; }
  h1 { font-size: clamp(24px, 7.8vw, 40px); text-shadow: 3px 3px 0 #57507e; }
  .intro { font-size: 13px; line-height: 1.9; }
  .pixel-button { font-size: 10px; }
  .pixel-window { box-shadow: 6px 6px 0 #080d23, 0 0 0 2px #7d729f; }
  .window-titlebar { font-size: 9px; }
  .window-stars { display: none; }
  .window-footer { font-size: 8px; }
  .floating-label { bottom: 14px; left: 12px; padding: 7px 9px; font-size: 8px; }
  .small-print { grid-template-columns: 1fr; gap: 10px; }
  .small-print div { padding: 13px 12px; }
  .site-footer { align-items: center; flex-direction: column; text-align: center; }
}
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}