@font-face{font-family:MarFutura;src:url('assets/futura-condensed.ttf') format('truetype');font-display:block}
*{box-sizing:border-box}
body{margin:0;padding:28px 16px 40px;background:#00437f;color:#dff;font:12px/1.65 Verdana,Helvetica,Arial,sans-serif}
main{width:600px;max-width:100%;margin:auto}
#stage{position:relative;width:100%;aspect-ratio:600/337;overflow:hidden;background:#00437f}
#scene{position:absolute;width:600px;height:337px;transform-origin:top left;overflow:hidden}
#ocean,.ocean-tint,#words{position:absolute;inset:0;width:100%;height:100%}
#ocean{object-fit:fill}
.ocean-tint{background:linear-gradient(#0168b4,#00437f);opacity:.75;pointer-events:none}
#words{overflow:hidden}
.phrase{position:absolute;left:0;top:0;width:105.6px;height:10.6px;border:0;padding:0 2px;background:transparent;color:#dff;font:14px/20px MarFutura,'Arial Narrow',sans-serif;text-align:center;white-space:nowrap;transform-origin:52.8px 5.3px;cursor:pointer;user-select:none}
/* Selected phrases must not shield the other phrases as their hit area grows. */
.phrase:disabled{pointer-events:none}
.phrase:focus-visible{outline:1px solid #dff;outline-offset:2px}
#begin{position:absolute;inset:0;width:100%;border:0;background:#00437f9e;color:#dff;font:22px MarFutura,'Arial Narrow',sans-serif;cursor:pointer}
#begin span{display:block;margin-top:10px;font:11px Verdana,sans-serif}
#begin[hidden]{display:none}
.controls{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.controls button{border:0;padding:3px 0;color:#dff;background:transparent;font:10px Verdana,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
button:focus-visible,a:focus-visible{outline:2px solid #dff;outline-offset:3px}
#status:empty{display:none}
#status{font-size:11px}
h1{font-size:16px;margin:22px 0 16px}h2{font-size:12px;margin:22px 0 10px}h2 span{font-weight:normal}
p{margin:0 0 16px}a{color:#6dd9ff}a:visited{color:#b7aaff}hr{border:0;border-top:1px solid #82a6bf;margin:25px 0}ul{padding-left:25px}footer{margin-top:40px;font-size:10px}
@media(max-width:480px){body{padding:16px 12px 30px}.controls{gap:14px}}

.phrase span{position:absolute;left:-50.45px;top:-1.5px;width:206.65px;height:24px;pointer-events:none}

/* The host page uses technekai's shared CSS; this document contains only the artwork. */
body{padding:0;margin:0;background:transparent;color:#222}
main{margin:0;width:600px;max-width:100%}
.controls button{color:#222}
.controls button:focus-visible{outline-color:#222}
#status{margin:8px 0 0}
@media(max-width:480px){body{padding:0}.controls{gap:12px}}

/* Keep playback chrome out of the artwork, including Safari's initial video overlay. */
#ocean{pointer-events:none}
#ocean::-webkit-media-controls,
#ocean::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
#player{width:100%}
#player:fullscreen{width:100%;height:100%;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#00437f;color:#dff;overflow:auto}
#player:fullscreen #stage{flex-shrink:0;width:min(100%,calc((100dvh - 100px)*1.780415));}
#player:fullscreen .controls{justify-content:center;flex-shrink:0}
#player:fullscreen .controls button{color:#dff}
#player:fullscreen button:focus-visible{outline-color:#dff}
#player:fullscreen #status{margin:8px 0 0}
#player:-webkit-full-screen{width:100%;height:100%;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#00437f;color:#dff;overflow:auto}
#player:-webkit-full-screen #stage{flex-shrink:0;width:min(100%,calc((100vh - 100px)*1.780415))}
#player:-webkit-full-screen .controls{justify-content:center;flex-shrink:0}
#player:-webkit-full-screen .controls button{color:#dff}