:root{font-family:Arial,Helvetica,sans-serif;color:#123341;background:#f2f7f8;font-size:16px;line-height:1.5;--navy:#082d3b;--teal:#067b80;--lime:#d8f768}*{box-sizing:border-box}body{margin:0}button,a,input{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #edaa30;outline-offset:4px}header{background:var(--navy);padding:16px max(24px,calc((100vw - 1376px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px;color:white}.brand{font-size:1.8rem;letter-spacing:-.07em;font-weight:800;color:var(--lime);text-decoration:none;display:flex;align-items:center;gap:18px}.brand span{color:#fff;letter-spacing:.12em;font-size:.68rem;font-weight:600}.header-actions{display:flex;gap:10px;align-items:center}.header-actions button{border:1px solid #6a929f;background:transparent;border-radius:6px;color:white;padding:8px 12px;font-size:.85rem}.preview{font-size:.75rem;color:#b5cdd5;margin-right:8px}main{max-width:1424px;margin:auto;padding:25px 24px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.eyebrow{font-size:.72rem;letter-spacing:.13em;color:var(--teal);font-weight:700;margin:0 0 8px}h1{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.17;letter-spacing:-.04em;margin:0}h2{font-size:1.7rem;letter-spacing:-.025em;line-height:1.2;margin:0 0 16px}p{margin-top:0}.progress{display:flex;list-style:none;padding:0;gap:18px;margin:0;font-size:.85rem;color:#647d87}.progress li{padding:5px 0;border-bottom:3px solid transparent}.progress [aria-current=step]{color:var(--teal);border-color:var(--teal);font-weight:bold}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start}.ocean-wrap{min-width:0}.scene{position:relative;height:530px;overflow:hidden;border-radius:16px;background:#105b6b;isolation:isolate}.ocean-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}.scene-time{position:absolute;top:20px;left:20px;padding:8px 14px;background:#042a3beb;color:#fff;border-radius:7px;font-size:.85rem;z-index:10}.atlas{background-image:url('assets/organisms-atlas.png');background-repeat:no-repeat;background-size:300% 100%;display:block;pointer-events:none}.kelp-sprite{position:absolute;bottom:7%;width:36%;height:auto;aspect-ratio:1;background-position:right center;transform-origin:50% 90%;transition:opacity 1.8s,transform 1.8s;z-index:2}.urchin-sprite{position:absolute;width:10%;aspect-ratio:1;background-position:center center;z-index:4;transition:opacity 1.4s,transform 1.4s}.kelp-sprite.gone{opacity:0;transform:scale(.65)}.urchin-sprite.gone{opacity:0;transform:scale(.35)}.otter-hotspot{position:absolute;right:8%;top:-10%;width:38%;height:auto;aspect-ratio:1;z-index:5;padding:0;border:0;color:white;background:transparent;transition:transform 1.7s,opacity 1.3s}.otter-art{position:absolute;inset:0;background-position:left center}.otter-hotspot.absent{transform:translateX(140%);opacity:0;pointer-events:none}.organism-label,.hotspot{background:#062c3ceb;color:white;padding:9px 14px;border:1px solid #acd7df;border-radius:8px;font-size:.95rem;font-weight:700;box-shadow:0 4px 14px #00182138}.organism-label{position:absolute;left:5%;bottom:2%;white-space:nowrap}.organism-label span,.hotspot span{font-size:.68rem;display:block;font-weight:400;color:#d7eced}.hotspot{position:absolute;z-index:10;transition:background .2s}.hotspot:hover,.otter-hotspot:hover .organism-label{background:#006f77}.kelp-hotspot{top:45%;left:5%}.urchin-hotspot{right:8%;bottom:7%}.change-tag{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:8;background:#fff5d6;color:#52340f;border:1px solid #ddc783;padding:10px 16px;border-radius:8px;max-width:65%;text-align:center;font-weight:700;box-shadow:0 8px 22px #001b2640}.scene-caption{display:flex;justify-content:space-between;gap:22px;margin-top:12px;color:#3b5b67;font-size:.9rem}.scene-caption small{max-width:280px;font-size:.72rem;text-align:right}.task{border:1px solid #d3e3e8;background:white;border-radius:14px;padding:25px;min-height:450px}.task>p{color:#4b6773}.task .eyebrow{color:var(--teal)}.journal-label{font-size:.875rem;margin:15px 0 6px}.three-two-one{list-style:none;padding:0;margin:0 0 16px}.three-two-one li{display:flex;align-items:center;gap:15px;margin:8px 0;font-size:.95rem}.three-two-one b{font-size:1.6rem;color:var(--teal);width:24px}.small{font-size:.8rem;color:#516e78}.seen{font-size:.8rem;background:#edf6f5;padding:8px 11px;border-radius:7px;color:#256266}.primary,.secondary{display:block;width:100%;border:0;border-radius:8px;font-weight:bold;padding:13px 15px;margin-top:16px}.primary{background:var(--lime);color:#193722}.primary:hover{background:#c9e95b}.secondary{background:transparent;border:1px solid #b8ced6;color:#2b505e;margin-top:10px}.task #task-foot{margin:14px 0 0;font-size:.75rem;line-height:1.5}.choices{display:grid;gap:9px}.choice{border:1px solid #b7d1d9;background:#f8fbfc;color:#153b4a;border-radius:8px;padding:12px;text-align:left;font-weight:600}.choice[aria-pressed=true]{background:#e3f3ef;border-color:#07847e;box-shadow:0 0 0 1px #07847e}.feedback{font-size:.875rem;border-left:3px solid #147e78;background:#eef7f4;padding:11px 13px;margin:14px 0 0}.feedback.retry{border-color:#bd8325;background:#fff6df}.journal-prompt{margin:15px 0;padding:14px;border-radius:8px;background:#edf5f7;font-size:.9rem}.journal-prompt p:last-child{margin-bottom:0}.journal-prompt ol{padding-left:20px}.journal-prompt li{margin-bottom:9px}.compare{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}.compare span{font-size:.9rem}.compare button{border:1px solid #adc8d2;background:white;padding:8px 14px;border-radius:7px;color:#164653}.compare button[aria-pressed=true]{color:white;background:var(--navy);border-color:var(--navy)}.model-note{font-size:.8rem;color:#526f7a;margin:22px 0 0}.notes{font-size:.8rem;color:#516e78;border-top:1px solid #d2e3e7;padding:15px 0;margin-top:18px}.notes p{max-width:950px;margin:13px 0}.notes a{color:#056c76}.notes summary{cursor:pointer}dialog{border:0;border-radius:16px;padding:20px;background:white;color:#173b49;width:min(820px,92vw);max-height:90vh;overflow:auto}dialog::backdrop{background:#001f30d9}.close{display:block;margin-left:auto;background:#ecf3f6;border:1px solid #bad2dc;border-radius:7px;padding:8px 16px;color:#1d495a}#inspect-photo{display:block;width:100%;max-height:52vh;object-fit:contain;border-radius:10px;margin-top:14px}.dialog-copy{padding:20px 8px 8px}.dialog-copy p:last-child{margin-bottom:0}.guide-list{padding-left:24px}.guide-list li{margin-bottom:15px}.skip{position:absolute;top:-80px;background:white;padding:12px;z-index:20}.skip:focus{top:0}[hidden]{display:none!important}#lesson-card{background:#f0f6f7;border-radius:9px;padding:17px}#lesson-card h3{margin:5px 0 10px;font-size:1.3rem}#lesson-card p{margin-bottom:10px}.lesson-count{font-size:.75rem;color:#526f7b}#checklist label{display:flex;align-items:flex-start;gap:10px;padding:10px 0;font-size:.875rem}#checklist input{width:20px;height:20px;accent-color:var(--teal);flex-shrink:0}.complete-mark{font-size:1.05rem;color:#076452;font-weight:700}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 305px;gap:16px}.scene{height:470px}.task{padding:20px}.progress{gap:10px}.heading{align-items:flex-start}.scene-caption{display:block}.scene-caption small{display:block;max-width:none;text-align:left;margin-top:5px}.otter-hotspot{top:0}}
@media(max-width:800px){header{padding:14px 16px}.brand span{display:none}.preview{display:none}main{padding:20px 16px}.heading{display:block}.progress{margin-top:14px;justify-content:space-between}.workspace{grid-template-columns:1fr}.scene{height:auto;aspect-ratio:1.6}.otter-hotspot{top:-8%}.task{min-height:0}.task h2{font-size:1.5rem}.scene-caption{font-size:.85rem}.scene-time{top:12px;left:12px;font-size:.75rem;padding:6px 9px}.organism-label,.hotspot{font-size:.8rem;padding:7px 10px}.organism-label span,.hotspot span{font-size:.62rem}.change-tag{font-size:.8rem;padding:8px 12px}.three-two-one{display:flex;flex-wrap:wrap;gap:8px 20px}.three-two-one li{font-size:.85rem}.scene .otter-hotspot{right:7%}.choices{grid-template-columns:1fr}.header-actions button{padding:7px 9px}.compare span{flex-basis:100%}}
@media(max-width:450px){.scene{aspect-ratio:1.15}.kelp-sprite{width:43%;bottom:8%}.otter-hotspot{width:50%;top:0!important;right:3%!important}.urchin-sprite{width:14%}.kelp-hotspot{left:4%;top:48%}.urchin-hotspot{right:4%;bottom:8%}.organism-label{bottom:4%;left:0}.scene-time{max-width:51%}.change-tag{max-width:70%;width:max-content;top:38%}.three-two-one{display:block}.heading h1{font-size:1.8rem}.header-actions{gap:7px}.header-actions button{font-size:.75rem}.brand{font-size:1.5rem}.progress{font-size:.8rem}.task{padding:19px}.model-note{font-size:.75rem}}
.journal-prompt,.journal-label,.feedback,#checklist label{font-size:1rem}.task #task-foot{font-size:.875rem}.guide-list li{line-height:1.55}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.header-actions .video-guide{display:inline-flex;align-items:center;min-height:44px;border:1px solid #d8f768;border-radius:6px;background:#d8f768;color:#082d3b;padding:8px 12px;text-decoration:none;font-size:.875rem;font-weight:700}
@media(max-width:500px){.header-actions{flex-wrap:wrap;justify-content:flex-end}.header-actions .video-guide{padding:7px 9px}header{gap:10px}}