/* Inter font loaded via <link> in index.html (avoids duplicate request) */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: var(--font-display);
  background: linear-gradient(135deg, #1a0a2e 0%, #16213e 50%, #0f3460 100%);
  background-attachment: fixed;
  color: var(--color-text-primary);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: 20px 0;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

.text-large-title { font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.text-display { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.text-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.text-title-2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.text-subtitle { font-size: 16px; font-weight: 600; }
.text-body { font-size: 15px; font-weight: 400; line-height: 1.4; }
.text-footnote { font-size: 13px; font-weight: 400; color: var(--color-text-secondary); }
.text-caption { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }

.muted { color: var(--color-text-secondary); }

/* scrollbar */
.scroll-area::-webkit-scrollbar { width: 0; height: 0; }
::-webkit-scrollbar { width: 0; height: 0; }

.hscroll {
  display: flex; gap: var(--sp-3); overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 2px 16px;
  margin: 0 -16px; scrollbar-width: none;
}
.hscroll > * { scroll-snap-align: start; flex-shrink: 0; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity:0; transform: translateY(16px);} to {opacity:1; transform: translateY(0);} }
@keyframes scaleIn { from { opacity:0; transform: scale(0.94);} to {opacity:1; transform: scale(1);} }
@keyframes shimmer { 0%{ background-position: -200% 0;} 100%{ background-position: 200% 0;} }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }
@keyframes float { 0%,100%{ transform: translateY(0) rotate(var(--r,0));} 50%{ transform: translateY(-14px) rotate(var(--r,0));} }
@keyframes scanline { 0%{ top: 8%;} 100%{ top: 88%;} }
@keyframes confetti-fall { 0%{ transform: translateY(-20px) rotate(0); opacity:1;} 100%{ transform: translateY(420px) rotate(540deg); opacity:0;} }
@keyframes spinRing { to { transform: rotate(360deg); } }