.joq-tool{--t-ink:var(--ink,#111111);--t-ink-2:var(--ink-2,#4A4A46);--t-muted:var(--muted,#6A6A64);--t-rule:var(--rule,#D8D8D3);--t-paper:var(--paper,#F3F3F0);--t-white:#FFFFFF;--t-main:var(--main,#D7000F);--t-on-main:var(--on-main,#FFFFFF);--t-margin:var(--margin,16px);--t-btn:52px;--t-ease:160ms ease-out;position:relative;margin-top:28px;color:var(--t-ink-2);font-size:16px;line-height:1.45}
@media (min-width:1024px){.joq-tool{--t-btn:48px;margin-top:40px}}
.joq-tool *,.joq-tool *::before,.joq-tool *::after{box-sizing:border-box;border-radius:0!important}
.joq-tool [hidden]{display:none!important}
.joq-tool :where(button){font:inherit;cursor:pointer}
.joq-tool :focus-visible{outline:2px solid var(--t-ink);outline-offset:2px}

.joq-tool .joq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--t-btn);min-width:48px;padding:0 20px;border:1.5px solid var(--t-ink);background:var(--t-white);color:var(--t-ink);font-weight:700;font-size:16px;line-height:1.1;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--t-ease),color var(--t-ease),border-color var(--t-ease)}
.joq-tool .joq-btn:hover{background:var(--t-ink);color:var(--t-white)}
.joq-tool .joq-btn--main{background:var(--t-main);border-color:var(--t-main);color:var(--t-on-main)}
.joq-tool .joq-btn--main:hover{background:var(--t-ink);border-color:var(--t-ink);color:var(--t-white)}
.joq-tool .joq-btn--ink{background:var(--t-ink);color:var(--t-white)}
.joq-tool .joq-btn--ink:hover{background:var(--t-main);border-color:var(--t-main);color:var(--t-on-main)}
.joq-tool .joq-btn--sm{min-height:48px;padding:0 14px;font-size:15px}
.joq-tool .joq-btn--quiet{border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:.18em;padding:0 8px;font-weight:600}
.joq-tool .joq-btn--quiet:hover{background:transparent;color:var(--t-main)}
.joq-tool .joq-btn[disabled]{opacity:.45;cursor:not-allowed}

.joq-file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);opacity:0}
.joq-file:focus-visible+label{outline:2px solid var(--t-ink);outline-offset:2px}

