/* Claude Tutorials JP - Official Style */
:root {
  /* web-fleet #309: permissions ページが style="color:var(--danger)" 等で
     参照しているのに、--danger / --warning / --success は一度も定義されていなかった。
     無効値のため color は継承値に落ち、DENY/ASK/ALLOW の3色分けが全滅していた
     （実測: 3つとも #1a1a1a で完全に同一色）。 */
  --danger: #B91C1C;
  --warning: #B45309;
  --success: #15803D;

  --color-bg: #FAFAF8;
  --color-surface: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-secondary: #6B6B6B;
  --color-text-tertiary: #999999;
  --color-border: #E8E5E0;
  --color-accent: #B45309; /* 旧 #D97706 は白地3.19でAA未達。hover色に揃えた（5.02） */
  --color-accent-bg: #FEF3C7;
  --color-link: #1A1A1A;
  --color-link-hover: #D97706;
  --color-tag-bg: #F3F2EF;
  --color-tag-text: #6B6B6B;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --max-width: 1200px;
  --max-width-article: 760px;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --transition: 0.2s ease;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-link-hover);
}

img {
  max-width: 100%;
  height: auto;
}

/* Header */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.site-logo:hover {
  color: var(--color-text);
}

.logo-icon {
  width: 28px;
  height: 28px;
  background: var(--color-accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 700;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.header-nav a:hover {
  color: var(--color-text);
}

.badge-unofficial {
  font-size: 0.7rem;
  background: var(--color-accent-bg);
  color: var(--color-accent);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Hero */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 24px 48px;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.hero p {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  max-width: 640px;
  line-height: 1.6;
}

/* Filter */
.filter-bar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--color-text);
  color: var(--color-surface);
  border-color: var(--color-text);
}

/* Search box */
.search-bar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 20px;
}

.search-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  transition: all var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}

.search-empty {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
  text-align: center;
  color: var(--color-text-secondary);
}

/* Tutorial Grid */
.tutorials-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

.tutorial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.tutorial-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #ccc;
  transform: translateY(-2px);
  color: inherit;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.card-tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-tag-text);
  background: var(--color-tag-bg);
  padding: 3px 10px;
  border-radius: 12px;
}

.card-tag.product {
  background: #E8F0FE;
  color: #1967D2;
}

.card-time {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-left: auto;
}

.tutorial-card h2 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
}

.tutorial-card p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  flex: 1;
}

.card-arrow {
  margin-top: 16px;
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition);
}

.tutorial-card:hover .card-arrow {
  color: var(--color-accent);
}

/* Article Page */
.article-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px 0;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  margin-bottom: 24px;
}

.breadcrumb a {
  color: var(--color-text-secondary);
}

.breadcrumb a:hover {
  color: var(--color-accent);
}

.article-header h1 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: var(--max-width-article);
  margin-bottom: 16px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.article-content {
  max-width: var(--max-width-article);
  margin: 0 auto;
  padding: 0 24px 80px;
}

.article-content h2 {
  font-size: 1.5rem;
  font-weight: 650;
  margin: 48px 0 16px;
  letter-spacing: -0.01em;
}

.article-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 32px 0 12px;
}

.article-content h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 24px 0 8px;
}

.article-content p {
  margin-bottom: 16px;
  font-size: 1rem;
  line-height: 1.8;
}

.article-content ul,
.article-content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.article-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.article-content blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 16px 20px;
  margin: 24px 0;
  background: var(--color-tag-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}

.article-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-tag-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.article-content pre {
  background: #1E1E1E;
  color: #D4D4D4;
  padding: 20px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 24px 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

.article-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.9rem;
}

.article-content th,
.article-content td {
  border: 1px solid var(--color-border);
  padding: 12px 16px;
  text-align: left;
}

.article-content th {
  background: var(--color-tag-bg);
  font-weight: 600;
}

.tip-box {
  border: 1px solid #BEE3F8;
  background: #EBF8FF;
  border-radius: var(--radius);
  padding: 20px;
  margin: 24px 0;
}

.tip-box .tip-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #2B6CB0;
}

.warning-box {
  border: 1px solid #FEEBC8;
  background: #FFFBEB;
  border-radius: var(--radius);
  padding: 20px;
  margin: 24px 0;
}

