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

:root {
  color-scheme: light;
  --ink: #182126;
  --paper: #f6f4ee;
  --line: rgba(24, 33, 38, 0.16);
  --accent: #0b7da3;
  --mono: "DM Mono", monospace;
  --sans: "Noto Sans JP", sans-serif;
  --serif: "Noto Serif JP", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.demo-shell { width: min(100% - 32px, 1180px); margin: 0 auto; }
.demo-topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.demo-back { color: inherit; font-size: .82rem; font-weight: 800; text-decoration: none; }
.demo-kicker { font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.demo-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.6); font-size: .72rem; font-weight: 800; }
.demo-pill::before { width: 7px; height: 7px; border-radius: 50%; background: #55b685; content: ""; box-shadow: 0 0 0 4px rgba(85,182,133,.13); }
.prompt-wrap { width: min(100% - 32px, 980px); margin: 72px auto 50px; }
.prompt-panel { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 18px 60px -45px rgba(15,35,45,.45); }
.prompt-panel summary { cursor: pointer; padding: 20px 22px; font-weight: 900; list-style: none; }
.prompt-panel summary::-webkit-details-marker { display: none; }
.prompt-panel summary::after { float: right; content: "＋"; color: var(--accent); }
.prompt-panel[open] summary::after { content: "−"; }
.prompt-inner { padding: 0 22px 22px; border-top: 1px solid var(--line); }
.prompt-inner pre { max-height: 360px; margin: 20px 0; padding: 18px; overflow: auto; border-radius: 10px; background: #172126; color: #eef7f8; font-family: var(--mono); font-size: .78rem; line-height: 1.75; white-space: pre-wrap; }
.prompt-copy { border: 0; border-radius: 999px; padding: 11px 16px; background: var(--accent); color: #fff; font-weight: 900; cursor: pointer; }
.demo-footnote { margin: 14px 0 0; color: #6e777b; font-size: .75rem; line-height: 1.7; }
@media (max-width: 640px) {
  .demo-shell { width: min(100% - 22px, 1180px); }
  .demo-topbar { padding-block: 13px; }
  .demo-kicker { display: none; }
  .prompt-wrap { width: min(100% - 22px, 980px); margin-top: 48px; }
}