*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#04050d}
canvas{display:block}

#vig{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(2,3,12,.55) 100%)}

#cross{position:fixed;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;
  border-radius:50%;background:rgba(255,255,255,.65);z-index:3;pointer-events:none}

#hint{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  color:#9aa6d8;font:14px/1.4 Georgia,serif;letter-spacing:.12em;
  opacity:0;transition:opacity .8s;z-index:3;pointer-events:none;text-shadow:0 1px 8px #000;white-space:nowrap}
#hint.show{opacity:.85}

#toast{position:fixed;top:18%;left:50%;transform:translateX(-50%);text-align:center;
  color:#a8ecff;font:600 26px Georgia,serif;letter-spacing:.25em;
  opacity:0;transition:opacity 1s;z-index:4;pointer-events:none;
  text-shadow:0 0 24px rgba(90,220,255,.7);white-space:nowrap}
#toast span{display:block;margin-top:10px;font:400 14px Georgia,serif;color:#7fb4cc;letter-spacing:.2em}
#toast.show{opacity:1}

#fade{position:fixed;inset:0;background:#000;opacity:0;transition:opacity .25s;pointer-events:none;z-index:5}
#fade.show{opacity:1}

#ov{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;cursor:pointer;transition:opacity .45s;
  background:radial-gradient(ellipse at 50% 38%, rgba(12,14,38,.82), rgba(2,3,10,.95))}
#ov.hidden{opacity:0;pointer-events:none}

.t1{font:600 54px Georgia,serif;color:#e9dcae;letter-spacing:.22em;
  text-shadow:0 0 34px rgba(130,150,255,.5);text-align:center}
.t2{font:15px Georgia,serif;color:#8d9bd6;letter-spacing:.34em}
.keys{margin-top:26px;font:14px Georgia,serif;color:#aab3d9;letter-spacing:.1em}
.cta{margin-top:8px;font:16px Georgia,serif;color:#e9dcae;letter-spacing:.18em;animation:pulse 2.2s ease-in-out infinite}
.quest{font:13px Georgia,serif;color:#6f7bb0;letter-spacing:.16em;font-style:italic}
#home{position:absolute;top:22px;left:26px;font:13px Georgia,serif;color:#8d9bd6;
  letter-spacing:.18em;text-decoration:none;opacity:.65;
  border-bottom:1px solid rgba(141,155,214,.35);transition:opacity .3s}
#home:hover{opacity:1}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}