Swamp Hideout

{
  "version": 1,
  "id": "swamp-hideout-faf87c",
  "name": "Swamp Hideout",
  "description": "A cozy ogre hideout with ear-shaped eaves, weathered timber, lantern-lit reeds and readable parchment conversations.",
  "author": "ChatTheme AI",
  "base": "dark",
  "tokens": {
    "bg": "#263b2a",
    "surface": "#30412d",
    "surfaceAlt": "#425338",
    "text": "#f0ead5",
    "textMuted": "#c3c7a4",
    "border": "#788058",
    "accent": "#c0d58a",
    "accentText": "#25351c",
    "userBubble": "#d5e2af",
    "userBubbleText": "#283321",
    "assistantBubble": "#f2e8cd",
    "assistantBubbleText": "#303326",
    "composerBg": "#eee1bc",
    "composerText": "#293222",
    "codeBg": "#ded3b0",
    "codeText": "#293222",
    "link": "#d4e7a3",
    "selection": "rgba(164, 191, 102, 0.35)"
  },
  "typography": {
    "font": "rounded",
    "mono": "typewriter",
    "baseSize": 16,
    "letterSpacing": 0,
    "uppercaseHeadings": false
  },
  "shape": {
    "radius": 22,
    "borderWidth": 1,
    "shadow": "soft"
  },
  "frame": {
    "kind": "custom",
    "title": "SWAMP HIDEOUT",
    "color": "#3d492a",
    "custom": {
      "insets": [
        "clamp(76px,10vh,100px)",
        "clamp(60px,6vw,110px)",
        "clamp(64px,9vh,90px)",
        "clamp(60px,6vw,110px)"
      ],
      "html": "<div class=\"swamp\"></div><div class=\"water\"></div><div class=\"timber topbeam\"></div><div class=\"timber post post-l\"></div><div class=\"timber post post-r\"></div><div class=\"rim\"></div><svg class=\"moss\" viewBox=\"0 0 1000 80\" preserveAspectRatio=\"none\"><path d=\"M0 0H1000V15Q980 4 971 50Q966 75 960 29Q949 12 941 40Q933 70 925 18L860 12Q847 22 844 53Q837 80 832 27L740 15Q727 21 721 44L710 14L290 14Q280 37 273 58Q268 67 265 22L170 13Q160 25 157 64Q151 80 145 23Q135 11 127 37Q118 57 115 19L50 13Q40 34 36 55Q30 65 27 20L0 24Z\" fill=\"#718344\"></path><path d=\"M0 3H1000\" stroke=\"#a0a865\" stroke-width=\"5\"></path></svg><div class=\"crown\"><svg class=\"ears\" viewBox=\"0 0 540 90\"><defs><linearGradient id=\"ear\" x2=\"0.3\" y2=\"1\"><stop stop-color=\"#b5c86c\"></stop><stop offset=\".5\" stop-color=\"#859e43\"></stop><stop offset=\"1\" stop-color=\"#425c2c\"></stop></linearGradient></defs><path d=\"M138 70Q105 30 60 20L37 8Q17 6 15 26Q12 45 31 48L58 42Q99 46 116 78ZM402 70Q435 30 480 20L503 8Q523 6 525 26Q528 45 509 48L482 42Q441 46 424 78Z\" fill=\"url(#ear)\" stroke=\"#354e26\" stroke-width=\"3\"></path><ellipse cx=\"29\" cy=\"27\" rx=\"9\" ry=\"17\" fill=\"#435829\" transform=\"rotate(-22 29 27)\"></ellipse><ellipse cx=\"511\" cy=\"27\" rx=\"9\" ry=\"17\" fill=\"#435829\" transform=\"rotate(22 511 27)\"></ellipse><path d=\"M56 26Q100 38 121 67M484 26Q440 38 419 67\" fill=\"none\" stroke=\"#c0cf7e\" stroke-width=\"3\" opacity=\".6\"></path></svg><div class=\"sign\"><b>{{title}}</b><small>GET OUT OF MY SWAMP</small><i class=\"nail n1\"></i><i class=\"nail n2\"></i></div></div><svg class=\"thicket thicket-l\" viewBox=\"0 0 100 600\" preserveAspectRatio=\"none\"><defs><g id=\"reed\"><path d=\"M0 600Q-15 420 4 95\" fill=\"none\" stroke=\"#93a15a\" stroke-width=\"3\"></path><path d=\"M-1 600Q-48 417-30 275Q-9 370-1 497Q14 360 39 330Q27 463-1 600Z\" fill=\"#536f39\"></path><path d=\"M4 135L7 72\" stroke=\"#493222\" stroke-width=\"13\" stroke-linecap=\"round\"></path><path d=\"M4 135L7 72\" stroke=\"#a17c42\" stroke-width=\"4\" stroke-linecap=\"round\"></path></g></defs><use href=\"#reed\" transform=\"translate(25 0)\"></use><use href=\"#reed\" transform=\"translate(65 180) scale(.8)\"></use><use href=\"#reed\" transform=\"translate(43 290) scale(.6)\"></use><path d=\"M5 0Q50 70 22 140T33 270T20 410T25 600\" fill=\"none\" stroke=\"#82934c\" stroke-width=\"4\"></path><path d=\"M21 80Q60 47 52 25Q23 38 21 80ZM26 190Q-2 150 2 130Q30 145 26 190ZM28 290Q65 252 58 231Q31 247 28 290ZM23 415Q-4 372 3 350Q33 371 23 415Z\" fill=\"#6e8644\"></path></svg><svg class=\"thicket thicket-r\" viewBox=\"0 0 100 600\" preserveAspectRatio=\"none\"><use href=\"#reed\" transform=\"translate(45 30)\"></use><use href=\"#reed\" transform=\"translate(78 210) scale(.7)\"></use><use href=\"#reed\" transform=\"translate(20 350) scale(.5)\"></use><path d=\"M80 0Q41 100 72 180T67 350T75 600\" stroke=\"#72864a\" stroke-width=\"4\" fill=\"none\"></path><path d=\"M71 160Q40 135 42 103Q74 121 71 160ZM70 280Q99 247 94 220Q67 240 70 280ZM72 427Q36 396 44 370Q72 387 72 427Z\" fill=\"#8a9b51\"></path></svg><div class=\"lantern\"><div class=\"hook\"></div><div class=\"lamp\"><i></i></div></div><div class=\"lilies lily-l\"><i></i><i></i><i></i></div><div class=\"lilies lily-r\"><i></i><i></i></div><div class=\"mud mud-l\"></div><div class=\"mud mud-r\"></div><div class=\"woodkey key-left\" data-ct-action=\"new-chat\" title=\"Fresh tale: new chat\">Fresh tale<span>+ a new beginning</span></div><div class=\"woodkey key-right\" data-ct-action=\"send\" title=\"Send your message\">Knock, knock<span>send your words ↗</span></div><div class=\"bottom-note\">HAPPILY EVER MUDDY</div>",
      "css": ".swamp { position: absolute; inset: 0; background: radial-gradient(ellipse at 95% 19%,#b5963e44,transparent 18%),radial-gradient(ellipse at 15% 0%,#72874977,transparent 50%),repeating-linear-gradient(100deg,#263d2d22 0 2px,transparent 2px 16px),linear-gradient(#33472d,#192d25 70%,#3c452b); }\n.water { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ct-fb); background: repeating-radial-gradient(ellipse at 45% 110%,transparent 0 15px,#9eae7220 16px 17px,transparent 18px 29px),linear-gradient(#243a2c,#455434); border-top: 2px solid #7c895744; }\n.timber { position: absolute; background: repeating-linear-gradient(2deg,transparent 0 7px,#302b203d 8px 9px,transparent 10px 18px),linear-gradient(100deg,#8a7045,#5d4b31 35%,#453b27); border: 2px solid #342e20; box-shadow: inset 2px 2px 0 #baa06b66,inset -3px -2px 2px #25291c99,2px 3px 5px #101f1b88; }\n.topbeam { left: 10px; right: 10px; top: 14px; height: 39px; transform: rotate(-.3deg); border-radius: 8px 4px 12px 3px; }\n.post { top: 30px; bottom: 22px; width: 22px; border-radius: 7px; }\n.post-l { left: 17px; transform: rotate(-1deg); }\n.post-r { right: 17px; transform: rotate(1deg); }\n.rim { position: absolute; top: calc(var(--ct-ft) - 8px); right: calc(var(--ct-fr) - 8px); bottom: calc(var(--ct-fb) - 8px); left: calc(var(--ct-fl) - 8px); border: 8px solid #52603a; border-radius: 23px; box-shadow: 0 3px 8px #10201988,inset 1px 1px 0 #a1ae67; }\n.moss { position: absolute; top: 43px; left: 0; width: 100%; height: 42px; filter: drop-shadow(1px 2px 1px #15271999); }\n.crown { position: absolute; top: 0; left: 50%; width: 500px; height: var(--ct-ft); transform: translateX(-50%); }\n.ears { position: absolute; width: 100%; height: 83px; top: 0; left: 0; filter: drop-shadow(0 3px 2px #16271caa); }\n.sign { position: absolute; top: 13px; left: 100px; right: 100px; height: 57px; text-align: center; border: 2px solid #3e3221; border-radius: 7px 12px 5px 9px; background: repeating-linear-gradient(2deg,transparent 0 8px,#3d302033 9px 10px),linear-gradient(110deg,#957448,#6d5030); box-shadow: inset 0 2px 0 #cda36988,inset 0 -3px 0 #473622,0 4px 4px #102219aa; transform: rotate(-1deg); }\n.sign b { display: block; line-height: 26px; padding-top: 4px; color: #fff0c6; font-size: 23px; font-weight: 900; letter-spacing: .03em; text-shadow: 0 2px #382e20; }\n.sign small { display: block; line-height: 12px; padding-top: 3px; color: #f0d7a6; font-size: 9px; letter-spacing: .17em; font-weight: 800; }\n.nail { position: absolute; top: 25px; width: 5px; height: 5px; border-radius: 50%; background: #b9ac83; box-shadow: 0 1px 2px #211e19; }\n.n1 { left: 9px; }\n.n2 { right: 9px; }\n.thicket { position: absolute; top: var(--ct-ft); bottom: 0; width: calc(var(--ct-fl) - 7px); height: calc(100% - var(--ct-ft)); filter: drop-shadow(2px 3px 1px #14271988); }\n.thicket-l { left: 0; }\n.thicket-r { right: 0; transform: scaleX(-1); }\n.lantern { position: absolute; right: calc(var(--ct-fr) / 2 - 20px); top: calc(var(--ct-ft) + 18px); width: 40px; height: 90px; filter: drop-shadow(0 0 14px #f6c26477); }\n.hook { position: absolute; left: 18px; top: 0; width: 12px; height: 25px; border: 3px solid #292e22; border-radius: 10px; }\n.lamp { position: absolute; top: 25px; left: 3px; width: 34px; height: 52px; border: 4px solid #493e26; border-radius: 9px 9px 5px 5px; background: radial-gradient(ellipse,#fff0ad,#eab85a 60%,#b17b32); box-shadow: inset 2px 1px 3px #fff5be,0 0 18px #ffd17677,0 0 45px #e8b54a44; }\n.lamp::before { content: \"\"; position: absolute; top: -9px; left: -8px; width: 42px; height: 10px; border-radius: 10px 10px 2px 2px; background: linear-gradient(#7d7046,#353a26); }\n.lamp i { position: absolute; left: 12px; top: 0; bottom: 0; width: 3px; background: #675331; }\n.lilies { position: absolute; bottom: 10px; display: flex; gap: 16px; }\n.lily-l { left: 23%; }\n.lily-r { right: 20%; bottom: 20px; }\n.lilies i { width: 39px; height: 15px; border-radius: 50%; background: conic-gradient(from 50deg,#8e9e55 0 300deg,transparent 300deg 325deg,#8e9e55 325deg); box-shadow: 0 3px 0 #152b2377,inset 0 2px 0 #bac27666; }\n.lilies i:nth-child(2) { width: 24px; height: 10px; }\n.mud { position: absolute; bottom: 0; width: 110px; height: 33px; background: radial-gradient(ellipse at 30% 100%,#655537 0 36%,transparent 38%),radial-gradient(ellipse at 70% 100%,#51472e 0 45%,transparent 47%); }\n.mud-l { left: 0; }\n.mud-r { right: 0; }\n.woodkey { position: absolute; bottom: 15px; height: 43px; width: 160px; text-align: center; padding-top: 6px; border: 2px solid #382e20; border-radius: 9px 5px 11px 6px; background: repeating-linear-gradient(2deg,transparent 0 8px,#30271933 9px 10px),linear-gradient(110deg,#8b7044,#604c2e); box-shadow: inset 1px 2px 0 #c8a46b77,0 3px 0 #18291b; color: #f6e7c2; font-size: 15px; font-weight: 900; }\n.woodkey span { display: block; padding-top: 4px; font-size: 9px; letter-spacing: .05em; color: #f1dcae; }\n.key-left { left: calc(var(--ct-fl) + 15px); transform: rotate(-1deg); }\n.key-right { right: calc(var(--ct-fr) + 15px); transform: rotate(1deg); }\n.woodkey:active, .woodkey[data-ct-flash=\"ok\"] { filter: brightness(1.2); box-shadow: inset 0 3px 4px #30291c; }\n.bottom-note { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: #c6cd9d; font-size: 10px; letter-spacing: .22em; font-weight: 800; text-shadow: 0 2px #203425; }\n@media (max-width: 1100px) {\n  .bottom-note { display: none; }\n  .crown { width: 460px; }\n  .sign { left: 85px; right: 85px; }\n  .woodkey { width: 145px; }\n}\n@media (max-height: 700px) {\n  .woodkey { bottom: 10px; height: 40px; }\n  .sign { height: 55px; }\n  .lantern { top: calc(var(--ct-ft) + 10px); }\n}",
      "screen": "border-radius: 16px; box-shadow: inset 0 0 0 2px #b1ba7255, inset 0 0 12px #101e1466",
      "vars": {
        "moss": "#849548",
        "water": "#283d2c",
        "wood": "#655033"
      }
    }
  },
  "background": {
    "pattern": "none"
  },
  "effects": {
    "scanlines": false,
    "crt": false,
    "pixelated": false
  },
  "messages": {
    "style": "bubbles",
    "userLabel": "",
    "assistantLabel": ""
  },
  "treats": "[data-ct-slot=\"header\"] { background: linear-gradient(110deg,#3e4d32,#2e402d); border-bottom: 1px solid #748052; box-shadow: inset 0 1px 0 #c8d59522; }\n[data-ct-slot=\"sidebar\"] { background: linear-gradient(95deg,#35472e,#2d3d29); border-right: 1px solid #748052; }\n[data-ct-slot=\"sidebar-item\"] { border-radius: 14px; }\n[data-ct-slot=\"sidebar-item\"][data-ct-active] { background: #53613c; color: #fff3d5; box-shadow: inset 3px 0 0 #bed184; }\n[data-ct-slot=\"bubble-user\"] { background: linear-gradient(135deg,#dfebbd,#cbdba0); color: #283321; border: 1px solid #9caa70; border-radius: 24px 24px 7px 24px; box-shadow: inset 0 1px 0 #f8ffe0,0 3px 0 #12231655; }\n[data-ct-slot=\"bubble-assistant\"] { background: linear-gradient(120deg,#f6edd6,#eee1bf); color: #303326; border: 1px solid #b6a778; border-radius: 24px 24px 24px 7px; box-shadow: inset 0 1px 0 #fffae8,0 3px 0 #12231655; }\n[data-ct-slot=\"bubble-assistant\"] a { color: #405b24; }\n[data-ct-slot=\"composer\"] { background: linear-gradient(#f4e9cd,#e7d7ae); border: 2px solid #a39b65; border-radius: 25px; box-shadow: inset 0 2px 2px #fff8df99,0 4px 0 #17281988; }\n[data-ct-slot=\"composer-input\"] { color: #293222; }\n[data-ct-slot=\"send-button\"] { background: radial-gradient(circle at 30% 20%,#d5e9a3,#acc56d); color: #25351c; border: 2px solid #6e843e; border-radius: 18px; box-shadow: inset 0 2px 0 #f4f6c077,0 2px 0 #44572d; }\n[data-ct-slot=\"code-block\"] { background: #ded3b0; color: #293222; border: 1px solid #b3a374; border-radius: 12px; }\n[data-ct-slot=\"code-block\"] span[class*=\"keyword\"] { color: #63412d; }\n[data-ct-slot=\"code-block\"] span[class*=\"string\"] { color: #3e592c; }\n[data-ct-slot=\"code-block\"] span[class*=\"comment\"] { color: #58563c; }\n[data-ct-slot=\"inline-code\"] { background: #d9cba5; color: #303326; border-radius: 5px; }"
}