<!--


        ███████╗██████╗  █████╗  ██████╗███████╗    ██╗███╗   ██╗██╗   ██╗ █████╗ ██████╗ ███████╗██████╗ ███████╗
        ██╔════╝██╔══██╗██╔══██╗██╔════╝██╔════╝    ██║████╗  ██║██║   ██║██╔══██╗██╔══██╗██╔════╝██╔══██╗██╔════╝
        ███████╗██████╔╝███████║██║     █████╗      ██║██╔██╗ ██║██║   ██║███████║██║  ██║█████╗  ██████╔╝███████╗
        ╚════██║██╔═══╝ ██╔══██║██║     ██╔══╝      ██║██║╚██╗██║╚██╗ ██╔╝██╔══██║██║  ██║██╔══╝  ██╔══██╗╚════██║
        ███████║██║     ██║  ██║╚██████╗███████╗    ██║██║ ╚████║ ╚████╔╝ ██║  ██║██████╔╝███████╗██║  ██║███████║
        ╚══════╝╚═╝     ╚═╝  ╚═╝ ╚═════╝╚══════╝    ╚═╝╚═╝  ╚═══╝  ╚═══╝  ╚═╝  ╚═╝╚═════╝ ╚══════╝╚═╝  ╚═╝╚══════╝


            ▀▄   ▄▀              ▀▄   ▄▀              ▀▄   ▄▀              ▀▄   ▄▀              ▀▄   ▄▀
           ▄█▀███▀█▄            ▄█▀███▀█▄            ▄█▀███▀█▄            ▄█▀███▀█▄            ▄█▀███▀█▄
          █▀███████▀█          █▀███████▀█          █▀███████▀█          █▀███████▀█          █▀███████▀█
          ▀ ▀▄▄ ▄▄▀ ▀          ▀ ▀▄▄ ▄▄▀ ▀          ▀ ▀▄▄ ▄▄▀ ▀          ▀ ▀▄▄ ▄▄▀ ▀          ▀ ▀▄▄ ▄▄▀ ▀


              ▄▄▄████▄▄▄              ▄▄▄████▄▄▄              ▄▄▄████▄▄▄              ▄▄▄████▄▄▄
            ▄██▀▀    ▀▀██▄          ▄██▀▀    ▀▀██▄          ▄██▀▀    ▀▀██▄          ▄██▀▀    ▀▀██▄
           ▐█▀   ▄▄▄▄   ▀█▌        ▐█▀   ▄▄▄▄   ▀█▌        ▐█▀   ▄▄▄▄   ▀█▌        ▐█▀   ▄▄▄▄   ▀█▌
           ██   ▐████▌   ██        ██   ▐████▌   ██        ██   ▐████▌   ██        ██   ▐████▌   ██
           ▀█▄   ▀▀▀▀   ▄█▀        ▀█▄   ▀▀▀▀   ▄█▀        ▀█▄   ▀▀▀▀   ▄█▀        ▀█▄   ▀▀▀▀   ▄█▀
            ▀██▄▄    ▄▄██▀          ▀██▄▄    ▄▄██▀          ▀██▄▄    ▄▄██▀          ▀██▄▄    ▄▄██▀
              ▀▀▀████▀▀▀              ▀▀▀████▀▀▀              ▀▀▀████▀▀▀              ▀▀▀████▀▀▀


           ▄██▄     ▄██▄         ▄██▄     ▄██▄         ▄██▄     ▄██▄         ▄██▄     ▄██▄         ▄██▄     ▄██▄
          ▐███▌   ▐███▌         ▐███▌   ▐███▌         ▐███▌   ▐███▌         ▐███▌   ▐███▌         ▐███▌   ▐███▌
           ▀█████████▀           ▀█████████▀           ▀█████████▀           ▀█████████▀           ▀█████████▀
             ▀█████▀               ▀█████▀               ▀█████▀               ▀█████▀               ▀█████▀
             ▄▀ ▀▄                 ▄▀ ▀▄                 ▄▀ ▀▄                 ▄▀ ▀▄                 ▄▀ ▀▄


                                                       ▄█▄
                                                      █████
                                                   ▄█████████▄
                                                   █████████████
                                                       ███
                                                       ███

                                                    << PLAYER >>


