/* common: variables, base, nav, footer */
:root{
  --bg1:#fff7ff;
  --bg2:#f6fffe;
  --ink:#1b1b2a;
  --muted:#4b4b67;
  --muted2:#6a6a88;
  --card:#ffffffcc;
  --stroke:#1b1b2a14;
  --shadow: 0 18px 50px rgba(30, 30, 60, .10);
  --shadow2: 0 10px 26px rgba(30, 30, 60, .10);
  --r:22px;
  --max:1120px;

  --p:#7c3aed;   /* purple */
  --t:#14b8a6;   /* teal */
  --pk:#ec4899;  /* pink */
  --y:#f59e0b;   /* yellow */
  --b:#60a5fa;   /* blue */
  --g: linear-gradient(135deg, var(--p), var(--t));
  --g2: linear-gradient(135deg, var(--pk), var(--p));
  --g3: linear-gradient(135deg, var(--y), var(--pk));
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Maru Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic", sans-serif;
  background:
    radial-gradient(900px 600px at 10% 0%, rgba(236,72,153,.18), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(20,184,166,.18), transparent 55%),
    radial-gradient(900px 600px at 55% 100%, rgba(124,58,237,.14), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* top nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background: rgba(255,255,255,.65);
  border-bottom:1px solid rgba(27,27,42,.08);
}
.navin{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px}
.mark{
  width:40px; height:40px; border-radius:16px;
  background: conic-gradient(from 210deg, var(--p), var(--t), var(--pk), var(--y), var(--p));
  box-shadow: 0 16px 40px rgba(124,58,237,.18);
  position:relative;
  transform: rotate(-6deg);
}
.mark:after{
  content:""; position:absolute; inset:3px; border-radius:13px;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(27,27,42,.10);
}
.brand .name{display:flex; flex-direction:column; line-height:1.1}
.brand .name small{font-size:11px; color:var(--muted2); font-weight:900}
.brand .name b{font-size:14px}

.links{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.links a{
  font-size:13px; color:var(--muted);
  padding:8px 10px; border-radius:999px;
  font-weight:900;
}
.links a:hover{background: rgba(27,27,42,.06); color:var(--ink)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius:999px;
  border:1px solid rgba(27,27,42,.10);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow2);
  font-weight:1000; font-size:14px;
  transition: transform .15s ease, filter .15s ease;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); filter:saturate(1.05)}
.btn.primary{
  border:none;
  color:#fff;
  background: var(--g);
  box-shadow: 0 18px 50px rgba(124,58,237,.16);
}
.btn.ghost{
  background: rgba(255,255,255,.55);
}
.navToggle{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  border:none; border-radius:12px;
  background: rgba(27,27,42,.06);
  color:var(--ink);
  cursor:pointer;
  padding:0;
}
.navToggle:hover{background: rgba(27,27,42,.1)}
.navToggleIcon,.navToggleIcon::before,.navToggleIcon::after{
  display:block; width:20px; height:2px; border-radius:2px; background:currentColor; transition: transform .2s ease, opacity .2s ease;
}
.navToggleIcon{position:relative}
.navToggleIcon::before,.navToggleIcon::after{content:""; position:absolute; left:0; top:0}
.navToggleIcon::before{transform:translateY(-6px)}
.navToggleIcon::after{transform:translateY(6px)}
body.navOpen .navToggleIcon{background:transparent}
body.navOpen .navToggleIcon::before{transform:translateY(0) rotate(45deg)}
body.navOpen .navToggleIcon::after{transform:translateY(0) rotate(-45deg)}

/* panel base (cards / content boxes) */
.panel{
  border-radius:var(--r);
  background: rgba(255,255,255,.70);
  border:1px solid rgba(27,27,42,.10);
  box-shadow: var(--shadow);
}

footer{padding:26px 0 40px; color:var(--muted2); font-size:12px; font-weight:900}
footer a{text-decoration:underline; text-underline-offset:3px}
.split{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

@media (max-width: 640px){
  .wrap{padding:0 16px}
  .nav .wrap{padding-left:24px; padding-right:24px}
  .navin{position:relative; flex-wrap:nowrap; padding:10px 0; gap:12px; justify-content:space-between}
  .navin .brand{min-width:0}
  .brand .name small{font-size:10px}
  .brand .name b{font-size:12px; line-height:1.2; word-break:keep-all}
  .mark{width:32px; height:32px; border-radius:12px; flex-shrink:0}
  .mark:after{inset:2px; border-radius:10px}
  .navToggle{display:flex; flex-shrink:0}
  .links{
    position:absolute; top:100%; left:0; right:0; margin:0 -24px; margin-top:6px;
    z-index:60;
    flex-direction:column; align-items:stretch; gap:0;
    background: linear-gradient(180deg, rgba(255,247,255,.98), rgba(250,255,253,.98));
    backdrop-filter:saturate(140%) blur(16px);
    border:1px solid rgba(27,27,42,.06);
    border-top:none;
    box-shadow: 0 20px 48px rgba(30,30,60,.12);
    padding:16px 24px 20px;
    border-radius:0 0 var(--r) var(--r);
    display:none;
  }
  body.navOpen .links{display:flex}
  .links a{
    font-size:15px; font-weight:900;
    padding:14px 16px;
    border-radius:14px;
    color:var(--ink);
  }
  .links a:hover{background: rgba(27,27,42,.06); color:var(--ink)}
  .links .btn{
    padding:16px; font-size:15px; font-weight:1000;
    justify-content:center;
    margin-top:12px;
    border-radius:14px;
  }
  .links .btn.primary{margin-top:8px}
  .split{flex-direction:column; align-items:flex-start; gap:8px}
}