:root {
  color-scheme: dark;
  --bg: #0b0a13;
  --panel: rgba(21, 18, 35, .76);
  --line: rgba(201, 174, 255, .17);
  --text: #f8f5ff;
  --muted: #aaa4be;
  --pink: #ff58c8;
  --cyan: #51e7ff;
  --lavender: #c5a4ff;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(ellipse at 75% 47%, rgba(31, 55, 83, .3), transparent 33rem), #0b0a13; color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(197,164,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(197,164,255,.055) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at 55% 45%, #000, transparent 76%); }
.scene-glow { position: absolute; width: 38rem; height: 38rem; border-radius: 50%; filter: blur(110px); opacity: .13; animation: glow-breathe 9s ease-in-out infinite alternate; }
.scene-glow-pink { background: var(--pink); top: 4%; left: -19rem; }
.scene-glow-cyan { background: #167bff; right: -21rem; bottom: -18rem; animation-delay: -4.4s; }
.scene-grain { position: absolute; inset: 0; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.topbar, .main-layout, .notice, .page-footer { position: relative; z-index: 1; }
.topbar { width: min(1240px, calc(100% - 64px)); margin: 0 auto; min-height: 86px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(205,188,255,.1); gap: 18px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 17px/1 var(--display); letter-spacing: -.45px; }
.wordmark-heart { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,88,200,.32); border-radius: 11px; color: var(--pink); font-size: 25px; text-shadow: 0 0 18px rgba(255,88,200,.6); animation: heart-beat 2.8s ease-in-out infinite; }
.wordmark-domain { color: #a49bb9; font-weight: 500; }
.topbar-note { display: inline-flex; align-items: center; gap: 9px; color: #a49bb9; font-size: 9px; font-weight: 700; letter-spacing: 1.7px; text-align: right; }
.topbar-dot, .caption-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #85ffd7; box-shadow: 0 0 12px rgba(133,255,215,.7); }
.main-layout { width: min(1240px, calc(100% - 64px)); min-height: min(700px, calc(100vh - 220px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: clamp(25px, 5.5vw, 88px); padding: 58px 0 52px; }
.welcome-copy { max-width: 620px; padding: 8px 0 14px; }
.eyebrow { display: flex; align-items: center; gap: 11px; color: #bbb1ce; font-size: 10px; font-weight: 700; letter-spacing: 2.1px; }
.eyebrow-line { display: inline-block; width: 23px; height: 2px; background: linear-gradient(90deg, var(--pink), var(--cyan)); box-shadow: 0 0 12px rgba(255,88,200,.3); }
h1 { margin: 24px 0 18px; font: 700 clamp(42px, 5vw, 66px)/1.06 var(--display); letter-spacing: -2.9px; }
.gradient-text { background: linear-gradient(105deg, var(--pink) 4%, #d29cff 49%, var(--cyan) 98%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { max-width: 550px; margin: 0; color: #b2abc3; font-size: 15px; line-height: 1.9; }
.status-panel { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 15px; margin: 28px 0 23px; padding: 17px 18px; border: 1px solid rgba(197,164,255,.19); border-radius: 16px; background: linear-gradient(110deg, rgba(255,88,200,.055), rgba(81,231,255,.04)), rgba(16,14,27,.62); box-shadow: 0 15px 55px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.025); }
.status-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,88,200,.23); border-radius: 13px; background: rgba(255,88,200,.08); color: var(--pink); }
.status-icon svg { width: 20px; fill: currentColor; filter: drop-shadow(0 0 6px rgba(255,88,200,.5)); animation: star-pulse 3.1s ease-in-out infinite; }
.status-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.status-label { color: #7f7897; font-size: 8px; font-weight: 700; letter-spacing: 1.65px; }
.status-copy strong { font: 600 14px/1.45 var(--display); color: #f5efff; }
.status-subline { color: #8b849f; font-size: 11px; }
.status-breath { display: flex; align-items: center; gap: 4px; padding-left: 4px; }
.status-breath i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px rgba(255,88,200,.35); animation: dot-breathe 1.3s ease-in-out infinite; }
.status-breath i:nth-child(2) { background: #c5a4ff; animation-delay: .18s; }
.status-breath i:nth-child(3) { background: var(--cyan); animation-delay: .36s; }
.actions { display: flex; flex-wrap: wrap; gap: 11px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; font: 700 12px/1 var(--display); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.button-primary { color: #171122; background: linear-gradient(105deg, var(--pink), #c17eff 62%, #76dfff); box-shadow: 0 8px 27px rgba(255,88,200,.15); }
.button-primary:hover { box-shadow: 0 10px 35px rgba(255,88,200,.24); }
.button-secondary { color: #ded7eb; border-color: rgba(197,164,255,.23); background: rgba(22,19,35,.72); }
.button-secondary:hover { border-color: rgba(81,231,255,.43); }
.discord-glyph { color: var(--cyan); font-size: 16px; }
.tiny-note { display: flex; align-items: center; gap: 8px; margin-top: 23px; color: #716b84; font-size: 10px; letter-spacing: .2px; }
.tiny-heart { color: var(--pink); font-size: 16px; animation: heart-beat 2.8s ease-in-out infinite; }
.character-stage { position: relative; justify-self: center; width: min(100%, 500px); aspect-ratio: 1 / 1; isolation: isolate; }
.stage-halo { position: absolute; inset: 13%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(160,108,255,.17), rgba(36,156,255,.06) 49%, transparent 71%); filter: blur(17px); animation: aura-breathe 5.5s ease-in-out infinite; }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(197,164,255,.2); border-radius: 50%; pointer-events: none; }
.orbit-outer { width: 91%; height: 64%; transform: translate(-50%, -50%) rotate(-19deg); border-color: rgba(255,88,200,.25); }
.orbit-inner { width: 74%; height: 84%; transform: translate(-50%, -50%) rotate(24deg); border-color: rgba(81,231,255,.23); }
.satellite-layer { position: absolute; inset: 0; pointer-events: none; }
.satellite { position: absolute; top: 0; left: 0; font-size: 19px; line-height: 1; opacity: .94; transform: translate(-50%, -50%); will-change: left, top; text-shadow: 0 0 14px currentColor, 0 0 26px currentColor; }
.satellite-pink { color: var(--pink); }
.satellite-cyan { color: var(--cyan); font-size: 22px; }
.aiko-art { position: absolute; z-index: 1; inset: 4%; width: 92%; height: 92%; display: block; object-fit: contain; object-position: center; filter: drop-shadow(0 14px 28px rgba(8,7,18,.28)); animation: avatar-breathe 7.2s ease-in-out infinite; }
.avatar-glow { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255,88,200,.12), rgba(81,231,255,.07) 48%, transparent 71%); filter: blur(28px); animation: aura-breathe 5.7s ease-in-out infinite reverse; }
.heart-core { position: absolute; z-index: 2; left: 50%; bottom: 9%; transform: translateX(-50%); width: 49px; height: 49px; display: grid; place-items: center; border: 1px solid rgba(255,88,200,.32); border-radius: 50%; background: rgba(18,13,29,.7); color: var(--pink); box-shadow: 0 0 22px rgba(255,88,200,.14), inset 0 0 16px rgba(255,88,200,.07); animation: heart-beat-centered 2.8s ease-in-out infinite; }
.heart-core span { font-size: 27px; line-height: 1; text-shadow: 0 0 12px rgba(255,88,200,.55); }
.floating-heart { position: absolute; color: var(--pink); font-size: 28px; text-shadow: 0 0 18px currentColor; animation: float-heart 5.5s ease-in-out infinite; }
.floating-heart-one { top: 13%; left: 5%; }
.floating-heart-two { top: 18%; right: 5%; color: var(--cyan); font-size: 23px; animation-delay: -2.1s; }
.character-caption { position: absolute; z-index: 3; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; min-width: 230px; padding: 11px 15px; border: 1px solid rgba(197,164,255,.2); border-radius: 14px; background: rgba(13,11,22,.86); backdrop-filter: blur(14px); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.character-caption > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.character-caption strong { color: #f5efff; font: 600 12px var(--display); }
.character-caption small { color: #89829c; font-size: 10px; }
.caption-heart { margin-left: auto; color: var(--pink); text-shadow: 0 0 10px rgba(255,88,200,.5); animation: heart-beat 2.8s ease-in-out infinite; }
.stage-spark { position: absolute; color: var(--cyan); text-shadow: 0 0 12px currentColor; }
.stage-spark-a { top: 9%; right: 17%; font-size: 27px; animation: twinkle 3.8s ease-in-out infinite; }
.stage-spark-b { right: 12%; bottom: 19%; font-size: 25px; animation: twinkle 3.2s ease-in-out infinite -1.3s; }
.notice { width: min(1240px, calc(100% - 64px)); margin: 0 auto 22px; display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 17px 20px; border: 1px solid rgba(197,164,255,.15); border-radius: 15px; background: rgba(21,18,34,.63); }
.notice-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(81,231,255,.24); color: var(--cyan); background: rgba(81,231,255,.06); font: 700 15px var(--display); }
.notice h2 { margin: 0 0 4px; font: 600 12px var(--display); color: #e8e1f4; }
.notice p { margin: 0; color: #8c859e; font-size: 10.5px; line-height: 1.65; }
.notice strong { color: #c9c0dd; }
.preview-badge { white-space: nowrap; border: 1px solid rgba(255,88,200,.2); border-radius: 100px; background: rgba(255,88,200,.055); padding: 8px 11px; color: #c8a7d8; font-size: 8px; font-weight: 700; letter-spacing: 1.15px; }
.preview-badge span { color: var(--cyan); margin: 0 3px; }
.page-footer { width: min(1240px, calc(100% - 64px)); min-height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #6e687f; font-size: 10px; }
.page-footer a { color: #aaa0bf; text-decoration: none; }
.page-footer a:hover { color: var(--cyan); }
.footer-heart { color: var(--pink); text-shadow: 0 0 10px rgba(255,88,200,.4); }
@keyframes heart-beat { 0%, 9%, 17%, 100% { transform: scale(1); } 4% { transform: scale(1.14); } 12% { transform: scale(1.07); } }
@keyframes heart-beat-centered { 0%, 9%, 17%, 100% { transform: translateX(-50%) scale(1); } 4% { transform: translateX(-50%) scale(1.14); } 12% { transform: translateX(-50%) scale(1.07); } }
@keyframes avatar-breathe { 0%,100% { transform: translateY(0) scale(1); filter: drop-shadow(0 14px 28px rgba(8,7,18,.28)); } 50% { transform: translateY(-5px) scale(1.012); filter: drop-shadow(0 18px 34px rgba(255,88,200,.13)); } }
@keyframes aura-breathe { 0%,100% { opacity: .44; transform: scale(.96); } 50% { opacity: .85; transform: scale(1.05); } }
@keyframes glow-breathe { 0% { transform: scale(.9); opacity: .1; } 100% { transform: scale(1.07); opacity: .19; } }
@keyframes star-pulse { 0%,100% { transform: scale(.92) rotate(-5deg); opacity: .7; } 50% { transform: scale(1.1) rotate(8deg); opacity: 1; } }
@keyframes dot-breathe { 0%,100% { opacity: .42; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes float-heart { 0%,100% { transform: translateY(0) rotate(-7deg); opacity: .72; } 50% { transform: translateY(-12px) rotate(7deg); opacity: 1; } }
@keyframes twinkle { 0%,100% { opacity: .45; transform: scale(.8) rotate(-10deg); } 50% { opacity: 1; transform: scale(1.12) rotate(10deg); } }
@media (max-width: 980px) {
  .main-layout { grid-template-columns: minmax(0, 1fr) minmax(285px, .82fr); gap: 24px; }
  h1 { font-size: clamp(39px, 5.5vw, 56px); }
  .character-stage { width: 100%; }
  .status-panel { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; padding: 14px; }
  .notice { grid-template-columns: 36px minmax(0,1fr); }
  .preview-badge { grid-column: 2; justify-self: start; }
}
@media (max-width: 700px) {
  .topbar, .main-layout, .notice, .page-footer { width: min(100% - 36px, 520px); }
  .topbar { min-height: 72px; }
  .topbar-note { max-width: 170px; font-size: 8px; letter-spacing: 1.1px; line-height: 1.5; }
  .main-layout { grid-template-columns: 1fr; min-height: 0; gap: 12px; padding: 40px 0 32px; }
  .welcome-copy { order: 1; }
  .character-stage { order: 0; width: min(100%, 365px); margin: 0 auto 8px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.6px; }
  h1 { margin: 17px 0 12px; font-size: clamp(39px, 10.4vw, 52px); letter-spacing: -1.9px; }
  .lede { font-size: 13px; line-height: 1.8; }
  .status-panel { margin-top: 20px; }
  .button { flex: 1 1 170px; padding: 0 14px; }
  .notice { margin-bottom: 13px; padding: 14px; align-items: start; }
  .notice p { font-size: 10px; }
  .page-footer { align-items: flex-start; justify-content: center; flex-direction: column; padding: 10px 0 20px; }
}
@media (max-width: 380px) {
  .topbar, .main-layout, .notice, .page-footer { width: calc(100% - 26px); }
  .topbar-note { max-width: 140px; }
  .character-stage { width: min(100%, 320px); }
  .status-copy strong { font-size: 12px; }
  .status-subline { font-size: 10px; }
  .preview-badge { white-space: normal; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}