-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>ASCII Background Demo</title>

<!-- SEO & Bot Meta Tags -->
<meta name="description" content="Interactive ASCII art background demo with animated terminal commands, SQL queries, and SRE tooling examples.">
<meta name="author" content="Your Name">
<meta name="keywords" content="ASCII art, terminal, SRE, DevOps, SQL, animation, canvas">

<!-- Open Graph (Social Sharing) -->
<meta property="og:title" content="ASCII Background Demo">
<meta property="og:description" content="Interactive ASCII art background with animated terminal commands and SQL queries.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/og-image.png">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ASCII Background Demo">
<meta name="twitter:description" content="Interactive ASCII art background with animated terminal commands.">

<!-- Schema.org JSON-LD Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "ASCII Background Demo",
  "description": "Interactive ASCII art background demo featuring animated terminal commands, SQL queries, and SRE/DevOps tooling examples.",
  "url": "https://example.com/",
  "author": {
    "@type": "Person",
    "name": "Your Name",
    "url": "https://example.com/",
    "sameAs": [
      "https://github.com/yourusername",
      "https://linkedin.com/in/yourusername",
      "https://twitter.com/yourusername"
    ],
    "jobTitle": "Site Reliability Engineer",
    "knowsAbout": ["SRE", "DevOps", "Kubernetes", "PostgreSQL", "Infrastructure"]
  },
  "keywords": ["ASCII art", "terminal animation", "SRE", "DevOps", "SQL"]
}
</script>

<!-- Hints for AI bots (optional, informational) -->
<!-- 
  AI Crawlers: This page contains an interactive ASCII art demo.
  Key content is in the .content div. The canvas animation shows
  procedurally generated terminal commands (kubectl, terraform, docker, aws)
  and SQL queries (PostgreSQL) for decorative purposes.
  
  For a plain-text summary, see /llms.txt
