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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background: #F8F8FB;
  color: #000000;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  background: #FFFFFF;
  min-height: 100dvh;
}

/* ヘッダー */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #0017C1;
}

.header__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header__title {
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.03em;
}

.header__subtitle {
  font-size: 11px;
  color: #C5D7FB;
  font-weight: 500;
}

/* ナビ */
.nav {
  display: flex;
  background: #F8F8FB;
  border-bottom: 1px solid #CCCCCC;
}

.nav__link {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #626264;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.nav__link:hover {
  color: #0017C1;
  background: rgba(52, 96, 251, 0.05);
}

.nav__link--active {
  color: #0017C1;
  border-bottom-color: #0017C1;
}

/* イントロ */
.page-intro {
  padding: 24px 20px 16px;
}

.page-intro__title {
  font-size: 20px;
  font-weight: 800;
  color: #000000;
  margin-bottom: 6px;
}

.page-intro__desc {
  font-size: 13px;
  color: #626264;
  line-height: 1.7;
}

/* フィルター */
.filter {
  display: flex;
  gap: 6px;
  padding: 12px 20px;
  overflow-x: auto;
  border-bottom: 1px solid #CCCCCC;
  -webkit-overflow-scrolling: touch;
}

.filter__btn {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #C5D7FB;
  border-radius: 20px;
  background: #FFFFFF;
  color: #626264;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.filter__btn:hover {
  border-color: #3460FB;
  color: #0017C1;
}

.filter__btn--active {
  background: #0017C1;
  color: #FFFFFF;
  border-color: #0017C1;
}

/* 用語カード */
.terms {
  padding: 16px 20px;
}

.term {
  border: 1px solid #CCCCCC;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 16px;
  transition: border-color 0.2s;
}

.term:hover {
  border-color: #C5D7FB;
}

.term__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.term__word {
  font-size: 15px;
  font-weight: 700;
  color: #000000;
}

.term__sub {
  font-size: 11px;
  font-weight: 500;
  color: #626264;
  margin-left: 6px;
}

.term__tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: #D9E6FF;
  color: #0017C1;
  border: 1px solid #C5D7FB;
}

.term__body {
  font-size: 13px;
  line-height: 1.8;
  color: #374151;
}

/* ダイアグラム */
.term__diagram {
  margin-top: 12px;
  padding: 14px;
  background: #F8F8FB;
  border: 1px solid #C5D7FB;
  border-radius: 8px;
}

.term__diagram-label {
  font-size: 10px;
  font-weight: 700;
  color: #3460FB;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.diagram-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.diagram-flow--center {
  justify-content: center;
}

.diagram-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.diagram-box--purple {
  background: #D9E6FF;
  color: #0017C1;
  border: 1px solid #C5D7FB;
}

.diagram-box--purple-dark {
  background: #0017C1;
  color: #FFFFFF;
  border: 1px solid #0017C1;
}

