/* The particle study is isolated from the existing academic layout and Pearlfin. */
.particle-study { position: relative; isolation: isolate; margin: 0 0 36px; min-height: 390px; background: #fbf9f3; overflow: hidden; overflow: clip; border-block: 1px solid #e8e8df; }
.particle-study::before { content: ''; position: absolute; width: 230px; height: 230px; right: -100px; bottom: -170px; border-radius: 50%; background: #c8e0e8; filter: blur(35px); opacity: .65; z-index: -1; }
.fish-intro { position: absolute; left: 28px; top: 28px; max-width: 210px; z-index: 1; }
.fish-index { color: #6d787c; font: 9px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; }
.fish-intro h2 { font: 27px/1.25 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; margin-bottom: 12px; color: #34464d; }
.fish-intro h2 span { color: #2489bd; }
.fish-intro > p:last-child { font-size: 11px; line-height: 1.65; color: #6f797a; max-width: 165px; }
.fish-art { position: relative; width: 64%; height: 390px; margin-left: 30%; }
.fish-art canvas, .fish-static, .fish-annotations { position: absolute; inset: 0; width: 100%; height: 100%; }
.fish-art canvas { opacity: 0; }
.particle-study[data-ready='true'] .fish-art canvas { opacity: 1; }
.particle-study[data-ready='true'] .fish-static { visibility: hidden; }
.fish-static { object-fit: contain; }
.fish-annotations { overflow: visible; pointer-events: none; }
.fish-annotations path { fill: none; stroke: #6b9fb9; stroke-width: .65; opacity: .6; }
.fish-annotations circle { fill: #298cc1; }
.fish-annotations text { font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; fill: #536b77; letter-spacing: .02em; }
.fish-annotations .fish-note { font: 7px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; fill: #7a878b; }
.fish-footer { position: absolute; left: 28px; right: 22px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; z-index: 2; }
.fish-footer > span { color: #7b8485; font: 9px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.fish-motion { min-width: 74px; min-height: 36px; padding: 5px 10px; background: rgba(251,249,243,.9); border: 1px solid #d9e1df; border-radius: 20px; color: #516c78; font: 10px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer; }
.fish-motion:hover { border-color: #799fac; color: #285d73; }
.fish-motion:focus-visible { outline: 2px solid #285d73; outline-offset: 4px; }
.fish-motion:disabled { opacity: .65; cursor: default; }
.fish-motion[hidden] { display: none; }
@media (max-width: 760px) {
  .fish-intro { left: 20px; top: 22px; max-width: 150px; }
  .fish-intro h2 { font-size: 24px; }
  .fish-art { width: 76%; margin-left: 22%; }
  .fish-footer { left: 20px; right: 15px; }
}
@media (max-width: 560px) {
  .particle-study { min-height: 450px; margin-bottom: 25px; }
  .fish-intro { top: 20px; max-width: none; }
  .fish-intro h2 { font-size: 25px; margin-bottom: 0; }
  .fish-intro h2 br { display: none; }
  .fish-intro > p:last-child { margin: 7px 0 0; max-width: none; font-size: 10px; }
  .fish-index { font-size: 8px; margin-bottom: 6px; }
  .fish-art { width: 100%; height: 310px; margin: 108px 0 32px; }
  .fish-footer { bottom: 12px; }
  .fish-footer > span { font-size: 8px; }
  .fish-annotations text { font-size: 11px; }
  .fish-annotations .fish-note { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .particle-study *, .particle-study *::before { animation: none !important; transition: none !important; } }
@media print { .particle-study { break-inside: avoid; } .fish-motion { display: none !important; } .fish-art canvas { display: none; } .particle-study[data-ready='true'] .fish-static { visibility: visible; } }