@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap');
.encounter{display:grid;grid-template-columns:1fr 260px;gap:36px;padding:24px 0;border-bottom:1px solid #9dd8cd25}.encounter h2{font-size:19px;font-weight:400}.encounter p:not(.eyebrow){font-size:12px;line-height:1.9;color:#8eaaa9;max-width:650px}.encounter .eyebrow{font-size:9px;margin-bottom:10px}.encounter .context{font-size:10px!important;margin:0;border-left:1px solid #9dd8cd25;padding-left:24px}.context a{color:#a4e9da}.dwell{height:2px;background:#9dd8cd16;width:120px;margin-top:15px}.dwell span{display:block;height:100%;background:#a4e9da;width:0;transition:width .1s}.actions{flex-wrap:wrap}@media(max-width:720px){.encounter{grid-template-columns:1fr;gap:14px}.encounter .context{border:0;padding:0}.actions{gap:6px}}
:root{color-scheme:dark;--ink:#dceae7;--muted:#8eaaa9;--line:#9dd8cd25;--mint:#a4e9da}*{box-sizing:border-box}body{margin:0;background:#06171e;color:var(--ink);font:14px 'DM Sans',sans-serif}header,main{max-width:1440px;margin:auto;padding:0 6%}header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.brand{font-size:19px;letter-spacing:3px}.brand span,.edition,.eyebrow,.scene-label,.scene-bottom,.camera-head,.meter,footer{font:10px monospace;letter-spacing:1.7px}.brand span{color:var(--muted);margin-left:20px}.edition{color:var(--muted)}.intro{display:flex;align-items:end;justify-content:space-between;padding:42px 0 32px;gap:20px}.eyebrow{color:var(--mint);margin:0 0 15px}h1{font:500 clamp(35px,4vw,54px) 'Manrope',sans-serif;letter-spacing:-2px;margin:0}h1 span{display:block;font-size:15px;font-weight:400;letter-spacing:.2px;color:var(--muted);margin-top:10px}.summary{color:var(--muted);line-height:1.8;margin:0 0 2px}.studio{position:relative;border:1px solid #8bc5c539;border-radius:12px;overflow:hidden;background:#051332}#canvas-holder{height:clamp(360px,53vh,650px)}#canvas-holder canvas{display:block;touch-action:none}.scene-label{position:absolute;top:25px;left:27px;display:flex;align-items:center;gap:9px;color:#a5d4d0;pointer-events:none}.dot{width:6px;height:6px;background:#a4e9da;border-radius:50%;box-shadow:0 0 12px #a4e9da}.scene-bottom{position:absolute;bottom:22px;left:27px;right:27px;display:flex;justify-content:space-between;color:#8db9bb;pointer-events:none}.camera{position:absolute;right:22px;top:22px;width:195px;background:#061923df;border:1px solid #c3ece12c;border-radius:8px;overflow:hidden;pointer-events:none}.camera-head{display:flex;justify-content:space-between;padding:11px;font-size:8px;letter-spacing:1px;color:#b6d8d1}.camera-view{height:140px;position:relative;background:#091f29}.camera video,.camera canvas{position:absolute;width:100%;height:100%;object-fit:fill}.camera video{transform:scaleX(-1)}#camera-hint{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#6e9498;font-size:11px;line-height:1.7;margin:0}.meter{padding:10px;display:flex;gap:12px;align-items:center;font-size:8px;color:#8ab8af}progress{width:100%;height:4px;accent-color:var(--mint)}.controls{padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:22px;border-bottom:1px solid var(--line)}.actions{display:flex;gap:10px;flex-shrink:0}button{border:1px solid var(--mint);background:var(--mint);color:#08212b;font:500 12px 'DM Sans',sans-serif;border-radius:5px;padding:13px 18px;cursor:pointer}button span{margin-left:18px}button.secondary{background:transparent;color:var(--ink);border-color:#8bbeb84a}button:hover{filter:brightness(1.12)}button:focus-visible{outline:2px solid #ffab93;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}#status{max-width:480px;line-height:1.6;text-align:right;color:var(--muted);font-size:12px;margin:0}.instructions{display:grid;grid-template-columns:repeat(3,1fr);padding:25px 0;gap:24px}.instructions article{display:flex;gap:15px}.instructions article>span{font:11px monospace;color:#658e91;margin-top:3px}h2{font-size:13px;font-weight:500;margin:0 0 7px}.instructions p{font-size:11px;color:var(--muted);line-height:1.6;margin:0}footer{border-top:1px solid var(--line);padding:18px 0 25px;display:flex;justify-content:space-between;gap:15px;font-size:8px;color:#6c9394;letter-spacing:.4px}@media(max-width:720px){header,main{padding-left:5%;padding-right:5%}header{height:65px}.brand span{font-size:8px;margin-left:8px}.edition{display:none}.intro{padding:28px 0 22px}.summary{display:none}.camera{width:135px;right:12px;top:12px}.camera-view{height:100px}.camera-head{font-size:7px;padding:8px}.controls{align-items:start;flex-direction:column;gap:13px}#status{text-align:left}.instructions{grid-template-columns:1fr;gap:17px}footer{flex-direction:column}.scene-label{left:16px;top:20px;font-size:8px;max-width:130px;line-height:1.5}.scene-bottom{left:16px;right:16px;font-size:8px}}
/* Exhibition layout: the ocean occupies the room; guidance stays at its edge. */
body{background:#092b40;overflow:hidden}header,.intro,.instructions,footer{display:none}main{max-width:none;padding:0;height:100dvh;display:flex;flex-direction:column}.studio{border:0;border-radius:0;flex:1;min-height:0;overflow:hidden}#canvas-holder{height:100%;width:100%}.controls{flex:0 0 auto;min-height:64px;padding:10px 22px;background:#0a2635;border-top:1px solid #a4e9da26;border-bottom:0;gap:15px}.controls button{padding:9px 12px;font-size:11px}.controls #status{font-size:11px}.scene-label{top:24px}.scene-bottom{bottom:18px}.camera{width:165px;opacity:.88}.camera-view{height:112px}.encounter{position:absolute;display:block;pointer-events:none;padding:16px 18px;border:1px solid #a4e9da35;border-radius:8px;background:#0a293be6;backdrop-filter:blur(12px);opacity:0;transition:opacity .6s;gap:0;z-index:2}.encounter.revealed{opacity:1;pointer-events:auto}.encounter h2{font-size:16px;margin-bottom:8px}.encounter p:not(.eyebrow){font-size:11px;line-height:1.7;margin:6px 0}.encounter .eyebrow{font-size:8px}.encounter .context{display:none}.dwell{margin-top:10px}.encounter:before{content:'';position:absolute;width:1px;height:23px;background:#a4e9da65;top:-24px;left:24px}@media(max-width:720px){.controls{padding:9px 12px;gap:7px;flex-direction:column;align-items:flex-start}.controls #status{max-width:none;font-size:10px}.camera{width:125px}.camera-view{height:94px}}
#canvas-holder{position:absolute;inset:0;height:auto!important}.scene-bottom{bottom:16px}
.info-note{display:block;color:#9ab9bf;font-size:9px;margin-top:9px}.info-note a{color:#b7ded7}
.creature-label{position:absolute;width:260px;padding:13px 15px;border:1px solid #a4e9da35;border-radius:7px;background:#0a293be8;color:#cce5dd;opacity:0;transition:opacity .5s;pointer-events:none;font-size:12px;z-index:3}.creature-label.revealed{opacity:1}.creature-label p{font-size:11px;line-height:1.7;color:#a1bdbd;margin:6px 0}.creature-label a{font-size:9px;color:#a4e9da;pointer-events:auto}#reef-hint{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;color:#b8d8ce;letter-spacing:.4px;pointer-events:none}.scene-bottom{bottom:auto;top:55px;font-size:8px}@media(max-width:650px){#reef-hint{font-size:8px;bottom:8px}.creature-label{max-width:230px}}
#reef-hint{bottom:82px}@media(max-width:720px){#reef-hint{bottom:110px}}
/* Educational cards do not intercept creature interactions. */
.creature-label,.creature-label.revealed,.creature-label a,.encounter,.encounter.revealed,.encounter a{pointer-events:none}
#record-download{font-size:12px;color:#a4e9da;text-decoration:underline;padding:8px}#record-download[hidden],#record-clock[hidden]{display:none}#record-clock{font:11px monospace;color:#efb3ac}