/* Profile/About standalone styles */
:root{
  --bg1:#0072c6; /* やや明るい青 */
  --bg2:#0099ff; /* やや明るい青 */
  --text:#ffffff;
  --muted:rgba(255,255,255,.88);
  --card:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.25);
  --shadow:0 12px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0; color:var(--text);
  font:16px/1.9 "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background:linear-gradient(160deg, var(--bg1), var(--bg2));
}

.bg-canvas{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.wrap{position:relative; z-index:1}
.wrap{width:min(980px,92%); margin-inline:auto; padding:56px 0 28px}
header.page{ text-align:center; margin-bottom:28px }
.title{ margin:0 0 12px; font-size: clamp(28px,5vw,44px); letter-spacing:.02em }
.subtitle{ color:var(--muted); margin:0 auto 18px; max-width:48ch }

.map{position:relative}
.connectors{position:absolute; inset:0; pointer-events:none; z-index:0}
.founder{position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; margin:0 auto 18px; padding:12px 18px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.12); box-shadow:var(--shadow); backdrop-filter: blur(4px) saturate(120%);}
.founder .name{font-weight:700; letter-spacing:.03em}
.founder .role{margin-left:.6rem; opacity:.85}

.grid{ display:grid; gap:14px; grid-template-columns:repeat(3, minmax(0,1fr)) }
@media(max-width:960px){ .grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media(max-width:620px){ .grid{ grid-template-columns:1fr } }

.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px 18px; box-shadow:var(--shadow); backdrop-filter: blur(4px) saturate(120%); }
.label{ font-size:.95rem; letter-spacing:.02em; opacity:.95; margin:0 0 6px }
.text{ margin:0; color:var(--muted) }

footer.page{ text-align:center; color:rgba(255,255,255,.8); margin:24px 0 32px; font-size:.9rem }

/* Route styling */
.route{ stroke: rgba(255,255,255,.55); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:6 10; animation: dash 6s linear infinite; filter: drop-shadow(0 1px 0 rgba(0,0,0,.1)); }
.node{ fill: rgba(255,255,255,.9) }
.node-dot{ fill: rgba(255,255,255,.5) }
@keyframes dash { to { stroke-dashoffset: -320; } }
@media (prefers-reduced-motion: reduce){ .route{ animation: none } }