@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:wght@400;500&family=Noto+Sans+JP:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:       #1a1a1a;
  --white:       #ffffff;
  --gray:        #999999;
  --gray-xlight: #f4f4f4;
  --line:        #e8e8e8;

  --font-ui:   'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-code: 'Google Sans Code', 'Courier New', monospace;
}

html { font-size: 15px; }

body {
  font-family: var(--font-ui);
  background: var(--white);
  color: var(--black);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* NAV */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 2rem; height: 48px;
}
.logo {
  font-family: var(--font-code);
  font-size: 14px; font-weight: 500;
  color: var(--black); text-decoration: none;
  letter-spacing: -0.3px; margin-right: 2rem;
}
.nav-links { display: flex; align-items: center; flex: 1; }
.nav-link {
  font-family: var(--font-ui);
  font-size: 13px; color: var(--gray);
  text-decoration: none;
  padding: 0 0.9rem; height: 48px;
  display: flex; align-items: center;
  border-bottom: 1.5px solid transparent; margin-bottom: -1px;
  transition: color 0.1s, border-color 0.1s;
}
.nav-link:hover { color: var(--black); }
.nav-link.active { color: var(--black); border-bottom-color: var(--black); }
.nav-right { margin-left: auto; }
.btn-ghost {
  font-family: var(--font-code);
  font-size: 11.5px; color: var(--gray);
  background: none; border: 1px solid var(--line);
  padding: 0.25rem 0.65rem; cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}
.btn-ghost:hover { border-color: var(--gray); color: var(--black); }

/* PAGE */
.page { max-width: 840px; margin: 0 auto; padding: 3rem 2rem 6rem; }
.page-header { margin-bottom: 2.5rem; }
.page-title {
  font-family: var(--font-ui);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 500; letter-spacing: -0.5px;
  line-height: 1.2; color: var(--black);
}

/* CODE */
pre {
  font-family: var(--font-code);
  font-size: 12.5px; line-height: 1.75;
  background: var(--gray-xlight); color: var(--black);
  border: 1px solid var(--line);
  padding: 1rem 1.2rem; overflow-x: auto;
  margin: 1.25rem 0;
}
code {
  font-family: var(--font-code);
  font-size: 12.5px;
  background: var(--gray-xlight); color: var(--black);
  padding: 0.1em 0.4em;
}
pre code { background: none; color: inherit; padding: 0; border: none; }

/* PROSE */
.prose { font-family: var(--font-ui); line-height: 1.8; }
.prose h2 {
  font-size: 17px; font-weight: 500; color: var(--black);
  margin: 2.5rem 0 0.75rem;
  padding-top: 2rem; border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prose h3 { font-size: 14px; font-weight: 500; color: var(--black); margin: 1.5rem 0 0.4rem; }
.prose p  { font-size: 14px; color: var(--black); margin-bottom: 1rem; line-height: 1.85; }
.prose strong { font-weight: 500; }
.prose em { font-style: italic; }
.prose ul, .prose ol { font-size: 14px; color: var(--black); margin: 0.5rem 0 1rem 1.4rem; line-height: 1.85; }
.prose li { margin-bottom: 0.25rem; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 1rem 0 1.5rem; }
.prose th {
  text-align: left; font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--gray);
  padding: 0 0.75rem 0.5rem; border-bottom: 1px solid var(--line);
}
.prose td {
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line);
  color: var(--black); vertical-align: top; font-size: 13px;
}

/* TAG */
.tag {
  font-family: var(--font-code);
  display: inline-block; font-size: 10.5px;
  padding: 0.15em 0.5em; border: 1px solid var(--line); color: var(--gray);
}

/* STATE */
.state-msg {
  font-family: var(--font-ui);
  font-size: 13px; color: var(--gray); padding: 4rem 0; text-align: center;
}

/* DARK */
[data-theme="dark"] {
  --black:       #e0e0e0;
  --white:       #111111;
  --gray:        #666666;
  --gray-xlight: #1e1e1e;
  --line:        #2c2c2c;
}