.reef-page{color:#e7f4eb;background:#082a38;height:100dvh;min-height:360px;font-family:Arial,sans-serif;position:relative;overflow:hidden}.reef-page button,.reef-page a{touch-action:manipulation}.reef-page button{cursor:pointer;color:#e4f4ea;background:#103940ed;border:1px solid #a7daca55;border-radius:24px;min-height:44px;padding:10px 16px;font-size:13px}.reef-page button:hover{background:#285951}.reef-page button:disabled{opacity:.4;cursor:default}.reef-page :focus-visible{outline-offset:3px;outline:3px solid #ffe6a3}.reef-top{z-index:5;background:#061f2aeb;border-bottom:1px solid #b2dfc322;justify-content:space-between;align-items:center;gap:12px;height:64px;padding:0 24px;display:flex;position:absolute;inset:0 0 auto}.reef-top>a{letter-spacing:2px;font-size:14px}.reef-top>a span{font-size:10px}.reef-top h1{margin:0;font:28px Georgia,serif}.reef-top h1 em{color:#a3e8d5}.reef-layout{position:absolute;inset:64px 0 62px}.reef-scene{position:absolute;inset:0;overflow:hidden}.reef-scene canvas{touch-action:none;width:100%;height:100%;display:block}.reef-scene-top{pointer-events:none;letter-spacing:1px;justify-content:space-between;font-size:12px;display:flex;position:absolute;top:16px;left:24px;right:24px}.reef-scene-top strong{color:#ffe6a5}.reef-attempts{pointer-events:none;align-items:center;gap:6px;display:flex;position:absolute;top:40px;left:24px}.reef-attempts>span{background:#ffdfa2;border:1px solid #ffdfa2;border-radius:50%;width:6px;height:6px}.reef-attempts .used{opacity:.4;background:0 0}.reef-attempts small{color:#c1d9d3;margin-left:5px;font-size:11px}.reef-coach{text-align:center;pointer-events:none;background:#082a38dc;border-radius:16px;width:max-content;max-width:calc(100% - 32px);padding:12px 20px;position:absolute;top:72px;left:50%;transform:translate(-50%)}.reef-coach strong{color:#ffebba;font-size:clamp(14px,1.6vw,20px);display:block}.reef-coach span{color:#c4e7db;margin-top:6px;font-size:12px;display:block}.reef-scene-controls{gap:8px;display:flex;position:absolute;bottom:12px;right:16px}.reef-under{background:#061f2a;justify-content:center;align-items:center;gap:10px;height:62px;display:flex;position:absolute;top:100%;left:0;right:0}.reef-under>span{color:#a0c5bd;margin-right:16px;font-size:11px}.reef-under button:last-child{color:#123c37;background:#d2edd6;font-weight:700}.reef-intro{z-index:6;background:#082a38fa;border:1px solid #b2dfc350;border-radius:20px;width:min(380px,100% - 24px);padding:24px;position:absolute;top:8px;bottom:8px;right:12px;overflow-y:auto;box-shadow:0 15px 80px #00141bd0}.reef-intro[hidden]{display:none}.reef-intro h2{margin:0 0 20px;font:25px Georgia,serif}.reef-tabs{gap:8px;display:flex}.reef-tabs [aria-pressed=true]{color:#183b35;background:#d2edd6}.reef-mode-note,.reef-challenge p,.reef-small{color:#b9d9cf;margin:16px 0;font-size:13px;line-height:1.6}.reef-challenge{border-top:1px solid #bdd6b633;padding-top:14px}.reef-challenge>span{letter-spacing:1px;font-size:11px}.reef-map{margin:20px 0}.reef-map summary{cursor:pointer;padding:14px 0;font-size:14px}.reef-map summary span{float:right;color:#a9c6bf;font-size:11px}.reef-levels{gap:6px;display:grid}.reef-levels button{text-align:left;border-radius:10px;align-items:center;gap:12px;display:flex}.reef-levels small{color:#ffdc9d;margin-left:auto}.reef-levels [aria-current=step]{background:#37665a}.reef-result,.reef-pause{text-align:center;z-index:3;background:#082a38ed;border:1px solid #bce6c677;border-radius:24px;width:min(420px,100% - 28px);max-height:calc(100% - 24px);padding:22px;position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 15px 100px #041f2aa0}.reef-result h2,.reef-pause h2{color:#ffebba;margin:10px 0;font:30px Georgia,serif}.reef-result p{color:#c8e5d7;margin:12px 0;font-size:13px;line-height:1.5}.reef-result .reef-eyebrow{letter-spacing:2px;font-size:10px}.reef-result button{width:100%;margin-top:8px;display:block}.reef-result button:first-of-type{color:#123c37;background:#d2edd6;font-weight:700}.reef-result .reef-text-button{background:0 0;border:0}.reef-hint,.reef-message:not(:empty){color:#ffe6b7;z-index:7;background:#092a38f5;border-radius:14px;width:min(520px,100% - 24px);padding:16px;font-size:13px;position:absolute;bottom:70px;left:50%;transform:translate(-50%);box-shadow:0 5px 25px #03131b}.reef-message input{color:#123c37;background:#d2edd6;width:100%;margin-top:10px;padding:12px}.reef-quiet .reef-top,.reef-quiet .reef-scene-top,.reef-quiet .reef-scene-controls,.reef-quiet .reef-under,.reef-quiet .reef-intro{opacity:0;pointer-events:none}@media (max-width:600px){.reef-top{height:54px;padding:0 12px}.reef-top>a{letter-spacing:0;font-size:11px}.reef-top>a span{display:none}.reef-top h1{font-size:23px}.reef-top button{padding:8px 12px;font-size:11px}.reef-layout{top:54px}.reef-under{gap:6px}.reef-under>span{display:none}.reef-under button{padding:8px 12px;font-size:12px}.reef-scene-controls{bottom:8px;right:10px}.reef-scene-controls button{font-size:11px}.reef-scene-top{left:16px;right:16px}.reef-attempts{left:16px}.reef-coach{padding:10px 12px;top:66px}}@media (max-height:550px){.reef-coach{max-width:55%;padding:6px;top:12px}.reef-coach span{display:none}.reef-result{padding:12px 20px}.reef-result .reef-eyebrow{display:none}.reef-result button{margin-top:4px}}