/* Portfolio-specific chrome; existing four-step product styles stay intact. */
.demo-banner { background: #143e3b; color: #fff; padding: 12px 24px; }
.demo-banner-inner { max-width: 1180px; margin: auto; display: flex; gap: 20px; justify-content: space-between; align-items: center; }
.demo-banner a { color: #fff; font-weight: 650; white-space: nowrap; }
.demo-banner p { margin: 2px 0; font-size: 13px; line-height: 1.5; }
.demo-banner strong { font-size: 14px; }
.demo-scenario-box { border: 1px solid #93b6ad; background: #f1f8f5; border-radius: 12px; padding: 22px; margin: 0 0 20px; }
.demo-scenario-box select { margin-top: 8px; width: 100%; max-width: 660px; }
.demo-scenario-box p { margin: 12px 0 0; line-height: 1.7; }
.demo-scenario-kicker { color: #38665d; font-size: 13px; font-weight: 650; }
.public-demo #legacy-profile-grid, .public-demo #slice-profile,
.public-demo .profile-intro, .public-demo .profile-state-guide, .public-demo .profile-submit-help,
.public-demo #grounded-answer-panel { display: none !important; }
.demo-qa { margin-top: 28px; background: #fff; border: 1px solid #cbd9d5; border-radius: 16px; padding: 28px; }
.demo-qa h2 { margin-top: 8px; }
.demo-qa > p { color: #4e6260; line-height: 1.7; }
#demo-qa-samples details { margin-top: 12px; border: 1px solid #d2dfdb; border-radius: 9px; }
#demo-qa-samples summary { padding: 18px; cursor: pointer; font-weight: 650; }
.demo-qa-answer { padding: 0 18px 16px; line-height: 1.85; white-space: pre-line; }
.demo-sample-context { font-size: 13px; color: #5a6c65; }
.demo-report-label { border-left: 4px solid #2b7770; background: #eaf4ef; padding: 12px 16px; font-size: 14px; line-height: 1.6; }
.public-demo .profile-group-state { display: none; }
@media(max-width: 600px) {
  .demo-banner { padding: 12px 16px; }
  .demo-banner-inner { align-items: flex-start; gap: 8px; flex-direction: column; }
  .demo-scenario-box, .demo-qa { padding: 18px; }
  .demo-banner strong { font-size: 13px; }
}

/* Japanese portfolio typography; no remote font requests. */
.public-demo { font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.75; }
.public-demo button, .public-demo select, .public-demo input { font-family: inherit; }
.public-demo button { line-height: 1.5; word-break: normal; overflow-wrap: anywhere; }
.public-demo h1, .public-demo h2, .public-demo h3 { line-height: 1.5; }
.public-demo .relation-node { overflow-wrap: anywhere; }
.public-demo #drawer-close, .public-demo #reference-close { flex-shrink: 0; white-space: nowrap; }