/* ブログ記事の「その場で試す」体験（ターミナル・理解度チェック）。 */
:root {
  --bx-accent: #0818ff;
  --bx-accent-soft: #eff4ff;
  --bx-ink: #0f172a;
  --bx-muted: #475569;
  --bx-line: #e2e8f0;
  --bx-ok: #047857;
  --bx-ok-soft: #ecfdf5;
  --bx-ng: #b91c1c;
  --bx-ng-soft: #fef2f2;
  --bx-term-bar: #161b22;
}

/* コードブロックの下のボタン */
.blog-tryit { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.blog-tryit-button {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 7px 12px; border: 1px solid var(--bx-accent); border-radius: 8px;
  background: #fff; color: var(--bx-accent); font-size: 13px; font-weight: 700; line-height: 1.4;
  cursor: pointer; text-align: left; transition: background .15s, color .15s;
}
.blog-tryit-button:hover, .blog-tryit-button:focus-visible { background: var(--bx-accent); color: #fff; }
.blog-tryit-button code {
  background: none; color: inherit; padding: 0; font-size: 12px; font-weight: 500; overflow-wrap: anywhere;
}

/* 画面下に固定するターミナル。上端をドラッグして高さを変える */
.blog-terminal {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; flex-direction: column; height: 33vh; min-height: 180px; max-height: 85vh;
  background: #000; box-shadow: 0 -8px 30px rgba(15, 23, 42, .35);
}
.blog-terminal[hidden] { display: none; }
.blog-terminal-resize {
  flex: none; height: 14px; cursor: ns-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bx-term-bar); border-bottom: 1px solid #30363d;
}
.blog-terminal-resize::before { content: ''; width: 48px; height: 4px; border-radius: 4px; background: #8b949e; }
.blog-terminal-resize:hover::before, .blog-terminal-resize:focus-visible::before { background: #fff; }
.blog-terminal-resize:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.blog-terminal.is-resizing { user-select: none; }
.blog-terminal-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--bx-term-bar); color: #e6edf3; font-size: 12px;
}
.blog-terminal-label { min-width: 0; flex: 1; line-height: 1.5; }
.blog-terminal-label strong { display: block; font-size: 13px; }
.blog-terminal-button {
  flex: none; padding: 6px 12px; border: 1px solid #30363d; border-radius: 6px;
  background: #21262d; color: #e6edf3; font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.blog-terminal-button:hover { background: #30363d; }
.blog-terminal-bar a.blog-terminal-button { text-decoration: none; text-align: center; }
.blog-terminal-button.is-primary { border-color: var(--bx-accent); background: var(--bx-accent); color: #fff; }
.blog-terminal-button.is-primary:hover { background: #0000cc; }
.blog-terminal-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #000; }
.blog-terminal-error { padding: 16px; color: #e6edf3; font-size: 13px; line-height: 1.7; }

/* 理解度チェック */
.blog-quiz {
  margin-top: 40px; padding: 28px; border: 1px solid var(--bx-line); border-radius: 16px;
  background: #fff; color: var(--bx-ink);
}
.blog-quiz-eyebrow { margin: 0; color: var(--bx-accent); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.blog-quiz-title { margin: 6px 0 0; font-size: 22px; font-weight: 900; line-height: 1.4; }
.blog-quiz-lead { margin: 8px 0 0; color: var(--bx-muted); font-size: 14px; line-height: 1.7; }
.blog-quiz-list { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: bx-q; }
.blog-quiz-question { counter-increment: bx-q; padding: 20px 0; border-top: 1px solid var(--bx-line); }
.blog-quiz-prompt { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.7; overflow-wrap: anywhere; }
.blog-quiz-prompt::before { content: "問" counter(bx-q) "　"; color: var(--bx-accent); }
.blog-quiz-choices { display: grid; gap: 8px; margin-top: 12px; }
.blog-quiz-choice {
  width: 100%; padding: 11px 14px; border: 1px solid #cbd5e1; border-radius: 10px;
  background: #fff; color: var(--bx-ink); font-size: 14px; line-height: 1.6; text-align: left;
  cursor: pointer; overflow-wrap: anywhere; transition: border-color .15s, background .15s;
}
.blog-quiz-choice:hover:not(:disabled) { border-color: var(--bx-accent); background: var(--bx-accent-soft); }
.blog-quiz-choice:disabled { cursor: default; color: var(--bx-muted); }
.blog-quiz-choice.is-correct { border-color: var(--bx-ok); background: var(--bx-ok-soft); color: var(--bx-ok); font-weight: 700; }
.blog-quiz-choice.is-wrong { border-color: var(--bx-ng); background: var(--bx-ng-soft); color: var(--bx-ng); font-weight: 700; }
.blog-quiz-feedback { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f8fafc; font-size: 14px; line-height: 1.7; }
.blog-quiz-verdict { margin: 0; font-weight: 700; }
.blog-quiz-verdict.is-correct { color: var(--bx-ok); }
.blog-quiz-verdict.is-wrong { color: var(--bx-ng); }
.blog-quiz-explanation { margin: 4px 0 0; color: var(--bx-muted); overflow-wrap: anywhere; }
.blog-quiz-result { padding-top: 20px; border-top: 1px solid var(--bx-line); }
.blog-quiz-score { margin: 0; font-size: 18px; font-weight: 900; }
.blog-quiz-review-title { margin: 10px 0 0; color: var(--bx-muted); font-size: 14px; line-height: 1.7; }
.blog-quiz-lessons { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.blog-quiz-lesson {
  display: block; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--bx-accent); border-radius: 10px;
  background: var(--bx-accent-soft); color: var(--bx-accent); text-decoration: none;
}
.blog-quiz-lessons .blog-quiz-lesson { margin-top: 0; }
.blog-quiz-lesson:hover { background: #dfe8ff; }
.blog-quiz-lesson-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; }
.blog-quiz-lesson-meta { display: block; margin-top: 2px; color: var(--bx-muted); font-size: 12px; line-height: 1.5; }
.blog-quiz-next { margin-top: 20px; padding: 20px; border: 1px solid #c7d2fe; border-radius: 12px; background: var(--bx-accent-soft); }
.blog-quiz-next-heading { margin: 0; color: var(--bx-ink); font-size: 17px; font-weight: 800; line-height: 1.5; }
.blog-quiz-next-description { margin: 8px 0 0; color: var(--bx-muted); font-size: 14px; line-height: 1.7; }
.blog-quiz-next-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 16px;
  border-radius: 8px; background: var(--bx-accent); color: #fff; font-size: 14px;
  font-weight: 700; line-height: 1.5; text-decoration: none;
}
.blog-quiz-next-link:hover, .blog-quiz-next-link:focus-visible { background: #0000cc; }

@media (max-width: 640px) {
  .blog-quiz { padding: 20px 16px; }
  .blog-terminal-note { display: none; }
  .blog-terminal-bar { flex-wrap: wrap; }
  .blog-terminal-label { flex-basis: 100%; }
}