-->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=source-code-pro:400,700" rel="stylesheet">
  <script type="module" crossorigin>!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver(e=>{for(const $ of e)if("childList"===$.type)for(const e of $.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&t(e)}).observe(document,{childList:1,subtree:1})}function t(e){if(e.ep)return;e.ep=1;const t=function(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),"use-credentials"===e.crossOrigin?t.credentials="include":"anonymous"===e.crossOrigin?t.credentials="omit":t.credentials="same-origin",t}(e);fetch(e.href,t)}}();const e=document.getElementById("asciiCanvas"),t=e.getContext("2d");let $=14,n=18,r=[],s=100,a=100,o=50;const i=[()=>`SELECT ${b()}, ${b()}, ${b()} FROM ${A()} WHERE ${b()} ${L()} ${_()};`,()=>`INSERT INTO ${A()} (${b()}, ${b()}) VALUES (${_()}, ${_()});`,()=>`UPDATE ${A()} SET ${b()} = ${_()} WHERE ${b()} ${L()} ${_()};`,()=>`DELETE FROM ${A()} WHERE ${b()} ${L()} ${_()};`,()=>`CREATE INDEX idx_${v(999)} ON ${A()}(${b()});`,()=>`SELECT COUNT(*) FROM ${A()} GROUP BY ${b()} HAVING COUNT(*) > ${v(100)};`,()=>`SELECT a.${b()}, b.${b()} FROM ${A()} a JOIN ${A()} b ON a.id = b.${b()}_id;`,()=>`ALTER TABLE ${A()} ADD COLUMN ${b()} ${O(p)};`,()=>`EXPLAIN ANALYZE SELECT * FROM ${A()} WHERE ${b()} = ${_()};`,()=>"BEGIN TRANSACTION;",()=>"COMMIT;",()=>"ROLLBACK;",()=>`WITH cte AS (SELECT ${b()}, ROW_NUMBER() OVER (PARTITION BY ${b()} ORDER BY ${b()} DESC) rn FROM ${A()}) SELECT * FROM cte WHERE rn = 1;`,()=>`SELECT ${b()}, LAG(${b()}) OVER (ORDER BY ${b()}) as prev_val FROM ${A()};`,()=>`SELECT ${b()}, NTILE(${v(10)}) OVER (ORDER BY ${b()}) as bucket FROM ${A()};`,()=>`SELECT COALESCE(${b()}, ${b()}, 'N/A') FROM ${A()} WHERE ${b()} IS NOT NULL;`,()=>`SELECT ${b()}, DENSE_RANK() OVER (ORDER BY ${b()} DESC) FROM ${A()};`,()=>`SELECT * FROM ${A()} WHERE ${b()} = ANY(ARRAY[${_()}, ${_()}, ${_()}]);`,()=>`SELECT ${b()}, percentile_cont(0.${v(99)}) WITHIN GROUP (ORDER BY ${b()}) FROM ${A()} GROUP BY ${b()};`,()=>`VACUUM ANALYZE ${A()};`,()=>`REINDEX TABLE ${A()};`,()=>`SELECT pg_size_pretty(pg_total_relation_size('${A()}'));`,()=>`SELECT * FROM pg_stat_user_tables WHERE relname = '${A()}';`,()=>"SELECT pid, query, state, wait_event_type FROM pg_stat_activity WHERE state != 'idle';",()=>`SELECT pg_terminate_backend(${v(9999)});`,()=>"SELECT * FROM pg_locks WHERE NOT granted;",()=>`ALTER SYSTEM SET shared_buffers = '${v(16)}GB';`,()=>"SELECT schemaname, relname, seq_scan, idx_scan FROM pg_stat_user_tables ORDER BY seq_scan DESC LIMIT 10;",()=>`CREATE MATERIALIZED VIEW mv_${B()} AS SELECT ${b()}, COUNT(*) FROM ${A()} GROUP BY ${b()};`,()=>`REFRESH MATERIALIZED VIEW CONCURRENTLY mv_${B()};`,()=>`SELECT * FROM ${A()} TABLESAMPLE BERNOULLI(${v(10)});`,()=>`SELECT ${b()}, jsonb_agg(${b()}) FROM ${A()} GROUP BY ${b()};`,()=>`UPDATE ${A()} SET ${b()} = ${b()} || '{"key": "value"}'::jsonb WHERE ${b()} @> '{}';`,()=>`SELECT * FROM ${A()} WHERE ${b()} @@ to_tsquery('${B()} & ${B()}');`],c=[()=>`$ ls -la /var/log/${F()}`,()=>`$ grep -r "${B()}" /etc/${F()}/*`,()=>`$ find . -name "*.${I()}" -mtime -${v(30)}`,()=>`$ chmod ${O(["644","755","600","777","440"])} ${x()}`,()=>`$ cat /proc/${v(9999)}/status | head -20`,()=>`$ ps aux | grep ${C()} | awk '{print $2}'`,()=>`$ tail -f /var/log/${B()}.log | grep ERROR`,()=>`$ curl -X ${O(g)} https://api.${P()}/v${v(3)}/${H()}`,()=>`$ docker run -d --name ${B()}_${v(99)} -p ${q()}:${q()} ${w()}`,()=>`$ ssh ${U()}@${W()} -i ~/.ssh/${B()}_rsa`,()=>`$ tar -czvf backup_2024${String(v(12)).padStart(2,"0")}${String(v(28)).padStart(2,"0")}.tar.gz /home/${U()}/`,()=>`$ systemctl status ${N()}`,()=>`$ journalctl -u ${N()} --since "${v(24)} hours ago"`,()=>`$ awk '{sum+=$${v(5)}} END {print sum}' ${x()}`,()=>`$ sed -i 's/${B()}/${B()}/g' ${x()}`,()=>`$ netstat -tulpn | grep :${q()}`,()=>`$ df -h /dev/sd${String.fromCharCode(97+Math.floor(26*Math.random()))}${v(9)}`,()=>`$ git log --oneline -${v(20)} --author="${U()}"`,()=>`$ npm install ${O(T)}@^${v(9)}.${v(9)}.${v(9)}`,()=>`$ python3 -m venv ./${B()}_env && source ./${B()}_env/bin/activate`,()=>`$ kubectl get pods -n ${j()} -o wide --show-labels`,()=>`$ kubectl describe pod ${B()}-${V(5)} -n ${j()} | grep -A 10 Events`,()=>`$ kubectl logs -f deployment/${B()} -n ${j()} --tail=100`,()=>`$ kubectl exec -it ${B()}-${V(5)} -n ${j()} -- /bin/sh`,()=>`$ kubectl rollout restart deployment/${B()} -n ${j()}`,()=>`$ kubectl scale deployment/${B()} --replicas=${v(10)} -n ${j()}`,()=>`$ kubectl top pods -n ${j()} --sort-by=memory`,()=>`$ kubectl get events -n ${j()} --sort-by='.lastTimestamp'`,()=>`$ helm upgrade --install ${B()} ./charts/${B()} -f values-${K()}.yaml`,()=>`$ helm rollback ${B()} ${v(10)} -n ${j()}`,()=>`$ terraform plan -var-file=${K()}.tfvars -out=plan.out`,()=>"$ terraform apply -auto-approve plan.out",()=>`$ terraform state mv aws_instance.${B()} module.${B()}.aws_instance.main`,()=>`$ ansible-playbook -i inventory/${K()} playbooks/${B()}.yml --limit ${B()}`,()=>`$ aws ec2 describe-instances --filters "Name=tag:Environment,Values=${K()}" --query 'Reservations[].Instances[].[InstanceId,State.Name,PrivateIpAddress]'`,()=>`$ aws logs filter-log-events --log-group-name /ecs/${B()} --start-time $(date -d '1 hour ago' +%s)000`,()=>`$ aws ecs update-service --cluster ${B()}-${K()} --service ${B()} --force-new-deployment`,()=>"$ aws rds describe-db-instances --query 'DBInstances[*].[DBInstanceIdentifier,DBInstanceStatus,Endpoint.Address]'",()=>"$ prometheus query 'rate(http_requests_total{status=~\"5..\"}[5m])'",()=>`$ promtool check rules /etc/prometheus/rules/${B()}.yml`,()=>"$ curl -s localhost:9090/api/v1/query?query=up | jq '.data.result[] | select(.value[1]==\"0\")'",()=>"$ etcdctl endpoint status --cluster -w table",()=>"$ etcdctl defrag --cluster",()=>`$ vault kv get -format=json secret/${K()}/${B()} | jq -r '.data.data'`,()=>`$ consul kv get -recurse ${B()}/config/`,()=>"$ consul members -status=alive -detailed",()=>`$ openssl s_client -connect ${P()}:443 -servername ${P()} 2>/dev/null | openssl x509 -noout -dates`,()=>`$ tcpdump -i eth0 -nn 'port ${q()} and host ${W()}' -c 100 -w capture.pcap`,()=>`$ strace -f -p $(pgrep -f ${C()}) -e trace=network -s 1024`,()=>`$ perf record -g -p $(pgrep -f ${C()}) -- sleep 30 && perf report`,()=>"$ bpftrace -e 'tracepoint:syscalls:sys_enter_open { printf(\"%s %s\\n\", comm, str(args->filename)); }'",()=>"$ ss -tunlp | grep LISTEN | awk '{print $5}' | sort -u",()=>"$ iptables -L -n -v --line-numbers | grep -i drop",()=>"$ nft list ruleset | grep -A5 'chain input'",()=>"$ dmesg -T | grep -i 'oom\\|killed\\|error' | tail -50",()=>`$ cat /sys/fs/cgroup/memory/docker/${V(12)}/memory.usage_in_bytes`,()=>`$ sysctl -w net.core.somaxconn=${v(65535)}`,()=>`$ echo ${v(3)} > /proc/sys/vm/drop_caches`,()=>`$ lsof -i :${q()} -P -n | grep ESTABLISHED`,()=>"$ vmstat 1 10 | awk 'NR>2 {print $1,$2,$15,$16}'",()=>"$ iostat -xz 1 5 | grep -E 'sd[a-z]|nvme'",()=>"$ sar -n DEV 1 5 | grep eth0"],u=[()=>`  ${v(999)} rows affected (${v(99)}.${v(999)}ms)`,()=>`  -> Seq Scan on ${A()}  (cost=${v(999)}..${v(9999)} rows=${v(9999)})`,()=>`-rw-r--r-- 1 ${U()} ${U()} ${v(9999)} ${k()} ${v(28)} ${Y()} ${x()}`,()=>`drwxr-xr-x ${v(9)} ${U()} ${U()} ${v(999)} ${k()} ${v(28)} ${Y()} ${F()}/`,()=>`[${G()}] INFO: Connection established from ${W()}`,()=>`[${G()}] WARN: Retry attempt ${v(5)}/5 for ${H()}`,()=>`  PID: ${v(65535)}  CPU: ${v(100)}%  MEM: ${v(8192)}MB  TIME: ${Y()}`,()=>`HTTP/${v(2)}.${v(1)} ${D()} ${function(){const e=D();return M[e]||"OK"}()}`,()=>`  "id": ${v(99999)}, "status": "${B()}", "created_at": "${G()}"`,()=>`SUCCESS: Operation completed in ${v(999)}ms`,()=>`ERROR: Connection refused to ${W()}:${q()}`,()=>`  ${V(8)}-${V(4)}-${V(4)}-${V(4)}-${V(12)}`,()=>`pod/${B()}-${V(5)}   ${v(3)}/${v(3)}   Running   ${v(100)}   ${v(30)}d`,()=>"NAME                    READY   STATUS    RESTARTS   AGE",()=>`  Normal  Scheduled  ${v(60)}m   default-scheduler  Successfully assigned ${j()}/${B()}-${V(5)} to node-${v(10)}`,()=>`  Warning  OOMKilled  ${v(60)}m   kubelet  Container ${B()} exceeded memory limit`,()=>`  Normal  Pulled     ${v(60)}m   kubelet  Container image "${w()}" already present`,()=>`deployment.apps/${B()} restarted`,()=>`deployment.apps/${B()} scaled`,()=>`Release "${B()}" has been upgraded. Happy Helming!`,()=>`Plan: ${v(10)} to add, ${v(5)} to change, ${v(3)} to destroy.`,()=>`Apply complete! Resources: ${v(10)} added, ${v(5)} changed, ${v(3)} destroyed.`,()=>`TASK [${B()} : Configure ${B()}] ****************************************************`,()=>`ok: [${B()}-${v(10)}.${P()}]`,()=>`changed: [${B()}-${v(10)}.${P()}]`,()=>`i-${V(17)}  running  ${W()}`,()=>`arn:aws:ecs:us-east-1:${v(999999999999)}:service/${B()}-${K()}/${B()}`,()=>`{status="500", handler="/api/${H()}"} ${v(100)}`,()=>`ALERTS{alertname="${B()}_high", severity="critical"} 1`,()=>`up{instance="${W()}:${q()}", job="${B()}"} 1`,()=>`etcd-${v(3)}  https://${W()}:2379  ${v(99999999)}  ${v(999)}MB  true  false  ${v(10)}.${v(9)}.${v(9)}`,()=>"Key             Value",()=>"---             -----",()=>`lease_duration  ${v(3600)}s`,()=>"Node         Address          Status  Type    Build   Protocol  DC",()=>`${B()}-${v(10)}  ${W()}:8301  alive   server  1.${v(15)}.${v(9)}  2         dc1`,()=>`notAfter=${v(2025)}-${String(v(12)).padStart(2,"0")}-${String(v(28)).padStart(2,"0")}T${Y()}Z`,()=>`${v(99)} packets captured, ${v(99)} packets received by filter`,()=>`[pid ${v(65535)}] connect(3, {sa_family=AF_INET, sin_port=htons(${q()}), sin_addr=inet_addr("${W()}")}, 16) = 0`,()=>`  ${v(99)}.${v(99)}%  ${B()}::${B()}`,()=>"procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu-----",()=>" r  b   swpd   free   buff  cache   si   so    bi    bo   in   cs us sy id wa st",()=>` ${v(5)}  ${v(3)}   ${v(9999)}  ${v(99999)}  ${v(9999)} ${v(999999)}    0    0    ${v(999)}   ${v(999)} ${v(9999)} ${v(9999)} ${v(50)} ${v(20)} ${v(90)}  ${v(10)}  0`,()=>`nvme0n1  ${v(99)}.${v(99)}  ${v(9999)}.${v(99)}  ${v(9999)}.${v(99)}  ${v(99)}  ${v(99)}  ${v(99)}.${v(99)}  ${v(99)}.${v(99)}  ${v(99)}  ${v(99)}.${v(99)}`,()=>`eth0  ${v(9999999)} ${v(999999)} 0 0 0 0  ${v(9999999)} ${v(999999)} 0 0 0 0`],l=["users","orders","products","sessions","events","logs","accounts","transactions","metrics","configs"],d=["id","name","email","status","created_at","updated_at","user_id","type","value","count","timestamp","hash"],p=["VARCHAR(255)","INTEGER","BOOLEAN","TIMESTAMP","JSON","TEXT","BIGINT","DECIMAL(10,2)"],E=["=","!=",">","<",">=","<=","LIKE","IN"],m=["node","python","nginx","postgres","redis","docker","ssh","cron"],f=["nginx","postgresql","redis-server","docker","sshd","cron","systemd-resolved"],g=["GET","POST","PUT","DELETE","PATCH"],R=["log","json","yaml","conf","sh","py","js","sql"],h=["nginx:alpine","postgres:15","redis:7","node:20-slim","python:3.11"],T=["express","lodash","axios","react","typescript","webpack","eslint","jest"],y=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],S=[200,201,204,301,400,401,403,404,500,502,503],M={200:"OK",201:"Created",204:"No Content",301:"Moved",400:"Bad Request",401:"Unauthorized",403:"Forbidden",404:"Not Found",500:"Server Error",502:"Bad Gateway",503:"Unavailable"};function O(e){return e[Math.floor(Math.random()*e.length)]}function v(e){return Math.floor(Math.random()*e)+1}function A(){return O(l)}function b(){return O(d)}function L(){return O(E)}function _(){return Math.random()>.5?v(9999):`'${B()}'`}function C(){return O(m)}function N(){return O(f)}function I(){return O(R)}function w(){return O(h)}function k(){return O(y)}function D(){return O(S)}function B(){return O(["data","config","cache","temp","backup","auth","api","core","util","sync"])}function F(){return O(["nginx","apache2","mysql","app","system","security","audit"])}function x(){return`${B()}.${I()}`}function U(){return O(["root","admin","deploy","www-data","postgres","node"])}function P(){return O(["example.com","internal.io","service.net","cluster.local"])}function H(){return O(["users","data","sync","health","metrics","auth/token"])}function q(){return O([80,443,3e3,5432,6379,8080,8443,9e3])}function W(){return`${v(255)}.${v(255)}.${v(255)}.${v(255)}`}function Y(){return`${String(v(23)).padStart(2,"0")}:${String(v(59)).padStart(2,"0")}:${String(v(59)).padStart(2,"0")}`}function G(){return`2024-${String(v(12)).padStart(2,"0")}-${String(v(28)).padStart(2,"0")}T${Y()}Z`}function V(e){return[...Array(e)].map(()=>"0123456789abcdef"[Math.floor(16*Math.random())]).join("")}function j(){return O(["default","kube-system","monitoring","production","staging","ingress-nginx","cert-manager","logging"])}function K(){return O(["prod","staging","dev","qa","sandbox","uat"])}function z(){const e=Math.random();return e<.35?{text:O(i)(),type:"sql"}:e<.7?{text:O(c)(),type:"unix"}:{text:O(u)(),type:"output"}}function Z(e){const t=1e4*Math.sin(e);return t-Math.floor(t)}function J(e,t,$){const n=255&Math.floor(e),r=255&Math.floor(t),s=255&Math.floor($),a=(e-=Math.floor(e))*e*(3-2*e),o=(t-=Math.floor(t))*t*(3-2*t),i=($-=Math.floor($))*$*(3-2*$),c=Z(n+57*r+113*s),u=Z(n+1+57*r+113*s),l=Z(n+57*(r+1)+113*s),d=Z(n+1+57*(r+1)+113*s),p=Z(n+57*r+113*(s+1)),E=Z(n+1+57*r+113*(s+1)),m=Z(n+57*(r+1)+113*(s+1)),f=Z(n+1+57*(r+1)+113*(s+1)),g=(e,t,$)=>t+e*($-t);return g(i,g(o,g(a,c,u),g(a,l,d)),g(o,g(a,p,E),g(a,m,f)))}function X(){const i=window.devicePixelRatio||1,c=window.innerWidth,u=window.innerHeight;for(e.width=c*i,e.height=u*i,e.style.width=c+"px",e.style.height=u+"px",t.scale(i,i),c<480?($=10,n=13,a=40,o=60):c<768?($=12,n=15,a=60,o=50):($=14,n=18,a=100,o=50),s=Math.ceil(u/n)+5;r.length<s;)r.push({...z(),opacity:.5*Math.random()+.3})}window.addEventListener("resize",X),window.addEventListener("orientationchange",()=>setTimeout(X,100)),X();let Q=0,ee=0,te=-1e3;const $e=150;e.addEventListener("mousemove",e=>{e.clientX,te=e.clientY}),e.addEventListener("mouseleave",()=>{te=-1e3}),e.addEventListener("touchmove",e=>{e.touches.length>0&&(e.touches[0].clientX,te=e.touches[0].clientY)}),e.addEventListener("touchend",()=>{te=-1e3}),requestAnimationFrame(function e(s){let i=s-ee;ee=s,i>100&&(i=100),Q+=30*i/1e3,Q>=n&&(Q-=n,r.shift(),r.push({...z(),opacity:.4*Math.random()+.2}));const c=window.innerWidth,u=window.innerHeight,l=5e-4*s;t.fillStyle="black",t.fillRect(0,0,c,u),t.font=`${$}px 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace`,t.textBaseline="top";for(let $=0;$<r.length;$++){const e=r[$],s=$*n-Q;if(s<-n||s>u)continue;const a=s,o=Math.abs(te-(a+n/2));if(o>$e)continue;const i=1-o/$e;let c;c=`rgba(255, 255, 255, ${e.opacity*i})`,t.fillStyle=c,t.fillText(e.text,10,s)}const d=c/a,p=u/o;t.font=`${Math.floor(p)}px monospace`,t.textBaseline="top",t.textAlign="left";for(let $=0;$<o;$++)for(let e=0;e<a;e++){const n=e*d,r=$*p,s=Math.abs(r-te);let a=1;if(s<$e&&(a=s/$e,a*=a),a>.05){const s=J(.1*e,.1*$,l),o=Math.floor(8*s),i=".:-=+*#%@"[Math.max(0,Math.min(8,o))];t.fillStyle=`rgba(255, 255, 255, ${.8*a})`,t.fillText(i,n,r)}}requestAnimationFrame(e)});</script>
  <style rel="stylesheet" crossorigin>body,html{margin:0;padding:0;height:100%;min-height:100vh;min-height:-webkit-fill-available;overflow:hidden;background:transparent;font-family:Source Code Pro,Menlo,Monaco,Courier New,Courier,monospace}canvas{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}.content{position:absolute;right:0;top:0;z-index:2;padding:2em;padding:max(2em,env(safe-area-inset-top)) max(2em,env(safe-area-inset-right)) max(2em,env(safe-area-inset-bottom)) max(2em,env(safe-area-inset-left));color:#fff;display:flex;flex-direction:column;align-items:flex-end;gap:1em}.content h1,.content p{margin:0;padding:.5em 1em;background:#000000d9;border-radius:8px;display:inline-block;width:fit-content;max-width:calc(100vw - 4em);box-sizing:border-box;text-align:right}h1{font-size:2em}p{font-size:1em;max-width:min(250px,calc(100vw - 4em))}@media (max-width: 480px){h1{font-size:1.5em}.content{padding:1em}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}</style>
</head>
<body>

<canvas id="asciiCanvas"></canvas>

<main class="content" role="main">
  <header>
    <h1 id="site-title">Sample Title</h1>
  </header>
  <article>
    <p>Sample paragraph<br>over the animated<br>ASCII background.</p>
  </article>
</main>

<!-- Hidden content for bots/screen readers -->
<div class="sr-only" aria-hidden="false">
  <h2>About This Page</h2>
  <p>This is an interactive ASCII art demonstration featuring animated terminal commands and SQL queries commonly used in Site Reliability Engineering (SRE) and DevOps workflows.</p>
  <h3>Technologies Showcased</h3>
  <ul>
    <li>Kubernetes (kubectl) commands</li>
    <li>Terraform infrastructure as code</li>
    <li>Docker container management</li>
    <li>AWS CLI operations</li>
    <li>PostgreSQL advanced queries</li>
    <li>Prometheus monitoring</li>
    <li>Linux system administration</li>
  </ul>
</div>

</body>
</html>