.journal-diagram{margin:2rem 0;padding:clamp(16px,3vw,28px);border:1px solid #d6d0c5;border-radius:12px;background:#f3f0e9;color:#34342f;overflow:hidden}
.journal-diagram .jd-title{font-size:1.1rem;font-weight:600;line-height:1.5;margin:0 0 16px;color:#34342f}
.jd-switch{display:flex;gap:8px;flex-wrap:wrap}.journal-diagram button{font:inherit;font-size:.85rem;line-height:1.45;border:1px solid #b4ad9f;background:transparent;color:#47483f;padding:9px 12px;border-radius:5px;cursor:pointer;min-height:44px}.journal-diagram button[aria-pressed=true]{background:#343a33;color:#fff;border-color:#343a33}.journal-diagram button:focus-visible{outline:2px solid #68543e;outline-offset:3px}
.jd-drawing{display:block;width:100%;max-width:520px;height:auto;margin:16px auto 8px}.jd-sofa{fill:#ddd8cb;stroke:#55594c;stroke-width:2}.jd-sofa path{fill:none}.jd-camera path{stroke:#777c6b;stroke-width:1;opacity:.36}.jd-camera circle{fill:#555e4d;stroke:#f3f0e9;stroke-width:2}.jd-side{opacity:.1;transition:opacity .8s ease}.jd-highlight{fill:none;stroke:#aa7352;stroke-width:4;stroke-linecap:round;stroke-dasharray:4 7;opacity:.8;transition:opacity .8s ease}[data-state="1"] .jd-side{opacity:1}[data-state="1"] .jd-highlight{opacity:0}
.jd-room{fill:#e3dfd4;stroke:#52584b;stroke-width:2}.jd-observation{transform:translate(22px,14px) rotate(5deg);transform-origin:210px 140px;transition:transform 1.1s ease;fill:none;stroke:#a27252;stroke-width:2;stroke-dasharray:5 5}.jd-observation circle{fill:#a27252;stroke:none}[data-state="1"] .jd-observation{transform:translate(0,0) rotate(0deg)}
.journal-diagram .jd-legend,.journal-diagram .jd-note{font-size:.78rem;line-height:1.6;color:#6d6d61;margin:8px 0}.journal-diagram .jd-explanation p{font-size:.94rem;line-height:1.85;margin:14px 0}.jd-explanation{min-height:7em}.journal-diagram .jd-play{margin:0 0 8px}.journal-diagram [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.journal-diagram *{transition:none!important}}