:root{
  /* OrbiOne palette (JP calm + modern) */
  --bg: #070A12;
  --surface: #0D1222;
  --surface2: #0B0F1C;
  --text: #F2F4FF;
  --muted: rgba(242,244,255,.76);

  --primary: #8A5CFF;   /* violet */
  --primary2: #FF4FD8;  /* sakura neon */
  --accent: #34D3C7;    /* mint */
  --warm: #F9C96D;      /* warm highlight */
  --stroke: rgba(255,255,255,.12);

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 26px;

  --grad-hero: radial-gradient(1200px 600px at 20% 0%, rgba(138,92,255,.30), transparent 55%),
               radial-gradient(900px 520px at 90% 10%, rgba(255,79,216,.22), transparent 55%),
               radial-gradient(800px 520px at 60% 90%, rgba(52,211,199,.16), transparent 55%);
  --grad-card: linear-gradient(135deg, rgba(138,92,255,.18), rgba(255,79,216,.10) 45%, rgba(52,211,199,.10));
  --grad-line: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02), rgba(255,255,255,.08));
}

html, body { height: 100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
a{ color: rgba(242,244,255,.92); }
a:hover{ color: #fff; }