*{box-sizing:border-box}
:root{--blue:#0019ff;--red:#e8001c;--pink:#ff00b8;--lime:#39ff14;--yellow:#ffef00;--gray:#c3c3c3;--title:#000080;--ink:#111}
html{scroll-behavior:smooth;scroll-padding-top:80px;scrollbar-color:#ff00b8 #39ff14}
body{margin:0;color:var(--ink);font-family:"Comic Sans MS","Comic Sans","Chalkboard SE","Comic Neue",cursive;line-height:1.45;overflow-x:hidden;
background-color:#ffb3f0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M18 6l3.5 8.5h9l-7 5.5 2.6 8.7-8.1-5.2-8.1 5.2 2.6-8.7-7-5.5h9z' fill='%23ffd400' stroke='%23b37a00' stroke-width='1.2'/%3E%3Cpath d='M50 40l1.6 4.4 4.4 1.6-4.4 1.6-1.6 4.4-1.6-4.4-4.4-1.6 4.4-1.6z' fill='%23fff'/%3E%3C/svg%3E"),linear-gradient(135deg,#ffff66,#ff99ff 50%,#66ffff);
background-attachment:fixed}
@supports (overflow:clip){body{overflow-x:clip}}
::-webkit-scrollbar{width:20px}
::-webkit-scrollbar-thumb{background:repeating-linear-gradient(45deg,#ff00b8 0 10px,#ffef00 10px 20px);border:3px solid #000}
::-webkit-scrollbar-track{background:#39ff14}
::selection{background:#e8001c;color:#ffef00}
a{color:#0000ee}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:10px;z-index:1000;border:3px solid #000}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:4px solid #ff00b8;outline-offset:3px}
html:not(.js) .js-only{display:none!important}
main:focus{outline:none}

/* ---------- top junk ---------- */
.beg{display:block;position:relative;z-index:55;background:var(--yellow);color:#000;text-align:center;font-weight:bold;font-size:clamp(15px,2.3vw,21px);text-decoration:none;padding:10px 14px;border-bottom:4px solid #000;box-shadow:0 4px 0 var(--pink)}
.beg u{display:inline-block;text-decoration:none;background:var(--pink);color:#fff;border:3px solid #000;border-radius:8px;padding:2px 12px;margin-left:6px;box-shadow:3px 3px 0 #000;animation:pulse 1s infinite}
.beg:hover u{background:var(--lime);color:#000}
.ticker{background:#e00;color:var(--yellow);overflow:hidden;white-space:nowrap;border-bottom:3px dashed #000;font-weight:bold;font-size:16px;padding:6px 0;margin-top:4px}
.ticker-track{display:inline-flex;animation:tick 34s linear infinite}
.ticker span{padding-right:3rem}
@keyframes tick{to{transform:translateX(-50%)}}
.hits{background:var(--gray);border-bottom:3px ridge #888;text-align:center;font-family:"Times New Roman",Times,serif;font-weight:bold;padding:5px 8px}
.lcd-inline{display:inline-block;background:#000;color:var(--lime);font-family:"Courier New",monospace;letter-spacing:.2em;border:3px inset #888;padding:0 8px;margin-left:6px;font-size:18px}

.nav{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;background:var(--blue);padding:6px 14px;border-bottom:5px solid #000}
.logo{color:var(--yellow);font-weight:bold;font-size:24px;text-decoration:none;text-shadow:3px 3px 0 var(--pink);min-height:44px;display:inline-flex;align-items:center;gap:6px}
.logo sup{font-size:11px}
.nav nav{display:flex;flex-wrap:wrap;gap:6px 12px;flex:1;justify-content:center}
.nav nav a{color:#0000ee;background:#fff;text-decoration:underline;min-height:40px;display:inline-flex;align-items:center;padding:0 8px;font-family:"Times New Roman",serif;font-size:18px;border:2px solid #000}
.nav nav a:nth-child(2){font-family:Impact,"Arial Black",sans-serif;letter-spacing:1px}
.nav nav a:nth-child(5){background:var(--lime);color:#000;font-weight:bold}
.nav nav a:hover{background:var(--yellow);transform:rotate(-4deg) scale(1.1)}
.nav-ctl{display:flex;gap:8px}
.beep{min-height:44px;border:3px outset #fff;background:var(--gray);font:inherit;font-weight:bold;cursor:pointer;padding:0 10px;box-shadow:3px 3px 0 #000;color:#000}
.beep[aria-pressed=true]{background:#9dffb0;border-style:inset}
#motion[aria-pressed=true]{background:var(--yellow)}
#calm[aria-pressed=true]{background:#cfe3ff}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 18px;font:inherit;font-weight:bold;font-size:17px;text-decoration:none;color:#fff;border:3px solid #000;border-radius:12px;box-shadow:4px 4px 0 #000;cursor:pointer;text-align:center;transition:transform .1s}
.btn:hover{background-color:var(--yellow);color:#000;transform:rotate(-3deg) scale(1.08)}
.btn:active{box-shadow:none;transform:translate(4px,4px)}
.btn-red{background-color:var(--red)}.btn-blue{background-color:var(--blue)}
.btn-lime{background-color:var(--lime);color:#000}
.btn-ugly{background:var(--gray);color:#000;border-style:outset;border-radius:0;font-family:"Times New Roman",serif;font-weight:normal}
.btn-neon{background:#000;color:var(--lime);border-color:var(--lime);box-shadow:0 0 0 3px #000,0 0 14px var(--lime),4px 4px 0 3px var(--pink);font-family:"Courier New",monospace}
.btn-neon:hover{background:#000;color:var(--yellow)}
.btn-small{min-height:40px;padding:4px 10px;font-size:15px;background:var(--lime);color:#000}
.btn-mega,.btn-mega-sm{background:linear-gradient(#ff3333,#ff0080);color:#fff;text-shadow:2px 2px 0 #000;animation:pulse 1s infinite}
.btn-mega{font-size:clamp(20px,3.4vw,30px);padding:16px 26px;border-width:4px;box-shadow:6px 6px 0 #000}
.btn-mega-sm{font-size:19px}
.btn-mega:hover,.btn-mega-sm:hover{color:#000;text-shadow:none}
.btn.big{word-break:break-all}
@keyframes pulse{50%{transform:scale(1.06)}}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0}
.center{justify-content:center}
.blink{animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- hero ---------- */
.hero{position:relative;text-align:center;max-width:1080px;margin:0 auto;padding:34px 16px 46px;overflow:hidden}
.badge-top{display:inline-block;background:#fff;border:3px dashed red;padding:4px 14px;transform:rotate(2deg);margin:0 0 12px;font-weight:bold}
h1{font-size:clamp(38px,7.6vw,86px);line-height:1.02;margin:0 0 16px;color:#000;text-shadow:4px 4px 0 #fff,8px 8px 0 #000;letter-spacing:-1px}
.rainbow{background:linear-gradient(90deg,red,orange,#ffd400,#0c0,#0cf,#00f,#f0f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;display:inline-block;-webkit-text-stroke:2px #000}
.wig{animation:wiggle .5s infinite alternate}
@keyframes wiggle{to{transform:rotate(4deg) scale(1.06)}}
.strike{color:#777;text-decoration-color:red;text-decoration-thickness:6px;font-size:.6em;text-shadow:none}
.cheap{color:red;font-family:Impact,"Arial Black",sans-serif;font-size:1.15em;text-shadow:3px 3px 0 var(--yellow),6px 6px 0 #000}
.lede{max-width:700px;margin:10px auto 18px;font-size:19px;background:var(--yellow);color:#8a005e;border:3px solid #000;padding:10px 14px;box-shadow:6px 6px 0 var(--pink);transform:rotate(-1deg)}
.lede strong{color:#000}
.cta-zone{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap}
.arrow{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(34px,6vw,64px);color:red;-webkit-text-stroke:2px #000;line-height:1;animation:nudge .6s infinite alternate}
.a-r{transform:scaleX(-1);animation-name:nudge-r}
@keyframes nudge{to{transform:translateX(10px)}}
@keyframes nudge-r{from{transform:scaleX(-1)}to{transform:scaleX(-1) translateX(10px)}}
.click-here{margin:8px 0 0;font-family:Impact,sans-serif;color:red;font-size:22px;letter-spacing:2px;text-shadow:2px 2px 0 #fff}

.stk{position:absolute;font-weight:bold;text-align:center;z-index:2;pointer-events:none}
.s-mascot{left:-6px;top:24px;width:150px;height:150px;border-radius:50%;background:#fff;border:5px solid #000;padding:12px;transform:rotate(-12deg);animation:wiggle 1s infinite alternate;box-shadow:6px 6px 0 #000}
.s-badge{right:4px;top:40px;width:124px;height:124px;border-radius:50%;background:var(--yellow);border:5px dotted red;display:grid;place-items:center;font-size:16px;line-height:1.1;animation:spin 9s linear infinite;box-shadow:5px 5px 0 #000}
@keyframes spin{to{transform:rotate(360deg)}}
.s-robot{right:14px;bottom:70px;background:red;color:#fff;border:4px solid #000;padding:12px 14px;font-size:19px;transform:rotate(12deg);line-height:1.1;box-shadow:5px 5px 0 #000}
.s-new{left:20px;bottom:90px;width:96px;height:96px;display:grid;place-items:center;background:var(--lime);font-family:Impact,sans-serif;font-size:22px;clip-path:polygon(50% 0,61% 32%,98% 22%,70% 50%,98% 78%,61% 68%,50% 100%,39% 68%,2% 78%,30% 50%,2% 22%,39% 32%);transform:rotate(-14deg)}
.s-tape{left:-40px;bottom:12px;width:120%;background:repeating-linear-gradient(45deg,var(--yellow) 0 22px,#000 22px 44px);color:#000;font-family:Impact,sans-serif;font-size:18px;letter-spacing:3px;padding:2px 0;transform:rotate(-2deg);z-index:0}
.s-tape{text-shadow:0 0 4px var(--yellow),0 0 6px var(--yellow)}

.trusted{background:#fff;border-block:5px double #000;text-align:center;padding:16px 12px}
.trusted p{margin:0}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:20px;font-weight:bold;color:#888;margin:6px 0 10px}
.logos span:nth-child(odd){font-family:Papyrus,"Herculanum",fantasy}
.logos span:nth-child(3){font-family:"Courier New",monospace;color:#0a0}
.real{font-size:17px}
.tiny{font-size:12px;color:#555}

/* ---------- sections ---------- */
.sec{max-width:1100px;margin:0 auto;padding:40px 16px}
.sec + .sec{border-top:8px ridge #ff00b8}
.sec h2,.contact h2{font-size:clamp(32px,6vw,56px);text-align:center;margin:0 0 10px;line-height:1.1;letter-spacing:2px;
background:linear-gradient(red,#ff0 40%,#0f0 60%,#00f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #000;transform:perspective(300px) rotateX(14deg) skew(-8deg)}
.sec:nth-of-type(odd) h2{transform:rotate(-2deg) skew(6deg)}
.sub{display:block;max-width:680px;margin:0 auto 22px;text-align:center;background:#0ff;border:2px solid #000;padding:6px 10px;transform:rotate(.8deg)}

.win{background:var(--gray);border:3px solid #000;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #808080,8px 8px 0 #000}
.titlebar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,var(--title),#1084d0);color:#fff;font-weight:bold;padding:4px 6px 4px 10px;gap:8px;font-family:Tahoma,Verdana,sans-serif}
.tb-btns{display:flex;gap:3px}
.tb-btns i{font-style:normal;background:var(--gray);color:#000;border:2px outset #fff;min-width:22px;height:22px;display:grid;place-items:center;font-size:13px;line-height:1}
.win-body{padding:16px}
.status-grid{display:grid;grid-template-columns:auto 1fr 1.3fr;gap:20px;align-items:center}
.lcd{background:#000;color:var(--lime);font-family:"Courier New",monospace;font-weight:bold;font-size:24px;padding:6px 12px;margin:0 0 8px;border:3px inset #888;letter-spacing:1px}
.lcd.small{font-size:15px}
.lcd.amber{color:#ffb000}
.checks{list-style:none;margin:0;padding:0;font-weight:bold;font-family:"Times New Roman",serif;font-size:18px}
.checks .miss{color:var(--red)}
.meter-box{background:#fff;border:3px ridge var(--pink);padding:10px;text-align:center}
.meter-label{margin:0 0 6px;font-family:Impact,sans-serif;letter-spacing:1px}
.meter{position:relative;height:30px;background:#eee;border:3px inset #888}
.meter span{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--lime) 0 10px,#0a0 10px 20px);transition:width .4s}
.meter b{position:absolute;inset:0;display:grid;place-items:center;font-family:"Courier New",monospace;text-shadow:1px 1px 0 #fff}
.meter-status{min-height:3em;margin:8px 0;font-size:15px}
.meter-box .btn{margin:4px}

.gen{display:grid;gap:14px}
.win-gen{box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #808080,10px 10px 0 var(--pink)}
.field{display:grid;gap:4px}
.field label,legend{font-weight:bold}
input[type=text],select{font:inherit;min-height:44px;padding:8px;border:3px inset #888;background:#ffc;width:100%;color:#000}
fieldset{border:3px groove #fff;margin:0;padding:8px 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tog{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.tog input{width:24px;height:24px;accent-color:var(--pink)}
.loading{text-align:center;background:#fff;border:3px dashed #000;padding:12px}
.loading p{margin:6px 0;font-weight:bold}
.spinner{display:inline-block;font-size:34px;animation:spin 1s linear infinite}
.bar{height:24px;background:#eee;border:3px solid #000}
.bar span{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,var(--lime) 0 10px,#0a0 10px 20px);transition:width .35s}
.output{background:#000;color:var(--lime);font-family:"Courier New",monospace;padding:14px;border:3px inset #888;min-height:100px;overflow-wrap:anywhere}
.output p{margin:0 0 8px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.card{position:relative;background:#fff;border:4px solid #000;box-shadow:8px 8px 0 #000;padding:18px 16px 14px;transform:rotate(-1.5deg);transition:transform .2s}
.card:nth-child(even){transform:rotate(1.8deg)}
.card:hover{transform:scale(1.04) rotate(0)}
.card h3{margin:0 0 8px;font-size:22px;line-height:1.2;color:var(--blue);text-decoration:underline}
.card h3 small{display:block;font-size:14px;color:#333;font-weight:normal;text-decoration:none;font-family:"Times New Roman",serif}
.card p{margin:0 0 8px}
.c1{background:#cfc}.c2{background:#ccf}.c3{background:#ffc;border-style:dashed}.c4{background:#fcc;border-color:var(--pink)}
.card a{font-weight:bold;display:inline-block;padding:10px 0}
.stamp{position:absolute;right:-10px;top:-16px;background:var(--red);color:#fff;border:3px solid #000;font-family:Impact,sans-serif;padding:1px 8px;transform:rotate(8deg);font-size:15px;letter-spacing:1px}
.stamp.new{background:var(--lime);color:#000}
.skills{margin-top:26px;text-align:center}
.skills span{display:inline-block;background:#000;color:var(--lime);border:3px solid var(--pink);padding:3px 12px;margin:4px;font-weight:bold;box-shadow:0 0 10px var(--pink)}
.skills span:nth-child(even){background:var(--yellow);color:#000;border-color:#000;box-shadow:3px 3px 0 #000;transform:rotate(-2deg)}
.buttons88{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:20px}
.buttons88 span{width:88px;height:31px;display:grid;place-items:center;text-align:center;font-family:Verdana,sans-serif;font-size:8px;font-weight:bold;line-height:1.1;border:2px outset #fff;background:linear-gradient(#008,#00f);color:#ff0}
.buttons88 span:nth-child(2n){background:linear-gradient(#060,#0c0);color:#fff}
.buttons88 span:nth-child(3n){background:linear-gradient(#800,#f40);color:#fff}

.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;align-items:center}
.pkg{position:relative;background:#fff;border:4px solid #000;padding:22px 16px;display:flex;flex-direction:column;gap:10px;text-align:center}
.pkg h3{margin:0;font-size:26px}
.pkg.best{background:#ff9;border:6px dashed red;transform:scale(1.05) rotate(-1deg)}
.pp{font-size:36px;font-weight:bold;margin:0;color:#0a0;font-family:Impact,sans-serif}
.pp small{font-size:15px;color:#555;font-family:"Comic Sans MS",cursive}
.pkg ul{margin:0 0 8px;padding-left:24px;text-align:left;list-style:"✅ "}
.ribbon{position:absolute;top:-20px;left:50%;transform:translateX(-50%) rotate(-3deg);margin:0;background:red;color:#fff;font-weight:bold;padding:2px 14px;border:3px solid #000;white-space:nowrap}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
blockquote{margin:0;background:#fff;border:3px solid #000;border-radius:22px 4px;padding:16px;font-size:18px;box-shadow:6px 6px 0 #0ff}
blockquote:nth-child(2){transform:rotate(-3deg) translateY(10px);font-family:"Times New Roman",serif}
blockquote:nth-child(4){background:#ffe0b3;transform:rotate(2deg)}
cite{display:block;margin-top:8px;font-size:14px;font-style:normal;font-weight:bold;color:#444}
.stars{display:block;margin-top:6px}

.survey{max-width:620px;margin:0 auto;background:#fff;border:6px ridge var(--blue);padding:14px;text-align:center}
.survey table{width:100%;border:3px outset #888;border-collapse:separate;border-spacing:4px;background:#eee;margin-bottom:12px}
.survey caption{font-weight:bold;font-family:"Times New Roman",serif;font-size:20px;padding:4px}
.survey td{border:2px inset #888;background:#fff;padding:6px;text-align:left}
.survey label{display:flex;gap:8px;align-items:center;min-height:40px;cursor:pointer}
.survey input{width:20px;height:20px;accent-color:var(--red)}
.survey-out{min-height:1.5em;font-weight:bold;color:#a0006a}

.contact{text-align:center}
#dontclick{margin-top:18px}
.note{background:#0f0;display:inline-block;padding:4px 10px;margin-top:20px;border:2px dashed #000}

.foot{background:#000;color:var(--lime);text-align:center;padding:0 16px 110px;font-size:14px;border-top:6px ridge var(--pink)}
.foot a{color:#0ff;display:inline-block;padding:8px 0}
.uc{margin:0 -16px 16px;background:repeating-linear-gradient(45deg,var(--yellow) 0 22px,#000 22px 44px);padding:10px}
.uc span{display:inline-block;background:#000;color:var(--yellow);padding:4px 12px;font-size:22px;font-family:Impact,sans-serif;letter-spacing:2px}
.counter{color:red;letter-spacing:3px;background:#222;border:2px inset #666;padding:0 6px;font-family:"Courier New",monospace}
.noscript{background:var(--yellow);margin:0;padding:10px;text-align:center;font-weight:bold}
.mobile-bar{display:none}

/* ---------- seasick + roll + quake (all motion; paused by Pause chaos) ---------- */
.hero,.sec{animation:seasick 9s ease-in-out infinite}
@keyframes seasick{25%{transform:rotate(.5deg)}75%{transform:rotate(-.5deg)}}
.roll main{animation:roll 1s ease-in-out}
@keyframes roll{to{transform:rotate(360deg)}}
.quake main{animation:quake .1s 8}
@keyframes quake{25%{transform:translate(-8px,4px) rotate(-1deg)}75%{transform:translate(8px,-4px) rotate(1deg)}}

/* ---------- roaming characters ---------- */
.roam{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:35}
.roam-click{z-index:36}
.rm{position:absolute;display:block;line-height:1}
.rm b{display:block;font-size:11px;background:#fff;border:2px solid #000;padding:1px 4px;white-space:nowrap;font-family:"Comic Sans MS",cursive;text-align:center}
.r-dog1{font-size:64px;left:12%;top:58%;animation:bx 9s linear infinite alternate,by 6.3s linear infinite alternate;animation-delay:-3s,-1s}
.r-dog3{font-size:48px;left:70%;top:30%;animation:bx 12.7s linear infinite alternate-reverse,by 8.9s linear infinite alternate;animation-delay:-7s,-4s}
.r-floppy{font-size:44px;left:84%;top:70%;animation:bx 14s linear infinite alternate-reverse,by 7.1s linear infinite alternate-reverse,spin 3s linear infinite;animation-delay:-2s,-5s,0s}
.r-hire{left:4%;top:24%;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--pink) 0 25%,var(--yellow) 0 50%,var(--pink) 0 75%,var(--yellow) 0);border:4px solid #000;display:grid;place-items:center;text-align:center;font-family:Impact,sans-serif;font-size:17px;color:#000;-webkit-text-stroke:.5px #fff;animation:bx 17s linear infinite alternate,by 11s linear infinite alternate-reverse,spin 4s linear infinite;animation-delay:-9s,-3s,0s}
.r-duck{left:30%;bottom:6px;font-size:46px;animation:walk 24s linear infinite;animation-delay:-8s}
.r-duck i{display:inline-block;font-style:normal;transform:scaleX(-1);animation:waddle .4s ease-in-out infinite alternate}
.r-cape{left:46%;top:16%;animation:fly 26s linear infinite,hover 3s ease-in-out infinite alternate;animation-delay:-11s,0s}
.r-cape svg{display:block;filter:drop-shadow(4px 4px 0 #000)}
.r-frank{left:60%;top:46%;pointer-events:auto;cursor:pointer;background:none;border:0;padding:4px;font-size:58px;animation:bx 11s linear infinite alternate-reverse,by 7.7s linear infinite alternate;animation-delay:-4s,-2s;filter:drop-shadow(3px 3px 0 #000)}
.r-frank i{position:absolute;right:-6px;bottom:2px;font-style:normal;font-size:26px}
.r-frank:hover,.r-frank:focus-visible{animation-play-state:paused!important}
.r-frank:hover::after,.r-frank:focus-visible::after{content:"hi i'm Frank";position:absolute;left:50%;top:-22px;transform:translateX(-50%);white-space:nowrap;font-size:12px;background:var(--yellow);border:2px solid #000;padding:1px 6px}
@keyframes bx{from{left:0}to{left:calc(100% - 96px)}}
@keyframes by{from{top:0}to{top:calc(100% - 96px)}}
@keyframes walk{from{left:-140px}to{left:100%}}
@keyframes waddle{from{transform:scaleX(-1) rotate(-10deg)}to{transform:scaleX(-1) rotate(10deg)}}
@keyframes fly{from{left:-170px}to{left:100%}}
@keyframes hover{from{top:12%}to{top:28%}}

/* ---------- particles ---------- */
.fx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:950}
.pfx{position:absolute;font-size:20px;line-height:1;pointer-events:none;animation:fall .9s ease-in forwards;will-change:transform}
.pfx.word{font-family:Impact,sans-serif;font-size:16px;color:red;-webkit-text-stroke:1px #000}
@keyframes fall{to{opacity:0;transform:translateY(60px) rotate(200deg)}}
.pfx.burst{font-size:26px;animation:burst .8s ease-out forwards}
@keyframes burst{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(220deg) scale(.6)}}
.rain{position:absolute;top:-50px;font-size:28px;pointer-events:none;animation:rainfall linear forwards}
@keyframes rainfall{to{transform:translateY(calc(100vh + 90px)) rotate(540deg)}}

/* ---------- popup windows ---------- */
.pop{position:fixed;left:50%;top:120px;width:min(370px,calc(100vw - 16px));background:var(--gray);border:3px outset #fff;outline:2px solid #000;box-shadow:8px 8px 0 #000;color:#000;animation:popin .25s ease-out}
.pop.shaky{animation:popin .25s ease-out,shake .4s .25s 6}
.pop.mini{transform:scale(.7);transform-origin:top left}
@keyframes popin{from{transform:scale(.3)}}
@keyframes shake{25%{transform:translate(-3px) rotate(-1deg)}75%{transform:translate(3px) rotate(1deg)}}
.pop .titlebar{cursor:default;user-select:none;touch-action:none}
.pop .pt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbb{font:inherit;font-weight:bold;cursor:pointer;background:var(--gray);color:#000;border:2px outset #fff;min-width:32px;height:30px;padding:0 4px;line-height:1;font-size:16px}
.tbb.x{font-size:20px}
.tbb.x:hover{background:var(--red);color:#fff}
.tb{display:flex;gap:3px;flex:none}
.pop-body{padding:12px 14px 14px;text-align:center;font-size:16px}
.pop-body p{margin:8px 0}
.pop-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}
.pop-btns .btn{min-height:44px;padding:6px 14px;font-size:16px}
.pop-face{font-size:44px;line-height:1}
.pop .who{background:#fff;border:2px inset #888;padding:8px;text-align:left;font-size:15px}
.w-congrats .pop-body{background:repeating-linear-gradient(45deg,#fff 0 14px,#ffff9c 14px 28px)}
.w-congrats .big-win{font-family:Impact,sans-serif;font-size:26px;color:red;-webkit-text-stroke:1px #000;line-height:1.1}
.dodge{transition:transform .15s}
.w-crumbs{width:min(600px,calc(100vw - 16px))}
.w-crumbs .pop-body{background:#8b4513;color:#fff;border:4px dashed #fc0}
.w-crumbs .titlebar{background:linear-gradient(90deg,#5a2d0c,#c97a2c)}
.crumb-reject{font-size:11px;padding:2px 6px;min-height:28px!important}
.w-floppy .pop-body{display:flex;gap:12px;align-items:center;text-align:left;background:#ffc}
.w-floppy svg{flex:none;animation:wiggle .6s infinite alternate}
.w-scan .scan-list{background:#000;color:var(--lime);font-family:"Courier New",monospace;font-size:13px;text-align:left;height:132px;overflow:hidden;margin:8px 0;padding:6px;list-style:none;border:3px inset #888}
.w-scan .scan-list li{white-space:pre}
.w-scan .scan-list .bad{color:#ff4040;font-weight:bold}
.scan-result{font-family:Impact,sans-serif;font-size:20px;color:red;min-height:1.3em}
.w-call{width:min(320px,calc(100vw - 16px))}
.call-av{width:92px;height:92px;margin:6px auto;border-radius:50%;background:#fc0;border:4px solid #000;display:grid;place-items:center;font-size:44px;font-weight:bold}
.w-call[data-state=ringing] .call-av{animation:ring 1s infinite}
.w-call[data-state=connected] .call-av{border-color:#0c0}
@keyframes ring{from{box-shadow:0 0 0 0 rgba(0,0,0,.5)}to{box-shadow:0 0 0 26px rgba(0,0,0,0)}}
.call-name{font-size:22px;font-weight:bold;margin:0!important}
.call-role{font-size:12px;color:#333;margin:2px 0!important}
.call-status{font-weight:bold;min-height:1.4em;font-variant-numeric:tabular-nums}
.call-log{background:#fff;border:2px inset #888;text-align:left;font-size:14px;min-height:60px;max-height:130px;overflow:auto;padding:6px}
.call-log p{margin:0 0 4px}
.w-wheel{width:min(360px,calc(100vw - 16px))}
.wheel-wrap{position:relative;width:250px;height:250px;margin:18px auto 8px;max-width:100%}
.wheel-disc{position:relative;width:100%;height:100%;border-radius:50%;border:6px solid #000;background:repeating-conic-gradient(#00b3ff 0 45deg,#ff0080 45deg 90deg);box-shadow:4px 4px 0 #000;transition:transform 4.2s cubic-bezier(.15,.85,.25,1)}
.wheel-disc::after{content:"";position:absolute;inset:calc(50% - 15px);background:#fc0;border:4px solid #000;border-radius:50%}
.wheel-disc span{position:absolute;top:50%;left:50%;width:46%;transform-origin:0 50%;transform:translateY(-50%) rotate(calc(var(--i)*45deg - 67.5deg));text-align:right;padding-right:6px;color:#fff;font-size:10px;font-weight:bold;text-shadow:1px 1px 0 #000;white-space:nowrap}
.wheel-ptr{position:absolute;z-index:1;top:-20px;left:calc(50% - 15px);border-left:15px solid transparent;border-right:15px solid transparent;border-top:32px solid #000}
.wheel-msg{font-weight:bold;min-height:2.6em}
.w-err{width:min(300px,calc(100vw - 16px))}
.w-err .err-body{display:flex;gap:10px;align-items:center;text-align:left}
.w-err .err-body span{font-size:30px}
.w-exit .pop-body{background:#ffd6d6}
.w-frank .pop-face{font-size:60px}

.close-all{position:fixed;left:14px;bottom:14px;z-index:900;min-height:48px;font:inherit;font-weight:bold;font-size:17px;background:red;color:#fff;border:4px solid #000;box-shadow:4px 4px 0 #000;padding:0 14px;cursor:pointer;text-shadow:1px 1px 0 #000}
.close-all:hover{background:var(--yellow);color:#000;text-shadow:none}

.proof{position:fixed;right:14px;top:96px;z-index:940;max-width:300px;background:#fff;border:3px solid #000;border-left:10px solid #0c0;padding:8px 12px;box-shadow:4px 4px 0 #000;font-size:14px;transform:translateX(130%);pointer-events:none}
.proof.show{animation:proof 4.6s ease-in-out}
@keyframes proof{10%,85%{transform:none}}
.toast{position:fixed;left:50%;bottom:90px;z-index:960;transform:translate(-50%,200px);max-width:min(92vw,560px);background:var(--yellow);border:3px solid #000;box-shadow:4px 4px 0 #000;padding:10px 16px;font-weight:bold;transition:transform .3s;text-align:center}
.toast.show{transform:translate(-50%,0)}

/* ---------- chat ---------- */
.chat{position:fixed;right:14px;bottom:14px;z-index:70;width:290px;background:#fff;border:3px solid #000;box-shadow:6px 6px 0 var(--pink)}
.chat.nudge{animation:shake .15s 4}
.chat-head{width:100%;display:flex;align-items:center;gap:6px;min-height:46px;background:#0c0;color:#fff;font:inherit;font-weight:bold;text-shadow:1px 1px 0 #000;border:0;padding:4px 10px;cursor:pointer;text-align:left}
.cbadge:not(:empty){margin-left:auto;background:red;border-radius:999px;padding:0 8px;animation:blink 1s step-end infinite}
.chat-log{background:#ffc;height:200px;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:6px}
.chat-log p{margin:0;border:2px solid #000;border-radius:10px;padding:4px 8px;max-width:88%;font-size:14px;overflow-wrap:anywhere}
.chat-log .bot{background:#cfc;align-self:flex-start}
.chat-log .me{background:#ccf;align-self:flex-end}
.chat-log .typing{color:#666;font-style:italic}
.chips{display:flex;flex-wrap:wrap;gap:4px;padding:6px}
.chips button{min-height:40px;font:inherit;font-size:13px;border:2px outset #fff;background:var(--gray);cursor:pointer;padding:0 8px;color:#000}
#chat-form{display:flex;gap:4px;padding:6px;border-top:2px solid #000}
#chat-form input{min-width:0;flex:1;min-height:40px}

/* ---------- "Make it more professional" (it does not work) ---------- */
.pro1 .sec h2::after,.pro1 .contact h2::after{content:" 👔";-webkit-text-stroke:0}
.pro1 .logo::after{content:"Inc.";font-size:12px;margin-left:4px}
.pro2 body{font-family:Papyrus,"Herculanum",fantasy;background-color:#f5f5dc}
.pro2 h1::after{content:" (synergy)";font-size:.25em;display:block;text-shadow:none;font-family:"Times New Roman",serif}
.pro2 .lede::before{content:"📎 Per my last email: ";font-weight:bold}
.pro3 main{transform:rotate(-1deg)}
.pro3 h1::before{content:"🧐 ";text-shadow:none}
.pro3 .btn{font-family:"Times New Roman",serif;border-radius:0;letter-spacing:3px;text-transform:uppercase}
.pro3 .card h3::after{content:" ™";color:red}

/* ---------- calm / paused ---------- */
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
.paused .ticker{white-space:normal;text-align:center}
.paused .ticker-track{display:block;animation:none}
.paused .ticker span[aria-hidden]{display:none}
.paused .pop,.paused .pop.shaky{animation:none}
.paused .btn,.paused .card{transition:none}
.calm .roam,.calm .fx,.calm .proof{display:none!important}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .s-robot,.s-new{display:none}
  .s-mascot{width:96px;height:96px;padding:6px;top:4px;left:-10px}
  .s-badge{width:88px;height:88px;font-size:12px;top:4px;right:-4px}
  .status-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  html{scroll-padding-top:120px}
  .beg{font-size:14px;padding:6px 8px;line-height:1.25}
  .beg-text>span:last-child{display:block}
  .beg u{margin:4px 0 0;padding:1px 8px}
  .ticker{font-size:14px;padding:4px 0}
  .hits{font-size:13px}
  .lcd-inline{font-size:14px}
  .nav{padding:2px 8px;gap:0 6px}
  .logo{min-height:40px;font-size:19px}
  .nav-ctl{margin-left:auto;gap:4px;order:2}
  .nav-ctl .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .beep{min-width:44px;min-height:40px;font-size:17px;padding:0 6px;border-width:2px;box-shadow:2px 2px 0 #000}
  .nav nav{order:4;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:6px;padding:4px 0;scrollbar-width:none}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{min-height:40px;white-space:nowrap;flex:none;font-size:16px}
  .hero{padding:110px 12px 56px}
  h1{font-size:40px;text-shadow:3px 3px 0 #fff,5px 5px 0 #000}
  .lede{font-size:16px}
  .btn-mega{font-size:19px;padding:12px 14px}
  .arrow{font-size:30px}
  .cta-row .btn{flex:1 1 40%}
  .s-tape{font-size:13px;bottom:8px}
  .sec{padding:32px 12px}
  .pkg.best{transform:none}
  .card,.card:nth-child(even){transform:none}
  blockquote:nth-child(n){transform:none}
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--yellow);border-top:4px solid #000;padding:8px 10px}
  .mobile-bar .btn{box-shadow:3px 3px 0 #000;font-size:16px}
  .chat{right:8px;bottom:80px;width:min(290px,calc(100vw - 16px))}
  .chat:not(.open){width:auto}
  .chat-log{height:150px}
  .toast{bottom:150px}
  .close-all{left:50%;transform:translateX(-50%);top:8px;bottom:auto;font-size:15px;white-space:nowrap}
  /* popups stack above the mobile bar so close buttons stay reachable */
  .pop,.w-crumbs,.w-call,.w-wheel,.w-err{left:6px!important;right:6px;top:auto!important;width:auto;bottom:calc(80px + var(--stack,0) * 10px);max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);overflow:auto}
  .tbb{min-width:44px;height:40px}
  .wheel-wrap{width:200px;height:200px}
  .proof{display:none}
  .r-floppy,.r-hire,.r-cape,.r-dog3{display:none}
  .r-dog1{font-size:44px}
  .r-frank{font-size:44px}
  .r-duck{font-size:34px;bottom:72px}
  .rm b{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
  /* with JS the Pause chaos control owns animation; without JS stay still */
  html:not(.js) *,html:not(.js) *::before,html:not(.js) *::after{animation:none!important}
  html:not(.js) .ticker{white-space:normal;text-align:center}
  html:not(.js) .ticker-track{display:block}
  html:not(.js) .ticker span[aria-hidden]{display:none}
}
[hidden]{display:none!important}
html:not(.js) #gen-form button[type=submit]{display:none}