:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #26383d; background: #fff; font-size: 16px; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1200px; margin: auto; padding: 24px; }
header { margin-bottom: 20px; }
.eyebrow { font-size: .75rem; color: #526b75; margin: 0 0 6px; }
h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: 0; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, .expand { font: inherit; cursor: pointer; border: 1px solid #c6d5db; background: #fff; color: #285a6a; border-radius: 5px; min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #287a9b; outline-offset: 3px; }
button:hover, .expand:hover { background: #edf5f7; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#play, .expand { flex: 0 0 44px; width: 44px; text-align: center; }
#play { background: #205e74; color: white; border-color: #205e74; }
#play-icon { font-size: 1rem; }
.expand { margin-left: auto; text-decoration: none; display: grid; place-content: center; font-size: 1.6rem; }
.states { display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px; }
.states button { padding: 8px 12px; font-size: .875rem; border-color: transparent; }
.states button[aria-pressed="true"] { color: #174c60; border-color: #92b5c5; background: #eaf3f7; }
.scrubber { display: grid; grid-template-columns: auto minmax(80px,1fr) minmax(100px,auto); gap: 12px; align-items: center; margin-top: 16px; font-size: .8rem; }
.scrubber label { color: #526b75; }
input[type="range"] { width: 100%; min-width: 0; accent-color: #23647c; height: 32px; margin: 0; }
output { min-width: 100px; text-align: right; }
.anatomy-layout { display: grid; grid-template-columns: minmax(0,1fr) 235px; align-items: center; gap: 20px; margin-top: 10px; }
figure { margin: 0; min-width: 0; }
#anatomy { display: block; width: 100%; height: auto; aspect-ratio: 1040 / 1100; }
.options { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid #dbe4e8; margin-bottom: 16px; }
.options label { display: flex; gap: 8px; align-items: center; min-height: 36px; font-size: .875rem; cursor: pointer; }
input[type="checkbox"] { accent-color: #23647c; width: 16px; height: 16px; flex-shrink: 0; }
.anatomy-key { list-style: none; counter-reset: anatomy; display: grid; gap: 16px; padding: 0; margin: 0; }
.anatomy-key li { position: relative; counter-increment: anatomy; padding-left: 32px; font-size: .875rem; line-height: 1.5; }
.anatomy-key li::before { content: counter(anatomy); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #8bacbb; border-radius: 50%; color: #285d72; font-weight: 600; }
.anatomy-key b { display: block; font-weight: 600; }
.anatomy-key span { color: #50616a; }
#status { font-size: .9rem; min-height: 3em; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid #dbe4e8; line-height: 1.5; color: #255c6d; }
footer { font-size: .78rem; line-height: 1.6; color: #58676e; }
footer p { margin: 6px 0 12px; }
summary { cursor: pointer; width: fit-content; padding: 8px 0; }
a { color: #245e7a; text-underline-offset: 3px; }
@media (max-width: 760px) {
  main { padding: 16px 12px; }
  .anatomy-layout { grid-template-columns: minmax(0,1fr); gap: 8px; }
  figure { max-width: 670px; width: 100%; margin: auto; }
  .options { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 8px; }
  .anatomy-key { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
}
@media (max-width: 420px) {
  h1 { font-size: 1.25rem; }
  .toolbar { gap: 6px; }
  .states { flex: 1; gap: 0; }
  .states button { padding: 8px 6px; font-size: .75rem; }
  .expand { display: none; }
  .scrubber { grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; }
  .scrubber label { grid-column: 1 / -1; }
  .anatomy-key { grid-template-columns: minmax(0,1fr); }
  .options label { min-height: 44px; }
  #anatomy-markers { font-size: 40px; }
  #anatomy-markers circle { r: 27px; }
}
@media print { .toolbar,.scrubber,.options { display:none; } }