:root{
  --bg:#0a1240; --ink:#f3efff; --mute:#9aa3d9; --line:rgba(185,169,255,.28);
  --accent:#f2c2a4; --teal:#b9a9ff; --teal-l:rgba(150,160,255,.55); --cream:#c9d6ff;
  --f-display:'Onest',system-ui,sans-serif; --f-body:'Manrope',system-ui,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--f-body);overflow:hidden;-webkit-font-smoothing:antialiased}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#fallback{position:fixed;inset:0;margin:auto;max-width:90vmin;max-height:80vh;object-fit:contain}
.mono{font-family:var(--f-mono)}
.label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}

/* кругла картка згадки: виростає з точки (transform-origin = точка) */
.card{position:fixed;z-index:5;border-radius:50%;opacity:0;transform:scale(.04);pointer-events:none;
  transition:transform .65s cubic-bezier(.2,.85,.25,1),opacity .4s ease}
.card.on{opacity:1;transform:none;pointer-events:auto}
.card.instant{transition:none}
.c-link{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;
  padding:15% 14%;border-radius:50%;color:#0b1030;text-decoration:none;
  border:1px solid #c9ad66;
  background:radial-gradient(circle at 42% 32%,#b89a52,#9D833E 55%,#86702f);
  box-shadow:0 0 0 6px rgba(157,131,62,.14),0 18px 60px -12px rgba(0,0,0,.65);transition:border-color .25s,box-shadow .25s}
.c-link:hover{border-color:#e3cb8a;box-shadow:0 0 0 6px rgba(227,203,138,.2),0 18px 60px -12px rgba(0,0,0,.65)}
.c-link .label{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(11,16,48,.7)}
.c-link h2{font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.2;margin:10px 0 6px;color:#0b1030;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.c-as{font-size:11.5px;color:#2a2410;margin-bottom:8px;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-quote{margin:0;font-size:12.5px;line-height:1.45;color:#16192e;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.c-go{margin-top:12px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#0b1030;font-weight:500}
.c-link:hover .c-go{text-decoration:underline;text-underline-offset:3px}
.card .close{position:absolute;top:5%;left:50%;transform:translateX(-50%);width:30px;height:30px;font-size:20px;line-height:1;color:rgba(11,16,48,.6);border-radius:50%}
.card .close:hover{color:#0b1030}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}