.intro { padding: 26px 4px 22px; }
h1 { font-size: 36px; margin: 9px 0; }
.case-file { display: grid; grid-template-columns: 1.05fr 1fr; gap: 25px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; }
.story-sheet { padding-right: 20px; border-right: 1px solid var(--line); }
.story-sheet blockquote { font-size: 22px; line-height: 1.65; font-weight: 700; letter-spacing: -.6px; margin: 11px 0; color: #596b36; }
.story-sheet > p { font-size: 12px; color: #707866; line-height: 1.8; margin: 8px 0; }
.case-facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 13px 0 9px; }
.case-facts span { background: #edf1e2; padding: 6px 9px; border-radius: 5px; font-size: 11px; }
.story-sheet .fact-explanation { font-size: 11px; color: #89907f; }
.evidence-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; }
.evidence-title h2 { font-size: 15px; margin: 0; }
.evidence-title > span { font-size: 10px; color: var(--muted); }
.witness-group { border-left: 3px solid; padding: 7px 11px; margin: 10px 0; border-radius: 0 7px 7px 0; }
.witness-group.informed { border-color: var(--coral); background: #fcf2eb; }
.witness-group.uninformed { border-color: var(--green); background: #edf3ed; }
.witness-group.unknown { border-color: #a2a997; background: #f1f2ec; }
.witness-group > div { display: flex; flex-wrap: wrap; gap: 3px 6px; }
.witness-name { background: transparent; border: none; border-bottom: 1px dotted currentColor; padding: 1px 2px; font-size: 12px; font-weight: 700; }
.witness-name:hover, .witness-name.current { color: var(--purple); background: #e9e2f0; }
.witness-group p { font-size: 11px; margin: 5px 0 0; color: #6b7362; line-height: 1.7; }
.mission-strip { display: flex; align-items: baseline; gap: 14px; padding: 19px 4px; font-size: 12px; line-height: 1.8; }
.mission-strip b { color: var(--purple); white-space: nowrap; }
.mission-strip span { color: #757d6a; }
.steps { display: none; }
.guided-lesson { margin: 14px 22px 0; padding: 15px 18px; border-radius: 10px; background: #f0edf5; display: flex; gap: 15px; align-items: center; }
.guided-lesson > div:first-child { flex: 1; }
.guided-lesson #guide-progress { display: block; color: #8d76a4; font-size: 10px; margin-bottom: 5px; font-weight: 600; }
.guided-lesson strong { display: block; font-size: 13px; color: #655077; }
.guided-lesson p { margin: 6px 0 0; font-size: 11px; line-height: 1.8; color: #81708d; }
.guide-actions { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.guide-actions .small-button { margin: 0; border-color: #cfc3da; background: #faf7fd; color: #75618a; }
.guide-actions .text-button { font-size: 10px; padding-bottom: 0; }
.inspection { margin: 0 0 18px; }
.back-to-map { display: none; }
.inspection > p { font-size: 12px; line-height: 1.9; color: var(--muted); }
.inspection blockquote { border-left: 3px solid #9a86ac; background: #f2eef6; padding: 13px; margin: 0 0 13px; color: #6a557e; font-size: 13px; line-height: 1.85; font-weight: 500; }
.friend-list > span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.friend-list .small-button { padding: 5px 9px; }
.deduction { padding: 14px 0 0; }
.deduction > b { font-size: 12px; color: #66804a; }
.deduction.ruled-out > b { color: #b4745e; }
.deduction p { font-size: 12px; line-height: 1.95; color: #717b65; margin: 7px 0 0; }
.case-panel h2 { font-size: 23px; }
.case-panel .panel-description { font-size: 11px; }
.case-panel .clue-summary { padding: 12px 0; margin-bottom: 18px; }
.clue-summary b { font-size: 20px; }
.clue-summary span { font-size: 9px; }
.path-explanation { margin: 0 22px 16px; border-radius: 8px; padding: 12px 14px; background: #f3eff6; }
.path-explanation b, .path-explanation span, .path-explanation small { display: block; }
.path-explanation b { font-size: 11px; color: #75618a; }
.path-explanation span { font-size: 12px; margin: 6px 0; color: #776385; }
.path-explanation small { font-size: 10px; color: #97909e; line-height: 1.7; }
.graph-edge.reasoning-path { stroke: #9880b0; stroke-width: 3.5; }
.graph-edge.impossible-path { stroke: #c27e64; }
.node text { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.node:focus-visible .node-ring { stroke-width: 5px; }
.legend-extra { font-size: 9px; }
@media(max-width:1050px) {
  .case-file { gap: 20px; padding: 22px; }
  .story-sheet blockquote { font-size: 20px; }
  .case-facts { gap: 6px; }
  .case-facts span { font-size: 10px; padding: 5px 7px; }
  .guided-lesson { margin: 12px 16px 0; flex-direction: column; align-items: stretch; }
  .guide-actions { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media(max-width:800px) {
  .back-to-map { display: inline-flex; font-size: 11px; color: var(--purple); margin-top: 7px; }
  .intro { padding: 24px 0 18px; align-items: flex-start; }
  .intro h1 { font-size: 28px; }
  .intro > .small-button { font-size: 10px; white-space: nowrap; padding: 7px; }
  .case-file { grid-template-columns: 1fr; padding: 21px; gap: 19px; }
  .story-sheet { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 13px; }
  .story-sheet blockquote { font-size: 22px; }
  .story-sheet > p, .witness-group p { font-size: 12px; }
  .witness-name { font-size: 13px; min-height: 29px; padding: 3px 5px; }
  .witness-group { padding: 8px 12px; }
  .evidence-title > span { font-size: 9px; }
  .mission-strip { flex-direction: column; gap: 3px; padding: 16px 1px; }
  .mission-strip span { font-size: 11px; }
  .guided-lesson { padding: 14px; margin: 12px 12px 0; }
  .guided-lesson strong { font-size: 12px; }
  .path-explanation { margin: 0 13px 15px; }
  .inspection blockquote, .deduction p { font-size: 13px; }
  .case-panel .panel-description { font-size: 12px; }
}
@media(max-width:480px) {
  .intro { flex-wrap: wrap; gap: 5px; }
  .intro > .small-button { margin-top: 3px; }
  .intro h1 { font-size: 26px; letter-spacing: -1.3px; }
}