.reef-learning-page{--reef-ink:#173f4c;width:100%;max-width:none;color:var(--reef-ink);margin:0 auto;padding:12px clamp(12px,3vw,36px) 24px}.species-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.species-heading h1{margin:0;font:600 clamp(22px,2.8vw,34px)/1.2 Georgia,serif}.species-tools{flex-shrink:0;align-items:center;gap:6px;display:flex}.species-page button,.species-tools a{min-height:44px;color:var(--reef-ink);font:inherit;cursor:pointer;background:#f2fffc;border:1px solid #96bcbf;border-radius:10px;padding:8px 12px;text-decoration:none}.species-page button:disabled{cursor:default;opacity:.6}:is(.species-page button:focus-visible,.species-page a:focus-visible,.species-page summary:focus-visible){outline-offset:3px;outline:3px solid #e5ac3c}.species-ocean{isolation:isolate;background:linear-gradient(#eaf5f2a3,#eaf5f2c7),url(/assets/reef-tasks/reef/reef-day.webp) 50%/cover;border-radius:20px;min-height:560px;position:relative}.species-swimmers{grid-template-rows:repeat(5,minmax(100px,1fr));grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;height:clamp(560px,100dvh - 210px,780px);padding:20px 18px;display:grid}.species-page .species-fish{grid-column:var(--col);grid-row:var(--row);width:90%;min-width:0;height:94px;min-height:44px;animation:species-drift var(--duration) ease-in-out var(--delay) infinite;touch-action:manipulation;z-index:1;background:0 0;border:0;place-self:center;padding:10px;position:relative}.species-fish:hover,.species-fish:focus{z-index:6}.species-fish-response,.species-fish-heading{width:100%;height:100%;display:block}.reef-learning-portrait{pointer-events:none;width:100%;height:100%;display:block;overflow:hidden}.species-fish-heading{width:max(32px,var(--fish-length,80%));animation:species-heading var(--duration) steps(1,end) var(--delay) infinite;margin-inline:auto}.species-label{z-index:8;text-align:center;pointer-events:none;opacity:0;background:#f6fffbf2;border-radius:9px;width:max-content;max-width:230px;padding:7px 10px;font-size:14px;line-height:1.3;position:absolute;bottom:90%;left:50%;transform:translate(-50%)}.species-label i,.species-label small{font-size:12px;display:block}.species-fish:hover .species-label,.species-fish:focus .species-label,.species-fish[data-inspected] .species-label{opacity:1}.species-fish.at-left .species-label{left:0;transform:none}.species-fish.at-right .species-label{left:auto;right:0;transform:none}.species-ocean.is-still .species-fish,.species-ocean.is-still .species-fish-heading{animation-play-state:paused}.species-fish[data-reaction=correct] .species-fish-response{animation:.5s ease-out species-correct}.species-fish[data-reaction=incorrect] .species-fish-response{animation:.35s ease-out species-wrong}.species-fish[data-departing] .species-fish-response{animation:.65s ease-in forwards species-depart}.species-name-reel{z-index:9;text-align:center;background:#f5fffaed;border:1px solid #c0d9d6;border-radius:14px;width:clamp(180px,20vw,240px);padding:10px;position:absolute;top:16px;right:16px;box-shadow:0 3px 15px #173f4c14}.species-reel-window{background:linear-gradient(#e0eeea,#fff 22% 78%,#e0eeea);border-block:1px solid #96bcbf;border-radius:7px;height:68px;position:relative;overflow:hidden}.species-reel-window>strong,.species-reel-strip>span{box-sizing:border-box;justify-content:center;align-items:center;height:68px;padding:4px 8px;font-size:15px;line-height:1.2;display:flex}.species-reel-strip{animation:1.1s cubic-bezier(.12,.58,.12,1) forwards species-reel-spin}.species-reel-status{min-height:32px;margin:7px 0 4px;font-size:12px;line-height:1.3}.species-name-reel button{min-height:44px;padding:5px 16px;font-size:13px}.species-layout{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px;display:grid}.species-information{min-width:0;color:var(--reef-ink);overflow-wrap:anywhere;background:#f8fcf9;border:1px solid #c8dcd5;border-radius:16px;margin:0;padding:22px 24px;font-size:17px;line-height:1.6}.species-information h2{text-wrap:balance;margin:0;font-size:25px;line-height:1.25}.species-information h3{margin:24px 0 12px;font-size:20px;line-height:1.35}.species-information p{max-width:65ch;margin:0 0 18px}.species-information article>p:last-child{margin-bottom:0}.species-information .species-scientific-name{color:#41636a;margin:6px 0 0;font-size:16px}.species-information-hint{margin:14px 0 0!important}.species-information:focus-visible{outline-offset:3px;outline:3px solid #e5ac3c}.reef-learning-embedded{background:#e9f5f2;max-width:none;min-height:100%}@media (min-width:1100px){.species-layout{grid-template-columns:minmax(0,1fr) clamp(320px,27vw,460px);gap:clamp(20px,2vw,32px)}.species-ocean{min-height:520px;position:sticky;top:12px}.species-swimmers{grid-template-rows:repeat(5,minmax(88px,1fr));height:clamp(520px,100dvh - 100px,900px)}.species-page .species-fish{height:min(104px,100%)}.species-name-reel{width:clamp(170px,33.333% - 24px,240px)}.species-information{overscroll-behavior:contain;scrollbar-gutter:stable;max-height:calc(100dvh - 100px);position:sticky;top:12px;overflow-y:auto}}@keyframes species-drift{0%,to{transform:translate(calc(-1 * var(--drift)),2px)}25%{transform:translateY(-5px)}50%{transform:translate(var(--drift),1px)}75%{transform:translateY(5px)}}@keyframes species-heading{0%,49.99%{transform:scaleX(1)}50%,to{transform:scaleX(-1)}}@keyframes species-reel-spin{0%{transform:translateY(0)}to{transform:translateY(-680px)}}@keyframes species-correct{40%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes species-wrong{20%,60%{transform:translate(-7px)}40%,80%{transform:translate(7px)}to{transform:translate(0)}}@keyframes species-depart{to{opacity:0;transform:translate(45px,-25px)}}@media (max-width:700px){.species-heading{flex-direction:column;align-items:flex-start;gap:8px}.species-heading h1{font-size:23px}.species-tools{align-self:flex-end}.species-swimmers{grid-template-rows:repeat(7,85px);grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;height:635px;padding:18px 6px}.species-page .species-fish{grid-column:var(--mobile-col);grid-row:var(--mobile-row);width:96%;height:72px;padding:4px;--drift:5px!important}.species-name-reel{width:calc(50% - 16px);padding:7px;top:10px;right:8px}.species-reel-window>strong,.species-reel-strip>span{font-size:12px}.species-reel-status{font-size:11px}.species-label{white-space:normal;max-width:155px;font-size:12px}.species-label i{font-size:10px}.species-fish.at-left .species-label,.species-fish.at-right .species-label{left:50%;right:auto;transform:translate(-50%)}.species-fish.mobile-left .species-label{left:0;transform:none}.species-fish.mobile-right .species-label{left:auto;right:0;transform:none}.species-information{padding:18px;font-size:16px}}@media (prefers-reduced-motion:reduce){.species-fish,.species-fish-heading,.species-fish-response,.species-reel-strip{animation:none!important}.species-fish[data-departing] .species-fish-response{opacity:0}}.species-heading{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin-bottom:12px;display:grid}.species-heading h1{font-size:clamp(20px,2vw,28px)}.species-heading .fs-logo{white-space:nowrap;color:var(--reef-ink);align-items:center;gap:6px;text-decoration:none;display:inline-flex}.species-heading .fs-logo img{width:28px;height:28px}.species-heading .fs-logo strong{font:700 16px Georgia,serif}.species-language{align-items:center;display:inline-flex}.species-language>span{clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.species-language select{width:100px;min-height:44px;color:var(--reef-ink);font:inherit;background:#f2fffc;border:1px solid #96bcbf;border-radius:10px;padding:4px 6px}.species-language select:focus-visible{outline-offset:3px;outline:3px solid #e5ac3c}.reef-learning-embedded .species-heading{grid-template-columns:minmax(0,1fr) auto}@media (max-width:1000px){.species-heading{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}.species-heading>.fs-logo{grid-area:1/1}.species-heading>.species-tools{grid-area:1/2;align-self:center}.species-heading>h1{grid-area:2/1/auto/-1}.reef-learning-embedded .species-heading>h1{grid-area:1/1}}@media (max-width:480px){.species-heading{gap:6px}.species-heading h1{font-size:21px}.species-heading .fs-logo strong{font-size:14px}.species-heading .fs-logo img{width:24px;height:24px}.species-language select{width:84px;font-size:12px}.species-tools{gap:4px}.species-tools>a,.species-tools>button{padding:6px 9px;font-size:13px}}.species-reel-actions{align-items:center;gap:6px;min-height:44px;display:flex}.species-name-mode{flex:1;min-width:0;display:flex}.species-name-mode>span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.species-name-mode select{width:100%;min-width:0;min-height:44px;color:var(--reef-ink);font:inherit;background:#f2fffc;border:1px solid #96bcbf;border-radius:10px;padding:4px;font-size:12px}.species-name-mode select:focus-visible{outline-offset:3px;outline:3px solid #e5ac3c}.species-reel-actions>button{flex:1;min-width:0;padding:5px 6px;font-size:12px;line-height:1.2}.species-reel-strip>span>svg{flex-shrink:0}.species-page .species-listen{background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;width:100%;height:68px;padding:4px;display:flex}.species-page[data-hearing-question=true] .species-label{display:none}.species-page .species-enlarged-fish{cursor:zoom-out;background:#eff8f4;border:1px solid #c8dcd5;border-radius:16px;width:100%;height:clamp(220px,35vh,420px);padding:16px;display:block}.species-enlarged-fish .reef-learning-portrait{width:100%;height:100%}@media (min-width:1100px){.has-enlarged-fish .species-ocean{grid-area:1/1/span 2}.has-enlarged-fish .species-enlarged-fish{grid-area:1/2}.has-enlarged-fish .species-information{grid-area:2/2;max-height:calc(100dvh - 120px - clamp(220px,35vh,420px));position:static;overflow-y:auto}}@media (min-width:1600px){.species-layout.has-enlarged-fish{grid-template-columns:minmax(0,1fr) clamp(260px,21vw,440px) clamp(320px,25vw,460px)}.has-enlarged-fish .species-ocean{grid-row:1}.has-enlarged-fish .species-enlarged-fish{position:sticky;top:12px}.has-enlarged-fish .species-information{grid-area:1/3;max-height:calc(100dvh - 100px);position:sticky;top:12px;overflow-y:auto}}