
:root{font-family:Arial,Helvetica,sans-serif;color:#f1efda;background:#17190f;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{position:fixed;width:100%;height:100%;inset:0;image-rendering:pixelated}.grain,.vignette{position:fixed;inset:0;pointer-events:none}.grain{opacity:.12;background:repeating-linear-gradient(0deg,transparent 0 2px,#111 3px 4px);z-index:2}.vignette{background:radial-gradient(ellipse at 62% 48%,transparent 10%,#050702b0 100%);z-index:1}header{position:fixed;top:32px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center;z-index:5}.brand{font-size:24px;letter-spacing:-2px;font-weight:900;color:inherit;text-decoration:none}.brand span{font-family:monospace;font-size:10px;letter-spacing:2px;margin-left:22px;font-weight:400;opacity:.5}.rec{font:11px monospace;letter-spacing:2px}.rec i{display:inline-block;width:6px;height:6px;border-radius:100%;background:#de694e;margin-right:8px}.rec span{margin-left:20px;opacity:.55}.panel{position:absolute;z-index:3;left:9%;top:18%;max-width:570px}.eyebrow{font:10px monospace;letter-spacing:3px;color:#cec78b}.chapter{font:11px monospace;letter-spacing:3px;margin:34px 0 15px;color:#d8d6c0}h1{font-size:clamp(70px,9vw,138px);line-height:.8;letter-spacing:-8px;margin:0;position:relative;font-weight:900}h1 em{font-style:normal;color:#d8d883}h1>span{font:12px monospace;letter-spacing:1px;vertical-align:top;display:inline-block;margin:10px 0 0 22px;border:1px solid #9b9b58;padding:5px}.intro{font-size:16px;line-height:1.6;opacity:.72;margin:25px 0}.mission{border-left:2px solid #c7cb71;padding-left:16px;margin:24px 0}.mission b{font:10px monospace;letter-spacing:1px}.mission p{font-size:12px;line-height:1.6;color:#b9bba5}button{cursor:pointer;border:0;background:#d4db86;color:#1c2011;font:700 12px monospace;letter-spacing:2px;padding:19px 23px}#start{width:300px;display:flex;justify-content:space-between}button:hover{background:#eef5a1}button:focus-visible{outline:2px solid white;outline-offset:4px}.keys{display:flex;gap:15px;margin-top:26px;flex-wrap:wrap;max-width:520px;color:#b1b49f;font:10px monospace}.keys span{display:flex;gap:6px;align-items:center}kbd{font:9px monospace;border:1px solid #777b5b;padding:4px;color:#e6e7d6}.note,.comfort{font:10px monospace;color:#969b82}.note{margin-top:22px}.comfort{display:flex;align-items:center;gap:5px}.sound{position:fixed;right:40px;bottom:30px;z-index:6;background:transparent;color:#d9dcc4;border:1px solid #6c7056;padding:10px;font-size:9px}.corner{position:fixed;bottom:35px;left:42px;font:10px monospace;letter-spacing:2px;z-index:3}.corner span{opacity:.4;margin-left:20px}#hud{position:fixed;inset:0;z-index:4;pointer-events:none}.objective{position:absolute;top:110px;left:42px}.objective span,.bottom span{font:9px monospace;letter-spacing:2px;opacity:.6}.objective strong{display:block;font:12px monospace;margin-top:8px;letter-spacing:1px}#fuses{font-size:27px;letter-spacing:8px;color:#e4eab0;margin-top:8px}#crosshair{position:absolute;top:50%;left:50%;font:14px monospace;opacity:.5;transform:translate(-50%,-50%)}#prompt{position:absolute;top:62%;width:100%;text-align:center;font:13px monospace;color:#eff4b1;text-shadow:0 2px 8px black}.bottom{position:absolute;bottom:95px;left:42px;right:42px;display:flex;align-items:end;justify-content:space-between}.stamina{width:150px;height:3px;background:#70734e;margin-top:10px}.stamina div{height:100%;width:100%;background:#dce6a0}#threat{font:11px monospace;letter-spacing:3px}.hudkeys{font:9px monospace;opacity:.5}.modal{position:absolute;inset:0;z-index:5;background:#090e08df;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.modal h2{font-size:clamp(40px,7vw,95px);letter-spacing:-3px;margin:24px 0}.modal p{color:#bfc4a5;max-width:450px;line-height:1.7;margin:0 20px 30px}.modal button{min-width:260px;margin:5px}.secondary{background:transparent;color:#d6dcba;border:1px solid #626b49}[hidden]{display:none!important}body.playing .corner{opacity:.4}@media(max-height:800px){.panel{top:14%}h1{font-size:85px}.chapter{margin-top:20px}.intro{margin:17px 0}.mission{margin:17px 0}.keys{margin-top:17px}}@media(max-width:650px){header{left:22px;right:22px;top:22px}.panel{left:7%;top:15%}h1{font-size:88px}.eyebrow{font-size:8px}.keys{max-width:330px}.corner{left:22px}.corner span{display:none}.hudkeys{display:none}.bottom{left:22px;right:22px}#threat{font-size:8px;letter-spacing:1px}.objective{left:22px}.sound{right:22px}.brand span{display:none}}
