MadlySane \u2014 The 3\u2011Word Check\u2011In<\/title>\n <meta name=\"description\" content=\"Say how you really are in 3 words. Create a shareable card, download it, and invite others to be witnessed.\">\n \n <meta property=\"og:title\" content=\"The 3\u2011Word Check\u2011In \u2014 MadlySane\">\n <meta property=\"og:description\" content=\"Say how you really are in 3 words. Create a shareable card, download it, and pass it on.\">\n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:url\" content=\"https:\/\/madlysane.site\/\">\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n\n <style>\n :root{\n --bg:#0f0f12;\n --card:#15161a;\n --text:#eef0f3;\n --muted:#a6adbb;\n --brand1:#8a5cff; \/* MadlySane vibe gradient start *\/\n --brand2:#21d4fd; \/* gradient end *\/\n --accent:#ffb86b;\n --focus:#ffd166;\n --ok:#4ade80;\n --warn:#f97316;\n --danger:#ef4444;\n --shadow: 0 20px 40px rgba(0,0,0,.35);\n --radius:16px;\n }\n\n *{box-sizing:border-box}\n html,body{height:100%}\n body{\n margin:0;\n background:\n radial-gradient(1200px 600px at 10% -10%, rgba(138,92,255,.18), transparent 60%),\n radial-gradient(900px 500px at 110% 0%, rgba(33,212,253,.12), transparent 55%),\n linear-gradient(180deg, #0b0b0e 0%, #0f0f12 100%);\n color:var(--text);\n font: 16px\/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Apple Color Emoji\",\"Segoe UI Emoji\";\n letter-spacing:.2px;\n }\n\n .wrap{\n max-width:960px;\n margin:0 auto;\n padding:32px 20px 80px;\n }\n\n header{\n display:flex; align-items:center; justify-content:space-between;\n gap:16px; flex-wrap:wrap;\n margin-bottom:24px;\n }\n\n .brand{\n display:flex; align-items:center; gap:14px;\n }\n .logo{\n width:42px; height:42px; border-radius:50%;\n background: conic-gradient(from 200deg, var(--brand1), var(--brand2));\n box-shadow: var(--shadow);\n }\n .title{\n font-size:1.25rem; font-weight:700;\n letter-spacing:.3px;\n }\n .subtitle{\n color:var(--muted); font-size:.95rem;\n max-width:60ch;\n margin:8px 0 0 56px;\n }\n\n .grid{\n display:grid; grid-template-columns: 1.2fr 1fr; gap:24px;\n }\n @media (max-width: 880px){ .grid{ grid-template-columns:1fr; } .subtitle{ margin-left:0; } }\n\n .panel{\n background: rgba(21,22,26,.7);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(255,255,255,.06);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding:20px;\n }\n\n h2{\n margin:0 0 14px; font-size:1.1rem;\n font-weight:700; letter-spacing:.3px;\n }\n\n .fields{ display:flex; gap:10px; margin:10px 0 12px; }\n .fields input{\n flex:1; background:#0f1115; color:var(--text);\n border:1px solid rgba(255,255,255,.1);\n border-radius:12px; padding:12px 14px;\n outline:none; transition:.15s border-color, .15s box-shadow;\n }\n .fields input:focus{\n border-color: var(--focus);\n box-shadow: 0 0 0 4px rgba(255,209,102,.15);\n }\n\n .hint{ color:var(--muted); font-size:.9rem; margin-top:6px; }\n\n .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }\n .btn{\n appearance:none; border:0; cursor:pointer;\n border-radius:12px; padding:12px 16px;\n font-weight:700; letter-spacing:.2px;\n color:#0b0b0e; background:linear-gradient(135deg, var(--brand1), var(--brand2));\n box-shadow: var(--shadow);\n }\n .btn.secondary{ background:#23252b; color:var(--text); }\n .btn.ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12); }\n .btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }\n\n .preview{\n display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;\n }\n .share-card{\n width:100%; aspect-ratio: 4 \/ 5; \/* 1080 x 1350 *\/\n border-radius: 20px;\n overflow:hidden; position:relative;\n background: linear-gradient(160deg, rgba(138,92,255,.5), rgba(33,212,253,.45)), linear-gradient(180deg, #16181f, #0f1016);\n border:1px solid rgba(255,255,255,.08);\n box-shadow: var(--shadow);\n display:flex; align-items:center; justify-content:center;\n padding:28px;\n }\n .card-inner{\n display:flex; flex-direction:column; align-items:center; gap:18px; width:100%;\n }\n .tag{\n font-size:.85rem; color:#0b0b0e; font-weight:800;\n background: linear-gradient(135deg, var(--accent), #ffd1a3);\n padding:8px 12px; border-radius:999px;\n letter-spacing:.4px; text-transform:uppercase;\n }\n .words{\n font-size: clamp(28px, 3.4vw, 44px);\n line-height:1.18; font-weight:900; text-wrap:balance;\n text-align:center; letter-spacing:.5px;\n text-shadow: 0 2px 18px rgba(0,0,0,.35);\n }\n .words b{ font-weight:900; }\n .footer-line{\n display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%;\n color:rgba(238,240,243,.9); font-weight:700; font-size:.95rem;\n }\n .ms-badge{\n display:flex; align-items:center; gap:10px;\n }\n .dot{ width:10px; height:10px; border-radius:50%; background:conic-gradient(from 200deg, var(--brand1), var(--brand2)); box-shadow:0 0 0 4px rgba(255,255,255,.1); }\n\n .share{\n display:flex; flex-wrap:wrap; gap:10px; justify-content:center;\n }\n\n .note{\n color:var(--muted); font-size:.85rem; text-align:center; margin-top:8px;\n }\n\n .safety{\n margin-top:22px; background:#13141a; border:1px solid rgba(255,255,255,.06);\n border-radius: 12px; padding:12px 14px; color:var(--muted); font-size:.9rem;\n }\n\n .success{ color:var(--ok); }\n .warning{ color:var(--warn); }\n .error{ color:var(--danger); }\n\n .mini{\n display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; margin-top:6px;\n }\n\n canvas{ display:none; } \/* used for PNG export *\/\n [aria-live]{ min-height:1.2em; }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <header aria-label=\"MadlySane 3-Word Check-In\">\n <div class=\"brand\">\n <div class=\"logo\" aria-hidden=\"true\"><\/div>\n <div>\n <div class=\"title\">MadlySane \u2014 The 3\u2011Word Check\u2011In<\/div>\n <p class=\"subtitle\">Say how you really are in three words. Download a beautiful card, share it, and invite others to be witnessed \u2014 no fixing, just belonging.<\/p>\n <\/div>\n <\/div>\n <a class=\"btn secondary\" href=\"https:\/\/madlysane.site\/en\/4491-2\/\" data-track=\"click_register\">Become a Founding Member<\/a>\n <\/header>\n\n <div class=\"grid\">\n <section class=\"panel\" aria-labelledby=\"make-yours\">\n <h2 id=\"make-yours\">Make yours<\/h2>\n <div class=\"fields\">\n <input id=\"w1\" maxlength=\"18\" placeholder=\"tired\" aria-label=\"Word one\">\n <input id=\"w2\" maxlength=\"18\" placeholder=\"hopeful\" aria-label=\"Word two\">\n <input id=\"w3\" maxlength=\"18\" placeholder=\"alive\" aria-label=\"Word three\">\n <\/div>\n <div class=\"hint\">Tip: Use raw words, not labels. Think \u201cheavy, loud, reaching\u201d rather than \u201cdepressed.\u201d<\/div>\n <div class=\"actions\">\n <button class=\"btn\" id=\"create\" data-track=\"create_card\">Create my shareable card<\/button>\n <button class=\"btn ghost\" id=\"random\">Surprise me<\/button>\n <div role=\"status\" aria-live=\"polite\" id=\"status\" class=\"\"><\/div>\n <\/div>\n <div class=\"safety\" role=\"note\">\n This is not crisis support. If you\u2019re in immediate danger or crisis in the U.S., call or text 988. You deserve real-time care.\n <\/div>\n <\/section>\n\n <section class=\"panel preview\" aria-labelledby=\"preview\">\n <h2 id=\"preview\">Preview & share<\/h2>\n <div class=\"share-card\" id=\"card\" role=\"img\" aria-label=\"Your 3-word check-in card\">\n <div class=\"card-inner\">\n <div class=\"tag\">I refuse to pretend<\/div>\n <div class=\"words\" id=\"words\">\n <b>tired<\/b> • <b>hopeful<\/b> • <b>alive<\/b>\n<\/div>\n\n <div class=\"footer-line\">\n <div class=\"ms-badge\"><span class=\"dot\" aria-hidden=\"true\"><\/span> MadlySane<\/div>\n <div>#ThreeWordTruth<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"share\">\n <a class=\"btn secondary\" id=\"download\" download=\"MadlySane-3Word.png\" data-track=\"download_card\">Download PNG<\/a>\n <button class=\"btn secondary\" id=\"copy\" data-track=\"copy_link\">Copy link<\/button>\n <a class=\"btn secondary\" id=\"tw\" target=\"_blank\" rel=\"noopener\" data-track=\"share_twitter\">Share on X<\/a>\n <a class=\"btn secondary\" id=\"li\" target=\"_blank\" rel=\"noopener\" data-track=\"share_linkedin\">Share on LinkedIn<\/a>\n <a class=\"btn secondary\" id=\"fb\" target=\"_blank\" rel=\"noopener\" data-track=\"share_fb\">Share on Facebook<\/a>\n <\/div>\n <div class=\"note\">Pass it on: post yours, tag a friend with \u201cWitness me?\u201d and invite them to share theirs.<\/div>\n <div class=\"mini\"><span aria-hidden=\"true\">\ud83d\udd01<\/span> Your link encodes your three words. No tracking, no feeds \u2014 just your truth.<\/div>\n <canvas id=\"cvs\" width=\"1080\" height=\"1350\" aria-hidden=\"true\"><\/canvas>\n <\/section>\n <\/div>\n <\/div>\n\n <script>\n (function(){\n const $ = sel => document.querySelector(sel);\n const byId = id => document.getElementById(id);\n\n const inputs = [byId('w1'), byId('w2'), byId('w3')];\n const wordsEl = byId('words');\n const statusEl = byId('status');\n const downloadA = byId('download');\n const copyBtn = byId('copy');\n const twA = byId('tw'); const liA = byId('li'); const fbA = byId('fb');\n const randomBtn = byId('random');\n const createBtn = byId('create');\n\n const canvas = byId('cvs');\n const ctx = canvas.getContext('2d', { alpha: true });\n\n const suggestions = [\n [\"scared\",\"trying\",\"here\"],\n [\"tired\",\"hopeful\",\"alive\"],\n [\"numb\",\"curious\",\"soft\"],\n [\"overwhelmed\",\"breathing\",\"gentle\"],\n [\"lonely\",\"seen\",\"held\"],\n [\"angry\",\"tender\",\"healing\"],\n [\"messy\",\"honest\",\"becoming\"],\n [\"restless\",\"brave\",\"open\"]\n ];\n\n const banned = new Set([\n \"suicide\",\"suicidal\",\"kill\",\"killing\",\"murder\",\"selfharm\",\"self-harm\",\"self harm\",\n \"die\",\"dying\",\"rape\",\"abuse\",\"slur\",\"hate\"\n ]);\n\n function sanitize(s){\n return (s||\"\").toString().trim().replace(\/\\s+\/g,' ').slice(0,18);\n }\n function looksSafe(word){\n if(!word) return true;\n const w = word.toLowerCase();\n for(const b of banned){ if(w.includes(b)) return false; }\n return true;\n }\n\n function setStatus(msg, cls){\n statusEl.textContent = msg || \"\";\n statusEl.className = cls || \"\";\n }\n\n function updatePreview(words){\n const text = words.map(w => `<b>${escapeHtml(w||\"\")}<\/b>`).join(\" \u2022 \");\n wordsEl.innerHTML = text;\n buildCanvas(words);\n updateShare(words);\n }\n\n function escapeHtml(s){\n return s.replace(\/[&<>\"']\/g, ch => ({'&':'&','<':'<','>':'>','\"':'"',\"'\":'''}[ch]));\n }\n\n function wordsFromInputs(){\n return inputs.map(i => sanitize(i.value));\n }\n\n function wordsFromQuery(){\n const u = new URL(location.href);\n const raw = u.searchParams.get('words');\n if(!raw) return null;\n const parts = raw.split(',').map(x => sanitize(decodeURIComponent(x||\"\")));\n if(parts.length !== 3) return null;\n return parts;\n }\n\n function applyWords(words){\n inputs.forEach((i,idx) => { i.value = words[idx]||\"\"; });\n updatePreview(words);\n }\n\n function randomize(){\n const pick = suggestions[Math.floor(Math.random()*suggestions.length)];\n applyWords(pick);\n track('randomize_words', {value:1});\n }\n\n function buildQuery(words){\n const enc = words.map(w => encodeURIComponent(w||\"\")).join(',');\n const url = new URL(location.href);\n url.searchParams.set('words', enc);\n url.searchParams.set('utm_source','3word');\n url.searchParams.set('utm_medium','share');\n url.searchParams.set('utm_campaign','viral');\n return url.toString();\n }\n\n function updateShare(words){\n const link = buildQuery(words);\n copyBtn.dataset.link = link;\n downloadA.href = canvas.toDataURL('image\/png');\n const text = `My 3\u2011word check\u2011in: ${words.join(' \u2022 ')} \u2014 I refuse to pretend alone. #MadlySane #ThreeWordTruth`;\n twA.href = `https:\/\/twitter.com\/intent\/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(link)}`;\n liA.href = `https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=${encodeURIComponent(link)}`;\n fbA.href = `https:\/\/www.facebook.com\/sharer\/sharer.php?u=${encodeURIComponent(link)}`;\n }\n\n function buildCanvas(words){\n const W = canvas.width, H = canvas.height;\n ctx.clearRect(0,0,W,H);\n\n \/\/ Background gradient\n const grad = ctx.createLinearGradient(0,0,W,H);\n grad.addColorStop(0,'#8a5cff');\n grad.addColorStop(.6,'#21d4fd');\n grad.addColorStop(1,'#16181f');\n ctx.fillStyle = grad;\n ctx.fillRect(0,0,W,H);\n\n \/\/ Overlay vignette\n const vg = ctx.createRadialGradient(W*0.5,H*0.3,200, W*0.5,H*0.6, H*0.9);\n vg.addColorStop(0, 'rgba(0,0,0,0)');\n vg.addColorStop(1, 'rgba(0,0,0,.35)');\n ctx.fillStyle = vg;\n ctx.fillRect(0,0,W,H);\n\n \/\/ Tag\n const tag = \"I refuse to pretend\";\n ctx.font = \"700 44px system-ui, -apple-system, Segoe UI, Roboto\";\n const tagPadding = 20;\n const tagW = ctx.measureText(tag).width + tagPadding*2;\n const tagX = (W - tagW)\/2, tagY = 270;\n roundRect(ctx, tagX, tagY-48, tagW, 64, 22);\n ctx.fillStyle = ctx.createLinearGradient(tagX, tagY-48, tagX+tagW, tagY+16);\n ctx.fillStyle.addColorStop(0, \"#ffb86b\");\n ctx.fillStyle.addColorStop(1, \"#ffd1a3\");\n ctx.fill();\n ctx.fillStyle = \"#0b0b0e\";\n ctx.textAlign = \"center\"; ctx.textBaseline = \"middle\";\n ctx.fillText(tag, W\/2, tagY - 16);\n\n \/\/ Words\n ctx.fillStyle = \"#eef0f3\";\n ctx.textAlign = \"center\"; ctx.textBaseline = \"alphabetic\";\n \/\/ Add bullet at the very start, then the joined words\nconst wordsText = \"\u2022 \" + words.join(\" \u2022 \");\n;\n;\n \/\/ multiline if too long\n const lines = wrapText(wordsText, W*0.78, \"900 92px system-ui, -apple-system, Segoe UI, Roboto\");\n const startY = 540 - (lines.length-1)*60;\n lines.forEach((ln, i) => {\n ctx.font = \"900 92px system-ui, -apple-system, Segoe UI, Roboto\";\n ctx.fillText(ln, W\/2, startY + i*120);\n });\n\n \/\/ Footer\n ctx.font = \"700 40px system-ui, -apple-system, Segoe UI, Roboto\";\n ctx.fillStyle = \"rgba(238,240,243,.95)\";\n ctx.textAlign = \"left\";\n drawDot(ctx, 80, H-140);\n ctx.fillText(\"MadlySane\", 120, H-130);\n ctx.textAlign = \"right\";\n ctx.fillText(\"#ThreeWordTruth\", W-80, H-130);\n }\n\n function roundRect(ctx,x,y,w,h,r){\n ctx.beginPath();\n ctx.moveTo(x+r, y);\n ctx.arcTo(x+w, y, x+w, y+h, r);\n ctx.arcTo(x+w, y+h, x, y+h, r);\n ctx.arcTo(x, y+h, x, y, r);\n ctx.arcTo(x, y, x+w, y, r);\n ctx.closePath();\n }\n function drawDot(ctx,x,y){\n const grd = ctx.createConicGradient(3.5, x, y);\n grd.addColorStop(0, \"#8a5cff\");\n grd.addColorStop(1, \"#21d4fd\");\n ctx.fillStyle = grd;\n ctx.beginPath(); ctx.arc(x,y,14,0,Math.PI*2); ctx.fill();\n }\n\n function wrapText(text, maxWidth, font){\n const words = text.split(' ');\n const lines = [];\n let line = \"\";\n const ctx2 = ctx;\n ctx2.font = font;\n for (let n=0; n<words.length; n++){\n const test = (line? line+\" \":\"\") + words[n];\n if (ctx2.measureText(test).width > maxWidth){\n if(line) lines.push(line);\n line = words[n];\n } else {\n line = test;\n }\n }\n if(line) lines.push(line);\n return lines.slice(0,3);\n }\n\n function validate(words){\n if (words.some(w => !w)){\n setStatus(\"Add three words to create your card.\", \"warning\");\n return false;\n }\n if (words.some(w => !looksSafe(w))){\n setStatus(\"Let\u2019s keep this space safe. Try different words.\", \"error\");\n return false;\n }\n setStatus(\"\");\n return true;\n }\n\n function track(action, params){\n try{\n if(window.gtag){ window.gtag('event', action, params||{}); }\n }catch(e){}\n }\n\n function initFromQueryOrDefault(){\n const q = wordsFromQuery();\n if(q){ applyWords(q); }\n else { randomize(); }\n }\n\n \/\/ Events\n createBtn.addEventListener('click', () => {\n const words = wordsFromInputs();\n if(!validate(words)) return;\n applyWords(words);\n history.replaceState(null, \"\", buildQuery(words));\n setStatus(\"Card updated. You can download or share it now.\", \"success\");\n track('create_card', {value:1});\n });\n\n randomBtn.addEventListener('click', randomize);\n\n copyBtn.addEventListener('click', async () => {\n const link = copyBtn.dataset.link || location.href;\n try{\n await navigator.clipboard.writeText(link);\n setStatus(\"Link copied. Invite someone: \u201cWitness me?\u201d\", \"success\");\n track('copy_link', {value:1});\n }catch(e){\n setStatus(\"Couldn\u2019t copy. Long\u2011press or right\u2011click to copy.\", \"warning\");\n }\n });\n\n \/\/ Live preview as user types\n inputs.forEach(i => i.addEventListener('input', () => {\n const words = wordsFromInputs();\n updatePreview(words.map(sanitize));\n }));\n\n \/\/ Initial render\n initFromQueryOrDefault();\n\n \/\/ Accessibility: Enter submits\n inputs.forEach(i => i.addEventListener('keydown', (e) => {\n if(e.key === 'Enter'){ e.preventDefault(); createBtn.click(); }\n }));\n\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MadlySane \u2014 The 3\u2011Word Check\u2011In MadlySane \u2014 The 3\u2011Word Check\u2011In Say how you really are in three words. Download a beautiful card, share it, and invite others to be witnessed \u2014 no fixing, just belonging. Become a Founding Member Make yours Tip: Use raw words, not labels. Think \u201cheavy, loud, reaching\u201d rather than \u201cdepressed.\u201d Create […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-5518","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=5518"}],"version-history":[{"count":2,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5518\/revisions"}],"predecessor-version":[{"id":5585,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5518\/revisions\/5585"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=5518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5518,"date":"2025-08-20T10:09:41","date_gmt":"2025-08-20T15:09:41","guid":{"rendered":"https:\/\/madlysane.com\/?page_id=5518"},"modified":"2025-08-20T10:09:46","modified_gmt":"2025-08-20T15:09:46","slug":"check-in","status":"publish","type":"page","link":"https:\/\/madlysane.site\/en\/check-in\/","title":{"rendered":"Check in"},"content":{"rendered":"\n\n\n\n \n \n MadlySane \u2014 The 3\u2011Word Check\u2011In<\/title>\n <meta name=\"description\" content=\"Say how you really are in 3 words. Create a shareable card, download it, and invite others to be witnessed.\">\n \n <meta property=\"og:title\" content=\"The 3\u2011Word Check\u2011In \u2014 MadlySane\">\n <meta property=\"og:description\" content=\"Say how you really are in 3 words. Create a shareable card, download it, and pass it on.\">\n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:url\" content=\"https:\/\/madlysane.site\/\">\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n\n <style>\n :root{\n --bg:#0f0f12;\n --card:#15161a;\n --text:#eef0f3;\n --muted:#a6adbb;\n --brand1:#8a5cff; \/* MadlySane vibe gradient start *\/\n --brand2:#21d4fd; \/* gradient end *\/\n --accent:#ffb86b;\n --focus:#ffd166;\n --ok:#4ade80;\n --warn:#f97316;\n --danger:#ef4444;\n --shadow: 0 20px 40px rgba(0,0,0,.35);\n --radius:16px;\n }\n\n *{box-sizing:border-box}\n html,body{height:100%}\n body{\n margin:0;\n background:\n radial-gradient(1200px 600px at 10% -10%, rgba(138,92,255,.18), transparent 60%),\n radial-gradient(900px 500px at 110% 0%, rgba(33,212,253,.12), transparent 55%),\n linear-gradient(180deg, #0b0b0e 0%, #0f0f12 100%);\n color:var(--text);\n font: 16px\/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Apple Color Emoji\",\"Segoe UI Emoji\";\n letter-spacing:.2px;\n }\n\n .wrap{\n max-width:960px;\n margin:0 auto;\n padding:32px 20px 80px;\n }\n\n header{\n display:flex; align-items:center; justify-content:space-between;\n gap:16px; flex-wrap:wrap;\n margin-bottom:24px;\n }\n\n .brand{\n display:flex; align-items:center; gap:14px;\n }\n .logo{\n width:42px; height:42px; border-radius:50%;\n background: conic-gradient(from 200deg, var(--brand1), var(--brand2));\n box-shadow: var(--shadow);\n }\n .title{\n font-size:1.25rem; font-weight:700;\n letter-spacing:.3px;\n }\n .subtitle{\n color:var(--muted); font-size:.95rem;\n max-width:60ch;\n margin:8px 0 0 56px;\n }\n\n .grid{\n display:grid; grid-template-columns: 1.2fr 1fr; gap:24px;\n }\n @media (max-width: 880px){ .grid{ grid-template-columns:1fr; } .subtitle{ margin-left:0; } }\n\n .panel{\n background: rgba(21,22,26,.7);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(255,255,255,.06);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding:20px;\n }\n\n h2{\n margin:0 0 14px; font-size:1.1rem;\n font-weight:700; letter-spacing:.3px;\n }\n\n .fields{ display:flex; gap:10px; margin:10px 0 12px; }\n .fields input{\n flex:1; background:#0f1115; color:var(--text);\n border:1px solid rgba(255,255,255,.1);\n border-radius:12px; padding:12px 14px;\n outline:none; transition:.15s border-color, .15s box-shadow;\n }\n .fields input:focus{\n border-color: var(--focus);\n box-shadow: 0 0 0 4px rgba(255,209,102,.15);\n }\n\n .hint{ color:var(--muted); font-size:.9rem; margin-top:6px; }\n\n .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }\n .btn{\n appearance:none; border:0; cursor:pointer;\n border-radius:12px; padding:12px 16px;\n font-weight:700; letter-spacing:.2px;\n color:#0b0b0e; background:linear-gradient(135deg, var(--brand1), var(--brand2));\n box-shadow: var(--shadow);\n }\n .btn.secondary{ background:#23252b; color:var(--text); }\n .btn.ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12); }\n .btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }\n\n .preview{\n display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;\n }\n .share-card{\n width:100%; aspect-ratio: 4 \/ 5; \/* 1080 x 1350 *\/\n border-radius: 20px;\n overflow:hidden; position:relative;\n background: linear-gradient(160deg, rgba(138,92,255,.5), rgba(33,212,253,.45)), linear-gradient(180deg, #16181f, #0f1016);\n border:1px solid rgba(255,255,255,.08);\n box-shadow: var(--shadow);\n display:flex; align-items:center; justify-content:center;\n padding:28px;\n }\n .card-inner{\n display:flex; flex-direction:column; align-items:center; gap:18px; width:100%;\n }\n .tag{\n font-size:.85rem; color:#0b0b0e; font-weight:800;\n background: linear-gradient(135deg, var(--accent), #ffd1a3);\n padding:8px 12px; border-radius:999px;\n letter-spacing:.4px; text-transform:uppercase;\n }\n .words{\n font-size: clamp(28px, 3.4vw, 44px);\n line-height:1.18; font-weight:900; text-wrap:balance;\n text-align:center; letter-spacing:.5px;\n text-shadow: 0 2px 18px rgba(0,0,0,.35);\n }\n .words b{ font-weight:900; }\n .footer-line{\n display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%;\n color:rgba(238,240,243,.9); font-weight:700; font-size:.95rem;\n }\n .ms-badge{\n display:flex; align-items:center; gap:10px;\n }\n .dot{ width:10px; height:10px; border-radius:50%; background:conic-gradient(from 200deg, var(--brand1), var(--brand2)); box-shadow:0 0 0 4px rgba(255,255,255,.1); }\n\n .share{\n display:flex; flex-wrap:wrap; gap:10px; justify-content:center;\n }\n\n .note{\n color:var(--muted); font-size:.85rem; text-align:center; margin-top:8px;\n }\n\n .safety{\n margin-top:22px; background:#13141a; border:1px solid rgba(255,255,255,.06);\n border-radius: 12px; padding:12px 14px; color:var(--muted); font-size:.9rem;\n }\n\n .success{ color:var(--ok); }\n .warning{ color:var(--warn); }\n .error{ color:var(--danger); }\n\n .mini{\n display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; margin-top:6px;\n }\n\n canvas{ display:none; } \/* used for PNG export *\/\n [aria-live]{ min-height:1.2em; }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <header aria-label=\"MadlySane 3-Word Check-In\">\n <div class=\"brand\">\n <div class=\"logo\" aria-hidden=\"true\"><\/div>\n <div>\n <div class=\"title\">MadlySane \u2014 The 3\u2011Word Check\u2011In<\/div>\n <p class=\"subtitle\">Say how you really are in three words. Download a beautiful card, share it, and invite others to be witnessed \u2014 no fixing, just belonging.<\/p>\n <\/div>\n <\/div>\n <a class=\"btn secondary\" href=\"https:\/\/madlysane.site\/en\/4491-2\/\" data-track=\"click_register\">Become a Founding Member<\/a>\n <\/header>\n\n <div class=\"grid\">\n <section class=\"panel\" aria-labelledby=\"make-yours\">\n <h2 id=\"make-yours\">Make yours<\/h2>\n <div class=\"fields\">\n <input id=\"w1\" maxlength=\"18\" placeholder=\"tired\" aria-label=\"Word one\">\n <input id=\"w2\" maxlength=\"18\" placeholder=\"hopeful\" aria-label=\"Word two\">\n <input id=\"w3\" maxlength=\"18\" placeholder=\"alive\" aria-label=\"Word three\">\n <\/div>\n <div class=\"hint\">Tip: Use raw words, not labels. Think \u201cheavy, loud, reaching\u201d rather than \u201cdepressed.\u201d<\/div>\n <div class=\"actions\">\n <button class=\"btn\" id=\"create\" data-track=\"create_card\">Create my shareable card<\/button>\n <button class=\"btn ghost\" id=\"random\">Surprise me<\/button>\n <div role=\"status\" aria-live=\"polite\" id=\"status\" class=\"\"><\/div>\n <\/div>\n <div class=\"safety\" role=\"note\">\n This is not crisis support. If you\u2019re in immediate danger or crisis in the U.S., call or text 988. You deserve real-time care.\n <\/div>\n <\/section>\n\n <section class=\"panel preview\" aria-labelledby=\"preview\">\n <h2 id=\"preview\">Preview & share<\/h2>\n <div class=\"share-card\" id=\"card\" role=\"img\" aria-label=\"Your 3-word check-in card\">\n <div class=\"card-inner\">\n <div class=\"tag\">I refuse to pretend<\/div>\n <div class=\"words\" id=\"words\">\n <b>tired<\/b> • <b>hopeful<\/b> • <b>alive<\/b>\n<\/div>\n\n <div class=\"footer-line\">\n <div class=\"ms-badge\"><span class=\"dot\" aria-hidden=\"true\"><\/span> MadlySane<\/div>\n <div>#ThreeWordTruth<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"share\">\n <a class=\"btn secondary\" id=\"download\" download=\"MadlySane-3Word.png\" data-track=\"download_card\">Download PNG<\/a>\n <button class=\"btn secondary\" id=\"copy\" data-track=\"copy_link\">Copy link<\/button>\n <a class=\"btn secondary\" id=\"tw\" target=\"_blank\" rel=\"noopener\" data-track=\"share_twitter\">Share on X<\/a>\n <a class=\"btn secondary\" id=\"li\" target=\"_blank\" rel=\"noopener\" data-track=\"share_linkedin\">Share on LinkedIn<\/a>\n <a class=\"btn secondary\" id=\"fb\" target=\"_blank\" rel=\"noopener\" data-track=\"share_fb\">Share on Facebook<\/a>\n <\/div>\n <div class=\"note\">Pass it on: post yours, tag a friend with \u201cWitness me?\u201d and invite them to share theirs.<\/div>\n <div class=\"mini\"><span aria-hidden=\"true\">\ud83d\udd01<\/span> Your link encodes your three words. No tracking, no feeds \u2014 just your truth.<\/div>\n <canvas id=\"cvs\" width=\"1080\" height=\"1350\" aria-hidden=\"true\"><\/canvas>\n <\/section>\n <\/div>\n <\/div>\n\n <script>\n (function(){\n const $ = sel => document.querySelector(sel);\n const byId = id => document.getElementById(id);\n\n const inputs = [byId('w1'), byId('w2'), byId('w3')];\n const wordsEl = byId('words');\n const statusEl = byId('status');\n const downloadA = byId('download');\n const copyBtn = byId('copy');\n const twA = byId('tw'); const liA = byId('li'); const fbA = byId('fb');\n const randomBtn = byId('random');\n const createBtn = byId('create');\n\n const canvas = byId('cvs');\n const ctx = canvas.getContext('2d', { alpha: true });\n\n const suggestions = [\n [\"scared\",\"trying\",\"here\"],\n [\"tired\",\"hopeful\",\"alive\"],\n [\"numb\",\"curious\",\"soft\"],\n [\"overwhelmed\",\"breathing\",\"gentle\"],\n [\"lonely\",\"seen\",\"held\"],\n [\"angry\",\"tender\",\"healing\"],\n [\"messy\",\"honest\",\"becoming\"],\n [\"restless\",\"brave\",\"open\"]\n ];\n\n const banned = new Set([\n \"suicide\",\"suicidal\",\"kill\",\"killing\",\"murder\",\"selfharm\",\"self-harm\",\"self harm\",\n \"die\",\"dying\",\"rape\",\"abuse\",\"slur\",\"hate\"\n ]);\n\n function sanitize(s){\n return (s||\"\").toString().trim().replace(\/\\s+\/g,' ').slice(0,18);\n }\n function looksSafe(word){\n if(!word) return true;\n const w = word.toLowerCase();\n for(const b of banned){ if(w.includes(b)) return false; }\n return true;\n }\n\n function setStatus(msg, cls){\n statusEl.textContent = msg || \"\";\n statusEl.className = cls || \"\";\n }\n\n function updatePreview(words){\n const text = words.map(w => `<b>${escapeHtml(w||\"\")}<\/b>`).join(\" \u2022 \");\n wordsEl.innerHTML = text;\n buildCanvas(words);\n updateShare(words);\n }\n\n function escapeHtml(s){\n return s.replace(\/[&<>\"']\/g, ch => ({'&':'&','<':'<','>':'>','\"':'"',\"'\":'''}[ch]));\n }\n\n function wordsFromInputs(){\n return inputs.map(i => sanitize(i.value));\n }\n\n function wordsFromQuery(){\n const u = new URL(location.href);\n const raw = u.searchParams.get('words');\n if(!raw) return null;\n const parts = raw.split(',').map(x => sanitize(decodeURIComponent(x||\"\")));\n if(parts.length !== 3) return null;\n return parts;\n }\n\n function applyWords(words){\n inputs.forEach((i,idx) => { i.value = words[idx]||\"\"; });\n updatePreview(words);\n }\n\n function randomize(){\n const pick = suggestions[Math.floor(Math.random()*suggestions.length)];\n applyWords(pick);\n track('randomize_words', {value:1});\n }\n\n function buildQuery(words){\n const enc = words.map(w => encodeURIComponent(w||\"\")).join(',');\n const url = new URL(location.href);\n url.searchParams.set('words', enc);\n url.searchParams.set('utm_source','3word');\n url.searchParams.set('utm_medium','share');\n url.searchParams.set('utm_campaign','viral');\n return url.toString();\n }\n\n function updateShare(words){\n const link = buildQuery(words);\n copyBtn.dataset.link = link;\n downloadA.href = canvas.toDataURL('image\/png');\n const text = `My 3\u2011word check\u2011in: ${words.join(' \u2022 ')} \u2014 I refuse to pretend alone. #MadlySane #ThreeWordTruth`;\n twA.href = `https:\/\/twitter.com\/intent\/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(link)}`;\n liA.href = `https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=${encodeURIComponent(link)}`;\n fbA.href = `https:\/\/www.facebook.com\/sharer\/sharer.php?u=${encodeURIComponent(link)}`;\n }\n\n function buildCanvas(words){\n const W = canvas.width, H = canvas.height;\n ctx.clearRect(0,0,W,H);\n\n \/\/ Background gradient\n const grad = ctx.createLinearGradient(0,0,W,H);\n grad.addColorStop(0,'#8a5cff');\n grad.addColorStop(.6,'#21d4fd');\n grad.addColorStop(1,'#16181f');\n ctx.fillStyle = grad;\n ctx.fillRect(0,0,W,H);\n\n \/\/ Overlay vignette\n const vg = ctx.createRadialGradient(W*0.5,H*0.3,200, W*0.5,H*0.6, H*0.9);\n vg.addColorStop(0, 'rgba(0,0,0,0)');\n vg.addColorStop(1, 'rgba(0,0,0,.35)');\n ctx.fillStyle = vg;\n ctx.fillRect(0,0,W,H);\n\n \/\/ Tag\n const tag = \"I refuse to pretend\";\n ctx.font = \"700 44px system-ui, -apple-system, Segoe UI, Roboto\";\n const tagPadding = 20;\n const tagW = ctx.measureText(tag).width + tagPadding*2;\n const tagX = (W - tagW)\/2, tagY = 270;\n roundRect(ctx, tagX, tagY-48, tagW, 64, 22);\n ctx.fillStyle = ctx.createLinearGradient(tagX, tagY-48, tagX+tagW, tagY+16);\n ctx.fillStyle.addColorStop(0, \"#ffb86b\");\n ctx.fillStyle.addColorStop(1, \"#ffd1a3\");\n ctx.fill();\n ctx.fillStyle = \"#0b0b0e\";\n ctx.textAlign = \"center\"; ctx.textBaseline = \"middle\";\n ctx.fillText(tag, W\/2, tagY - 16);\n\n \/\/ Words\n ctx.fillStyle = \"#eef0f3\";\n ctx.textAlign = \"center\"; ctx.textBaseline = \"alphabetic\";\n \/\/ Add bullet at the very start, then the joined words\nconst wordsText = \"\u2022 \" + words.join(\" \u2022 \");\n;\n;\n \/\/ multiline if too long\n const lines = wrapText(wordsText, W*0.78, \"900 92px system-ui, -apple-system, Segoe UI, Roboto\");\n const startY = 540 - (lines.length-1)*60;\n lines.forEach((ln, i) => {\n ctx.font = \"900 92px system-ui, -apple-system, Segoe UI, Roboto\";\n ctx.fillText(ln, W\/2, startY + i*120);\n });\n\n \/\/ Footer\n ctx.font = \"700 40px system-ui, -apple-system, Segoe UI, Roboto\";\n ctx.fillStyle = \"rgba(238,240,243,.95)\";\n ctx.textAlign = \"left\";\n drawDot(ctx, 80, H-140);\n ctx.fillText(\"MadlySane\", 120, H-130);\n ctx.textAlign = \"right\";\n ctx.fillText(\"#ThreeWordTruth\", W-80, H-130);\n }\n\n function roundRect(ctx,x,y,w,h,r){\n ctx.beginPath();\n ctx.moveTo(x+r, y);\n ctx.arcTo(x+w, y, x+w, y+h, r);\n ctx.arcTo(x+w, y+h, x, y+h, r);\n ctx.arcTo(x, y+h, x, y, r);\n ctx.arcTo(x, y, x+w, y, r);\n ctx.closePath();\n }\n function drawDot(ctx,x,y){\n const grd = ctx.createConicGradient(3.5, x, y);\n grd.addColorStop(0, \"#8a5cff\");\n grd.addColorStop(1, \"#21d4fd\");\n ctx.fillStyle = grd;\n ctx.beginPath(); ctx.arc(x,y,14,0,Math.PI*2); ctx.fill();\n }\n\n function wrapText(text, maxWidth, font){\n const words = text.split(' ');\n const lines = [];\n let line = \"\";\n const ctx2 = ctx;\n ctx2.font = font;\n for (let n=0; n<words.length; n++){\n const test = (line? line+\" \":\"\") + words[n];\n if (ctx2.measureText(test).width > maxWidth){\n if(line) lines.push(line);\n line = words[n];\n } else {\n line = test;\n }\n }\n if(line) lines.push(line);\n return lines.slice(0,3);\n }\n\n function validate(words){\n if (words.some(w => !w)){\n setStatus(\"Add three words to create your card.\", \"warning\");\n return false;\n }\n if (words.some(w => !looksSafe(w))){\n setStatus(\"Let\u2019s keep this space safe. Try different words.\", \"error\");\n return false;\n }\n setStatus(\"\");\n return true;\n }\n\n function track(action, params){\n try{\n if(window.gtag){ window.gtag('event', action, params||{}); }\n }catch(e){}\n }\n\n function initFromQueryOrDefault(){\n const q = wordsFromQuery();\n if(q){ applyWords(q); }\n else { randomize(); }\n }\n\n \/\/ Events\n createBtn.addEventListener('click', () => {\n const words = wordsFromInputs();\n if(!validate(words)) return;\n applyWords(words);\n history.replaceState(null, \"\", buildQuery(words));\n setStatus(\"Card updated. You can download or share it now.\", \"success\");\n track('create_card', {value:1});\n });\n\n randomBtn.addEventListener('click', randomize);\n\n copyBtn.addEventListener('click', async () => {\n const link = copyBtn.dataset.link || location.href;\n try{\n await navigator.clipboard.writeText(link);\n setStatus(\"Link copied. Invite someone: \u201cWitness me?\u201d\", \"success\");\n track('copy_link', {value:1});\n }catch(e){\n setStatus(\"Couldn\u2019t copy. Long\u2011press or right\u2011click to copy.\", \"warning\");\n }\n });\n\n \/\/ Live preview as user types\n inputs.forEach(i => i.addEventListener('input', () => {\n const words = wordsFromInputs();\n updatePreview(words.map(sanitize));\n }));\n\n \/\/ Initial render\n initFromQueryOrDefault();\n\n \/\/ Accessibility: Enter submits\n inputs.forEach(i => i.addEventListener('keydown', (e) => {\n if(e.key === 'Enter'){ e.preventDefault(); createBtn.click(); }\n }));\n\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MadlySane \u2014 The 3\u2011Word Check\u2011In MadlySane \u2014 The 3\u2011Word Check\u2011In Say how you really are in three words. Download a beautiful card, share it, and invite others to be witnessed \u2014 no fixing, just belonging. Become a Founding Member Make yours Tip: Use raw words, not labels. Think \u201cheavy, loud, reaching\u201d rather than \u201cdepressed.\u201d Create […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-5518","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=5518"}],"version-history":[{"count":2,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5518\/revisions"}],"predecessor-version":[{"id":5585,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5518\/revisions\/5585"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=5518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}