:root{
  --bg:#03050f; --fg:#dfe6ff; --accent:#9cb4fc; --line:#6c84e4; --glow:84,108,228; --cream:#e4d4b4;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{margin:0;background:var(--bg) radial-gradient(ellipse 90% 60% at 50% 0%,rgba(60,84,228,.30),transparent 70%) no-repeat fixed}
body{margin:0;background:radial-gradient(ellipse 70% 45% at 50% 100%,rgba(108,108,228,.16),transparent 70%) no-repeat fixed}
body{
  color:var(--fg);
  font-family:"JetBrains Mono","Courier New",ui-monospace,monospace;
  font-size:15px; line-height:1.6; min-height:100vh;
}
.wrap{
  max-width:560px; min-height:100vh; margin:0 auto; padding:40px 20px 60px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}

/* Logo + lueur */
.logo-wrap{position:relative;width:150px;height:150px;margin:0 auto 26px}
.logo-wrap::before{
  content:"";position:absolute;inset:-34px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(var(--glow),.65),transparent 65%);
}
.logo-code{position:absolute;top:0;left:0;width:150px;height:150px;z-index:2;pointer-events:none;transition:opacity .6s}
.logo{position:relative;display:block;width:150px;height:150px;mix-blend-mode:screen}
.js .logo{opacity:0}
.logo-wrap.on .logo{opacity:1;animation:gin .9s linear,gl 5s infinite 1.5s}
.logo-wrap.on::before{animation:glow 3s ease-in-out infinite}

@keyframes glow{0%,100%{opacity:.3;transform:scale(.95)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes gin{
  0%{opacity:0}
  10%{opacity:1;transform:translate(-6px,0) skewX(8deg)}
  20%{opacity:.2;transform:translate(5px,0)}
  30%{opacity:1;transform:translate(-3px,2px) skewX(-6deg);filter:brightness(2)}
  45%{opacity:.4;transform:none;filter:none}
  60%{opacity:1;transform:translate(3px,0);filter:brightness(1.6)}
  80%{opacity:.7;transform:none;filter:none}
  100%{opacity:1}
}
@keyframes gl{
  0%,92%,100%{transform:none;filter:none}
  93%{transform:translate(-4px,0) skewX(6deg);filter:brightness(1.8)}
  95%{transform:translate(4px,1px) skewX(-6deg)}
  97%{transform:translate(-2px,0);filter:brightness(1.4)}
}

/* Titre tapé */
h1{margin:0 0 26px;font-size:20px;font-weight:400;letter-spacing:1px;text-align:center;color:var(--accent);min-height:1.6em}
.cur{display:inline-block;width:9px;height:1em;background:var(--accent);vertical-align:-3px;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Liens */
.links{width:100%;display:flex;flex-direction:column;gap:12px}
.lk{
  display:block;text-align:center;border:1px solid rgba(108,132,228,.85);padding:13px 14px;
  color:var(--accent);text-decoration:none;transition:.35s;
  box-shadow:0 0 10px rgba(var(--glow),.35),inset 0 0 10px rgba(var(--glow),.12);
}
.js .lk{opacity:0;transform:translateX(-6px)}
.js .lk.on{opacity:1;transform:none}
.lk.on{animation:gin .9s linear,gl 5s infinite calc(1.5s + var(--d,0s)),lkglow 3s ease-in-out infinite}
@keyframes lkglow{0%,100%{box-shadow:0 0 10px rgba(var(--glow),.35),inset 0 0 10px rgba(var(--glow),.12)}50%{box-shadow:0 0 24px rgba(var(--glow),.7),inset 0 0 12px rgba(var(--glow),.2)}}
.lk:hover,.lk:focus-visible{background:var(--cream);color:#03050f;border-color:var(--cream);outline:none}

.note{margin:24px 0 0;font-size:12px;color:#7d8ac0;text-align:center;transition:opacity .8s}
.js .note{opacity:0}
.note.decoding,.lk.decoding{color:#6c84e4}
.js .note.on{opacity:1}

/* Sécurité si le JS ne démarre pas */
.ready .logo,.ready .lk,.ready .note{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  .cur,.logo-wrap.on .logo,.logo-wrap.on::before,.lk.on{animation:none}
  .logo-wrap::before{opacity:.5}
}