@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
:root { --md-text-font: "Inter", "Noto Sans JP"; }
/* アプリのアイコン（紺にシアンのグロー）に合わせた配色 */
:root, [data-md-color-scheme="default"] {
  --md-primary-fg-color: #0B1220;
  --md-primary-fg-color--light: #1E293B;
  --md-primary-fg-color--dark: #070B16;
  --md-accent-fg-color: #0891B2;
  --md-typeset-a-color: #0369A1;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #070B16;
  --md-primary-fg-color--light: #0F172A;
  --md-primary-fg-color--dark: #05080F;
  --md-accent-fg-color: #22D3EE;
  --md-typeset-a-color: #67E8F9;
  --md-default-bg-color: #0B1220;
}
.md-header { background: linear-gradient(90deg, #070B16 0%, #0C1630 60%, #0A1F33 100%); }
.md-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #22D3EE, #6366F1);
}
.md-tabs { background: #0C1630; }
.md-typeset .grid.cards > ul > li { border-radius: 12px; }
.md-typeset .grid.cards > ul > li:hover { border-color: var(--md-accent-fg-color); }
.md-typeset img { border-radius: 8px; }
.md-typeset h1 { font-weight: 700; letter-spacing: -0.01em; color: var(--md-default-fg-color); }
.md-typeset h2 { font-weight: 700; color: var(--md-default-fg-color); }
.md-typeset h3 { font-weight: 600; }

/* トップのヒーロー（README の hero.svg と同じ紺→シアン） */
.zf-hero {
  position: relative; overflow: hidden; text-align: center;
  margin: 0 0 1.6rem; padding: 2.6rem 1.2rem 2.2rem; border-radius: 18px; color: #E2E8F0;
  background:
    radial-gradient(circle at 18% 40%, rgba(34, 211, 238, .28), transparent 45%),
    radial-gradient(circle at 92% 0%, rgba(99, 102, 241, .30), transparent 50%),
    linear-gradient(135deg, #070B16 0%, #0C1630 55%, #0A1F33 100%);
  box-shadow: inset 0 -3px 0 0 #22D3EE;
}
.zf-hero-icon { width: 88px; height: auto; border-radius: 0 !important; filter: drop-shadow(0 0 18px rgba(34, 211, 238, .35)); }
.md-typeset .zf-hero-title { color: #FFFFFF; margin: .5rem 0 .2rem; font-size: 2.2rem; }
.zf-ver { font-size: .9rem; font-weight: 600; color: #22D3EE; vertical-align: middle; margin-left: .4rem; }
.zf-hero-lead { color: #CBD5E1; max-width: 40rem; margin: .4rem auto 1.2rem; }
.md-typeset .zf-hero .md-button { color: #E2E8F0; border-color: rgba(226, 232, 240, .5); margin: .25rem; }
.md-typeset .zf-hero .md-button--primary { background: #0891B2; border-color: #0891B2; color: #FFFFFF; }
.md-typeset .zf-hero .md-button:hover { background: #22D3EE; border-color: #22D3EE; color: #0B1220; }
.md-typeset .grid.cards .lg { color: var(--md-accent-fg-color); }