/* Look at That website design system. Narrative layout remains in story.css. */
:root{--story-ink:#071b3f;--story-muted:#526780;--story-blue:#086dff;--font-sans:StoryInter,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html,body{font-family:var(--font-sans)!important;background:#f5f8fd!important}
#zoo-journey{font-family:var(--font-sans);background:#f5f8fd!important}
#zoo-journey .j-phone{--nav-height:88px;--content-bottom:calc(var(--nav-height) + 16px)}
#zoo-journey .story-brand{display:flex;align-items:center;gap:7px;color:var(--story-ink);text-decoration:none}
#zoo-journey .story-brand svg{width:25px;height:28px;color:var(--story-blue);stroke-width:2.5}
#zoo-journey .j-header b{font-size:5.8cqw;font-weight:750;letter-spacing:-.28cqw;color:var(--story-ink)}
#zoo-journey .j-header{left:7%;right:7%;top:3.8%}
#zoo-journey .j-number{font-size:11px;font-weight:600;letter-spacing:1px;color:#60748c;font-variant-numeric:tabular-nums}
#zoo-journey .j-caption{top:11.6%}
#zoo-journey .j-chapter{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--story-blue)}
#zoo-journey .j-caption h2{font-family:var(--font-sans);font-size:7.5cqw;font-weight:700;letter-spacing:-.34cqw;line-height:1.12;color:var(--story-ink);margin-top:11px}
#zoo-journey .j-navigation{background:#f5f8fd;border-top:1px solid #dfe8f4;padding-top:8px}
#zoo-journey .j-controls{height:44px}
#zoo-journey .j-note{font-size:10px;color:#60748c;font-weight:500}
#zoo-journey .j-controls>div{gap:4px}
#zoo-journey .j-controls button{font-family:var(--font-sans);font-size:12px;font-weight:600;min-width:44px;min-height:38px;border-radius:8px;color:#264566}
#zoo-journey .j-controls button:disabled{opacity:.38}
#zoo-journey .j-controls .j-play{background:var(--story-blue);color:white;min-width:62px;padding:0 12px;box-shadow:0 3px 8px #086dff20}
#zoo-journey .j-segments{height:36px;gap:7px}
#zoo-journey .j-segments button{height:36px;min-width:0}
#zoo-journey .j-segments button:before,#zoo-journey .j-segments i{top:16px;height:3px}
#zoo-journey .j-segments button:before{background:#d7e2f0}
#zoo-journey .j-segments i{background:var(--story-blue)}
#zoo-journey button:focus-visible,#zoo-journey a:focus-visible{outline:3px solid #086dff;outline-offset:4px}
#zoo-journey:focus{outline:none}
#zoo-journey #ticket-record-motion .tr-ticket{border-radius:8px;overflow:hidden}
#zoo-journey #ticket-record-motion .tr-row{border-bottom-color:#d7e2f0}
#zoo-journey #ticket-record-motion .tr-row>strong{color:var(--story-ink);font-weight:550}
#zoo-journey #origin-camera .oc-city-label{fill:#264566}
#zoo-journey #origin-camera .oc-payoff{font-weight:400;letter-spacing:-.15cqw}
#zoo-journey #origin-camera .oc-payoff strong{font-weight:650;color:var(--story-ink)}
#zoo-journey #zoo-activity-story .za-base,#zoo-journey #zoo-action-story .ac-base{filter:saturate(.35) brightness(1.12);opacity:.7}
#zoo-journey #zoo-activity-story .za-insight{background:#fff;border:1px solid #d7e2f0;border-radius:12px;box-shadow:0 8px 30px #143b6510;padding:16px 18px}
#zoo-journey #zoo-activity-story .za-insight>span{font-weight:650;font-size:10px;color:#1764c7}
#zoo-journey #zoo-activity-story .za-insight p{font-size:5.5cqw;line-height:1.25;color:#173b68;font-weight:450}
#zoo-journey #zoo-activity-story .za-insight strong{font-weight:650;color:var(--story-ink)}
#zoo-journey #zoo-activity-story .za-recommendation{font-size:13px;line-height:1.45}
#zoo-journey #zoo-action-story .ac-step p{font-size:5.3cqw;line-height:1.3}
#zoo-journey #zoo-action-story .ac-step strong{color:var(--story-ink);font-weight:650}
#zoo-journey #zoo-action-story .ac-report{border-radius:12px;background:#fff;box-shadow:0 10px 32px #143b6512;border-color:#d7e2f0}
#zoo-journey #zoo-action-story .ac-report h3{color:var(--story-ink);font-weight:650;letter-spacing:-.04em}
#zoo-journey .rv-hub>strong{display:flex;align-items:center;justify-content:center;gap:9px;font-size:7.1cqw;font-weight:750;color:var(--story-ink);letter-spacing:-.045em}
#zoo-journey .rv-hub>strong svg{width:28px;height:31px;color:var(--story-blue);stroke-width:2.5}
#zoo-journey .rv-hub-label{font-weight:650;color:#60748c;font-size:9px}
#zoo-journey .rv-sources>span{font-size:3.45cqw}
#zoo-journey .rv-outcome-title>strong{font-size:5.8cqw;color:var(--story-ink);letter-spacing:-.035em;font-weight:650}
#zoo-journey .rv-outcome{border-color:#086dff}
#zoo-journey .rv-cost{border-color:#79a8e9}
#zoo-journey .rv-outcomes{bottom:54px}
#zoo-journey .rv-outcome p{font-size:3.35cqw;color:#526780;line-height:1.5}
#zoo-journey .rv-finish{bottom:0}
#zoo-journey .story-finish-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#086dff;color:#fff;border-radius:8px;font-size:12px;font-weight:600;text-decoration:none;min-height:40px}
#zoo-journey .story-finish-link svg{width:15px;height:15px}
@media(min-width:700px){
 html,body,#zoo-journey{background:#eaf2ff!important}
 #zoo-journey .j-phone{width:min(460px,calc((100dvh - 32px)*390/730));border:1px solid #d4e2f7;border-radius:20px;box-shadow:0 20px 70px #123b7514}
}
@media(prefers-reduced-motion:no-preference){
 #zoo-journey .j-controls button,#zoo-journey .story-finish-link{transition:background-color .18s,box-shadow .18s}
 #zoo-journey .j-controls button:not(:disabled):hover{background:#e3edfb}
 #zoo-journey .j-controls .j-play:hover,#zoo-journey .story-finish-link:hover{background:#0058d6;box-shadow:0 4px 12px #086dff25}
}
@container(max-width:350px){
 #zoo-journey .j-note{font-size:9px}
 #zoo-journey .j-controls button{font-size:11px;min-width:40px}
 #zoo-journey .j-controls .j-play{min-width:52px;padding:0 9px}
 #zoo-journey .story-finish-link{font-size:11px;min-height:36px;padding:7px 12px}
 #zoo-journey .rv-outcomes{bottom:45px}
}
/* Keep the geographic context in the same cool palette as the platform. */
#zoo-journey #origin-camera .oc-states path{fill:#e5edf7;stroke:#b7c9e0}
#zoo-journey #origin-camera .oc-states path[data-id="47"]{fill:#d4e6ff;stroke:#8cb7ee}
#zoo-journey #origin-camera .oc-counties{stroke:#b7c9e0;opacity:.4}
#zoo-journey #origin-camera .oc-state-name{fill:#7187a4;letter-spacing:2px}
#zoo-journey .za-insight svg{color:#086dff}
#zoo-journey #zoo-action-story .ac-staff{background:#086dff}
#zoo-journey #ticket-record-motion .tr-stub small{color:#60748c}
#zoo-journey #zoo-action-story .ac-mix span:last-child{background:#bed6f8}
#zoo-journey #zoo-action-story .ac-request svg{color:#086dff}