.warning-box .warning-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #C05621;
}

/* Related Articles */
.related-section {
  max-width: var(--max-width-article);
  margin: 0 auto;
  padding: 0 24px 80px;
  border-top: 1px solid var(--color-border);
  padding-top: 40px;
}

.related-section h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.related-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition);
}

.related-list a:hover {
  background: var(--color-tag-bg);
  border-color: #ccc;
}

.related-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.related-actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all var(--transition);
}

.related-actions a:hover {
  background: var(--color-text);
  color: var(--color-surface);
  border-color: var(--color-text);
}

/* Footer */
.site-footer {
  background: var(--color-text);
  color: var(--color-surface);
  padding: 48px 24px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-brand {
  font-size: 0.95rem;
  color: #999;
  max-width: 360px;
  line-height: 1.6;
}

.footer-brand strong {
  color: var(--color-surface);
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
}

.footer-col h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  margin-bottom: 12px;
  font-weight: 600;
}

.footer-col a {
  display: block;
  font-size: 0.875rem;
  color: #CCC;
  margin-bottom: 8px;
}

.footer-col a:hover {
  color: var(--color-surface);
}

/* Footer links inside plain <p> would otherwise inherit the global dark
   link color (--color-link) over the dark footer background (invisible). */
.site-footer a {
  color: #ccc;
}

.site-footer a:hover {
  color: var(--color-surface);
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid #333;
  font-size: 0.8rem;
  color: #666;
  text-align: center;
}

/* Flow Diagram */
.flow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 32px 0;
  padding: 24px 16px;
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
  border-radius: 12px;
  border: 1px solid #DBEAFE;
  overflow-x: auto;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 110px;
  flex-shrink: 0;
}

.flow-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 3px solid white;
}

