:root { font-family: Figtree, sans-serif; color: #153e4b; background: #edf5fa; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #109eae; outline-offset: 3px; }
.film-player { height: 100dvh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.film-stage { width: 100%; flex: 1; min-height: 0; position: relative; overflow: hidden; background: #eef5fa; }
#care-film { position: absolute; width: 100%; height: 100%; inset: 0; font-family: Figtree, sans-serif; fill: #173f4c; overflow: visible; }
.patient-shot { position: absolute; left: 50%; top: 50%; aspect-ratio: 16 / 9; width: 100%; transform: translate(-50%, -50%); overflow: hidden; }
.patient-shot img,.patient-shot video { width: 100%; height: 100%; display: block; object-fit: cover; }
.patient-shot video { position: absolute; inset: 0; opacity: 0; }
.patient-shot.has-video video { opacity: 1; }
.display { font-family: 'Funnel Display', Figtree, sans-serif; font-weight: 500; letter-spacing: -.65px; }
.medium { font-weight: 600; }
.muted { fill: #64808c; }
.white { fill: #fff; }
.teal { fill: #087f91; }
.rule { fill: none; stroke: #e0ebef; stroke-width: 1; }
.portrait-emr { display: none; }
.portrait .portrait-emr { display: inline; }
.portrait #emr > :not(.portrait-emr):not(#gi-decision) { display: none; }
.portrait #record > path, .portrait #record-footer > path { display: none; }
.portrait #wearable-trend, .portrait #weight-trend { display: none; }
.portrait #subjective-evidence > text:not([id]), .portrait #objective-evidence > text:not([id]) { font-size: 21px; }
.portrait .patient-shot { width: 100% !important; height: 100%; aspect-ratio: auto; }
.portrait .patient-shot img, .portrait .patient-shot video { object-position: 62% center; }
.film-controls { position: relative; flex: 0 0 38px; padding: 0 18px; display: flex; align-items: center; gap: 14px; background: #f3f8fb; border-top: 1px solid #dfeaf0; }
.film-chapters { display: flex; gap: 5px; margin-right: auto; }
.film-chapters button { border: 0; background: none; padding: 14px 0; }
.film-chapters span { display: block; height: 3px; width: 24px; border-radius: 4px; background: #c6dce3; overflow: hidden; }
.film-chapters i { display: block; height: 100%; background: #079eae; transform: scaleX(0); transform-origin: left; }
#film-play { border: 0; background: none; min-width: 45px; padding: 8px 0; font-size: 12px; font-weight: 600; }
#film-time { font-size: 11px; font-variant-numeric: tabular-nums; color: #65818b; }
@media (max-width: 500px) { .film-controls { gap: 8px; padding-inline: 12px; } .film-chapters span { width: 20px; } #film-time { font-size: 10px; } }
.bare .film-controls { display: none; }