:root{
  --navy:#0A1B2D;      /* fond du logo */
  --deep:#061019;      /* bords */
  --cyan:#4FD3EC;
  --blue:#1B6FA8;
  --ivory:#DCEAF2;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--navy);touch-action:none}
body{font-family:"JetBrains Mono",monospace;color:var(--ivory);-webkit-font-smoothing:antialiased;cursor:none}

canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(110% 78% at 50% 42%,transparent 38%,rgba(6,16,25,.92) 100%)}

.ui{position:fixed;inset:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(26px,5vw,46px) 20px;text-align:center}

h1{font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 108;
  font-weight:300;text-transform:uppercase;
  font-size:clamp(.82rem,2.5vw,1.35rem);letter-spacing:.44em;text-indent:.44em;
  color:rgba(220,234,242,.9)}
.rule{width:clamp(90px,16vw,150px);height:1px;margin:16px auto 0;
  background:linear-gradient(90deg,transparent,rgba(79,211,236,.45),transparent)}

.hint{font-size:11.5px;letter-spacing:.14em;color:rgba(79,211,236,.8);min-height:17px;transition:opacity .4s}
.hint em{font-style:normal;color:rgba(220,234,242,.42)}
.hint button{font:inherit;letter-spacing:.14em;color:var(--cyan);background:none;border:0;
  border-bottom:1px solid currentColor;cursor:pointer;padding:0 0 1px;pointer-events:auto}
.foot{margin-top:14px;font-size:9.5px;letter-spacing:.34em;color:rgba(220,234,242,.2)}
.foot a{color:inherit;text-decoration:none;pointer-events:auto}
.foot a:hover{color:var(--cyan)}

.flash{position:fixed;inset:0;z-index:4;pointer-events:none;background:#BFF0FB;opacity:0;transition:opacity .6s}
.flash.on{opacity:.18;transition:none}