.flow-icon.blue { background: linear-gradient(135deg, #3B82F6, #2563EB); color: white; }
.flow-icon.green { background: linear-gradient(135deg, #10B981, #059669); color: white; }
.flow-icon.purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); color: white; }
.flow-icon.orange { background: linear-gradient(135deg, #F59E0B, #D97706); color: white; }
.flow-icon.red { background: linear-gradient(135deg, #EF4444, #DC2626); color: white; }
.flow-icon.teal { background: linear-gradient(135deg, #14B8A6, #0D9488); color: white; }
.flow-icon.pink { background: linear-gradient(135deg, #EC4899, #DB2777); color: white; }

.flow-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.flow-sublabel {
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.flow-arrow {
  font-size: 1.5rem;
  color: #93C5FD;
  flex-shrink: 0;
  margin: 0 4px;
  padding-bottom: 24px;
}

/* Vertical Flow */
.flow-vertical {
  flex-direction: column;
  gap: 0;
}

.flow-vertical .flow-arrow {
  transform: rotate(90deg);
  margin: 4px 0;
  padding-bottom: 0;
}

/* Feature Cards Grid */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.feature-card.card-blue::before { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.feature-card.card-green::before { background: linear-gradient(90deg, #10B981, #34D399); }
.feature-card.card-purple::before { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
.feature-card.card-orange::before { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.feature-card.card-red::before { background: linear-gradient(90deg, #EF4444, #F87171); }
.feature-card.card-teal::before { background: linear-gradient(90deg, #14B8A6, #2DD4BF); }
.feature-card.card-pink::before { background: linear-gradient(90deg, #EC4899, #F472B6); }

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.feature-card-icon {
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.feature-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
  margin-top: 0;
}

.feature-card p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Comparison Blocks */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}

.compare-block {
  border-radius: 10px;
  padding: 20px;
  border: 1px solid;
}

.compare-block.block-good {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.compare-block.block-caution {
  background: #FFFBEB;
  border-color: #FDE68A;
}

.compare-block.block-info {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.compare-block.block-neutral {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

.compare-block h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.compare-block ul {
  margin: 0;
  padding-left: 18px;
}

.compare-block li {
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 4px;
}

/* Info/Tip/Warning/Note Boxes */
.info-box {
  border-radius: 10px;
  padding: 20px 24px;
  margin: 24px 0;
  border-left: 4px solid;
  display: flex;
  gap: 14px;
}

.info-box .info-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.info-box .info-content {
  flex: 1;
}

.info-box .info-content strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.info-box .info-content p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.info-box.box-tip {
  background: #EFF6FF;
  border-color: #3B82F6;
}

.info-box.box-tip .info-content strong { color: #1D4ED8; }

.info-box.box-warning {
  background: #FFFBEB;
  border-color: #F59E0B;
}

.info-box.box-warning .info-content strong { color: #B45309; }

.info-box.box-success {
  background: #F0FDF4;
  border-color: #10B981;
}

.info-box.box-success .info-content strong { color: #047857; }

.info-box.box-note {
  background: #FAF5FF;
  border-color: #8B5CF6;
}

.info-box.box-note .info-content strong { color: #6D28D9; }

/* Model Cards (for model comparison) */
.model-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.model-card {
  border-radius: 12px;
  padding: 24px;
  border: 2px solid;
  text-align: center;
  position: relative;
}

.model-card.model-haiku {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border-color: #6EE7B7;
}

.model-card.model-sonnet {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border-color: #93C5FD;
}

.model-card.model-opus {
  background: linear-gradient(135deg, #FAF5FF 0%, #EDE9FE 100%);
  border-color: #C4B5FD;
}

.model-card .model-emoji {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.model-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.model-card .model-version {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-bottom: 10px;
}

.model-card .model-desc {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.model-card .model-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.model-haiku .model-badge {
  background: #D1FAE5;
  color: #047857;
}

.model-sonnet .model-badge {
  background: #DBEAFE;
  color: #1D4ED8;
}

.model-opus .model-badge {
  background: #EDE9FE;
  color: #6D28D9;
}

/* Stepped Process */
.step-list {
  margin: 24px 0;
  padding: 0;
  list-style: none;
  counter-reset: step-counter;
}

.step-item {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
}

.step-item::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(59,130,246,0.3);
}

.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: -16px;
  width: 2px;
  background: linear-gradient(to bottom, #93C5FD, #DBEAFE);
}

.step-content h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 4px 0 6px 0;
}

.step-content p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Architecture Diagram */
.arch-diagram {
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 32px 24px;
  margin: 32px 0;
  text-align: center;
}

.arch-diagram .arch-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.arch-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.arch-box {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid;
  min-width: 120px;
}

.arch-box.box-primary {
  background: #EFF6FF;
  border-color: #3B82F6;
  color: #1D4ED8;
}

.arch-box.box-secondary {
  background: #F0FDF4;
  border-color: #10B981;
  color: #047857;
}

.arch-box.box-tertiary {
  background: #FAF5FF;
  border-color: #8B5CF6;
  color: #6D28D9;
}

.arch-box.box-accent {
  background: #FFFBEB;
  border-color: #F59E0B;
  color: #B45309;
}

.arch-connector {
  font-size: 1.2rem;
  color: #94A3B8;
  margin: 4px 0;
}

/* Stat Highlights */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.stat-item {
  text-align: center;
  padding: 20px 12px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-number.text-blue { color: #2563EB; }
.stat-number.text-green { color: #059669; }
.stat-number.text-purple { color: #7C3AED; }
.stat-number.text-orange { color: #D97706; }

.stat-label {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Colorful Table */
.article-content table.styled-table {
  border: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.article-content table.styled-table th {
  background: linear-gradient(135deg, #1E293B, #334155);
  color: white;
  border: none;
  font-size: 0.85rem;
  padding: 14px 16px;
}

.article-content table.styled-table td {
  border: none;
  border-bottom: 1px solid #F1F5F9;
  padding: 14px 16px;
  font-size: 0.88rem;
}

.article-content table.styled-table tr:nth-child(even) {
  background: #F8FAFC;
}

.article-content table.styled-table tr:hover {
  background: #EFF6FF;
}

/* Badge Inline */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-blue { background: #DBEAFE; color: #1D4ED8; }
.badge-green { background: #D1FAE5; color: #047857; }
.badge-purple { background: #EDE9FE; color: #6D28D9; }
.badge-orange { background: #FEF3C7; color: #B45309; }
.badge-red { background: #FEE2E2; color: #B91C1C; }

/* Responsive adjustments for new components */
@media (max-width: 768px) {
  .model-cards {
    grid-template-columns: 1fr;
  }

  .compare-grid {
    grid-template-columns: 1fr;
  }

  .flow-diagram {
    justify-content: flex-start;
    padding: 16px 12px;
  }

  .feature-cards {
    grid-template-columns: 1fr;
  }

  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .arch-row {
    flex-direction: column;
    align-items: center;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.75rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .tutorials-grid {
    grid-template-columns: 1fr;
  }

  .article-header h1 {
    font-size: 1.65rem;
  }

  .header-nav {
    gap: 12px;
  }

  .footer-links {
    gap: 24px;
  }

  .footer-inner {
    flex-direction: column;
  }

  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: 0 16px;
  }

  .hero {
    padding: 40px 16px 32px;
  }

  .tutorials-grid {
    padding: 0 16px 60px;
  }

  .article-content {
    padding: 0 16px 60px;
  }

  .article-header {
    padding: 32px 16px 0;
  }
}

/* ===== Table of Contents (目次) ===== */
.toc {
  margin: 32px 0 8px;
  padding: 20px 24px;
  background: var(--color-tag-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.toc-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}
.toc ol {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.toc ol li {
  font-size: 0.92rem;
  line-height: 1.5;
}
.toc ol li a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}
.toc ol li a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
html { scroll-behavior: smooth; }
.article-content h2[id] { scroll-margin-top: 80px; }

/* ===== Prev / Next article navigation ===== */
.article-nav {
  max-width: var(--max-width-article);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
.article-nav a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
  background: var(--color-surface);
  min-width: 0;
}
.article-nav a:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
.article-nav .nav-next { text-align: right; }
.article-nav .nav-dir {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent);
}
.article-nav .nav-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-nav .nav-empty {
  flex: 1 1 0;
  border: none;
  background: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  .article-nav { flex-direction: column; }
  .article-nav .nav-next { text-align: left; }
  .article-nav .nav-empty { display: none; }
}
@media (max-width: 480px) {
  .toc { padding: 16px; margin-left: 0; margin-right: 0; }
  .article-nav { padding: 0 16px; }
}

/* =====================================================================
   Docs layout (homepage + section pages)
   Two-column: sticky left sidebar + main content. On the homepage and
   every /section/ page the markup is:
     header.site-header
     .page-wrapper > aside.sidebar + main.main-content
   The whole vocabulary below (page-wrapper/sidebar/terminal/cards/
   diagram/callout/code-block/page-nav) previously had NO CSS and rendered
   unstyled. Added here to match the design system (CSS vars above).
   ===================================================================== */

/* NOTE: a duplicate `.logo` rule used to live here for the hub pages, which
   shipped a second header shell (`a.logo`) alongside the article shell
   (`a.site-logo`). #123 unified every page onto `.site-logo` (defined once,
   above), so the duplicate was removed. Do not reintroduce a second logo
   class — see test/shell.test.js, which fails if the shells diverge again. */

/* Hamburger — hidden on desktop, shown on mobile */
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 1.2rem;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.menu-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Two-column shell */
.page-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0 24px;
}

/* Sidebar (left rail) */
.sidebar {
  flex: 0 0 240px;
  width: 240px;
  position: sticky;
  top: 60px; /* below the sticky header */
  align-self: flex-start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 28px 4px 40px;
}

.sidebar-section { margin-bottom: 26px; }

.sidebar-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
  padding: 0 12px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.4;
  transition: background var(--transition), color var(--transition);
}
.sidebar-link .icon { font-size: 0.95rem; flex-shrink: 0; }
.sidebar-link:hover {
  background: var(--color-tag-bg);
  color: var(--color-text);
}
.sidebar-link.active {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  font-weight: 600;
}

/* Main content column */
.main-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 40px;
}

/* On section pages the content lives in .article */
.article { max-width: var(--max-width-article); }
.article > h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 8px 0 16px;
}
.article h2 {
  font-size: 1.5rem;
  font-weight: 650;
  margin: 44px 0 14px;
  letter-spacing: -0.01em;
}
.article h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 32px 0 12px;
}
.article h4 { font-size: 1.02rem; font-weight: 600; margin: 20px 0 8px; }
.article p { margin-bottom: 16px; font-size: 1rem; line-height: 1.8; }
.article ul, .article ol { margin: 0 0 16px; padding-left: 24px; }
.article li { margin-bottom: 8px; line-height: 1.7; }
.article code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-tag-bg);
  padding: 2px 6px;
  border-radius: 4px;
}
.article pre code { background: none; padding: 0; color: inherit; }

.section-intro {
  font-size: 1.08rem !important;
  color: var(--color-text-secondary);
  line-height: 1.7 !important;
}

/* Hero (homepage) — extras not covered by the base .hero rule */
.main-content .hero { padding: 40px 0 32px; max-width: none; }
.hero-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  background: var(--color-accent-bg);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.btn-primary:hover { background: #b45309; border-color: #b45309; color: #fff; }
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Terminal mock */
.terminal {
  background: #1E1E1E;
  border-radius: 10px;
  overflow: hidden;
  margin: 32px 0;
  box-shadow: var(--shadow-md);
  max-width: 100%;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #2D2D2D;
  border-bottom: 1px solid #3a3a3a;
}
.term-dots { display: flex; gap: 6px; }
.term-dot { width: 12px; height: 12px; border-radius: 50%; }
.term-dot.red { background: #FF5F56; }
.term-dot.yellow { background: #FFBD2E; }
.term-dot.green { background: #27C93F; }
.term-title { color: #9a9a9a; font-size: 0.78rem; font-family: var(--font-mono); }
.term-body {
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.9;
  color: #D4D4D4;
  overflow-x: auto;
}
.term-line { display: flex; align-items: baseline; gap: 8px; white-space: pre-wrap; }
.term-line[data-type="output"] .term-text { color: #9a9a9a; }
.term-line[data-type="success"] .term-text { color: #27C93F; }
.term-prompt { color: #27C93F; font-weight: 700; flex-shrink: 0; }
.term-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: #D4D4D4;
  vertical-align: middle;
  animation: term-blink 1s step-end infinite;
}
@keyframes term-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Homepage section headings */
.home-h2 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 56px 0 8px;
}
.home-sub {
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  font-size: 1rem;
}

/* Level cards */
.level-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.level-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
}
.level-card h3 { font-size: 1.15rem; font-weight: 650; margin: 12px 0 8px; }
.level-card p { color: var(--color-text-secondary); font-size: 0.92rem; line-height: 1.6; margin-bottom: 14px; }
.level-card ul { list-style: none; padding: 0; margin: 0; }
.level-card li { margin-bottom: 8px; }
.level-card li a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.level-card li a::before { content: "›"; color: var(--color-accent); font-weight: 700; }
.level-card li a:hover { color: var(--color-accent); }
.level-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 12px;
}
.level-tag.beginner { background: #D1FAE5; color: #047857; }
.level-tag.intermediate { background: #DBEAFE; color: #1D4ED8; }
.level-tag.advanced { background: #EDE9FE; color: #6D28D9; }

/* Topic card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: all var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: #ccc;
  transform: translateY(-2px);
  color: inherit;
}
.card h3 { font-size: 1.1rem; font-weight: 650; margin: 14px 0 8px; }
.card p { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.6; flex: 1; margin: 0; }
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.card-icon.blue { background: #E8F0FE; }
.card-icon.purple { background: #F3E8FF; }
.card-icon.green { background: #DCFCE7; }
.card-icon.orange { background: #FEF3C7; }
.card-icon.red { background: #FEE2E2; }
.card-link {
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
}

/* Share row + button (also used on section pages) */
.share-row { margin: 40px 0 8px; }
.share-x-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--transition);
}
.share-x-btn svg { width: 16px; height: 16px; }
.share-x-btn:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); }

/* Resources row */
.resources-row {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}
.resources-row a { margin-left: 14px; font-weight: 500; }

/* Table wrapper (horizontal scroll on narrow screens) */
.table-wrap { overflow-x: auto; margin: 24px 0; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table-wrap th, .table-wrap td {
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  text-align: left;
}
.table-wrap th { background: var(--color-tag-bg); font-weight: 600; }

/* Diagram flow (section pages) */
.diagram {
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
  border: 1px solid #DBEAFE;
  border-radius: 12px;
  padding: 28px 20px 20px;
  margin: 28px 0;
  text-align: center;
}
.diagram-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.diagram-box {
  position: relative;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #EFF6FF;
  border: 2px solid #3B82F6;
  color: #1D4ED8;
  cursor: default;
}
.diagram-box.accent { background: #FFFBEB; border-color: #F59E0B; color: #B45309; }
.diagram-box.purple { background: #FAF5FF; border-color: #8B5CF6; color: #6D28D9; }
.diagram-box[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: var(--shadow-md);
}
.diagram-arrow { color: #93C5FD; font-size: 1.2rem; flex-shrink: 0; }
.diagram-caption {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}

/* Code block with header + copy button */
.code-block {
  margin: 20px 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #2d2d2d;
}
.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #2D2D2D;
  color: #9a9a9a;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.copy-btn {
  background: #3a3a3a;
  color: #ddd;
  border: none;
  border-radius: 5px;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--transition);
}
.copy-btn:hover { background: #4a4a4a; }
.code-block pre {
  margin: 0;
  background: #1E1E1E;
  color: #D4D4D4;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}
.code-block pre code { font-family: var(--font-mono); background: none; padding: 0; color: inherit; }

/* Callouts */
.callout {
  border-radius: 10px;
  padding: 16px 20px;
  margin: 24px 0;
  border-left: 4px solid;
}
.callout .callout-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.callout p { margin: 0; font-size: 0.92rem; line-height: 1.65; }
.callout.info { background: #EFF6FF; border-color: #3B82F6; }
.callout.info .callout-title { color: #1D4ED8; }
.callout.warning { background: #FFFBEB; border-color: #F59E0B; }
.callout.warning .callout-title { color: #B45309; }

/* Steps (numbered list of blocks) */
.steps { counter-reset: step; margin: 24px 0; }
.step {
  position: relative;
  padding: 14px 18px 14px 52px;
  margin-bottom: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h4 { font-size: 0.98rem; font-weight: 650; margin: 0 0 4px; }
.step p { margin: 0; font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.6; }

/* Prev/next page nav (section pages) */
.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.page-nav a {
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: all var(--transition);
  min-width: 0;
}
.page-nav a:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.page-nav .next { text-align: right; margin-left: auto; }
.page-nav .nav-label { font-size: 0.75rem; font-weight: 600; color: var(--color-accent); }
.page-nav .nav-title { font-size: 0.92rem; font-weight: 600; color: var(--color-text); }

/* ---- Mobile: sidebar becomes an off-canvas drawer ---- */
@media (max-width: 899px) {
  .menu-toggle { display: inline-flex; }
  /* On pages with a hamburger drawer the header links are redundant and
     crowd the toggle on narrow screens — hide them there. Tutorial pages
     have no .menu-toggle, so their header nav is preserved. */
  .header-inner:has(.menu-toggle) .header-nav { display: none; }

  /* Pages without a drawer (articles / 404) keep their header nav, and since
     #123 that nav carries all 5 section links. Without the rules below the
     flex row squeezes each link down to one character per line, turning the
     60px bar into a wall of vertical text. Keep the logo intact and let the
     nav scroll horizontally inside its own track instead. */
  .site-logo {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 1rem;
    gap: 8px;
  }
  .header-nav {
    min-width: 0;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { white-space: nowrap; }

  /* Below ~640px the wordmark alone eats most of the bar, leaving the visible
     nav a single truncated link. Drop the wordmark on the pages that actually
     show nav — the mark and the 非公式 badge still brand the header, and they
     are identical on every page, so the shells do not diverge. Hub pages hide
     their nav behind the drawer and have the room, so they keep the wordmark. */
  @media (max-width: 640px) {
    .header-inner:not(:has(.menu-toggle)) .logo-text { display: none; }
  }

  .page-wrapper { display: block; padding: 0 16px; }
  .main-content { padding-top: 8px; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 82vw;
    max-height: none;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    padding: 20px 12px 40px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  body.nav-open .sidebar { transform: translateX(0); }

  /* backdrop scrim */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 150;
  }
  body.nav-open { overflow: hidden; }

  .main-content .hero { padding: 28px 0 24px; }
  .hero h1 { font-size: 1.9rem; }
  .diagram-flow { flex-direction: column; }
  .diagram-arrow { transform: rotate(90deg); }
  .page-nav { flex-direction: column; }
  .page-nav .next { text-align: left; margin-left: 0; }
}