.joq-tool__grid{display:flex;flex-direction:column;gap:0}
.joq-tool__stage{position:relative}
.joq-sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--t-rule);background:var(--t-white)}
.joq-sizes__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:56px;padding:6px 4px;border:0;border-left:1px solid var(--t-rule);background:transparent;color:var(--t-ink);line-height:1.15}
.joq-sizes__btn:first-child{border-left:0}
.joq-sizes__ratio{font-weight:800;font-size:16px}
.joq-sizes__name{font-size:13px;font-weight:600}
.joq-sizes__px{font-size:11px;color:var(--t-muted)}
.joq-sizes__btn[aria-pressed="true"]{background:var(--t-ink);color:var(--t-white)}
.joq-sizes__btn[aria-pressed="true"] .joq-sizes__px{color:#B9B9B4}
.joq-sizes--stage{display:none;margin-bottom:12px}

.joq-frame{position:relative;width:calc(100% + 2 * var(--t-margin));margin-inline:calc(-1 * var(--t-margin));aspect-ratio:4/5;background:#1D1D1B;overflow:hidden}
.joq-frame[data-size="1x1"]{aspect-ratio:1/1}
.joq-frame[data-size="9x16"]{aspect-ratio:9/16}
.joq-frame__example,.joq-frame__example img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.joq-frame__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;gap:4%;padding:0 6% 8%;background:#111111}
.joq-frame__ph-photo{display:block;flex:0 0 62%;margin:0 -6.4%;background:#2A2A28}
.joq-frame__ph-line{display:block;height:7%;width:88%;background:#3A3A37}
.joq-frame__ph-line--short{width:54%;background:var(--t-main)}
.joq-frame__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#111111;touch-action:pan-y;cursor:default}
.joq-frame.has-photo .joq-frame__canvas{touch-action:none;cursor:grab}
.joq-frame.is-dragging .joq-frame__canvas{cursor:grabbing}
.joq-frame.is-live .joq-frame__example,.joq-frame.is-live .joq-frame__placeholder{display:none}
.joq-frame__empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;background:rgba(17,17,17,.28)}
.joq-frame__add{width:100%;max-width:360px}
.joq-tool .joq-frame__add{min-height:56px;font-size:17px}
.joq-frame__hint{margin:0;color:#FFFFFF;font-size:14px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (pointer:coarse){.joq-frame__hint{display:none}}
.joq-frame__tag{position:absolute;top:12px;left:12px;padding:5px 8px;background:#FFFFFF;color:#111111;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.joq-frame.is-live .joq-frame__tag{display:none}
.joq-frame.is-live .joq-frame__empty{inset:0 0 auto 0;height:44%;justify-content:center;padding:20px;background:none;pointer-events:none}
.joq-frame.is-live .joq-frame__add{pointer-events:auto;max-width:240px}
.joq-frame.is-live .joq-frame__hint{display:none}
.joq-frame.has-photo .joq-frame__empty{display:none}
.joq-frame.is-drop::after{content:"";position:absolute;inset:0;border:4px solid var(--t-main);pointer-events:none}

.joq-status{min-height:0;margin:10px 0 0;font-size:15px;font-weight:600;color:var(--t-ink)}
.joq-status:empty{display:none}
.joq-status.is-error{color:var(--t-main)}
.joq-actions{display:none}

.joq-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:16px 0 0;border:1px solid var(--t-ink);background:var(--t-white)}
.joq-tabs__btn{min-height:48px;padding:0 2px;border:0;border-left:1px solid var(--t-rule);background:transparent;color:var(--t-ink);font-weight:700;font-size:13px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
@media (min-width:390px){.joq-tabs__btn{font-size:15px}}
.joq-tabs__btn:first-child{border-left:0}
.joq-tabs__btn[aria-expanded="true"]{background:var(--t-main);color:var(--t-on-main)}

.joq-tool__inputs,.joq-tool__design{display:contents}
.joq-panel{display:none;padding:20px 16px 24px;border:1px solid var(--t-rule);border-top:0;background:var(--t-white)}
.joq-panel.is-active{display:block}
.joq-panel__title{margin:0 0 16px;color:var(--t-ink);font-size:12px;line-height:1;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.joq-help{margin:12px 0 0;color:var(--t-muted);font-size:14px}

.joq-field{margin-top:18px}
.joq-field:first-of-type,.joq-panel__title+.joq-field{margin-top:0}
.joq-field__label{display:block;margin:0 0 8px;color:var(--t-ink);font-size:15px;font-weight:700}
.joq-field__label+.joq-input+.joq-field__label{margin-top:12px}
.joq-input{display:block;width:100%;min-height:48px;padding:10px 12px;border:1.5px solid var(--t-ink);background:var(--t-white);color:var(--t-ink);font:inherit;font-size:17px;line-height:1.35;-webkit-appearance:none;appearance:none}
.joq-input::placeholder{color:#8A8A84}
.joq-input:focus-visible{outline-offset:0}
.joq-input--area{min-height:104px;resize:vertical}
.joq-count{margin:6px 0 0;color:var(--t-muted);font-size:13px;text-align:right}
.joq-count.is-full{color:var(--t-main);font-weight:700}

.joq-chips{display:flex;flex-wrap:wrap;gap:8px}
.joq-chips__empty{margin:0;color:var(--t-muted);font-size:14px}
.joq-chip{min-height:40px;padding:0 12px;border:1.5px solid var(--t-ink);background:var(--t-white);color:var(--t-ink);font-weight:700;font-size:16px;line-height:1.1;transition:background-color var(--t-ease),color var(--t-ease),border-color var(--t-ease)}
.joq-chip[aria-pressed="true"]{background:var(--t-main);border-color:var(--t-main);color:var(--t-on-main)}
@media (max-width:767px){.joq-chip{min-height:44px}}

.joq-slots{display:flex;flex-direction:column;gap:12px}
.joq-slot{display:flex;gap:12px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--t-rule)}
.joq-slot__thumb{flex:0 0 64px;height:80px;background:var(--t-paper) center/cover no-repeat;border:1px solid var(--t-rule)}
.joq-slot__thumb canvas{display:block;width:100%;height:100%;object-fit:cover}
.joq-slot__body{flex:1 1 auto;min-width:0}
.joq-slot__name{margin:0 0 6px;color:var(--t-ink);font-weight:700;font-size:15px}
.joq-slot__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.joq-range{display:flex;align-items:center;gap:10px;min-height:48px}
.joq-range__label{font-size:14px;font-weight:600;color:var(--t-ink)}
.joq-range input{flex:1 1 auto;min-width:0;height:48px;accent-color:var(--t-main)}
.joq-range--value .joq-range__label{flex:0 0 112px}
.joq-range__out{flex:0 0 48px;text-align:right;color:var(--t-ink);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.joq-adjust .joq-help{margin-top:4px}
.joq-adjust [data-joq-scale-reset]{margin-top:4px;margin-left:-8px}

.joq-strip{display:flex;gap:10px;margin:0 -16px;padding:0 16px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.joq-strip__item{flex:0 0 96px;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:transparent;color:var(--t-ink);text-align:left;scroll-snap-align:start}
.joq-strip__thumb{position:relative;display:block;width:100%;aspect-ratio:4/5;background:var(--t-paper);border:1px solid var(--t-rule);overflow:hidden}
.joq-strip__thumb .joq-strip__img{display:block;width:100%;height:100%;object-fit:cover}
.joq-strip__item[aria-pressed="true"] .joq-strip__thumb{outline:3px solid var(--t-main);outline-offset:-3px}
.joq-strip__name{font-size:14px;font-weight:700;line-height:1.2}
.joq-strip__item[aria-pressed="true"] .joq-strip__name{color:var(--t-main)}
.joq-strip__draft{display:inline-block;margin-left:4px;padding:1px 4px;background:var(--t-paper);color:var(--t-muted);font-size:11px;font-weight:600}
.joq-strip__placeholder{position:absolute;inset:0;display:block;background:#D8D8D3}
.joq-strip__placeholder--split{background:linear-gradient(180deg,transparent 66%,#111111 66%),repeating-linear-gradient(90deg,#6E6E68 0 32.4%,#111111 32.4% 33.8%)}
.joq-strip__placeholder--breaking{background:linear-gradient(90deg,#D7000F 0 46%,transparent 46%) 6% 58%/100% 8% no-repeat,linear-gradient(180deg,#6E6E68 0 58%,#FFFFFF 58%)}
.joq-strip__placeholder--overlay{background:linear-gradient(180deg,#6E6E68 40%,#111111)}
.joq-strip__placeholder--explainer{background:linear-gradient(#6E6E68,#6E6E68) 50% 30%/80% 36% no-repeat,#FFD60A}
.joq-strip__placeholder--duo{background:linear-gradient(90deg,#6E6E68 0 49%,#0E1A2B 49% 51%,#6E6E68 51%) 0 0/100% 56% no-repeat,#0E1A2B}
.joq-strip__placeholder--quote{background:linear-gradient(90deg,#6E6E68 50%,#FFFFFF 50%)}
.joq-strip__placeholder--fact{background:linear-gradient(#6E6E68,#6E6E68) 92% 92%/34% 28% no-repeat,#FFFFFF;box-shadow:inset 0 0 0 4px #111111}
.joq-strip__placeholder--stack{background:linear-gradient(180deg,#6E6E68 50%,#111111 50%)}

.joq-swatches{display:flex;flex-wrap:wrap;gap:10px}
.joq-swatch{position:relative;width:48px;height:48px;padding:0;border:1.5px solid var(--t-ink);background:var(--swatch,#FFFFFF)}
.joq-swatch[aria-pressed="true"]{outline:3px solid var(--t-ink);outline-offset:2px}
.joq-swatch--custom{display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(#D7000F 0 25%,#FFD60A 0 50%,#1F5BFF 0 75%,#FFFFFF 0);cursor:pointer}
.joq-swatch--custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.joq-swatch--custom.is-active{outline:3px solid var(--t-ink);outline-offset:2px}
.joq-swatch--custom:focus-within{outline:2px solid var(--t-ink);outline-offset:2px}

.joq-choices{display:grid;grid-template-columns:1fr;gap:8px}
.joq-choices--row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.joq-choices--row .joq-choice{text-align:center;font-size:15px;padding:0 6px}
.joq-choice{min-height:48px;padding:0 14px;border:1.5px solid var(--t-ink);background:var(--t-white);color:var(--t-ink);font-size:17px;font-weight:700;text-align:left}
.joq-choice[aria-pressed="true"]{background:var(--t-ink);color:var(--t-white)}
.joq-tool.has-fonts .joq-choice--poppins{font-family:"JOQ Poppins",sans-serif;font-weight:800}
.joq-tool.has-fonts .joq-choice--archivo{font-family:"JOQ Archivo Condensed",sans-serif;font-weight:800}
.joq-tool.has-fonts .joq-choice--newsreader{font-family:"JOQ Newsreader",serif;font-weight:700}

.joq-switch{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;color:var(--t-ink);font-weight:600;font-size:15px}
.joq-switch input{position:absolute;opacity:0;width:1px;height:1px}
.joq-switch__track{position:relative;flex:0 0 52px;height:30px;border:1.5px solid var(--t-ink);background:var(--t-white);transition:background-color var(--t-ease)}
.joq-switch__track::after{content:"";position:absolute;top:4px;left:4px;width:19px;height:19px;background:var(--t-ink);transition:transform var(--t-ease),background-color var(--t-ease)}
.joq-switch input:checked+.joq-switch__track{background:var(--t-main);border-color:var(--t-main)}
.joq-switch input:checked+.joq-switch__track::after{transform:translateX(22px);background:var(--t-white)}
.joq-switch input:focus-visible+.joq-switch__track{outline:2px solid var(--t-ink);outline-offset:2px}

.joq-tool{padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))}
.joq-savebar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;flex-direction:column;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#FFFFFF;border-top:1px solid var(--t-rule);box-shadow:0 -6px 18px -10px rgba(17,17,17,.3);transition:transform 200ms ease-out}
.joq-savebar.is-away{transform:translateY(calc(100% + 8px))}
@media (max-width:1099px){html:has(.joq-savebar){scroll-padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}.joq-frame__empty{justify-content:flex-start;padding-top:14%}}
.joq-sizes--bar{border-color:var(--t-ink)}
.joq-sizes--bar .joq-sizes__btn{flex-direction:row;gap:6px;min-height:44px;padding:0 4px}
.joq-sizes--bar .joq-sizes__ratio{font-size:15px}
.joq-sizes--bar .joq-sizes__px{display:none}
.joq-savebar__row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.7fr) minmax(0,1fr);gap:8px}
.joq-tool .joq-savebar__btn{min-height:48px;padding:0 6px;font-size:15px;white-space:nowrap}

.joq-tool.is-typing .joq-frame.is-live .joq-frame__canvas{position:fixed;inset:auto;top:calc(var(--joq-vv-top,0px) + 8px);right:8px;width:30vw;height:auto;z-index:70;border:1px solid var(--t-ink);box-shadow:0 6px 18px rgba(17,17,17,.3)}

.joq-recent{margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--t-rule)}
.joq-recent__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.joq-recent__head .joq-field__label{margin:0}
.joq-recent__list{display:flex;gap:8px;min-height:116px;margin:8px -16px 0;padding:0 16px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px}
.joq-recent__item{flex:0 0 72px;display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:transparent;color:var(--t-muted);font-size:11px;font-weight:600;text-align:left;scroll-snap-align:start}
.joq-recent__thumb{display:block;width:72px;height:90px;background:var(--t-paper);border:1px solid var(--t-rule);overflow:hidden}
.joq-recent__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.joq-recent__item:hover .joq-recent__thumb{outline:2px solid var(--t-ink);outline-offset:-2px}
.joq-link{margin-top:20px}
.joq-link__row{display:flex;gap:0}
.joq-link__row .joq-input{flex:1 1 auto;min-width:0;border-right:0}
.joq-link__row .joq-btn{flex:0 0 auto}
.joq-link.is-busy .joq-btn{opacity:.6;cursor:progress}
.joq-help--top{margin:0 0 10px}
.joq-kit{margin-top:22px;padding-top:18px;border-top:1px solid var(--t-rule)}
@media (min-width:768px){
	.joq-frame{width:100%;margin-inline:0;max-width:480px;margin-left:auto;margin-right:auto}
	.joq-frame[data-size="9x16"]{max-width:min(480px,calc(78vh * 9 / 16))}
	.joq-tabs{display:none}
	.joq-tool__inputs,.joq-tool__design{display:flex;flex-direction:column;gap:16px;margin-top:16px}
	.joq-panel{display:block;border-top:1px solid var(--t-rule);padding:20px}
	.joq-strip{margin:0;padding:0 0 6px}
	.joq-recent__list{margin:8px 0 0;padding:0 0 6px}
	.joq-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1100px){
	.joq-tool__grid{display:grid;grid-template-columns:320px minmax(0,480px) 320px;grid-template-areas:"inputs stage design";justify-content:space-between;align-items:start;column-gap:32px}
	.joq-tool__stage{grid-area:stage;position:sticky;top:calc(16px + var(--wp-admin--admin-bar--height,0px));--joq-fit:calc(100vh - 232px - var(--wp-admin--admin-bar--height,0px))}
	.joq-tool__stage .joq-frame{max-width:min(480px,calc(var(--joq-fit) * 4 / 5))}
	.joq-tool__stage .joq-frame[data-size="1x1"]{max-width:min(480px,var(--joq-fit))}
	.joq-tool__stage .joq-frame[data-size="9x16"]{max-width:min(480px,calc(var(--joq-fit) * 9 / 16))}
	.joq-tool__inputs{grid-area:inputs;margin-top:0}
	.joq-tool__design{grid-area:design;margin-top:0}
	.joq-frame{box-shadow:0 1px 2px rgba(17,17,17,.12),0 8px 24px -12px rgba(17,17,17,.28)}
	.joq-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
	.joq-actions [data-joq-action="png"]{grid-column:1/-1}
	.joq-actions [hidden]{display:none!important}
	.joq-sizes--stage{display:grid;max-width:480px;margin-left:auto;margin-right:auto}
	.joq-savebar{display:none!important}
	.joq-tool{padding-bottom:0}
	.joq-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;overflow:visible}
	.joq-strip__item{flex:none}
	.joq-choices{grid-template-columns:1fr}
	.joq-tool.is-typing .joq-frame.is-live .joq-frame__canvas{position:absolute;inset:0;width:100%;height:100%;border:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.joq-tool *{transition:none!important}}