*{box-sizing:border-box}body{margin:0;background:#122e37;color:#e6dfce;font:13px/1.5 'Helvetica Neue',sans-serif;font-feature-settings:'kern' 1}header{position:absolute;z-index:3;left:4vw;right:4vw;top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px}header a{font-size:24px;font-weight:650;color:inherit;text-decoration:none;letter-spacing:-.04em}header a span{color:#d5ac70}header>span{font-size:9px;letter-spacing:.16em;color:#9cb4b6}button{font:inherit;color:inherit;cursor:pointer;min-height:44px;border:1px solid #71909266;border-radius:24px;background:#14343d;padding:10px 18px}button:hover{border-color:#d5ac70}button:focus-visible,a:focus-visible{outline:2px solid #e4c17f;outline-offset:4px}button:disabled{opacity:.38;cursor:default}header button{font-size:11px;background:transparent}main{height:100svh;min-height:780px;position:relative;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}.title{position:absolute;top:17%;left:6vw;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:.2em;color:#d5ac70}h1{font:400 clamp(44px,5vw,76px)/1.1 Georgia,serif;letter-spacing:-.04em;margin:12px 0 16px}.title p{font-size:13px;line-height:1.7;color:#a9bfc0}.legend{position:absolute;right:5vw;top:20%;text-align:right;pointer-events:none}.legend>span{font-size:30px;color:#e1bd76;letter-spacing:.12em}.legend p{font-size:11px;line-height:1.6;color:#a9bfc0}.controls{position:absolute;bottom:65px;left:20px;right:20px;display:flex;align-items:center;flex-direction:column;gap:12px}#status{font-size:13px;margin:0 0 4px;text-shadow:0 1px 5px #122e37}.rotations,.destinations{display:flex;align-items:center;gap:8px}.rotations>span,.destinations>span{font-size:8px;letter-spacing:.12em;color:#a9bfc0;margin-right:10px}.rotations button{min-width:72px}.rotations b{margin-left:12px;color:#e1bd76;font-size:17px;font-weight:400}.destinations button{font-size:11px;padding:8px 14px;min-height:36px}.destinations button.current{border-color:#e1bd76;color:#e1bd76}footer{position:absolute;left:4vw;right:4vw;bottom:22px;display:flex;justify-content:space-between;font-size:9px;color:#8ca9ac}footer span+span{letter-spacing:.14em}.finish{position:absolute;inset:0;z-index:4;background:#122e37dd;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}.finish[hidden]{display:none}.finish h2{font:400 46px/1.2 Georgia,serif;margin:20px 0 8px}.finish p{color:#a9bfc0;margin-bottom:25px}#loading{position:absolute;top:48%;left:0;right:0;text-align:center;color:#e1bd76;background:#122e37;padding:25px}@media(max-width:700px){main{min-height:780px}header{top:16px;left:20px;right:20px}header>span{display:none}.title{top:95px;left:25px}h1{font-size:43px;margin:8px 0}.title p{font-size:11px}.legend{top:105px;right:25px}.legend p{font-size:10px}.legend>span{font-size:23px}.controls{bottom:62px;gap:10px;left:12px;right:12px}#status{font-size:11px;text-align:center}.rotations button{min-width:62px}.destinations{gap:5px;flex-wrap:wrap;justify-content:center}.destinations>span{display:none}.destinations button{font-size:10px;padding:9px 12px;min-height:44px}footer{left:20px;right:20px;font-size:8px}footer span+span{display:none}.finish h2{font-size:34px}}
@media(max-width:700px){.title h1{max-width:200px;font-size:38px}.legend p{display:none}.legend{top:105px}.title p{font-size:10px}}
.preview{border:0;background:transparent;color:#d5ac70;font-size:11px;padding:4px 14px;min-height:30px}.passage-controls,.coral-controls{position:absolute;bottom:65px;left:20px;right:20px;text-align:center}.passage-controls[hidden],.coral-controls[hidden],.controls[hidden],.title[hidden],.legend[hidden]{display:none}.passage-controls p,.coral-controls p{color:#e6dfce;font-size:13px}.passage-controls button,.coral-controls button{margin:5px;font-size:11px}.title,.legend{transition:opacity .5s}.passage .title,.passage .legend{opacity:0;pointer-events:none}.chapter-route{display:none}@media(max-width:700px){.controls{gap:7px}.passage-controls,.coral-controls{bottom:55px}.passage-controls p,.coral-controls p{font-size:11px}}@media(prefers-reduced-motion:reduce){.title,.legend{transition:none}}
.reef-walk{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:800px;margin:0 auto 6px}.reef-walk button{margin:0;font-size:11px;padding:8px 12px}.reef-walk button.current{border-color:#e1bd76;color:#e1bd76}.coral-controls #reef-inventory{font-size:10px;color:#a9bfc0;margin:6px 0 12px}.coral-controls{bottom:48px}.coral-controls p{margin:8px 0}.coral-controls>div>button{min-height:40px}#reef-hint,#reef-reset{font-size:10px;background:transparent}@media(max-width:700px){.reef-walk{max-width:400px;gap:4px}.reef-walk button{font-size:10px;min-height:40px;padding:7px 10px}.coral-controls{left:10px;right:10px;bottom:45px}.coral-controls>div>button{font-size:10px;padding:8px 10px}.coral-controls #reef-inventory{font-size:9px;max-width:290px;margin:6px auto}.coral-controls #coral-status{max-width:340px;margin:8px auto;font-size:10px}}
#menu{position:relative}#menu>summary{list-style:none;cursor:pointer;letter-spacing:.15em;border:1px solid #71909266;border-radius:50%;width:44px;height:44px;display:grid;place-items:center}#menu>summary::-webkit-details-marker{display:none}.menu-panel{position:absolute;right:0;top:56px;width:min(340px,calc(100vw - 40px));padding:20px;background:#17343df5;border:1px solid #71909266;border-radius:12px;box-shadow:0 12px 40px #001b2466;max-height:75svh;overflow:auto}.menu-panel p{font-size:12px;line-height:1.7;color:#c3ceca}.menu-panel button{margin:4px 2px;font-size:11px;min-height:40px}.menu-panel section[hidden]{display:none}.menu-panel .rotations,.menu-panel .destinations,.menu-panel .reef-walk{flex-wrap:wrap;justify-content:flex-start}.menu-panel .rotations>span,.menu-panel .destinations>span{display:none}.keyboard-options>summary{padding:12px 2px;font-size:11px;color:#b6c6c4;cursor:pointer}.controls,.coral-controls,.passage-controls{bottom:65px;pointer-events:none}#reef-inventory{display:none}#scene-hint{position:fixed;z-index:5;pointer-events:none;border:1px solid #76918d66;background:#123039ee;color:#f1e6ca;padding:7px 11px;font-size:11px;border-radius:6px;max-width:220px}#scene-hint[hidden]{display:none}summary:focus-visible{outline:2px solid #e4c17f;outline-offset:4px}@media(max-width:700px){.controls,.coral-controls,.passage-controls{bottom:60px}#status,#coral-status{max-width:310px;margin:auto;font-size:11px;line-height:1.6}}
.later-status{position:absolute;left:20px;right:20px;bottom:65px;pointer-events:none;text-align:center}.later-status[hidden]{display:none}.later-status p{max-width:650px;margin:auto;font-size:12px;line-height:1.6;color:#e6dfce}#later-destinations{display:flex;flex-wrap:wrap;gap:4px}@media(max-width:700px){.later-status{bottom:60px}.later-status p{font-size:10px;max-width:330px}}

@media(min-width:701px){.title{top:95px}.title h1{font-size:48px}.title p{font-size:12px}.legend{top:110px}}