.diagram-box--blue {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.diagram-box--amber {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.diagram-box--green {
  background: #E6F5EC;
  color: #197A4B;
  border: 1px solid #86efac;
}

.diagram-box--gray {
  background: #F1F1F4;
  color: #374151;
  border: 1px solid #CCCCCC;
}

.diagram-arrow {
  font-size: 13px;
  color: #3460FB;
  font-weight: 700;
  flex-shrink: 0;
}

.diagram-arrow--blue {
  color: #1e40af;
}

.diagram-arrow--amber {
  color: #92400e;
}

.diagram-arrow--green {
  color: #197A4B;
}

.diagram-arrow--gray {
  color: #626264;
}

.diagram-plus {
  font-size: 16px;
  font-weight: 800;
  color: #0017C1;
}

.diagram-equals {
  font-size: 16px;
  font-weight: 800;
  color: #197A4B;
}

/* Loop diagram (circular) */
.diagram-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.diagram-loop-back {
  font-size: 11px;
  color: #3460FB;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Chunk split diagram */
.diagram-split {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.diagram-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.diagram-doc__block {
  width: 60px;
  height: 40px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #1e40af;
}

.diagram-doc__label {
  font-size: 9px;
  color: #626264;
  font-weight: 500;
}

.diagram-chunks {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.diagram-chunk {
  width: 36px;
  height: 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
}

.diagram-chunk--1 {
  background: #D9E6FF;
  color: #0017C1;
  border: 1px solid #C5D7FB;
}

.diagram-chunk--2 {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.diagram-chunk--3 {
  background: #E6F5EC;
  color: #197A4B;
  border: 1px solid #86efac;
}

.diagram-chunk--4 {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

/* Comparison side-by-side */
.diagram-compare {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.diagram-compare__col {
  flex: 1;
  min-width: 140px;
}

.diagram-compare__title {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}

.diagram-compare__title--gray {
  background: #F1F1F4;
  color: #626264;
}

.diagram-compare__title--purple {
  background: #D9E6FF;
  color: #0017C1;
}

.diagram-compare__example {
  font-size: 10px;
  color: #626264;
  line-height: 1.6;
}

.diagram-compare__hit {
  color: #197A4B;
  font-weight: 600;
}

.diagram-compare__miss {
  color: #626264;
  text-decoration: line-through;
}

/* Vector display */
.diagram-vector {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 11px;
  color: #0017C1;
  background: #D9E6FF;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #C5D7FB;
}

/* Score display */
.diagram-score {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

.diagram-score--high {
  background: #E6F5EC;
  color: #197A4B;
  border: 1px solid #86efac;
}

.diagram-score--low {
  background: #F1F1F4;
  color: #626264;
  border: 1px solid #CCCCCC;
}

/* Hybrid merge */
.diagram-merge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.diagram-merge__row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Token visualization */
.diagram-tokens {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.diagram-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  background: #D9E6FF;
  color: #0017C1;
  border: 1px dashed #C5D7FB;
}

.diagram-token-label {
  font-size: 10px;
  color: #626264;
  font-weight: 500;
  text-align: center;
  margin-top: 6px;
}

/* Meter / gauge bar */
.diagram-meter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diagram-meter__bar {
  height: 18px;
  border-radius: 9px;
  background: #F1F1F4;
  border: 1px solid #CCCCCC;
  overflow: hidden;
  display: flex;
}

.diagram-meter__fill {
  height: 100%;
  border-radius: 9px 0 0 9px;
  transition: width 0.3s;
}

.diagram-meter__fill--green {
  background: linear-gradient(90deg, #86efac, #197A4B);
}

.diagram-meter__fill--amber {
  background: linear-gradient(90deg, #fcd34d, #f59e0b);
}

.diagram-meter__fill--red {
  background: linear-gradient(90deg, #fca5a5, #CE0000);
}

.diagram-meter__labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #626264;
  font-weight: 500;
}

/* Orchestrator layout */
.diagram-orchestrator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.diagram-orchestrator__conductor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: #0017C1;
  color: #FFFFFF;
  border: 1px solid #0017C1;
}

.diagram-orchestrator__arrows {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: #3460FB;
}

/* Hub / radial connection */
.diagram-hub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.diagram-hub__center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: #0017C1;
  color: #FFFFFF;
  border: 2px solid #000060;
}

.diagram-hub__spokes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diagram-hub__spoke {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* File icon */
.diagram-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.diagram-file__icon {
  width: 44px;
  height: 52px;
  background: #D9E6FF;
  border: 1px solid #C5D7FB;
  border-radius: 4px 10px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #0017C1;
}

.diagram-file__label {
  font-size: 9px;
  color: #626264;
  font-weight: 500;
}

/* Energy gauge for fatigue */
.diagram-gauge {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  justify-content: center;
}

.diagram-gauge__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.diagram-gauge__fill {
  width: 36px;
  border-radius: 4px 4px 0 0;
  border: 1px solid;
}

.diagram-gauge__fill--high {
  height: 40px;
  background: #E6F5EC;
  border-color: #86efac;
}

.diagram-gauge__fill--mid {
  height: 22px;
  background: #fef3c7;
  border-color: #fcd34d;
}

.diagram-gauge__fill--low {
  height: 10px;
  background: #FDEEEE;
  border-color: #fca5a5;
}

.diagram-gauge__fill--recover {
  height: 32px;
  background: #dbeafe;
  border-color: #93c5fd;
}

.diagram-gauge__label {
  font-size: 9px;
  color: #626264;
  font-weight: 500;
}

/* Balance / scale */
.diagram-scale {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.diagram-scale__small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: #F1F1F4;
  color: #626264;
  border: 1px solid #CCCCCC;
}

.diagram-scale__big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  background: #E6F5EC;
  color: #197A4B;
  border: 1px solid #86efac;
}

/* Role boxes (for instruction diagram) */
.diagram-roles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Compare title variants */
.diagram-compare__title--blue {
  background: #dbeafe;
  color: #1e40af;
}

.diagram-compare__title--green {
  background: #E6F5EC;
  color: #197A4B;
}

.diagram-compare__title--amber {
  background: #fef3c7;
  color: #92400e;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .header__title {
    font-size: 15px;
  }

  .nav__link {
    font-size: 11px;
    padding: 8px 4px;
  }

  .page-intro__title {
    font-size: 18px;
  }

  .term__word {
    font-size: 14px;
  }

  .filter__btn {
    font-size: 11px;
    padding: 5px 10px;
  }

  .diagram-box {
    padding: 4px 8px;
    font-size: 10px;
  }

  .diagram-arrow {
    font-size: 11px;
  }

  .diagram-compare {
    gap: 8px;
  }

  .diagram-compare__col {
    min-width: 120px;
  }
}