/*!
 * JoomShaper live preview
 * Tokens follow the joomshaper.com brand stylesheet (barnding/branding.css).
 */:root{--primary: #091df6;--primary-hover: #0819d1;--primary-soft: #e6e9fe;--focus-border: #848efb;--focus-ring: 0 0 0 3.2px rgba(9, 29, 246, .25);--ink: #1c1917;--text: #4a4540;--secondary: #4f4943;--muted: #6b655f;--subtle: #b2aca7;--page: #fbfafa;--surface: #ffffff;--surface-2: #f7f5f3;--surface-3: #f1f0ee;--line: #e8e6e4;--line-soft: #efedeb;--line-strong: #dfdcd9;--success: #50b83c;--danger: #ff5631;--warning: #eda700;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);--shadow-pop: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px -4px rgba(0, 0, 0, .12), 0 24px 48px -12px rgba(0, 0, 0, .12);--pill: 999px;--radius-card: 12px;--radius-thumb: 8px;--radius-panel: 16px;--ease: cubic-bezier(.22, 1, .36, 1);--bar-h: 64px;--bezel: #1c1917;color-scheme:light}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;display:grid;grid-template-rows:var(--bar-h) minmax(0,1fr);height:100dvh;overflow:hidden;background:var(--page);color:var(--ink);font:400 15px/1.5 IBM Plex Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}:focus-visible{outline:0;box-shadow:var(--focus-ring)}.icon{width:20px;height:20px;flex:none;fill:currentColor}kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);box-shadow:var(--shadow-xs);color:var(--muted);font:500 12px/1 SFMono-Regular,Menlo,Monaco,Consolas,monospace}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:7px 20px;border:1px solid transparent;border-radius:var(--pill);background:transparent;color:var(--text);font-size:16px;font-weight:500;line-height:24px;white-space:nowrap;user-select:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.btn-default{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--shadow-xs);color:var(--ink)}.btn-default:hover{border-color:var(--subtle)}.btn-light{background:var(--surface);border-color:var(--surface);color:var(--ink)}.btn-sm{padding:5px 14px;font-size:14px;line-height:20px}.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:1px solid transparent;border-radius:var(--pill);background:transparent;color:var(--secondary);transition:background-color .15s,border-color .15s,color .15s,opacity .15s}.icon-btn:hover{background:var(--surface-2);border-color:var(--line-soft);color:var(--ink)}.icon-btn:disabled{opacity:.35;pointer-events:none}.icon-btn[aria-pressed=true]{background:var(--primary-soft);color:var(--primary)}.badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap}.badge-primary{background:var(--primary);color:#fff}.badge-success{background:var(--success);color:var(--ink)}.bar{position:relative;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line)}.bar-start,.bar-center,.bar-end{display:flex;align-items:center;gap:8px;min-width:0}.bar-end{justify-content:flex-end}.brand{display:flex;align-items:center;padding:6px;margin-right:4px;border-radius:8px;color:var(--primary)}.brand svg{display:block;fill:currentColor}.brand-full svg{width:auto;height:24px}.brand-mark{display:none!important;width:28px;height:28px}.switcher{display:flex;align-items:center;gap:10px;min-width:0;max-width:320px;height:48px;padding:0 10px 0 6px;border:1px solid var(--line-soft);border-radius:var(--radius-card);background:var(--surface-2);text-align:left;transition:background-color .15s,border-color .15s,box-shadow .15s}.switcher:hover{background:var(--surface);border-color:var(--line-strong)}.switcher[aria-expanded=true]{background:var(--surface);border-color:var(--focus-border);box-shadow:var(--focus-ring)}.switcher-thumb{width:28px;height:35px;flex:none;border-radius:5px;object-fit:cover;object-position:top;background:var(--line-soft);box-shadow:var(--shadow-xs)}.switcher-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}.switcher-label{color:var(--muted);font-size:12px}.switcher-title{overflow:hidden;font-weight:600;white-space:nowrap;text-overflow:ellipsis}.switcher-chevron,.stepper .icon{width:12px;height:12px}#open-tab .icon{width:18px;height:18px}.switcher-chevron{margin-left:auto;color:var(--muted);transition:transform .25s var(--ease),color .15s}.switcher[aria-expanded=true] .switcher-chevron{transform:rotate(180deg);color:var(--primary)}.stepper{display:flex;gap:2px}.devices{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface)}.device{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:var(--pill);background:transparent;color:var(--muted);font-size:14px;font-weight:500;transition:background-color .2s,color .2s,box-shadow .2s}.device .icon{width:18px;height:18px}.device:hover{background:var(--surface-2);color:var(--ink)}.device[aria-checked=true],.device[aria-checked=true]:hover{background:var(--primary-soft);color:var(--primary)}.colors{display:flex;align-items:center;gap:6px;margin-left:4px;padding-left:12px;border-left:1px solid var(--line)}.colors[hidden]{display:none}.swatch{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:linear-gradient(-45deg,var(--a, var(--line-strong)) 50%,var(--b, var(--line-strong)) 50%);box-shadow:inset 0 0 0 1px #0000001f;transition:box-shadow .15s,transform .15s}.swatch:hover{transform:scale(1.08)}.swatch[aria-checked=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--primary)}.color-menu{position:relative;display:none}.color-toggle{width:28px;height:28px}.color-toggle[aria-expanded=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--primary)}.color-pop{position:absolute;top:calc(100% + 10px);right:-8px;z-index:40;display:flex;gap:10px;padding:10px 12px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-pop)}.color-pop[hidden]{display:none}.color-pop .swatch{width:30px;height:30px}.progress{position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--primary);opacity:0;pointer-events:none}.progress.run{opacity:1;animation:progress 10s cubic-bezier(.1,.7,.2,1) forwards}.progress.done{width:100%;opacity:0;animation:none;transition:width .25s ease-out,opacity .35s .2s}@keyframes progress{0%{width:0}to{width:88%}}.stage{position:relative;display:grid;place-items:start center;overflow:hidden;background-color:var(--surface-3);background-image:radial-gradient(rgba(28,25,23,.09) 1px,transparent 1px);background-size:18px 18px}.frame{width:100%;height:100%;background:var(--surface);transform-origin:top center;transition:width .4s var(--ease),height .4s var(--ease),transform .4s var(--ease),border-radius .4s var(--ease),box-shadow .4s var(--ease),margin .4s var(--ease)}.frame iframe{display:block;width:100%;height:100%;border:0;border-radius:inherit;background:var(--surface)}body:not([data-device=desktop]) .frame{width:var(--w, 390px);height:var(--h, 844px);margin-top:24px;transform:scale(var(--s, 1));border-radius:24px;box-shadow:0 0 0 10px var(--bezel),0 24px 48px -12px #00000040,0 8px 24px -4px #0000001f}body[data-device=phone] .frame{border-radius:36px}body.is-loading .frame iframe{opacity:.6;transition:opacity .2s}.browser{position:fixed;inset:var(--bar-h) 0 0;z-index:20;display:flex;justify-content:center}.browser[hidden]{display:none}.browser-backdrop{position:absolute;inset:0;background:#1c191766;backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}.browser-panel{position:relative;display:flex;flex-direction:column;width:min(1280px,100%);height:calc(100% - 24px);background:var(--page);border-radius:0 0 var(--radius-panel) var(--radius-panel);box-shadow:var(--shadow-pop);opacity:0;transform:translateY(-12px);transition:opacity .25s var(--ease),transform .25s var(--ease)}.browser.is-open .browser-backdrop,.browser.is-open .browser-panel{opacity:1;transform:none}.browser-head{display:flex;align-items:center;gap:12px;padding:24px 24px 16px}.browser-title{margin:0 auto 0 0;font-size:22px;font-weight:600;line-height:1.3;white-space:nowrap}.search{display:flex;align-items:center;gap:8px;height:40px;border:1px solid #dfdddb;border-radius:var(--pill);background:var(--surface);color:var(--muted);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.search:focus-within{border-color:var(--focus-border);box-shadow:var(--focus-ring)}.search{width:min(360px,100%);padding:0 8px 0 14px}.search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text)}.search input:focus-visible{box-shadow:none}.search input::placeholder{color:var(--muted);opacity:1}.search input::-webkit-search-cancel-button{cursor:pointer}.search:focus-within kbd{display:none}.search .icon{width:18px;height:18px}.chips{display:flex;gap:8px;padding:0 24px 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}.chips::-webkit-scrollbar{display:none}.chip{display:inline-flex;align-items:center;gap:6px;flex:none;padding:5px 14px;border:1px solid var(--line-strong);border-radius:var(--pill);background:var(--surface);box-shadow:var(--shadow-xs);color:var(--text);font-size:14px;line-height:20px;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}.chip:hover{border-color:var(--subtle);color:var(--ink)}.chip[aria-selected=true]{background:var(--primary);border-color:var(--primary);color:#fff}.chip-count{opacity:.45;font-size:12px}.chip[aria-selected=true] .chip-count{opacity:.7}.browser-body{flex:1;min-height:0;padding:16px 24px 24px;overflow-y:auto;overscroll-behavior:contain}.result-count{margin:0 0 16px;color:var(--muted);font-size:13px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;margin:0;padding:0;list-style:none}.card{display:flex;flex-direction:column;width:100%;padding:4px;border:1px solid var(--line-soft);border-radius:var(--radius-card);background:var(--surface-2);text-align:left;transition:background-color .15s ease-in-out,border-color .15s,box-shadow .15s}.card:hover{background:var(--surface)}.card[aria-current]{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:var(--surface)}.card-thumb{position:relative;display:block;overflow:hidden;border-radius:var(--radius-thumb);filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}.card-thumb img{display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover;object-position:top;border-radius:var(--radius-thumb);background:var(--line-soft);transition:transform .5s var(--ease)}.card-badges{position:absolute;top:10px;left:10px;z-index:2;display:flex;gap:4px}.card-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:16px;border-radius:var(--radius-thumb);background:linear-gradient(to top,#0000008c,#0003 38%,#0000 62%);opacity:0;transition:opacity .25s ease-out}.card-overlay .btn{transform:translateY(8px);transition:transform .3s var(--ease)}.card:is(:hover,:focus-visible) .card-overlay,.card[aria-current] .card-overlay{opacity:1}.card:is(:hover,:focus-visible) .card-overlay .btn,.card[aria-current] .card-overlay .btn{transform:none}.card:is(:hover,:focus-visible) .card-thumb{filter:none}.card:is(:hover,:focus-visible) .card-thumb img{transform:scale(1.04)}.card[aria-current] .card-overlay .btn{background:var(--primary);border-color:var(--primary);color:#fff}.card-content{display:flex;flex-direction:column;padding:10px 8px 6px;min-width:0}.card-title{overflow:hidden;color:var(--ink);font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}.empty{padding:64px 16px;color:var(--text);text-align:center}.empty p{margin:0 0 4px}.empty-icon{display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:16px;border-radius:var(--pill);background:var(--primary-soft);color:var(--primary)}.empty-icon .icon{width:26px;height:26px}.empty .btn{margin-top:16px}.browser-foot{display:flex;gap:24px;padding:12px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}.browser-foot span{display:inline-flex;align-items:center;gap:4px}.noscript{position:fixed;inset:var(--bar-h) 0 0;z-index:40;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding:24px;overflow-y:auto;background:var(--page)}.noscript a{padding:5px 14px;border:1px solid var(--line-strong);border-radius:var(--pill);background:var(--surface)}@media (max-width: 1279px){.device-label{display:none}.device{justify-content:center;width:40px;padding:0}}@media (max-width: 1023px){.brand-full{display:none}.brand-mark{display:block!important}.browser-foot{display:none}}@media (max-width: 767px){:root{--bar-h: 56px}.bar{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:0 8px}.bar-center,.switcher-label,.switcher-thumb,#open-tab{display:none}.color-menu:not([hidden]){display:block}.switcher{height:40px;padding:0 8px 0 12px;border-radius:var(--pill)}.stepper .icon-btn{width:34px;height:34px}.cta{padding:5px 14px;font-size:14px;line-height:20px}body:not([data-device=desktop]) .frame{width:100%;height:100%;margin:0;transform:none;border-radius:0;box-shadow:none}.browser-panel{height:100%;border-radius:0}.browser-head{flex-wrap:wrap;padding:16px 16px 12px}.browser-title{flex:1;font-size:18px}.search{order:1;width:100%}.search kbd{display:none}.chips{padding:0 16px 12px}.browser-body{padding:12px 16px 16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card-content{padding:10px 8px 8px}.card-title{font-size:14px}.card-overlay{display:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}