{"id":625,"date":"2026-03-08T04:25:15","date_gmt":"2026-03-08T04:25:15","guid":{"rendered":"https:\/\/primetoolhub.com\/?page_id=625"},"modified":"2026-07-04T06:23:39","modified_gmt":"2026-07-04T06:23:39","slug":"free-css-box-shadow-generator","status":"publish","type":"page","link":"https:\/\/schoolict.net\/tools\/free-css-box-shadow-generator\/","title":{"rendered":"Free CSS Box Shadow Generator with Background Gradient CSS"},"content":{"rendered":"\n<div class=\"pth-hero-section\">\n    <div class=\"pth-hero-content\">\n        <h2>Free CSS Box Shadow &amp; Background Gradient Generator<\/h2>\n        <p>Visually design beautiful CSS box shadows, inset shadows, and background gradients. Generate cross-browser CSS code instantly and 100% offline.<\/p>\n\n        <div id=\"pth-toc-placeholder\"><\/div>\n    <\/div>\n\n  \n<div class=\"pth-hero-image\">\n    <img data-no-lazy=\"1\"\n         src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/03\/CSS-Box-Shadow-Generator-800x447.jpeg\"\n         width=\"800\"\n         height=\"447\"\n         alt=\"Truth Table Generator\"\n         fetchpriority=\"high\"\n         loading=\"eager\"\n         decoding=\"async\"\n         style=\"width:100%; height:auto; display:block;\">\n  <\/div>\n<\/div>\n\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#\ud83d\udd34-multi-layer-box-shadows-why-one-layer-is-never-enough\">\ud83d\udd34\u00a0Multi-Layer Box Shadows \u2014 Why One Layer Is Never Enough<\/a><\/li><li><a href=\"#\ud83d\udfe1-three-stop-gradients-and-conic-gradients-beyond-basic-two-color-fades\">\ud83d\udfe1\u00a0Three-Stop Gradients and Conic Gradients \u2014 Beyond Basic Two-Color Fades<\/a><ul><li><a href=\"#\ud83d\udfe2-typography-css-from-font-size-to-text-shadow-in-one-output-block\">\ud83d\udfe2\u00a0Typography CSS \u2014 From Font Size to Text Shadow in One Output Block<\/a><\/li><li><a href=\"#\ud83d\udfe2-css-clip-path-shapes-what-they-are-and-when-to-use-them\">\ud83d\udfe2\u00a0CSS clip-path Shapes \u2014 What They Are and When to Use Them<\/a><\/li><\/ul><\/li><li><a href=\"#\ud83d\udfe1-css-keyframes-animations-generated-ready-to-use\">\ud83d\udfe1\u00a0CSS @keyframes Animations \u2014 Generated Ready to Use<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<style>\r\n\/* ============================================================\r\n   PTH CSS VISUAL STUDIO PRO \u2014 v2.0\r\n   AdSense + PageSpeed 100 + WCAG 2.1 AA + WP\/LiteSpeed Safe\r\n   6 Tabs | 26 Tools | 100% Offline | Zero CDN\r\n   ============================================================ *\/\r\n#pth-cssvs-wrapper {\r\n    font-family: 'Inter', system-ui, sans-serif;\r\n    width: 100%; max-width: 1400px; margin: 0 auto;\r\n    box-sizing: border-box; background: #f8fafc;\r\n    padding: 20px; border-radius: 16px;\r\n    color: #1e293b; font-weight: 500;\r\n}\r\n#pth-cssvs-wrapper * { box-sizing: border-box; min-width: 0; }\r\n#pth-cssvs-wrapper h2,\r\n#pth-cssvs-wrapper h3 { color: #0f172a; font-weight: 800; margin-top: 0; }\r\n#pth-cssvs-wrapper .pth-tool-title { font-size: 24px; font-weight: 800; color: #1d4ed8; margin: 0; }\r\n\r\n\/* \u2500\u2500 Cards \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-card {\r\n    background: #fff; border: 1px solid #e2e8f0;\r\n    border-radius: 12px; padding: 18px; margin-bottom: 14px;\r\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\r\n}\r\n#pth-cssvs-wrapper .pth-card-hdr {\r\n    background: #f8fafc; margin: -18px -18px 14px -18px;\r\n    padding: 9px 14px; color: #1d4ed8; font-size: 11px;\r\n    border-bottom: 2px solid #eff6ff; font-weight: 800;\r\n    text-transform: uppercase; border-radius: 12px 12px 0 0;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n\/* \u2500\u2500 Meta bar \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-tool-meta-bar {\r\n    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;\r\n}\r\n#pth-cssvs-wrapper .pth-version-badge {\r\n    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;\r\n    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;\r\n}\r\n#pth-cssvs-wrapper .pth-status-offline {\r\n    background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0;\r\n    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;\r\n}\r\n\r\n\/* \u2500\u2500 Layout \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-flex-layout {\r\n    display: grid; grid-template-columns: 1.8fr 1fr; gap: 18px; align-items: start;\r\n}\r\n#pth-cssvs-wrapper .pth-flex-layout.pth-full-width { grid-template-columns: 100%; }\r\n\r\n\/* \u2500\u2500 Tabs \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-tabs-nav {\r\n    display: flex; gap: 3px; flex-wrap: wrap;\r\n    margin-bottom: 18px; border-bottom: 2px solid #e2e8f0; padding-bottom: 0;\r\n}\r\n#pth-cssvs-wrapper .pth-tab-btn {\r\n    padding: 7px 12px; border-radius: 8px 8px 0 0;\r\n    font-size: 11px; font-weight: 700; cursor: pointer;\r\n    border: 2px solid transparent; border-bottom: none;\r\n    background: #f1f5f9; color: #334155;\r\n    transition: 0.15s; font-family: 'Inter', sans-serif;\r\n    margin-bottom: -2px; white-space: nowrap;\r\n}\r\n#pth-cssvs-wrapper .pth-tab-btn:hover { background: #e2e8f0; color: #0f172a; }\r\n#pth-cssvs-wrapper .pth-tab-btn.pth-active {\r\n    background: #fff; color: #1d4ed8;\r\n    border-color: #e2e8f0; border-bottom-color: #fff;\r\n}\r\n\r\n\/* \u2500\u2500 Buttons \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-btn {\r\n    padding: 8px 16px; border-radius: 8px; font-weight: 700;\r\n    cursor: pointer; border: none; font-family: 'Inter', sans-serif;\r\n    font-size: 12px; transition: 0.2s; display: inline-flex;\r\n    align-items: center; justify-content: center; gap: 5px;\r\n}\r\n#pth-cssvs-wrapper .pth-btn-primary { background: #2563eb; color: #fff; }\r\n#pth-cssvs-wrapper .pth-btn-primary:hover { background: #1d4ed8; }\r\n#pth-cssvs-wrapper .pth-btn-secondary {\r\n    background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;\r\n}\r\n#pth-cssvs-wrapper .pth-btn-secondary:hover { background: #e2e8f0; }\r\n#pth-cssvs-wrapper .pth-btn-success { background: #059669; color: #fff; }\r\n#pth-cssvs-wrapper .pth-btn-success:hover { background: #047857; }\r\n#pth-cssvs-wrapper .pth-btn-danger {\r\n    background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;\r\n}\r\n#pth-cssvs-wrapper .pth-sample-btn {\r\n    background: #d1fae5; color: #047857; border: 1px solid #10b981;\r\n    font-size: 0.7rem; padding: 3px 8px; border-radius: 5px;\r\n    font-weight: 700; cursor: pointer; transition: 0.2s;\r\n    display: inline-flex; align-items: center; gap: 4px;\r\n}\r\n#pth-cssvs-wrapper .pth-sample-btn:hover { background: #a7f3d0; }\r\n\r\n\/* \u2500\u2500 Form elements \u2500\u2500 *\/\r\n#pth-cssvs-wrapper label {\r\n    font-weight: 700; color: #0f172a; margin-bottom: 4px;\r\n    display: block; font-size: 11px;\r\n    text-transform: uppercase; letter-spacing: 0.4px;\r\n}\r\n#pth-cssvs-wrapper input[type=\"text\"],\r\n#pth-cssvs-wrapper input[type=\"number\"],\r\n#pth-cssvs-wrapper select,\r\n#pth-cssvs-wrapper textarea {\r\n    width: 100%; padding: 8px 10px; border: 2px solid #e2e8f0;\r\n    border-radius: 7px; font-family: 'Inter', sans-serif;\r\n    font-size: 12px; color: #0f172a; background: #fff; transition: 0.2s;\r\n}\r\n#pth-cssvs-wrapper input:focus,\r\n#pth-cssvs-wrapper select:focus,\r\n#pth-cssvs-wrapper textarea:focus {\r\n    border-color: #3b82f6; outline: none;\r\n    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);\r\n}\r\n#pth-cssvs-wrapper textarea {\r\n    font-family: 'Courier New', monospace; font-size: 11px;\r\n    line-height: 1.6; resize: vertical;\r\n}\r\n#pth-cssvs-wrapper .pth-field { margin-bottom: 12px; }\r\n#pth-cssvs-wrapper .pth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\r\n#pth-cssvs-wrapper .pth-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }\r\n#pth-cssvs-wrapper .pth-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }\r\n\r\n\/* \u2500\u2500 Sliders \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-range-wrap { display: flex; align-items: center; gap: 8px; }\r\n#pth-cssvs-wrapper .pth-range {\r\n    flex: 1; cursor: pointer; accent-color: #2563eb; height: 4px;\r\n}\r\n#pth-cssvs-wrapper .pth-range-val {\r\n    font-size: 11px; font-weight: 800; color: #1d4ed8;\r\n    min-width: 38px; text-align: right;\r\n}\r\n#pth-cssvs-wrapper .pth-ctrl-row {\r\n    display: flex; justify-content: space-between; align-items: center;\r\n    margin-bottom: 5px;\r\n}\r\n#pth-cssvs-wrapper .pth-ctrl-lbl {\r\n    font-size: 11px; font-weight: 700; color: #334155;\r\n    text-transform: uppercase; letter-spacing: 0.3px;\r\n}\r\n#pth-cssvs-wrapper .pth-ctrl-val {\r\n    font-size: 11px; font-weight: 800; color: #1d4ed8;\r\n    background: #eff6ff; padding: 1px 6px; border-radius: 4px;\r\n}\r\n\r\n\/* \u2500\u2500 Preview area \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-preview-stage {\r\n    background: #f1f5f9; border: 2px solid #e2e8f0; border-radius: 12px;\r\n    display: flex; align-items: center; justify-content: center;\r\n    min-height: 200px; padding: 20px; position: relative; overflow: hidden;\r\n}\r\n#pth-cssvs-wrapper .pth-preview-box {\r\n    width: 120px; height: 120px; background: #2563eb;\r\n    border-radius: 12px; transition: all 0.3s;\r\n    display: flex; align-items: center; justify-content: center;\r\n    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.8);\r\n    cursor: pointer; flex-shrink: 0;\r\n}\r\n#pth-cssvs-wrapper .pth-preview-text-el {\r\n    width: 200px; height: auto; display: none; text-align: center;\r\n    font-size: 24px; font-weight: 700; color: #0f172a;\r\n    padding: 8px; word-break: break-word;\r\n}\r\n#pth-cssvs-wrapper .pth-preview-flex-el {\r\n    width: 100%; min-height: 120px; display: none;\r\n}\r\n#pth-cssvs-wrapper .pth-preview-grid-el {\r\n    width: 100%; min-height: 120px; display: none;\r\n}\r\n#pth-cssvs-wrapper .pth-flex-child, #pth-cssvs-wrapper .pth-grid-child {\r\n    background: #2563eb; border-radius: 6px;\r\n    padding: 8px; color: #fff; font-size: 11px; font-weight: 700;\r\n    text-align: center; min-width: 30px; min-height: 30px;\r\n    display: flex; align-items: center; justify-content: center;\r\n}\r\n#pth-cssvs-wrapper .pth-preview-glass {\r\n    width: 200px; height: 120px; display: none;\r\n    border-radius: 12px; padding: 16px;\r\n    font-size: 12px; font-weight: 700; color: #fff;\r\n    text-align: center;\r\n}\r\n\r\n\/* \u2500\u2500 CSS Output \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-css-out {\r\n    background: #0f172a; color: #4ade80; padding: 14px;\r\n    border-radius: 10px; font-family: 'Courier New', monospace;\r\n    font-size: 11px; min-height: 100px; max-height: 240px;\r\n    overflow-y: auto; white-space: pre-wrap; word-break: break-all;\r\n    border: 2px solid #1e293b; line-height: 1.7;\r\n}\r\n\r\n\/* \u2500\u2500 Shadow layers \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-shadow-layer {\r\n    background: #f8fafc; border: 1px solid #e2e8f0;\r\n    border-radius: 8px; padding: 12px; margin-bottom: 10px;\r\n    position: relative;\r\n}\r\n#pth-cssvs-wrapper .pth-shadow-layer-hdr {\r\n    display: flex; justify-content: space-between; align-items: center;\r\n    margin-bottom: 10px;\r\n}\r\n#pth-cssvs-wrapper .pth-layer-num {\r\n    font-size: 11px; font-weight: 800; color: #1d4ed8;\r\n    background: #eff6ff; padding: 2px 8px; border-radius: 4px;\r\n}\r\n#pth-cssvs-wrapper .pth-layer-remove {\r\n    font-size: 10px; padding: 2px 8px; border-radius: 4px;\r\n    cursor: pointer; border: 1px solid #fecaca;\r\n    background: #fef2f2; color: #991b1b; font-weight: 700;\r\n    font-family: 'Inter', sans-serif; transition: 0.15s;\r\n}\r\n#pth-cssvs-wrapper .pth-layer-remove:hover { background: #fee2e2; }\r\n\r\n\/* \u2500\u2500 Shape toggle \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-shape-row { display: flex; gap: 6px; margin-bottom: 12px; }\r\n#pth-cssvs-wrapper .pth-shape-btn {\r\n    flex: 1; padding: 6px; border: 2px solid #e2e8f0;\r\n    border-radius: 7px; font-size: 11px; font-weight: 700;\r\n    cursor: pointer; text-align: center; background: #f8fafc;\r\n    color: #334155; transition: 0.15s; font-family: 'Inter', sans-serif;\r\n}\r\n#pth-cssvs-wrapper .pth-shape-btn:hover { border-color: #2563eb; color: #1d4ed8; }\r\n#pth-cssvs-wrapper .pth-shape-btn.pth-active { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }\r\n\r\n\/* \u2500\u2500 Preset grid \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-preset-grid {\r\n    display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\r\n    gap: 6px; margin-bottom: 12px;\r\n}\r\n#pth-cssvs-wrapper .pth-preset-card {\r\n    padding: 8px; border: 2px solid #e2e8f0; border-radius: 8px;\r\n    cursor: pointer; text-align: center; font-size: 10px;\r\n    font-weight: 700; color: #334155; background: #fff;\r\n    transition: 0.15s; font-family: 'Inter', sans-serif;\r\n}\r\n#pth-cssvs-wrapper .pth-preset-card:hover { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }\r\n#pth-cssvs-wrapper .pth-preset-mini {\r\n    width: 100%; height: 36px; border-radius: 5px; margin-bottom: 4px;\r\n}\r\n\r\n\/* \u2500\u2500 Color stop row \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-stop-row {\r\n    display: flex; gap: 8px; align-items: center; margin-bottom: 8px;\r\n}\r\n#pth-cssvs-wrapper .pth-stop-color {\r\n    width: 36px; height: 36px; border-radius: 7px;\r\n    border: 2px solid #e2e8f0; cursor: pointer; padding: 2px;\r\n    flex-shrink: 0;\r\n}\r\n#pth-cssvs-wrapper .pth-stop-pos { flex: 1; }\r\n\r\n\/* \u2500\u2500 Clip-path shapes \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-clip-grid {\r\n    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px;\r\n}\r\n#pth-cssvs-wrapper .pth-clip-btn {\r\n    padding: 8px 4px; border: 2px solid #e2e8f0; border-radius: 8px;\r\n    cursor: pointer; text-align: center; background: #fff;\r\n    font-size: 9px; font-weight: 700; color: #334155;\r\n    transition: 0.15s; font-family: 'Inter', sans-serif;\r\n}\r\n#pth-cssvs-wrapper .pth-clip-btn:hover { border-color: #2563eb; color: #1d4ed8; }\r\n#pth-cssvs-wrapper .pth-clip-btn.pth-active { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }\r\n#pth-cssvs-wrapper .pth-clip-icon { font-size: 20px; display: block; margin-bottom: 3px; }\r\n\r\n\/* \u2500\u2500 Anim keyframe preview \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-anim-preview-box {\r\n    width: 70px; height: 70px; background: #2563eb; border-radius: 10px;\r\n    margin: 0 auto 10px; display: flex; align-items: center;\r\n    justify-content: center; color: #fff; font-size: 10px; font-weight: 700;\r\n}\r\n\r\n\/* \u2500\u2500 Flex\/Grid child items \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-flex-item-1 { background: #2563eb; }\r\n#pth-cssvs-wrapper .pth-flex-item-2 { background: #059669; }\r\n#pth-cssvs-wrapper .pth-flex-item-3 { background: #5b21b6; }\r\n#pth-cssvs-wrapper .pth-flex-item-4 { background: #991b1b; }\r\n#pth-cssvs-wrapper .pth-flex-item-5 { background: #92400e; }\r\n\r\n\/* \u2500\u2500 Toast \u2500\u2500 *\/\r\n#pth-cssvs-toast {\r\n    position: fixed; bottom: 24px; right: 24px; z-index: 9999;\r\n    display: flex; flex-direction: column; gap: 10px; pointer-events: none;\r\n}\r\n.pth-toast-msg {\r\n    padding: 10px 18px; border-radius: 10px; font-size: 13px;\r\n    font-weight: 600; color: #fff; pointer-events: auto;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.15);\r\n    font-family: 'Inter', system-ui, sans-serif;\r\n}\r\n.pth-toast-success { background: #059669; }\r\n.pth-toast-error   { background: #dc2626; }\r\n.pth-toast-info    { background: #2563eb; }\r\n\r\n\/* \u2500\u2500 Sidebar \u2500\u2500 *\/\r\n#pth-cssvs-wrapper .pth-sb-hdr {\r\n    background: #f8fafc; margin: -18px -18px 14px -18px;\r\n    padding: 9px 14px; color: #1d4ed8; font-size: 11px;\r\n    border-bottom: 2px solid #eff6ff; font-weight: 800;\r\n    text-transform: uppercase; border-radius: 12px 12px 0 0;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n\/* \u2500\u2500 Mobile \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n    #pth-cssvs-wrapper { padding: 10px; border-radius: 0; background: transparent; }\r\n    #pth-cssvs-wrapper .pth-card { padding: 12px; margin-bottom: 10px; }\r\n    #pth-cssvs-wrapper .pth-flex-layout { grid-template-columns: 100% !important; gap: 10px; }\r\n    #pth-cssvs-wrapper .pth-tool-title { font-size: 18px; }\r\n    #pth-cssvs-wrapper .pth-row-2 { grid-template-columns: 1fr; }\r\n    #pth-cssvs-wrapper .pth-row-3 { grid-template-columns: 1fr 1fr; }\r\n    #pth-cssvs-wrapper .pth-row-4 { grid-template-columns: 1fr 1fr; }\r\n    #pth-cssvs-wrapper .pth-clip-grid { grid-template-columns: repeat(4, 1fr); }\r\n    #pth-cssvs-wrapper .pth-tabs-nav { gap: 2px; }\r\n    #pth-cssvs-wrapper .pth-tab-btn { font-size: 10px; padding: 5px 8px; }\r\n}\r\n<\/style>\r\n\r\n<div id=\"pth-cssvs-toast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n\r\n<div id=\"pth-cssvs-wrapper\">\r\n<div class=\"pth-flex-layout\" id=\"pth-cssvs-layout\">\r\n\r\n<!-- \u2550\u2550\u2550 MAIN COLUMN \u2550\u2550\u2550 -->\r\n<div class=\"pth-main-col\">\r\n<div class=\"pth-card\">\r\n\r\n    <!-- Header -->\r\n    <div style=\"display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;flex-wrap:wrap;gap:8px;\">\r\n        <h2 class=\"pth-tool-title\">\u26a1 CSS Visual Studio Pro<\/h2>\r\n        <button class=\"pth-btn pth-btn-secondary\" id=\"pth-vs-fw-btn\"\r\n            aria-label=\"Toggle full width layout\">\u26f6 Full Width<\/button>\r\n    <\/div>\r\n    <div class=\"pth-tool-meta-bar\">\r\n        <span class=\"pth-version-badge\">v2.0<\/span>\r\n        <span class=\"pth-status-offline\">\ud83d\udd12 100% Offline<\/span>\r\n        <span style=\"font-size:10px;font-weight:700;color:#334155;\">6 Tabs \u00b7 26 Tools<\/span>\r\n    <\/div>\r\n    <div style=\"display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;\">\r\n        <button class=\"pth-sample-btn\" id=\"pth-vs-sample-btn\" aria-label=\"Load sample values\">\ud83d\udca1 Load Sample<\/button>\r\n        <button class=\"pth-btn pth-btn-danger\" id=\"pth-vs-clear-btn\"\r\n            style=\"font-size:0.7rem;padding:3px 8px;border-radius:5px;\" aria-label=\"Reset to defaults\">\ud83d\uddd1\ufe0f Reset<\/button>\r\n    <\/div>\r\n\r\n    <!-- Tab Navigation -->\r\n    <div class=\"pth-tabs-nav\" role=\"tablist\">\r\n        <button class=\"pth-tab-btn pth-active\" data-tab=\"shadow\"\r\n            role=\"tab\" aria-selected=\"true\" aria-label=\"Box Shadow Studio\">\ud83c\udf11 Shadow<\/button>\r\n        <button class=\"pth-tab-btn\" data-tab=\"gradient\"\r\n            role=\"tab\" aria-selected=\"false\" aria-label=\"Gradient Studio\">\ud83c\udf08 Gradient<\/button>\r\n        <button class=\"pth-tab-btn\" data-tab=\"typography\"\r\n            role=\"tab\" aria-selected=\"false\" aria-label=\"Typography Studio\">\u270d\ufe0f Typography<\/button>\r\n        <button class=\"pth-tab-btn\" data-tab=\"border\"\r\n            role=\"tab\" aria-selected=\"false\" aria-label=\"Border and Shape Studio\">\ud83d\udce6 Border<\/button>\r\n        <button class=\"pth-tab-btn\" data-tab=\"transform\"\r\n            role=\"tab\" aria-selected=\"false\" aria-label=\"Transform and Filter Studio\">\u26a1 Transform<\/button>\r\n        <button class=\"pth-tab-btn\" data-tab=\"snippets\"\r\n            role=\"tab\" aria-selected=\"false\" aria-label=\"CSS Snippets Library\">\ud83c\udfaf Snippets<\/button>\r\n    <\/div>\r\n\r\n    <!-- Live Preview (always visible) -->\r\n    <div class=\"pth-preview-stage\" id=\"pth-preview-stage\" style=\"margin-bottom:14px;\">\r\n        <div class=\"pth-preview-box\" id=\"pth-preview-box\" aria-label=\"CSS preview element\">Preview<\/div>\r\n        <div class=\"pth-preview-text-el\" id=\"pth-preview-text-el\">Sample Text<\/div>\r\n        <div class=\"pth-preview-flex-el\" id=\"pth-preview-flex-el\" role=\"img\" aria-label=\"Flexbox layout preview\"><\/div>\r\n        <div class=\"pth-preview-grid-el\" id=\"pth-preview-grid-el\" role=\"img\" aria-label=\"Grid layout preview\"><\/div>\r\n        <div class=\"pth-preview-glass\" id=\"pth-preview-glass\">Glassmorphism Card<\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 1: SHADOW \u2550\u2550 -->\r\n    <div id=\"pth-tab-shadow\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\ud83c\udf11 Box Shadow Studio \u2014 Multi-Layer<\/div>\r\n\r\n            <!-- Preview shape toggle -->\r\n            <div class=\"pth-shape-row\" role=\"group\" aria-label=\"Preview shape selector\">\r\n                <button class=\"pth-shape-btn pth-active\" data-shape=\"square\"\r\n                    aria-label=\"Square preview shape\" aria-pressed=\"true\">\u2b1c Square<\/button>\r\n                <button class=\"pth-shape-btn\" data-shape=\"circle\"\r\n                    aria-label=\"Circle preview shape\" aria-pressed=\"false\">\u2b24 Circle<\/button>\r\n                <button class=\"pth-shape-btn\" data-shape=\"pill\"\r\n                    aria-label=\"Pill preview shape\" aria-pressed=\"false\">\ud83d\udc8a Pill<\/button>\r\n                <button class=\"pth-shape-btn\" data-shape=\"card\"\r\n                    aria-label=\"Card preview shape\" aria-pressed=\"false\">\ud83c\udccf Card<\/button>\r\n            <\/div>\r\n\r\n            <!-- Presets -->\r\n            <div style=\"margin-bottom:12px;\">\r\n                <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px;\">Quick Presets<\/div>\r\n                <div class=\"pth-preset-grid\" id=\"pth-shadow-presets-grid\">\r\n                    <!-- filled by JS -->\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Shadow layers -->\r\n            <div id=\"pth-shadow-layers\"><\/div>\r\n            <button class=\"pth-btn pth-btn-secondary\" id=\"pth-add-shadow-btn\"\r\n                style=\"width:100%;margin-bottom:12px;\" aria-label=\"Add new shadow layer\">\r\n                \u2795 Add Shadow Layer\r\n            <\/button>\r\n\r\n            <!-- Preview bg -->\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-shadow-bg-color\">Preview Background Color<\/label>\r\n                <div style=\"display:flex;gap:8px;align-items:center;\">\r\n                    <input type=\"color\" id=\"pth-shadow-bg-color\" value=\"#f1f5f9\"\r\n                        style=\"width:40px;height:36px;border-radius:7px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\"\r\n                        aria-label=\"Preview background color\">\r\n                    <input type=\"color\" id=\"pth-shadow-box-color\" value=\"#2563eb\"\r\n                        style=\"width:40px;height:36px;border-radius:7px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\"\r\n                        aria-label=\"Preview box color\">\r\n                    <span style=\"font-size:11px;color:#334155;font-weight:600;\">\u2190 Bg \/ Box \u2192<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 2: GRADIENT \u2550\u2550 -->\r\n    <div id=\"pth-tab-gradient\" style=\"display:none;\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\ud83c\udf08 Gradient Studio \u2014 3 Color Stops<\/div>\r\n\r\n            <!-- Type selector -->\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-grad-type\">Gradient Type<\/label>\r\n                <select id=\"pth-grad-type\" aria-label=\"Gradient type selector\">\r\n                    <option value=\"linear\">Linear Gradient<\/option>\r\n                    <option value=\"radial\">Radial Gradient<\/option>\r\n                    <option value=\"conic\">Conic Gradient<\/option>\r\n                <\/select>\r\n            <\/div>\r\n\r\n            <!-- Angle (linear\/conic) -->\r\n            <div class=\"pth-field\" id=\"pth-grad-angle-group\">\r\n                <div class=\"pth-ctrl-row\">\r\n                    <span class=\"pth-ctrl-lbl\">Angle<\/span>\r\n                    <span class=\"pth-ctrl-val\" id=\"pth-grad-angle-val\">135\u00b0<\/span>\r\n                <\/div>\r\n                <div class=\"pth-range-wrap\">\r\n                    <input type=\"range\" id=\"pth-grad-angle\" class=\"pth-range\"\r\n                        min=\"0\" max=\"360\" value=\"135\"\r\n                        aria-label=\"Gradient angle\" aria-valuemin=\"0\" aria-valuemax=\"360\" aria-valuenow=\"135\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Color stops -->\r\n            <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px;\">Color Stops<\/div>\r\n            <div class=\"pth-stop-row\">\r\n                <input type=\"color\" id=\"pth-grad-c1\" class=\"pth-stop-color\" value=\"#2563eb\"\r\n                    aria-label=\"Gradient color stop 1\">\r\n                <div class=\"pth-stop-pos\">\r\n                    <div class=\"pth-ctrl-row\">\r\n                        <span class=\"pth-ctrl-lbl\">Stop 1 Position<\/span>\r\n                        <span class=\"pth-ctrl-val\" id=\"pth-grad-p1-val\">0%<\/span>\r\n                    <\/div>\r\n                    <input type=\"range\" id=\"pth-grad-p1\" class=\"pth-range\"\r\n                        min=\"0\" max=\"100\" value=\"0\"\r\n                        aria-label=\"Color stop 1 position\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"pth-stop-row\">\r\n                <input type=\"color\" id=\"pth-grad-c2\" class=\"pth-stop-color\" value=\"#7c3aed\"\r\n                    aria-label=\"Gradient color stop 2\">\r\n                <div class=\"pth-stop-pos\">\r\n                    <div class=\"pth-ctrl-row\">\r\n                        <span class=\"pth-ctrl-lbl\">Stop 2 Position<\/span>\r\n                        <span class=\"pth-ctrl-val\" id=\"pth-grad-p2-val\">50%<\/span>\r\n                    <\/div>\r\n                    <input type=\"range\" id=\"pth-grad-p2\" class=\"pth-range\"\r\n                        min=\"0\" max=\"100\" value=\"50\"\r\n                        aria-label=\"Color stop 2 position\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"pth-stop-row\">\r\n                <input type=\"color\" id=\"pth-grad-c3\" class=\"pth-stop-color\" value=\"#ec4899\"\r\n                    aria-label=\"Gradient color stop 3\">\r\n                <div class=\"pth-stop-pos\">\r\n                    <div class=\"pth-ctrl-row\">\r\n                        <span class=\"pth-ctrl-lbl\">Stop 3 Position<\/span>\r\n                        <span class=\"pth-ctrl-val\" id=\"pth-grad-p3-val\">100%<\/span>\r\n                    <\/div>\r\n                    <input type=\"range\" id=\"pth-grad-p3\" class=\"pth-range\"\r\n                        min=\"0\" max=\"100\" value=\"100\"\r\n                        aria-label=\"Color stop 3 position\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Gradient text toggle -->\r\n            <div style=\"margin-top:10px;\">\r\n                <label style=\"text-transform:none;font-size:12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;color:#334155;\">\r\n                    <input type=\"checkbox\" id=\"pth-grad-text-mode\"\r\n                        style=\"width:14px;height:14px;accent-color:#2563eb;cursor:pointer;\"\r\n                        aria-label=\"Apply gradient to text instead of background\">\r\n                    Apply as gradient text (background-clip)\r\n                <\/label>\r\n            <\/div>\r\n\r\n            <!-- Presets -->\r\n            <div style=\"margin-top:14px;font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px;\">Gradient Presets<\/div>\r\n            <div class=\"pth-preset-grid\" id=\"pth-grad-presets-grid\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 3: TYPOGRAPHY \u2550\u2550 -->\r\n    <div id=\"pth-tab-typography\" style=\"display:none;\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\u270d\ufe0f Typography Studio<\/div>\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-typo-text\">Preview Text<\/label>\r\n                <input type=\"text\" id=\"pth-typo-text\" value=\"The quick brown fox\"\r\n                    aria-label=\"Typography preview text\">\r\n            <\/div>\r\n            <div class=\"pth-row-3\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\">\r\n                        <span class=\"pth-ctrl-lbl\">Font Size<\/span>\r\n                        <span class=\"pth-ctrl-val\" id=\"pth-fs-val\">32px<\/span>\r\n                    <\/div>\r\n                    <input type=\"range\" id=\"pth-font-size\" class=\"pth-range\"\r\n                        min=\"8\" max=\"96\" value=\"32\"\r\n                        aria-label=\"Font size\" aria-valuemin=\"8\" aria-valuemax=\"96\" aria-valuenow=\"32\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\">\r\n                        <span class=\"pth-ctrl-lbl\">Line Height<\/span>\r\n                        <span class=\"pth-ctrl-val\" id=\"pth-lh-val\">1.4<\/span>\r\n                    <\/div>\r\n                    <input type=\"range\" id=\"pth-line-height\" class=\"pth-range\"\r\n                        min=\"10\" max=\"30\" value=\"14\"\r\n                        aria-label=\"Line height\" aria-valuemin=\"10\" aria-valuemax=\"30\" aria-valuenow=\"14\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\">\r\n                        <span class=\"pth-ctrl-lbl\">Letter Spacing<\/span>\r\n                        <span class=\"pth-ctrl-val\" id=\"pth-ls-val\">0px<\/span>\r\n                    <\/div>\r\n                    <input type=\"range\" id=\"pth-letter-spacing\" class=\"pth-range\"\r\n                        min=\"-5\" max=\"20\" value=\"0\"\r\n                        aria-label=\"Letter spacing\" aria-valuemin=\"-5\" aria-valuemax=\"20\" aria-valuenow=\"0\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"pth-row-3\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-font-weight\">Font Weight<\/label>\r\n                    <select id=\"pth-font-weight\" aria-label=\"Font weight selector\">\r\n                        <option value=\"300\">300 Light<\/option>\r\n                        <option value=\"400\">400 Normal<\/option>\r\n                        <option value=\"500\">500 Medium<\/option>\r\n                        <option value=\"600\">600 Semi-Bold<\/option>\r\n                        <option value=\"700\" selected>700 Bold<\/option>\r\n                        <option value=\"800\">800 Extra-Bold<\/option>\r\n                        <option value=\"900\">900 Black<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-font-style\">Style<\/label>\r\n                    <select id=\"pth-font-style\" aria-label=\"Font style selector\">\r\n                        <option value=\"normal\">Normal<\/option>\r\n                        <option value=\"italic\">Italic<\/option>\r\n                        <option value=\"oblique\">Oblique<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-text-transform\">Transform<\/label>\r\n                    <select id=\"pth-text-transform\" aria-label=\"Text transform selector\">\r\n                        <option value=\"none\">None<\/option>\r\n                        <option value=\"uppercase\">UPPERCASE<\/option>\r\n                        <option value=\"lowercase\">lowercase<\/option>\r\n                        <option value=\"capitalize\">Capitalize<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-text-color\">Text Color<\/label>\r\n                    <input type=\"color\" id=\"pth-text-color\" value=\"#0f172a\"\r\n                        style=\"width:100%;height:36px;border-radius:7px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\"\r\n                        aria-label=\"Text color picker\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-text-bg-color\">Background<\/label>\r\n                    <input type=\"color\" id=\"pth-text-bg-color\" value=\"#f1f5f9\"\r\n                        style=\"width:100%;height:36px;border-radius:7px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\"\r\n                        aria-label=\"Text background color\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Text Shadow -->\r\n            <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px;\">Text Shadow<\/div>\r\n            <div class=\"pth-row-4\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">X<\/span><span class=\"pth-ctrl-val\" id=\"pth-tsh-x-val\">2px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-tsh-x\" class=\"pth-range\" min=\"-30\" max=\"30\" value=\"2\"\r\n                        aria-label=\"Text shadow X offset\" aria-valuenow=\"2\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Y<\/span><span class=\"pth-ctrl-val\" id=\"pth-tsh-y-val\">2px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-tsh-y\" class=\"pth-range\" min=\"-30\" max=\"30\" value=\"2\"\r\n                        aria-label=\"Text shadow Y offset\" aria-valuenow=\"2\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Blur<\/span><span class=\"pth-ctrl-val\" id=\"pth-tsh-b-val\">4px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-tsh-b\" class=\"pth-range\" min=\"0\" max=\"40\" value=\"4\"\r\n                        aria-label=\"Text shadow blur\" aria-valuenow=\"4\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-tsh-color\">Color<\/label>\r\n                    <input type=\"color\" id=\"pth-tsh-color\" value=\"#1d4ed8\"\r\n                        style=\"width:100%;height:30px;border-radius:5px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\"\r\n                        aria-label=\"Text shadow color\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Google Font import -->\r\n            <div class=\"pth-field\" style=\"margin-top:4px;\">\r\n                <label for=\"pth-font-family\">Google Font Name (optional)<\/label>\r\n                <input type=\"text\" id=\"pth-font-family\" placeholder=\"e.g. Inter, Roboto, Playfair Display\"\r\n                    aria-label=\"Google Font family name for import\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 4: BORDER \u2550\u2550 -->\r\n    <div id=\"pth-tab-border\" style=\"display:none;\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\ud83d\udce6 Border &amp; Shape Studio<\/div>\r\n\r\n            <!-- Border Radius -->\r\n            <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px;\">Border Radius \u2014 Individual Corners<\/div>\r\n            <div class=\"pth-row-4\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">\u2196 TL<\/span><span class=\"pth-ctrl-val\" id=\"pth-br-tl-val\">12px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-br-tl\" class=\"pth-range\" min=\"0\" max=\"100\" value=\"12\"\r\n                        aria-label=\"Top left border radius\" aria-valuenow=\"12\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">\u2197 TR<\/span><span class=\"pth-ctrl-val\" id=\"pth-br-tr-val\">12px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-br-tr\" class=\"pth-range\" min=\"0\" max=\"100\" value=\"12\"\r\n                        aria-label=\"Top right border radius\" aria-valuenow=\"12\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">\u2198 BR<\/span><span class=\"pth-ctrl-val\" id=\"pth-br-br-val\">12px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-br-br\" class=\"pth-range\" min=\"0\" max=\"100\" value=\"12\"\r\n                        aria-label=\"Bottom right border radius\" aria-valuenow=\"12\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">\u2199 BL<\/span><span class=\"pth-ctrl-val\" id=\"pth-br-bl-val\">12px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-br-bl\" class=\"pth-range\" min=\"0\" max=\"100\" value=\"12\"\r\n                        aria-label=\"Bottom left border radius\" aria-valuenow=\"12\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Border Style -->\r\n            <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px;\">Border<\/div>\r\n            <div class=\"pth-row-3\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Width<\/span><span class=\"pth-ctrl-val\" id=\"pth-bw-val\">2px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-border-width\" class=\"pth-range\" min=\"0\" max=\"20\" value=\"2\"\r\n                        aria-label=\"Border width\" aria-valuenow=\"2\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-border-style\">Style<\/label>\r\n                    <select id=\"pth-border-style\" aria-label=\"Border style\">\r\n                        <option value=\"solid\">Solid<\/option>\r\n                        <option value=\"dashed\">Dashed<\/option>\r\n                        <option value=\"dotted\">Dotted<\/option>\r\n                        <option value=\"double\">Double<\/option>\r\n                        <option value=\"groove\">Groove<\/option>\r\n                        <option value=\"ridge\">Ridge<\/option>\r\n                        <option value=\"none\">None<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-border-color\">Color<\/label>\r\n                    <input type=\"color\" id=\"pth-border-color\" value=\"#2563eb\"\r\n                        style=\"width:100%;height:36px;border-radius:7px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\"\r\n                        aria-label=\"Border color picker\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Outline -->\r\n            <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px;\">Outline<\/div>\r\n            <div class=\"pth-row-3\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Width<\/span><span class=\"pth-ctrl-val\" id=\"pth-ow-val\">0px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-outline-width\" class=\"pth-range\" min=\"0\" max=\"20\" value=\"0\"\r\n                        aria-label=\"Outline width\" aria-valuenow=\"0\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Offset<\/span><span class=\"pth-ctrl-val\" id=\"pth-oo-val\">0px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-outline-offset\" class=\"pth-range\" min=\"-10\" max=\"20\" value=\"0\"\r\n                        aria-label=\"Outline offset\" aria-valuenow=\"0\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-outline-color\">Color<\/label>\r\n                    <input type=\"color\" id=\"pth-outline-color\" value=\"#f59e0b\"\r\n                        style=\"width:100%;height:36px;border-radius:7px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\"\r\n                        aria-label=\"Outline color\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- CSS Clip-path shapes -->\r\n            <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px;\">CSS Clip-Path Shapes<\/div>\r\n            <div class=\"pth-clip-grid\" id=\"pth-clip-grid\" role=\"group\" aria-label=\"CSS clip-path shape selector\">\r\n                <button class=\"pth-clip-btn pth-active\" data-clip=\"none\" aria-label=\"No clip-path\" aria-pressed=\"true\">\r\n                    <span class=\"pth-clip-icon\">\u2b1c<\/span>None\r\n                <\/button>\r\n                <button class=\"pth-clip-btn\" data-clip=\"circle\" aria-label=\"Circle clip-path\" aria-pressed=\"false\">\r\n                    <span class=\"pth-clip-icon\">\u2b55<\/span>Circle\r\n                <\/button>\r\n                <button class=\"pth-clip-btn\" data-clip=\"triangle\" aria-label=\"Triangle clip-path\" aria-pressed=\"false\">\r\n                    <span class=\"pth-clip-icon\">\ud83d\udd3a<\/span>Triangle\r\n                <\/button>\r\n                <button class=\"pth-clip-btn\" data-clip=\"hexagon\" aria-label=\"Hexagon clip-path\" aria-pressed=\"false\">\r\n                    <span class=\"pth-clip-icon\">\u2b21<\/span>Hexagon\r\n                <\/button>\r\n                <button class=\"pth-clip-btn\" data-clip=\"star\" aria-label=\"Star clip-path\" aria-pressed=\"false\">\r\n                    <span class=\"pth-clip-icon\">\u2b50<\/span>Star\r\n                <\/button>\r\n                <button class=\"pth-clip-btn\" data-clip=\"rhombus\" aria-label=\"Rhombus clip-path\" aria-pressed=\"false\">\r\n                    <span class=\"pth-clip-icon\">\ud83d\udca0<\/span>Rhombus\r\n                <\/button>\r\n                <button class=\"pth-clip-btn\" data-clip=\"parallelogram\" aria-label=\"Parallelogram clip-path\" aria-pressed=\"false\">\r\n                    <span class=\"pth-clip-icon\">\u25b1<\/span>Parallelogram\r\n                <\/button>\r\n                <button class=\"pth-clip-btn\" data-clip=\"arrow\" aria-label=\"Arrow clip-path\" aria-pressed=\"false\">\r\n                    <span class=\"pth-clip-icon\">\u27a4<\/span>Arrow\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 5: TRANSFORM \u2550\u2550 -->\r\n    <div id=\"pth-tab-transform\" style=\"display:none;\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\u26a1 Transform &amp; Filter Studio<\/div>\r\n\r\n            <!-- Transforms -->\r\n            <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px;\">CSS Transforms<\/div>\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Rotate<\/span><span class=\"pth-ctrl-val\" id=\"pth-rot-val\">0\u00b0<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-rotate\" class=\"pth-range\" min=\"-180\" max=\"180\" value=\"0\"\r\n                        aria-label=\"Rotation angle\" aria-valuenow=\"0\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Scale<\/span><span class=\"pth-ctrl-val\" id=\"pth-scale-val\">1.0\u00d7<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-scale\" class=\"pth-range\" min=\"10\" max=\"30\" value=\"10\"\r\n                        aria-label=\"Scale factor\" aria-valuenow=\"10\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Translate X<\/span><span class=\"pth-ctrl-val\" id=\"pth-tx-val\">0px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-translate-x\" class=\"pth-range\" min=\"-100\" max=\"100\" value=\"0\"\r\n                        aria-label=\"Translate X\" aria-valuenow=\"0\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Translate Y<\/span><span class=\"pth-ctrl-val\" id=\"pth-ty-val\">0px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-translate-y\" class=\"pth-range\" min=\"-100\" max=\"100\" value=\"0\"\r\n                        aria-label=\"Translate Y\" aria-valuenow=\"0\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Skew X<\/span><span class=\"pth-ctrl-val\" id=\"pth-sx-val\">0\u00b0<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-skew-x\" class=\"pth-range\" min=\"-45\" max=\"45\" value=\"0\"\r\n                        aria-label=\"Skew X\" aria-valuenow=\"0\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Skew Y<\/span><span class=\"pth-ctrl-val\" id=\"pth-sy-val\">0\u00b0<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-skew-y\" class=\"pth-range\" min=\"-45\" max=\"45\" value=\"0\"\r\n                        aria-label=\"Skew Y\" aria-valuenow=\"0\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Filters -->\r\n            <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin:12px 0 8px;\">CSS Filters<\/div>\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Blur<\/span><span class=\"pth-ctrl-val\" id=\"pth-f-blur-val\">0px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-f-blur\" class=\"pth-range\" min=\"0\" max=\"20\" value=\"0\"\r\n                        aria-label=\"Filter blur\" aria-valuenow=\"0\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Brightness<\/span><span class=\"pth-ctrl-val\" id=\"pth-f-bright-val\">100%<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-f-bright\" class=\"pth-range\" min=\"0\" max=\"200\" value=\"100\"\r\n                        aria-label=\"Filter brightness\" aria-valuenow=\"100\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Contrast<\/span><span class=\"pth-ctrl-val\" id=\"pth-f-contrast-val\">100%<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-f-contrast\" class=\"pth-range\" min=\"0\" max=\"200\" value=\"100\"\r\n                        aria-label=\"Filter contrast\" aria-valuenow=\"100\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Saturate<\/span><span class=\"pth-ctrl-val\" id=\"pth-f-sat-val\">100%<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-f-sat\" class=\"pth-range\" min=\"0\" max=\"300\" value=\"100\"\r\n                        aria-label=\"Filter saturation\" aria-valuenow=\"100\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Hue Rotate<\/span><span class=\"pth-ctrl-val\" id=\"pth-f-hue-val\">0\u00b0<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-f-hue\" class=\"pth-range\" min=\"0\" max=\"360\" value=\"0\"\r\n                        aria-label=\"Filter hue rotate\" aria-valuenow=\"0\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Grayscale<\/span><span class=\"pth-ctrl-val\" id=\"pth-f-gray-val\">0%<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-f-gray\" class=\"pth-range\" min=\"0\" max=\"100\" value=\"0\"\r\n                        aria-label=\"Filter grayscale\" aria-valuenow=\"0\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Sepia<\/span><span class=\"pth-ctrl-val\" id=\"pth-f-sepia-val\">0%<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-f-sepia\" class=\"pth-range\" min=\"0\" max=\"100\" value=\"0\"\r\n                        aria-label=\"Filter sepia\" aria-valuenow=\"0\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Invert<\/span><span class=\"pth-ctrl-val\" id=\"pth-f-invert-val\">0%<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-f-invert\" class=\"pth-range\" min=\"0\" max=\"100\" value=\"0\"\r\n                        aria-label=\"Filter invert\" aria-valuenow=\"0\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Transition -->\r\n            <div style=\"font-size:11px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:0.4px;margin:12px 0 8px;\">Transition Generator<\/div>\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-trans-prop\">Property<\/label>\r\n                    <select id=\"pth-trans-prop\" aria-label=\"Transition property\">\r\n                        <option value=\"all\">all<\/option>\r\n                        <option value=\"transform\">transform<\/option>\r\n                        <option value=\"opacity\">opacity<\/option>\r\n                        <option value=\"background-color\">background-color<\/option>\r\n                        <option value=\"color\">color<\/option>\r\n                        <option value=\"box-shadow\">box-shadow<\/option>\r\n                        <option value=\"border-radius\">border-radius<\/option>\r\n                        <option value=\"width\">width<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-trans-ease\">Timing Function<\/label>\r\n                    <select id=\"pth-trans-ease\" aria-label=\"Transition timing function\">\r\n                        <option value=\"ease\">ease<\/option>\r\n                        <option value=\"ease-in\">ease-in<\/option>\r\n                        <option value=\"ease-out\">ease-out<\/option>\r\n                        <option value=\"ease-in-out\">ease-in-out<\/option>\r\n                        <option value=\"linear\">linear<\/option>\r\n                        <option value=\"cubic-bezier(0.34,1.56,0.64,1)\">spring bounce<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Duration<\/span><span class=\"pth-ctrl-val\" id=\"pth-trans-dur-val\">300ms<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-trans-dur\" class=\"pth-range\" min=\"50\" max=\"2000\" value=\"300\"\r\n                        aria-label=\"Transition duration\" aria-valuenow=\"300\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Delay<\/span><span class=\"pth-ctrl-val\" id=\"pth-trans-delay-val\">0ms<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-trans-delay\" class=\"pth-range\" min=\"0\" max=\"1000\" value=\"0\"\r\n                        aria-label=\"Transition delay\" aria-valuenow=\"0\">\r\n                <\/div>\r\n            <\/div>\r\n            <button class=\"pth-btn pth-btn-secondary\" id=\"pth-reset-transform-btn\"\r\n                style=\"margin-top:4px;\" aria-label=\"Reset all transforms and filters to defaults\">\r\n                \ud83d\udd04 Reset All Transforms\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 TAB 6: SNIPPETS \u2550\u2550 -->\r\n    <div id=\"pth-tab-snippets\" style=\"display:none;\" role=\"tabpanel\">\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-card-hdr\">\ud83c\udfaf CSS Snippets Library<\/div>\r\n\r\n            <!-- Snippet type selector -->\r\n            <div class=\"pth-shape-row\" style=\"flex-wrap:wrap;\" role=\"group\" aria-label=\"Snippet type selector\">\r\n                <button class=\"pth-shape-btn pth-active\" data-snippet=\"flexbox\"\r\n                    aria-label=\"Flexbox generator\" aria-pressed=\"true\">\ud83d\udcd0 Flexbox<\/button>\r\n                <button class=\"pth-shape-btn\" data-snippet=\"grid\"\r\n                    aria-label=\"Grid generator\" aria-pressed=\"false\">\u229e Grid<\/button>\r\n                <button class=\"pth-shape-btn\" data-snippet=\"animation\"\r\n                    aria-label=\"Animation generator\" aria-pressed=\"false\">\ud83c\udfac Animation<\/button>\r\n                <button class=\"pth-shape-btn\" data-snippet=\"glass\"\r\n                    aria-label=\"Glassmorphism generator\" aria-pressed=\"false\">\ud83d\udd2e Glass<\/button>\r\n            <\/div>\r\n\r\n            <!-- FLEXBOX controls -->\r\n            <div id=\"pth-snip-flexbox\">\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-flex-direction\">Flex Direction<\/label>\r\n                        <select id=\"pth-flex-direction\" aria-label=\"Flex direction\">\r\n                            <option value=\"row\">row \u2192<\/option>\r\n                            <option value=\"row-reverse\">row-reverse \u2190<\/option>\r\n                            <option value=\"column\">column \u2193<\/option>\r\n                            <option value=\"column-reverse\">column-reverse \u2191<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-flex-wrap\">Flex Wrap<\/label>\r\n                        <select id=\"pth-flex-wrap\" aria-label=\"Flex wrap\">\r\n                            <option value=\"nowrap\">nowrap<\/option>\r\n                            <option value=\"wrap\">wrap<\/option>\r\n                            <option value=\"wrap-reverse\">wrap-reverse<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-justify-content\">Justify Content<\/label>\r\n                        <select id=\"pth-justify-content\" aria-label=\"Justify content\">\r\n                            <option value=\"flex-start\">flex-start<\/option>\r\n                            <option value=\"center\">center<\/option>\r\n                            <option value=\"flex-end\">flex-end<\/option>\r\n                            <option value=\"space-between\">space-between<\/option>\r\n                            <option value=\"space-around\">space-around<\/option>\r\n                            <option value=\"space-evenly\">space-evenly<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-align-items\">Align Items<\/label>\r\n                        <select id=\"pth-align-items\" aria-label=\"Align items\">\r\n                            <option value=\"stretch\">stretch<\/option>\r\n                            <option value=\"flex-start\">flex-start<\/option>\r\n                            <option value=\"center\">center<\/option>\r\n                            <option value=\"flex-end\">flex-end<\/option>\r\n                            <option value=\"baseline\">baseline<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Gap<\/span><span class=\"pth-ctrl-val\" id=\"pth-flex-gap-val\">12px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-flex-gap\" class=\"pth-range\" min=\"0\" max=\"60\" value=\"12\"\r\n                        aria-label=\"Flex gap\" aria-valuenow=\"12\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- GRID controls -->\r\n            <div id=\"pth-snip-grid\" style=\"display:none;\">\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Columns<\/span><span class=\"pth-ctrl-val\" id=\"pth-grid-cols-val\">3<\/span><\/div>\r\n                        <input type=\"range\" id=\"pth-grid-cols\" class=\"pth-range\" min=\"1\" max=\"6\" value=\"3\"\r\n                            aria-label=\"Grid columns\" aria-valuenow=\"3\">\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Rows<\/span><span class=\"pth-ctrl-val\" id=\"pth-grid-rows-val\">2<\/span><\/div>\r\n                        <input type=\"range\" id=\"pth-grid-rows\" class=\"pth-range\" min=\"1\" max=\"6\" value=\"2\"\r\n                            aria-label=\"Grid rows\" aria-valuenow=\"2\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Gap<\/span><span class=\"pth-ctrl-val\" id=\"pth-grid-gap-val\">12px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-grid-gap\" class=\"pth-range\" min=\"0\" max=\"40\" value=\"12\"\r\n                        aria-label=\"Grid gap\" aria-valuenow=\"12\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-grid-template\">Template Columns<\/label>\r\n                    <select id=\"pth-grid-template\" aria-label=\"Grid template columns type\">\r\n                        <option value=\"repeat\">repeat(N, 1fr)<\/option>\r\n                        <option value=\"auto\">repeat(auto-fit, minmax(200px, 1fr))<\/option>\r\n                        <option value=\"fixed\">repeat(N, 200px)<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- ANIMATION controls -->\r\n            <div id=\"pth-snip-animation\" style=\"display:none;\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-anim-type\">Animation Type<\/label>\r\n                    <select id=\"pth-anim-type\" aria-label=\"Animation type\">\r\n                        <option value=\"fadeIn\">Fade In<\/option>\r\n                        <option value=\"fadeOut\">Fade Out<\/option>\r\n                        <option value=\"slideInLeft\">Slide In Left<\/option>\r\n                        <option value=\"slideInRight\">Slide In Right<\/option>\r\n                        <option value=\"slideInUp\">Slide In Up<\/option>\r\n                        <option value=\"bounce\">Bounce<\/option>\r\n                        <option value=\"pulse\">Pulse<\/option>\r\n                        <option value=\"spin\">Spin<\/option>\r\n                        <option value=\"shake\">Shake<\/option>\r\n                        <option value=\"flip\">Flip<\/option>\r\n                        <option value=\"zoom\">Zoom In<\/option>\r\n                        <option value=\"rubberBand\">Rubber Band<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Duration<\/span><span class=\"pth-ctrl-val\" id=\"pth-anim-dur-val\">0.6s<\/span><\/div>\r\n                        <input type=\"range\" id=\"pth-anim-dur\" class=\"pth-range\" min=\"1\" max=\"30\" value=\"6\"\r\n                            aria-label=\"Animation duration\" aria-valuenow=\"6\">\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-anim-iter\">Iteration<\/label>\r\n                        <select id=\"pth-anim-iter\" aria-label=\"Animation iteration count\">\r\n                            <option value=\"1\">Once<\/option>\r\n                            <option value=\"2\">Twice<\/option>\r\n                            <option value=\"3\">3 Times<\/option>\r\n                            <option value=\"infinite\">Infinite<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"pth-anim-preview-box\" id=\"pth-anim-preview-box\"\r\n                    aria-label=\"Animation preview box\">\u2728<\/div>\r\n                <button class=\"pth-btn pth-btn-primary\" id=\"pth-play-anim-btn\"\r\n                    style=\"width:100%;margin-bottom:8px;\" aria-label=\"Play animation preview\">\r\n                    \u25b6 Play Preview\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <!-- GLASS controls -->\r\n            <div id=\"pth-snip-glass\" style=\"display:none;\">\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Backdrop Blur<\/span><span class=\"pth-ctrl-val\" id=\"pth-glass-blur-val\">10px<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-glass-blur\" class=\"pth-range\" min=\"0\" max=\"40\" value=\"10\"\r\n                        aria-label=\"Glassmorphism backdrop blur\" aria-valuenow=\"10\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <div class=\"pth-ctrl-row\"><span class=\"pth-ctrl-lbl\">Background Opacity<\/span><span class=\"pth-ctrl-val\" id=\"pth-glass-op-val\">15%<\/span><\/div>\r\n                    <input type=\"range\" id=\"pth-glass-op\" class=\"pth-range\" min=\"0\" max=\"80\" value=\"15\"\r\n                        aria-label=\"Glassmorphism background opacity\" aria-valuenow=\"15\">\r\n                <\/div>\r\n                <div class=\"pth-row-2\">\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-glass-bg-color\">Glass Color<\/label>\r\n                        <input type=\"color\" id=\"pth-glass-bg-color\" value=\"#ffffff\"\r\n                            style=\"width:100%;height:36px;border-radius:7px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\"\r\n                            aria-label=\"Glassmorphism glass color\">\r\n                    <\/div>\r\n                    <div class=\"pth-field\">\r\n                        <label for=\"pth-glass-border-color\">Border Color<\/label>\r\n                        <input type=\"color\" id=\"pth-glass-border-color\" value=\"#ffffff\"\r\n                            style=\"width:100%;height:36px;border-radius:7px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\"\r\n                            aria-label=\"Glassmorphism border color\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div style=\"font-size:11px;font-weight:700;color:#334155;margin-bottom:6px;\">Background Scene for Preview:<\/div>\r\n                <div style=\"display:flex;gap:8px;flex-wrap:wrap;\">\r\n                    <button class=\"pth-shape-btn\" data-glass-bg=\"linear-gradient(135deg,#667eea,#764ba2)\"\r\n                        style=\"flex:1;min-width:80px;\" aria-label=\"Purple gradient background\">Purple<\/button>\r\n                    <button class=\"pth-shape-btn\" data-glass-bg=\"linear-gradient(135deg,#f093fb,#f5576c)\"\r\n                        style=\"flex:1;min-width:80px;\" aria-label=\"Pink gradient background\">Pink<\/button>\r\n                    <button class=\"pth-shape-btn\" data-glass-bg=\"linear-gradient(135deg,#4facfe,#00f2fe)\"\r\n                        style=\"flex:1;min-width:80px;\" aria-label=\"Blue gradient background\">Ocean<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- CSS Output (always visible) -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-card-hdr\">\ud83d\udcbb Generated CSS Output<\/div>\r\n        <pre class=\"pth-css-out\" id=\"pth-css-out\" aria-live=\"polite\" aria-label=\"Generated CSS code\"><\/pre>\r\n        <div style=\"display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;\">\r\n            <button class=\"pth-btn pth-btn-success\" id=\"pth-copy-css-btn\"\r\n                style=\"flex:1;\" aria-label=\"Copy generated CSS code\">\ud83d\udccb Copy CSS<\/button>\r\n            <button class=\"pth-btn pth-btn-secondary\" id=\"pth-reset-css-btn\"\r\n                style=\"flex:1;\" aria-label=\"Reset CSS output\">\ud83d\udd04 Reset<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div><!-- \/main card -->\r\n<\/div><!-- \/main col -->\r\n\r\n<!-- \u2550\u2550\u2550 SIDEBAR \u2550\u2550\u2550 -->\r\n<div class=\"pth-sidebar-col\" id=\"pth-cssvs-sidebar\">\r\n\r\n    <!-- Preview Controls -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-sb-hdr\">\ud83d\udc41 Preview Controls<\/div>\r\n        <div class=\"pth-field\">\r\n            <label>Preview Background<\/label>\r\n            <div style=\"display:flex;gap:6px;flex-wrap:wrap;\">\r\n                <button class=\"pth-shape-btn pth-active\" data-stage-bg=\"#f1f5f9\" aria-label=\"Light background\">\u2600\ufe0f Light<\/button>\r\n                <button class=\"pth-shape-btn\" data-stage-bg=\"#0f172a\" aria-label=\"Dark background\">\ud83c\udf19 Dark<\/button>\r\n                <button class=\"pth-shape-btn\" data-stage-bg=\"linear-gradient(135deg,#667eea,#764ba2)\" aria-label=\"Gradient background\">\ud83c\udf08 Grad<\/button>\r\n                <button class=\"pth-shape-btn\" data-stage-bg=\"repeating-conic-gradient(#e2e8f0 0% 25%,#fff 0% 50%) 0 0\/20px 20px\" aria-label=\"Checkered background\">\u2b1c Check<\/button>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"pth-field\">\r\n            <label>Upload Image to Preview<\/label>\r\n            <label for=\"pth-preview-img-file\"\r\n                style=\"display:block;text-align:center;padding:10px;border:2px dashed #c4b5fd;border-radius:8px;cursor:pointer;color:#5b21b6;font-size:11px;font-weight:700;background:#faf5ff;\">\r\n                \ud83d\udcf7 Click to Upload Image\r\n            <\/label>\r\n            <input type=\"file\" id=\"pth-preview-img-file\" accept=\"image\/*\" style=\"display:none;\"\r\n                aria-label=\"Upload image for preview background\">\r\n        <\/div>\r\n        <button class=\"pth-btn pth-btn-danger\" id=\"pth-clear-img-btn\"\r\n            style=\"width:100%;display:none;font-size:11px;padding:5px;\"\r\n            aria-label=\"Remove preview image\">\u2716 Remove Image<\/button>\r\n    <\/div>\r\n\r\n    <!-- Quick Reference -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-sb-hdr\">\ud83d\udcd6 Tab Guide<\/div>\r\n        <div style=\"font-size:11px;color:#334155;line-height:2;font-weight:500;\">\r\n            <div><strong style=\"color:#0f172a;\">\ud83c\udf11 Shadow<\/strong> \u2014 Multi-layer box shadows + 12 presets<\/div>\r\n            <div><strong style=\"color:#0f172a;\">\ud83c\udf08 Gradient<\/strong> \u2014 Linear\/Radial\/Conic, 3 color stops<\/div>\r\n            <div><strong style=\"color:#0f172a;\">\u270d\ufe0f Typography<\/strong> \u2014 Font, text shadow, spacing<\/div>\r\n            <div><strong style=\"color:#0f172a;\">\ud83d\udce6 Border<\/strong> \u2014 Radius, style, clip-path shapes<\/div>\r\n            <div><strong style=\"color:#0f172a;\">\u26a1 Transform<\/strong> \u2014 Transforms, filters, transitions<\/div>\r\n            <div><strong style=\"color:#0f172a;\">\ud83c\udfaf Snippets<\/strong> \u2014 Flexbox, Grid, Animation, Glass<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Recent CSS -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-sb-hdr\">\ud83d\udd52 Recent Outputs<\/div>\r\n        <div id=\"pth-recent-outputs\" style=\"display:flex;flex-direction:column;gap:8px;\">\r\n            <div style=\"font-size:11px;color:#334155;font-weight:500;\">Your last 5 generated CSS snippets appear here<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Tips -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-sb-hdr\">\ud83d\udca1 Pro Tips<\/div>\r\n        <ul style=\"margin:0;padding-left:14px;font-size:11px;color:#334155;line-height:1.9;font-weight:500;\">\r\n            <li>Add up to <strong style=\"color:#0f172a;\">4 shadow layers<\/strong> for complex depth effects.<\/li>\r\n            <li>Gradient text uses <code>background-clip: text<\/code> \u2014 tick the checkbox in Gradient tab.<\/li>\r\n            <li>Click any preset card to apply it instantly to the preview.<\/li>\r\n            <li>CSS output copies to clipboard \u2014 paste directly into your stylesheet.<\/li>\r\n            <li>Upload an image as preview background to test realistic shadow effects.<\/li>\r\n            <li>Animation tab generates full <code>@keyframes<\/code> + <code>animation<\/code> property.<\/li>\r\n        <\/ul>\r\n    <\/div>\r\n\r\n<\/div><!-- \/sidebar -->\r\n<\/div><!-- \/flex-layout -->\r\n<\/div><!-- \/wrapper -->\r\n<script data-no-optimize=\"1\" data-no-minify=\"1\" data-cfasync=\"false\">\r\n(function () {\r\n    'use strict';\r\n\r\n    \/* =======================================================\r\n       PTH CSS VISUAL STUDIO PRO \u2014 v2.0\r\n       6 Tabs | 26 Tools | WP\/LiteSpeed Safe | WCAG AA\r\n       ======================================================= *\/\r\n\r\n    window.pthCssVsApp = {\r\n        initialized: false,\r\n        currentTab: 'shadow',\r\n        currentSnippet: 'flexbox',\r\n        currentShape: 'square',\r\n        currentClip: 'none',\r\n        shadowLayers: [],\r\n        recentOutputs: [],\r\n        glassSceneBg: 'linear-gradient(135deg,#667eea,#764ba2)',\r\n\r\n        \/* \u2500\u2500 Shadow presets \u2500\u2500 *\/\r\n        shadowPresets: [\r\n            { name: 'Soft',      css: '0 10px 25px -5px rgba(0,0,0,0.1)',   preview: '0 10px 25px -5px rgba(0,0,0,0.1)' },\r\n            { name: 'Hard',      css: '8px 8px 0 0 rgba(0,0,0,1)',          preview: '8px 8px 0 rgba(0,0,0,1)' },\r\n            { name: 'Neumorphic',css: '8px 8px 16px #b8bec9,-8px -8px 16px #ffffff', preview: '8px 8px 16px #b8bec9,-8px -8px 16px #ffffff' },\r\n            { name: 'Glow Blue', css: '0 0 20px 5px rgba(37,99,235,0.6)',   preview: '0 0 20px 5px rgba(37,99,235,0.6)' },\r\n            { name: 'Glow Purple',css: '0 0 20px 5px rgba(91,33,182,0.6)', preview: '0 0 20px 5px rgba(91,33,182,0.6)' },\r\n            { name: 'Floating',  css: '0 20px 40px -10px rgba(0,0,0,0.3)', preview: '0 20px 40px -10px rgba(0,0,0,0.3)' },\r\n            { name: 'Material',  css: '0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)', preview: '0 3px 6px rgba(0,0,0,0.16)' },\r\n            { name: 'Neon',      css: '0 0 10px #4ade80,0 0 30px #4ade80,0 0 60px #4ade80', preview: '0 0 20px #4ade80' },\r\n            { name: 'Long',      css: '10px 10px 0 2px rgba(0,0,0,0.08),20px 20px 0 4px rgba(0,0,0,0.06)', preview: '10px 10px 0 rgba(0,0,0,0.08)' },\r\n            { name: 'Crisp',     css: '0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)', preview: '0 1px 3px rgba(0,0,0,0.12)' },\r\n            { name: 'Inner',     css: 'inset 0 4px 8px rgba(0,0,0,0.2)',    preview: 'inset 0 4px 8px rgba(0,0,0,0.2)' },\r\n            { name: 'Double',    css: '0 4px 6px rgba(0,0,0,0.1),0 20px 40px rgba(0,0,0,0.15)', preview: '0 4px 6px rgba(0,0,0,0.1)' }\r\n        ],\r\n\r\n        \/* \u2500\u2500 Gradient presets \u2500\u2500 *\/\r\n        gradientPresets: [\r\n            { name: 'Ocean',   css: 'linear-gradient(135deg,#2563eb,#38bdf8)', c1: '#2563eb', c2: '#38bdf8', c3: '#38bdf8', type: 'linear', angle: 135 },\r\n            { name: 'Sunset',  css: 'linear-gradient(135deg,#f97316,#facc15)', c1: '#f97316', c2: '#facc15', c3: '#facc15', type: 'linear', angle: 135 },\r\n            { name: 'Aurora',  css: 'linear-gradient(135deg,#059669,#2563eb)', c1: '#059669', c2: '#2563eb', c3: '#7c3aed', type: 'linear', angle: 135 },\r\n            { name: 'Candy',   css: 'linear-gradient(135deg,#ec4899,#8b5cf6)', c1: '#ec4899', c2: '#8b5cf6', c3: '#06b6d4', type: 'linear', angle: 135 },\r\n            { name: 'Dark',    css: 'linear-gradient(135deg,#0f172a,#334155)', c1: '#0f172a', c2: '#334155', c3: '#475569', type: 'linear', angle: 135 },\r\n            { name: 'Fire',    css: 'linear-gradient(135deg,#dc2626,#f97316,#facc15)', c1: '#dc2626', c2: '#f97316', c3: '#facc15', type: 'linear', angle: 135 },\r\n            { name: 'Radial',  css: 'radial-gradient(circle,#7c3aed,#ec4899)', c1: '#7c3aed', c2: '#ec4899', c3: '#ec4899', type: 'radial', angle: 135 },\r\n            { name: 'Mint',    css: 'linear-gradient(135deg,#10b981,#06b6d4)', c1: '#10b981', c2: '#06b6d4', c3: '#2563eb', type: 'linear', angle: 135 }\r\n        ],\r\n\r\n        \/* \u2500\u2500 Clip-path definitions \u2500\u2500 *\/\r\n        clipPaths: {\r\n            'none':          'none',\r\n            'circle':        'circle(50% at 50% 50%)',\r\n            'triangle':      'polygon(50% 0%,0% 100%,100% 100%)',\r\n            'hexagon':       'polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)',\r\n            'star':          'polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)',\r\n            'rhombus':       'polygon(50% 0%,100% 50%,50% 100%,0% 50%)',\r\n            'parallelogram': 'polygon(25% 0%,100% 0%,75% 100%,0% 100%)',\r\n            'arrow':         'polygon(0% 20%,60% 20%,60% 0%,100% 50%,60% 100%,60% 80%,0% 80%)'\r\n        },\r\n\r\n        \/* \u2500\u2500 Animation definitions \u2500\u2500 *\/\r\n        animations: {\r\n            fadeIn:      '@keyframes pth-fadeIn{from{opacity:0}to{opacity:1}}',\r\n            fadeOut:     '@keyframes pth-fadeOut{from{opacity:1}to{opacity:0}}',\r\n            slideInLeft: '@keyframes pth-slideInLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}',\r\n            slideInRight:'@keyframes pth-slideInRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}',\r\n            slideInUp:   '@keyframes pth-slideInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}',\r\n            bounce:      '@keyframes pth-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}',\r\n            pulse:       '@keyframes pth-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}',\r\n            spin:        '@keyframes pth-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}',\r\n            shake:       '@keyframes pth-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}',\r\n            flip:        '@keyframes pth-flip{0%{transform:perspective(400px) rotateY(0)}100%{transform:perspective(400px) rotateY(360deg)}}',\r\n            zoom:        '@keyframes pth-zoom{from{opacity:0;transform:scale(0.3)}to{opacity:1;transform:scale(1)}}',\r\n            rubberBand:  '@keyframes pth-rubberBand{0%{transform:scale(1)}30%{transform:scaleX(1.25)scaleY(0.75)}40%{transform:scaleX(0.75)scaleY(1.25)}50%{transform:scaleX(1.15)scaleY(0.85)}65%{transform:scaleX(0.95)scaleY(1.05)}75%{transform:scaleX(1.05)scaleY(0.95)}100%{transform:scale(1)}}'\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 INIT \u2500\u2500\u2500 *\/\r\n        init: function () {\r\n            var self = this;\r\n            try { self.buildShadowPresets(); } catch(e) {}\r\n            try { self.buildGradPresets(); } catch(e) {}\r\n            try { self.addShadowLayer(); } catch(e) {}\r\n            try { self.attachEvents(); } catch(e) {}\r\n            try { self.updateShadow(); } catch(e) {}\r\n            try { self.updateGradient(); } catch(e) {}\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 BUILD SHADOW PRESETS \u2500\u2500\u2500 *\/\r\n        buildShadowPresets: function () {\r\n            var self = this;\r\n            var grid = document.getElementById('pth-shadow-presets-grid');\r\n            if (!grid) return;\r\n            var html = '';\r\n            self.shadowPresets.forEach(function (p, i) {\r\n                html += '<div class=\"pth-preset-card\" data-shadow-preset=\"' + i + '\" role=\"button\" tabindex=\"0\" aria-label=\"Apply ' + p.name + ' shadow preset\">';\r\n                html += '<div class=\"pth-preset-mini\" style=\"background:#2563eb;box-shadow:' + p.preview + ';\"><\/div>';\r\n                html += p.name;\r\n                html += '<\/div>';\r\n            });\r\n            grid.innerHTML = html;\r\n            grid.querySelectorAll('.pth-preset-card').forEach(function (card) {\r\n                card.addEventListener('click', function () {\r\n                    var idx = parseInt(this.getAttribute('data-shadow-preset'), 10);\r\n                    self.applyPresetToAllLayers(self.shadowPresets[idx].css);\r\n                });\r\n                card.addEventListener('keydown', function (e) {\r\n                    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); }\r\n                });\r\n            });\r\n        },\r\n\r\n        applyPresetToAllLayers: function (css) {\r\n            this.shadowLayers = [{ css: css }];\r\n            this.renderShadowLayers();\r\n            this.updateShadow();\r\n            this.showToast('Preset applied!', 'success');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 BUILD GRADIENT PRESETS \u2500\u2500\u2500 *\/\r\n        buildGradPresets: function () {\r\n            var self = this;\r\n            var grid = document.getElementById('pth-grad-presets-grid');\r\n            if (!grid) return;\r\n            var html = '';\r\n            self.gradientPresets.forEach(function (p, i) {\r\n                html += '<div class=\"pth-preset-card\" data-grad-preset=\"' + i + '\" role=\"button\" tabindex=\"0\" aria-label=\"Apply ' + p.name + ' gradient preset\">';\r\n                html += '<div class=\"pth-preset-mini\" style=\"background:' + p.css + ';\"><\/div>';\r\n                html += p.name;\r\n                html += '<\/div>';\r\n            });\r\n            grid.innerHTML = html;\r\n            grid.querySelectorAll('.pth-preset-card').forEach(function (card) {\r\n                card.addEventListener('click', function () {\r\n                    var idx = parseInt(this.getAttribute('data-grad-preset'), 10);\r\n                    var p = self.gradientPresets[idx];\r\n                    self.setVal('pth-grad-type', p.type);\r\n                    var c1El = document.getElementById('pth-grad-c1');\r\n                    var c2El = document.getElementById('pth-grad-c2');\r\n                    var c3El = document.getElementById('pth-grad-c3');\r\n                    if (c1El) c1El.value = p.c1;\r\n                    if (c2El) c2El.value = p.c2;\r\n                    if (c3El) c3El.value = p.c3;\r\n                    var angleEl = document.getElementById('pth-grad-angle');\r\n                    if (angleEl) { angleEl.value = p.angle; self.setEl('pth-grad-angle-val', p.angle + '\u00b0'); }\r\n                    self.updateGradient();\r\n                    self.showToast(p.name + ' preset applied!', 'success');\r\n                });\r\n                card.addEventListener('keydown', function (e) {\r\n                    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); }\r\n                });\r\n            });\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 ADD SHADOW LAYER \u2500\u2500\u2500 *\/\r\n        addShadowLayer: function () {\r\n            if (this.shadowLayers.length >= 4) { this.showToast('Maximum 4 shadow layers!', 'error'); return; }\r\n            var defaults = [\r\n                { x:0, y:10, blur:25, spread:-5, color:'#000000', op:0.1, inset:false },\r\n                { x:5, y:5,  blur:15, spread:0,  color:'#000000', op:0.2, inset:false },\r\n                { x:-5,y:10, blur:20, spread:5,  color:'#1d4ed8', op:0.3, inset:false },\r\n                { x:0, y:2,  blur:4,  spread:0,  color:'#000000', op:0.3, inset:true  }\r\n            ];\r\n            var d = defaults[this.shadowLayers.length] || defaults[0];\r\n            this.shadowLayers.push({ x:d.x, y:d.y, blur:d.blur, spread:d.spread, color:d.color, op:d.op, inset:d.inset });\r\n            this.renderShadowLayers();\r\n            this.updateShadow();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 RENDER SHADOW LAYERS \u2500\u2500\u2500 *\/\r\n        renderShadowLayers: function () {\r\n            var self = this;\r\n            var container = document.getElementById('pth-shadow-layers');\r\n            if (!container) return;\r\n            container.innerHTML = '';\r\n\r\n            self.shadowLayers.forEach(function (layer, idx) {\r\n                var isPreset = typeof layer.css !== 'undefined';\r\n                var x = layer.x !== undefined ? layer.x : 0;\r\n                var y = layer.y !== undefined ? layer.y : 10;\r\n                var blur = layer.blur !== undefined ? layer.blur : 20;\r\n                var spread = layer.spread !== undefined ? layer.spread : 0;\r\n                var color = layer.color || '#000000';\r\n                var op = layer.op !== undefined ? layer.op : 0.2;\r\n                var inset = layer.inset || false;\r\n\r\n                if (isPreset) {\r\n                    var el = document.createElement('div');\r\n                    el.className = 'pth-shadow-layer';\r\n                    el.innerHTML = '<div class=\"pth-shadow-layer-hdr\">' +\r\n                        '<span class=\"pth-layer-num\">Layer ' + (idx + 1) + ' \u2014 Preset<\/span>' +\r\n                        '<button class=\"pth-layer-remove\" data-idx=\"' + idx + '\" aria-label=\"Remove layer ' + (idx+1) + '\">\u2716 Remove<\/button>' +\r\n                        '<\/div>' +\r\n                        '<code style=\"font-size:10px;color:#334155;word-break:break-all;\">' + layer.css + '<\/code>';\r\n                    container.appendChild(el);\r\n                } else {\r\n                    var el2 = document.createElement('div');\r\n                    el2.className = 'pth-shadow-layer';\r\n                    el2.innerHTML =\r\n                        '<div class=\"pth-shadow-layer-hdr\">' +\r\n                        '<span class=\"pth-layer-num\">Layer ' + (idx + 1) + '<\/span>' +\r\n                        (idx > 0 ? '<button class=\"pth-layer-remove\" data-idx=\"' + idx + '\" aria-label=\"Remove layer ' + (idx+1) + '\">\u2716 Remove<\/button>' : '') +\r\n                        '<\/div>' +\r\n                        '<div style=\"display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;\">' +\r\n                        self.makeLayerSlider('X', 'shd-x-' + idx, x, -50, 50) +\r\n                        self.makeLayerSlider('Y', 'shd-y-' + idx, y, -50, 50) +\r\n                        self.makeLayerSlider('Blur', 'shd-blur-' + idx, blur, 0, 100) +\r\n                        self.makeLayerSlider('Spread', 'shd-spread-' + idx, spread, -30, 50) +\r\n                        '<\/div>' +\r\n                        '<div style=\"display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap;\">' +\r\n                        '<div><label style=\"font-size:10px;font-weight:700;color:#0f172a;text-transform:uppercase;display:block;margin-bottom:3px;\">Color<\/label>' +\r\n                        '<input type=\"color\" id=\"shd-color-' + idx + '\" value=\"' + color + '\" style=\"width:40px;height:30px;border-radius:5px;border:2px solid #e2e8f0;cursor:pointer;padding:2px;\" aria-label=\"Shadow layer ' + (idx+1) + ' color\"><\/div>' +\r\n                        '<div style=\"flex:1;\"><div style=\"display:flex;justify-content:space-between;margin-bottom:2px;\"><span style=\"font-size:10px;font-weight:700;color:#334155;text-transform:uppercase;\">Opacity<\/span><span style=\"font-size:10px;font-weight:800;color:#1d4ed8;\" id=\"shd-op-val-' + idx + '\">' + op + '<\/span><\/div>' +\r\n                        '<input type=\"range\" id=\"shd-op-' + idx + '\" min=\"0\" max=\"100\" value=\"' + Math.round(op * 100) + '\" style=\"width:100%;accent-color:#2563eb;cursor:pointer;\" aria-label=\"Shadow layer ' + (idx+1) + ' opacity\"><\/div>' +\r\n                        '<label style=\"text-transform:none;font-size:11px;display:flex;align-items:center;gap:4px;cursor:pointer;font-weight:600;color:#334155;\">' +\r\n                        '<input type=\"checkbox\" id=\"shd-inset-' + idx + '\" ' + (inset ? 'checked' : '') + ' style=\"width:12px;height:12px;cursor:pointer;accent-color:#2563eb;\" aria-label=\"Inset shadow layer ' + (idx+1) + '\">' +\r\n                        'Inset<\/label>' +\r\n                        '<\/div>';\r\n                    container.appendChild(el2);\r\n                }\r\n            });\r\n\r\n            \/* Wire events on new elements *\/\r\n            self.shadowLayers.forEach(function (layer, idx) {\r\n                var removeBtn = container.querySelector('[data-idx=\"' + idx + '\"]');\r\n                if (removeBtn) removeBtn.addEventListener('click', function () { self.removeShadowLayer(parseInt(this.getAttribute('data-idx'), 10)); });\r\n\r\n                if (typeof layer.css === 'undefined') {\r\n                    var sliders = ['shd-x-','shd-y-','shd-blur-','shd-spread-','shd-op-'];\r\n                    sliders.forEach(function (pfx) {\r\n                        var el = document.getElementById(pfx + idx);\r\n                        if (el) el.addEventListener('input', function () { self.updateShadow(); });\r\n                    });\r\n                    var colorEl = document.getElementById('shd-color-' + idx);\r\n                    if (colorEl) colorEl.addEventListener('input', function () { self.updateShadow(); });\r\n                    var insetEl = document.getElementById('shd-inset-' + idx);\r\n                    if (insetEl) insetEl.addEventListener('change', function () { self.updateShadow(); });\r\n                }\r\n            });\r\n        },\r\n\r\n        makeLayerSlider: function (label, id, val, min, max) {\r\n            return '<div><div style=\"display:flex;justify-content:space-between;margin-bottom:2px;\">' +\r\n                '<span style=\"font-size:10px;font-weight:700;color:#334155;text-transform:uppercase;\">' + label + '<\/span>' +\r\n                '<span style=\"font-size:10px;font-weight:800;color:#1d4ed8;\" id=\"' + id + '-val\">' + val + 'px<\/span><\/div>' +\r\n                '<input type=\"range\" id=\"' + id + '\" min=\"' + min + '\" max=\"' + max + '\" value=\"' + val + '\" ' +\r\n                'style=\"width:100%;accent-color:#2563eb;cursor:pointer;\" ' +\r\n                'aria-label=\"' + label + '\" aria-valuenow=\"' + val + '\"><\/div>';\r\n        },\r\n\r\n        removeShadowLayer: function (idx) {\r\n            this.shadowLayers.splice(idx, 1);\r\n            this.renderShadowLayers();\r\n            this.updateShadow();\r\n            this.showToast('Layer removed!', 'info');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 ATTACH EVENTS \u2500\u2500\u2500 *\/\r\n        attachEvents: function () {\r\n            var self = this;\r\n\r\n            \/* Full width *\/\r\n            var fwBtn = document.getElementById('pth-vs-fw-btn');\r\n            if (fwBtn) fwBtn.addEventListener('click', function () { self.toggleWidth(); });\r\n\r\n            \/* Sample + Clear *\/\r\n            var sampleBtn = document.getElementById('pth-vs-sample-btn');\r\n            if (sampleBtn) sampleBtn.addEventListener('click', function () { self.loadSample(); });\r\n            var clearBtn = document.getElementById('pth-vs-clear-btn');\r\n            if (clearBtn) clearBtn.addEventListener('click', function () { self.resetAll(); });\r\n\r\n            \/* Tabs *\/\r\n            document.querySelectorAll('#pth-cssvs-wrapper .pth-tab-btn').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.switchTab(this.getAttribute('data-tab')); });\r\n            });\r\n\r\n            \/* Shadow events *\/\r\n            var addShadowBtn = document.getElementById('pth-add-shadow-btn');\r\n            if (addShadowBtn) addShadowBtn.addEventListener('click', function () { self.addShadowLayer(); });\r\n\r\n            \/* Shape toggle *\/\r\n            document.querySelectorAll('#pth-cssvs-wrapper .pth-shape-btn[data-shape]').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.setShape(this.getAttribute('data-shape')); });\r\n            });\r\n\r\n            \/* Shadow bg color *\/\r\n            var shadowBgColor = document.getElementById('pth-shadow-bg-color');\r\n            var shadowBoxColor= document.getElementById('pth-shadow-box-color');\r\n            if (shadowBgColor) shadowBgColor.addEventListener('input', function () { self.updateShadow(); });\r\n            if (shadowBoxColor) shadowBoxColor.addEventListener('input', function () { self.updateShadow(); });\r\n\r\n            \/* Gradient events *\/\r\n            var gradInputs = ['pth-grad-type','pth-grad-c1','pth-grad-c2','pth-grad-c3','pth-grad-p1','pth-grad-p2','pth-grad-p3','pth-grad-angle','pth-grad-text-mode'];\r\n            gradInputs.forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (!el) return;\r\n                var evt = (el.type === 'checkbox') ? 'change' : 'input';\r\n                el.addEventListener(evt, function () { self.updateGradient(); });\r\n            });\r\n            \/* Gradient range labels *\/\r\n            var gradRanges = {\r\n                'pth-grad-angle': 'pth-grad-angle-val', 'pth-grad-p1': 'pth-grad-p1-val',\r\n                'pth-grad-p2': 'pth-grad-p2-val', 'pth-grad-p3': 'pth-grad-p3-val'\r\n            };\r\n            Object.keys(gradRanges).forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (el) el.addEventListener('input', function () {\r\n                    var suffix = id === 'pth-grad-angle' ? '\u00b0' : '%';\r\n                    self.setEl(gradRanges[id], this.value + suffix);\r\n                    this.setAttribute('aria-valuenow', this.value);\r\n                });\r\n            });\r\n\r\n            \/* Typography events *\/\r\n            var typoInputs = ['pth-typo-text','pth-font-size','pth-line-height','pth-letter-spacing',\r\n                'pth-font-weight','pth-font-style','pth-text-transform','pth-text-color','pth-text-bg-color',\r\n                'pth-tsh-x','pth-tsh-y','pth-tsh-b','pth-tsh-color','pth-font-family'];\r\n            typoInputs.forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (!el) return;\r\n                var evt = (el.tagName === 'SELECT' || el.type === 'color') ? 'input' : 'input';\r\n                el.addEventListener(evt, function () { self.updateTypography(); });\r\n            });\r\n            \/* Typography range labels *\/\r\n            var typoRanges = {\r\n                'pth-font-size': { lbl: 'pth-fs-val', sfx: 'px' },\r\n                'pth-letter-spacing': { lbl: 'pth-ls-val', sfx: 'px' },\r\n                'pth-tsh-x': { lbl: 'pth-tsh-x-val', sfx: 'px' },\r\n                'pth-tsh-y': { lbl: 'pth-tsh-y-val', sfx: 'px' },\r\n                'pth-tsh-b': { lbl: 'pth-tsh-b-val', sfx: 'px' }\r\n            };\r\n            Object.keys(typoRanges).forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (el) el.addEventListener('input', function () {\r\n                    self.setEl(typoRanges[id].lbl, this.value + typoRanges[id].sfx);\r\n                    this.setAttribute('aria-valuenow', this.value);\r\n                });\r\n            });\r\n            var lhEl = document.getElementById('pth-line-height');\r\n            if (lhEl) lhEl.addEventListener('input', function () {\r\n                self.setEl('pth-lh-val', (this.value \/ 10).toFixed(1));\r\n                this.setAttribute('aria-valuenow', this.value);\r\n            });\r\n\r\n            \/* Border events *\/\r\n            var borderInputs = ['pth-br-tl','pth-br-tr','pth-br-br','pth-br-bl','pth-border-width',\r\n                'pth-border-style','pth-border-color','pth-outline-width','pth-outline-offset','pth-outline-color'];\r\n            borderInputs.forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (!el) return;\r\n                el.addEventListener('input', function () { self.updateBorder(); });\r\n            });\r\n            \/* Border range labels *\/\r\n            var borderRanges = {\r\n                'pth-br-tl': 'pth-br-tl-val', 'pth-br-tr': 'pth-br-tr-val',\r\n                'pth-br-br': 'pth-br-br-val', 'pth-br-bl': 'pth-br-bl-val',\r\n                'pth-border-width': 'pth-bw-val',\r\n                'pth-outline-width': 'pth-ow-val', 'pth-outline-offset': 'pth-oo-val'\r\n            };\r\n            Object.keys(borderRanges).forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (el) el.addEventListener('input', function () {\r\n                    self.setEl(borderRanges[id], this.value + 'px');\r\n                    this.setAttribute('aria-valuenow', this.value);\r\n                });\r\n            });\r\n\r\n            \/* Clip-path buttons *\/\r\n            document.querySelectorAll('#pth-clip-grid .pth-clip-btn').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.setClip(this.getAttribute('data-clip')); });\r\n            });\r\n\r\n            \/* Transform events *\/\r\n            var tfRanges = {\r\n                'pth-rotate': { lbl: 'pth-rot-val', sfx: '\u00b0' },\r\n                'pth-translate-x': { lbl: 'pth-tx-val', sfx: 'px' },\r\n                'pth-translate-y': { lbl: 'pth-ty-val', sfx: 'px' },\r\n                'pth-skew-x': { lbl: 'pth-sx-val', sfx: '\u00b0' },\r\n                'pth-skew-y': { lbl: 'pth-sy-val', sfx: '\u00b0' },\r\n                'pth-f-blur': { lbl: 'pth-f-blur-val', sfx: 'px' },\r\n                'pth-f-bright': { lbl: 'pth-f-bright-val', sfx: '%' },\r\n                'pth-f-contrast': { lbl: 'pth-f-contrast-val', sfx: '%' },\r\n                'pth-f-sat': { lbl: 'pth-f-sat-val', sfx: '%' },\r\n                'pth-f-hue': { lbl: 'pth-f-hue-val', sfx: '\u00b0' },\r\n                'pth-f-gray': { lbl: 'pth-f-gray-val', sfx: '%' },\r\n                'pth-f-sepia': { lbl: 'pth-f-sepia-val', sfx: '%' },\r\n                'pth-f-invert': { lbl: 'pth-f-invert-val', sfx: '%' },\r\n                'pth-trans-dur': { lbl: 'pth-trans-dur-val', sfx: 'ms' },\r\n                'pth-trans-delay': { lbl: 'pth-trans-delay-val', sfx: 'ms' }\r\n            };\r\n            Object.keys(tfRanges).forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (el) { el.addEventListener('input', function () {\r\n                    self.setEl(tfRanges[id].lbl, this.value + tfRanges[id].sfx);\r\n                    this.setAttribute('aria-valuenow', this.value);\r\n                    self.updateTransform();\r\n                }); }\r\n            });\r\n            var scaleEl = document.getElementById('pth-scale');\r\n            if (scaleEl) scaleEl.addEventListener('input', function () {\r\n                self.setEl('pth-scale-val', (this.value \/ 10).toFixed(1) + '\u00d7');\r\n                this.setAttribute('aria-valuenow', this.value);\r\n                self.updateTransform();\r\n            });\r\n            ['pth-trans-prop','pth-trans-ease'].forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (el) el.addEventListener('change', function () { self.updateTransform(); });\r\n            });\r\n            var resetTfBtn = document.getElementById('pth-reset-transform-btn');\r\n            if (resetTfBtn) resetTfBtn.addEventListener('click', function () { self.resetTransform(); });\r\n\r\n            \/* Snippet type buttons *\/\r\n            document.querySelectorAll('[data-snippet]').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.setSnippet(this.getAttribute('data-snippet')); });\r\n            });\r\n\r\n            \/* Flexbox events *\/\r\n            ['pth-flex-direction','pth-flex-wrap','pth-justify-content','pth-align-items','pth-flex-gap'].forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (el) el.addEventListener('input', function () { self.updateSnippet(); });\r\n                if (el && el.tagName === 'SELECT') el.addEventListener('change', function () { self.updateSnippet(); });\r\n            });\r\n            var fgEl = document.getElementById('pth-flex-gap');\r\n            if (fgEl) fgEl.addEventListener('input', function () {\r\n                self.setEl('pth-flex-gap-val', this.value + 'px');\r\n                this.setAttribute('aria-valuenow', this.value);\r\n            });\r\n\r\n            \/* Grid events *\/\r\n            ['pth-grid-cols','pth-grid-rows','pth-grid-gap','pth-grid-template'].forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (!el) return;\r\n                el.addEventListener('input', function () {\r\n                    if (id === 'pth-grid-cols') self.setEl('pth-grid-cols-val', this.value);\r\n                    if (id === 'pth-grid-rows') self.setEl('pth-grid-rows-val', this.value);\r\n                    if (id === 'pth-grid-gap')  self.setEl('pth-grid-gap-val',  this.value + 'px');\r\n                    this.setAttribute('aria-valuenow', this.value);\r\n                    self.updateSnippet();\r\n                });\r\n                if (el.tagName === 'SELECT') el.addEventListener('change', function () { self.updateSnippet(); });\r\n            });\r\n\r\n            \/* Animation events *\/\r\n            var animType = document.getElementById('pth-anim-type');\r\n            var animIter = document.getElementById('pth-anim-iter');\r\n            var animDur  = document.getElementById('pth-anim-dur');\r\n            if (animType) animType.addEventListener('change', function () { self.updateSnippet(); });\r\n            if (animIter) animIter.addEventListener('change', function () { self.updateSnippet(); });\r\n            if (animDur)  animDur.addEventListener('input',  function () {\r\n                self.setEl('pth-anim-dur-val', (this.value \/ 10).toFixed(1) + 's');\r\n                this.setAttribute('aria-valuenow', this.value);\r\n                self.updateSnippet();\r\n            });\r\n            var playBtn = document.getElementById('pth-play-anim-btn');\r\n            if (playBtn) playBtn.addEventListener('click', function () { self.playAnimation(); });\r\n\r\n            \/* Glass events *\/\r\n            ['pth-glass-blur','pth-glass-op','pth-glass-bg-color','pth-glass-border-color'].forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (!el) return;\r\n                el.addEventListener('input', function () {\r\n                    if (id === 'pth-glass-blur') self.setEl('pth-glass-blur-val', this.value + 'px');\r\n                    if (id === 'pth-glass-op')   self.setEl('pth-glass-op-val',   this.value + '%');\r\n                    this.setAttribute('aria-valuenow', this.value);\r\n                    self.updateSnippet();\r\n                });\r\n            });\r\n            document.querySelectorAll('[data-glass-bg]').forEach(function (btn) {\r\n                btn.addEventListener('click', function () {\r\n                    self.glassSceneBg = this.getAttribute('data-glass-bg');\r\n                    self.updateSnippet();\r\n                });\r\n            });\r\n\r\n            \/* Stage background buttons *\/\r\n            document.querySelectorAll('[data-stage-bg]').forEach(function (btn) {\r\n                btn.addEventListener('click', function () {\r\n                    var stage = document.getElementById('pth-preview-stage');\r\n                    if (stage) stage.style.background = this.getAttribute('data-stage-bg');\r\n                });\r\n            });\r\n\r\n            \/* Image upload *\/\r\n            var imgFile = document.getElementById('pth-preview-img-file');\r\n            if (imgFile) imgFile.addEventListener('change', function () {\r\n                if (!this.files[0]) return;\r\n                var reader = new FileReader();\r\n                var stage  = document.getElementById('pth-preview-stage');\r\n                var clearImgBtn = document.getElementById('pth-clear-img-btn');\r\n                reader.onload = function (e) {\r\n                    if (stage) { stage.style.background = 'url(' + e.target.result + ') center\/cover'; }\r\n                    if (clearImgBtn) clearImgBtn.style.display = 'block';\r\n                };\r\n                reader.readAsDataURL(this.files[0]);\r\n            });\r\n            var clearImgBtn = document.getElementById('pth-clear-img-btn');\r\n            if (clearImgBtn) clearImgBtn.addEventListener('click', function () {\r\n                var stage = document.getElementById('pth-preview-stage');\r\n                if (stage) stage.style.background = '#f1f5f9';\r\n                this.style.display = 'none';\r\n            });\r\n\r\n            \/* Copy CSS *\/\r\n            var copyBtn = document.getElementById('pth-copy-css-btn');\r\n            if (copyBtn) copyBtn.addEventListener('click', function () { self.copyCss(); });\r\n            var resetCssBtn = document.getElementById('pth-reset-css-btn');\r\n            if (resetCssBtn) resetCssBtn.addEventListener('click', function () {\r\n                var el = document.getElementById('pth-css-out');\r\n                if (el) el.textContent = '\/* Select a tab and adjust controls to generate CSS *\/';\r\n                self.showToast('Reset!', 'info');\r\n            });\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SWITCH TAB \u2500\u2500\u2500 *\/\r\n        switchTab: function (tab) {\r\n            var self = this;\r\n            self.currentTab = tab;\r\n            var tabs = ['shadow','gradient','typography','border','transform','snippets'];\r\n            tabs.forEach(function (t) {\r\n                var panel = document.getElementById('pth-tab-' + t);\r\n                var btn   = document.querySelector('[data-tab=\"' + t + '\"]');\r\n                if (panel) panel.style.display = (t === tab) ? 'block' : 'none';\r\n                if (btn)   { btn.classList.toggle('pth-active', t === tab); btn.setAttribute('aria-selected', t === tab ? 'true' : 'false'); }\r\n            });\r\n\r\n            \/* Show correct preview element *\/\r\n            var box = document.getElementById('pth-preview-box');\r\n            var txt = document.getElementById('pth-preview-text-el');\r\n            var flex= document.getElementById('pth-preview-flex-el');\r\n            var grid= document.getElementById('pth-preview-grid-el');\r\n            var glass=document.getElementById('pth-preview-glass');\r\n\r\n            [box,txt,flex,grid,glass].forEach(function (el) { if (el) el.style.display = 'none'; });\r\n            if (tab === 'typography') { if (txt) txt.style.display = 'block'; }\r\n            else if (tab === 'snippets' && self.currentSnippet === 'flexbox') { if (flex) flex.style.display = 'flex'; }\r\n            else if (tab === 'snippets' && self.currentSnippet === 'grid') { if (grid) grid.style.display = 'grid'; }\r\n            else if (tab === 'snippets' && self.currentSnippet === 'glass') { if (glass) glass.style.display = 'flex'; }\r\n            else { if (box) box.style.display = 'flex'; }\r\n\r\n            \/* Trigger update for active tab *\/\r\n            try {\r\n                if (tab === 'shadow')     self.updateShadow();\r\n                if (tab === 'gradient')   self.updateGradient();\r\n                if (tab === 'typography') self.updateTypography();\r\n                if (tab === 'border')     self.updateBorder();\r\n                if (tab === 'transform')  self.updateTransform();\r\n                if (tab === 'snippets')   self.updateSnippet();\r\n            } catch(e) {}\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SET SHAPE \u2500\u2500\u2500 *\/\r\n        setShape: function (shape) {\r\n            this.currentShape = shape;\r\n            document.querySelectorAll('[data-shape]').forEach(function (btn) {\r\n                btn.classList.toggle('pth-active', btn.getAttribute('data-shape') === shape);\r\n                btn.setAttribute('aria-pressed', btn.getAttribute('data-shape') === shape ? 'true' : 'false');\r\n            });\r\n            var box = document.getElementById('pth-preview-box');\r\n            if (!box) return;\r\n            if (shape === 'circle') { box.style.borderRadius = '50%'; box.style.width = '120px'; box.style.height = '120px'; }\r\n            else if (shape === 'pill') { box.style.borderRadius = '60px'; box.style.width = '180px'; box.style.height = '70px'; }\r\n            else if (shape === 'card') { box.style.borderRadius = '12px'; box.style.width = '200px'; box.style.height = '120px'; }\r\n            else { box.style.borderRadius = '12px'; box.style.width = '120px'; box.style.height = '120px'; }\r\n            this.updateShadow();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SET CLIP \u2500\u2500\u2500 *\/\r\n        setClip: function (clip) {\r\n            this.currentClip = clip;\r\n            document.querySelectorAll('[data-clip]').forEach(function (btn) {\r\n                btn.classList.toggle('pth-active', btn.getAttribute('data-clip') === clip);\r\n                btn.setAttribute('aria-pressed', btn.getAttribute('data-clip') === clip ? 'true' : 'false');\r\n            });\r\n            this.updateBorder();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SET SNIPPET TYPE \u2500\u2500\u2500 *\/\r\n        setSnippet: function (type) {\r\n            var self = this;\r\n            self.currentSnippet = type;\r\n            document.querySelectorAll('[data-snippet]').forEach(function (btn) {\r\n                btn.classList.toggle('pth-active', btn.getAttribute('data-snippet') === type);\r\n                btn.setAttribute('aria-pressed', btn.getAttribute('data-snippet') === type ? 'true' : 'false');\r\n            });\r\n            ['pth-snip-flexbox','pth-snip-grid','pth-snip-animation','pth-snip-glass'].forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (el) el.style.display = (id === 'pth-snip-' + type) ? 'block' : 'none';\r\n            });\r\n\r\n            var box  = document.getElementById('pth-preview-box');\r\n            var flex = document.getElementById('pth-preview-flex-el');\r\n            var grid = document.getElementById('pth-preview-grid-el');\r\n            var glass= document.getElementById('pth-preview-glass');\r\n            [box,flex,grid,glass].forEach(function (el) { if (el) el.style.display = 'none'; });\r\n            if (type === 'flexbox') { if (flex) flex.style.display = 'flex'; }\r\n            else if (type === 'grid') { if (grid) grid.style.display = 'grid'; }\r\n            else if (type === 'glass') { if (glass) glass.style.display = 'flex'; }\r\n            else { if (box) box.style.display = 'flex'; }\r\n\r\n            self.updateSnippet();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 UPDATE SHADOW \u2500\u2500\u2500 *\/\r\n        updateShadow: function () {\r\n            var self = this;\r\n            var shadows = [];\r\n\r\n            self.shadowLayers.forEach(function (layer, idx) {\r\n                if (typeof layer.css !== 'undefined') {\r\n                    shadows.push(layer.css);\r\n                    return;\r\n                }\r\n                var xEl     = document.getElementById('shd-x-' + idx);\r\n                var yEl     = document.getElementById('shd-y-' + idx);\r\n                var blurEl  = document.getElementById('shd-blur-' + idx);\r\n                var spreadEl= document.getElementById('shd-spread-' + idx);\r\n                var colorEl = document.getElementById('shd-color-' + idx);\r\n                var opEl    = document.getElementById('shd-op-' + idx);\r\n                var insetEl = document.getElementById('shd-inset-' + idx);\r\n                var opValEl = document.getElementById('shd-op-val-' + idx);\r\n\r\n                if (!xEl) return;\r\n                var x = xEl.value, y = yEl.value, blur = blurEl.value;\r\n                var spread = spreadEl.value, color = colorEl.value;\r\n                var op = (opEl.value \/ 100).toFixed(2);\r\n                var inset = insetEl && insetEl.checked ? 'inset ' : '';\r\n\r\n                \/* Update range val labels *\/\r\n                var setV = function (id, v) { var e = document.getElementById(id); if (e) e.textContent = v + 'px'; };\r\n                setV('shd-x-' + idx + '-val', x);\r\n                setV('shd-y-' + idx + '-val', y);\r\n                setV('shd-blur-' + idx + '-val', blur);\r\n                setV('shd-spread-' + idx + '-val', spread);\r\n                if (opValEl) opValEl.textContent = op;\r\n\r\n                var rgba = self.hexToRgba(color, op);\r\n                shadows.push(inset + x + 'px ' + y + 'px ' + blur + 'px ' + spread + 'px ' + rgba);\r\n            });\r\n\r\n            var shadowStr = shadows.join(', ') || 'none';\r\n            var box = document.getElementById('pth-preview-box');\r\n            var bgEl  = document.getElementById('pth-shadow-bg-color');\r\n            var boxEl = document.getElementById('pth-shadow-box-color');\r\n            var stage = document.getElementById('pth-preview-stage');\r\n\r\n            if (box)   box.style.boxShadow = shadowStr;\r\n            if (boxEl) box.style.backgroundColor = boxEl.value;\r\n            if (stage && bgEl) stage.style.background = bgEl.value;\r\n\r\n            var css = '\/* Box Shadow *\/\\nbox-shadow: ' + shadowStr + ';\\n-webkit-box-shadow: ' + shadowStr + ';';\r\n            self.setCssOut(css);\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 UPDATE GRADIENT \u2500\u2500\u2500 *\/\r\n        updateGradient: function () {\r\n            var self = this;\r\n            var type  = self.getVal('pth-grad-type') || 'linear';\r\n            var c1    = (document.getElementById('pth-grad-c1') || {}).value || '#2563eb';\r\n            var c2    = (document.getElementById('pth-grad-c2') || {}).value || '#7c3aed';\r\n            var c3    = (document.getElementById('pth-grad-c3') || {}).value || '#ec4899';\r\n            var p1    = self.getVal('pth-grad-p1') || '0';\r\n            var p2    = self.getVal('pth-grad-p2') || '50';\r\n            var p3    = self.getVal('pth-grad-p3') || '100';\r\n            var angle = self.getVal('pth-grad-angle') || '135';\r\n            var textMode = document.getElementById('pth-grad-text-mode');\r\n            var isText = textMode && textMode.checked;\r\n\r\n            \/* Show\/hide angle control *\/\r\n            var angleGroup = document.getElementById('pth-grad-angle-group');\r\n            if (angleGroup) angleGroup.style.display = (type === 'radial') ? 'none' : 'block';\r\n\r\n            var gradStr;\r\n            if (type === 'linear') {\r\n                gradStr = 'linear-gradient(' + angle + 'deg, ' + c1 + ' ' + p1 + '%, ' + c2 + ' ' + p2 + '%, ' + c3 + ' ' + p3 + '%)';\r\n            } else if (type === 'radial') {\r\n                gradStr = 'radial-gradient(circle, ' + c1 + ' ' + p1 + '%, ' + c2 + ' ' + p2 + '%, ' + c3 + ' ' + p3 + '%)';\r\n            } else {\r\n                gradStr = 'conic-gradient(from ' + angle + 'deg, ' + c1 + ' ' + p1 + '%, ' + c2 + ' ' + p2 + '%, ' + c3 + ' ' + p3 + '%)';\r\n            }\r\n\r\n            var box = document.getElementById('pth-preview-box');\r\n            if (box) {\r\n                if (isText) {\r\n                    box.style.background = 'transparent';\r\n                    box.style.webkitBackgroundClip = '';\r\n                    box.style.backgroundClip = '';\r\n                    box.style.webkitTextFillColor = '';\r\n                    box.textContent = 'Gradient Text';\r\n                    box.style.fontSize = '14px';\r\n                    box.style.background = gradStr;\r\n                    box.style.webkitBackgroundClip = 'text';\r\n                    box.style.backgroundClip = 'text';\r\n                    box.style.webkitTextFillColor = 'transparent';\r\n                } else {\r\n                    box.style.background = gradStr;\r\n                    box.style.webkitBackgroundClip = '';\r\n                    box.style.backgroundClip = '';\r\n                    box.style.webkitTextFillColor = '';\r\n                    box.textContent = 'Preview';\r\n                    box.style.fontSize = '';\r\n                }\r\n            }\r\n\r\n            var css;\r\n            if (isText) {\r\n                css = '\/* Gradient Text *\/\\n.element {\\n  background: ' + c1 + '; \/* fallback *\/\\n  background: ' + gradStr + ';\\n  -webkit-background-clip: text;\\n  background-clip: text;\\n  -webkit-text-fill-color: transparent;\\n  color: transparent;\\n}';\r\n            } else {\r\n                css = '\/* Background Gradient *\/\\n.element {\\n  background: ' + c1 + '; \/* fallback *\/\\n  background: ' + gradStr + ';\\n}';\r\n            }\r\n            self.setCssOut(css);\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 UPDATE TYPOGRAPHY \u2500\u2500\u2500 *\/\r\n        updateTypography: function () {\r\n            var self = this;\r\n            var txt   = self.getVal('pth-typo-text') || 'Sample Text';\r\n            var size  = self.getVal('pth-font-size') || '32';\r\n            var lh    = (parseInt(self.getVal('pth-line-height') || '14', 10) \/ 10).toFixed(1);\r\n            var ls    = self.getVal('pth-letter-spacing') || '0';\r\n            var fw    = self.getVal('pth-font-weight') || '700';\r\n            var fs    = self.getVal('pth-font-style') || 'normal';\r\n            var tt    = self.getVal('pth-text-transform') || 'none';\r\n            var tc    = (document.getElementById('pth-text-color') || {}).value || '#0f172a';\r\n            var tbc   = (document.getElementById('pth-text-bg-color') || {}).value || '#f1f5f9';\r\n            var tshX  = self.getVal('pth-tsh-x') || '0';\r\n            var tshY  = self.getVal('pth-tsh-y') || '0';\r\n            var tshB  = self.getVal('pth-tsh-b') || '0';\r\n            var tshC  = (document.getElementById('pth-tsh-color') || {}).value || '#1d4ed8';\r\n            var ff    = self.getVal('pth-font-family') || '';\r\n\r\n            self.setEl('pth-fs-val', size + 'px');\r\n            self.setEl('pth-lh-val', lh);\r\n            self.setEl('pth-ls-val', ls + 'px');\r\n            self.setEl('pth-tsh-x-val', tshX + 'px');\r\n            self.setEl('pth-tsh-y-val', tshY + 'px');\r\n            self.setEl('pth-tsh-b-val', tshB + 'px');\r\n\r\n            var stage = document.getElementById('pth-preview-stage');\r\n            var textEl= document.getElementById('pth-preview-text-el');\r\n            if (stage) stage.style.background = tbc;\r\n            if (textEl) {\r\n                textEl.style.display = 'block';\r\n                textEl.textContent = txt;\r\n                textEl.style.fontSize = size + 'px';\r\n                textEl.style.lineHeight = lh;\r\n                textEl.style.letterSpacing = ls + 'px';\r\n                textEl.style.fontWeight = fw;\r\n                textEl.style.fontStyle = fs;\r\n                textEl.style.textTransform = tt;\r\n                textEl.style.color = tc;\r\n                textEl.style.textShadow = tshX + 'px ' + tshY + 'px ' + tshB + 'px ' + tshC;\r\n                if (ff) { textEl.style.fontFamily = \"'\" + ff + \"', sans-serif\"; }\r\n                else    { textEl.style.fontFamily = ''; }\r\n            }\r\n\r\n            var textShadow = (parseInt(tshX,10) !== 0 || parseInt(tshY,10) !== 0 || parseInt(tshB,10) !== 0)\r\n                ? '\\n  text-shadow: ' + tshX + 'px ' + tshY + 'px ' + tshB + 'px ' + tshC + ';' : '';\r\n            var fontImport = ff ? \"@import url('https:\/\/fonts.googleapis.com\/css2?family=\" + ff.replace(\/ \/g,'+') + \":wght@' + fw + '&display=swap');\\n\\n\" : '';\r\n            var css = fontImport + '\/* Typography *\/\\n.element {\\n' +\r\n                '  font-size: ' + size + 'px;\\n' +\r\n                '  font-weight: ' + fw + ';\\n' +\r\n                '  font-style: ' + fs + ';\\n' +\r\n                '  line-height: ' + lh + ';\\n' +\r\n                '  letter-spacing: ' + ls + 'px;\\n' +\r\n                '  text-transform: ' + tt + ';\\n' +\r\n                '  color: ' + tc + ';' + textShadow + '\\n' +\r\n                (ff ? '  font-family: \\'' + ff + '\\', sans-serif;\\n' : '') +\r\n                '}';\r\n            self.setCssOut(css);\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 UPDATE BORDER \u2500\u2500\u2500 *\/\r\n        updateBorder: function () {\r\n            var self = this;\r\n            var tl = self.getVal('pth-br-tl') || '12';\r\n            var tr = self.getVal('pth-br-tr') || '12';\r\n            var br = self.getVal('pth-br-br') || '12';\r\n            var bl = self.getVal('pth-br-bl') || '12';\r\n            var bw = self.getVal('pth-border-width') || '2';\r\n            var bs = self.getVal('pth-border-style') || 'solid';\r\n            var bc = (document.getElementById('pth-border-color') || {}).value || '#2563eb';\r\n            var ow = self.getVal('pth-outline-width') || '0';\r\n            var oo = self.getVal('pth-outline-offset') || '0';\r\n            var oc = (document.getElementById('pth-outline-color') || {}).value || '#f59e0b';\r\n            var clip = self.clipPaths[self.currentClip] || 'none';\r\n\r\n            var box = document.getElementById('pth-preview-box');\r\n            if (box) {\r\n                box.style.borderRadius = tl + 'px ' + tr + 'px ' + br + 'px ' + bl + 'px';\r\n                box.style.border = bw + 'px ' + bs + ' ' + bc;\r\n                box.style.outline = ow > 0 ? ow + 'px solid ' + oc : 'none';\r\n                box.style.outlineOffset = oo + 'px';\r\n                box.style.clipPath = clip;\r\n            }\r\n\r\n            var borderLine = parseInt(bw, 10) > 0 ? '  border: ' + bw + 'px ' + bs + ' ' + bc + ';\\n' : '  border: none;\\n';\r\n            var outlineLine = parseInt(ow, 10) > 0 ? '  outline: ' + ow + 'px solid ' + oc + ';\\n  outline-offset: ' + oo + 'px;\\n' : '';\r\n            var clipLine = clip !== 'none' ? '  clip-path: ' + clip + ';\\n' : '';\r\n\r\n            var css = '\/* Border & Shape *\/\\n.element {\\n' +\r\n                '  border-radius: ' + tl + 'px ' + tr + 'px ' + br + 'px ' + bl + 'px;\\n' +\r\n                borderLine + outlineLine + clipLine + '}';\r\n            self.setCssOut(css);\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 UPDATE TRANSFORM \u2500\u2500\u2500 *\/\r\n        updateTransform: function () {\r\n            var self = this;\r\n            var rotate = self.getVal('pth-rotate') || '0';\r\n            var scale  = (parseInt(self.getVal('pth-scale') || '10', 10) \/ 10).toFixed(1);\r\n            var tx     = self.getVal('pth-translate-x') || '0';\r\n            var ty     = self.getVal('pth-translate-y') || '0';\r\n            var sx     = self.getVal('pth-skew-x') || '0';\r\n            var sy     = self.getVal('pth-skew-y') || '0';\r\n            var blur   = self.getVal('pth-f-blur') || '0';\r\n            var bright = self.getVal('pth-f-bright') || '100';\r\n            var cont   = self.getVal('pth-f-contrast') || '100';\r\n            var sat    = self.getVal('pth-f-sat') || '100';\r\n            var hue    = self.getVal('pth-f-hue') || '0';\r\n            var gray   = self.getVal('pth-f-gray') || '0';\r\n            var sepia  = self.getVal('pth-f-sepia') || '0';\r\n            var invert = self.getVal('pth-f-invert') || '0';\r\n            var tProp  = self.getVal('pth-trans-prop') || 'all';\r\n            var tDur   = self.getVal('pth-trans-dur') || '300';\r\n            var tDelay = self.getVal('pth-trans-delay') || '0';\r\n            var tEase  = self.getVal('pth-trans-ease') || 'ease';\r\n\r\n            var transforms = [];\r\n            if (rotate !== '0') transforms.push('rotate(' + rotate + 'deg)');\r\n            if (scale !== '1.0')  transforms.push('scale(' + scale + ')');\r\n            if (tx !== '0' || ty !== '0') transforms.push('translate(' + tx + 'px,' + ty + 'px)');\r\n            if (sx !== '0' || sy !== '0') transforms.push('skew(' + sx + 'deg,' + sy + 'deg)');\r\n            var transformStr = transforms.length ? transforms.join(' ') : 'none';\r\n\r\n            var filters = [];\r\n            if (blur !== '0')   filters.push('blur(' + blur + 'px)');\r\n            if (bright !== '100') filters.push('brightness(' + bright + '%)');\r\n            if (cont !== '100') filters.push('contrast(' + cont + '%)');\r\n            if (sat !== '100')  filters.push('saturate(' + sat + '%)');\r\n            if (hue !== '0')    filters.push('hue-rotate(' + hue + 'deg)');\r\n            if (gray !== '0')   filters.push('grayscale(' + gray + '%)');\r\n            if (sepia !== '0')  filters.push('sepia(' + sepia + '%)');\r\n            if (invert !== '0') filters.push('invert(' + invert + '%)');\r\n            var filterStr = filters.length ? filters.join(' ') : 'none';\r\n\r\n            var box = document.getElementById('pth-preview-box');\r\n            if (box) {\r\n                box.style.transform = transformStr;\r\n                box.style.filter    = filterStr;\r\n            }\r\n\r\n            var transitionStr = tProp + ' ' + tDur + 'ms ' + tEase + ' ' + tDelay + 'ms';\r\n            var css = '\/* Transform & Filter *\/\\n.element {\\n' +\r\n                '  transform: ' + transformStr + ';\\n' +\r\n                '  filter: ' + filterStr + ';\\n' +\r\n                '  transition: ' + transitionStr + ';\\n}';\r\n            self.setCssOut(css);\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 RESET TRANSFORM \u2500\u2500\u2500 *\/\r\n        resetTransform: function () {\r\n            var ids = ['pth-rotate','pth-translate-x','pth-translate-y','pth-skew-x','pth-skew-y',\r\n                'pth-f-blur','pth-f-gray','pth-f-sepia','pth-f-invert','pth-f-hue'];\r\n            ids.forEach(function (id) { var el = document.getElementById(id); if (el) { el.value = 0; el.setAttribute('aria-valuenow', 0); } });\r\n            var scaleEl = document.getElementById('pth-scale'); if (scaleEl) { scaleEl.value = 10; scaleEl.setAttribute('aria-valuenow', 10); }\r\n            var brightEl = document.getElementById('pth-f-bright'); if (brightEl) { brightEl.value = 100; brightEl.setAttribute('aria-valuenow', 100); }\r\n            var contEl = document.getElementById('pth-f-contrast'); if (contEl) { contEl.value = 100; contEl.setAttribute('aria-valuenow', 100); }\r\n            var satEl = document.getElementById('pth-f-sat'); if (satEl) { satEl.value = 100; satEl.setAttribute('aria-valuenow', 100); }\r\n            \/* Reset labels *\/\r\n            var lblMap = { 'pth-rot-val':'0\u00b0','pth-scale-val':'1.0\u00d7','pth-tx-val':'0px','pth-ty-val':'0px',\r\n                'pth-sx-val':'0\u00b0','pth-sy-val':'0\u00b0','pth-f-blur-val':'0px','pth-f-bright-val':'100%',\r\n                'pth-f-contrast-val':'100%','pth-f-sat-val':'100%','pth-f-hue-val':'0\u00b0',\r\n                'pth-f-gray-val':'0%','pth-f-sepia-val':'0%','pth-f-invert-val':'0%' };\r\n            Object.keys(lblMap).forEach(function (id) { var el = document.getElementById(id); if (el) el.textContent = lblMap[id]; });\r\n            var box = document.getElementById('pth-preview-box');\r\n            if (box) { box.style.transform = 'none'; box.style.filter = 'none'; }\r\n            this.updateTransform();\r\n            this.showToast('Transforms reset!', 'info');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 UPDATE SNIPPET \u2500\u2500\u2500 *\/\r\n        updateSnippet: function () {\r\n            var self = this;\r\n            var type = self.currentSnippet;\r\n\r\n            if (type === 'flexbox') {\r\n                var dir  = self.getVal('pth-flex-direction') || 'row';\r\n                var wrap = self.getVal('pth-flex-wrap') || 'nowrap';\r\n                var jc   = self.getVal('pth-justify-content') || 'flex-start';\r\n                var ai   = self.getVal('pth-align-items') || 'stretch';\r\n                var gap  = self.getVal('pth-flex-gap') || '12';\r\n\r\n                var flex = document.getElementById('pth-preview-flex-el');\r\n                if (flex) {\r\n                    flex.style.cssText = 'display:flex;width:100%;min-height:120px;flex-direction:' + dir + ';flex-wrap:' + wrap + ';justify-content:' + jc + ';align-items:' + ai + ';gap:' + gap + 'px;';\r\n                    flex.innerHTML = [1,2,3,4].map(function (n) {\r\n                        return '<div class=\"pth-flex-child pth-flex-item-' + n + '\">' + n + '<\/div>';\r\n                    }).join('');\r\n                }\r\n\r\n                var css = '\/* Flexbox Layout *\/\\n.container {\\n  display: flex;\\n  flex-direction: ' + dir + ';\\n  flex-wrap: ' + wrap + ';\\n  justify-content: ' + jc + ';\\n  align-items: ' + ai + ';\\n  gap: ' + gap + 'px;\\n}\\n\\n.item {\\n  \/* flex child styles *\/\\n  flex: 1;\\n}';\r\n                self.setCssOut(css);\r\n\r\n            } else if (type === 'grid') {\r\n                var cols = self.getVal('pth-grid-cols') || '3';\r\n                var rows = self.getVal('pth-grid-rows') || '2';\r\n                var gap2 = self.getVal('pth-grid-gap') || '12';\r\n                var tmpl = self.getVal('pth-grid-template') || 'repeat';\r\n                var templateStr = tmpl === 'auto'  ? 'repeat(auto-fit, minmax(200px, 1fr))' :\r\n                                  tmpl === 'fixed' ? 'repeat(' + cols + ', 200px)' :\r\n                                  'repeat(' + cols + ', 1fr)';\r\n\r\n                var gridEl = document.getElementById('pth-preview-grid-el');\r\n                if (gridEl) {\r\n                    gridEl.style.cssText = 'display:grid;width:100%;grid-template-columns:repeat(' + cols + ',1fr);gap:' + gap2 + 'px;';\r\n                    var count = parseInt(cols, 10) * parseInt(rows, 10);\r\n                    var items = '';\r\n                    for (var i = 1; i <= count; i++) {\r\n                        items += '<div class=\"pth-grid-child pth-flex-item-' + ((i-1)%5+1) + '\">' + i + '<\/div>';\r\n                    }\r\n                    gridEl.innerHTML = items;\r\n                }\r\n\r\n                var css2 = '\/* CSS Grid Layout *\/\\n.container {\\n  display: grid;\\n  grid-template-columns: ' + templateStr + ';\\n  grid-template-rows: repeat(' + rows + ', auto);\\n  gap: ' + gap2 + 'px;\\n}\\n\\n\/* Place specific items *\/\\n.item-span-2 { grid-column: span 2; }';\r\n                self.setCssOut(css2);\r\n\r\n            } else if (type === 'animation') {\r\n                var animType = self.getVal('pth-anim-type') || 'fadeIn';\r\n                var dur  = (parseInt(self.getVal('pth-anim-dur') || '6', 10) \/ 10).toFixed(1);\r\n                var iter = self.getVal('pth-anim-iter') || '1';\r\n                var keyframe = self.animations[animType] || self.animations.fadeIn;\r\n                var css3 = keyframe + '\\n\\n\/* Apply animation *\/\\n.element {\\n  animation: pth-' + animType + ' ' + dur + 's ease ' + iter + ';\\n}';\r\n                self.setCssOut(css3);\r\n\r\n            } else if (type === 'glass') {\r\n                var gBlur = self.getVal('pth-glass-blur') || '10';\r\n                var gOp   = (parseInt(self.getVal('pth-glass-op') || '15', 10) \/ 100).toFixed(2);\r\n                var gBg   = (document.getElementById('pth-glass-bg-color') || {}).value || '#ffffff';\r\n                var gBc   = (document.getElementById('pth-glass-border-color') || {}).value || '#ffffff';\r\n\r\n                var rgbObj = self.hexToRgbObj(gBg);\r\n                var glassEl = document.getElementById('pth-preview-glass');\r\n                var stage   = document.getElementById('pth-preview-stage');\r\n                if (stage)   stage.style.background = self.glassSceneBg;\r\n                if (glassEl) {\r\n                    glassEl.style.display = 'flex';\r\n                    glassEl.style.cssText = 'display:flex;align-items:center;justify-content:center;width:200px;height:120px;border-radius:12px;padding:16px;font-size:12px;font-weight:700;color:#fff;text-align:center;' +\r\n                        'background: rgba(' + rgbObj.r + ',' + rgbObj.g + ',' + rgbObj.b + ',' + gOp + ');' +\r\n                        'backdrop-filter: blur(' + gBlur + 'px);-webkit-backdrop-filter: blur(' + gBlur + 'px);' +\r\n                        'border: 1px solid rgba(' + self.hexToRgbObj(gBc).r + ',' + self.hexToRgbObj(gBc).g + ',' + self.hexToRgbObj(gBc).b + ',0.3);' +\r\n                        'box-shadow: 0 8px 32px rgba(0,0,0,0.1);';\r\n                    glassEl.textContent = '\u2728 Glass Card';\r\n                }\r\n\r\n                var css4 = '\/* Glassmorphism Effect *\/\\n.glass-card {\\n' +\r\n                    '  background: rgba(' + rgbObj.r + ',' + rgbObj.g + ',' + rgbObj.b + ',' + gOp + ');\\n' +\r\n                    '  backdrop-filter: blur(' + gBlur + 'px);\\n' +\r\n                    '  -webkit-backdrop-filter: blur(' + gBlur + 'px);\\n' +\r\n                    '  border: 1px solid rgba(255,255,255,0.3);\\n' +\r\n                    '  border-radius: 12px;\\n' +\r\n                    '  box-shadow: 0 8px 32px rgba(0,0,0,0.1);\\n}\\n\\n\/* Container needs a background image or gradient *\/\\n.scene {\\n  background: ' + self.glassSceneBg + ';\\n}';\r\n                self.setCssOut(css4);\r\n            }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 PLAY ANIMATION \u2500\u2500\u2500 *\/\r\n        playAnimation: function () {\r\n            var self = this;\r\n            var box = document.getElementById('pth-anim-preview-box');\r\n            if (!box) return;\r\n            var animType = self.getVal('pth-anim-type') || 'fadeIn';\r\n            var dur = (parseInt(self.getVal('pth-anim-dur') || '6', 10) \/ 10).toFixed(1);\r\n\r\n            \/* Inject keyframe *\/\r\n            var styleId = 'pth-anim-keyframe-style';\r\n            var existing = document.getElementById(styleId);\r\n            if (existing) existing.remove();\r\n            var style = document.createElement('style');\r\n            style.id = styleId;\r\n            style.textContent = self.animations[animType] || self.animations.fadeIn;\r\n            document.head.appendChild(style);\r\n\r\n            box.style.animation = 'none';\r\n            setTimeout(function () {\r\n                box.style.animation = 'pth-' + animType + ' ' + dur + 's ease forwards';\r\n            }, 50);\r\n            self.showToast('Playing ' + animType + ' animation!', 'info');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 CSS OUTPUT \u2500\u2500\u2500 *\/\r\n        setCssOut: function (css) {\r\n            var el = document.getElementById('pth-css-out');\r\n            if (el) el.textContent = css;\r\n            this.saveRecent(css);\r\n        },\r\n\r\n        saveRecent: function (css) {\r\n            var self = this;\r\n            if (!css || css.length < 10) return;\r\n            var short = css.split('\\n')[0];\r\n            self.recentOutputs.unshift(short);\r\n            if (self.recentOutputs.length > 5) self.recentOutputs.pop();\r\n            var container = document.getElementById('pth-recent-outputs');\r\n            if (!container) return;\r\n            container.innerHTML = self.recentOutputs.map(function (r) {\r\n                return '<div style=\"font-size:10px;font-family:\\'Courier New\\',monospace;color:#5b21b6;background:#faf5ff;padding:4px 8px;border-radius:5px;border:1px solid #ddd6fe;word-break:break-all;\">' + r + '<\/div>';\r\n            }).join('');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 COPY CSS \u2500\u2500\u2500 *\/\r\n        copyCss: function () {\r\n            var self = this;\r\n            var el = document.getElementById('pth-css-out');\r\n            if (!el || !el.textContent) { self.showToast('Nothing to copy!', 'error'); return; }\r\n            try {\r\n                navigator.clipboard.writeText(el.textContent).then(function () {\r\n                    self.showToast('CSS copied to clipboard!', 'success');\r\n                }).catch(function () { self.fallbackCopy(el.textContent); });\r\n            } catch(e) { self.fallbackCopy(el.textContent); }\r\n        },\r\n\r\n        fallbackCopy: function (text) {\r\n            var ta = document.createElement('textarea');\r\n            ta.value = text; ta.style.position = 'fixed'; ta.style.top = '-9999px';\r\n            document.body.appendChild(ta); ta.select();\r\n            try { document.execCommand('copy'); this.showToast('CSS copied!', 'success'); } catch(e) {}\r\n            document.body.removeChild(ta);\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 LOAD SAMPLE \/ RESET \u2500\u2500\u2500 *\/\r\n        loadSample: function () {\r\n            var self = this;\r\n            self.shadowLayers = [{ x:0, y:10, blur:25, spread:-5, color:'#000000', op:0.1, inset:false }];\r\n            self.renderShadowLayers();\r\n            self.updateShadow();\r\n            self.showToast('Sample loaded!', 'success');\r\n        },\r\n\r\n        resetAll: function () {\r\n            this.shadowLayers = [];\r\n            this.addShadowLayer();\r\n            this.updateShadow();\r\n            this.showToast('Reset to defaults!', 'info');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 FULL WIDTH \u2500\u2500\u2500 *\/\r\n        toggleWidth: function () {\r\n            var layout  = document.getElementById('pth-cssvs-layout');\r\n            var sidebar = document.getElementById('pth-cssvs-sidebar');\r\n            var btn     = document.getElementById('pth-vs-fw-btn');\r\n            if (!layout || !sidebar || !btn) return;\r\n            if (layout.classList.contains('pth-full-width')) {\r\n                layout.classList.remove('pth-full-width');\r\n                sidebar.style.display = '';\r\n                btn.textContent = '\\u29c6 Full Width';\r\n            } else {\r\n                layout.classList.add('pth-full-width');\r\n                sidebar.style.display = 'none';\r\n                btn.textContent = '\\u25e8 Split View';\r\n            }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 HELPERS \u2500\u2500\u2500 *\/\r\n        getVal: function (id) {\r\n            var el = document.getElementById(id);\r\n            if (!el) return '';\r\n            if (el.type === 'checkbox') return el.checked;\r\n            return el.value;\r\n        },\r\n        setVal: function (id, val) { var el = document.getElementById(id); if (el) el.value = val; },\r\n        setEl:  function (id, val) { var el = document.getElementById(id); if (el) el.textContent = val; },\r\n\r\n        hexToRgba: function (hex, alpha) {\r\n            var rgb = this.hexToRgbObj(hex);\r\n            return 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + alpha + ')';\r\n        },\r\n\r\n        hexToRgbObj: function (hex) {\r\n            hex = hex.replace('#', '');\r\n            if (hex.length === 3) hex = hex.split('').map(function (c) { return c+c; }).join('');\r\n            var n = parseInt(hex, 16) || 0;\r\n            return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 TOAST \u2500\u2500\u2500 *\/\r\n        showToast: function (msg, type) {\r\n            var c = document.getElementById('pth-cssvs-toast');\r\n            if (!c) return;\r\n            var t = document.createElement('div');\r\n            t.className = 'pth-toast-msg pth-toast-' + (type || 'info');\r\n            t.textContent = msg;\r\n            c.appendChild(t);\r\n            setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 3500);\r\n        }\r\n    };\r\n\r\n    \/* \u2500\u2500 4-LAYER BOOTSTRAP \u2500\u2500 *\/\r\n    function runInit() {\r\n        if (!window.pthCssVsApp.initialized &&\r\n            document.getElementById('pth-cssvs-wrapper')) {\r\n            window.pthCssVsApp.initialized = true;\r\n            window.pthCssVsApp.init();\r\n        }\r\n    }\r\n    runInit();\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', runInit);\r\n    }\r\n    window.addEventListener('load', function () { setTimeout(runInit, 50); });\r\n    if (!window.pthCssVsApp.initialized && typeof MutationObserver !== 'undefined') {\r\n        var pthObs = new MutationObserver(function () {\r\n            if (document.getElementById('pth-cssvs-wrapper')) {\r\n                pthObs.disconnect(); runInit();\r\n            }\r\n        });\r\n        pthObs.observe(document.body || document.documentElement, { childList: true, subtree: true });\r\n        setTimeout(function () { pthObs.disconnect(); }, 10000);\r\n    }\r\n})();\r\n<\/script>\n\n\n\n<style>\n.pth-feature-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:30px}\n.pth-feat-box{border:1px solid #e2e8f0;background:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);transition:all .3s ease}\n.pth-feat-box:hover{border-color:#bfdbfe;transform:translateY(-3px);box-shadow:0 10px 15px -3px rgba(0,0,0,0.05)}\n.pth-feat-title{font-size:1.05rem;font-weight:800;color:#0f172a;margin-bottom:10px;display:flex;align-items:center;gap:10px}\n.pth-feat-text{font-size:.9rem;color:#1e293b;line-height:1.6;margin:0;font-weight:500}\n.pth-steps-wrap{border:1px solid #e2e8f0;background:#fff;padding:40px 30px;border-radius:16px;text-align:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);margin-bottom:40px}\n.pth-steps-title{font-size:1.2rem;font-weight:800;color:#0f172a;text-transform:uppercase;margin-bottom:35px;letter-spacing:1px}\n.pth-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px}\n.pth-step-item{display:flex;flex-direction:column;align-items:center}\n.pth-step-num{width:45px;height:45px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;margin-bottom:15px;box-shadow:0 4px 10px rgba(37,99,235,.3)}\n.pth-step-name{font-weight:800;color:#0f172a;margin-bottom:8px;font-size:1rem}\n.pth-step-desc{font-size:.9rem;color:#1e293b;line-height:1.5;margin:0;font-weight:500}\n<\/style>\n \n<div class=\"pth-feature-wrap\">\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udfe2 Multi-Layer Box Shadow + 12 Presets<\/div>\n        <p class=\"pth-feat-text\">The \ud83c\udf11 Shadow tab stacks up to four independent shadow layers \u2014 each with its own X offset, Y offset, blur radius, spread, colour, opacity, and inset toggle. Click any of the 12 preset cards (Soft, Hard, Neumorphic, Glow Blue, Glow Purple, Floating, Material, Neon, Long, Crisp, Inner, Double) to instantly apply it to the preview. Change the preview element shape between Square, Circle, Pill, and Card. Set independent background and box colours. The generated CSS output includes both standard and <code>-webkit-<\/code>\/<code>-moz-<\/code> prefixed declarations.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udd35 3-Stop Gradient + Typography + Border Shapes<\/div>\n        <p class=\"pth-feat-text\">The \ud83c\udf08 Gradient tab supports Linear, Radial, and Conic gradients with three independently positioned colour stops and a gradient text mode (background-clip: text). Eight gradient presets cover Ocean, Sunset, Aurora, Candy, Dark, Fire, Radial, and Mint. The \u270d\ufe0f Typography tab generates font size, weight, style, line height, letter spacing, text transform, text shadow, and optional Google Fonts @import in one CSS block. The \ud83d\udce6 Border tab controls all four corners independently plus border style, outline\/offset, and eight CSS clip-path shapes (Circle, Triangle, Hexagon, Star, Rhombus, Parallelogram, Arrow).<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udfe3 Transform, Filter, Animation &#038; Glassmorphism<\/div>\n        <p class=\"pth-feat-text\">The \u26a1 Transform tab controls all six CSS transform functions (rotate, scale, translateX\/Y, skewX\/Y) plus eight CSS filters (blur, brightness, contrast, saturate, hue-rotate, grayscale, sepia, invert) with a full transition generator \u2014 property, duration, timing function, and delay. The \ud83c\udfaf Snippets tab generates production-ready Flexbox layouts, CSS Grid templates, full <code>@keyframes<\/code> animations (12 types with Play Preview), and Glassmorphism cards with backdrop-filter, background opacity, and border colour controls.<\/p>\n    <\/div>\n<\/div>\n \n<div class=\"pth-steps-wrap\">\n    <div class=\"pth-steps-title\">How to Use CSS Visual Studio Pro<\/div>\n    <div class=\"pth-steps-grid\">\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">1<\/div>\n            <div class=\"pth-step-name\">Choose a Tab<\/div>\n            <p class=\"pth-step-desc\">Click \ud83c\udf11 Shadow for box shadows, \ud83c\udf08 Gradient for backgrounds, \u270d\ufe0f Typography for text CSS, \ud83d\udce6 Border for shapes, \u26a1 Transform for transforms and filters, or \ud83c\udfaf Snippets for Flexbox, Grid, Animation, and Glassmorphism. The live preview box updates for every tab instantly. Use \ud83d\udca1 Load Sample to see a working example.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">2<\/div>\n            <div class=\"pth-step-name\">Adjust Controls<\/div>\n            <p class=\"pth-step-desc\">All sliders, colour pickers, and selects update the preview in real time. In the Shadow tab, click \u2795 Add Shadow Layer to stack multiple shadows. Click any preset card to apply it instantly. In the Border tab, drag each corner radius slider independently. In the Transform tab, every filter slider updates the preview element live \u2014 drag the Hue Rotate slider to see colour shifting in action.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">3<\/div>\n            <div class=\"pth-step-name\">Customise Preview<\/div>\n            <p class=\"pth-step-desc\">Use the sidebar Preview Controls to switch the stage background between Light, Dark, Gradient, and Checkered modes. Upload any image as the preview background to test shadows and glass effects against real content. Change the preview shape in the Shadow tab (Square, Circle, Pill, Card). Switch between desktop and mobile views by resizing your browser.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">4<\/div>\n            <div class=\"pth-step-name\">Copy &amp; Paste CSS<\/div>\n            <p class=\"pth-step-desc\">The CSS Output panel at the bottom always shows ready-to-use CSS for the active tab. Click \ud83d\udccb Copy CSS and paste directly into your stylesheet, WordPress Custom CSS, or code editor. Recent outputs appear in the sidebar for quick reference. The Animation tab also includes a \u25b6 Play Preview button to preview the animation on the element before copying.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Last updated: June 2026<\/p>\n\n\n\n<h2 id=\"\ud83d\udd34-multi-layer-box-shadows-why-one-layer-is-never-enough\" class=\"wp-block-heading\">\ud83d\udd34&nbsp;<strong>Multi-Layer Box Shadows \u2014 Why One Layer Is Never Enough<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A single&nbsp;<code>box-shadow<\/code>&nbsp;produces one dimensional result \u2014 one offset direction, one blur radius, one colour. Professional UI design uses multiple shadow layers to simulate realistic depth. The&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/box-shadow\" rel=\"noreferrer noopener\" target=\"_blank\">CSS&nbsp;<code>box-shadow<\/code>&nbsp;property<\/a>&nbsp;accepts comma-separated shadow definitions, each rendered independently. A Material Design elevation uses two layers: a short, dark, sharp shadow for the contact shadow and a taller, lighter, diffused shadow for the elevation shadow. Neumorphic design uses two shadows in opposite directions \u2014 one lighter (highlight) and one darker (shadow) \u2014 with the element colour between them to create the illusion of extrusion from the background surface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Shadow tab lets you build up to four independent layers. Each layer has its own X offset (\u221250px to 50px), Y offset, blur radius (0 to 100px), spread radius (\u221230px to 50px), colour, and opacity. Negative spread shrinks the shadow \u2014 combined with a large Y offset and blur, this creates the &#8220;floating card&#8221; effect where the shadow disappears at the top and concentrates at the bottom. The inset toggle converts any layer to an inner shadow, drawing depth into the element rather than projecting it outward. Stacking an inset layer with an outward layer produces complex light-and-shadow combinations that would take hours to hand-code through trial and error.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe1-three-stop-gradients-and-conic-gradients-beyond-basic-two-color-fades\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>Three-Stop Gradients and Conic Gradients \u2014 Beyond Basic Two-Color Fades<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Two-colour gradients are the minimum viable gradient \u2014 they work, but rarely produce memorable results. Three-colour gradients with independently positioned stops enable gradients that shift through multiple hues across the element: from deep blue at 0% through purple at 50% to pink at 100%. The stop position sliders in the Gradient tab let you compress or expand each colour zone \u2014 push Stop 2 to 20% and you get a dominant blue field that transitions quickly to purple then slowly to pink. Push Stop 2 to 80% and you get the inverse: a quick blue-to-purple transition at the start and a dominant pink field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Conic gradients rotate colour stops around a centre point rather than transitioning along a linear or radial axis. They are the basis for pie charts, colour wheels, and angular progress indicators \u2014 all in pure CSS without SVG or JavaScript. The gradient text mode uses&nbsp;<code>background: linear-gradient(...)<\/code>&nbsp;combined with&nbsp;<code>-webkit-background-clip: text<\/code>&nbsp;and&nbsp;<code>-webkit-text-fill-color: transparent<\/code>&nbsp;to apply the gradient as the text fill colour. Browser support for this effect is broad (Chrome, Firefox, Safari, Edge) but the&nbsp;<code>-webkit-<\/code>&nbsp;prefix remains necessary for some WebKit implementations. The generated CSS includes both prefixed and unprefixed versions.<\/p>\n\n\n\n<h3 id=\"\ud83d\udfe2-typography-css-from-font-size-to-text-shadow-in-one-output-block\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>Typography CSS \u2014 From Font Size to Text Shadow in One Output Block<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Typography tab generates a complete&nbsp;<code>.element<\/code>&nbsp;CSS block from a single set of controls. Font size (8px\u201396px), line height (1.0\u20133.0), letter spacing (\u22125px to 20px), font weight (300\u2013900), font style, and text transform combine in one output. Negative letter spacing (\u22121px to \u22123px) is increasingly used in large display headings \u2014 tight tracking on 64px\u201396px headings creates a sophisticated editorial look that widely-spaced text at the same size doesn&#8217;t achieve. Letter spacing on small body text at negative values causes legibility problems and should be avoided below 16px.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The text shadow controls generate the&nbsp;<code>text-shadow<\/code>&nbsp;property, which accepts X offset, Y offset, blur radius, and colour. Unlike&nbsp;<code>box-shadow<\/code>,&nbsp;<code>text-shadow<\/code>&nbsp;has no spread radius and no&nbsp;<code>inset<\/code>&nbsp;option, and has no browser-prefixed versions \u2014 it&#8217;s been fully supported without prefixes since CSS3. Setting X, Y, and blur all to 0 with a contrasting colour creates a solid outline effect. Setting blur to 8\u201320px with the same hue as the text creates a glow. If you enter a Google Font name, the tool generates both the&nbsp;<code>@import<\/code>&nbsp;URL for the stylesheet and the&nbsp;<code>font-family<\/code>&nbsp;declaration \u2014 paste both into your CSS and the font loads from Google&#8217;s CDN.<\/p>\n\n\n<figure class=\"pth-article-figure pth-img-left\" style=\"float:left; width:700px; max-width:100%; margin:4px 28px 16px 0; clear:left;\"><img decoding=\"async\" src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/06\/css-box-shadow-multi-layer-demo-1-800x447.jpeg\" alt=\"CSS box shadow multi-layer demonstration showing Soft Neumorphic Neon and Material shadow presets on card elements\" width=\"700\" height=\"394\" loading=\"lazy\" data-no-lazy=\"1\" class=\"pth-article-img\" style=\"width:100%;height:auto;display:block;border-radius:10px;border:1px solid #e2e8f0;\"><\/figure>\n\n\n\n<h3 id=\"\ud83d\udfe2-css-clip-path-shapes-what-they-are-and-when-to-use-them\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>CSS clip-path Shapes \u2014 What They Are and When to Use Them<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>clip-path<\/code>&nbsp;masks the visible area of an element to a defined shape, hiding everything outside the path. Unlike&nbsp;<code>border-radius<\/code>&nbsp;which rounds corners,&nbsp;<code>clip-path<\/code>&nbsp;can produce arbitrary polygon shapes.&nbsp;<code>clip-path: circle(50%)<\/code>&nbsp;creates a perfect circle from any element.&nbsp;<code>clip-path: polygon(50% 0%, 0% 100%, 100% 100%)<\/code>&nbsp;produces a triangle by defining three vertex coordinates as percentage values. The eight preset shapes in the Border tab \u2014 Circle, Triangle, Hexagon, Star, Rhombus, Parallelogram, Arrow \u2014 each use a different&nbsp;<code>polygon()<\/code>&nbsp;or&nbsp;<code>circle()<\/code>&nbsp;function. One important constraint:&nbsp;<code>clip-path<\/code>&nbsp;clips the element&#8217;s box-shadow too, since the shadow is drawn outside the element boundary that clip-path masks. If you need both a shape and a visible shadow, apply the shadow to a parent wrapper element and clip-path to the child.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udd35&nbsp;<strong>Border radius<\/strong>&nbsp;and&nbsp;<strong>clip-path<\/strong>&nbsp;can be combined \u2014 a hexagonal clip-path with rounded corners requires a&nbsp;<code>path()<\/code>&nbsp;function rather than&nbsp;<code>polygon()<\/code>, supported in Chrome 88+ and Firefox 97+.<\/li>\n\n\n\n<li>\ud83d\udfe0&nbsp;<strong>Outline<\/strong>&nbsp;vs&nbsp;<strong>border<\/strong>: outlines don&#8217;t affect layout (they don&#8217;t push other elements), are drawn outside the element, and don&#8217;t respect border-radius in all browsers. Borders affect layout box dimensions; outlines do not. Use outline for focus rings; use border for decorative borders.<\/li>\n\n\n\n<li>\ud83d\udfe3&nbsp;<strong>outline-offset<\/strong>&nbsp;creates a gap between the element and its outline \u2014 particularly useful for focus rings where a 2px offset makes the ring clearly visible against both light and dark backgrounds simultaneously.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"\ud83d\udfe1-css-keyframes-animations-generated-ready-to-use\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>CSS @keyframes Animations \u2014 Generated Ready to Use<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Animation generator in the Snippets tab produces full&nbsp;<code>@keyframes<\/code>&nbsp;blocks for 12 animation types. Each generates the complete&nbsp;<code>@keyframes<\/code>&nbsp;definition and the corresponding&nbsp;<code>animation<\/code>&nbsp;shorthand property \u2014 both are required for the animation to work. The duration slider (0.1s\u20133.0s), iteration selector (1, 2, 3, or infinite), and animation type drive the output. Click \u25b6 Play Preview to run the animation on the preview element before copying \u2014 this lets you verify timing and appearance without pasting into a live page first.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Glassmorphism generator creates the CSS for frosted glass cards \u2014 a design trend built on&nbsp;<code>backdrop-filter: blur()<\/code>&nbsp;combined with a semi-transparent background colour and a subtle border. The backdrop blur filter blurs whatever is behind the element, not the element itself \u2014 requiring a visible background content layer (gradient, image, or other content) behind the glass card for the effect to be visible. The three scene backgrounds in the tool (Purple, Pink, Ocean) demonstrate this: the glass card only looks like glass when the blurred background is sufficiently complex. On a solid background, backdrop blur has no visible effect. Use our&nbsp;CSS Visual Studio Pro&nbsp;to generate glassmorphism CSS and test it against multiple background scenes in seconds. For more CSS concepts see our&nbsp;<a href=\"https:\/\/schoolict.net\/tools\/free-offline-css-box-shadow-generator-article\/\">complete CSS generator guide<\/a>.<\/p>\n\n\n\n<style>\n.pth-faq-section{margin-top:50px;margin-bottom:40px;font-family:inherit}\n.pth-faq-header{font-size:1.8rem;font-weight:800;color:#0f172a;margin-bottom:25px;border-bottom:2px solid #e2e8f0;padding-bottom:10px;display:flex;align-items:center;gap:10px}\n.pth-faq-grid{display:grid;grid-template-columns:100%;gap:20px}\n@media(min-width:768px){.pth-faq-grid{grid-template-columns:repeat(2,1fr)}}\n@media(min-width:1024px){.pth-faq-grid{grid-template-columns:repeat(3,1fr)}}\n.pth-faq-card{background:#f8fafc;padding:24px;border-radius:12px;border:1px solid #e2e8f0;transition:transform .2s ease;break-inside:avoid}\n.pth-faq-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.05)}\n.pth-faq-q{color:#0f172a;font-size:1rem;font-weight:700;margin:0 0 12px;line-height:1.4}\n.pth-faq-a{margin:0;font-size:.95rem;color:#1e293b;line-height:1.6;font-weight:500}\n<\/style>\n \n<div class=\"pth-faq-section\">\n    <div class=\"pth-faq-header\">\ud83e\udd14 Frequently Asked Questions<\/div>\n    <div class=\"pth-faq-grid\">\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Why does the glassmorphism effect not show on a solid background?<\/p>\n            <p class=\"pth-faq-a\"><code>backdrop-filter: blur()<\/code> blurs whatever is rendered behind the element in the stacking context. On a solid single-colour background, there is nothing complex to blur \u2014 the frosted glass effect becomes invisible. Use a gradient, photograph, or layered content behind your glass card. The preview stage&#8217;s Gradient and Checkered modes in the sidebar demonstrate this correctly. In production, the page content appearing behind the fixed glass card is what gets blurred.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">What&#8217;s the spread radius in box-shadow and when should it be negative?<\/p>\n            <p class=\"pth-faq-a\">Spread radius expands or contracts the shadow before blur is applied. Positive spread makes the shadow larger than the element on all sides. Negative spread shrinks it smaller than the element. The &#8220;floating card&#8221; effect uses a large positive Y offset combined with a negative spread: the shadow appears as a concentrated pool beneath the element rather than surrounding it. Negative spread on a tightly blurred shadow creates subtle depth cues without the shadow being obviously visible at the edges.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Can I combine transform properties from different tabs?<\/p>\n            <p class=\"pth-faq-a\">Each tab generates CSS for its own property set independently. To combine multiple properties \u2014 for example, a box-shadow from the Shadow tab, a border-radius from the Border tab, and a transform from the Transform tab \u2014 copy each CSS block separately and manually merge them into one <code>.element<\/code> rule in your stylesheet. The tool generates per-property blocks rather than combined rules to keep the output clean and applicable to any selector.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Why does clip-path cut off my box-shadow?<\/p>\n            <p class=\"pth-faq-a\"><code>clip-path<\/code> clips the element&#8217;s painted area including its box-shadow, because the shadow is part of the element&#8217;s rendering. The workaround: apply <code>clip-path<\/code> to a child element and <code>box-shadow<\/code> to its parent wrapper. The parent is not clipped so its shadow remains visible; the child renders in the desired shape. Alternatively, use <code>filter: drop-shadow()<\/code> instead of <code>box-shadow<\/code> \u2014 <code>drop-shadow<\/code> follows the visual shape of the clipped element rather than the box boundary.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Do CSS animations require JavaScript?<\/p>\n            <p class=\"pth-faq-a\">No. CSS <code>@keyframes<\/code> animations run entirely in the browser&#8217;s rendering engine with no JavaScript. The generated CSS output from the Animation tab is pure CSS \u2014 paste the <code>@keyframes<\/code> block and the <code>animation<\/code> property into your stylesheet and the animation runs. JavaScript is only needed if you want to trigger animations dynamically, pause\/resume them programmatically, or respond to animation events like <code>animationend<\/code>. For entrance animations triggered by scrolling, you need either JavaScript or the CSS <code>animation-play-state<\/code> property toggled via an <code>IntersectionObserver<\/code>.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">What is the difference between filter and backdrop-filter?<\/p>\n            <p class=\"pth-faq-a\"><code>filter<\/code> applies visual effects to the element itself \u2014 its background, content, borders, and shadows. <code>backdrop-filter<\/code> applies effects to the area behind the element. A <code>filter: blur(10px)<\/code> on a card blurs the card&#8217;s own content. A <code>backdrop-filter: blur(10px)<\/code> on the same card blurs whatever is behind it, while the card&#8217;s own content remains sharp. Glassmorphism uses <code>backdrop-filter<\/code> specifically because the frosted effect is on the background, not the card content.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Can I apply Google Fonts without a plugin in WordPress?<\/p>\n            <p class=\"pth-faq-a\">Yes. The Typography tab generates a complete <code>@import<\/code> URL for any font name you enter. In WordPress, add the <code>@import<\/code> line at the very top of your Additional CSS (Appearance \u2192 Customize \u2192 Additional CSS). The browser fetches the font from Google&#8217;s CDN on page load. Note that Google Fonts requests create an external network dependency and have minor GDPR implications in some regions \u2014 self-hosted alternatives using <code>@font-face<\/code> with downloaded font files avoid these issues.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">What does outline-offset do that margin doesn&#8217;t?<\/p>\n            <p class=\"pth-faq-a\"><code>outline-offset<\/code> sets the gap between the element&#8217;s border edge and the start of its outline, without affecting layout. The outline appears outside the element and is ignored by the box model \u2014 it does not push adjacent elements or expand the containing block. <code>margin<\/code> affects layout and moves the element relative to its siblings. For focus indicators, <code>outline-offset: 2px<\/code> creates a clearly visible ring separated from the element without disrupting the page layout at all.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Is the generated CSS browser-compatible without extra steps?<\/p>\n            <p class=\"pth-faq-a\">The tool generates standard CSS3 with <code>-webkit-<\/code> prefixes where still needed (gradient text background-clip, backdrop-filter in some browsers). For <code>box-shadow<\/code>, <code>transform<\/code>, <code>filter<\/code>, <code>border-radius<\/code>, and <code>@keyframes<\/code>, no prefixes are required for Chrome 90+, Firefox 90+, Safari 15+, or Edge 90+. For broader compatibility including IE11, use a PostCSS autoprefixer in your build pipeline \u2014 but IE11&#8217;s market share is negligible for most projects and the generated CSS works correctly in all modern browsers without modification.<\/p>\n        <\/div>\n \n    <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Free CSS Box Shadow &amp; Background Gradient Generator Visually design beautiful CSS box shadows, inset shadows, and background gradients. Generate cross-browser CSS code instantly and 100% offline. \ud83d\udfe2 Multi-Layer Box Shadow + 12 Presets The \ud83c\udf11 Shadow tab stacks up to four independent shadow layers \u2014 each with its own X offset, Y offset, blur &#8230; <a title=\"Free CSS Box Shadow Generator with Background Gradient CSS\" class=\"read-more\" href=\"https:\/\/schoolict.net\/tools\/free-css-box-shadow-generator\/\" aria-label=\"Read more about Free CSS Box Shadow Generator with Background Gradient CSS\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":631,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-625","page","type-page","status-publish","has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/comments?post=625"}],"version-history":[{"count":0,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/625\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media\/631"}],"wp:attachment":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media?parent=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}