.teaching-observation{position:fixed;z-index:42;width:min(302px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:14px 34px 12px 15px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--venous-color);border-radius:12px;box-shadow:0 8px 28px #1c344218;animation:observation-in .18s ease-out;pointer-events:auto}
.teaching-observation[hidden]{display:none}
.teaching-observation>small{display:block;font-size:10px;line-height:1.35;color:var(--soft);margin-bottom:5px}
.teaching-observation>strong{display:block;font-size:13px;line-height:1.4;font-weight:650}
.teaching-observation>p{font-size:12px;line-height:1.55;margin:7px 0 8px}
.teaching-observation>p[hidden],.teaching-observation button[hidden]{display:none}
.teaching-observation .teaching-observation-detail{font-size:11px;color:var(--soft);padding-top:8px;border-top:1px solid var(--line)}
.teaching-observation>div{display:flex;gap:16px;flex-wrap:wrap}
.teaching-observation>div button{font:inherit;font-size:11px;line-height:1.4;border:0;background:none;color:var(--venous-color);padding:4px 0;cursor:pointer}
.teaching-observation .teaching-observation-close{position:absolute;right:2px;top:2px;width:32px;height:32px;font:inherit;font-size:20px;border:0;background:none;color:var(--soft);padding:0;cursor:pointer}
.teaching-observation button:focus-visible{outline:2px solid var(--venous-color);outline-offset:3px}
.physiology-focus{outline:2px solid color-mix(in srgb,var(--venous-color) 55%,transparent);outline-offset:5px;border-radius:4px}
@keyframes observation-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.teaching-observation{width:min(292px,calc(100vw - 24px));padding-top:12px}.teaching-observation .teaching-observation-close{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.teaching-observation{animation:none}}