/* Retrace The Lines — links hub. */
/* ---- fonts, served from this domain (both SIL Open Font License) ---- */
/* Archivo is one variable file: weight 100-900 and width 62%-125% (condensed UI text to expanded display) */
@font-face{font-family:'Archivo';src:url(/assets/fonts/archivo-latin-wdth.e3a28ead.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-400.08949f72.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* ---- base ---- */
html{background:#000;-webkit-text-size-adjust:100%}
/* images carry width/height attributes so the page does not jump while they load; CSS still decides the size */
img{height:auto}
/* visible keyboard focus everywhere */
:focus-visible{outline:3px solid #FF80B5;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:#000}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color:#FF80B5;text-decoration-thickness:3px;text-underline-offset:4px}
@keyframes rtl-zoom{from{scale:1.1}to{scale:1}}
@keyframes rtl-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rtl-up{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
.a-zoom{animation:rtl-zoom 1.6s cubic-bezier(.2,.7,.2,1) both}
.a-wipe{animation:rtl-wipe .8s cubic-bezier(.7,0,.2,1) .2s both}
.a-up{animation:rtl-up .5s cubic-bezier(.2,.7,.2,1) .5s both}
/* ---- a bit of life every few seconds: a pink shine sweeps each link in turn, the two key buttons shiver, the icons pop ---- */
@keyframes rtl-shine{0%{translate:-130% 0}12%{translate:130% 0}100%{translate:130% 0}}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,128,181,.6) 50%,transparent 65%);translate:-130% 0;animation:rtl-shine 8s linear infinite;animation-delay:var(--shine-delay,0s);pointer-events:none}
.shine-w::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%)}
@keyframes rtl-buzz{0%,7%,100%{translate:0 0;rotate:0deg}1%{translate:-2px 0;rotate:-.5deg}2%{translate:3px 0;rotate:.5deg}3%{translate:-3px 0;rotate:-.4deg}4%{translate:3px 0;rotate:.4deg}5%{translate:-2px 0;rotate:-.2deg}6%{translate:1px 0;rotate:.1deg}}
.a-up.buzz{animation:rtl-up .5s cubic-bezier(.2,.7,.2,1) both,rtl-buzz 10s ease infinite}
@keyframes rtl-pop{0%,8%,100%{scale:1}3%{scale:1.22}}
.pop{animation:rtl-pop 9s ease infinite}
.tap{transition:scale .1s ease}
.tap:active{scale:.98}
@media (prefers-reduced-motion:reduce){.a-zoom,.a-wipe,.a-up,.pop,.buzz,.shine::after{animation:none!important}.tap{transition:none}}