:root {
  color-scheme: dark;
  --md-sys-color-primary: #ffd75f;
  --md-sys-color-on-primary: #201100;
  --md-sys-color-surface-container: rgba(26, 17, 44, .58);
  --md-sys-color-surface-container-high: rgba(46, 34, 75, .72);
  --slot-magenta: #ff4fc3;
  --slot-violet: #7d63ff;
  --slot-amber: #ffb020;
  --text: #fff8ef;
  --muted: #d8c8d7;
  --desktop-shell-width: 470px;
  --desktop-logo-size: clamp(4.5rem, 11vw, 7.8rem);
  --mobile-shell-width: 300px;
  --mobile-logo-size: clamp(3.55rem, 15vw, 4.7rem);
  --easing-standard: cubic-bezier(.2, 0, 0, 1);
  --font: "Inter", "Noto Sans Myanmar", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: #15113b;
}
body.material-slot {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 79, 195, .27), transparent 18rem),
    radial-gradient(circle at 82% 16%, rgba(255, 216, 95, .2), transparent 20rem),
    radial-gradient(circle at 50% 92%, rgba(125, 99, 255, .26), transparent 24rem),
    linear-gradient(145deg, #101245 0%, #19103b 45%, #2a1147 100%);
}
body.material-slot::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 216, 95, .14) 1px, transparent 1.5px);
  background-size: 58px 58px, 58px 58px, 38px 38px;
  opacity: .72;
  animation: materialGrid 20s linear infinite;
}
a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.landing {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 42px);
}

.app-shell {
  width: min(100%, var(--desktop-shell-width));
  display: grid;
  gap: clamp(18px, 4vh, 28px);
  place-items: stretch;
}
.text-hero {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vh, 18px) 0 clamp(2px, 1vh, 8px);
  isolation: isolate;
}
.text-hero span {
  display: block;
  max-width: 100%;
  font-size: var(--desktop-logo-size);
  line-height: .92;
  font-weight: 900;
  letter-spacing: -.08em;
  text-align: center;
  color: transparent;
  background:
    linear-gradient(115deg, #fff9c9 0%, var(--md-sys-color-primary) 28%, #ff4fc3 58%, #8f7cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 22px 46px rgba(0,0,0,.34);
  filter: drop-shadow(0 0 18px rgba(255, 216, 95, .34));
  animation: logoPulse 4.8s var(--easing-standard) infinite;
}
.text-hero::after {
  content: "";
  width: min(72%, 330px);
  height: 16px;
  margin-top: 12px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(255, 216, 95, .28), transparent 70%);
  filter: blur(8px);
}

.big-actions {
  display: grid;
  gap: 14px;
}
.big-button {
  min-height: 86px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 17px 17px 17px 22px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  transition: transform .22s var(--easing-standard), box-shadow .22s var(--easing-standard), filter .22s var(--easing-standard);
  box-shadow: 0 18px 36px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.12) inset;
}
.big-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.3) 50%, transparent 66% 100%);
  transform: translateX(-130%);
  transition: transform .8s var(--easing-standard);
}
.big-button:hover { transform: translateY(-2px); filter: saturate(1.08); }
.big-button:hover::before { transform: translateX(130%); }
.big-button span { position: relative; z-index: 1; min-width: 0; text-align: center; }
.big-button strong {
  display: block;
  font-size: clamp(1.02rem, 4vw, 1.28rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .035em;
}
.big-button small {
  display: block;
  margin-top: 7px;
  font-family: "Noto Sans Myanmar", var(--font);
  font-size: .88rem;
  font-weight: 700;
  opacity: .8;
}
.primary {
  color: var(--md-sys-color-on-primary);
  background: linear-gradient(135deg, #fff5b9, var(--md-sys-color-primary) 42%, var(--slot-amber));
}
.bonus {
  color: #fff8ef;
  background: linear-gradient(135deg, #ff4fc3, #b45cff 48%, #6d63ff);
}
.secondary {
  color: #fff8ef;
  background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.07)), var(--md-sys-color-surface-container-high);
}

@keyframes materialGrid {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 58px 58px, 58px 58px, 38px 38px; }
}
@keyframes logoPulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 18px rgba(255, 216, 95, .34)); }
  50% { transform: translateY(-4px) scale(1.015); filter: drop-shadow(0 0 28px rgba(255, 79, 195, .4)); }
}

@media (max-width: 560px) {
  .landing { padding: 16px; }
  .app-shell { width: min(100%, var(--mobile-shell-width)); gap: 20px; }
  .text-hero { padding-top: 2px; padding-bottom: 0; }
  .text-hero span { font-size: var(--mobile-logo-size); letter-spacing: -.075em; }
  .text-hero::after { width: 76%; height: 12px; margin-top: 9px; }
  .big-actions { gap: 12px; }
  .big-button {
    min-height: 80px;
    padding: 15px 13px 15px 18px;
    border-radius: 25px;
  }
  .big-button strong { font-size: clamp(.96rem, 4.4vw, 1.12rem); }
  .big-button small { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; }
}