{"id":8,"date":"2026-07-05T16:44:28","date_gmt":"2026-07-05T16:44:28","guid":{"rendered":"https:\/\/itsokcat.fun\/?page_id=8"},"modified":"2026-07-05T17:41:18","modified_gmt":"2026-07-05T17:41:18","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/itsokcat.fun\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b1c96a e-con-full e-flex e-con e-parent\" data-id=\"1b1c96a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd8009d elementor-widget elementor-widget-html\" data-id=\"cd8009d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =========================================================\r\n  $OKCAT \u2014 It's Ok\r\n  Elementor HTML Widget \u2014 Single Block (HTML + CSS + JS)\r\n  Paste this entire code into an Elementor \"HTML\" widget.\r\n========================================================= -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Manrope:wght@300..800&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n\r\n<style>\r\n\/* ---------- SCOPED RESET ---------- *\/\r\n#okcat-app, #okcat-app *, #okcat-app *::before, #okcat-app *::after { box-sizing: border-box; }\r\n#okcat-app button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }\r\n#okcat-app a { color: inherit; text-decoration: none; }\r\n#okcat-app img { max-width: 100%; display: block; }\r\n#okcat-app ul { list-style: none; padding: 0; margin: 0; }\r\n\r\n\/* ---------- ROOT ---------- *\/\r\n#okcat-app {\r\n  --bg-0: #0b1220;\r\n  --bg-1: #111b2c;\r\n  --bg-2: #17233a;\r\n  --card: #182437;\r\n  --card-2: #1e2c43;\r\n  --border: rgba(168, 208, 245, 0.14);\r\n  --border-strong: rgba(168, 208, 245, 0.28);\r\n  --accent: #a8d0f5;\r\n  --accent-2: #6ba9de;\r\n  --highlight: #cfe4fb;\r\n  --text: #eef3fb;\r\n  --muted: #8a97ab;\r\n  --danger: #ef4444;\r\n  --tear: #7cc5ff;\r\n  --success: #6ee7b7;\r\n\r\n  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;\r\n  color: var(--text);\r\n  background: var(--bg-0);\r\n  line-height: 1.65;\r\n  font-size: 16px;\r\n  position: relative;\r\n  overflow-x: hidden;\r\n  min-height: 100vh;\r\n}\r\n\r\n#okcat-app h1, #okcat-app h2, #okcat-app h3, #okcat-app h4 {\r\n  font-family: 'Bricolage Grotesque', serif;\r\n  font-weight: 700;\r\n  line-height: 1.05;\r\n  letter-spacing: -0.025em;\r\n  margin: 0 0 0.5em;\r\n  color: var(--text);\r\n}\r\n#okcat-app h1 { font-size: clamp(2.6rem, 6.5vw, 5.2rem); }\r\n#okcat-app h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }\r\n#okcat-app h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }\r\n#okcat-app p  { margin: 0 0 1em; color: #cbd4e2; }\r\n\r\n#okcat-app .okc-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }\r\n\r\n\/* ambient noise + vignette on body *\/\r\n#okcat-app::before {\r\n  content: \"\"; position: absolute; inset: 0; pointer-events: none; z-index: 0;\r\n  background:\r\n    radial-gradient(ellipse at 50% 0%, rgba(107,169,222,0.08), transparent 60%),\r\n    radial-gradient(ellipse at 100% 100%, rgba(124,197,255,0.06), transparent 60%);\r\n}\r\n#okcat-app::after {\r\n  content: \"\"; position: absolute; inset: 0; pointer-events: none; z-index: 0;\r\n  opacity: 0.06; mix-blend-mode: overlay;\r\n  background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'\/><\/filter><rect width='100%' height='100%' filter='url(%23n)'\/><\/svg>\");\r\n}\r\n\r\n\/* ---------- LOADING SCREEN ---------- *\/\r\n.okc-loader {\r\n  position: fixed; inset: 0; z-index: 9999;\r\n  background: #05090f;\r\n  display: flex; align-items: center; justify-content: center;\r\n  transition: opacity .8s ease, visibility .8s ease;\r\n}\r\n.okc-loader.hidden { opacity: 0; visibility: hidden; }\r\n.okc-loader-inner { text-align: center; padding: 24px; max-width: 460px; width: 100%; }\r\n.okc-loader-text {\r\n  font-family: 'Bricolage Grotesque', serif;\r\n  font-size: clamp(1.1rem, 3vw, 1.5rem);\r\n  color: #cfe4fb; letter-spacing: -0.02em;\r\n  min-height: 2em;\r\n}\r\n.okc-loader-text .dot { display: inline-block; opacity: 0; animation: okcDot 1.4s infinite; }\r\n.okc-loader-text .dot:nth-child(2){ animation-delay: .2s; }\r\n.okc-loader-text .dot:nth-child(3){ animation-delay: .4s; }\r\n@keyframes okcDot { 0%,80%,100%{opacity:0} 40%{opacity:1} }\r\n\r\n.okc-loader-chart {\r\n  margin: 24px auto 0; height: 90px; width: 100%; max-width: 340px;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity .6s, transform .6s;\r\n}\r\n.okc-loader.stage-chart .okc-loader-chart { opacity: 1; transform: translateY(0); }\r\n.okc-loader-chart .line {\r\n  stroke: var(--danger); stroke-width: 2.5; fill: none;\r\n  stroke-dasharray: 600; stroke-dashoffset: 600;\r\n  filter: drop-shadow(0 0 8px rgba(239,68,68,.6));\r\n}\r\n.okc-loader.stage-chart .okc-loader-chart .line { animation: okcDraw 1.4s ease-out forwards; }\r\n@keyframes okcDraw { to { stroke-dashoffset: 0; } }\r\n\r\n.okc-loader-cat {\r\n  width: min(220px, 55%); margin: 20px auto 0;\r\n  opacity: 0; transform: scale(.85) translateY(20px);\r\n  transition: opacity .7s, transform .7s cubic-bezier(.2,.9,.3,1.2);\r\n}\r\n.okc-loader.stage-cat .okc-loader-cat { opacity: 1; transform: scale(1) translateY(0); }\r\n\r\n.okc-loader-final {\r\n  font-family: 'Bricolage Grotesque', serif;\r\n  font-size: clamp(2rem, 5vw, 3rem); font-weight: 700;\r\n  color: var(--highlight); letter-spacing: -0.03em; margin-top: 8px;\r\n  opacity: 0; transform: translateY(10px);\r\n  transition: opacity .6s, transform .6s;\r\n}\r\n.okc-loader.stage-cat .okc-loader-final { opacity: 1; transform: translateY(0); transition-delay: .3s; }\r\n\r\n\/* ---------- NAV ---------- *\/\r\n.okc-nav {\r\n  position: sticky; top: 0; z-index: 100;\r\n  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);\r\n  background: rgba(11, 18, 32, 0.72);\r\n  border-bottom: 1px solid var(--border);\r\n}\r\n.okc-nav-inner {\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  padding: 14px 24px; max-width: 1280px; margin: 0 auto; gap: 20px;\r\n}\r\n.okc-logo {\r\n  display: flex; align-items: center; gap: 10px;\r\n  font-family: 'Bricolage Grotesque', serif; font-weight: 700; font-size: 1.25rem;\r\n  letter-spacing: -0.02em;\r\n}\r\n.okc-logo-emoji {\r\n  width: 34px; height: 34px; border-radius: 50%;\r\n  background: linear-gradient(135deg, #cfe4fb, #6ba9de);\r\n  display: grid; place-items: center; font-size: 20px;\r\n  box-shadow: 0 6px 18px rgba(107,169,222,.35);\r\n}\r\n.okc-nav-links { display: flex; gap: 6px; align-items: center; }\r\n.okc-nav-links a {\r\n  padding: 8px 14px; border-radius: 999px; font-size: 0.92rem;\r\n  color: #b6c1d4; transition: all .25s;\r\n}\r\n.okc-nav-links a:hover { color: var(--highlight); background: rgba(168,208,245,.08); }\r\n.okc-nav-cta {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  padding: 10px 20px; border-radius: 999px;\r\n  background: linear-gradient(135deg, #cfe4fb, #7cc5ff);\r\n  color: #0b1220; font-weight: 700; font-size: .92rem;\r\n  box-shadow: 0 6px 20px rgba(124,197,255,.35);\r\n  transition: transform .25s, box-shadow .25s;\r\n}\r\n.okc-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(124,197,255,.5); }\r\n.okc-nav-toggle { display: none; padding: 8px; border-radius: 8px; }\r\n.okc-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; transition: .25s; }\r\n\r\n@media (max-width: 880px) {\r\n  .okc-nav-links, .okc-nav .okc-nav-cta { display: none; }\r\n  .okc-nav-toggle { display: block; }\r\n  .okc-nav.mobile-open .okc-nav-links {\r\n    display: flex; flex-direction: column; align-items: stretch; gap: 4px;\r\n    position: absolute; top: 100%; left: 0; right: 0;\r\n    background: rgba(11,18,32,.98); padding: 18px 20px; border-bottom: 1px solid var(--border);\r\n  }\r\n  .okc-nav.mobile-open .okc-nav-cta { display: inline-flex; margin-top: 8px; justify-content: center; }\r\n}\r\n\r\n\/* ---------- HERO ---------- *\/\r\n.okc-hero {\r\n  position: relative; z-index: 1;\r\n  padding: 60px 0 0;\r\n  overflow: hidden;\r\n}\r\n.okc-hero-inner {\r\n  position: relative;\r\n  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px;\r\n  align-items: end;\r\n  min-height: 640px;\r\n  padding: 40px 40px 0;\r\n  border-radius: 32px;\r\n  background:\r\n    radial-gradient(ellipse at 20% 20%, rgba(107,169,222,.10), transparent 55%),\r\n    linear-gradient(180deg, #131f34 0%, #0f1a2c 100%);\r\n  border: 1px solid var(--border);\r\n  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);\r\n  overflow: hidden;\r\n}\r\n.okc-hero-inner::before {\r\n  content: \"\"; position: absolute; inset: 0;\r\n  background: repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);\r\n  pointer-events: none;\r\n}\r\n.okc-hero-content { padding-bottom: 60px; position: relative; z-index: 2; }\r\n.okc-eyebrow {\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  padding: 6px 14px; border-radius: 999px;\r\n  background: rgba(168,208,245,.08); border: 1px solid var(--border);\r\n  color: var(--accent); font-size: .82rem; font-weight: 600;\r\n  letter-spacing: .04em; text-transform: uppercase;\r\n  margin-bottom: 22px;\r\n}\r\n.okc-eyebrow .pulse {\r\n  width: 8px; height: 8px; border-radius: 50%; background: var(--tear);\r\n  box-shadow: 0 0 0 0 rgba(124,197,255,.7); animation: okcPulse 2s infinite;\r\n}\r\n@keyframes okcPulse { 70%{ box-shadow: 0 0 0 12px rgba(124,197,255,0);} 100%{box-shadow: 0 0 0 0 rgba(124,197,255,0);} }\r\n\r\n.okc-hero h1 { margin-bottom: 20px; }\r\n.okc-hero h1 .cry { color: var(--tear); font-style: italic; }\r\n.okc-hero h1 .thumb { display: inline-block; animation: okcThumb 2.6s ease-in-out infinite; transform-origin: bottom center; }\r\n@keyframes okcThumb { 0%,100%{transform: rotate(0)} 45%{transform: rotate(-8deg) translateY(-4px)} 55%{transform: rotate(-8deg) translateY(-4px)} }\r\n\r\n.okc-hero-sub { font-size: 1.08rem; color: #b6c1d4; max-width: 520px; margin-bottom: 32px; }\r\n.okc-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }\r\n.okc-btn {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  padding: 14px 26px; border-radius: 999px;\r\n  font-weight: 700; font-size: .95rem; letter-spacing: -0.01em;\r\n  transition: transform .25s, box-shadow .25s, background .25s;\r\n}\r\n.okc-btn-primary {\r\n  background: linear-gradient(135deg, #cfe4fb, #7cc5ff);\r\n  color: #0b1220;\r\n  box-shadow: 0 10px 28px rgba(124,197,255,.35);\r\n}\r\n.okc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(124,197,255,.5); }\r\n.okc-btn-ghost {\r\n  background: rgba(168,208,245,.08); color: var(--text);\r\n  border: 1px solid var(--border-strong);\r\n}\r\n.okc-btn-ghost:hover { background: rgba(168,208,245,.14); transform: translateY(-2px); }\r\n\r\n.okc-hero-socials { display: flex; gap: 10px; margin-bottom: 8px; }\r\n.okc-social {\r\n  width: 44px; height: 44px; border-radius: 50%;\r\n  background: rgba(168,208,245,.08); border: 1px solid var(--border);\r\n  display: grid; place-items: center; color: var(--accent);\r\n  transition: all .25s;\r\n}\r\n.okc-social:hover { background: var(--accent); color: #0b1220; transform: translateY(-3px); }\r\n.okc-social svg { width: 18px; height: 18px; }\r\n\r\n.okc-hero-gif {\r\n  position: absolute; right: 0; bottom: 0;\r\n  width: min(560px, 52%);\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));\r\n}\r\n.okc-hero-gif img { width: 100%; height: auto; display: block; }\r\n\r\n\/* falling tears *\/\r\n.okc-tears { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }\r\n.okc-tear {\r\n  position: absolute; top: -10px; width: 6px; height: 12px;\r\n  background: linear-gradient(180deg, transparent, var(--tear));\r\n  border-radius: 0 0 50% 50% \/ 0 0 100% 100%;\r\n  opacity: 0; animation: okcFall linear infinite;\r\n}\r\n@keyframes okcFall {\r\n  0% { transform: translateY(-20px); opacity: 0; }\r\n  10% { opacity: .85; }\r\n  100% { transform: translateY(800px); opacity: 0; }\r\n}\r\n\r\n\/* mini blinking monitor \/ plant *\/\r\n.okc-mini-monitor {\r\n  position: absolute; left: 40px; top: 40px;\r\n  width: 68px; height: 46px; border-radius: 6px;\r\n  background: #0b1220; border: 2px solid #2a3a56;\r\n  overflow: hidden; opacity: .8;\r\n}\r\n.okc-mini-monitor::after {\r\n  content: \"\"; position: absolute; inset: 0;\r\n  background: linear-gradient(180deg, rgba(239,68,68,.7), rgba(239,68,68,.2));\r\n  animation: okcFlicker 3.2s infinite;\r\n}\r\n@keyframes okcFlicker { 0%,90%,100%{opacity:.6} 5%,15%,50%{opacity:.15} 20%{opacity:1} }\r\n\r\n@media (max-width: 900px) {\r\n  .okc-hero { padding: 30px 0 0; }\r\n  .okc-hero-inner {\r\n    grid-template-columns: 1fr; padding: 30px 24px 340px; min-height: auto;\r\n    border-radius: 24px; text-align: left;\r\n  }\r\n  .okc-hero-gif { width: 90%; right: 0; bottom: 0; left: auto; }\r\n  .okc-hero-content { padding-bottom: 20px; }\r\n  .okc-mini-monitor { display: none; }\r\n}\r\n\r\n\/* ---------- CA BANNER (BELOW HERO) ---------- *\/\r\n.okc-ca-banner {\r\n  position: relative; z-index: 2; padding: 40px 0 0;\r\n}\r\n.okc-ca-banner .okc-container { max-width: 760px; }\r\n.okc-ca-box {\r\n  padding: 24px 30px;\r\n  background: rgba(17, 27, 44, 0.75);\r\n  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\r\n  border: 1px solid var(--border-strong);\r\n  border-radius: 20px; display: flex; flex-direction: column;\r\n  align-items: center; gap: 14px;\r\n  box-shadow: 0 16px 30px -10px rgba(0,0,0,.4);\r\n}\r\n.okc-ca-box .title { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }\r\n.okc-ca-box code { font-family: 'Manrope', monospace; font-size: clamp(0.9rem, 4vw, 1.15rem); color: var(--highlight); word-break: break-all; text-align: center; font-weight: 600; }\r\n\r\n\/* ---------- LIVE STATS ---------- *\/\r\n.okc-market { position: relative; z-index: 1; padding: 100px 0 60px; }\r\n.okc-section-head { text-align: left; margin-bottom: 40px; }\r\n.okc-section-head .okc-eyebrow { margin-bottom: 14px; }\r\n.okc-market-grid {\r\n  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;\r\n  margin-bottom: 24px;\r\n}\r\n.okc-stat {\r\n  padding: 26px 22px; border-radius: 20px;\r\n  background: linear-gradient(180deg, var(--card), var(--card-2));\r\n  border: 1px solid var(--border); position: relative; overflow: hidden;\r\n  transition: transform .3s, border-color .3s;\r\n}\r\n.okc-stat:hover { transform: translateY(-4px); border-color: var(--border-strong); }\r\n.okc-stat-label { color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }\r\n.okc-stat-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: okcPulse 2s infinite; }\r\n.okc-stat-value { font-family: 'Bricolage Grotesque', serif; font-size: 1.9rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }\r\n.okc-stat-sub { color: var(--muted); font-size: .85rem; margin-top: 4px; }\r\n.okc-stat-tag {\r\n  position: absolute; top: 20px; right: 20px; font-size: .7rem; font-weight: 700;\r\n  padding: 4px 10px; border-radius: 999px;\r\n  background: rgba(124,197,255,.15); color: var(--tear); letter-spacing: .05em;\r\n}\r\n\r\n.okc-market-note {\r\n  padding: 20px 24px; border-radius: 16px; text-align: center;\r\n  border: 1px dashed var(--border-strong); background: rgba(168,208,245,.03);\r\n  color: #b6c1d4;\r\n}\r\n.okc-market-note strong { color: var(--highlight); }\r\n\r\n@media (max-width: 800px) { .okc-market-grid { grid-template-columns: repeat(2, 1fr); } }\r\n@media (max-width: 440px) { .okc-market-grid { grid-template-columns: 1fr; } }\r\n\r\n\/* ---------- ABOUT ---------- *\/\r\n.okc-about { position: relative; z-index: 1; padding: 80px 0; text-align: center; }\r\n.okc-about-inner { max-width: 820px; margin: 0 auto; }\r\n.okc-about-imgwrap {\r\n  width: min(280px, 60vw); aspect-ratio: 1\/1;\r\n  margin: 0 auto 36px; border-radius: 50%;\r\n  background: linear-gradient(135deg, #cfe4fb 0%, #7cc5ff 50%, #4a90d9 100%);\r\n  padding: 14px;\r\n  box-shadow:\r\n    0 30px 60px -10px rgba(107,169,222,.4),\r\n    0 0 0 1px rgba(255,255,255,.05),\r\n    inset 0 -20px 40px rgba(0,0,0,.15);\r\n  position: relative;\r\n  animation: okcFloat 6s ease-in-out infinite;\r\n}\r\n@keyframes okcFloat { 0%,100%{transform: translateY(0)} 50%{transform: translateY(-14px)} }\r\n.okc-about-imgwrap::after {\r\n  content: \"\"; position: absolute; inset: 8px; border-radius: 50%;\r\n  box-shadow: inset 0 0 40px rgba(11,18,32,.3);\r\n  pointer-events: none;\r\n}\r\n.okc-about-img {\r\n  width: 100%; height: 100%; border-radius: 50%;\r\n  object-fit: cover; background: #f0f7ff;\r\n  -webkit-clip-path: circle(50% at 50% 50%);\r\n  clip-path: circle(50% at 50% 50%);\r\n  -webkit-mask-image: -webkit-radial-gradient(white, black);\r\n}\r\n.okc-about h2 { margin-bottom: 20px; }\r\n.okc-about p { color: #cbd4e2; font-size: 1.05rem; }\r\n.okc-about p em { color: var(--tear); font-style: italic; }\r\n.okc-about-quote {\r\n  margin-top: 30px; padding: 24px 28px;\r\n  border-left: 3px solid var(--accent); text-align: left;\r\n  background: rgba(168,208,245,.04); border-radius: 0 16px 16px 0;\r\n  font-family: 'Bricolage Grotesque', serif; font-size: 1.15rem;\r\n  color: var(--highlight); font-style: italic;\r\n}\r\n\r\n\/* ---------- IMAGE GENERATOR ---------- *\/\r\n.okc-meme { position: relative; z-index: 1; padding: 80px 0; }\r\n.okc-meme-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }\r\n.okc-meme-head .okc-eyebrow { margin-left: auto; margin-right: auto; }\r\n.okc-meme-wrap {\r\n  display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px;\r\n  align-items: start;\r\n}\r\n.okc-meme-stage {\r\n  position: relative;\r\n  aspect-ratio: 1\/1; width: 100%;\r\n  border-radius: 20px; overflow: hidden;\r\n  background: #f0f7ff;\r\n  border: 1px solid var(--border-strong);\r\n  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);\r\n  touch-action: none;\r\n  user-select: none;\r\n}\r\n.okc-meme-stage .stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\r\n.okc-meme-item {\r\n  position: absolute; cursor: grab; user-select: none;\r\n  touch-action: none;\r\n  z-index: 2;\r\n}\r\n.okc-meme-item.selected { outline: 2px dashed var(--tear); outline-offset: 4px; }\r\n.okc-meme-item.dragging { cursor: grabbing; }\r\n.okc-meme-item.text {\r\n  font-family: 'Bricolage Grotesque', 'Impact', sans-serif;\r\n  font-weight: 800;\r\n  text-transform: uppercase;\r\n  color: #ffffff;\r\n  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 6px rgba(0,0,0,.6);\r\n  padding: 4px 8px;\r\n  white-space: pre-wrap;\r\n  text-align: center;\r\n  line-height: 1.1;\r\n  max-width: 90%;\r\n  word-break: break-word;\r\n}\r\n.okc-meme-item.sticker img { pointer-events: none; width: 100%; height: 100%; object-fit: contain; }\r\n.okc-meme-item.sticker { width: 45%; }\r\n.okc-meme-delete {\r\n  position: absolute; top: -12px; right: -12px;\r\n  width: 26px; height: 26px; border-radius: 50%;\r\n  background: var(--danger); color: #fff; font-weight: 800;\r\n  display: none; align-items: center; justify-content: center;\r\n  border: 2px solid #fff; font-size: 14px; line-height: 1;\r\n  box-shadow: 0 4px 10px rgba(0,0,0,.3);\r\n}\r\n.okc-meme-item.selected .okc-meme-delete { display: flex; }\r\n.okc-resize {\r\n  position: absolute; bottom: -10px; right: -10px;\r\n  width: 22px; height: 22px; border-radius: 50%;\r\n  background: var(--accent); border: 2px solid #fff;\r\n  display: none; cursor: nwse-resize;\r\n}\r\n.okc-meme-item.selected .okc-resize { display: block; }\r\n\r\n.okc-meme-controls {\r\n  padding: 24px; border-radius: 20px;\r\n  background: linear-gradient(180deg, var(--card), var(--card-2));\r\n  border: 1px solid var(--border);\r\n}\r\n.okc-ctrl-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }\r\n.okc-bg-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 22px; }\r\n.okc-bg-thumb {\r\n  aspect-ratio: 1\/1; border-radius: 10px; overflow: hidden;\r\n  border: 2px solid transparent; cursor: pointer;\r\n  transition: border-color .2s, transform .2s;\r\n}\r\n.okc-bg-thumb:hover { transform: translateY(-2px); }\r\n.okc-bg-thumb.active { border-color: var(--tear); }\r\n.okc-bg-thumb img { width: 100%; height: 100%; object-fit: cover; }\r\n\r\n.okc-ctrl-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }\r\n.okc-ctrl-input {\r\n  flex: 1; min-width: 0; padding: 12px 14px;\r\n  border-radius: 10px; background: rgba(11,18,32,.5);\r\n  border: 1px solid var(--border); color: var(--text); font: inherit; font-size: .95rem;\r\n}\r\n.okc-ctrl-input:focus { outline: none; border-color: var(--accent); }\r\n.okc-ctrl-btn {\r\n  padding: 12px 16px; border-radius: 10px;\r\n  background: rgba(168,208,245,.1); color: var(--text);\r\n  border: 1px solid var(--border-strong); font-weight: 600; font-size: .9rem;\r\n  transition: all .2s;\r\n}\r\n.okc-ctrl-btn:hover { background: rgba(168,208,245,.2); }\r\n.okc-ctrl-btn.primary { background: linear-gradient(135deg, #cfe4fb, #7cc5ff); color: #0b1220; border: none; }\r\n.okc-ctrl-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124,197,255,.35); }\r\n.okc-ctrl-btn.danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #ffb4b4; }\r\n\r\n.okc-ctrl-group { padding: 14px; border-radius: 12px; background: rgba(11,18,32,.35); border: 1px solid var(--border); margin-bottom: 14px; }\r\n.okc-ctrl-group .okc-ctrl-label { margin-bottom: 8px; }\r\n.okc-slider { width: 100%; accent-color: var(--accent); }\r\n.okc-color { width: 44px; height: 40px; border: none; padding: 0; background: none; border-radius: 8px; cursor: pointer; }\r\n.okc-inline { display: flex; align-items: center; gap: 10px; }\r\n.okc-hint { font-size: .8rem; color: var(--muted); margin-top: 8px; }\r\n\r\n@media (max-width: 900px) {\r\n  .okc-meme-wrap { grid-template-columns: 1fr; }\r\n}\r\n\r\n\/* ---------- THE DETAILS ---------- *\/\r\n.okc-tokenomics { position: relative; z-index: 1; padding: 80px 0; }\r\n.okc-tokenomics-inner {\r\n  padding: 44px;\r\n  border-radius: 28px;\r\n  background:\r\n    radial-gradient(circle at 100% 0%, rgba(107,169,222,.14), transparent 60%),\r\n    linear-gradient(180deg, var(--card), var(--card-2));\r\n  border: 1px solid var(--border);\r\n}\r\n.okc-tokenomics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }\r\n.okc-contract {\r\n  display: flex; align-items: center; gap: 10px;\r\n  padding: 12px 14px; background: rgba(11,18,32,.5);\r\n  border: 1px solid var(--border); border-radius: 12px;\r\n  font-family: 'Manrope', monospace; font-size: .88rem; color: #b6c1d4;\r\n  margin-bottom: 26px; overflow: hidden;\r\n}\r\n.okc-contract code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n.okc-copy {\r\n  padding: 8px 14px; border-radius: 8px; font-size: .78rem; font-weight: 700;\r\n  background: var(--accent); color: #0b1220;\r\n  transition: transform .2s;\r\n}\r\n.okc-copy:hover { transform: translateY(-1px); }\r\n.okc-copy.copied { background: var(--success); }\r\n\r\n.okc-tokenomics-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\r\n.okc-tokenomics-stat {\r\n  padding: 18px; border-radius: 14px;\r\n  background: rgba(168,208,245,.05); border: 1px solid var(--border);\r\n}\r\n.okc-tokenomics-stat .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }\r\n.okc-tokenomics-stat .value { font-family: 'Bricolage Grotesque', serif; font-size: 1.4rem; font-weight: 700; margin-top: 4px; color: var(--highlight); }\r\n\r\n.okc-dist-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }\r\n.okc-dist { display: flex; flex-direction: column; gap: 6px; }\r\n.okc-dist-row { display: flex; justify-content: space-between; font-size: .95rem; }\r\n.okc-dist-row .name { color: #cbd4e2; font-weight: 600; }\r\n.okc-dist-row .pct { color: var(--tear); font-weight: 700; font-family: 'Bricolage Grotesque', serif; }\r\n.okc-bar { height: 10px; background: rgba(168,208,245,.08); border-radius: 999px; overflow: hidden; }\r\n.okc-bar-fill {\r\n  height: 100%; border-radius: 999px;\r\n  background: linear-gradient(90deg, #a8d0f5, #7cc5ff);\r\n  width: 0; transition: width 1.4s cubic-bezier(.2,.9,.3,1);\r\n}\r\n.okc-bar-fill.animate { }\r\n\r\n@media (max-width: 900px) {\r\n  .okc-tokenomics-grid { grid-template-columns: 1fr; }\r\n  .okc-tokenomics-inner { padding: 28px 22px; }\r\n}\r\n\r\n\/* ---------- COMMUNITY ---------- *\/\r\n.okc-community { position: relative; z-index: 1; padding: 100px 0; text-align: center; }\r\n.okc-community-inner {\r\n  max-width: 720px; margin: 0 auto;\r\n  padding: 56px 40px; border-radius: 28px;\r\n  background:\r\n    radial-gradient(ellipse at 50% 0%, rgba(124,197,255,.15), transparent 60%),\r\n    linear-gradient(180deg, #16223a, #101a2d);\r\n  border: 1px solid var(--border-strong);\r\n  position: relative; overflow: hidden;\r\n}\r\n.okc-community-inner::before {\r\n  content: \"\ud83d\udc4d\"; position: absolute; right: -20px; top: -20px;\r\n  font-size: 220px; opacity: .04; transform: rotate(-15deg);\r\n  pointer-events: none;\r\n}\r\n.okc-community h2 .em { color: var(--tear); font-style: italic; }\r\n.okc-community p { max-width: 520px; margin: 0 auto 26px; color: #b6c1d4; font-size: 1.05rem; }\r\n.okc-community-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }\r\n\r\n\/* ---------- FOOTER ---------- *\/\r\n.okc-footer { position: relative; z-index: 1; padding: 60px 0 30px; border-top: 1px solid var(--border); background: #08101c; }\r\n.okc-footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }\r\n.okc-footer-brand p { color: var(--muted); font-size: .9rem; margin-top: 12px; max-width: 320px; }\r\n.okc-footer h4 { font-family: 'Bricolage Grotesque', serif; font-size: .95rem; color: var(--highlight); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .05em; }\r\n.okc-footer li { margin-bottom: 8px; }\r\n.okc-footer li a { color: var(--muted); font-size: .92rem; transition: color .2s; }\r\n.okc-footer li a:hover { color: var(--tear); }\r\n.okc-footer-bottom {\r\n  padding-top: 24px; border-top: 1px solid var(--border);\r\n  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;\r\n  color: var(--muted); font-size: .84rem;\r\n}\r\n@media (max-width: 700px) {\r\n  .okc-footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }\r\n  .okc-footer-brand { grid-column: 1 \/ -1; }\r\n}\r\n\r\n\/* ---------- POPUP ---------- *\/\r\n.okc-popup-container { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }\r\n.okc-popup {\r\n  background: rgba(11,18,32,.92); backdrop-filter: blur(14px);\r\n  border: 1px solid var(--border-strong); border-left: 3px solid var(--tear);\r\n  padding: 14px 18px; border-radius: 12px;\r\n  color: var(--text); font-weight: 600; font-size: .95rem;\r\n  box-shadow: 0 20px 40px -10px rgba(0,0,0,.6);\r\n  transform: translateX(30px); opacity: 0;\r\n  transition: all .5s cubic-bezier(.2,.9,.3,1);\r\n  max-width: 320px;\r\n  pointer-events: auto;\r\n}\r\n.okc-popup.show { transform: translateX(0); opacity: 1; }\r\n\r\n\/* ---------- EASTER EGG - konami \/ cat click ---------- *\/\r\n.okc-secret {\r\n  position: fixed; inset: 0; z-index: 300;\r\n  background: rgba(5,9,15,.92); backdrop-filter: blur(10px);\r\n  display: none; align-items: center; justify-content: center;\r\n  animation: okcFadeIn .4s ease;\r\n}\r\n.okc-secret.show { display: flex; }\r\n@keyframes okcFadeIn { from { opacity: 0 } to { opacity: 1 } }\r\n.okc-secret-box {\r\n  text-align: center; padding: 40px 30px; max-width: 420px;\r\n  background: linear-gradient(180deg, var(--card), var(--card-2));\r\n  border: 1px solid var(--border-strong); border-radius: 24px;\r\n}\r\n.okc-secret-box h3 { font-size: 1.8rem; margin-bottom: 10px; }\r\n.okc-secret-box p { color: #cbd4e2; }\r\n.okc-secret-close {\r\n  margin-top: 20px; padding: 10px 22px; border-radius: 999px;\r\n  background: var(--accent); color: #0b1220; font-weight: 700;\r\n}\r\n\r\n\/* ---------- SMOOTH SCROLL \/ MOTION ---------- *\/\r\nhtml { scroll-behavior: smooth; }\r\n.okc-reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.9,.3,1); }\r\n.okc-reveal.visible { opacity: 1; transform: translateY(0); }\r\n\r\n<\/style>\r\n\r\n<!-- ================= APP ROOT ================= -->\r\n<div id=\"okcat-app\">\r\n\r\n  <!-- LOADING SCREEN -->\r\n  <div class=\"okc-loader\" id=\"okcLoader\">\r\n    <div class=\"okc-loader-inner\">\r\n      <div class=\"okc-loader-text\" id=\"okcLoaderText\">Checking portfolio<span class=\"dot\">.<\/span><span class=\"dot\">.<\/span><span class=\"dot\">.<\/span><\/div>\r\n      <svg class=\"okc-loader-chart\" viewBox=\"0 0 340 90\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n        <polyline class=\"line\" points=\"0,20 30,25 60,18 90,30 120,26 150,38 180,45 210,60 240,55 270,70 300,78 340,85\"\/>\r\n      <\/svg>\r\n      <img decoding=\"async\" class=\"okc-loader-cat\" src=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/itsok-hero-asset.gif\" alt=\"\">\r\n      <div class=\"okc-loader-final\">It's Ok.<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- NAV -->\r\n  <nav class=\"okc-nav\" id=\"okcNav\">\r\n    <div class=\"okc-nav-inner\">\r\n      <a href=\"#hero\" class=\"okc-logo\">\r\n        <span class=\"okc-logo-emoji\">\ud83d\udc31<\/span>\r\n        <span>OKCAT<\/span>\r\n      <\/a>\r\n      <div class=\"okc-nav-links\">\r\n        <a href=\"#hero\">Home<\/a>\r\n        <a href=\"#market\">Market<\/a>\r\n        <a href=\"#about\">About<\/a>\r\n        <a href=\"#meme\">Image Gen<\/a>\r\n        <a href=\"#details\">Details<\/a>\r\n        <a href=\"#community\">Community<\/a>\r\n      <\/div>\r\n      <a href=\"#\" class=\"okc-nav-cta\">Buy $OKCAT \u2192<\/a>\r\n      <button class=\"okc-nav-toggle\" id=\"okcNavToggle\" aria-label=\"Menu\"><span><\/span><span><\/span><span><\/span><\/button>\r\n    <\/div>\r\n  <\/nav>\r\n\r\n  <!-- HERO -->\r\n  <section class=\"okc-hero\" id=\"hero\">\r\n    <div class=\"okc-container\">\r\n      <div class=\"okc-hero-inner\">\r\n        <div class=\"okc-mini-monitor\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"okc-tears\" id=\"okcTears\" aria-hidden=\"true\"><\/div>\r\n\r\n        <div class=\"okc-hero-content\">\r\n          <span class=\"okc-eyebrow\"><span class=\"pulse\"><\/span> $OKCAT \u00b7 Powered by tears<\/span>\r\n          <h1>\r\n            Portfolio red.<br>\r\n            Hands shaking.<br>\r\n            <span class=\"cry\">Eyes wet.<\/span> <span class=\"thumb\">\ud83d\udc4d<\/span><br>\r\n            It's Ok.\r\n          <\/h1>\r\n          <p class=\"okc-hero-sub\">\r\n            The market is crashing. The dev rugged. Your friends stopped texting back. But the cat is still here \u2014 thumbs up, tears streaming, and holding the line. <strong>We are all the cat.<\/strong>\r\n          <\/p>\r\n          <div class=\"okc-hero-actions\">\r\n            <a href=\"#\" class=\"okc-btn okc-btn-primary\">Buy $OKCAT<\/a>\r\n            <a href=\"#meme\" class=\"okc-btn okc-btn-ghost\">Make an Image \u2192<\/a>\r\n          <\/div>\r\n          <div class=\"okc-hero-socials\">\r\n            <a href=\"#\" class=\"okc-social\" title=\"X (Twitter)\" aria-label=\"X\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.244 2H21l-6.51 7.44L22 22h-6.828l-4.79-6.257L4.8 22H2l7.02-8.02L2 2h6.914l4.32 5.71L18.244 2Zm-2.393 18h1.83L7.24 4H5.29l10.56 16Z\"\/><\/svg>\r\n            <\/a>\r\n            <a href=\"#\" class=\"okc-social\" title=\"Telegram\" aria-label=\"Telegram\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"m21.5 3.5-19 7.6c-1.1.4-1.1 1.5 0 1.9l4.7 1.6 1.9 5.9c.3.9.5 1.2 1.1 1.2.4 0 .7-.2 1-.5l2.6-2.5 5.3 3.9c1 .5 1.7.2 2-.9L23 6c.3-1.6-.5-2.3-1.5-2.5ZM8.9 15.5l-.4 4.3 2-2.5-1.6-1.8Zm10.7-8.7-8.6 7.7-.4 3.6 8.9-11.4-.1.1Z\"\/><\/svg>\r\n            <\/a>\r\n            <a href=\"#\" class=\"okc-social\" title=\"Dexscreener\" aria-label=\"Dexscreener\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v18h18\"\/><path d=\"M7 15l3-4 3 3 5-7\"\/><\/svg>\r\n            <\/a>\r\n            <a href=\"#\" class=\"okc-social\" title=\"DEX\" aria-label=\"DEX\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M8 12l2.5 2.5L16 9\"\/><\/svg>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"okc-hero-gif\" data-parallax=\"0.15\">\r\n          <img decoding=\"async\" src=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/itsok-hero-asset.gif\" alt=\"It's Ok cat with thumbs up crying\">\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- CA BANNER (Moved here directly below hero) -->\r\n  <div class=\"okc-ca-banner okc-reveal\">\r\n    <div class=\"okc-container\">\r\n      <div class=\"okc-ca-box\">\r\n        <div class=\"title\">Contract Address<\/div>\r\n        <code id=\"okcFullCa\">0xOkCat000000000000000000000000000000000000<\/code>\r\n        <button class=\"okc-btn okc-btn-primary\" id=\"okcCopyFullCaBtn\" style=\"padding: 12px 30px; font-size: .95rem; border-radius: 999px;\">Copy CA<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- LIVE STATS -->\r\n  <section class=\"okc-market\" id=\"market\">\r\n    <div class=\"okc-container\">\r\n      <div class=\"okc-section-head okc-reveal\">\r\n        <span class=\"okc-eyebrow\"><span class=\"pulse\"><\/span> Live Stats<\/span>\r\n        <h2>The chart is red.<br>It's ok.<\/h2>\r\n      <\/div>\r\n      <div class=\"okc-market-grid\">\r\n        <div class=\"okc-stat okc-reveal\">\r\n          <div class=\"okc-stat-tag\">SOON<\/div>\r\n          <div class=\"okc-stat-label\"><span class=\"dot\"><\/span> Price<\/div>\r\n          <div class=\"okc-stat-value\">TBA<\/div>\r\n          <div class=\"okc-stat-sub\">Awaiting listing<\/div>\r\n        <\/div>\r\n        <div class=\"okc-stat okc-reveal\">\r\n          <div class=\"okc-stat-tag\">SOON<\/div>\r\n          <div class=\"okc-stat-label\"><span class=\"dot\"><\/span> Market Cap<\/div>\r\n          <div class=\"okc-stat-value\">\u2014<\/div>\r\n          <div class=\"okc-stat-sub\">Fully diluted valuation<\/div>\r\n        <\/div>\r\n        <div class=\"okc-stat okc-reveal\">\r\n          <div class=\"okc-stat-tag\">SOON<\/div>\r\n          <div class=\"okc-stat-label\"><span class=\"dot\"><\/span> Holders<\/div>\r\n          <div class=\"okc-stat-value\">0<\/div>\r\n          <div class=\"okc-stat-sub\">Growing every hour<\/div>\r\n        <\/div>\r\n        <div class=\"okc-stat okc-reveal\">\r\n          <div class=\"okc-stat-tag\">SOON<\/div>\r\n          <div class=\"okc-stat-label\"><span class=\"dot\"><\/span> 24h Volume<\/div>\r\n          <div class=\"okc-stat-value\">$\u2014<\/div>\r\n          <div class=\"okc-stat-sub\">Traded across DEX<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"okc-market-note okc-reveal\">\r\n        <strong>Live data will stream soon<\/strong> once $OKCAT launches. Until then \u2014 deep breaths, thumbs up. \ud83d\udc31\ud83d\udc4d\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ABOUT -->\r\n  <section class=\"okc-about\" id=\"about\">\r\n    <div class=\"okc-container\">\r\n      <div class=\"okc-about-inner\">\r\n        <div class=\"okc-about-imgwrap okc-reveal\">\r\n          <img decoding=\"async\" class=\"okc-about-img\" src=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/ok-about.gif\" alt=\"It's Ok cat\">\r\n        <\/div>\r\n        <span class=\"okc-eyebrow okc-reveal\"><span class=\"pulse\"><\/span> The Lore<\/span>\r\n        <h2 class=\"okc-reveal\">The strongest creature around<\/h2>\r\n        <p class=\"okc-reveal\">\r\n          Most people think the crying cat is <em>sad<\/em>. They're wrong. Anyone can smile when they're winning. Anyone can post gains screenshots. Anyone can be confident at all-time highs.\r\n        <\/p>\r\n        <p class=\"okc-reveal\">\r\n          But it takes a different kind of soul to be down bad \u2014 truly, completely, historically down bad \u2014 and still give the thumbs up. Still show up. Still hold. Still say: <em>It's ok.<\/em>\r\n        <\/p>\r\n        <div class=\"okc-about-quote okc-reveal\">\r\n          \"The cat doesn't cry because it's weak. The cat cries because it feels everything \u2014 and gives the thumbs up anyway.\"\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- IMAGE GENERATOR -->\r\n  <section class=\"okc-meme\" id=\"meme\">\r\n    <div class=\"okc-container\">\r\n      <div class=\"okc-meme-head okc-reveal\">\r\n        <span class=\"okc-eyebrow\"><span class=\"pulse\"><\/span> Image Generator<\/span>\r\n        <h2>Make your own \"It's Ok\" image<\/h2>\r\n        <p>Pick a background, add the cat, drop your text anywhere. Download and post it. Thumbs up through the pain.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"okc-meme-wrap\">\r\n        <!-- STAGE -->\r\n        <div class=\"okc-meme-stage\" id=\"okcStage\">\r\n          <img decoding=\"async\" class=\"stage-bg\" id=\"okcStageBg\" src=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/Asset-7.png\" alt=\"\" crossorigin=\"anonymous\">\r\n        <\/div>\r\n\r\n        <!-- CONTROLS -->\r\n        <div class=\"okc-meme-controls\">\r\n          <div class=\"okc-ctrl-label\">1. Choose Background<\/div>\r\n          <div class=\"okc-bg-picker\" id=\"okcBgPicker\">\r\n            <div class=\"okc-bg-thumb active\" data-bg=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/Asset-7.png\"><img decoding=\"async\" src=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/Asset-7.png\" alt=\"\"><\/div>\r\n            <div class=\"okc-bg-thumb\" data-bg=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/Asset-8.png\"><img decoding=\"async\" src=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/Asset-8.png\" alt=\"\"><\/div>\r\n            <div class=\"okc-bg-thumb\" data-bg=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/Asset-9.png\"><img decoding=\"async\" src=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/Asset-9.png\" alt=\"\"><\/div>\r\n            <div class=\"okc-bg-thumb\" data-bg=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/Asset-10.png\"><img decoding=\"async\" src=\"https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/Asset-10.png\" alt=\"\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"okc-ctrl-label\">2. Add Elements<\/div>\r\n          <div class=\"okc-ctrl-row\">\r\n            <button class=\"okc-ctrl-btn\" id=\"okcAddCat\">\ud83d\udc31 Add Cat<\/button>\r\n          <\/div>\r\n          <div class=\"okc-ctrl-row\">\r\n            <input type=\"text\" class=\"okc-ctrl-input\" id=\"okcTextInput\" placeholder=\"Type your text...\" maxlength=\"80\">\r\n            <button class=\"okc-ctrl-btn primary\" id=\"okcAddText\">+ Add Text<\/button>\r\n          <\/div>\r\n\r\n          <div class=\"okc-ctrl-group\" id=\"okcTextOptions\" style=\"display:none;\">\r\n            <div class=\"okc-ctrl-label\">Selected Text<\/div>\r\n            <div class=\"okc-inline\" style=\"margin-bottom:10px;\">\r\n              <input type=\"color\" class=\"okc-color\" id=\"okcTextColor\" value=\"#ffffff\">\r\n              <div style=\"flex:1\">\r\n                <div class=\"okc-ctrl-label\" style=\"margin-bottom:4px;\">Size<\/div>\r\n                <input type=\"range\" class=\"okc-slider\" id=\"okcTextSize\" min=\"16\" max=\"80\" value=\"34\">\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"okc-hint\">Tip: double-click any text to edit. Drag the corner handle to resize.<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"okc-ctrl-label\">3. Save Your Image<\/div>\r\n          <div class=\"okc-ctrl-row\">\r\n            <button class=\"okc-ctrl-btn primary\" id=\"okcDownload\" style=\"flex:1;\">\u2b07 Download PNG<\/button>\r\n            <button class=\"okc-ctrl-btn\" id=\"okcShareX\">Share on X<\/button>\r\n          <\/div>\r\n          <div class=\"okc-ctrl-row\">\r\n            <button class=\"okc-ctrl-btn danger\" id=\"okcClear\" style=\"flex:1;\">\u21ba Clear All<\/button>\r\n          <\/div>\r\n          <div class=\"okc-hint\">All images render inside your browser. Nothing is uploaded.<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- THE DETAILS -->\r\n  <section class=\"okc-tokenomics\" id=\"details\">\r\n    <div class=\"okc-container\">\r\n      <div class=\"okc-section-head okc-reveal\">\r\n        <span class=\"okc-eyebrow\"><span class=\"pulse\"><\/span> The Details<\/span>\r\n        <h2>Simple. Transparent. Sad.<\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"okc-tokenomics-inner okc-reveal\">\r\n        <div class=\"okc-tokenomics-grid\">\r\n          <div>\r\n            <div class=\"okc-ctrl-label\" style=\"margin-bottom:10px;\">Contract Address<\/div>\r\n            <div class=\"okc-contract\">\r\n              <code id=\"okcContract\">0xOkCat000000000000000000000000000000000000<\/code>\r\n              <button class=\"okc-copy\" id=\"okcCopyBtn\">Copy<\/button>\r\n            <\/div>\r\n            <div class=\"okc-tokenomics-stats\">\r\n              <div class=\"okc-tokenomics-stat\">\r\n                <div class=\"label\">Total Supply<\/div>\r\n                <div class=\"value\">1,000,000,000<\/div>\r\n              <\/div>\r\n              <div class=\"okc-tokenomics-stat\">\r\n                <div class=\"label\">Buy \/ Sell Tax<\/div>\r\n                <div class=\"value\">0% \/ 0%<\/div>\r\n              <\/div>\r\n              <div class=\"okc-tokenomics-stat\">\r\n                <div class=\"label\">Liquidity<\/div>\r\n                <div class=\"value\">Burned \ud83d\udd25<\/div>\r\n              <\/div>\r\n              <div class=\"okc-tokenomics-stat\">\r\n                <div class=\"label\">Mint Authority<\/div>\r\n                <div class=\"value\">Revoked \u2713<\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div>\r\n            <div class=\"okc-ctrl-label\" style=\"margin-bottom:14px;\">Distribution<\/div>\r\n            <div class=\"okc-dist-list\">\r\n              <div class=\"okc-dist\">\r\n                <div class=\"okc-dist-row\"><span class=\"name\">Liquidity Pool<\/span><span class=\"pct\">85%<\/span><\/div>\r\n                <div class=\"okc-bar\"><div class=\"okc-bar-fill\" data-w=\"85\"><\/div><\/div>\r\n              <\/div>\r\n              <div class=\"okc-dist\">\r\n                <div class=\"okc-dist-row\"><span class=\"name\">Community & Airdrops<\/span><span class=\"pct\">8%<\/span><\/div>\r\n                <div class=\"okc-bar\"><div class=\"okc-bar-fill\" data-w=\"8\"><\/div><\/div>\r\n              <\/div>\r\n              <div class=\"okc-dist\">\r\n                <div class=\"okc-dist-row\"><span class=\"name\">Marketing & Events<\/span><span class=\"pct\">5%<\/span><\/div>\r\n                <div class=\"okc-bar\"><div class=\"okc-bar-fill\" data-w=\"5\"><\/div><\/div>\r\n              <\/div>\r\n              <div class=\"okc-dist\">\r\n                <div class=\"okc-dist-row\"><span class=\"name\">Team (locked)<\/span><span class=\"pct\">2%<\/span><\/div>\r\n                <div class=\"okc-bar\"><div class=\"okc-bar-fill\" data-w=\"2\"><\/div><\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- COMMUNITY -->\r\n  <section class=\"okc-community\" id=\"community\">\r\n    <div class=\"okc-container\">\r\n      <div class=\"okc-community-inner okc-reveal\">\r\n        <span class=\"okc-eyebrow\"><span class=\"pulse\"><\/span> The Fam<\/span>\r\n        <h2>Join the ones who <span class=\"em\">show up anyway<\/span><\/h2>\r\n        <p>\r\n          Not the ones who are fine. Not the ones who pretend. The ones who know it's not ok \u2014 and show up anyway. Thumbs up through the pain. Eyes wet. Hands strong. <strong>We are all the cat.<\/strong>\r\n        <\/p>\r\n        <div class=\"okc-community-actions\">\r\n          <a href=\"#\" class=\"okc-btn okc-btn-primary\">Join Telegram<\/a>\r\n          <a href=\"#\" class=\"okc-btn okc-btn-ghost\">Follow on X<\/a>\r\n          <a href=\"#\" class=\"okc-btn okc-btn-ghost\">Dexscreener<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- FOOTER -->\r\n  <footer class=\"okc-footer\">\r\n    <div class=\"okc-container\">\r\n      <div class=\"okc-footer-inner\">\r\n        <div class=\"okc-footer-brand\">\r\n          <div class=\"okc-logo\">\r\n            <span class=\"okc-logo-emoji\">\ud83d\udc31<\/span>\r\n            <span>OKCAT<\/span>\r\n          <\/div>\r\n          <p>$OKCAT is a coin for the ones who lost everything and came back. Thumbs up through the pain. This is not financial advice \u2014 this is emotional support with a ticker.<\/p>\r\n        <\/div>\r\n        <div>\r\n          <h4>Explore<\/h4>\r\n          <ul>\r\n            <li><a href=\"#hero\">Home<\/a><\/li>\r\n            <li><a href=\"#market\">Market<\/a><\/li>\r\n            <li><a href=\"#about\">About<\/a><\/li>\r\n            <li><a href=\"#meme\">Image Generator<\/a><\/li>\r\n            <li><a href=\"#details\">Details<\/a><\/li>\r\n          <\/ul>\r\n        <\/div>\r\n        <div>\r\n          <h4>Community<\/h4>\r\n          <ul>\r\n            <li><a href=\"#\">X \/ Twitter<\/a><\/li>\r\n            <li><a href=\"#\">Telegram<\/a><\/li>\r\n            <li><a href=\"#\">Dexscreener<\/a><\/li>\r\n            <li><a href=\"#\">DEX<\/a><\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"okc-footer-bottom\">\r\n        <div>\u00a9 2026 $OKCAT. It's ok.<\/div>\r\n        <div>Made with tears and thumbs up \ud83d\udc4d\ud83d\ude22<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/footer>\r\n\r\n  <!-- POPUP CONTAINER -->\r\n  <div class=\"okc-popup-container\" id=\"okcPopups\"><\/div>\r\n\r\n  <!-- EASTER EGG MODAL -->\r\n  <div class=\"okc-secret\" id=\"okcSecret\">\r\n    <div class=\"okc-secret-box\">\r\n      <h3>You found the secret \ud83d\udc31<\/h3>\r\n      <p>You clicked the cat 10 times. It's ok. The cat is still crying. The cat is still holding. So are you. Now go make an image.<\/p>\r\n      <button class=\"okc-secret-close\" id=\"okcSecretClose\">It's Ok \ud83d\udc4d<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const app = document.getElementById('okcat-app');\r\n  if (!app) return;\r\n\r\n  \/* ============ LOADING SEQUENCE ============ *\/\r\n  \/\/ The animation is adjusted to match exactly 1 full cycle of a ~3s GIF playback.\r\n  const loader = document.getElementById('okcLoader');\r\n  const loaderText = document.getElementById('okcLoaderText');\r\n  \r\n  setTimeout(()=> loader.classList.add('stage-chart'), 600);\r\n  setTimeout(()=> {\r\n    loaderText.innerHTML = 'Chart is red<span class=\"dot\">.<\/span><span class=\"dot\">.<\/span><span class=\"dot\">.<\/span>';\r\n  }, 1200);\r\n  setTimeout(()=> {\r\n    loaderText.innerHTML = \"It's Ok.\";\r\n    loader.classList.add('stage-cat'); \/\/ GIF starts displaying here\r\n  }, 1800);\r\n  \/\/ Hidden exactly 3 seconds after the GIF is shown, ending with the GIF's loop\r\n  setTimeout(()=> loader.classList.add('hidden'), 4800);\r\n\r\n  \/* ============ NAV MOBILE ============ *\/\r\n  const nav = document.getElementById('okcNav');\r\n  const toggle = document.getElementById('okcNavToggle');\r\n  toggle.addEventListener('click', ()=> nav.classList.toggle('mobile-open'));\r\n  nav.querySelectorAll('.okc-nav-links a').forEach(a=>{\r\n    a.addEventListener('click', ()=> nav.classList.remove('mobile-open'));\r\n  });\r\n\r\n  \/* ============ FALLING TEARS ============ *\/\r\n  const tearsWrap = document.getElementById('okcTears');\r\n  function spawnTear(){\r\n    const t = document.createElement('div');\r\n    t.className = 'okc-tear';\r\n    t.style.left = (Math.random()*100) + '%';\r\n    t.style.animationDuration = (2.2 + Math.random()*2.6) + 's';\r\n    t.style.animationDelay = (Math.random()*1.2) + 's';\r\n    t.style.opacity = 0.6 + Math.random()*0.4;\r\n    tearsWrap.appendChild(t);\r\n    setTimeout(()=> t.remove(), 6000);\r\n  }\r\n  for (let i=0;i<8;i++) setTimeout(spawnTear, i*300);\r\n  setInterval(spawnTear, 850);\r\n\r\n  \/* ============ REVEAL ON SCROLL ============ *\/\r\n  const io = new IntersectionObserver((entries)=>{\r\n    entries.forEach(e=>{\r\n      if (e.isIntersecting){\r\n        e.target.classList.add('visible');\r\n        io.unobserve(e.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.12 });\r\n  app.querySelectorAll('.okc-reveal').forEach(el=> io.observe(el));\r\n\r\n  \/* ============ PARALLAX (light) ============ *\/\r\n  const parallaxEls = app.querySelectorAll('[data-parallax]');\r\n  window.addEventListener('scroll', ()=>{\r\n    const y = window.scrollY;\r\n    parallaxEls.forEach(el=>{\r\n      const speed = parseFloat(el.dataset.parallax) || 0.1;\r\n      el.style.transform = `translateY(${y*speed*-1}px)`;\r\n    });\r\n  }, { passive: true });\r\n\r\n  \/* ============ TOKENOMICS BARS ============ *\/\r\n  const bars = app.querySelectorAll('.okc-bar-fill');\r\n  const barIO = new IntersectionObserver((entries)=>{\r\n    entries.forEach(e=>{\r\n      if (e.isIntersecting){\r\n        e.target.style.width = e.target.dataset.w + '%';\r\n        barIO.unobserve(e.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.3 });\r\n  bars.forEach(b=> barIO.observe(b));\r\n\r\n  \/* ============ COPY CONTRACT (Original Details section) ============ *\/\r\n  const copyBtn = document.getElementById('okcCopyBtn');\r\n  if(copyBtn) {\r\n    copyBtn.addEventListener('click', ()=>{\r\n      const text = document.getElementById('okcContract').textContent.trim();\r\n      if (navigator.clipboard) navigator.clipboard.writeText(text);\r\n      copyBtn.textContent = 'Copied \u2713';\r\n      copyBtn.classList.add('copied');\r\n      showPopup(\"Contract Copied! It's ok. \ud83d\udc4d\");\r\n      setTimeout(()=>{ copyBtn.textContent = 'Copy'; copyBtn.classList.remove('copied'); }, 1800);\r\n    });\r\n  }\r\n\r\n  \/* ============ COPY CONTRACT (New Banner Below Hero) ============ *\/\r\n  const copyFullCaBtn = document.getElementById('okcCopyFullCaBtn');\r\n  if(copyFullCaBtn) {\r\n    copyFullCaBtn.addEventListener('click', ()=>{\r\n      const text = document.getElementById('okcFullCa').textContent.trim();\r\n      if (navigator.clipboard) navigator.clipboard.writeText(text);\r\n      copyFullCaBtn.textContent = 'Copied \u2713';\r\n      showPopup(\"Full CA Copied! It's ok. \ud83d\udc4d\");\r\n      setTimeout(()=>{ copyFullCaBtn.textContent = 'Copy CA'; }, 1800);\r\n    });\r\n  }\r\n\r\n  \/* ============ RANDOM POPUPS ============ *\/\r\n  const popupMessages = [\r\n    \"Down 99% \u2014 It's Ok \ud83d\udc4d\",\r\n    \"Sold the bottom? It's Ok \ud83d\udc4d\",\r\n    \"Rugged again? It's Ok \ud83d\udc4d\",\r\n    \"Bought the top? It's Ok \ud83d\udc4d\",\r\n    \"Missed the pump? It's Ok \ud83d\udc4d\",\r\n    \"Wife left? It's Ok \ud83d\udc4d\",\r\n    \"Portfolio nuked? It's Ok \ud83d\udc4d\",\r\n    \"Cried today? Same. It's Ok \ud83d\udc4d\",\r\n    \"Still holding? Thumbs up \ud83d\udc4d\",\r\n  ];\r\n  const popupContainer = document.getElementById('okcPopups');\r\n  function showPopup(msg){\r\n    const p = document.createElement('div');\r\n    p.className = 'okc-popup';\r\n    p.textContent = msg;\r\n    popupContainer.appendChild(p);\r\n    requestAnimationFrame(()=> p.classList.add('show'));\r\n    setTimeout(()=>{\r\n      p.classList.remove('show');\r\n      setTimeout(()=> p.remove(), 600);\r\n    }, 4200);\r\n  }\r\n  let popupIndex = 0;\r\n  function randomPopup(){\r\n    \/\/ shuffle-ish\r\n    const msg = popupMessages[Math.floor(Math.random()*popupMessages.length)];\r\n    showPopup(msg);\r\n  }\r\n  setTimeout(()=> randomPopup(), 6500);\r\n  setInterval(randomPopup, 14000);\r\n\r\n  \/* ============ EASTER EGG \u2014 click cat 10x ============ *\/\r\n  const heroCat = document.querySelector('.okc-hero-gif');\r\n  const secret = document.getElementById('okcSecret');\r\n  let clicks = 0;\r\n  if (heroCat) {\r\n    heroCat.style.pointerEvents = 'auto';\r\n    heroCat.style.cursor = 'pointer';\r\n    heroCat.addEventListener('click', ()=>{\r\n      clicks++;\r\n      showPopup(`${clicks}\/10 \u2014 the cat feels you \ud83d\udc31`);\r\n      if (clicks >= 10) { secret.classList.add('show'); clicks = 0; }\r\n    });\r\n  }\r\n  const secretClose = document.getElementById('okcSecretClose');\r\n  if(secretClose) {\r\n    secretClose.addEventListener('click', ()=> secret.classList.remove('show'));\r\n  }\r\n\r\n  \/* Konami-lite: type \"okok\" *\/\r\n  let buffer = '';\r\n  window.addEventListener('keydown', (e)=>{\r\n    buffer = (buffer + e.key.toLowerCase()).slice(-4);\r\n    if (buffer === 'okok') { showPopup('You typed okok. It\\'s ok. \ud83d\udc4d'); secret.classList.add('show'); }\r\n  });\r\n\r\n  \/* ============ SHARE ON X ============ *\/\r\n  document.querySelectorAll('.okc-nav-cta').forEach(b=>{\r\n    \/\/ no-op if href is # \u2014 let browser scroll\r\n  });\r\n\r\n  \/* =====================================================\r\n    ============  IMAGE GENERATOR ============\r\n  ===================================================== *\/\r\n  const stage = document.getElementById('okcStage');\r\n  const stageBg = document.getElementById('okcStageBg');\r\n  const bgPicker = document.getElementById('okcBgPicker');\r\n  const addCatBtn = document.getElementById('okcAddCat');\r\n  const textInput = document.getElementById('okcTextInput');\r\n  const addTextBtn = document.getElementById('okcAddText');\r\n  const textOpts = document.getElementById('okcTextOptions');\r\n  const textColor = document.getElementById('okcTextColor');\r\n  const textSize = document.getElementById('okcTextSize');\r\n  const dlBtn = document.getElementById('okcDownload');\r\n  const shareBtn = document.getElementById('okcShareX');\r\n  const clearBtn = document.getElementById('okcClear');\r\n\r\n  const CAT_ASSET = 'https:\/\/itsokcat.fun\/wp-content\/uploads\/2026\/07\/Asset-6.png';\r\n  let selected = null;\r\n  let itemCount = 0;\r\n\r\n  function selectItem(el){\r\n    if (selected) selected.classList.remove('selected');\r\n    selected = el;\r\n    if (el) {\r\n      el.classList.add('selected');\r\n      if (el.classList.contains('text')) {\r\n        textOpts.style.display = 'block';\r\n        textColor.value = rgbToHex(el.style.color) || '#ffffff';\r\n        textSize.value = parseInt(el.style.fontSize) || 34;\r\n      } else {\r\n        textOpts.style.display = 'none';\r\n      }\r\n    } else {\r\n      textOpts.style.display = 'none';\r\n    }\r\n  }\r\n\r\n  function rgbToHex(rgb){\r\n    if (!rgb) return null;\r\n    if (rgb.startsWith('#')) return rgb;\r\n    const m = rgb.match(\/\\d+\/g);\r\n    if (!m || m.length < 3) return null;\r\n    return '#' + m.slice(0,3).map(n=> Number(n).toString(16).padStart(2,'0')).join('');\r\n  }\r\n\r\n  \/\/ clicking stage empty area deselects\r\n  if(stage && stageBg) {\r\n    stage.addEventListener('mousedown', (e)=>{\r\n      if (e.target === stage || e.target === stageBg) selectItem(null);\r\n    });\r\n  }\r\n\r\n  \/\/ Background picker\r\n  if(bgPicker && stageBg) {\r\n    bgPicker.addEventListener('click', (e)=>{\r\n      const thumb = e.target.closest('.okc-bg-thumb');\r\n      if (!thumb) return;\r\n      bgPicker.querySelectorAll('.okc-bg-thumb').forEach(t=> t.classList.remove('active'));\r\n      thumb.classList.add('active');\r\n      stageBg.src = thumb.dataset.bg;\r\n    });\r\n  }\r\n\r\n  \/\/ Add cat\r\n  if(addCatBtn) {\r\n    addCatBtn.addEventListener('click', ()=>{\r\n      const item = createItem('sticker');\r\n      const img = document.createElement('img');\r\n      img.src = CAT_ASSET;\r\n      img.crossOrigin = 'anonymous';\r\n      item.appendChild(img);\r\n      item.style.left = '30%';\r\n      item.style.top = '35%';\r\n      item.style.width = '40%';\r\n      stage.appendChild(item);\r\n      selectItem(item);\r\n    });\r\n  }\r\n\r\n  \/\/ Add text\r\n  if(addTextBtn) {\r\n    addTextBtn.addEventListener('click', ()=>{\r\n      const val = (textInput.value || \"It's Ok \ud83d\udc4d\").trim() || \"It's Ok \ud83d\udc4d\";\r\n      const item = createItem('text');\r\n      item.textContent = val;\r\n      item.style.left = '25%';\r\n      item.style.top = '10%';\r\n      item.style.fontSize = '34px';\r\n      item.style.color = '#ffffff';\r\n      item.setAttribute('contenteditable', 'false');\r\n      stage.appendChild(item);\r\n      selectItem(item);\r\n      textInput.value = '';\r\n\r\n      \/\/ double-click to edit\r\n      item.addEventListener('dblclick', ()=>{\r\n        item.setAttribute('contenteditable', 'true');\r\n        item.focus();\r\n        document.execCommand('selectAll', false, null);\r\n      });\r\n      item.addEventListener('blur', ()=> item.setAttribute('contenteditable', 'false'));\r\n    });\r\n  }\r\n\r\n  if(textColor) {\r\n    textColor.addEventListener('input', ()=>{\r\n      if (selected && selected.classList.contains('text')) selected.style.color = textColor.value;\r\n    });\r\n  }\r\n  \r\n  if(textSize) {\r\n    textSize.addEventListener('input', ()=>{\r\n      if (selected && selected.classList.contains('text')) selected.style.fontSize = textSize.value + 'px';\r\n    });\r\n  }\r\n\r\n  function createItem(kind){\r\n    itemCount++;\r\n    const item = document.createElement('div');\r\n    item.className = 'okc-meme-item ' + kind;\r\n    item.dataset.id = 'i' + itemCount;\r\n\r\n    \/\/ delete btn\r\n    const del = document.createElement('button');\r\n    del.className = 'okc-meme-delete';\r\n    del.type = 'button';\r\n    del.textContent = '\u00d7';\r\n    del.addEventListener('click', (ev)=>{\r\n      ev.stopPropagation();\r\n      if (selected === item) selectItem(null);\r\n      item.remove();\r\n    });\r\n    item.appendChild(del);\r\n\r\n    \/\/ resize handle\r\n    const rz = document.createElement('div');\r\n    rz.className = 'okc-resize';\r\n    item.appendChild(rz);\r\n\r\n    \/\/ dragging\r\n    makeDraggable(item, rz);\r\n    item.addEventListener('mousedown', ()=> selectItem(item));\r\n    item.addEventListener('touchstart', ()=> selectItem(item), { passive: true });\r\n\r\n    return item;\r\n  }\r\n\r\n  function makeDraggable(item, rzHandle){\r\n    let dragging = false, resizing = false;\r\n    let startX, startY, startLeft, startTop, startW, startFS;\r\n    const stageRect = ()=> stage.getBoundingClientRect();\r\n\r\n    const onDown = (e)=>{\r\n      if (e.target === rzHandle) return; \/\/ resizing handled separately\r\n      if (e.target.classList.contains('okc-meme-delete')) return;\r\n      if (item.getAttribute('contenteditable') === 'true') return;\r\n      dragging = true; item.classList.add('dragging');\r\n      const p = getPoint(e);\r\n      const rect = item.getBoundingClientRect();\r\n      const sr = stageRect();\r\n      startX = p.x; startY = p.y;\r\n      startLeft = rect.left - sr.left;\r\n      startTop = rect.top - sr.top;\r\n      e.preventDefault();\r\n    };\r\n    const onMove = (e)=>{\r\n      const sr = stageRect();\r\n      if (dragging){\r\n        const p = getPoint(e);\r\n        const nx = startLeft + (p.x - startX);\r\n        const ny = startTop + (p.y - startY);\r\n        item.style.left = (nx \/ sr.width * 100) + '%';\r\n        item.style.top  = (ny \/ sr.height * 100) + '%';\r\n      } else if (resizing){\r\n        const p = getPoint(e);\r\n        const dx = p.x - startX;\r\n        if (item.classList.contains('sticker')){\r\n          const nw = Math.max(40, startW + dx);\r\n          item.style.width = (nw \/ sr.width * 100) + '%';\r\n        } else {\r\n          const nfs = Math.max(12, Math.min(140, startFS + dx * 0.5));\r\n          item.style.fontSize = nfs + 'px';\r\n          textSize.value = Math.round(nfs);\r\n        }\r\n      }\r\n    };\r\n    const onUp = ()=>{\r\n      dragging = false; resizing = false; item.classList.remove('dragging');\r\n    };\r\n\r\n    item.addEventListener('mousedown', onDown);\r\n    item.addEventListener('touchstart', onDown, { passive: false });\r\n\r\n    rzHandle.addEventListener('mousedown', (e)=>{\r\n      e.stopPropagation(); resizing = true;\r\n      const p = getPoint(e);\r\n      startX = p.x; startY = p.y;\r\n      startW = item.offsetWidth;\r\n      startFS = parseFloat(item.style.fontSize) || 34;\r\n      e.preventDefault();\r\n    });\r\n    rzHandle.addEventListener('touchstart', (e)=>{\r\n      e.stopPropagation(); resizing = true;\r\n      const p = getPoint(e);\r\n      startX = p.x; startY = p.y;\r\n      startW = item.offsetWidth;\r\n      startFS = parseFloat(item.style.fontSize) || 34;\r\n    }, { passive: false });\r\n\r\n    window.addEventListener('mousemove', onMove);\r\n    window.addEventListener('touchmove', onMove, { passive: false });\r\n    window.addEventListener('mouseup', onUp);\r\n    window.addEventListener('touchend', onUp);\r\n\r\n    function getPoint(e){\r\n      if (e.touches && e.touches[0]) return { x: e.touches[0].clientX, y: e.touches[0].clientY };\r\n      return { x: e.clientX, y: e.clientY };\r\n    }\r\n  }\r\n\r\n  \/\/ Clear\r\n  if(clearBtn) {\r\n    clearBtn.addEventListener('click', ()=>{\r\n      stage.querySelectorAll('.okc-meme-item').forEach(el=> el.remove());\r\n      selectItem(null);\r\n    });\r\n  }\r\n\r\n  \/\/ Download\r\n  if(dlBtn) {\r\n    dlBtn.addEventListener('click', async ()=>{\r\n      if (typeof html2canvas === 'undefined') { showPopup('Renderer not loaded yet \u2014 try again.'); return; }\r\n      selectItem(null);\r\n      dlBtn.textContent = 'Rendering...';\r\n      dlBtn.disabled = true;\r\n      try {\r\n        const canvas = await html2canvas(stage, {\r\n          useCORS: true,\r\n          allowTaint: true,\r\n          backgroundColor: null,\r\n          scale: 2,\r\n          logging: false,\r\n        });\r\n        const link = document.createElement('a');\r\n        link.download = 'okcat-image-' + Date.now() + '.png';\r\n        link.href = canvas.toDataURL('image\/png');\r\n        link.click();\r\n        showPopup('Image saved. It\\'s ok. \ud83d\udc4d');\r\n      } catch(err){\r\n        console.error(err);\r\n        showPopup('Could not render. Try right-click \u2192 Save on the stage.');\r\n      } finally {\r\n        dlBtn.textContent = '\u2b07 Download PNG';\r\n        dlBtn.disabled = false;\r\n      }\r\n    });\r\n  }\r\n\r\n  \/\/ Share on X\r\n  if(shareBtn) {\r\n    shareBtn.addEventListener('click', ()=>{\r\n      const text = encodeURIComponent(\"Just made my $OKCAT image.\\n\\nIt's ok. \ud83d\udc4d\ud83d\ude22\\n\\n#OKCAT #ItsOk\");\r\n      window.open('https:\/\/twitter.com\/intent\/tweet?text=' + text, '_blank');\r\n    });\r\n  }\r\n\r\n})();\r\n<\/script>\r\n<!-- ================ END $OKCAT ================ -->\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Checking portfolio&#8230; It&#8217;s Ok. \ud83d\udc31 OKCAT Home Market About Image Gen Details Community Buy $OKCAT \u2192 $OKCAT \u00b7 Powered by tears Portfolio red. Hands shaking. Eyes wet. \ud83d\udc4d It&#8217;s Ok. The market is crashing. The dev rugged. Your friends stopped texting back. But the cat is still here \u2014 thumbs up, tears streaming, and holding [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itsokcat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itsokcat.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itsokcat.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itsokcat.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itsokcat.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":10,"href":"https:\/\/itsokcat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/itsokcat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/itsokcat.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}