/* -------------------------------
   Pastel Gradient Theme for LLL SIG
   ------------------------------- */

:root{
  --ink:#16213e;
  --muted:#64748b;
  --bg:#fff;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:20px;
  --maxw:1000px;

  --p1:#a0e7e5;
  --p2:#b4c5ff;
  --p3:#ffd3b6;
  --p4:#ffb3c1;
  --p5:#c8f7dc;
  --accent:#6a7cff;
  --accent2:#ff7aa2;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans JP',sans-serif;
  line-height:1.65;
  color:var(--ink);
  background: var(--bg);
  min-height:100vh;
  background-image:
    radial-gradient(60% 80% at 10% 10%, var(--p1) 0%, transparent 60%),
    radial-gradient(50% 60% at 90% 5%,  var(--p2) 0%, transparent 55%),
    radial-gradient(70% 70% at 0% 90%,  var(--p3) 0%, transparent 60%),
    radial-gradient(60% 60% at 100% 85%,var(--p4) 0%, transparent 55%),
    radial-gradient(40% 40% at 50% 50%, var(--p5) 0%, transparent 70%);
  background-attachment: fixed;
}

/* Links */
a{ color:var(--accent); text-decoration:none }
a:hover{ color:#5566ff }

/* Layout */
.container{ max-width:var(--maxw); margin:0 auto; padding:24px }

/* Header */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px) saturate(120%);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(22,33,62,.06);
}
.brand{ display:flex; align-items:end; gap:14px; flex-wrap:wrap }
.kicker{
  font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0
}
.hero-logo{
  font-size:40px; font-weight:900; line-height:1; margin:0;
  background: linear-gradient(90deg,#7aa2ff,#ff76a8,#78e0c0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Navigation */
nav{ margin-top:12px }
nav ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:10px
}
nav a{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background: rgba(106,124,255,.12);
  color:#3046a3;
  font-weight:600;
  font-size:15px;
  border:1px solid rgba(48,70,163,.18);
  transition: transform .12s ease, background-color .12s ease;
}
nav a:hover{
  transform: translateY(-1px);
  background:rgba(106,124,255,.22)
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid rgba(22,33,62,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin:18px 0;
}
.card.ribbon{ position:relative; overflow:hidden }
.card.ribbon:before{
  content:""; position:absolute; inset:auto auto 0 0;
  height:10px; width:100%;
  background: linear-gradient(90deg, var(--p2), var(--p4), var(--p1), var(--p3));
}

/* Headings & text */
h1{ font-size:38px; font-weight:900; color:#29335c; margin:0 0 6px }
h2{ font-size:26px; font-weight:800; color:#1e293b; margin:8px 0 10px }
h3{ font-size:20px; font-weight:800; color:#4c5fff; margin:6px 0 8px }
p{ font-size:16px; margin:10px 0 }
.lead{ font-size:18px }
.muted{ color:var(--muted) }

/* Lists */
ul,ol{ padding-left:22px }
.toc li{ margin:10px 0 }

/* Badges */
.badge{
  display:inline-block;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  padding:3px 8px; border-radius:999px; margin-left:6px;
  color:#8a2a52;
  background:rgba(255,122,162,.18);
  border:1px solid rgba(255,122,162,.28);
}

/* Layout helpers */
.split{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap }
.grow{ flex:1; min-width:260px }
.fixed{ flex:0 0 240px; max-width:240px }

/* Footer */
.footer{
  font-size:14px;
  color:var(--muted);
  text-align:center;
  padding:28px 0
}

/* Images */
img{ max-width:100%; height:auto; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.08) }

/* Mobile tweaks */
@media (max-width:640px){
  .container{ padding:16px }
  .hero-logo{ font-size:32px }
  h1{ font-size:30px }
  h2{ font-size:22px }
}