@import url('data:text/css,');
*{box-sizing:border-box}body{margin:0;background:#081625;color:#e5f6ee;font-family:system-ui,sans-serif;overflow:hidden}canvas,#vignette{position:fixed;inset:0;width:100%;height:100%}#vignette{pointer-events:none;background:radial-gradient(ellipse,transparent 38%,#03091655)}header{position:absolute;top:32px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:start}.brand{font-size:22px;letter-spacing:5px;font-weight:300}.brand b{color:#b6f9db}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:8px;color:#87aea7}button{color:inherit;border:1px solid #92bdb455;background:#0a2025a8;cursor:pointer;font:inherit;padding:12px 18px;border-radius:3px}button:hover{background:#234946}#sound{font-size:10px;letter-spacing:2px}#hud{position:absolute;top:118px;left:36px;width:275px}.label{font-size:10px;letter-spacing:3px;color:#8fbaa9}h2{font-weight:400;font-family:Georgia,serif;font-size:25px;margin:10px 0 18px}.meter{height:3px;background:#365354}.meter i{display:block;background:#d4db93;width:100%;height:100%;transition:width .15s}.stats{display:flex;justify-content:space-between;font-size:11px;color:#a4bab4;margin-top:10px}#hint{position:absolute;bottom:28px;width:100%;text-align:center;font-size:9px;letter-spacing:2px;color:#a3c8c0}#hint span{margin:0 18px;color:#c4df92}#overlay{position:fixed;inset:0;background:linear-gradient(90deg,#06131ee8,#06131e62 65%,transparent);display:flex;align-items:center;padding:7vw}article{max-width:475px}h1{font:normal clamp(44px,6vw,80px)/1.04 Georgia,serif;margin:23px 0}h1 em{color:#d6eeae}p{font-size:15px;line-height:1.8;color:#b8cfc8}#start{margin:20px 0 22px;background:#cce3a8;color:#102c30;border:0;font-size:11px;letter-spacing:2px;padding:18px 25px;min-width:240px;text-align:left}#start span{float:right}article small{display:block;font-size:11px;line-height:1.8;color:#87a49f}#letter{position:absolute;bottom:85px;left:50%;transform:translateX(-50%);width:min(510px,80vw);background:#0b2429eb;border:1px solid #648c7455;padding:20px 25px;text-align:center;font:italic 18px/1.6 Georgia,serif;opacity:0;transition:opacity .5s;pointer-events:none}#touch{position:absolute;right:20px;bottom:55px;text-align:center;display:none;touch-action:none}#touch button{width:48px;height:48px;padding:0;margin:3px;background:#11323cc9} @media(pointer:coarse){#touch{display:block}#hint{font-size:8px;bottom:17px;letter-spacing:1px}#hint span{margin:0 5px}}@media(max-width:600px){header{left:20px;right:20px;top:20px}.brand{font-size:17px}#hud{left:20px;top:90px;width:230px}h2{font-size:20px}#overlay{padding:8vw;background:#06131ec9}#hint{max-width:65%;padding:0 14px;text-align:left;font-size:8px;line-height:2}#letter{bottom:210px}}
#overlay{background-image:linear-gradient(90deg,#06131ef5 5%,#06131eba 43%,#06131e35),url('./assets/cover.webp');background-size:cover;background-position:center}#overlay article{position:relative}@media(max-width:600px){#overlay{background-image:linear-gradient(#06131ebf,#06131ee8),url('./assets/cover.webp')}}

#bearing{color:#e0e7aa;font-size:12px;letter-spacing:1px;margin:-8px 0 17px}@media(max-width:600px){#touch{display:block}}