/* Distinct CSS artwork for each new tool. No image files are used. */
.tool-visual{min-height:570px;display:grid;place-items:center;position:relative;isolation:isolate}
.tool-visual .art-halo{position:absolute;z-index:-1;width:min(100%,500px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--tool-glow),transparent 68%)}
.tool-visual .art-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid #e7e0db;border-radius:17px;background:#fff;box-shadow:0 16px 44px rgba(24,22,25,.12);font-size:22px;font-weight:900}
.tool-visual .art-float span{font-size:12px;letter-spacing:.02em}
.tool-visual i{font-style:normal}

/* TikTok video: a vertical feed with the platform's split neon lighting. */
.art-tiktok-video .short-scene{background:radial-gradient(circle at 26% 76%,rgba(0,238,228,.65),transparent 34%),radial-gradient(circle at 78% 24%,rgba(255,55,112,.74),transparent 33%),linear-gradient(152deg,#0d111b,#281b37 55%,#11141b)}
.art-tiktok-video .short-scene:before{background:linear-gradient(145deg,#1ce3da,#c4fff5);height:215px;left:37px;bottom:80px;transform:rotate(-12deg)}
.art-tiktok-video .short-scene:after{background:#ee3978;top:185px;right:18px}
.art-tiktok-video .short-copy{max-width:230px}

/* TikTok profile: circular avatar, metrics and a tiled post grid. */
.profile-device{width:min(365px,79%);height:540px;overflow:hidden;position:relative;border:7px solid #17171a;border-radius:34px;background:#fff;box-shadow:var(--shadow);transform:rotate(-2deg)}
.profile-top{height:56px;display:flex;align-items:center;gap:10px;padding:0 19px;border-bottom:1px solid #ececef;font-weight:900}
.profile-top b{display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:#111;color:#fff;box-shadow:3px 2px 0 #f04b88,-2px -1px 0 #19dbd2}
.profile-top i{margin-left:auto}
.profile-avatar{display:grid;place-items:center;width:86px;height:86px;margin:25px auto 11px;border-radius:50%;border:5px solid #fff;outline:3px solid #ed3e71;background:linear-gradient(140deg,#071c23,#16dcd4 52%,#f54e86);color:#fff;font-size:40px;font-weight:900}
.profile-name,.profile-handle{text-align:center;font-weight:900;font-size:19px}.profile-handle{font-size:12px;color:#797b80;margin-top:4px}
.profile-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:21px 20px;text-align:center}
.profile-metrics strong,.profile-metrics small{display:block}.profile-metrics strong{font-size:20px;letter-spacing:-.04em}.profile-metrics small{font-size:10px;color:#777;margin-top:2px}
.profile-bio{display:grid;justify-items:center;gap:7px}.profile-bio i{width:63%;height:8px;background:#e8e8ec;border-radius:9px}.profile-bio i:last-child{width:43%}
.profile-tabs{display:flex;justify-content:space-around;margin:24px 15px 0;border-top:1px solid #ececef;border-bottom:1px solid #ececef;padding:12px;font-size:18px;color:#76767b}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px}.profile-grid i{height:110px;background:linear-gradient(145deg,#0b1823,#1ac9c8 58%,#f35686)}.profile-grid i:nth-child(2n){background:linear-gradient(145deg,#4b153f,#f35686 55%,#f4b7cf)}.profile-grid i:nth-child(3n){background:linear-gradient(145deg,#171a2a,#bb54bb 55%,#73ecea)}
.profile-float{right:-4px;bottom:72px;color:#e43b74}

/* YouTube video: a wide player in a browser window. */
.video-browser{width:min(510px,100%);overflow:hidden;border:1px solid #dadde0;border-radius:25px;background:#fff;box-shadow:var(--shadow);transform:rotate(-1.5deg)}
.browser-top{height:49px;display:flex;align-items:center;gap:18px;padding:0 18px;font-size:12px}.browser-top>span{color:#b8b8bd;letter-spacing:2px}.browser-top b{display:flex;align-items:center;gap:7px;font-size:15px}.browser-top b:before{content:'▶';display:grid;place-items:center;width:22px;height:16px;border-radius:5px;background:#ff0033;color:#fff;font-size:10px}.browser-top i{margin-left:auto}
.browser-player{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,#292a50 0%,#9f2b62 49%,#ff9b76 100%)}
.video-sun{position:absolute;width:180px;aspect-ratio:1;border-radius:50%;right:60px;top:42px;background:#ffd8b0;box-shadow:0 0 50px rgba(255,231,194,.38)}
.video-hill{position:absolute;width:115%;height:52%;bottom:-24%;left:-8%;background:#422c62;border-radius:48% 52% 0 0;transform:rotate(-10deg)}.video-hill.two{left:25%;bottom:-35%;background:#281c42;transform:rotate(16deg)}
.big-play,.fb-play,.x-video-play{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(10,11,14,.77);color:#fff;font-size:22px;padding-left:4px;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.player-controls,.fb-video-bottom,.x-video-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:11px;padding:20px 17px 11px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));font-size:13px}
.player-track,.fb-video-bottom i,.x-video-controls i{height:4px;border-radius:10px;flex:1;background:rgba(255,255,255,.55)}.player-track i{display:block;width:42%;height:100%;border-radius:inherit;background:#ff0033}
.video-meta{padding:16px 18px;display:flex;align-items:center;justify-content:space-between}.video-meta b,.video-meta small{display:block}.video-meta b{font-size:16px}.video-meta small{font-size:11px;color:#898a90;margin-top:3px}.video-meta>span{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:#fff0f3;color:#e00032;font-size:24px;font-weight:900}
.video-float{right:0;bottom:56px;color:#e60030}

/* YouTube thumbnail: an editing canvas with crop marks and format chips. */
.thumb-workspace{width:min(505px,100%);padding:17px;border:1px solid #dedee2;border-radius:27px;background:#fff;box-shadow:var(--shadow);transform:rotate(1.5deg)}
.thumb-toolbar{height:37px;display:flex;align-items:center;gap:9px;font-weight:850}.thumb-toolbar b{display:grid;place-items:center;width:26px;height:20px;border-radius:6px;background:#ff0033;color:#fff;font-size:13px}.thumb-toolbar i{margin-left:auto}
.thumb-canvas{padding:14px;position:relative;background:#edeef1;border-radius:17px}
.thumb-graphic{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:linear-gradient(130deg,#11141d 0%,#271c39 42%,#ea184a 43%,#ff524e 100%)}
.thumb-graphic:before{content:'';position:absolute;top:12%;right:7%;width:34%;height:70%;border:12px solid rgba(255,255,255,.25);border-radius:40%;transform:rotate(18deg)}
.thumb-graphic strong{position:absolute;left:8%;bottom:22%;max-width:60%;font-size:clamp(24px,3.5vw,44px);line-height:.92;letter-spacing:-.07em;color:#fff;text-shadow:0 3px 15px rgba(0,0,0,.25)}
.thumb-graphic span{position:absolute;left:8%;bottom:10%;padding:4px 7px;border-radius:4px;background:#fff;color:#e60030;font-size:9px;font-weight:900;letter-spacing:.14em}
.thumb-orb{position:absolute;width:33%;aspect-ratio:1;right:15%;top:11%;border-radius:50%;background:linear-gradient(140deg,#fff1c2,#ff9183);box-shadow:0 0 50px rgba(255,209,172,.35)}
.thumb-arc{position:absolute;right:-12%;bottom:-52%;width:65%;aspect-ratio:1;border:38px solid rgba(255,255,255,.17);border-radius:50%}
.crop{position:absolute;width:19px;height:19px;border-color:#ff0033;border-style:solid}.crop.tl{top:8px;left:8px;border-width:3px 0 0 3px}.crop.tr{top:8px;right:8px;border-width:3px 3px 0 0}.crop.bl{bottom:8px;left:8px;border-width:0 0 3px 3px}.crop.br{bottom:8px;right:8px;border-width:0 3px 3px 0}
.thumb-formats{display:flex;gap:8px;padding:15px 1px 2px}.thumb-formats span{border-radius:9px;padding:8px 11px;background:#f5f3f2;color:#53545b;font-size:12px;font-weight:850}.thumb-formats span:first-child{background:#ffe9ef;color:#d90032}
.thumb-float{left:-12px;bottom:62px;color:#e60030}

/* Facebook video: a blue feed card with playback and reactions. */
.fb-feed{width:min(435px,92%);overflow:hidden;border:1px solid #dce2ed;border-radius:24px;background:#fff;box-shadow:var(--shadow);transform:rotate(-1deg)}
.fb-toolbar{display:flex;align-items:center;gap:8px;padding:15px 17px;border-bottom:1px solid #eef0f5;font-weight:900}.fb-toolbar b,.photo-header b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1877f2;color:#fff;font-size:22px;font-family:Arial,sans-serif}.fb-toolbar i,.photo-header i{margin-left:auto}
.fb-author{display:flex;gap:10px;align-items:center;padding:15px}.fb-author>i,.x-video-author>i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#dcecff;color:#1877f2;font-weight:900}.fb-author strong,.fb-author small,.x-video-author strong,.x-video-author small{display:block}.fb-author strong,.x-video-author strong{font-size:13px}.fb-author small,.x-video-author small{font-size:10px;color:#838895;margin-top:3px}
.fb-video{height:260px;position:relative;overflow:hidden;background:linear-gradient(155deg,#0e3770,#337ee8 57%,#b5ddff)}
.fb-video:before{content:'';position:absolute;left:-10%;bottom:-45%;width:115%;height:80%;background:#0b5aba;border-radius:50%;transform:rotate(-18deg)}.fb-video:after{content:'';position:absolute;right:9%;top:13%;width:30%;aspect-ratio:1;border-radius:50%;background:#c5ebff;box-shadow:0 0 30px rgba(255,255,255,.4)}
.fb-circle{position:absolute;z-index:1;left:8%;bottom:2%;width:25%;aspect-ratio:1;border-radius:25%;background:rgba(255,255,255,.22);transform:rotate(20deg)}
.fb-video-bottom{z-index:2}.fb-video-bottom i{background:linear-gradient(to right,#fff 42%,rgba(255,255,255,.42) 42%)}
.fb-reactions,.fb-action-row{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid #eef0f5;color:#7c818c;font-size:11px;font-weight:700}.fb-reactions span:first-child{color:#1877f2}.fb-action-row{border:0;padding:15px 16px;font-size:12px}
.fb-video-float{right:-4px;bottom:82px;color:#1877f2}

/* Facebook photo: an overlapping 4:3 image gallery with CSS landscapes. */
.photo-gallery{width:min(475px,100%);height:500px;border-radius:28px;background:linear-gradient(150deg,#e8f2ff,#f8fafc 60%,#e5ebf4);border:1px solid #dce6f3;box-shadow:var(--shadow);position:relative;overflow:hidden}
.photo-header{display:flex;align-items:center;gap:10px;padding:18px 20px;font-weight:900}.photo-stack{position:relative;height:420px}
.photo-frame{position:absolute;padding:8px 8px 25px;background:#fff;border-radius:14px;box-shadow:0 16px 38px rgba(29,48,83,.2)}
.photo-front{z-index:3;width:70%;left:14%;top:61px;transform:rotate(-4deg)}.photo-middle{z-index:2;width:59%;right:2%;top:35px;transform:rotate(12deg)}.photo-back{z-index:1;width:57%;left:-4%;top:13px;transform:rotate(-14deg)}
.photo-scene{aspect-ratio:4/3;border-radius:9px;position:relative;overflow:hidden}.photo-scene:before{content:'';position:absolute;width:38%;aspect-ratio:1;border-radius:50%;right:12%;top:12%;background:rgba(255,247,195,.89)}.photo-scene:after{content:'';position:absolute;width:130%;height:55%;left:-10%;bottom:-19%;border-radius:50% 50% 0 0;transform:rotate(-11deg);background:rgba(24,91,170,.7)}
.photo-scene.sky{background:linear-gradient(#72bdfd,#e4f4ff 58%,#72a0d3)}.photo-scene.sunset{background:linear-gradient(#7056a5,#fb9a7b 62%,#ffc9ab)}.photo-scene.sunset:after{background:#5a64a4}
.photo-scene.coast{background:linear-gradient(#79cbff,#d9f1ff 58%,#ecdfba 59%)}.photo-scene.coast:after{background:#2a91b8}.photo-scene.coast i{position:absolute;z-index:1;left:14%;top:25%;width:9%;height:46%;border-radius:50%;background:#145d77;transform:rotate(25deg)}
.photo-caption{display:flex;gap:6px;margin:12px 3px 0}.photo-caption span{height:6px;width:48%;background:#e9ecf0;border-radius:9px}.photo-caption span:last-child{width:25%}
.photo-float{right:-7px;bottom:36px;color:#1877f2}

/* X post: a stark text-first post preview. */
.x-post{width:min(445px,94%);padding:0 22px 20px;border:1px solid #d8dbe0;border-radius:23px;background:#fff;box-shadow:var(--shadow);transform:rotate(-1.7deg)}
.x-post-top{height:55px;display:flex;align-items:center;gap:11px;border-bottom:1px solid #eceef1;font-weight:900}.x-post-top b{font-size:25px}.x-post-top i{margin-left:auto}
.x-author{display:flex;align-items:center;gap:10px;padding:19px 0}.x-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;font-size:22px}.x-author strong,.x-author small{display:block}.x-author strong{font-size:14px}.x-author small{font-size:11px;color:#898d92;margin-top:2px}.x-author>span{margin-left:auto;color:#2e93e6}
.x-post-lines{display:grid;gap:11px;margin:12px 0 21px}.x-post-lines i{height:13px;border-radius:9px;background:#d9dce1}.x-post-lines i:nth-child(2){width:90%}.x-post-lines i:nth-child(3){width:97%}.x-post-lines i:nth-child(4){width:62%}
.x-quote{display:flex;align-items:center;gap:15px;padding:17px;border:1px solid #e2e4e8;border-radius:17px;background:#f8f9fa}.x-quote-mark{display:grid;place-items:center;width:47px;height:47px;border-radius:12px;background:#111;color:#fff;font-size:23px}.x-quote>div:last-child{flex:1;display:grid;gap:9px}.x-quote>div:last-child span{height:9px;border-radius:8px;background:#dde0e4}.x-quote>div:last-child span:last-child{width:66%}
.x-post-date{padding:18px 0;color:#8c9095;font-size:12px}.x-engagement{display:flex;justify-content:space-between;padding-top:17px;border-top:1px solid #e8eaec;color:#6f747b;font-size:13px;font-weight:700}
.x-post-float{right:3px;bottom:51px;color:#111}

/* X video: a dark video player embedded within a post. */
.x-video-post{width:min(480px,100%);padding:0 15px 16px;border-radius:27px;background:#101116;color:#fff;box-shadow:var(--shadow);transform:rotate(1.3deg)}
.x-video-top{height:54px;display:flex;align-items:center;gap:10px;font-weight:800}.x-video-top b{font-size:24px}.x-video-top i{margin-left:auto}.x-video-author{display:flex;align-items:center;gap:9px;padding:5px 2px 15px}.x-video-author>i{background:#292b31;color:#fff}.x-video-author small{color:#9298a3}
.x-video-frame{aspect-ratio:16/10;position:relative;overflow:hidden;border-radius:15px;background:radial-gradient(circle at 65% 28%,#8a94c0 0 13%,transparent 14%),linear-gradient(145deg,#191d31,#475474 53%,#bd728a)}
.x-video-frame:before{content:'';position:absolute;left:-9%;bottom:-40%;width:94%;height:76%;border-radius:50%;background:#1e293c;transform:rotate(15deg)}.x-video-frame:after{content:'';position:absolute;right:-22%;bottom:-35%;width:86%;height:78%;border-radius:50%;background:#394661;transform:rotate(-20deg)}
.x-video-shape{position:absolute;z-index:1;left:16%;top:24%;width:20%;height:50%;border:11px solid rgba(255,255,255,.16);border-radius:44%;transform:rotate(18deg)}
.x-video-play{z-index:2;background:#111}.x-video-controls{z-index:2}.x-video-controls i{background:linear-gradient(to right,#fff 35%,rgba(255,255,255,.42) 35%)}.x-video-actions{display:flex;justify-content:space-around;color:#a9adb8;font-size:17px;padding-top:18px}
.x-video-float{left:-12px;bottom:44px;color:#111}

@media(max-width:980px){.tool-visual{min-height:500px}.tool-visual .art-float{right:4%;bottom:20px}}
@media(max-width:660px){.tool-visual{min-height:430px}.tool-visual .art-float{padding:9px 12px;font-size:16px}.profile-device{width:min(310px,78%);height:425px}.profile-top{height:48px}.profile-avatar{width:69px;height:69px;margin-top:18px}.profile-metrics{margin:14px 12px}.profile-grid i{height:80px}.profile-tabs{margin-top:17px}.video-browser,.thumb-workspace,.photo-gallery,.x-video-post{width:94%}.fb-feed,.x-post{width:87%}.fb-video{height:220px}.photo-gallery{height:400px}.photo-stack{transform:scale(.78);transform-origin:top center}.video-float,.thumb-float,.photo-float,.x-video-float{left:auto;right:0;bottom:7px}.thumb-graphic strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){.tool-visual *{animation:none!important}}